feat(divider): use core tokens

This updates the Divider component to use core tokens chore(divider): use latest beta release chore(divider): use graduated release
adobe · Oct 19, 2022 · e30c969 · e30c969
1 parent 3ae70ad
commit e30c969
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 73 deletions.
diff --git a/packages/divider/package.json b/packages/divider/package.json
@@ -61,7 +61,7 @@
         "tslib": "^2.0.0"
     },
     "devDependencies": {
-        "@spectrum-css/divider": "^1.0.27"
+        "@spectrum-css/divider": "^2.0.0"
     },
     "types": "./src/index.d.ts",
     "customElements": "custom-elements.json",

diff --git a/packages/divider/src/spectrum-divider.css b/packages/divider/src/spectrum-divider.css
@@ -11,91 +11,131 @@ governing permissions and limitations under the License.
 */
 
 /* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    --spectrum-divider-thickness: var(
+        --spectrum-divider-thickness-medium
+    ); /* .spectrum-Divider */
+    --spectrum-divider-background-color: var(
+        --spectrum-divider-background-color-medium
+    );
+    --spectrum-divider-background-color-small: var(--spectrum-gray-300);
+    --spectrum-divider-background-color-medium: var(--spectrum-gray-300);
+    --spectrum-divider-background-color-large: var(--spectrum-gray-800);
+    --spectrum-divider-background-color-small-static-white: var(
+        --spectrum-transparent-white-300
+    );
+    --spectrum-divider-background-color-medium-static-white: var(
+        --spectrum-transparent-white-300
+    );
+    --spectrum-divider-background-color-large-static-white: var(
+        --spectrum-transparent-white-800
+    );
+    --spectrum-divider-background-color-small-static-black: var(
+        --spectrum-transparent-black-300
+    );
+    --spectrum-divider-background-color-medium-static-black: var(
+        --spectrum-transparent-black-300
+    );
+    --spectrum-divider-background-color-large-static-black: var(
+        --spectrum-transparent-black-800
+    );
+}
 :host([size='s']) {
-    --spectrum-divider-height: var(
-        --spectrum-divider-s-height,
-        var(--spectrum-global-dimension-size-10)
+    --spectrum-divider-thickness: var(
+        --spectrum-divider-thickness-small
     ); /* .spectrum-Divider--sizeS */
-    --spectrum-divider-vertical-height: var(
-        --spectrum-divider-s-vertical-height,
-        var(--spectrum-global-dimension-size-10)
-    );
-    --spectrum-divider-vertical-width: var(
-        --spectrum-divider-s-vertical-width,
-        var(--spectrum-global-dimension-size-10)
+    --spectrum-divider-background-color: var(
+        --spectrum-divider-background-color-small
     );
 }
 :host([size='m']) {
-    --spectrum-divider-height: var(
-        --spectrum-divider-m-height,
-        var(--spectrum-global-dimension-size-25)
+    --spectrum-divider-thickness: var(
+        --spectrum-divider-thickness-medium
     ); /* .spectrum-Divider--sizeM */
-    --spectrum-divider-vertical-height: var(
-        --spectrum-divider-m-vertical-height,
-        var(--spectrum-global-dimension-size-25)
-    );
-    --spectrum-divider-vertical-width: var(
-        --spectrum-divider-m-vertical-width,
-        var(--spectrum-global-dimension-size-25)
+    --spectrum-divider-background-color: var(
+        --spectrum-divider-background-color-medium
     );
 }
 :host([size='l']) {
-    --spectrum-divider-height: var(
-        --spectrum-divider-l-height,
-        var(--spectrum-global-dimension-size-50)
+    --spectrum-divider-thickness: var(
+        --spectrum-divider-thickness-large
     ); /* .spectrum-Divider--sizeL */
-    --spectrum-divider-vertical-height: var(
-        --spectrum-divider-l-vertical-height,
-        var(--spectrum-global-dimension-size-50)
-    );
-    --spectrum-divider-vertical-width: var(
-        --spectrum-divider-l-vertical-width,
-        var(--spectrum-global-dimension-size-50)
+    --spectrum-divider-background-color: var(
+        --spectrum-divider-background-color-large
     );
 }
-:host {
-    --spectrum-divider-vertical-height: 100%; /* .spectrum-Divider */
+@media (forced-colors: active) {
+    :host {
+        --spectrum-divider-background-color: CanvasText;
+        --spectrum-divider-background-color-small-static-white: CanvasText;
+        --spectrum-divider-background-color-medium-static-white: CanvasText;
+        --spectrum-divider-background-color-large-static-white: CanvasText;
+        --spectrum-divider-background-color-small-static-black: CanvasText;
+        --spectrum-divider-background-color-medium-static-black: CanvasText;
+        --spectrum-divider-background-color-large-static-black: CanvasText;
+    }
 }
 :host {
+    background-color: var(
+        --mod-divider-background-color,
+        var(--spectrum-divider-background-color)
+    );
+    block-size: var(
+        --mod-divider-thickness,
+        var(--spectrum-divider-thickness)
+    ); /* .spectrum-Divider */
     border: none;
-    border-radius: var(--spectrum-divider-height);
-    border-width: var(--spectrum-divider-height);
-    height: var(--spectrum-divider-height);
+    border-radius: var(
+        --mod-divider-thickness,
+        var(--spectrum-divider-thickness)
+    );
+    border-width: var(
+        --mod-divider-thickness,
+        var(--spectrum-divider-thickness)
+    );
+    inline-size: 100%;
     overflow: visible;
-    width: 100%; /* .spectrum-Divider */
 }
-:host([vertical]) {
-    height: var(
-        --spectrum-divider-vertical-height
-    ); /* .spectrum-Divider--vertical */
-    width: var(--spectrum-divider-vertical-width);
+:host([size='s']) .spectrum-Divider--staticWhite {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-small-static-white,
+        var(--spectrum-divider-background-color-small-static-white)
+    ); /* .spectrum-Divider--staticWhite.spectrum-Divider--sizeS */
 }
-:host {
-    --spectrum-divider-l-background-color: var(
-        --spectrum-global-color-gray-800
-    ); /* .spectrum-Divider */
-    --spectrum-divider-m-background-color: var(
-        --spectrum-global-color-gray-300
-    );
-    --spectrum-divider-s-background-color: var(
-        --spectrum-global-color-gray-300
-    );
+:host([size='m']) .spectrum-Divider--staticWhite {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-medium-static-white,
+        var(--spectrum-divider-background-color-medium-static-white)
+    ); /* .spectrum-Divider--staticWhite.spectrum-Divider--sizeM */
 }
-:host([size='l']) {
-    background-color: var(
-        --spectrum-divider-l-background-color,
-        var(--spectrum-global-color-gray-800)
-    ); /* .spectrum-Divider--sizeL */
+:host([size='l']) .spectrum-Divider--staticWhite {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-large-static-white,
+        var(--spectrum-divider-background-color-large-static-white)
+    ); /* .spectrum-Divider--staticWhite.spectrum-Divider--sizeL */
 }
-:host([size='m']) {
-    background-color: var(
-        --spectrum-divider-m-background-color,
-        var(--spectrum-global-color-gray-300)
-    ); /* .spectrum-Divider--sizeM */
+:host([size='s']) .spectrum-Divider--staticBlack {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-small-static-black,
+        var(--spectrum-divider-background-color-small-static-black)
+    ); /* .spectrum-Divider--staticBlack.spectrum-Divider--sizeS */
 }
-:host([size='s']) {
-    background-color: var(
-        --spectrum-divider-s-background-color,
-        var(--spectrum-global-color-gray-300)
-    ); /* .spectrum-Divider--sizeS */
+:host([size='m']) .spectrum-Divider--staticBlack {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-medium-static-black,
+        var(--spectrum-divider-background-color-medium-static-black)
+    ); /* .spectrum-Divider--staticBlack.spectrum-Divider--sizeM */
+}
+:host([size='l']) .spectrum-Divider--staticBlack {
+    --spectrum-divider-background-color: var(
+        --mod-divider-background-color-large-static-black,
+        var(--spectrum-divider-background-color-large-static-black)
+    ); /* .spectrum-Divider--staticBlack.spectrum-Divider--sizeL */
+}
+:host([vertical]) {
+    block-size: 100%; /* .spectrum-Divider--vertical */
+    inline-size: var(
+        --mod-divider-thickness,
+        var(--spectrum-divider-thickness)
+    );
 }
diff --git a/scripts/spectrum-tokens.js b/scripts/spectrum-tokens.js
@@ -39,6 +39,7 @@ const tokenPackages = [
     'statuslight',
     'toast',
     'actiongroup',
+    'divider',
 ];
 
 const packagePaths = tokenPackages.map((packageName) => {

diff --git a/yarn.lock b/yarn.lock
@@ -4017,12 +4017,10 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-6.0.15.tgz#b8d21305c34b29a1bd9e0e68bb02058aa732cede"
   integrity sha512-M1NNVPZLs6OUGvCi34YAZACurL1VDKIJqjkIsjEE+eVChfQSSnDfxjp3GBWSVr7VP+0F7Tlf+cbCYU9y8R9h5g==
 
-"@spectrum-css/divider@^1.0.27":
-  version "1.0.27"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-1.0.27.tgz#435bf738a65b4eb15c899edf5c536bea22f2d679"
-  integrity sha512-hWKPHOEo9lkOGN5zecpVVwVxE3x0SJHQJKDNx1g0xs/P/AthAboK+L1c9Rq29czNfcQ2kUjumi4igzQzcqABMQ==
-  dependencies:
-    "@spectrum-css/vars" "^8.0.0"
+"@spectrum-css/divider@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/divider/-/divider-2.0.0.tgz#6f4f5e54db99491cc1ef770c61fbb3388e3462d8"
+  integrity sha512-+qMsLMoVSZMIMAV5f7m1XNovyUOiLjtPSP2uEgMENfWQqNH9uXKMb06G3KNwh4fMmUQxxv3QR0L4iQP8T5TSzg==
 
 "@spectrum-css/dropzone@^3.0.25":
   version "3.0.25"