tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

no-base-design-tokens.rst (998B)

      1 =====================
      2 no-base-design-tokens
      3 =====================
      4 
      5 This rule checks that CSS declarations do not use `base color token variables
      6 <https://firefox-source-docs.mozilla.org/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.html#base>`_
      7 directly. Instead, developers should reference higher-level, semantic tokens to
      8 ensure color usage is consistent and maintainable.
      9 
     10 Examples of incorrect code for this rule:
     11 -----------------------------------------
     12 
     13 .. code-block:: css
     14 
     15    a {
     16      color: var(--color-blue-60);
     17    }
     18 
     19 .. code-block:: css
     20 
     21    .custom-button {
     22      background-color: var(--color-gray-90);
     23    }
     24 
     25 Examples of correct code for this rule:
     26 ---------------------------------------
     27 
     28 .. code-block:: css
     29 
     30    a {
     31      color: var(--text-color-link);
     32    }
     33 
     34 .. code-block:: css
     35 
     36    :root {
     37      --custom-button-background-color: var(--color-gray-90);
     38    }
     39 
     40    .custom-button {
     41      background-color: var(--custom-button-background-color);
     42    }