@spectrum-web-components/styles 1.0.0 → 1.0.1-color-testing

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "1.0.0",
3
+ "version": "1.0.1-color-testing",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -119,12 +119,13 @@
119
119
  "lit-html"
120
120
  ],
121
121
  "dependencies": {
122
- "@spectrum-web-components/base": "^1.0.0"
122
+ "@spectrum-web-components/base": "^1.0.1-color-testing",
123
+ "lit": "^2.5.0 || ^3.1.3"
123
124
  },
124
125
  "devDependencies": {
125
126
  "@spectrum-css/commons": "^11.0.0-s2-foundations.15",
126
127
  "@spectrum-css/expressvars": "^3.0.9",
127
- "@spectrum-css/tokens": "^@spectrum-css/tokens@14.3.1",
128
+ "@spectrum-css/tokens": "14.3.1",
128
129
  "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.27",
129
130
  "@spectrum-css/typography": "^7.0.0-s2-foundations.17",
130
131
  "@spectrum-css/vars": "^9.0.8"
@@ -134,5 +135,5 @@
134
135
  "./**/*.css"
135
136
  ],
136
137
  "style": "all-medium-lightest.css",
137
- "gitHead": "5cf5d34645bf9494ebd20f64c42d1619523d2d84"
138
+ "gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
138
139
  }
@@ -0,0 +1,225 @@
1
+ :host,
2
+ :root {
3
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
4
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
5
+
6
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
7
+ --spectrum-assetcard-border-color-selected-hover: var(
8
+ --spectrum-indigo-700
9
+ );
10
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
11
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
12
+ --spectrum-indigo-700
13
+ );
14
+ }
15
+
16
+ :host,
17
+ :root {
18
+ --spectrum-neutral-background-color-selected-default: var(
19
+ --spectrum-gray-800
20
+ );
21
+ --spectrum-neutral-background-color-selected-hover: var(
22
+ --spectrum-gray-900
23
+ );
24
+ --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
25
+ --spectrum-neutral-background-color-selected-key-focus: var(
26
+ --spectrum-gray-900
27
+ );
28
+ --spectrum-slider-track-thickness: 4px;
29
+ --spectrum-slider-handle-gap: 0px;
30
+ --spectrum-picker-border-width: 0;
31
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
32
+ --spectrum-in-field-button-edge-to-fill: 4px;
33
+ --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
34
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
35
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
36
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
37
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
38
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
39
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
40
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
41
+ --spectrum-border-width-100: 2px;
42
+ --spectrum-accent-color-100: var(--spectrum-indigo-100);
43
+ --spectrum-accent-color-200: var(--spectrum-indigo-200);
44
+ --spectrum-accent-color-300: var(--spectrum-indigo-300);
45
+ --spectrum-accent-color-400: var(--spectrum-indigo-400);
46
+ --spectrum-accent-color-500: var(--spectrum-indigo-500);
47
+ --spectrum-accent-color-600: var(--spectrum-indigo-600);
48
+ --spectrum-accent-color-700: var(--spectrum-indigo-700);
49
+ --spectrum-accent-color-800: var(--spectrum-indigo-800);
50
+ --spectrum-accent-color-900: var(--spectrum-indigo-900);
51
+ --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
52
+ --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
53
+ --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
54
+ --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
55
+ --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
56
+ --spectrum-heading-sans-serif-font-weight: var(
57
+ --spectrum-black-font-weight
58
+ );
59
+ --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
60
+ --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
61
+ --spectrum-heading-sans-serif-emphasized-font-weight: var(
62
+ --spectrum-black-font-weight
63
+ );
64
+ --spectrum-heading-serif-emphasized-font-weight: var(
65
+ --spectrum-black-font-weight
66
+ );
67
+ --system: express;
68
+ }
69
+
70
+ :host,
71
+ :root {
72
+ --spectrum-checkbox-control-size-small: 18px;
73
+ --spectrum-checkbox-control-size-medium: 20px;
74
+ --spectrum-checkbox-control-size-large: 22px;
75
+ --spectrum-checkbox-control-size-extra-large: 26px;
76
+ --spectrum-checkbox-top-to-control-small: 6px;
77
+ --spectrum-checkbox-top-to-control-medium: 10px;
78
+ --spectrum-checkbox-top-to-control-large: 14px;
79
+ --spectrum-checkbox-top-to-control-extra-large: 17px;
80
+ --spectrum-switch-control-width-small: 32px;
81
+ --spectrum-switch-control-width-medium: 36px;
82
+ --spectrum-switch-control-width-large: 41px;
83
+ --spectrum-switch-control-width-extra-large: 46px;
84
+ --spectrum-switch-control-height-small: 18px;
85
+ --spectrum-switch-control-height-medium: 20px;
86
+ --spectrum-switch-control-height-large: 22px;
87
+ --spectrum-switch-control-height-extra-large: 26px;
88
+ --spectrum-switch-top-to-control-small: 6px;
89
+ --spectrum-switch-top-to-control-medium: 10px;
90
+ --spectrum-switch-top-to-control-large: 14px;
91
+ --spectrum-switch-top-to-control-extra-large: 17px;
92
+ --spectrum-radio-button-control-size-small: 18px;
93
+ --spectrum-radio-button-control-size-medium: 20px;
94
+ --spectrum-radio-button-control-size-large: 22px;
95
+ --spectrum-radio-button-control-size-extra-large: 26px;
96
+ --spectrum-radio-button-top-to-control-small: 6px;
97
+ --spectrum-radio-button-top-to-control-medium: 10px;
98
+ --spectrum-radio-button-top-to-control-large: 14px;
99
+ --spectrum-radio-button-top-to-control-extra-large: 17px;
100
+ --spectrum-slider-control-height-small: 22px;
101
+ --spectrum-slider-control-height-medium: 24px;
102
+ --spectrum-slider-control-height-large: 28px;
103
+ --spectrum-slider-control-height-extra-large: 30px;
104
+ --spectrum-slider-handle-size-small: 22px;
105
+ --spectrum-slider-handle-size-medium: 24px;
106
+ --spectrum-slider-handle-size-large: 28px;
107
+ --spectrum-slider-handle-size-extra-large: 30px;
108
+ --spectrum-slider-handle-border-width-down-small: var(
109
+ --spectrum-border-width-200
110
+ );
111
+ --spectrum-slider-handle-border-width-down-medium: var(
112
+ --spectrum-border-width-200
113
+ );
114
+ --spectrum-slider-handle-border-width-down-large: var(
115
+ --spectrum-border-width-200
116
+ );
117
+ --spectrum-slider-handle-border-width-down-extra-large: var(
118
+ --spectrum-border-width-200
119
+ );
120
+ --spectrum-slider-bottom-to-handle-small: 4px;
121
+ --spectrum-slider-bottom-to-handle-medium: 8px;
122
+ --spectrum-slider-bottom-to-handle-large: 12px;
123
+ --spectrum-slider-bottom-to-handle-extra-large: 15px;
124
+ --spectrum-corner-radius-75: 4px;
125
+ --spectrum-corner-radius-100: 8px;
126
+ --spectrum-corner-radius-200: 16px;
127
+ --spectrum-drop-shadow-x: 0px;
128
+ --spectrum-drop-shadow-y: 4px;
129
+ --spectrum-drop-shadow-blur: 16px;
130
+ --spectrum-colorwheel-path: 'M 118 118 m -118 0 a 118 118 0 1 0 236 0 a 118 118 0 1 0 -236 0.2 M 118 118 m -92 0 a 92 92 0 1 0 184 0 a 92 92 0 1 0 -184 0';
131
+ --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0';
132
+
133
+ --spectrum-dialog-confirm-border-radius: 8px;
134
+
135
+ --spectrum-dial-border-radius: 15px;
136
+
137
+ --spectrum-assetcard-focus-ring-border-radius: 12px;
138
+ }
139
+
140
+ :host,
141
+ :root {
142
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
143
+ --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
144
+
145
+ --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
146
+ --spectrum-assetcard-border-color-selected-hover: var(
147
+ --spectrum-indigo-900
148
+ );
149
+ --spectrum-assetcard-border-color-selected-down: var(
150
+ --spectrum-indigo-1000
151
+ );
152
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
153
+ --spectrum-indigo-900
154
+ );
155
+ }
156
+
157
+ :host,
158
+ :root {
159
+ --spectrum-checkbox-control-size-small: 14px;
160
+ --spectrum-checkbox-control-size-medium: 16px;
161
+ --spectrum-checkbox-control-size-large: 18px;
162
+ --spectrum-checkbox-control-size-extra-large: 20px;
163
+ --spectrum-checkbox-top-to-control-small: 5px;
164
+ --spectrum-checkbox-top-to-control-medium: 8px;
165
+ --spectrum-checkbox-top-to-control-large: 11px;
166
+ --spectrum-checkbox-top-to-control-extra-large: 14px;
167
+ --spectrum-switch-control-width-small: 25px;
168
+ --spectrum-switch-control-width-medium: 28px;
169
+ --spectrum-switch-control-width-large: 32px;
170
+ --spectrum-switch-control-width-extra-large: 35px;
171
+ --spectrum-switch-control-height-small: 14px;
172
+ --spectrum-switch-control-height-medium: 16px;
173
+ --spectrum-switch-control-height-large: 18px;
174
+ --spectrum-switch-control-height-extra-large: 20px;
175
+ --spectrum-switch-top-to-control-small: 5px;
176
+ --spectrum-switch-top-to-control-medium: 8px;
177
+ --spectrum-switch-top-to-control-large: 11px;
178
+ --spectrum-switch-top-to-control-extra-large: 14px;
179
+ --spectrum-radio-button-control-size-small: 14px;
180
+ --spectrum-radio-button-control-size-medium: 16px;
181
+ --spectrum-radio-button-control-size-large: 18px;
182
+ --spectrum-radio-button-control-size-extra-large: 20px;
183
+ --spectrum-radio-button-top-to-control-small: 5px;
184
+ --spectrum-radio-button-top-to-control-medium: 8px;
185
+ --spectrum-radio-button-top-to-control-large: 11px;
186
+ --spectrum-radio-button-top-to-control-extra-large: 14px;
187
+ --spectrum-slider-control-height-small: 18px;
188
+ --spectrum-slider-control-height-medium: 20px;
189
+ --spectrum-slider-control-height-large: 22px;
190
+ --spectrum-slider-control-height-extra-large: 24px;
191
+ --spectrum-slider-handle-size-small: 18px;
192
+ --spectrum-slider-handle-size-medium: 20px;
193
+ --spectrum-slider-handle-size-large: 22px;
194
+ --spectrum-slider-handle-size-extra-large: 24px;
195
+ --spectrum-slider-handle-border-width-down-small: var(
196
+ --spectrum-border-width-200
197
+ );
198
+ --spectrum-slider-handle-border-width-down-medium: var(
199
+ --spectrum-border-width-200
200
+ );
201
+ --spectrum-slider-handle-border-width-down-large: var(
202
+ --spectrum-border-width-200
203
+ );
204
+ --spectrum-slider-handle-border-width-down-extra-large: var(
205
+ --spectrum-border-width-200
206
+ );
207
+ --spectrum-slider-bottom-to-handle-small: 3px;
208
+ --spectrum-slider-bottom-to-handle-medium: 6px;
209
+ --spectrum-slider-bottom-to-handle-large: 9px;
210
+ --spectrum-slider-bottom-to-handle-extra-large: 12px;
211
+ --spectrum-corner-radius-75: 3px;
212
+ --spectrum-corner-radius-100: 6px;
213
+ --spectrum-corner-radius-200: 12px;
214
+ --spectrum-drop-shadow-x: 0px;
215
+ --spectrum-drop-shadow-y: 4px;
216
+ --spectrum-drop-shadow-blur: 16px;
217
+ --spectrum-colorwheel-path: 'M 94 94 m -94 0 a 94 94 0 1 0 188 0 a 94 94 0 1 0 -188 0.2 M 94 94 m -74 0 a 74 74 0 1 0 148 0 a 74 74 0 1 0 -148 0';
218
+ --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0';
219
+
220
+ --spectrum-dialog-confirm-border-radius: 6px;
221
+
222
+ --spectrum-dial-border-radius: 12px;
223
+
224
+ --spectrum-assetcard-focus-ring-border-radius: 10px;
225
+ }
@@ -0,0 +1,803 @@
1
+ :host,
2
+ :root {
3
+ --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
4
+ --spectrum-menu-item-background-color-default-opacity: 0;
5
+ --spectrum-menu-item-background-color-default: rgba(
6
+ var(--spectrum-menu-item-background-color-default-rgb),
7
+ var(--spectrum-menu-item-background-color-default-opacity)
8
+ );
9
+ --spectrum-menu-item-background-color-hover: var(
10
+ --spectrum-transparent-white-200
11
+ );
12
+ --spectrum-menu-item-background-color-down: var(
13
+ --spectrum-transparent-white-200
14
+ );
15
+ --spectrum-menu-item-background-color-key-focus: var(
16
+ --spectrum-transparent-white-200
17
+ );
18
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
19
+ --spectrum-dropindicator-color: var(--spectrum-blue-700);
20
+
21
+ --spectrum-calendar-day-background-color-selected: rgba(
22
+ var(--spectrum-blue-800-rgb),
23
+ 0.15
24
+ );
25
+ --spectrum-calendar-day-background-color-hover: rgba(
26
+ var(--spectrum-white-rgb),
27
+ 0.07
28
+ );
29
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
30
+ var(--spectrum-blue-800-rgb),
31
+ 0.25
32
+ );
33
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
34
+ var(--spectrum-blue-800-rgb),
35
+ 0.25
36
+ );
37
+ --spectrum-calendar-day-background-color-down: var(
38
+ --spectrum-transparent-white-200
39
+ );
40
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
41
+ var(--spectrum-blue-800-rgb),
42
+ 0.25
43
+ );
44
+ --spectrum-calendar-day-background-color-key-focus: rgba(
45
+ var(--spectrum-white-rgb),
46
+ 0.07
47
+ );
48
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
49
+
50
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
51
+
52
+ --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
53
+
54
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
55
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
56
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
57
+
58
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
59
+
60
+ --spectrum-steplist-current-marker-color-key-focus: var(
61
+ --spectrum-blue-700
62
+ );
63
+
64
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
65
+ var(--spectrum-gray-900-rgb),
66
+ 0.07
67
+ );
68
+ --spectrum-treeview-item-background-color-selected: rgba(
69
+ var(--spectrum-blue-800-rgb),
70
+ 0.15
71
+ );
72
+
73
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
74
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
75
+ --spectrum-logic-button-and-background-color-hover: var(
76
+ --spectrum-blue-1000
77
+ );
78
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
79
+
80
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
81
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
82
+ --spectrum-logic-button-or-background-color-hover: var(
83
+ --spectrum-magenta-900
84
+ );
85
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
86
+
87
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
88
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
89
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
90
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
91
+ --spectrum-blue-800
92
+ );
93
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
94
+
95
+ --spectrum-assetlist-item-background-color-selected-hover: rgba(
96
+ var(--spectrum-blue-800-rgb),
97
+ 0.25
98
+ );
99
+ --spectrum-assetlist-item-background-color-selected: rgba(
100
+ var(--spectrum-blue-800-rgb),
101
+ 0.15
102
+ );
103
+ --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
104
+
105
+ --spectrum-swatch-border-color-rgb: 255, 255, 255;
106
+
107
+ --spectrum-swatch-border-color-opacity: 0.51;
108
+
109
+ --spectrum-swatch-border-color: rgba(
110
+ var(--spectrum-swatch-border-color-rgb),
111
+ var(--spectrum-swatch-border-color-opacity)
112
+ );
113
+ --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
114
+ --spectrum-swatch-border-color-light-opacity: 0.2;
115
+ --spectrum-swatch-border-color-light: rgba(
116
+ var(--spectrum-swatch-border-color-light-rgb),
117
+ var(--spectrum-swatch-border-color-light-opacity)
118
+ );
119
+ }
120
+
121
+ :host,
122
+ :root {
123
+ --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
124
+ --spectrum-menu-item-background-color-default-opacity: 0;
125
+ --spectrum-menu-item-background-color-default: rgba(
126
+ var(--spectrum-menu-item-background-color-default-rgb),
127
+ var(--spectrum-menu-item-background-color-default-opacity)
128
+ );
129
+ --spectrum-menu-item-background-color-hover: var(
130
+ --spectrum-transparent-white-200
131
+ );
132
+ --spectrum-menu-item-background-color-down: var(
133
+ --spectrum-transparent-white-200
134
+ );
135
+ --spectrum-menu-item-background-color-key-focus: var(
136
+ --spectrum-transparent-white-200
137
+ );
138
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
139
+ --spectrum-dropindicator-color: var(--spectrum-blue-700);
140
+
141
+ --spectrum-calendar-day-background-color-selected: rgba(
142
+ var(--spectrum-blue-800-rgb),
143
+ 0.2
144
+ );
145
+ --spectrum-calendar-day-background-color-hover: rgba(
146
+ var(--spectrum-white-rgb),
147
+ 0.08
148
+ );
149
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
150
+ var(--spectrum-blue-800-rgb),
151
+ 0.3
152
+ );
153
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
154
+ var(--spectrum-blue-800-rgb),
155
+ 0.3
156
+ );
157
+ --spectrum-calendar-day-background-color-down: rgba(
158
+ var(--spectrum-white-rgb),
159
+ 0.15
160
+ );
161
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
162
+ var(--spectrum-blue-800-rgb),
163
+ 0.3
164
+ );
165
+ --spectrum-calendar-day-background-color-key-focus: rgba(
166
+ var(--spectrum-white-rgb),
167
+ 0.08
168
+ );
169
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
170
+
171
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
172
+
173
+ --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
174
+
175
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
176
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
177
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
178
+
179
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
180
+
181
+ --spectrum-steplist-current-marker-color-key-focus: var(
182
+ --spectrum-blue-700
183
+ );
184
+
185
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
186
+ var(--spectrum-gray-900-rgb),
187
+ 0.08
188
+ );
189
+ --spectrum-treeview-item-background-color-selected: rgba(
190
+ var(--spectrum-blue-800-rgb),
191
+ 0.2
192
+ );
193
+
194
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
195
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
196
+ --spectrum-logic-button-and-background-color-hover: var(
197
+ --spectrum-blue-1000
198
+ );
199
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
200
+
201
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
202
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
203
+ --spectrum-logic-button-or-background-color-hover: var(
204
+ --spectrum-magenta-900
205
+ );
206
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
207
+
208
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
209
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
210
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
211
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
212
+ --spectrum-blue-800
213
+ );
214
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
215
+
216
+ --spectrum-assetlist-item-background-color-selected-hover: rgba(
217
+ var(--spectrum-blue-800-rgb),
218
+ 0.3
219
+ );
220
+ --spectrum-assetlist-item-background-color-selected: rgba(
221
+ var(--spectrum-blue-800-rgb),
222
+ 0.2
223
+ );
224
+ --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
225
+
226
+ --spectrum-swatch-border-color-rgb: 255, 255, 255;
227
+
228
+ --spectrum-swatch-border-color-opacity: 0.51;
229
+
230
+ --spectrum-swatch-border-color: rgba(
231
+ var(--spectrum-swatch-border-color-rgb),
232
+ var(--spectrum-swatch-border-color-opacity)
233
+ );
234
+ --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
235
+ --spectrum-swatch-border-color-light-opacity: 0.2;
236
+ --spectrum-swatch-border-color-light: rgba(
237
+ var(--spectrum-swatch-border-color-light-rgb),
238
+ var(--spectrum-swatch-border-color-light-opacity)
239
+ );
240
+ }
241
+
242
+ :host,
243
+ :root {
244
+ --spectrum-neutral-background-color-selected-default: var(
245
+ --spectrum-gray-700
246
+ );
247
+ --spectrum-neutral-background-color-selected-hover: var(
248
+ --spectrum-gray-800
249
+ );
250
+ --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
251
+ --spectrum-neutral-background-color-selected-key-focus: var(
252
+ --spectrum-gray-800
253
+ );
254
+ --spectrum-slider-track-thickness: 2px;
255
+ --spectrum-slider-handle-gap: 4px;
256
+ --spectrum-picker-border-width: var(--spectrum-border-width-100);
257
+ --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px;
258
+ --spectrum-in-field-button-edge-to-fill: 0px;
259
+ --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px;
260
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px;
261
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px;
262
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px;
263
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var(
264
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small
265
+ );
266
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var(
267
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium
268
+ );
269
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var(
270
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large
271
+ );
272
+ --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var(
273
+ --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large
274
+ );
275
+ --spectrum-corner-radius-75: 2px;
276
+ --spectrum-drop-shadow-x: 0px;
277
+ --spectrum-border-width-100: 1px;
278
+ --spectrum-accent-color-100: var(--spectrum-blue-100);
279
+ --spectrum-accent-color-200: var(--spectrum-blue-200);
280
+ --spectrum-accent-color-300: var(--spectrum-blue-300);
281
+ --spectrum-accent-color-400: var(--spectrum-blue-400);
282
+ --spectrum-accent-color-500: var(--spectrum-blue-500);
283
+ --spectrum-accent-color-600: var(--spectrum-blue-600);
284
+ --spectrum-accent-color-700: var(--spectrum-blue-700);
285
+ --spectrum-accent-color-800: var(--spectrum-blue-800);
286
+ --spectrum-accent-color-900: var(--spectrum-blue-900);
287
+ --spectrum-accent-color-1000: var(--spectrum-blue-1000);
288
+ --spectrum-accent-color-1100: var(--spectrum-blue-1100);
289
+ --spectrum-accent-color-1200: var(--spectrum-blue-1200);
290
+ --spectrum-accent-color-1300: var(--spectrum-blue-1300);
291
+ --spectrum-accent-color-1400: var(--spectrum-blue-1400);
292
+ --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight);
293
+ --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight);
294
+ --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight);
295
+ --spectrum-heading-sans-serif-emphasized-font-weight: var(
296
+ --spectrum-bold-font-weight
297
+ );
298
+ --spectrum-heading-serif-emphasized-font-weight: var(
299
+ --spectrum-bold-font-weight
300
+ );
301
+ --system: spectrum;
302
+ --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1);
303
+ --spectrum-animation-duration-0: 0ms;
304
+ --spectrum-animation-duration-100: 130ms;
305
+ --spectrum-animation-duration-200: 160ms;
306
+ --spectrum-animation-duration-300: 190ms;
307
+ --spectrum-animation-duration-400: 220ms;
308
+ --spectrum-animation-duration-500: 250ms;
309
+ --spectrum-animation-duration-600: 300ms;
310
+ --spectrum-animation-duration-700: 350ms;
311
+ --spectrum-animation-duration-800: 400ms;
312
+ --spectrum-animation-duration-900: 450ms;
313
+ --spectrum-animation-duration-1000: 500ms;
314
+ --spectrum-animation-duration-2000: 1000ms;
315
+ --spectrum-animation-duration-4000: 2000ms;
316
+ --spectrum-animation-duration-6000: 3000ms;
317
+ --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
318
+ --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
319
+ --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
320
+ --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
321
+
322
+ --spectrum-sans-font-family-stack: adobe-clean,
323
+ var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system,
324
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS',
325
+ 'Lucida Grande', sans-serif;
326
+ --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
327
+
328
+ --spectrum-serif-font-family-stack: adobe-clean-serif,
329
+ var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif;
330
+ --spectrum-serif-font: var(--spectrum-serif-font-family-stack);
331
+
332
+ --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace;
333
+
334
+ --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro',
335
+ -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu,
336
+ 'Trebuchet MS', 'Lucida Grande', sans-serif;
337
+ --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro',
338
+ -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu,
339
+ 'Trebuchet MS', 'Lucida Grande', sans-serif;
340
+
341
+ --spectrum-font-family: var(--spectrum-sans-font-family-stack);
342
+ --spectrum-font-style: var(--spectrum-default-font-style);
343
+ --spectrum-font-size: var(--spectrum-font-size-100);
344
+
345
+ --spectrum-cjk-font-family-stack: adobe-clean-han-japanese,
346
+ var(--spectrum-cjk-font-family), sans-serif;
347
+ --spectrum-cjk-font: var(--spectrum-code-font-family-stack);
348
+ --spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
349
+ --spectrum-docs-static-white-background-color: rgba(
350
+ var(--spectrum-docs-static-white-background-color-rgb)
351
+ );
352
+ --spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
353
+ --spectrum-docs-static-black-background-color: rgba(
354
+ var(--spectrum-docs-static-black-background-color-rgb)
355
+ );
356
+
357
+ --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
358
+ }
359
+
360
+ :host,
361
+ :root {
362
+ --spectrum-checkbox-control-size-small: 16px;
363
+ --spectrum-checkbox-control-size-medium: 18px;
364
+ --spectrum-checkbox-control-size-large: 20px;
365
+ --spectrum-checkbox-control-size-extra-large: 22px;
366
+ --spectrum-checkbox-top-to-control-small: 7px;
367
+ --spectrum-checkbox-top-to-control-medium: 11px;
368
+ --spectrum-checkbox-top-to-control-large: 15px;
369
+ --spectrum-checkbox-top-to-control-extra-large: 19px;
370
+ --spectrum-switch-control-width-small: 32px;
371
+ --spectrum-switch-control-width-medium: 36px;
372
+ --spectrum-switch-control-width-large: 41px;
373
+ --spectrum-switch-control-width-extra-large: 46px;
374
+ --spectrum-switch-control-height-small: 16px;
375
+ --spectrum-switch-control-height-medium: 18px;
376
+ --spectrum-switch-control-height-large: 20px;
377
+ --spectrum-switch-control-height-extra-large: 22px;
378
+ --spectrum-switch-top-to-control-small: 7px;
379
+ --spectrum-switch-top-to-control-medium: 11px;
380
+ --spectrum-switch-top-to-control-large: 15px;
381
+ --spectrum-switch-top-to-control-extra-large: 19px;
382
+ --spectrum-radio-button-control-size-small: 16px;
383
+ --spectrum-radio-button-control-size-medium: 18px;
384
+ --spectrum-radio-button-control-size-large: 20px;
385
+ --spectrum-radio-button-control-size-extra-large: 22px;
386
+ --spectrum-radio-button-top-to-control-small: 7px;
387
+ --spectrum-radio-button-top-to-control-medium: 11px;
388
+ --spectrum-radio-button-top-to-control-large: 15px;
389
+ --spectrum-radio-button-top-to-control-extra-large: 19px;
390
+ --spectrum-slider-control-height-small: 18px;
391
+ --spectrum-slider-control-height-medium: 20px;
392
+ --spectrum-slider-control-height-large: 22px;
393
+ --spectrum-slider-control-height-extra-large: 26px;
394
+ --spectrum-slider-handle-size-small: 18px;
395
+ --spectrum-slider-handle-size-medium: 20px;
396
+ --spectrum-slider-handle-size-large: 22px;
397
+ --spectrum-slider-handle-size-extra-large: 26px;
398
+ --spectrum-slider-handle-border-width-down-small: 7px;
399
+ --spectrum-slider-handle-border-width-down-medium: 8px;
400
+ --spectrum-slider-handle-border-width-down-large: 9px;
401
+ --spectrum-slider-handle-border-width-down-extra-large: 11px;
402
+ --spectrum-slider-bottom-to-handle-small: 6px;
403
+ --spectrum-slider-bottom-to-handle-medium: 10px;
404
+ --spectrum-slider-bottom-to-handle-large: 14px;
405
+ --spectrum-slider-bottom-to-handle-extra-large: 17px;
406
+ --spectrum-corner-radius-100: 5px;
407
+ --spectrum-corner-radius-200: 10px;
408
+ --spectrum-drop-shadow-y: 2px;
409
+ --spectrum-drop-shadow-blur: 6px;
410
+ --spectrum-slider-tick-mark-height: 13px;
411
+ --spectrum-slider-ramp-track-height: 20px;
412
+
413
+ --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 0';
414
+ --spectrum-colorwheel-path-borders: 'M 120 120 m -120 0 a 120 120 0 1 0 240 0 a 120 120 0 1 0 -240 0.2 M 120 120 m -90 0 a 90 90 0 1 0 180 0 a 90 90 0 1 0 -180 0';
415
+ --spectrum-colorwheel-colorarea-container-size: 182px;
416
+
417
+ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary);
418
+
419
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200);
420
+
421
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px;
422
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px;
423
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px;
424
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px;
425
+
426
+ --spectrum-menu-item-checkmark-height-small: 12px;
427
+ --spectrum-menu-item-checkmark-height-medium: 14px;
428
+ --spectrum-menu-item-checkmark-height-large: 16px;
429
+ --spectrum-menu-item-checkmark-height-extra-large: 16px;
430
+
431
+ --spectrum-menu-item-checkmark-width-small: 12px;
432
+ --spectrum-menu-item-checkmark-width-medium: 14px;
433
+ --spectrum-menu-item-checkmark-width-large: 16px;
434
+ --spectrum-menu-item-checkmark-width-extra-large: 16px;
435
+
436
+ --spectrum-rating-icon-spacing: var(--spectrum-spacing-100);
437
+
438
+ --spectrum-button-top-to-text-small: 6px;
439
+ --spectrum-button-bottom-to-text-small: 5px;
440
+ --spectrum-button-top-to-text-medium: 9px;
441
+ --spectrum-button-bottom-to-text-medium: 10px;
442
+ --spectrum-button-top-to-text-large: 12px;
443
+ --spectrum-button-bottom-to-text-large: 13px;
444
+ --spectrum-button-top-to-text-extra-large: 16px;
445
+ --spectrum-button-bottom-to-text-extra-large: 17px;
446
+
447
+ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);
448
+ --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200);
449
+ --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200);
450
+ --spectrum-alert-banner-text-to-button-vertical: var(
451
+ --spectrum-spacing-200
452
+ );
453
+
454
+ --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
455
+ --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
456
+
457
+ --spectrum-coach-indicator-gap: 8px;
458
+ --spectrum-coach-indicator-ring-diameter: 20px;
459
+ --spectrum-coach-indicator-quiet-ring-diameter: 10px;
460
+
461
+ --spectrum-coachmark-buttongroup-display: none;
462
+ --spectrum-coachmark-buttongroup-mobile-display: flex;
463
+ --spectrum-coachmark-menu-display: none;
464
+ --spectrum-coachmark-menu-mobile-display: inline-flex;
465
+
466
+ --spectrum-well-padding: 20px;
467
+ --spectrum-well-margin-top: 5px;
468
+ --spectrum-well-min-width: 300px;
469
+ --spectrum-well-border-radius: 5px;
470
+ --spectrum-workflow-icon-size-xxl: 40px;
471
+ --spectrum-workflow-icon-size-xxs: 15px;
472
+
473
+ --spectrum-treeview-item-indentation-medium: 20px;
474
+ --spectrum-treeview-item-indentation-small: 15px;
475
+ --spectrum-treeview-item-indentation-large: 25px;
476
+ --spectrum-treeview-item-indentation-extra-large: 30px;
477
+ --spectrum-treeview-indicator-inset-block-start: 6px;
478
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px;
479
+
480
+ --spectrum-dialog-confirm-entry-animation-distance: 25px;
481
+ --spectrum-dialog-confirm-hero-height: 160px;
482
+ --spectrum-dialog-confirm-border-radius: 5px;
483
+ --spectrum-dialog-confirm-title-text-size: 19px;
484
+ --spectrum-dialog-confirm-description-text-size: 15px;
485
+ --spectrum-dialog-confirm-padding-grid: 24px;
486
+
487
+ --spectrum-datepicker-initial-width: 160px;
488
+ --spectrum-datepicker-generic-padding: 15px;
489
+ --spectrum-datepicker-dash-line-height: 30px;
490
+ --spectrum-datepicker-width-quiet-first: 90px;
491
+ --spectrum-datepicker-width-quiet-second: 20px;
492
+ --spectrum-datepicker-datetime-width-first: 45px;
493
+ --spectrum-datepicker-invalid-icon-to-button: 10px;
494
+ --spectrum-datepicker-invalid-icon-to-button-quiet: 9px;
495
+ --spectrum-datepicker-input-datetime-width: 30px;
496
+
497
+ --spectrum-pagination-textfield-width: 60px;
498
+ --spectrum-pagination-item-inline-spacing: 6px;
499
+
500
+ --spectrum-dial-border-radius: 20px;
501
+ --spectrum-dial-handle-position: 10px;
502
+ --spectrum-dial-handle-block-margin: 20px;
503
+ --spectrum-dial-handle-inline-margin: 20px;
504
+ --spectrum-dial-controls-margin: 10px;
505
+ --spectrum-dial-label-gap-y: 6px;
506
+ --spectrum-dial-label-container-top-to-text: 5px;
507
+
508
+ --spectrum-assetcard-focus-ring-border-radius: 9px;
509
+ --spectrum-assetcard-selectionindicator-margin: 15px;
510
+ --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs);
511
+ --spectrum-assetcard-header-content-font-size: var(
512
+ --spectrum-heading-size-xxs
513
+ );
514
+ --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs);
515
+
516
+ --spectrum-tooltip-animation-distance: 5px;
517
+
518
+ --spectrum-ui-icon-medium-display: none;
519
+ --spectrum-ui-icon-large-display: block;
520
+ }
521
+
522
+ :host,
523
+ :root {
524
+ --spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
525
+ --spectrum-menu-item-background-color-default-opacity: 0;
526
+ --spectrum-menu-item-background-color-default: rgba(
527
+ var(--spectrum-menu-item-background-color-default-rgb),
528
+ var(--spectrum-menu-item-background-color-default-opacity)
529
+ );
530
+ --spectrum-menu-item-background-color-hover: var(
531
+ --spectrum-transparent-black-200
532
+ );
533
+ --spectrum-menu-item-background-color-down: var(
534
+ --spectrum-transparent-black-200
535
+ );
536
+ --spectrum-menu-item-background-color-key-focus: var(
537
+ --spectrum-transparent-black-200
538
+ );
539
+ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb);
540
+ --spectrum-dropindicator-color: var(--spectrum-blue-800);
541
+
542
+ --spectrum-calendar-day-background-color-selected: rgba(
543
+ var(--spectrum-blue-900-rgb),
544
+ 0.1
545
+ );
546
+ --spectrum-calendar-day-background-color-hover: rgba(
547
+ var(--spectrum-black-rgb),
548
+ 0.06
549
+ );
550
+ --spectrum-calendar-day-today-background-color-selected-hover: rgba(
551
+ var(--spectrum-blue-900-rgb),
552
+ 0.2
553
+ );
554
+ --spectrum-calendar-day-background-color-selected-hover: rgba(
555
+ var(--spectrum-blue-900-rgb),
556
+ 0.2
557
+ );
558
+ --spectrum-calendar-day-background-color-down: var(
559
+ --spectrum-transparent-black-200
560
+ );
561
+ --spectrum-calendar-day-background-color-cap-selected: rgba(
562
+ var(--spectrum-blue-900-rgb),
563
+ 0.2
564
+ );
565
+ --spectrum-calendar-day-background-color-key-focus: rgba(
566
+ var(--spectrum-black-rgb),
567
+ 0.06
568
+ );
569
+ --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
570
+
571
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
572
+
573
+ --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
574
+
575
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
576
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
577
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
578
+
579
+ --spectrum-well-border-color: var(--spectrum-black);
580
+
581
+ --spectrum-steplist-current-marker-color-key-focus: var(
582
+ --spectrum-blue-800
583
+ );
584
+
585
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
586
+ var(--spectrum-gray-900-rgb),
587
+ 0.06
588
+ );
589
+ --spectrum-treeview-item-background-color-selected: rgba(
590
+ var(--spectrum-blue-900-rgb),
591
+ 0.1
592
+ );
593
+
594
+ --spectrum-logic-button-and-background-color: var(--spectrum-blue-900);
595
+ --spectrum-logic-button-and-border-color: var(--spectrum-blue-900);
596
+ --spectrum-logic-button-and-background-color-hover: var(
597
+ --spectrum-blue-1100
598
+ );
599
+ --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100);
600
+
601
+ --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900);
602
+ --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900);
603
+ --spectrum-logic-button-or-background-color-hover: var(
604
+ --spectrum-magenta-1100
605
+ );
606
+ --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100);
607
+
608
+ --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
609
+ --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
610
+ --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
611
+ --spectrum-assetcard-selectionindicator-background-color-ordered: var(
612
+ --spectrum-blue-900
613
+ );
614
+ --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800);
615
+
616
+ --spectrum-assetlist-item-background-color-selected-hover: rgba(
617
+ var(--spectrum-blue-900-rgb),
618
+ 0.2
619
+ );
620
+ --spectrum-assetlist-item-background-color-selected: rgba(
621
+ var(--spectrum-blue-900-rgb),
622
+ 0.1
623
+ );
624
+ --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800);
625
+
626
+ --spectrum-swatch-border-color-rgb: 0, 0, 0;
627
+
628
+ --spectrum-swatch-border-color-opacity: 0.51;
629
+
630
+ --spectrum-swatch-border-color: rgba(
631
+ var(--spectrum-swatch-border-color-rgb),
632
+ var(--spectrum-swatch-border-color-opacity)
633
+ );
634
+ --spectrum-swatch-border-color-light-rgb: 0, 0, 0;
635
+ --spectrum-swatch-border-color-light-opacity: 0.2;
636
+ --spectrum-swatch-border-color-light: rgba(
637
+ var(--spectrum-swatch-border-color-light-rgb),
638
+ var(--spectrum-swatch-border-color-light-opacity)
639
+ );
640
+ }
641
+
642
+ :host,
643
+ :root {
644
+ --spectrum-checkbox-control-size-small: 12px;
645
+ --spectrum-checkbox-control-size-medium: 14px;
646
+ --spectrum-checkbox-control-size-large: 16px;
647
+ --spectrum-checkbox-control-size-extra-large: 18px;
648
+ --spectrum-checkbox-top-to-control-small: 6px;
649
+ --spectrum-checkbox-top-to-control-medium: 9px;
650
+ --spectrum-checkbox-top-to-control-large: 12px;
651
+ --spectrum-checkbox-top-to-control-extra-large: 15px;
652
+ --spectrum-switch-control-width-small: 23px;
653
+ --spectrum-switch-control-width-medium: 26px;
654
+ --spectrum-switch-control-width-large: 29px;
655
+ --spectrum-switch-control-width-extra-large: 33px;
656
+ --spectrum-switch-control-height-small: 12px;
657
+ --spectrum-switch-control-height-medium: 14px;
658
+ --spectrum-switch-control-height-large: 16px;
659
+ --spectrum-switch-control-height-extra-large: 18px;
660
+ --spectrum-switch-top-to-control-small: 6px;
661
+ --spectrum-switch-top-to-control-medium: 9px;
662
+ --spectrum-switch-top-to-control-large: 12px;
663
+ --spectrum-switch-top-to-control-extra-large: 15px;
664
+ --spectrum-radio-button-control-size-small: 12px;
665
+ --spectrum-radio-button-control-size-medium: 14px;
666
+ --spectrum-radio-button-control-size-large: 16px;
667
+ --spectrum-radio-button-control-size-extra-large: 18px;
668
+ --spectrum-radio-button-top-to-control-small: 6px;
669
+ --spectrum-radio-button-top-to-control-medium: 9px;
670
+ --spectrum-radio-button-top-to-control-large: 12px;
671
+ --spectrum-radio-button-top-to-control-extra-large: 15px;
672
+ --spectrum-slider-control-height-small: 14px;
673
+ --spectrum-slider-control-height-medium: 16px;
674
+ --spectrum-slider-control-height-large: 18px;
675
+ --spectrum-slider-control-height-extra-large: 20px;
676
+ --spectrum-slider-handle-size-small: 14px;
677
+ --spectrum-slider-handle-size-medium: 16px;
678
+ --spectrum-slider-handle-size-large: 18px;
679
+ --spectrum-slider-handle-size-extra-large: 20px;
680
+ --spectrum-slider-handle-border-width-down-small: 5px;
681
+ --spectrum-slider-handle-border-width-down-medium: 6px;
682
+ --spectrum-slider-handle-border-width-down-large: 7px;
683
+ --spectrum-slider-handle-border-width-down-extra-large: 8px;
684
+ --spectrum-slider-bottom-to-handle-small: 5px;
685
+ --spectrum-slider-bottom-to-handle-medium: 8px;
686
+ --spectrum-slider-bottom-to-handle-large: 11px;
687
+ --spectrum-slider-bottom-to-handle-extra-large: 14px;
688
+ --spectrum-corner-radius-100: 4px;
689
+ --spectrum-corner-radius-200: 8px;
690
+ --spectrum-drop-shadow-y: 1px;
691
+ --spectrum-drop-shadow-blur: 4px;
692
+ --spectrum-slider-tick-mark-height: 10px;
693
+ --spectrum-slider-ramp-track-height: 16px;
694
+
695
+ --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 0';
696
+ --spectrum-colorwheel-path-borders: 'M 96 96 m -96 0 a 96 96 0 1 0 192 0 a 96 96 0 1 0 -192 0.2 M 96 96 m -72 0 a 72 72 0 1 0 144 0 a 72 72 0 1 0 -144 0';
697
+ --spectrum-colorwheel-colorarea-container-size: 144px;
698
+
699
+ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary);
700
+
701
+ --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100);
702
+
703
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px;
704
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px;
705
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;
706
+ --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px;
707
+
708
+ --spectrum-menu-item-checkmark-height-small: 10px;
709
+ --spectrum-menu-item-checkmark-height-medium: 10px;
710
+ --spectrum-menu-item-checkmark-height-large: 12px;
711
+ --spectrum-menu-item-checkmark-height-extra-large: 14px;
712
+
713
+ --spectrum-menu-item-checkmark-width-small: 10px;
714
+ --spectrum-menu-item-checkmark-width-medium: 10px;
715
+ --spectrum-menu-item-checkmark-width-large: 12px;
716
+ --spectrum-menu-item-checkmark-width-extra-large: 14px;
717
+
718
+ --spectrum-rating-icon-spacing: var(--spectrum-spacing-75);
719
+
720
+ --spectrum-button-top-to-text-small: 5px;
721
+ --spectrum-button-bottom-to-text-small: 4px;
722
+ --spectrum-button-top-to-text-medium: 7px;
723
+ --spectrum-button-bottom-to-text-medium: 8px;
724
+ --spectrum-button-top-to-text-large: 10px;
725
+ --spectrum-button-bottom-to-text-large: 10px;
726
+ --spectrum-button-top-to-text-extra-large: 13px;
727
+ --spectrum-button-bottom-to-text-extra-large: 13px;
728
+
729
+ --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100);
730
+ --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100);
731
+ --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100);
732
+ --spectrum-alert-banner-text-to-button-vertical: var(
733
+ --spectrum-spacing-100
734
+ );
735
+
736
+ --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
737
+ --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
738
+
739
+ --spectrum-coach-indicator-gap: 6px;
740
+ --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
741
+ --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
742
+
743
+ --spectrum-coachmark-buttongroup-display: flex;
744
+ --spectrum-coachmark-buttongroup-mobile-display: none;
745
+ --spectrum-coachmark-menu-display: inline-flex;
746
+ --spectrum-coachmark-menu-mobile-display: none;
747
+ --spectrum-well-padding: var(--spectrum-spacing-300);
748
+ --spectrum-well-margin-top: var(--spectrum-spacing-75);
749
+ --spectrum-well-min-width: 240px;
750
+ --spectrum-well-border-radius: var(--spectrum-spacing-75);
751
+ --spectrum-workflow-icon-size-xxl: 32px;
752
+ --spectrum-workflow-icon-size-xxs: 12px;
753
+
754
+ --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
755
+ --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
756
+ --spectrum-treeview-item-indentation-large: 20px;
757
+ --spectrum-treeview-item-indentation-extra-large: var(
758
+ --spectrum-spacing-400
759
+ );
760
+ --spectrum-treeview-indicator-inset-block-start: 5px;
761
+ --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px;
762
+
763
+ --spectrum-dialog-confirm-entry-animation-distance: 20px;
764
+ --spectrum-dialog-confirm-hero-height: 128px;
765
+ --spectrum-dialog-confirm-border-radius: 4px;
766
+ --spectrum-dialog-confirm-title-text-size: 18px;
767
+ --spectrum-dialog-confirm-description-text-size: 14px;
768
+ --spectrum-dialog-confirm-padding-grid: 40px;
769
+
770
+ --spectrum-datepicker-initial-width: 128px;
771
+ --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200);
772
+ --spectrum-datepicker-dash-line-height: 24px;
773
+ --spectrum-datepicker-width-quiet-first: 72px;
774
+ --spectrum-datepicker-width-quiet-second: 16px;
775
+ --spectrum-datepicker-datetime-width-first: 36px;
776
+ --spectrum-datepicker-invalid-icon-to-button: 8px;
777
+ --spectrum-datepicker-invalid-icon-to-button-quiet: 7px;
778
+ --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400);
779
+
780
+ --spectrum-pagination-textfield-width: var(--spectrum-spacing-700);
781
+ --spectrum-pagination-item-inline-spacing: 5px;
782
+
783
+ --spectrum-dial-border-radius: 16px;
784
+ --spectrum-dial-handle-position: 8px;
785
+ --spectrum-dial-handle-block-margin: 16px;
786
+ --spectrum-dial-handle-inline-margin: 16px;
787
+ --spectrum-dial-controls-margin: 8px;
788
+ --spectrum-dial-label-gap-y: 5px;
789
+ --spectrum-dial-label-container-top-to-text: 4px;
790
+
791
+ --spectrum-assetcard-focus-ring-border-radius: 8px;
792
+ --spectrum-assetcard-selectionindicator-margin: 12px;
793
+ --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs);
794
+ --spectrum-assetcard-header-content-font-size: var(
795
+ --spectrum-heading-size-xs
796
+ );
797
+ --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s);
798
+
799
+ --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75);
800
+
801
+ --spectrum-ui-icon-medium-display: block;
802
+ --spectrum-ui-icon-large-display: none;
803
+ }