fix(swatch,styles): use latest CSS

Author: castastrophe

.changeset/stale-candies-camp.md

@@ -4,6 +4,7 @@
 '@spectrum-web-components/menu': patch
 '@spectrum-web-components/status-light': patch
 '@spectrum-web-components/styles': patch
+'@spectrum-web-components/swatch': patch
 '@spectrum-web-components/switch': patch
 '@spectrum-web-components/table': patch
 '@spectrum-web-components/tabs': patch

packages/swatch/package.json

@@ -83,7 +83,7 @@
         "@spectrum-web-components/shared": "1.5.0"
     },
     "devDependencies": {
-        "@spectrum-css/swatch": "7.0.0-s2-foundations.17",
+        "@spectrum-css/swatch": "8.1.2",
         "@spectrum-css/swatchgroup": "5.1.0"
     },
     "types": "./src/index.d.ts",

packages/swatch/src/spectrum-swatch.css

@@ -31,7 +31,43 @@ governing permissions and limitations under the License.
     }
 }
 
+:host,
+:host([size='s']) {
+    --spectrum-swatch-size: var(--spectrum-swatch-size-small);
+    --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75);
+    --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small);
+}
+
+:host([size='xs']) {
+    --spectrum-swatch-size: var(--spectrum-swatch-size-extra-small);
+    --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-50);
+    --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-extra-small);
+}
+
+:host {
+    --spectrum-swatch-size: var(--spectrum-swatch-size-medium);
+    --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
+    --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-medium);
+}
+
+:host([size='l']) {
+    --spectrum-swatch-size: var(--spectrum-swatch-size-large);
+    --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-200);
+    --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-large);
+}
+
 :host {
+    --spectrum-swatch-focus-indicator-border-radius: 8px;
+    --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-disabled-icon-border-opacity));
+    --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
+    --spectrum-swatch-border-thickness: var(--spectrum-border-width-100);
+    --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200);
+    --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
+    --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
+    --spectrum-swatch-border-color-selected: var(--spectrum-gray-900);
+    --spectrum-swatch-dash-icon-color: var(--spectrum-gray-800);
+    --spectrum-swatch-slash-icon-color: var(--spectrum-red-900);
+    --spectrum-swatch-focus-indicator-color: var(--spectrum-focus-indicator-color);
     inline-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
     block-size: var(--mod-swatch-size, var(--spectrum-swatch-size));
     -webkit-user-select: none;
@@ -54,7 +90,7 @@ governing permissions and limitations under the License.
 }
 
 :host([selected]) {
-    background-color: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
+    background: var(--highcontrast-swatch-background-color-selected, var(--mod-swatch-inner-border-color-selected, var(--spectrum-swatch-inner-border-color-selected)));
 }
 
 :host([selected]) .fill {
@@ -77,7 +113,7 @@ governing permissions and limitations under the License.
 }
 
 :host .is-image .fill:before {
-    background-color: initial;
+    background: none;
 }
 
 :host([mixed-value]) .fill {
@@ -91,8 +127,8 @@ governing permissions and limitations under the License.
 }
 
 :host([nothing]) .fill {
-    background-color: initial;
-    background-color: var(--spectrum-picked-color, transparent);
+    background: none;
+    background: var(--spectrum-picked-color, transparent);
     background-image: none;
 }
 
@@ -156,24 +192,22 @@ governing permissions and limitations under the License.
 .fill:before {
     content: '';
     z-index: 0;
+    background: none;
+    background: var(--spectrum-picked-color, transparent);
     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)));
     border-radius: var(--mod-swatch-border-radius, var(--spectrum-swatch-border-radius));
     position: absolute;
     inset: 0;
 }
 
-:host([border='none']) .fill:before,
-.fill:before {
-    background-color: initial;
-    background-color: var(--spectrum-picked-color, transparent);
-}
-
 :host([border='none']) .fill:before {
     box-shadow: none;
+    background: none;
+    background: var(--spectrum-picked-color, transparent);
 }
 
 :host([border='light']) .fill:before {
-    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)));
+    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));
 }
 
 .mixedValueIcon {

packages/swatch/src/swatch-group.css

@@ -11,4 +11,3 @@ governing permissions and limitations under the License.
 */
 
 @import url('./spectrum-swatch-group.css');
-@import url('./swatch-group-overrides.css');

packages/swatch/src/swatch-overrides.css

@@ -11,89 +11,10 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host([size='l']) {
-    --spectrum-swatch-size: var(--system-swatch-size-l-size);
-    --spectrum-swatch-disabled-icon-size: var(
-        --system-swatch-size-l-disabled-icon-size
-    );
-    --spectrum-swatch-slash-thickness: var(
-        --system-swatch-size-l-slash-thickness
-    );
-}
-
-:host([size='s']) {
-    --spectrum-swatch-size: var(--system-swatch-size-s-size);
-    --spectrum-swatch-disabled-icon-size: var(
-        --system-swatch-size-s-disabled-icon-size
-    );
-    --spectrum-swatch-slash-thickness: var(
-        --system-swatch-size-s-slash-thickness
-    );
-}
-
-:host([size='xs']) {
-    --spectrum-swatch-size: var(--system-swatch-size-xs-size);
-    --spectrum-swatch-disabled-icon-size: var(
-        --system-swatch-size-xs-disabled-icon-size
-    );
-    --spectrum-swatch-slash-thickness: var(
-        --system-swatch-size-xs-slash-thickness
-    );
-}
-
-:host {
-    --spectrum-swatch-size: var(--system-swatch-size-m-size);
-    --spectrum-swatch-disabled-icon-size: var(
-        --system-swatch-size-m-disabled-icon-size
-    );
-    --spectrum-swatch-slash-thickness: var(
-        --system-swatch-size-m-slash-thickness
-    );
-}
-
 :host {
-    --spectrum-swatch-border-radius: var(--system-swatch-border-radius);
-    --spectrum-swatch-focus-indicator-border-radius: var(
-        --system-swatch-focus-indicator-border-radius
-    );
-    --spectrum-swatch-border-thickness: var(--system-swatch-border-thickness);
-    --spectrum-swatch-border-thickness-selected: var(
-        --system-swatch-border-thickness-selected
-    );
-    --spectrum-swatch-focus-indicator-thickness: var(
-        --system-swatch-focus-indicator-thickness
-    );
-    --spectrum-swatch-focus-indicator-gap: var(
-        --system-swatch-focus-indicator-gap
-    );
-    --spectrum-swatch-border-color-opacity: var(
-        --system-swatch-border-color-opacity
-    );
-    --spectrum-swatch-border-color-light-opacity: var(
-        --system-swatch-border-color-light-opacity
-    );
     --spectrum-swatch-border-color: var(--system-swatch-border-color);
-    --spectrum-swatch-icon-border-color: var(--system-swatch-icon-border-color);
-    --spectrum-swatch-border-color-light: var(
-        --system-swatch-border-color-light
-    );
-    --spectrum-swatch-border-color-selected: var(
-        --system-swatch-border-color-selected
-    );
     --spectrum-swatch-inner-border-color-selected: var(
         --system-swatch-inner-border-color-selected
     );
-    --spectrum-swatch-disabled-icon-color: var(
-        --system-swatch-disabled-icon-color
-    );
-    --spectrum-swatch-dash-icon-color: var(--system-swatch-dash-icon-color);
-    --spectrum-swatch-slash-icon-color: var(--system-swatch-slash-icon-color);
-    --spectrum-swatch-focus-indicator-color: var(
-        --system-swatch-focus-indicator-color
-    );
-    --spectrum-swatch-size: var(--system-swatch-size);
-    --spectrum-swatch-disabled-icon-size: var(
-        --system-swatch-disabled-icon-size
-    );
-    --spectrum-swatch-slash-thickness: var(--system-swatch-slash-thickness);
+    --spectrum-swatch-border-radius: var(--system-swatch-border-radius);
 }

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

@@ -1163,71 +1163,12 @@
     --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
     --system-stepper-quiet-buttons-border-style: none;
     --system-stepper-quiet-button-edge-to-fill: 0;
-    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
-    --system-swatch-focus-indicator-border-radius: var(
-        --spectrum-corner-radius-200
-    );
-    --system-swatch-border-thickness: var(--spectrum-border-width-100);
-    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
-    --system-swatch-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-swatch-border-color-opacity: 0.51;
-    --system-swatch-border-color-light-opacity: 0.2;
     --system-swatch-border-color: rgba(
         var(--spectrum-gray-1000-rgb),
-        var(--system-swatch-border-color-opacity)
-    );
-    --system-swatch-icon-border-color: rgba(
-        var(--spectrum-black-rgb),
-        var(--system-swatch-border-color-opacity)
+        var(--spectrum-swatch-border-color-opacity)
     );
-    --system-swatch-border-color-light: rgba(
-        var(--spectrum-black-rgb),
-        var(--system-swatch-border-color-light-opacity)
-    );
-    --system-swatch-border-color-selected: var(--spectrum-gray-900);
     --system-swatch-inner-border-color-selected: var(--spectrum-gray-25);
-    --system-swatch-disabled-icon-color: var(--spectrum-gray-25);
-    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
-    --system-swatch-slash-icon-color: var(--spectrum-red-900);
-    --system-swatch-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-swatch-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-size-m-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-100
-    );
-    --system-swatch-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-medium
-    );
-    --system-swatch-size-m-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-medium
-    );
-    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
-    --system-swatch-size-xs-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-50
-    );
-    --system-swatch-size-xs-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-extra-small
-    );
-    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
-    --system-swatch-size-s-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-75
-    );
-    --system-swatch-size-s-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-small
-    );
-    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
-    --system-swatch-size-l-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-200
-    );
-    --system-swatch-size-l-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-large
-    );
+    --system-swatch-border-radius: var(--spectrum-corner-radius-75);
     --system-switch-handle-border-color-default: var(--spectrum-gray-600);
     --system-switch-handle-border-color-hover: var(--spectrum-gray-700);
     --system-switch-handle-border-color-down: var(--spectrum-gray-800);

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

@@ -1178,71 +1178,12 @@
     );
     --system-stepper-quiet-buttons-border-style: none;
     --system-stepper-quiet-button-edge-to-fill: 0;
-    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
-    --system-swatch-focus-indicator-border-radius: var(
-        --spectrum-corner-radius-200
-    );
-    --system-swatch-border-thickness: var(--spectrum-border-width-100);
-    --system-swatch-border-thickness-selected: var(--spectrum-border-width-200);
-    --system-swatch-focus-indicator-thickness: var(
-        --spectrum-focus-indicator-thickness
-    );
-    --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
-    --system-swatch-border-color-opacity: 0.51;
-    --system-swatch-border-color-light-opacity: 0.2;
     --system-swatch-border-color: rgba(
         var(--spectrum-gray-900-rgb),
-        var(--system-swatch-border-color-opacity)
+        var(--spectrum-swatch-border-color-opacity)
     );
-    --system-swatch-icon-border-color: rgba(
-        var(--spectrum-black-rgb),
-        var(--system-swatch-border-color-opacity)
-    );
-    --system-swatch-border-color-light: rgba(
-        var(--spectrum-black-rgb),
-        var(--system-swatch-border-color-light-opacity)
-    );
-    --system-swatch-border-color-selected: var(--spectrum-gray-900);
     --system-swatch-inner-border-color-selected: var(--spectrum-gray-50);
-    --system-swatch-disabled-icon-color: var(--spectrum-gray-50);
-    --system-swatch-dash-icon-color: var(--spectrum-gray-800);
-    --system-swatch-slash-icon-color: var(--spectrum-red-900);
-    --system-swatch-focus-indicator-color: var(
-        --spectrum-focus-indicator-color
-    );
-    --system-swatch-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-size-m-size: var(--spectrum-swatch-size-medium);
-    --system-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-100);
-    --system-swatch-size-m-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-100
-    );
-    --system-swatch-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-medium
-    );
-    --system-swatch-size-m-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-medium
-    );
-    --system-swatch-size-xs-size: var(--spectrum-swatch-size-extra-small);
-    --system-swatch-size-xs-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-50
-    );
-    --system-swatch-size-xs-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-extra-small
-    );
-    --system-swatch-size-s-size: var(--spectrum-swatch-size-small);
-    --system-swatch-size-s-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-75
-    );
-    --system-swatch-size-s-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-small
-    );
-    --system-swatch-size-l-size: var(--spectrum-swatch-size-large);
-    --system-swatch-size-l-disabled-icon-size: var(
-        --spectrum-workflow-icon-size-200
-    );
-    --system-swatch-size-l-slash-thickness: var(
-        --spectrum-swatch-slash-thickness-large
-    );
+    --system-swatch-border-radius: var(--spectrum-corner-radius-100);
     --system-switch-handle-border-color-default: var(--spectrum-gray-800);
     --system-switch-handle-border-color-hover: var(--spectrum-gray-900);
     --system-switch-handle-border-color-down: var(--spectrum-gray-900);