@happyvertical/smrt-ui 0.55.16 → 0.55.18

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

@@ -1,10 +1,12 @@
-/**
+
+@layer smrt.reset, smrt.structure, smrt.theme;/**
  * Application baseline for SMRT interfaces.
  *
  * Import this once at an application entry point, alongside the selected
  * theme stylesheet. Components remain independently usable without it.
  */
 
+@layer smrt.reset {
 *,
 *::before,
 *::after {
@@ -29,3 +31,229 @@ select,
 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);
+  }
+}
+}