tor-browser

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

font-weight.rst (3673B)

      1 ===========
      2 font-weight
      3 ===========
      4 
      5 The ``use-design-tokens`` rule checks that CSS ``font-weight`` declarations use
      6 design token variables instead of hardcoded values. This ensures consistent
      7 font-weight usage across the application and makes it easier to maintain design
      8 system consistency.
      9 
     10 This rule is autofixable and can automatically replace some font-weight values
     11 with appropriate design tokens where possible.
     12 
     13 Examples of incorrect code for this rule:
     14 -----------------------------------------
     15 
     16 .. code-block:: css
     17 
     18  .bold-text {
     19    font-weight: bold;
     20  }
     21 
     22 .. code-block:: css
     23 
     24  .bolder-text {
     25    font-weight: bolder;
     26  }
     27 
     28 .. code-block:: css
     29 
     30  .lighter-text {
     31    font-weight: lighter;
     32  }
     33 
     34 .. code-block:: css
     35 
     36  .custom-text {
     37    font-weight: 400;
     38  }
     39 
     40 .. code-block:: css
     41 
     42  .heading {
     43    font-weight: 600;
     44  }
     45 
     46 .. code-block:: css
     47 
     48  .bold-text {
     49    font-weight: 700;
     50  }
     51 
     52 .. code-block:: css
     53 
     54  .light-text {
     55    font-weight: 300;
     56  }
     57 
     58 .. code-block:: css
     59 
     60  .heavy-text {
     61    font-weight: 900;
     62  }
     63 
     64 Examples of correct token usage for this rule:
     65 ----------------------------------------------
     66 
     67 .. code-block:: css
     68 
     69  .normal-text {
     70    font-weight: var(--font-weight);
     71  }
     72 
     73 .. code-block:: css
     74 
     75  .semibold-text {
     76    font-weight: var(--font-weight-semibold);
     77  }
     78 
     79 .. code-block:: css
     80 
     81  .bold-text {
     82    font-weight: var(--font-weight-bold);
     83  }
     84 
     85 .. code-block:: css
     86 
     87  .button-text {
     88    font-weight: var(--button-font-weight);
     89  }
     90 
     91 .. code-block:: css
     92 
     93  .heading-text {
     94    font-weight: var(--heading-font-weight);
     95  }
     96 
     97 .. code-block:: css
     98 
     99  /* Local CSS variables that reference valid font-weight keywords are allowed */
    100  :root {
    101    --custom-font-weight: normal;
    102  }
    103 
    104  .custom-text {
    105    font-weight: var(--custom-font-weight);
    106  }
    107 
    108 .. code-block:: css
    109 
    110  /* Local CSS variables that reference valid font-weight tokens are allowed */
    111  :root {
    112    --custom-font-weight: var(--font-weight-semibold);
    113  }
    114 
    115  .custom-text {
    116    font-weight: var(--custom-font-weight);
    117  }
    118 
    119 .. code-block:: css
    120 
    121  .custom-text {
    122    font-weight: var(--custom-font-weight, var(--font-weight-semibold));
    123  }
    124 
    125 The rule also allows these non-token values:
    126 
    127 .. code-block:: css
    128 
    129  .normal-text {
    130    font-weight: normal;
    131  }
    132 
    133 .. code-block:: css
    134 
    135  .inherited-text {
    136    font-weight: inherit;
    137  }
    138 
    139 .. code-block:: css
    140 
    141  .initial-text {
    142    font-weight: initial;
    143  }
    144 
    145 .. code-block:: css
    146 
    147  .revert-text {
    148    font-weight: revert;
    149  }
    150 
    151 .. code-block:: css
    152 
    153  .revert-layer-text {
    154    font-weight: revert-layer;
    155  }
    156 
    157 .. code-block:: css
    158 
    159  .unset-text {
    160    font-weight: unset;
    161  }
    162 
    163 Autofix functionality
    164 ---------------------
    165 
    166 This rule can automatically fix some violations by replacing values with
    167 appropriate design tokens:
    168 
    169 - ``200`` → ``normal``
    170 - ``300`` → ``normal``
    171 - ``400`` → ``normal``
    172 - ``lighter`` → ``normal``
    173 - ``500`` → ``var(--font-weight-semibold)``
    174 - ``510`` → ``var(--font-weight-semibold)``
    175 - ``600`` → ``var(--font-weight-semibold)``
    176 - ``700`` → ``var(--font-weight-bold)``
    177 - ``800`` → ``var(--font-weight-bold)``
    178 - ``bold`` → ``var(--font-weight-bold)``
    179 - ``bolder`` → ``var(--font-weight-bold)``
    180 
    181 Examples of autofixable violations:
    182 
    183 .. code-block:: css
    184 
    185  /* Before */
    186  .normal-text {
    187    font-weight: 400;
    188  }
    189 
    190  /* After autofix */
    191  .normal-text {
    192    font-weight: normal;
    193  }
    194 
    195 .. code-block:: css
    196 
    197  /* Before */
    198  .semibold-text {
    199    font-weight: 600;
    200  }
    201 
    202  /* After autofix */
    203  .semibold-text {
    204    font-weight: var(--font-weight-semibold);
    205  }
    206 
    207 .. code-block:: css
    208 
    209  /* Before */
    210  .bold-text {
    211    font-weight: 700;
    212  }
    213 
    214  /* After autofix */
    215  .bold-text {
    216    font-weight: var(--font-weight-bold);
    217  }