tor-browser

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

border-radius.rst (3074B)

      1 =============
      2 border-radius
      3 =============
      4 
      5 The ``use-design-tokens`` rule checks that CSS ``border-radius`` declarations use
      6 design token variables instead of hardcoded values. This ensures consistent
      7 border-radius usage across the application and makes it easier to maintain design
      8 system consistency.
      9 
     10 Examples of incorrect code for this rule:
     11 -----------------------------------------
     12 
     13 .. code-block:: css
     14 
     15  .custom-button {
     16    border-radius: 0.5rem;
     17  }
     18 
     19 .. code-block:: css
     20 
     21  .card {
     22    border-radius: 8px;
     23  }
     24 
     25 .. code-block:: css
     26 
     27  .avatar {
     28    border-radius: 50%;
     29  }
     30 
     31 Examples of correct token usage for this rule:
     32 ----------------------------------------------
     33 
     34 .. code-block:: css
     35 
     36  .custom-button {
     37    border-radius: var(--border-radius-small);
     38  }
     39 
     40 .. code-block:: css
     41 
     42  .custom-button {
     43    border-radius: var(--border-radius-medium);
     44  }
     45 
     46 .. code-block:: css
     47 
     48  .custom-button {
     49    border-radius: var(--border-radius-circle);
     50  }
     51 
     52 .. code-block:: css
     53 
     54  .custom-button {
     55    border-radius: var(--border-radius-large);
     56  }
     57 
     58 .. code-block:: css
     59 
     60  /* Local CSS variables that reference valid border-radius tokens are allowed */
     61  :root {
     62    --custom-border-radius: var(--border-radius-small);
     63  }
     64 
     65  .custom-button {
     66    border-radius: var(--custom-border-radius);
     67  }
     68 
     69 .. code-block:: css
     70 
     71    .custom-button {
     72      border-radius: var(--custom-border-radius, --border-radius-small);
     73    }
     74 
     75 
     76 The rule also allows these values non-token values:
     77 
     78 .. code-block:: css
     79 
     80    .no-radius {
     81      border-radius: 0;
     82    }
     83 
     84 .. code-block:: css
     85 
     86    .inherited-radius {
     87      border-radius: inherit;
     88    }
     89 
     90 .. code-block:: css
     91 
     92    .unset-radius {
     93      border-radius: unset;
     94    }
     95 
     96 .. code-block:: css
     97 
     98    .initial-radius {
     99      border-radius: initial;
    100    }
    101 
    102 Autofix functionality
    103 ---------------------
    104 
    105 This rule can automatically fix some violations by replacing raw values with
    106 appropriate design tokens. Examples of autofixable violations:
    107 
    108 .. code-block:: css
    109 
    110  /* Before */
    111  .a {
    112    border-radius: 50%;
    113  }
    114 
    115  /* After autofix */
    116  .a {
    117    border-radius: var(--border-radius-circle);
    118  }
    119 
    120 .. code-block:: css
    121 
    122  /* Before */
    123  .a {
    124    border-radius: 100%;
    125  }
    126 
    127  /* After autofix */
    128  .a {
    129    border-radius: var(--border-radius-circle);
    130  }
    131 
    132 .. code-block:: css
    133 
    134  /* Before */
    135  .a {
    136    border-radius: 1000px;
    137  }
    138 
    139  /* After autofix */
    140  .a {
    141    border-radius: var(--border-radius-circle);
    142  }
    143 
    144 .. code-block:: css
    145 
    146  /* Before */
    147  .a {
    148    border-radius: 4px;
    149  }
    150 
    151  /* After autofix */
    152  .a {
    153    border-radius: var(--border-radius-small);
    154  }
    155 
    156 .. code-block:: css
    157 
    158  /* Before */
    159  .a {
    160    border-radius: 8px;
    161  }
    162 
    163  /* After autofix */
    164  .a {
    165    border-radius: var(--border-radius-medium);
    166  }
    167 
    168 .. code-block:: css
    169 
    170  /* Before */
    171  .a {
    172    border-radius: 16px;
    173  }
    174 
    175  /* After autofix */
    176  .a {
    177    border-radius: var(--border-radius-large);
    178  }
    179 
    180 .. code-block:: css
    181 
    182  /* Before */
    183  .a {
    184    border-radius: 4px 8px;
    185  }
    186 
    187  /* After autofix */
    188  .a {
    189    border-radius: var(--border-radius-small) var(--border-radius-medium);
    190  }