Skip to content

Commit 416d73f

Browse files
castastrophecastastrophe
committed
fix(swatch,styles): use latest CSS
1 parent 665ac3a commit 416d73f

File tree

9 files changed

+66
-283
lines changed

9 files changed

+66
-283
lines changed

‎.changeset/stale-candies-camp.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
'@spectrum-web-components/menu': patch
66
'@spectrum-web-components/status-light': patch
77
'@spectrum-web-components/styles': patch
8+
'@spectrum-web-components/swatch': patch
89
'@spectrum-web-components/switch': patch
910
'@spectrum-web-components/table': patch
1011
'@spectrum-web-components/tabs': patch

‎packages/swatch/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@
8383
"@spectrum-web-components/shared": "1.5.0"
8484
},
8585
"devDependencies": {
86-
"@spectrum-css/swatch": "7.0.0-s2-foundations.17",
86+
"@spectrum-css/swatch": "8.1.2",
8787
"@spectrum-css/swatchgroup": "5.1.0"
8888
},
8989
"types": "./src/index.d.ts",

‎packages/swatch/src/spectrum-swatch.css‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,43 @@ governing permissions and limitations under the License.
3131
}
3232
}
3333

34+
:host,
35+
:host([size='s']) {
36+
--spectrum-swatch-size: var(--spectrum-swatch-size-small);
37+
--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
38+
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
39+
}
40+
41+
:host([size='xs']) {
42+
--spectrum-swatch-size: var(--spectrum-swatch-size-extra-small);
43+
--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
44+
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
45+
}
46+
47+
:host {
48+
--spectrum-swatch-size: var(--spectrum-swatch-size-medium);
49+
--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
50+
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
51+
}
52+
53+
:host([size='l']) {
54+
--spectrum-swatch-size: var(--spectrum-swatch-size-large);
55+
--spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
56+
--spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
57+
}
58+
3459
:host {
60+
--spectrum-swatch-focus-indicator-border-radius: 8px;
61+
--spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity));
62+
--spectrum-swatch-disabled-icon-color: var(--spectrum-white);
63+
--spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
64+
--spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
65+
--spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
66+
--spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
67+
--spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
68+
--spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
69+
--spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
70+
--spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
3571
inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
3672
block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
3773
-webkit-user-select: none;
@@ -54,7 +90,7 @@ governing permissions and limitations under the License.
5490
}
5591

5692
:host([selected]) {
57-
background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
93+
background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
5894
}
5995

6096
:host([selected]) .fill {
@@ -77,7 +113,7 @@ governing permissions and limitations under the License.
77113
}
78114

79115
:host .is-image .fill:before {
80-
background-color: initial;
116+
background: none;
81117
}
82118

83119
:host([mixed-value]) .fill {
@@ -91,8 +127,8 @@ governing permissions and limitations under the License.
91127
}
92128

93129
:host([nothing]) .fill {
94-
background-color: initial;
95-
background-color: var(--spectrum-picked-color, transparent);
130+
background: none;
131+
background: var(--spectrum-picked-color, transparent);
96132
background-image: none;
97133
}
98134

@@ -156,24 +192,22 @@ governing permissions and limitations under the License.
156192
.fill:before {
157193
content: '';
158194
z-index: 0;
195+
background: none;
196+
background: var(--spectrum-picked-color, transparent);
159197
box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color, var(--mod-swatch-border-color, var(--spectrum-swatch-border-color)));
160198
border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
161199
position: absolute;
162200
inset: 0;
163201
}
164202

165-
:host([border='none']) .fill:before,
166-
.fill:before {
167-
background-color: initial;
168-
background-color: var(--spectrum-picked-color, transparent);
169-
}
170-
171203
:host([border='none']) .fill:before {
172204
box-shadow: none;
205+
background: none;
206+
background: var(--spectrum-picked-color, transparent);
173207
}
174208

175209
:host([border='light']) .fill:before {
176-
box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--highcontrast-swatch-border-color-light, var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light)));
210+
box-shadow: inset 0 0 0 var(--mod-swatch-border-thickness, var(--spectrum-swatch-border-thickness)) var(--mod-swatch-border-color-light, var(--spectrum-swatch-border-color-light));
177211
}
178212

179213
.mixedValueIcon {

‎packages/swatch/src/swatch-group.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,3 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
@import url('./spectrum-swatch-group.css');
14-
@import url('./swatch-group-overrides.css');

‎packages/swatch/src/swatch-overrides.css‎

Lines changed: 1 addition & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -11,89 +11,10 @@ governing permissions and limitations under the License.
1111
*/
1212

1313
/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
14-
:host([size='l']) {
15-
--spectrum-swatch-size: var(--system-swatch-size-l-size);
16-
--spectrum-swatch-disabled-icon-size: var(
17-
--system-swatch-size-l-disabled-icon-size
18-
);
19-
--spectrum-swatch-slash-thickness: var(
20-
--system-swatch-size-l-slash-thickness
21-
);
22-
}
23-
24-
:host([size='s']) {
25-
--spectrum-swatch-size: var(--system-swatch-size-s-size);
26-
--spectrum-swatch-disabled-icon-size: var(
27-
--system-swatch-size-s-disabled-icon-size
28-
);
29-
--spectrum-swatch-slash-thickness: var(
30-
--system-swatch-size-s-slash-thickness
31-
);
32-
}
33-
34-
:host([size='xs']) {
35-
--spectrum-swatch-size: var(--system-swatch-size-xs-size);
36-
--spectrum-swatch-disabled-icon-size: var(
37-
--system-swatch-size-xs-disabled-icon-size
38-
);
39-
--spectrum-swatch-slash-thickness: var(
40-
--system-swatch-size-xs-slash-thickness
41-
);
42-
}
43-
44-
:host {
45-
--spectrum-swatch-size: var(--system-swatch-size-m-size);
46-
--spectrum-swatch-disabled-icon-size: var(
47-
--system-swatch-size-m-disabled-icon-size
48-
);
49-
--spectrum-swatch-slash-thickness: var(
50-
--system-swatch-size-m-slash-thickness
51-
);
52-
}
53-
5414
:host {
55-
--spectrum-swatch-border-radius: var(--system-swatch-border-radius);
56-
--spectrum-swatch-focus-indicator-border-radius: var(
57-
--system-swatch-focus-indicator-border-radius
58-
);
59-
--spectrum-swatch-border-thickness: var(--system-swatch-border-thickness);
60-
--spectrum-swatch-border-thickness-selected: var(
61-
--system-swatch-border-thickness-selected
62-
);
63-
--spectrum-swatch-focus-indicator-thickness: var(
64-
--system-swatch-focus-indicator-thickness
65-
);
66-
--spectrum-swatch-focus-indicator-gap: var(
67-
--system-swatch-focus-indicator-gap
68-
);
69-
--spectrum-swatch-border-color-opacity: var(
70-
--system-swatch-border-color-opacity
71-
);
72-
--spectrum-swatch-border-color-light-opacity: var(
73-
--system-swatch-border-color-light-opacity
74-
);
7515
--spectrum-swatch-border-color: var(--system-swatch-border-color);
76-
--spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color);
77-
--spectrum-swatch-border-color-light: var(
78-
--system-swatch-border-color-light
79-
);
80-
--spectrum-swatch-border-color-selected: var(
81-
--system-swatch-border-color-selected
82-
);
8316
--spectrum-swatch-inner-border-color-selected: var(
8417
--system-swatch-inner-border-color-selected
8518
);
86-
--spectrum-swatch-disabled-icon-color: var(
87-
--system-swatch-disabled-icon-color
88-
);
89-
--spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color);
90-
--spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color);
91-
--spectrum-swatch-focus-indicator-color: var(
92-
--system-swatch-focus-indicator-color
93-
);
94-
--spectrum-swatch-size: var(--system-swatch-size);
95-
--spectrum-swatch-disabled-icon-size: var(
96-
--system-swatch-disabled-icon-size
97-
);
98-
--spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness);
19+
--spectrum-swatch-border-radius: var(--system-swatch-border-radius);
9920
}

‎tools/styles/tokens-v2/system-theme-bridge.css‎

Lines changed: 2 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1101,71 +1101,12 @@
11011101
--system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
11021102
--system-stepper-quiet-buttons-border-style: none;
11031103
--system-stepper-quiet-button-edge-to-fill: 0;
1104-
--system-swatch-border-radius: var(--spectrum-corner-radius-100);
1105-
--system-swatch-focus-indicator-border-radius: var(
1106-
--spectrum-corner-radius-200
1107-
);
1108-
--system-swatch-border-thickness: var(--spectrum-border-width-100);
1109-
--system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
1110-
--system-swatch-focus-indicator-thickness: var(
1111-
--spectrum-focus-indicator-thickness
1112-
);
1113-
--system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
1114-
--system-swatch-border-color-opacity: 0.51;
1115-
--system-swatch-border-color-light-opacity: 0.2;
11161104
--system-swatch-border-color: rgba(
11171105
var(--spectrum-gray-1000-rgb),
1118-
var(--system-swatch-border-color-opacity)
1119-
);
1120-
--system-swatch-icon-border-color: rgba(
1121-
var(--spectrum-black-rgb),
1122-
var(--system-swatch-border-color-opacity)
1106+
var(--spectrum-swatch-border-color-opacity)
11231107
);
1124-
--system-swatch-border-color-light: rgba(
1125-
var(--spectrum-black-rgb),
1126-
var(--system-swatch-border-color-light-opacity)
1127-
);
1128-
--system-swatch-border-color-selected: var(--spectrum-gray-900);
11291108
--system-swatch-inner-border-color-selected: var(--spectrum-gray-25);
1130-
--system-swatch-disabled-icon-color: var(--spectrum-gray-25);
1131-
--system-swatch-dash-icon-color: var(--spectrum-gray-800);
1132-
--system-swatch-slash-icon-color: var(--spectrum-red-900);
1133-
--system-swatch-focus-indicator-color: var(
1134-
--spectrum-focus-indicator-color
1135-
);
1136-
--system-swatch-size: var(--spectrum-swatch-size-medium);
1137-
--system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
1138-
--system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
1139-
--system-swatch-size-m-disabled-icon-size: var(
1140-
--spectrum-workflow-icon-size-100
1141-
);
1142-
--system-swatch-slash-thickness: var(
1143-
--spectrum-swatch-slash-thickness-medium
1144-
);
1145-
--system-swatch-size-m-slash-thickness: var(
1146-
--spectrum-swatch-slash-thickness-medium
1147-
);
1148-
--system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
1149-
--system-swatch-size-xs-disabled-icon-size: var(
1150-
--spectrum-workflow-icon-size-50
1151-
);
1152-
--system-swatch-size-xs-slash-thickness: var(
1153-
--spectrum-swatch-slash-thickness-extra-small
1154-
);
1155-
--system-swatch-size-s-size: var(--spectrum-swatch-size-small);
1156-
--system-swatch-size-s-disabled-icon-size: var(
1157-
--spectrum-workflow-icon-size-75
1158-
);
1159-
--system-swatch-size-s-slash-thickness: var(
1160-
--spectrum-swatch-slash-thickness-small
1161-
);
1162-
--system-swatch-size-l-size: var(--spectrum-swatch-size-large);
1163-
--system-swatch-size-l-disabled-icon-size: var(
1164-
--spectrum-workflow-icon-size-200
1165-
);
1166-
--system-swatch-size-l-slash-thickness: var(
1167-
--spectrum-swatch-slash-thickness-large
1168-
);
1109+
--system-swatch-border-radius: var(--spectrum-corner-radius-75);
11691110
--system-switch-handle-border-color-default: var(--spectrum-gray-600);
11701111
--system-switch-handle-border-color-hover: var(--spectrum-gray-700);
11711112
--system-switch-handle-border-color-down: var(--spectrum-gray-800);

‎tools/styles/tokens/express/system-theme-bridge.css‎

Lines changed: 2 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1116,71 +1116,12 @@
11161116
);
11171117
--system-stepper-quiet-buttons-border-style: none;
11181118
--system-stepper-quiet-button-edge-to-fill: 0;
1119-
--system-swatch-border-radius: var(--spectrum-corner-radius-100);
1120-
--system-swatch-focus-indicator-border-radius: var(
1121-
--spectrum-corner-radius-200
1122-
);
1123-
--system-swatch-border-thickness: var(--spectrum-border-width-100);
1124-
--system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
1125-
--system-swatch-focus-indicator-thickness: var(
1126-
--spectrum-focus-indicator-thickness
1127-
);
1128-
--system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
1129-
--system-swatch-border-color-opacity: 0.51;
1130-
--system-swatch-border-color-light-opacity: 0.2;
11311119
--system-swatch-border-color: rgba(
11321120
var(--spectrum-gray-900-rgb),
1133-
var(--system-swatch-border-color-opacity)
1121+
var(--spectrum-swatch-border-color-opacity)
11341122
);
1135-
--system-swatch-icon-border-color: rgba(
1136-
var(--spectrum-black-rgb),
1137-
var(--system-swatch-border-color-opacity)
1138-
);
1139-
--system-swatch-border-color-light: rgba(
1140-
var(--spectrum-black-rgb),
1141-
var(--system-swatch-border-color-light-opacity)
1142-
);
1143-
--system-swatch-border-color-selected: var(--spectrum-gray-900);
11441123
--system-swatch-inner-border-color-selected: var(--spectrum-gray-50);
1145-
--system-swatch-disabled-icon-color: var(--spectrum-gray-50);
1146-
--system-swatch-dash-icon-color: var(--spectrum-gray-800);
1147-
--system-swatch-slash-icon-color: var(--spectrum-red-900);
1148-
--system-swatch-focus-indicator-color: var(
1149-
--spectrum-focus-indicator-color
1150-
);
1151-
--system-swatch-size: var(--spectrum-swatch-size-medium);
1152-
--system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
1153-
--system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
1154-
--system-swatch-size-m-disabled-icon-size: var(
1155-
--spectrum-workflow-icon-size-100
1156-
);
1157-
--system-swatch-slash-thickness: var(
1158-
--spectrum-swatch-slash-thickness-medium
1159-
);
1160-
--system-swatch-size-m-slash-thickness: var(
1161-
--spectrum-swatch-slash-thickness-medium
1162-
);
1163-
--system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
1164-
--system-swatch-size-xs-disabled-icon-size: var(
1165-
--spectrum-workflow-icon-size-50
1166-
);
1167-
--system-swatch-size-xs-slash-thickness: var(
1168-
--spectrum-swatch-slash-thickness-extra-small
1169-
);
1170-
--system-swatch-size-s-size: var(--spectrum-swatch-size-small);
1171-
--system-swatch-size-s-disabled-icon-size: var(
1172-
--spectrum-workflow-icon-size-75
1173-
);
1174-
--system-swatch-size-s-slash-thickness: var(
1175-
--spectrum-swatch-slash-thickness-small
1176-
);
1177-
--system-swatch-size-l-size: var(--spectrum-swatch-size-large);
1178-
--system-swatch-size-l-disabled-icon-size: var(
1179-
--spectrum-workflow-icon-size-200
1180-
);
1181-
--system-swatch-size-l-slash-thickness: var(
1182-
--spectrum-swatch-slash-thickness-large
1183-
);
1124+
--system-swatch-border-radius: var(--spectrum-corner-radius-100);
11841125
--system-switch-handle-border-color-default: var(--spectrum-gray-800);
11851126
--system-switch-handle-border-color-hover: var(--spectrum-gray-900);
11861127
--system-switch-handle-border-color-down: var(--spectrum-gray-900);

0 commit comments

Comments
 (0)