@esri/calcite-design-tokens 3.0.1 → 3.0.2-next.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.
Files changed (34) hide show
  1. package/dist/css/{breakpoint.css → breakpoints.css} +21 -21
  2. package/dist/css/classes.css +157 -157
  3. package/dist/css/core.css +313 -317
  4. package/dist/css/dark.css +40 -40
  5. package/dist/css/global.css +108 -111
  6. package/dist/css/index.css +5 -5
  7. package/dist/css/light.css +41 -41
  8. package/dist/css/semantic.css +137 -0
  9. package/dist/docs/core.json +3143 -5334
  10. package/dist/docs/global.json +2375 -3570
  11. package/dist/docs/semantic.json +3767 -0
  12. package/dist/es6/breakpoints.d.ts +50 -0
  13. package/dist/es6/breakpoints.js +17 -0
  14. package/dist/es6/core.d.ts +344 -333
  15. package/dist/es6/core.js +37 -7
  16. package/dist/es6/global.d.ts +472 -273
  17. package/dist/es6/global.js +392 -115
  18. package/dist/es6/semantic.d.ts +175 -0
  19. package/dist/es6/semantic.js +154 -0
  20. package/dist/js/core.d.ts +396 -402
  21. package/dist/js/core.js +2901 -5404
  22. package/dist/js/global.d.ts +338 -343
  23. package/dist/js/global.js +2324 -3676
  24. package/dist/js/semantic.d.ts +199 -0
  25. package/dist/js/semantic.js +6894 -0
  26. package/dist/scss/breakpoints.scss +23 -23
  27. package/dist/scss/core.scss +314 -316
  28. package/dist/scss/dark.scss +41 -42
  29. package/dist/scss/global.scss +110 -116
  30. package/dist/scss/index.scss +4 -4
  31. package/dist/scss/light.scss +42 -43
  32. package/dist/scss/mixins.scss +190 -151
  33. package/dist/scss/semantic.scss +134 -0
  34. package/package.json +8 -5
package/dist/css/dark.css CHANGED
@@ -1,47 +1,47 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-border-white: #f8f8f8;
8
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
9
- --calcite-color-border-input: #757575;
10
- --calcite-color-border-3: #404040;
11
- --calcite-color-border-2: #4a4a4a;
12
- --calcite-color-border-1: #555555;
13
- --calcite-color-text-link: #00a0ff;
14
- --calcite-color-text-inverse: #151515;
15
- --calcite-color-text-3: #9f9f9f;
16
- --calcite-color-text-2: #bfbfbf;
17
- --calcite-color-text-1: #ffffff;
18
- --calcite-color-inverse-press: #f3f3f3;
19
- --calcite-color-inverse-hover: #ffffff;
20
- --calcite-color-inverse: #f8f8f8;
21
- --calcite-color-status-danger-press: #d90012;
22
- --calcite-color-status-danger-hover: #ff0015;
23
- --calcite-color-status-danger: #fe583e;
24
- --calcite-color-status-warning-press: #f5d000;
25
- --calcite-color-status-warning-hover: #ffee33;
26
- --calcite-color-status-warning: #ffc900;
27
- --calcite-color-status-success-press: #00b81b;
28
- --calcite-color-status-success-hover: #3bed52;
29
- --calcite-color-status-success: #36da43;
30
- --calcite-color-status-info-press: #009af2;
31
- --calcite-color-status-info-hover: #3db8ff;
32
- --calcite-color-status-info: #00a0ff;
33
- --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
34
- --calcite-color-brand-press: #00619b;
35
- --calcite-color-brand-hover: #007ac2;
36
- --calcite-color-brand: #009af2;
37
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
38
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
39
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
40
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
41
- --calcite-color-transparent: rgba(255, 255, 255, 0);
42
7
  --calcite-color-foreground-current: #214155;
43
- --calcite-color-foreground-3: #151515;
44
- --calcite-color-foreground-2: #202020;
45
- --calcite-color-foreground-1: #2b2b2b;
46
8
  --calcite-color-background: #353535;
9
+ --calcite-color-foreground-1: #2b2b2b;
10
+ --calcite-color-foreground-2: #202020;
11
+ --calcite-color-foreground-3: #151515;
12
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
13
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
14
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
15
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
16
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
17
+ --calcite-color-brand: #009af2;
18
+ --calcite-color-brand-hover: #007ac2;
19
+ --calcite-color-brand-press: #00619b;
20
+ --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
21
+ --calcite-color-status-info: #00a0ff;
22
+ --calcite-color-status-info-hover: #3db8ff;
23
+ --calcite-color-status-info-press: #009af2;
24
+ --calcite-color-status-success: #36da43;
25
+ --calcite-color-status-success-hover: #3bed52;
26
+ --calcite-color-status-success-press: #00b81b;
27
+ --calcite-color-status-warning: #ffc900;
28
+ --calcite-color-status-warning-hover: #ffee33;
29
+ --calcite-color-status-warning-press: #f5d000;
30
+ --calcite-color-status-danger: #fe583e;
31
+ --calcite-color-status-danger-hover: #ff0015;
32
+ --calcite-color-status-danger-press: #d90012;
33
+ --calcite-color-inverse: #f8f8f8;
34
+ --calcite-color-inverse-hover: #ffffff;
35
+ --calcite-color-inverse-press: #f3f3f3;
36
+ --calcite-color-text-1: #ffffff;
37
+ --calcite-color-text-2: #bfbfbf;
38
+ --calcite-color-text-3: #9f9f9f;
39
+ --calcite-color-text-inverse: #151515;
40
+ --calcite-color-text-link: #00a0ff;
41
+ --calcite-color-border-1: #555555;
42
+ --calcite-color-border-2: #4a4a4a;
43
+ --calcite-color-border-3: #404040;
44
+ --calcite-color-border-input: #757575;
45
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
46
+ --calcite-color-border-white: #f8f8f8;
47
47
  }
package/dist/css/global.css CHANGED
@@ -1,120 +1,117 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * File to be deprecated in next major release
4
+ * Do not edit directly, this file was auto-generated.
4
5
  */
5
6
 
6
7
  :root {
7
- --calcite-z-index-tooltip: 901;
8
- --calcite-z-index-popup: 900;
9
- --calcite-z-index-modal: 800;
10
- --calcite-z-index-overlay: 700;
11
- --calcite-z-index-dropdown: 600;
12
- --calcite-z-index-toast: 500;
13
- --calcite-z-index-header: 400;
14
- --calcite-z-index-sticky: 300;
15
- --calcite-z-index: 1;
16
- --calcite-z-index-deep: -999999;
17
- --calcite-spacing-xxxl: 2rem;
18
- --calcite-spacing-xxl: 1.5rem;
19
- --calcite-spacing-xl: 1.25rem;
20
- --calcite-spacing-lg: 1rem;
21
- --calcite-spacing-md-plus: 0.875rem;
22
- --calcite-spacing-md: 0.75rem;
23
- --calcite-spacing-sm-plus: 0.625rem;
24
- --calcite-spacing-sm: 0.5rem;
25
- --calcite-spacing-xs: 0.375rem;
26
- --calcite-spacing-xxs: 0.25rem;
27
- --calcite-spacing-base: 2px;
28
- --calcite-spacing-px: 1px;
29
- --calcite-spacing-none: 0;
30
- --calcite-spacing-fixed-xxxl: 32px; /* deprecated */
31
- --calcite-spacing-fixed-xxl: 20px; /* deprecated */
32
- --calcite-spacing-fixed-xl: 16px; /* deprecated */
33
- --calcite-spacing-fixed-lg: 14px; /* deprecated */
34
- --calcite-spacing-fixed-md: 12px; /* deprecated */
35
- --calcite-spacing-fixed-sm: 8px; /* deprecated */
36
- --calcite-spacing-fixed-xs: 6px; /* deprecated */
37
- --calcite-spacing-fixed-xxs: 4px; /* deprecated */
38
- --calcite-size-xxxl: 6rem;
39
- --calcite-size-xxl: 4rem;
40
- --calcite-size-xl: 3rem;
41
- --calcite-size-lg: 2.75rem;
42
- --calcite-size-md: 2rem;
43
- --calcite-size-sm: 1.5rem;
44
- --calcite-size-xs: 1rem;
45
- --calcite-size-xxs: 0.875rem;
46
- --calcite-size-xxxs: 0.75rem;
47
- --calcite-size-px: 1px;
48
- --calcite-size-fixed-xxxl: 32px; /* deprecated */
49
- --calcite-size-fixed-xxl: 24px; /* deprecated */
50
- --calcite-size-fixed-xl: 20px; /* deprecated */
51
- --calcite-size-fixed-lg: 16px; /* deprecated */
52
- --calcite-size-fixed-md-plus: 14px; /* deprecated */
53
- --calcite-size-fixed-md: 12px; /* deprecated */
54
- --calcite-size-fixed-sm-plus: 10px; /* deprecated */
55
- --calcite-size-fixed-sm: 8px; /* deprecated */
56
- --calcite-size-fixed-xs: 6px; /* deprecated */
57
- --calcite-size-fixed-xxs: 4px; /* deprecated */
58
- --calcite-size-fixed-xxxs: 2px; /* deprecated */
59
- --calcite-opacity-disabled: 0.5;
60
- --calcite-opacity-full: 1;
61
- --calcite-opacity-dark: 0.85;
62
- --calcite-opacity-half: 0.5;
63
- --calcite-opacity-light: 0.4;
64
- --calcite-font-text-case-capitalize: capitalize; /* Deprecated */
65
- --calcite-font-text-case-lowercase: lowercase; /* Deprecated */
66
- --calcite-font-text-case-uppercase: uppercase; /* Deprecated */
67
- --calcite-font-text-case-none: none; /* Deprecated */
68
- --calcite-font-text-decoration-underline: underline; /* Deprecated */
69
- --calcite-font-text-decoration-none: none; /* Deprecated */
70
- --calcite-font-paragraph-spacing-normal: 4px; /* Deprecated */
71
- --calcite-font-letter-spacing-wide: 0.4; /* Deprecated */
72
- --calcite-font-letter-spacing-normal: 0; /* Deprecated */
73
- --calcite-font-letter-spacing-tight: -0.4; /* Deprecated */
74
- --calcite-font-line-height-relative-loose: 2; /* 2 */
75
- --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
76
- --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
77
- --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
78
- --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
79
- --calcite-font-line-height-relative: auto; /* 1 */
80
- --calcite-font-line-height-fixed-xl: 24px;
81
- --calcite-font-line-height-fixed-lg: 20px;
82
- --calcite-font-line-height-fixed-base: 16px;
83
- --calcite-font-line-height-fixed-sm: 12px;
84
- --calcite-font-style-emphasis: italic; /* used in ratings */
85
- --calcite-font-size-xxl: 24px;
86
- --calcite-font-size-xl: 20px;
87
- --calcite-font-size-lg: 18px;
88
- --calcite-font-size-md: 16px;
89
- --calcite-font-size: 14px;
90
- --calcite-font-size-sm: 12px;
91
- --calcite-font-size-xs: 10px;
92
- --calcite-font-weight-bold: 600;
93
- --calcite-font-weight-semibold: 600;
94
- --calcite-font-weight-medium: 500;
8
+ --calcite-border-width-none: 0;
9
+ --calcite-border-width-sm: 1px;
10
+ --calcite-border-width-md: 2px;
11
+ --calcite-border-width-lg: 4px;
12
+ --calcite-color-background-none: rgba(255, 255, 255, 0);
13
+ --calcite-container-size-margin: 24px;
14
+ --calcite-container-size-gutter: 16px;
15
+ --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
16
+ --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
17
+ --calcite-corner-radius-sharp: 0;
18
+ --calcite-corner-radius-round: 4px;
19
+ --calcite-corner-radius-pill: 100%;
20
+ --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /* Primary font with fallbacks */
21
+ --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /* Font family for code with fallbacks */
22
+ --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
95
23
  --calcite-font-weight-regular: 400;
96
24
  --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" */
97
- --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
98
- --calcite-font-family-code:
99
- Monaco, Consolas, "Andale Mono", "Lucida Console", monospace; /* Font family for code with fallbacks */
100
- --calcite-font-family:
101
- "Avenir Next", Avenir, "Helvetica Neue", sans-serif; /* Primary font with fallbacks */
102
- --calcite-corner-radius-pill: 100%;
103
- --calcite-corner-radius-round: 4px;
104
- --calcite-corner-radius-sharp: 0;
105
- --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
106
- --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
107
- --calcite-container-size-gutter: 16px;
108
- --calcite-container-size-margin: 24px;
109
- --calcite-color-background-none: rgba(255, 255, 255, 0);
110
- --calcite-border-width-lg: 4px;
111
- --calcite-border-width-md: 2px;
112
- --calcite-border-width-sm: 1px;
113
- --calcite-border-width-none: 0;
114
- --calcite-shadow-md:
115
- 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
116
- --calcite-shadow-sm:
117
- 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
25
+ --calcite-font-weight-medium: 500;
26
+ --calcite-font-weight-semibold: 600;
27
+ --calcite-font-weight-bold: 600;
28
+ --calcite-font-size-xs: 10px;
29
+ --calcite-font-size-sm: 12px;
30
+ --calcite-font-size: 14px;
31
+ --calcite-font-size-md: 16px;
32
+ --calcite-font-size-lg: 18px;
33
+ --calcite-font-size-xl: 20px;
34
+ --calcite-font-size-xxl: 24px;
35
+ --calcite-font-style-emphasis: italic; /* used in ratings */
36
+ --calcite-font-line-height-fixed-sm: 12px;
37
+ --calcite-font-line-height-fixed-base: 16px;
38
+ --calcite-font-line-height-fixed-lg: 20px;
39
+ --calcite-font-line-height-fixed-xl: 24px;
40
+ --calcite-font-line-height-relative: auto; /* 1 */
41
+ --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
42
+ --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
43
+ --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
44
+ --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
45
+ --calcite-font-line-height-relative-loose: 2; /* 2 */
46
+ --calcite-font-letter-spacing-tight: -0.4; /* Deprecated */
47
+ --calcite-font-letter-spacing-normal: 0; /* Deprecated */
48
+ --calcite-font-letter-spacing-wide: 0.4; /* Deprecated */
49
+ --calcite-font-paragraph-spacing-normal: 4px; /* Deprecated */
50
+ --calcite-font-text-decoration-none: none; /* Deprecated */
51
+ --calcite-font-text-decoration-underline: underline; /* Deprecated */
52
+ --calcite-font-text-case-none: none; /* Deprecated */
53
+ --calcite-font-text-case-uppercase: uppercase; /* Deprecated */
54
+ --calcite-font-text-case-lowercase: lowercase; /* Deprecated */
55
+ --calcite-font-text-case-capitalize: capitalize; /* Deprecated */
56
+ --calcite-opacity-light: 0.4;
57
+ --calcite-opacity-half: 0.5;
58
+ --calcite-opacity-dark: 0.85;
59
+ --calcite-opacity-full: 1;
60
+ --calcite-opacity-disabled: 0.5;
118
61
  --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
62
+ --calcite-size-fixed-xxxs: 2px; /* deprecated */
63
+ --calcite-size-fixed-xxs: 4px; /* deprecated */
64
+ --calcite-size-fixed-xs: 6px; /* deprecated */
65
+ --calcite-size-fixed-sm: 8px; /* deprecated */
66
+ --calcite-size-fixed-sm-plus: 10px; /* deprecated */
67
+ --calcite-size-fixed-md: 12px; /* deprecated */
68
+ --calcite-size-fixed-md-plus: 14px; /* deprecated */
69
+ --calcite-size-fixed-lg: 16px; /* deprecated */
70
+ --calcite-size-fixed-xl: 20px; /* deprecated */
71
+ --calcite-size-fixed-xxl: 24px; /* deprecated */
72
+ --calcite-size-fixed-xxxl: 32px; /* deprecated */
73
+ --calcite-size-px: 1px;
74
+ --calcite-size-xxxs: 0.75rem;
75
+ --calcite-size-xxs: 0.875rem;
76
+ --calcite-size-xs: 1rem;
77
+ --calcite-size-sm: 1.5rem;
78
+ --calcite-size-md: 2rem;
79
+ --calcite-size-lg: 2.75rem;
80
+ --calcite-size-xl: 3rem;
81
+ --calcite-size-xxl: 4rem;
82
+ --calcite-size-xxxl: 6rem;
83
+ --calcite-spacing-fixed-xxs: 4px; /* deprecated */
84
+ --calcite-spacing-fixed-xs: 6px; /* deprecated */
85
+ --calcite-spacing-fixed-sm: 8px; /* deprecated */
86
+ --calcite-spacing-fixed-md: 12px; /* deprecated */
87
+ --calcite-spacing-fixed-lg: 14px; /* deprecated */
88
+ --calcite-spacing-fixed-xl: 16px; /* deprecated */
89
+ --calcite-spacing-fixed-xxl: 20px; /* deprecated */
90
+ --calcite-spacing-fixed-xxxl: 32px; /* deprecated */
91
+ --calcite-spacing-none: 0;
92
+ --calcite-spacing-px: 1px;
93
+ --calcite-spacing-base: 2px;
94
+ --calcite-spacing-xxs: 0.25rem;
95
+ --calcite-spacing-xs: 0.375rem;
96
+ --calcite-spacing-sm: 0.5rem;
97
+ --calcite-spacing-sm-plus: 0.625rem;
98
+ --calcite-spacing-md: 0.75rem;
99
+ --calcite-spacing-md-plus: 0.875rem;
100
+ --calcite-spacing-lg: 1rem;
101
+ --calcite-spacing-xl: 1.25rem;
102
+ --calcite-spacing-xxl: 1.5rem;
103
+ --calcite-spacing-xxxl: 2rem;
104
+ --calcite-z-index-deep: -999999;
105
+ --calcite-z-index: 1;
106
+ --calcite-z-index-sticky: 300;
107
+ --calcite-z-index-header: 400;
108
+ --calcite-z-index-toast: 500;
109
+ --calcite-z-index-dropdown: 600;
110
+ --calcite-z-index-overlay: 700;
111
+ --calcite-z-index-modal: 800;
112
+ --calcite-z-index-popup: 900;
113
+ --calcite-z-index-tooltip: 901;
119
114
  --calcite-corner-radius: var(--calcite-corner-radius-sharp);
115
+ --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
116
+ --calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
120
117
  }
package/dist/css/index.css CHANGED
@@ -1,9 +1,9 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
- @import url("./global.css");
6
+ @import url("./semantic.css");
7
7
  @import url("./classes.css");
8
8
  :root {
9
9
  --calcite-color-border-white: #ffffff;
@@ -93,6 +93,7 @@
93
93
  }
94
94
  @media (prefers-color-scheme: dark) {
95
95
  .calcite-mode-auto {
96
+ --calcite-color-foreground-current: #214155;
96
97
  --calcite-color-border-white: #f8f8f8;
97
98
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
98
99
  --calcite-color-border-input: #757575;
@@ -128,7 +129,6 @@
128
129
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
129
130
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
130
131
  --calcite-color-transparent: rgba(255, 255, 255, 0);
131
- --calcite-color-foreground-current: #214155;
132
132
  --calcite-color-foreground-3: #151515;
133
133
  --calcite-color-foreground-2: #202020;
134
134
  --calcite-color-foreground-1: #2b2b2b;
@@ -178,6 +178,7 @@
178
178
  --calcite-color-background: #f8f8f8;
179
179
  }
180
180
  .calcite-mode-dark {
181
+ --calcite-color-foreground-current: #214155;
181
182
  --calcite-color-border-white: #f8f8f8;
182
183
  --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
183
184
  --calcite-color-border-input: #757575;
@@ -213,7 +214,6 @@
213
214
  --calcite-color-transparent-press: rgba(255, 255, 255, 0.08);
214
215
  --calcite-color-transparent-hover: rgba(255, 255, 255, 0.04);
215
216
  --calcite-color-transparent: rgba(255, 255, 255, 0);
216
- --calcite-color-foreground-current: #214155;
217
217
  --calcite-color-foreground-3: #151515;
218
218
  --calcite-color-foreground-2: #202020;
219
219
  --calcite-color-foreground-1: #2b2b2b;
package/dist/css/light.css CHANGED
@@ -1,47 +1,47 @@
1
1
  /**
2
- * Do not edit directly
3
- * Generated on Wed, 26 Mar 2025 15:53:08 GMT
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-border-white: #ffffff;
8
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
9
- --calcite-color-border-input: #949494;
10
- --calcite-color-border-3: #dfdfdf;
11
- --calcite-color-border-2: #d4d4d4;
12
- --calcite-color-border-1: #cacaca;
13
- --calcite-color-text-link: #00619b;
14
- --calcite-color-text-inverse: #ffffff;
15
- --calcite-color-text-3: #6a6a6a;
16
- --calcite-color-text-2: #4a4a4a;
17
- --calcite-color-text-1: #151515;
18
- --calcite-color-inverse-press: #202020;
19
- --calcite-color-inverse-hover: #2b2b2b;
20
- --calcite-color-inverse: #353535;
21
- --calcite-color-status-danger-press: #7c1d13;
22
- --calcite-color-status-danger-hover: #a82b1e;
23
- --calcite-color-status-danger: #d83020;
24
- --calcite-color-status-warning-press: #bfa200;
25
- --calcite-color-status-warning-hover: #d9bc00;
26
- --calcite-color-status-warning: #edd317;
27
- --calcite-color-status-success-press: #1a6324;
28
- --calcite-color-status-success-hover: #288835;
29
- --calcite-color-status-success: #35ac46;
30
- --calcite-color-status-info-press: #00304d;
31
- --calcite-color-status-info-hover: #004874;
32
- --calcite-color-status-info: #00619b;
33
- --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
34
- --calcite-color-brand-press: #004874;
35
- --calcite-color-brand-hover: #00619b;
36
- --calcite-color-brand: #007ac2;
37
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
38
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
39
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
40
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
41
- --calcite-color-transparent: rgba(0, 0, 0, 0);
42
- --calcite-color-foreground-current: #c7eaff;
43
- --calcite-color-foreground-3: #eaeaea;
44
- --calcite-color-foreground-2: #f3f3f3;
45
- --calcite-color-foreground-1: #ffffff;
46
7
  --calcite-color-background: #f8f8f8;
8
+ --calcite-color-foreground-1: #ffffff;
9
+ --calcite-color-foreground-2: #f3f3f3;
10
+ --calcite-color-foreground-3: #eaeaea;
11
+ --calcite-color-foreground-current: #c7eaff;
12
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
13
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
14
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
15
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
16
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
17
+ --calcite-color-brand: #007ac2;
18
+ --calcite-color-brand-hover: #00619b;
19
+ --calcite-color-brand-press: #004874;
20
+ --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
21
+ --calcite-color-status-info: #00619b;
22
+ --calcite-color-status-info-hover: #004874;
23
+ --calcite-color-status-info-press: #00304d;
24
+ --calcite-color-status-success: #35ac46;
25
+ --calcite-color-status-success-hover: #288835;
26
+ --calcite-color-status-success-press: #1a6324;
27
+ --calcite-color-status-warning: #edd317;
28
+ --calcite-color-status-warning-hover: #d9bc00;
29
+ --calcite-color-status-warning-press: #bfa200;
30
+ --calcite-color-status-danger: #d83020;
31
+ --calcite-color-status-danger-hover: #a82b1e;
32
+ --calcite-color-status-danger-press: #7c1d13;
33
+ --calcite-color-inverse: #353535;
34
+ --calcite-color-inverse-hover: #2b2b2b;
35
+ --calcite-color-inverse-press: #202020;
36
+ --calcite-color-text-1: #151515;
37
+ --calcite-color-text-2: #4a4a4a;
38
+ --calcite-color-text-3: #6a6a6a;
39
+ --calcite-color-text-inverse: #ffffff;
40
+ --calcite-color-text-link: #00619b;
41
+ --calcite-color-border-1: #cacaca;
42
+ --calcite-color-border-2: #d4d4d4;
43
+ --calcite-color-border-3: #dfdfdf;
44
+ --calcite-color-border-input: #949494;
45
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
46
+ --calcite-color-border-white: #ffffff;
47
47
  }
package/dist/css/semantic.css ADDED
@@ -0,0 +1,137 @@
1
+ /**
2
+ * Calcite Design System
3
+ * Do not edit directly, this file was auto-generated.
4
+ */
5
+
6
+ :root {
7
+ --calcite-container-size-height-xxs-min: 0; /* Small handheld devices and mini-windows */
8
+ --calcite-container-size-width-xxs-min: 0; /* Small handheld devices and mini-windows */
9
+ --calcite-border-width-none: 0;
10
+ --calcite-border-width-sm: 1px;
11
+ --calcite-border-width-md: 2px;
12
+ --calcite-border-width-lg: 4px;
13
+ --calcite-container-size-height-xxs-max: 154px; /* Small handheld devices and mini-windows */
14
+ --calcite-container-size-height-xs-min: 155px; /* Handheld devices */
15
+ --calcite-container-size-height-xs-max: 328px; /* Handheld devices */
16
+ --calcite-container-size-height-sm-min: 329px; /* Small tablets */
17
+ --calcite-container-size-height-sm-max: 504px; /* Small tablets */
18
+ --calcite-container-size-height-md-min: 505px; /* Small laptops */
19
+ --calcite-container-size-height-md-max: 678px; /* Small laptops */
20
+ --calcite-container-size-height-lg-min: 679px; /* Large laptops and desktop computers */
21
+ --calcite-container-size-height-lg-max: 854px; /* Large laptops and desktop computers */
22
+ --calcite-container-size-height-xl-min: 855px; /* Projectors and televisions */
23
+ --calcite-container-size-width-xxs-max: 320px; /* Small handheld devices and mini-windows */
24
+ --calcite-container-size-width-xs-min: 321px; /* Handheld devices */
25
+ --calcite-container-size-width-xs-max: 476px; /* Handheld devices */
26
+ --calcite-container-size-width-sm-min: 477px; /* Small tablets */
27
+ --calcite-container-size-width-sm-max: 768px; /* Small tablets */
28
+ --calcite-container-size-width-md-min: 769px; /* Small laptops */
29
+ --calcite-container-size-width-md-max: 1152px; /* Small laptops */
30
+ --calcite-container-size-width-lg-min: 1153px; /* Large laptops and desktop computers */
31
+ --calcite-container-size-width-lg-max: 1440px; /* Large laptops and desktop computers */
32
+ --calcite-container-size-width-xl-min: 1441px; /* Projectors and televisions */
33
+ --calcite-container-size-margin: 24px;
34
+ --calcite-container-size-gutter: 16px;
35
+ --calcite-container-size-content-fluid: 100%; /* for fluid grid widths */
36
+ --calcite-container-size-content-fixed: 1440px; /* only for lg breakpoint fixed grid width */
37
+ --calcite-corner-radius-sharp: 0;
38
+ --calcite-corner-radius-round: 4px;
39
+ --calcite-corner-radius-pill: 100%;
40
+ --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /* Primary font with fallbacks */
41
+ --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /* Font family for code with fallbacks */
42
+ --calcite-font-weight-light: 300; /* For Avenir Next World (secondary font family) */
43
+ --calcite-font-weight-regular: 400;
44
+ --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" */
45
+ --calcite-font-weight-medium: 500;
46
+ --calcite-font-weight-semibold: 600;
47
+ --calcite-font-weight-bold: 600;
48
+ --calcite-font-size-xs: 10px;
49
+ --calcite-font-size-sm: 12px;
50
+ --calcite-font-size: 14px;
51
+ --calcite-font-size-md: 16px;
52
+ --calcite-font-size-lg: 18px;
53
+ --calcite-font-size-xl: 20px;
54
+ --calcite-font-size-xxl: 24px;
55
+ --calcite-font-style-emphasis: italic; /* used in ratings */
56
+ --calcite-font-line-height-fixed-sm: 12px;
57
+ --calcite-font-line-height-fixed-base: 16px;
58
+ --calcite-font-line-height-fixed-lg: 20px;
59
+ --calcite-font-line-height-fixed-xl: 24px;
60
+ --calcite-font-line-height-relative: auto; /* 1 */
61
+ --calcite-font-line-height-relative-tight: 1.25; /* 1.25 */
62
+ --calcite-font-line-height-relative-snug: 1.375; /* 1.375 */
63
+ --calcite-font-line-height-relative-normal: 1.5; /* 1.5 */
64
+ --calcite-font-line-height-relative-relaxed: 1.625; /* 1.625 */
65
+ --calcite-font-line-height-relative-loose: 2; /* 2 */
66
+ --calcite-font-letter-spacing-tight: -0.4; /* Deprecated */
67
+ --calcite-font-letter-spacing-normal: 0; /* Deprecated */
68
+ --calcite-font-letter-spacing-wide: 0.4; /* Deprecated */
69
+ --calcite-font-paragraph-spacing-normal: 4px; /* Deprecated */
70
+ --calcite-font-text-decoration-none: none; /* Deprecated */
71
+ --calcite-font-text-decoration-underline: underline; /* Deprecated */
72
+ --calcite-font-text-case-none: none; /* Deprecated */
73
+ --calcite-font-text-case-uppercase: uppercase; /* Deprecated */
74
+ --calcite-font-text-case-lowercase: lowercase; /* Deprecated */
75
+ --calcite-font-text-case-capitalize: capitalize; /* Deprecated */
76
+ --calcite-opacity-light: 0.4;
77
+ --calcite-opacity-half: 0.5;
78
+ --calcite-opacity-dark: 0.85;
79
+ --calcite-opacity-full: 1;
80
+ --calcite-opacity-disabled: 0.5;
81
+ --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
82
+ --calcite-size-fixed-xxxs: 2px; /* deprecated */
83
+ --calcite-size-fixed-xxs: 4px; /* deprecated */
84
+ --calcite-size-fixed-xs: 6px; /* deprecated */
85
+ --calcite-size-fixed-sm: 8px; /* deprecated */
86
+ --calcite-size-fixed-sm-plus: 10px; /* deprecated */
87
+ --calcite-size-fixed-md: 12px; /* deprecated */
88
+ --calcite-size-fixed-md-plus: 14px; /* deprecated */
89
+ --calcite-size-fixed-lg: 16px; /* deprecated */
90
+ --calcite-size-fixed-xl: 20px; /* deprecated */
91
+ --calcite-size-fixed-xxl: 24px; /* deprecated */
92
+ --calcite-size-fixed-xxxl: 32px; /* deprecated */
93
+ --calcite-size-px: 1px;
94
+ --calcite-size-xxxs: 0.75rem;
95
+ --calcite-size-xxs: 0.875rem;
96
+ --calcite-size-xs: 1rem;
97
+ --calcite-size-sm: 1.5rem;
98
+ --calcite-size-md: 2rem;
99
+ --calcite-size-lg: 2.75rem;
100
+ --calcite-size-xl: 3rem;
101
+ --calcite-size-xxl: 4rem;
102
+ --calcite-size-xxxl: 6rem;
103
+ --calcite-spacing-fixed-xxs: 4px; /* deprecated */
104
+ --calcite-spacing-fixed-xs: 6px; /* deprecated */
105
+ --calcite-spacing-fixed-sm: 8px; /* deprecated */
106
+ --calcite-spacing-fixed-md: 12px; /* deprecated */
107
+ --calcite-spacing-fixed-lg: 14px; /* deprecated */
108
+ --calcite-spacing-fixed-xl: 16px; /* deprecated */
109
+ --calcite-spacing-fixed-xxl: 20px; /* deprecated */
110
+ --calcite-spacing-fixed-xxxl: 32px; /* deprecated */
111
+ --calcite-spacing-none: 0;
112
+ --calcite-spacing-px: 1px;
113
+ --calcite-spacing-base: 2px;
114
+ --calcite-spacing-xxs: 0.25rem;
115
+ --calcite-spacing-xs: 0.375rem;
116
+ --calcite-spacing-sm: 0.5rem;
117
+ --calcite-spacing-sm-plus: 0.625rem;
118
+ --calcite-spacing-md: 0.75rem;
119
+ --calcite-spacing-md-plus: 0.875rem;
120
+ --calcite-spacing-lg: 1rem;
121
+ --calcite-spacing-xl: 1.25rem;
122
+ --calcite-spacing-xxl: 1.5rem;
123
+ --calcite-spacing-xxxl: 2rem;
124
+ --calcite-z-index-deep: -999999;
125
+ --calcite-z-index: 1;
126
+ --calcite-z-index-sticky: 300;
127
+ --calcite-z-index-header: 400;
128
+ --calcite-z-index-toast: 500;
129
+ --calcite-z-index-dropdown: 600;
130
+ --calcite-z-index-overlay: 700;
131
+ --calcite-z-index-modal: 800;
132
+ --calcite-z-index-popup: 900;
133
+ --calcite-z-index-tooltip: 901;
134
+ --calcite-corner-radius: var(--calcite-corner-radius-sharp);
135
+ --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);
136
+ --calcite-shadow-md: 0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 30px rgba(0, 0, 0, 0.1);
137
+ }