@grantcodes/style-dictionary 1.3.1 → 1.4.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 (29) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/assets/fonts/grantina.css +1 -0
  3. package/assets/logos/grantina/monogram-light-bg.svg +3 -0
  4. package/assets/logos/grantina/monogram.svg +15 -0
  5. package/dist/css/grantcodes/dark.css +168 -0
  6. package/dist/css/grantcodes/grantcodes.css +126 -150
  7. package/dist/css/grantcodes/tokens.css +126 -150
  8. package/dist/css/grantina/dark.css +166 -0
  9. package/dist/css/grantina/grantina.css +363 -0
  10. package/dist/css/grantina/tokens.css +363 -0
  11. package/dist/css/todomap/dark.css +120 -0
  12. package/dist/css/todomap/todomap.css +172 -12
  13. package/dist/css/todomap/tokens.css +172 -12
  14. package/dist/css/wireframe/dark.css +180 -0
  15. package/dist/css/wireframe/tokens.css +145 -206
  16. package/dist/css/wireframe/wireframe.css +145 -206
  17. package/dist/js/grantcodes/style-dictionary.d.ts +111 -133
  18. package/dist/js/grantcodes/style-dictionary.js +117 -141
  19. package/dist/js/grantina/style-dictionary.d.ts +362 -0
  20. package/dist/js/grantina/style-dictionary.js +391 -0
  21. package/dist/js/todomap/style-dictionary.d.ts +164 -10
  22. package/dist/js/todomap/style-dictionary.js +182 -14
  23. package/dist/js/wireframe/style-dictionary.d.ts +130 -183
  24. package/dist/js/wireframe/style-dictionary.js +134 -193
  25. package/dist/json/grantcodes/tokens.json +114 -136
  26. package/dist/json/grantina/tokens.json +352 -0
  27. package/dist/json/todomap/tokens.json +159 -13
  28. package/dist/json/wireframe/tokens.json +133 -186
  29. package/package.json +13 -3
package/dist/css/todomap/todomap.css CHANGED
@@ -1,4 +1,20 @@
1
1
  .todomap {
2
+ --g-animation-duration-10: 100ms;
3
+ --g-animation-duration-20: 200ms;
4
+ --g-animation-duration-30: 300ms;
5
+ --g-animation-duration-40: 400ms;
6
+ --g-animation-timing-function-ease: ease-in-out;
7
+ --g-animation-timing-function-linear: linear;
8
+ --g-border-width-1: 0.0625rem;
9
+ --g-border-width-2: 0.125rem;
10
+ --g-border-width-4: 0.25rem;
11
+ --g-border-radius-125: 0.125rem;
12
+ --g-border-radius-250: 0.25rem;
13
+ --g-border-radius-500: 0.5rem;
14
+ --g-border-radius-1000: 1rem;
15
+ --g-border-radius-square: 0;
16
+ --g-border-radius-pill: 624.9375rem;
17
+ --g-border-radius-rounded: 50%;
2
18
  --g-color-neutral-100: oklch(95% 0 0);
3
19
  --g-color-neutral-200: oklch(90% 0 0);
4
20
  --g-color-neutral-300: oklch(80% 0 0);
@@ -78,14 +94,16 @@
78
94
  --g-color-brand-pink-700: oklch(51.18% 0.229 15.5);
79
95
  --g-color-brand-pink-800: oklch(42.79% 0.203 15.5);
80
96
  --g-color-brand-pink-900: oklch(36.89% 0.183 15.5);
81
- --g-z-index-0: 0;
82
- --g-z-index-100: 100;
83
- --g-z-index-200: 200;
84
- --g-z-index-300: 300;
85
- --g-z-index-400: 400;
86
- --g-z-index-500: 500;
87
- --g-z-index-top: 99999;
88
- --g-z-index-bottom: -100;
97
+ --g-shadow-sm-x: 0rem;
98
+ --g-shadow-sm-y: 0.25rem;
99
+ --g-shadow-sm-blur: 0.25rem;
100
+ --g-shadow-sm-spread: 0rem;
101
+ --g-shadow-sm-color: #00000040;
102
+ --g-shadow-md-x: 0rem;
103
+ --g-shadow-md-y: 0.5rem;
104
+ --g-shadow-md-blur: 0.375rem;
105
+ --g-shadow-md-spread: -0.375rem;
106
+ --g-shadow-md-color: #0000001a;
89
107
  --g-spacing-0: 0rem;
90
108
  --g-spacing-1: 0.0625rem;
91
109
  --g-spacing-2: 0.125rem;
@@ -101,8 +119,67 @@
101
119
  --g-spacing-40: 2.5rem;
102
120
  --g-spacing-48: 3rem;
103
121
  --g-spacing-64: 4rem;
104
- --g-typography-font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
105
- --g-typography-font-family-quicksand: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
122
+ --g-typography-font-weight-400: 400;
123
+ --g-typography-font-weight-500: 500;
124
+ --g-typography-font-weight-600: 600;
125
+ --g-typography-font-weight-700: 700;
126
+ --g-typography-letter-spacing-none: 0rem;
127
+ --g-typography-letter-spacing-sm: 0.0313rem;
128
+ --g-typography-letter-spacing-lg: 0.125rem;
129
+ --g-typography-letter-spacing-neg-sm: -0.0313rem;
130
+ --g-typography-letter-spacing-neg-md: -0.0625rem;
131
+ --g-typography-letter-spacing-neg-lg: -0.0938rem;
132
+ --g-typography-letter-spacing-neg-xl: -0.125rem;
133
+ --g-typography-text-transform-none: none;
134
+ --g-typography-text-transform-uppercase: uppercase;
135
+ --g-typography-font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
136
+ --g-typography-font-family-quicksand: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
137
+ --g-typography-font-size-xs: 0.75rem;
138
+ --g-typography-font-size-sm: 0.875rem;
139
+ --g-typography-font-size-md: 1rem;
140
+ --g-typography-font-size-lg: 1.125rem;
141
+ --g-typography-font-size-xl: 1.25rem;
142
+ --g-typography-font-size-2xl: 1.5rem;
143
+ --g-typography-font-size-3xl: 1.75rem;
144
+ --g-typography-font-size-4xl: 2rem;
145
+ --g-typography-font-size-5xl: 2.5rem;
146
+ --g-typography-font-size-6xl: 3rem;
147
+ --g-typography-font-size-7xl: 3.5rem;
148
+ --g-typography-font-size-8xl: 4rem;
149
+ --g-typography-font-size-display: 6.25rem;
150
+ --g-z-index-0: 0;
151
+ --g-z-index-100: 100;
152
+ --g-z-index-200: 200;
153
+ --g-z-index-300: 300;
154
+ --g-z-index-400: 400;
155
+ --g-z-index-500: 500;
156
+ --g-z-index-top: 99999;
157
+ --g-z-index-bottom: -100;
158
+ --g-theme-typography-h1: 700 6.25rem/1.1 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
159
+ --g-theme-typography-h2: 700 3rem/1.17 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
160
+ --g-theme-typography-h3: 700 2.5rem/1.2 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
161
+ --g-theme-typography-h4: 700 2rem/1.25 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
162
+ --g-theme-typography-h5: 700 1.75rem/1.29 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
163
+ --g-theme-typography-h6: 700 1.5rem/1.33 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
164
+ --g-theme-typography-body-lg: 400 1.25rem/1.4 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
165
+ --g-theme-typography-body: 500 1rem/1.5 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
166
+ --g-theme-typography-body-sm: 500 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
167
+ --g-theme-typography-label-lg: 600 1.25rem/1.4 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
168
+ --g-theme-typography-label: 600 1rem/1.5 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
169
+ --g-theme-typography-label-sm: 600 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
170
+ --g-theme-typography-meta: 600 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
171
+ --g-theme-typography-meta-sm: 600 0.75rem/1.33 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
172
+ --g-theme-animation-fade-quick: 100ms;
173
+ --g-theme-animation-fade-long: 400ms;
174
+ --g-theme-animation-move-quick: 200ms;
175
+ --g-theme-animation-move-long: 400ms;
176
+ --g-theme-animation-ease: ease-in-out;
177
+ --g-theme-border-width-sm: 0.0625rem;
178
+ --g-theme-border-width-md: 0.125rem;
179
+ --g-theme-border-width-lg: 0.25rem;
180
+ --g-theme-border-radius-sm: 0.25rem;
181
+ --g-theme-border-radius-md: 0.5rem;
182
+ --g-theme-border-radius-lg: 1rem;
106
183
  --g-theme-color-background-default: oklch(100% 0 0);
107
184
  --g-theme-color-background-subtle: oklch(95% 0 0);
108
185
  --g-theme-color-background-knockout: oklch(0% 0 0);
@@ -112,6 +189,17 @@
112
189
  --g-theme-color-background-utility-warning: oklch(97.66% 0.0606 103.43);
113
190
  --g-theme-color-background-utility-success: oklch(96.73% 0.0537 129.1);
114
191
  --g-theme-color-background-utility-info: oklch(95.86% 0.0542 179.13);
192
+ --g-theme-color-border-default: oklch(80% 0 0);
193
+ --g-theme-color-border-default-hover: oklch(60% 0 0);
194
+ --g-theme-color-border-subtle: oklch(90% 0 0);
195
+ --g-theme-color-border-strong: oklch(20% 0 0);
196
+ --g-theme-color-border-knockout: oklch(70% 0 0);
197
+ --g-theme-color-border-brand: oklch(51.18% 0.229 15.5);
198
+ --g-theme-color-border-utility-error: oklch(51.18% 0.1802 32.56);
199
+ --g-theme-color-border-utility-warning: oklch(68.35% 0.14027 94.7302);
200
+ --g-theme-color-border-utility-success: oklch(57.11% 0.1795 142.12);
201
+ --g-theme-color-border-utility-info: oklch(56.7% 0.116289 232.4331);
202
+ --g-theme-color-border-disabled: oklch(90% 0 0);
115
203
  --g-theme-color-content-default: oklch(20% 0 0);
116
204
  --g-theme-color-content-subtle: oklch(60% 0 0);
117
205
  --g-theme-color-content-knockout: oklch(100% 0 0);
@@ -127,10 +215,82 @@
127
215
  --g-theme-spacing-xl: 2rem;
128
216
  --g-theme-spacing-2xl: 3rem;
129
217
  --g-theme-spacing-3xl: 4rem;
130
- --g-theme-typography-font-family-heading: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
131
- --g-theme-typography-font-family-body: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
132
218
  --g-theme-typography-font-weight-heading: 700;
133
219
  --g-theme-typography-font-weight-body: 400;
220
+ --g-theme-typography-font-family-heading: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
221
+ --g-theme-typography-font-family-body: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
222
+ --g-theme-typography-h1-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
223
+ --g-theme-typography-h1-font-weight: 700;
224
+ --g-theme-typography-h1-font-size: 6.25rem;
225
+ --g-theme-typography-h1-line-height: 1.1;
226
+ --g-theme-typography-h1-letter-spacing: 0rem;
227
+ --g-theme-typography-h2-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
228
+ --g-theme-typography-h2-font-weight: 700;
229
+ --g-theme-typography-h2-font-size: 3rem;
230
+ --g-theme-typography-h2-line-height: 1.17;
231
+ --g-theme-typography-h2-letter-spacing: 0rem;
232
+ --g-theme-typography-h3-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
233
+ --g-theme-typography-h3-font-weight: 700;
234
+ --g-theme-typography-h3-font-size: 2.5rem;
235
+ --g-theme-typography-h3-line-height: 1.2;
236
+ --g-theme-typography-h3-letter-spacing: 0rem;
237
+ --g-theme-typography-h4-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
238
+ --g-theme-typography-h4-font-weight: 700;
239
+ --g-theme-typography-h4-font-size: 2rem;
240
+ --g-theme-typography-h4-line-height: 1.25;
241
+ --g-theme-typography-h4-letter-spacing: 0rem;
242
+ --g-theme-typography-h5-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
243
+ --g-theme-typography-h5-font-weight: 700;
244
+ --g-theme-typography-h5-font-size: 1.75rem;
245
+ --g-theme-typography-h5-line-height: 1.29;
246
+ --g-theme-typography-h5-letter-spacing: 0rem;
247
+ --g-theme-typography-h6-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
248
+ --g-theme-typography-h6-font-weight: 700;
249
+ --g-theme-typography-h6-font-size: 1.5rem;
250
+ --g-theme-typography-h6-line-height: 1.33;
251
+ --g-theme-typography-h6-letter-spacing: 0rem;
252
+ --g-theme-typography-body-lg-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
253
+ --g-theme-typography-body-lg-font-weight: 400;
254
+ --g-theme-typography-body-lg-font-size: 1.25rem;
255
+ --g-theme-typography-body-lg-line-height: 1.4;
256
+ --g-theme-typography-body-lg-letter-spacing: 0rem;
257
+ --g-theme-typography-body-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
258
+ --g-theme-typography-body-font-weight: 500;
259
+ --g-theme-typography-body-font-size: 1rem;
260
+ --g-theme-typography-body-line-height: 1.5;
261
+ --g-theme-typography-body-letter-spacing: 0rem;
262
+ --g-theme-typography-body-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
263
+ --g-theme-typography-body-sm-font-weight: 500;
264
+ --g-theme-typography-body-sm-font-size: 0.875rem;
265
+ --g-theme-typography-body-sm-line-height: 1.43;
266
+ --g-theme-typography-body-sm-letter-spacing: 0rem;
267
+ --g-theme-typography-label-lg-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
268
+ --g-theme-typography-label-lg-font-weight: 600;
269
+ --g-theme-typography-label-lg-font-size: 1.25rem;
270
+ --g-theme-typography-label-lg-line-height: 1.4;
271
+ --g-theme-typography-label-lg-letter-spacing: 0rem;
272
+ --g-theme-typography-label-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
273
+ --g-theme-typography-label-font-weight: 600;
274
+ --g-theme-typography-label-font-size: 1rem;
275
+ --g-theme-typography-label-line-height: 1.5;
276
+ --g-theme-typography-label-letter-spacing: 0rem;
277
+ --g-theme-typography-label-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
278
+ --g-theme-typography-label-sm-font-weight: 600;
279
+ --g-theme-typography-label-sm-font-size: 0.875rem;
280
+ --g-theme-typography-label-sm-line-height: 1.43;
281
+ --g-theme-typography-label-sm-letter-spacing: 0rem;
282
+ --g-theme-typography-meta-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
283
+ --g-theme-typography-meta-font-weight: 600;
284
+ --g-theme-typography-meta-font-size: 0.875rem;
285
+ --g-theme-typography-meta-line-height: 1.43;
286
+ --g-theme-typography-meta-letter-spacing: 0.0313rem;
287
+ --g-theme-typography-meta-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
288
+ --g-theme-typography-meta-sm-font-weight: 600;
289
+ --g-theme-typography-meta-sm-font-size: 0.75rem;
290
+ --g-theme-typography-meta-sm-line-height: 1.33;
291
+ --g-theme-typography-meta-sm-letter-spacing: 0.0313rem;
292
+ --g-theme-box-shadow-sm: 0rem 0.25rem 0.25rem 0rem #00000040;
293
+ --g-theme-box-shadow-md: 0rem 0.5rem 0.375rem -0.375rem #0000001a;
134
294
  --g-theme-button-color-background-default: oklch(94.96% 0.050 15.5);
135
295
  --g-theme-button-color-background-hover: oklch(89.21% 0.097 15.5);
136
296
  --g-theme-button-color-background-active: oklch(89.21% 0.097 15.5);
package/dist/css/todomap/tokens.css CHANGED
@@ -1,4 +1,20 @@
1
1
  :root {
2
+ --g-animation-duration-10: 100ms;
3
+ --g-animation-duration-20: 200ms;
4
+ --g-animation-duration-30: 300ms;
5
+ --g-animation-duration-40: 400ms;
6
+ --g-animation-timing-function-ease: ease-in-out;
7
+ --g-animation-timing-function-linear: linear;
8
+ --g-border-width-1: 0.0625rem;
9
+ --g-border-width-2: 0.125rem;
10
+ --g-border-width-4: 0.25rem;
11
+ --g-border-radius-125: 0.125rem;
12
+ --g-border-radius-250: 0.25rem;
13
+ --g-border-radius-500: 0.5rem;
14
+ --g-border-radius-1000: 1rem;
15
+ --g-border-radius-square: 0;
16
+ --g-border-radius-pill: 624.9375rem;
17
+ --g-border-radius-rounded: 50%;
2
18
  --g-color-neutral-100: oklch(95% 0 0);
3
19
  --g-color-neutral-200: oklch(90% 0 0);
4
20
  --g-color-neutral-300: oklch(80% 0 0);
@@ -78,14 +94,16 @@
78
94
  --g-color-brand-pink-700: oklch(51.18% 0.229 15.5);
79
95
  --g-color-brand-pink-800: oklch(42.79% 0.203 15.5);
80
96
  --g-color-brand-pink-900: oklch(36.89% 0.183 15.5);
81
- --g-z-index-0: 0;
82
- --g-z-index-100: 100;
83
- --g-z-index-200: 200;
84
- --g-z-index-300: 300;
85
- --g-z-index-400: 400;
86
- --g-z-index-500: 500;
87
- --g-z-index-top: 99999;
88
- --g-z-index-bottom: -100;
97
+ --g-shadow-sm-x: 0rem;
98
+ --g-shadow-sm-y: 0.25rem;
99
+ --g-shadow-sm-blur: 0.25rem;
100
+ --g-shadow-sm-spread: 0rem;
101
+ --g-shadow-sm-color: #00000040;
102
+ --g-shadow-md-x: 0rem;
103
+ --g-shadow-md-y: 0.5rem;
104
+ --g-shadow-md-blur: 0.375rem;
105
+ --g-shadow-md-spread: -0.375rem;
106
+ --g-shadow-md-color: #0000001a;
89
107
  --g-spacing-0: 0rem;
90
108
  --g-spacing-1: 0.0625rem;
91
109
  --g-spacing-2: 0.125rem;
@@ -101,8 +119,67 @@
101
119
  --g-spacing-40: 2.5rem;
102
120
  --g-spacing-48: 3rem;
103
121
  --g-spacing-64: 4rem;
104
- --g-typography-font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
105
- --g-typography-font-family-quicksand: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
122
+ --g-typography-font-weight-400: 400;
123
+ --g-typography-font-weight-500: 500;
124
+ --g-typography-font-weight-600: 600;
125
+ --g-typography-font-weight-700: 700;
126
+ --g-typography-letter-spacing-none: 0rem;
127
+ --g-typography-letter-spacing-sm: 0.0313rem;
128
+ --g-typography-letter-spacing-lg: 0.125rem;
129
+ --g-typography-letter-spacing-neg-sm: -0.0313rem;
130
+ --g-typography-letter-spacing-neg-md: -0.0625rem;
131
+ --g-typography-letter-spacing-neg-lg: -0.0938rem;
132
+ --g-typography-letter-spacing-neg-xl: -0.125rem;
133
+ --g-typography-text-transform-none: none;
134
+ --g-typography-text-transform-uppercase: uppercase;
135
+ --g-typography-font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
136
+ --g-typography-font-family-quicksand: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
137
+ --g-typography-font-size-xs: 0.75rem;
138
+ --g-typography-font-size-sm: 0.875rem;
139
+ --g-typography-font-size-md: 1rem;
140
+ --g-typography-font-size-lg: 1.125rem;
141
+ --g-typography-font-size-xl: 1.25rem;
142
+ --g-typography-font-size-2xl: 1.5rem;
143
+ --g-typography-font-size-3xl: 1.75rem;
144
+ --g-typography-font-size-4xl: 2rem;
145
+ --g-typography-font-size-5xl: 2.5rem;
146
+ --g-typography-font-size-6xl: 3rem;
147
+ --g-typography-font-size-7xl: 3.5rem;
148
+ --g-typography-font-size-8xl: 4rem;
149
+ --g-typography-font-size-display: 6.25rem;
150
+ --g-z-index-0: 0;
151
+ --g-z-index-100: 100;
152
+ --g-z-index-200: 200;
153
+ --g-z-index-300: 300;
154
+ --g-z-index-400: 400;
155
+ --g-z-index-500: 500;
156
+ --g-z-index-top: 99999;
157
+ --g-z-index-bottom: -100;
158
+ --g-theme-typography-h1: 700 6.25rem/1.1 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
159
+ --g-theme-typography-h2: 700 3rem/1.17 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
160
+ --g-theme-typography-h3: 700 2.5rem/1.2 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
161
+ --g-theme-typography-h4: 700 2rem/1.25 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
162
+ --g-theme-typography-h5: 700 1.75rem/1.29 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
163
+ --g-theme-typography-h6: 700 1.5rem/1.33 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
164
+ --g-theme-typography-body-lg: 400 1.25rem/1.4 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
165
+ --g-theme-typography-body: 500 1rem/1.5 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
166
+ --g-theme-typography-body-sm: 500 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
167
+ --g-theme-typography-label-lg: 600 1.25rem/1.4 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
168
+ --g-theme-typography-label: 600 1rem/1.5 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
169
+ --g-theme-typography-label-sm: 600 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
170
+ --g-theme-typography-meta: 600 0.875rem/1.43 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
171
+ --g-theme-typography-meta-sm: 600 0.75rem/1.33 Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
172
+ --g-theme-animation-fade-quick: 100ms;
173
+ --g-theme-animation-fade-long: 400ms;
174
+ --g-theme-animation-move-quick: 200ms;
175
+ --g-theme-animation-move-long: 400ms;
176
+ --g-theme-animation-ease: ease-in-out;
177
+ --g-theme-border-width-sm: 0.0625rem;
178
+ --g-theme-border-width-md: 0.125rem;
179
+ --g-theme-border-width-lg: 0.25rem;
180
+ --g-theme-border-radius-sm: 0.25rem;
181
+ --g-theme-border-radius-md: 0.5rem;
182
+ --g-theme-border-radius-lg: 1rem;
106
183
  --g-theme-color-background-default: oklch(100% 0 0);
107
184
  --g-theme-color-background-subtle: oklch(95% 0 0);
108
185
  --g-theme-color-background-knockout: oklch(0% 0 0);
@@ -112,6 +189,17 @@
112
189
  --g-theme-color-background-utility-warning: oklch(97.66% 0.0606 103.43);
113
190
  --g-theme-color-background-utility-success: oklch(96.73% 0.0537 129.1);
114
191
  --g-theme-color-background-utility-info: oklch(95.86% 0.0542 179.13);
192
+ --g-theme-color-border-default: oklch(80% 0 0);
193
+ --g-theme-color-border-default-hover: oklch(60% 0 0);
194
+ --g-theme-color-border-subtle: oklch(90% 0 0);
195
+ --g-theme-color-border-strong: oklch(20% 0 0);
196
+ --g-theme-color-border-knockout: oklch(70% 0 0);
197
+ --g-theme-color-border-brand: oklch(51.18% 0.229 15.5);
198
+ --g-theme-color-border-utility-error: oklch(51.18% 0.1802 32.56);
199
+ --g-theme-color-border-utility-warning: oklch(68.35% 0.14027 94.7302);
200
+ --g-theme-color-border-utility-success: oklch(57.11% 0.1795 142.12);
201
+ --g-theme-color-border-utility-info: oklch(56.7% 0.116289 232.4331);
202
+ --g-theme-color-border-disabled: oklch(90% 0 0);
115
203
  --g-theme-color-content-default: oklch(20% 0 0);
116
204
  --g-theme-color-content-subtle: oklch(60% 0 0);
117
205
  --g-theme-color-content-knockout: oklch(100% 0 0);
@@ -127,10 +215,82 @@
127
215
  --g-theme-spacing-xl: 2rem;
128
216
  --g-theme-spacing-2xl: 3rem;
129
217
  --g-theme-spacing-3xl: 4rem;
130
- --g-theme-typography-font-family-heading: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
131
- --g-theme-typography-font-family-body: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
132
218
  --g-theme-typography-font-weight-heading: 700;
133
219
  --g-theme-typography-font-weight-body: 400;
220
+ --g-theme-typography-font-family-heading: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
221
+ --g-theme-typography-font-family-body: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
222
+ --g-theme-typography-h1-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
223
+ --g-theme-typography-h1-font-weight: 700;
224
+ --g-theme-typography-h1-font-size: 6.25rem;
225
+ --g-theme-typography-h1-line-height: 1.1;
226
+ --g-theme-typography-h1-letter-spacing: 0rem;
227
+ --g-theme-typography-h2-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
228
+ --g-theme-typography-h2-font-weight: 700;
229
+ --g-theme-typography-h2-font-size: 3rem;
230
+ --g-theme-typography-h2-line-height: 1.17;
231
+ --g-theme-typography-h2-letter-spacing: 0rem;
232
+ --g-theme-typography-h3-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
233
+ --g-theme-typography-h3-font-weight: 700;
234
+ --g-theme-typography-h3-font-size: 2.5rem;
235
+ --g-theme-typography-h3-line-height: 1.2;
236
+ --g-theme-typography-h3-letter-spacing: 0rem;
237
+ --g-theme-typography-h4-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
238
+ --g-theme-typography-h4-font-weight: 700;
239
+ --g-theme-typography-h4-font-size: 2rem;
240
+ --g-theme-typography-h4-line-height: 1.25;
241
+ --g-theme-typography-h4-letter-spacing: 0rem;
242
+ --g-theme-typography-h5-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
243
+ --g-theme-typography-h5-font-weight: 700;
244
+ --g-theme-typography-h5-font-size: 1.75rem;
245
+ --g-theme-typography-h5-line-height: 1.29;
246
+ --g-theme-typography-h5-letter-spacing: 0rem;
247
+ --g-theme-typography-h6-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
248
+ --g-theme-typography-h6-font-weight: 700;
249
+ --g-theme-typography-h6-font-size: 1.5rem;
250
+ --g-theme-typography-h6-line-height: 1.33;
251
+ --g-theme-typography-h6-letter-spacing: 0rem;
252
+ --g-theme-typography-body-lg-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
253
+ --g-theme-typography-body-lg-font-weight: 400;
254
+ --g-theme-typography-body-lg-font-size: 1.25rem;
255
+ --g-theme-typography-body-lg-line-height: 1.4;
256
+ --g-theme-typography-body-lg-letter-spacing: 0rem;
257
+ --g-theme-typography-body-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
258
+ --g-theme-typography-body-font-weight: 500;
259
+ --g-theme-typography-body-font-size: 1rem;
260
+ --g-theme-typography-body-line-height: 1.5;
261
+ --g-theme-typography-body-letter-spacing: 0rem;
262
+ --g-theme-typography-body-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
263
+ --g-theme-typography-body-sm-font-weight: 500;
264
+ --g-theme-typography-body-sm-font-size: 0.875rem;
265
+ --g-theme-typography-body-sm-line-height: 1.43;
266
+ --g-theme-typography-body-sm-letter-spacing: 0rem;
267
+ --g-theme-typography-label-lg-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
268
+ --g-theme-typography-label-lg-font-weight: 600;
269
+ --g-theme-typography-label-lg-font-size: 1.25rem;
270
+ --g-theme-typography-label-lg-line-height: 1.4;
271
+ --g-theme-typography-label-lg-letter-spacing: 0rem;
272
+ --g-theme-typography-label-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
273
+ --g-theme-typography-label-font-weight: 600;
274
+ --g-theme-typography-label-font-size: 1rem;
275
+ --g-theme-typography-label-line-height: 1.5;
276
+ --g-theme-typography-label-letter-spacing: 0rem;
277
+ --g-theme-typography-label-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
278
+ --g-theme-typography-label-sm-font-weight: 600;
279
+ --g-theme-typography-label-sm-font-size: 0.875rem;
280
+ --g-theme-typography-label-sm-line-height: 1.43;
281
+ --g-theme-typography-label-sm-letter-spacing: 0rem;
282
+ --g-theme-typography-meta-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
283
+ --g-theme-typography-meta-font-weight: 600;
284
+ --g-theme-typography-meta-font-size: 0.875rem;
285
+ --g-theme-typography-meta-line-height: 1.43;
286
+ --g-theme-typography-meta-letter-spacing: 0.0313rem;
287
+ --g-theme-typography-meta-sm-font-family: Quicksand, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
288
+ --g-theme-typography-meta-sm-font-weight: 600;
289
+ --g-theme-typography-meta-sm-font-size: 0.75rem;
290
+ --g-theme-typography-meta-sm-line-height: 1.33;
291
+ --g-theme-typography-meta-sm-letter-spacing: 0.0313rem;
292
+ --g-theme-box-shadow-sm: 0rem 0.25rem 0.25rem 0rem #00000040;
293
+ --g-theme-box-shadow-md: 0rem 0.5rem 0.375rem -0.375rem #0000001a;
134
294
  --g-theme-button-color-background-default: oklch(94.96% 0.050 15.5);
135
295
  --g-theme-button-color-background-hover: oklch(89.21% 0.097 15.5);
136
296
  --g-theme-button-color-background-active: oklch(89.21% 0.097 15.5);
package/dist/css/wireframe/dark.css ADDED
@@ -0,0 +1,180 @@
1
+ /* Dark mode overrides for wireframe theme */
2
+ /* Auto-detect: respects OS/browser preference unless .light is set */
3
+ @media (prefers-color-scheme: dark) {
4
+ :root:not(.light) {
5
+ --g-theme-color-background-default: oklch(20% 0 0);
6
+ --g-theme-color-background-default-hover: oklch(40% 0 0);
7
+ --g-theme-color-background-subtle: oklch(30% 0 0);
8
+ --g-theme-color-background-subtle-hover: oklch(40% 0 0);
9
+ --g-theme-color-background-knockout: oklch(100% 0 0);
10
+ --g-theme-color-background-brand: oklch(30% 0 0);
11
+ --g-theme-color-background-brand-hover: oklch(40% 0 0);
12
+ --g-theme-color-background-brand-disabled: oklch(40% 0 0);
13
+ --g-theme-color-background-brand-knockout: oklch(90% 0 0);
14
+ --g-theme-color-background-brand-knockout-hover: oklch(80% 0 0);
15
+ --g-theme-color-background-utility-error: oklch(36.89% 0.1443 28.98);
16
+ --g-theme-color-background-utility-error-knockout: oklch(77.04% 0.1486 49.15);
17
+ --g-theme-color-background-utility-warning: oklch(50.09% 0.1025 92.6);
18
+ --g-theme-color-background-utility-warning-knockout: oklch(91.68% 0.1745 101.08);
19
+ --g-theme-color-background-utility-success: oklch(42.59% 0.1358 143.3);
20
+ --g-theme-color-background-utility-success-knockout: oklch(81.78% 0.1827 137.62);
21
+ --g-theme-color-background-utility-info: oklch(37.55% 0.1037 249.04);
22
+ --g-theme-color-background-utility-info-knockout: oklch(90.54% 0.1282 189.63);
23
+ --g-theme-color-background-dataviz-primary: oklch(70% 0 0);
24
+ --g-theme-color-background-dataviz-secondary: oklch(40% 0 0);
25
+ --g-theme-color-background-dataviz-tertiary: oklch(60% 0 0);
26
+ --g-theme-color-background-disabled: oklch(40% 0 0);
27
+ --g-theme-color-border-default: oklch(50% 0 0);
28
+ --g-theme-color-border-default-hover: oklch(70% 0 0);
29
+ --g-theme-color-border-subtle: oklch(40% 0 0);
30
+ --g-theme-color-border-strong: oklch(95% 0 0);
31
+ --g-theme-color-border-knockout: oklch(60% 0 0);
32
+ --g-theme-color-border-brand: oklch(60% 0 0);
33
+ --g-theme-color-border-utility-error: oklch(77.04% 0.1486 49.15);
34
+ --g-theme-color-border-utility-warning: oklch(91.68% 0.1745 101.08);
35
+ --g-theme-color-border-utility-success: oklch(81.78% 0.1827 137.62);
36
+ --g-theme-color-border-utility-info: oklch(90.54% 0.1282 189.63);
37
+ --g-theme-color-border-disabled: oklch(40% 0 0);
38
+ --g-theme-color-content-default: oklch(95% 0 0);
39
+ --g-theme-color-content-default-hover: oklch(100% 0 0);
40
+ --g-theme-color-content-subtle: oklch(70% 0 0);
41
+ --g-theme-color-content-brand: oklch(80% 0 0);
42
+ --g-theme-color-content-brand-hover: oklch(95% 0 0);
43
+ --g-theme-color-content-brand-knockout: oklch(20% 0 0);
44
+ --g-theme-color-content-knockout: oklch(20% 0 0);
45
+ --g-theme-color-content-disabled: oklch(60% 0 0);
46
+ --g-theme-color-content-utility-error: oklch(77.04% 0.1486 49.15);
47
+ --g-theme-color-content-utility-warning: oklch(91.68% 0.1745 101.08);
48
+ --g-theme-color-content-utility-success: oklch(81.78% 0.1827 137.62);
49
+ --g-theme-color-content-utility-info: oklch(90.54% 0.1282 189.63);
50
+ --g-theme-box-shadow-sm: 0rem 0.25rem 0.25rem 0rem #00000080;
51
+ --g-theme-box-shadow-md: 0rem 0.5rem 0.375rem -0.375rem #00000040;
52
+ --g-theme-button-color-background-default: oklch(30% 0 0);
53
+ --g-theme-button-color-background-hover: oklch(40% 0 0);
54
+ --g-theme-button-color-background-active: oklch(40% 0 0);
55
+ --g-theme-button-color-background-disabled: oklch(20% 0 0);
56
+ --g-theme-button-color-content-default: oklch(95% 0 0);
57
+ --g-theme-button-color-content-hover: oklch(20% 0 0);
58
+ --g-theme-button-color-content-active: oklch(20% 0 0);
59
+ --g-theme-button-color-content-disabled: oklch(60% 0 0);
60
+ --g-theme-button-color-border-default: oklch(50% 0 0);
61
+ --g-theme-button-color-border-hover: oklch(60% 0 0);
62
+ --g-theme-button-color-border-active: oklch(60% 0 0);
63
+ --g-theme-button-color-border-disabled: oklch(50% 0 0);
64
+ --g-theme-button-primary-color-background-disabled: oklch(40% 0 0);
65
+ --g-theme-button-primary-color-content-default: oklch(100% 0 0);
66
+ --g-theme-button-primary-color-content-hover: oklch(100% 0 0);
67
+ --g-theme-button-primary-color-content-active: oklch(100% 0 0);
68
+ --g-theme-button-primary-color-content-disabled: oklch(95% 0 0);
69
+ --g-theme-button-primary-color-border-disabled: oklch(50% 0 0);
70
+ --g-theme-form-color-background-default: oklch(20% 0 0);
71
+ --g-theme-form-color-background-focus: oklch(20% 0 0);
72
+ --g-theme-form-color-background-hover: oklch(30% 0 0);
73
+ --g-theme-form-color-background-active: oklch(20% 0 0);
74
+ --g-theme-form-color-background-disabled: oklch(20% 0 0);
75
+ --g-theme-form-color-content-default: oklch(95% 0 0);
76
+ --g-theme-form-color-content-focus: oklch(95% 0 0);
77
+ --g-theme-form-color-content-hover: oklch(95% 0 0);
78
+ --g-theme-form-color-content-active: oklch(95% 0 0);
79
+ --g-theme-form-color-content-disabled: oklch(60% 0 0);
80
+ --g-theme-form-color-border-default: oklch(50% 0 0);
81
+ --g-theme-form-color-border-focus: oklch(60% 0 0);
82
+ --g-theme-form-color-border-hover: oklch(70% 0 0);
83
+ --g-theme-form-color-border-active: oklch(60% 0 0);
84
+ --g-theme-form-color-border-disabled: oklch(50% 0 0);
85
+ --g-theme-form-color-border-error: oklch(77.04% 0.1486 49.15);
86
+ --g-theme-link-knockout-color-content-default: oklch(20% 0 0);
87
+ --g-theme-link-knockout-color-content-hover: oklch(20% 0 0);
88
+ --g-theme-link-knockout-color-content-active: oklch(20% 0 0);
89
+ --g-theme-link-knockout-color-content-visited: oklch(20% 0 0);
90
+ }
91
+ }
92
+
93
+ /* Manual override: force dark mode on any element or subtree */
94
+ .dark {
95
+ --g-theme-color-background-default: oklch(20% 0 0);
96
+ --g-theme-color-background-default-hover: oklch(40% 0 0);
97
+ --g-theme-color-background-subtle: oklch(30% 0 0);
98
+ --g-theme-color-background-subtle-hover: oklch(40% 0 0);
99
+ --g-theme-color-background-knockout: oklch(100% 0 0);
100
+ --g-theme-color-background-brand: oklch(30% 0 0);
101
+ --g-theme-color-background-brand-hover: oklch(40% 0 0);
102
+ --g-theme-color-background-brand-disabled: oklch(40% 0 0);
103
+ --g-theme-color-background-brand-knockout: oklch(90% 0 0);
104
+ --g-theme-color-background-brand-knockout-hover: oklch(80% 0 0);
105
+ --g-theme-color-background-utility-error: oklch(36.89% 0.1443 28.98);
106
+ --g-theme-color-background-utility-error-knockout: oklch(77.04% 0.1486 49.15);
107
+ --g-theme-color-background-utility-warning: oklch(50.09% 0.1025 92.6);
108
+ --g-theme-color-background-utility-warning-knockout: oklch(91.68% 0.1745 101.08);
109
+ --g-theme-color-background-utility-success: oklch(42.59% 0.1358 143.3);
110
+ --g-theme-color-background-utility-success-knockout: oklch(81.78% 0.1827 137.62);
111
+ --g-theme-color-background-utility-info: oklch(37.55% 0.1037 249.04);
112
+ --g-theme-color-background-utility-info-knockout: oklch(90.54% 0.1282 189.63);
113
+ --g-theme-color-background-dataviz-primary: oklch(70% 0 0);
114
+ --g-theme-color-background-dataviz-secondary: oklch(40% 0 0);
115
+ --g-theme-color-background-dataviz-tertiary: oklch(60% 0 0);
116
+ --g-theme-color-background-disabled: oklch(40% 0 0);
117
+ --g-theme-color-border-default: oklch(50% 0 0);
118
+ --g-theme-color-border-default-hover: oklch(70% 0 0);
119
+ --g-theme-color-border-subtle: oklch(40% 0 0);
120
+ --g-theme-color-border-strong: oklch(95% 0 0);
121
+ --g-theme-color-border-knockout: oklch(60% 0 0);
122
+ --g-theme-color-border-brand: oklch(60% 0 0);
123
+ --g-theme-color-border-utility-error: oklch(77.04% 0.1486 49.15);
124
+ --g-theme-color-border-utility-warning: oklch(91.68% 0.1745 101.08);
125
+ --g-theme-color-border-utility-success: oklch(81.78% 0.1827 137.62);
126
+ --g-theme-color-border-utility-info: oklch(90.54% 0.1282 189.63);
127
+ --g-theme-color-border-disabled: oklch(40% 0 0);
128
+ --g-theme-color-content-default: oklch(95% 0 0);
129
+ --g-theme-color-content-default-hover: oklch(100% 0 0);
130
+ --g-theme-color-content-subtle: oklch(70% 0 0);
131
+ --g-theme-color-content-brand: oklch(80% 0 0);
132
+ --g-theme-color-content-brand-hover: oklch(95% 0 0);
133
+ --g-theme-color-content-brand-knockout: oklch(20% 0 0);
134
+ --g-theme-color-content-knockout: oklch(20% 0 0);
135
+ --g-theme-color-content-disabled: oklch(60% 0 0);
136
+ --g-theme-color-content-utility-error: oklch(77.04% 0.1486 49.15);
137
+ --g-theme-color-content-utility-warning: oklch(91.68% 0.1745 101.08);
138
+ --g-theme-color-content-utility-success: oklch(81.78% 0.1827 137.62);
139
+ --g-theme-color-content-utility-info: oklch(90.54% 0.1282 189.63);
140
+ --g-theme-box-shadow-sm: 0rem 0.25rem 0.25rem 0rem #00000080;
141
+ --g-theme-box-shadow-md: 0rem 0.5rem 0.375rem -0.375rem #00000040;
142
+ --g-theme-button-color-background-default: oklch(30% 0 0);
143
+ --g-theme-button-color-background-hover: oklch(40% 0 0);
144
+ --g-theme-button-color-background-active: oklch(40% 0 0);
145
+ --g-theme-button-color-background-disabled: oklch(20% 0 0);
146
+ --g-theme-button-color-content-default: oklch(95% 0 0);
147
+ --g-theme-button-color-content-hover: oklch(20% 0 0);
148
+ --g-theme-button-color-content-active: oklch(20% 0 0);
149
+ --g-theme-button-color-content-disabled: oklch(60% 0 0);
150
+ --g-theme-button-color-border-default: oklch(50% 0 0);
151
+ --g-theme-button-color-border-hover: oklch(60% 0 0);
152
+ --g-theme-button-color-border-active: oklch(60% 0 0);
153
+ --g-theme-button-color-border-disabled: oklch(50% 0 0);
154
+ --g-theme-button-primary-color-background-disabled: oklch(40% 0 0);
155
+ --g-theme-button-primary-color-content-default: oklch(100% 0 0);
156
+ --g-theme-button-primary-color-content-hover: oklch(100% 0 0);
157
+ --g-theme-button-primary-color-content-active: oklch(100% 0 0);
158
+ --g-theme-button-primary-color-content-disabled: oklch(95% 0 0);
159
+ --g-theme-button-primary-color-border-disabled: oklch(50% 0 0);
160
+ --g-theme-form-color-background-default: oklch(20% 0 0);
161
+ --g-theme-form-color-background-focus: oklch(20% 0 0);
162
+ --g-theme-form-color-background-hover: oklch(30% 0 0);
163
+ --g-theme-form-color-background-active: oklch(20% 0 0);
164
+ --g-theme-form-color-background-disabled: oklch(20% 0 0);
165
+ --g-theme-form-color-content-default: oklch(95% 0 0);
166
+ --g-theme-form-color-content-focus: oklch(95% 0 0);
167
+ --g-theme-form-color-content-hover: oklch(95% 0 0);
168
+ --g-theme-form-color-content-active: oklch(95% 0 0);
169
+ --g-theme-form-color-content-disabled: oklch(60% 0 0);
170
+ --g-theme-form-color-border-default: oklch(50% 0 0);
171
+ --g-theme-form-color-border-focus: oklch(60% 0 0);
172
+ --g-theme-form-color-border-hover: oklch(70% 0 0);
173
+ --g-theme-form-color-border-active: oklch(60% 0 0);
174
+ --g-theme-form-color-border-disabled: oklch(50% 0 0);
175
+ --g-theme-form-color-border-error: oklch(77.04% 0.1486 49.15);
176
+ --g-theme-link-knockout-color-content-default: oklch(20% 0 0);
177
+ --g-theme-link-knockout-color-content-hover: oklch(20% 0 0);
178
+ --g-theme-link-knockout-color-content-active: oklch(20% 0 0);
179
+ --g-theme-link-knockout-color-content-visited: oklch(20% 0 0);
180
+ }