@vsn-ux/gaia-styles 0.1.1

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 (53) hide show
  1. package/README.md +125 -0
  2. package/dist/all-no-reset-10pt.css +1104 -0
  3. package/dist/all-no-reset.css +1104 -0
  4. package/dist/all.css +1245 -0
  5. package/dist/base.css +6 -0
  6. package/dist/components/avatar.css +38 -0
  7. package/dist/components/badge.css +122 -0
  8. package/dist/components/button.css +117 -0
  9. package/dist/components/card.css +40 -0
  10. package/dist/components/checkbox.css +91 -0
  11. package/dist/components/form-field.css +32 -0
  12. package/dist/components/input.css +73 -0
  13. package/dist/components/menu.css +73 -0
  14. package/dist/components/notification.css +68 -0
  15. package/dist/components/radio-button.css +109 -0
  16. package/dist/components/segmented-control.css +76 -0
  17. package/dist/components/text-area.css +63 -0
  18. package/dist/components/tooltip.css +126 -0
  19. package/dist/components.css +861 -0
  20. package/dist/design-tokens.css +159 -0
  21. package/dist/design-tokens.d.ts +167 -0
  22. package/dist/design-tokens.js +1654 -0
  23. package/package.json +73 -0
  24. package/src/design-tokens/dtcg-tokens.json +504 -0
  25. package/src/font/Inter-Bold.woff2 +0 -0
  26. package/src/font/Inter-BoldItalic.woff2 +0 -0
  27. package/src/font/Inter-Italic.woff2 +0 -0
  28. package/src/font/Inter-Medium.woff2 +0 -0
  29. package/src/font/Inter-MediumItalic.woff2 +0 -0
  30. package/src/font/Inter-Regular.woff2 +0 -0
  31. package/src/font/Inter-SemiBold.woff2 +0 -0
  32. package/src/font/Inter-SemiBoldItalic.woff2 +0 -0
  33. package/src/font/inter.css +56 -0
  34. package/src/styles/all-no-reset-10pt.css +12 -0
  35. package/src/styles/all-no-reset.css +7 -0
  36. package/src/styles/all.css +8 -0
  37. package/src/styles/base.css +3 -0
  38. package/src/styles/components/avatar.css +11 -0
  39. package/src/styles/components/badge.css +43 -0
  40. package/src/styles/components/button.css +83 -0
  41. package/src/styles/components/card.css +19 -0
  42. package/src/styles/components/checkbox.css +66 -0
  43. package/src/styles/components/form-field.css +11 -0
  44. package/src/styles/components/input.css +40 -0
  45. package/src/styles/components/menu.css +27 -0
  46. package/src/styles/components/notification.css +39 -0
  47. package/src/styles/components/radio-button.css +44 -0
  48. package/src/styles/components/segmented-control.css +40 -0
  49. package/src/styles/components/text-area.css +27 -0
  50. package/src/styles/components/tooltip.css +92 -0
  51. package/src/styles/components.css +13 -0
  52. package/src/styles/tailwind.css +2 -0
  53. package/src/styles/theme.css +82 -0
package/dist/all.css ADDED
@@ -0,0 +1,1245 @@
1
+ /*! tailwindcss v4.0.6 | MIT License | https://tailwindcss.com */
2
+ :root {
3
+ --ga-color-blue-10: #edf4fe;
4
+ --ga-color-blue-40: #93bbf9;
5
+ --ga-color-blue-70: #1f4ddb;
6
+ --ga-color-border-action: var(--ga-color-primary);
7
+ --ga-color-border-action-hover: var(--ga-color-primary-60);
8
+ --ga-color-border-action-hover-2: var(--ga-color-secondary-30);
9
+ --ga-color-border-disabled: var(--ga-color-neutral);
10
+ --ga-color-border-error: var(--ga-color-error);
11
+ --ga-color-border-focus: var(--ga-color-primary);
12
+ --ga-color-border-information: var(--ga-color-information);
13
+ --ga-color-border-primary: var(--ga-color-neutral-30);
14
+ --ga-color-border-secondary: var(--ga-color-secondary-30);
15
+ --ga-color-border-success: var(--ga-color-success);
16
+ --ga-color-border-warning: var(--ga-color-warning);
17
+ --ga-color-cyan-60: #377ea0;
18
+ --ga-color-cyan-70: #2a6480;
19
+ --ga-color-cyan-80: #1f4e66;
20
+ --ga-color-cyan-90: #133445;
21
+ --ga-color-error: var(--ga-color-red-70);
22
+ --ga-color-error-light: var(--ga-color-utility-red-light);
23
+ --ga-color-green-10: #eef5ee;
24
+ --ga-color-green-40: #9bc59b;
25
+ --ga-color-green-70: #2e6b31;
26
+ --ga-color-grey-10: #f2f2f2;
27
+ --ga-color-grey-40: #b9b9b9;
28
+ --ga-color-indigo-10: #f0f2fe;
29
+ --ga-color-indigo-40: #adb4f9;
30
+ --ga-color-information: var(--ga-color-blue-70);
31
+ --ga-color-information-light: var(--ga-color-utility-blue-light);
32
+ --ga-color-lime-10: #edf6dd;
33
+ --ga-color-lime-40: #a5c656;
34
+ --ga-color-neutral: var(--ga-color-neutral-30);
35
+ --ga-color-neutral-10: #f2f3f5;
36
+ --ga-color-neutral-20: #e2e4e9;
37
+ --ga-color-neutral-30: #cccfd7;
38
+ --ga-color-neutral-50: #8f95a4;
39
+ --ga-color-neutral-60: #6f7687;
40
+ --ga-color-orange-10: #fcf0e7;
41
+ --ga-color-orange-20: #fae0ce;
42
+ --ga-color-orange-30: #f5c3a1;
43
+ --ga-color-orange-40: #f2a676;
44
+ --ga-color-orange-60: #bb5822;
45
+ --ga-color-pink-10: #fbeefc;
46
+ --ga-color-pink-40: #e79dee;
47
+ --ga-color-primary: var(--ga-color-cyan-80);
48
+ --ga-color-primary-60: var(--ga-color-cyan-60);
49
+ --ga-color-primary-70: var(--ga-color-cyan-70);
50
+ --ga-color-primary-90: var(--ga-color-cyan-90);
51
+ --ga-color-purple-10: #f3f1fe;
52
+ --ga-color-purple-40: #c3acf9;
53
+ --ga-color-red-10: #fcf1ee;
54
+ --ga-color-red-40: #eca79e;
55
+ --ga-color-red-70: #b0241d;
56
+ --ga-color-rose-10: #fcf0f4;
57
+ --ga-color-rose-40: #efa1bd;
58
+ --ga-color-secondary: var(--ga-color-orange-20);
59
+ --ga-color-secondary-10: var(--ga-color-orange-10);
60
+ --ga-color-secondary-30: var(--ga-color-orange-30);
61
+ --ga-color-success: var(--ga-color-green-70);
62
+ --ga-color-success-light: var(--ga-color-utility-green-light);
63
+ --ga-color-surface-action: var(--ga-color-primary);
64
+ --ga-color-surface-action-hover: var(--ga-color-primary-90);
65
+ --ga-color-surface-action-hover-2: var(--ga-color-orange-20);
66
+ --ga-color-surface-disable-selected: var(--ga-color-neutral-50);
67
+ --ga-color-surface-disabled: var(--ga-color-neutral-20);
68
+ --ga-color-surface-error: var(--ga-color-utility-red-light);
69
+ --ga-color-surface-information: var(--ga-color-information-light);
70
+ --ga-color-surface-page: var(--ga-color-neutral-10);
71
+ --ga-color-surface-primary: var(--ga-color-white);
72
+ --ga-color-surface-success: var(--ga-color-success-light);
73
+ --ga-color-surface-warning: var(--ga-color-utility-orange-light);
74
+ --ga-color-teal-10: #ecf5f4;
75
+ --ga-color-teal-20: #d5e8e6;
76
+ --ga-color-teal-30: #b4d7d4;
77
+ --ga-color-teal-40: #92c3c0;
78
+ --ga-color-teal-50: #51a39e;
79
+ --ga-color-teal-60: #3a837e;
80
+ --ga-color-teal-70: #2c6764;
81
+ --ga-color-teal-80: #21514e;
82
+ --ga-color-teal-90: #143734;
83
+ --ga-color-teal-100: #081f1f;
84
+ --ga-color-text-action: var(--ga-color-primary);
85
+ --ga-color-text-action-hover: var(--ga-color-primary-90);
86
+ --ga-color-text-body: var(--ga-color-primary-90);
87
+ --ga-color-text-disable-selected: var(--ga-color-neutral-60);
88
+ --ga-color-text-disabled: var(--ga-color-utility-grey);
89
+ --ga-color-text-error: var(--ga-color-primary-90);
90
+ --ga-color-text-headings: var(--ga-color-primary-90);
91
+ --ga-color-text-information: var(--ga-color-primary-90);
92
+ --ga-color-text-on-action: var(--ga-color-secondary-10);
93
+ --ga-color-text-on-disabled: var(--ga-color-primary-70);
94
+ --ga-color-text-success: var(--ga-color-primary-90);
95
+ --ga-color-text-warning: var(--ga-color-primary-90);
96
+ --ga-color-utility-blue: var(--ga-color-blue-40);
97
+ --ga-color-utility-blue-light: var(--ga-color-blue-10);
98
+ --ga-color-utility-green: var(--ga-color-green-40);
99
+ --ga-color-utility-green-light: var(--ga-color-green-10);
100
+ --ga-color-utility-grey: var(--ga-color-grey-40);
101
+ --ga-color-utility-grey-light: var(--ga-color-grey-10);
102
+ --ga-color-utility-indigo: var(--ga-color-indigo-40);
103
+ --ga-color-utility-indigo-light: var(--ga-color-indigo-10);
104
+ --ga-color-utility-lime: var(--ga-color-lime-40);
105
+ --ga-color-utility-lime-light: var(--ga-color-lime-10);
106
+ --ga-color-utility-orange: var(--ga-color-orange-40);
107
+ --ga-color-utility-orange-light: var(--ga-color-orange-10);
108
+ --ga-color-utility-pink: var(--ga-color-pink-40);
109
+ --ga-color-utility-pink-light: var(--ga-color-pink-10);
110
+ --ga-color-utility-purple: var(--ga-color-purple-40);
111
+ --ga-color-utility-purple-light: var(--ga-color-purple-10);
112
+ --ga-color-utility-red: var(--ga-color-red-40);
113
+ --ga-color-utility-red-light: var(--ga-color-red-10);
114
+ --ga-color-utility-rose: var(--ga-color-rose-40);
115
+ --ga-color-utility-rose-light: var(--ga-color-rose-10);
116
+ --ga-color-utility-teal: var(--ga-color-teal-40);
117
+ --ga-color-utility-teal-light: var(--ga-color-teal-10);
118
+ --ga-color-utility-yellow: var(--ga-color-yellow-40);
119
+ --ga-color-utility-yellow-light: var(--ga-color-yellow-10);
120
+ --ga-color-warning: var(--ga-color-orange-60);
121
+ --ga-color-warning-light: var(--ga-color-utility-orange-light);
122
+ --ga-color-white: #ffffff;
123
+ --ga-color-yellow-10: #fdf5ae;
124
+ --ga-color-yellow-40: #e1b402;
125
+ --ga-font-family: "Inter";
126
+ --ga-radius: 4px;
127
+ --ga-radius-round: 99999px;
128
+ --ga-radius-sharp: 0.28px;
129
+ --ga-size-0: 0;
130
+ --ga-size-2: 2px;
131
+ --ga-size-4: 4px;
132
+ --ga-size-8: 8px;
133
+ --ga-size-10: 10px;
134
+ --ga-size-11: 11px;
135
+ --ga-size-12: 12px;
136
+ --ga-size-14: 14px;
137
+ --ga-size-16: 16px;
138
+ --ga-size-20: 20px;
139
+ --ga-size-24: 24px;
140
+ --ga-size-32: 32px;
141
+ --ga-size-36: 36px;
142
+ --ga-size-40: 40px;
143
+ --ga-size-48: 48px;
144
+ --ga-size-64: 64px;
145
+ --ga-size-80: 80px;
146
+ --ga-size-96: 96px;
147
+ --ga-size-160: 160px;
148
+ --ga-size-font-2xl: var(--ga-size-24);
149
+ --ga-size-font-3xl: var(--ga-size-36);
150
+ --ga-size-font-lg: var(--ga-size-16);
151
+ --ga-size-font-md: var(--ga-size-14);
152
+ --ga-size-font-sm: var(--ga-size-12);
153
+ --ga-size-font-xl: var(--ga-size-20);
154
+ --ga-size-font-xs: var(--ga-size-11);
155
+ }
156
+ @layer theme, base, components, utilities;
157
+ @layer theme {
158
+ :root, :host {
159
+ --color-cyan-60: var(--ga-color-cyan-60);
160
+ --color-cyan-70: var(--ga-color-cyan-70);
161
+ --color-cyan-80: var(--ga-color-cyan-80);
162
+ --color-cyan-90: var(--ga-color-cyan-90);
163
+ --color-blue-10: var(--ga-color-blue-10);
164
+ --color-blue-40: var(--ga-color-blue-40);
165
+ --color-green-10: var(--ga-color-green-10);
166
+ --color-green-40: var(--ga-color-green-40);
167
+ --color-grey-10: var(--ga-color-grey-10);
168
+ --color-grey-40: var(--ga-color-grey-40);
169
+ --color-indigo-10: var(--ga-color-indigo-10);
170
+ --color-indigo-40: var(--ga-color-indigo-40);
171
+ --color-lime-10: var(--ga-color-lime-10);
172
+ --color-lime-40: var(--ga-color-lime-40);
173
+ --color-neutral: var(--ga-color-neutral);
174
+ --color-neutral-10: var(--ga-color-neutral-10);
175
+ --color-neutral-20: var(--ga-color-neutral-20);
176
+ --color-neutral-30: var(--ga-color-neutral-30);
177
+ --color-orange-10: var(--ga-color-orange-10);
178
+ --color-orange-20: var(--ga-color-orange-20);
179
+ --color-orange-30: var(--ga-color-orange-30);
180
+ --color-orange-40: var(--ga-color-orange-40);
181
+ --color-pink-10: var(--ga-color-pink-10);
182
+ --color-pink-40: var(--ga-color-pink-40);
183
+ --color-purple-10: var(--ga-color-purple-10);
184
+ --color-purple-40: var(--ga-color-purple-40);
185
+ --color-red-10: var(--ga-color-red-10);
186
+ --color-red-40: var(--ga-color-red-40);
187
+ --color-rose-10: var(--ga-color-rose-10);
188
+ --color-rose-40: var(--ga-color-rose-40);
189
+ --color-teal-10: var(--ga-color-teal-10);
190
+ --color-teal-20: var(--ga-color-teal-20);
191
+ --color-teal-30: var(--ga-color-teal-30);
192
+ --color-teal-40: var(--ga-color-teal-40);
193
+ --color-teal-50: var(--ga-color-teal-50);
194
+ --color-teal-60: var(--ga-color-teal-60);
195
+ --color-teal-70: var(--ga-color-teal-70);
196
+ --color-teal-80: var(--ga-color-teal-80);
197
+ --color-teal-90: var(--ga-color-teal-90);
198
+ --color-teal-100: var(--ga-color-teal-100);
199
+ --color-yellow-10: var(--ga-color-yellow-10);
200
+ --color-yellow-40: var(--ga-color-yellow-40);
201
+ --color-black: #000;
202
+ --color-white: #fff;
203
+ --font-inter: Inter, ui-sans-serif, system-ui, sans-serif;
204
+ --font-inter--font-feature-settings: 'liga' 1, 'calt' 1;
205
+ --default-font-family: var(--font-inter);
206
+ --text-xs: var(--ga-size-font-xs);
207
+ --text-xs--line-height: calc(var(--spacing) * 4 * 1);
208
+ --text-xs--letter-spacing: calc(var(--spacing) * 4 * 0.005);
209
+ --text-sm: var(--ga-size-font-sm);
210
+ --text-sm--line-height: calc(var(--spacing) * 4 * 1.25);
211
+ --text-sm--letter-spacing: 0;
212
+ --text-md: var(--ga-size-font-md);
213
+ --text-md--line-height: calc(var(--spacing) * 4 * 1.25);
214
+ --text-md--letter-spacing: calc(var(--spacing) * 4 * -0.006);
215
+ --text-lg: var(--ga-size-font-lg);
216
+ --text-lg--line-height: calc(var(--spacing) * 4 * 1.5);
217
+ --text-lg--letter-spacing: calc(var(--spacing) * 4 * -0.011);
218
+ --text-xl: var(--ga-size-font-xl);
219
+ --text-xl--line-height: calc(var(--spacing) * 4 * 2);
220
+ --text-xl--letter-spacing: calc(var(--spacing) * 4 * -0.017);
221
+ --text-2xl: var(--ga-size-font-2xl);
222
+ --text-2xl--line-height: calc(var(--spacing) * 4 * 2.25);
223
+ --text-2xl--letter-spacing: calc(var(--spacing) * 4 * -0.019);
224
+ --text-3xl: var(--ga-size-font-3xl);
225
+ --text-3xl--line-height: calc(var(--spacing) * 4 * 3.5);
226
+ --text-3xl--letter-spacing: calc(var(--spacing) * 4 * -0.022);
227
+ --font-weight-normal: 400;
228
+ --font-weight-medium: 500;
229
+ --font-weight-semibold: 600;
230
+ --font-weight-bold: 700;
231
+ --radius: var(--ga-radius);
232
+ --radius-sharp: var(--ga-radius-sharp);
233
+ --spacing: 0.25rem;
234
+ }
235
+ }
236
+ @layer base {
237
+ *, ::after, ::before, ::backdrop, ::file-selector-button {
238
+ box-sizing: border-box;
239
+ margin: 0;
240
+ padding: 0;
241
+ border: 0 solid;
242
+ }
243
+ html, :host {
244
+ line-height: 1.5;
245
+ -webkit-text-size-adjust: 100%;
246
+ tab-size: 4;
247
+ font-family: var( --default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' );
248
+ font-feature-settings: var(--default-font-feature-settings, normal);
249
+ font-variation-settings: var(--default-font-variation-settings, normal);
250
+ -webkit-tap-highlight-color: transparent;
251
+ }
252
+ body {
253
+ line-height: inherit;
254
+ }
255
+ hr {
256
+ height: 0;
257
+ color: inherit;
258
+ border-top-width: 1px;
259
+ }
260
+ abbr:where([title]) {
261
+ -webkit-text-decoration: underline dotted;
262
+ text-decoration: underline dotted;
263
+ }
264
+ h1, h2, h3, h4, h5, h6 {
265
+ font-size: inherit;
266
+ font-weight: inherit;
267
+ }
268
+ a {
269
+ color: inherit;
270
+ -webkit-text-decoration: inherit;
271
+ text-decoration: inherit;
272
+ }
273
+ b, strong {
274
+ font-weight: bolder;
275
+ }
276
+ code, kbd, samp, pre {
277
+ font-family: var( --default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace );
278
+ font-feature-settings: var(--default-mono-font-feature-settings, normal);
279
+ font-variation-settings: var(--default-mono-font-variation-settings, normal);
280
+ font-size: 1em;
281
+ }
282
+ small {
283
+ font-size: 80%;
284
+ }
285
+ sub, sup {
286
+ font-size: 75%;
287
+ line-height: 0;
288
+ position: relative;
289
+ vertical-align: baseline;
290
+ }
291
+ sub {
292
+ bottom: -0.25em;
293
+ }
294
+ sup {
295
+ top: -0.5em;
296
+ }
297
+ table {
298
+ text-indent: 0;
299
+ border-color: inherit;
300
+ border-collapse: collapse;
301
+ }
302
+ :-moz-focusring {
303
+ outline: auto;
304
+ }
305
+ progress {
306
+ vertical-align: baseline;
307
+ }
308
+ summary {
309
+ display: list-item;
310
+ }
311
+ ol, ul, menu {
312
+ list-style: none;
313
+ }
314
+ img, svg, video, canvas, audio, iframe, embed, object {
315
+ display: block;
316
+ vertical-align: middle;
317
+ }
318
+ img, video {
319
+ max-width: 100%;
320
+ height: auto;
321
+ }
322
+ button, input, select, optgroup, textarea, ::file-selector-button {
323
+ font: inherit;
324
+ font-feature-settings: inherit;
325
+ font-variation-settings: inherit;
326
+ letter-spacing: inherit;
327
+ color: inherit;
328
+ border-radius: 0;
329
+ background-color: transparent;
330
+ opacity: 1;
331
+ }
332
+ :where(select:is([multiple], [size])) optgroup {
333
+ font-weight: bolder;
334
+ }
335
+ :where(select:is([multiple], [size])) optgroup option {
336
+ padding-inline-start: 20px;
337
+ }
338
+ ::file-selector-button {
339
+ margin-inline-end: 4px;
340
+ }
341
+ ::placeholder {
342
+ opacity: 1;
343
+ color: color-mix(in oklab, currentColor 50%, transparent);
344
+ }
345
+ textarea {
346
+ resize: vertical;
347
+ }
348
+ ::-webkit-search-decoration {
349
+ -webkit-appearance: none;
350
+ }
351
+ ::-webkit-date-and-time-value {
352
+ min-height: 1lh;
353
+ text-align: inherit;
354
+ }
355
+ ::-webkit-datetime-edit {
356
+ display: inline-flex;
357
+ }
358
+ ::-webkit-datetime-edit-fields-wrapper {
359
+ padding: 0;
360
+ }
361
+ ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
362
+ padding-block: 0;
363
+ }
364
+ :-moz-ui-invalid {
365
+ box-shadow: none;
366
+ }
367
+ button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
368
+ appearance: button;
369
+ }
370
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
371
+ height: auto;
372
+ }
373
+ [hidden]:where(:not([hidden='until-found'])) {
374
+ display: none !important;
375
+ }
376
+ }
377
+ @layer base {
378
+ body {
379
+ font-family: Inter, ui-sans-serif, system-ui, sans-serif;
380
+ font-feature-settings: 'liga' 1, 'calt' 1;
381
+ color: var(--ga-color-cyan-90);
382
+ }
383
+ }
384
+ @layer components {
385
+ .ga-avatar {
386
+ display: inline-flex;
387
+ height: calc(0.25rem * 10);
388
+ width: calc(0.25rem * 10);
389
+ align-items: center;
390
+ justify-content: center;
391
+ overflow: hidden;
392
+ border-radius: calc(infinity * 1px);
393
+ border-style: var(--tw-border-style);
394
+ border-width: 1px;
395
+ vertical-align: middle;
396
+ --tw-font-weight: 700;
397
+ font-weight: 700;
398
+ &.ga-avatar--small {
399
+ height: calc(0.25rem * 6);
400
+ width: calc(0.25rem * 6);
401
+ font-size: var(--ga-size-font-sm);
402
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
403
+ letter-spacing: var(--tw-tracking, 0);
404
+ }
405
+ &.ga-avatar--large {
406
+ height: calc(0.25rem * 16);
407
+ width: calc(0.25rem * 16);
408
+ font-size: var(--ga-size-font-2xl);
409
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 2.25));
410
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.019));
411
+ }
412
+ }
413
+ .ga-badge {
414
+ display: inline-block;
415
+ border-radius: calc(infinity * 1px);
416
+ vertical-align: baseline;
417
+ &.ga-badge--text {
418
+ min-width: calc(0.25rem * 6);
419
+ padding: calc(0.25rem * 1);
420
+ text-align: center;
421
+ font-size: var(--ga-size-font-sm);
422
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
423
+ letter-spacing: var(--tw-tracking, 0);
424
+ --tw-leading: calc(0.25rem * 4);
425
+ line-height: calc(0.25rem * 4);
426
+ --tw-font-weight: 500;
427
+ font-weight: 500;
428
+ white-space: nowrap;
429
+ }
430
+ &.ga-badge--dot {
431
+ height: calc(0.25rem * 2);
432
+ width: calc(0.25rem * 2);
433
+ }
434
+ &.ga-badge--default {
435
+ background-color: var(--ga-color-surface-action);
436
+ color: var(--ga-color-text-on-action);
437
+ }
438
+ &.ga-badge--default-inverted {
439
+ background-color: var(--ga-color-orange-20);
440
+ color: var(--ga-color-cyan-90);
441
+ }
442
+ &.ga-badge--information {
443
+ background-color: var(--ga-color-blue-40);
444
+ color: var(--ga-color-cyan-90);
445
+ }
446
+ &.ga-badge--error {
447
+ background-color: var(--ga-color-red-40);
448
+ color: var(--ga-color-cyan-90);
449
+ }
450
+ &.ga-badge--warning {
451
+ background-color: var(--ga-color-orange-40);
452
+ color: var(--ga-color-cyan-90);
453
+ }
454
+ &.ga-badge--success {
455
+ background-color: var(--ga-color-green-40);
456
+ color: var(--ga-color-cyan-90);
457
+ }
458
+ &.ga-badge--muted {
459
+ background-color: #fff;
460
+ color: var(--ga-color-cyan-70);
461
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
462
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
463
+ --tw-ring-color: var(--ga-color-grey-40);
464
+ --tw-ring-inset: inset;
465
+ }
466
+ &.ga-badge--disabled {
467
+ background-color: var(--ga-color-surface-disabled);
468
+ color: var(--ga-color-text);
469
+ }
470
+ }
471
+ .ga-button {
472
+ display: inline-flex;
473
+ height: calc(0.25rem * 10);
474
+ cursor: pointer;
475
+ align-items: center;
476
+ justify-content: center;
477
+ gap: calc(0.25rem * 2);
478
+ border-radius: var(--ga-radius);
479
+ padding-inline: calc(0.25rem * 4);
480
+ vertical-align: middle;
481
+ font-size: var(--ga-size-font-md);
482
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
483
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
484
+ --tw-leading: calc(0.25rem * 1);
485
+ line-height: calc(0.25rem * 1);
486
+ --tw-font-weight: 700;
487
+ font-weight: 700;
488
+ &:focus-visible {
489
+ outline-style: var(--tw-outline-style);
490
+ outline-width: 2px;
491
+ outline-offset: 2px;
492
+ outline-color: var(--ga-color-border-focus);
493
+ }
494
+ &:disabled {
495
+ cursor: not-allowed;
496
+ }
497
+ &.ga-button--primary {
498
+ background-color: var(--ga-color-surface-action);
499
+ color: var(--ga-color-text-on-action);
500
+ &:hover {
501
+ background-color: var(--ga-color-surface-action-hover);
502
+ }
503
+ &:active {
504
+ background-color: var(--ga-color-primary-70);
505
+ }
506
+ &:disabled {
507
+ background-color: var(--ga-color-surface-disabled);
508
+ color: var(--ga-color-text-disabled);
509
+ }
510
+ }
511
+ &.ga-button--secondary {
512
+ border-style: var(--tw-border-style);
513
+ border-width: 1px;
514
+ border-color: var(--ga-color-border-action);
515
+ background-color: var(--ga-color-surface-primary);
516
+ color: var(--ga-color-text-action);
517
+ &:hover {
518
+ background-color: var(--ga-color-surface-action-hover-2);
519
+ }
520
+ &:active {
521
+ background-color: var(--ga-color-surface-primary);
522
+ }
523
+ &:disabled {
524
+ border-color: var(--ga-color-border-disabled);
525
+ background-color: var(--ga-color-surace-page);
526
+ color: var(--ga-color-text-disabled);
527
+ }
528
+ }
529
+ &.ga-button--ghost {
530
+ background-color: transparent;
531
+ color: var(--ga-color-text-action);
532
+ &:hover {
533
+ background-color: var(--ga-color-surface-action-hover-2);
534
+ }
535
+ &:active {
536
+ background-color: transparent;
537
+ }
538
+ &:disabled {
539
+ background-color: transparent;
540
+ color: var(--ga-color-text-disabled);
541
+ }
542
+ }
543
+ &.ga-button--transparent {
544
+ border-style: var(--tw-border-style);
545
+ border-width: 1px;
546
+ border-color: var(--ga-color-border-action);
547
+ background-color: transparent;
548
+ color: var(--ga-color-text-action);
549
+ &:hover {
550
+ background-color: var(--ga-color-surface-action-hover-2);
551
+ }
552
+ &:focus-visible {
553
+ border-color: var(--ga-color-border-action);
554
+ }
555
+ &:active {
556
+ background-color: transparent;
557
+ }
558
+ &:disabled {
559
+ border-color: var(--ga-color-border-disabled);
560
+ background-color: transparent;
561
+ color: var(--ga-color-text-disabled);
562
+ }
563
+ }
564
+ &.ga-button--icon-only {
565
+ width: calc(0.25rem * 10);
566
+ padding-inline: calc(0.25rem * 0);
567
+ }
568
+ }
569
+ .ga-card {
570
+ border-radius: var(--ga-radius);
571
+ border-style: var(--tw-border-style);
572
+ border-width: 1px;
573
+ border-color: var(--ga-color-border-primary);
574
+ background-color: #fff;
575
+ padding: calc(0.25rem * 4);
576
+ font-size: var(--ga-size-font-md);
577
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
578
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
579
+ &.ga-card--selectable {
580
+ cursor: pointer;
581
+ &:hover {
582
+ border-color: var(--ga-color-border-action-hover);
583
+ background-color: var(--ga-color-surface-action-hover-2);
584
+ }
585
+ &:focus-visible {
586
+ outline-style: var(--tw-outline-style);
587
+ outline-width: 2px;
588
+ outline-offset: 2px;
589
+ outline-color: var(--ga-color-border-focus);
590
+ }
591
+ }
592
+ &.ga-card--disabled {
593
+ border-color: var(--ga-color-border-disabled);
594
+ background-color: var(--ga-color-surface-disabled);
595
+ color: var(--ga-color-text-disabled);
596
+ }
597
+ }
598
+ .ga-checkbox {
599
+ position: relative;
600
+ display: inline-flex;
601
+ gap: calc(0.25rem * 2);
602
+ .ga-checkbox__native {
603
+ height: calc(0.25rem * 5);
604
+ width: calc(0.25rem * 5);
605
+ flex-shrink: 0;
606
+ opacity: 0%;
607
+ &:not(:disabled) {
608
+ cursor: pointer;
609
+ }
610
+ }
611
+ .ga-checkbox__marker {
612
+ pointer-events: none;
613
+ position: absolute;
614
+ top: calc(0.25rem * 0);
615
+ left: calc(0.25rem * 0);
616
+ height: calc(0.25rem * 5);
617
+ width: calc(0.25rem * 5);
618
+ border-radius: var(--ga-radius);
619
+ border-style: var(--tw-border-style);
620
+ border-width: 2px;
621
+ border-color: var(--ga-color-border-action);
622
+ color: #fff;
623
+ .ga-checkbox__marker__indicator-checked, .ga-checkbox__marker__indicator-indeterminate {
624
+ display: none;
625
+ }
626
+ }
627
+ .ga-checkbox__native:focus-visible ~ .ga-checkbox__marker {
628
+ outline-style: var(--tw-outline-style);
629
+ outline-width: 2px;
630
+ outline-offset: 2px;
631
+ outline-color: var(--ga-color-border-focus);
632
+ }
633
+ .ga-checkbox__native:not(:disabled):hover ~ .ga-checkbox__marker {
634
+ border-color: var(--ga-color-border-action-hover);
635
+ background-color: var(--ga-color-surface-action-hover-2);
636
+ }
637
+ .ga-checkbox__native:checked ~ .ga-checkbox__marker {
638
+ background-color: var(--ga-color-surface-action);
639
+ .ga-checkbox__marker__indicator-checked {
640
+ display: block;
641
+ }
642
+ }
643
+ .ga-checkbox__native:indeterminate ~ .ga-checkbox__marker {
644
+ background-color: var(--ga-color-surface-action);
645
+ .ga-checkbox__marker__indicator-indeterminate {
646
+ display: block;
647
+ }
648
+ }
649
+ .ga-checkbox__native:not(:disabled):checked:hover ~ .ga-checkbox__marker, .ga-checkbox__native:not(:disabled):indeterminate:hover ~ .ga-checkbox__marker {
650
+ background-color: var(--ga-color-surface-action-hover);
651
+ }
652
+ .ga-checkbox__native:disabled ~ .ga-checkbox__marker {
653
+ border-color: var(--ga-color-border-disabled);
654
+ background-color: var(--ga-color-surface-disabled);
655
+ color: var(--ga-color-text-disabled);
656
+ }
657
+ &.ga-checkbox--invalid .ga-checkbox__marker {
658
+ border-color: var(--ga-color-border-error);
659
+ background-color: var(--ga-color-surface-error);
660
+ color: var(--ga-color-border-error);
661
+ }
662
+ .ga-checkbox__label {
663
+ min-height: calc(0.25rem * 5);
664
+ font-size: var(--ga-size-font-md);
665
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
666
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
667
+ --tw-leading: calc(0.25rem * 5);
668
+ line-height: calc(0.25rem * 5);
669
+ &:empty {
670
+ display: none;
671
+ }
672
+ }
673
+ }
674
+ .ga-form-field {
675
+ display: flex;
676
+ flex-direction: column;
677
+ gap: calc(0.25rem * 2);
678
+ .ga-form-field__label {
679
+ padding-inline: calc(0.25rem * 1);
680
+ font-size: var(--ga-size-font-md);
681
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
682
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
683
+ --tw-leading: calc(0.25rem * 5);
684
+ line-height: calc(0.25rem * 5);
685
+ --tw-font-weight: 500;
686
+ font-weight: 500;
687
+ }
688
+ .ga-form-field__info {
689
+ display: flex;
690
+ align-items: center;
691
+ gap: calc(0.25rem * 1);
692
+ font-size: var(--ga-size-font-xs);
693
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1));
694
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * 0.005));
695
+ }
696
+ }
697
+ .ga-input {
698
+ display: flex;
699
+ height: calc(0.25rem * 10);
700
+ width: calc(0.25rem * 50);
701
+ flex-direction: row;
702
+ align-items: center;
703
+ gap: calc(0.25rem * 2);
704
+ border-radius: var(--ga-radius);
705
+ border-style: var(--tw-border-style);
706
+ border-width: 1px;
707
+ border-color: var(--ga-color-border-primary);
708
+ background-color: var(--ga-color-bg-primary);
709
+ padding-inline: calc(0.25rem * 3);
710
+ padding-block: calc(0.25rem * 2);
711
+ font-size: var(--ga-size-font-md);
712
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
713
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
714
+ &:has(input:hover), &:is(input:hover) {
715
+ border-color: var(--ga-color-border-action-hover);
716
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
717
+ background-color: var(--ga-color-surface-action-hover-2);
718
+ }
719
+ }
720
+ &:has(input:disabled), &:is(input:disabled) {
721
+ border-color: var(--ga-color-border-primary);
722
+ background-color: var(--ga-color-surface-disabled);
723
+ color: var(--ga-color-text-disable-selected);
724
+ }
725
+ &:has(input:focus), &:is(input:focus) {
726
+ border-color: var(--ga-color-border-focus);
727
+ outline-style: var(--tw-outline-style);
728
+ outline-width: 1px;
729
+ outline-color: var(--ga-color-border-focus);
730
+ }
731
+ &.ga-input--invalid {
732
+ border-color: var(--ga-color-border-error);
733
+ outline-style: var(--tw-outline-style);
734
+ outline-width: 1px;
735
+ outline-color: var(--ga-color-border-error);
736
+ &:has(input:not(:placeholder-shown)), &:is(input:not(:placeholder-shown)) {
737
+ background-color: var(--ga-color-surface-error);
738
+ }
739
+ }
740
+ input {
741
+ height: calc(0.25rem * 6);
742
+ width: 100%;
743
+ min-width: calc(0.25rem * 0);
744
+ --tw-leading: calc(0.25rem * 6);
745
+ line-height: calc(0.25rem * 6);
746
+ --tw-outline-style: none;
747
+ outline-style: none;
748
+ }
749
+ &:is(input) {
750
+ min-width: calc(0.25rem * 0);
751
+ --tw-leading: calc(0.25rem * 6);
752
+ line-height: calc(0.25rem * 6);
753
+ }
754
+ }
755
+ .ga-notification {
756
+ display: flex;
757
+ flex-direction: row;
758
+ align-items: flex-start;
759
+ gap: calc(0.25rem * 4);
760
+ border-radius: var(--ga-radius);
761
+ border-style: var(--tw-border-style);
762
+ border-width: 2px;
763
+ border-color: var(--ga-color-border-primary);
764
+ background-color: var(--ga-color-surface-primary);
765
+ padding-top: calc(0.25rem * 2);
766
+ padding-right: calc(0.25rem * 2);
767
+ padding-bottom: calc(0.25rem * 4);
768
+ padding-left: calc(0.25rem * 4);
769
+ font-size: var(--ga-size-font-md);
770
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
771
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
772
+ &.ga-notification--information {
773
+ border-color: var(--ga-color-border-information);
774
+ background-color: var(--ga-color-surface-information);
775
+ }
776
+ &.ga-notification--success {
777
+ border-color: var(--ga-color-border-success);
778
+ background-color: var(--ga-color-surface-success);
779
+ }
780
+ &.ga-notification--error {
781
+ border-color: var(--ga-color-border-error);
782
+ background-color: var(--ga-color-surface-error);
783
+ }
784
+ &.ga-notification--warning {
785
+ border-color: var(--ga-color-border-warning);
786
+ background-color: var(--ga-color-surface-warning);
787
+ }
788
+ .ga-notification__icon {
789
+ margin-top: calc(0.25rem * 2);
790
+ flex-shrink: 0;
791
+ }
792
+ .ga-notification__description {
793
+ padding-right: calc(0.25rem * 2);
794
+ }
795
+ .ga-notification__heading {
796
+ display: flex;
797
+ min-height: calc(0.25rem * 10);
798
+ flex-direction: row;
799
+ align-items: center;
800
+ gap: calc(0.25rem * 2);
801
+ }
802
+ .ga-notification__title {
803
+ flex: 1;
804
+ --tw-font-weight: 700;
805
+ font-weight: 700;
806
+ }
807
+ .ga-notification__title-actions {
808
+ display: flex;
809
+ flex-shrink: 0;
810
+ flex-direction: row;
811
+ }
812
+ }
813
+ .ga-menu {
814
+ display: flex;
815
+ min-width: calc(0.25rem * 36);
816
+ flex-direction: column;
817
+ align-items: stretch;
818
+ border-radius: var(--ga-radius);
819
+ border-style: var(--tw-border-style);
820
+ border-width: 1px;
821
+ border-color: var(--ga-color-border-primary);
822
+ background-color: var(--ga-color-surface-primary);
823
+ .ga-menu__item {
824
+ display: flex;
825
+ height: calc(0.25rem * 9);
826
+ cursor: pointer;
827
+ flex-direction: row;
828
+ align-items: center;
829
+ gap: calc(0.25rem * 2);
830
+ padding-inline: calc(0.25rem * 3);
831
+ padding-block: calc(0.25rem * 2);
832
+ text-align: left;
833
+ font-size: var(--ga-size-font-md);
834
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
835
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
836
+ --tw-leading: 1;
837
+ line-height: 1;
838
+ --tw-font-weight: 500;
839
+ font-weight: 500;
840
+ color: var(--ga-color-text-action);
841
+ &:first-child {
842
+ border-top-left-radius: var(--ga-radius);
843
+ border-top-right-radius: var(--ga-radius);
844
+ }
845
+ &:hover {
846
+ background-color: var(--ga-color-surface-action-hover-2);
847
+ color: var(--ga-color-text-action-hover);
848
+ }
849
+ &:active {
850
+ background-color: var(--ga-color-surface-action);
851
+ color: var(--ga-color-text-on-action);
852
+ }
853
+ }
854
+ .ga-menu__separator {
855
+ margin-left: calc(0.25rem * 3);
856
+ border-bottom-style: var(--tw-border-style);
857
+ border-bottom-width: 1px;
858
+ border-color: var(--ga-color-border-primary);
859
+ }
860
+ .ga-menu__title {
861
+ padding-inline: calc(0.25rem * 3);
862
+ padding-top: calc(0.25rem * 3);
863
+ padding-bottom: calc(0.25rem * 2);
864
+ font-size: var(--ga-size-font-sm);
865
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
866
+ letter-spacing: var(--tw-tracking, 0);
867
+ --tw-font-weight: 600;
868
+ font-weight: 600;
869
+ color: var(--ga-color-text-disable-selected);
870
+ }
871
+ }
872
+ .ga-radio-button {
873
+ position: relative;
874
+ display: inline-flex;
875
+ cursor: pointer;
876
+ gap: calc(0.25rem * 2);
877
+ .ga-radio-button__native {
878
+ height: calc(0.25rem * 5);
879
+ width: calc(0.25rem * 5);
880
+ flex-shrink: 0;
881
+ cursor: pointer;
882
+ opacity: 0%;
883
+ &:disabled {
884
+ cursor: default;
885
+ }
886
+ }
887
+ .ga-radio-button__marker {
888
+ pointer-events: none;
889
+ position: absolute;
890
+ top: calc(0.25rem * 0);
891
+ left: calc(0.25rem * 0);
892
+ height: calc(0.25rem * 5);
893
+ width: calc(0.25rem * 5);
894
+ border-radius: calc(infinity * 1px);
895
+ border-style: var(--tw-border-style);
896
+ border-width: 2px;
897
+ border-color: var(--ga-color-border-action);
898
+ color: #fff;
899
+ }
900
+ .ga-radio-button__native:focus-visible ~ .ga-radio-button__marker {
901
+ outline-style: var(--tw-outline-style);
902
+ outline-width: 2px;
903
+ outline-offset: 2px;
904
+ outline-color: var(--ga-color-border-focus);
905
+ }
906
+ .ga-radio-button__native:not(:disabled):hover ~ .ga-radio-button__marker {
907
+ border-color: var(--ga-color-border-action-hover);
908
+ background-color: var(--ga-color-surface-action-hover-2);
909
+ }
910
+ .ga-radio-button__native:checked ~ .ga-radio-button__marker {
911
+ background-color: var(--ga-color-surface-action);
912
+ &::after {
913
+ position: absolute;
914
+ top: calc(1/2 * 100%);
915
+ left: calc(1/2 * 100%);
916
+ display: block;
917
+ height: calc(0.25rem * 2);
918
+ width: calc(0.25rem * 2);
919
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
920
+ translate: var(--tw-translate-x) var(--tw-translate-y);
921
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
922
+ translate: var(--tw-translate-x) var(--tw-translate-y);
923
+ border-radius: calc(infinity * 1px);
924
+ background-color: #fff;
925
+ --tw-content: '';
926
+ content: var(--tw-content);
927
+ }
928
+ }
929
+ .ga-radio-button__native:not(:disabled):checked:hover ~ .ga-radio-button__marker {
930
+ background-color: var(--ga-color-surface-action-hover);
931
+ }
932
+ .ga-radio-button__native:disabled ~ .ga-radio-button__marker {
933
+ border-color: var(--ga-color-border-disabled);
934
+ background-color: var(--ga-color-surface-disabled);
935
+ color: var(--ga-color-text-disabled);
936
+ }
937
+ .ga-radio-button__label {
938
+ min-height: calc(0.25rem * 4);
939
+ font-size: var(--ga-size-font-md);
940
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
941
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
942
+ --tw-leading: calc(0.25rem * 5);
943
+ line-height: calc(0.25rem * 5);
944
+ }
945
+ }
946
+ .ga-segmented-control {
947
+ display: inline-flex;
948
+ height: calc(0.25rem * 10);
949
+ align-items: center;
950
+ justify-content: center;
951
+ vertical-align: middle;
952
+ font-size: var(--ga-size-font-md);
953
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
954
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
955
+ .ga-segmented-control__button {
956
+ display: inline-flex;
957
+ height: calc(0.25rem * 10);
958
+ align-items: center;
959
+ justify-content: center;
960
+ gap: calc(0.25rem * 2);
961
+ border-top-style: var(--tw-border-style);
962
+ border-top-width: 1px;
963
+ border-bottom-style: var(--tw-border-style);
964
+ border-bottom-width: 1px;
965
+ border-left-style: var(--tw-border-style);
966
+ border-left-width: 1px;
967
+ border-color: var(--ga-color-neutral-30);
968
+ background-color: #fff;
969
+ padding-inline: calc(0.25rem * 4);
970
+ vertical-align: middle;
971
+ --tw-leading: calc(0.25rem * 1);
972
+ line-height: calc(0.25rem * 1);
973
+ --tw-font-weight: 500;
974
+ font-weight: 500;
975
+ color: var(--ga-color-cyan-80);
976
+ &:first-of-type {
977
+ border-top-left-radius: var(--ga-radius);
978
+ border-bottom-left-radius: var(--ga-radius);
979
+ }
980
+ &:last-of-type {
981
+ border-top-right-radius: var(--ga-radius);
982
+ border-bottom-right-radius: var(--ga-radius);
983
+ border-right-style: var(--tw-border-style);
984
+ border-right-width: 1px;
985
+ }
986
+ &.ga-segmented-control__button--selected {
987
+ background-color: var(--ga-color-cyan-80);
988
+ --tw-font-weight: 600;
989
+ font-weight: 600;
990
+ color: var(--ga-color-orange-10);
991
+ }
992
+ &:not( .ga-segmented-control__button--selected, .ga-segmented-control__button--disabled, :disabled ) {
993
+ cursor: pointer;
994
+ &:hover {
995
+ background-color: var(--ga-color-surface-action-hover-2);
996
+ }
997
+ &:active {
998
+ background-color: #fff;
999
+ }
1000
+ }
1001
+ &.ga-segmented-control__button--disabled, &:disabled {
1002
+ border-color: var(--ga-color-neutral-30);
1003
+ background-color: var(--ga-color-neutral-10);
1004
+ color: var(--ga-color-grey-40);
1005
+ }
1006
+ }
1007
+ }
1008
+ .ga-text-area {
1009
+ display: flex;
1010
+ width: calc(0.25rem * 50);
1011
+ flex-direction: row;
1012
+ align-items: center;
1013
+ gap: calc(0.25rem * 2);
1014
+ border-radius: var(--ga-radius);
1015
+ border-style: var(--tw-border-style);
1016
+ border-width: 1px;
1017
+ border-color: var(--ga-color-border-primary);
1018
+ background-color: var(--ga-color-bg-primary);
1019
+ font-size: var(--ga-size-font-md);
1020
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
1021
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1022
+ &:has(textarea:hover) {
1023
+ border-color: var(--ga-color-border-action-hover);
1024
+ }
1025
+ &:has(textarea:disabled) {
1026
+ border-color: var(--ga-color-border-primary);
1027
+ background-color: var(--ga-color-surface-disabled);
1028
+ color: var(--ga-color-text-disable-selected);
1029
+ }
1030
+ &:has(textarea:focus) {
1031
+ border-color: var(--ga-color-border-focus);
1032
+ outline-style: var(--tw-outline-style);
1033
+ outline-width: 1px;
1034
+ outline-color: var(--ga-color-border-focus);
1035
+ }
1036
+ &.ga-text-area--invalid {
1037
+ border-color: var(--ga-color-border-error);
1038
+ outline-style: var(--tw-outline-style);
1039
+ outline-width: 1px;
1040
+ outline-color: var(--ga-color-border-error);
1041
+ &:has(textarea:not(:placeholder-shown)) {
1042
+ background-color: var(--ga-color-surface-error);
1043
+ }
1044
+ }
1045
+ textarea {
1046
+ width: 100%;
1047
+ min-width: calc(0.25rem * 0);
1048
+ padding-inline: calc(0.25rem * 3);
1049
+ padding-block: calc(0.25rem * 2);
1050
+ --tw-leading: calc(0.25rem * 6);
1051
+ line-height: calc(0.25rem * 6);
1052
+ --tw-outline-style: none;
1053
+ outline-style: none;
1054
+ }
1055
+ }
1056
+ .ga-tooltip {
1057
+ position: relative;
1058
+ max-width: calc(0.25rem * 100);
1059
+ border-radius: var(--ga-radius);
1060
+ background-color: var(--ga-color-surface-action-hover);
1061
+ padding: calc(0.25rem * 2);
1062
+ font-size: var(--ga-size-font-md);
1063
+ line-height: var(--tw-leading, calc(var(--spacing) * 4 * 1.25));
1064
+ letter-spacing: var(--tw-tracking, calc(var(--spacing) * 4 * -0.006));
1065
+ color: var(--ga-color-text-on-action);
1066
+ &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end, &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end, &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end, &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
1067
+ &::before {
1068
+ content: var(--tw-content);
1069
+ position: absolute;
1070
+ }
1071
+ &::before {
1072
+ content: var(--tw-content);
1073
+ --tw-content: '';
1074
+ content: var(--tw-content);
1075
+ }
1076
+ }
1077
+ &.ga-tooltip--top-start, &.ga-tooltip--top-center, &.ga-tooltip--top-end {
1078
+ margin-bottom: calc(0.25rem * 2);
1079
+ }
1080
+ &.ga-tooltip--bottom-start, &.ga-tooltip--bottom-center, &.ga-tooltip--bottom-end {
1081
+ margin-top: calc(0.25rem * 2);
1082
+ }
1083
+ &.ga-tooltip--left-start, &.ga-tooltip--left-center, &.ga-tooltip--left-end {
1084
+ margin-right: calc(0.25rem * 2);
1085
+ }
1086
+ &.ga-tooltip--right-start, &.ga-tooltip--right-center, &.ga-tooltip--right-end {
1087
+ margin-left: calc(0.25rem * 2);
1088
+ }
1089
+ &.ga-tooltip--top-start::before, &.ga-tooltip--top-center::before, &.ga-tooltip--top-end::before {
1090
+ bottom: calc(0.25rem * -2);
1091
+ border-inline-style: var(--tw-border-style);
1092
+ border-inline-width: 8px;
1093
+ border-top-style: var(--tw-border-style);
1094
+ border-top-width: 8px;
1095
+ border-inline-color: transparent;
1096
+ border-top-color: var(--ga-color-surface-action-hover);
1097
+ }
1098
+ &.ga-tooltip--bottom-start::before, &.ga-tooltip--bottom-center::before, &.ga-tooltip--bottom-end::before {
1099
+ top: calc(0.25rem * -2);
1100
+ border-inline-style: var(--tw-border-style);
1101
+ border-inline-width: 8px;
1102
+ border-bottom-style: var(--tw-border-style);
1103
+ border-bottom-width: 8px;
1104
+ border-inline-color: transparent;
1105
+ border-bottom-color: var(--ga-color-surface-action-hover);
1106
+ }
1107
+ &.ga-tooltip--top-start::before, &.ga-tooltip--bottom-start::before {
1108
+ left: calc(0.25rem * 4);
1109
+ }
1110
+ &.ga-tooltip--top-center::before, &.ga-tooltip--bottom-center::before {
1111
+ left: calc(1/2 * 100%);
1112
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
1113
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1114
+ }
1115
+ &.ga-tooltip--top-end::before, &.ga-tooltip--bottom-end::before {
1116
+ right: calc(0.25rem * 4);
1117
+ }
1118
+ &.ga-tooltip--left-start::before, &.ga-tooltip--left-center::before, &.ga-tooltip--left-end::before {
1119
+ right: calc(0.25rem * -2);
1120
+ border-block-style: var(--tw-border-style);
1121
+ border-block-width: 8px;
1122
+ border-left-style: var(--tw-border-style);
1123
+ border-left-width: 8px;
1124
+ border-block-color: transparent;
1125
+ border-left-color: var(--ga-color-surface-action-hover);
1126
+ }
1127
+ &.ga-tooltip--right-start::before, &.ga-tooltip--right-center::before, &.ga-tooltip--right-end::before {
1128
+ left: calc(0.25rem * -2);
1129
+ border-block-style: var(--tw-border-style);
1130
+ border-block-width: 8px;
1131
+ border-right-style: var(--tw-border-style);
1132
+ border-right-width: 8px;
1133
+ border-block-color: transparent;
1134
+ border-right-color: var(--ga-color-surface-action-hover);
1135
+ }
1136
+ &.ga-tooltip--left-start::before, &.ga-tooltip--right-start::before {
1137
+ top: calc(0.25rem * 4);
1138
+ }
1139
+ &.ga-tooltip--left-center::before, &.ga-tooltip--right-center::before {
1140
+ top: calc(1/2 * 100%);
1141
+ --tw-translate-y: calc(calc(1/2 * 100%) * -1);
1142
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1143
+ }
1144
+ &.ga-tooltip--left-end::before, &.ga-tooltip--right-end::before {
1145
+ bottom: calc(0.25rem * 4);
1146
+ }
1147
+ .ga-tooltip__title {
1148
+ --tw-font-weight: 600;
1149
+ font-weight: 600;
1150
+ }
1151
+ }
1152
+ }
1153
+ @property --tw-border-style {
1154
+ syntax: "*";
1155
+ inherits: false;
1156
+ initial-value: solid;
1157
+ }
1158
+ @property --tw-font-weight {
1159
+ syntax: "*";
1160
+ inherits: false;
1161
+ }
1162
+ @property --tw-leading {
1163
+ syntax: "*";
1164
+ inherits: false;
1165
+ }
1166
+ @property --tw-shadow {
1167
+ syntax: "*";
1168
+ inherits: false;
1169
+ initial-value: 0 0 #0000;
1170
+ }
1171
+ @property --tw-shadow-color {
1172
+ syntax: "*";
1173
+ inherits: false;
1174
+ }
1175
+ @property --tw-inset-shadow {
1176
+ syntax: "*";
1177
+ inherits: false;
1178
+ initial-value: 0 0 #0000;
1179
+ }
1180
+ @property --tw-inset-shadow-color {
1181
+ syntax: "*";
1182
+ inherits: false;
1183
+ }
1184
+ @property --tw-ring-color {
1185
+ syntax: "*";
1186
+ inherits: false;
1187
+ }
1188
+ @property --tw-ring-shadow {
1189
+ syntax: "*";
1190
+ inherits: false;
1191
+ initial-value: 0 0 #0000;
1192
+ }
1193
+ @property --tw-inset-ring-color {
1194
+ syntax: "*";
1195
+ inherits: false;
1196
+ }
1197
+ @property --tw-inset-ring-shadow {
1198
+ syntax: "*";
1199
+ inherits: false;
1200
+ initial-value: 0 0 #0000;
1201
+ }
1202
+ @property --tw-ring-inset {
1203
+ syntax: "*";
1204
+ inherits: false;
1205
+ }
1206
+ @property --tw-ring-offset-width {
1207
+ syntax: "<length>";
1208
+ inherits: false;
1209
+ initial-value: 0px;
1210
+ }
1211
+ @property --tw-ring-offset-color {
1212
+ syntax: "*";
1213
+ inherits: false;
1214
+ initial-value: #fff;
1215
+ }
1216
+ @property --tw-ring-offset-shadow {
1217
+ syntax: "*";
1218
+ inherits: false;
1219
+ initial-value: 0 0 #0000;
1220
+ }
1221
+ @property --tw-outline-style {
1222
+ syntax: "*";
1223
+ inherits: false;
1224
+ initial-value: solid;
1225
+ }
1226
+ @property --tw-translate-x {
1227
+ syntax: "*";
1228
+ inherits: false;
1229
+ initial-value: 0;
1230
+ }
1231
+ @property --tw-translate-y {
1232
+ syntax: "*";
1233
+ inherits: false;
1234
+ initial-value: 0;
1235
+ }
1236
+ @property --tw-translate-z {
1237
+ syntax: "*";
1238
+ inherits: false;
1239
+ initial-value: 0;
1240
+ }
1241
+ @property --tw-content {
1242
+ syntax: "*";
1243
+ inherits: false;
1244
+ initial-value: "";
1245
+ }