diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/packages/breadcrumbs/src/breadcrumbs.css index 15c7acd07e..9cfaa4e9f7 100644 --- a/packages/breadcrumbs/src/breadcrumbs.css +++ b/packages/breadcrumbs/src/breadcrumbs.css @@ -39,27 +39,15 @@ governing permissions and limitations under the License. :host([dir]) slot[slot='icon']::slotted([slot='icon']), :host([dir]) slot[slot='icon'] .icon { margin-inline: calc( - ( + ( + var( + --custom-actionbutton-edge-to-text, + var(--spectrum-actionbutton-edge-to-text) + ) - var( - --custom-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --custom-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ) * -1 - ) - calc( - ( - var( - --custom-actionbutton-edge-to-text, - var(--spectrum-actionbutton-edge-to-text) - ) - - var( - --custom-actionbutton-edge-to-visual-only, - var(--spectrum-actionbutton-edge-to-visual-only) - ) - ) * -1 - ); + --custom-actionbutton-edge-to-visual-only, + var(--spectrum-actionbutton-edge-to-visual-only) + ) + ) * -1 + ); } diff --git a/tools/styles/package.json b/tools/styles/package.json index 8a5c7e4196..c095776669 100755 --- a/tools/styles/package.json +++ b/tools/styles/package.json @@ -124,7 +124,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 new file mode 100644 index 0000000000..dc65cea659 --- /dev/null +++ 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; +} diff --git a/tools/styles/tokens/spectrum/custom-large-vars.css b/tools/styles/tokens/spectrum/custom-large-vars.css index b2b6c63ca3..ff733520a1 100644 --- a/tools/styles/tokens/spectrum/custom-large-vars.css +++ b/tools/styles/tokens/spectrum/custom-large-vars.css @@ -9,6 +9,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; diff --git a/tools/styles/tokens/spectrum/custom-medium-vars.css b/tools/styles/tokens/spectrum/custom-medium-vars.css index 4da4c86aef..77cb0b4058 100644 --- a/tools/styles/tokens/spectrum/custom-medium-vars.css +++ b/tools/styles/tokens/spectrum/custom-medium-vars.css @@ -9,6 +9,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; diff --git a/tools/styles/tokens/spectrum/custom-vars.css b/tools/styles/tokens/spectrum/custom-vars.css index 228b94e430..314db9d2bd 100644 --- a/tools/styles/tokens/spectrum/custom-vars.css +++ b/tools/styles/tokens/spectrum/custom-vars.css @@ -33,6 +33,17 @@ --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); @@ -44,4 +55,6 @@ --spectrum-docs-static-black-background-color: rgba( var(--spectrum-docs-static-black-background-color-rgb) ); + + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } diff --git a/tools/styles/tokens/spectrum/dark-vars.css b/tools/styles/tokens/spectrum/dark-vars.css index e7f6691893..e1f529c534 100644 --- a/tools/styles/tokens/spectrum/dark-vars.css +++ b/tools/styles/tokens/spectrum/dark-vars.css @@ -47,6 +47,8 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -99,4 +101,19 @@ 0.15 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); } diff --git a/tools/styles/tokens/spectrum/darkest-vars.css b/tools/styles/tokens/spectrum/darkest-vars.css index 22469fd947..4815b2b26d 100644 --- a/tools/styles/tokens/spectrum/darkest-vars.css +++ b/tools/styles/tokens/spectrum/darkest-vars.css @@ -48,6 +48,8 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -100,4 +102,19 @@ 0.2 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); } diff --git a/tools/styles/tokens/spectrum/global-vars.css b/tools/styles/tokens/spectrum/global-vars.css index 0f2af34c27..0d07f29497 100644 --- a/tools/styles/tokens/spectrum/global-vars.css +++ b/tools/styles/tokens/spectrum/global-vars.css @@ -90,6 +90,17 @@ --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); @@ -101,6 +112,8 @@ --spectrum-docs-static-black-background-color: rgba( var(--spectrum-docs-static-black-background-color-rgb) ); + + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); } :host, diff --git a/tools/styles/tokens/spectrum/index.css b/tools/styles/tokens/spectrum/index.css new file mode 100644 index 0000000000..4f49738fc8 --- /dev/null +++ b/tools/styles/tokens/spectrum/index.css @@ -0,0 +1,803 @@ +:host, +:root { + --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-white-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.07 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.07 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.25 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.15 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); +} + +:host, +:root { + --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-white-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-white-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-700); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-down: rgba( + var(--spectrum-white-rgb), + 0.15 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-white-rgb), + 0.08 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + + --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-700 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.08 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-800); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1000 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-900 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-800 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-800-rgb), + 0.3 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-800-rgb), + 0.2 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); +} + +:host, +:root { + --spectrum-neutral-background-color-selected-default: var( + --spectrum-gray-700 + ); + --spectrum-neutral-background-color-selected-hover: var( + --spectrum-gray-800 + ); + --spectrum-neutral-background-color-selected-down: var(--spectrum-gray-900); + --spectrum-neutral-background-color-selected-key-focus: var( + --spectrum-gray-800 + ); + --spectrum-slider-track-thickness: 2px; + --spectrum-slider-handle-gap: 4px; + --spectrum-picker-border-width: var(--spectrum-border-width-100); + --spectrum-in-field-button-fill-stacked-inner-border-rounding: 0px; + --spectrum-in-field-button-edge-to-fill: 0px; + --spectrum-in-field-button-stacked-inner-edge-to-fill: 0px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium: 3px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large: 4px; + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large: 5px; + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large + ); + --spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large: var( + --spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large + ); + --spectrum-corner-radius-75: 2px; + --spectrum-drop-shadow-x: 0px; + --spectrum-border-width-100: 1px; + --spectrum-accent-color-100: var(--spectrum-blue-100); + --spectrum-accent-color-200: var(--spectrum-blue-200); + --spectrum-accent-color-300: var(--spectrum-blue-300); + --spectrum-accent-color-400: var(--spectrum-blue-400); + --spectrum-accent-color-500: var(--spectrum-blue-500); + --spectrum-accent-color-600: var(--spectrum-blue-600); + --spectrum-accent-color-700: var(--spectrum-blue-700); + --spectrum-accent-color-800: var(--spectrum-blue-800); + --spectrum-accent-color-900: var(--spectrum-blue-900); + --spectrum-accent-color-1000: var(--spectrum-blue-1000); + --spectrum-accent-color-1100: var(--spectrum-blue-1100); + --spectrum-accent-color-1200: var(--spectrum-blue-1200); + --spectrum-accent-color-1300: var(--spectrum-blue-1300); + --spectrum-accent-color-1400: var(--spectrum-blue-1400); + --spectrum-heading-sans-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-serif-font-weight: var(--spectrum-bold-font-weight); + --spectrum-heading-cjk-font-weight: var(--spectrum-extra-bold-font-weight); + --spectrum-heading-sans-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --spectrum-heading-serif-emphasized-font-weight: var( + --spectrum-bold-font-weight + ); + --system: spectrum; + --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); + --spectrum-animation-duration-0: 0ms; + --spectrum-animation-duration-100: 130ms; + --spectrum-animation-duration-200: 160ms; + --spectrum-animation-duration-300: 190ms; + --spectrum-animation-duration-400: 220ms; + --spectrum-animation-duration-500: 250ms; + --spectrum-animation-duration-600: 300ms; + --spectrum-animation-duration-700: 350ms; + --spectrum-animation-duration-800: 400ms; + --spectrum-animation-duration-900: 450ms; + --spectrum-animation-duration-1000: 500ms; + --spectrum-animation-duration-2000: 1000ms; + --spectrum-animation-duration-4000: 2000ms; + --spectrum-animation-duration-6000: 3000ms; + --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1); + --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1); + --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1); + --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); + + --spectrum-sans-font-family-stack: adobe-clean, + var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, + BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', + 'Lucida Grande', sans-serif; + --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); + + --spectrum-serif-font-family-stack: adobe-clean-serif, + var(--spectrum-serif-font-family), 'Source Serif Pro', Georgia, serif; + --spectrum-serif-font: var(--spectrum-serif-font-family-stack); + + --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + + --spectrum-font-family-ar: myriad-arabic, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, 'Source Sans Pro', + -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, ubuntu, + 'Trebuchet MS', 'Lucida Grande', sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, + var(--spectrum-cjk-font-family), sans-serif; + --spectrum-cjk-font: var(--spectrum-code-font-family-stack); + --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; + --spectrum-docs-static-white-background-color: rgba( + var(--spectrum-docs-static-white-background-color-rgb) + ); + --spectrum-docs-static-black-background-color-rgb: 181, 209, 211; + --spectrum-docs-static-black-background-color: rgba( + var(--spectrum-docs-static-black-background-color-rgb) + ); + + --spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white); +} + +:host, +:root { + --spectrum-checkbox-control-size-small: 16px; + --spectrum-checkbox-control-size-medium: 18px; + --spectrum-checkbox-control-size-large: 20px; + --spectrum-checkbox-control-size-extra-large: 22px; + --spectrum-checkbox-top-to-control-small: 7px; + --spectrum-checkbox-top-to-control-medium: 11px; + --spectrum-checkbox-top-to-control-large: 15px; + --spectrum-checkbox-top-to-control-extra-large: 19px; + --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: 16px; + --spectrum-switch-control-height-medium: 18px; + --spectrum-switch-control-height-large: 20px; + --spectrum-switch-control-height-extra-large: 22px; + --spectrum-switch-top-to-control-small: 7px; + --spectrum-switch-top-to-control-medium: 11px; + --spectrum-switch-top-to-control-large: 15px; + --spectrum-switch-top-to-control-extra-large: 19px; + --spectrum-radio-button-control-size-small: 16px; + --spectrum-radio-button-control-size-medium: 18px; + --spectrum-radio-button-control-size-large: 20px; + --spectrum-radio-button-control-size-extra-large: 22px; + --spectrum-radio-button-top-to-control-small: 7px; + --spectrum-radio-button-top-to-control-medium: 11px; + --spectrum-radio-button-top-to-control-large: 15px; + --spectrum-radio-button-top-to-control-extra-large: 19px; + --spectrum-slider-control-height-small: 18px; + --spectrum-slider-control-height-medium: 20px; + --spectrum-slider-control-height-large: 22px; + --spectrum-slider-control-height-extra-large: 26px; + --spectrum-slider-handle-size-small: 18px; + --spectrum-slider-handle-size-medium: 20px; + --spectrum-slider-handle-size-large: 22px; + --spectrum-slider-handle-size-extra-large: 26px; + --spectrum-slider-handle-border-width-down-small: 7px; + --spectrum-slider-handle-border-width-down-medium: 8px; + --spectrum-slider-handle-border-width-down-large: 9px; + --spectrum-slider-handle-border-width-down-extra-large: 11px; + --spectrum-slider-bottom-to-handle-small: 6px; + --spectrum-slider-bottom-to-handle-medium: 10px; + --spectrum-slider-bottom-to-handle-large: 14px; + --spectrum-slider-bottom-to-handle-extra-large: 17px; + --spectrum-corner-radius-100: 5px; + --spectrum-corner-radius-200: 10px; + --spectrum-drop-shadow-y: 2px; + --spectrum-drop-shadow-blur: 6px; + --spectrum-slider-tick-mark-height: 13px; + --spectrum-slider-ramp-track-height: 20px; + + --spectrum-colorwheel-path: 'M 119 119 m -119 0 a 119 119 0 1 0 238 0 a 119 119 0 1 0 -238 0.2 M 119 119 m -91 0 a 91 91 0 1 0 182 0 a 91 91 0 1 0 -182 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-colorwheel-colorarea-container-size: 182px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 54px; + + --spectrum-menu-item-checkmark-height-small: 12px; + --spectrum-menu-item-checkmark-height-medium: 14px; + --spectrum-menu-item-checkmark-height-large: 16px; + --spectrum-menu-item-checkmark-height-extra-large: 16px; + + --spectrum-menu-item-checkmark-width-small: 12px; + --spectrum-menu-item-checkmark-width-medium: 14px; + --spectrum-menu-item-checkmark-width-large: 16px; + --spectrum-menu-item-checkmark-width-extra-large: 16px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-100); + + --spectrum-button-top-to-text-small: 6px; + --spectrum-button-bottom-to-text-small: 5px; + --spectrum-button-top-to-text-medium: 9px; + --spectrum-button-bottom-to-text-medium: 10px; + --spectrum-button-top-to-text-large: 12px; + --spectrum-button-bottom-to-text-large: 13px; + --spectrum-button-top-to-text-extra-large: 16px; + --spectrum-button-bottom-to-text-extra-large: 17px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-200); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-200); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-200 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-400); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600); + + --spectrum-coach-indicator-gap: 8px; + --spectrum-coach-indicator-ring-diameter: 20px; + --spectrum-coach-indicator-quiet-ring-diameter: 10px; + + --spectrum-coachmark-buttongroup-display: none; + --spectrum-coachmark-buttongroup-mobile-display: flex; + --spectrum-coachmark-menu-display: none; + --spectrum-coachmark-menu-mobile-display: inline-flex; + + --spectrum-well-padding: 20px; + --spectrum-well-margin-top: 5px; + --spectrum-well-min-width: 300px; + --spectrum-well-border-radius: 5px; + --spectrum-workflow-icon-size-xxl: 40px; + --spectrum-workflow-icon-size-xxs: 15px; + + --spectrum-treeview-item-indentation-medium: 20px; + --spectrum-treeview-item-indentation-small: 15px; + --spectrum-treeview-item-indentation-large: 25px; + --spectrum-treeview-item-indentation-extra-large: 30px; + --spectrum-treeview-indicator-inset-block-start: 6px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 2px; + + --spectrum-dialog-confirm-entry-animation-distance: 25px; + --spectrum-dialog-confirm-hero-height: 160px; + --spectrum-dialog-confirm-border-radius: 5px; + --spectrum-dialog-confirm-title-text-size: 19px; + --spectrum-dialog-confirm-description-text-size: 15px; + --spectrum-dialog-confirm-padding-grid: 24px; + + --spectrum-datepicker-initial-width: 160px; + --spectrum-datepicker-generic-padding: 15px; + --spectrum-datepicker-dash-line-height: 30px; + --spectrum-datepicker-width-quiet-first: 90px; + --spectrum-datepicker-width-quiet-second: 20px; + --spectrum-datepicker-datetime-width-first: 45px; + --spectrum-datepicker-invalid-icon-to-button: 10px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 9px; + --spectrum-datepicker-input-datetime-width: 30px; + + --spectrum-pagination-textfield-width: 60px; + --spectrum-pagination-item-inline-spacing: 6px; + + --spectrum-dial-border-radius: 20px; + --spectrum-dial-handle-position: 10px; + --spectrum-dial-handle-block-margin: 20px; + --spectrum-dial-handle-inline-margin: 20px; + --spectrum-dial-controls-margin: 10px; + --spectrum-dial-label-gap-y: 6px; + --spectrum-dial-label-container-top-to-text: 5px; + + --spectrum-assetcard-focus-ring-border-radius: 9px; + --spectrum-assetcard-selectionindicator-margin: 15px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xxs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xxs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-xs); + + --spectrum-tooltip-animation-distance: 5px; + + --spectrum-ui-icon-medium-display: none; + --spectrum-ui-icon-large-display: block; +} + +:host, +:root { + --spectrum-menu-item-background-color-default-rgb: 0, 0, 0; + --spectrum-menu-item-background-color-default-opacity: 0; + --spectrum-menu-item-background-color-default: rgba( + var(--spectrum-menu-item-background-color-default-rgb), + var(--spectrum-menu-item-background-color-default-opacity) + ); + --spectrum-menu-item-background-color-hover: var( + --spectrum-transparent-black-200 + ); + --spectrum-menu-item-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-menu-item-background-color-key-focus: var( + --spectrum-transparent-black-200 + ); + --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); + --spectrum-dropindicator-color: var(--spectrum-blue-800); + + --spectrum-calendar-day-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-calendar-day-background-color-hover: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-today-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-down: var( + --spectrum-transparent-black-200 + ); + --spectrum-calendar-day-background-color-cap-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-calendar-day-background-color-key-focus: rgba( + var(--spectrum-black-rgb), + 0.06 + ); + --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); + + --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + + --spectrum-well-border-color: var(--spectrum-black); + + --spectrum-steplist-current-marker-color-key-focus: var( + --spectrum-blue-800 + ); + + --spectrum-treeview-item-background-color-quiet-selected: rgba( + var(--spectrum-gray-900-rgb), + 0.06 + ); + --spectrum-treeview-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + + --spectrum-logic-button-and-background-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-border-color: var(--spectrum-blue-900); + --spectrum-logic-button-and-background-color-hover: var( + --spectrum-blue-1100 + ); + --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1100); + + --spectrum-logic-button-or-background-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-border-color: var(--spectrum-magenta-900); + --spectrum-logic-button-or-background-color-hover: var( + --spectrum-magenta-1100 + ); + --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-1100); + + --spectrum-assetcard-border-color-selected: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900); + --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000); + --spectrum-assetcard-selectionindicator-background-color-ordered: var( + --spectrum-blue-900 + ); + --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-800); + + --spectrum-assetlist-item-background-color-selected-hover: rgba( + var(--spectrum-blue-900-rgb), + 0.2 + ); + --spectrum-assetlist-item-background-color-selected: rgba( + var(--spectrum-blue-900-rgb), + 0.1 + ); + --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb: 0, 0, 0; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 0, 0, 0; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); +} + +:host, +:root { + --spectrum-checkbox-control-size-small: 12px; + --spectrum-checkbox-control-size-medium: 14px; + --spectrum-checkbox-control-size-large: 16px; + --spectrum-checkbox-control-size-extra-large: 18px; + --spectrum-checkbox-top-to-control-small: 6px; + --spectrum-checkbox-top-to-control-medium: 9px; + --spectrum-checkbox-top-to-control-large: 12px; + --spectrum-checkbox-top-to-control-extra-large: 15px; + --spectrum-switch-control-width-small: 23px; + --spectrum-switch-control-width-medium: 26px; + --spectrum-switch-control-width-large: 29px; + --spectrum-switch-control-width-extra-large: 33px; + --spectrum-switch-control-height-small: 12px; + --spectrum-switch-control-height-medium: 14px; + --spectrum-switch-control-height-large: 16px; + --spectrum-switch-control-height-extra-large: 18px; + --spectrum-switch-top-to-control-small: 6px; + --spectrum-switch-top-to-control-medium: 9px; + --spectrum-switch-top-to-control-large: 12px; + --spectrum-switch-top-to-control-extra-large: 15px; + --spectrum-radio-button-control-size-small: 12px; + --spectrum-radio-button-control-size-medium: 14px; + --spectrum-radio-button-control-size-large: 16px; + --spectrum-radio-button-control-size-extra-large: 18px; + --spectrum-radio-button-top-to-control-small: 6px; + --spectrum-radio-button-top-to-control-medium: 9px; + --spectrum-radio-button-top-to-control-large: 12px; + --spectrum-radio-button-top-to-control-extra-large: 15px; + --spectrum-slider-control-height-small: 14px; + --spectrum-slider-control-height-medium: 16px; + --spectrum-slider-control-height-large: 18px; + --spectrum-slider-control-height-extra-large: 20px; + --spectrum-slider-handle-size-small: 14px; + --spectrum-slider-handle-size-medium: 16px; + --spectrum-slider-handle-size-large: 18px; + --spectrum-slider-handle-size-extra-large: 20px; + --spectrum-slider-handle-border-width-down-small: 5px; + --spectrum-slider-handle-border-width-down-medium: 6px; + --spectrum-slider-handle-border-width-down-large: 7px; + --spectrum-slider-handle-border-width-down-extra-large: 8px; + --spectrum-slider-bottom-to-handle-small: 5px; + --spectrum-slider-bottom-to-handle-medium: 8px; + --spectrum-slider-bottom-to-handle-large: 11px; + --spectrum-slider-bottom-to-handle-extra-large: 14px; + --spectrum-corner-radius-100: 4px; + --spectrum-corner-radius-200: 8px; + --spectrum-drop-shadow-y: 1px; + --spectrum-drop-shadow-blur: 4px; + --spectrum-slider-tick-mark-height: 10px; + --spectrum-slider-ramp-track-height: 16px; + + --spectrum-colorwheel-path: 'M 95 95 m -95 0 a 95 95 0 1 0 190 0 a 95 95 0 1 0 -190 0.2 M 95 95 m -73 0 a 73 73 0 1 0 146 0 a 73 73 0 1 0 -146 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-colorwheel-colorarea-container-size: 144px; + + --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; + --spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large: 45px; + + --spectrum-menu-item-checkmark-height-small: 10px; + --spectrum-menu-item-checkmark-height-medium: 10px; + --spectrum-menu-item-checkmark-height-large: 12px; + --spectrum-menu-item-checkmark-height-extra-large: 14px; + + --spectrum-menu-item-checkmark-width-small: 10px; + --spectrum-menu-item-checkmark-width-medium: 10px; + --spectrum-menu-item-checkmark-width-large: 12px; + --spectrum-menu-item-checkmark-width-extra-large: 14px; + + --spectrum-rating-icon-spacing: var(--spectrum-spacing-75); + + --spectrum-button-top-to-text-small: 5px; + --spectrum-button-bottom-to-text-small: 4px; + --spectrum-button-top-to-text-medium: 7px; + --spectrum-button-bottom-to-text-medium: 8px; + --spectrum-button-top-to-text-large: 10px; + --spectrum-button-bottom-to-text-large: 10px; + --spectrum-button-top-to-text-extra-large: 13px; + --spectrum-button-bottom-to-text-extra-large: 13px; + + --spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-divider: var(--spectrum-spacing-100); + --spectrum-alert-banner-edge-to-button: var(--spectrum-spacing-100); + --spectrum-alert-banner-text-to-button-vertical: var( + --spectrum-spacing-100 + ); + + --spectrum-alert-dialog-padding: var(--spectrum-spacing-500); + --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700); + + --spectrum-coach-indicator-gap: 6px; + --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300); + --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100); + + --spectrum-coachmark-buttongroup-display: flex; + --spectrum-coachmark-buttongroup-mobile-display: none; + --spectrum-coachmark-menu-display: inline-flex; + --spectrum-coachmark-menu-mobile-display: none; + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-min-width: 240px; + --spectrum-well-border-radius: var(--spectrum-spacing-75); + --spectrum-workflow-icon-size-xxl: 32px; + --spectrum-workflow-icon-size-xxs: 12px; + + --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300); + --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200); + --spectrum-treeview-item-indentation-large: 20px; + --spectrum-treeview-item-indentation-extra-large: var( + --spectrum-spacing-400 + ); + --spectrum-treeview-indicator-inset-block-start: 5px; + --spectrum-treeview-item-min-block-size-thumbnail-offset-medium: 0px; + + --spectrum-dialog-confirm-entry-animation-distance: 20px; + --spectrum-dialog-confirm-hero-height: 128px; + --spectrum-dialog-confirm-border-radius: 4px; + --spectrum-dialog-confirm-title-text-size: 18px; + --spectrum-dialog-confirm-description-text-size: 14px; + --spectrum-dialog-confirm-padding-grid: 40px; + + --spectrum-datepicker-initial-width: 128px; + --spectrum-datepicker-generic-padding: var(--spectrum-spacing-200); + --spectrum-datepicker-dash-line-height: 24px; + --spectrum-datepicker-width-quiet-first: 72px; + --spectrum-datepicker-width-quiet-second: 16px; + --spectrum-datepicker-datetime-width-first: 36px; + --spectrum-datepicker-invalid-icon-to-button: 8px; + --spectrum-datepicker-invalid-icon-to-button-quiet: 7px; + --spectrum-datepicker-input-datetime-width: var(--spectrum-spacing-400); + + --spectrum-pagination-textfield-width: var(--spectrum-spacing-700); + --spectrum-pagination-item-inline-spacing: 5px; + + --spectrum-dial-border-radius: 16px; + --spectrum-dial-handle-position: 8px; + --spectrum-dial-handle-block-margin: 16px; + --spectrum-dial-handle-inline-margin: 16px; + --spectrum-dial-controls-margin: 8px; + --spectrum-dial-label-gap-y: 5px; + --spectrum-dial-label-container-top-to-text: 4px; + + --spectrum-assetcard-focus-ring-border-radius: 8px; + --spectrum-assetcard-selectionindicator-margin: 12px; + --spectrum-assetcard-title-font-size: var(--spectrum-heading-size-xs); + --spectrum-assetcard-header-content-font-size: var( + --spectrum-heading-size-xs + ); + --spectrum-assetcard-content-font-size: var(--spectrum-body-size-s); + + --spectrum-tooltip-animation-distance: var(--spectrum-spacing-75); + + --spectrum-ui-icon-medium-display: block; + --spectrum-ui-icon-large-display: none; +} diff --git a/tools/styles/tokens/spectrum/large-vars.css b/tools/styles/tokens/spectrum/large-vars.css index f63d46216e..4a558e5be1 100644 --- a/tools/styles/tokens/spectrum/large-vars.css +++ b/tools/styles/tokens/spectrum/large-vars.css @@ -57,6 +57,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; diff --git a/tools/styles/tokens/spectrum/light-vars.css b/tools/styles/tokens/spectrum/light-vars.css index 423a2abd73..16704ecd49 100644 --- a/tools/styles/tokens/spectrum/light-vars.css +++ b/tools/styles/tokens/spectrum/light-vars.css @@ -47,13 +47,15 @@ ); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); - --spectrum-well-border-color: var(--spectrum-black-rgb); + --spectrum-well-border-color: var(--spectrum-black); --spectrum-steplist-current-marker-color-key-focus: var( --spectrum-blue-800 @@ -99,4 +101,19 @@ 0.1 ); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb: 0, 0, 0; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba( + var(--spectrum-swatch-border-color-rgb), + var(--spectrum-swatch-border-color-opacity) + ); + --spectrum-swatch-border-color-light-rgb: 0, 0, 0; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba( + var(--spectrum-swatch-border-color-light-rgb), + var(--spectrum-swatch-border-color-light-opacity) + ); } diff --git a/tools/styles/tokens/spectrum/medium-vars.css b/tools/styles/tokens/spectrum/medium-vars.css index 2e813d2af1..202d66070f 100644 --- a/tools/styles/tokens/spectrum/medium-vars.css +++ b/tools/styles/tokens/spectrum/medium-vars.css @@ -57,6 +57,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; diff --git a/yarn.lock b/yarn.lock index 6a3a85ff25..afbc13c297 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5340,10 +5340,10 @@ resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-15.0.0-s2-foundations.27.tgz#f2c3a9fac5417a4c69aa004eaab8599a816f1d42" integrity sha512-FxL/DUTRXu337mMfcOykfucxzfoKvkraU55iRE8jsbpdpivvfM1ks7r6bapDq9nD9d22mGbDHqCF6Dq9Junshg== -"@spectrum-css/tokens@^@spectrum-css/tokens@14.3.1": - version "14.3.1" - resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.3.1.tgz#52079bad1a9d6329bfcba00702c579366a83c72e" - integrity sha512-YQBEvccp5jC9dxNMSLb708ucrxY64nExvFfJ0iQ+ddlAraOykFFoCTGcQ5UvSNp31Dp348H05PB7zRoStl0Jdg== +"@spectrum-css/tokens@^14.3.1": + version "14.6.0" + resolved "https://registry.yarnpkg.com/@spectrum-css/tokens/-/tokens-14.6.0.tgz#c51aaf4fb512f946819edf32807f19e054243b02" + integrity sha512-v/ko2A2i2v4ShHizSdRkOs0fYBVLdiQe5yN/ECFBjpamd0YJHfZGh4uBIGSG+uZjwWpHbKhRusdCRFJKJ+WNYQ== "@spectrum-css/tooltip@^7.0.0-s2-foundations.15": version "7.0.0-s2-foundations.15"