@kaizen/design-tokens 3.1.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 (129) hide show
  1. package/CHANGELOG.md +773 -0
  2. package/LICENSE +21 -0
  3. package/README.md +66 -0
  4. package/dist/index.d.ts +8 -0
  5. package/dist/index.d.ts.map +1 -0
  6. package/dist/index.js +23 -0
  7. package/dist/react/ThemeProvider.d.ts +13 -0
  8. package/dist/react/ThemeProvider.d.ts.map +1 -0
  9. package/dist/react/ThemeProvider.js +42 -0
  10. package/dist/react/index.d.ts +2 -0
  11. package/dist/react/index.d.ts.map +1 -0
  12. package/dist/react/index.js +13 -0
  13. package/dist/src/ThemeManager.d.ts +23 -0
  14. package/dist/src/ThemeManager.d.ts.map +1 -0
  15. package/dist/src/ThemeManager.js +70 -0
  16. package/dist/src/lib/addExtraThemeEntries.d.ts +25 -0
  17. package/dist/src/lib/addExtraThemeEntries.d.ts.map +1 -0
  18. package/dist/src/lib/addExtraThemeEntries.js +56 -0
  19. package/dist/src/lib/cssVariables.d.ts +23 -0
  20. package/dist/src/lib/cssVariables.d.ts.map +1 -0
  21. package/dist/src/lib/cssVariables.js +33 -0
  22. package/dist/src/lib/makeCssVariableDefinitionsMap.d.ts +30 -0
  23. package/dist/src/lib/makeCssVariableDefinitionsMap.d.ts.map +1 -0
  24. package/dist/src/lib/makeCssVariableDefinitionsMap.js +57 -0
  25. package/dist/src/lib/makeCssVariableTheme.d.ts +35 -0
  26. package/dist/src/lib/makeCssVariableTheme.d.ts.map +1 -0
  27. package/dist/src/lib/makeCssVariableTheme.js +54 -0
  28. package/dist/src/lib/mapLeafsOfObject.d.ts +23 -0
  29. package/dist/src/lib/mapLeafsOfObject.d.ts.map +1 -0
  30. package/dist/src/lib/mapLeafsOfObject.js +59 -0
  31. package/dist/src/themes/heart.d.ts +3 -0
  32. package/dist/src/themes/heart.d.ts.map +1 -0
  33. package/dist/src/themes/heart.js +286 -0
  34. package/dist/src/themes/index.d.ts +4 -0
  35. package/dist/src/themes/index.d.ts.map +1 -0
  36. package/dist/src/themes/index.js +9 -0
  37. package/dist/src/themes/zen.d.ts +3 -0
  38. package/dist/src/themes/zen.d.ts.map +1 -0
  39. package/dist/src/themes/zen.js +293 -0
  40. package/dist/src/types.d.ts +205 -0
  41. package/dist/src/types.d.ts.map +1 -0
  42. package/dist/src/types.js +2 -0
  43. package/elm/Kaizen/Theme.elm +29 -0
  44. package/index.ts +9 -0
  45. package/less/animation.less +49 -0
  46. package/less/border.less +47 -0
  47. package/less/color.less +210 -0
  48. package/less/layout.less +8 -0
  49. package/less/shadow.less +12 -0
  50. package/less/spacing.less +20 -0
  51. package/less/typography.less +526 -0
  52. package/package.json +63 -0
  53. package/react/ThemeProvider.d.ts +12 -0
  54. package/react/ThemeProvider.js +43 -0
  55. package/react/ThemeProvider.js.map +1 -0
  56. package/react/ThemeProvider.tsx +39 -0
  57. package/react/index.d.ts +1 -0
  58. package/react/index.js +14 -0
  59. package/react/index.js.map +1 -0
  60. package/react/index.tsx +1 -0
  61. package/sass/animation.scss +49 -0
  62. package/sass/border.scss +47 -0
  63. package/sass/color.scss +210 -0
  64. package/sass/layout.scss +8 -0
  65. package/sass/shadow.scss +12 -0
  66. package/sass/spacing.scss +20 -0
  67. package/sass/typography.scss +526 -0
  68. package/src/ThemeManager.d.ts +22 -0
  69. package/src/ThemeManager.js +71 -0
  70. package/src/ThemeManager.js.map +1 -0
  71. package/src/ThemeManager.ts +70 -0
  72. package/src/lib/__tests__/themeForTesting.d.ts +38 -0
  73. package/src/lib/__tests__/themeForTesting.js +21 -0
  74. package/src/lib/__tests__/themeForTesting.js.map +1 -0
  75. package/src/lib/__tests__/themeForTesting.ts +17 -0
  76. package/src/lib/addExtraThemeEntries.d.ts +24 -0
  77. package/src/lib/addExtraThemeEntries.js +57 -0
  78. package/src/lib/addExtraThemeEntries.js.map +1 -0
  79. package/src/lib/addExtraThemeEntries.ts +56 -0
  80. package/src/lib/cssVariables.d.ts +22 -0
  81. package/src/lib/cssVariables.js +34 -0
  82. package/src/lib/cssVariables.js.map +1 -0
  83. package/src/lib/cssVariables.ts +27 -0
  84. package/src/lib/makeCssVariableDefinitionsMap.d.ts +29 -0
  85. package/src/lib/makeCssVariableDefinitionsMap.js +58 -0
  86. package/src/lib/makeCssVariableDefinitionsMap.js.map +1 -0
  87. package/src/lib/makeCssVariableDefinitionsMap.ts +55 -0
  88. package/src/lib/makeCssVariableTheme.d.ts +34 -0
  89. package/src/lib/makeCssVariableTheme.js +55 -0
  90. package/src/lib/makeCssVariableTheme.js.map +1 -0
  91. package/src/lib/makeCssVariableTheme.ts +63 -0
  92. package/src/lib/mapLeafsOfObject.d.ts +22 -0
  93. package/src/lib/mapLeafsOfObject.js +60 -0
  94. package/src/lib/mapLeafsOfObject.js.map +1 -0
  95. package/src/lib/mapLeafsOfObject.ts +50 -0
  96. package/src/lib/patterns.d.ts +2 -0
  97. package/src/lib/patterns.js +6 -0
  98. package/src/lib/patterns.js.map +1 -0
  99. package/src/lib/patterns.ts +2 -0
  100. package/src/themes/heart.d.ts +2 -0
  101. package/src/themes/heart.js +287 -0
  102. package/src/themes/heart.js.map +1 -0
  103. package/src/themes/heart.ts +285 -0
  104. package/src/themes/index.d.ts +3 -0
  105. package/src/themes/index.js +17 -0
  106. package/src/themes/index.js.map +1 -0
  107. package/src/themes/index.ts +4 -0
  108. package/src/themes/zen.d.ts +2 -0
  109. package/src/themes/zen.js +294 -0
  110. package/src/themes/zen.js.map +1 -0
  111. package/src/themes/zen.ts +292 -0
  112. package/src/types.d.ts +204 -0
  113. package/src/types.js +3 -0
  114. package/src/types.js.map +1 -0
  115. package/src/types.ts +225 -0
  116. package/tokens/animation.json +34 -0
  117. package/tokens/animation.json.d.ts +12 -0
  118. package/tokens/border.json +44 -0
  119. package/tokens/border.json.d.ts +12 -0
  120. package/tokens/color.json +228 -0
  121. package/tokens/color.json.d.ts +12 -0
  122. package/tokens/layout.json +9 -0
  123. package/tokens/layout.json.d.ts +12 -0
  124. package/tokens/shadow.json +12 -0
  125. package/tokens/shadow.json.d.ts +12 -0
  126. package/tokens/spacing.json +22 -0
  127. package/tokens/spacing.json.d.ts +12 -0
  128. package/tokens/typography.json +236 -0
  129. package/tokens/typography.json.d.ts +12 -0
package/less/color.less ADDED
@@ -0,0 +1,210 @@
1
+ /** THIS IS AN AUTOGENERATED FILE **/
2
+
3
+ @data-viz-favorable: var(--data-viz-favorable, #7dd5bd);
4
+ @data-viz-favorable-rgb: var(--data-viz-favorable-rgb, 125, 213, 189);
5
+ @data-viz-favorable-rgb-id: --data-viz-favorable-rgb;
6
+ @data-viz-favorable-id: --data-viz-favorable;
7
+ @data-viz-unfavorable: var(--data-viz-unfavorable, #e68d97);
8
+ @data-viz-unfavorable-rgb: var(--data-viz-unfavorable-rgb, 230, 141, 151);
9
+ @data-viz-unfavorable-rgb-id: --data-viz-unfavorable-rgb;
10
+ @data-viz-unfavorable-id: --data-viz-unfavorable;
11
+ @color-purple-100: var(--color-purple-100, #f4edf8);
12
+ @color-purple-200: var(--color-purple-200, #dfc9ea);
13
+ @color-purple-300: var(--color-purple-300, #c9a5dd);
14
+ @color-purple-400: var(--color-purple-400, #ae67b1);
15
+ @color-purple-500: var(--color-purple-500, #844587);
16
+ @color-purple-600: var(--color-purple-600, #5f3361);
17
+ @color-purple-700: var(--color-purple-700, #4a234d);
18
+ @color-purple-800: var(--color-purple-800, #2f2438);
19
+ @color-purple-100-rgb: var(--color-purple-100-rgb, 244, 237, 248);
20
+ @color-purple-100-rgb-id: --color-purple-100-rgb;
21
+ @color-purple-100-id: --color-purple-100;
22
+ @color-purple-200-rgb: var(--color-purple-200-rgb, 223, 201, 234);
23
+ @color-purple-200-rgb-id: --color-purple-200-rgb;
24
+ @color-purple-200-id: --color-purple-200;
25
+ @color-purple-300-rgb: var(--color-purple-300-rgb, 201, 165, 221);
26
+ @color-purple-300-rgb-id: --color-purple-300-rgb;
27
+ @color-purple-300-id: --color-purple-300;
28
+ @color-purple-400-rgb: var(--color-purple-400-rgb, 174, 103, 177);
29
+ @color-purple-400-rgb-id: --color-purple-400-rgb;
30
+ @color-purple-400-id: --color-purple-400;
31
+ @color-purple-500-rgb: var(--color-purple-500-rgb, 132, 69, 135);
32
+ @color-purple-500-rgb-id: --color-purple-500-rgb;
33
+ @color-purple-500-id: --color-purple-500;
34
+ @color-purple-600-rgb: var(--color-purple-600-rgb, 95, 51, 97);
35
+ @color-purple-600-rgb-id: --color-purple-600-rgb;
36
+ @color-purple-600-id: --color-purple-600;
37
+ @color-purple-700-rgb: var(--color-purple-700-rgb, 74, 35, 77);
38
+ @color-purple-700-rgb-id: --color-purple-700-rgb;
39
+ @color-purple-700-id: --color-purple-700;
40
+ @color-purple-800-rgb: var(--color-purple-800-rgb, 47, 36, 56);
41
+ @color-purple-800-rgb-id: --color-purple-800-rgb;
42
+ @color-purple-800-id: --color-purple-800;
43
+ @color-blue-100: var(--color-blue-100, #e6f6ff);
44
+ @color-blue-200: var(--color-blue-200, #bde2f5);
45
+ @color-blue-300: var(--color-blue-300, #73c0e8);
46
+ @color-blue-400: var(--color-blue-400, #008bd6);
47
+ @color-blue-500: var(--color-blue-500, #0168b3);
48
+ @color-blue-600: var(--color-blue-600, #004970);
49
+ @color-blue-700: var(--color-blue-700, #003157);
50
+ @color-blue-100-rgb: var(--color-blue-100-rgb, 230, 246, 255);
51
+ @color-blue-100-rgb-id: --color-blue-100-rgb;
52
+ @color-blue-100-id: --color-blue-100;
53
+ @color-blue-200-rgb: var(--color-blue-200-rgb, 189, 226, 245);
54
+ @color-blue-200-rgb-id: --color-blue-200-rgb;
55
+ @color-blue-200-id: --color-blue-200;
56
+ @color-blue-300-rgb: var(--color-blue-300-rgb, 115, 192, 232);
57
+ @color-blue-300-rgb-id: --color-blue-300-rgb;
58
+ @color-blue-300-id: --color-blue-300;
59
+ @color-blue-400-rgb: var(--color-blue-400-rgb, 0, 139, 214);
60
+ @color-blue-400-rgb-id: --color-blue-400-rgb;
61
+ @color-blue-400-id: --color-blue-400;
62
+ @color-blue-500-rgb: var(--color-blue-500-rgb, 1, 104, 179);
63
+ @color-blue-500-rgb-id: --color-blue-500-rgb;
64
+ @color-blue-500-id: --color-blue-500;
65
+ @color-blue-600-rgb: var(--color-blue-600-rgb, 0, 73, 112);
66
+ @color-blue-600-rgb-id: --color-blue-600-rgb;
67
+ @color-blue-600-id: --color-blue-600;
68
+ @color-blue-700-rgb: var(--color-blue-700-rgb, 0, 49, 87);
69
+ @color-blue-700-rgb-id: --color-blue-700-rgb;
70
+ @color-blue-700-id: --color-blue-700;
71
+ @color-green-100: var(--color-green-100, #e8f8f4);
72
+ @color-green-200: var(--color-green-200, #c4ede2);
73
+ @color-green-300: var(--color-green-300, #8fdbc7);
74
+ @color-green-400: var(--color-green-400, #5dcbad);
75
+ @color-green-500: var(--color-green-500, #3caf90);
76
+ @color-green-600: var(--color-green-600, #2c7d67);
77
+ @color-green-700: var(--color-green-700, #22594a);
78
+ @color-green-100-rgb: var(--color-green-100-rgb, 232, 248, 244);
79
+ @color-green-100-rgb-id: --color-green-100-rgb;
80
+ @color-green-100-id: --color-green-100;
81
+ @color-green-200-rgb: var(--color-green-200-rgb, 196, 237, 226);
82
+ @color-green-200-rgb-id: --color-green-200-rgb;
83
+ @color-green-200-id: --color-green-200;
84
+ @color-green-300-rgb: var(--color-green-300-rgb, 143, 219, 199);
85
+ @color-green-300-rgb-id: --color-green-300-rgb;
86
+ @color-green-300-id: --color-green-300;
87
+ @color-green-400-rgb: var(--color-green-400-rgb, 93, 203, 173);
88
+ @color-green-400-rgb-id: --color-green-400-rgb;
89
+ @color-green-400-id: --color-green-400;
90
+ @color-green-500-rgb: var(--color-green-500-rgb, 60, 175, 144);
91
+ @color-green-500-rgb-id: --color-green-500-rgb;
92
+ @color-green-500-id: --color-green-500;
93
+ @color-green-600-rgb: var(--color-green-600-rgb, 44, 125, 103);
94
+ @color-green-600-rgb-id: --color-green-600-rgb;
95
+ @color-green-600-id: --color-green-600;
96
+ @color-green-700-rgb: var(--color-green-700-rgb, 34, 89, 74);
97
+ @color-green-700-rgb-id: --color-green-700-rgb;
98
+ @color-green-700-id: --color-green-700;
99
+ @color-yellow-100: var(--color-yellow-100, #fff9e4);
100
+ @color-yellow-200: var(--color-yellow-200, #ffeeb3);
101
+ @color-yellow-300: var(--color-yellow-300, #ffe36e);
102
+ @color-yellow-400: var(--color-yellow-400, #ffca4d);
103
+ @color-yellow-500: var(--color-yellow-500, #ffb600);
104
+ @color-yellow-600: var(--color-yellow-600, #c68600);
105
+ @color-yellow-700: var(--color-yellow-700, #876400);
106
+ @color-yellow-100-rgb: var(--color-yellow-100-rgb, 255, 249, 228);
107
+ @color-yellow-100-rgb-id: --color-yellow-100-rgb;
108
+ @color-yellow-100-id: --color-yellow-100;
109
+ @color-yellow-200-rgb: var(--color-yellow-200-rgb, 255, 238, 179);
110
+ @color-yellow-200-rgb-id: --color-yellow-200-rgb;
111
+ @color-yellow-200-id: --color-yellow-200;
112
+ @color-yellow-300-rgb: var(--color-yellow-300-rgb, 255, 227, 110);
113
+ @color-yellow-300-rgb-id: --color-yellow-300-rgb;
114
+ @color-yellow-300-id: --color-yellow-300;
115
+ @color-yellow-400-rgb: var(--color-yellow-400-rgb, 255, 202, 77);
116
+ @color-yellow-400-rgb-id: --color-yellow-400-rgb;
117
+ @color-yellow-400-id: --color-yellow-400;
118
+ @color-yellow-500-rgb: var(--color-yellow-500-rgb, 255, 182, 0);
119
+ @color-yellow-500-rgb-id: --color-yellow-500-rgb;
120
+ @color-yellow-500-id: --color-yellow-500;
121
+ @color-yellow-600-rgb: var(--color-yellow-600-rgb, 198, 134, 0);
122
+ @color-yellow-600-rgb-id: --color-yellow-600-rgb;
123
+ @color-yellow-600-id: --color-yellow-600;
124
+ @color-yellow-700-rgb: var(--color-yellow-700-rgb, 135, 100, 0);
125
+ @color-yellow-700-rgb-id: --color-yellow-700-rgb;
126
+ @color-yellow-700-id: --color-yellow-700;
127
+ @color-red-100: var(--color-red-100, #fdeaee);
128
+ @color-red-200: var(--color-red-200, #f9c2cb);
129
+ @color-red-300: var(--color-red-300, #f597a8);
130
+ @color-red-400: var(--color-red-400, #e0707d);
131
+ @color-red-500: var(--color-red-500, #c93b55);
132
+ @color-red-600: var(--color-red-600, #a82433);
133
+ @color-red-700: var(--color-red-700, #6c1e20);
134
+ @color-red-100-rgb: var(--color-red-100-rgb, 253, 234, 238);
135
+ @color-red-100-rgb-id: --color-red-100-rgb;
136
+ @color-red-100-id: --color-red-100;
137
+ @color-red-200-rgb: var(--color-red-200-rgb, 249, 194, 203);
138
+ @color-red-200-rgb-id: --color-red-200-rgb;
139
+ @color-red-200-id: --color-red-200;
140
+ @color-red-300-rgb: var(--color-red-300-rgb, 245, 151, 168);
141
+ @color-red-300-rgb-id: --color-red-300-rgb;
142
+ @color-red-300-id: --color-red-300;
143
+ @color-red-400-rgb: var(--color-red-400-rgb, 224, 112, 125);
144
+ @color-red-400-rgb-id: --color-red-400-rgb;
145
+ @color-red-400-id: --color-red-400;
146
+ @color-red-500-rgb: var(--color-red-500-rgb, 201, 59, 85);
147
+ @color-red-500-rgb-id: --color-red-500-rgb;
148
+ @color-red-500-id: --color-red-500;
149
+ @color-red-600-rgb: var(--color-red-600-rgb, 168, 36, 51);
150
+ @color-red-600-rgb-id: --color-red-600-rgb;
151
+ @color-red-600-id: --color-red-600;
152
+ @color-red-700-rgb: var(--color-red-700-rgb, 108, 30, 32);
153
+ @color-red-700-rgb-id: --color-red-700-rgb;
154
+ @color-red-700-id: --color-red-700;
155
+ @color-orange-100: var(--color-orange-100, #fff0e8);
156
+ @color-orange-200: var(--color-orange-200, #ffd1b9);
157
+ @color-orange-300: var(--color-orange-300, #ffb08a);
158
+ @color-orange-400: var(--color-orange-400, #ff9461);
159
+ @color-orange-500: var(--color-orange-500, #e96c2f);
160
+ @color-orange-600: var(--color-orange-600, #b74302);
161
+ @color-orange-700: var(--color-orange-700, #903c00);
162
+ @color-orange-100-rgb: var(--color-orange-100-rgb, 255, 240, 232);
163
+ @color-orange-100-rgb-id: --color-orange-100-rgb;
164
+ @color-orange-100-id: --color-orange-100;
165
+ @color-orange-200-rgb: var(--color-orange-200-rgb, 255, 209, 185);
166
+ @color-orange-200-rgb-id: --color-orange-200-rgb;
167
+ @color-orange-200-id: --color-orange-200;
168
+ @color-orange-300-rgb: var(--color-orange-300-rgb, 255, 176, 138);
169
+ @color-orange-300-rgb-id: --color-orange-300-rgb;
170
+ @color-orange-300-id: --color-orange-300;
171
+ @color-orange-400-rgb: var(--color-orange-400-rgb, 255, 148, 97);
172
+ @color-orange-400-rgb-id: --color-orange-400-rgb;
173
+ @color-orange-400-id: --color-orange-400;
174
+ @color-orange-500-rgb: var(--color-orange-500-rgb, 233, 108, 47);
175
+ @color-orange-500-rgb-id: --color-orange-500-rgb;
176
+ @color-orange-500-id: --color-orange-500;
177
+ @color-orange-600-rgb: var(--color-orange-600-rgb, 183, 67, 2);
178
+ @color-orange-600-rgb-id: --color-orange-600-rgb;
179
+ @color-orange-600-id: --color-orange-600;
180
+ @color-orange-700-rgb: var(--color-orange-700-rgb, 144, 60, 0);
181
+ @color-orange-700-rgb-id: --color-orange-700-rgb;
182
+ @color-orange-700-id: --color-orange-700;
183
+ @color-gray-100: var(--color-gray-100, #f9f9f9);
184
+ @color-gray-200: var(--color-gray-200, #f4f4f5);
185
+ @color-gray-300: var(--color-gray-300, #eaeaec);
186
+ @color-gray-400: var(--color-gray-400, #cdcdd0);
187
+ @color-gray-500: var(--color-gray-500, #8c8c97);
188
+ @color-gray-600: var(--color-gray-600, #524e56);
189
+ @color-gray-100-rgb: var(--color-gray-100-rgb, 249, 249, 249);
190
+ @color-gray-100-rgb-id: --color-gray-100-rgb;
191
+ @color-gray-100-id: --color-gray-100;
192
+ @color-gray-200-rgb: var(--color-gray-200-rgb, 244, 244, 245);
193
+ @color-gray-200-rgb-id: --color-gray-200-rgb;
194
+ @color-gray-200-id: --color-gray-200;
195
+ @color-gray-300-rgb: var(--color-gray-300-rgb, 234, 234, 236);
196
+ @color-gray-300-rgb-id: --color-gray-300-rgb;
197
+ @color-gray-300-id: --color-gray-300;
198
+ @color-gray-400-rgb: var(--color-gray-400-rgb, 205, 205, 208);
199
+ @color-gray-400-rgb-id: --color-gray-400-rgb;
200
+ @color-gray-400-id: --color-gray-400;
201
+ @color-gray-500-rgb: var(--color-gray-500-rgb, 140, 140, 151);
202
+ @color-gray-500-rgb-id: --color-gray-500-rgb;
203
+ @color-gray-500-id: --color-gray-500;
204
+ @color-gray-600-rgb: var(--color-gray-600-rgb, 82, 78, 86);
205
+ @color-gray-600-rgb-id: --color-gray-600-rgb;
206
+ @color-gray-600-id: --color-gray-600;
207
+ @color-white: var(--color-white, #ffffff);
208
+ @color-white-rgb: var(--color-white-rgb, 255, 255, 255);
209
+ @color-white-rgb-id: --color-white-rgb;
210
+ @color-white-id: --color-white;
package/less/layout.less ADDED
@@ -0,0 +1,8 @@
1
+ /** THIS IS AN AUTOGENERATED FILE **/
2
+
3
+ @layout-content-max-width: 1392px;
4
+ @layout-content-side-margin: 72px;
5
+ @layout-mobile-actions-drawer-height: 60px;
6
+ @layout-navigation-bar-height: 72px;
7
+ @layout-breakpoints-medium: 768px;
8
+ @layout-breakpoints-large: 1080px;
package/less/shadow.less ADDED
@@ -0,0 +1,12 @@
1
+ /** THIS IS AN AUTOGENERATED FILE **/
2
+
3
+ @shadow-small-box-shadow: var(
4
+ --shadow-small-box-shadow,
5
+ 0 0 6px rgba(53, 55, 74, 0.09)
6
+ );
7
+ @shadow-small-box-shadow-id: --shadow-small-box-shadow;
8
+ @shadow-large-box-shadow: var(
9
+ --shadow-large-box-shadow,
10
+ 0 0 12px rgba(53, 55, 74, 0.19)
11
+ );
12
+ @shadow-large-box-shadow-id: --shadow-large-box-shadow;
package/less/spacing.less ADDED
@@ -0,0 +1,20 @@
1
+ /** THIS IS AN AUTOGENERATED FILE **/
2
+
3
+ @spacing-xs: var(--spacing-xs, 0.375rem);
4
+ @spacing-xs-id: --spacing-xs;
5
+ @spacing-sm: var(--spacing-sm, 0.75rem);
6
+ @spacing-sm-id: --spacing-sm;
7
+ @spacing-md: var(--spacing-md, 1.5rem);
8
+ @spacing-md-id: --spacing-md;
9
+ @spacing-lg: var(--spacing-lg, 2.25rem);
10
+ @spacing-lg-id: --spacing-lg;
11
+ @spacing-xl: var(--spacing-xl, 3rem);
12
+ @spacing-xl-id: --spacing-xl;
13
+ @spacing-xxl: var(--spacing-xxl, 3.75rem);
14
+ @spacing-xxl-id: --spacing-xxl;
15
+ @spacing-xxxl: var(--spacing-xxxl, 4.5rem);
16
+ @spacing-xxxl-id: --spacing-xxxl;
17
+ @spacing-xxxxl: var(--spacing-xxxxl, 5.25rem);
18
+ @spacing-xxxxl-id: --spacing-xxxxl;
19
+ @spacing-xxxxxl: var(--spacing-xxxxxl, 6rem);
20
+ @spacing-xxxxxl-id: --spacing-xxxxxl;