@esri/calcite-design-tokens 2.0.0-rc.0 → 2.0.0
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/css/breakpoint.css +1 -1
- package/dist/css/classes.css +25 -25
- package/dist/css/core.css +82 -115
- package/dist/css/dark.css +27 -25
- package/dist/css/global.css +29 -36
- package/dist/css/index.css +105 -97
- package/dist/css/light.css +27 -25
- package/dist/docs/core.json +8134 -0
- package/dist/docs/global.json +6617 -0
- package/dist/es6/core.d.ts +286 -319
- package/dist/es6/core.js +287 -320
- package/dist/es6/global.d.ts +101 -106
- package/dist/es6/global.js +116 -121
- package/dist/js/core.d.ts +98 -143
- package/dist/js/core.js +5442 -6029
- package/dist/js/global.d.ts +65 -66
- package/dist/js/global.js +2173 -2081
- package/dist/scss/breakpoints.scss +1 -1
- package/dist/scss/core.scss +82 -115
- package/dist/scss/dark.scss +27 -25
- package/dist/scss/global.scss +94 -0
- package/dist/scss/index.scss +53 -49
- package/dist/scss/light.scss +27 -25
- package/dist/scss/mixins.scss +24 -24
- package/package.json +5 -26
package/dist/scss/core.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat, 02 Dec 2023 04:05:26 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
$calcite-z-index-9: 900;
|
|
@@ -12,6 +12,82 @@ $calcite-z-index-4: 400;
|
|
|
12
12
|
$calcite-z-index-3: 300;
|
|
13
13
|
$calcite-z-index-1: 1;
|
|
14
14
|
$calcite-z-index-0: -999999;
|
|
15
|
+
$calcite-size-relative-auto: auto;
|
|
16
|
+
$calcite-size-relative-200: 200%;
|
|
17
|
+
$calcite-size-relative-162: 162.5%;
|
|
18
|
+
$calcite-size-relative-150: 150%;
|
|
19
|
+
$calcite-size-relative-137: 137.5%;
|
|
20
|
+
$calcite-size-relative-125: 125%;
|
|
21
|
+
$calcite-size-relative-100: 100%;
|
|
22
|
+
$calcite-size-relative-50: 50%;
|
|
23
|
+
$calcite-size-none: 0;
|
|
24
|
+
$calcite-size-288: 288px;
|
|
25
|
+
$calcite-size-256: 256px;
|
|
26
|
+
$calcite-size-224: 224px;
|
|
27
|
+
$calcite-size-192: 192px;
|
|
28
|
+
$calcite-size-160: 160px;
|
|
29
|
+
$calcite-size-144: 144px;
|
|
30
|
+
$calcite-size-128: 128px;
|
|
31
|
+
$calcite-size-112: 112px;
|
|
32
|
+
$calcite-size-96: 96px;
|
|
33
|
+
$calcite-size-80: 80px;
|
|
34
|
+
$calcite-size-72: 72px;
|
|
35
|
+
$calcite-size-64: 64px;
|
|
36
|
+
$calcite-size-56: 56px;
|
|
37
|
+
$calcite-size-48: 48px;
|
|
38
|
+
$calcite-size-44: 44px;
|
|
39
|
+
$calcite-size-40: 40px;
|
|
40
|
+
$calcite-size-36: 36px;
|
|
41
|
+
$calcite-size-32: 32px;
|
|
42
|
+
$calcite-size-28: 28px;
|
|
43
|
+
$calcite-size-24: 24px;
|
|
44
|
+
$calcite-size-20: 20px;
|
|
45
|
+
$calcite-size-16: 16px;
|
|
46
|
+
$calcite-size-14: 14px;
|
|
47
|
+
$calcite-size-12: 12px;
|
|
48
|
+
$calcite-size-10: 10px;
|
|
49
|
+
$calcite-size-8: 8px;
|
|
50
|
+
$calcite-size-6: 6px;
|
|
51
|
+
$calcite-size-4: 4px;
|
|
52
|
+
$calcite-size-2: 2px;
|
|
53
|
+
$calcite-size-1: 1px;
|
|
54
|
+
$calcite-opacity-100: 1;
|
|
55
|
+
$calcite-opacity-96: 0.96;
|
|
56
|
+
$calcite-opacity-92: 0.92;
|
|
57
|
+
$calcite-opacity-90: 0.9;
|
|
58
|
+
$calcite-opacity-85: 0.85;
|
|
59
|
+
$calcite-opacity-80: 0.8;
|
|
60
|
+
$calcite-opacity-70: 0.7;
|
|
61
|
+
$calcite-opacity-60: 0.6;
|
|
62
|
+
$calcite-opacity-50: 0.5;
|
|
63
|
+
$calcite-opacity-40: 0.4;
|
|
64
|
+
$calcite-opacity-30: 0.3;
|
|
65
|
+
$calcite-opacity-20: 0.2;
|
|
66
|
+
$calcite-opacity-10: 0.1;
|
|
67
|
+
$calcite-opacity-8: 0.08;
|
|
68
|
+
$calcite-opacity-4: 0.04;
|
|
69
|
+
$calcite-opacity-0: 0;
|
|
70
|
+
$calcite-font-text-case-capitalize: capitalize;
|
|
71
|
+
$calcite-font-text-case-lowercase: lowercase;
|
|
72
|
+
$calcite-font-text-case-uppercase: uppercase;
|
|
73
|
+
$calcite-font-text-case-none: none;
|
|
74
|
+
$calcite-font-text-decoration-underline: underline;
|
|
75
|
+
$calcite-font-text-decoration-none: none;
|
|
76
|
+
$calcite-font-weight-heavy: 900;
|
|
77
|
+
$calcite-font-weight-black: 900; // only for Avenir Next World (secondary font family)
|
|
78
|
+
$calcite-font-weight-extrabold: 800; // only for Avenir Next World (secondary font family)
|
|
79
|
+
$calcite-font-weight-bold: 700;
|
|
80
|
+
$calcite-font-weight-demi: 600;
|
|
81
|
+
$calcite-font-weight-medium-italic: "Medium Italic";
|
|
82
|
+
$calcite-font-weight-medium: 500;
|
|
83
|
+
$calcite-font-weight-regular: 400;
|
|
84
|
+
$calcite-font-weight-light: 300; // only for Avenir Next World (secondary font family)
|
|
85
|
+
$calcite-font-weight-thin: 100;
|
|
86
|
+
$calcite-font-weight-ultralight: 200; // only for Avenir Next World (secondary font family)
|
|
87
|
+
$calcite-font-style-italic: italic; // used in ratings
|
|
88
|
+
$calcite-font-family-monaco: Monaco;
|
|
89
|
+
$calcite-font-family-avenir-next-world: "Avenir Next World";
|
|
90
|
+
$calcite-font-family-avenir-next-pro: "Avenir Next LT Pro";
|
|
15
91
|
$calcite-container-size-1440: 1440px;
|
|
16
92
|
$calcite-container-size-1152: 1152px;
|
|
17
93
|
$calcite-container-size-854: 854px;
|
|
@@ -23,38 +99,6 @@ $calcite-container-size-328: 328px;
|
|
|
23
99
|
$calcite-container-size-320: 320px;
|
|
24
100
|
$calcite-container-size-154: 154px;
|
|
25
101
|
$calcite-container-size-0: 0;
|
|
26
|
-
$calcite-size-relative-full: 100%;
|
|
27
|
-
$calcite-size-relative-half: 50%;
|
|
28
|
-
$calcite-size-none: 0px;
|
|
29
|
-
$calcite-size-28: 288px;
|
|
30
|
-
$calcite-size-27: 256px;
|
|
31
|
-
$calcite-size-26: 224px;
|
|
32
|
-
$calcite-size-25: 192px;
|
|
33
|
-
$calcite-size-24: 160px;
|
|
34
|
-
$calcite-size-23: 144px;
|
|
35
|
-
$calcite-size-22: 128px;
|
|
36
|
-
$calcite-size-21: 112px;
|
|
37
|
-
$calcite-size-20: 96px;
|
|
38
|
-
$calcite-size-19: 80px;
|
|
39
|
-
$calcite-size-18: 72px;
|
|
40
|
-
$calcite-size-17: 64px;
|
|
41
|
-
$calcite-size-16: 56px;
|
|
42
|
-
$calcite-size-15: 48px;
|
|
43
|
-
$calcite-size-14: 44px;
|
|
44
|
-
$calcite-size-13: 40px;
|
|
45
|
-
$calcite-size-12: 36px;
|
|
46
|
-
$calcite-size-11: 32px;
|
|
47
|
-
$calcite-size-10: 28px;
|
|
48
|
-
$calcite-size-9: 24px;
|
|
49
|
-
$calcite-size-8: 20px;
|
|
50
|
-
$calcite-size-7: 16px;
|
|
51
|
-
$calcite-size-6: 14px;
|
|
52
|
-
$calcite-size-5: 12px;
|
|
53
|
-
$calcite-size-4: 10px;
|
|
54
|
-
$calcite-size-3: 8px;
|
|
55
|
-
$calcite-size-2: 6px;
|
|
56
|
-
$calcite-size-1: 4px;
|
|
57
|
-
$calcite-size-0: 2px;
|
|
58
102
|
$calcite-color-dark-blue-d-bb-430: #0087D7;
|
|
59
103
|
$calcite-color-dark-blue-d-bb-420: #00A0FF;
|
|
60
104
|
$calcite-color-dark-blue-d-bb-410: #47BBFF;
|
|
@@ -258,85 +302,8 @@ $calcite-color-neutral-blk-020: #eaeaea;
|
|
|
258
302
|
$calcite-color-neutral-blk-010: #f3f3f3;
|
|
259
303
|
$calcite-color-neutral-blk-005: #f8f8f8;
|
|
260
304
|
$calcite-color-neutral-blk-000: #ffffff;
|
|
261
|
-
$calcite-
|
|
262
|
-
$calcite-
|
|
263
|
-
$calcite-
|
|
264
|
-
$calcite-
|
|
265
|
-
$calcite-
|
|
266
|
-
$calcite-opacity-80: 0.8;
|
|
267
|
-
$calcite-opacity-70: 0.7;
|
|
268
|
-
$calcite-opacity-60: 0.6;
|
|
269
|
-
$calcite-opacity-50: 0.5;
|
|
270
|
-
$calcite-opacity-40: 0.4;
|
|
271
|
-
$calcite-opacity-30: 0.3;
|
|
272
|
-
$calcite-opacity-20: 0.2;
|
|
273
|
-
$calcite-opacity-10: 0.1;
|
|
274
|
-
$calcite-opacity-8: 0.08;
|
|
275
|
-
$calcite-opacity-4: 0.04;
|
|
276
|
-
$calcite-opacity-0: 0;
|
|
277
|
-
$calcite-font-text-case-capitalize: capitalize;
|
|
278
|
-
$calcite-font-text-case-lowercase: lowercase;
|
|
279
|
-
$calcite-font-text-case-uppercase: uppercase;
|
|
280
|
-
$calcite-font-text-case-none: none;
|
|
281
|
-
$calcite-font-text-decoration-underline: underline;
|
|
282
|
-
$calcite-font-text-decoration-none: none;
|
|
283
|
-
$calcite-font-paragraph-spacing-normal: 10px;
|
|
284
|
-
$calcite-font-letter-spacing-wide: 0.4px;
|
|
285
|
-
$calcite-font-letter-spacing-normal: 0px;
|
|
286
|
-
$calcite-font-letter-spacing-tight: -0.4px;
|
|
287
|
-
$calcite-font-size-15: 120px;
|
|
288
|
-
$calcite-font-size-14: 96px;
|
|
289
|
-
$calcite-font-size-13: 80px;
|
|
290
|
-
$calcite-font-size-12: 72px;
|
|
291
|
-
$calcite-font-size-11: 64px;
|
|
292
|
-
$calcite-font-size-10: 56px;
|
|
293
|
-
$calcite-font-size-9: 48px;
|
|
294
|
-
$calcite-font-size-8: 40px;
|
|
295
|
-
$calcite-font-size-7: 32px;
|
|
296
|
-
$calcite-font-size-6: 24px;
|
|
297
|
-
$calcite-font-size-5: 20px;
|
|
298
|
-
$calcite-font-size-4: 18px;
|
|
299
|
-
$calcite-font-size-3: 16px;
|
|
300
|
-
$calcite-font-size-2: 14px;
|
|
301
|
-
$calcite-font-size-1: 12px;
|
|
302
|
-
$calcite-font-size-0: 10px;
|
|
303
|
-
$calcite-font-line-height-relative-loose: 2; // 2
|
|
304
|
-
$calcite-font-line-height-relative-relaxed: 1.625; // 1.625
|
|
305
|
-
$calcite-font-line-height-relative-normal: 1.5; // 1.5
|
|
306
|
-
$calcite-font-line-height-relative-snug: 1.375; // 1.375
|
|
307
|
-
$calcite-font-line-height-relative-tight: 1.25; // 1.25
|
|
308
|
-
$calcite-font-line-height-relative: auto; // 1
|
|
309
|
-
$calcite-font-line-height-fixed-12: 80px;
|
|
310
|
-
$calcite-font-line-height-fixed-11: 72px;
|
|
311
|
-
$calcite-font-line-height-fixed-10: 64px;
|
|
312
|
-
$calcite-font-line-height-fixed-9: 56px;
|
|
313
|
-
$calcite-font-line-height-fixed-8: 48px;
|
|
314
|
-
$calcite-font-line-height-fixed-7: 40px;
|
|
315
|
-
$calcite-font-line-height-fixed-6: 36px;
|
|
316
|
-
$calcite-font-line-height-fixed-5: 32px;
|
|
317
|
-
$calcite-font-line-height-fixed-4: 28px;
|
|
318
|
-
$calcite-font-line-height-fixed-3: 24px;
|
|
319
|
-
$calcite-font-line-height-fixed-2: 20px;
|
|
320
|
-
$calcite-font-line-height-fixed-1: 16px;
|
|
321
|
-
$calcite-font-line-height-fixed-0: 12px;
|
|
322
|
-
$calcite-font-weight-heavy: 900;
|
|
323
|
-
$calcite-font-weight-black: 900; // only for Avenir Next World (secondary font family)
|
|
324
|
-
$calcite-font-weight-extrabold: 800; // only for Avenir Next World (secondary font family)
|
|
325
|
-
$calcite-font-weight-bold: 700;
|
|
326
|
-
$calcite-font-weight-demi: 600;
|
|
327
|
-
$calcite-font-weight-medium-italic: "Medium Italic";
|
|
328
|
-
$calcite-font-weight-medium: 500;
|
|
329
|
-
$calcite-font-weight-regular: 400;
|
|
330
|
-
$calcite-font-weight-light: 300; // only for Avenir Next World (secondary font family)
|
|
331
|
-
$calcite-font-weight-thin: 100;
|
|
332
|
-
$calcite-font-weight-ultralight: 200; // only for Avenir Next World (secondary font family)
|
|
333
|
-
$calcite-font-style-italic: italic; // used in ratings
|
|
334
|
-
$calcite-font-family-code: Monaco;
|
|
335
|
-
$calcite-font-family-secondary: "Avenir Next World";
|
|
336
|
-
$calcite-font-family-primary: "Avenir Next LT Pro";
|
|
337
|
-
$calcite-box-shadow-none: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
|
|
338
|
-
$calcite-box-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
|
|
339
|
-
$calcite-box-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
|
|
340
|
-
$calcite-box-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
|
|
341
|
-
$calcite-box-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
|
|
342
|
-
$calcite-box-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
|
|
305
|
+
$calcite-shadow-4: 0 12px 32px -2px rgba(var(--calcite-color-neutral-blk-240), 0.1);
|
|
306
|
+
$calcite-shadow-3: 0 4px 20px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
|
|
307
|
+
$calcite-shadow-2: 0 4px 16px 0 rgba(var(--calcite-color-neutral-blk-240), 0.08);
|
|
308
|
+
$calcite-shadow-1: 0 2px 8px 0 rgba(var(--calcite-color-neutral-blk-240), 0.04);
|
|
309
|
+
$calcite-shadow-0: 0 0 0 0 rgba(var(--calcite-color-neutral-blk-240), 0);
|
package/dist/scss/dark.scss
CHANGED
|
@@ -1,23 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat, 02 Dec 2023 04:05:27 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
$calcite-color-
|
|
7
|
-
$calcite-color-
|
|
8
|
-
$calcite-color-inverse: #f8f8f8;
|
|
9
|
-
$calcite-color-danger-press: #d90012;
|
|
10
|
-
$calcite-color-danger-hover: #ff0015;
|
|
11
|
-
$calcite-color-danger: #FE583E;
|
|
12
|
-
$calcite-color-warning-press: #f5d000;
|
|
13
|
-
$calcite-color-warning-hover: #ffee33;
|
|
14
|
-
$calcite-color-warning: #FFC900;
|
|
15
|
-
$calcite-color-success-press: #00b81b;
|
|
16
|
-
$calcite-color-success-hover: #3bed52;
|
|
17
|
-
$calcite-color-success: #36DA43;
|
|
18
|
-
$calcite-color-info-press: #009af2;
|
|
19
|
-
$calcite-color-info-hover: #3db8ff;
|
|
20
|
-
$calcite-color-info: #00A0FF;
|
|
6
|
+
$calcite-color-border-white: #f8f8f8;
|
|
7
|
+
$calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
|
|
21
8
|
$calcite-color-border-input: #757575;
|
|
22
9
|
$calcite-color-border-3: #404040;
|
|
23
10
|
$calcite-color-border-2: #4a4a4a;
|
|
@@ -27,17 +14,32 @@ $calcite-color-text-inverse: #151515;
|
|
|
27
14
|
$calcite-color-text-3: #9f9f9f;
|
|
28
15
|
$calcite-color-text-2: #bfbfbf;
|
|
29
16
|
$calcite-color-text-1: #ffffff;
|
|
17
|
+
$calcite-color-inverse-press: #f3f3f3;
|
|
18
|
+
$calcite-color-inverse-hover: #ffffff;
|
|
19
|
+
$calcite-color-inverse: #f8f8f8;
|
|
20
|
+
$calcite-color-status-danger-press: #d90012;
|
|
21
|
+
$calcite-color-status-danger-hover: #ff0015;
|
|
22
|
+
$calcite-color-status-danger: #FE583E;
|
|
23
|
+
$calcite-color-status-warning-press: #f5d000;
|
|
24
|
+
$calcite-color-status-warning-hover: #ffee33;
|
|
25
|
+
$calcite-color-status-warning: #FFC900;
|
|
26
|
+
$calcite-color-status-success-press: #00b81b;
|
|
27
|
+
$calcite-color-status-success-hover: #3bed52;
|
|
28
|
+
$calcite-color-status-success: #36DA43;
|
|
29
|
+
$calcite-color-status-info-press: #009af2;
|
|
30
|
+
$calcite-color-status-info-hover: #3db8ff;
|
|
31
|
+
$calcite-color-status-info: #00A0FF;
|
|
32
|
+
$calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
|
|
33
|
+
$calcite-color-brand-press: #00619b;
|
|
34
|
+
$calcite-color-brand-hover: #007ac2;
|
|
35
|
+
$calcite-color-brand: #009af2;
|
|
36
|
+
$calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
37
|
+
$calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
38
|
+
$calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
|
|
39
|
+
$calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
|
|
40
|
+
$calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
30
41
|
$calcite-color-foreground-current: #214155;
|
|
31
42
|
$calcite-color-foreground-3: #151515;
|
|
32
43
|
$calcite-color-foreground-2: #202020;
|
|
33
44
|
$calcite-color-foreground-1: #2b2b2b;
|
|
34
|
-
$calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
|
|
35
|
-
$calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
36
|
-
$calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
|
|
37
|
-
$calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
|
|
38
|
-
$calcite-color-background-transparent: rgba(0, 0, 0, 0);
|
|
39
45
|
$calcite-color-background: #353535;
|
|
40
|
-
$calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
|
|
41
|
-
$calcite-color-brand-press: #00619b;
|
|
42
|
-
$calcite-color-brand-hover: #007ac2;
|
|
43
|
-
$calcite-color-brand: #009af2;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly
|
|
3
|
+
* Generated on Sat, 02 Dec 2023 04:05:27 GMT
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
$calcite-z-index-tooltip: 901;
|
|
7
|
+
$calcite-z-index-popup: 900;
|
|
8
|
+
$calcite-z-index-modal: 800;
|
|
9
|
+
$calcite-z-index-overlay: 700;
|
|
10
|
+
$calcite-z-index-dropdown: 600;
|
|
11
|
+
$calcite-z-index-toast: 500;
|
|
12
|
+
$calcite-z-index-header: 400;
|
|
13
|
+
$calcite-z-index-sticky: 300;
|
|
14
|
+
$calcite-z-index: 1;
|
|
15
|
+
$calcite-z-index-deep: -999999;
|
|
16
|
+
$calcite-spacing-xxxl: 32px;
|
|
17
|
+
$calcite-spacing-xxl: 20px;
|
|
18
|
+
$calcite-spacing-xl: 16px;
|
|
19
|
+
$calcite-spacing-lg: 14px;
|
|
20
|
+
$calcite-spacing-md: 12px;
|
|
21
|
+
$calcite-spacing-sm: 8px;
|
|
22
|
+
$calcite-spacing-xs: 6px;
|
|
23
|
+
$calcite-spacing-xxs: 4px;
|
|
24
|
+
$calcite-spacing-base: 2px;
|
|
25
|
+
$calcite-spacing-px: 1px;
|
|
26
|
+
$calcite-size-xxxl: 32px;
|
|
27
|
+
$calcite-size-xxl: 24px;
|
|
28
|
+
$calcite-size-xl: 20px;
|
|
29
|
+
$calcite-size-lg: 16px;
|
|
30
|
+
$calcite-size-md-plus: 14px;
|
|
31
|
+
$calcite-size-md: 12px;
|
|
32
|
+
$calcite-size-sm-plus: 10px;
|
|
33
|
+
$calcite-size-sm: 8px;
|
|
34
|
+
$calcite-size-xs: 6px;
|
|
35
|
+
$calcite-size-xxs: 4px;
|
|
36
|
+
$calcite-size-xxxs: 2px;
|
|
37
|
+
$calcite-size-px: 1px;
|
|
38
|
+
$calcite-opacity-disabled: 0.5;
|
|
39
|
+
$calcite-opacity-full: 1;
|
|
40
|
+
$calcite-opacity-dark: 0.85;
|
|
41
|
+
$calcite-opacity-half: 0.5;
|
|
42
|
+
$calcite-opacity-light: 0.4;
|
|
43
|
+
$calcite-font-text-case-capitalize: capitalize;
|
|
44
|
+
$calcite-font-text-case-lowercase: lowercase;
|
|
45
|
+
$calcite-font-text-case-uppercase: uppercase;
|
|
46
|
+
$calcite-font-text-case-none: none;
|
|
47
|
+
$calcite-font-text-decoration-underline: underline;
|
|
48
|
+
$calcite-font-text-decoration-none: none;
|
|
49
|
+
$calcite-font-paragraph-spacing-normal: 4px;
|
|
50
|
+
$calcite-font-letter-spacing-wide: 0.4;
|
|
51
|
+
$calcite-font-letter-spacing-normal: 0;
|
|
52
|
+
$calcite-font-letter-spacing-tight: -0.4;
|
|
53
|
+
$calcite-font-line-height-relative-loose: 2; // 2
|
|
54
|
+
$calcite-font-line-height-relative-relaxed: 1.625; // 1.625
|
|
55
|
+
$calcite-font-line-height-relative-normal: 1.5; // 1.5
|
|
56
|
+
$calcite-font-line-height-relative-snug: 1.375; // 1.375
|
|
57
|
+
$calcite-font-line-height-relative-tight: 1.25; // 1.25
|
|
58
|
+
$calcite-font-line-height-relative: auto; // 1
|
|
59
|
+
$calcite-font-line-height-fixed-xl: 24px;
|
|
60
|
+
$calcite-font-line-height-fixed-lg: 20px;
|
|
61
|
+
$calcite-font-line-height-fixed-base: 16px;
|
|
62
|
+
$calcite-font-line-height-fixed-sm: 12px;
|
|
63
|
+
$calcite-font-style-emphasis: italic; // used in ratings
|
|
64
|
+
$calcite-font-size-xxl: 24px;
|
|
65
|
+
$calcite-font-size-xl: 20px;
|
|
66
|
+
$calcite-font-size-lg: 18px;
|
|
67
|
+
$calcite-font-size-md: 16px;
|
|
68
|
+
$calcite-font-size: 14px;
|
|
69
|
+
$calcite-font-size-sm: 12px;
|
|
70
|
+
$calcite-font-size-xs: 10px;
|
|
71
|
+
$calcite-font-weight-bold: 700;
|
|
72
|
+
$calcite-font-weight-semibold: 600;
|
|
73
|
+
$calcite-font-weight-medium: 500;
|
|
74
|
+
$calcite-font-weight-regular: 400;
|
|
75
|
+
$calcite-font-weight-normal: 400; // For backwards compatibility only. This token will be removed from the published tokens in the next major in favor of the more descriptive word "regular"
|
|
76
|
+
$calcite-font-weight-light: 300; // For Avenir Next World (secondary font family)
|
|
77
|
+
$calcite-font-family-code: Monaco;
|
|
78
|
+
$calcite-font-family: "Avenir Next LT Pro";
|
|
79
|
+
$calcite-container-size-content-fixed: 1440px; // only for lg breakpoint fixed grid width
|
|
80
|
+
$calcite-container-size-content-fluid: 100%; // for fluid grid widths
|
|
81
|
+
$calcite-container-size-gutter: 16px;
|
|
82
|
+
$calcite-container-size-margin: 24px;
|
|
83
|
+
$calcite-color-background-none: rgba(#ffffff, 0);
|
|
84
|
+
$calcite-corner-radius-pill: 100%;
|
|
85
|
+
$calcite-corner-radius-round: 4px;
|
|
86
|
+
$calcite-corner-radius-sharp: 0;
|
|
87
|
+
$calcite-border-width-lg: 4px;
|
|
88
|
+
$calcite-border-width-md: 2px;
|
|
89
|
+
$calcite-border-width-sm: 1px;
|
|
90
|
+
$calcite-border-width-none: 0;
|
|
91
|
+
$calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
|
|
92
|
+
$calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
|
|
93
|
+
$calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
94
|
+
$calcite-corner-radius: var(--calcite-corner-radius-sharp);
|
package/dist/scss/index.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat, 02 Dec 2023 04:05:27 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import "./global.scss";
|
|
@@ -10,21 +10,8 @@
|
|
|
10
10
|
@import "./mixins.scss";
|
|
11
11
|
|
|
12
12
|
@mixin calcite-mode-light {
|
|
13
|
-
--calcite-color-
|
|
14
|
-
--calcite-color-
|
|
15
|
-
--calcite-color-inverse: #353535;
|
|
16
|
-
--calcite-color-danger-press: #7c1d13;
|
|
17
|
-
--calcite-color-danger-hover: #a82b1e;
|
|
18
|
-
--calcite-color-danger: #d83020;
|
|
19
|
-
--calcite-color-warning-press: #bfa200;
|
|
20
|
-
--calcite-color-warning-hover: #d9bc00;
|
|
21
|
-
--calcite-color-warning: #edd317;
|
|
22
|
-
--calcite-color-success-press: #1a6324;
|
|
23
|
-
--calcite-color-success-hover: #288835;
|
|
24
|
-
--calcite-color-success: #35ac46;
|
|
25
|
-
--calcite-color-info-press: #00304d;
|
|
26
|
-
--calcite-color-info-hover: #004874;
|
|
27
|
-
--calcite-color-info: #00619b;
|
|
13
|
+
--calcite-color-border-white: #ffffff;
|
|
14
|
+
--calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
|
|
28
15
|
--calcite-color-border-input: #949494;
|
|
29
16
|
--calcite-color-border-3: #dfdfdf;
|
|
30
17
|
--calcite-color-border-2: #d4d4d4;
|
|
@@ -34,38 +21,40 @@
|
|
|
34
21
|
--calcite-color-text-3: #6a6a6a;
|
|
35
22
|
--calcite-color-text-2: #4a4a4a;
|
|
36
23
|
--calcite-color-text-1: #151515;
|
|
24
|
+
--calcite-color-inverse-press: #202020;
|
|
25
|
+
--calcite-color-inverse-hover: #2b2b2b;
|
|
26
|
+
--calcite-color-inverse: #353535;
|
|
27
|
+
--calcite-color-status-danger-press: #7c1d13;
|
|
28
|
+
--calcite-color-status-danger-hover: #a82b1e;
|
|
29
|
+
--calcite-color-status-danger: #d83020;
|
|
30
|
+
--calcite-color-status-warning-press: #bfa200;
|
|
31
|
+
--calcite-color-status-warning-hover: #d9bc00;
|
|
32
|
+
--calcite-color-status-warning: #edd317;
|
|
33
|
+
--calcite-color-status-success-press: #1a6324;
|
|
34
|
+
--calcite-color-status-success-hover: #288835;
|
|
35
|
+
--calcite-color-status-success: #35ac46;
|
|
36
|
+
--calcite-color-status-info-press: #00304d;
|
|
37
|
+
--calcite-color-status-info-hover: #004874;
|
|
38
|
+
--calcite-color-status-info: #00619b;
|
|
39
|
+
--calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
|
|
40
|
+
--calcite-color-brand-press: #004874;
|
|
41
|
+
--calcite-color-brand-hover: #00619b;
|
|
42
|
+
--calcite-color-brand: #007ac2;
|
|
43
|
+
--calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
44
|
+
--calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
45
|
+
--calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
46
|
+
--calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
47
|
+
--calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
37
48
|
--calcite-color-foreground-current: #c7eaff;
|
|
38
49
|
--calcite-color-foreground-3: #eaeaea;
|
|
39
50
|
--calcite-color-foreground-2: #f3f3f3;
|
|
40
51
|
--calcite-color-foreground-1: #ffffff;
|
|
41
|
-
--calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
|
|
42
|
-
--calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
43
|
-
--calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
|
|
44
|
-
--calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
45
|
-
--calcite-color-background-transparent: rgba(255, 255, 255, 0);
|
|
46
52
|
--calcite-color-background: #f8f8f8;
|
|
47
|
-
--calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
|
|
48
|
-
--calcite-color-brand-press: #004874;
|
|
49
|
-
--calcite-color-brand-hover: #00619b;
|
|
50
|
-
--calcite-color-brand: #007ac2;
|
|
51
53
|
}
|
|
52
54
|
|
|
53
55
|
@mixin calcite-mode-dark {
|
|
54
|
-
--calcite-color-
|
|
55
|
-
--calcite-color-
|
|
56
|
-
--calcite-color-inverse: #f8f8f8;
|
|
57
|
-
--calcite-color-danger-press: #d90012;
|
|
58
|
-
--calcite-color-danger-hover: #ff0015;
|
|
59
|
-
--calcite-color-danger: #FE583E;
|
|
60
|
-
--calcite-color-warning-press: #f5d000;
|
|
61
|
-
--calcite-color-warning-hover: #ffee33;
|
|
62
|
-
--calcite-color-warning: #FFC900;
|
|
63
|
-
--calcite-color-success-press: #00b81b;
|
|
64
|
-
--calcite-color-success-hover: #3bed52;
|
|
65
|
-
--calcite-color-success: #36DA43;
|
|
66
|
-
--calcite-color-info-press: #009af2;
|
|
67
|
-
--calcite-color-info-hover: #3db8ff;
|
|
68
|
-
--calcite-color-info: #00A0FF;
|
|
56
|
+
--calcite-color-border-white: #f8f8f8;
|
|
57
|
+
--calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
|
|
69
58
|
--calcite-color-border-input: #757575;
|
|
70
59
|
--calcite-color-border-3: #404040;
|
|
71
60
|
--calcite-color-border-2: #4a4a4a;
|
|
@@ -75,18 +64,33 @@
|
|
|
75
64
|
--calcite-color-text-3: #9f9f9f;
|
|
76
65
|
--calcite-color-text-2: #bfbfbf;
|
|
77
66
|
--calcite-color-text-1: #ffffff;
|
|
67
|
+
--calcite-color-inverse-press: #f3f3f3;
|
|
68
|
+
--calcite-color-inverse-hover: #ffffff;
|
|
69
|
+
--calcite-color-inverse: #f8f8f8;
|
|
70
|
+
--calcite-color-status-danger-press: #d90012;
|
|
71
|
+
--calcite-color-status-danger-hover: #ff0015;
|
|
72
|
+
--calcite-color-status-danger: #FE583E;
|
|
73
|
+
--calcite-color-status-warning-press: #f5d000;
|
|
74
|
+
--calcite-color-status-warning-hover: #ffee33;
|
|
75
|
+
--calcite-color-status-warning: #FFC900;
|
|
76
|
+
--calcite-color-status-success-press: #00b81b;
|
|
77
|
+
--calcite-color-status-success-hover: #3bed52;
|
|
78
|
+
--calcite-color-status-success: #36DA43;
|
|
79
|
+
--calcite-color-status-info-press: #009af2;
|
|
80
|
+
--calcite-color-status-info-hover: #3db8ff;
|
|
81
|
+
--calcite-color-status-info: #00A0FF;
|
|
82
|
+
--calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
|
|
83
|
+
--calcite-color-brand-press: #00619b;
|
|
84
|
+
--calcite-color-brand-hover: #007ac2;
|
|
85
|
+
--calcite-color-brand: #009af2;
|
|
86
|
+
--calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
|
|
87
|
+
--calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
88
|
+
--calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
|
|
89
|
+
--calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
|
|
90
|
+
--calcite-color-transparent: rgba(255, 255, 255, 0);
|
|
78
91
|
--calcite-color-foreground-current: #214155;
|
|
79
92
|
--calcite-color-foreground-3: #151515;
|
|
80
93
|
--calcite-color-foreground-2: #202020;
|
|
81
94
|
--calcite-color-foreground-1: #2b2b2b;
|
|
82
|
-
--calcite-color-background-transparent-dismiss: rgba(43, 43, 43, 0.8);
|
|
83
|
-
--calcite-color-background-transparent-scrim: rgba(0, 0, 0, 0.85);
|
|
84
|
-
--calcite-color-background-transparent-press: rgba(255, 255, 255, 0.08);
|
|
85
|
-
--calcite-color-background-transparent-hover: rgba(255, 255, 255, 0.04);
|
|
86
|
-
--calcite-color-background-transparent: rgba(0, 0, 0, 0);
|
|
87
95
|
--calcite-color-background: #353535;
|
|
88
|
-
--calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
|
|
89
|
-
--calcite-color-brand-press: #00619b;
|
|
90
|
-
--calcite-color-brand-hover: #007ac2;
|
|
91
|
-
--calcite-color-brand: #009af2;
|
|
92
96
|
}
|
package/dist/scss/light.scss
CHANGED
|
@@ -1,23 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
3
|
+
* Generated on Sat, 02 Dec 2023 04:05:27 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
$calcite-color-
|
|
7
|
-
$calcite-color-
|
|
8
|
-
$calcite-color-inverse: #353535;
|
|
9
|
-
$calcite-color-danger-press: #7c1d13;
|
|
10
|
-
$calcite-color-danger-hover: #a82b1e;
|
|
11
|
-
$calcite-color-danger: #d83020;
|
|
12
|
-
$calcite-color-warning-press: #bfa200;
|
|
13
|
-
$calcite-color-warning-hover: #d9bc00;
|
|
14
|
-
$calcite-color-warning: #edd317;
|
|
15
|
-
$calcite-color-success-press: #1a6324;
|
|
16
|
-
$calcite-color-success-hover: #288835;
|
|
17
|
-
$calcite-color-success: #35ac46;
|
|
18
|
-
$calcite-color-info-press: #00304d;
|
|
19
|
-
$calcite-color-info-hover: #004874;
|
|
20
|
-
$calcite-color-info: #00619b;
|
|
6
|
+
$calcite-color-border-white: #ffffff;
|
|
7
|
+
$calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
|
|
21
8
|
$calcite-color-border-input: #949494;
|
|
22
9
|
$calcite-color-border-3: #dfdfdf;
|
|
23
10
|
$calcite-color-border-2: #d4d4d4;
|
|
@@ -27,17 +14,32 @@ $calcite-color-text-inverse: #ffffff;
|
|
|
27
14
|
$calcite-color-text-3: #6a6a6a;
|
|
28
15
|
$calcite-color-text-2: #4a4a4a;
|
|
29
16
|
$calcite-color-text-1: #151515;
|
|
17
|
+
$calcite-color-inverse-press: #202020;
|
|
18
|
+
$calcite-color-inverse-hover: #2b2b2b;
|
|
19
|
+
$calcite-color-inverse: #353535;
|
|
20
|
+
$calcite-color-status-danger-press: #7c1d13;
|
|
21
|
+
$calcite-color-status-danger-hover: #a82b1e;
|
|
22
|
+
$calcite-color-status-danger: #d83020;
|
|
23
|
+
$calcite-color-status-warning-press: #bfa200;
|
|
24
|
+
$calcite-color-status-warning-hover: #d9bc00;
|
|
25
|
+
$calcite-color-status-warning: #edd317;
|
|
26
|
+
$calcite-color-status-success-press: #1a6324;
|
|
27
|
+
$calcite-color-status-success-hover: #288835;
|
|
28
|
+
$calcite-color-status-success: #35ac46;
|
|
29
|
+
$calcite-color-status-info-press: #00304d;
|
|
30
|
+
$calcite-color-status-info-hover: #004874;
|
|
31
|
+
$calcite-color-status-info: #00619b;
|
|
32
|
+
$calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
|
|
33
|
+
$calcite-color-brand-press: #004874;
|
|
34
|
+
$calcite-color-brand-hover: #00619b;
|
|
35
|
+
$calcite-color-brand: #007ac2;
|
|
36
|
+
$calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
|
|
37
|
+
$calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
38
|
+
$calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
|
|
39
|
+
$calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
40
|
+
$calcite-color-transparent: rgba(0, 0, 0, 0);
|
|
30
41
|
$calcite-color-foreground-current: #c7eaff;
|
|
31
42
|
$calcite-color-foreground-3: #eaeaea;
|
|
32
43
|
$calcite-color-foreground-2: #f3f3f3;
|
|
33
44
|
$calcite-color-foreground-1: #ffffff;
|
|
34
|
-
$calcite-color-background-transparent-dismiss: rgba(255, 255, 255, 0.8);
|
|
35
|
-
$calcite-color-background-transparent-scrim: rgba(255, 255, 255, 0.85);
|
|
36
|
-
$calcite-color-background-transparent-press: rgba(0, 0, 0, 0.08);
|
|
37
|
-
$calcite-color-background-transparent-hover: rgba(0, 0, 0, 0.04);
|
|
38
|
-
$calcite-color-background-transparent: rgba(255, 255, 255, 0);
|
|
39
45
|
$calcite-color-background: #f8f8f8;
|
|
40
|
-
$calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
|
|
41
|
-
$calcite-color-brand-press: #004874;
|
|
42
|
-
$calcite-color-brand-hover: #00619b;
|
|
43
|
-
$calcite-color-brand: #007ac2;
|