tor-browser

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

box-shadow.rst (1785B)

      1 ==========
      2 box-shadow
      3 ==========
      4 
      5 The ``use-design-tokens`` rule checks that CSS ``box-shadow`` declarations use
      6 design token variables instead of hardcoded values. This ensures consistent
      7 box-shadow 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  .button {
     16    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     17  }
     18 
     19 .. code-block:: css
     20 
     21  .element {
     22    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
     23  }
     24 
     25 Examples of correct token usage for this rule:
     26 ----------------------------------------------
     27 
     28 .. code-block:: css
     29 
     30  .card {
     31    box-shadow: var(--box-shadow-card);
     32  }
     33 
     34 .. code-block:: css
     35 
     36  .card-hover {
     37    box-shadow: var(--box-shadow-card-hover);
     38  }
     39 
     40 .. code-block:: css
     41 
     42  .level-1-shadow {
     43    box-shadow: var(--box-shadow-level-1);
     44  }
     45 
     46 .. code-block:: css
     47 
     48  .level-2-shadow {
     49    box-shadow: var(--box-shadow-level-2);
     50  }
     51 
     52 .. code-block:: css
     53 
     54  .level-3-shadow {
     55    box-shadow: var(--box-shadow-level-3);
     56  }
     57 
     58 .. code-block:: css
     59 
     60  .level-4-shadow {
     61    box-shadow: var(--box-shadow-level-4);
     62  }
     63 
     64 .. code-block:: css
     65 
     66  .popup {
     67    box-shadow: var(--box-shadow-popup);
     68  }
     69 
     70 .. code-block:: css
     71 
     72  .tab {
     73    box-shadow: var(--box-shadow-tab);
     74  }
     75 
     76 The rule also allows these non-token values:
     77 
     78 .. code-block:: css
     79 
     80  .inherited-shadow {
     81    box-shadow: inherit;
     82  }
     83 
     84 .. code-block:: css
     85 
     86  .initial-shadow {
     87    box-shadow: initial;
     88  }
     89 
     90 .. code-block:: css
     91 
     92  .revert-shadow {
     93    box-shadow: revert;
     94  }
     95 
     96 .. code-block:: css
     97 
     98  .revert-layer-shadow {
     99    box-shadow: revert-layer;
    100  }
    101 
    102 .. code-block:: css
    103 
    104  .unset-shadow {
    105    box-shadow: unset;
    106  }
    107 
    108 .. code-block:: css
    109 
    110  .no-shadow {
    111    box-shadow: none;
    112  }