@spectrum-web-components/styles 0.22.3-react.32 → 0.22.3-react.48

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 (14) hide show
  1. package/package.json +8 -8
  2. package/tokens/dark-vars.css +38 -34
  3. package/tokens/darkest-vars.css +38 -34
  4. package/tokens/express/global-vars.css +24 -6
  5. package/tokens/express/large-vars.css +8 -8
  6. package/tokens/express/medium-vars.css +8 -8
  7. package/tokens/global-vars.css +550 -204
  8. package/tokens/large-vars.css +158 -107
  9. package/tokens/light-vars.css +38 -34
  10. package/tokens/medium-vars.css +156 -105
  11. package/tokens/spectrum/custom-vars.css +44 -23
  12. package/tokens/spectrum/global-vars.css +22 -6
  13. package/tokens/spectrum/large-vars.css +8 -16
  14. package/tokens/spectrum/medium-vars.css +8 -16
package/tokens/large-vars.css CHANGED
@@ -12,64 +12,6 @@ governing permissions and limitations under the License.
12
12
 
13
13
  :host,
14
14
  :root {
15
- --spectrum-component-pill-edge-to-visual-75: 13px;
16
- --spectrum-component-pill-edge-to-visual-100: 17px;
17
- --spectrum-component-pill-edge-to-visual-200: 22px;
18
- --spectrum-component-pill-edge-to-visual-300: 27px;
19
- --spectrum-component-pill-edge-to-visual-only-75: 5px;
20
- --spectrum-component-pill-edge-to-visual-only-100: 9px;
21
- --spectrum-component-pill-edge-to-visual-only-200: 13px;
22
- --spectrum-component-pill-edge-to-visual-only-300: 16px;
23
- --spectrum-component-pill-edge-to-text-75: 15px;
24
- --spectrum-component-pill-edge-to-text-100: 20px;
25
- --spectrum-component-pill-edge-to-text-200: 25px;
26
- --spectrum-component-pill-edge-to-text-300: 30px;
27
- --spectrum-component-edge-to-visual-50: 7px;
28
- --spectrum-component-edge-to-visual-75: 9px;
29
- --spectrum-component-edge-to-visual-100: 12px;
30
- --spectrum-component-edge-to-visual-200: 16px;
31
- --spectrum-component-edge-to-visual-300: 19px;
32
- --spectrum-component-edge-to-visual-only-50: 4px;
33
- --spectrum-component-edge-to-visual-only-75: 5px;
34
- --spectrum-component-edge-to-visual-only-100: 9px;
35
- --spectrum-component-edge-to-visual-only-200: 13px;
36
- --spectrum-component-edge-to-visual-only-300: 16px;
37
- --spectrum-component-edge-to-text-50: 10px;
38
- --spectrum-component-edge-to-text-75: 11px;
39
- --spectrum-component-edge-to-text-100: 15px;
40
- --spectrum-component-edge-to-text-200: 19px;
41
- --spectrum-component-edge-to-text-300: 22px;
42
- --spectrum-component-height-50: 26px;
43
- --spectrum-component-height-75: 30px;
44
- --spectrum-component-height-100: 40px;
45
- --spectrum-component-height-200: 50px;
46
- --spectrum-component-height-300: 60px;
47
- --spectrum-component-top-to-workflow-icon-50: 4px;
48
- --spectrum-component-top-to-workflow-icon-75: 5px;
49
- --spectrum-component-top-to-workflow-icon-100: 9px;
50
- --spectrum-component-top-to-workflow-icon-200: 13px;
51
- --spectrum-component-top-to-workflow-icon-300: 16px;
52
- --spectrum-component-top-to-text-50: 4px;
53
- --spectrum-component-top-to-text-75: 5px;
54
- --spectrum-component-top-to-text-100: 8px;
55
- --spectrum-component-top-to-text-200: 12px;
56
- --spectrum-component-top-to-text-300: 15px;
57
- --spectrum-component-bottom-to-text-50: 6px;
58
- --spectrum-component-bottom-to-text-75: 6px;
59
- --spectrum-component-bottom-to-text-100: 11px;
60
- --spectrum-component-bottom-to-text-200: 14px;
61
- --spectrum-component-bottom-to-text-300: 18px;
62
- --spectrum-component-to-menu-small: 7px;
63
- --spectrum-component-to-menu-medium: 8px;
64
- --spectrum-component-to-menu-large: 9px;
65
- --spectrum-component-to-menu-extra-large: 10px;
66
- --spectrum-action-bar-height: 56px;
67
- --spectrum-action-bar-top-to-item-counter: 16px;
68
- --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
69
- --spectrum-action-button-edge-to-hold-icon-small: 3px;
70
- --spectrum-action-button-edge-to-hold-icon-medium: 5px;
71
- --spectrum-action-button-edge-to-hold-icon-large: 6px;
72
- --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
73
15
  --spectrum-field-label-text-to-asterisk-small: 5px;
74
16
  --spectrum-field-label-text-to-asterisk-medium: 5px;
75
17
  --spectrum-field-label-text-to-asterisk-large: 6px;
@@ -90,32 +32,6 @@ governing permissions and limitations under the License.
90
32
  --spectrum-help-text-top-to-workflow-icon-medium: 4px;
91
33
  --spectrum-help-text-top-to-workflow-icon-large: 8px;
92
34
  --spectrum-help-text-top-to-workflow-icon-extra-large: 11px;
93
- --spectrum-in-line-alert-minimum-width: 360px;
94
- --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
95
- --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
96
- --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
97
- --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
98
- --spectrum-menu-item-top-to-disclosure-icon-small: 9px;
99
- --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
100
- --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
101
- --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
102
- --spectrum-meter-default-width: 240px;
103
- --spectrum-meter-thickness-small: 5px;
104
- --spectrum-meter-thickness-medium: 8px;
105
- --spectrum-swatch-size-extra-small: 20px;
106
- --spectrum-swatch-size-small: 30px;
107
- --spectrum-swatch-size-medium: 40px;
108
- --spectrum-swatch-size-large: 50px;
109
- --spectrum-progress-bar-thickness-small: 5px;
110
- --spectrum-progress-bar-thickness-medium: 8px;
111
- --spectrum-progress-bar-thickness-large: 10px;
112
- --spectrum-progress-bar-thickness-extra-large: 13px;
113
- --spectrum-progress-circle-size-small: 20px;
114
- --spectrum-progress-circle-size-medium: 40px;
115
- --spectrum-progress-circle-size-large: 80px;
116
- --spectrum-progress-circle-thickness-small: 3px;
117
- --spectrum-progress-circle-thickness-medium: 4px;
118
- --spectrum-progress-circle-thickness-large: 5px;
119
35
  --spectrum-status-light-dot-size-small: 8px;
120
36
  --spectrum-status-light-dot-size-medium: 10px;
121
37
  --spectrum-status-light-dot-size-large: 12px;
@@ -124,19 +40,63 @@ governing permissions and limitations under the License.
124
40
  --spectrum-status-light-top-to-dot-medium: 15px;
125
41
  --spectrum-status-light-top-to-dot-large: 19px;
126
42
  --spectrum-status-light-top-to-dot-extra-large: 24px;
43
+ --spectrum-action-button-edge-to-hold-icon-extra-small: 3px;
44
+ --spectrum-action-button-edge-to-hold-icon-small: 3px;
45
+ --spectrum-action-button-edge-to-hold-icon-medium: 5px;
46
+ --spectrum-action-button-edge-to-hold-icon-large: 6px;
47
+ --spectrum-action-button-edge-to-hold-icon-extra-large: 7px;
48
+ --spectrum-tooltip-tip-width: 10px;
49
+ --spectrum-tooltip-tip-height: 5px;
50
+ --spectrum-tooltip-maximum-width: 200px;
51
+ --spectrum-progress-circle-size-small: 20px;
52
+ --spectrum-progress-circle-size-medium: 40px;
53
+ --spectrum-progress-circle-size-large: 80px;
54
+ --spectrum-progress-circle-thickness-small: 3px;
55
+ --spectrum-progress-circle-thickness-medium: 4px;
56
+ --spectrum-progress-circle-thickness-large: 5px;
127
57
  --spectrum-toast-height: 56px;
58
+ --spectrum-toast-maximum-width: 420px;
128
59
  --spectrum-toast-top-to-workflow-icon: 17px;
129
60
  --spectrum-toast-top-to-text: 16px;
130
61
  --spectrum-toast-bottom-to-text: 19px;
131
- --spectrum-tooltip-tip-width: 10px;
132
- --spectrum-tooltip-tip-height: 5px;
133
- --spectrum-tooltip-maximum-width: 200px;
62
+ --spectrum-action-bar-height: 56px;
63
+ --spectrum-action-bar-top-to-item-counter: 16px;
64
+ --spectrum-swatch-size-extra-small: 20px;
65
+ --spectrum-swatch-size-small: 30px;
66
+ --spectrum-swatch-size-medium: 40px;
67
+ --spectrum-swatch-size-large: 50px;
68
+ --spectrum-progress-bar-thickness-small: 5px;
69
+ --spectrum-progress-bar-thickness-medium: 8px;
70
+ --spectrum-progress-bar-thickness-large: 10px;
71
+ --spectrum-progress-bar-thickness-extra-large: 13px;
72
+ --spectrum-meter-default-width: 240px;
73
+ --spectrum-meter-thickness-small: 5px;
74
+ --spectrum-meter-thickness-large: 8px;
134
75
  --spectrum-tag-top-to-avatar-small: 5px;
135
- --spectrum-tag-top-to-avatar-medium: 9px;
136
- --spectrum-tag-top-to-avatar-large: 12px;
76
+ --spectrum-tag-top-to-avatar-medium: 7px;
77
+ --spectrum-tag-top-to-avatar-large: 11px;
137
78
  --spectrum-tag-top-to-cross-icon-small: 10px;
138
79
  --spectrum-tag-top-to-cross-icon-medium: 15px;
139
80
  --spectrum-tag-top-to-cross-icon-large: 19px;
81
+ --spectrum-popover-top-to-content-area: 5px;
82
+ --spectrum-menu-item-edge-to-content-not-selected-small: 24px;
83
+ --spectrum-menu-item-edge-to-content-not-selected-medium: 42px;
84
+ --spectrum-menu-item-edge-to-content-not-selected-large: 47px;
85
+ --spectrum-menu-item-edge-to-content-not-selected-extra-large: 54px;
86
+ --spectrum-menu-item-top-to-disclosure-icon-small: 9px;
87
+ --spectrum-menu-item-top-to-disclosure-icon-medium: 13px;
88
+ --spectrum-menu-item-top-to-disclosure-icon-large: 17px;
89
+ --spectrum-menu-item-top-to-disclosure-icon-extra-large: 22px;
90
+ --spectrum-picker-visual-to-disclosure-icon-small: 9px;
91
+ --spectrum-picker-visual-to-disclosure-icon-medium: 10px;
92
+ --spectrum-picker-visual-to-disclosure-icon-large: 11px;
93
+ --spectrum-picker-visual-to-disclosure-icon-extra-large: 13px;
94
+ --spectrum-text-area-minimum-width: 140px;
95
+ --spectrum-text-area-minimum-height: 70px;
96
+ --spectrum-combo-box-visual-to-field-button-small: 9px;
97
+ --spectrum-combo-box-visual-to-field-button-medium: 10px;
98
+ --spectrum-combo-box-visual-to-field-button-large: 11px;
99
+ --spectrum-combo-box-visual-to-field-button-extra-large: 13px;
140
100
  --spectrum-thumbnail-size-50: 20px;
141
101
  --spectrum-thumbnail-size-75: 22px;
142
102
  --spectrum-thumbnail-size-100: 26px;
@@ -149,24 +109,44 @@ governing permissions and limitations under the License.
149
109
  --spectrum-thumbnail-size-800: 55px;
150
110
  --spectrum-thumbnail-size-900: 62px;
151
111
  --spectrum-thumbnail-size-1000: 70px;
152
- --spectrum-popover-top-to-content-area: 5px;
153
- --spectrum-text-area-minimum-width: 140px;
154
- --spectrum-text-area-minimum-height: 70px;
155
- --spectrum-font-size-50: 13px;
156
- --spectrum-font-size-75: 15px;
157
- --spectrum-font-size-100: 17px;
158
- --spectrum-font-size-200: 19px;
159
- --spectrum-font-size-300: 22px;
160
- --spectrum-font-size-400: 24px;
161
- --spectrum-font-size-500: 27px;
162
- --spectrum-font-size-600: 31px;
163
- --spectrum-font-size-700: 34px;
164
- --spectrum-font-size-800: 39px;
165
- --spectrum-font-size-900: 44px;
166
- --spectrum-font-size-1000: 49px;
167
- --spectrum-font-size-1100: 55px;
168
- --spectrum-font-size-1200: 62px;
169
- --spectrum-font-size-1300: 70px;
112
+ --spectrum-opacity-checkerboard-square-size: 10px;
113
+ --spectrum-breadcrumbs-height-multiline: 84px;
114
+ --spectrum-breadcrumbs-top-to-text: 17px;
115
+ --spectrum-breadcrumbs-top-to-text-compact: 16px;
116
+ --spectrum-breadcrumbs-top-to-text-multiline: 15px;
117
+ --spectrum-breadcrumbs-bottom-to-text: 19px;
118
+ --spectrum-breadcrumbs-bottom-to-text-compact: 19px;
119
+ --spectrum-breadcrumbs-bottom-to-text-multiline: 10px;
120
+ --spectrum-breadcrumbs-start-edge-to-text: 9px;
121
+ --spectrum-breadcrumbs-top-text-to-bottom-text: 11px;
122
+ --spectrum-breadcrumbs-top-to-separator-icon: 25px;
123
+ --spectrum-breadcrumbs-top-to-separator-icon-compact: 23px;
124
+ --spectrum-breadcrumbs-top-to-separator-icon-multiline: 20px;
125
+ --spectrum-breadcrumbs-separator-icon-to-bottom-text-multiline: 15px;
126
+ --spectrum-breadcrumbs-top-to-truncated-menu: 10px;
127
+ --spectrum-breadcrumbs-top-to-truncated-menu-compact: 5px;
128
+ --spectrum-avatar-size-50: 20px;
129
+ --spectrum-avatar-size-75: 22px;
130
+ --spectrum-avatar-size-100: 26px;
131
+ --spectrum-avatar-size-200: 28px;
132
+ --spectrum-avatar-size-300: 32px;
133
+ --spectrum-avatar-size-400: 36px;
134
+ --spectrum-avatar-size-500: 40px;
135
+ --spectrum-avatar-size-600: 46px;
136
+ --spectrum-avatar-size-700: 50px;
137
+ --spectrum-alert-banner-minimum-height: 64px;
138
+ --spectrum-alert-banner-width: 680px;
139
+ --spectrum-alert-banner-to-top-workflow-icon: 21px;
140
+ --spectrum-alert-banner-to-top-text: 21px;
141
+ --spectrum-alert-banner-to-bottom-text: 22px;
142
+ --spectrum-rating-indicator-width: 22px;
143
+ --spectrum-rating-indicator-to-icon: 5px;
144
+ --spectrum-color-area-width: 240px;
145
+ --spectrum-color-area-minimum-width: 80px;
146
+ --spectrum-color-area-height: 240px;
147
+ --spectrum-color-area-minimum-height: 80px;
148
+ --spectrum-color-wheel-minimum-width: 240px;
149
+ --spectrum-color-slider-length: 240px;
170
150
  --spectrum-workflow-icon-size-50: 18px;
171
151
  --spectrum-workflow-icon-size-75: 20px;
172
152
  --spectrum-workflow-icon-size-100: 22px;
@@ -181,6 +161,57 @@ governing permissions and limitations under the License.
181
161
  --spectrum-text-to-control-100: 13px;
182
162
  --spectrum-text-to-control-200: 14px;
183
163
  --spectrum-text-to-control-300: 16px;
164
+ --spectrum-component-height-50: 26px;
165
+ --spectrum-component-height-75: 30px;
166
+ --spectrum-component-height-100: 40px;
167
+ --spectrum-component-height-200: 50px;
168
+ --spectrum-component-height-300: 60px;
169
+ --spectrum-component-pill-edge-to-visual-75: 13px;
170
+ --spectrum-component-pill-edge-to-visual-100: 17px;
171
+ --spectrum-component-pill-edge-to-visual-200: 22px;
172
+ --spectrum-component-pill-edge-to-visual-300: 27px;
173
+ --spectrum-component-pill-edge-to-visual-only-75: 5px;
174
+ --spectrum-component-pill-edge-to-visual-only-100: 9px;
175
+ --spectrum-component-pill-edge-to-visual-only-200: 13px;
176
+ --spectrum-component-pill-edge-to-visual-only-300: 16px;
177
+ --spectrum-component-pill-edge-to-text-75: 15px;
178
+ --spectrum-component-pill-edge-to-text-100: 20px;
179
+ --spectrum-component-pill-edge-to-text-200: 25px;
180
+ --spectrum-component-pill-edge-to-text-300: 30px;
181
+ --spectrum-component-edge-to-visual-50: 7px;
182
+ --spectrum-component-edge-to-visual-75: 9px;
183
+ --spectrum-component-edge-to-visual-100: 12px;
184
+ --spectrum-component-edge-to-visual-200: 16px;
185
+ --spectrum-component-edge-to-visual-300: 19px;
186
+ --spectrum-component-edge-to-visual-only-50: 4px;
187
+ --spectrum-component-edge-to-visual-only-75: 5px;
188
+ --spectrum-component-edge-to-visual-only-100: 9px;
189
+ --spectrum-component-edge-to-visual-only-200: 13px;
190
+ --spectrum-component-edge-to-visual-only-300: 16px;
191
+ --spectrum-component-edge-to-text-50: 10px;
192
+ --spectrum-component-edge-to-text-75: 11px;
193
+ --spectrum-component-edge-to-text-100: 15px;
194
+ --spectrum-component-edge-to-text-200: 19px;
195
+ --spectrum-component-edge-to-text-300: 22px;
196
+ --spectrum-component-top-to-workflow-icon-50: 4px;
197
+ --spectrum-component-top-to-workflow-icon-75: 5px;
198
+ --spectrum-component-top-to-workflow-icon-100: 9px;
199
+ --spectrum-component-top-to-workflow-icon-200: 13px;
200
+ --spectrum-component-top-to-workflow-icon-300: 16px;
201
+ --spectrum-component-top-to-text-50: 4px;
202
+ --spectrum-component-top-to-text-75: 5px;
203
+ --spectrum-component-top-to-text-100: 8px;
204
+ --spectrum-component-top-to-text-200: 12px;
205
+ --spectrum-component-top-to-text-300: 15px;
206
+ --spectrum-component-bottom-to-text-50: 6px;
207
+ --spectrum-component-bottom-to-text-75: 6px;
208
+ --spectrum-component-bottom-to-text-100: 11px;
209
+ --spectrum-component-bottom-to-text-200: 14px;
210
+ --spectrum-component-bottom-to-text-300: 18px;
211
+ --spectrum-component-to-menu-small: 7px;
212
+ --spectrum-component-to-menu-medium: 8px;
213
+ --spectrum-component-to-menu-large: 9px;
214
+ --spectrum-component-to-menu-extra-large: 10px;
184
215
  --spectrum-field-edge-to-disclosure-icon-75: 9px;
185
216
  --spectrum-field-edge-to-disclosure-icon-100: 13px;
186
217
  --spectrum-field-edge-to-disclosure-icon-200: 17px;
@@ -226,4 +257,24 @@ governing permissions and limitations under the License.
226
257
  --spectrum-disclosure-indicator-top-to-disclosure-icon-medium: 13px;
227
258
  --spectrum-disclosure-indicator-top-to-disclosure-icon-large: 17px;
228
259
  --spectrum-disclosure-indicator-top-to-disclosure-icon-extra-large: 22px;
260
+ --spectrum-navigational-indicator-top-to-back-icon-small: 9px;
261
+ --spectrum-navigational-indicator-top-to-back-icon-medium: 13px;
262
+ --spectrum-navigational-indicator-top-to-back-icon-large: 17px;
263
+ --spectrum-navigational-indicator-top-to-back-icon-extra-large: 22px;
264
+ --spectrum-color-control-track-width: 30px;
265
+ --spectrum-font-size-50: 13px;
266
+ --spectrum-font-size-75: 15px;
267
+ --spectrum-font-size-100: 17px;
268
+ --spectrum-font-size-200: 19px;
269
+ --spectrum-font-size-300: 22px;
270
+ --spectrum-font-size-400: 24px;
271
+ --spectrum-font-size-500: 27px;
272
+ --spectrum-font-size-600: 31px;
273
+ --spectrum-font-size-700: 34px;
274
+ --spectrum-font-size-800: 39px;
275
+ --spectrum-font-size-900: 44px;
276
+ --spectrum-font-size-1000: 49px;
277
+ --spectrum-font-size-1100: 55px;
278
+ --spectrum-font-size-1200: 62px;
279
+ --spectrum-font-size-1300: 70px;
229
280
  }
package/tokens/light-vars.css CHANGED
@@ -13,22 +13,10 @@ governing permissions and limitations under the License.
13
13
  :host,
14
14
  :root {
15
15
  --spectrum-overlay-opacity: 0.4;
16
- --spectrum-gray-background-color-default: var(--spectrum-gray-700);
17
- --spectrum-red-background-color-default: var(--spectrum-red-600);
18
- --spectrum-orange-background-color-default: var(--spectrum-orange-600);
19
- --spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
20
- --spectrum-chartreuse-background-color-default: var(
21
- --spectrum-chartreuse-500
22
- );
23
- --spectrum-celery-background-color-default: var(--spectrum-celery-600);
24
- --spectrum-green-background-color-default: var(--spectrum-green-900);
25
- --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
26
- --spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
27
- --spectrum-blue-background-color-default: var(--spectrum-blue-900);
28
- --spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
29
- --spectrum-purple-background-color-default: var(--spectrum-purple-900);
30
- --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
31
- --spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
16
+ --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.15);
17
+ --spectrum-background-base-color: var(--spectrum-gray-200);
18
+ --spectrum-background-layer-1-color: var(--spectrum-gray-100);
19
+ --spectrum-background-layer-2-color: var(--spectrum-gray-50);
32
20
  --spectrum-neutral-background-color-default: var(--spectrum-gray-800);
33
21
  --spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
34
22
  --spectrum-neutral-background-color-down: var(--spectrum-gray-900);
@@ -85,6 +73,25 @@ governing permissions and limitations under the License.
85
73
  --spectrum-positive-background-color-key-focus: var(
86
74
  --spectrum-positive-color-1000
87
75
  );
76
+ --spectrum-notice-background-color-default: var(
77
+ --spectrum-notice-color-600
78
+ );
79
+ --spectrum-gray-background-color-default: var(--spectrum-gray-700);
80
+ --spectrum-red-background-color-default: var(--spectrum-red-900);
81
+ --spectrum-orange-background-color-default: var(--spectrum-orange-600);
82
+ --spectrum-yellow-background-color-default: var(--spectrum-yellow-400);
83
+ --spectrum-chartreuse-background-color-default: var(
84
+ --spectrum-chartreuse-500
85
+ );
86
+ --spectrum-celery-background-color-default: var(--spectrum-celery-600);
87
+ --spectrum-green-background-color-default: var(--spectrum-green-900);
88
+ --spectrum-seafoam-background-color-default: var(--spectrum-seafoam-900);
89
+ --spectrum-cyan-background-color-default: var(--spectrum-cyan-900);
90
+ --spectrum-blue-background-color-default: var(--spectrum-blue-900);
91
+ --spectrum-indigo-background-color-default: var(--spectrum-indigo-900);
92
+ --spectrum-purple-background-color-default: var(--spectrum-purple-900);
93
+ --spectrum-fuchsia-background-color-default: var(--spectrum-fuchsia-900);
94
+ --spectrum-magenta-background-color-default: var(--spectrum-magenta-900);
88
95
  --spectrum-neutral-visual-color: var(--spectrum-gray-500);
89
96
  --spectrum-accent-visual-color: var(--spectrum-accent-color-800);
90
97
  --spectrum-informative-visual-color: var(--spectrum-informative-color-800);
@@ -105,10 +112,7 @@ governing permissions and limitations under the License.
105
112
  --spectrum-purple-visual-color: var(--spectrum-purple-800);
106
113
  --spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
107
114
  --spectrum-magenta-visual-color: var(--spectrum-magenta-800);
108
- --spectrum-drop-shadow-color: rgba(0, 0, 0, 0.15);
109
- --spectrum-background-base-color: var(--spectrum-gray-200);
110
- --spectrum-background-layer-1-color: var(--spectrum-gray-100);
111
- --spectrum-background-layer-2-color: var(--spectrum-gray-50);
115
+ --spectrum-opacity-checkerboard-square-dark: var(--spectrum-gray-200);
112
116
  --spectrum-gray-50: rgb(255, 255, 255);
113
117
  --spectrum-gray-75: rgb(253, 253, 253);
114
118
  --spectrum-gray-100: rgb(248, 248, 248);
@@ -120,6 +124,20 @@ governing permissions and limitations under the License.
120
124
  --spectrum-gray-700: rgb(70, 70, 70);
121
125
  --spectrum-gray-800: rgb(34, 34, 34);
122
126
  --spectrum-gray-900: rgb(0, 0, 0);
127
+ --spectrum-blue-100: rgb(224, 242, 255);
128
+ --spectrum-blue-200: rgb(202, 232, 255);
129
+ --spectrum-blue-300: rgb(181, 222, 255);
130
+ --spectrum-blue-400: rgb(150, 206, 253);
131
+ --spectrum-blue-500: rgb(120, 187, 250);
132
+ --spectrum-blue-600: rgb(89, 167, 246);
133
+ --spectrum-blue-700: rgb(56, 146, 243);
134
+ --spectrum-blue-800: rgb(20, 122, 243);
135
+ --spectrum-blue-900: rgb(2, 101, 220);
136
+ --spectrum-blue-1000: rgb(0, 84, 182);
137
+ --spectrum-blue-1100: rgb(0, 68, 145);
138
+ --spectrum-blue-1200: rgb(0, 53, 113);
139
+ --spectrum-blue-1300: rgb(0, 39, 84);
140
+ --spectrum-blue-1400: rgb(0, 28, 60);
123
141
  --spectrum-red-100: rgb(255, 235, 231);
124
142
  --spectrum-red-200: rgb(255, 221, 214);
125
143
  --spectrum-red-300: rgb(255, 205, 195);
@@ -232,20 +250,6 @@ governing permissions and limitations under the License.
232
250
  --spectrum-cyan-1200: rgb(0, 57, 93);
233
251
  --spectrum-cyan-1300: rgb(0, 42, 70);
234
252
  --spectrum-cyan-1400: rgb(0, 30, 51);
235
- --spectrum-blue-100: rgb(224, 242, 255);
236
- --spectrum-blue-200: rgb(202, 232, 255);
237
- --spectrum-blue-300: rgb(181, 222, 255);
238
- --spectrum-blue-400: rgb(150, 206, 253);
239
- --spectrum-blue-500: rgb(120, 187, 250);
240
- --spectrum-blue-600: rgb(89, 167, 246);
241
- --spectrum-blue-700: rgb(56, 146, 243);
242
- --spectrum-blue-800: rgb(20, 122, 243);
243
- --spectrum-blue-900: rgb(2, 101, 220);
244
- --spectrum-blue-1000: rgb(0, 84, 182);
245
- --spectrum-blue-1100: rgb(0, 68, 145);
246
- --spectrum-blue-1200: rgb(0, 53, 113);
247
- --spectrum-blue-1300: rgb(0, 39, 84);
248
- --spectrum-blue-1400: rgb(0, 28, 60);
249
253
  --spectrum-indigo-100: rgb(237, 238, 255);
250
254
  --spectrum-indigo-200: rgb(224, 226, 255);
251
255
  --spectrum-indigo-300: rgb(211, 213, 255);