@namp88/compass-tokens 1.0.3

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 (35) hide show
  1. package/README.md +90 -0
  2. package/dist/css/primitives.css +348 -0
  3. package/dist/css/themes/dark.css +506 -0
  4. package/dist/css/themes/highcontrast.css +506 -0
  5. package/dist/css/themes/light.css +506 -0
  6. package/dist/css/tokens.css +2372 -0
  7. package/dist/scss/_badge-lg.scss +13 -0
  8. package/dist/scss/_badge-md.scss +13 -0
  9. package/dist/scss/_badge-sm.scss +13 -0
  10. package/dist/scss/_badge-xs.scss +13 -0
  11. package/dist/scss/_button-lg.scss +35 -0
  12. package/dist/scss/_button-md.scss +35 -0
  13. package/dist/scss/_button-sm.scss +35 -0
  14. package/dist/scss/_button-xs.scss +35 -0
  15. package/dist/scss/_card.scss +5 -0
  16. package/dist/scss/_colors.scss +190 -0
  17. package/dist/scss/_dropdown-lg.scss +12 -0
  18. package/dist/scss/_dropdown-md.scss +12 -0
  19. package/dist/scss/_dropdown-sm.scss +12 -0
  20. package/dist/scss/_icon-size-lg.scss +8 -0
  21. package/dist/scss/_icon-size-md.scss +8 -0
  22. package/dist/scss/_icon-size-sm.scss +8 -0
  23. package/dist/scss/_icon-size-xs.scss +8 -0
  24. package/dist/scss/_index.scss +30 -0
  25. package/dist/scss/_input-lg.scss +37 -0
  26. package/dist/scss/_input-md.scss +37 -0
  27. package/dist/scss/_input-sm.scss +37 -0
  28. package/dist/scss/_primitives.scss +206 -0
  29. package/dist/scss/_semantic-dark.scss +644 -0
  30. package/dist/scss/_semantic-high-contrast.scss +644 -0
  31. package/dist/scss/_semantic-light.scss +644 -0
  32. package/dist/scss/_typography.scss +115 -0
  33. package/dist/scss/tokens.scss +2853 -0
  34. package/package.json +55 -0
  35. package/tokens/design-tokens.json +24991 -0
package/dist/css/themes/highcontrast.css ADDED
@@ -0,0 +1,506 @@
1
+ /* ==========================================================================
2
+ Design Tokens - HighContrast Theme
3
+ Generated at: 2026-02-04T14:40:26.047Z
4
+ Variables: 496
5
+ ========================================================================== */
6
+
7
+ [data-theme="high-contrast"] {
8
+
9
+ /* Semantic */
10
+ --gl-elevation-surface-page: var(--gl-color-base-black);
11
+ --gl-surface-raised: var(--gl-color-base-black);
12
+ --gl-elevation-surface-page-alt: var(--gl-color-base-black);
13
+ --gl-color-icon: var(--gl-color-base-white);
14
+ --gl-color-icon-inverse: var(--gl-color-base-black);
15
+ --gl-color-icon-subtle: var(--gl-color-base-white);
16
+ --gl-color-icon-muted: var(--gl-color-base-white);
17
+ --gl-color-icon-white: var(--gl-color-base-white);
18
+ --gl-color-icon-disabled: var(--gl-color-neutral-350);
19
+ --gl-color-icon-brand: var(--gl-color-a11y-brand);
20
+ --gl-color-icon-brand-bolder-hover: var(--gl-color-base-black);
21
+ --gl-color-icon-brand-bolder: var(--gl-color-base-black);
22
+ --gl-color-border-subtle: var(--gl-color-base-white);
23
+ --gl-color-border-neutral-subtle: var(--gl-color-base-white);
24
+ --gl-color-border-disabled: var(--gl-color-neutral-700);
25
+ --gl-color-background: var(--gl-color-base-black);
26
+ --gl-color-background-brand-bold: var(--gl-color-a11y-brand);
27
+ --gl-color-background-brand-bold-hover: var(--gl-color-base-white);
28
+ --gl-color-border-disabled-subtle: var(--gl-color-neutral-500);
29
+ --gl-color-background-hover: var(--gl-color-base-white);
30
+ --gl-color-icon-subtle-hover: var(--gl-color-base-black);
31
+ --gl-color-background-brand-bold-active: var(--gl-color-base-white);
32
+ --gl-color-icon-disabled-bold: var(--gl-color-neutral-900);
33
+ --gl-color-background-disabled: var(--gl-color-neutral-400);
34
+ --gl-color-background-neutral-bolder: var(--gl-color-base-white);
35
+ --gl-color-background-neutral-bolder-hover: var(--gl-color-neutral-100);
36
+ --gl-color-background-neutral-bolder-active: var(--gl-color-base-white);
37
+ --gl-color-icon-on-white: var(--gl-color-base-black);
38
+ --gl-color-background-inverse-hover: var(--gl-opacity-white-85);
39
+ --gl-color-background-inverse-active: var(--gl-opacity-white-92);
40
+ --gl-color-background-inverse: var(--gl-color-base-white);
41
+ --gl-color-border-brand: var(--gl-color-a11y-brand);
42
+ --gl-color-background-brand-subtlest: var(--gl-color-a11y-brand);
43
+ --gl-color-background-brand-subtlest-hover: var(--gl-color-base-white);
44
+ --gl-color-background-brand-subtlest-active: var(--gl-color-base-white);
45
+ --gl-color-border-brand-hover: var(--gl-color-base-white);
46
+ --gl-color-border-brand-active: var(--gl-color-a11y-brand);
47
+ --gl-color-icon-brand-bolder-active: var(--gl-color-base-black);
48
+ --gl-color-border-subtle-hover: var(--gl-color-base-white);
49
+ --gl-color-icon-on-subtle-active: var(--gl-color-base-black);
50
+ --gl-color-border-subtle-active: var(--gl-color-base-white);
51
+ --gl-color-xxbackground-accent-purple-subtler-active: var(--gl-color-a11y-purple);
52
+ --gl-color-xxbackground-accent-purple-subtler-hover: var(--gl-color-base-white);
53
+ --gl-color-background-accent-purple-subtler: var(--gl-color-a11y-purple);
54
+ --gl-color-xxicon-accent-purple-bolder-active: var(--gl-color-base-black);
55
+ --gl-color-xxicon-accent-purple-bolder-hover: var(--gl-color-base-black);
56
+ --gl-color-icon-accent-purple: var(--gl-color-a11y-purple);
57
+ --gl-color-icon-accent-pink: var(--gl-color-a11y-pink);
58
+ --gl-color-xxicon-accent-pink-bolder-hover: var(--gl-color-base-black);
59
+ --gl-color-xxicon-accent-pink-bolder-active: var(--gl-color-base-black);
60
+ --gl-color-border-accent-pink-subtle: var(--gl-color-a11y-pink);
61
+ --gl-color-border-accent-pink-subtle-hover: var(--gl-color-base-white);
62
+ --gl-color-border-accent-pink-subtle-active: var(--gl-color-a11y-pink);
63
+ --gl-color-background-accent-pink-subtler-active: var(--gl-color-a11y-pink);
64
+ --gl-color-background-accent-pink-subtler-hover: var(--gl-color-base-white);
65
+ --gl-color-background-accent-pink-subtler: var(--gl-color-a11y-pink);
66
+ --gl-color-icon-danger: var(--gl-color-a11y-red);
67
+ --gl-color-icon-danger-bold-hover: var(--gl-color-base-black);
68
+ --gl-color-icon-danger-bold-active: var(--gl-color-base-black);
69
+ --gl-color-background-neutral-subtler-active: var(--gl-color-base-white);
70
+ --gl-color-background-neutral-subtler-hover: var(--gl-color-base-white);
71
+ --gl-color-icon-brand-hover: var(--gl-color-a11y-brand);
72
+ --gl-color-icon-accent-purple-bolder: var(--gl-color-base-black);
73
+ --gl-color-icon-accent-pink-bolder: var(--gl-color-base-black);
74
+ --gl-color-background-accent-orange-subtler: var(--gl-color-a11y-orange);
75
+ --gl-color-icon-accent-orange-bolder: var(--gl-color-base-black);
76
+ --gl-color-background-accent-teal-subtler: var(--gl-color-a11y-teal);
77
+ --gl-color-icon-accent-teal-bolder: var(--gl-color-base-black);
78
+ --gl-color-background-neutral-subtler: var(--gl-color-base-white);
79
+ --gl-color-icon-on-subtle: var(--gl-color-base-black);
80
+ --gl-color-feedback-bg-warning-subtle: var(--gl-color-base-black);
81
+ --gl-color-fg-warning-on-subtle: var(--gl-color-base-black);
82
+ --gl-color-feedback-bg-danger-subtle: var(--gl-color-base-black);
83
+ --gl-color-icon-danger-bold: var(--gl-color-base-black);
84
+ --gl-color-feedback-bg-success-subtle: var(--gl-color-base-black);
85
+ --gl-color-icon-success-bolder: var(--gl-color-base-black);
86
+ --gl-color-border-neutral: var(--gl-color-base-white);
87
+ --gl-color-feedback-border-warning-subtle: var(--gl-color-a11y-yellow);
88
+ --gl-color-feedback-border-success-subtle: var(--gl-color-a11y-green);
89
+ --gl-color-icon-subtle-active: var(--gl-color-base-black);
90
+ --gl-color-icon-on-subtle-selected: var(--gl-color-base-black);
91
+ --gl-color-icon-selected: var(--gl-color-a11y-brand);
92
+ --gl-color-background-selected-bold: var(--gl-color-a11y-brand);
93
+ --gl-color-background-selected: var(--gl-color-a11y-brand);
94
+ --gl-color-background-active: var(--gl-color-base-white);
95
+ --gl-color-background-read-only: var(--gl-color-neutral-700);
96
+ --gl-color-border-purple-hover: var(--gl-color-a11y-purple);
97
+ --gl-color-xxicon-accent-purple-hover: var(--gl-color-base-black);
98
+ --gl-color-border: var(--gl-color-base-white);
99
+ --gl-elevation-surface-overlay-blanket: var(--gl-opacity-neutral-91);
100
+ --gl-color-border-accent-pink: var(--gl-color-a11y-pink);
101
+ --gl-color-icon-on-subtle-hover: var(--gl-color-base-black);
102
+ --gl-color-xxxbackground-sunken: var(--gl-color-base-black);
103
+ --gl-color-background-drag: var(--gl-color-base-black);
104
+ --gl-color-background-neutral-bolder-selected: var(--gl-color-base-white);
105
+ --gl-color-background-skeleton: var(--gl-color-neutral-600);
106
+ --gl-color-background-accent-orange-bolder: var(--gl-color-a11y-pink);
107
+ --gl-color-background-accent-teal-bolder: var(--gl-color-a11y-teal);
108
+ --gl-color-border-inverse: var(--gl-color-base-black);
109
+ --gl-color-border-purple: var(--gl-color-a11y-purple);
110
+ --gl-color-border-purple-subtle: var(--gl-color-a11y-purple);
111
+ --gl-color-border-purple-subtle-hover: var(--gl-color-base-white);
112
+ --gl-color-border-purple-subtle-active: var(--gl-color-a11y-purple);
113
+ --gl-color-feedback-border-info: var(--gl-color-a11y-brand);
114
+ --gl-color-feedback-border-info-subtle: var(--gl-color-a11y-brand);
115
+ --gl-color-feedback-bg-info-subtle: var(--gl-color-base-black);
116
+ --gl-color-border-neutral-selected: var(--gl-color-base-white);
117
+ --gl-color-background-neutral-subtler-selected: var(--gl-color-base-white);
118
+ --gl-color-icon-brand-bolder-selected: var(--gl-color-base-black);
119
+ --gl-color-border-disabled-bold: var(--gl-color-neutral-900);
120
+ --gl-color-border-transparent: var(--gl-color-base-black);
121
+ --gl-surface-inverse: var(--gl-color-base-white);
122
+ --gl-color-feedback-fg-on-subtle: var(--gl-color-base-white);
123
+ --gl-color-feedback-bg-purple-subtle: var(--gl-color-base-black);
124
+ --gl-color-feedback-bg-pink-subtle: var(--gl-color-base-black);
125
+ --gl-color-feedback-bg: var(--gl-color-base-black);
126
+ --gl-color-background-danger-bold: var(--gl-color-a11y-red);
127
+ --gl-color-background-danger-bold-hover: var(--gl-color-base-white);
128
+ --gl-color-background-danger-bold-active: var(--gl-color-a11y-red);
129
+ --gl-color-background-danger-subtle-hover: var(--gl-color-base-white);
130
+ --gl-color-background-danger-subtle-active: var(--gl-color-a11y-red);
131
+ --gl-color-backgrond-danger-subtle: var(--gl-color-a11y-red);
132
+ --gl-color-border-danger-subtle: var(--gl-color-a11y-red);
133
+ --gl-color-border-danger-subtle-hover: var(--gl-color-base-white);
134
+ --gl-color-border-danger-subtle-active: var(--gl-color-a11y-red);
135
+ --gl-color-feedback-border: var(--gl-color-base-white);
136
+ --gl-color-feedback-border-subtle: var(--gl-color-base-white);
137
+ --gl-color-feedback-border-purple-subtle: var(--gl-color-a11y-purple);
138
+ --gl-color-feedback-border-purple: var(--gl-color-a11y-purple);
139
+ --gl-color-feedback-border-pink: var(--gl-color-a11y-pink);
140
+ --gl-color-feedback-border-pink-subtle: var(--gl-color-a11y-pink);
141
+ --gl-color-feedback-fg: var(--gl-color-base-black);
142
+ --gl-color-background-warning-bold: var(--gl-color-a11y-yellow);
143
+ --gl-color-background-warning-subtle: var(--gl-color-a11y-yellow);
144
+ --gl-color-background-success-bold: var(--gl-color-a11y-green);
145
+ --gl-color-background-success-subtle: var(--gl-color-a11y-green);
146
+ --gl-color-border-neutral-subtle-hover: var(--gl-color-base-black);
147
+ --gl-color-border-neutral-subtle-active: var(--gl-color-base-black);
148
+ --gl-color-border-brand-selected: var(--gl-color-a11y-brand);
149
+ --gl-color-border-neutral-subtle-selected: var(--gl-color-base-black);
150
+ --gl-color-border-bold: var(--gl-color-base-white);
151
+ --gl-color-border-strong-selected: var(--gl-color-base-white);
152
+ --gl-elevation-surface-overlay: var(--gl-color-base-black);
153
+ --gl-surface-raised-hover: var(--gl-color-base-black);
154
+ --gl-surface-raised-active: var(--gl-color-base-black);
155
+ --gl-elevation-surface-overlay-hover: var(--gl-color-base-white);
156
+ --gl-elevation-surface-overlay-active: var(--gl-color-base-white);
157
+ --gl-color-border-danger: var(--gl-color-a11y-red);
158
+ --gl-color-forms-bg-strong-hover: var(--gl-color-base-white);
159
+ --gl-color-forms-bg-strong-active: var(--gl-color-base-white);
160
+ --gl-color-forms-bg-strong: var(--gl-color-base-white);
161
+ --gl-color-border-inverse: var(--gl-color-base-white);
162
+ --gl-color-border-inverse-hover: var(--gl-opacity-white-85);
163
+ --gl-color-border-inverse-active: var(--gl-opacity-white-92);
164
+ --gl-color-icon-accent-orange: var(--gl-color-a11y-orange);
165
+ --gl-color-border-orange: var(--gl-color-a11y-orange);
166
+ --gl-color-border-teal: var(--gl-color-a11y-teal);
167
+ --gl-color-border-warning: var(--gl-color-a11y-yellow);
168
+ --gl-color-border-success: var(--gl-color-a11y-green);
169
+ --gl-color-icon-accent-teal: var(--gl-color-a11y-teal);
170
+ --gl-color-icon-success: var(--gl-color-a11y-green);
171
+ --gl-color-icon-warning: var(--gl-color-a11y-yellow);
172
+ --gl-color-border-selected-subtle: var(--gl-color-a11y-brand);
173
+ --gl-color-text: var(--gl-color-base-white);
174
+ --gl-color-text-inverse: var(--gl-color-base-black);
175
+ --gl-color-text-subtle: var(--gl-color-base-white);
176
+ --gl-color-text-subtle-hover: var(--gl-color-base-black);
177
+ --gl-color-text-subtle-active: var(--gl-color-base-black);
178
+ --gl-color-text-muted: var(--gl-color-base-white);
179
+ --gl-color-text-selected: var(--gl-color-a11y-brand);
180
+ --gl-color-text-white: var(--gl-color-base-white);
181
+ --gl-color-text-disabled: var(--gl-color-neutral-350);
182
+ --gl-color-text-disabled-bold: var(--gl-color-neutral-900);
183
+ --gl-color-text-placeholder: var(--gl-color-base-white);
184
+ --gl-color-text-placeholder-subtle: var(--gl-color-base-white);
185
+ --gl-color-text-on-white: var(--gl-color-base-black);
186
+ --gl-color-text-on-subtle: var(--gl-color-base-black);
187
+ --gl-color-text-on-subtle-hover: var(--gl-color-base-black);
188
+ --gl-color-text-on-subtle-active: var(--gl-color-base-black);
189
+ --gl-color-text-on-subtle-selected: var(--gl-color-base-black);
190
+ --gl-color-text-brand: var(--gl-color-a11y-brand);
191
+ --gl-color-text-brand-hover: var(--gl-color-a11y-brand);
192
+ --gl-color-text-brand-bolder: var(--gl-color-base-black);
193
+ --gl-color-text-accent-purple: var(--gl-color-a11y-purple);
194
+ --gl-color-xxtext-accent-pink-bolder-hover: var(--gl-color-base-black);
195
+ --gl-color-xxtext-accent-pink-bolder-active: var(--gl-color-base-black);
196
+ --gl-color-text-danger: var(--gl-color-a11y-red);
197
+ --gl-color-text-danger-bolder: var(--gl-color-base-black);
198
+ --gl-color-text-accent-purple-bolder: var(--gl-color-base-black);
199
+ --gl-color-text-accent-pink: var(--gl-color-a11y-pink);
200
+ --gl-color-text-accent-orange: var(--gl-color-a11y-orange);
201
+ --gl-color-text-accent-pink-bolder: var(--gl-color-base-black);
202
+ --gl-color-text-accent-orange-bolder: var(--gl-color-base-black);
203
+ --gl-color-text-accent-teal: var(--gl-color-a11y-teal);
204
+ --gl-color-text-accent-teal-bolder: var(--gl-color-base-black);
205
+ --gl-color-text-success: var(--gl-color-a11y-green);
206
+ --gl-color-text-success-bolder: var(--gl-color-base-black);
207
+ --gl-color-text-warning: var(--gl-color-a11y-yellow);
208
+ --gl-color-text-warning-bolder: var(--gl-color-base-black);
209
+ --gl-color-text-brand-bolder-hover: var(--gl-color-base-black);
210
+ --gl-color-text-brand-bolder-active: var(--gl-color-base-black);
211
+ --gl-color-text-brand-bolder-selected: var(--gl-color-base-black);
212
+ --gl-color-text-danger-bolder-hover: var(--gl-color-base-black);
213
+ --gl-color-text-danger-bolder-active: var(--gl-color-base-black);
214
+ --gl-color-icon-disabled-subtle: var(--gl-color-neutral-400);
215
+ --gl-color-utility-neutral-550: var(--gl-color-neutral-600);
216
+ --gl-color-utility-neutral-500: var(--gl-color-neutral-700);
217
+ --gl-color-utility-neutral-350: var(--gl-color-neutral-800);
218
+ --gl-color-utility-neutral-400: var(--gl-color-neutral-800);
219
+ --gl-color-utility-neutral-200: var(--gl-color-base-black);
220
+ --gl-color-utility-neutral-600: var(--gl-color-base-white);
221
+ --gl-color-utility-neutral-900: var(--gl-color-base-white);
222
+ --gl-color-utility-neutral-100: var(--gl-color-base-black);
223
+ --gl-color-utility-neutral-450: var(--gl-color-neutral-700);
224
+ --gl-color-utility-neutral-800: var(--gl-color-base-white);
225
+ --gl-color-utility-neutral-300: var(--gl-color-neutral-900);
226
+ --gl-color-utility-neutral-50: var(--gl-color-base-black);
227
+ --gl-color-utility-neutral-700: var(--gl-color-base-white);
228
+ --gl-color-utility-neutral-250: var(--gl-color-base-black);
229
+ --gl-color-utility-brand-800: var(--gl-color-a11y-brand);
230
+ --gl-color-utility-brand-600: var(--gl-color-a11y-brand);
231
+ --gl-color-utility-brand-500: var(--gl-color-a11y-brand);
232
+ --gl-color-utility-brand-450: var(--gl-color-a11y-brand);
233
+ --gl-color-utility-brand-400: var(--gl-color-a11y-brand);
234
+ --gl-color-utility-brand-50: var(--gl-color-a11y-brand);
235
+ --gl-color-utility-brand-300: var(--gl-color-a11y-brand);
236
+ --gl-color-utility-brand-200: var(--gl-color-a11y-brand);
237
+ --gl-color-utility-brand-700: var(--gl-color-a11y-brand);
238
+ --gl-color-utility-brand-900: var(--gl-color-a11y-brand);
239
+ --gl-color-utility-brand-100: var(--gl-color-a11y-brand);
240
+ --gl-color-utility-danger-700: var(--gl-color-a11y-red);
241
+ --gl-color-utility-danger-600: var(--gl-color-a11y-red);
242
+ --gl-color-utility-danger-500: var(--gl-color-a11y-red);
243
+ --gl-color-utility-danger-300: var(--gl-color-a11y-red);
244
+ --gl-color-utility-danger-200: var(--gl-color-a11y-red);
245
+ --gl-color-utility-danger-450: var(--gl-color-a11y-red);
246
+ --gl-color-utility-danger-100: var(--gl-color-a11y-red);
247
+ --gl-color-utility-danger-400: var(--gl-color-a11y-red);
248
+ --gl-color-utility-danger-50: var(--gl-color-a11y-red);
249
+ --gl-color-utility-success-600: var(--gl-color-a11y-green);
250
+ --gl-color-utility-success-450: var(--gl-color-a11y-green);
251
+ --gl-color-utility-success-500: var(--gl-color-a11y-green);
252
+ --gl-color-utility-success-400: var(--gl-color-a11y-green);
253
+ --gl-color-utility-success-300: var(--gl-color-a11y-green);
254
+ --gl-color-utility-success-700: var(--gl-color-a11y-green);
255
+ --gl-color-utility-success-100: var(--gl-color-a11y-green);
256
+ --gl-color-utility-success-200: var(--gl-color-a11y-green);
257
+ --gl-color-utility-success-50: var(--gl-color-a11y-green);
258
+ --gl-color-utility-warning-700: var(--gl-color-a11y-yellow);
259
+ --gl-color-utility-warning-600: var(--gl-color-a11y-yellow);
260
+ --gl-color-utility-warning-500: var(--gl-color-a11y-yellow);
261
+ --gl-color-utility-warning-400: var(--gl-color-a11y-yellow);
262
+ --gl-color-utility-warning-450: var(--gl-color-a11y-yellow);
263
+ --gl-color-utility-warning-50: var(--gl-color-a11y-yellow);
264
+ --gl-color-utility-warning-200: var(--gl-color-a11y-yellow);
265
+ --gl-color-utility-warning-100: var(--gl-color-a11y-yellow);
266
+ --gl-color-utility-warning-300: var(--gl-color-a11y-yellow);
267
+ --gl-color-utility-purple-700: var(--gl-color-a11y-purple);
268
+ --gl-color-utility-purple-600: var(--gl-color-a11y-purple);
269
+ --gl-color-utility-purple-500: var(--gl-color-a11y-purple);
270
+ --gl-color-utility-purple-400: var(--gl-color-a11y-purple);
271
+ --gl-color-utility-purple-300: var(--gl-color-a11y-purple);
272
+ --gl-color-utility-purple-450: var(--gl-color-a11y-purple);
273
+ --gl-color-utility-purple-100: var(--gl-color-a11y-purple);
274
+ --gl-color-utility-purple-200: var(--gl-color-a11y-purple);
275
+ --gl-color-utility-purple-50: var(--gl-color-a11y-purple);
276
+ --gl-color-utility-pink-700: var(--gl-color-a11y-pink);
277
+ --gl-color-utility-pink-500: var(--gl-color-a11y-pink);
278
+ --gl-color-utility-pink-300: var(--gl-color-a11y-pink);
279
+ --gl-color-utility-pink-600: var(--gl-color-a11y-pink);
280
+ --gl-color-utility-pink-50: var(--gl-color-a11y-pink);
281
+ --gl-color-utility-pink-400: var(--gl-color-a11y-pink);
282
+ --gl-color-utility-pink-100: var(--gl-color-a11y-pink);
283
+ --gl-color-utility-pink-450: var(--gl-color-a11y-pink);
284
+ --gl-color-utility-pink-200: var(--gl-color-a11y-pink);
285
+ --gl-color-utility-orange-700: var(--gl-color-a11y-orange);
286
+ --gl-color-utility-orange-600: var(--gl-color-a11y-orange);
287
+ --gl-color-utility-orange-450: var(--gl-color-a11y-orange);
288
+ --gl-color-utility-orange-50: var(--gl-color-a11y-orange);
289
+ --gl-color-utility-orange-300: var(--gl-color-a11y-orange);
290
+ --gl-color-utility-orange-400: var(--gl-color-a11y-orange);
291
+ --gl-color-utility-orange-500: var(--gl-color-a11y-orange);
292
+ --gl-color-utility-orange-200: var(--gl-color-a11y-orange);
293
+ --gl-color-utility-orange-100: var(--gl-color-a11y-orange);
294
+ --gl-color-utility-teal-600: var(--gl-color-a11y-teal);
295
+ --gl-color-utility-teal-500: var(--gl-color-a11y-teal);
296
+ --gl-color-utility-teal-700: var(--gl-color-a11y-teal);
297
+ --gl-color-utility-teal-300: var(--gl-color-a11y-teal);
298
+ --gl-color-utility-teal-400: var(--gl-color-a11y-teal);
299
+ --gl-color-utility-teal-200: var(--gl-color-a11y-teal);
300
+ --gl-color-utility-teal-450: var(--gl-color-a11y-teal);
301
+ --gl-color-utility-teal-100: var(--gl-color-a11y-teal);
302
+ --gl-color-utility-teal-50: var(--gl-color-a11y-teal);
303
+ --gl-color-border-bold-hover: var(--gl-color-base-white);
304
+ --gl-color-border-teal-subtle: var(--gl-color-a11y-teal);
305
+ --gl-color-focus-ring: var(--gl-color-a11y-yellow);
306
+ --gl-color-focus-ring-offset-inside: var(--gl-border-width-lg);
307
+ --gl-color-focus-ring-offset-outside: var(--gl-border-width-xl);
308
+ --gl-color-focus-ring-error: var(--gl-color-a11y-red);
309
+ --gl-color-text-accent-red: var(--gl-color-a11y-red);
310
+ --gl-color-text-accent-red-bolder: var(--gl-color-base-black);
311
+ --gl-color-xxtext-accent-red-bolder-hover: var(--gl-color-base-black);
312
+ --gl-color-xxtext-accent-red-bolder-active: var(--gl-color-base-black);
313
+ --gl-color-text-accent-yellow: var(--gl-color-a11y-yellow);
314
+ --gl-color-text-accent-yellow-bolder: var(--gl-color-base-black);
315
+ --gl-color-text-accent-green: var(--gl-color-a11y-green);
316
+ --gl-color-text-accent-green-bolder: var(--gl-color-base-black);
317
+ --gl-color-text-accent-blue: var(--gl-color-a11y-brand);
318
+ --gl-color-text-accent-blue-bolder: var(--gl-color-base-black);
319
+ --gl-color-text-neutral: var(--gl-color-base-white);
320
+ --gl-color-text-neutral-bolder: var(--gl-color-base-black);
321
+ --gl-color-text-information: var(--gl-color-a11y-brand);
322
+ --gl-color-text-information-bolder: var(--gl-color-base-black);
323
+ --gl-color-link: var(--gl-color-a11y-brand);
324
+ --gl-color-link-active: var(--gl-color-a11y-brand);
325
+ --gl-color-link-visited: var(--gl-color-a11y-purple);
326
+ --gl-color-link-visited-active: var(--gl-color-a11y-purple);
327
+ --gl-color-icon-accent-yellow: var(--gl-color-a11y-yellow);
328
+ --gl-color-icon-accent-yellow-bolder: var(--gl-color-base-black);
329
+ --gl-color-icon-accent-green: var(--gl-color-a11y-green);
330
+ --gl-color-icon-accent-green-bolder: var(--gl-color-base-black);
331
+ --gl-color-icon-accent-blue: var(--gl-color-a11y-brand);
332
+ --gl-color-icon-accent-blue-bolder: var(--gl-color-base-black);
333
+ --gl-color-icon-neutral: var(--gl-color-base-white);
334
+ --gl-color-icon-accent-blue: var(--gl-color-a11y-brand);
335
+ --gl-color-icon-accent-blue-bolder: var(--gl-color-base-black);
336
+ --gl-color-border-accent-red: var(--gl-color-a11y-red);
337
+ --gl-color-border-accent-yellow: var(--gl-color-a11y-yellow);
338
+ --gl-color-border-accent-green: var(--gl-color-a11y-green);
339
+ --gl-color-background-accent-red-subtler: var(--gl-color-a11y-red);
340
+ --gl-color-xxbackground-accent-red-subtler-hover: var(--gl-color-a11y-red);
341
+ --gl-color-xxbackground-accent-red-subtler-active: var(--gl-color-a11y-red);
342
+ --gl-color-background-accent-red-bolder: var(--gl-color-a11y-red);
343
+ --gl-color-xxbackground-accent-red-bolder-hover: var(--gl-color-base-white);
344
+ --gl-color-xxbackground-accent-red-bolder-active: var(--gl-color-a11y-red);
345
+ --gl-color-background-accent-red-subtle: var(--gl-color-a11y-red);
346
+ --gl-color-background-accent-orange-subtle: var(--gl-color-a11y-orange);
347
+ --gl-color-xxbackground-accent-orange-subtler-hover: var(--gl-color-a11y-orange);
348
+ --gl-color-xxbackground-accent-orange-subtle-hover: var(--gl-color-a11y-orange);
349
+ --gl-color-xxbackground-accent-orange-bolder-hover: var(--gl-color-base-white);
350
+ --gl-color-xxbackground-accent-orange-subtle-active: var(--gl-color-a11y-orange);
351
+ --gl-color-xxbackground-accent-orange-subtler-active: var(--gl-color-a11y-orange);
352
+ --gl-color-xxbackground-accent-orange-bolder-active: var(--gl-color-base-white);
353
+ --gl-color-xxbackground-accent-orange-subtlest: var(--gl-color-a11y-orange);
354
+ --gl-color-background-accent-yellow-bolder: var(--gl-color-a11y-yellow);
355
+ --gl-color-background-accent-yellow-subtler: var(--gl-color-a11y-yellow);
356
+ --gl-color-background-accent-green-bolder: var(--gl-color-a11y-green);
357
+ --gl-color-background-accent-green-subtler: var(--gl-color-a11y-green);
358
+ --gl-color-background-accent-green-subtle: var(--gl-color-a11y-green);
359
+ --gl-color-background-accent-yellow-subtle: var(--gl-color-a11y-yellow);
360
+ --gl-color-background-accent-teal-subtle: var(--gl-color-a11y-teal);
361
+ --gl-color-background-accent-blue-subtler: var(--gl-color-a11y-brand);
362
+ --gl-color-background-accent-blue-bolder: var(--gl-color-a11y-brand);
363
+ --gl-color-background-accent-blue-subtlest: var(--gl-color-a11y-brand);
364
+ --gl-color-background-accent-blue-subtle: var(--gl-color-a11y-brand);
365
+ --gl-color-background-accent-purple-subtlest: var(--gl-color-a11y-purple);
366
+ --gl-color-background-accent-purple-subtle: var(--gl-color-a11y-purple);
367
+ --gl-color-background-accent-pink-subtlest: var(--gl-color-a11y-pink);
368
+ --gl-color-background-accent-pink-subtle: var(--gl-color-a11y-pink);
369
+ --gl-color-text-selected-hover: var(--gl-color-a11y-brand);
370
+ --gl-color-background-information-subtle: var(--gl-color-a11y-brand);
371
+ --gl-color-background-information-bold: var(--gl-color-a11y-brand);
372
+ --gl-color-icon-accent-red: var(--gl-color-a11y-red);
373
+ --gl-color-icon-danger-red-bolder: var(--gl-color-base-black);
374
+ --gl-color-text-accent-blue-boldest: var(--gl-color-base-black);
375
+ --gl-color-xxtext-accent-purple-hover: var(--gl-color-a11y-purple);
376
+ --gl-color-text-accent-purple-boldest: var(--gl-color-base-black);
377
+ --gl-color-text-accent-pink-boldest: var(--gl-color-base-black);
378
+ --gl-color-icon-brand-boldest: var(--gl-color-base-black);
379
+ --gl-color-icon-accent-purple-boldest: var(--gl-color-base-black);
380
+ --gl-color-icon-accent-pink-boldest: var(--gl-color-base-black);
381
+ --gl-color-icon-accent-green-boldest: var(--gl-color-base-black);
382
+ --gl-color-icon-danger-red-boldest: var(--gl-color-base-black);
383
+ --gl-color-icon-danger-boldest: var(--gl-color-base-black);
384
+ --gl-color-text-danger-boldest: var(--gl-color-base-black);
385
+ --gl-color-xxtext-accent-purple-bolder-hover: var(--gl-color-base-black);
386
+ --gl-color-xxtext-accent-purple-bolder-active: var(--gl-color-base-black);
387
+ --gl-color-text-accent-orange-boldest: var(--gl-color-base-black);
388
+ --gl-color-text-accent-teal-boldest: var(--gl-color-base-black);
389
+ --gl-color-text-accent-green-boldest: var(--gl-color-base-black);
390
+ --gl-color-text-accent-yellow-boldest: var(--gl-color-base-black);
391
+ --gl-color-text-accent-red-boldest: var(--gl-color-base-black);
392
+ --gl-color-icon-accent-orange-boldest: var(--gl-color-base-black);
393
+ --gl-color-icon-accent-blue-boldest: var(--gl-color-base-black);
394
+ --gl-color-icon-accent-yellow-boldest: var(--gl-color-base-black);
395
+ --gl-color-background-upsell-subtle: var(--gl-color-a11y-purple);
396
+ --gl-color-background-upsell-bold: var(--gl-color-a11y-purple);
397
+ --gl-color-background-upsell-bold-hover: var(--gl-color-base-white);
398
+ --gl-color-background-upsell-bold-active: var(--gl-color-a11y-purple);
399
+ --gl-color-background-accent-pink-subtle: var(--gl-color-a11y-pink);
400
+ --gl-color-background-accent-pink-bold: var(--gl-color-a11y-pink);
401
+ --gl-color-background-accent-pink-bold-hover: var(--gl-color-base-white);
402
+ --gl-color-background-accent-pink-bold-active: var(--gl-color-a11y-pink);
403
+ --gl-color-text-upsell: var(--gl-color-a11y-purple);
404
+ --gl-color-text-upsell-hover: var(--gl-color-a11y-purple);
405
+ --gl-color-text-upsell-bolder: var(--gl-color-base-black);
406
+ --gl-color-text-upsell-bolder-hover: var(--gl-color-base-black);
407
+ --gl-color-text-upsell-bolder-active: var(--gl-color-base-black);
408
+ --gl-color-text-upsell-boldest: var(--gl-color-base-black);
409
+ --gl-color-text-discovery: var(--gl-color-a11y-pink);
410
+ --gl-color-text-discovery-bolder: var(--gl-color-base-black);
411
+ --gl-color-text-discovery-bolder-hover: var(--gl-color-base-black);
412
+ --gl-color-text-discovery-bolder-active: var(--gl-color-base-black);
413
+ --gl-color-text-discovery-boldest: var(--gl-color-base-black);
414
+ --gl-color-icon-upsell: var(--gl-color-a11y-purple);
415
+ --gl-color-icon-upsell-hover: var(--gl-color-a11y-purple);
416
+ --gl-color-icon-upsell-bolder: var(--gl-color-base-black);
417
+ --gl-color-icon-upsell-bolder-hover: var(--gl-color-base-black);
418
+ --gl-color-icon-upsell-bolder-active: var(--gl-color-base-black);
419
+ --gl-color-icon-upsell-boldest: var(--gl-color-base-black);
420
+ --gl-color-icon-discovery: var(--gl-color-a11y-pink);
421
+ --gl-color-icon-discovery-bolder: var(--gl-color-base-black);
422
+ --gl-color-icon-discovery-bolder-hover: var(--gl-color-base-black);
423
+ --gl-color-icon-discovery-bolder-active: var(--gl-color-base-black);
424
+ --gl-color-icon-discovery-boldest: var(--gl-color-base-black);
425
+ --gl-color-icon-accent-teal-boldest: var(--gl-color-base-black);
426
+ --gl-color-border-brand: var(--gl-color-a11y-brand);
427
+ --gl-color-xxborder-brand-hover: var(--gl-color-a11y-brand);
428
+ --gl-color-xxborder-brand-active: var(--gl-color-a11y-brand);
429
+ --gl-color-xxborder-brand-selected: var(--gl-color-a11y-brand);
430
+ --gl-color-border-brand-bold: var(--gl-color-a11y-brand);
431
+ --gl-color-xxborder-brand-bold-hover: var(--gl-color-a11y-brand);
432
+ --gl-color-opacity-900: var(--gl-opacity-neutral-91);
433
+ --gl-color-opacity-800: var(--gl-opacity-neutral-82);
434
+ --gl-color-opacity-700: var(--gl-opacity-neutral-74);
435
+ --gl-color-opacity-25: var(--gl-opacity-neutral-03);
436
+ --gl-color-opacity-500: var(--gl-opacity-neutral-44);
437
+ --gl-color-opacity-300: var(--gl-opacity-neutral-22);
438
+ --gl-color-opacity-150: var(--gl-opacity-neutral-14);
439
+ --gl-color-opacity-400: var(--gl-opacity-neutral-44);
440
+ --gl-color-opacity-100: var(--gl-opacity-neutral-09);
441
+ --gl-color-opacity-50: var(--gl-opacity-neutral-05);
442
+ --gl-color-opacity-600: var(--gl-opacity-neutral-56);
443
+ --gl-color-opacity-200: var(--gl-opacity-neutral-22);
444
+ --gl-color-opacity-transparent: var(--gl-opacity-neutral-transparent);
445
+ --gl-color-border-upsell-bold: var(--gl-color-a11y-purple);
446
+ --gl-color-border-upsell-bold-hover: var(--gl-color-a11y-purple);
447
+ --gl-color-border-discovery-bold: var(--gl-color-a11y-pink);
448
+ --gl-color-border-discovery: var(--gl-color-a11y-pink);
449
+ --gl-color-border-discovery-hover: var(--gl-color-a11y-pink);
450
+ --gl-color-border-discovery-active: var(--gl-color-a11y-pink);
451
+ --gl-color-icon-accent-purple: var(--gl-color-a11y-purple);
452
+ --gl-color-icon-accent-pink: var(--gl-color-a11y-pink);
453
+ --gl-color-icon-accent-orange: var(--gl-color-a11y-orange);
454
+ --gl-color-icon-accent-teal: var(--gl-color-a11y-teal);
455
+ --gl-color-icon-accent-green: var(--gl-color-a11y-green);
456
+ --gl-color-icon-accent-red: var(--gl-color-a11y-red);
457
+ --gl-color-icon-danger: var(--gl-color-a11y-red);
458
+ --gl-color-border-bold-hover: var(--gl-color-base-white);
459
+ --gl-color-text-selected: var(--gl-color-base-black);
460
+ --gl-color-text-selected: var(--gl-color-a11y-brand);
461
+ --gl-color-border-selected: var(--gl-color-a11y-brand);
462
+ --gl-color-border-selected: var(--gl-color-a11y-brand);
463
+ --gl-color-icon-selected: var(--gl-color-base-black);
464
+ --gl-color-border-orange: var(--gl-color-a11y-orange);
465
+ --gl-color-border-accent-green: var(--gl-color-a11y-green);
466
+ --gl-color-border-accent-yellow: var(--gl-color-a11y-yellow);
467
+ --gl-color-border-accent-red: var(--gl-color-a11y-red);
468
+ --gl-color-border-brand: var(--gl-color-a11y-brand);
469
+ --gl-color-border-brand: var(--gl-color-a11y-brand);
470
+ --gl-color-icon-muted: var(--gl-color-base-black);
471
+ --gl-color-icon-accent-purple-bolder: var(--gl-color-base-black);
472
+ --gl-color-icon-accent-purple-bolder: var(--gl-color-base-black);
473
+ --gl-color-icon-neutral: var(--gl-color-base-white);
474
+ --gl-color-background-accent-teal-bolder: var(--gl-color-a11y-brand);
475
+ --gl-color-background-accent-teal-subtler: var(--gl-color-a11y-brand);
476
+ --gl-color-background-accent-teal-subtle: var(--gl-color-a11y-brand);
477
+ --gl-color-text-accent-teal: var(--gl-color-a11y-brand);
478
+ --gl-color-text-accent-teal-bolder: var(--gl-color-base-black);
479
+ --gl-color-text-accent-teal-boldest: var(--gl-color-base-black);
480
+ --gl-color-text-accent-teal-bolder: var(--gl-color-base-black);
481
+ --gl-color-text-accent-teal-boldest: var(--gl-color-base-black);
482
+ --gl-color-text-accent-teal: var(--gl-color-a11y-brand);
483
+ --gl-color-text-accent-teal: var(--gl-color-a11y-brand);
484
+ --gl-color-border-teal: var(--gl-color-a11y-brand);
485
+ --gl-color-border-teal-subtle: var(--gl-color-a11y-brand);
486
+ --gl-color-xxxbackground-sunken: var(--gl-color-base-black);
487
+ --gl-color-xxxbackground-sunken: var(--gl-color-base-black);
488
+ --gl-color-icon-accent-purple-bolder: var(--gl-color-a11y-purple);
489
+ --gl-color-icon-accent-pink-boldest: var(--gl-color-base-black);
490
+ --gl-color-text-accent-pink-boldest: var(--gl-color-a11y-pink);
491
+ --gl-color-text-accent-pink-boldest: var(--gl-color-base-black);
492
+ --gl-color-icon-brand: var(--gl-color-base-black);
493
+ --gl-color-icon-accent-blue: var(--gl-color-a11y-brand);
494
+ --gl-color-icon-accent-purple: var(--gl-color-a11y-purple);
495
+ --gl-color-icon-accent-pink: var(--gl-color-a11y-pink);
496
+ --gl-color-utility-teal-50: var(--gl-color-a11y-teal);
497
+ --gl-color-utility-teal-100: var(--gl-color-a11y-teal);
498
+ --gl-color-utility-teal-200: var(--gl-color-a11y-teal);
499
+ --gl-color-utility-teal-300: var(--gl-color-a11y-teal);
500
+ --gl-color-utility-teal-400: var(--gl-color-a11y-teal);
501
+ --gl-color-utility-teal-450: var(--gl-color-a11y-teal);
502
+ --gl-color-utility-teal-500: var(--gl-color-a11y-teal);
503
+ --gl-color-utility-teal-600: var(--gl-color-a11y-teal);
504
+ --gl-color-utility-teal-700: var(--gl-color-a11y-teal);
505
+ --gl-color-icon-muted: var(--gl-color-base-black);
506
+ }