diff --git a/.changeset/flat-toys-battle.md b/.changeset/flat-toys-battle.md new file mode 100644 index 0000000000..f695e016ce --- /dev/null +++ b/.changeset/flat-toys-battle.md @@ -0,0 +1,9 @@ +--- +"@spectrum-css/tokens": minor +--- + +Add component-level token overrides from card, contextualhelp, swatch, and typography to ensure valid theme toggling. + +Light/dark/darkest custom overrides added: `--spectrum-card-selected-background-color-rgb`, `--spectrum-swatch-border-color`, `--spectrum-swatch-border-color-light` +Medium/large custom overrides added: `--spectrum-contextual-help-content-spacing` +Global custom overrides added: `--spectrum-font-family-ar`, `--spectrum-font-family-he`, `--spectrum-font-family`, `--spectrum-font-style`, `--spectrum-font-size` diff --git a/.changeset/forty-radios-type.md b/.changeset/forty-radios-type.md new file mode 100644 index 0000000000..7c6c97f6b9 --- /dev/null +++ b/.changeset/forty-radios-type.md @@ -0,0 +1,7 @@ +--- +"@spectrum-css/contextualhelp": minor +"@spectrum-css/swatch": minor +"@spectrum-css/card": minor +--- + +This update removes tokens defined locally that belonged in the global scope. To ensure no regressions, please upgrade your @spectrum-css/tokens package at the same time so you will pick up the component-level definitions now in the global tokens scope. References to `.spectrum--(light|dark|darkest|medium|large)` have been removed. diff --git a/components/card/index.css b/components/card/index.css index 87ab611f7a..4639f6721b 100644 --- a/components/card/index.css +++ b/components/card/index.css @@ -72,20 +72,6 @@ /* Horizontal */ --spectrum-card-horizontal-body-padding: var(--spectrum-spacing-300); --spectrum-card-horizontal-preview-padding: var(--spectrum-spacing-200); - - /* 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); - } - - .spectrum--darkest & { - --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); - } } /* Quiet/Gallery */ diff --git a/components/card/metadata/metadata.json b/components/card/metadata/metadata.json index 5e0e83d7fe..51b2fb5cab 100644 --- a/components/card/metadata/metadata.json +++ b/components/card/metadata/metadata.json @@ -1,10 +1,6 @@ { "sourceFile": "index.css", "selectors": [ - ".spectrum--dark .spectrum-Card", - ".spectrum--darkest .spectrum-Card", - ".spectrum--light .spectrum-Card", - ".spectrum--lightest .spectrum-Card", ".spectrum-Card", ".spectrum-Card .spectrum-Divider", ".spectrum-Card--gallery", @@ -196,10 +192,7 @@ "--spectrum-animation-duration-100", "--spectrum-background-base-color", "--spectrum-background-layer-2-color", - "--spectrum-blue-500-rgb", - "--spectrum-blue-600-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/contextualhelp/index.css b/components/contextualhelp/index.css index fa89a7a378..fce97c1b0b 100644 --- a/components/contextualhelp/index.css +++ b/components/contextualhelp/index.css @@ -14,7 +14,6 @@ .spectrum-ContextualHelp { /* Layout Variables */ --spectrum-contextual-help-padding: var(--spectrum-spacing-400); - --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); --spectrum-contextual-help-link-spacing: var(--spectrum-spacing-300); /* Typography Variables */ @@ -22,13 +21,6 @@ --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); - } -} - -.spectrum-ContextualHelp { position: relative; min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width)); } diff --git a/components/contextualhelp/metadata/metadata.json b/components/contextualhelp/metadata/metadata.json index 6a976298b9..e3952ec708 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", @@ -33,8 +32,6 @@ "global": [ "--spectrum-body-color", "--spectrum-heading-color", - "--spectrum-spacing-100", - "--spectrum-spacing-200", "--spectrum-spacing-300", "--spectrum-spacing-400" ], diff --git a/components/swatch/index.css b/components/swatch/index.css index 5b893cdd13..04de9f0fe2 100644 --- a/components/swatch/index.css +++ b/components/swatch/index.css @@ -15,7 +15,7 @@ .spectrum-Swatch { /* Placeholder tokens */ --spectrum-swatch-focus-indicator-border-radius: 8px; - --spectrum-swatch-icon-border-color: rgba(0, 0, 0, 51%); + --spectrum-swatch-icon-border-color: rgb(0 0 0 / 51%); /* Size */ --spectrum-swatch-size: var(--spectrum-swatch-size-small); @@ -28,7 +28,6 @@ --spectrum-swatch-focus-indicator-gap: var(--spectrum-focus-indicator-gap); /* Color */ - --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); --spectrum-swatch-border-color-selected: var(--spectrum-gray-900); --spectrum-swatch-inner-border-color-selected: var(--spectrum-gray-50); --spectrum-swatch-disabled-icon-border-color: var(--spectrum-swatch-disabled-icon-border-color); @@ -36,19 +35,6 @@ --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); - - /* Light theme placeholder tokens */ - .spectrum--light & { - --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); - --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%); - } - - /* Dark and Darkest theme placeholder tokens */ - .spectrum--dark &, - .spectrum--darkest & { - --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); - --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%); - } } .spectrum-Swatch--sizeXS { diff --git a/components/swatch/metadata/metadata.json b/components/swatch/metadata/metadata.json index 308ec62b65..341ffaf99e 100644 --- a/components/swatch/metadata/metadata.json +++ b/components/swatch/metadata/metadata.json @@ -1,9 +1,6 @@ { "sourceFile": "index.css", "selectors": [ - ".spectrum--dark .spectrum-Swatch", - ".spectrum--darkest .spectrum-Swatch", - ".spectrum--light .spectrum-Swatch", ".spectrum-Swatch", ".spectrum-Swatch .spectrum-Swatch-disabledIcon", ".spectrum-Swatch .spectrum-Swatch-fill", diff --git a/tokens/custom-spectrum/custom-dark-vars.css b/tokens/custom-spectrum/custom-dark-vars.css index 5ce66a79d7..76f2c19787 100644 --- a/tokens/custom-spectrum/custom-dark-vars.css +++ b/tokens/custom-spectrum/custom-dark-vars.css @@ -34,6 +34,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -66,4 +68,7 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); + --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%); } diff --git a/tokens/custom-spectrum/custom-darkest-vars.css b/tokens/custom-spectrum/custom-darkest-vars.css index a075af0e6a..1e9374f0da 100644 --- a/tokens/custom-spectrum/custom-darkest-vars.css +++ b/tokens/custom-spectrum/custom-darkest-vars.css @@ -34,6 +34,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -66,4 +68,7 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color: rgba(255, 255, 255, 51%); + --spectrum-swatch-border-color-light: rgba(255, 255, 255, 20%); } diff --git a/tokens/custom-spectrum/custom-large-vars.css b/tokens/custom-spectrum/custom-large-vars.css index 2a19485875..6631dae564 100644 --- a/tokens/custom-spectrum/custom-large-vars.css +++ b/tokens/custom-spectrum/custom-large-vars.css @@ -23,6 +23,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; diff --git a/tokens/custom-spectrum/custom-light-vars.css b/tokens/custom-spectrum/custom-light-vars.css index c525a38385..15eae16008 100644 --- a/tokens/custom-spectrum/custom-light-vars.css +++ b/tokens/custom-spectrum/custom-light-vars.css @@ -35,6 +35,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); @@ -67,4 +69,7 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb),0.2); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb),0.1); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-swatch-border-color: rgba(0, 0, 0, 51%); + --spectrum-swatch-border-color-light: rgba(0, 0, 0, 20%); } diff --git a/tokens/custom-spectrum/custom-medium-vars.css b/tokens/custom-spectrum/custom-medium-vars.css index 6a4e836d15..f26c882b03 100644 --- a/tokens/custom-spectrum/custom-medium-vars.css +++ b/tokens/custom-spectrum/custom-medium-vars.css @@ -23,6 +23,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px; diff --git a/tokens/custom-spectrum/custom-vars.css b/tokens/custom-spectrum/custom-vars.css index 58993aa24d..4005fc7f4d 100644 --- a/tokens/custom-spectrum/custom-vars.css +++ b/tokens/custom-spectrum/custom-vars.css @@ -14,9 +14,6 @@ /* This file contains overrides and additions to core tokens */ .spectrum { --system: spectrum; -} - -.spectrum { --spectrum-animation-linear: cubic-bezier(0, 0, 1, 1); --spectrum-animation-duration-0: 0ms; --spectrum-animation-duration-100: 130ms; @@ -37,7 +34,6 @@ --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.40, 1); --spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Trebuchet MS', 'Lucida Grande', sans-serif; --spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack); @@ -46,10 +42,17 @@ --spectrum-code-font-family-stack: 'Source Code Pro', Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); /* static white / black background color for docs containers */ - --spectrum-docs-static-white-background-color: rgb(15, 121, 125); - --spectrum-docs-static-black-background-color: rgb(181, 209, 211); + --spectrum-docs-static-white-background-color: rgb(15, 121, 125); + --spectrum-docs-static-black-background-color: rgb(181, 209, 211); } diff --git a/tokens/dist/css/spectrum/custom-large-vars.css b/tokens/dist/css/spectrum/custom-large-vars.css index cf6f18c4c9..3962700a0b 100644 --- a/tokens/dist/css/spectrum/custom-large-vars.css +++ b/tokens/dist/css/spectrum/custom-large-vars.css @@ -21,6 +21,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; diff --git a/tokens/dist/css/spectrum/custom-medium-vars.css b/tokens/dist/css/spectrum/custom-medium-vars.css index 0889ba5635..c45834b4ba 100644 --- a/tokens/dist/css/spectrum/custom-medium-vars.css +++ b/tokens/dist/css/spectrum/custom-medium-vars.css @@ -21,6 +21,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; diff --git a/tokens/dist/css/spectrum/custom-vars.css b/tokens/dist/css/spectrum/custom-vars.css index 3657e8f473..337ae682a6 100644 --- a/tokens/dist/css/spectrum/custom-vars.css +++ b/tokens/dist/css/spectrum/custom-vars.css @@ -33,7 +33,6 @@ --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); @@ -42,10 +41,17 @@ --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font:var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb:15, 121, 125; - --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); - --spectrum-docs-static-black-background-color-rgb:181, 209, 211; - --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); } diff --git a/tokens/dist/css/spectrum/dark-vars.css b/tokens/dist/css/spectrum/dark-vars.css index 395cdc614b..36d797cad0 100644 --- a/tokens/dist/css/spectrum/dark-vars.css +++ b/tokens/dist/css/spectrum/dark-vars.css @@ -30,6 +30,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); @@ -62,4 +64,13 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } diff --git a/tokens/dist/css/spectrum/darkest-vars.css b/tokens/dist/css/spectrum/darkest-vars.css index ca341211f6..43046dec37 100644 --- a/tokens/dist/css/spectrum/darkest-vars.css +++ b/tokens/dist/css/spectrum/darkest-vars.css @@ -30,6 +30,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); @@ -62,4 +64,13 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } diff --git a/tokens/dist/css/spectrum/global-vars.css b/tokens/dist/css/spectrum/global-vars.css index 8680696832..cd60867c85 100644 --- a/tokens/dist/css/spectrum/global-vars.css +++ b/tokens/dist/css/spectrum/global-vars.css @@ -72,7 +72,6 @@ --spectrum-animation-ease-out:cubic-bezier(0, 0, 0.40, 1); --spectrum-animation-ease-linear:cubic-bezier(0, 0, 1, 1); - --spectrum-sans-font-family-stack:adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; --spectrum-sans-serif-font:var(--spectrum-sans-font-family-stack); @@ -81,10 +80,17 @@ --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font:var(--spectrum-code-font-family-stack); - --spectrum-docs-static-white-background-color-rgb:15, 121, 125; - --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); - --spectrum-docs-static-black-background-color-rgb:181, 209, 211; - --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); + --spectrum-docs-static-white-background-color-rgb:15, 121, 125; + --spectrum-docs-static-white-background-color:rgba(var(--spectrum-docs-static-white-background-color-rgb)); + --spectrum-docs-static-black-background-color-rgb:181, 209, 211; + --spectrum-docs-static-black-background-color:rgba(var(--spectrum-docs-static-black-background-color-rgb)); } diff --git a/tokens/dist/css/spectrum/index.css b/tokens/dist/css/spectrum/index.css index cfa9095354..74d24dc133 100644 --- a/tokens/dist/css/spectrum/index.css +++ b/tokens/dist/css/spectrum/index.css @@ -30,6 +30,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-500-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); @@ -62,6 +64,15 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.25); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum--darkest{ @@ -83,6 +94,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-600-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-black); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-700); @@ -115,6 +128,15 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-800-rgb), 0.3); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb:255, 255, 255; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:255, 255, 255; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum{ @@ -186,6 +208,13 @@ --spectrum-code-font-family-stack:"Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar:myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he:myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family:var(--spectrum-sans-font-family-stack); + --spectrum-font-style:var(--spectrum-default-font-style); + --spectrum-font-size:var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack:adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font:var(--spectrum-code-font-family-stack); --spectrum-docs-static-white-background-color-rgb:15, 121, 125; @@ -252,6 +281,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; @@ -368,6 +399,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); @@ -400,6 +433,15 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb), 0.2); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb:0, 0, 0; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:0, 0, 0; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum--medium{ @@ -460,6 +502,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; diff --git a/tokens/dist/css/spectrum/large-vars.css b/tokens/dist/css/spectrum/large-vars.css index b92debf3cc..6477dda010 100644 --- a/tokens/dist/css/spectrum/large-vars.css +++ b/tokens/dist/css/spectrum/large-vars.css @@ -69,6 +69,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:47px; diff --git a/tokens/dist/css/spectrum/light-vars.css b/tokens/dist/css/spectrum/light-vars.css index 89939a133e..34795b64b9 100644 --- a/tokens/dist/css/spectrum/light-vars.css +++ b/tokens/dist/css/spectrum/light-vars.css @@ -30,6 +30,8 @@ --spectrum-calendar-day-background-color-key-focus:rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus:var(--spectrum-blue-800); + --spectrum-card-selected-background-color-rgb:var(--spectrum-blue-900-rgb); + --spectrum-badge-label-icon-color-primary:var(--spectrum-white); --spectrum-coach-indicator-ring-default-color:var(--spectrum-blue-800); @@ -62,4 +64,13 @@ --spectrum-assetlist-item-background-color-selected-hover:rgba(var(--spectrum-blue-900-rgb),0.2); --spectrum-assetlist-item-background-color-selected:rgba(var(--spectrum-blue-900-rgb),0.1); --spectrum-assetlist-border-color-key-focus:var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb:0, 0, 0; + + --spectrum-swatch-border-color-opacity:0.51; + + --spectrum-swatch-border-color:rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb:0, 0, 0; + --spectrum-swatch-border-color-light-opacity:0.2; + --spectrum-swatch-border-color-light:rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } diff --git a/tokens/dist/css/spectrum/medium-vars.css b/tokens/dist/css/spectrum/medium-vars.css index b2caff6305..0ab6fc523a 100644 --- a/tokens/dist/css/spectrum/medium-vars.css +++ b/tokens/dist/css/spectrum/medium-vars.css @@ -69,6 +69,8 @@ --spectrum-colorloupe-checkerboard-fill:url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing:var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small:28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium:32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large:38px; diff --git a/tokens/dist/index.css b/tokens/dist/index.css index bddfb14e6d..e954dd9e50 100644 --- a/tokens/dist/index.css +++ b/tokens/dist/index.css @@ -2963,6 +2963,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.07); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -2995,6 +2997,15 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.25); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.15); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum--darkest { --spectrum-menu-item-background-color-default-rgb: 255, 255, 255; @@ -3015,6 +3026,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-white-rgb), 0.08); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-black); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700); @@ -3047,6 +3060,15 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-800-rgb), 0.3); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-800-rgb), 0.2); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700); + + --spectrum-swatch-border-color-rgb: 255, 255, 255; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 255, 255, 255; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum { --spectrum-neutral-background-color-selected-default: var(--spectrum-gray-700); @@ -3117,6 +3139,13 @@ --spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace; + --spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + --spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif; + + --spectrum-font-family: var(--spectrum-sans-font-family-stack); + --spectrum-font-style: var(--spectrum-default-font-style); + --spectrum-font-size: var(--spectrum-font-size-100); + --spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif; --spectrum-cjk-font: var(--spectrum-code-font-family-stack); --spectrum-docs-static-white-background-color-rgb: 15, 121, 125; @@ -3182,6 +3211,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-secondary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-200); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 34px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 42px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 47px; @@ -3298,6 +3329,8 @@ --spectrum-calendar-day-background-color-key-focus: rgba(var(--spectrum-black-rgb), 0.06); --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800); + --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb); + --spectrum-badge-label-icon-color-primary: var(--spectrum-white); --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800); @@ -3330,6 +3363,15 @@ --spectrum-assetlist-item-background-color-selected-hover: rgba(var(--spectrum-blue-900-rgb), 0.2); --spectrum-assetlist-item-background-color-selected: rgba(var(--spectrum-blue-900-rgb), 0.1); --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-800); + + --spectrum-swatch-border-color-rgb: 0, 0, 0; + + --spectrum-swatch-border-color-opacity: 0.51; + + --spectrum-swatch-border-color: rgba(var(--spectrum-swatch-border-color-rgb), var(--spectrum-swatch-border-color-opacity)); + --spectrum-swatch-border-color-light-rgb: 0, 0, 0; + --spectrum-swatch-border-color-light-opacity: 0.2; + --spectrum-swatch-border-color-light: rgba(var(--spectrum-swatch-border-color-light-rgb), var(--spectrum-swatch-border-color-light-opacity)); } .spectrum--medium { --spectrum-checkbox-control-size-small: 12px; @@ -3389,6 +3431,8 @@ --spectrum-colorloupe-checkerboard-fill: url(#checkerboard-primary); + --spectrum-contextual-help-content-spacing: var(--spectrum-spacing-100); + --spectrum-menu-item-selectable-edge-to-text-not-selected-small: 28px; --spectrum-menu-item-selectable-edge-to-text-not-selected-medium: 32px; --spectrum-menu-item-selectable-edge-to-text-not-selected-large: 38px;