@solexllc/usx-theme 0.2.2 → 0.3.0

package/dist/_hooks.scss

@@ -103,6 +103,7 @@
   $usx-textarea-radius-var: --usx-textarea-radius,
   $usx-code-radius-var: --usx-code-radius,
   $usx-summary-box-radius-var: --usx-summary-box-radius,
+  $usx-card-radius-var: --usx-card-radius,
   $usx-hero-callout-radius-var: --usx-hero-callout-radius,
   $usx-image-radius-var: --usx-image-radius,
   $usx-tag-radius-var: --usx-tag-radius,
@@ -118,6 +119,7 @@
   $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-card-border-width-var: --usx-card-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,
@@ -149,6 +151,11 @@
   $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-card-bg-var: --usx-card-bg,
+  $usx-card-text-var: --usx-card-text,
+  $usx-card-heading-text-var: --usx-card-heading-text,
+  $usx-card-media-bg-var: --usx-card-media-bg,
+  $usx-card-border-color-var: --usx-card-border-color,
   $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,

package/dist/_themes-registry.scss

@@ -637,8 +637,8 @@ $themes: (
     --usx-radius-box: 0,
     --usx-radius-button: 4px,
     --usx-checkable-tile-radius: 0,
-    --usx-font-family: ("Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif),
     --usx-link-text: #d83933,
+    --usx-card-text: var(--usx-text-inverse),
     --usx-summary-box-bg: var(--usx-surface-3),
     --usx-summary-box-border-color: var(--usx-color-primary),
     --usx-summary-box-text: var(--usx-text-inverse),
@@ -774,6 +774,7 @@ $defaults: (
   --usx-textarea-radius: var(--usx-radius-field),
   --usx-code-radius: var(--usx-radius-box),
   --usx-summary-box-radius: var(--usx-radius-box),
+  --usx-card-radius: var(--usx-radius-box),
   --usx-hero-callout-radius: var(--usx-radius-box),
   --usx-image-radius: var(--usx-radius-box),
   --usx-tag-radius: var(--usx-radius-selector),
@@ -789,13 +790,14 @@ $defaults: (
   --usx-task-list-outer-border-width: var(--usx-border-width-md),
   --usx-step-indicator-segment-bar-width: var(--usx-border-width-xl),
   --usx-accordion-border-width: var(--usx-border-width-lg),
+  --usx-card-border-width: var(--usx-border-width-md),
   --usx-button-outline-border-width: var(--usx-border-width-md),
   --usx-switch-border-width: 2px,
   --usx-file-input-border-width: var(--usx-border-width-inputs),
   --usx-file-input-item-border-width: var(--usx-border-width-sm),
   --usx-range-slider-border-width: var(--usx-border-width-md),
   --usx-font-family: (Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif),
-  --usx-font-family-heading: var(--usx-font-family),
+  --usx-font-family-heading: (Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif),
   --usx-font-size-base: 1rem,
   --usx-font-size-h1: 2.5rem,
   --usx-font-size-h2: 2rem,
@@ -820,6 +822,11 @@ $defaults: (
   --usx-tag-line-height: 1.6,
   --usx-task-list-link-font-size: 1.31rem,
   --usx-link-text: #005ea2,
+  --usx-card-bg: var(--usx-surface-3),
+  --usx-card-text: var(--usx-text-ink),
+  --usx-card-heading-text: var(--usx-card-text),
+  --usx-card-media-bg: var(--usx-surface-3),
+  --usx-card-border-color: var(--usx-color-border),
   --usx-link-text-visited: var(--usx-color-visited),
   --usx-link-text-dark: #e6e6e6,
   --usx-link-text-visited-dark: #e6e6e6,

package/dist/theme-manifest.json

@@ -1030,6 +1030,13 @@
     "group": "radius-advanced",
     "type": "length"
   },
+  {
+    "name": "usx-card-radius",
+    "cssVar": "--usx-card-radius",
+    "defaultValue": "var(--usx-radius-box)",
+    "group": "radius-advanced",
+    "type": "length"
+  },
   {
     "name": "usx-hero-callout-radius",
     "cssVar": "--usx-hero-callout-radius",
@@ -1135,6 +1142,13 @@
     "group": "border-advanced",
     "type": "length"
   },
+  {
+    "name": "usx-card-border-width",
+    "cssVar": "--usx-card-border-width",
+    "defaultValue": "var(--usx-border-width-md)",
+    "group": "border-advanced",
+    "type": "length"
+  },
   {
     "name": "usx-button-outline-border-width",
     "cssVar": "--usx-button-outline-border-width",
@@ -1180,7 +1194,7 @@
   {
     "name": "font-family-heading",
     "cssVar": "--usx-font-family-heading",
-    "defaultValue": "var(--usx-font-family)",
+    "defaultValue": "Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif",
     "group": "typography",
     "type": "font-family"
   },
@@ -1353,6 +1367,41 @@
     "type": "color",
     "derivedFrom": "color-primary"
   },
+  {
+    "name": "usx-card-bg",
+    "cssVar": "--usx-card-bg",
+    "defaultValue": "var(--usx-surface-3)",
+    "group": "component",
+    "type": "color"
+  },
+  {
+    "name": "usx-card-text",
+    "cssVar": "--usx-card-text",
+    "defaultValue": "var(--usx-text-ink)",
+    "group": "component",
+    "type": "color"
+  },
+  {
+    "name": "usx-card-heading-text",
+    "cssVar": "--usx-card-heading-text",
+    "defaultValue": "var(--usx-card-text)",
+    "group": "component",
+    "type": "color"
+  },
+  {
+    "name": "usx-card-media-bg",
+    "cssVar": "--usx-card-media-bg",
+    "defaultValue": "var(--usx-surface-3)",
+    "group": "component",
+    "type": "color"
+  },
+  {
+    "name": "usx-card-border-color",
+    "cssVar": "--usx-card-border-color",
+    "defaultValue": "var(--usx-color-border)",
+    "group": "component",
+    "type": "color"
+  },
   {
     "name": "usx-link-text-visited",
     "cssVar": "--usx-link-text-visited",

package/dist/theme.css

@@ -101,6 +101,7 @@
   --usx-textarea-radius: var(--usx-radius-field);
   --usx-code-radius: var(--usx-radius-box);
   --usx-summary-box-radius: var(--usx-radius-box);
+  --usx-card-radius: var(--usx-radius-box);
   --usx-hero-callout-radius: var(--usx-radius-box);
   --usx-image-radius: var(--usx-radius-box);
   --usx-tag-radius: var(--usx-radius-selector);
@@ -116,13 +117,14 @@
   --usx-task-list-outer-border-width: var(--usx-border-width-md);
   --usx-step-indicator-segment-bar-width: var(--usx-border-width-xl);
   --usx-accordion-border-width: var(--usx-border-width-lg);
+  --usx-card-border-width: var(--usx-border-width-md);
   --usx-button-outline-border-width: var(--usx-border-width-md);
   --usx-switch-border-width: 2px;
   --usx-file-input-border-width: var(--usx-border-width-inputs);
   --usx-file-input-item-border-width: var(--usx-border-width-sm);
   --usx-range-slider-border-width: var(--usx-border-width-md);
   --usx-font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
-  --usx-font-family-heading: var(--usx-font-family);
+  --usx-font-family-heading: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
   --usx-font-size-base: 1rem;
   --usx-font-size-h1: 2.5rem;
   --usx-font-size-h2: 2rem;
@@ -147,6 +149,11 @@
   --usx-tag-line-height: 1.6;
   --usx-task-list-link-font-size: 1.31rem;
   --usx-link-text: #005ea2;
+  --usx-card-bg: var(--usx-surface-3);
+  --usx-card-text: var(--usx-text-ink);
+  --usx-card-heading-text: var(--usx-card-text);
+  --usx-card-media-bg: var(--usx-surface-3);
+  --usx-card-border-color: var(--usx-color-border);
   --usx-link-text-visited: var(--usx-color-visited);
   --usx-link-text-dark: #e6e6e6;
   --usx-link-text-visited-dark: #e6e6e6;

package/dist/themes/all.css

@@ -641,8 +641,8 @@
   --usx-radius-box: 0;
   --usx-radius-button: 4px;
   --usx-checkable-tile-radius: 0;
-  --usx-font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   --usx-link-text: #d83933;
+  --usx-card-text: var(--usx-text-inverse);
   --usx-summary-box-bg: var(--usx-surface-3);
   --usx-summary-box-border-color: var(--usx-color-primary);
   --usx-summary-box-text: var(--usx-text-inverse);

package/dist/themes/nasa.css

@@ -36,8 +36,8 @@
   --usx-radius-box: 0;
   --usx-radius-button: 4px;
   --usx-checkable-tile-radius: 0;
-  --usx-font-family: "Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
   --usx-link-text: #d83933;
+  --usx-card-text: var(--usx-text-inverse);
   --usx-summary-box-bg: var(--usx-surface-3);
   --usx-summary-box-border-color: var(--usx-color-primary);
   --usx-summary-box-text: var(--usx-text-inverse);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solexllc/usx-theme",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Design tokens package for USX.",
   "license": "MIT",
   "repository": {

package/src/_variables.scss

@@ -35,16 +35,18 @@
 
 // Omits null/false values; an optional second argument guards composites
 // so partial values like `1px solid null` never reach the CSS output.
-@function usx-when($condition, $value: $condition) {
+// An optional third argument supplies a fallback for when $condition is
+// falsy, for compile-time constants that always have a usable value.
+@function usx-when($condition, $value: $condition, $fallback: null) {
   @if not $condition {
-    @return null;
+    @return $fallback;
   }
 
   @return $value;
 }
 
 // ── Layout (compile-time only) ───────────────────────────────────────────────
-$max-layout-width: 60rem !default;
+$max-layout-width: 64rem !default;
 $max-sidebar-width: 16rem !default;
 
 // ── Breakpoints (compile-time only) ─────────────────────────────────────────
@@ -358,6 +360,67 @@ $surface-colors: (
   'surface-inverse': $usx-text-ink,
 ) !default;
 
+// ── Radius — primitives (reserved for utility classes) ──────────────────────
+$usx-radius-sm-var: null !default;
+$usx-radius-sm: usx-var($usx-radius-sm-var) !default;
+
+$usx-radius-md-var: null !default;
+$usx-radius-md: usx-var($usx-radius-md-var) !default;
+
+$usx-radius-lg-var: null !default;
+$usx-radius-lg: usx-var($usx-radius-lg-var) !default;
+
+$usx-radius-xl-var: null !default;
+$usx-radius-xl: usx-var($usx-radius-xl-var) !default;
+
+$usx-radius-full-var: null !default;
+$usx-radius-full: usx-var($usx-radius-full-var) !default;
+
+// Semantic radii (DaisyUI-inspired): components pick a radius by group, so all
+// boxes, all fields, all selectors, and all square components are themed
+// independently with one variable each. Per-component "advanced" hooks
+// (--usx-<component>-radius) override the group.
+$usx-radius-box-var: null !default; // boxes: cards, code blocks, summary boxes, hero callouts, images
+$usx-radius-box: usx-var($usx-radius-box-var) !default;
+
+$usx-radius-field-var: null !default; // fields: buttons, inputs, selects, comboboxes, text areas
+$usx-radius-field: usx-var($usx-radius-field-var) !default;
+
+$usx-radius-selector-var: null !default; // selectors: checkboxes, badges/tags, small controls
+$usx-radius-selector: usx-var($usx-radius-selector-var) !default;
+
+$usx-radius-none-var: null !default; // square-by-default components: accordions, alerts
+$usx-radius-none: usx-var($usx-radius-none-var) !default;
+
+$border-radius: (
+  'sm': $usx-radius-sm,
+  'md': $usx-radius-md,
+  'lg': $usx-radius-lg,
+  'xl': $usx-radius-xl,
+  'full': $usx-radius-full,
+  'box': $usx-radius-box,
+  'field': $usx-radius-field,
+  'selector': $usx-radius-selector,
+  'none': $usx-radius-none,
+) !default;
+
+// ── Border width ─────────────────────────────────────────────────────────────
+$usx-border-width-sm-var: null !default;
+$usx-border-width-sm: usx-var($usx-border-width-sm-var) !default;
+$usx-border-width-md-var: null !default;
+$usx-border-width-md: usx-var($usx-border-width-md-var) !default;
+$usx-border-width-lg-var: null !default;
+$usx-border-width-lg: usx-var($usx-border-width-lg-var) !default;
+$usx-border-width-xl-var: null !default;
+$usx-border-width-xl: usx-var($usx-border-width-xl-var) !default;
+
+$border-width: (
+  'sm': $usx-border-width-sm,
+  'md': $usx-border-width-md,
+  'lg': $usx-border-width-lg,
+  'xl': $usx-border-width-xl,
+) !default;
+
 // ── Spacing ─────────────────────────────────────────────────────────────────
 $usx-spacing-xs-var: null !default;
 $usx-spacing-xs: usx-var($usx-spacing-xs-var) !default;
@@ -421,7 +484,8 @@ $usx-font-family: usx-var($usx-font-family-var,
 // everywhere) but are their own hook, so a theme with a distinct display/
 // serif face for headings (e.g. VA.gov's Bitter) can override just this one.
 $usx-font-family-heading-var: null !default;
-$usx-font-family-heading: usx-var($usx-font-family-heading-var, $usx-font-family) !default;
+$usx-font-family-heading: usx-var($usx-font-family-heading-var,
+  'Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif') !default;
 
 $usx-font-size-base-var: null !default;
 $usx-font-size-base: usx-var($usx-font-size-base-var, 1rem) !default;
@@ -493,48 +557,6 @@ $usx-tag-line-height: usx-var($usx-tag-line-height-var, 1.6) !default;
 $usx-task-list-link-font-size-var: null !default;
 $usx-task-list-link-font-size: usx-var($usx-task-list-link-font-size-var, 1.31rem) !default;
 
-// ── Radius — primitives (reserved for utility classes) ──────────────────────
-$usx-radius-sm-var: null !default;
-$usx-radius-sm: usx-var($usx-radius-sm-var) !default;
-
-$usx-radius-md-var: null !default;
-$usx-radius-md: usx-var($usx-radius-md-var) !default;
-
-$usx-radius-lg-var: null !default;
-$usx-radius-lg: usx-var($usx-radius-lg-var) !default;
-
-$usx-radius-xl-var: null !default;
-$usx-radius-xl: usx-var($usx-radius-xl-var) !default;
-
-$usx-radius-full-var: null !default;
-$usx-radius-full: usx-var($usx-radius-full-var) !default;
-
-// Semantic radii (DaisyUI-inspired): components pick a radius by group, so all
-// boxes, all fields, all selectors, and all square components are themed
-// independently with one variable each. Per-component "advanced" hooks
-// (--usx-<component>-radius) override the group.
-$usx-radius-box-var: null !default; // boxes: cards, code blocks, summary boxes, hero callouts, images
-$usx-radius-box: usx-var($usx-radius-box-var) !default;
-
-$usx-radius-field-var: null !default; // fields: buttons, inputs, selects, comboboxes, text areas
-$usx-radius-field: usx-var($usx-radius-field-var) !default;
-
-$usx-radius-selector-var: null !default; // selectors: checkboxes, badges/tags, small controls
-$usx-radius-selector: usx-var($usx-radius-selector-var) !default;
-
-$usx-radius-none-var: null !default; // square-by-default components: accordions, alerts
-$usx-radius-none: usx-var($usx-radius-none-var) !default;
-
-// ── Border ───────────────────────────────────────────────────────────────────
-$usx-border-width-sm-var: null !default;
-$usx-border-width-sm: usx-var($usx-border-width-sm-var) !default;
-$usx-border-width-md-var: null !default;
-$usx-border-width-md: usx-var($usx-border-width-md-var) !default;
-$usx-border-width-lg-var: null !default;
-$usx-border-width-lg: usx-var($usx-border-width-lg-var) !default;
-$usx-border-width-xl-var: null !default;
-$usx-border-width-xl: usx-var($usx-border-width-xl-var) !default;
-
 // ── Component tokens: Button ─────────────────────────────────────────────────
 $usx-radius-button-var: null !default;
 $usx-radius-button: usx-var($usx-radius-button-var, $usx-radius-field) !default;
@@ -688,6 +710,21 @@ $usx-site-alert-maintenance-bg: null !default;
 // so a theme that repoints the info family carries the summary box along
 // with it. Text/link colors match existing primitives too, so they chain
 // to those instead.
+$usx-card-bg-var: null !default;
+$usx-card-bg: usx-var($usx-card-bg-var, $usx-surface-3) !default;
+$usx-card-text-var: null !default;
+$usx-card-text: usx-var($usx-card-text-var, $usx-text-ink) !default;
+$usx-card-heading-text-var: null !default;
+$usx-card-heading-text: usx-var($usx-card-heading-text-var, $usx-card-text) !default;
+$usx-card-media-bg-var: null !default;
+$usx-card-media-bg: usx-var($usx-card-media-bg-var, $usx-surface-3) !default;
+$usx-card-border-color-var: null !default;
+$usx-card-border-color: usx-var($usx-card-border-color-var, $usx-color-border) !default;
+$usx-card-border-width-var: null !default;
+$usx-card-border-width: usx-var($usx-card-border-width-var, $usx-border-width-md) !default;
+$usx-card-radius-var: null !default;
+$usx-card-radius: usx-var($usx-card-radius-var, $usx-radius-box) !default;
+
 $usx-summary-box-border-color-var: null !default;
 $usx-summary-box-border-color: usx-var($usx-summary-box-border-color-var, $usx-color-info-light) !default;
 $usx-summary-box-border: usx-when($usx-summary-box-border-color, $usx-border-width-sm solid $usx-summary-box-border-color) !default;

package/src/presets.js

@@ -307,7 +307,6 @@ export const PRESETS = {
     // hover color against black, so it's left on the default.
     'usx-header-nav-link-text': 'var(--usx-text-inverse)',
     'usx-header-secondary-link-text': 'var(--usx-text-inverse)',
-    'font-family': '"Source Sans Pro Web", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif', // real nasa.gov body font (same USWDS default stack)
     // The real CTA button (e.g. "Live Mission Coverage") measures a 4px
     // corner radius, not our default 0.5rem — verified via computed style
     // on the live site.
@@ -317,6 +316,7 @@ export const PRESETS = {
     'radius-button': '4px',
     // nasa.gov's content cards (hds-content-card) render perfectly square —
     // verified live.
+    'usx-card-text': 'var(--usx-text-inverse)',
     'usx-checkable-tile-radius': '0',
     // nasa.gov's nav literally renders stock USWDS usa-accordion markup, so
     // its button background is stock USWDS base-lightest rather than our

package/src/theme-manifest.js

@@ -248,6 +248,7 @@ export const themeManifest = [
   scale('usx-textarea-radius', '--usx-textarea-radius', 'var(--usx-radius-field)', 'radius-advanced'),
   scale('usx-code-radius', '--usx-code-radius', 'var(--usx-radius-box)', 'radius-advanced'),
   scale('usx-summary-box-radius', '--usx-summary-box-radius', 'var(--usx-radius-box)', 'radius-advanced'),
+  scale('usx-card-radius', '--usx-card-radius', 'var(--usx-radius-box)', 'radius-advanced'),
   scale('usx-hero-callout-radius', '--usx-hero-callout-radius', 'var(--usx-radius-box)', 'radius-advanced'),
   scale('usx-image-radius', '--usx-image-radius', 'var(--usx-radius-box)', 'radius-advanced'),
   scale('usx-tag-radius', '--usx-tag-radius', 'var(--usx-radius-selector)', 'radius-advanced'),
@@ -267,6 +268,7 @@ export const themeManifest = [
   scale('usx-task-list-outer-border-width', '--usx-task-list-outer-border-width', 'var(--usx-border-width-md)', 'border-advanced'),
   scale('usx-step-indicator-segment-bar-width', '--usx-step-indicator-segment-bar-width', 'var(--usx-border-width-xl)', 'border-advanced'),
   scale('usx-accordion-border-width', '--usx-accordion-border-width', 'var(--usx-border-width-lg)', 'border-advanced'),
+  scale('usx-card-border-width', '--usx-card-border-width', 'var(--usx-border-width-md)', 'border-advanced'),
   scale('usx-button-outline-border-width', '--usx-button-outline-border-width', 'var(--usx-border-width-md)', 'border-advanced'),
   scale('usx-switch-border-width', '--usx-switch-border-width', '2px', 'border-advanced'),
   scale('usx-file-input-border-width', '--usx-file-input-border-width', 'var(--usx-border-width-inputs)', 'border-advanced'),
@@ -281,7 +283,8 @@ export const themeManifest = [
     'Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif',
     'typography', 'font-family'),
   // Chains to font-family by default — see _variables.scss.
-  scale('font-family-heading', '--usx-font-family-heading', 'var(--usx-font-family)',
+  scale('font-family-heading', '--usx-font-family-heading',
+    'Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif',
     'typography', 'font-family'),
   scale('font-size-base', '--usx-font-size-base', '1rem', 'typography'),
   scale('font-size-h1', '--usx-font-size-h1', '2.5rem', 'typography'),
@@ -314,6 +317,11 @@ export const themeManifest = [
 
   // ── Component tokens (hardcoded-hex promotions) ───────────────────────────
   component('usx-link-text', '#005ea2', 'color-primary'),
+  component('usx-card-bg', 'var(--usx-surface-3)'),
+  component('usx-card-text', 'var(--usx-text-ink)'),
+  component('usx-card-heading-text', 'var(--usx-card-text)'),
+  component('usx-card-media-bg', 'var(--usx-surface-3)'),
+  component('usx-card-border-color', 'var(--usx-color-border)'),
   component('usx-link-text-visited', 'var(--usx-color-visited)'),
   // USWDS swaps link/visited color to a light neutral on a dark background
   // (`.usa-dark-background`) instead of the illegible blue/purple defaults;