tor-browser

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

space.rst (2398B)

      1 =====
      2 space
      3 =====
      4 
      5 The ``use-design-tokens`` rule checks that CSS spacing declarations (e.g. margins,
      6 padding, gaps, inset, etc.) use design token variables instead of hardcoded values.
      7 This ensures consistent spacing across the application and makes it easier to
      8 maintain design system consistency.
      9 
     10 Examples of incorrect code for this rule:
     11 -----------------------------------------
     12 
     13 .. code-block:: css
     14 
     15  .custom-button {
     16    padding: 0.5rem;
     17  }
     18 
     19 .. code-block:: css
     20 
     21  .card {
     22    margin-inline: 8px;
     23  }
     24 
     25 .. code-block:: css
     26 
     27  .overlay {
     28    inset: 1rem;
     29  }
     30 
     31 .. code-block:: css
     32 
     33  .grid {
     34    gap: 4px 12px;
     35  }
     36 
     37 Examples of correct token usage for this rule:
     38 ----------------------------------------------
     39 
     40 .. code-block:: css
     41 
     42  .custom-button {
     43    padding-block: var(--space-small);
     44  }
     45 
     46 .. code-block:: css
     47 
     48  .custom-button {
     49    padding-inline: var(--space-medium);
     50  }
     51 
     52 .. code-block:: css
     53 
     54  .custom-button {
     55    column-gap: var(--space-xxsmall);
     56  }
     57 
     58 .. code-block:: css
     59 
     60  .custom-button {
     61    margin-block-start: var(--space-large);
     62  }
     63 
     64 .. code-block:: css
     65 
     66  /* Local CSS variables that reference valid space tokens are allowed */
     67  :root {
     68    --custom-space: var(--space-xsmall);
     69  }
     70 
     71  .custom-button {
     72    padding: var(--custom-space);
     73  }
     74 
     75 .. code-block:: css
     76 
     77  .custom-button {
     78    margin-inline-end: var(--custom-space, --space-xlarge);
     79  }
     80 
     81 The rule also allows these values to be non-token values:
     82 
     83 .. code-block:: css
     84 
     85  .inherited-inset {
     86    inset: inherit;
     87  }
     88 
     89 .. code-block:: css
     90 
     91  .unset-padding {
     92    padding: unset;
     93  }
     94 
     95 .. code-block:: css
     96 
     97  .initial-row-gap {
     98    row-gap: initial;
     99  }
    100 
    101 .. code-block:: css
    102 
    103  .auto-margin {
    104    margin-inline: auto;
    105  }
    106 
    107 .. code-block:: css
    108 
    109  .zero-padding {
    110    padding: 0;
    111  }
    112 
    113 Autofix functionality
    114 ---------------------
    115 
    116 This rule can automatically fix some violations by replacing common pixel values with
    117 appropriate space tokens. Examples of autofixable violations:
    118 
    119 .. code-block:: css
    120 
    121  /* Before */
    122  .a {
    123    margin: 2px;
    124  }
    125 
    126  /* After autofix */
    127  .a {
    128    margin: var(--space-xxsmall);
    129  }
    130 
    131 .. code-block:: css
    132 
    133  /* Before */
    134  .a {
    135    padding: 8px 16px;
    136  }
    137 
    138  /* After autofix */
    139  .a {
    140    padding: var(--space-small) var(--space-large);
    141  }
    142 
    143 .. code-block:: css
    144 
    145  /* Before */
    146  .a {
    147    gap: 24px 32px;
    148  }
    149 
    150  /* After autofix */
    151  .a {
    152    gap: var(--space-xlarge) var(--space-xxlarge);
    153  }