feat(ui): polish — design tokens, focus-visible, a11y, Dashboard component

.storybook/preview.tsx

@@ -12,6 +12,13 @@ import { miewebBrand } from '../src/brands/mieweb';
 import { wagglelineBrand } from '../src/brands/waggleline';
 import { webchartBrand } from '../src/brands/webchart';
 import type { BrandConfig } from '../src/brands/types';
+import {
+  defaultDensity,
+  defaultElevation,
+  defaultFocusRing,
+  defaultMotion,
+  defaultSpacing,
+} from '../src/brands/types';
 
 // Map of available brands
 const brands: Record<string, BrandConfig> = {
@@ -46,8 +53,10 @@ function applyGlobalTheme(globals: Record<string, unknown>) {
   // Toggle condensed density class on body
   if (isCondensed) {
     document.body.classList.add('condensed');
+    document.documentElement.setAttribute('data-density', 'compact');
   } else {
     document.body.classList.remove('condensed');
+    document.documentElement.setAttribute('data-density', 'comfortable');
   }
 
   document.body.style.backgroundColor = semanticColors.background;
@@ -88,9 +97,13 @@ try {
 
 // Function to apply brand CSS variables to document
 function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
-  const root = document.documentElement;
   const colors = brand.colors;
   const semanticColors = isDark ? colors.dark : colors.light;
+  const spacing = brand.spacing ?? defaultSpacing;
+  const motion = brand.motion ?? defaultMotion;
+  const focusRing = brand.focusRing ?? defaultFocusRing;
+  const density = brand.density ?? defaultDensity;
+  const shadow = brand.boxShadow;
 
   // Remove any existing brand style tag
   const existingStyle = document.getElementById('mieweb-brand-styles');
@@ -138,9 +151,38 @@ function applyBrandStyles(brand: BrandConfig, isDark: boolean) {
       --mieweb-radius-xl: ${brand.borderRadius.xl} !important;
       --mieweb-radius-2xl: ${brand.borderRadius['2xl']} !important;
       --mieweb-radius-full: ${brand.borderRadius.full} !important;
-      --mieweb-shadow-card: ${brand.boxShadow.card} !important;
-      --mieweb-shadow-dropdown: ${brand.boxShadow.dropdown} !important;
-      --mieweb-shadow-modal: ${brand.boxShadow.modal} !important;
+      --mieweb-shadow-card: ${shadow.card} !important;
+      --mieweb-shadow-dropdown: ${shadow.dropdown} !important;
+      --mieweb-shadow-modal: ${shadow.modal} !important;
+      --mieweb-shadow-1: ${shadow[1] ?? defaultElevation[1]} !important;
+      --mieweb-shadow-2: ${shadow[2] ?? defaultElevation[2]} !important;
+      --mieweb-shadow-3: ${shadow[3] ?? defaultElevation[3]} !important;
+      --mieweb-shadow-4: ${shadow[4] ?? defaultElevation[4]} !important;
+      --mieweb-shadow-5: ${shadow[5] ?? defaultElevation[5]} !important;
+      --mieweb-shadow-6: ${shadow[6] ?? defaultElevation[6]} !important;
+      --mieweb-shadow-inner: ${shadow.inner ?? defaultElevation.inner} !important;
+      --mieweb-spacing-xs: ${spacing.xs} !important;
+      --mieweb-spacing-sm: ${spacing.sm} !important;
+      --mieweb-spacing-md: ${spacing.md} !important;
+      --mieweb-spacing-lg: ${spacing.lg} !important;
+      --mieweb-spacing-xl: ${spacing.xl} !important;
+      --mieweb-spacing-2xl: ${spacing['2xl']} !important;
+      --mieweb-duration-fast: ${motion.durations.fast} !important;
+      --mieweb-duration-base: ${motion.durations.base} !important;
+      --mieweb-duration-slow: ${motion.durations.slow} !important;
+      --mieweb-ease-standard: ${motion.easings.standard} !important;
+      --mieweb-ease-emphasized: ${motion.easings.emphasized} !important;
+      --mieweb-ease-decelerate: ${motion.easings.decelerate} !important;
+      --mieweb-focus-ring-width: ${focusRing.width} !important;
+      --mieweb-focus-ring-offset: ${focusRing.offset} !important;
+      --mieweb-focus-ring-style: ${focusRing.style ?? 'solid'} !important;
+      --mieweb-focus-ring-color: var(--mieweb-${focusRing.color ?? 'ring'}) !important;
+    }
+    [data-density='comfortable'] {
+      --mieweb-density-scale: 1 !important;
+    }
+    [data-density='compact'], body.condensed {
+      --mieweb-density-scale: ${density.compactScale} !important;
     }
   `;
   document.head.appendChild(styleTag);

package.json

@@ -235,12 +235,13 @@
     "tailwind-merge": "^2.6.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.3",
-    "@esheet/builder": "link:./packages/esheet/packages/builder",
-    "@esheet/renderer": "link:./packages/esheet/packages/renderer",
+    "@axe-core/playwright": "^4.11.3",
     "@esheet/adapters": "link:./packages/esheet/packages/adapters",
+    "@esheet/builder": "link:./packages/esheet/packages/builder",
     "@esheet/core": "link:./packages/esheet/packages/core",
     "@esheet/fields": "link:./packages/esheet/packages/fields",
+    "@esheet/renderer": "link:./packages/esheet/packages/renderer",
+    "@eslint/js": "^9.39.3",
     "@ozwell/react": "file:./packages/ozwell/packages/react",
     "@playwright/test": "^1.58.2",
     "@storybook/addon-a11y": "^10.2.11",

src/brands/bluehive.css

@@ -75,8 +75,60 @@
     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --mieweb-shadow-modal:
     0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+
+  /* Elevation Ramp */
+  --mieweb-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --mieweb-shadow-2:
+    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-3:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-4:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-5:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --mieweb-shadow-6: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --mieweb-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+  /* Spacing Scale (brand-owned; multiplied by --mieweb-density-scale) */
+  --mieweb-spacing-xs: 0.25rem;
+  --mieweb-spacing-sm: 0.5rem;
+  --mieweb-spacing-md: 0.75rem;
+  --mieweb-spacing-lg: 1rem;
+  --mieweb-spacing-xl: 1.5rem;
+  --mieweb-spacing-2xl: 2rem;
+
+  /* Density (1 = comfortable, 0.75 = compact) */
+  --mieweb-density-scale: 1;
+
+  /* Motion */
+  --mieweb-duration-fast: 120ms;
+  --mieweb-duration-base: 200ms;
+  --mieweb-duration-slow: 320ms;
+  --mieweb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --mieweb-ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+  --mieweb-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
+
+  /* Focus Ring */
+  --mieweb-focus-ring-width: 2px;
+  --mieweb-focus-ring-offset: 2px;
+  --mieweb-focus-ring-style: solid;
+  --mieweb-focus-ring-color: var(--mieweb-ring);
 }
 
+/* Compact density — preferred selector, plus legacy .condensed alias */
+[data-density='compact'],
+body.condensed {
+  --mieweb-density-scale: 0.75;
+}
+
+/* Honor reduced-motion preference at the token level */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --mieweb-duration-fast: 0ms;
+    --mieweb-duration-base: 0ms;
+    --mieweb-duration-slow: 0ms;
+  }
+
 /* Dark Mode */
 [data-theme='dark'],
 .dark {
@@ -152,5 +204,7 @@ kbd {
 }
 
 .focus-ring:focus-visible {
-  outline: 2px solid var(--mieweb-ring);
+  outline: var(--mieweb-focus-ring-width, 2px) var(--mieweb-focus-ring-style, solid)
+    var(--mieweb-focus-ring-color, var(--mieweb-ring));
+  outline-offset: var(--mieweb-focus-ring-offset, 2px);
 }

src/brands/bluehive.ts

@@ -93,6 +93,47 @@ export const bluehiveBrand: BrandConfig = {
     dropdown:
       '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
     modal: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    1: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    2: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+    3: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+    4: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    5: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+    6: '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+    inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+  },
+
+  spacing: {
+    xs: '0.25rem',
+    sm: '0.5rem',
+    md: '0.75rem',
+    lg: '1rem',
+    xl: '1.5rem',
+    '2xl': '2rem',
+  },
+
+  density: {
+    default: 'comfortable',
+    compactScale: 0.75,
+  },
+
+  motion: {
+    durations: {
+      fast: '120ms',
+      base: '200ms',
+      slow: '320ms',
+    },
+    easings: {
+      standard: 'cubic-bezier(0.2, 0, 0, 1)',
+      emphasized: 'cubic-bezier(0.3, 0, 0, 1)',
+      decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+  },
+
+  focusRing: {
+    width: '2px',
+    offset: '2px',
+    color: 'ring',
+    style: 'solid',
   },
 };