@wordpress/theme 0.3.1-next.8b30e05b0.0 → 0.4.1-next.738bb1424.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +114 -40
  3. package/build/color-ramps/{index.js → index.cjs} +8 -8
  4. package/build/color-ramps/lib/{color-utils.js → color-utils.cjs} +2 -2
  5. package/build/color-ramps/lib/{constants.js → constants.cjs} +2 -2
  6. package/build/color-ramps/lib/{default-ramps.js → default-ramps.cjs} +66 -66
  7. package/build/color-ramps/lib/{default-ramps.js.map → default-ramps.cjs.map} +1 -1
  8. package/build/color-ramps/lib/{find-color-with-constraints.js → find-color-with-constraints.cjs} +6 -6
  9. package/build/color-ramps/lib/find-color-with-constraints.cjs.map +7 -0
  10. package/build/color-ramps/lib/{index.js → index.cjs} +6 -6
  11. package/build/color-ramps/lib/index.cjs.map +7 -0
  12. package/build/color-ramps/lib/{ramp-configs.js → ramp-configs.cjs} +1 -1
  13. package/build/color-ramps/lib/{register-color-spaces.js → register-color-spaces.cjs} +1 -1
  14. package/build/color-ramps/lib/{taper-chroma.js → taper-chroma.cjs} +20 -46
  15. package/build/color-ramps/lib/taper-chroma.cjs.map +7 -0
  16. package/build/color-ramps/lib/{types.js → types.cjs} +1 -1
  17. package/build/color-ramps/lib/{utils.js → utils.cjs} +4 -4
  18. package/build/{context.js → context.cjs} +1 -1
  19. package/build/{index.js → index.cjs} +2 -2
  20. package/build/index.cjs.map +7 -0
  21. package/build/{lock-unlock.js → lock-unlock.cjs} +1 -1
  22. package/build/prebuilt/js/{design-tokens.js → design-tokens.cjs} +33 -7
  23. package/build/prebuilt/js/design-tokens.cjs.map +7 -0
  24. package/build/prebuilt/ts/{color-tokens.js → color-tokens.cjs} +36 -14
  25. package/build/prebuilt/ts/color-tokens.cjs.map +7 -0
  26. package/build/{token-id.js → prebuilt/ts/token-types.cjs} +4 -16
  27. package/build/prebuilt/ts/token-types.cjs.map +7 -0
  28. package/build/{private-apis.js → private-apis.cjs} +4 -4
  29. package/build/{theme-provider.js → theme-provider.cjs} +3 -3
  30. package/build/{types.js → types.cjs} +1 -1
  31. package/build/{use-theme-provider-styles.js → use-theme-provider-styles.cjs} +6 -6
  32. package/build-module/color-ramps/index.js +7 -7
  33. package/build-module/color-ramps/lib/color-utils.js +1 -1
  34. package/build-module/color-ramps/lib/constants.js +1 -1
  35. package/build-module/color-ramps/lib/default-ramps.js +65 -65
  36. package/build-module/color-ramps/lib/default-ramps.js.map +1 -1
  37. package/build-module/color-ramps/lib/find-color-with-constraints.js +5 -5
  38. package/build-module/color-ramps/lib/find-color-with-constraints.js.map +2 -2
  39. package/build-module/color-ramps/lib/index.js +5 -5
  40. package/build-module/color-ramps/lib/index.js.map +2 -2
  41. package/build-module/color-ramps/lib/taper-chroma.js +20 -47
  42. package/build-module/color-ramps/lib/taper-chroma.js.map +2 -2
  43. package/build-module/color-ramps/lib/utils.js +3 -3
  44. package/build-module/index.js +1 -1
  45. package/build-module/index.js.map +2 -2
  46. package/build-module/prebuilt/js/design-tokens.js +32 -6
  47. package/build-module/prebuilt/js/design-tokens.js.map +2 -2
  48. package/build-module/prebuilt/ts/color-tokens.js +35 -13
  49. package/build-module/prebuilt/ts/color-tokens.js.map +2 -2
  50. package/build-module/prebuilt/ts/token-types.js +1 -0
  51. package/build-module/private-apis.js +3 -3
  52. package/build-module/theme-provider.js +2 -2
  53. package/build-module/use-theme-provider-styles.js +4 -4
  54. package/build-types/color-ramps/lib/find-color-with-constraints.d.ts +3 -4
  55. package/build-types/color-ramps/lib/find-color-with-constraints.d.ts.map +1 -1
  56. package/build-types/color-ramps/lib/taper-chroma.d.ts +4 -4
  57. package/build-types/color-ramps/lib/taper-chroma.d.ts.map +1 -1
  58. package/build-types/index.d.ts +2 -0
  59. package/build-types/index.d.ts.map +1 -1
  60. package/build-types/prebuilt/ts/color-tokens.d.ts.map +1 -1
  61. package/build-types/prebuilt/ts/token-types.d.ts +49 -0
  62. package/build-types/prebuilt/ts/token-types.d.ts.map +1 -0
  63. package/package.json +15 -7
  64. package/src/color-ramps/lib/default-ramps.ts +65 -65
  65. package/src/color-ramps/lib/find-color-with-constraints.ts +11 -7
  66. package/src/color-ramps/lib/index.ts +4 -4
  67. package/src/color-ramps/lib/taper-chroma.ts +32 -63
  68. package/src/index.ts +2 -1
  69. package/src/prebuilt/css/design-tokens.css +72 -28
  70. package/src/prebuilt/js/design-tokens.js +32 -6
  71. package/src/prebuilt/ts/color-tokens.ts +31 -9
  72. package/src/prebuilt/ts/token-types.ts +125 -0
  73. package/bin/generate-default-ramps/index.ts +0 -49
  74. package/bin/generate-primitive-tokens/index.ts +0 -120
  75. package/bin/terrazzo-plugin-ds-tokens-docs/index.ts +0 -84
  76. package/bin/terrazzo-plugin-figma-ds-token-manager/index.ts +0 -217
  77. package/bin/terrazzo-plugin-figma-ds-token-manager/lib.ts +0 -1
  78. package/bin/terrazzo-plugin-inline-alias-values/index.ts +0 -113
  79. package/bin/terrazzo-plugin-known-wpds-css-variables/index.ts +0 -52
  80. package/build/color-ramps/lib/find-color-with-constraints.js.map +0 -7
  81. package/build/color-ramps/lib/index.js.map +0 -7
  82. package/build/color-ramps/lib/taper-chroma.js.map +0 -7
  83. package/build/index.js.map +0 -7
  84. package/build/prebuilt/js/design-tokens.js.map +0 -7
  85. package/build/prebuilt/json/figma.json +0 -715
  86. package/build/prebuilt/ts/color-tokens.js.map +0 -7
  87. package/build/token-id.js.map +0 -7
  88. package/build/types/css-modules.d.js +0 -1
  89. package/build/types/css-modules.d.js.map +0 -7
  90. package/build-module/prebuilt/json/figma.json +0 -715
  91. package/build-module/token-id.js +0 -6
  92. package/build-module/token-id.js.map +0 -7
  93. package/build-module/types/css-modules.d.js +0 -1
  94. package/build-types/token-id.d.ts +0 -9
  95. package/build-types/token-id.d.ts.map +0 -1
  96. package/docs/ds-tokens.md +0 -150
  97. package/src/prebuilt/json/figma.json +0 -715
  98. package/src/test/token-id.test.ts +0 -12
  99. package/src/token-id.ts +0 -9
  100. package/src/types/css-modules.d.ts +0 -4
  101. package/terrazzo.config.ts +0 -126
  102. package/tokens/border.json +0 -34
  103. package/tokens/color.json +0 -1029
  104. package/tokens/dimension.json +0 -109
  105. package/tokens/elevation.json +0 -201
  106. package/tokens/typography.json +0 -93
  107. package/tsconfig.bin.json +0 -13
  108. package/tsconfig.bin.tsbuildinfo +0 -1
  109. package/tsconfig.json +0 -11
  110. package/tsconfig.src.json +0 -9
  111. package/tsconfig.src.tsbuildinfo +0 -1
  112. /package/build/color-ramps/{index.js.map → index.cjs.map} +0 -0
  113. /package/build/color-ramps/lib/{color-utils.js.map → color-utils.cjs.map} +0 -0
  114. /package/build/color-ramps/lib/{constants.js.map → constants.cjs.map} +0 -0
  115. /package/build/color-ramps/lib/{ramp-configs.js.map → ramp-configs.cjs.map} +0 -0
  116. /package/build/color-ramps/lib/{register-color-spaces.js.map → register-color-spaces.cjs.map} +0 -0
  117. /package/build/color-ramps/lib/{types.js.map → types.cjs.map} +0 -0
  118. /package/build/color-ramps/lib/{utils.js.map → utils.cjs.map} +0 -0
  119. /package/build/{context.js.map → context.cjs.map} +0 -0
  120. /package/build/{lock-unlock.js.map → lock-unlock.cjs.map} +0 -0
  121. /package/build/{private-apis.js.map → private-apis.cjs.map} +0 -0
  122. /package/build/{theme-provider.js.map → theme-provider.cjs.map} +0 -0
  123. /package/build/{types.js.map → types.cjs.map} +0 -0
  124. /package/build/{use-theme-provider-styles.js.map → use-theme-provider-styles.cjs.map} +0 -0
  125. /package/build-module/{types/css-modules.d.js.map → prebuilt/ts/token-types.js.map} +0 -0
package/build-module/token-id.js DELETED
@@ -1,6 +0,0 @@
1
- // packages/theme/src/token-id.ts
2
- var publicTokenId = (id) => id.replace(/\.(normal|resting|semantic|primitive)/g, "");
3
- export {
4
- publicTokenId
5
- };
6
- //# sourceMappingURL=token-id.js.map
package/build-module/token-id.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../src/token-id.ts"],
4
- "sourcesContent": ["/**\n * Normalizes a token ID by removing default states and visibility identifiers,\n * making it human-readable as a publicly-accessible variable name.\n *\n * @param id The token ID to normalize.\n * @return The normalized token ID.\n */\nexport const publicTokenId = ( id: string ) =>\n\tid.replace( /\\.(normal|resting|semantic|primitive)/g, '' );\n"],
5
- "mappings": ";AAOO,IAAM,gBAAgB,CAAE,OAC9B,GAAG,QAAS,0CAA0C,EAAG;",
6
- "names": []
7
- }
package/build-module/types/css-modules.d.js DELETED
@@ -1 +0,0 @@
1
- //# sourceMappingURL=css-modules.d.js.map
package/build-types/token-id.d.ts DELETED
@@ -1,9 +0,0 @@
1
- /**
2
- * Normalizes a token ID by removing default states and visibility identifiers,
3
- * making it human-readable as a publicly-accessible variable name.
4
- *
5
- * @param id The token ID to normalize.
6
- * @return The normalized token ID.
7
- */
8
- export declare const publicTokenId: (id: string) => string;
9
- //# sourceMappingURL=token-id.d.ts.map
package/build-types/token-id.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"token-id.d.ts","sourceRoot":"","sources":["../src/token-id.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,GAAK,IAAI,MAAM,WACkB,CAAC"}
package/docs/ds-tokens.md DELETED
@@ -1,150 +0,0 @@
1
- <!--
2
- This file is generated by @terrazzo/terrazzo-plugin-ds-tokens-docs.
3
- Do not edit directly.
4
- -->
5
-
6
- # DS Tokens reference
7
-
8
- ## Semantic tokens
9
-
10
- ### Border
11
-
12
- | Variable name | Description |
13
- | ------------------------------ | --------------------------- |
14
- | `--wpds-border-radius-x-small` | Extra small radius |
15
- | `--wpds-border-radius-small` | Small radius |
16
- | `--wpds-border-radius-medium` | Medium radius |
17
- | `--wpds-border-radius-large` | Large radius |
18
- | `--wpds-border-width-focus` | Border width for focus ring |
19
-
20
- ### Color
21
-
22
- | Variable name | Description |
23
- | ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
24
- | `--wpds-color-bg-surface-neutral` | Background color for surfaces with normal emphasis. |
25
- | `--wpds-color-bg-surface-neutral-strong` | Background color for surfaces with strong emphasis. |
26
- | `--wpds-color-bg-surface-neutral-weak` | Background color for surfaces with weak emphasis. |
27
- | `--wpds-color-bg-surface-brand` | Background color for surfaces with brand tone and normal emphasis. |
28
- | `--wpds-color-bg-surface-success` | Background color for surfaces with success tone and normal emphasis. |
29
- | `--wpds-color-bg-surface-success-weak` | Background color for surfaces with success tone and weak emphasis. |
30
- | `--wpds-color-bg-surface-info` | Background color for surfaces with info tone and normal emphasis. |
31
- | `--wpds-color-bg-surface-info-weak` | Background color for surfaces with info tone and weak emphasis. |
32
- | `--wpds-color-bg-surface-warning` | Background color for surfaces with warning tone and normal emphasis. |
33
- | `--wpds-color-bg-surface-warning-weak` | Background color for surfaces with warning tone and weak emphasis. |
34
- | `--wpds-color-bg-surface-caution` | Background color for surfaces with caution tone and normal emphasis. |
35
- | `--wpds-color-bg-surface-caution-weak` | Background color for surfaces with caution tone and weak emphasis. |
36
- | `--wpds-color-bg-surface-error` | Background color for surfaces with error tone and normal emphasis. |
37
- | `--wpds-color-bg-surface-error-weak` | Background color for surfaces with error tone and weak emphasis. |
38
- | `--wpds-color-bg-interactive-neutral` | Background color for interactive elements with neutral tone and normal emphasis. |
39
- | `--wpds-color-bg-interactive-neutral-active` | Background color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. |
40
- | `--wpds-color-bg-interactive-neutral-disabled` | Background color for interactive elements with neutral tone and normal emphasis, in their disabled state. |
41
- | `--wpds-color-bg-interactive-neutral-strong` | Background color for interactive elements with neutral tone and strong emphasis. |
42
- | `--wpds-color-bg-interactive-neutral-strong-active` | Background color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. |
43
- | `--wpds-color-bg-interactive-neutral-strong-disabled` | Background color for interactive elements with neutral tone and strong emphasis, in their disabled state. |
44
- | `--wpds-color-bg-interactive-neutral-weak` | Background color for interactive elements with neutral tone and weak emphasis. |
45
- | `--wpds-color-bg-interactive-neutral-weak-active` | Background color for interactive elements with neutral tone and weak emphasis that are hovered, focused, or active. |
46
- | `--wpds-color-bg-interactive-neutral-weak-disabled` | Background color for interactive elements with neutral tone and weak emphasis, in their disabled state. |
47
- | `--wpds-color-bg-interactive-brand` | Background color for interactive elements with brand tone and normal emphasis. |
48
- | `--wpds-color-bg-interactive-brand-active` | Background color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. |
49
- | `--wpds-color-bg-interactive-brand-disabled` | Background color for interactive elements with brand tone and normal emphasis, in their disabled state. |
50
- | `--wpds-color-bg-interactive-brand-strong` | Background color for interactive elements with brand tone and strong emphasis. |
51
- | `--wpds-color-bg-interactive-brand-strong-active` | Background color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
52
- | `--wpds-color-bg-interactive-brand-strong-disabled` | Background color for interactive elements with brand tone and strong emphasis, in their disabled state. |
53
- | `--wpds-color-bg-interactive-brand-weak` | Background color for interactive elements with brand tone and weak emphasis. |
54
- | `--wpds-color-bg-interactive-brand-weak-active` | Background color for interactive elements with brand tone and weak emphasis that are hovered, focused, or active. |
55
- | `--wpds-color-bg-interactive-brand-weak-disabled` | Background color for interactive elements with brand tone and weak emphasis, in their disabled state. |
56
- | `--wpds-color-bg-track-neutral-weak` | Background color for tracks with a neutral tone and weak emphasis (eg. scrollbar track). |
57
- | `--wpds-color-bg-track-neutral` | Background color for tracks with a neutral tone and normal emphasis (eg. slider or progressbar track). |
58
- | `--wpds-color-bg-thumb-neutral-weak` | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb). |
59
- | `--wpds-color-bg-thumb-neutral-weak-active` | Background color for thumbs with a neutral tone and weak emphasis (eg. scrollbar thumb) that are hovered, focused, or active. |
60
- | `--wpds-color-bg-thumb-brand` | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track). |
61
- | `--wpds-color-bg-thumb-brand-active` | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track) that are hovered, focused, or active. |
62
- | `--wpds-color-bg-thumb-brand-disabled` | Background color for thumbs with a brand tone and normal emphasis (eg. slider thumb and filled track), in their disabled state. |
63
- | `--wpds-color-fg-content-neutral` | Foreground color for content like text with normal emphasis. |
64
- | `--wpds-color-fg-content-neutral-weak` | Foreground color for content like text with weak emphasis. |
65
- | `--wpds-color-fg-content-success` | Foreground color for content like text with success tone and normal emphasis. |
66
- | `--wpds-color-fg-content-success-weak` | Foreground color for content like text with success tone and weak emphasis. |
67
- | `--wpds-color-fg-content-info` | Foreground color for content like text with info tone and normal emphasis. |
68
- | `--wpds-color-fg-content-info-weak` | Foreground color for content like text with info tone and weak emphasis. |
69
- | `--wpds-color-fg-content-warning` | Foreground color for content like text with warning tone and normal emphasis. |
70
- | `--wpds-color-fg-content-warning-weak` | Foreground color for content like text with warning tone and weak emphasis. |
71
- | `--wpds-color-fg-content-caution` | Foreground color for content like text with caution tone and normal emphasis. |
72
- | `--wpds-color-fg-content-caution-weak` | Foreground color for content like text with caution tone and weak emphasis. |
73
- | `--wpds-color-fg-content-error` | Foreground color for content like text with error tone and normal emphasis. |
74
- | `--wpds-color-fg-content-error-weak` | Foreground color for content like text with error tone and weak emphasis. |
75
- | `--wpds-color-fg-interactive-neutral` | Foreground color for interactive elements with neutral tone and normal emphasis. |
76
- | `--wpds-color-fg-interactive-neutral-active` | Foreground color for interactive elements with neutral tone and normal emphasis that are hovered, focused, or active. |
77
- | `--wpds-color-fg-interactive-neutral-disabled` | Foreground color for interactive elements with neutral tone and normal emphasis, in their disabled state. |
78
- | `--wpds-color-fg-interactive-neutral-strong` | Foreground color for interactive elements with neutral tone and strong emphasis. |
79
- | `--wpds-color-fg-interactive-neutral-strong-active` | Foreground color for interactive elements with neutral tone and strong emphasis that are hovered, focused, or active. |
80
- | `--wpds-color-fg-interactive-neutral-strong-disabled` | Foreground color for interactive elements with neutral tone and strong emphasis, in their disabled state. |
81
- | `--wpds-color-fg-interactive-neutral-weak` | Foreground color for interactive elements with neutral tone and weak emphasis. |
82
- | `--wpds-color-fg-interactive-neutral-weak-disabled` | Foreground color for interactive elements with neutral tone and weak emphasis, in their disabled state. |
83
- | `--wpds-color-fg-interactive-brand` | Foreground color for interactive elements with brand tone and normal emphasis. |
84
- | `--wpds-color-fg-interactive-brand-active` | Foreground color for interactive elements with brand tone and normal emphasis that are hovered, focused, or active. |
85
- | `--wpds-color-fg-interactive-brand-disabled` | Foreground color for interactive elements with brand tone and normal emphasis, in their disabled state. |
86
- | `--wpds-color-fg-interactive-brand-strong` | Foreground color for interactive elements with brand tone and strong emphasis. |
87
- | `--wpds-color-fg-interactive-brand-strong-active` | Foreground color for interactive elements with brand tone and strong emphasis that are hovered, focused, or active. |
88
- | `--wpds-color-fg-interactive-brand-strong-disabled` | Foreground color for interactive elements with brand tone and strong emphasis, in their disabled state. |
89
- | `--wpds-color-stroke-surface-neutral` | Decorative stroke color used to define neutrally-toned surface boundaries with normal emphasis. |
90
- | `--wpds-color-stroke-surface-neutral-weak` | Decorative stroke color used to define neutrally-toned surface boundaries with weak emphasis. |
91
- | `--wpds-color-stroke-surface-neutral-strong` | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. |
92
- | `--wpds-color-stroke-surface-brand` | Decorative stroke color used to define brand-toned surface boundaries with normal emphasis. |
93
- | `--wpds-color-stroke-surface-brand-strong` | Decorative stroke color used to define neutrally-toned surface boundaries with strong emphasis. |
94
- | `--wpds-color-stroke-surface-success` | Decorative stroke color used to define success-toned surface boundaries with normal emphasis. |
95
- | `--wpds-color-stroke-surface-success-strong` | Decorative stroke color used to define success-toned surface boundaries with strong emphasis. |
96
- | `--wpds-color-stroke-surface-info` | Decorative stroke color used to define info-toned surface boundaries with normal emphasis. |
97
- | `--wpds-color-stroke-surface-info-strong` | Decorative stroke color used to define info-toned surface boundaries with strong emphasis. |
98
- | `--wpds-color-stroke-surface-warning` | Decorative stroke color used to define warning-toned surface boundaries with normal emphasis. |
99
- | `--wpds-color-stroke-surface-warning-strong` | Decorative stroke color used to define warning-toned surface boundaries with strong emphasis. |
100
- | `--wpds-color-stroke-surface-error` | Decorative stroke color used to define error-toned surface boundaries with normal emphasis. |
101
- | `--wpds-color-stroke-surface-error-strong` | Decorative stroke color used to define error-toned surface boundaries with strong emphasis. |
102
- | `--wpds-color-stroke-interactive-neutral` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis. |
103
- | `--wpds-color-stroke-interactive-neutral-active` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis that are hovered, focused, or active. |
104
- | `--wpds-color-stroke-interactive-neutral-disabled` | Accessible stroke color used for interactive neutrally-toned elements with normal emphasis, in their disabled state. |
105
- | `--wpds-color-stroke-interactive-neutral-strong` | Accessible stroke color used for interactive neutrally-toned elements with strong emphasis. |
106
- | `--wpds-color-stroke-interactive-brand` | Accessible stroke color used for interactive brand-toned elements with normal emphasis. |
107
- | `--wpds-color-stroke-interactive-brand-active` | Accessible stroke color used for interactive brand-toned elements with normal emphasis that are hovered, focused, or active. |
108
- | `--wpds-color-stroke-interactive-brand-disabled` | Accessible stroke color used for interactive brand-toned elements with normal emphasis, in their disabled state. |
109
- | `--wpds-color-stroke-interactive-error-strong` | Accessible stroke color used for interactive error-toned elements with strong emphasis. |
110
- | `--wpds-color-stroke-focus-brand` | Accessible stroke color applied to focus rings. |
111
-
112
- ### Dimension
113
-
114
- | Variable name | Description |
115
- | -------------------------------------- | ----------------------------------- |
116
- | `--wpds-dimension-base` | Base dimension unit |
117
- | `--wpds-dimension-padding-surface-2xs` | 2x extra small spacing for surfaces |
118
- | `--wpds-dimension-padding-surface-xs` | Extra small spacing for surfaces |
119
- | `--wpds-dimension-padding-surface-sm` | Small spacing for surfaces |
120
- | `--wpds-dimension-padding-surface-md` | Medium spacing for surfaces |
121
- | `--wpds-dimension-padding-surface-lg` | Large spacing for surfaces |
122
-
123
- ### Elevation
124
-
125
- | Variable name | Description |
126
- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
127
- | `--wpds-elevation-x-small` | For sections and containers that group related content and controls, which may overlap other content. Example: Preview Frame. |
128
- | `--wpds-elevation-small` | For components that provide contextual feedback without being intrusive. Generally non-interruptive. Example: Tooltips, Snackbar. |
129
- | `--wpds-elevation-medium` | For components that offer additional actions. Example: Menus, Command Palette |
130
- | `--wpds-elevation-large` | For components that confirm decisions or handle necessary interruptions. Example: Modals. |
131
-
132
- ### Typography
133
-
134
- | Variable name | Description |
135
- | ---------------------------------- | ----------------------- |
136
- | `--wpds-font-family-heading` | Headings font family |
137
- | `--wpds-font-family-body` | Body font family |
138
- | `--wpds-font-family-mono` | Monospace font family |
139
- | `--wpds-font-size-x-small` | Extra small font size |
140
- | `--wpds-font-size-small` | Small font size |
141
- | `--wpds-font-size-medium` | Medium font size |
142
- | `--wpds-font-size-large` | Large font size |
143
- | `--wpds-font-size-x-large` | Extra large font size |
144
- | `--wpds-font-size-2x-large` | 2X large font size |
145
- | `--wpds-font-line-height-x-small` | Extra small line height |
146
- | `--wpds-font-line-height-small` | Small line height |
147
- | `--wpds-font-line-height-medium` | Medium line height |
148
- | `--wpds-font-line-height-large` | Large line height |
149
- | `--wpds-font-line-height-x-large` | Extra large line height |
150
- | `--wpds-font-line-height-2x-large` | 2X large line height |