@happyvertical/smrt-ui 0.55.17 → 0.55.19

package/dist/themes/smrt/index.js

@@ -6,12 +6,16 @@
  * accent (`#ff7a1a`), hairline outlines, deep low shadows, and a
  * Space Grotesk / Inter / JetBrains Mono type stack.
  *
+ * Depth is calm: two-layer shadows (contact + short ambient) and graphite surface
+ * lightness, never far-spread or glowing shadows.
+ *
  * The token palette restyles every existing smrt-ui component; the signature
  * motifs (engineering-grid background, glow, oscilloscope hairline, instrument
  * readouts, monospace technical labels) ship as opt-in utility classes in
  * `styles/smrt.css`, and the fonts in `styles/fonts.css`.
  */
-import { borderRadiusScale, durationScale, spacingScale } from '../shared.js';
+import { baselineTokens, opaqueGlass } from '../derive.js';
+import { borderRadiusScale, darkInsetHighlight, durationScale, hairlineInset, hairlineMix, noInsetHighlight, noShadow, shadow, spacingScale, } from '../shared.js';
 /** Display family (headings) — falls back gracefully when fonts.css is absent. */
 const DISPLAY_FONT = '"Space Grotesk", system-ui, -apple-system, sans-serif';
 /**
@@ -37,6 +41,11 @@ const lightColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: '#e7e0ff',
     onTertiaryContainer: '#3a2b8c',
+    // Info - Steel blue, distinct from the amber signal and the violet tertiary
+    info: '#2c6a96',
+    onInfo: '#ffffff',
+    infoContainer: '#dcebf5',
+    onInfoContainer: '#0f3149',
     // Error
     error: '#c0362c',
     onError: '#ffffff',
@@ -104,6 +113,11 @@ const darkColors = {
     onTertiary: '#241a4d',
     tertiaryContainer: '#2a2350',
     onTertiaryContainer: '#ddd4ff',
+    // Info - Steel blue, distinct from the amber signal and the violet tertiary
+    info: '#6fa8d6',
+    onInfo: '#08202f',
+    infoContainer: '#162a39',
+    onInfoContainer: '#b5d6ee',
     // Error
     error: '#ff6b6b',
     onError: '#2a0a0a',
@@ -241,52 +255,76 @@ const typography = {
     labelLarge: {
         size: '0.8125rem',
         lineHeight: '1.4',
-        weight: '600',
-        tracking: '0.04em',
+        weight: '500',
+        tracking: '0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     labelMedium: {
         size: '0.6875rem',
         lineHeight: '1.4',
-        weight: '600',
-        tracking: '0.08em',
+        weight: '500',
+        tracking: '0.03em',
         fontFamily: 'var(--smrt-font-family)',
     },
     labelSmall: {
         size: '0.625rem',
         lineHeight: '1.4',
-        weight: '600',
-        tracking: '0.1em',
+        weight: '500',
+        tracking: '0.05em',
         fontFamily: 'var(--smrt-font-family)',
     },
 };
 /**
- * SMRT elevation (light) — deep, soft, low-spread shadows.
- *
- * The workbench panels sit on big diffuse drop shadows with a tight inset
- * hairline at level 1. Light scheme tints the shadow with the cool ink grey.
+ * SMRT elevation (light) — calm, visible two-layer shadows. Level 1 is the
+ * hairline; the former far-spread drop shadows (44-90px blur, -28 to -50px
+ * spread, which disappeared on paper) are replaced by a contact shadow plus a
+ * short ambient layer.
  */
 const elevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(20, 26, 36, 0.08)',
-    2: '0 18px 44px -28px rgba(20, 26, 36, 0.18)',
-    3: '0 24px 56px -34px rgba(20, 26, 36, 0.22)',
-    4: '0 30px 70px -40px rgba(20, 26, 36, 0.28)',
-    5: '0 40px 90px -50px rgba(20, 26, 36, 0.3)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([
+        [1, 2, 0, 10],
+        [4, 10, -4, 10],
+    ]),
+    3: shadow([
+        [1, 3, 0, 12],
+        [8, 18, -6, 14],
+    ]),
+    4: shadow([
+        [2, 4, 0, 14],
+        [14, 28, -8, 16],
+    ]),
+    5: shadow([
+        [2, 6, 0, 16],
+        [24, 48, -12, 20],
+    ]),
 };
 /**
- * SMRT elevation (dark) — black drop shadows with a white inset hairline.
- *
- * Defined here (not only in the static `styles/smrt.css`) so the JS
+ * SMRT elevation (dark) — the hairline at level 1; above it graphite surface
+ * lightness carries altitude, with the inset top highlight and black shadows in
+ * support. Defined here (not only in the static `styles/smrt.css`) so the JS
  * ThemeProvider output and the static dark CSS stay in lockstep (#1586).
  */
 const darkElevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(255, 255, 255, 0.06)',
-    2: '0 18px 44px -28px rgba(0, 0, 0, 0.6)',
-    3: '0 24px 56px -34px rgba(0, 0, 0, 0.72)',
-    4: '0 30px 66px -40px rgba(0, 0, 0, 0.82)',
-    5: '0 40px 90px -50px rgba(0, 0, 0, 0.88)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([
+        [1, 2, 0, 36],
+        [4, 10, -4, 28],
+    ], 'var(--smrt-inset-highlight)'),
+    3: shadow([
+        [1, 3, 0, 40],
+        [8, 18, -6, 36],
+    ], 'var(--smrt-inset-highlight)'),
+    4: shadow([
+        [2, 4, 0, 44],
+        [14, 28, -8, 42],
+    ], 'var(--smrt-inset-highlight)'),
+    5: shadow([
+        [2, 6, 0, 48],
+        [24, 48, -12, 50],
+    ], 'var(--smrt-inset-highlight)'),
 };
 /**
  * SMRT easings — the workbench reveal curve as the emphasized easing.
@@ -314,6 +352,50 @@ export const smrtTheme = {
     borderRadius: borderRadiusScale,
     duration: durationScale,
     easing: smrtEasing,
+    glass: { ...opaqueGlass },
+    ...baselineTokens(lightColors, darkColors),
+    shadowColor: { light: 'rgb(20 26 36)', dark: 'rgb(0 0 0)' },
+    // Instrument ladder: deep ground, graphite panels, then control and raised
+    // tiers that step up in lightness (dark); paper panels on a cool ground (light).
+    surfaces: {
+        light: {
+            ground: lightColors.background,
+            panel: lightColors.surface,
+            control: lightColors.surfaceContainer,
+            raised: lightColors.surfaceContainerLowest,
+            sunken: lightColors.surfaceContainerHighest,
+            overlay: lightColors.scrim,
+        },
+        dark: {
+            ground: darkColors.background,
+            panel: darkColors.surface,
+            control: darkColors.surfaceContainerHigh,
+            raised: '#1d2126',
+            sunken: '#08090b',
+            overlay: darkColors.scrim,
+        },
+    },
+    hairlines: {
+        light: hairlineMix(12, 30, noInsetHighlight),
+        dark: hairlineMix(9, 24, darkInsetHighlight(0.05)),
+    },
+    states: {
+        hover: '0.10',
+        pressed: '0.16',
+        selected: '0.14',
+        focus: '0.16',
+        dragged: '0.20',
+        disabled: '0.38',
+    },
+    controls: {
+        radius: 'var(--smrt-radius-sm)',
+        radiusSmall: 'var(--smrt-radius-sm)',
+        height: '2.5rem',
+        heightSmall: '2rem',
+        weight: '500',
+    },
+    // Inter: tabular figures and the flat-topped 1 keep columns of numbers aligned.
+    fontFeatureSettings: '"tnum" 1, "cv11" 1',
     fontFamily: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif',
 };
 export default smrtTheme;

package/dist/themes/studio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/studio/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAQH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AAqSrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAazB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/studio/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAeH,OAAO,KAAK,EAGV,KAAK,EAEN,MAAM,aAAa,CAAC;AAmVrB;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAwDzB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/themes/studio/index.js

@@ -5,7 +5,8 @@
  * Minimal shadows, monochromatic base with vibrant accents,
  * clean lines, and a focus on content clarity.
  */
-import { borderRadiusScale, durationScale, spacingScale, studioEasing, } from '../shared.js';
+import { baselineTokens, opaqueGlass } from '../derive.js';
+import { borderRadiusScale, darkInsetHighlight, durationScale, hairlineInset, hairlineMix, noInsetHighlight, noShadow, shadow, spacingScale, studioEasing, } from '../shared.js';
 /**
  * Studio light color palette
  * Monochromatic base with vibrant accent colors
@@ -26,6 +27,11 @@ const lightColors = {
     onTertiary: '#ffffff',
     tertiaryContainer: '#f3e8fd',
     onTertiaryContainer: '#6b12b8',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#9334e6',
+    onInfo: '#ffffff',
+    infoContainer: '#f3e8fd',
+    onInfoContainer: '#6b12b8',
     // Error - Google red
     error: '#d93025',
     onError: '#ffffff',
@@ -91,6 +97,11 @@ const darkColors = {
     onTertiary: '#3e1385',
     tertiaryContainer: '#6b12b8',
     onTertiaryContainer: '#f3e8fd',
+    // Info - Shares the tertiary hue (no distinct info hue in this preset)
+    info: '#c58af9',
+    onInfo: '#3e1385',
+    infoContainer: '#6b12b8',
+    onInfoContainer: '#f3e8fd',
     // Error
     error: '#f28b82',
     onError: '#5c150c',
@@ -106,20 +117,20 @@ const darkColors = {
     onSuccess: '#0d3b1f',
     successContainer: '#137333',
     onSuccessContainer: '#e6f4ea',
-    // Surface - Near black
-    surface: '#0e0e0e',
+    // Surface - Cool flat greys; panel equals ground and is separated by a hairline
+    surface: '#131416',
     onSurface: '#e8eaed',
-    surfaceVariant: '#1f1f1f',
+    surfaceVariant: '#1c1d20',
     onSurfaceVariant: '#9aa0a6',
-    surfaceContainer: '#1f1f1f',
-    surfaceContainerLow: '#141414',
-    surfaceContainerHigh: '#2d2d2d',
-    surfaceContainerHighest: '#3c4043',
-    surfaceContainerLowest: '#0a0a0a',
-    surfaceDim: '#141414',
-    surfaceBright: '#2d2d2d',
+    surfaceContainer: '#1a1b1e',
+    surfaceContainerLow: '#16171a',
+    surfaceContainerHigh: '#202124',
+    surfaceContainerHighest: '#292a2d',
+    surfaceContainerLowest: '#0e0f10',
+    surfaceDim: '#0e0f10',
+    surfaceBright: '#2b2c2f',
     // Background
-    background: '#0e0e0e',
+    background: '#131416',
     onBackground: '#e8eaed',
     // Outline
     outline: '#8c8e92',
@@ -141,35 +152,35 @@ const typography = {
         size: '3rem',
         lineHeight: '1.1',
         weight: '400',
-        tracking: '-0.01em',
+        tracking: '-0.02em',
         fontFamily: 'var(--smrt-font-family)',
     },
     displayMedium: {
         size: '2.5rem',
         lineHeight: '1.15',
         weight: '400',
-        tracking: '-0.008em',
+        tracking: '-0.015em',
         fontFamily: 'var(--smrt-font-family)',
     },
     displaySmall: {
         size: '2rem',
         lineHeight: '1.2',
         weight: '400',
-        tracking: '-0.005em',
+        tracking: '-0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineLarge: {
         size: '1.75rem',
         lineHeight: '1.25',
         weight: '400',
-        tracking: '0',
+        tracking: '-0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineMedium: {
         size: '1.5rem',
         lineHeight: '1.3',
         weight: '400',
-        tracking: '0',
+        tracking: '-0.005em',
         fontFamily: 'var(--smrt-font-family)',
     },
     headlineSmall: {
@@ -225,14 +236,14 @@ const typography = {
         size: '0.875rem',
         lineHeight: '1.5',
         weight: '500',
-        tracking: '0.02em',
+        tracking: '0.01em',
         fontFamily: 'var(--smrt-font-family)',
     },
     labelMedium: {
         size: '0.75rem',
         lineHeight: '1.5',
         weight: '500',
-        tracking: '0.025em',
+        tracking: '0.02em',
         fontFamily: 'var(--smrt-font-family)',
     },
     labelSmall: {
@@ -244,33 +255,55 @@ const typography = {
     },
 };
 /**
- * Studio elevation (light) - Minimal, subtle shadows
- * Flat design philosophy with only slight depth indication
+ * Studio elevation (light) — flat. Level 1 is the hairline itself; the rest are
+ * crisp two-layer shadows (tight contact, short ambient) so overlays separate
+ * without softness.
  */
 const elevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(60, 64, 67, 0.08)',
-    2: '0 1px 2px 0 rgba(60, 64, 67, 0.08), 0 1px 3px 0 rgba(60, 64, 67, 0.04)',
-    3: '0 2px 4px 0 rgba(60, 64, 67, 0.1), 0 1px 2px 0 rgba(60, 64, 67, 0.06)',
-    4: '0 4px 8px 0 rgba(60, 64, 67, 0.1), 0 2px 4px 0 rgba(60, 64, 67, 0.06)',
-    5: '0 8px 16px 0 rgba(60, 64, 67, 0.12), 0 4px 8px 0 rgba(60, 64, 67, 0.06)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([
+        [1, 2, 0, 10],
+        [2, 4, -2, 8],
+    ]),
+    3: shadow([
+        [1, 2, 0, 12],
+        [4, 8, -3, 10],
+    ]),
+    4: shadow([
+        [2, 3, 0, 12],
+        [8, 16, -4, 12],
+    ]),
+    5: shadow([
+        [2, 4, 0, 14],
+        [16, 32, -8, 16],
+    ]),
 };
 /**
- * Studio elevation (dark) - Tuned for a near-black surface.
- *
- * The flat light shadows (tinted with the light surface color, very low alpha)
- * read as invisible on a dark surface, so dark mode uses a white inset hairline
- * at level 1 and deeper black shadows above it. Defining this here — rather than
- * only in the static `styles/studio.css` — keeps the JS ThemeProvider output and
- * the static dark CSS in lockstep (#1586).
+ * Studio elevation (dark) — the hairline at level 1, tighter shadows above it
+ * with the inset top highlight. Defined here (not only in the static
+ * `styles/studio.css`) so the JS ThemeProvider output and the static dark CSS
+ * stay in lockstep (#1586).
  */
 const darkElevation = {
-    0: 'none',
-    1: 'inset 0 0 0 1px rgba(255, 255, 255, 0.08)',
-    2: '0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-    3: '0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1)',
-    4: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1)',
-    5: '0 8px 16px 0 rgba(0, 0, 0, 0.25), 0 4px 8px 0 rgba(0, 0, 0, 0.1)',
+    0: noShadow,
+    1: hairlineInset,
+    2: shadow([
+        [1, 2, 0, 28],
+        [2, 4, -2, 20],
+    ], 'var(--smrt-inset-highlight)'),
+    3: shadow([
+        [1, 2, 0, 30],
+        [4, 8, -3, 24],
+    ], 'var(--smrt-inset-highlight)'),
+    4: shadow([
+        [2, 3, 0, 32],
+        [8, 16, -4, 28],
+    ], 'var(--smrt-inset-highlight)'),
+    5: shadow([
+        [2, 4, 0, 34],
+        [16, 32, -8, 32],
+    ], 'var(--smrt-inset-highlight)'),
 };
 /**
  * Studio theme definition
@@ -287,6 +320,49 @@ export const studioTheme = {
     borderRadius: borderRadiusScale,
     duration: durationScale,
     easing: studioEasing,
+    glass: { ...opaqueGlass },
+    ...baselineTokens(lightColors, darkColors),
+    shadowColor: { light: 'rgb(60 64 67)', dark: 'rgb(0 0 0)' },
+    // Flat: panel equals ground (a hairline separates them); controls sit a hair
+    // darker in light and a step lighter in dark; overlays are the highest tier.
+    surfaces: {
+        light: {
+            ground: lightColors.background,
+            panel: lightColors.surface,
+            control: '#f6f7f8',
+            raised: lightColors.surfaceContainerLowest,
+            sunken: lightColors.surfaceContainer,
+            overlay: lightColors.scrim,
+        },
+        dark: {
+            ground: darkColors.background,
+            panel: darkColors.surface,
+            control: '#1c1d20',
+            raised: darkColors.surfaceContainerHighest,
+            sunken: darkColors.surfaceContainerLowest,
+            overlay: darkColors.scrim,
+        },
+    },
+    hairlines: {
+        light: hairlineMix(12, 32, noInsetHighlight),
+        dark: hairlineMix(14, 32, darkInsetHighlight(0.05)),
+    },
+    states: {
+        hover: '0.06',
+        pressed: '0.10',
+        selected: '0.10',
+        focus: '0.10',
+        dragged: '0.14',
+        disabled: '0.38',
+    },
+    // Crisp: a 6px radius and a denser control height.
+    controls: {
+        radius: '0.375rem',
+        radiusSmall: 'var(--smrt-radius-sm)',
+        height: '2.5rem',
+        heightSmall: '2rem',
+        weight: '500',
+    },
     fontFamily: '"Google Sans Text", "Roboto", "Segoe UI", system-ui, sans-serif',
 };
 export default studioTheme;

package/dist/themes/styles/base.css

@@ -32,3 +32,228 @@ textarea {
   font: inherit;
 }
 }
+
+/*
+ * Typography (#3868). Headings and utilities consume the theme's type roles,
+ * so a preset's display face, tracking and weight reach plain markup. Hosts
+ * restyle with unlayered CSS; component styles in smrt.theme still win.
+ */
+@layer smrt.structure {
+:is(body, .smrt-theme-root) {
+  font-feature-settings: var(--smrt-font-feature-settings);
+}
+
+:is(body, .smrt-theme-root) h1 {
+  font-family: var(--smrt-typography-display-small-font-family);
+  font-size: var(--smrt-typography-display-small-size);
+  line-height: var(--smrt-typography-display-small-line-height);
+  font-weight: var(--smrt-typography-display-small-weight);
+  letter-spacing: var(--smrt-typography-display-small-tracking);
+  margin-block: var(--smrt-spacing-5) var(--smrt-spacing-3);
+}
+
+:is(body, .smrt-theme-root) h2 {
+  font-family: var(--smrt-typography-headline-large-font-family);
+  font-size: var(--smrt-typography-headline-large-size);
+  line-height: var(--smrt-typography-headline-large-line-height);
+  font-weight: var(--smrt-typography-headline-large-weight);
+  letter-spacing: var(--smrt-typography-headline-large-tracking);
+  margin-block: var(--smrt-spacing-5) var(--smrt-spacing-3);
+}
+
+:is(body, .smrt-theme-root) h3 {
+  font-family: var(--smrt-typography-headline-medium-font-family);
+  font-size: var(--smrt-typography-headline-medium-size);
+  line-height: var(--smrt-typography-headline-medium-line-height);
+  font-weight: var(--smrt-typography-headline-medium-weight);
+  letter-spacing: var(--smrt-typography-headline-medium-tracking);
+  margin-block: var(--smrt-spacing-4) var(--smrt-spacing-2);
+}
+
+:is(body, .smrt-theme-root) h4 {
+  font-family: var(--smrt-typography-headline-small-font-family);
+  font-size: var(--smrt-typography-headline-small-size);
+  line-height: var(--smrt-typography-headline-small-line-height);
+  font-weight: var(--smrt-typography-headline-small-weight);
+  letter-spacing: var(--smrt-typography-headline-small-tracking);
+  margin-block: var(--smrt-spacing-4) var(--smrt-spacing-2);
+}
+
+:is(body, .smrt-theme-root) h5 {
+  font-family: var(--smrt-typography-title-large-font-family);
+  font-size: var(--smrt-typography-title-large-size);
+  line-height: var(--smrt-typography-title-large-line-height);
+  font-weight: var(--smrt-typography-title-large-weight);
+  letter-spacing: var(--smrt-typography-title-large-tracking);
+  margin-block: var(--smrt-spacing-4) var(--smrt-spacing-2);
+}
+
+:is(body, .smrt-theme-root) h6 {
+  font-family: var(--smrt-typography-title-medium-font-family);
+  font-size: var(--smrt-typography-title-medium-size);
+  line-height: var(--smrt-typography-title-medium-line-height);
+  font-weight: var(--smrt-typography-title-medium-weight);
+  letter-spacing: var(--smrt-typography-title-medium-tracking);
+  margin-block: var(--smrt-spacing-4) var(--smrt-spacing-2);
+}
+
+:is(body, .smrt-theme-root) :is(h1, h2, h3, h4, h5, h6):first-child {
+  margin-block-start: 0;
+}
+
+.smrt-display-large {
+  font-family: var(--smrt-typography-display-large-font-family);
+  font-size: var(--smrt-typography-display-large-size);
+  line-height: var(--smrt-typography-display-large-line-height);
+  font-weight: var(--smrt-typography-display-large-weight);
+  letter-spacing: var(--smrt-typography-display-large-tracking);
+}
+
+.smrt-display-medium {
+  font-family: var(--smrt-typography-display-medium-font-family);
+  font-size: var(--smrt-typography-display-medium-size);
+  line-height: var(--smrt-typography-display-medium-line-height);
+  font-weight: var(--smrt-typography-display-medium-weight);
+  letter-spacing: var(--smrt-typography-display-medium-tracking);
+}
+
+.smrt-display-small {
+  font-family: var(--smrt-typography-display-small-font-family);
+  font-size: var(--smrt-typography-display-small-size);
+  line-height: var(--smrt-typography-display-small-line-height);
+  font-weight: var(--smrt-typography-display-small-weight);
+  letter-spacing: var(--smrt-typography-display-small-tracking);
+}
+
+.smrt-headline-large {
+  font-family: var(--smrt-typography-headline-large-font-family);
+  font-size: var(--smrt-typography-headline-large-size);
+  line-height: var(--smrt-typography-headline-large-line-height);
+  font-weight: var(--smrt-typography-headline-large-weight);
+  letter-spacing: var(--smrt-typography-headline-large-tracking);
+}
+
+.smrt-headline-medium {
+  font-family: var(--smrt-typography-headline-medium-font-family);
+  font-size: var(--smrt-typography-headline-medium-size);
+  line-height: var(--smrt-typography-headline-medium-line-height);
+  font-weight: var(--smrt-typography-headline-medium-weight);
+  letter-spacing: var(--smrt-typography-headline-medium-tracking);
+}
+
+.smrt-headline-small {
+  font-family: var(--smrt-typography-headline-small-font-family);
+  font-size: var(--smrt-typography-headline-small-size);
+  line-height: var(--smrt-typography-headline-small-line-height);
+  font-weight: var(--smrt-typography-headline-small-weight);
+  letter-spacing: var(--smrt-typography-headline-small-tracking);
+}
+
+.smrt-title-large {
+  font-family: var(--smrt-typography-title-large-font-family);
+  font-size: var(--smrt-typography-title-large-size);
+  line-height: var(--smrt-typography-title-large-line-height);
+  font-weight: var(--smrt-typography-title-large-weight);
+  letter-spacing: var(--smrt-typography-title-large-tracking);
+}
+
+.smrt-title-medium {
+  font-family: var(--smrt-typography-title-medium-font-family);
+  font-size: var(--smrt-typography-title-medium-size);
+  line-height: var(--smrt-typography-title-medium-line-height);
+  font-weight: var(--smrt-typography-title-medium-weight);
+  letter-spacing: var(--smrt-typography-title-medium-tracking);
+}
+
+.smrt-title-small {
+  font-family: var(--smrt-typography-title-small-font-family);
+  font-size: var(--smrt-typography-title-small-size);
+  line-height: var(--smrt-typography-title-small-line-height);
+  font-weight: var(--smrt-typography-title-small-weight);
+  letter-spacing: var(--smrt-typography-title-small-tracking);
+}
+
+.smrt-body-large {
+  font-family: var(--smrt-typography-body-large-font-family);
+  font-size: var(--smrt-typography-body-large-size);
+  line-height: var(--smrt-typography-body-large-line-height);
+  font-weight: var(--smrt-typography-body-large-weight);
+  letter-spacing: var(--smrt-typography-body-large-tracking);
+}
+
+.smrt-body-medium {
+  font-family: var(--smrt-typography-body-medium-font-family);
+  font-size: var(--smrt-typography-body-medium-size);
+  line-height: var(--smrt-typography-body-medium-line-height);
+  font-weight: var(--smrt-typography-body-medium-weight);
+  letter-spacing: var(--smrt-typography-body-medium-tracking);
+}
+
+.smrt-body-small {
+  font-family: var(--smrt-typography-body-small-font-family);
+  font-size: var(--smrt-typography-body-small-size);
+  line-height: var(--smrt-typography-body-small-line-height);
+  font-weight: var(--smrt-typography-body-small-weight);
+  letter-spacing: var(--smrt-typography-body-small-tracking);
+}
+
+.smrt-label-large {
+  font-family: var(--smrt-typography-label-large-font-family);
+  font-size: var(--smrt-typography-label-large-size);
+  line-height: var(--smrt-typography-label-large-line-height);
+  font-weight: var(--smrt-typography-label-large-weight);
+  letter-spacing: var(--smrt-typography-label-large-tracking);
+}
+
+.smrt-label-medium {
+  font-family: var(--smrt-typography-label-medium-font-family);
+  font-size: var(--smrt-typography-label-medium-size);
+  line-height: var(--smrt-typography-label-medium-line-height);
+  font-weight: var(--smrt-typography-label-medium-weight);
+  letter-spacing: var(--smrt-typography-label-medium-tracking);
+}
+
+.smrt-label-small {
+  font-family: var(--smrt-typography-label-small-font-family);
+  font-size: var(--smrt-typography-label-small-size);
+  line-height: var(--smrt-typography-label-small-line-height);
+  font-weight: var(--smrt-typography-label-small-weight);
+  letter-spacing: var(--smrt-typography-label-small-tracking);
+}
+
+table,
+time,
+[data-smrt-component="DataTable"],
+[data-smrt-component="Badge"],
+.smrt-tabular {
+  font-variant-numeric: tabular-nums;
+}
+}
+
+/* Native chrome and scheme crossfade (premium baseline, #3867). */
+@layer smrt.theme {
+:root,
+.smrt-theme-root {
+  accent-color: var(--smrt-accent-color);
+  caret-color: var(--smrt-caret-color);
+  scrollbar-color: var(--smrt-scrollbar-thumb) var(--smrt-scrollbar-track);
+}
+
+::selection {
+  background: var(--smrt-selection-background);
+  color: var(--smrt-selection-color);
+}
+
+/* ThemeProvider sets data-smrt-theme-changing for the length of a scheme switch. */
+@media (prefers-reduced-motion: no-preference) {
+  .smrt-theme-root[data-smrt-theme-changing],
+  .smrt-theme-root[data-smrt-theme-changing] * {
+    transition:
+      background-color var(--smrt-duration-scheme) var(--smrt-easing-standard),
+      color var(--smrt-duration-scheme) var(--smrt-easing-standard),
+      border-color var(--smrt-duration-scheme) var(--smrt-easing-standard),
+      fill var(--smrt-duration-scheme) var(--smrt-easing-standard),
+      stroke var(--smrt-duration-scheme) var(--smrt-easing-standard);
+  }
+}
+}