chore: fix the tokens css version (#4952)

adobe · Nov 25, 2024 · 4b2d2f5 · 4b2d2f5
1 parent 8121057
commit 4b2d2f5
Show file tree

Hide file tree

Showing 4 changed files with 1,034 additions and 31 deletions.
diff --git a/tools/styles/package.json b/tools/styles/package.json
@@ -125,7 +125,7 @@
     "devDependencies": {
         "@spectrum-css/commons": "^11.0.0-s2-foundations.15",
         "@spectrum-css/expressvars": "^3.0.9",
-        "@spectrum-css/tokens": "^@spectrum-css/tokens@14.3.1",
+        "@spectrum-css/tokens": "^14.3.1",
         "@spectrum-css/tokens-v2": "npm:@spectrum-css/tokens@15.0.0-s2-foundations.27",
         "@spectrum-css/typography": "^7.0.0-s2-foundations.17",
         "@spectrum-css/vars": "^9.0.8"

diff --git a/tools/styles/tokens/express/index.css b/tools/styles/tokens/express/index.css
@@ -0,0 +1,225 @@
+:host,
+:root {
+    --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-900-rgb);
+    --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-700);
+    --spectrum-assetcard-border-color-selected-hover: var(
+        --spectrum-indigo-700
+    );
+    --spectrum-assetcard-border-color-selected-down: var(--spectrum-indigo-800);
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-indigo-700
+    );
+}
+
+:host,
+:root {
+    --spectrum-neutral-background-color-selected-default: var(
+        --spectrum-gray-800
+    );
+    --spectrum-neutral-background-color-selected-hover: var(
+        --spectrum-gray-900
+    );
+    --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900);
+    --spectrum-neutral-background-color-selected-key-focus: var(
+        --spectrum-gray-900
+    );
+    --spectrum-slider-track-thickness: 4px;
+    --spectrum-slider-handle-gap: 0px;
+    --spectrum-picker-border-width: 0;
+    --spectrum-in-field-button-fill-stacked-inner-border-rounding: 1px;
+    --spectrum-in-field-button-edge-to-fill: 4px;
+    --spectrum-in-field-button-stacked-inner-edge-to-fill: 1px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 5px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 7px;
+    --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 8px;
+    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: 1px;
+    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: 1px;
+    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: 3px;
+    --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: 4px;
+    --spectrum-border-width-100: 2px;
+    --spectrum-accent-color-100: var(--spectrum-indigo-100);
+    --spectrum-accent-color-200: var(--spectrum-indigo-200);
+    --spectrum-accent-color-300: var(--spectrum-indigo-300);
+    --spectrum-accent-color-400: var(--spectrum-indigo-400);
+    --spectrum-accent-color-500: var(--spectrum-indigo-500);
+    --spectrum-accent-color-600: var(--spectrum-indigo-600);
+    --spectrum-accent-color-700: var(--spectrum-indigo-700);
+    --spectrum-accent-color-800: var(--spectrum-indigo-800);
+    --spectrum-accent-color-900: var(--spectrum-indigo-900);
+    --spectrum-accent-color-1000: var(--spectrum-indigo-1000);
+    --spectrum-accent-color-1100: var(--spectrum-indigo-1100);
+    --spectrum-accent-color-1200: var(--spectrum-indigo-1200);
+    --spectrum-accent-color-1300: var(--spectrum-indigo-1300);
+    --spectrum-accent-color-1400: var(--spectrum-indigo-1400);
+    --spectrum-heading-sans-serif-font-weight: var(
+        --spectrum-black-font-weight
+    );
+    --spectrum-heading-serif-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-cjk-font-weight: var(--spectrum-black-font-weight);
+    --spectrum-heading-sans-serif-emphasized-font-weight: var(
+        --spectrum-black-font-weight
+    );
+    --spectrum-heading-serif-emphasized-font-weight: var(
+        --spectrum-black-font-weight
+    );
+    --system: express;
+}
+
+:host,
+:root {
+    --spectrum-checkbox-control-size-small: 18px;
+    --spectrum-checkbox-control-size-medium: 20px;
+    --spectrum-checkbox-control-size-large: 22px;
+    --spectrum-checkbox-control-size-extra-large: 26px;
+    --spectrum-checkbox-top-to-control-small: 6px;
+    --spectrum-checkbox-top-to-control-medium: 10px;
+    --spectrum-checkbox-top-to-control-large: 14px;
+    --spectrum-checkbox-top-to-control-extra-large: 17px;
+    --spectrum-switch-control-width-small: 32px;
+    --spectrum-switch-control-width-medium: 36px;
+    --spectrum-switch-control-width-large: 41px;
+    --spectrum-switch-control-width-extra-large: 46px;
+    --spectrum-switch-control-height-small: 18px;
+    --spectrum-switch-control-height-medium: 20px;
+    --spectrum-switch-control-height-large: 22px;
+    --spectrum-switch-control-height-extra-large: 26px;
+    --spectrum-switch-top-to-control-small: 6px;
+    --spectrum-switch-top-to-control-medium: 10px;
+    --spectrum-switch-top-to-control-large: 14px;
+    --spectrum-switch-top-to-control-extra-large: 17px;
+    --spectrum-radio-button-control-size-small: 18px;
+    --spectrum-radio-button-control-size-medium: 20px;
+    --spectrum-radio-button-control-size-large: 22px;
+    --spectrum-radio-button-control-size-extra-large: 26px;
+    --spectrum-radio-button-top-to-control-small: 6px;
+    --spectrum-radio-button-top-to-control-medium: 10px;
+    --spectrum-radio-button-top-to-control-large: 14px;
+    --spectrum-radio-button-top-to-control-extra-large: 17px;
+    --spectrum-slider-control-height-small: 22px;
+    --spectrum-slider-control-height-medium: 24px;
+    --spectrum-slider-control-height-large: 28px;
+    --spectrum-slider-control-height-extra-large: 30px;
+    --spectrum-slider-handle-size-small: 22px;
+    --spectrum-slider-handle-size-medium: 24px;
+    --spectrum-slider-handle-size-large: 28px;
+    --spectrum-slider-handle-size-extra-large: 30px;
+    --spectrum-slider-handle-border-width-down-small: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-medium: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-extra-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-bottom-to-handle-small: 4px;
+    --spectrum-slider-bottom-to-handle-medium: 8px;
+    --spectrum-slider-bottom-to-handle-large: 12px;
+    --spectrum-slider-bottom-to-handle-extra-large: 15px;
+    --spectrum-corner-radius-75: 4px;
+    --spectrum-corner-radius-100: 8px;
+    --spectrum-corner-radius-200: 16px;
+    --spectrum-drop-shadow-x: 0px;
+    --spectrum-drop-shadow-y: 4px;
+    --spectrum-drop-shadow-blur: 16px;
+    --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';
+    --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';
+
+    --spectrum-dialog-confirm-border-radius: 8px;
+
+    --spectrum-dial-border-radius: 15px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 12px;
+}
+
+:host,
+:root {
+    --spectrum-drop-zone-background-color-rgb: var(--spectrum-indigo-800-rgb);
+    --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
+
+    --spectrum-assetcard-border-color-selected: var(--spectrum-indigo-900);
+    --spectrum-assetcard-border-color-selected-hover: var(
+        --spectrum-indigo-900
+    );
+    --spectrum-assetcard-border-color-selected-down: var(
+        --spectrum-indigo-1000
+    );
+    --spectrum-assetcard-selectionindicator-background-color-ordered: var(
+        --spectrum-indigo-900
+    );
+}
+
+:host,
+:root {
+    --spectrum-checkbox-control-size-small: 14px;
+    --spectrum-checkbox-control-size-medium: 16px;
+    --spectrum-checkbox-control-size-large: 18px;
+    --spectrum-checkbox-control-size-extra-large: 20px;
+    --spectrum-checkbox-top-to-control-small: 5px;
+    --spectrum-checkbox-top-to-control-medium: 8px;
+    --spectrum-checkbox-top-to-control-large: 11px;
+    --spectrum-checkbox-top-to-control-extra-large: 14px;
+    --spectrum-switch-control-width-small: 25px;
+    --spectrum-switch-control-width-medium: 28px;
+    --spectrum-switch-control-width-large: 32px;
+    --spectrum-switch-control-width-extra-large: 35px;
+    --spectrum-switch-control-height-small: 14px;
+    --spectrum-switch-control-height-medium: 16px;
+    --spectrum-switch-control-height-large: 18px;
+    --spectrum-switch-control-height-extra-large: 20px;
+    --spectrum-switch-top-to-control-small: 5px;
+    --spectrum-switch-top-to-control-medium: 8px;
+    --spectrum-switch-top-to-control-large: 11px;
+    --spectrum-switch-top-to-control-extra-large: 14px;
+    --spectrum-radio-button-control-size-small: 14px;
+    --spectrum-radio-button-control-size-medium: 16px;
+    --spectrum-radio-button-control-size-large: 18px;
+    --spectrum-radio-button-control-size-extra-large: 20px;
+    --spectrum-radio-button-top-to-control-small: 5px;
+    --spectrum-radio-button-top-to-control-medium: 8px;
+    --spectrum-radio-button-top-to-control-large: 11px;
+    --spectrum-radio-button-top-to-control-extra-large: 14px;
+    --spectrum-slider-control-height-small: 18px;
+    --spectrum-slider-control-height-medium: 20px;
+    --spectrum-slider-control-height-large: 22px;
+    --spectrum-slider-control-height-extra-large: 24px;
+    --spectrum-slider-handle-size-small: 18px;
+    --spectrum-slider-handle-size-medium: 20px;
+    --spectrum-slider-handle-size-large: 22px;
+    --spectrum-slider-handle-size-extra-large: 24px;
+    --spectrum-slider-handle-border-width-down-small: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-medium: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-handle-border-width-down-extra-large: var(
+        --spectrum-border-width-200
+    );
+    --spectrum-slider-bottom-to-handle-small: 3px;
+    --spectrum-slider-bottom-to-handle-medium: 6px;
+    --spectrum-slider-bottom-to-handle-large: 9px;
+    --spectrum-slider-bottom-to-handle-extra-large: 12px;
+    --spectrum-corner-radius-75: 3px;
+    --spectrum-corner-radius-100: 6px;
+    --spectrum-corner-radius-200: 12px;
+    --spectrum-drop-shadow-x: 0px;
+    --spectrum-drop-shadow-y: 4px;
+    --spectrum-drop-shadow-blur: 16px;
+    --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';
+    --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';
+
+    --spectrum-dialog-confirm-border-radius: 6px;
+
+    --spectrum-dial-border-radius: 12px;
+
+    --spectrum-assetcard-focus-ring-border-radius: 10px;
+}