tor-browser

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

use-size-tokens.rst (1442B)

      1 ===============
      2 use-size-tokens
      3 ===============
      4 
      5 This rule checks that CSS declarations use size design token variables
      6 instead of hardcoded values.
      7 
      8 Examples of incorrect token usage for this rule:
      9 ------------------------------------------------
     10 
     11 .. code-block:: css
     12 
     13  .card {
     14    min-width: 48px;
     15  }
     16 
     17 .. code-block:: css
     18 
     19  .button {
     20    height: 0.75rem;
     21  }
     22 
     23 .. code-block:: css
     24 
     25  .icon {
     26    width: 20px;
     27  }
     28 
     29 
     30 .. code-block:: css
     31 
     32  .icon {
     33    width: calc(2 * 16px);
     34  }
     35 
     36 .. code-block:: css
     37 
     38  :root {
     39    --local-size: 24px;
     40  }
     41 
     42  .button {
     43    min-height: var(--local-size);
     44  }
     45 
     46 Examples of correct code for this rule:
     47 ---------------------------------------
     48 
     49 .. code-block:: css
     50 
     51  .card {
     52    min-width: var(--size-item-large);
     53  }
     54 
     55 .. code-block:: css
     56 
     57  .button {
     58    height: var(--button-min-height);
     59  }
     60 
     61 .. code-block:: css
     62 
     63  .icon {
     64    width: var(--icon-size-medium);
     65  }
     66 
     67 .. code-block:: css
     68 
     69  .icon {
     70    width: var(--icon-size-medium, 28px);
     71  }
     72 
     73 .. code-block:: css
     74 
     75  .icon {
     76    width: calc(2 * var(--icon-size-medium));
     77  }
     78 
     79 .. code-block:: css
     80 
     81  .icon {
     82    width: calc(2 * var(--icon-size-medium, 28px));
     83  }
     84 
     85 .. code-block:: css
     86 
     87  :root {
     88    --local-size: var(--size-item-small);
     89  }
     90 
     91  .button {
     92    min-height: var(--local-size);
     93  }
     94 
     95 .. code-block:: css
     96 
     97  .button {
     98    width: 100%;
     99  }
    100 
    101 .. code-block:: css
    102 
    103  .button {
    104    width: auto;
    105  }
    106 
    107 .. code-block:: css
    108 
    109  .icon {
    110    max-height: 2em;
    111  }