no-non-semantic-token-usage.rst (1549B)
1 =========================== 2 no-non-semantic-token-usage 3 =========================== 4 5 This rule checks that design tokens are only used with the appropriate CSS 6 properties. This ensures that that design tokens are not used with 7 unexpected properties, such as a font-size token to set a border-width. 8 This rule allows for variables used with fallback values and variables 9 used in shorthand properties. 10 11 Examples of incorrect token usage for this rule: 12 ------------------------------------------------ 13 14 .. code-block:: css 15 16 .card { 17 background-color: var(--border-color); 18 } 19 20 .. code-block:: css 21 22 .card { 23 padding: var(--size-item-small); 24 } 25 26 .. code-block:: css 27 28 .card { 29 width: var(--space-small); 30 } 31 32 .. code-block:: css 33 34 .button { 35 border: var(--border-width) solid var(--text-color); 36 } 37 38 .. code-block:: css 39 40 :root { 41 --local-background-color: var(--text-color); 42 } 43 44 .button { 45 background-color: var(--local-background-color); 46 } 47 48 Examples of correct code for this rule: 49 --------------------------------------- 50 51 .. code-block:: css 52 53 .card { 54 background-color: var(--background-color-canvas); 55 } 56 57 .. code-block:: css 58 59 .card { 60 background-color: var(--background-color-canvas, #fff); 61 } 62 63 .. code-block:: css 64 65 .card { 66 background: repeat cover var(--background-color-canvas); 67 } 68 69 .. code-block:: css 70 71 .card { 72 background: var(--background-color-canvas), #fff; 73 } 74 75 .. code-block:: css 76 77 .button { 78 border: var(--border-width) solid var(--border-color); 79 }