From b4e25d95ec957b6432bc40bd759de4689479170b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 23 Sep 2024 12:44:01 -0400 Subject: [PATCH] chore: release (s2-foundations) (#3142) Co-authored-by: github-actions[bot] --- .changeset/pre.json | 1 + .storybook/blocks/ComponentDetails.jsx | 2 +- .storybook/decorators/context.js | 12 +- .storybook/modes/index.js | 6 + components/card/metadata/metadata.json | 5 - components/card/themes/spectrum-two.css | 12 +- components/card/themes/spectrum.css | 9 + .../coachindicator/metadata/metadata.json | 4 +- .../coachindicator/themes/spectrum-two.css | 4 + components/coachindicator/themes/spectrum.css | 6 + components/contextualhelp/index.css | 2 +- .../contextualhelp/metadata/metadata.json | 4 +- .../contextualhelp/themes/spectrum-two.css | 7 +- components/menu/metadata/metadata.json | 9 +- components/menu/themes/spectrum-two.css | 172 +++++++++--------- components/swatch/index.css | 22 +-- components/swatch/metadata/metadata.json | 16 +- components/swatch/themes/spectrum-two.css | 59 +++--- components/swatch/themes/spectrum.css | 6 +- components/well/index.css | 2 +- components/well/metadata/metadata.json | 5 +- components/well/themes/spectrum-two.css | 7 + components/well/themes/spectrum.css | 6 + generator/CHANGELOG.md | 6 + generator/package.json | 2 +- .../stories/{{ folderName }}.stories.js.hbs | 3 +- plugins/stylelint-theme-alignment/index.js | 4 +- stylelint.config.js | 2 +- tokens/custom-spectrum/custom-light-vars.css | 70 ------- tokens/custom/dark-vars.css | 12 +- tokens/custom/large-vars.css | 7 +- tokens/custom/light-vars.css | 12 +- tokens/custom/medium-vars.css | 6 +- tokens/dist/css/components/bridge/index.css | 69 ++++--- tokens/dist/css/components/express/card.css | 4 +- .../css/components/express/coachindicator.css | 2 + .../css/components/express/contextualhelp.css | 3 +- tokens/dist/css/components/express/index.css | 91 +++++---- tokens/dist/css/components/express/menu.css | 55 ++++-- tokens/dist/css/components/express/swatch.css | 22 +-- tokens/dist/css/components/express/well.css | 5 + tokens/dist/index.css | 65 ++----- tokens/tasks/token-rollup.js | 26 +-- 43 files changed, 398 insertions(+), 446 deletions(-) delete mode 100644 tokens/custom-spectrum/custom-light-vars.css diff --git a/.changeset/pre.json b/.changeset/pre.json index 823b9d77c83..85cff334c17 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -145,6 +145,7 @@ "sharp-pianos-reply", "sharp-rice-sing", "sharp-vans-flow", + "shiny-balloons-remember", "shiny-peaches-change", "short-carrots-film", "silent-carpets-beam", diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx index 1d4a92cbdc9..10fc70cad9a 100644 --- a/.storybook/blocks/ComponentDetails.jsx +++ b/.storybook/blocks/ComponentDetails.jsx @@ -148,7 +148,7 @@ function processReleaseData(storyMeta, npmData) { ].filter(tag => !ignoredTags.includes(tag)); // Create a robust fallback stack to capture the version number - const fallbackVersion = packageJson?.version ?? storyMeta?.csfFile?.meta?.parameters?.componentVersion; + const fallbackVersion = packageJson?.version; const mapVersions = new Map(); for (const tag of tags) { diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js index be24dd216c4..cb9d4f260f7 100644 --- a/.storybook/decorators/context.js +++ b/.storybook/decorators/context.js @@ -17,17 +17,15 @@ export const withContextWrapper = makeDecorator({ rootClass, staticColor, } = {}, - globals = {}, + globals: { + color = "light", + context = "spectrum", + scale = "medium", + }, id, viewMode, } = data; - let { - color = "light", - context = "spectrum", - scale = "medium", - } = globals; - const staticColorSettings = { "black": { background: "var(--spectrum-docs-static-black-background-color)", diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js index 0804783fa57..a52ecc790e2 100644 --- a/.storybook/modes/index.js +++ b/.storybook/modes/index.js @@ -20,12 +20,18 @@ const modes = { }, "Context: Spectrum 1": { scale: "medium", + color: "light", + textDirection: "ltr", context: "legacy", }, "Context: Express": { + scale: "medium", + color: "light", + textDirection: "ltr", context: "express", }, "Dark | RTL": { + scale: "medium", color: "dark", textDirection: "rtl", context: "legacy", diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json index 158152b007c..7dea7fd48de 100644 --- a/components/card/metadata/metadata.json +++ b/components/card/metadata/metadata.json @@ -1,9 +1,6 @@ { "sourceFile": "index.css", "selectors": [ - ".spectrum--dark .spectrum-Card", - ".spectrum--light .spectrum-Card", - ".spectrum--lightest .spectrum-Card", ".spectrum-Card", ".spectrum-Card .spectrum-Divider", ".spectrum-Card--gallery", @@ -197,9 +194,7 @@ "--spectrum-animation-duration-100", "--spectrum-background-base-color", "--spectrum-background-layer-2-color", - "--spectrum-blue-500-rgb", "--spectrum-blue-700", - "--spectrum-blue-900-rgb", "--spectrum-body-color", "--spectrum-body-line-height", "--spectrum-body-sans-serif-font-style", diff --git a/components/card/themes/spectrum-two.css b/components/card/themes/spectrum-two.css index 6b428d40686..bf8224f9aa7 100644 --- a/components/card/themes/spectrum-two.css +++ b/components/card/themes/spectrum-two.css @@ -64,7 +64,7 @@ --spectrum-card-focus-indicator-width: var(--spectrum-focus-indicator-thickness); /* Selected */ - --spectrum-card-selected-background-opacity: 0.1; /* table-selected-row-background-opacity does not exist in tokens yet */ + --spectrum-card-selected-background-opacity: 0.1; --spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100); --spectrum-card-preview-background-color: var(--spectrum-gray-100); @@ -77,15 +77,5 @@ /* Quiet/Gallery */ --spectrum-card-content-margin-top-quiet: var(--spectrum-spacing-100); --spectrum-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - - /* TODO: These are placeholder until recursive RGB is available */ - .spectrum--light &, - .spectrum--lightest & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - } - - .spectrum--dark & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); - } } } diff --git a/components/card/themes/spectrum.css b/components/card/themes/spectrum.css index 3d96629c2ed..c3d1f63f477 100644 --- a/components/card/themes/spectrum.css +++ b/components/card/themes/spectrum.css @@ -23,5 +23,14 @@ --spectrum-card-divider-color: var(--spectrum-gray-300); --spectrum-card-preview-background-color: var(--spectrum-background-base-color); --spectrum-card-preview-background-color-hover: var(--spectrum-gray-300); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + + .spectrum--dark & { + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + } + + .spectrum--darkest & { + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + } } } diff --git a/components/coachindicator/metadata/metadata.json b/components/coachindicator/metadata/metadata.json index 1d671679d78..18fe7a23593 100644 --- a/components/coachindicator/metadata/metadata.json +++ b/components/coachindicator/metadata/metadata.json @@ -69,7 +69,9 @@ "--spectrum-coach-animation-indicator-ring-center-delay-multiple", "--spectrum-coach-animation-indicator-ring-duration", "--spectrum-coach-animation-indicator-ring-inner-delay-multiple", - "--spectrum-coach-animation-indicator-ring-outer-delay-multiple" + "--spectrum-coach-animation-indicator-ring-outer-delay-multiple", + "--spectrum-gray-25", + "--spectrum-gray-900" ], "system-theme": [], "passthroughs": [], diff --git a/components/coachindicator/themes/spectrum-two.css b/components/coachindicator/themes/spectrum-two.css index add1634de05..ebcdc6afbac 100644 --- a/components/coachindicator/themes/spectrum-two.css +++ b/components/coachindicator/themes/spectrum-two.css @@ -21,6 +21,9 @@ --spectrum-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); --spectrum-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25); + --spectrum-coach-indicator-top: calc((var(--spectrum-coach-indicator-block-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); --spectrum-coach-indicator-left: calc((var(--spectrum-coach-indicator-inline-size) / 3) - var(--spectrum-coach-indicator-ring-border-size)); @@ -40,6 +43,7 @@ --spectrum-coach-indicator-animation-keyframe-100-scale: 2; --spectrum-coach-indicator-animation-keyframe-100-opacity: 0; --spectrum-coach-indicator-quiet-animation-keyframe-0-scale: 0.8; + &.spectrum-CoachIndicator--quiet { --spectrum-coach-indicator-quiet-ring-diameter-size: var(--spectrum-coach-indicator-quiet-ring-diameter); --spectrum-coach-indicator-animation-name: pulse-quiet; diff --git a/components/coachindicator/themes/spectrum.css b/components/coachindicator/themes/spectrum.css index 5a930981122..ad7c2429e0e 100644 --- a/components/coachindicator/themes/spectrum.css +++ b/components/coachindicator/themes/spectrum.css @@ -15,3 +15,9 @@ /* @combine .spectrum.spectrum--legacy */ @import "./spectrum-two.css"; + +@container style(--system: legacy) { + .spectrum-CoachIndicator { + --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50); + } +} diff --git a/components/contextualhelp/index.css b/components/contextualhelp/index.css index 943e81dc845..454964b15a6 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -34,7 +34,7 @@ } .spectrum-ContextualHelp-heading { - margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing)); + margin-block-end: var(--mod-spectrum-contextual-help-content-spacing, var(--spectrum-contextual-help-content-spacing-default)); font-size: var(--mod-spectrum-contextual-help-heading-size, var(--spectrum-contextual-help-heading-size)); color: var(--highcontrast-contextual-help-heading-color, var(--mod-contextual-help-heading-color, var(--spectrum-contextual-help-heading-color))); } diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/metadata/metadata.json index 6a976298b9a..d410c97cd63 100644 --- a/components/contextualhelp/metadata/metadata.json +++ b/components/contextualhelp/metadata/metadata.json @@ -1,7 +1,6 @@ { "sourceFile": "index.css", "selectors": [ - ".spectrum--large .spectrum-ContextualHelp", ".spectrum-ContextualHelp", ".spectrum-ContextualHelp-button", ".spectrum-ContextualHelp-link", @@ -23,6 +22,7 @@ "--spectrum-contextual-help-body-color", "--spectrum-contextual-help-body-size", "--spectrum-contextual-help-content-spacing", + "--spectrum-contextual-help-content-spacing-default", "--spectrum-contextual-help-heading-color", "--spectrum-contextual-help-heading-size", "--spectrum-contextual-help-link-spacing", @@ -33,8 +33,6 @@ "global": [ "--spectrum-body-color", "--spectrum-heading-color", - "--spectrum-spacing-100", - "--spectrum-spacing-200", "--spectrum-spacing-300", "--spectrum-spacing-400" ], diff --git a/components/contextualhelp/themes/spectrum-two.css b/components/contextualhelp/themes/spectrum-two.css index 824f616b0e2..9e30a04a82c 100644 --- a/components/contextualhelp/themes/spectrum-two.css +++ b/components/contextualhelp/themes/spectrum-two.css @@ -15,17 +15,12 @@ .spectrum-ContextualHelp { /* Layout Variables */ --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-contextual-help-content-spacing-default: var(--spectrum-contextual-help-content-spacing); --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); /* Typography Variables */ --spectrum-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); --spectrum-contextual-help-heading-color: var(--spectrum-heading-color); --spectrum-contextual-help-body-color: var(--spectrum-body-color); - - /* Mobile styling */ - .spectrum--large & { - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); - } } } diff --git a/components/menu/metadata/metadata.json b/components/menu/metadata/metadata.json index d013cd67cc6..341b72cd442 100644 --- a/components/menu/metadata/metadata.json +++ b/components/menu/metadata/metadata.json @@ -25,9 +25,6 @@ ".spectrum-Menu .spectrum-Menu-itemIcon--workflowIcon", ".spectrum-Menu .spectrum-Menu-itemIcon:not(.spectrum-Menu-chevron, .spectrum-Menu-checkmark)", ".spectrum-Menu li:not(.spectrum-Menu-item, .spectrum-Menu-divider)", - ".spectrum-Menu--sizeL", - ".spectrum-Menu--sizeS", - ".spectrum-Menu--sizeXL", ".spectrum-Menu-back", ".spectrum-Menu-back .spectrum-Menu-sectionHeading", ".spectrum-Menu-back:focus-visible", @@ -134,6 +131,10 @@ ".spectrum-Menu.is-selectable .spectrum-Menu-item", ".spectrum-Menu.is-selectable .spectrum-Menu-item.is-selected", ".spectrum-Menu.js-focus-within .spectrum-Menu-item--collapsible.is-open[focus-within]", + ".spectrum-Menu.spectrum-Menu--sizeL", + ".spectrum-Menu.spectrum-Menu--sizeM", + ".spectrum-Menu.spectrum-Menu--sizeS", + ".spectrum-Menu.spectrum-Menu--sizeXL", ".spectrum-Menu:lang(ja)", ".spectrum-Menu:lang(ko)", ".spectrum-Menu:lang(zh)", @@ -342,6 +343,7 @@ "--spectrum-font-size-300", "--spectrum-font-size-50", "--spectrum-font-size-75", + "--spectrum-gray-1000", "--spectrum-gray-900", "--spectrum-line-height-100", "--spectrum-navigational-indicator-top-to-back-icon-extra-large", @@ -368,6 +370,7 @@ "--spectrum-text-to-visual-200", "--spectrum-text-to-visual-300", "--spectrum-text-to-visual-75", + "--spectrum-transparent-black-200-opacity", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-300", diff --git a/components/menu/themes/spectrum-two.css b/components/menu/themes/spectrum-two.css index ab68cbc94cc..e072351a47f 100644 --- a/components/menu/themes/spectrum-two.css +++ b/components/menu/themes/spectrum-two.css @@ -13,29 +13,6 @@ @container style(--system: spectrum) { .spectrum-Menu { - --spectrum-menu-item-min-height: var(--spectrum-component-height-100); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); - --spectrum-menu-item-top-to-action: var(--spectrum-spacing-50); --spectrum-menu-item-top-to-checkbox: var(--spectrum-spacing-50); @@ -93,93 +70,124 @@ --spectrum-menu-checkmark-display-shown: block; --spectrum-menu-checkmark-display: var(--spectrum-menu-checkmark-display-shown); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); - /* "one" icon: chevron + additional icon (we don't count the chevron as an icon because it HAS to be there for a collapsible) */ --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-text-to-control) + var(--spectrum-menu-item-icon-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); /* "no" icon: just the chevron (we're not counting it because it HAS to be there for a collapsible) */ --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: calc((var(--spectrum-menu-item-label-inline-edge-to-content) + var(--spectrum-menu-item-checkmark-width) + var(--spectrum-menu-item-label-text-to-visual) + var(--spectrum-menu-item-focus-indicator-width))); - } - .spectrum-Menu--sizeS { - --spectrum-menu-item-min-height: var(--spectrum-component-height-75); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); + --spectrum-menu-item-background-color-default: var(--spectrum-gray-1000); + --spectrum-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --spectrum-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); + &.spectrum-Menu--sizeS { + --spectrum-menu-item-min-height: var(--spectrum-component-height-75); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-75); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-75); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-75); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-75); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-75); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-75); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-75); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-50); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-75); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-75); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-small); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); - } + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-small); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); - .spectrum-Menu--sizeL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-200); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + } - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + &, + &.spectrum-Menu--sizeM { + --spectrum-menu-item-min-height: var(--spectrum-component-height-100); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-75); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-100); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-100); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); - } + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + } + + &.spectrum-Menu--sizeL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-200); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-200); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-200); + + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-200); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-200); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-200); + + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-200); + + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-100); + + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-200); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-200); + + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-large); + + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-large); + + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-large); + } - .spectrum-Menu--sizeXL { - --spectrum-menu-item-min-height: var(--spectrum-component-height-300); - --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); - --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); - --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); + &.spectrum-Menu--sizeXL { + --spectrum-menu-item-min-height: var(--spectrum-component-height-300); + --spectrum-menu-item-icon-height: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-icon-width: var(--spectrum-workflow-icon-size-300); + --spectrum-menu-item-label-font-size: var(--spectrum-font-size-300); + --spectrum-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-300); - --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); - --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); - --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); + --spectrum-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-300); + --spectrum-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-300); + --spectrum-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-300); - --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); + --spectrum-menu-item-text-to-control: var(--spectrum-text-to-control-300); - --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); + --spectrum-menu-item-description-font-size: var(--spectrum-font-size-200); - --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); - --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); + --spectrum-menu-section-header-font-size: var(--spectrum-font-size-300); + --spectrum-menu-section-header-min-width: var(--spectrum-component-height-300); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-extra-large); - --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); - --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); - --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); + --spectrum-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-extra-large); + --spectrum-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-extra-large); + --spectrum-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-extra-large); - --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); + --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large); + } } } diff --git a/components/swatch/index.css b/components/swatch/index.css index e6cd13ad8f0..6f857f34c51 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -97,7 +97,7 @@ &.is-mixedValue { .spectrum-Swatch-fill { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ background: var(--spectrum-picked-color, transparent); } @@ -110,7 +110,7 @@ /* Swatch fill: Not fill with Slash */ &.is-nothing { .spectrum-Swatch-fill { - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); background-image: none; @@ -124,12 +124,8 @@ } } - &.spectrum-Swatch--rectangle { - .spectrum-Swatch-fill { - &::after { - transform: rotate(-25deg); - } - } + &.spectrum-Swatch--rectangle .spectrum-Swatch-fill::after { + transform: rotate(-25deg); } } @@ -200,11 +196,11 @@ inset: 0; z-index: 0; - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); /* Swatch border */ - 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-default))); + 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)); } } @@ -215,7 +211,7 @@ &::before { box-shadow: none; - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ background-color: var(--spectrum-picked-color, transparent); } } @@ -224,7 +220,7 @@ .spectrum-Swatch--lightBorder { .spectrum-Swatch-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-default))); + 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))); } } } @@ -233,7 +229,7 @@ display: none; pointer-events: none; - /* Undefined variable allows custom stylesheet or JS to pass the value to this element */ + /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- undefined variable allows custom stylesheet or JS to pass the value to this element */ color: var(--spectrum-picked-color, transparent); } diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json index fe3204d3a05..32c3f2f8015 100644 --- a/components/swatch/metadata/metadata.json +++ b/components/swatch/metadata/metadata.json @@ -21,10 +21,6 @@ ".spectrum-Swatch--roundingNone.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch--roundingNone:after", ".spectrum-Swatch--roundingNone:before", - ".spectrum-Swatch--sizeL", - ".spectrum-Swatch--sizeM", - ".spectrum-Swatch--sizeS", - ".spectrum-Swatch--sizeXS", ".spectrum-Swatch-disabledIcon", ".spectrum-Swatch-disabledIcon path:first-child", ".spectrum-Swatch-disabledIcon path:last-child", @@ -44,6 +40,10 @@ ".spectrum-Swatch.is-selected .spectrum-Swatch-fill", ".spectrum-Swatch.is-selected .spectrum-Swatch-fill:before", ".spectrum-Swatch.is-selected:before", + ".spectrum-Swatch.spectrum-Swatch--sizeL", + ".spectrum-Swatch.spectrum-Swatch--sizeM", + ".spectrum-Swatch.spectrum-Swatch--sizeS", + ".spectrum-Swatch.spectrum-Swatch--sizeXS", ".spectrum-Swatch:after", ".spectrum-Swatch:before", ".spectrum-Swatch:focus-visible:after", @@ -72,15 +72,14 @@ ], "component": [ "--spectrum-swatch-border-color", - "--spectrum-swatch-border-color-default", "--spectrum-swatch-border-color-light", - "--spectrum-swatch-border-color-light-default", + "--spectrum-swatch-border-color-light-opacity", + "--spectrum-swatch-border-color-opacity", "--spectrum-swatch-border-color-selected", "--spectrum-swatch-border-radius", "--spectrum-swatch-border-thickness", "--spectrum-swatch-border-thickness-selected", "--spectrum-swatch-dash-icon-color", - "--spectrum-swatch-disabled-icon-border-color", "--spectrum-swatch-disabled-icon-color", "--spectrum-swatch-disabled-icon-size", "--spectrum-swatch-focus-indicator-border-radius", @@ -103,9 +102,11 @@ ], "global": [ "--spectrum-animation-duration-100", + "--spectrum-black-rgb", "--spectrum-border-width-100", "--spectrum-border-width-200", "--spectrum-corner-radius-100", + "--spectrum-corner-radius-200", "--spectrum-focus-indicator-color", "--spectrum-focus-indicator-gap", "--spectrum-focus-indicator-thickness", @@ -114,7 +115,6 @@ "--spectrum-gray-900", "--spectrum-picked-color", "--spectrum-red-900", - "--spectrum-white", "--spectrum-workflow-icon-size-100", "--spectrum-workflow-icon-size-200", "--spectrum-workflow-icon-size-50", diff --git a/components/swatch/themes/spectrum-two.css b/components/swatch/themes/spectrum-two.css index 1206f374ea4..f49cac0bd1a 100644 --- a/components/swatch/themes/spectrum-two.css +++ b/components/swatch/themes/spectrum-two.css @@ -14,52 +14,51 @@ @container style(--system: spectrum) { /* Swatch tokens */ .spectrum-Swatch { - /* Placeholder tokens */ - --spectrum-swatch-focus-indicator-border-radius: 8px; - /* Size */ - --spectrum-swatch-size: var(--spectrum-swatch-size-small); --spectrum-swatch-border-radius: var(--spectrum-corner-radius-100); + --spectrum-swatch-focus-indicator-border-radius: var(--spectrum-corner-radius-200); --spectrum-swatch-border-thickness: var(--spectrum-border-width-100); --spectrum-swatch-border-thickness-selected: var(--spectrum-border-width-200); - --spectrum-swatch-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --spectrum-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --spectrum-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); + --spectrum-swatch-border-color-opacity: 0.51; + --spectrum-swatch-border-color-light-opacity: 0.2; + /* Color */ - --spectrum-swatch-border-color-default: var(--spectrum-swatch-border-color); - --spectrum-swatch-border-color-light-default: var(--spectrum-swatch-border-color-light); + --spectrum-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-icon-border-color: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light: rgba(var(--spectrum-black-rgb), var(--spectrum-swatch-border-color-light-opacity)); --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-25); - --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); - --spectrum-swatch-disabled-icon-color: var(--spectrum-white); + --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-25); --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); - } - .spectrum-Swatch--sizeXS { - --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); - } + &.spectrum-Swatch--sizeXS { + --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); + } - .spectrum-Swatch--sizeS { - --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); - } + &.spectrum-Swatch--sizeS { + --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); + } - .spectrum-Swatch--sizeM { - --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); - } + &, + &.spectrum-Swatch--sizeM { + --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); + } - .spectrum-Swatch--sizeL { - --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); + &.spectrum-Swatch--sizeL { + --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); + } } } diff --git a/components/swatch/themes/spectrum.css b/components/swatch/themes/spectrum.css index 54b323275de..9a377d01f0a 100644 --- a/components/swatch/themes/spectrum.css +++ b/components/swatch/themes/spectrum.css @@ -18,11 +18,7 @@ @container style(--system: legacy) { .spectrum-Swatch { - --spectrum-swatch-border-color-opacity: 0.51; - --spectrum-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-opacity)); - --spectrum-swatch-border-color-light-opacity: 0.2; - --spectrum-swatch-border-color-light: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-swatch-border-color-light-opacity)); - --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); + --spectrum-swatch-disabled-icon-color: var(--spectrum-gray-50); } } diff --git a/components/well/index.css b/components/well/index.css index 3f81cd8fc96..a307feb12eb 100644 --- a/components/well/index.css +++ b/components/well/index.css @@ -16,7 +16,7 @@ .spectrum-Well { text-align: start; display: block; - min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width)); + min-inline-size: var(--mod-well-min-width, var(--spectrum-well-minimum-width)); padding: var(--mod-well-padding, var(--spectrum-well-padding)); margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top)); border-width: var(--mod-well-border-width, var(--spectrum-well-border-width)); diff --git a/components/well/metadata/metadata.json b/components/well/metadata/metadata.json index fdf2f91ff41..fe549b8ce00 100644 --- a/components/well/metadata/metadata.json +++ b/components/well/metadata/metadata.json @@ -19,12 +19,15 @@ "--spectrum-well-content-color", "--spectrum-well-margin-top", "--spectrum-well-min-width", + "--spectrum-well-minimum-width", "--spectrum-well-padding" ], "global": [ "--spectrum-body-color", "--spectrum-border-width-100", - "--spectrum-gray-800-rgb" + "--spectrum-gray-800-rgb", + "--spectrum-spacing-300", + "--spectrum-spacing-75" ], "system-theme": [], "passthroughs": [], diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css index 9ff5c2ba261..7c87685a6bc 100644 --- a/components/well/themes/spectrum-two.css +++ b/components/well/themes/spectrum-two.css @@ -14,7 +14,14 @@ @container style(--system: spectrum) { .spectrum-Well { --spectrum-well-border-width: var(--spectrum-border-width-100); + --spectrum-well-border-color: rgba(var(----spectrum-gray-1000), .05); + --spectrum-well-border-radius: var(--spectrum-spacing-75); + --spectrum-well-content-color: var(--spectrum-body-color); --spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), .02); + + --spectrum-well-padding: var(--spectrum-spacing-300); + --spectrum-well-margin-top: var(--spectrum-spacing-75); + --spectrum-well-minimum-width: var(--spectrum-well-min-width); } } diff --git a/components/well/themes/spectrum.css b/components/well/themes/spectrum.css index 5a930981122..fe5609fff10 100644 --- a/components/well/themes/spectrum.css +++ b/components/well/themes/spectrum.css @@ -15,3 +15,9 @@ /* @combine .spectrum.spectrum--legacy */ @import "./spectrum-two.css"; + +@container style(--system: legacy) { + .spectrum-Well { + --spectrum-well-border-color: rgba(var(----spectrum-gray-900-rgb), .05); + } +} diff --git a/generator/CHANGELOG.md b/generator/CHANGELOG.md index 265c5ec6b0d..4ee8f942050 100644 --- a/generator/CHANGELOG.md +++ b/generator/CHANGELOG.md @@ -1,5 +1,11 @@ # Change Log +## 5.0.0-s2-foundations.7 + +### Minor Changes + +- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a4e0278`](https://github.com/adobe/spectrum-css/commit/a4e0278af07d97b668a73fabcbb18b37411ecb86) Thanks [@pfulton](https://github.com/pfulton)! - Update mdx template to include TaggedReleases and ComponentDetails + ## 5.0.0-s2-foundations.6 ### Major Changes diff --git a/generator/package.json b/generator/package.json index 001dc6669a1..fcd6c9976bf 100644 --- a/generator/package.json +++ b/generator/package.json @@ -1,6 +1,6 @@ { "name": "@spectrum-css/generator", - "version": "5.0.0-s2-foundations.6", + "version": "5.0.0-s2-foundations.7", "description": "A tool to quickly create standardized components", "license": "Apache-2.0", "author": "Adobe", diff --git a/generator/templates/stories/{{ folderName }}.stories.js.hbs b/generator/templates/stories/{{ folderName }}.stories.js.hbs index 552f294ce89..7caab343a96 100644 --- a/generator/templates/stories/{{ folderName }}.stories.js.hbs +++ b/generator/templates/stories/{{ folderName }}.stories.js.hbs @@ -38,12 +38,11 @@ export default { actions: { handles: ["click .spectrum-{{ pascalCase name }}"], }, - componentVersion: version, + packageJson: pkgJson, design: { type: "figma", url: "", }, - componentVersion: pkgJson.version, } }; diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js index c66e5d4e423..dfaf1522a48 100644 --- a/plugins/stylelint-theme-alignment/index.js +++ b/plugins/stylelint-theme-alignment/index.js @@ -52,10 +52,10 @@ const ruleFunction = (enabled) => { const isTheme = parts[parts.length - 2] === "themes"; const filename = parts[parts.length - 1]; - if (!isTheme || filename === "spectrum.css") return; + if (!isTheme || filename === "spectrum-two.css") return; // All the parts of the source file but replace the filename with spectrum-two.css - const baseFile = [...parts.slice(0, -1), "spectrum.css"].join(sep); + const baseFile = [...parts.slice(0, -1), "spectrum-two.css"].join(sep); const rootPath = parts.slice(0, -2).join(sep); // If the base file doesn't exist, throw an error diff --git a/stylelint.config.js b/stylelint.config.js index f090f5a90c9..8079fc73847 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -189,7 +189,7 @@ module.exports = { }, { /* Validate that the legacy themes don't introduce any new selectors or custom properties */ - files: ["components/*/themes/express.css", "!components/*/themes/spectrum.css"], + files: ["components/*/themes/*.css", "!components/*/themes/spectrum-two.css"], rules: { "spectrum-tools/theme-alignment": true, }, diff --git a/tokens/custom-spectrum/custom-light-vars.css b/tokens/custom-spectrum/custom-light-vars.css deleted file mode 100644 index c525a38385e..00000000000 --- a/tokens/custom-spectrum/custom-light-vars.css +++ /dev/null @@ -1,70 +0,0 @@ -/*! - * Copyright 2024 Adobe. All rights reserved. - * - * This file is licensed to you under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. You may obtain a copy - * of the License at - * - * Unless required by applicable law or agreed to in writing, software distributed under - * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS - * OF ANY KIND, either express or implied. See the License for the specific language - * governing permissions and limitations under the License. - */ - -/* This file contains overrides and additions to core tokens */ - -.spectrum--light, -.spectrum--lightest { - --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0); /* --spectrum-gray-900 */ - --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); - - /* Drop Zone background color rgb */ - --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/ - - /* Drop Indicator color 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-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); -} diff --git a/tokens/custom/dark-vars.css b/tokens/custom/dark-vars.css index 820c594f488..259d7d609a1 100644 --- a/tokens/custom/dark-vars.css +++ b/tokens/custom/dark-vars.css @@ -14,11 +14,6 @@ /* This file contains overrides and additions to core tokens */ .spectrum--dark { - --spectrum-menu-item-background-color-default: rgba(255, 255, 255, 0); /* --spectrum-gray-900 */ - --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); - /* Drop Zone background color rgb */ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb); /* var(--spectrum-accent-color-900);*/ @@ -37,10 +32,6 @@ --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-25); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); @@ -67,6 +58,5 @@ --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: rgba(255, 255, 255, 51%); - --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css index 8da3d2f06a6..ccb88b7163f 100644 --- a/tokens/custom/large-vars.css +++ b/tokens/custom/large-vars.css @@ -66,11 +66,6 @@ --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; - /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ --spectrum-workflow-icon-size-xxl: 40px; --spectrum-workflow-icon-size-xxs: 15px; @@ -120,4 +115,6 @@ --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } diff --git a/tokens/custom/light-vars.css b/tokens/custom/light-vars.css index 2dba48bdcf0..d44c5e6d613 100644 --- a/tokens/custom/light-vars.css +++ b/tokens/custom/light-vars.css @@ -13,11 +13,6 @@ /* This file contains overrides and additions to core tokens */ .spectrum--light { - --spectrum-menu-item-background-color-default: rgba(0, 0, 0, 0%); /* --spectrum-gray-900 */ - --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); - /* Drop Zone background color rgb */ --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-800-rgb); /* var(--spectrum-accent-color-800);*/ @@ -36,10 +31,6 @@ --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-25); - - --spectrum-well-border-color: var(--spectrum-black-rgb); --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); @@ -66,6 +57,5 @@ --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: rgba(0, 0, 0, 51%); - --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css index 3d8d8aaaebf..3cb67515cb0 100644 --- a/tokens/custom/medium-vars.css +++ b/tokens/custom/medium-vars.css @@ -65,10 +65,6 @@ --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); /* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */ --spectrum-workflow-icon-size-xxl: 32px; @@ -119,4 +115,6 @@ --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tokens/dist/css/components/bridge/index.css b/tokens/dist/css/components/bridge/index.css index 1026cf14f4c..873f7c8e197 100644 --- a/tokens/dist/css/components/bridge/index.css +++ b/tokens/dist/css/components/bridge/index.css @@ -459,7 +459,7 @@ --spectrum-card-horizontal-preview-padding: var(--system-card-horizontal-preview-padding); --spectrum-card-content-margin-top-quiet: var(--system-card-content-margin-top-quiet); --spectrum-card-minimum-width-quiet: var(--system-card-minimum-width-quiet); - --spectrum-card-selected-background-color-rgb: var(--system-card-dark-selected-background-color-rgb); + --spectrum-card-selected-background-color-rgb: var(--system-card-darkest-selected-background-color-rgb); --spectrum-checkbox-control-color-default: var(--system-checkbox-control-color-default); --spectrum-checkbox-control-color-hover: var(--system-checkbox-control-color-hover); --spectrum-checkbox-control-color-down: var(--system-checkbox-control-color-down); @@ -532,6 +532,8 @@ --spectrum-coach-indicator-block-size: var(--system-coach-indicator-block-size); --spectrum-coach-indicator-ring-inline-size: var(--system-coach-indicator-ring-inline-size); --spectrum-coach-indicator-ring-block-size: var(--system-coach-indicator-ring-block-size); + --spectrum-coach-indicator-ring-dark-color: var(--system-coach-indicator-ring-dark-color); + --spectrum-coach-indicator-ring-light-color: var(--system-coach-indicator-ring-light-color); --spectrum-coach-indicator-top: var(--system-coach-indicator-top); --spectrum-coach-indicator-left: var(--system-coach-indicator-left); --spectrum-coach-animation-indicator-ring-duration: var(--system-coach-indicator-coach-animation-indicator-ring-duration); @@ -663,7 +665,7 @@ --spectrum-combobox-spacing-inline-start-edge-to-text: var(--system-combobox-quiet-spacing-inline-start-edge-to-text); --spectrum-combobox-spacing-inline-end-edge-to-text: var(--system-combobox-size-xl-spacing-inline-end-edge-to-text); --spectrum-contextual-help-padding: var(--system-contextual-help-padding); - --spectrum-contextual-help-content-spacing: var(--system-contextual-help-large-content-spacing); + --spectrum-contextual-help-content-spacing-default: var(--system-contextual-help-content-spacing-default); --spectrum-contextual-help-link-spacing: var(--system-contextual-help-link-spacing); --spectrum-contextual-help-heading-size: var(--system-contextual-help-heading-size); --spectrum-contextual-help-heading-color: var(--system-contextual-help-heading-color); @@ -960,22 +962,6 @@ --spectrum-logic-button-or-text-color-disabled: var(--system-logic-button-or-text-color-disabled); --spectrum-logic-button-or-background-color-hover-disabled: var(--system-logic-button-or-background-color-hover-disabled); --spectrum-logic-button-or-border-color-hover-disabled: var(--system-logic-button-or-border-color-hover-disabled); - --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); - --spectrum-menu-item-icon-height: var(--system-menu-size-xl-item-icon-height); - --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); - --spectrum-menu-item-label-font-size: var(--system-menu-size-xl-item-label-font-size); - --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-xl-item-label-text-to-visual); - --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-xl-item-label-inline-edge-to-content); - --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-xl-item-top-edge-to-text); - --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-xl-item-bottom-edge-to-text); - --spectrum-menu-item-text-to-control: var(--system-menu-size-xl-item-text-to-control); - --spectrum-menu-item-description-font-size: var(--system-menu-size-xl-item-description-font-size); - --spectrum-menu-section-header-font-size: var(--system-menu-size-xl-section-header-font-size); - --spectrum-menu-section-header-min-width: var(--system-menu-size-xl-section-header-min-width); - --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-xl-item-selectable-edge-to-text-not-selected); - --spectrum-menu-item-checkmark-height: var(--system-menu-size-xl-item-checkmark-height); - --spectrum-menu-item-checkmark-width: var(--system-menu-size-xl-item-checkmark-width); - --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-xl-item-top-to-checkmark); --spectrum-menu-item-top-to-action: var(--system-menu-item-top-to-action); --spectrum-menu-item-top-to-checkbox: var(--system-menu-item-top-to-checkbox); --spectrum-menu-item-label-line-height: var(--system-menu-item-label-line-height); @@ -1021,9 +1007,29 @@ --spectrum-menu-checkmark-display-hidden: var(--system-menu-checkmark-display-hidden); --spectrum-menu-checkmark-display-shown: var(--system-menu-checkmark-display-shown); --spectrum-menu-checkmark-display: var(--system-menu-checkmark-display); - --spectrum-menu-back-icon-margin: var(--system-menu-size-xl-back-icon-margin); --spectrum-menu-item-collapsible-has-icon-submenu-item-padding-x-start: var(--system-menu-item-collapsible-has-icon-sub-item-padding-x-start); --spectrum-menu-item-collapsible-no-icon-submenu-item-padding-x-start: var(--system-menu-item-collapsible-no-icon-sub-item-padding-x-start); + --spectrum-menu-item-background-color-default: var(--system-menu-item-background-color-default); + --spectrum-menu-item-background-color-hover: var(--system-menu-item-background-color-hover); + --spectrum-menu-item-background-color-down: var(--system-menu-item-background-color-down); + --spectrum-menu-item-background-color-key-focus: var(--system-menu-item-background-color-key-focus); + --spectrum-menu-item-min-height: var(--system-menu-size-xl-item-min-height); + --spectrum-menu-item-icon-height: var(--system-menu-size-xl-item-icon-height); + --spectrum-menu-item-icon-width: var(--system-menu-size-xl-item-icon-width); + --spectrum-menu-item-label-font-size: var(--system-menu-size-xl-item-label-font-size); + --spectrum-menu-item-label-text-to-visual: var(--system-menu-size-xl-item-label-text-to-visual); + --spectrum-menu-item-label-inline-edge-to-content: var(--system-menu-size-xl-item-label-inline-edge-to-content); + --spectrum-menu-item-top-edge-to-text: var(--system-menu-size-xl-item-top-edge-to-text); + --spectrum-menu-item-bottom-edge-to-text: var(--system-menu-size-xl-item-bottom-edge-to-text); + --spectrum-menu-item-text-to-control: var(--system-menu-size-xl-item-text-to-control); + --spectrum-menu-item-description-font-size: var(--system-menu-size-xl-item-description-font-size); + --spectrum-menu-section-header-font-size: var(--system-menu-size-xl-section-header-font-size); + --spectrum-menu-section-header-min-width: var(--system-menu-size-xl-section-header-min-width); + --spectrum-menu-item-selectable-edge-to-text-not-selected: var(--system-menu-size-xl-item-selectable-edge-to-text-not-selected); + --spectrum-menu-item-checkmark-height: var(--system-menu-size-xl-item-checkmark-height); + --spectrum-menu-item-checkmark-width: var(--system-menu-size-xl-item-checkmark-width); + --spectrum-menu-item-top-to-checkmark: var(--system-menu-size-xl-item-top-to-checkmark); + --spectrum-menu-back-icon-margin: var(--system-menu-size-xl-back-icon-margin); --spectrum-millercolumns-inline-size: var(--system-miller-columns-inline-size); --spectrum-millercolumns-padding: var(--system-miller-columns-padding); --spectrum-millercolumns-margin-inline-start: var(--system-miller-columns-margin-inline-start); @@ -1488,28 +1494,26 @@ --spectrum-stepper-buttons-background-color-disabled: var(--system-stepper-buttons-background-color-disabled); --spectrum-stepper-button-width: var(--system-stepper-size-xl-button-width); --spectrum-stepper-height: var(--system-stepper-size-xl-height); - --spectrum-swatch-focus-indicator-border-radius: var(--system-swatch-focus-indicator-border-radius); - --spectrum-swatch-size: var(--system-swatch-size-l-size); --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-disabled-icon-size: var(--system-swatch-size-l-disabled-icon-size); - --spectrum-swatch-slash-thickness: var(--system-swatch-size-l-slash-thickness); --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-default: var(--system-swatch-border-color-default); - --spectrum-swatch-border-color-light-default: var(--system-swatch-border-color-light-default); + --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-border-color: var(--system-swatch-disabled-icon-border-color); --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-border-color-opacity: var(--system-swatch-border-color-opacity); - --spectrum-swatch-border-color: var(--system-swatch-border-color); - --spectrum-swatch-border-color-light-opacity: var(--system-swatch-border-color-light-opacity); - --spectrum-swatch-border-color-light: var(--system-swatch-border-color-light); + --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); --spectrum-swatchgroup-spacing-compact: var(--system-swatch-group-spacing-compact); --spectrum-swatchgroup-spacing-regular: var(--system-swatch-group-spacing-regular); --spectrum-swatchgroup-spacing-spacious: var(--system-swatch-group-spacing-spacious); @@ -1935,6 +1939,11 @@ --spectrum-underlay-background-exit-animation-delay: var(--system-underlay-background-exit-animation-delay); --spectrum-underlay-background-color: var(--system-underlay-background-color); --spectrum-well-border-width: var(--system-well-border-width); + --spectrum-well-border-color: var(--system-well-border-color); + --spectrum-well-border-radius: var(--system-well-border-radius); --spectrum-well-content-color: var(--system-well-content-color); --spectrum-well-background-color: var(--system-well-background-color); + --spectrum-well-padding: var(--system-well-padding); + --spectrum-well-margin-top: var(--system-well-margin-top); + --spectrum-well-minimum-width: var(--system-well-minimum-width); } diff --git a/tokens/dist/css/components/express/card.css b/tokens/dist/css/components/express/card.css index ac41935ebfa..507701c236e 100644 --- a/tokens/dist/css/components/express/card.css +++ b/tokens/dist/css/components/express/card.css @@ -57,7 +57,7 @@ --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-light-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - --system-card-lightest-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); } diff --git a/tokens/dist/css/components/express/coachindicator.css b/tokens/dist/css/components/express/coachindicator.css index 7ec3b305776..128e25f2fda 100644 --- a/tokens/dist/css/components/express/coachindicator.css +++ b/tokens/dist/css/components/express/coachindicator.css @@ -19,6 +19,8 @@ --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); diff --git a/tokens/dist/css/components/express/contextualhelp.css b/tokens/dist/css/components/express/contextualhelp.css index d1bcfc53079..d974bb169ca 100644 --- a/tokens/dist/css/components/express/contextualhelp.css +++ b/tokens/dist/css/components/express/contextualhelp.css @@ -13,10 +13,9 @@ .spectrum.spectrum--express { --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-content-spacing-default: var(--spectrum-contextual-help-content-spacing); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); --system-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); --system-contextual-help-heading-color: var(--spectrum-heading-color); --system-contextual-help-body-color: var(--spectrum-body-color); - --system-contextual-help-large-content-spacing: var(--spectrum-spacing-200); } diff --git a/tokens/dist/css/components/express/index.css b/tokens/dist/css/components/express/index.css index ee30eea20e0..ab9589ddb35 100644 --- a/tokens/dist/css/components/express/index.css +++ b/tokens/dist/css/components/express/index.css @@ -1068,9 +1068,9 @@ --system-card-horizontal-preview-padding: var(--spectrum-spacing-200); --system-card-content-margin-top-quiet: var(--spectrum-spacing-100); --system-card-minimum-width-quiet: var(--spectrum-card-minimum-width); - --system-card-light-selected-background-color-rgb: var(--spectrum-blue-900-rgb); - --system-card-lightest-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --system-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); --system-card-dark-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --system-card-darkest-selected-background-color-rgb: var(--spectrum-blue-600-rgb); --system-checkbox-control-color-default: var(--spectrum-gray-800); --system-checkbox-control-color-hover: var(--spectrum-gray-900); --system-checkbox-control-color-down: var(--spectrum-gray-900); @@ -1199,6 +1199,8 @@ --system-coach-indicator-block-size: var(--system-coach-indicator-min-block-size); --system-coach-indicator-ring-inline-size: var(--spectrum-coach-indicator-ring-diameter); --system-coach-indicator-ring-block-size: var(--spectrum-coach-indicator-ring-diameter); + --system-coach-indicator-ring-dark-color: var(--spectrum-gray-900); + --system-coach-indicator-ring-light-color: var(--spectrum-gray-50); --system-coach-indicator-top: calc(var(--system-coach-indicator-block-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-left: calc(var(--system-coach-indicator-inline-size) / 3 - var(--system-coach-indicator-ring-border-size)); --system-coach-indicator-coach-animation-indicator-ring-duration: var(--spectrum-animation-duration-6000); @@ -1383,12 +1385,11 @@ --system-combobox-quiet-size-l-spacing-label-to: var(--spectrum-field-label-to-component-quiet-large); --system-combobox-quiet-size-xl-spacing-label-to: var(--spectrum-field-label-to-component-quiet-extra-large); --system-contextual-help-padding: var(--spectrum-spacing-400); - --system-contextual-help-content-spacing: var(--spectrum-spacing-100); + --system-contextual-help-content-spacing-default: var(--spectrum-contextual-help-content-spacing); --system-contextual-help-link-spacing: var(--spectrum-spacing-300); --system-contextual-help-heading-size: var(--spectrum-contextual-help-title-size); --system-contextual-help-heading-color: var(--spectrum-heading-color); --system-contextual-help-body-color: var(--spectrum-body-color); - --system-contextual-help-large-content-spacing: var(--spectrum-spacing-200); --system-date-picker-initial-height: var(--spectrum-component-height-75); --system-date-picker-border-radius: var(--spectrum-corner-radius-100); --system-date-picker-border-radius-quiet: 0; @@ -1875,22 +1876,6 @@ --system-logic-button-or-text-color-disabled: var(--spectrum-gray-500); --system-logic-button-or-background-color-hover-disabled: var(--spectrum-gray-200); --system-logic-button-or-border-color-hover-disabled: var(--spectrum-gray-200); - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-section-header-min-width: var(--spectrum-component-height-100); - --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); --system-menu-item-top-to-action: var(--spectrum-spacing-50); --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); --system-menu-item-label-line-height: var(--spectrum-line-height-100); @@ -1936,9 +1921,12 @@ --system-menu-checkmark-display-hidden: none; --system-menu-checkmark-display-shown: block; --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-text-to-control) + var(--system-menu-item-icon-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-background-color-default: var(--spectrum-gray-1000); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); @@ -1956,6 +1944,40 @@ --system-menu-size-s-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); --system-menu-size-s-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); --system-menu-size-s-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-size-m-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-size-m-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-size-m-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-size-m-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-size-m-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-size-m-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-m-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); @@ -2678,21 +2700,20 @@ --system-stepper-size-l-height: var(--spectrum-component-height-200); --system-stepper-size-xl-button-width: var(--spectrum-in-field-button-width-stacked-extra-large); --system-stepper-size-xl-height: var(--spectrum-component-height-300); - --system-swatch-focus-indicator-border-radius: 8px; - --system-swatch-size: var(--spectrum-swatch-size-small); --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-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-default: var(--spectrum-swatch-border-color); - --system-swatch-border-color-light-default: var(--spectrum-swatch-border-color-light); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--system-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-border-color: var(--system-swatch-disabled-icon-border-color); - --system-swatch-disabled-icon-color: var(--spectrum-white); + --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); @@ -2702,16 +2723,15 @@ --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: 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-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-color-opacity: 0.51; - --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color-light: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-light-opacity)); --system-swatch-group-spacing-compact: var(--spectrum-spacing-50); --system-swatch-group-spacing-regular: var(--spectrum-spacing-75); --system-swatch-group-spacing-spacious: var(--spectrum-spacing-100); @@ -3513,6 +3533,11 @@ --system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200); --system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity)); --system-well-border-width: var(--spectrum-border-width-100); + --system-well-border-color: rgba(var(----spectrum-gray-900-rgb), 0.05); + --system-well-border-radius: var(--spectrum-spacing-75); --system-well-content-color: var(--spectrum-body-color); --system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --system-well-padding: var(--spectrum-spacing-300); + --system-well-margin-top: var(--spectrum-spacing-75); + --system-well-minimum-width: var(--spectrum-well-min-width); } diff --git a/tokens/dist/css/components/express/menu.css b/tokens/dist/css/components/express/menu.css index 87a7744dd3b..76bd939617a 100644 --- a/tokens/dist/css/components/express/menu.css +++ b/tokens/dist/css/components/express/menu.css @@ -12,22 +12,6 @@ */ .spectrum.spectrum--express { - --system-menu-item-min-height: var(--spectrum-component-height-100); - --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); - --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); - --system-menu-item-label-font-size: var(--spectrum-font-size-100); - --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); - --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); - --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); - --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); - --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); - --system-menu-item-description-font-size: var(--spectrum-font-size-75); - --system-menu-section-header-font-size: var(--spectrum-font-size-100); - --system-menu-section-header-min-width: var(--spectrum-component-height-100); - --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); - --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); - --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); - --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); --system-menu-item-top-to-action: var(--spectrum-spacing-50); --system-menu-item-top-to-checkbox: var(--spectrum-spacing-50); --system-menu-item-label-line-height: var(--spectrum-line-height-100); @@ -73,9 +57,12 @@ --system-menu-checkmark-display-hidden: none; --system-menu-checkmark-display-shown: block; --system-menu-checkmark-display: var(--system-menu-checkmark-display-shown); - --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); --system-menu-item-collapsible-has-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-text-to-control) + var(--system-menu-item-icon-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); --system-menu-item-collapsible-no-icon-sub-item-padding-x-start: calc(var(--system-menu-item-label-inline-edge-to-content) + var(--system-menu-item-checkmark-width) + var(--system-menu-item-label-text-to-visual) + var(--system-menu-item-focus-indicator-width)); + --system-menu-item-background-color-default: var(--spectrum-gray-1000); + --system-menu-item-background-color-hover: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-down: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); + --system-menu-item-background-color-key-focus: rgba(var(--spectrum-gray-1000), var(--spectrum-transparent-black-200-opacity)); --system-menu-size-s-item-min-height: var(--spectrum-component-height-75); --system-menu-size-s-item-icon-height: var(--spectrum-workflow-icon-size-75); --system-menu-size-s-item-icon-width: var(--spectrum-workflow-icon-size-75); @@ -93,6 +80,40 @@ --system-menu-size-s-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-small); --system-menu-size-s-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-small); --system-menu-size-s-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-small); + --system-menu-item-min-height: var(--spectrum-component-height-100); + --system-menu-size-m-item-min-height: var(--spectrum-component-height-100); + --system-menu-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-height: var(--spectrum-workflow-icon-size-100); + --system-menu-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-size-m-item-icon-width: var(--spectrum-workflow-icon-size-100); + --system-menu-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-item-label-font-size: var(--spectrum-font-size-100); + --system-menu-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-size-m-item-label-text-to-visual: var(--spectrum-text-to-visual-100); + --system-menu-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-size-m-item-label-inline-edge-to-content: var(--spectrum-component-edge-to-text-100); + --system-menu-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-size-m-item-top-edge-to-text: var(--spectrum-component-top-to-text-100); + --system-menu-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-size-m-item-bottom-edge-to-text: var(--spectrum-component-bottom-to-text-100); + --system-menu-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-size-m-item-text-to-control: var(--spectrum-text-to-control-100); + --system-menu-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-size-m-item-description-font-size: var(--spectrum-font-size-75); + --system-menu-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-size-m-section-header-font-size: var(--spectrum-font-size-100); + --system-menu-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-size-m-section-header-min-width: var(--spectrum-component-height-100); + --system-menu-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-size-m-item-selectable-edge-to-text-not-selected: var(--spectrum-menu-item-selectable-edge-to-text-not-selected-medium); + --system-menu-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-size-m-item-checkmark-height: var(--spectrum-menu-item-checkmark-height-medium); + --system-menu-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-size-m-item-checkmark-width: var(--spectrum-menu-item-checkmark-width-medium); + --system-menu-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-size-m-item-top-to-checkmark: var(--spectrum-menu-item-top-to-selected-icon-medium); + --system-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); + --system-menu-size-m-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-medium); --system-menu-size-l-item-min-height: var(--spectrum-component-height-200); --system-menu-size-l-item-icon-height: var(--spectrum-workflow-icon-size-200); --system-menu-size-l-item-icon-width: var(--spectrum-workflow-icon-size-200); diff --git a/tokens/dist/css/components/express/swatch.css b/tokens/dist/css/components/express/swatch.css index 85cb7d84c93..6311f89a418 100644 --- a/tokens/dist/css/components/express/swatch.css +++ b/tokens/dist/css/components/express/swatch.css @@ -12,21 +12,20 @@ */ .spectrum.spectrum--express { - --system-swatch-focus-indicator-border-radius: 8px; - --system-swatch-size: var(--spectrum-swatch-size-small); --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-disabled-icon-size: var(--spectrum-workflow-icon-size-75); - --system-swatch-slash-thickness: var(--spectrum-swatch-slash-thickness-small); --system-swatch-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness); --system-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); - --system-swatch-border-color-default: var(--spectrum-swatch-border-color); - --system-swatch-border-color-light-default: var(--spectrum-swatch-border-color-light); + --system-swatch-border-color-opacity: 0.51; + --system-swatch-border-color-light-opacity: 0.2; + --system-swatch-border-color: rgba(var(--spectrum-black-rgb), var(--system-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-border-color: var(--system-swatch-disabled-icon-border-color); - --system-swatch-disabled-icon-color: var(--spectrum-white); + --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); @@ -36,14 +35,13 @@ --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: 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-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-color-opacity: 0.51; - --system-swatch-border-color: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-opacity)); - --system-swatch-border-color-light-opacity: 0.2; - --system-swatch-border-color-light: rgba(var(--spectrum-gray-900-rgb), var(--system-swatch-border-color-light-opacity)); } diff --git a/tokens/dist/css/components/express/well.css b/tokens/dist/css/components/express/well.css index c5cc098dc23..d190ce792be 100644 --- a/tokens/dist/css/components/express/well.css +++ b/tokens/dist/css/components/express/well.css @@ -13,6 +13,11 @@ .spectrum.spectrum--express { --system-well-border-width: var(--spectrum-border-width-100); + --system-well-border-color: rgba(var(----spectrum-gray-900-rgb), 0.05); + --system-well-border-radius: var(--spectrum-spacing-75); --system-well-content-color: var(--spectrum-body-color); --system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02); + --system-well-padding: var(--spectrum-spacing-300); + --system-well-margin-top: var(--spectrum-spacing-75); + --system-well-minimum-width: var(--spectrum-well-min-width); } diff --git a/tokens/dist/index.css b/tokens/dist/index.css index b045b3eb2b2..b66234ac9f3 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -694,12 +694,6 @@ --spectrum-icon-color-green-primary-default: var(--spectrum-green-800); --spectrum-icon-color-red-primary-default: var(--spectrum-red-700); --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-1000); - --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); @@ -715,10 +709,6 @@ --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-25); - - --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05); --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700); @@ -745,14 +735,7 @@ --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)); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); } .spectrum { --spectrum-focus-indicator-color: var(--spectrum-blue-800); @@ -1175,9 +1158,9 @@ --spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300); --spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300); --spectrum-default-font-family: var(--spectrum-sans-serif-font-family); - --spectrum-sans-serif-font-family: Adobe Clean; - --spectrum-serif-font-family: Adobe Clean Serif; - --spectrum-cjk-font-family: Adobe Clean Han; + --spectrum-sans-serif-font-family: adobe clean; + --spectrum-serif-font-family: adobe clean serif; + --spectrum-cjk-font-family: adobe clean han; --spectrum-light-font-weight: 300; --spectrum-regular-font-weight: 400; --spectrum-medium-font-weight: 500; @@ -1388,7 +1371,7 @@ --spectrum-detail-sans-serif-text-transform: uppercase; --spectrum-detail-serif-text-transform: uppercase; --spectrum-detail-color: var(--spectrum-gray-900); - --spectrum-code-font-family: Source Code Pro; + --spectrum-code-font-family: source code pro; --spectrum-code-cjk-font-family: var(--spectrum-code-font-family); --spectrum-code-font-weight: var(--spectrum-regular-font-weight); --spectrum-code-font-style: var(--spectrum-default-font-style); @@ -1436,13 +1419,13 @@ --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-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-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-code-font-family-stack: "Source Code Pro", monaco, monospace; --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); @@ -2040,11 +2023,6 @@ --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; @@ -2093,6 +2071,8 @@ --spectrum-ui-icon-medium-display: none; --spectrum-ui-icon-large-display: block; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); } .spectrum--light { --spectrum-overlay-opacity: 0.4; @@ -2777,12 +2757,6 @@ --spectrum-icon-color-green-primary-default: var(--spectrum-green-900); --spectrum-icon-color-red-primary-default: var(--spectrum-red-900); --spectrum-icon-color-yellow-primary-default: var(--spectrum-yellow-400); - --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); @@ -2798,10 +2772,6 @@ --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-25); - - --spectrum-well-border-color: var(--spectrum-black-rgb); --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800); @@ -2828,14 +2798,7 @@ --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)); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); } .spectrum--medium { --spectrum-workflow-icon-size-50: 14px; @@ -3426,10 +3389,6 @@ --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; @@ -3478,4 +3437,6 @@ --spectrum-ui-icon-medium-display: block; --spectrum-ui-icon-large-display: none; + + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); } diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js index da1dc313b7b..f7b60ab3537 100644 --- a/tokens/tasks/token-rollup.js +++ b/tokens/tasks/token-rollup.js @@ -36,9 +36,9 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false } const inputs = await fg(inputGlob, { cwd }); - const contents = inputs.map(input => `@import "${path.basename(input)}";`).join("\n"); + const contents = inputs.map(input => `@import "${input}";`).join("\n"); if (!contents) return; - return processCSS(contents, inputs[0], outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true }); + return processCSS(contents, undefined, outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true }); } /** @@ -125,7 +125,7 @@ async function appendCustomOverrides({ cwd = process.cwd() } = {}) { ], { cwd, shouldCombine: true }); promises.push( - combinedContent[0].content ? fsp.writeFile(path.join(cwd, "dist", "css", file), combinedContent[0].content) : Promise.resolve() + combinedContent[0].content ? writeAndReport(combinedContent[0].content, path.join(cwd, "dist", "css", file)) : Promise.resolve() ); } @@ -151,7 +151,7 @@ async function main({ const key = `[build] ${"@spectrum-css/tokens".cyan} index`; console.time(key); - const compiledOutputPath = path.join(cwd, "dist", "css"); + const compiledOutputPath = path.join(cwd, "dist"); return Promise.all([ componentTheming(), @@ -159,25 +159,25 @@ async function main({ appendCustomOverrides({ cwd }), ]).then(async (r) => { return Promise.all([ - ...["spectrum", "legacy", "express"].map(theme => index( - [`dist/css/components/${theme}/*.css`], - path.join(compiledOutputPath, "components", theme, "index.css"), - { cwd, clean } - )), index( ["dist/css/components/bridge/*.css"], - path.join(compiledOutputPath, "components", "bridge", "index.css"), + path.join(compiledOutputPath, "css", "components", "bridge", "index.css"), { cwd, clean } ), + ...["spectrum", "legacy", "express"].map(theme => index( + [`dist/css/components/${theme}/*.css`], + path.join(compiledOutputPath, "css", "components", theme, "index.css"), + { cwd, clean } + )), index( ["dist/css/*-vars.css"], - path.join(compiledOutputPath, "index.css"), + path.join(compiledOutputPath, "css", "index.css"), { cwd, clean } ).then((reports) => - copy(path.join(compiledOutputPath, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false }) + copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false }) .then((reps) => [reports, reps])) ]).then((reports) => { - return [r, reports]; + return [reports, r]; }); }).then((report) => { const logs = report.flat(Infinity).filter(Boolean);