@gitlab/ui 125.0.0 → 126.0.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.
- package/dist/components/base/form/form_fields/form_fields.js +26 -9
- package/dist/components/base/form/form_select/form_select.js +1 -9
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tailwind.css +1 -1
- package/dist/tailwind.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +193 -1
- package/dist/tokens/build/js/tokens.js +193 -1
- package/package.json +3 -8
- package/src/components/base/form/form_fields/form_fields.vue +29 -9
- package/src/components/base/form/form_select/form_select.vue +1 -15
- package/src/tokens/build/css/tokens.css +192 -0
- package/src/tokens/build/css/tokens.dark.css +192 -0
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +59 -0
- package/src/tokens/build/docs/tokens-tailwind-docs.json +59 -0
- package/src/tokens/build/figma/constants.tokens.json +180 -0
- package/src/tokens/build/figma/semantic.tokens.json +209 -0
- package/src/tokens/build/js/tokens.dark.js +198 -0
- package/src/tokens/build/js/tokens.js +198 -0
- package/src/tokens/build/json/tokens.dark.json +1117 -0
- package/src/tokens/build/json/tokens.json +1117 -0
- package/src/tokens/build/scss/_tokens.dark.scss +192 -0
- package/src/tokens/build/scss/_tokens.scss +192 -0
- package/src/tokens/build/scss/_tokens_custom_properties.scss +192 -0
- package/src/tokens/build/tailwind/components.cjs +253 -0
- package/src/tokens/build/tailwind/tokens.cjs +2 -0
- package/src/tokens/constant/heading.tokens.json +182 -0
- package/src/tokens/semantic/font.tokens.json +11 -0
- package/src/tokens/semantic/heading.tokens.json +178 -0
- package/src/tokens/semantic/letter_spacing.tokens.json +13 -0
- package/src/tokens/semantic/line_height.tokens.json +13 -0
- package/tailwind.defaults.js +2 -253
- package/bin/migrate_custom_utils_to_tw.bundled.mjs +0 -205443
- package/dist/tokens/css/tokens.css +0 -1156
- package/dist/tokens/css/tokens.dark.css +0 -1156
- package/dist/tokens/docs/tokens-tailwind-docs.dark.json +0 -42846
- package/dist/tokens/docs/tokens-tailwind-docs.json +0 -42846
- package/dist/tokens/figma/constants.tokens.json +0 -2756
- package/dist/tokens/figma/contextual.tokens.json +0 -5929
- package/dist/tokens/figma/deprecated.tokens.json +0 -2899
- package/dist/tokens/figma/semantic.tokens.json +0 -2479
- package/dist/tokens/js/tokens.dark.js +0 -1286
- package/dist/tokens/js/tokens.js +0 -1275
- package/dist/tokens/json/tokens.dark.json +0 -36934
- package/dist/tokens/json/tokens.json +0 -36934
- package/dist/tokens/scss/_tokens.dark.scss +0 -1153
- package/dist/tokens/scss/_tokens.scss +0 -1153
- package/dist/tokens/scss/_tokens_custom_properties.scss +0 -1154
- package/dist/tokens/tailwind/tokens.cjs +0 -558
|
@@ -1,1153 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
// Do not edit directly, this file was auto-generated.
|
|
3
|
-
|
|
4
|
-
$gl-border-radius-full: 9999px;
|
|
5
|
-
$gl-color-alpha-0: transparent;
|
|
6
|
-
$gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
|
|
7
|
-
$gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
|
|
8
|
-
$gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
|
|
9
|
-
$gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
|
|
10
|
-
$gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
|
|
11
|
-
$gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
|
|
12
|
-
$gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
|
|
13
|
-
$gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
|
|
14
|
-
$gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
|
|
15
|
-
$gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
|
|
16
|
-
$gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
|
|
17
|
-
$gl-color-alpha-light-16: rgba(255, 255, 255, 0.16);
|
|
18
|
-
$gl-color-alpha-light-24: rgba(255, 255, 255, 0.24);
|
|
19
|
-
$gl-color-alpha-light-36: rgba(255, 255, 255, 0.36);
|
|
20
|
-
$gl-color-blue-50: #e9f3fc;
|
|
21
|
-
$gl-color-blue-100: #cbe2f9;
|
|
22
|
-
$gl-color-blue-200: #9dc7f1;
|
|
23
|
-
$gl-color-blue-300: #63a6e9;
|
|
24
|
-
$gl-color-blue-400: #428fdc;
|
|
25
|
-
$gl-color-blue-500: #1f75cb;
|
|
26
|
-
$gl-color-blue-600: #2f68b4;
|
|
27
|
-
$gl-color-blue-700: #2f5ca0;
|
|
28
|
-
$gl-color-blue-800: #284779;
|
|
29
|
-
$gl-color-blue-900: #213454;
|
|
30
|
-
$gl-color-blue-950: #1d283e;
|
|
31
|
-
$gl-color-neutral-0: #fff;
|
|
32
|
-
$gl-color-neutral-10: #fbfafd;
|
|
33
|
-
$gl-color-neutral-50: #ececef;
|
|
34
|
-
$gl-color-neutral-100: #dcdcde;
|
|
35
|
-
$gl-color-neutral-200: #bfbfc3;
|
|
36
|
-
$gl-color-neutral-300: #a4a3a8;
|
|
37
|
-
$gl-color-neutral-400: #89888d;
|
|
38
|
-
$gl-color-neutral-500: #737278;
|
|
39
|
-
$gl-color-neutral-600: #626168;
|
|
40
|
-
$gl-color-neutral-700: #4c4b51;
|
|
41
|
-
$gl-color-neutral-800: #3a383f;
|
|
42
|
-
$gl-color-neutral-900: #28272d;
|
|
43
|
-
$gl-color-neutral-950: #18171d;
|
|
44
|
-
$gl-color-neutral-1000: #050506;
|
|
45
|
-
$gl-color-green-50: #ecf4ee;
|
|
46
|
-
$gl-color-green-100: #c3e6cd;
|
|
47
|
-
$gl-color-green-200: #91d4a8;
|
|
48
|
-
$gl-color-green-300: #52b87a;
|
|
49
|
-
$gl-color-green-400: #2da160;
|
|
50
|
-
$gl-color-green-500: #108548;
|
|
51
|
-
$gl-color-green-600: #2f7549;
|
|
52
|
-
$gl-color-green-700: #306440;
|
|
53
|
-
$gl-color-green-800: #225131;
|
|
54
|
-
$gl-color-green-900: #1e3e28;
|
|
55
|
-
$gl-color-green-950: #17291c;
|
|
56
|
-
$gl-color-orange-50: #fdf1dd;
|
|
57
|
-
$gl-color-orange-100: #f5d9a8;
|
|
58
|
-
$gl-color-orange-200: #e9be74;
|
|
59
|
-
$gl-color-orange-300: #d99530;
|
|
60
|
-
$gl-color-orange-400: #c17d10;
|
|
61
|
-
$gl-color-orange-500: #ab6100;
|
|
62
|
-
$gl-color-orange-600: #995715;
|
|
63
|
-
$gl-color-orange-700: #894b16;
|
|
64
|
-
$gl-color-orange-800: #693c14;
|
|
65
|
-
$gl-color-orange-900: #532e16;
|
|
66
|
-
$gl-color-orange-950: #382315;
|
|
67
|
-
$gl-color-purple-50: #f4f0ff;
|
|
68
|
-
$gl-color-purple-100: #e1d8f9;
|
|
69
|
-
$gl-color-purple-200: #cbbbf2;
|
|
70
|
-
$gl-color-purple-300: #ac93e6;
|
|
71
|
-
$gl-color-purple-400: #9475db;
|
|
72
|
-
$gl-color-purple-500: #7b58cf;
|
|
73
|
-
$gl-color-purple-600: #6a4fb4;
|
|
74
|
-
$gl-color-purple-700: #5c47a6;
|
|
75
|
-
$gl-color-purple-800: #493c83;
|
|
76
|
-
$gl-color-purple-900: #342d59;
|
|
77
|
-
$gl-color-purple-950: #27243e;
|
|
78
|
-
$gl-color-red-50: #fcf1ef;
|
|
79
|
-
$gl-color-red-100: #fdd4cd;
|
|
80
|
-
$gl-color-red-200: #fcb5aa;
|
|
81
|
-
$gl-color-red-300: #f6806d;
|
|
82
|
-
$gl-color-red-400: #ec5941;
|
|
83
|
-
$gl-color-red-500: #dd2b0e;
|
|
84
|
-
$gl-color-red-600: #c02f12;
|
|
85
|
-
$gl-color-red-700: #a32c12;
|
|
86
|
-
$gl-color-red-800: #812713;
|
|
87
|
-
$gl-color-red-900: #582014;
|
|
88
|
-
$gl-color-red-950: #3e1a14;
|
|
89
|
-
$gl-color-data-green-50: #ddfab7;
|
|
90
|
-
$gl-color-data-green-100: #c6ed94;
|
|
91
|
-
$gl-color-data-green-200: #b0d97b;
|
|
92
|
-
$gl-color-data-green-300: #94c25e;
|
|
93
|
-
$gl-color-data-green-400: #81ac41;
|
|
94
|
-
$gl-color-data-green-500: #619025;
|
|
95
|
-
$gl-color-data-green-600: #4e7f0e;
|
|
96
|
-
$gl-color-data-green-700: #366800;
|
|
97
|
-
$gl-color-data-green-800: #275600;
|
|
98
|
-
$gl-color-data-green-900: #1a4500;
|
|
99
|
-
$gl-color-data-green-950: #133a03;
|
|
100
|
-
$gl-color-data-aqua-50: #b5fefd;
|
|
101
|
-
$gl-color-data-aqua-100: #93f2ef;
|
|
102
|
-
$gl-color-data-aqua-200: #5edee3;
|
|
103
|
-
$gl-color-data-aqua-300: #32c5d2;
|
|
104
|
-
$gl-color-data-aqua-400: #00acc4;
|
|
105
|
-
$gl-color-data-aqua-500: #0090b1;
|
|
106
|
-
$gl-color-data-aqua-600: #007b9b;
|
|
107
|
-
$gl-color-data-aqua-700: #006381;
|
|
108
|
-
$gl-color-data-aqua-800: #00516c;
|
|
109
|
-
$gl-color-data-aqua-900: #004059;
|
|
110
|
-
$gl-color-data-aqua-950: #00344b;
|
|
111
|
-
$gl-color-data-blue-50: #e9ebff;
|
|
112
|
-
$gl-color-data-blue-100: #d2dcff;
|
|
113
|
-
$gl-color-data-blue-200: #b7c6ff;
|
|
114
|
-
$gl-color-data-blue-300: #97acff;
|
|
115
|
-
$gl-color-data-blue-400: #7992f5;
|
|
116
|
-
$gl-color-data-blue-500: #617ae2;
|
|
117
|
-
$gl-color-data-blue-600: #4e65cd;
|
|
118
|
-
$gl-color-data-blue-700: #3f51ae;
|
|
119
|
-
$gl-color-data-blue-800: #374291;
|
|
120
|
-
$gl-color-data-blue-900: #303470;
|
|
121
|
-
$gl-color-data-blue-950: #2a2b59;
|
|
122
|
-
$gl-color-data-magenta-50: #ffe3eb;
|
|
123
|
-
$gl-color-data-magenta-100: #ffccdb;
|
|
124
|
-
$gl-color-data-magenta-200: #fcacc5;
|
|
125
|
-
$gl-color-data-magenta-300: #f88aaf;
|
|
126
|
-
$gl-color-data-magenta-400: #e86e9a;
|
|
127
|
-
$gl-color-data-magenta-500: #cf4d81;
|
|
128
|
-
$gl-color-data-magenta-600: #b93d71;
|
|
129
|
-
$gl-color-data-magenta-700: #9a2e5d;
|
|
130
|
-
$gl-color-data-magenta-800: #7c214f;
|
|
131
|
-
$gl-color-data-magenta-900: #661e3a;
|
|
132
|
-
$gl-color-data-magenta-950: #541d31;
|
|
133
|
-
$gl-color-data-orange-50: #fae8d1;
|
|
134
|
-
$gl-color-data-orange-100: #f5d6b3;
|
|
135
|
-
$gl-color-data-orange-200: #eebd8c;
|
|
136
|
-
$gl-color-data-orange-300: #e99b60;
|
|
137
|
-
$gl-color-data-orange-400: #e07e41;
|
|
138
|
-
$gl-color-data-orange-500: #c95d2e;
|
|
139
|
-
$gl-color-data-orange-600: #b14f18;
|
|
140
|
-
$gl-color-data-orange-700: #92430a;
|
|
141
|
-
$gl-color-data-orange-800: #6f3500;
|
|
142
|
-
$gl-color-data-orange-900: #5e2f05;
|
|
143
|
-
$gl-color-data-orange-950: #4b2707;
|
|
144
|
-
$gl-color-theme-indigo-10: #f8f8ff;
|
|
145
|
-
$gl-color-theme-indigo-50: #f1f1ff;
|
|
146
|
-
$gl-color-theme-indigo-100: #dbdbf8;
|
|
147
|
-
$gl-color-theme-indigo-200: #c7c7f2;
|
|
148
|
-
$gl-color-theme-indigo-300: #a2a2e6;
|
|
149
|
-
$gl-color-theme-indigo-400: #8181d7;
|
|
150
|
-
$gl-color-theme-indigo-500: #6666c4;
|
|
151
|
-
$gl-color-theme-indigo-600: #5252b5;
|
|
152
|
-
$gl-color-theme-indigo-700: #41419f;
|
|
153
|
-
$gl-color-theme-indigo-800: #303083;
|
|
154
|
-
$gl-color-theme-indigo-900: #222261;
|
|
155
|
-
$gl-color-theme-indigo-950: #14143d;
|
|
156
|
-
$gl-color-theme-blue-10: #e6ecf0;
|
|
157
|
-
$gl-color-theme-blue-50: #cdd8e3;
|
|
158
|
-
$gl-color-theme-blue-100: #b9cadc;
|
|
159
|
-
$gl-color-theme-blue-200: #a6bdd5;
|
|
160
|
-
$gl-color-theme-blue-300: #81a5c9;
|
|
161
|
-
$gl-color-theme-blue-400: #628eb9;
|
|
162
|
-
$gl-color-theme-blue-500: #4977a5;
|
|
163
|
-
$gl-color-theme-blue-600: #346596;
|
|
164
|
-
$gl-color-theme-blue-700: #235180;
|
|
165
|
-
$gl-color-theme-blue-800: #153c63;
|
|
166
|
-
$gl-color-theme-blue-900: #0b2640;
|
|
167
|
-
$gl-color-theme-blue-950: #04101c;
|
|
168
|
-
$gl-color-theme-light-blue-10: #eef3f7;
|
|
169
|
-
$gl-color-theme-light-blue-50: #dde6ee;
|
|
170
|
-
$gl-color-theme-light-blue-100: #c1d4e6;
|
|
171
|
-
$gl-color-theme-light-blue-200: #a0bedc;
|
|
172
|
-
$gl-color-theme-light-blue-300: #74a3d3;
|
|
173
|
-
$gl-color-theme-light-blue-400: #4f8bc7;
|
|
174
|
-
$gl-color-theme-light-blue-500: #3476b9;
|
|
175
|
-
$gl-color-theme-light-blue-600: #2268ae;
|
|
176
|
-
$gl-color-theme-light-blue-700: #145aa1;
|
|
177
|
-
$gl-color-theme-light-blue-800: #0e4d8d;
|
|
178
|
-
$gl-color-theme-light-blue-900: #0c4277;
|
|
179
|
-
$gl-color-theme-light-blue-950: #0a3764;
|
|
180
|
-
$gl-color-theme-green-10: #eef4ef;
|
|
181
|
-
$gl-color-theme-green-50: #dde9de;
|
|
182
|
-
$gl-color-theme-green-100: #b1d6b5;
|
|
183
|
-
$gl-color-theme-green-200: #8cc497;
|
|
184
|
-
$gl-color-theme-green-300: #69af7d;
|
|
185
|
-
$gl-color-theme-green-400: #499767;
|
|
186
|
-
$gl-color-theme-green-500: #308258;
|
|
187
|
-
$gl-color-theme-green-600: #25744c;
|
|
188
|
-
$gl-color-theme-green-700: #1b653f;
|
|
189
|
-
$gl-color-theme-green-800: #155635;
|
|
190
|
-
$gl-color-theme-green-900: #0e4328;
|
|
191
|
-
$gl-color-theme-green-950: #052e19;
|
|
192
|
-
$gl-color-theme-red-10: #faf4f3;
|
|
193
|
-
$gl-color-theme-red-50: #f4e9e7;
|
|
194
|
-
$gl-color-theme-red-100: #ecd3d0;
|
|
195
|
-
$gl-color-theme-red-200: #e3bab5;
|
|
196
|
-
$gl-color-theme-red-300: #d59086;
|
|
197
|
-
$gl-color-theme-red-400: #c66e60;
|
|
198
|
-
$gl-color-theme-red-500: #ad4a3b;
|
|
199
|
-
$gl-color-theme-red-600: #a13322;
|
|
200
|
-
$gl-color-theme-red-700: #8f2110;
|
|
201
|
-
$gl-color-theme-red-800: #761405;
|
|
202
|
-
$gl-color-theme-red-900: #580d02;
|
|
203
|
-
$gl-color-theme-red-950: #380700;
|
|
204
|
-
$gl-color-theme-light-red-10: #fdf9f8;
|
|
205
|
-
$gl-color-theme-light-red-50: #faf2f1;
|
|
206
|
-
$gl-color-theme-light-red-100: #f6d9d5;
|
|
207
|
-
$gl-color-theme-light-red-200: #ebada2;
|
|
208
|
-
$gl-color-theme-light-red-300: #e07f6f;
|
|
209
|
-
$gl-color-theme-light-red-400: #d36250;
|
|
210
|
-
$gl-color-theme-light-red-500: #c24b38;
|
|
211
|
-
$gl-color-theme-light-red-600: #b53a26;
|
|
212
|
-
$gl-color-theme-light-red-700: #a02e1c;
|
|
213
|
-
$gl-color-theme-light-red-800: #8b2212;
|
|
214
|
-
$gl-color-theme-light-red-900: #751709;
|
|
215
|
-
$gl-color-theme-light-red-950: #5c1105;
|
|
216
|
-
$gl-color-brand-white: #fff;
|
|
217
|
-
$gl-color-brand-charcoal: #171321;
|
|
218
|
-
$gl-color-brand-orange-01g: #ffd1bf;
|
|
219
|
-
$gl-color-brand-orange-01p: #fca326;
|
|
220
|
-
$gl-color-brand-orange-02p: #fc6d26;
|
|
221
|
-
$gl-color-brand-orange-03p: #e24329;
|
|
222
|
-
$gl-color-brand-purple-01g: #ceb3ef;
|
|
223
|
-
$gl-color-brand-purple-01p: #a989f5;
|
|
224
|
-
$gl-color-brand-purple-02p: #7759c2;
|
|
225
|
-
$gl-color-brand-gray-01: #d1d0d3;
|
|
226
|
-
$gl-color-brand-gray-02: #a2a1a6;
|
|
227
|
-
$gl-color-brand-gray-03: #74717a;
|
|
228
|
-
$gl-color-brand-gray-04: #45424d;
|
|
229
|
-
$gl-color-brand-gray-05: #2b2838;
|
|
230
|
-
$gl-color-brand-pink-01g: #ffb9c9;
|
|
231
|
-
$gl-font-family-regular: var(--default-regular-font, 'GitLab Sans'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',Ubuntu,Cantarell,'Helvetica Neue',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';
|
|
232
|
-
$gl-font-family-monospace: var(--default-mono-font, 'GitLab Mono'),'JetBrains Mono',Menlo,'DejaVu Sans Mono','Liberation Mono',Consolas,'Ubuntu Mono','Courier New','andale mono','lucida console',monospace;
|
|
233
|
-
$gl-font-size-100: 0.75rem; // Used for meta text and small labels.
|
|
234
|
-
$gl-font-size-200: 0.8125rem; // Used for level 6 headings.
|
|
235
|
-
$gl-font-size-300: 0.875rem; // Used for level 5 headings, body text, input labels, and help text.
|
|
236
|
-
$gl-font-size-400: 1rem; // Used for level 4 headings, large body text.
|
|
237
|
-
$gl-font-size-500: clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem); // Used for responsive level 3 headings.
|
|
238
|
-
$gl-font-size-600: clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem); // Used for responsive level 2 headings.
|
|
239
|
-
$gl-font-size-700: clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem); // Used for responsive level 1 headings
|
|
240
|
-
$gl-font-size-800: clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem); // Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.
|
|
241
|
-
$gl-font-size-xs: 0.625rem;
|
|
242
|
-
$gl-font-size-100-fixed: 0.75rem; // Used for meta text and small labels.
|
|
243
|
-
$gl-font-size-200-fixed: 0.8125rem; // Used for level 6 headings.
|
|
244
|
-
$gl-font-size-300-fixed: 0.875rem; // Used for level 5 headings, body text, input labels, and help text.
|
|
245
|
-
$gl-font-size-400-fixed: 1rem; // Used for level 4 headings, large body text.
|
|
246
|
-
$gl-font-size-500-fixed: 1.125rem; // Used for level 3 headings.
|
|
247
|
-
$gl-font-size-600-fixed: 1.3125rem; // Used for level 2 headings.
|
|
248
|
-
$gl-font-size-700-fixed: 1.5rem; // Used for level 1 headings
|
|
249
|
-
$gl-font-size-800-fixed: 1.75rem; // Used for a display option that can be applied to a level 1 heading to increase its prominence.
|
|
250
|
-
$gl-font-weight-100: 100;
|
|
251
|
-
$gl-font-weight-300: 300;
|
|
252
|
-
$gl-font-weight-normal: 400;
|
|
253
|
-
$gl-font-weight-semibold: 500;
|
|
254
|
-
$gl-font-weight-bold: 600;
|
|
255
|
-
$gl-line-height-12: 0.75rem;
|
|
256
|
-
$gl-line-height-16: 1rem;
|
|
257
|
-
$gl-line-height-20: 1.25rem;
|
|
258
|
-
$gl-line-height-24: 1.5rem;
|
|
259
|
-
$gl-line-height-28: 1.75rem;
|
|
260
|
-
$gl-line-height-32: 2rem;
|
|
261
|
-
$gl-line-height-36: 2.25rem;
|
|
262
|
-
$gl-line-height-42: 2.625rem;
|
|
263
|
-
$gl-line-height-44: 2.75rem;
|
|
264
|
-
$gl-line-height-52: 3.25rem;
|
|
265
|
-
$gl-opacity-0: 0;
|
|
266
|
-
$gl-opacity-1: .1;
|
|
267
|
-
$gl-opacity-2: .2;
|
|
268
|
-
$gl-opacity-3: .3;
|
|
269
|
-
$gl-opacity-4: .4;
|
|
270
|
-
$gl-opacity-5: .5;
|
|
271
|
-
$gl-opacity-6: .6;
|
|
272
|
-
$gl-opacity-7: .7;
|
|
273
|
-
$gl-opacity-8: .8;
|
|
274
|
-
$gl-opacity-9: .9;
|
|
275
|
-
$gl-opacity-10: 1;
|
|
276
|
-
$gl-spacing-scale-0: 0;
|
|
277
|
-
$gl-spacing-scale-1: 0.125rem;
|
|
278
|
-
$gl-spacing-scale-2: 0.25rem;
|
|
279
|
-
$gl-spacing-scale-3: 0.5rem;
|
|
280
|
-
$gl-spacing-scale-4: 0.75rem;
|
|
281
|
-
$gl-spacing-scale-5: 1rem;
|
|
282
|
-
$gl-spacing-scale-6: 1.5rem;
|
|
283
|
-
$gl-spacing-scale-7: 2rem;
|
|
284
|
-
$gl-spacing-scale-8: 2.5rem;
|
|
285
|
-
$gl-spacing-scale-9: 3rem;
|
|
286
|
-
$gl-spacing-scale-10: 3.5rem;
|
|
287
|
-
$gl-spacing-scale-11: 4rem;
|
|
288
|
-
$gl-spacing-scale-12: 5rem;
|
|
289
|
-
$gl-spacing-scale-13: 6rem;
|
|
290
|
-
$gl-spacing-scale-15: 7.5rem;
|
|
291
|
-
$gl-spacing-scale-18: 9rem;
|
|
292
|
-
$gl-spacing-scale-20: 10rem;
|
|
293
|
-
$gl-spacing-scale-26: 13rem;
|
|
294
|
-
$gl-spacing-scale-28: 14rem;
|
|
295
|
-
$gl-spacing-scale-30: 15rem;
|
|
296
|
-
$gl-spacing-scale-31: 15.5rem;
|
|
297
|
-
$gl-spacing-scale-33: 16.5rem;
|
|
298
|
-
$gl-spacing-scale-34: 17rem;
|
|
299
|
-
$gl-spacing-scale-37: 18.5rem;
|
|
300
|
-
$gl-spacing-scale-48: 24rem;
|
|
301
|
-
$gl-spacing-scale-62: 31rem;
|
|
302
|
-
$gl-spacing-scale-75: 37.5rem;
|
|
303
|
-
$gl-spacing-scale-80: 40rem;
|
|
304
|
-
$gl-spacing-scale-88: 44rem;
|
|
305
|
-
$gl-spacing-scale-px: 1px;
|
|
306
|
-
$gl-spacing-scale-2-5: 0.375rem;
|
|
307
|
-
$gl-spacing-scale-11-5: 4.5rem;
|
|
308
|
-
$gl-zindex-0: 0;
|
|
309
|
-
$gl-zindex-1: 1;
|
|
310
|
-
$gl-zindex-2: 2;
|
|
311
|
-
$gl-zindex-3: 3;
|
|
312
|
-
$gl-zindex-4: 4;
|
|
313
|
-
$gl-zindex-200: 200;
|
|
314
|
-
$gl-zindex-9999: 9999;
|
|
315
|
-
$gl-avatar-fallback-background-color-red: #fcb5aa3d; // Red background for avatar fallback with no particular meaning.
|
|
316
|
-
$gl-avatar-fallback-background-color-purple: #cbbbf23d; // Purple background for avatar fallback with no particular meaning.
|
|
317
|
-
$gl-avatar-fallback-background-color-blue: #9dc7f13d; // Blue background for avatar fallback with no particular meaning.
|
|
318
|
-
$gl-avatar-fallback-background-color-green: #91d4a83d; // Green background for avatar fallback with no particular meaning.
|
|
319
|
-
$gl-avatar-fallback-background-color-orange: #e9be743d; // Orange background for avatar fallback with no particular meaning.
|
|
320
|
-
$gl-avatar-fallback-background-color-neutral: #bfbfc33d; // Neutral background for avatar fallback with no particular meaning.
|
|
321
|
-
$gl-chart-threshold-area-color: rgba(221,43,14,0.1); // Used in charts to delineate a threshold area in a chart.
|
|
322
|
-
$gl-illustration-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail.
|
|
323
|
-
$gl-illustration-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail.
|
|
324
|
-
$gl-illustration-fill-color-default: #fff; // Default fill color for an element where specific meaning or emphasis is not required.
|
|
325
|
-
$gl-illustration-status-fill-color-neutral: #aea5d6; // Used as a fill to convey a concept which is neither positive or negative.
|
|
326
|
-
$gl-illustration-status-fill-color-success: #6fdac9; // Used as a fill to convey a success or active concept, has a positive connotation.
|
|
327
|
-
$gl-illustration-status-fill-color-warning: #fca326; // Used as a fill to convey a caution or warning concept, has a slightly negative connotation.
|
|
328
|
-
$gl-illustration-status-fill-color-danger: #ff9d73; // Used as a fill to convey a critical or danger concept, has a negative connotation.
|
|
329
|
-
$gl-illustration-accent-stroke-color-orange: #ff9d73; // Used for orange accent stroke detail on an object or attention-drawing element.
|
|
330
|
-
$gl-illustration-accent-stroke-color-teal: #6fdac9; // Used for teal accent stroke detail on an object or attention-drawing element.
|
|
331
|
-
$gl-illustration-accent-stroke-color-strong: #aea5d6; // Used for dark accent stroke detail on an object or attention-drawing element.
|
|
332
|
-
$gl-illustration-accent-fill-color-subtle: #d0c5e2; // Used to add depth to a secondary element and supporting surface.
|
|
333
|
-
$gl-illustration-accent-fill-color-strong: #aea5d6; // Used for an element requiring visual emphasis without competing with primary content or status indicators.
|
|
334
|
-
$gl-illustration-accent-fill-color-orange: #ff9d73; // Used to add orange to a secondary element and supporting surface.
|
|
335
|
-
$gl-illustration-accent-fill-color-teal: #6fdac9; // Used to add teal to a secondary element and supporting surface.
|
|
336
|
-
$gl-illustration-base-fill-color: #e7e4f2; // Used for the consistent background shape present across all illustrations. Provides a unified foundation that visually grounds each illustration while maintaining system cohesion.
|
|
337
|
-
$gl-illustration-isometric-stroke-color-default: #171321; // Default stroke color to define shape and provide essential detail in isometric illustration.
|
|
338
|
-
$gl-illustration-isometric-stroke-width-default: 2; // Default stroke width to define shape and provide essential detail in isometric illustration.
|
|
339
|
-
$gl-illustration-isometric-glyph-top-fill-color: #c5f4ec; // Used for the top face of isometric text and number elements.
|
|
340
|
-
$gl-illustration-isometric-glyph-front-fill-color: #fff; // Used for the front face of isometric text and number elements.
|
|
341
|
-
$gl-illustration-isometric-glyph-side-fill-color: #6fdac9; // Used for the side face of isometric text and number elements.
|
|
342
|
-
$gl-illustration-isometric-glyph-shadow-fill-color: #10b1b1; // Used for the shadow of isometric text and number elements.
|
|
343
|
-
$gl-illustration-isometric-object-top-fill-color: #ff9d73; // Used for the top face of an isometric object or symbol.
|
|
344
|
-
$gl-illustration-isometric-object-front-fill-color: #ffc2a8; // Used for the front face of an isometric object or symbol.
|
|
345
|
-
$gl-illustration-isometric-object-side-fill-color: #ff7b42; // Used for the side face of an isometric object or symbol.
|
|
346
|
-
$gl-illustration-isometric-object-highlight-fill-color: #fff; // Used for the face of an isometric object or symbol that requires maximum distinction from other elements.
|
|
347
|
-
$gl-illustration-isometric-object-shadow-fill-color: #e24329; // Used for the shadow of an isometric object or symbol.
|
|
348
|
-
$gl-illustration-isometric-accent-top-fill-color: #45424d; // Used for the top face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
|
|
349
|
-
$gl-illustration-isometric-accent-front-fill-color: #74717a; // Used for the front face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
|
|
350
|
-
$gl-illustration-isometric-accent-side-fill-color: #2b2838; // Used for the side face of a supporting isometric element. Provides subtle dimensional variation without competing with primary content.
|
|
351
|
-
$gl-illustration-isometric-base-top-fill-color: #e7e4f2; // Used for the top surface of an isometric base platform.
|
|
352
|
-
$gl-illustration-isometric-base-front-fill-color: #d5d0e8; // Used for the front face of an isometric base platform.
|
|
353
|
-
$gl-illustration-isometric-base-side-fill-color: #aea5d6; // Used for the side face of an isometric base platform.
|
|
354
|
-
$data-viz-green-50: #ddfab7 !default;
|
|
355
|
-
$data-viz-green-100: #c6ed94 !default;
|
|
356
|
-
$data-viz-green-200: #b0d97b !default;
|
|
357
|
-
$data-viz-green-300: #94c25e !default;
|
|
358
|
-
$data-viz-green-400: #81ac41 !default;
|
|
359
|
-
$data-viz-green-500: #619025 !default;
|
|
360
|
-
$data-viz-green-600: #4e7f0e !default;
|
|
361
|
-
$data-viz-green-700: #366800 !default;
|
|
362
|
-
$data-viz-green-800: #275600 !default;
|
|
363
|
-
$data-viz-green-900: #1a4500 !default;
|
|
364
|
-
$data-viz-green-950: #133a03 !default;
|
|
365
|
-
$data-viz-aqua-50: #b5fefd !default;
|
|
366
|
-
$data-viz-aqua-100: #93f2ef !default;
|
|
367
|
-
$data-viz-aqua-200: #5edee3 !default;
|
|
368
|
-
$data-viz-aqua-300: #32c5d2 !default;
|
|
369
|
-
$data-viz-aqua-400: #00acc4 !default;
|
|
370
|
-
$data-viz-aqua-500: #0090b1 !default;
|
|
371
|
-
$data-viz-aqua-600: #007b9b !default;
|
|
372
|
-
$data-viz-aqua-700: #006381 !default;
|
|
373
|
-
$data-viz-aqua-800: #00516c !default;
|
|
374
|
-
$data-viz-aqua-900: #004059 !default;
|
|
375
|
-
$data-viz-aqua-950: #00344b !default;
|
|
376
|
-
$data-viz-blue-50: #e9ebff !default;
|
|
377
|
-
$data-viz-blue-100: #d2dcff !default;
|
|
378
|
-
$data-viz-blue-200: #b7c6ff !default;
|
|
379
|
-
$data-viz-blue-300: #97acff !default;
|
|
380
|
-
$data-viz-blue-400: #7992f5 !default;
|
|
381
|
-
$data-viz-blue-500: #617ae2 !default;
|
|
382
|
-
$data-viz-blue-600: #4e65cd !default;
|
|
383
|
-
$data-viz-blue-700: #3f51ae !default;
|
|
384
|
-
$data-viz-blue-800: #374291 !default;
|
|
385
|
-
$data-viz-blue-900: #303470 !default;
|
|
386
|
-
$data-viz-blue-950: #2a2b59 !default;
|
|
387
|
-
$data-viz-magenta-50: #ffe3eb !default;
|
|
388
|
-
$data-viz-magenta-100: #ffccdb !default;
|
|
389
|
-
$data-viz-magenta-200: #fcacc5 !default;
|
|
390
|
-
$data-viz-magenta-300: #f88aaf !default;
|
|
391
|
-
$data-viz-magenta-400: #e86e9a !default;
|
|
392
|
-
$data-viz-magenta-500: #cf4d81 !default;
|
|
393
|
-
$data-viz-magenta-600: #b93d71 !default;
|
|
394
|
-
$data-viz-magenta-700: #9a2e5d !default;
|
|
395
|
-
$data-viz-magenta-800: #7c214f !default;
|
|
396
|
-
$data-viz-magenta-900: #661e3a !default;
|
|
397
|
-
$data-viz-magenta-950: #541d31 !default;
|
|
398
|
-
$data-viz-orange-50: #fae8d1 !default;
|
|
399
|
-
$data-viz-orange-100: #f5d6b3 !default;
|
|
400
|
-
$data-viz-orange-200: #eebd8c !default;
|
|
401
|
-
$data-viz-orange-300: #e99b60 !default;
|
|
402
|
-
$data-viz-orange-400: #e07e41 !default;
|
|
403
|
-
$data-viz-orange-500: #c95d2e !default;
|
|
404
|
-
$data-viz-orange-600: #b14f18 !default;
|
|
405
|
-
$data-viz-orange-700: #92430a !default;
|
|
406
|
-
$data-viz-orange-800: #6f3500 !default;
|
|
407
|
-
$data-viz-orange-900: #5e2f05 !default;
|
|
408
|
-
$data-viz-orange-950: #4b2707 !default;
|
|
409
|
-
$theme-indigo-10: #f8f8ff !default;
|
|
410
|
-
$theme-indigo-50: #f1f1ff !default;
|
|
411
|
-
$theme-indigo-100: #dbdbf8 !default;
|
|
412
|
-
$theme-indigo-200: #c7c7f2 !default;
|
|
413
|
-
$theme-indigo-300: #a2a2e6 !default;
|
|
414
|
-
$theme-indigo-400: #8181d7 !default;
|
|
415
|
-
$theme-indigo-500: #6666c4 !default;
|
|
416
|
-
$theme-indigo-600: #5252b5 !default;
|
|
417
|
-
$theme-indigo-700: #41419f !default;
|
|
418
|
-
$theme-indigo-800: #303083 !default;
|
|
419
|
-
$theme-indigo-900: #222261 !default;
|
|
420
|
-
$theme-indigo-950: #14143d !default;
|
|
421
|
-
$theme-blue-10: #e6ecf0 !default;
|
|
422
|
-
$theme-blue-50: #cdd8e3 !default;
|
|
423
|
-
$theme-blue-100: #b9cadc !default;
|
|
424
|
-
$theme-blue-200: #a6bdd5 !default;
|
|
425
|
-
$theme-blue-300: #81a5c9 !default;
|
|
426
|
-
$theme-blue-400: #628eb9 !default;
|
|
427
|
-
$theme-blue-500: #4977a5 !default;
|
|
428
|
-
$theme-blue-600: #346596 !default;
|
|
429
|
-
$theme-blue-700: #235180 !default;
|
|
430
|
-
$theme-blue-800: #153c63 !default;
|
|
431
|
-
$theme-blue-900: #0b2640 !default;
|
|
432
|
-
$theme-blue-950: #04101c !default;
|
|
433
|
-
$theme-light-blue-10: #eef3f7 !default;
|
|
434
|
-
$theme-light-blue-50: #dde6ee !default;
|
|
435
|
-
$theme-light-blue-100: #c1d4e6 !default;
|
|
436
|
-
$theme-light-blue-200: #a0bedc !default;
|
|
437
|
-
$theme-light-blue-300: #74a3d3 !default;
|
|
438
|
-
$theme-light-blue-400: #4f8bc7 !default;
|
|
439
|
-
$theme-light-blue-500: #3476b9 !default;
|
|
440
|
-
$theme-light-blue-600: #2268ae !default;
|
|
441
|
-
$theme-light-blue-700: #145aa1 !default;
|
|
442
|
-
$theme-light-blue-800: #0e4d8d !default;
|
|
443
|
-
$theme-light-blue-900: #0c4277 !default;
|
|
444
|
-
$theme-light-blue-950: #0a3764 !default;
|
|
445
|
-
$theme-green-10: #eef4ef !default;
|
|
446
|
-
$theme-green-50: #dde9de !default;
|
|
447
|
-
$theme-green-100: #b1d6b5 !default;
|
|
448
|
-
$theme-green-200: #8cc497 !default;
|
|
449
|
-
$theme-green-300: #69af7d !default;
|
|
450
|
-
$theme-green-400: #499767 !default;
|
|
451
|
-
$theme-green-500: #308258 !default;
|
|
452
|
-
$theme-green-600: #25744c !default;
|
|
453
|
-
$theme-green-700: #1b653f !default;
|
|
454
|
-
$theme-green-800: #155635 !default;
|
|
455
|
-
$theme-green-900: #0e4328 !default;
|
|
456
|
-
$theme-green-950: #052e19 !default;
|
|
457
|
-
$theme-red-10: #faf4f3 !default;
|
|
458
|
-
$theme-red-50: #f4e9e7 !default;
|
|
459
|
-
$theme-red-100: #ecd3d0 !default;
|
|
460
|
-
$theme-red-200: #e3bab5 !default;
|
|
461
|
-
$theme-red-300: #d59086 !default;
|
|
462
|
-
$theme-red-400: #c66e60 !default;
|
|
463
|
-
$theme-red-500: #ad4a3b !default;
|
|
464
|
-
$theme-red-600: #a13322 !default;
|
|
465
|
-
$theme-red-700: #8f2110 !default;
|
|
466
|
-
$theme-red-800: #761405 !default;
|
|
467
|
-
$theme-red-900: #580d02 !default;
|
|
468
|
-
$theme-red-950: #380700 !default;
|
|
469
|
-
$theme-light-red-10: #fdf9f8 !default;
|
|
470
|
-
$theme-light-red-50: #faf2f1 !default;
|
|
471
|
-
$theme-light-red-100: #f6d9d5 !default;
|
|
472
|
-
$theme-light-red-200: #ebada2 !default;
|
|
473
|
-
$theme-light-red-300: #e07f6f !default;
|
|
474
|
-
$theme-light-red-400: #d36250 !default;
|
|
475
|
-
$theme-light-red-500: #c24b38 !default;
|
|
476
|
-
$theme-light-red-600: #b53a26 !default;
|
|
477
|
-
$theme-light-red-700: #a02e1c !default;
|
|
478
|
-
$theme-light-red-800: #8b2212 !default;
|
|
479
|
-
$theme-light-red-900: #751709 !default;
|
|
480
|
-
$theme-light-red-950: #5c1105 !default;
|
|
481
|
-
$black: #050506 !default;
|
|
482
|
-
$white: #fff !default;
|
|
483
|
-
$blue-50: #e9f3fc !default;
|
|
484
|
-
$blue-100: #cbe2f9 !default;
|
|
485
|
-
$blue-200: #9dc7f1 !default;
|
|
486
|
-
$blue-300: #63a6e9 !default;
|
|
487
|
-
$blue-400: #428fdc !default;
|
|
488
|
-
$blue-500: #1f75cb !default;
|
|
489
|
-
$blue-600: #2f68b4 !default;
|
|
490
|
-
$blue-700: #2f5ca0 !default;
|
|
491
|
-
$blue-800: #284779 !default;
|
|
492
|
-
$blue-900: #213454 !default;
|
|
493
|
-
$blue-950: #1d283e !default;
|
|
494
|
-
$gray-10: #fbfafd !default;
|
|
495
|
-
$gray-50: #ececef !default;
|
|
496
|
-
$gray-100: #dcdcde !default;
|
|
497
|
-
$gray-200: #bfbfc3 !default;
|
|
498
|
-
$gray-300: #a4a3a8 !default;
|
|
499
|
-
$gray-400: #89888d !default;
|
|
500
|
-
$gray-500: #737278 !default;
|
|
501
|
-
$gray-600: #626168 !default;
|
|
502
|
-
$gray-700: #4c4b51 !default;
|
|
503
|
-
$gray-800: #3a383f !default;
|
|
504
|
-
$gray-900: #28272d !default;
|
|
505
|
-
$gray-950: #18171d !default;
|
|
506
|
-
$green-50: #ecf4ee !default;
|
|
507
|
-
$green-100: #c3e6cd !default;
|
|
508
|
-
$green-200: #91d4a8 !default;
|
|
509
|
-
$green-300: #52b87a !default;
|
|
510
|
-
$green-400: #2da160 !default;
|
|
511
|
-
$green-500: #108548 !default;
|
|
512
|
-
$green-600: #2f7549 !default;
|
|
513
|
-
$green-700: #306440 !default;
|
|
514
|
-
$green-800: #225131 !default;
|
|
515
|
-
$green-900: #1e3e28 !default;
|
|
516
|
-
$green-950: #17291c !default;
|
|
517
|
-
$orange-50: #fdf1dd !default;
|
|
518
|
-
$orange-100: #f5d9a8 !default;
|
|
519
|
-
$orange-200: #e9be74 !default;
|
|
520
|
-
$orange-300: #d99530 !default;
|
|
521
|
-
$orange-400: #c17d10 !default;
|
|
522
|
-
$orange-500: #ab6100 !default;
|
|
523
|
-
$orange-600: #995715 !default;
|
|
524
|
-
$orange-700: #894b16 !default;
|
|
525
|
-
$orange-800: #693c14 !default;
|
|
526
|
-
$orange-900: #532e16 !default;
|
|
527
|
-
$orange-950: #382315 !default;
|
|
528
|
-
$purple-50: #f4f0ff !default;
|
|
529
|
-
$purple-100: #e1d8f9 !default;
|
|
530
|
-
$purple-200: #cbbbf2 !default;
|
|
531
|
-
$purple-300: #ac93e6 !default;
|
|
532
|
-
$purple-400: #9475db !default;
|
|
533
|
-
$purple-500: #7b58cf !default;
|
|
534
|
-
$purple-600: #6a4fb4 !default;
|
|
535
|
-
$purple-700: #5c47a6 !default;
|
|
536
|
-
$purple-800: #493c83 !default;
|
|
537
|
-
$purple-900: #342d59 !default;
|
|
538
|
-
$purple-950: #27243e !default;
|
|
539
|
-
$red-50: #fcf1ef !default;
|
|
540
|
-
$red-100: #fdd4cd !default;
|
|
541
|
-
$red-200: #fcb5aa !default;
|
|
542
|
-
$red-300: #f57f6c !default;
|
|
543
|
-
$red-400: #ec5941 !default;
|
|
544
|
-
$red-500: #dd2b0e !default;
|
|
545
|
-
$red-600: #c02f12 !default;
|
|
546
|
-
$red-700: #a32c12 !default;
|
|
547
|
-
$red-800: #812713 !default;
|
|
548
|
-
$red-900: #582014 !default;
|
|
549
|
-
$red-950: #3e1a14 !default;
|
|
550
|
-
$brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
|
|
551
|
-
$brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
|
|
552
|
-
$brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
|
|
553
|
-
$brand-orange-03: #e24329 !default; // Use color.brand-orange.03p instead.
|
|
554
|
-
$brand-purple-01: #a989f5 !default; // Use color.purple.01p instead.
|
|
555
|
-
$brand-purple-02: #7759c2 !default; // Use color.purple.02p instead.
|
|
556
|
-
$brand-gray-01: #d1d0d3 !default; // Use color.brand-gray.01 instead.
|
|
557
|
-
$brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
|
|
558
|
-
$brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
|
|
559
|
-
$brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
|
|
560
|
-
$brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
|
|
561
|
-
$t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
|
|
562
|
-
$t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
|
|
563
|
-
$t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
|
|
564
|
-
$t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
|
|
565
|
-
$t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
|
|
566
|
-
$t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
|
|
567
|
-
$t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
|
|
568
|
-
$t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
|
|
569
|
-
$t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
|
|
570
|
-
$t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 instead.
|
|
571
|
-
$t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
|
|
572
|
-
$t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
|
|
573
|
-
$t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
|
|
574
|
-
$gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
|
|
575
|
-
$gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
|
|
576
|
-
$gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for the background of a neutral action in the active state.
|
|
577
|
-
$gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); // Used for the background of a confirm (positive) action in the default state.
|
|
578
|
-
$gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); // Used for the background of a confirm (positive) action in the hover state.
|
|
579
|
-
$gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); // Used for the background of a confirm (positive) action in the active state.
|
|
580
|
-
$gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); // Used for the background of a danger (destructive) action in the default state.
|
|
581
|
-
$gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); // Used for the background of a danger (destructive) action in the hover state.
|
|
582
|
-
$gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); // Used for the background of a danger (destructive) action in the active state.
|
|
583
|
-
$gl-text-primary: #28272d; // Use text.color.default instead.
|
|
584
|
-
$gl-text-secondary: #737278; // Use text.color.subtle instead.
|
|
585
|
-
$gl-text-tertiary: #89888d; // Use text.color.disabled instead.
|
|
586
|
-
$gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
|
|
587
|
-
$gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
|
|
588
|
-
$gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
|
|
589
|
-
$gl-border-color-strong: $gl-color-neutral-200; // Used for a distinct border that emphasizes an edge or boundaries.
|
|
590
|
-
$gl-border-radius-none: $gl-spacing-scale-0;
|
|
591
|
-
$gl-border-radius-xs: $gl-spacing-scale-px;
|
|
592
|
-
$gl-border-radius-sm: $gl-spacing-scale-1;
|
|
593
|
-
$gl-border-radius-md: $gl-spacing-scale-2;
|
|
594
|
-
$gl-border-radius-lg: $gl-spacing-scale-3;
|
|
595
|
-
$gl-border-radius-xl: $gl-spacing-scale-4;
|
|
596
|
-
$gl-border-radius-2xl: $gl-spacing-scale-5;
|
|
597
|
-
$gl-border-radius-3xl: $gl-spacing-scale-6;
|
|
598
|
-
$gl-font-size-sm: $gl-font-size-100;
|
|
599
|
-
$gl-font-size-md: $gl-font-size-300;
|
|
600
|
-
$gl-font-size-lg: $gl-font-size-400;
|
|
601
|
-
$gl-shadow-color-default: $gl-color-alpha-dark-16; // Used for the default shadow color.
|
|
602
|
-
$gl-alert-neutral-border-top-color: $gl-color-alpha-0; // Used for the border center color of a neutral alert.
|
|
603
|
-
$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
|
|
604
|
-
$gl-alert-info-border-top-color: $gl-color-alpha-0; // Used for the border color of an info alert.
|
|
605
|
-
$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
|
|
606
|
-
$gl-alert-success-border-top-color: $gl-color-alpha-0; // Used for the border color of a success alert.
|
|
607
|
-
$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
|
|
608
|
-
$gl-alert-warning-border-top-color: $gl-color-alpha-0; // Used for the border color of a warning alert.
|
|
609
|
-
$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
|
|
610
|
-
$gl-alert-danger-border-top-color: $gl-color-alpha-0; // Used for the border color of a danger alert.
|
|
611
|
-
$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
|
|
612
|
-
$gl-avatar-border-color-default: $gl-color-alpha-dark-8; // Used to define the edge of an avatar.
|
|
613
|
-
$gl-avatar-border-color-hover: $gl-color-alpha-dark-24; // Used to increase the edge definition of an avatar in the hover state.
|
|
614
|
-
$gl-avatar-fallback-text-color-red: $gl-color-red-800; // Red text color for avatar fallback with no particular meaning.
|
|
615
|
-
$gl-avatar-fallback-text-color-purple: $gl-color-purple-800; // Purple text color for avatar fallback with no particular meaning.
|
|
616
|
-
$gl-avatar-fallback-text-color-blue: $gl-color-blue-800; // Blue text color for avatar fallback with no particular meaning.
|
|
617
|
-
$gl-avatar-fallback-text-color-green: $gl-color-green-800; // Green text color for avatar fallback with no particular meaning.
|
|
618
|
-
$gl-avatar-fallback-text-color-orange: $gl-color-orange-800; // Orange text color for avatar fallback with no particular meaning.
|
|
619
|
-
$gl-avatar-fallback-text-color-neutral: $gl-color-neutral-800; // Neutral text color for avatar fallback with no particular meaning.
|
|
620
|
-
$gl-badge-muted-background-color-default: $gl-color-neutral-50; // Used for the background of a muted badge when static or the default state when linked.
|
|
621
|
-
$gl-badge-muted-background-color-active: $gl-color-neutral-100; // Used for the background of a muted badge in the active state.
|
|
622
|
-
$gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
|
|
623
|
-
$gl-badge-muted-border-color-hover: $gl-color-neutral-200; // Used for the border of a muted badge in the hover state.
|
|
624
|
-
$gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
|
|
625
|
-
$gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
|
|
626
|
-
$gl-badge-muted-text-color-default: $gl-color-neutral-600; // Used for the text of a muted badge when static or the default state when linked.
|
|
627
|
-
$gl-badge-muted-text-color-hover: $gl-color-neutral-700; // Used for the text of a muted badge in the hover state.
|
|
628
|
-
$gl-badge-muted-text-color-active: $gl-color-neutral-800; // Used for the text of a muted badge in the active state.
|
|
629
|
-
$gl-badge-muted-icon-color-default: $gl-color-neutral-500; // Used for the icon of a muted badge when static or the default state when linked.
|
|
630
|
-
$gl-badge-muted-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a muted badge in the hover state.
|
|
631
|
-
$gl-badge-muted-icon-color-active: $gl-color-neutral-700; // Used for the icon of a muted badge in the active state.
|
|
632
|
-
$gl-badge-neutral-background-color-default: $gl-color-neutral-100; // Used for the background of a neutral badge when static or the default state when linked.
|
|
633
|
-
$gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
|
|
634
|
-
$gl-badge-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral badge when static or the default state when linked.
|
|
635
|
-
$gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
|
|
636
|
-
$gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
|
|
637
|
-
$gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
|
|
638
|
-
$gl-badge-neutral-text-color-default: $gl-color-neutral-700; // Used for the text of a neutral badge when static or the default state when linked.
|
|
639
|
-
$gl-badge-neutral-text-color-hover: $gl-color-neutral-800; // Used for the text of a neutral badge in the hover state.
|
|
640
|
-
$gl-badge-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral badge in the active state.
|
|
641
|
-
$gl-badge-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of a neutral badge when static or the default state when linked.
|
|
642
|
-
$gl-badge-neutral-icon-color-hover: $gl-color-neutral-600; // Used for the icon of a neutral badge in the hover state.
|
|
643
|
-
$gl-badge-neutral-icon-color-active: $gl-color-neutral-700; // Used for the icon of a neutral badge in the active state.
|
|
644
|
-
$gl-badge-info-background-color-default: $gl-color-blue-100; // Used for the background of an informational badge when static or the default state when linked.
|
|
645
|
-
$gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
|
|
646
|
-
$gl-badge-info-border-color-default: $gl-color-alpha-0; // Used for the border of an informational badge when static or the default state when linked.
|
|
647
|
-
$gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
|
|
648
|
-
$gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
|
|
649
|
-
$gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
|
|
650
|
-
$gl-badge-info-text-color-default: $gl-color-blue-700; // Used for the text of an informational badge when static or the default state when linked.
|
|
651
|
-
$gl-badge-info-text-color-hover: $gl-color-blue-800; // Used for the text of an informational badge in the hover state.
|
|
652
|
-
$gl-badge-info-text-color-active: $gl-color-blue-900; // Used for the text of an informational badge in the active state.
|
|
653
|
-
$gl-badge-info-icon-color-default: $gl-color-blue-500; // Used for the icon of an informational badge when static or the default state when linked.
|
|
654
|
-
$gl-badge-info-icon-color-hover: $gl-color-blue-600; // Used for the icon of an informational badge in the hover state.
|
|
655
|
-
$gl-badge-info-icon-color-active: $gl-color-blue-700; // Used for the icon of an informational badge in the active state.
|
|
656
|
-
$gl-badge-success-background-color-default: $gl-color-green-100; // Used for the background of a success badge when static or the default state when linked.
|
|
657
|
-
$gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
|
|
658
|
-
$gl-badge-success-border-color-default: $gl-color-alpha-0; // Used for the border of a success badge when static or the default state when linked.
|
|
659
|
-
$gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
|
|
660
|
-
$gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
|
|
661
|
-
$gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
|
|
662
|
-
$gl-badge-success-text-color-default: $gl-color-green-700; // Used for the text of a success badge when static or the default state when linked.
|
|
663
|
-
$gl-badge-success-text-color-hover: $gl-color-green-800; // Used for the text of a success badge in the hover state.
|
|
664
|
-
$gl-badge-success-text-color-active: $gl-color-green-900; // Used for the text of a success badge in the active state.
|
|
665
|
-
$gl-badge-success-icon-color-default: $gl-color-green-500; // Used for the icon of a success badge when static or the default state when linked.
|
|
666
|
-
$gl-badge-success-icon-color-hover: $gl-color-green-600; // Used for the icon of a success badge in the hover state.
|
|
667
|
-
$gl-badge-success-icon-color-active: $gl-color-green-700; // Used for the icon of a success badge in the active state.
|
|
668
|
-
$gl-badge-warning-background-color-default: $gl-color-orange-100; // Used for the background of a warning badge when static or the default state when linked.
|
|
669
|
-
$gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
|
|
670
|
-
$gl-badge-warning-border-color-default: $gl-color-alpha-0; // Used for the border of a warning badge when static or the default state when linked.
|
|
671
|
-
$gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
|
|
672
|
-
$gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
|
|
673
|
-
$gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
|
|
674
|
-
$gl-badge-warning-text-color-default: $gl-color-orange-700; // Used for the text of a warning badge when static or the default state when linked.
|
|
675
|
-
$gl-badge-warning-text-color-hover: $gl-color-orange-800; // Used for the text of a warning badge in the hover state.
|
|
676
|
-
$gl-badge-warning-text-color-active: $gl-color-orange-900; // Used for the text of a warning badge in the active state.
|
|
677
|
-
$gl-badge-warning-icon-color-default: $gl-color-orange-500; // Used for the icon of a warning badge when static or the default state when linked.
|
|
678
|
-
$gl-badge-warning-icon-color-hover: $gl-color-orange-600; // Used for the icon of a warning badge in the hover state.
|
|
679
|
-
$gl-badge-warning-icon-color-active: $gl-color-orange-700; // Used for the icon of a warning badge in the active state.
|
|
680
|
-
$gl-badge-danger-background-color-default: $gl-color-red-100; // Used for the background of a danger badge when static or the default state when linked.
|
|
681
|
-
$gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
|
|
682
|
-
$gl-badge-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger badge when static or the default state when linked.
|
|
683
|
-
$gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
|
|
684
|
-
$gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
|
|
685
|
-
$gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
|
|
686
|
-
$gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger badge when static or the default state when linked.
|
|
687
|
-
$gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
|
|
688
|
-
$gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
|
|
689
|
-
$gl-badge-danger-icon-color-default: $gl-color-red-700; // Used for the icon of a danger badge when static or the default state when linked.
|
|
690
|
-
$gl-badge-danger-icon-color-hover: $gl-color-red-800; // Used for the icon of a danger badge in the hover state.
|
|
691
|
-
$gl-badge-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger badge in the active state.
|
|
692
|
-
$gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
|
|
693
|
-
$gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
|
|
694
|
-
$gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
|
|
695
|
-
$gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
|
|
696
|
-
$gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
|
|
697
|
-
$gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
|
|
698
|
-
$gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
|
|
699
|
-
$gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
|
|
700
|
-
$gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
|
|
701
|
-
$gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
|
|
702
|
-
$gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
|
|
703
|
-
$gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
|
|
704
|
-
$gl-banner-intro-border-color: $gl-color-blue-200; // Used for the border of an info banner.
|
|
705
|
-
$gl-banner-promo-background-color: $gl-color-purple-50; // Used for the background of a promo banner.
|
|
706
|
-
$gl-banner-promo-border-color: $gl-color-purple-200; // Used for the border of a promo banner.
|
|
707
|
-
$gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
|
|
708
|
-
$gl-broadcast-banner-background-color-blue: $gl-color-theme-blue-700; // Used for the background for the blue banner type.
|
|
709
|
-
$gl-broadcast-banner-background-color-dark: $gl-color-neutral-500; // Used for the background for the dark banner type.
|
|
710
|
-
$gl-broadcast-banner-background-color-green: $gl-color-theme-green-700; // Used for the background for the green banner type.
|
|
711
|
-
$gl-broadcast-banner-background-color-indigo: $gl-color-theme-indigo-700; // Used for the background for the indigo banner type.
|
|
712
|
-
$gl-broadcast-banner-background-color-light: $gl-color-neutral-50; // Used for the background for the light banner type.
|
|
713
|
-
$gl-broadcast-banner-background-color-lightblue: $gl-color-theme-blue-500; // Used for the background for the lightblue banner type.
|
|
714
|
-
$gl-broadcast-banner-background-color-lightgreen: $gl-color-theme-green-500; // Used for the background for the lightgreen banner type.
|
|
715
|
-
$gl-broadcast-banner-background-color-lightindigo: $gl-color-theme-indigo-500; // Used for the background for the lightindigo banner type.
|
|
716
|
-
$gl-broadcast-banner-background-color-lightred: $gl-color-theme-red-500; // Used for the background for the lightred banner type.
|
|
717
|
-
$gl-broadcast-banner-background-color-red: $gl-color-theme-red-700; // Used for the background for the red banner type.
|
|
718
|
-
$gl-broadcast-banner-border-color-blue: $gl-color-theme-blue-900; // Used for the border for the blue banner type.
|
|
719
|
-
$gl-broadcast-banner-border-color-dark: $gl-color-neutral-700; // Used for the border for the dark banner type.
|
|
720
|
-
$gl-broadcast-banner-border-color-green: $gl-color-theme-green-900; // Used for the border for the green banner type.
|
|
721
|
-
$gl-broadcast-banner-border-color-indigo: $gl-color-theme-indigo-900; // Used for the border for the indigo banner type.
|
|
722
|
-
$gl-broadcast-banner-border-color-light: $gl-color-neutral-100; // Used for the border for the light banner type.
|
|
723
|
-
$gl-broadcast-banner-border-color-lightblue: $gl-color-theme-blue-700; // Used for the border for the lightblue banner type.
|
|
724
|
-
$gl-broadcast-banner-border-color-lightgreen: $gl-color-theme-green-700; // Used for the border for the lightgreen banner type.
|
|
725
|
-
$gl-broadcast-banner-border-color-lightindigo: $gl-color-theme-indigo-700; // Used for the border for the lightindigo banner type.
|
|
726
|
-
$gl-broadcast-banner-border-color-lightred: $gl-color-theme-red-700; // Used for the border for the lightred banner type.
|
|
727
|
-
$gl-broadcast-banner-border-color-red: $gl-color-theme-red-900; // Used for the border for the red banner type.
|
|
728
|
-
$gl-broadcast-banner-icon-color-blue: $gl-color-neutral-0; // Used for the icon for the blue banner type.
|
|
729
|
-
$gl-broadcast-banner-icon-color-dark: $gl-color-neutral-0; // Used for the icon for the dark banner type.
|
|
730
|
-
$gl-broadcast-banner-icon-color-green: $gl-color-neutral-0; // Used for the icon for the green banner type.
|
|
731
|
-
$gl-broadcast-banner-icon-color-indigo: $gl-color-neutral-0; // Used for the icon for the indigo banner type.
|
|
732
|
-
$gl-broadcast-banner-icon-color-light: $gl-color-neutral-900; // Used for the icon for the light banner type.
|
|
733
|
-
$gl-broadcast-banner-icon-color-lightblue: $gl-color-neutral-0; // Used for the icon for the lightblue banner type.
|
|
734
|
-
$gl-broadcast-banner-icon-color-lightgreen: $gl-color-neutral-0; // Used for the icon for the lightgreen banner type.
|
|
735
|
-
$gl-broadcast-banner-icon-color-lightindigo: $gl-color-neutral-0; // Used for the icon for the lightindigo banner type.
|
|
736
|
-
$gl-broadcast-banner-icon-color-lightred: $gl-color-neutral-0; // Used for the icon for the lightred banner type.
|
|
737
|
-
$gl-broadcast-banner-icon-color-red: $gl-color-neutral-0; // Used for the icon for the red banner type.
|
|
738
|
-
$gl-broadcast-banner-text-color-blue: $gl-color-neutral-0; // Used for the text for the blue banner type.
|
|
739
|
-
$gl-broadcast-banner-text-color-dark: $gl-color-neutral-0; // Used for the text for the dark banner type.
|
|
740
|
-
$gl-broadcast-banner-text-color-green: $gl-color-neutral-0; // Used for the text for the green banner type.
|
|
741
|
-
$gl-broadcast-banner-text-color-indigo: $gl-color-neutral-0; // Used for the text for the indigo banner type.
|
|
742
|
-
$gl-broadcast-banner-text-color-light: $gl-color-neutral-900; // Used for the text for the light banner type.
|
|
743
|
-
$gl-broadcast-banner-text-color-lightblue: $gl-color-neutral-0; // Used for the text for the lightblue banner type.
|
|
744
|
-
$gl-broadcast-banner-text-color-lightgreen: $gl-color-neutral-0; // Used for the text for the lightgreen banner type.
|
|
745
|
-
$gl-broadcast-banner-text-color-lightindigo: $gl-color-neutral-0; // Used for the text for the lightindigo banner type.
|
|
746
|
-
$gl-broadcast-banner-text-color-lightred: $gl-color-neutral-0; // Used for the text for the lightred banner type.
|
|
747
|
-
$gl-broadcast-banner-text-color-red: $gl-color-neutral-0; // Used for the text for the red banner type.
|
|
748
|
-
$gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // Used for the foreground of a default primary button in the default state.
|
|
749
|
-
$gl-button-default-primary-background-color-default: $gl-color-neutral-0; // Used for the background of an default primary button in the default state.
|
|
750
|
-
$gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used for the background of an default primary button in the hover state.
|
|
751
|
-
$gl-button-default-primary-background-color-active: $gl-color-neutral-100; // Used for the background of an default primary button in the active state.
|
|
752
|
-
$gl-button-default-primary-border-color-default: $gl-color-neutral-200; // Used for the border of an default primary button in the default state.
|
|
753
|
-
$gl-button-default-primary-border-color-hover: $gl-color-neutral-400; // Used for the border of an default primary button in the hover state.
|
|
754
|
-
$gl-button-default-primary-border-color-active: $gl-color-neutral-600; // Used for the border of an default primary button in the active state.
|
|
755
|
-
$gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
|
|
756
|
-
$gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
|
|
757
|
-
$gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
|
|
758
|
-
$gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
|
|
759
|
-
$gl-button-confirm-primary-border-color-default: $gl-color-blue-600; // Used for the border of a confirm (positive) primary button in the default state.
|
|
760
|
-
$gl-button-confirm-primary-border-color-hover: $gl-color-blue-800; // Used for the border of a confirm (positive) primary button in the hover state.
|
|
761
|
-
$gl-button-confirm-primary-border-color-active: $gl-color-blue-900; // Used for the border of a confirm (positive) primary button in the active state.
|
|
762
|
-
$gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) button in the default state.
|
|
763
|
-
$gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) button in the hover state.
|
|
764
|
-
$gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) button in the active state.
|
|
765
|
-
$gl-button-confirm-secondary-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined confirm (positive) button in the default state.
|
|
766
|
-
$gl-button-confirm-secondary-background-color-hover: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) button in the hover state.
|
|
767
|
-
$gl-button-confirm-secondary-background-color-active: $gl-color-blue-100; // Used for the background of an outlined confirm (positive) button in the active state.
|
|
768
|
-
$gl-button-confirm-secondary-border-color-default: $gl-color-blue-500; // Used for the border of an outlined confirm (positive) button in the default state.
|
|
769
|
-
$gl-button-confirm-secondary-border-color-hover: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) button in the hover state.
|
|
770
|
-
$gl-button-confirm-secondary-border-color-active: $gl-color-blue-900; // Used for the border of an outlined confirm (positive) button in the active state.
|
|
771
|
-
$gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
|
|
772
|
-
$gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
|
|
773
|
-
$gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
|
|
774
|
-
$gl-button-danger-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a danger (destructive) primary button in the default state.
|
|
775
|
-
$gl-button-danger-primary-background-color-default: $gl-color-red-500; // Used for the background of a danger (destructive) primary button in the default state.
|
|
776
|
-
$gl-button-danger-primary-background-color-hover: $gl-color-red-600; // Used for the background of a danger (destructive) primary button in the hover state.
|
|
777
|
-
$gl-button-danger-primary-background-color-active: $gl-color-red-800; // Used for the background of a danger (destructive) primary button in the active state.
|
|
778
|
-
$gl-button-danger-primary-border-color-default: $gl-color-red-600; // Used for the border of a danger (destructive) primary button in the default state.
|
|
779
|
-
$gl-button-danger-primary-border-color-hover: $gl-color-red-800; // Used for the border of a danger (destructive) primary button in the hover state.
|
|
780
|
-
$gl-button-danger-primary-border-color-active: $gl-color-red-900; // Used for the border of a danger (destructive) primary button in the active state.
|
|
781
|
-
$gl-button-danger-secondary-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) button in the default state.
|
|
782
|
-
$gl-button-danger-secondary-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) button in the hover state.
|
|
783
|
-
$gl-button-danger-secondary-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) button in the active state.
|
|
784
|
-
$gl-button-danger-secondary-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) button in the default state.
|
|
785
|
-
$gl-button-danger-secondary-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) button in the hover state.
|
|
786
|
-
$gl-button-danger-secondary-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) button in the active state.
|
|
787
|
-
$gl-button-danger-secondary-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) button in the default state.
|
|
788
|
-
$gl-button-danger-secondary-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) button in the hover state.
|
|
789
|
-
$gl-button-danger-secondary-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) button in the active state.
|
|
790
|
-
$gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
|
|
791
|
-
$gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
|
|
792
|
-
$gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
|
|
793
|
-
$gl-button-dashed-border-color-default: $gl-color-neutral-400; // Used for the border of a dashed button in the default state.
|
|
794
|
-
$gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
|
|
795
|
-
$gl-button-selected-background-color-default: $gl-color-neutral-50; // Used for the background of a selected button in the default state.
|
|
796
|
-
$gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
|
|
797
|
-
$gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
|
|
798
|
-
$gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the border of a selected button in the active state.
|
|
799
|
-
$gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
|
|
800
|
-
$gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
|
|
801
|
-
$gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
|
|
802
|
-
$gl-button-count-background-color: $gl-color-alpha-dark-8; // Used for the background of a button count element.
|
|
803
|
-
$gl-chart-axis-line-color: $gl-color-neutral-200; // Used in charts for axis line color.
|
|
804
|
-
$gl-chart-threshold-line-color: $gl-color-red-500; // Used in charts to divide a threshold area in a chart from other data.
|
|
805
|
-
$gl-chart-zoom-filler-color: $gl-color-alpha-dark-8; // Used in charts for the overlay color when zooming in on a specific area of data.
|
|
806
|
-
$gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
|
|
807
|
-
$gl-dropdown-option-background-color-unselected-default: $gl-action-neutral-background-color-default; // Used for the background of an unselected dropdown option in the default state.
|
|
808
|
-
$gl-dropdown-option-background-color-unselected-hover: $gl-action-neutral-background-color-hover; // Used for the background of an unselected dropdown option in the hover state.
|
|
809
|
-
$gl-dropdown-option-background-color-unselected-active: $gl-action-neutral-background-color-active; // Used for the background of an unselected dropdown option in the active state.
|
|
810
|
-
$gl-dropdown-option-background-color-selected-default: $gl-color-neutral-50; // Used for the background of a selected dropdown option in the default state.
|
|
811
|
-
$gl-dropdown-option-background-color-selected-hover: $gl-color-neutral-100; // Used for the background of a selected dropdown option in the hover state.
|
|
812
|
-
$gl-dropdown-option-background-color-selected-active: $gl-color-neutral-200; // Used for the background of a selected dropdown option in the active state.
|
|
813
|
-
$gl-dropdown-search-background-color: $gl-color-alpha-dark-2; // Used for the background of a search input in a dropdown listbox.
|
|
814
|
-
$gl-filtered-search-token-type-background-color-default: $gl-color-neutral-50; // Used for the filtered search type token background color in the default state.
|
|
815
|
-
$gl-filtered-search-token-type-background-color-hover: $gl-color-neutral-100; // Used for the filtered search type token background color in the hover state.
|
|
816
|
-
$gl-filtered-search-token-data-background-color-default: $gl-color-neutral-100; // Used for the filtered search data background color in the default state.
|
|
817
|
-
$gl-filtered-search-token-data-background-color-hover: $gl-color-neutral-200; // Used for the filtered search data token background color in the hover state.
|
|
818
|
-
$gl-filtered-search-token-operator-background-color-default: $gl-color-neutral-50; // Used for the filtered search operator background color in the default state.
|
|
819
|
-
$gl-filtered-search-token-operator-background-color-hover: $gl-color-neutral-100; // Used for the filtered search operator token background color in the hover state.
|
|
820
|
-
$gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
|
|
821
|
-
$gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
|
|
822
|
-
$gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
|
|
823
|
-
$gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for the label remove button icon on a light background color in the default state.
|
|
824
|
-
$gl-label-dark-text-color: $gl-color-neutral-0; // Used for the label text color on a dark background color.
|
|
825
|
-
$gl-label-dark-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a dark background color in the default state.
|
|
826
|
-
$gl-label-dark-button-background-color-hover: $gl-color-neutral-0; // Used for the label remove button background on a dark background color in the hover state.
|
|
827
|
-
$gl-label-dark-button-icon-color-default: $gl-color-neutral-0; // Used for the label remove button icon on a dark background color in the default state.
|
|
828
|
-
$gl-label-scoped-text-color: $gl-color-neutral-950; // Used for the scoped label text color.
|
|
829
|
-
$gl-label-scoped-button-background-color-hover: $gl-color-neutral-950; // Used for the scoped label remove button background in the hover state.
|
|
830
|
-
$gl-label-scoped-button-icon-color-default: $gl-color-neutral-950; // Used for the scoped label remove button icon in the default state.
|
|
831
|
-
$gl-label-scoped-button-icon-color-hover: $gl-color-neutral-0; // Used for the scoped label remove button icon in the hover state.
|
|
832
|
-
$gl-link-mention-text-color-default: $gl-color-blue-800; // Used for the mention link text color.
|
|
833
|
-
$gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
|
|
834
|
-
$gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
|
|
835
|
-
$gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
|
|
836
|
-
$gl-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
|
|
837
|
-
$gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
|
|
838
|
-
$gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
|
|
839
|
-
$gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static track (background) of a loading spinner.
|
|
840
|
-
$gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
|
|
841
|
-
$gl-spinner-segment-color-default: $gl-color-neutral-700; // Used for the animated segment of a loading spinner.
|
|
842
|
-
$gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
|
|
843
|
-
$gl-tab-selected-indicator-color-default: $gl-color-blue-500; // Used for the selected indicator of a tab.
|
|
844
|
-
$gl-token-selector-token-container-token-background-color-focus: $gl-color-neutral-300; // Used for the background color of a token in a token-selector when it's token-container is in the focus state.
|
|
845
|
-
$gl-token-background-color: $gl-color-neutral-100; // Used for the token background color.
|
|
846
|
-
$gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
|
|
847
|
-
$gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
|
|
848
|
-
$gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
|
|
849
|
-
$gl-action-selected-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a selected action in the default state.
|
|
850
|
-
$gl-action-selected-background-color-default: $gl-color-blue-500; // Used for the background of a selected action in the default state.
|
|
851
|
-
$gl-action-selected-background-color-hover: $gl-color-blue-700; // Used for the background of a selected action in the hover state.
|
|
852
|
-
$gl-action-selected-background-color-active: $gl-color-blue-800; // Used for the background of a selected action in the active state.
|
|
853
|
-
$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of a neutral action in the default state.
|
|
854
|
-
$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
|
|
855
|
-
$gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
|
|
856
|
-
$gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
|
|
857
|
-
$gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) action in the hover state.
|
|
858
|
-
$gl-action-confirm-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) action in the active state.
|
|
859
|
-
$gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
|
|
860
|
-
$gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
|
|
861
|
-
$gl-action-danger-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) action in the default state.
|
|
862
|
-
$gl-action-danger-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) action in the hover state.
|
|
863
|
-
$gl-action-danger-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) action in the active state.
|
|
864
|
-
$gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
|
|
865
|
-
$gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
|
|
866
|
-
$gl-action-strong-confirm-background-color-default: $gl-color-blue-500; // Used for the background of a strong confirm action in the default state.
|
|
867
|
-
$gl-action-strong-confirm-background-color-hover: $gl-color-blue-600; // Used for the background of a strong confirm action in the hover state.
|
|
868
|
-
$gl-action-strong-confirm-background-color-active: $gl-color-blue-700; // Used for the background of a strong confirm action in the active state.
|
|
869
|
-
$gl-action-strong-confirm-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong confirm action in the default state.
|
|
870
|
-
$gl-action-strong-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a strong confirm action in the default state.
|
|
871
|
-
$gl-action-strong-neutral-background-color-default: $gl-color-neutral-600; // Used for the background of a strong neutral action in the default state.
|
|
872
|
-
$gl-action-strong-neutral-background-color-hover: $gl-color-neutral-700; // Used for the background of a strong neutral action in the hover state.
|
|
873
|
-
$gl-action-strong-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of a strong neutral action in the active state.
|
|
874
|
-
$gl-action-strong-neutral-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a strong neutral action in the default state.
|
|
875
|
-
$gl-action-strong-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a strong neutral action in the default state.
|
|
876
|
-
$gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
|
|
877
|
-
$gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
|
|
878
|
-
$gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
|
|
879
|
-
$gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
|
|
880
|
-
$gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
|
|
881
|
-
$gl-background-color-section: $gl-color-neutral-0; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
|
|
882
|
-
$gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
|
|
883
|
-
$gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
|
|
884
|
-
$gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
|
|
885
|
-
$gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
|
|
886
|
-
$gl-control-background-color-readonly: $gl-color-alpha-dark-2; // Used for the background of static content that prepends or appends a text input.
|
|
887
|
-
$gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
|
|
888
|
-
$gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
|
|
889
|
-
$gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
|
|
890
|
-
$gl-control-border-color-default: $gl-color-neutral-400; // Used for form control (input, radio button, checkbox, textarea) default border.
|
|
891
|
-
$gl-control-border-color-hover: $gl-color-neutral-600; // Used for form control (input, radio button, checkbox, textarea) border on hover.
|
|
892
|
-
$gl-control-border-color-focus: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) border on focus.
|
|
893
|
-
$gl-control-border-color-disabled: $gl-color-neutral-100; // Used for disabled form control (input, radio button, checkbox, textarea) border.
|
|
894
|
-
$gl-control-border-color-error: $gl-color-red-500; // Used for invalid form control (input, textarea) border.
|
|
895
|
-
$gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
|
|
896
|
-
$gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
|
|
897
|
-
$gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
|
|
898
|
-
$gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
|
|
899
|
-
$gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
|
|
900
|
-
$gl-feedback-strong-background-color: $gl-color-neutral-800; // Used for a background associated with strong feedback like a tooltip or toast message.
|
|
901
|
-
$gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
|
|
902
|
-
$gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
|
|
903
|
-
$gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background.
|
|
904
|
-
$gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
905
|
-
$gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
906
|
-
$gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
|
|
907
|
-
$gl-feedback-info-background-color: $gl-color-blue-50; // Used for the background of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
908
|
-
$gl-feedback-info-text-color: $gl-color-blue-700; // Used for the text of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
909
|
-
$gl-feedback-info-icon-color: $gl-color-blue-600; // Used for the icon of an informational feedback item when highlighting new information or a change that doesn't require immediate action.
|
|
910
|
-
$gl-feedback-success-background-color: $gl-color-green-50; // Used for the background of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
911
|
-
$gl-feedback-success-text-color: $gl-color-green-700; // Used for the text of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
912
|
-
$gl-feedback-success-icon-color: $gl-color-green-600; // Used for the icon of a success feedback item when confirming the successful completion of a user-initiated action.
|
|
913
|
-
$gl-feedback-warning-background-color: $gl-color-orange-50; // Used for the background of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
914
|
-
$gl-feedback-warning-text-color: $gl-color-orange-700; // Used for the text of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
915
|
-
$gl-feedback-warning-icon-color: $gl-color-orange-600; // Used for the icon of a warning feedback item when notifying about a potential issue or sensitive information.
|
|
916
|
-
$gl-feedback-danger-background-color: $gl-color-red-50; // Used for the background of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
917
|
-
$gl-feedback-danger-text-color: $gl-color-red-700; // Used for the text of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
918
|
-
$gl-feedback-danger-icon-color: $gl-color-red-600; // Used for the icon of a danger feedback item when notifying about a critical issue that has just occurred and requires immediate attention.
|
|
919
|
-
$gl-focus-ring-outer-color: $gl-color-blue-500; // Used for the outer color portion of the focus ring.
|
|
920
|
-
$gl-highlight-match-background-color: $gl-color-orange-500; // Used for temporary visual emphasis of backgrounds of matched search terms, filtered results, or autocomplete suggestions without implying any particular state or meaning.
|
|
921
|
-
$gl-highlight-match-text-color: $gl-color-neutral-0; // Used for text within temporarily highlighted matches to maintain readability while drawing attention without conveying status.
|
|
922
|
-
$gl-highlight-target-background-color: $gl-color-blue-50; // Used for temporary visual emphasis for backgrounds of referenced elements (for example URL anchors, hover states) or to show relationships between content without implying status or requiring action.
|
|
923
|
-
$gl-highlight-target-border-color: $gl-color-blue-200; // Used to provide additional visual emphasis for borders of temporarily targeted elements or when visualizing connections between related content, distinct from persistent states.
|
|
924
|
-
$gl-icon-color-info: $gl-color-blue-700; // Used for an icon associated with information or help.
|
|
925
|
-
$gl-status-neutral-background-color: $gl-color-neutral-100; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
926
|
-
$gl-status-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
927
|
-
$gl-status-neutral-icon-color: $gl-color-neutral-500; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
|
|
928
|
-
$gl-status-info-background-color: $gl-color-blue-100; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
929
|
-
$gl-status-info-text-color: $gl-color-blue-700; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
930
|
-
$gl-status-info-icon-color: $gl-color-blue-500; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
|
|
931
|
-
$gl-status-success-background-color: $gl-color-green-100; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
932
|
-
$gl-status-success-text-color: $gl-color-green-700; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
933
|
-
$gl-status-success-icon-color: $gl-color-green-500; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
|
|
934
|
-
$gl-status-warning-background-color: $gl-color-orange-100; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
935
|
-
$gl-status-warning-text-color: $gl-color-orange-700; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
936
|
-
$gl-status-warning-icon-color: $gl-color-orange-500; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
|
|
937
|
-
$gl-status-danger-background-color: $gl-color-red-100; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
938
|
-
$gl-status-danger-text-color: $gl-color-red-700; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
939
|
-
$gl-status-danger-icon-color: $gl-color-red-500; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
|
|
940
|
-
$gl-status-brand-background-color: $gl-color-purple-100; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
941
|
-
$gl-status-brand-text-color: $gl-color-purple-700; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
942
|
-
$gl-status-brand-icon-color: $gl-color-purple-500; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
|
|
943
|
-
$gl-text-color-default: $gl-color-neutral-800; // Used for the default text color.
|
|
944
|
-
$gl-text-color-subtle: $gl-color-neutral-600; // Used for supplemental text that doesn't need to be as prominent as other text.
|
|
945
|
-
$gl-text-color-strong: $gl-color-neutral-950; // Used for text with the highest contrast.
|
|
946
|
-
$gl-text-color-heading: $gl-color-neutral-950; // Used for headings level 1-6.
|
|
947
|
-
$gl-text-color-link: $gl-color-blue-700; // Used for default text links.
|
|
948
|
-
$gl-text-color-warning: $gl-color-orange-600; // Used for text that requires caution or careful attention.
|
|
949
|
-
$gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
|
|
950
|
-
$gl-text-color-success: $gl-color-green-600; // Used for text indicating success, completion, approval, addition, or validity.
|
|
951
|
-
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
|
|
952
|
-
$gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
|
|
953
|
-
$gl-border-radius-default: $gl-border-radius-md;
|
|
954
|
-
$gl-font-size-base: $gl-font-size-md;
|
|
955
|
-
$gl-shadow-sm: 0 0 2px $gl-shadow-color-default, 0 1px 4px $gl-shadow-color-default; // Used for surfaces that need to indicate users can manually interact with them. For example, cards in issue board.
|
|
956
|
-
$gl-shadow-md: 0 0 1px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 2px 8px $gl-shadow-color-default; // Used for surfaces that need boundary definition and appear on hover. For example, popovers.
|
|
957
|
-
$gl-shadow-lg: 0 0 2px $gl-shadow-color-default, 0 0 2px $gl-shadow-color-default, 0 4px 12px $gl-shadow-color-default; // Used for large surfaces that present additional context to the user.
|
|
958
|
-
$gl-alert-border-radius: $gl-border-radius-lg; // Used for alert border radius.
|
|
959
|
-
$gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
|
|
960
|
-
$gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
|
|
961
|
-
$gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color of an info alert.
|
|
962
|
-
$gl-alert-info-background-color: $gl-feedback-info-background-color; // Used for the background color of an info alert.
|
|
963
|
-
$gl-alert-success-title-color: $gl-text-color-heading; // Used for the title color of a success alert.
|
|
964
|
-
$gl-alert-success-background-color: $gl-feedback-success-background-color; // Used for the background color of a success alert.
|
|
965
|
-
$gl-alert-warning-title-color: $gl-text-color-heading; // Used for the title color of a warning alert.
|
|
966
|
-
$gl-alert-warning-background-color: $gl-feedback-warning-background-color; // Used for the background color of a warning alert.
|
|
967
|
-
$gl-alert-danger-title-color: $gl-text-color-heading; // Used for the title color of a danger alert.
|
|
968
|
-
$gl-alert-danger-background-color: $gl-feedback-danger-background-color; // Used for the background color of a danger alert.
|
|
969
|
-
$gl-badge-muted-background-color-hover: $gl-badge-muted-background-color-default; // Used for the background of a muted badge in the hover state.
|
|
970
|
-
$gl-badge-muted-text-color-focus: $gl-badge-muted-text-color-hover; // Used for the text of a muted badge in the focus state.
|
|
971
|
-
$gl-badge-muted-icon-color-focus: $gl-badge-muted-icon-color-hover; // Used for the icon of a muted badge in the focus state.
|
|
972
|
-
$gl-badge-neutral-background-color-hover: $gl-badge-neutral-background-color-default; // Used for the background of a neutral badge in the hover state.
|
|
973
|
-
$gl-badge-neutral-text-color-focus: $gl-badge-neutral-text-color-hover; // Used for the text of a neutral badge in the focus state.
|
|
974
|
-
$gl-badge-neutral-icon-color-focus: $gl-badge-neutral-icon-color-hover; // Used for the icon of a neutral badge in the focus state.
|
|
975
|
-
$gl-badge-info-background-color-hover: $gl-badge-info-background-color-default; // Used for the background of an informational badge in the hover state.
|
|
976
|
-
$gl-badge-info-text-color-focus: $gl-badge-info-text-color-hover; // Used for the text of an informational badge in the focus state.
|
|
977
|
-
$gl-badge-info-icon-color-focus: $gl-badge-info-icon-color-hover; // Used for the icon of an informational badge in the focus state.
|
|
978
|
-
$gl-badge-success-background-color-hover: $gl-badge-success-background-color-default; // Used for the background of a success badge in the hover state.
|
|
979
|
-
$gl-badge-success-text-color-focus: $gl-badge-success-text-color-hover; // Used for the text of a success badge in the focus state.
|
|
980
|
-
$gl-badge-success-icon-color-focus: $gl-badge-success-icon-color-hover; // Used for the icon of a success badge in the focus state.
|
|
981
|
-
$gl-badge-warning-background-color-hover: $gl-badge-warning-background-color-default; // Used for the background of a warning badge in the hover state.
|
|
982
|
-
$gl-badge-warning-text-color-focus: $gl-badge-warning-text-color-hover; // Used for the text of a warning badge in the focus state.
|
|
983
|
-
$gl-badge-warning-icon-color-focus: $gl-badge-warning-icon-color-hover; // Used for the icon of a warning badge in the focus state.
|
|
984
|
-
$gl-badge-danger-background-color-hover: $gl-badge-danger-background-color-default; // Used for the background of a danger badge in the hover state.
|
|
985
|
-
$gl-badge-danger-text-color-focus: $gl-badge-danger-text-color-hover; // Used for the text of a danger badge in the focus state.
|
|
986
|
-
$gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger badge in the focus state.
|
|
987
|
-
$gl-badge-tier-background-color-hover: $gl-badge-tier-background-color-default; // Used for the background of a tier related badge in the hover state.
|
|
988
|
-
$gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
|
|
989
|
-
$gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
|
|
990
|
-
$gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
|
|
991
|
-
$gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the focus state.
|
|
992
|
-
$gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
|
|
993
|
-
$gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
|
|
994
|
-
$gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
|
|
995
|
-
$gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
|
|
996
|
-
$gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
|
|
997
|
-
$gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
|
|
998
|
-
$gl-button-confirm-primary-background-color-default: $gl-action-strong-confirm-background-color-default; // Used for the background of a confirm (positive) primary button in the default state.
|
|
999
|
-
$gl-button-confirm-primary-background-color-hover: $gl-action-strong-confirm-background-color-hover; // Used for the background of a confirm (positive) primary button in the hover state.
|
|
1000
|
-
$gl-button-confirm-primary-background-color-active: $gl-action-strong-confirm-background-color-active; // Used for the background of a confirm (positive) primary button in the active state.
|
|
1001
|
-
$gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
|
|
1002
|
-
$gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
|
|
1003
|
-
$gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
|
|
1004
|
-
$gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
|
|
1005
|
-
$gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
|
|
1006
|
-
$gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
|
|
1007
|
-
$gl-button-confirm-tertiary-foreground-color-active: $gl-action-confirm-foreground-color-active; // Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.
|
|
1008
|
-
$gl-button-confirm-tertiary-background-color-focus: $gl-action-confirm-background-color-focus; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
|
|
1009
|
-
$gl-button-confirm-tertiary-border-color-default: $gl-action-confirm-border-color-default; // Used for the border of a borderless, tertiary confirm (positive) button in the default state.
|
|
1010
|
-
$gl-button-danger-primary-foreground-color-hover: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the hover state.
|
|
1011
|
-
$gl-button-danger-primary-foreground-color-focus: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the focus state.
|
|
1012
|
-
$gl-button-danger-primary-foreground-color-active: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the active state.
|
|
1013
|
-
$gl-button-danger-primary-background-color-focus: $gl-button-danger-primary-background-color-hover; // Used for the background of a danger (destructive) primary button in the focus state.
|
|
1014
|
-
$gl-button-danger-primary-border-color-focus: $gl-button-danger-primary-border-color-hover; // Used for the border of a danger (destructive) primary button in the focus state.
|
|
1015
|
-
$gl-button-danger-secondary-foreground-color-focus: $gl-button-danger-secondary-foreground-color-hover; // Used for the foreground of a danger (destructive) button in the focus state.
|
|
1016
|
-
$gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
|
|
1017
|
-
$gl-button-danger-secondary-border-color-focus: $gl-button-danger-secondary-border-color-hover; // Used for the border of an outlined danger (destructive) button in the focus state.
|
|
1018
|
-
$gl-button-danger-tertiary-foreground-color-default: $gl-action-danger-foreground-color-default; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
|
|
1019
|
-
$gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-color-hover; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
|
|
1020
|
-
$gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
|
|
1021
|
-
$gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
|
|
1022
|
-
$gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
|
|
1023
|
-
$gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
|
|
1024
|
-
$gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
|
|
1025
|
-
$gl-button-link-border-radius: $gl-border-radius-md; // Used for link button border radius.
|
|
1026
|
-
$gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
|
|
1027
|
-
$gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
|
|
1028
|
-
$gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
|
|
1029
|
-
$gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
|
|
1030
|
-
$gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
|
|
1031
|
-
$gl-card-border-radius: $gl-border-radius-lg; // Used for card border radius.
|
|
1032
|
-
$gl-chart-axis-text-color: $gl-text-color-subtle; // Used in charts for the text color of axis titles and labels.
|
|
1033
|
-
$gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
|
|
1034
|
-
$gl-dropdown-background-color: $gl-background-color-overlap; // Used for the background of a dropdown.
|
|
1035
|
-
$gl-dropdown-border-color: $gl-border-color-strong; // Used for the border of a dropdown.
|
|
1036
|
-
$gl-dropdown-border-radius: $gl-border-radius-lg; // Used for the border radius of a dropdown.
|
|
1037
|
-
$gl-dropdown-divider-color: $gl-border-color-default; // Used for the divider of a dropdown.
|
|
1038
|
-
$gl-dropdown-option-text-color-default: $gl-action-neutral-foreground-color-default; // Used for the text of a dropdown option in the default state.
|
|
1039
|
-
$gl-dropdown-option-text-color-disabled: $gl-action-disabled-foreground-color; // Used for the text of a dropdown option in the disabled state.
|
|
1040
|
-
$gl-dropdown-option-indicator-color-selected-default: $gl-control-background-color-selected-default; // Used for the dropdown selected option indicator in the default state.
|
|
1041
|
-
$gl-dropdown-option-indicator-color-selected-hover: $gl-control-background-color-selected-hover; // Used for the dropdown selected option indicator in the hover state.
|
|
1042
|
-
$gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.
|
|
1043
|
-
$gl-dropdown-option-indicator-color-selected-active: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the active state.
|
|
1044
|
-
$gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
|
|
1045
|
-
$gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
|
|
1046
|
-
$gl-modal-border-radius: $gl-border-radius-lg; // Used for modal border radius.
|
|
1047
|
-
$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
|
|
1048
|
-
$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
|
|
1049
|
-
$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
|
|
1050
|
-
$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
|
|
1051
|
-
$gl-table-row-background-color-hover: $gl-highlight-target-background-color; // Used for the background of a table row in hover state.
|
|
1052
|
-
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
|
|
1053
|
-
$gl-toggle-switch-icon-color-unchecked-default: $gl-action-strong-neutral-background-color-default; // Used for the icon color of an unchecked toggle switch in the default state.
|
|
1054
|
-
$gl-toggle-switch-icon-color-unchecked-hover: $gl-action-strong-neutral-background-color-hover; // Used for the icon color of an unchecked toggle switch in the hover state.
|
|
1055
|
-
$gl-toggle-switch-icon-color-unchecked-active: $gl-action-strong-neutral-background-color-active; // Used for the icon color of an unchecked toggle switch in the active state.
|
|
1056
|
-
$gl-toggle-switch-icon-color-checked-default: $gl-action-strong-confirm-background-color-default; // Used for the icon color of a checked toggle switch in the default state.
|
|
1057
|
-
$gl-toggle-switch-icon-color-checked-hover: $gl-action-strong-confirm-background-color-hover; // Used for the icon color of a checked toggle switch in the hover state.
|
|
1058
|
-
$gl-toggle-switch-icon-color-checked-active: $gl-action-strong-confirm-background-color-active; // Used for the icon color of a checked toggle switch in the active state.
|
|
1059
|
-
$gl-toggle-switch-icon-color-disabled: $gl-action-disabled-background-color; // Used for the icon color of a disabled toggle switch.
|
|
1060
|
-
$gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
|
|
1061
|
-
$gl-action-border-radius: $gl-border-radius-lg; // Used for the border radius of an action.
|
|
1062
|
-
$gl-action-selected-foreground-color-hover: $gl-action-selected-foreground-color-default; // Used for the foreground of a selected action in the hover state.
|
|
1063
|
-
$gl-action-selected-background-color-focus: $gl-action-selected-background-color-hover; // Used for the background of a selected action in the focus state.
|
|
1064
|
-
$gl-action-selected-border-color-default: $gl-action-selected-background-color-default; // Used for the border of a selected action in the default state.
|
|
1065
|
-
$gl-action-selected-border-color-hover: $gl-action-selected-background-color-hover; // Used for the border of a selected action in the hover state.
|
|
1066
|
-
$gl-action-selected-border-color-active: $gl-action-selected-background-color-active; // Used for the border of a selected action in the active state.
|
|
1067
|
-
$gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
|
|
1068
|
-
$gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
|
|
1069
|
-
$gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
|
|
1070
|
-
$gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the hover state.
|
|
1071
|
-
$gl-action-neutral-border-color-focus: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the focus state.
|
|
1072
|
-
$gl-action-neutral-border-color-active: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the active state.
|
|
1073
|
-
$gl-action-confirm-foreground-color-focus: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) action in the focus state.
|
|
1074
|
-
$gl-action-confirm-border-color-hover: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the hover state.
|
|
1075
|
-
$gl-action-confirm-border-color-focus: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the focus state.
|
|
1076
|
-
$gl-action-confirm-border-color-active: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the active state.
|
|
1077
|
-
$gl-action-danger-foreground-color-focus: $gl-action-danger-foreground-color-hover; // Used for the foreground of a danger (destructive) action in the focus state.
|
|
1078
|
-
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
|
|
1079
|
-
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
|
|
1080
|
-
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
|
|
1081
|
-
$gl-action-strong-confirm-background-color-focus: $gl-action-strong-confirm-background-color-hover; // Used for the background of a strong confirm action in the focus state.
|
|
1082
|
-
$gl-action-strong-confirm-foreground-color-hover: $gl-action-strong-confirm-foreground-color-default; // Used for the foreground of a strong confirm action in the hover state.
|
|
1083
|
-
$gl-action-strong-confirm-border-color-hover: $gl-action-strong-confirm-border-color-default; // Used for the border of a strong confirm action in the hover state.
|
|
1084
|
-
$gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.
|
|
1085
|
-
$gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
|
|
1086
|
-
$gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
|
|
1087
|
-
$gl-control-border-radius: $gl-border-radius-lg; // Used for form control (input, radio button, checkbox, textarea) default border radius.
|
|
1088
|
-
$gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
|
|
1089
|
-
$gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
|
|
1090
|
-
$gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
|
|
1091
|
-
$gl-feedback-border-radius: $gl-border-radius-lg; // Used for the border radius of a feedback element.
|
|
1092
|
-
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
1093
|
-
$gl-icon-color-default: $gl-text-color-default; // Used for the default icon color. Can be paired with default text.
|
|
1094
|
-
$gl-icon-color-subtle: $gl-text-color-subtle; // Used for a static or decorational icon. Can be paired with subtle text.
|
|
1095
|
-
$gl-icon-color-strong: $gl-text-color-strong; // Used for an icon with the highest contrast.
|
|
1096
|
-
$gl-icon-color-disabled: $gl-text-color-disabled; // Used for an icon within a disabled section.
|
|
1097
|
-
$gl-icon-color-link: $gl-text-color-link; // Used for an icon within a link.
|
|
1098
|
-
$gl-icon-color-warning: $gl-text-color-warning; // Used for an icon associated with a warning.
|
|
1099
|
-
$gl-icon-color-danger: $gl-text-color-danger; // Used for an icon associated with an error or danger.
|
|
1100
|
-
$gl-icon-color-success: $gl-text-color-success; // Used for an icon associated with success or validity.
|
|
1101
|
-
$gl-badge-muted-background-color-focus: $gl-badge-muted-background-color-hover; // Used for the background of a muted badge in the focus state.
|
|
1102
|
-
$gl-badge-neutral-background-color-focus: $gl-badge-neutral-background-color-hover; // Used for the background of a neutral badge in the focus state.
|
|
1103
|
-
$gl-badge-info-background-color-focus: $gl-badge-info-background-color-hover; // Used for the background of an informational badge in the focus state.
|
|
1104
|
-
$gl-badge-success-background-color-focus: $gl-badge-success-background-color-hover; // Used for the background of a success badge in the focus state.
|
|
1105
|
-
$gl-badge-warning-background-color-focus: $gl-badge-warning-background-color-hover; // Used for the background of a warning badge in the focus state.
|
|
1106
|
-
$gl-badge-danger-background-color-focus: $gl-badge-danger-background-color-hover; // Used for the background of a danger badge in the focus state.
|
|
1107
|
-
$gl-badge-tier-background-color-focus: $gl-badge-tier-background-color-hover; // Used for the background of a tier related badge in the focus state.
|
|
1108
|
-
$gl-broadcast-banner-border-radius: $gl-border-radius-default; // Used for broadcast banner border radius.
|
|
1109
|
-
$gl-button-border-radius: $gl-action-border-radius; // Used for button border radius.
|
|
1110
|
-
$gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
|
|
1111
|
-
$gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
|
|
1112
|
-
$gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
|
|
1113
|
-
$gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
|
|
1114
|
-
$gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
|
|
1115
|
-
$gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
|
|
1116
|
-
$gl-button-confirm-primary-foreground-color-hover: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) primary button in the hover state.
|
|
1117
|
-
$gl-button-confirm-primary-background-color-focus: $gl-action-strong-confirm-background-color-focus; // Used for the background of a confirm (positive) primary button in the focus state.
|
|
1118
|
-
$gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
|
|
1119
|
-
$gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
|
|
1120
|
-
$gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
|
|
1121
|
-
$gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color-active; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
|
|
1122
|
-
$gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-color-focus; // Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.
|
|
1123
|
-
$gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
|
|
1124
|
-
$gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
|
|
1125
|
-
$gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
|
|
1126
|
-
$gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
|
|
1127
|
-
$gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
|
|
1128
|
-
$gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
|
|
1129
|
-
$gl-button-selected-foreground-color-hover: $gl-button-default-primary-foreground-color-hover; // Used for the foreground of a selected button in the hover state.
|
|
1130
|
-
$gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
|
|
1131
|
-
$gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
|
|
1132
|
-
$gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
|
|
1133
|
-
$gl-chart-axis-pointer-color: $gl-icon-color-subtle; // Used in charts for the color of the reference line and axis value under mouse pointer.
|
|
1134
|
-
$gl-chart-zoom-handle-color: $gl-icon-color-subtle; // Used in charts for the handle color when zooming in on a specific area of data.
|
|
1135
|
-
$gl-dropdown-option-text-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the text of a dropdown option in the hover state.
|
|
1136
|
-
$gl-dropdown-option-text-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the text of a dropdown option in the focus state.
|
|
1137
|
-
$gl-dropdown-option-text-color-active: $gl-action-neutral-foreground-color-active; // Used for the text of a dropdown option in the active state.
|
|
1138
|
-
$gl-toggle-switch-icon-color-unchecked-focus: $gl-action-strong-neutral-background-color-focus; // Used for the icon color of an unchecked toggle switch in the focus state.
|
|
1139
|
-
$gl-toggle-switch-icon-color-checked-focus: $gl-action-strong-confirm-background-color-focus; // Used for the icon color of a checked toggle switch in the focus state.
|
|
1140
|
-
$gl-token-border-radius: $gl-border-radius-default; // Used for token border radius.
|
|
1141
|
-
$gl-action-selected-foreground-color-focus: $gl-action-selected-foreground-color-hover; // Used for the foreground of a selected action in the focus state.
|
|
1142
|
-
$gl-action-selected-border-color-focus: $gl-action-selected-background-color-focus; // Used for the border of a selected action in the focus state.
|
|
1143
|
-
$gl-action-strong-confirm-foreground-color-focus: $gl-action-strong-confirm-foreground-color-hover; // Used for the foreground of a strong confirm action in the focus state.
|
|
1144
|
-
$gl-action-strong-confirm-border-color-focus: $gl-action-strong-confirm-border-color-hover; // Used for the border of a strong confirm action in the focus state.
|
|
1145
|
-
$gl-action-strong-neutral-foreground-color-focus: $gl-action-strong-neutral-foreground-color-hover; // Used for the foreground of a strong neutral action in the focus state.
|
|
1146
|
-
$gl-action-strong-neutral-border-color-focus: $gl-action-strong-neutral-border-color-hover; // Used for the border of a strong neutral action in the focus state.
|
|
1147
|
-
$gl-button-confirm-primary-foreground-color-focus: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a confirm (positive) primary button in the focus state.
|
|
1148
|
-
$gl-action-selected-foreground-color-active: $gl-action-selected-foreground-color-focus; // Used for the foreground of a selected action in the active state.
|
|
1149
|
-
$gl-action-strong-confirm-foreground-color-active: $gl-action-strong-confirm-foreground-color-focus; // Used for the foreground of a strong confirm action in the active state.
|
|
1150
|
-
$gl-action-strong-confirm-border-color-active: $gl-action-strong-confirm-border-color-focus; // Used for the border of a strong confirm action in the active state.
|
|
1151
|
-
$gl-action-strong-neutral-foreground-color-active: $gl-action-strong-neutral-foreground-color-focus; // Used for the foreground of a strong neutral action in the active state.
|
|
1152
|
-
$gl-action-strong-neutral-border-color-active: $gl-action-strong-neutral-border-color-focus; // Used for the border of a strong neutral action in the active state.
|
|
1153
|
-
$gl-button-confirm-primary-foreground-color-active: $gl-action-strong-confirm-foreground-color-active; // Used for the foreground of a confirm (positive) primary button in the active state.
|