@solexllc/usx-theme 0.1.0

package/README.md

@@ -0,0 +1,92 @@
+Design tokens package for USX.
+
+This package stores platform-agnostic tokens in JSON source files and compiles them for CSS and JavaScript consumers.
+
+## Structure
+
+- `src/color.json`: color tokens (`primary`, `secondary`, `background`, `surface`, `text`)
+- `src/spacing.json`: spacing scale tokens (`xs`, `sm`, `md`, `lg`, `xl`)
+- `src/typography.json`: typography tokens
+- `src/radius.json`: border radius tokens
+- `src/_variables.scss`: Sass design tokens (the theme layer consumed by `@solexllc/usx`)
+- `src/theme-manifest.js`: canonical manifest of themeable tokens (names, CSS variables, defaults, derivation)
+- `dist/tokens.css`: generated CSS variables
+- `dist/tokens.js`: generated JS export
+- `dist/theme-manifest.json`: generated theme manifest
+
+## Build
+
+```sh
+pnpm build   # node build.js → dist/
+pnpm dev     # node build.js --watch (used by the root `pnpm dev`)
+```
+
+`src/system-colors.generated.js` (the USWDS system-color palette used by the
+Theme Playground) is generated from `@uswds/uswds`'s own token JSON and is
+committed. Regenerate it only after bumping `@uswds/uswds`:
+
+```sh
+pnpm generate:system-colors
+```
+
+## Theming
+
+Every themeable Sass token in `src/_variables.scss` is a **triple**:
+
+```scss
+$color-primary-static: #2563eb !default;                 // plain value — the only thing Sass math may consume
+$usx-color-primary-var: --usx-color-primary !default;    // CSS custom property hook (null to opt out)
+$usx-color-primary: usx-var($usx-color-primary-var, $color-primary-static) !default;  // published token
+```
+
+The published token (what component SCSS consumes by name) resolves to
+`var(--usx-color-primary, #2563eb)` by default, so consumers have three ways
+to use USX — **all variables are optional**:
+
+1. **Do nothing.** Defaults are baked in as `var()` fallbacks; the output looks
+   identical to a fully static build.
+2. **Compile-time overrides** — classic Sass configuration:
+
+   ```scss
+   @use 'pkg:@solexllc/usx-theme/variables' with ($color-primary-static: #b00020);
+   ```
+
+3. **Runtime theming** — set CSS custom properties anywhere in the cascade
+   (`:root` or a wrapper element), no recompile needed:
+
+   ```css
+   :root {
+     --usx-color-primary: #b00020;
+     --usx-color-primary-hover: #e60524;
+   }
+   ```
+
+### Opting out of CSS variables
+
+Set the master switch to compile every published token to its static value —
+the output contains zero `var()` references:
+
+```scss
+@use 'pkg:@solexllc/usx-theme/variables' with ($usx-css-vars: false);
+```
+
+Individual tokens can also opt out by nulling their hook
+(e.g. `$usx-color-primary-var: null`).
+
+### Notes
+
+- **Derived shades are first-class tokens.** Overriding `--usx-color-primary`
+  does NOT recompute `--usx-color-primary-darker` etc. — set each shade you
+  care about (the Theme playground's export includes them automatically).
+- **Compile-time only:** breakpoints, media queries, and the `units()`
+  function cannot be themed at runtime (CSS cannot use `var()` in media
+  queries).
+- CSS variables are never written directly in component SCSS; the indirection
+  lives entirely in this package.
+
+### Theme playground
+
+The Storybook page **Documentation → Theme → Playground** renders the component showcase with
+live controls for every manifest token, auto-derives shades when a base color
+changes, and exports a ready-to-use `:root { --usx-*: ... }` block
+(copy/download).

package/build.js

@@ -0,0 +1,132 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const srcDir = path.join(__dirname, 'src');
+const primitivesDir = path.join(srcDir, 'primitives');
+const distDir = path.join(__dirname, 'dist');
+const manifestPath = path.join(srcDir, 'theme-manifest.js');
+
+// Re-imports theme-manifest.js with a cache-busting query so `--watch` picks
+// up edits (ESM's module cache would otherwise serve the first-loaded copy
+// forever within this long-lived process).
+async function loadThemeManifest() {
+  const url = `${pathToFileURL(manifestPath).href}?update=${Date.now()}`;
+  const mod = await import(url);
+  return mod.themeManifest;
+}
+
+const tokenFiles = [
+  { key: 'color', file: 'color.json' },
+  { key: 'spacing', file: 'spacing.json' },
+  { key: 'typography', file: 'typography.json' },
+  { key: 'radius', file: 'radius.json' }
+];
+
+function loadTokens() {
+  const tokens = {};
+
+  for (const { key, file } of tokenFiles) {
+    const filePath = path.join(primitivesDir, file);
+    const content = fs.readFileSync(filePath, 'utf8');
+    tokens[key] = JSON.parse(content);
+  }
+
+  return tokens;
+}
+
+function buildCss(tokens) {
+  const lines = [];
+
+  for (const [group, groupTokens] of Object.entries(tokens)) {
+    for (const [name, value] of Object.entries(groupTokens)) {
+      lines.push(`  --${group}-${name}: ${value};`);
+    }
+  }
+
+  return `:root {\n${lines.join('\n')}\n}\n`;
+}
+
+// theme.css — defines every --usx-* custom property at its default value.
+// Compiled component CSS emits bare var(--usx-*) references (no fallbacks),
+// so every manifest entry must be defined here. radius-advanced defaults are
+// themselves var(--usx-radius-<group>) references, preserving the
+// per-component → group fall-through.
+function buildThemeCss(themeManifest) {
+  const lines = themeManifest
+    .map((t) => `  ${t.cssVar}: ${t.defaultValue};`);
+
+  return `/* GENERATED by build.js from theme-manifest.js — do not edit. */\n:root {\n${lines.join('\n')}\n}\n`;
+}
+
+// _hooks.scss — loads the variables module with every CSS variable hook
+// enabled. Load this before any component styles to opt in to runtime
+// theming. Hook Sass names derive from cssVar: --usx-x → $usx-x-var.
+function buildHooksScss(themeManifest) {
+  const lines = themeManifest.map(
+    (t) => `  $${t.cssVar.slice(2)}-var: ${t.cssVar},`
+  );
+
+  return `// GENERATED by build.js from theme-manifest.js \u2014 do not edit.\n// Enables every runtime theming hook. Load before component styles:\n//   @use 'pkg:@solexllc/usx-theme/hooks';\n@forward 'pkg:@solexllc/usx-theme/variables' with (\n${lines.join('\n')}\n);\n`;
+}
+
+function buildJs(tokens) {
+  return `module.exports = ${JSON.stringify(tokens, null, 2)};\n`;
+}
+
+async function build() {
+  const themeManifest = await loadThemeManifest();
+  const tokens = loadTokens();
+
+  fs.mkdirSync(distDir, { recursive: true });
+
+  fs.writeFileSync(path.join(distDir, 'tokens.css'), buildCss(tokens), 'utf8');
+  fs.writeFileSync(path.join(distDir, 'theme.css'), buildThemeCss(themeManifest), 'utf8');
+  fs.writeFileSync(path.join(distDir, '_hooks.scss'), buildHooksScss(themeManifest), 'utf8');
+  fs.writeFileSync(path.join(distDir, 'tokens.js'), buildJs(tokens), 'utf8');
+  fs.writeFileSync(
+    path.join(distDir, 'theme-manifest.json'),
+    JSON.stringify(themeManifest, null, 2) + '\n',
+    'utf8'
+  );
+
+  console.log(`[${new Date().toLocaleTimeString()}] Built tokens to dist/ (tokens.css, theme.css, _hooks.scss, tokens.js, theme-manifest.json)`);
+}
+
+// `node build.js --watch` rebuilds on every change under src/ (primitives
+// JSON, theme-manifest.js, etc.) instead of exiting after one build — handy
+// alongside `storybook dev` so token edits show up without a manual rebuild.
+async function watch() {
+  await build().catch((err) => console.error(err));
+
+  let pending = false;
+  const rebuild = () => {
+    if (pending) return;
+    pending = true;
+    // Debounce: editors often emit several fs events per save.
+    setTimeout(async () => {
+      pending = false;
+      try {
+        await build();
+      } catch (err) {
+        console.error(err);
+      }
+    }, 100);
+  };
+
+  fs.watch(srcDir, { recursive: true }, (_event, filename) => {
+    if (filename) rebuild();
+  });
+
+  console.log(`Watching ${srcDir} for changes...`);
+}
+
+if (process.argv.includes('--watch')) {
+  watch();
+} else {
+  build().catch((err) => {
+    console.error(err);
+    process.exitCode = 1;
+  });
+}

package/dist/_hooks.scss

@@ -0,0 +1,277 @@
+// GENERATED by build.js from theme-manifest.js — do not edit.
+// Enables every runtime theming hook. Load before component styles:
+//   @use 'pkg:@solexllc/usx-theme/hooks';
+@forward 'pkg:@solexllc/usx-theme/variables' with (
+  $usx-color-primary-var: --usx-color-primary,
+  $usx-color-primary-lighter-var: --usx-color-primary-lighter,
+  $usx-color-primary-light-var: --usx-color-primary-light,
+  $usx-color-primary-vivid-var: --usx-color-primary-vivid,
+  $usx-color-primary-dark-var: --usx-color-primary-dark,
+  $usx-color-primary-darker-var: --usx-color-primary-darker,
+  $usx-color-primary-hover-var: --usx-color-primary-hover,
+  $usx-color-primary-active-var: --usx-color-primary-active,
+  $usx-color-secondary-var: --usx-color-secondary,
+  $usx-color-secondary-lighter-var: --usx-color-secondary-lighter,
+  $usx-color-secondary-light-var: --usx-color-secondary-light,
+  $usx-color-secondary-vivid-var: --usx-color-secondary-vivid,
+  $usx-color-secondary-dark-var: --usx-color-secondary-dark,
+  $usx-color-secondary-darker-var: --usx-color-secondary-darker,
+  $usx-color-secondary-hover-var: --usx-color-secondary-hover,
+  $usx-color-secondary-active-var: --usx-color-secondary-active,
+  $usx-color-accent-cool-var: --usx-color-accent-cool,
+  $usx-color-accent-cool-lighter-var: --usx-color-accent-cool-lighter,
+  $usx-color-accent-cool-light-var: --usx-color-accent-cool-light,
+  $usx-color-accent-cool-dark-var: --usx-color-accent-cool-dark,
+  $usx-color-accent-cool-darker-var: --usx-color-accent-cool-darker,
+  $usx-color-accent-cool-hover-var: --usx-color-accent-cool-hover,
+  $usx-color-accent-cool-active-var: --usx-color-accent-cool-active,
+  $usx-color-accent-warm-var: --usx-color-accent-warm,
+  $usx-color-accent-warm-lighter-var: --usx-color-accent-warm-lighter,
+  $usx-color-accent-warm-light-var: --usx-color-accent-warm-light,
+  $usx-color-accent-warm-dark-var: --usx-color-accent-warm-dark,
+  $usx-color-accent-warm-darker-var: --usx-color-accent-warm-darker,
+  $usx-color-accent-warm-hover-var: --usx-color-accent-warm-hover,
+  $usx-color-accent-warm-active-var: --usx-color-accent-warm-active,
+  $usx-color-base-var: --usx-color-base,
+  $usx-color-base-lightest-var: --usx-color-base-lightest,
+  $usx-color-base-lighter-var: --usx-color-base-lighter,
+  $usx-color-base-light-var: --usx-color-base-light,
+  $usx-color-base-dark-var: --usx-color-base-dark,
+  $usx-color-base-darker-var: --usx-color-base-darker,
+  $usx-color-base-darkest-var: --usx-color-base-darkest,
+  $usx-color-base-ink-var: --usx-color-base-ink,
+  $usx-color-base-hover-var: --usx-color-base-hover,
+  $usx-color-base-active-var: --usx-color-base-active,
+  $usx-color-info-var: --usx-color-info,
+  $usx-color-info-lighter-var: --usx-color-info-lighter,
+  $usx-color-info-light-var: --usx-color-info-light,
+  $usx-color-info-dark-var: --usx-color-info-dark,
+  $usx-color-info-darker-var: --usx-color-info-darker,
+  $usx-color-warning-var: --usx-color-warning,
+  $usx-color-warning-lighter-var: --usx-color-warning-lighter,
+  $usx-color-warning-light-var: --usx-color-warning-light,
+  $usx-color-warning-dark-var: --usx-color-warning-dark,
+  $usx-color-warning-darker-var: --usx-color-warning-darker,
+  $usx-color-success-var: --usx-color-success,
+  $usx-color-success-lighter-var: --usx-color-success-lighter,
+  $usx-color-success-light-var: --usx-color-success-light,
+  $usx-color-success-dark-var: --usx-color-success-dark,
+  $usx-color-success-darker-var: --usx-color-success-darker,
+  $usx-color-error-var: --usx-color-error,
+  $usx-color-error-lighter-var: --usx-color-error-lighter,
+  $usx-color-error-light-var: --usx-color-error-light,
+  $usx-color-error-dark-var: --usx-color-error-dark,
+  $usx-color-error-darker-var: --usx-color-error-darker,
+  $usx-color-emergency-var: --usx-color-emergency,
+  $usx-color-emergency-dark-var: --usx-color-emergency-dark,
+  $usx-color-disabled-var: --usx-color-disabled,
+  $usx-color-disabled-lighter-var: --usx-color-disabled-lighter,
+  $usx-color-disabled-light-var: --usx-color-disabled-light,
+  $usx-color-disabled-dark-var: --usx-color-disabled-dark,
+  $usx-color-disabled-darker-var: --usx-color-disabled-darker,
+  $usx-color-focus-var: --usx-color-focus,
+  $usx-color-visited-var: --usx-color-visited,
+  $usx-surface-1-var: --usx-surface-1,
+  $usx-surface-2-var: --usx-surface-2,
+  $usx-surface-3-var: --usx-surface-3,
+  $usx-color-border-var: --usx-color-border,
+  $usx-color-beta-var: --usx-color-beta,
+  $usx-color-test-var: --usx-color-test,
+  $usx-color-dev-var: --usx-color-dev,
+  $usx-text-ink-var: --usx-text-ink,
+  $usx-text-muted-var: --usx-text-muted,
+  $usx-text-subtle-var: --usx-text-subtle,
+  $usx-text-inverse-var: --usx-text-inverse,
+  $usx-spacing-xs-var: --usx-spacing-xs,
+  $usx-spacing-sm-var: --usx-spacing-sm,
+  $usx-spacing-md-var: --usx-spacing-md,
+  $usx-spacing-lg-var: --usx-spacing-lg,
+  $usx-spacing-xl-var: --usx-spacing-xl,
+  $usx-radius-sm-var: --usx-radius-sm,
+  $usx-radius-md-var: --usx-radius-md,
+  $usx-radius-lg-var: --usx-radius-lg,
+  $usx-radius-xl-var: --usx-radius-xl,
+  $usx-radius-full-var: --usx-radius-full,
+  $usx-radius-box-var: --usx-radius-box,
+  $usx-radius-field-var: --usx-radius-field,
+  $usx-radius-button-var: --usx-radius-button,
+  $usx-radius-selector-var: --usx-radius-selector,
+  $usx-radius-none-var: --usx-radius-none,
+  $usx-accordion-radius-var: --usx-accordion-radius,
+  $usx-alert-radius-var: --usx-alert-radius,
+  $usx-input-radius-var: --usx-input-radius,
+  $usx-textarea-radius-var: --usx-textarea-radius,
+  $usx-code-radius-var: --usx-code-radius,
+  $usx-summary-box-radius-var: --usx-summary-box-radius,
+  $usx-hero-callout-radius-var: --usx-hero-callout-radius,
+  $usx-image-radius-var: --usx-image-radius,
+  $usx-tag-radius-var: --usx-tag-radius,
+  $usx-checkable-radius-var: --usx-checkable-radius,
+  $usx-checkable-tile-radius-var: --usx-checkable-tile-radius,
+  $usx-misc-banner-badge-radius-var: --usx-misc-banner-badge-radius,
+  $usx-border-width-sm-var: --usx-border-width-sm,
+  $usx-border-width-md-var: --usx-border-width-md,
+  $usx-border-width-lg-var: --usx-border-width-lg,
+  $usx-border-width-xl-var: --usx-border-width-xl,
+  $usx-border-width-inputs-var: --usx-border-width-inputs,
+  $usx-task-list-inner-border-width-var: --usx-task-list-inner-border-width,
+  $usx-task-list-outer-border-width-var: --usx-task-list-outer-border-width,
+  $usx-step-indicator-segment-bar-width-var: --usx-step-indicator-segment-bar-width,
+  $usx-accordion-border-width-var: --usx-accordion-border-width,
+  $usx-button-outline-border-width-var: --usx-button-outline-border-width,
+  $usx-switch-border-width-var: --usx-switch-border-width,
+  $usx-file-input-border-width-var: --usx-file-input-border-width,
+  $usx-file-input-item-border-width-var: --usx-file-input-item-border-width,
+  $usx-range-slider-border-width-var: --usx-range-slider-border-width,
+  $usx-font-family-var: --usx-font-family,
+  $usx-font-family-heading-var: --usx-font-family-heading,
+  $usx-font-size-base-var: --usx-font-size-base,
+  $usx-font-size-h1-var: --usx-font-size-h1,
+  $usx-font-size-h2-var: --usx-font-size-h2,
+  $usx-font-size-h3-var: --usx-font-size-h3,
+  $usx-font-size-h4-var: --usx-font-size-h4,
+  $usx-font-size-h5-var: --usx-font-size-h5,
+  $usx-font-size-h6-var: --usx-font-size-h6,
+  $usx-font-weight-regular-var: --usx-font-weight-regular,
+  $usx-font-weight-bold-var: --usx-font-weight-bold,
+  $usx-line-height-base-var: --usx-line-height-base,
+  $usx-line-height-heading-var: --usx-line-height-heading,
+  $usx-attribution-primary-font-weight-var: --usx-attribution-primary-font-weight,
+  $usx-attribution-secondary-font-size-var: --usx-attribution-secondary-font-size,
+  $usx-avatar-content-font-weight-var: --usx-avatar-content-font-weight,
+  $usx-avatar-font-size-sm-var: --usx-avatar-font-size-sm,
+  $usx-avatar-font-size-lg-var: --usx-avatar-font-size-lg,
+  $usx-avatar-font-size-xl-var: --usx-avatar-font-size-xl,
+  $usx-calendar-date-font-size-var: --usx-calendar-date-font-size,
+  $usx-code-font-size-var: --usx-code-font-size,
+  $usx-misc-banner-font-size-var: --usx-misc-banner-font-size,
+  $usx-modal-heading-font-size-var: --usx-modal-heading-font-size,
+  $usx-tag-line-height-var: --usx-tag-line-height,
+  $usx-task-list-link-font-size-var: --usx-task-list-link-font-size,
+  $usx-link-text-var: --usx-link-text,
+  $usx-link-text-visited-var: --usx-link-text-visited,
+  $usx-link-text-dark-var: --usx-link-text-dark,
+  $usx-link-text-visited-dark-var: --usx-link-text-visited-dark,
+  $usx-summary-box-link-text-visited-var: --usx-summary-box-link-text-visited,
+  $usx-summary-box-bg-var: --usx-summary-box-bg,
+  $usx-summary-box-border-color-var: --usx-summary-box-border-color,
+  $usx-summary-box-text-var: --usx-summary-box-text,
+  $usx-summary-box-link-text-var: --usx-summary-box-link-text,
+  $usx-summary-box-link-text-hover-var: --usx-summary-box-link-text-hover,
+  $usx-accordion-bg-var: --usx-accordion-bg,
+  $usx-accordion-bg-hover-var: --usx-accordion-bg-hover,
+  $usx-accordion-content-bg-var: --usx-accordion-content-bg,
+  $usx-accordion-text-var: --usx-accordion-text,
+  $usx-accordion-content-text-var: --usx-accordion-content-text,
+  $usx-accordion-icon-position-var: --usx-accordion-icon-position,
+  $usx-accordion-icon-padding-start-var: --usx-accordion-icon-padding-start,
+  $usx-accordion-icon-padding-end-var: --usx-accordion-icon-padding-end,
+  $usx-logo-display-var: --usx-logo-display,
+  $usx-logo-inverse-display-var: --usx-logo-inverse-display,
+  $usx-banner-bg-var: --usx-banner-bg,
+  $usx-banner-text-var: --usx-banner-text,
+  $usx-banner-button-text-var: --usx-banner-button-text,
+  $usx-banner-chevron-text-var: --usx-banner-chevron-text,
+  $usx-carousel-dot-bg-var: --usx-carousel-dot-bg,
+  $usx-carousel-dot-bg-hover-var: --usx-carousel-dot-bg-hover,
+  $usx-carousel-dot-bg-active-var: --usx-carousel-dot-bg-active,
+  $usx-carousel-focus-var: --usx-carousel-focus,
+  $usx-step-indicator-bg-var: --usx-step-indicator-bg,
+  $usx-step-indicator-segment-pending-border-var: --usx-step-indicator-segment-pending-border,
+  $usx-task-list-link-text-var: --usx-task-list-link-text,
+  $usx-clickable-focus-var: --usx-clickable-focus,
+  $usx-clickable-text-hover-var: --usx-clickable-text-hover,
+  $usx-misc-banner-focus-var: --usx-misc-banner-focus,
+  $usx-checkable-tile-border-var: --usx-checkable-tile-border,
+  $usx-task-list-border-var: --usx-task-list-border,
+  $usx-file-input-border-var: --usx-file-input-border,
+  $usx-file-input-item-border-var: --usx-file-input-item-border,
+  $usx-file-input-preview-bg-var: --usx-file-input-preview-bg,
+  $usx-file-input-preview-text-var: --usx-file-input-preview-text,
+  $usx-task-list-bg-hover-var: --usx-task-list-bg-hover,
+  $usx-checkable-bg-var: --usx-checkable-bg,
+  $usx-checkable-border-var: --usx-checkable-border,
+  $usx-sidenav-bg-hover-var: --usx-sidenav-bg-hover,
+  $usx-sidenav-border-var: --usx-sidenav-border,
+  $usx-header-border-var: --usx-header-border,
+  $usx-header-bg-var: --usx-header-bg,
+  $usx-header-text-var: --usx-header-text,
+  $usx-header-nav-bg-var: --usx-header-nav-bg,
+  $usx-header-nav-bg-mobile-var: --usx-header-nav-bg-mobile,
+  $usx-header-nav-link-text-var: --usx-header-nav-link-text,
+  $usx-header-nav-link-text-mobile-var: --usx-header-nav-link-text-mobile,
+  $usx-header-nav-link-text-hover-var: --usx-header-nav-link-text-hover,
+  $usx-header-nav-link-text-hover-mobile-var: --usx-header-nav-link-text-hover-mobile,
+  $usx-header-secondary-link-text-var: --usx-header-secondary-link-text,
+  $usx-header-secondary-link-text-hover-var: --usx-header-secondary-link-text-hover,
+  $usx-header-nav-link-bg-hover-var: --usx-header-nav-link-bg-hover,
+  $usx-header-nav-top-border-var: --usx-header-nav-top-border,
+  $usx-header-nav-bottom-border-var: --usx-header-nav-bottom-border,
+  $usx-footer-border-var: --usx-footer-border,
+  $usx-footer-primary-section-border-var: --usx-footer-primary-section-border,
+  $usx-footer-secondary-section-border-var: --usx-footer-secondary-section-border,
+  $usx-footer-text-var: --usx-footer-text,
+  $usx-footer-link-text-var: --usx-footer-link-text,
+  $usx-footer-link-text-hover-var: --usx-footer-link-text-hover,
+  $usx-footer-secondary-link-text-var: --usx-footer-secondary-link-text,
+  $usx-footer-secondary-link-text-hover-var: --usx-footer-secondary-link-text-hover,
+  $usx-footer-heading-text-var: --usx-footer-heading-text,
+  $usx-footer-heading-secondary-text-var: --usx-footer-heading-secondary-text,
+  $usx-page-bg-var: --usx-page-bg,
+  $usx-page-text-var: --usx-page-text,
+  $usx-section-bg-var: --usx-section-bg,
+  $usx-section-text-var: --usx-section-text,
+  $usx-table-bg-hover-var: --usx-table-bg-hover,
+  $usx-table-selected-bg-var: --usx-table-selected-bg,
+  $usx-table-bg-var: --usx-table-bg,
+  $usx-table-header-bg-var: --usx-table-header-bg,
+  $usx-table-stripe-bg-var: --usx-table-stripe-bg,
+  $usx-table-border-var: --usx-table-border,
+  $usx-table-placeholder-text-var: --usx-table-placeholder-text,
+  $usx-table-sorted-column-bg-var: --usx-table-sorted-column-bg,
+  $usx-table-grouped-row-bg-var: --usx-table-grouped-row-bg,
+  $usx-table-grouped-row-text-var: --usx-table-grouped-row-text,
+  $usx-tooltip-bg-var: --usx-tooltip-bg,
+  $usx-tooltip-text-var: --usx-tooltip-text,
+  $usx-icon-list-icon-text-var: --usx-icon-list-icon-text,
+  $usx-date-picker-button-icon-color-var: --usx-date-picker-button-icon-color,
+  $usx-date-picker-button-hover-active-bg-var: --usx-date-picker-button-hover-active-bg,
+  $usx-combo-box-selected-bg-var: --usx-combo-box-selected-bg,
+  $usx-range-slider-track-bg-var: --usx-range-slider-track-bg,
+  $usx-range-slider-track-border-var: --usx-range-slider-track-border,
+  $usx-range-slider-thumb-bg-var: --usx-range-slider-thumb-bg,
+  $usx-range-slider-thumb-border-var: --usx-range-slider-thumb-border,
+  $usx-range-slider-focus-var: --usx-range-slider-focus,
+  $usx-in-page-nav-bg-var: --usx-in-page-nav-bg,
+  $usx-in-page-nav-text-var: --usx-in-page-nav-text,
+  $usx-in-page-nav-border-var: --usx-in-page-nav-border,
+  $usx-in-page-nav-link-text-var: --usx-in-page-nav-link-text,
+  $usx-in-page-nav-link-text-hover-var: --usx-in-page-nav-link-text-hover,
+  $usx-in-page-nav-current-text-var: --usx-in-page-nav-current-text,
+  $usx-in-page-nav-bar-var: --usx-in-page-nav-bar,
+  $usx-breadcrumb-bg-var: --usx-breadcrumb-bg,
+  $usx-breadcrumb-text-var: --usx-breadcrumb-text,
+  $usx-breadcrumb-link-text-var: --usx-breadcrumb-link-text,
+  $usx-breadcrumb-link-text-hover-var: --usx-breadcrumb-link-text-hover,
+  $usx-breadcrumb-current-text-var: --usx-breadcrumb-current-text,
+  $usx-process-list-heading-text-var: --usx-process-list-heading-text,
+  $usx-process-list-border-var: --usx-process-list-border,
+  $usx-process-list-counter-text-var: --usx-process-list-counter-text,
+  $usx-process-list-counter-border-var: --usx-process-list-counter-border,
+  $usx-process-list-counter-ring-var: --usx-process-list-counter-ring,
+  $usx-collection-meta-text-var: --usx-collection-meta-text,
+  $usx-collection-description-text-var: --usx-collection-description-text,
+  $usx-pagination-link-text-var: --usx-pagination-link-text,
+  $usx-pagination-link-text-hover-var: --usx-pagination-link-text-hover,
+  $usx-pagination-current-bg-var: --usx-pagination-current-bg,
+  $usx-pagination-current-text-var: --usx-pagination-current-text,
+  $usx-pagination-bg-var: --usx-pagination-bg,
+  $usx-pagination-text-var: --usx-pagination-text,
+  $usx-pagination-button-border-var: --usx-pagination-button-border,
+  $usx-modal-bg-var: --usx-modal-bg,
+  $usx-modal-text-var: --usx-modal-text,
+  $usx-modal-close-text-var: --usx-modal-close-text,
+  $usx-modal-close-text-hover-var: --usx-modal-close-text-hover,
+  $usx-language-selector-menu-bg-var: --usx-language-selector-menu-bg,
+  $usx-language-selector-menu-text-var: --usx-language-selector-menu-text,
+);