feat(swatch): use core tokens

adobe · Oct 20, 2022 · 821aebe · 821aebe
1 parent 6b3d87f
commit 821aebe
Show file tree

Hide file tree

Showing 5 changed files with 366 additions and 248 deletions.
diff --git a/packages/swatch/package.json b/packages/swatch/package.json
@@ -75,8 +75,8 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/swatch": "^1.1.4",
-        "@spectrum-css/swatchgroup": "^1.1.4"
+        "@spectrum-css/swatch": "^2.0.0",
+        "@spectrum-css/swatchgroup": "^2.0.1"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/swatch/src/spectrum-swatch-group.css b/packages/swatch/src/spectrum-swatch-group.css
@@ -11,21 +11,35 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    --spectrum-swatchgroup-spacing-compact: var(
+        --spectrum-spacing-50
+    ); /* .spectrum-SwatchGroup */
+    --spectrum-swatchgroup-spacing-regular: var(--spectrum-spacing-75);
+    --spectrum-swatchgroup-spacing-spacious: var(--spectrum-spacing-100);
+}
 :host {
     align-items: flex-start;
     display: inline-flex; /* .spectrum-SwatchGroup */
     flex-direction: row;
     flex-wrap: wrap;
-    gap: var(--spectrum-global-dimension-size-50);
     justify-content: flex-start;
 }
+:host {
+    gap: var(
+        --mod-swatchgroup-spacing-regular,
+        var(--spectrum-swatchgroup-spacing-regular)
+    ); /* .spectrum-SwatchGroup */
+}
 :host([density='compact']) {
     gap: var(
-        --spectrum-global-dimension-size-25
+        --mod-swatchgroup-spacing-compact,
+        var(--spectrum-swatchgroup-spacing-compact)
     ); /* .spectrum-SwatchGroup--compact */
 }
 :host([density='spacious']) {
     gap: var(
-        --spectrum-global-dimension-size-100
+        --mod-swatchgroup-spacing-spacious,
+        var(--spectrum-swatchgroup-spacing-spacious)
     ); /* .spectrum-SwatchGroup--spacious */
 }