@esri/calcite-design-tokens 4.0.0-next.2 → 4.0.0-next.20

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 (35) hide show
  1. package/LICENSE.md +1 -1
  2. package/README.md +1 -1
  3. package/dist/css/breakpoints.css +8 -4
  4. package/dist/css/core.css +17 -2
  5. package/dist/css/dark.css +31 -27
  6. package/dist/css/global.css +64 -20
  7. package/dist/css/index.css +175 -150
  8. package/dist/css/light.css +36 -32
  9. package/dist/css/semantic.css +64 -20
  10. package/dist/docs/core.json +402 -3
  11. package/dist/docs/dark.json +647 -556
  12. package/dist/docs/global.json +3937 -2619
  13. package/dist/docs/light.json +667 -576
  14. package/dist/docs/semantic.json +2760 -1541
  15. package/dist/es6/breakpoints.d.ts +6 -2
  16. package/dist/es6/breakpoints.js +4 -2
  17. package/dist/es6/core.d.ts +15 -0
  18. package/dist/es6/core.js +17 -2
  19. package/dist/es6/dark.d.ts +31 -23
  20. package/dist/es6/dark.js +31 -27
  21. package/dist/es6/global.d.ts +106 -32
  22. package/dist/es6/global.js +129 -79
  23. package/dist/es6/light.d.ts +31 -23
  24. package/dist/es6/light.js +36 -32
  25. package/dist/es6/semantic.d.ts +63 -1
  26. package/dist/es6/semantic.js +64 -20
  27. package/dist/scss/breakpoints.scss +8 -4
  28. package/dist/scss/core.scss +17 -2
  29. package/dist/scss/dark.scss +31 -27
  30. package/dist/scss/global.scss +64 -20
  31. package/dist/scss/index.scss +69 -59
  32. package/dist/scss/light.scss +36 -32
  33. package/dist/scss/semantic.scss +64 -20
  34. package/package.json +8 -7
  35. package/dist/css/component.css +0 -11
package/dist/css/index.css CHANGED
@@ -6,118 +6,120 @@
6
6
  @import url("./semantic.css");
7
7
  @import url("./classes.css");
8
8
  :root {
9
- --calcite-color-border-white: #ffffff;
10
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
11
- --calcite-color-border-input: #949494;
12
- --calcite-color-border-3: #dedede;
13
- --calcite-color-border-2: #d4d4d4;
14
- --calcite-color-border-1: #c9c9c9;
15
- --calcite-color-text-link: #00619b;
16
- --calcite-color-text-inverse: #ffffff;
17
- --calcite-color-text-highlight: #004874;
18
- --calcite-color-text-3: #6b6b6b;
19
- --calcite-color-text-2: #4a4a4a;
20
- --calcite-color-text-1: #141414;
21
- --calcite-color-inverse-press: #212121;
22
- --calcite-color-inverse-hover: #2b2b2b;
23
- --calcite-color-inverse: #363636;
9
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
10
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
11
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
12
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
13
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
14
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
15
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
24
16
  --calcite-color-status-danger-press: #7c1d13;
25
17
  --calcite-color-status-danger-hover: #a82b1e;
26
18
  --calcite-color-status-danger: #d83020;
27
19
  --calcite-color-status-warning-press: #9a5b10;
28
- --calcite-color-status-warning-hover: #d17300;
29
- --calcite-color-status-warning: #f89927;
30
- --calcite-color-status-success-press: #1a6324;
31
- --calcite-color-status-success-hover: #288835;
32
- --calcite-color-status-success: #35ac46;
20
+ --calcite-color-status-warning-hover: #c26b00;
21
+ --calcite-color-status-warning: #da7c0b;
22
+ --calcite-color-status-success-press: #0d3f14;
23
+ --calcite-color-status-success-hover: #1a6324;
24
+ --calcite-color-status-success: #288835;
33
25
  --calcite-color-status-info-press: #00304d;
34
26
  --calcite-color-status-info-hover: #004874;
35
27
  --calcite-color-status-info: #00619b;
28
+ --calcite-color-inverse-press: #212121;
29
+ --calcite-color-inverse-hover: #2b2b2b;
30
+ --calcite-color-inverse: #363636;
36
31
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
37
32
  --calcite-color-brand-press: #004874;
38
33
  --calcite-color-brand-hover: #00619b;
39
34
  --calcite-color-brand: #007ac2;
40
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
41
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
42
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
43
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
44
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
45
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
46
- --calcite-color-transparent: rgba(0, 0, 0, 0);
47
- --calcite-color-surface-highlight: #d6efff;
35
+ --calcite-color-border-white: #ffffff;
36
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
37
+ --calcite-color-border-input: #949494;
38
+ --calcite-color-border-3: #ebebeb;
39
+ --calcite-color-border-2: #dedede;
40
+ --calcite-color-border-1: #d4d4d4;
41
+ --calcite-color-text-highlight: #004874;
42
+ --calcite-color-text-link: #00619b;
43
+ --calcite-color-text-inverse: #ffffff;
44
+ --calcite-color-text-3: #6b6b6b;
45
+ --calcite-color-text-2: #4a4a4a;
46
+ --calcite-color-text-1: #141414;
48
47
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
49
- --calcite-color-foreground-3: #ebebeb;
50
- --calcite-color-foreground-2: #f2f2f2;
51
- --calcite-color-foreground-1: #ffffff;
48
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
49
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
50
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
52
51
  --calcite-color-background-none: rgba(255, 255, 255, 0);
53
- --calcite-color-background: #f7f7f7;
52
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
53
+ --calcite-color-surface-highlight: #d6efff;
54
+ --calcite-color-surface-4: #ebebeb;
55
+ --calcite-color-surface-3: #f2f2f2;
56
+ --calcite-color-surface-2: #ffffff;
57
+ --calcite-color-surface-1: #f7f7f7;
58
+ --calcite-color-focus: var(--calcite-color-brand);
54
59
  }
55
60
  @media (prefers-color-scheme: light) {
56
61
  .calcite-mode-auto {
57
- --calcite-color-border-white: #ffffff;
58
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
59
- --calcite-color-border-input: #949494;
60
- --calcite-color-border-3: #dedede;
61
- --calcite-color-border-2: #d4d4d4;
62
- --calcite-color-border-1: #c9c9c9;
63
- --calcite-color-text-link: #00619b;
64
- --calcite-color-text-inverse: #ffffff;
65
- --calcite-color-text-highlight: #004874;
66
- --calcite-color-text-3: #6b6b6b;
67
- --calcite-color-text-2: #4a4a4a;
68
- --calcite-color-text-1: #141414;
69
- --calcite-color-inverse-press: #212121;
70
- --calcite-color-inverse-hover: #2b2b2b;
71
- --calcite-color-inverse: #363636;
62
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
63
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
64
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
65
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
66
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
67
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
68
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
72
69
  --calcite-color-status-danger-press: #7c1d13;
73
70
  --calcite-color-status-danger-hover: #a82b1e;
74
71
  --calcite-color-status-danger: #d83020;
75
72
  --calcite-color-status-warning-press: #9a5b10;
76
- --calcite-color-status-warning-hover: #d17300;
77
- --calcite-color-status-warning: #f89927;
78
- --calcite-color-status-success-press: #1a6324;
79
- --calcite-color-status-success-hover: #288835;
80
- --calcite-color-status-success: #35ac46;
73
+ --calcite-color-status-warning-hover: #c26b00;
74
+ --calcite-color-status-warning: #da7c0b;
75
+ --calcite-color-status-success-press: #0d3f14;
76
+ --calcite-color-status-success-hover: #1a6324;
77
+ --calcite-color-status-success: #288835;
81
78
  --calcite-color-status-info-press: #00304d;
82
79
  --calcite-color-status-info-hover: #004874;
83
80
  --calcite-color-status-info: #00619b;
81
+ --calcite-color-inverse-press: #212121;
82
+ --calcite-color-inverse-hover: #2b2b2b;
83
+ --calcite-color-inverse: #363636;
84
84
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
85
85
  --calcite-color-brand-press: #004874;
86
86
  --calcite-color-brand-hover: #00619b;
87
87
  --calcite-color-brand: #007ac2;
88
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
89
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
90
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
91
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
92
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
93
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
94
- --calcite-color-transparent: rgba(0, 0, 0, 0);
95
- --calcite-color-surface-highlight: #d6efff;
88
+ --calcite-color-border-white: #ffffff;
89
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
90
+ --calcite-color-border-input: #949494;
91
+ --calcite-color-border-3: #ebebeb;
92
+ --calcite-color-border-2: #dedede;
93
+ --calcite-color-border-1: #d4d4d4;
94
+ --calcite-color-text-highlight: #004874;
95
+ --calcite-color-text-link: #00619b;
96
+ --calcite-color-text-inverse: #ffffff;
97
+ --calcite-color-text-3: #6b6b6b;
98
+ --calcite-color-text-2: #4a4a4a;
99
+ --calcite-color-text-1: #141414;
96
100
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
97
- --calcite-color-foreground-3: #ebebeb;
98
- --calcite-color-foreground-2: #f2f2f2;
99
- --calcite-color-foreground-1: #ffffff;
101
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
102
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
103
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
100
104
  --calcite-color-background-none: rgba(255, 255, 255, 0);
101
- --calcite-color-background: #f7f7f7;
105
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
106
+ --calcite-color-surface-highlight: #d6efff;
107
+ --calcite-color-surface-4: #ebebeb;
108
+ --calcite-color-surface-3: #f2f2f2;
109
+ --calcite-color-surface-2: #ffffff;
110
+ --calcite-color-surface-1: #f7f7f7;
111
+ --calcite-color-focus: var(--calcite-color-brand);
102
112
  }
103
113
  }
104
114
  @media (prefers-color-scheme: dark) {
105
115
  .calcite-mode-auto {
106
- --calcite-color-border-white: #f7f7f7;
107
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
108
- --calcite-color-border-input: #757575;
109
- --calcite-color-border-3: #404040;
110
- --calcite-color-border-2: #4a4a4a;
111
- --calcite-color-border-1: #545454;
112
- --calcite-color-text-link: #00a0ff;
113
- --calcite-color-text-inverse: #141414;
114
- --calcite-color-text-highlight: #d6efff;
115
- --calcite-color-text-3: #9e9e9e;
116
- --calcite-color-text-2: #bfbfbf;
117
- --calcite-color-text-1: #ffffff;
118
- --calcite-color-inverse-press: #f2f2f2;
119
- --calcite-color-inverse-hover: #ffffff;
120
- --calcite-color-inverse: #f7f7f7;
116
+ --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
117
+ --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
118
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
119
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
120
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
121
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
122
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
121
123
  --calcite-color-status-danger-press: #d90012;
122
124
  --calcite-color-status-danger-hover: #ff0015;
123
125
  --calcite-color-status-danger: #fe583e;
@@ -130,89 +132,99 @@
130
132
  --calcite-color-status-info-press: #009af2;
131
133
  --calcite-color-status-info-hover: #3db8ff;
132
134
  --calcite-color-status-info: #00a0ff;
135
+ --calcite-color-inverse-press: #ebebeb;
136
+ --calcite-color-inverse-hover: #f2f2f2;
137
+ --calcite-color-inverse: #f7f7f7;
133
138
  --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
134
139
  --calcite-color-brand-press: #00619b;
135
140
  --calcite-color-brand-hover: #007ac2;
136
141
  --calcite-color-brand: #009af2;
137
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
138
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
139
- --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
140
- --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
141
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
142
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
143
- --calcite-color-transparent: rgba(255, 255, 255, 0);
144
- --calcite-color-surface-highlight: #2b465f;
142
+ --calcite-color-border-white: #f7f7f7;
143
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
144
+ --calcite-color-border-input: #757575;
145
+ --calcite-color-border-3: #404040;
146
+ --calcite-color-border-2: #4a4a4a;
147
+ --calcite-color-border-1: #545454;
148
+ --calcite-color-text-highlight: #d6efff;
149
+ --calcite-color-text-link: #00a0ff;
150
+ --calcite-color-text-inverse: #141414;
151
+ --calcite-color-text-3: #9e9e9e;
152
+ --calcite-color-text-2: #bfbfbf;
153
+ --calcite-color-text-1: #ffffff;
145
154
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
146
- --calcite-color-foreground-3: #141414;
147
- --calcite-color-foreground-2: #212121;
148
- --calcite-color-foreground-1: #2b2b2b;
155
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
156
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
157
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
149
158
  --calcite-color-background-none: rgba(255, 255, 255, 0);
150
- --calcite-color-background: #363636;
159
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
160
+ --calcite-color-surface-highlight: #2b465f;
161
+ --calcite-color-surface-4: #404040;
162
+ --calcite-color-surface-3: #363636;
163
+ --calcite-color-surface-2: #2b2b2b;
164
+ --calcite-color-surface-1: #212121;
165
+ --calcite-color-focus: var(--calcite-color-brand);
151
166
  }
152
167
  }
153
168
  .calcite-mode-light {
154
- --calcite-color-border-white: #ffffff;
155
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
156
- --calcite-color-border-input: #949494;
157
- --calcite-color-border-3: #dedede;
158
- --calcite-color-border-2: #d4d4d4;
159
- --calcite-color-border-1: #c9c9c9;
160
- --calcite-color-text-link: #00619b;
161
- --calcite-color-text-inverse: #ffffff;
162
- --calcite-color-text-highlight: #004874;
163
- --calcite-color-text-3: #6b6b6b;
164
- --calcite-color-text-2: #4a4a4a;
165
- --calcite-color-text-1: #141414;
166
- --calcite-color-inverse-press: #212121;
167
- --calcite-color-inverse-hover: #2b2b2b;
168
- --calcite-color-inverse: #363636;
169
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
170
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
171
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
172
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
173
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
174
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
175
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
169
176
  --calcite-color-status-danger-press: #7c1d13;
170
177
  --calcite-color-status-danger-hover: #a82b1e;
171
178
  --calcite-color-status-danger: #d83020;
172
179
  --calcite-color-status-warning-press: #9a5b10;
173
- --calcite-color-status-warning-hover: #d17300;
174
- --calcite-color-status-warning: #f89927;
175
- --calcite-color-status-success-press: #1a6324;
176
- --calcite-color-status-success-hover: #288835;
177
- --calcite-color-status-success: #35ac46;
180
+ --calcite-color-status-warning-hover: #c26b00;
181
+ --calcite-color-status-warning: #da7c0b;
182
+ --calcite-color-status-success-press: #0d3f14;
183
+ --calcite-color-status-success-hover: #1a6324;
184
+ --calcite-color-status-success: #288835;
178
185
  --calcite-color-status-info-press: #00304d;
179
186
  --calcite-color-status-info-hover: #004874;
180
187
  --calcite-color-status-info: #00619b;
188
+ --calcite-color-inverse-press: #212121;
189
+ --calcite-color-inverse-hover: #2b2b2b;
190
+ --calcite-color-inverse: #363636;
181
191
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
182
192
  --calcite-color-brand-press: #004874;
183
193
  --calcite-color-brand-hover: #00619b;
184
194
  --calcite-color-brand: #007ac2;
185
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
186
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
187
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
188
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
189
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
190
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
191
- --calcite-color-transparent: rgba(0, 0, 0, 0);
192
- --calcite-color-surface-highlight: #d6efff;
195
+ --calcite-color-border-white: #ffffff;
196
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
197
+ --calcite-color-border-input: #949494;
198
+ --calcite-color-border-3: #ebebeb;
199
+ --calcite-color-border-2: #dedede;
200
+ --calcite-color-border-1: #d4d4d4;
201
+ --calcite-color-text-highlight: #004874;
202
+ --calcite-color-text-link: #00619b;
203
+ --calcite-color-text-inverse: #ffffff;
204
+ --calcite-color-text-3: #6b6b6b;
205
+ --calcite-color-text-2: #4a4a4a;
206
+ --calcite-color-text-1: #141414;
193
207
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
194
- --calcite-color-foreground-3: #ebebeb;
195
- --calcite-color-foreground-2: #f2f2f2;
196
- --calcite-color-foreground-1: #ffffff;
208
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
209
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
210
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
197
211
  --calcite-color-background-none: rgba(255, 255, 255, 0);
198
- --calcite-color-background: #f7f7f7;
212
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
213
+ --calcite-color-surface-highlight: #d6efff;
214
+ --calcite-color-surface-4: #ebebeb;
215
+ --calcite-color-surface-3: #f2f2f2;
216
+ --calcite-color-surface-2: #ffffff;
217
+ --calcite-color-surface-1: #f7f7f7;
218
+ --calcite-color-focus: var(--calcite-color-brand);
199
219
  }
200
220
  .calcite-mode-dark {
201
- --calcite-color-border-white: #f7f7f7;
202
- --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
203
- --calcite-color-border-input: #757575;
204
- --calcite-color-border-3: #404040;
205
- --calcite-color-border-2: #4a4a4a;
206
- --calcite-color-border-1: #545454;
207
- --calcite-color-text-link: #00a0ff;
208
- --calcite-color-text-inverse: #141414;
209
- --calcite-color-text-highlight: #d6efff;
210
- --calcite-color-text-3: #9e9e9e;
211
- --calcite-color-text-2: #bfbfbf;
212
- --calcite-color-text-1: #ffffff;
213
- --calcite-color-inverse-press: #f2f2f2;
214
- --calcite-color-inverse-hover: #ffffff;
215
- --calcite-color-inverse: #f7f7f7;
221
+ --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
222
+ --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
223
+ --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
224
+ --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
225
+ --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
226
+ --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
227
+ --calcite-color-transparent: rgba(255, 255, 255, 0);
216
228
  --calcite-color-status-danger-press: #d90012;
217
229
  --calcite-color-status-danger-hover: #ff0015;
218
230
  --calcite-color-status-danger: #fe583e;
@@ -225,22 +237,35 @@
225
237
  --calcite-color-status-info-press: #009af2;
226
238
  --calcite-color-status-info-hover: #3db8ff;
227
239
  --calcite-color-status-info: #00a0ff;
240
+ --calcite-color-inverse-press: #ebebeb;
241
+ --calcite-color-inverse-hover: #f2f2f2;
242
+ --calcite-color-inverse: #f7f7f7;
228
243
  --calcite-color-brand-underline: rgba(0, 160, 255, 0.4);
229
244
  --calcite-color-brand-press: #00619b;
230
245
  --calcite-color-brand-hover: #007ac2;
231
246
  --calcite-color-brand: #009af2;
232
- --calcite-color-transparent-tint: rgba(43, 43, 43, 0.8);
233
- --calcite-color-transparent-scrim: rgba(0, 0, 0, 0.85);
234
- --calcite-color-transparent-inverse-press: rgba(0, 0, 0, 0.08);
235
- --calcite-color-transparent-inverse-hover: rgba(0, 0, 0, 0.04);
236
- --calcite-color-transparent-press: rgba(255, 255, 255, 0.16);
237
- --calcite-color-transparent-hover: rgba(255, 255, 255, 0.12);
238
- --calcite-color-transparent: rgba(255, 255, 255, 0);
239
- --calcite-color-surface-highlight: #2b465f;
247
+ --calcite-color-border-white: #f7f7f7;
248
+ --calcite-color-border-ghost: rgba(117, 117, 117, 0.3);
249
+ --calcite-color-border-input: #757575;
250
+ --calcite-color-border-3: #404040;
251
+ --calcite-color-border-2: #4a4a4a;
252
+ --calcite-color-border-1: #545454;
253
+ --calcite-color-text-highlight: #d6efff;
254
+ --calcite-color-text-link: #00a0ff;
255
+ --calcite-color-text-inverse: #141414;
256
+ --calcite-color-text-3: #9e9e9e;
257
+ --calcite-color-text-2: #bfbfbf;
258
+ --calcite-color-text-1: #ffffff;
240
259
  --calcite-color-foreground-current: #2b465f; /** deprecated, use --calcite-color-surface-highlight instead */
241
- --calcite-color-foreground-3: #141414;
242
- --calcite-color-foreground-2: #212121;
243
- --calcite-color-foreground-1: #2b2b2b;
260
+ --calcite-color-foreground-3: #404040; /** Deprecated, use `--calcite-color-surface-4` instead */
261
+ --calcite-color-foreground-2: #363636; /** Deprecated, use `--calcite-color-surface-3` instead */
262
+ --calcite-color-foreground-1: #2b2b2b; /** Deprecated, use `--calcite-color-surface-2` instead */
244
263
  --calcite-color-background-none: rgba(255, 255, 255, 0);
245
- --calcite-color-background: #363636;
264
+ --calcite-color-background: #212121; /** Deprecated, use `--calcite-color-surface-1` instead */
265
+ --calcite-color-surface-highlight: #2b465f;
266
+ --calcite-color-surface-4: #404040;
267
+ --calcite-color-surface-3: #363636;
268
+ --calcite-color-surface-2: #2b2b2b;
269
+ --calcite-color-surface-1: #212121;
270
+ --calcite-color-focus: var(--calcite-color-brand);
246
271
  }
package/dist/css/light.css CHANGED
@@ -4,50 +4,54 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --calcite-color-background: #f7f7f7;
7
+ --calcite-color-surface-1: #f7f7f7;
8
+ --calcite-color-surface-2: #ffffff;
9
+ --calcite-color-surface-3: #f2f2f2;
10
+ --calcite-color-surface-4: #ebebeb;
11
+ --calcite-color-surface-highlight: #d6efff;
12
+ --calcite-color-background: #f7f7f7; /** Deprecated, use `--calcite-color-surface-1` instead */
8
13
  --calcite-color-background-none: rgba(255, 255, 255, 0);
9
- --calcite-color-foreground-1: #ffffff;
10
- --calcite-color-foreground-2: #f2f2f2;
11
- --calcite-color-foreground-3: #ebebeb;
14
+ --calcite-color-foreground-1: #ffffff; /** Deprecated, use `--calcite-color-surface-2` instead */
15
+ --calcite-color-foreground-2: #f2f2f2; /** Deprecated, use `--calcite-color-surface-3` instead */
16
+ --calcite-color-foreground-3: #ebebeb; /** Deprecated, use `--calcite-color-surface-4` instead */
12
17
  --calcite-color-foreground-current: #d6efff; /** deprecated, use --calcite-color-surface-highlight instead */
13
- --calcite-color-surface-highlight: #d6efff;
14
- --calcite-color-transparent: rgba(0, 0, 0, 0);
15
- --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
16
- --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
17
- --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
18
- --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
19
- --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
20
- --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
18
+ --calcite-color-text-1: #141414;
19
+ --calcite-color-text-2: #4a4a4a;
20
+ --calcite-color-text-3: #6b6b6b;
21
+ --calcite-color-text-inverse: #ffffff;
22
+ --calcite-color-text-link: #00619b;
23
+ --calcite-color-text-highlight: #004874;
24
+ --calcite-color-border-1: #d4d4d4;
25
+ --calcite-color-border-2: #dedede;
26
+ --calcite-color-border-3: #ebebeb;
27
+ --calcite-color-border-input: #949494;
28
+ --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
29
+ --calcite-color-border-white: #ffffff;
21
30
  --calcite-color-brand: #007ac2;
22
31
  --calcite-color-brand-hover: #00619b;
23
32
  --calcite-color-brand-press: #004874;
24
33
  --calcite-color-brand-underline: rgba(0, 97, 155, 0.4);
34
+ --calcite-color-inverse: #363636;
35
+ --calcite-color-inverse-hover: #2b2b2b;
36
+ --calcite-color-inverse-press: #212121;
25
37
  --calcite-color-status-info: #00619b;
26
38
  --calcite-color-status-info-hover: #004874;
27
39
  --calcite-color-status-info-press: #00304d;
28
- --calcite-color-status-success: #35ac46;
29
- --calcite-color-status-success-hover: #288835;
30
- --calcite-color-status-success-press: #1a6324;
31
- --calcite-color-status-warning: #f89927;
32
- --calcite-color-status-warning-hover: #d17300;
40
+ --calcite-color-status-success: #288835;
41
+ --calcite-color-status-success-hover: #1a6324;
42
+ --calcite-color-status-success-press: #0d3f14;
43
+ --calcite-color-status-warning: #da7c0b;
44
+ --calcite-color-status-warning-hover: #c26b00;
33
45
  --calcite-color-status-warning-press: #9a5b10;
34
46
  --calcite-color-status-danger: #d83020;
35
47
  --calcite-color-status-danger-hover: #a82b1e;
36
48
  --calcite-color-status-danger-press: #7c1d13;
37
- --calcite-color-inverse: #363636;
38
- --calcite-color-inverse-hover: #2b2b2b;
39
- --calcite-color-inverse-press: #212121;
40
- --calcite-color-text-1: #141414;
41
- --calcite-color-text-2: #4a4a4a;
42
- --calcite-color-text-3: #6b6b6b;
43
- --calcite-color-text-highlight: #004874;
44
- --calcite-color-text-inverse: #ffffff;
45
- --calcite-color-text-link: #00619b;
46
- --calcite-color-border-1: #c9c9c9;
47
- --calcite-color-border-2: #d4d4d4;
48
- --calcite-color-border-3: #dedede;
49
- --calcite-color-border-input: #949494;
50
- --calcite-color-border-ghost: rgba(0, 0, 0, 0.3);
51
- --calcite-color-border-white: #ffffff;
49
+ --calcite-color-transparent: rgba(0, 0, 0, 0);
50
+ --calcite-color-transparent-hover: rgba(0, 0, 0, 0.04);
51
+ --calcite-color-transparent-press: rgba(0, 0, 0, 0.08);
52
+ --calcite-color-transparent-scrim: rgba(255, 255, 255, 0.85);
53
+ --calcite-color-transparent-tint: rgba(255, 255, 255, 0.8);
54
+ --calcite-color-transparent-inverse-hover: rgba(255, 255, 255, 0.12);
55
+ --calcite-color-transparent-inverse-press: rgba(255, 255, 255, 0.16);
52
56
  --calcite-color-focus: var(--calcite-color-brand);
53
57
  }
package/dist/css/semantic.css CHANGED
@@ -17,7 +17,7 @@
17
17
  --calcite-corner-radius-xs: 2px;
18
18
  --calcite-corner-radius-sm: 4px;
19
19
  --calcite-corner-radius-round: 4px; /** deprecated, use --calcite-corner-radius-sm instead */
20
- --calcite-corner-radius-pill: 100%;
20
+ --calcite-corner-radius-pill: 9999px;
21
21
  --calcite-font-family: 'Avenir Next', Avenir, 'Helvetica Neue', sans-serif; /** Primary font with fallbacks */
22
22
  --calcite-font-family-code: Monaco, Consolas, 'Andale Mono', 'Lucida Console', monospace; /** Font family for code with fallbacks */
23
23
  --calcite-font-weight-light: 300; /** For Avenir Next World (secondary font family) */
@@ -32,7 +32,20 @@
32
32
  --calcite-font-size-md: 16px;
33
33
  --calcite-font-size-lg: 18px;
34
34
  --calcite-font-size-xl: 20px;
35
- --calcite-font-size-xxl: 24px;
35
+ --calcite-font-size-xxl: 24px; /** Deprecated, use --calcite-font-size-2xl instead. */
36
+ --calcite-font-size-2xl: 24px;
37
+ --calcite-font-size-relative-xs: 0.625rem;
38
+ --calcite-font-size-relative-sm: 0.75rem;
39
+ --calcite-font-size-relative-base: 0.875rem;
40
+ --calcite-font-size-relative-md: 1rem;
41
+ --calcite-font-size-relative-lg: 1.125rem;
42
+ --calcite-font-size-relative-xl: 1.25rem;
43
+ --calcite-font-size-relative-2xl: 1.625rem;
44
+ --calcite-font-size-relative-3xl: 2rem;
45
+ --calcite-font-size-relative-4xl: 2.5rem;
46
+ --calcite-font-size-relative-5xl: 3rem;
47
+ --calcite-font-size-relative-6xl: 3.5rem;
48
+ --calcite-font-size-relative-7xl: 4rem;
36
49
  --calcite-font-style-emphasis: italic; /** used in ratings */
37
50
  --calcite-font-line-height-fixed-sm: 12px;
38
51
  --calcite-font-line-height-fixed-base: 16px;
@@ -50,6 +63,18 @@
50
63
  --calcite-font-line-height-relative-normal: 1.5; /** 1.5 */
51
64
  --calcite-font-line-height-relative-relaxed: 1.625; /** 1.625 */
52
65
  --calcite-font-line-height-relative-loose: 2; /** 2 */
66
+ --calcite-font-line-height-xs: 0.75rem;
67
+ --calcite-font-line-height-sm: 1rem;
68
+ --calcite-font-line-height-base: 1rem;
69
+ --calcite-font-line-height-md: 1.25rem;
70
+ --calcite-font-line-height-lg: 1.5rem;
71
+ --calcite-font-line-height-xl: 1.5rem;
72
+ --calcite-font-line-height-2xl: 2rem;
73
+ --calcite-font-line-height-3xl: 2.5rem;
74
+ --calcite-font-line-height-4xl: 3rem;
75
+ --calcite-font-line-height-5xl: 4rem;
76
+ --calcite-font-line-height-6xl: 4rem;
77
+ --calcite-font-line-height-7xl: 5rem;
53
78
  --calcite-font-letter-spacing-tight: -0.4px; /** Deprecated */
54
79
  --calcite-font-letter-spacing-normal: 0; /** Deprecated */
55
80
  --calcite-font-letter-spacing-wide: 0.4px; /** Deprecated */
@@ -60,11 +85,11 @@
60
85
  --calcite-font-text-case-uppercase: uppercase; /** Deprecated */
61
86
  --calcite-font-text-case-lowercase: lowercase; /** Deprecated */
62
87
  --calcite-font-text-case-capitalize: capitalize; /** Deprecated */
88
+ --calcite-opacity-disabled: 0.5;
63
89
  --calcite-opacity-light: 0.4;
64
90
  --calcite-opacity-half: 0.5;
65
91
  --calcite-opacity-dark: 0.85;
66
92
  --calcite-opacity-full: 1;
67
- --calcite-opacity-disabled: 0.5;
68
93
  --calcite-size-fixed-xxxs: 2px; /** deprecated */
69
94
  --calcite-size-fixed-xxs: 4px; /** deprecated */
70
95
  --calcite-size-fixed-xs: 6px; /** deprecated */
@@ -77,15 +102,20 @@
77
102
  --calcite-size-fixed-xxl: 24px; /** deprecated */
78
103
  --calcite-size-fixed-xxxl: 32px; /** deprecated */
79
104
  --calcite-size-px: 1px;
80
- --calcite-size-xxxs: 0.75rem;
81
- --calcite-size-xxs: 0.875rem;
105
+ --calcite-size-4xs: 0.625rem;
106
+ --calcite-size-xxxs: 0.75rem; /** Deprecated, use --calcite-size-3xs instead. */
107
+ --calcite-size-3xs: 0.75rem;
108
+ --calcite-size-xxs: 0.875rem; /** Deprecated, use --calcite-size-2xs instead. */
109
+ --calcite-size-2xs: 0.875rem;
82
110
  --calcite-size-xs: 1rem;
83
111
  --calcite-size-sm: 1.5rem;
84
112
  --calcite-size-md: 2rem;
85
113
  --calcite-size-lg: 2.75rem;
86
114
  --calcite-size-xl: 3rem;
87
- --calcite-size-xxl: 4rem;
88
- --calcite-size-xxxl: 6rem;
115
+ --calcite-size-xxl: 4rem; /** Deprecated, use --calcite-size-2xl instead. */
116
+ --calcite-size-2xl: 4rem;
117
+ --calcite-size-xxxl: 6rem; /** Deprecated, use --calcite-size-3xl instead. */
118
+ --calcite-size-3xl: 6rem;
89
119
  --calcite-spacing-fixed-xxs: 4px; /** deprecated */
90
120
  --calcite-spacing-fixed-xs: 6px; /** deprecated */
91
121
  --calcite-spacing-fixed-sm: 8px; /** deprecated */
@@ -94,19 +124,33 @@
94
124
  --calcite-spacing-fixed-xl: 16px; /** deprecated */
95
125
  --calcite-spacing-fixed-xxl: 20px; /** deprecated */
96
126
  --calcite-spacing-fixed-xxxl: 32px; /** deprecated */
97
- --calcite-spacing-none: 0;
98
- --calcite-spacing-px: 1px;
99
- --calcite-spacing-base: 2px;
100
- --calcite-spacing-xxs: 0.25rem;
101
- --calcite-spacing-xs: 0.375rem;
102
- --calcite-spacing-sm: 0.5rem;
103
- --calcite-spacing-sm-plus: 0.625rem;
104
- --calcite-spacing-md: 0.75rem;
105
- --calcite-spacing-md-plus: 0.875rem;
106
- --calcite-spacing-lg: 1rem;
107
- --calcite-spacing-xl: 1.25rem;
108
- --calcite-spacing-xxl: 1.5rem;
109
- --calcite-spacing-xxxl: 2rem;
127
+ --calcite-spacing-none: 0; /** deprecated, use `--calcite-space-none` instead */
128
+ --calcite-spacing-px: 1px; /** deprecated, use `--calcite-space-px` instead */
129
+ --calcite-spacing-base: 2px; /** deprecated, use `--calcite-space-base` instead */
130
+ --calcite-spacing-xxs: 0.25rem; /** deprecated, use `--calcite-space-2xs` instead */
131
+ --calcite-spacing-xs: 0.375rem; /** deprecated, use `--calcite-space-xs` instead */
132
+ --calcite-spacing-sm: 0.5rem; /** deprecated, use `--calcite-space-sm` instead */
133
+ --calcite-spacing-sm-plus: 0.625rem; /** deprecated, use `--calcite-space-sm-plus` instead */
134
+ --calcite-spacing-md: 0.75rem; /** deprecated, use `--calcite-space-md` instead */
135
+ --calcite-spacing-md-plus: 0.875rem; /** deprecated, use `--calcite-space-md-plus` instead */
136
+ --calcite-spacing-lg: 1rem; /** deprecated, use `--calcite-space-lg` instead */
137
+ --calcite-spacing-xl: 1.25rem; /** deprecated, use `--calcite-space-xl` instead */
138
+ --calcite-spacing-xxl: 1.5rem; /** deprecated, use `--calcite-space-2xl` instead */
139
+ --calcite-spacing-xxxl: 2rem; /** deprecated, use `--calcite-space-3xl` instead */
140
+ --calcite-space-none: 0;
141
+ --calcite-space-px: 1px;
142
+ --calcite-space-base: 2px;
143
+ --calcite-space-2xs: 0.25rem;
144
+ --calcite-space-xs: 0.375rem;
145
+ --calcite-space-sm: 0.5rem;
146
+ --calcite-space-sm-plus: 0.625rem;
147
+ --calcite-space-md: 0.75rem;
148
+ --calcite-space-md-plus: 0.875rem;
149
+ --calcite-space-lg: 1rem;
150
+ --calcite-space-xl: 1.25rem;
151
+ --calcite-space-2xl: 1.5rem;
152
+ --calcite-space-3xl: 2rem;
153
+ --calcite-space-4xl: 2.75rem;
110
154
  --calcite-z-index-deep: -999999;
111
155
  --calcite-z-index: 1;
112
156
  --calcite-z-index-sticky: 300;