@happyvertical/smrt-ui 0.55.16 → 0.55.18

package/dist/themes/required-tokens.generated.json

@@ -0,0 +1,201 @@
+{
+  "$comment": "Generated by scripts/generate-smrt-required-tokens.mjs. Do not edit by hand.",
+  "required": [
+    "--smrt-color-background",
+    "--smrt-color-error",
+    "--smrt-color-error-container",
+    "--smrt-color-inverse-on-surface",
+    "--smrt-color-inverse-surface",
+    "--smrt-color-on-background",
+    "--smrt-color-on-error",
+    "--smrt-color-on-error-container",
+    "--smrt-color-on-primary",
+    "--smrt-color-on-primary-container",
+    "--smrt-color-on-secondary",
+    "--smrt-color-on-secondary-container",
+    "--smrt-color-on-success-container",
+    "--smrt-color-on-surface",
+    "--smrt-color-on-surface-variant",
+    "--smrt-color-on-tertiary",
+    "--smrt-color-on-tertiary-container",
+    "--smrt-color-on-warning-container",
+    "--smrt-color-outline",
+    "--smrt-color-outline-variant",
+    "--smrt-color-primary",
+    "--smrt-color-primary-container",
+    "--smrt-color-scrim",
+    "--smrt-color-secondary",
+    "--smrt-color-secondary-container",
+    "--smrt-color-shadow",
+    "--smrt-color-success",
+    "--smrt-color-success-container",
+    "--smrt-color-surface",
+    "--smrt-color-surface-container",
+    "--smrt-color-surface-container-high",
+    "--smrt-color-surface-container-highest",
+    "--smrt-color-surface-container-low",
+    "--smrt-color-surface-container-lowest",
+    "--smrt-color-surface-dim",
+    "--smrt-color-surface-variant",
+    "--smrt-color-tertiary",
+    "--smrt-color-tertiary-container",
+    "--smrt-color-warning",
+    "--smrt-color-warning-container",
+    "--smrt-control-height",
+    "--smrt-control-height-small",
+    "--smrt-control-radius",
+    "--smrt-control-radius-small",
+    "--smrt-duration-fast",
+    "--smrt-duration-medium1",
+    "--smrt-duration-normal",
+    "--smrt-duration-short2",
+    "--smrt-duration-short3",
+    "--smrt-duration-short4",
+    "--smrt-easing-emphasized",
+    "--smrt-easing-emphasized-decelerate",
+    "--smrt-easing-standard",
+    "--smrt-elevation-1",
+    "--smrt-elevation-2",
+    "--smrt-elevation-3",
+    "--smrt-elevation-4",
+    "--smrt-elevation-5",
+    "--smrt-focus-ring-color",
+    "--smrt-focus-ring-offset",
+    "--smrt-focus-ring-width",
+    "--smrt-font-family",
+    "--smrt-font-family-mono",
+    "--smrt-glass-blur",
+    "--smrt-glass-saturation",
+    "--smrt-glass-surface",
+    "--smrt-glass-surface-strong",
+    "--smrt-hairline",
+    "--smrt-hairline-color",
+    "--smrt-hairline-strong",
+    "--smrt-hairline-strong-color",
+    "--smrt-inset-highlight",
+    "--smrt-radius-2xl",
+    "--smrt-radius-extra-large",
+    "--smrt-radius-extra-small",
+    "--smrt-radius-full",
+    "--smrt-radius-large",
+    "--smrt-radius-lg",
+    "--smrt-radius-md",
+    "--smrt-radius-medium",
+    "--smrt-radius-sm",
+    "--smrt-radius-small",
+    "--smrt-radius-xl",
+    "--smrt-scrollbar-thumb",
+    "--smrt-scrollbar-track",
+    "--smrt-spacing-0_5",
+    "--smrt-spacing-1",
+    "--smrt-spacing-10",
+    "--smrt-spacing-11",
+    "--smrt-spacing-12",
+    "--smrt-spacing-1_5",
+    "--smrt-spacing-2",
+    "--smrt-spacing-2xl",
+    "--smrt-spacing-3",
+    "--smrt-spacing-3xl",
+    "--smrt-spacing-4",
+    "--smrt-spacing-5",
+    "--smrt-spacing-6",
+    "--smrt-spacing-8",
+    "--smrt-spacing-lg",
+    "--smrt-spacing-md",
+    "--smrt-spacing-sm",
+    "--smrt-spacing-xl",
+    "--smrt-spacing-xs",
+    "--smrt-state-disabled",
+    "--smrt-state-dragged",
+    "--smrt-state-hover",
+    "--smrt-state-pressed",
+    "--smrt-state-selected",
+    "--smrt-surface-control",
+    "--smrt-surface-ground",
+    "--smrt-surface-overlay",
+    "--smrt-surface-panel",
+    "--smrt-surface-raised",
+    "--smrt-surface-sunken",
+    "--smrt-touch-target-min",
+    "--smrt-typography-body-large-font",
+    "--smrt-typography-body-large-line-height",
+    "--smrt-typography-body-large-size",
+    "--smrt-typography-body-large-tracking",
+    "--smrt-typography-body-medium-font",
+    "--smrt-typography-body-medium-line-height",
+    "--smrt-typography-body-medium-size",
+    "--smrt-typography-body-medium-tracking",
+    "--smrt-typography-body-medium-weight",
+    "--smrt-typography-body-small-font",
+    "--smrt-typography-body-small-line-height",
+    "--smrt-typography-body-small-size",
+    "--smrt-typography-body-small-weight",
+    "--smrt-typography-display-medium-line-height",
+    "--smrt-typography-display-medium-size",
+    "--smrt-typography-display-small-size",
+    "--smrt-typography-headline-large-line-height",
+    "--smrt-typography-headline-large-size",
+    "--smrt-typography-headline-large-weight",
+    "--smrt-typography-headline-medium-line-height",
+    "--smrt-typography-headline-medium-size",
+    "--smrt-typography-headline-medium-weight",
+    "--smrt-typography-headline-small-font",
+    "--smrt-typography-headline-small-line-height",
+    "--smrt-typography-headline-small-size",
+    "--smrt-typography-headline-small-weight",
+    "--smrt-typography-label-large-font",
+    "--smrt-typography-label-large-size",
+    "--smrt-typography-label-large-tracking",
+    "--smrt-typography-label-large-weight",
+    "--smrt-typography-label-medium-font",
+    "--smrt-typography-label-medium-size",
+    "--smrt-typography-label-medium-tracking",
+    "--smrt-typography-label-medium-weight",
+    "--smrt-typography-label-small-font",
+    "--smrt-typography-label-small-line-height",
+    "--smrt-typography-label-small-size",
+    "--smrt-typography-label-small-tracking",
+    "--smrt-typography-label-small-weight",
+    "--smrt-typography-title-large-font",
+    "--smrt-typography-title-large-line-height",
+    "--smrt-typography-title-large-size",
+    "--smrt-typography-title-medium-font",
+    "--smrt-typography-title-medium-font-family",
+    "--smrt-typography-title-medium-line-height",
+    "--smrt-typography-title-medium-size",
+    "--smrt-typography-title-medium-tracking",
+    "--smrt-typography-title-medium-weight",
+    "--smrt-typography-title-small-font",
+    "--smrt-typography-title-small-size",
+    "--smrt-typography-title-small-tracking",
+    "--smrt-typography-title-small-weight",
+    "--smrt-typography-weight-bold",
+    "--smrt-typography-weight-medium",
+    "--smrt-typography-weight-normal",
+    "--smrt-typography-weight-semibold",
+    "--smrt-z-index-dialog",
+    "--smrt-z-index-dropdown",
+    "--smrt-z-index-modal",
+    "--smrt-z-index-overlay",
+    "--smrt-z-index-sticky",
+    "--smrt-z-index-toast",
+    "--smrt-z-index-tooltip"
+  ],
+  "optional": [
+    "--smrt-admin-shell-background",
+    "--smrt-admin-shell-scrollbar-thumb",
+    "--smrt-admin-shell-scrollbar-thumb-hover",
+    "--smrt-admin-shell-scrollbar-track",
+    "--smrt-card-background",
+    "--smrt-card-border",
+    "--smrt-card-divider",
+    "--smrt-card-shadow",
+    "--smrt-content-editor-icon-size",
+    "--smrt-control-hit-size",
+    "--smrt-popover-panel-padding",
+    "--smrt-popover-panel-width",
+    "--smrt-shell-title-font-family",
+    "--smrt-sortable-header-font-weight",
+    "--smrt-sortable-header-padding"
+  ]
+}

package/dist/themes/shared.d.ts

@@ -75,4 +75,39 @@ export declare const appleEasing: EasingScale;
  * Studio-style easings (for Studio theme - snappier)
  */
 export declare const studioEasing: EasingScale;
+/**
+ * One shadow layer: `[offset-y, blur, spread, alpha%]`, tinted by the scheme's
+ * `--smrt-shadow-color` (the theme's own token, so the tint follows the preset).
+ */
+export type ShadowLayer = readonly [
+    y: number,
+    blur: number,
+    spread: number,
+    alphaPercent: number
+];
+/**
+ * Compose a box-shadow from layers. Elevation levels are two-layer: a contact
+ * shadow (`0 1px 2px`) that anchors the edge, and an ambient shadow (`0 Npx Mpx`
+ * with negative spread) that lifts it. `prefix` lists extra leading layers, e.g.
+ * `var(--smrt-inset-highlight)` on dark schemes.
+ */
+export declare function shadow(layers: readonly ShadowLayer[], prefix?: string): string;
+/** Quiet hairline inset used as elevation 1 by the flat presets. */
+export declare const hairlineInset = "inset 0 0 0 1px var(--smrt-hairline-color)";
+/** Text-colour mixes used for hairlines: quiet edge and strong control edge. */
+export declare function hairlineMix(quietPercent: number, strongPercent: number, insetHighlight: string): {
+    color: string;
+    strongColor: string;
+    insetHighlight: string;
+};
+/**
+ * Neutral values that are still valid box-shadow layers. Components combine
+ * `var(--smrt-inset-highlight)` with an elevation (`box-shadow: a, b`); the
+ * keyword `none` is invalid inside a list and drops the whole declaration, so
+ * the "no highlight" and "no elevation" values are transparent shadows.
+ */
+export declare const noInsetHighlight = "inset 0 1px 0 transparent";
+export declare const noShadow = "0 0 0 0 transparent";
+/** Top inner light line for dark surfaces (`--smrt-inset-highlight`). */
+export declare const darkInsetHighlight: (alpha: number) => string;
 //# sourceMappingURL=shared.d.ts.map

package/dist/themes/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/themes/shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,YAAY,EACb,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,YAsB1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,YAAY,CAQ7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAS/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,iBAAiB,CAMvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAO5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,WAO1B,CAAC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../src/themes/shared.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EACV,iBAAiB,EACjB,aAAa,EACb,WAAW,EACX,YAAY,EACb,MAAM,YAAY,CAAC;AAEpB;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,YAsB1B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,YAAY,CAQ7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,iBAS/B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,iBAAiB,CAMvE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,aAM3B,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAalD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAKnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAW/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,WAO5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,WAOzB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,WAO1B,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS;IACjC,CAAC,EAAE,MAAM;IACT,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,MAAM;IACd,YAAY,EAAE,MAAM;CACrB,CAAC;AAKF;;;;;GAKG;AACH,wBAAgB,MAAM,CACpB,MAAM,EAAE,SAAS,WAAW,EAAE,EAC9B,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,CAMR;AAED,oEAAoE;AACpE,eAAO,MAAM,aAAa,+CAA+C,CAAC;AAE1E,gFAAgF;AAChF,wBAAgB,WAAW,CACzB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,cAAc,EAAE,MAAM,GACrB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,CAMhE;AAED;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,8BAA8B,CAAC;AAC5D,eAAO,MAAM,QAAQ,wBAAwB,CAAC;AAE9C,yEAAyE;AACzE,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MACN,CAAC"}

package/dist/themes/shared.js

@@ -177,3 +177,35 @@ export const studioEasing = {
     emphasizedDecelerate: 'cubic-bezier(0.0, 0, 0.2, 1)',
     emphasizedAccelerate: 'cubic-bezier(0.4, 0, 1, 1)',
 };
+/** `px` length, `0` without a unit so the value stays valid and short. */
+const px = (n) => (n === 0 ? '0' : `${n}px`);
+/**
+ * Compose a box-shadow from layers. Elevation levels are two-layer: a contact
+ * shadow (`0 1px 2px`) that anchors the edge, and an ambient shadow (`0 Npx Mpx`
+ * with negative spread) that lifts it. `prefix` lists extra leading layers, e.g.
+ * `var(--smrt-inset-highlight)` on dark schemes.
+ */
+export function shadow(layers, prefix) {
+    const parts = layers.map(([y, blur, spread, alpha]) => `0 ${px(y)} ${px(blur)} ${px(spread)} color-mix(in srgb, var(--smrt-shadow-color) ${alpha}%, transparent)`);
+    return prefix ? [prefix, ...parts].join(', ') : parts.join(', ');
+}
+/** Quiet hairline inset used as elevation 1 by the flat presets. */
+export const hairlineInset = 'inset 0 0 0 1px var(--smrt-hairline-color)';
+/** Text-colour mixes used for hairlines: quiet edge and strong control edge. */
+export function hairlineMix(quietPercent, strongPercent, insetHighlight) {
+    return {
+        color: `color-mix(in srgb, var(--smrt-color-on-surface) ${quietPercent}%, transparent)`,
+        strongColor: `color-mix(in srgb, var(--smrt-color-on-surface) ${strongPercent}%, transparent)`,
+        insetHighlight,
+    };
+}
+/**
+ * Neutral values that are still valid box-shadow layers. Components combine
+ * `var(--smrt-inset-highlight)` with an elevation (`box-shadow: a, b`); the
+ * keyword `none` is invalid inside a list and drops the whole declaration, so
+ * the "no highlight" and "no elevation" values are transparent shadows.
+ */
+export const noInsetHighlight = 'inset 0 1px 0 transparent';
+export const noShadow = '0 0 0 0 transparent';
+/** Top inner light line for dark surfaces (`--smrt-inset-highlight`). */
+export const darkInsetHighlight = (alpha) => `inset 0 1px 0 rgb(255 255 255 / ${alpha})`;

package/dist/themes/smrt/index.d.ts

@@ -6,6 +6,9 @@
  * 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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA4TrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAavB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/smrt/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAcH,OAAO,KAAK,EAIV,KAAK,EAEN,MAAM,aAAa,CAAC;AA4WrB;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAyDvB,CAAC;AAEF,eAAe,SAAS,CAAC"}

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