-
Notifications
You must be signed in to change notification settings - Fork 5.4k
/
_tokens.scss
315 lines (276 loc) · 11.5 KB
/
_tokens.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
@use 'sass:math';
@mixin theme {
--color-primary-h: var(--prim-color-primary-h);
--color-primary-s: var(--prim-color-primary-s);
--color-primary-l: 68%;
// Primary tokens
// Primary
--color-primary-shade-1: var(--prim-color-primary-shade-100);
--color-primary: var(--prim-color-primary);
--color-primary-tint-1: var(--prim-color-primary-tint-200);
--color-primary-tint-2: var(--prim-color-primary-tint-250);
--color-primary-tint-3: var(--prim-color-primary-tint-300);
// Secondary
--color-secondary-shade-1: var(--prim-color-secondary-shade-100);
--color-secondary: var(--prim-color-secondary);
--color-secondary-tint-1: var(--prim-color-secondary-tint-300);
--color-secondary-tint-3: var(--prim-color-secondary-tint-400);
// Success
--color-success-shade-1: var(--prim-color-alt-a-shade-100);
--color-success: var(--prim-color-alt-a);
--color-success-light: var(--prim-color-alt-a-tint-300);
--color-success-light-2: var(--prim-color-alt-a-tint-400);
--color-success-tint-1: var(--prim-color-alt-a-tint-500);
--color-success-tint-2: var(--prim-color-alt-a-tint-550);
// Warning
--color-warning-shade-1: var(--prim-color-alt-b-shade-100);
--color-warning: var(--prim-color-alt-b);
--color-warning-tint-1: var(--prim-color-alt-b-tint-250);
--color-warning-tint-2: var(--prim-color-alt-b-tint-400);
// Danger
--color-danger-shade-1: var(--prim-color-alt-c-shade-100);
--color-danger: var(--prim-color-alt-c);
--color-danger-tint-1: var(--prim-color-alt-c-tint-400);
--color-danger-tint-2: var(--prim-color-alt-c-tint-450);
// Text
--color-text-dark: var(--prim-gray-740);
--color-text-base: var(--prim-gray-540);
--color-text-light: var(--prim-gray-420);
--color-text-lighter: var(--prim-gray-120);
--color-text-xlight: var(--prim-gray-0);
--color-text-danger: var(--prim-color-alt-c);
// Foreground
--color-foreground-xdark: var(--prim-gray-490);
--color-foreground-dark: var(--prim-gray-200);
--color-foreground-base: var(--prim-gray-120);
--color-foreground-light: var(--prim-gray-70);
--color-foreground-xlight: var(--prim-gray-0);
// Background
--color-background-dark: var(--prim-gray-820);
--color-background-medium: var(--prim-gray-120);
--color-background-base: var(--prim-gray-40);
--color-background-light: var(--prim-gray-10);
--color-background-xlight: var(--prim-gray-0);
// Secondary tokens
// Canvas
--color-canvas-background: var(--prim-gray-10);
--color-canvas-dot: var(--prim-gray-120);
--color-canvas-read-only-line: var(--prim-gray-40);
--color-canvas-node-background: var(--prim-gray-0);
--color-canvas-node-pinned-border: var(--color-secondary);
--color-canvas-selected: var(--prim-gray-70);
--node-type-main-color: var(--prim-gray-490);
// Sticky
--color-sticky-default-background: var(--prim-color-alt-d);
--color-sticky-default-border: var(--prim-color-alt-d-shade-150);
--color-sticky-font: var(--prim-gray-740);
--color-sticky-code-background: var(--color-background-base);
// Expressions
--color-valid-resolvable-foreground: var(--prim-color-alt-a);
--color-valid-resolvable-background: var(--prim-color-alt-a-tint-500);
--color-invalid-resolvable-foreground: var(--prim-color-alt-c);
--color-invalid-resolvable-background: var(--prim-color-alt-c-tint-450);
--color-expression-editor-background: var(--prim-gray-0);
--color-expression-syntax-example: var(--prim-gray-40);
// Code
--color-code-tags-string: var(--prim-color-alt-f);
--color-code-tags-primitive: var(--prim-color-alt-b-shade-100);
--color-code-tags-keyword: var(--prim-color-alt-g);
--color-code-tags-operator: var(--prim-color-alt-h);
--color-code-tags-variable: var(--prim-color-alt-c-shade-100);
--color-code-tags-definition: var(--prim-color-alt-e-shade-150);
--color-json-default: var(--prim-color-secondary-shade-100);
--color-json-null: var(--prim-color-alt-c);
--color-json-boolean: var(--prim-color-alt-a);
--color-json-number: var(--prim-color-alt-a);
--color-json-string: var(--prim-color-secondary-shade-100);
--color-json-key: var(--prim-gray-670);
--color-json-brackets: var(--prim-gray-670);
--color-json-brackets-hover: var(--prim-color-alt-e);
--color-json-line: var(--prim-gray-200);
--color-json-highlight: var(--prim-gray-70);
--color-code-background: var(--prim-gray-0);
--color-code-background-readonly: var(--prim-gray-40);
--color-code-lineHighlight: var(--prim-gray-40);
--color-code-foreground: var(--prim-gray-670);
--color-code-caret: var(--prim-gray-420);
--color-code-selection: var(--prim-gray-120);
--color-code-gutterBackground: var(--prim-gray-0);
--color-code-gutterForeground: var(--prim-gray-320);
--color-code-tags-comment: var(--prim-gray-420);
--color-autocomplete-selected-background: var(--prim-color-alt-e);
--color-autocomplete-selected-font: var(--prim-gray-0);
// Variables
--color-variables-usage-font: var(--color-success);
--color-variables-usage-syntax-bg: var(--color-success-tint-2);
// Button primary
--color-button-primary-font: var(--prim-gray-0);
--color-button-primary-border: var(--prim-color-primary);
--color-button-primary-background: var(--prim-color-primary);
--color-button-primary-hover-active-border: var(--prim-color-primary-shade-100);
--color-button-primary-hover-active-background: var(--prim-color-primary-shade-100);
--color-button-primary-focus-outline: var(--prim-color-primary-tint-200);
--color-button-primary-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-primary-disabled-border: var(--prim-color-primary-tint-200);
--color-button-primary-disabled-background: var(--prim-color-primary-tint-200);
// Button secondary
--color-button-secondary-font: var(--prim-gray-670);
--color-button-secondary-border: var(--prim-gray-320);
--color-button-secondary-background: var(--prim-gray-0);
--color-button-secondary-hover-active-focus-font: var(--prim-color-primary);
--color-button-secondary-hover-active-border: var(--prim-color-primary);
--color-button-secondary-hover-background: var(--prim-color-primary-tint-300);
--color-button-secondary-active-background: var(--prim-color-primary-tint-250);
--color-button-secondary-focus-outline: var(--prim-gray-120);
--color-button-secondary-disabled-font: var(--prim-gray-200);
--color-button-secondary-disabled-border: var(--prim-gray-200);
// Button success, warning, danger
--color-button-success-font: var(--prim-gray-0);
--color-button-success-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-warning-font: var(--color-text-xlight);
--color-button-warning-disabled-font: var(--prim-gray-0-alpha-075);
--color-button-danger-font: var(--color-text-xlight);
--color-button-danger-disabled-font: var(--prim-gray-0-alpha-075);
// Text button
--color-text-button-secondary-font: var(--prim-gray-670);
// Node Creator Button
--color-button-node-creator-border-font: var(--prim-gray-540);
--color-button-node-creator-hover-border-font: var(--prim-color-primary);
--color-button-node-creator-background: var(--prim-gray-0);
// Table
--color-table-header-background: var(--color-background-base);
--color-table-row-background: var(--color-background-xlight);
--color-table-row-even-background: var(--color-background-light);
--color-table-row-hover-background: var(--color-primary-tint-3);
// Notification
--color-notification-background: var(--color-background-xlight);
// Execution card
--execution-card-border-success: var(--prim-color-alt-a-tint-300);
--execution-card-border-error: var(--prim-color-alt-c-tint-250);
--execution-card-border-waiting: var(--prim-color-secondary-tint-300);
--execution-card-border-running: var(--prim-color-alt-b-tint-250);
--execution-card-border-unknown: var(--prim-gray-120);
// NDV
--color-run-data-background: var(--color-background-base);
--color-ndv-droppable-parameter: var(--color-secondary);
--color-ndv-back-font: var(--prim-gray-0);
--color-ndv-ouptut-error-font: var(--prim-color-alt-c);
// Notice
--color-notice-warning-border: var(--color-warning-tint-1);
--color-notice-warning-background: var(--color-warning-tint-2);
--color-notice-font: var(--color-text-base);
// Callout
--color-callout-info-border: var(--color-foreground-base);
--color-callout-info-background: var(--color-foreground-xlight);
--color-callout-info-font: var(--color-info);
--color-callout-info-icon: var(--color-info);
--color-callout-success-border: var(--color-success-light-2);
--color-callout-success-background: var(--color-success-tint-2);
--color-callout-success-font: var(--color-success);
--color-callout-success-icon: var(--color-success);
--color-callout-warning-border: var(--color-warning-tint-1);
--color-callout-warning-background: var(--color-warning-tint-2);
--color-callout-warning-font: var(--color-warning);
--color-callout-warning-icon: var(--color-warning);
--color-callout-danger-border: var(--color-danger-tint-1);
--color-callout-danger-background: var(--color-danger-tint-2);
--color-callout-danger-font: var(--color-danger);
--color-callout-danger-icon: var(--color-danger);
--color-callout-secondary-border: var(--color-secondary-tint-1);
--color-callout-secondary-background: var(--color-secondary-tint-3);
--color-callout-secondary-font: var(--color-secondary);
--color-callout-secondary-icon: var(--color-secondary);
// Dialog
--color-dialog-overlay-background: var(--prim-gray-0-alpha-075);
--color-dialog-overlay-background-dark: var(--prim-color-alt-j-alpha-075);
// Avatar
--color-avatar-font: var(--color-text-xlight);
// Value Survey
--color-value-survey-background: var(--prim-gray-740);
--color-value-survey-font: var(--prim-gray-0);
// Various
--color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);
--color-info: var(--prim-gray-420);
--color-info-tint-1: var(--prim-gray-120);
--color-info-tint-2: var(--prim-gray-40);
--color-grey: var(--prim-gray-200);
--color-light-grey: var(--prim-gray-120);
--color-neutral: var(--prim-gray-490);
--color-switch: var(--prim-color-alt-i);
// Generated Color Shades from 50 to 950
// Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') {
@each $shade
in (
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
)
{
--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
--color-#{$color}-#{$shade}: hsl(
var(--color-#{$color}-h),
var(--color-#{$color}-s),
var(--color-#{$color}-#{$shade}-l)
);
}
}
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-color-base: var(--color-foreground-base);
--border-color-light: var(--color-foreground-light);
--border-style-base: solid;
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-line-height-compact: 1.25;
--font-line-height-regular: 1.3;
--font-line-height-loose: 1.35;
--font-line-height-xloose: 1.5;
--font-weight-regular: 400;
--font-weight-bold: 600;
--font-family: 'Open Sans', sans-serif;
--font-family-monospace: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
--spacing-3xs: 0.375rem;
--spacing-2xs: 0.5rem;
--spacing-xs: 0.75rem;
--spacing-s: 1rem;
--spacing-m: 1.25rem;
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 8rem;
--spacing-5xl: 16rem;
}
:root {
@include theme;
}