feat(card,contextualhelp,swatch,tokens): add theme tokens for compone…

…nts to global scope (#3253)

Co-authored-by: rise-erpelding <54716846+rise-erpelding@users.noreply.github.com>

.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`

.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.

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 */

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",

components/contextualhelp/index.css

@@ -14,21 +14,13 @@
 .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 */
  --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);
- }
-}
-
-.spectrum-ContextualHelp {
  position: relative;
  min-inline-size: var(--mod-spectrum-contextual-help-minimum-width, var(--spectrum-contextual-help-minimum-width));
 }

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"
  ],

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,27 +28,13 @@
  --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);
  --spectrum-swatch-disabled-icon-color: var(--spectrum-white);
  --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 {

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",

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%);
 }

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%);
 }

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;

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%);
 }

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;

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);
 }

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;

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;

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));
 }

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));
 }

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));
 }

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));
 }