-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsheetrock.css
More file actions
400 lines (397 loc) · 17.1 KB
/
sheetrock.css
File metadata and controls
400 lines (397 loc) · 17.1 KB
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
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
:root {
/* COLORS */
--gray-100-light: var(--neutral-100);
--gray-100-dark: var(--neutral-100);
--gray-200-light: var(--neutral-200);
--gray-200-dark: var(--neutral-200);
--gray-300-light: var(--neutral-300);
--gray-300-dark: var(--neutral-300);
--gray-400-light: var(--neutral-400);
--gray-400-dark: var(--neutral-400);
--gray-500-light: var(--neutral-500);
--gray-500-dark: var(--neutral-500);
--gray-600-light: var(--neutral-600);
--gray-600-dark: var(--neutral-600);
--gray-700-light: var(--neutral-700);
--gray-700-dark: var(--neutral-700);
--gray-800-light: var(--neutral-800);
--gray-800-dark: var(--neutral-800);
--gray-900-light: var(--neutral-900);
--gray-900-dark: var(--neutral-900);
--special-info-dark-light: var(--primary-800);
--special-info-dark-dark: var(--primary-200);
--special-info-light: var(--primary-600);
--special-info-dark: var(--primary-400);
--special-info-light-light: var(--primary-400);
--special-info-light-dark: var(--primary-600);
--special-info-secondary-light: var(--primary-50);
--special-info-secondary-dark: var(--primary-700);
--special-danger-dark-light: var(--danger-800);
--special-danger-dark-dark: var(--danger-900);
--special-danger-light: var(--danger-600);
--special-danger-dark: var(--danger-200);
--special-danger-light-light: var(--danger-200);
--special-danger-light-dark: var(--danger-300);
--special-danger-secondary-light: var(--danger-50);
--special-danger-secondary-dark: var(--danger-950);
--special-warning-dark-light: var(--warning-800);
--special-warning-dark-dark: var(--warning-900);
--special-warning-light: var(--warning-600);
--special-warning-dark: var(--warning-200);
--special-warning-light-light: var(--warning-200);
--special-warning-light-dark: var(--warning-300);
--special-warning-secondary-light: var(--warning-50);
--special-warning-secondary-dark: var(--warning-950);
--special-success-dark-light: var(--success-800);
--special-success-dark-dark: var(--green-900);
--special-success-light: var(--success-600);
--special-success-dark: var(--green-200);
--special-success-light-light: var(--success-200);
--special-success-light-dark: var(--green-300);
--special-success-secondary-light: var(--success-50);
--special-success-secondary-dark: var(--green-950);
--text-primary-light: var(--neutral-950);
--text-primary-dark: var(--neutral-50);
--text-placeholder-light: var(--neutral-500);
--text-placeholder-dark: var(--neutral-50);
--bg-canvas-light: var(--bg-canvas);
--bg-canvas-dark: var(--neutral-800);
--text-disabled-light: var(--neutral-500);
--text-disabled-dark: var(--neutral-400);
--gray-50-light: var(--neutral-50);
--gray-50-dark: var(--neutral-50);
--bg-disabled-light: var(--neutral-200);
--bg-disabled-dark: var(--neutral-200);
--text-hover-placeholder-light: var(--neutral-700);
--text-hover-placeholder-dark: var(--neutral-300);
--interaction-selected-background-light: var(--bg-info-subtle);
--interaction-selected-background-dark: var(--bg-info-subtle);
--interaction-hover-background-light: var(--gray-600);
--interaction-hover-background-dark: var(--gray-200);
--callouts-text-light: var(--pink-600);
--callouts-text-dark: var(--pink-600);
--callouts-background-light: var(--pink-50);
--callouts-background-dark: var(--pink-50);
--border-primary-light: var(--neutral-400);
--border-primary-dark: var(--neutral-200);
--border-divider-light: var(--border-primary);
--border-divider-dark: var(--border-on-inverted);
--charts-series-1-light: #376df5;
--charts-series-1-dark: #376df5;
--charts-series-2-light: #64dfdf;
--charts-series-2-dark: #64dfdf;
--charts-series-3-light: #f68769;
--charts-series-3-dark: #f68769;
--charts-series-4-light: #c161e2;
--charts-series-4-dark: #c161e2;
--charts-series-5-light: #f9c74f;
--charts-series-5-dark: #fdd07a;
--charts-series-6-light: #f8629b;
--charts-series-6-dark: #f8629b;
--charts-series-7-light: #74d062;
--charts-series-7-dark: #74d062;
--charts-series-8-light: #84a7ff;
--charts-series-8-dark: #84a7ff;
--cas-yellow-light: #cda871;
--cas-yellow-dark: #ffd28f;
--cas-brown-light: #0e0800;
--cas-brown-dark: #e9e9e9;
--icons-primary-light: var(--neutral-950);
--icons-primary-dark: var(--neutral-50);
--text-label-secondary-light: var(--neutral-500);
--text-label-secondary-dark: var(--neutral-400);
--text-secondary-light: var(--neutral-500);
--text-secondary-dark: var(--neutral-500);
--text-tertiary-light: var(--neutral-400);
--text-tertiary-dark: var(--neutral-400);
--text-inverted-light: var(--neutral-0);
--text-inverted-dark: var(--neutral-1000);
--text-brand-light: var(--primary-800);
--text-brand-dark: var(--primary-200);
--text-link-light: var(--primary-700);
--text-link-dark: var(--primary-400);
--border-on-inverted-light: var(--border-divider-border-on-inverted);
--border-on-inverted-dark: var(--border-divider-border-primary);
--border-on-brand-light: var(--primary-200);
--border-on-brand-dark: var(--primary-200);
--border-on-accent-light: var(--violet-200);
--border-on-accent-dark: var(--violet-200);
--bg-primary-light: var(--bg-primary);
--bg-primary-dark: var(--neutral-950);
--bg-secondary-light: var(--bg-secondary);
--bg-secondary-dark: var(--neutral-900);
--bg-tertiary-light: var(--bg-tertiary);
--bg-tertiary-dark: var(--neutral-700);
--bg-inverted-light: var(--bg-inverted);
--bg-inverted-dark: var(--neutral-50);
--bg-brand-light: var(--primary-800);
--bg-brand-dark: var(--primary-200);
--bg-accent-light: var(--violet-800);
--bg-accent-dark: var(--violet-200);
--bg-success-light: var(--success-800);
--bg-success-dark: var(--success-200);
--bg-danger-light: var(--danger-800);
--bg-danger-dark: var(--danger-200);
--bg-warning-light: var(--warning-800);
--bg-warning-dark: var(--warning-200);
--border-divider-in-card-light: rgba(34 36 38 / 0.1);
--border-divider-in-card-dark: rgba(34 36 38 / 0.9);
--special-orange-dark-light: var(--orange-800);
--special-orange-dark-dark: var(--orange-900);
--special-orange-light: var(--orange-600);
--special-orange-dark: var(--orange-200);
--special-orange-light-light: var(--orange-200);
--special-orange-light-dark: var(--orange-300);
--special-orange-secondary-light: var(--orange-50);
--special-orange-secondary-dark: var(--orange-950);
--text-accent-light: var(--violet-800);
--text-accent-dark: var(--violet-300);
--icons-inverted-light: var(--neutral-0);
--icons-inverted-dark: var(--neutral-1000);
--bg-primary-subtle-light: rgba(0 93 147 / 0.2);
--bg-primary-subtle-dark: rgba(182 230 255 / 0.2);
--bg-info-subtle-light: rgba(0 131 210 / 0.2);
--bg-info-subtle-dark: rgba(45 189 255 / 0.2);
--bg-danger-subtle-light: rgba(174 6 6 / 0.2);
--bg-danger-subtle-dark: rgba(255 193 193 / 0.2);
--bg-warning-subtle-light: rgba(138 90 9 / 0.2);
--bg-warning-subtle-dark: rgba(254 255 133 / 0.2);
--bg-success-subtle-light: rgba(44 84 32 / 0.2);
--bg-success-subtle-dark: rgba(192 233 173 / 0.2);
--bg-accent-subtle-light: rgba(55 48 163 / 0.2);
--bg-accent-subtle-dark: rgba(202 199 254 / 0.2);
--border-brand-light: var(--primary-800);
--border-brand-dark: var(--primary-200);
--text-success-light: var(--success-800);
--text-success-dark: var(--success-300);
--border-success-light: var(--bg-hover-success);
--border-success-dark: var(--success-200);
--border-warning-light: var(--bg-hover-warning);
--border-warning-dark: var(--warning-200);
--text-warning-light: var(--warning-800);
--text-warning-dark: var(--warning-300);
--text-danger-light: var(--danger-800);
--text-danger-dark: var(--danger-300);
--border-danger-light: var(--bg-hover-danger);
--border-danger-dark: var(--danger-200);
--bg-info-light: var(--primary-600);
--bg-info-dark: var(--primary-400);
--bg-active-light: var(--bg-brand);
--bg-active-dark: var(--primary-200);
--border-active-light: var(--bg-active);
--border-active-dark: var(--bg-active);
--border-disabled-light: var(--neutral-500);
--border-disabled-dark: var(--neutral-300);
--interaction-secondary-hover-light: var(--gray-600);
--interaction-secondary-hover-dark: var(--gray-200);
--interaction-secondary-active-light: var(--interaction-secondary-hover);
--interaction-secondary-active-dark: var(--interaction-secondary-hover);
--interaction-secondary-focused-light: var(--interaction-secondary-hover);
--interaction-secondary-focused-dark: var(--interaction-secondary-hover);
--interaction-tertiary-hover-light: var(--brand-primitive-brand-200);
--interaction-tertiary-hover-dark: var(--brand-primitive-brand-600);
--interaction-tertiary-active-light: var(--interaction-tertiary-hover);
--interaction-tertiary-active-dark: var(--interaction-tertiary-hover);
--interaction-tertiary-focused-light: var(--interaction-tertiary-hover);
--interaction-tertiary-focused-dark: var(--interaction-tertiary-hover);
--border-accent-light: var(--violet-800);
--border-accent-dark: var(--violet-200);
--interaction-success-hover-light: var(--special-success-dark);
--interaction-success-hover-dark: var(--special-success-light);
--interaction-warning-hover-light: var(--special-warning-dark);
--interaction-warning-hover-dark: var(--special-warning-light);
--interaction-danger-hover-light: var(--special-danger-dark);
--interaction-danger-hover-dark: var(--special-danger-light);
--border-info-light: var(--brand-primitive-brand-400);
--border-info-dark: var(--primary-50);
--text-info-light: var(--neutral-600);
--text-info-dark: var(--neutral-300);
--interaction-accent-hover-light: var(--violet-700);
--interaction-accent-hover-dark: var(--violet-200);
--border-secondary-light: var(--neutral-200);
--border-secondary-dark: var(--neutral-100);
--bg-hover-light: var(--primary-600);
--bg-hover-dark: var(--primary-400);
--charts-series-9-light: #f94144;
--charts-series-9-dark: #f94144;
--bg-tertiary-subtle-light: rgba(226 231 235 / 0.2);
--bg-tertiary-subtle-dark: rgba(67 79 91 / 0.2);
--bg-transparent-light: rgba(255 255 255 / 0);
--bg-transparent-dark: rgba(0 0 0 / 0);
--bg-hover-brand-light: var(--primary-600);
--bg-hover-brand-dark: var(--primary-400);
--text-hover-brand-light: var(--neutral-50);
--text-hover-brand-dark: var(--neutral-950);
--bg-hover-info-light: var(--primary-800);
--bg-hover-info-dark: var(--primary-200);
--bg-hover-accent-light: var(--violet-600);
--bg-hover-accent-dark: var(--violet-400);
--bg-hover-success-light: var(--success-600);
--bg-hover-success-dark: var(--success-400);
--bg-hover-danger-light: var(--danger-600);
--bg-hover-danger-dark: var(--danger-400);
--bg-hover-warning-light: var(--warning-600);
--bg-hover-warning-dark: var(--warning-400);
--icons-disabled-light: var(--neutral-500);
--icons-disabled-dark: var(--neutral-400);
--text-link-hover-light: var(--primary-800);
--text-link-hover-dark: var(--primary-400);
--cf-blue-light-light: #00adef;
--cf-blue-light-dark: #00b9ff;
--cf-blue-dark-light: #1d75bc;
--cf-blue-dark-dark: #269eff;
--cf-purple-light: #2c2f75;
--cf-purple-dark: #5f65ff;
--gray-950-light: var(--neutral-950);
--gray-950-dark: var(--neutral-950);
--gray-1000-light: var(--neutral-1000);
--gray-1000-dark: var(--neutral-1000);
--gray-0-light: var(--neutral-0);
--gray-0-dark: var(--neutral-0);
--bg-hover-alt-light: rgba(218 222 224 / 0.2);
--bg-hover-alt-dark: var(--gray-600);
--text-quaternary-light: rgba(60 60 67 / 0.18);
--text-quaternary-dark: rgba(188 188 211 / 0.18);
--border-transparent-light: rgba(255 255 255 / 0);
--border-transparent-dark: rgba(255 255 255 / 0);
--accent-primary-light: var(--primary-800);
--accent-primary-dark: var(--primary-200);
--accent-primary-light-light: var(--primary-700);
--accent-primary-light-dark: var(--primary-300);
--accent-primary-lighter-light: var(--primary-100);
--accent-primary-lighter-dark: var(--primary-900);
--border-hover-light: var(--bg-info-subtle);
--border-hover-dark: var(--bg-info-subtle);
--text-on-brand-light: var(--text-inverted);
--text-on-brand-dark: var(--text-inverted);
--blue-gradient-light: rgba(29 117 188 / 0.56);
--blue-gradient-dark: rgba(185 228 254 / 0.56);
--icons-gradient-stop-1-light: var(--cas-400);
--icons-gradient-stop-1-dark: var(--cas-900);
--icons-gradient-stop-2-light: var(--gold-600);
--icons-gradient-stop-2-dark: var(--gold-600);
--text-active-light: var(--primary-600);
--text-active-dark: var(--primary-200);
--icons-secondary-light: var(--neutral-500);
--icons-secondary-dark: var(--neutral-500);
--cas-white-light: #ffffff;
--cas-white-dark: #ffffff;
--cas-black-light: #262522;
--cas-black-dark: #262522;
--enable-dark-mode-light: false;
--enable-dark-mode-dark: true;
--enable-shadows-light: true;
--enable-shadows-dark: true;
--enable-gradients-light: true;
--enable-gradients-dark: true;
--bg-light-subtle-light: rgba(226 231 235 / 0.2);
--bg-light-subtle-dark: rgba(23 23 23 / 0.2);
--bg-dark-subtle-light: var(--gray-200);
--bg-dark-subtle-dark: var(--gray-800);
--text-emphasis-light: var(--neutral-1000);
--text-emphasis-dark: var(--neutral-0);
--interaction-ishover-light: false;
--interaction-ishover-dark: false;
/* SIZING */
--grid-gap-sm-desktop: var(--sm);
--grid-gap-sm-compact: var(--sm);
--padding-xxl-desktop: var(--spacer-xxl);
--padding-xxl-compact: var(--spacer-xxl);
--padding-lg-desktop: var(--spacer-lg);
--padding-lg-compact: var(--spacer-lg);
--border-radius-none-desktop: var(--none);
--border-radius-none-compact: var(--none);
--border-radius-xs-desktop: var(--3xs);
--border-radius-xs-compact: var(--3xs);
--border-radius-sm-desktop: var(--xs);
--border-radius-sm-compact: var(--xxs);
--border-radius-md-desktop: var(--sm);
--border-radius-md-compact: var(--xs);
--border-radius-lg-desktop: var(--md);
--border-radius-lg-compact: var(--sm);
--border-radius-circle-desktop: 10000px;
--border-radius-circle-rem-desktop: 625rem;
--border-radius-circle-compact: 10000px;
--border-radius-circle-rem-compact: 625rem;
--spacer-none-desktop: var(--none);
--spacer-none-compact: var(--none);
--spacer-3xs-desktop: var(--3xs);
--spacer-3xs-compact: var(--3xs);
--spacer-xxs-desktop: var(--xxs);
--spacer-xxs-compact: var(--xxs);
--spacer-xs-desktop: var(--xs);
--spacer-xs-compact: var(--xs);
--spacer-sm-desktop: var(--sm);
--spacer-sm-compact: var(--sm);
--spacer-md-desktop: var(--md);
--spacer-md-compact: var(--md);
--spacer-lg-desktop: var(--lg);
--spacer-lg-compact: var(--lg);
--spacer-xl-desktop: var(--xl);
--spacer-xl-compact: var(--xl);
--spacer-xxl-desktop: var(--xxl);
--spacer-xxl-compact: var(--xl);
--spacer-xxxl-desktop: var(--3xl);
--spacer-xxxl-compact: var(--xxl);
--spacer-4xl-desktop: var(--4xl);
--spacer-4xl-compact: var(--3xl);
--spacer-spacing-gutter-desktop: var(--gutter);
--spacer-spacing-gutter-compact: var(--4xl);
--display-desktop: true;
--display-compact: false;
--border-width-default-desktop: 1px;
--border-width-default-rem-desktop: 0.0625rem;
--border-width-default-compact: 1px;
--border-width-default-rem-compact: 0.0625rem;
--border-width-sm-desktop: 0.5px;
--border-width-sm-rem-desktop: 0.0313rem;
--border-width-sm-compact: 0.5px;
--border-width-sm-rem-compact: 0.0313rem;
--border-width-lg-desktop: 4px;
--border-width-lg-rem-desktop: 0.25rem;
--border-width-lg-compact: 4px;
--border-width-lg-rem-compact: 0.25rem;
--grid-gap-md-desktop: var(--md);
--grid-gap-md-compact: var(--none);
--border-radius-pill-desktop: 999px;
--border-radius-pill-rem-desktop: 62.4375rem;
--border-radius-pill-compact: 999px;
--border-radius-pill-rem-compact: 62.4375rem;
--border-height-sm-desktop: 0.5px;
--border-height-sm-rem-desktop: 0.0313rem;
--border-height-sm-compact: 0.25px;
--border-height-sm-rem-compact: 0.0156rem;
--border-height-md-desktop: 1px;
--border-height-md-rem-desktop: 0.0625rem;
--border-height-md-compact: 0.5px;
--border-height-md-rem-compact: 0.0313rem;
--border-height-lg-desktop: 3px;
--border-height-lg-rem-desktop: 0.1875rem;
--border-height-lg-compact: 1.5px;
--border-height-lg-rem-compact: 0.0938rem;
--border-radius-xl-desktop: var(--xl);
--border-radius-xl-compact: var(--lg);
--border-style-desktop: "solid";
--border-style-compact: "solid";
/* FONTS */
--font-sans-serif-default: "IBM Plex Sans";
--font-sans-serif-wireframe: "Flow Circular";
--font-monospace-default: "IBM Plex Mono";
--font-monospace-wireframe: "Flow Circular";
--font-serif-default: "IBM Plex Serif";
--font-serif-wireframe: "Flow Circular";
--font-display-default: "Inter Display";
--font-display-wireframe: "Flow Circular";
--body-font-family-default: var(--font-sans-serif);
--body-font-family-wireframe: var(--font-sans-serif);
--font-family-fa-default: "Font Awesome 5 Free";
--font-family-fa-wireframe: "Font Awesome 5 Free";
--font-family-code-default: var(--font-monospace);
--font-family-code-wireframe: "Flow Circular";
/* TYPOGRAPHY */
--font-size-base: var(--font-size-base);
--font-size-root: "NULL";
--font-size-sm: var(--font-size-sm);
--font-size-lg: var(--font-size-h5);
--font-size-xs: var(--font-size-xs);
}