@scalepad/ui 0.1.1 → 0.2.1

package/src/index.ts

@@ -287,6 +287,12 @@ export type {
 export type { JSONContent } from '@tiptap/react';
 
 // Input components with Figma design specifications
+export {
+  ColorInput,
+  DEFAULT_COLOR_INPUT_SWATCHES,
+  DEFAULT_COLOR_INPUT_SWATCHES_PER_ROW,
+} from './components/ColorInput';
+export type { ColorInputProps } from './components/ColorInput';
 export { CommentComposer } from './components/CommentComposer';
 export type { CommentComposerProps } from './components/CommentComposer';
 export { MultiSelect } from './components/MultiSelect';
@@ -475,8 +481,10 @@ export {
   Textarea,
   Tooltip,
   UnstyledButton,
+  useMantineColorScheme,
 } from './mantine';
 export type {
+  MantineColorScheme,
   PopoverProps,
   ProgressProps,
   UnstyledButtonProps,

package/src/mantine.ts

@@ -17,8 +17,10 @@ export {
   Textarea,
   Tooltip,
   UnstyledButton,
+  useMantineColorScheme,
 } from '@mantine/core';
 export type {
+  MantineColorScheme,
   PopoverProps,
   ProgressProps,
   UnstyledButtonProps,

package/src/theme/themeContract.css.ts

@@ -1,7 +1,11 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens (semantic-colors, border-radius, spacing, shadows)
- * Theme contract for vanilla-extract: typed references to CSS variables injected by ThemeProvider.
+ * Theme contract for vanilla-extract: typed references to CSS variables
+ * injected by ThemeProvider.
+ *
+ * NOTE: extended by hand to add `background.surface.*`, `background.entity.*`,
+ * and the `color.chart.*` group alongside the auto-generated entries from the
+ * Figma export. Once the Figma source catches up these can fold back into the
+ * generated output.
  */
 
 import { createGlobalThemeContract } from '@vanilla-extract/css';
@@ -63,6 +67,18 @@ export const tokens = createGlobalThemeContract({
       inverseFilledHover: 'color-background-inverse-filled-hover',
       input: 'color-background-input',
       backdrop: 'color-background-backdrop',
+      surfaceRaised: 'color-background-surface-raised',
+      surfaceOverlay: 'color-background-surface-overlay',
+      entityTaskLight: 'color-background-entity-task-light',
+      entityTaskIcon: 'color-background-entity-task-icon',
+      entityInitiativeLight: 'color-background-entity-initiative-light',
+      entityInitiativeIcon: 'color-background-entity-initiative-icon',
+      entityGoalLight: 'color-background-entity-goal-light',
+      entityGoalIcon: 'color-background-entity-goal-icon',
+      entityMeetingLight: 'color-background-entity-meeting-light',
+      entityMeetingIcon: 'color-background-entity-meeting-icon',
+      entityDeliverableLight: 'color-background-entity-deliverable-light',
+      entityDeliverableIcon: 'color-background-entity-deliverable-icon',
     },
     stroke: {
       default: 'color-stroke-default',
@@ -97,6 +113,14 @@ export const tokens = createGlobalThemeContract({
       primaryStrong: 'color-icon-primary-strong',
       medium: 'color-icon-medium',
     },
+    chart: {
+      series1: 'color-chart-series-1',
+      series2: 'color-chart-series-2',
+      series3: 'color-chart-series-3',
+      series4: 'color-chart-series-4',
+      series5: 'color-chart-series-5',
+      series6: 'color-chart-series-6',
+    },
   },
   radius: {
     xs: 'radius-xs',

package/src/tokens/color-types.ts

@@ -1,9 +1,10 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens/source/semantic-colors.json
- *
  * Typed color token unions grouped by their intended usage.
  * Use these types to restrict color props to only valid tokens.
+ *
+ * NOTE: extended by hand to add `background.surface.*`, `background.entity.*`,
+ * and the new `ChartColor` type alongside the auto-generated entries from the
+ * Figma export of `packages/figma-tokens/source/semantic-colors.json`.
  */
 
 /** Text/foreground color tokens (for the `c` prop on text elements) */
@@ -62,7 +63,19 @@ export type BackgroundColor =
   | 'background.inverse.filled'
   | 'background.inverse.filled-hover'
   | 'background.input'
-  | 'background.backdrop';
+  | 'background.backdrop'
+  | 'background.surface.raised'
+  | 'background.surface.overlay'
+  | 'background.entity.task.light'
+  | 'background.entity.task.icon'
+  | 'background.entity.initiative.light'
+  | 'background.entity.initiative.icon'
+  | 'background.entity.goal.light'
+  | 'background.entity.goal.icon'
+  | 'background.entity.meeting.light'
+  | 'background.entity.meeting.icon'
+  | 'background.entity.deliverable.light'
+  | 'background.entity.deliverable.icon';
 
 /** Stroke/border color tokens (for borders and dividers) */
 export type StrokeColor =
@@ -99,9 +112,19 @@ export type IconColor =
   | 'icon.primary.strong'
   | 'icon.medium';
 
+/** Chart series color tokens (for Recharts series colors, legend swatches, etc.) */
+export type ChartColor =
+  | 'chart.series.1'
+  | 'chart.series.2'
+  | 'chart.series.3'
+  | 'chart.series.4'
+  | 'chart.series.5'
+  | 'chart.series.6';
+
 /** Any semantic color token */
 export type SemanticColor =
   | TextColor
   | BackgroundColor
   | StrokeColor
-  | IconColor;
+  | IconColor
+  | ChartColor;

package/src/tokens/colors.ts

@@ -1,6 +1,11 @@
 /**
  * Color primitives synced from Figma Design System (VCLfybgU3OaUUPrQdBaVmP).
  * Figma source of truth: Primitives collection.
+ *
+ * NOTE: `dark[]`, `greenAlpha`, and `grapeAlpha` have been hand-tuned in code
+ * ahead of the Figma back-sync to give dark mode real surface depth and proper
+ * brand-tinted alphas. Once those values land in Figma the file can revert to
+ * fully auto-generated.
  */
 
 import type { MantineColorsTuple } from '@mantine/core';
@@ -21,6 +26,14 @@ export const green: MantineColorsTuple = [
   '#005a3e',
 ];
 
+export const greenAlpha = {
+  '08': 'rgba(77, 155, 127, 0.08)',
+  '10': 'rgba(77, 155, 127, 0.10)',
+  '12': 'rgba(77, 155, 127, 0.12)',
+  '15': 'rgba(77, 155, 127, 0.15)',
+  '20': 'rgba(77, 155, 127, 0.20)',
+} as const;
+
 export const blue: MantineColorsTuple = [
   '#e7f5ff',
   '#d0ebff',
@@ -72,19 +85,41 @@ export const grayAlpha = {
   '9-60': 'rgba(17, 24, 39, 0.60)',
 } as const;
 
+/**
+ * Dark neutral scale tuned for sophisticated dark-mode surface depth (cool
+ * near-black with a subtle blue cast). 0 → lightest, 9 → darkest, matching
+ * the Mantine palette convention so dark-mode semantic mappings flip naturally
+ * against the light gray scale.
+ *
+ * Surface roles per index:
+ *   0 (#e7eaf2) headings, inverse content
+ *   1 (#c8cdd9) body text
+ *   2 (#8a92a6) subdued text
+ *   3 (#4a5163) disabled text, subdued borders
+ *   4 (#323847) default borders
+ *   5 (#252b38) hover / pressed surface
+ *   6 (#1c222d) elevated surface (popovers, dropdowns)
+ *   7 (#161b24) default surface (cards, panels)
+ *   8 (#11151c) body background
+ *   9 (#0b0e14) outer canvas / chrome
+ */
 export const dark: MantineColorsTuple = [
-  '#c9c9c9',
-  '#b8b8b8',
-  '#828282',
-  '#696969',
-  '#424242',
-  '#3b3b3b',
-  '#2e2e2e',
-  '#242424',
-  '#1f1f1f',
-  '#141414',
+  '#e7eaf2',
+  '#c8cdd9',
+  '#8a92a6',
+  '#4a5163',
+  '#323847',
+  '#252b38',
+  '#1c222d',
+  '#161b24',
+  '#11151c',
+  '#0b0e14',
 ];
 
+export const darkAlpha = {
+  '70': 'rgba(11, 14, 20, 0.70)',
+} as const;
+
 export const primary: MantineColorsTuple = [
   '#edf7f3',
   '#d5f0e5',
@@ -164,6 +199,13 @@ export const grape: MantineColorsTuple = [
   '#862e9c',
 ];
 
+export const grapeAlpha = {
+  '10': 'rgba(190, 75, 219, 0.10)',
+  '12': 'rgba(190, 75, 219, 0.12)',
+  '15': 'rgba(190, 75, 219, 0.15)',
+  '20': 'rgba(190, 75, 219, 0.20)',
+} as const;
+
 export const cyan: MantineColorsTuple = [
   '#e3fafc',
   '#c5f6fa',

package/src/tokens/index.ts

@@ -1,6 +1,10 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Figma Design Tokens
+ * Design tokens that mirror the LM Design System Figma file
+ * (https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System).
+ *
+ * Source of truth lives in Figma; edit these files by hand to mirror Figma
+ * changes and use the Figma MCP (`get_design_context`, `search_design_system`)
+ * to fetch authoritative values.
  */
 
 export * from './colors';

package/src/tokens/semantic-colors.ts

@@ -1,15 +1,27 @@
 /**
- * Semantic color tokens synced from Figma Design System (VCLfybgU3OaUUPrQdBaVmP).
+ * Semantic color tokens.
+ *
  * Values reference primitives in colors.ts; inline rgba for alpha variants.
- * Figma source of truth: Tokens collection (Light / Dark modes).
+ *
+ * NOTE: The dark-mode map and several new tokens (`background.surface.*`,
+ * `background.entity.*`, `chart.series.*`) are intentionally diverged from the
+ * Figma Design System (VCLfybgU3OaUUPrQdBaVmP) and are hand-tuned in code. The
+ * Figma source will be back-synced to match these values; until then, code is
+ * the source of truth.
+ *
+ * Original Figma source of truth: Tokens collection (Light / Dark modes).
  */
 
 import {
   black,
   dark,
+  darkAlpha,
   gray,
   grayAlpha,
   green,
+  greenAlpha,
+  grape,
+  grapeAlpha,
   indigo,
   indigoAlpha,
   red,
@@ -105,91 +117,183 @@ export const semanticColors = {
   'background.input': white,
   'background.backdrop': grayAlpha['9-60'],
   'icon.medium': gray[7],
+
+  // Elevated-surface tokens. In light mode both raised and overlay share the
+  // default white surface — depth comes from shadow, not color. In dark mode
+  // they step up the dark scale for visual elevation.
+  'background.surface.raised': white,
+  'background.surface.overlay': white,
+
+  // Entity-accent tokens (used by Spotlight Quick Create + similar surfaces).
+  // Each pair maps to one of the five semantic role families so they auto-flip
+  // with mode. The fifth slot (deliverable) borrows the grape family because
+  // there's no sixth core semantic role.
+  'background.entity.task.light': green[0],
+  'background.entity.task.icon': green[7],
+  'background.entity.initiative.light': indigoAlpha['10'],
+  'background.entity.initiative.icon': indigo[7],
+  'background.entity.goal.light': teal[0],
+  'background.entity.goal.icon': teal[7],
+  'background.entity.meeting.light': yellowAlpha['10'],
+  'background.entity.meeting.icon': yellow[7],
+  'background.entity.deliverable.light': grape[0],
+  'background.entity.deliverable.icon': grape[7],
+
+  // Chart series — deterministic, tuned-for-stacking palette consumed by
+  // budget / dashboard / trend charts. Sorted by visual weight; series 1 is
+  // the primary brand and the rest stack underneath.
+  'chart.series.1': green[7],
+  'chart.series.2': indigo[6],
+  'chart.series.3': teal[6],
+  'chart.series.4': yellow[7],
+  'chart.series.5': red[7],
+  'chart.series.6': grape[6],
 } as const;
 
 /** Dark mode semantic color values */
 export const semanticColorsDark = {
-  'text.title': dark[0],
-  'text.danger.default': red[7],
-  'text.link': green[3],
-  'background.default': dark[6],
-  'background.default-hover': dark[5],
-  'text.default': white,
-  'stroke.default': dark[4],
-  'stroke.light': dark[5],
-  'background.body': dark[7],
-  'text.disabled.default': dark[3],
+  // Foundation surfaces — distinct levels for real depth hierarchy.
+  'background.body': dark[8],
+  'background.default': dark[7],
+  'background.default-hover': dark[6],
   'background.disabled.default': dark[6],
   'background.transparent': transparent,
-  'background.primary.filled': green[5],
-  'background.primary.filled-hover': green[4],
-  'background.warning.filled': yellow[8],
-  'background.success.filled': teal[8],
-  'background.subdued.light': dark[5],
-  'background.subdued.ultralight': dark[6],
-  'background.danger.filled': red[8],
-  'background.subdued.filled': gray[7],
-  'background.warning.filled-hover': yellow[9],
-  'background.success.filled-hover': teal[9],
-  'background.danger.filled-hover': red[9],
-  'background.subdued.filled-hover': gray[8],
-  'background.danger.light': red[4],
-  'background.primary.light': green[9],
-  'background.warning.light': yellowAlpha['15'],
-  'background.success.light': tealAlpha['15'],
-  'text.subdued.default': gray[3],
-  'text.primary.default': green[3],
-  'text.primary.light': green[4],
-  'text.warning.default': yellow[3],
-  'text.success.default': teal[3],
-  'background.primary.light-hover': green[8],
+  'background.input': dark[7],
+  'background.backdrop': darkAlpha['70'],
+
+  'background.surface.raised': dark[6],
+  'background.surface.overlay': dark[5],
+
+  // Subdued (neutral) surfaces — tied to the dark scale so they keep their
+  // relationship with `background.default`. `ultralight` is intentionally a
+  // *deeper* recess in dark mode (`dark[9]`, two steps below the card) rather
+  // than the single off-white step of light mode — near-black perceptually
+  // compresses, so the wrapper needs more delta to read as a distinct frame
+  // behind cards (kanban columns, assessment blocks, drawer wells).
+  'background.subdued.light': dark[6],
+  'background.subdued.light-hover': dark[5],
+  'background.subdued.ultralight': dark[9],
+  'background.subdued.filled': dark[5],
+  'background.subdued.filled-hover': dark[4],
+
+  // Brand / role filled surfaces — keep the strong saturated hue so primary
+  // CTAs still read as primary in dark.
+  'background.primary.filled': green[7],
+  'background.primary.filled-hover': green[6],
+  'background.warning.filled': yellow[6],
+  'background.warning.filled-hover': yellow[7],
+  'background.success.filled': teal[6],
+  'background.success.filled-hover': teal[7],
+  'background.danger.filled': red[7],
+  'background.danger.filled-hover': red[8],
+  'background.information.filled': indigo[6],
+  'background.information.filled-hover': indigo[7],
+
+  // Soft / tinted role surfaces — translucent washes over the dark base, so
+  // they read as brand-tinted instead of near-black.
+  'background.primary.light': greenAlpha['12'],
+  'background.primary.light-hover': greenAlpha['20'],
+  'background.warning.light': yellowAlpha['12'],
   'background.warning.light-hover': yellowAlpha['20'],
+  'background.success.light': tealAlpha['12'],
   'background.success.light-hover': tealAlpha['20'],
-  'background.danger.light-hover': red[5],
-  'background.subdued.light-hover': dark[6],
-  'stroke.primary.default': green[6],
-  'text.danger.disabled': redAlpha['50'],
-  'stroke.success.default': teal[3],
-  'stroke.danger.default': red[7],
-  'stroke.subdued.strong': gray[3],
-  'stroke.warning.default': yellow[3],
-  'background.information.filled': indigo[8],
-  'background.information.filled-hover': indigo[9],
-  'background.information.light': indigoAlpha['15'],
+  'background.danger.light': redAlpha['12'],
+  'background.danger.light-hover': redAlpha['20'],
+  'background.information.light': indigoAlpha['12'],
   'background.information.light-hover': indigoAlpha['20'],
-  'stroke.information.default': indigo[3],
-  'text.information.default': indigo[3],
-  'stroke.focus.default': green[3],
+
+  // Inverse fills (e.g. tooltips, default-on-dark anchors) — light surface,
+  // dark text/icon.
   'background.inverse.filled': dark[0],
   'background.inverse.filled-hover': dark[1],
-  'icon.light': dark[3],
-  'icon.danger.default': red[7],
-  'icon.danger.disabled': redAlpha['50'],
-  'text.danger.strong': red[9],
-  'text.warning.strong': yellow[9],
-  'text.success.strong': teal[9],
-  'text.information.strong': indigo[9],
-  'icon.warning.default': yellow[5],
-  'icon.warning.strong': yellow[9],
-  'icon.danger.strong': red[9],
-  'icon.information.default': indigo[5],
-  'icon.information.strong': indigo[9],
-  'icon.success.default': teal[5],
-  'icon.success.strong': teal[9],
-  'text.subdued.strong': gray[6],
-  'icon.default': dark[1],
-  'stroke.inverse': dark[6],
-  'stroke.subdued.default': gray[6],
-  'text.inverse': dark[9],
+
+  // Entity accents — soft translucent role washes for the icon block,
+  // strong saturated tone for the icon foreground.
+  'background.entity.task.light': greenAlpha['12'],
+  'background.entity.task.icon': green[3],
+  'background.entity.initiative.light': indigoAlpha['15'],
+  'background.entity.initiative.icon': indigo[3],
+  'background.entity.goal.light': tealAlpha['12'],
+  'background.entity.goal.icon': teal[3],
+  'background.entity.meeting.light': yellowAlpha['15'],
+  'background.entity.meeting.icon': yellow[4],
+  'background.entity.deliverable.light': grapeAlpha['15'],
+  'background.entity.deliverable.icon': grape[3],
+
+  // Text colors — sit on the dark surface scale. AA contrast against
+  // background.body (dark[8]) verified at component-build time.
+  'text.title': dark[0],
+  'text.default': dark[1],
+  'text.subdued.default': dark[2],
+  'text.subdued.strong': dark[1],
+  'text.disabled.default': dark[3],
+  // `text.inverse` is the label color that sits on FILLED / SATURATED brand
+  // backgrounds (primary button green, danger red, avatar colour swatches,
+  // dark tooltip surfaces). Those backgrounds keep the same hue in both
+  // modes, so their contrast text must stay near-white — flipping this to a
+  // dark value produces unreadable black-on-green / black-on-red elements
+  // in dark mode. Keep this in sync with the light-mode value.
+  'text.inverse': white,
+  'text.link': green[3],
+
+  // Brand / role text — bright, readable on dark surfaces.
+  'text.primary.default': green[3],
+  'text.primary.light': green[4],
+  'text.warning.default': yellow[4],
+  'text.warning.strong': yellow[2],
+  'text.success.default': teal[3],
+  'text.success.strong': teal[2],
+  'text.danger.default': red[4],
+  'text.danger.strong': red[2],
+  'text.danger.disabled': redAlpha['50'],
+  'text.information.default': indigo[3],
+  'text.information.strong': indigo[2],
+
+  // Strokes — borders, dividers, focus rings.
+  'stroke.default': dark[4],
+  'stroke.light': dark[5],
   'stroke.strong': dark[2],
-  'icon.inverse': dark[9],
+  'stroke.subdued.default': dark[5],
+  'stroke.subdued.strong': dark[3],
+  // `stroke.inverse` is the border color used by `outline-inverse` button /
+  // icon-button variants that sit on top of saturated coloured backgrounds.
+  // Same reasoning as `text.inverse` — the host surface doesn't flip, so the
+  // border on top stays white in both modes.
+  'stroke.inverse': white,
   'stroke.icon': dark[1],
+  'stroke.focus.default': green[4],
+  'stroke.focus.strong': green[3],
+  'stroke.primary.default': green[5],
+  'stroke.success.default': teal[4],
+  'stroke.danger.default': red[5],
+  'stroke.warning.default': yellow[5],
+  'stroke.information.default': indigo[4],
+
+  // Icons.
+  'icon.default': dark[1],
+  'icon.light': dark[3],
+  'icon.medium': dark[2],
+  'icon.inverse': dark[9],
   'icon.primary.default': green[3],
-  'icon.primary.strong': green[1],
-  'stroke.focus.strong': green[1],
-  'background.input': dark[6],
-  'background.backdrop': grayAlpha['9-60'],
-  'icon.medium': dark[4],
+  'icon.primary.strong': green[2],
+  'icon.danger.default': red[4],
+  'icon.danger.strong': red[2],
+  'icon.danger.disabled': redAlpha['50'],
+  'icon.warning.default': yellow[4],
+  'icon.warning.strong': yellow[2],
+  'icon.success.default': teal[3],
+  'icon.success.strong': teal[2],
+  'icon.information.default': indigo[3],
+  'icon.information.strong': indigo[2],
+
+  // Chart series — brighter values so series read clearly against the dark
+  // surface. Order matches the light map for stable legends.
+  'chart.series.1': green[4],
+  'chart.series.2': indigo[3],
+  'chart.series.3': teal[3],
+  'chart.series.4': yellow[4],
+  'chart.series.5': red[4],
+  'chart.series.6': grape[3],
 } as const;
 
 function semanticKeyToCssVarName(key: string): string {

package/src/tokens/semantic-tokens-css.ts

@@ -1,41 +1,37 @@
 /**
  * Semantic design token CSS custom properties (radius, spacing, shadows, z-index, font).
  * Injected by ThemeProvider so components can use var(--radius-*), var(--spacing-*), etc.
+ *
+ * Shadows are emitted twice — once under the light scheme selector, once under
+ * the dark scheme selector — so `--shadow-*` flips automatically with the
+ * Mantine color scheme. All other tokens (radius, spacing, z-index, font) are
+ * mode-agnostic and live in a single shared block.
  */
 
 import { figmaRadius } from './radius';
-import { figmaShadows } from './shadows';
+import { figmaShadows, figmaShadowsDark } from './shadows';
 import { figmaSpacing } from './spacing';
 import { figmaFontFamilies } from './typography';
 import { zIndex } from './zIndex';
 
-function buildSemanticTokensCss(): string {
+function buildSharedTokensCss(): string {
   const lines: string[] = [
     ':root, [data-mantine-color-scheme="light"], [data-mantine-color-scheme="dark"] {',
   ];
 
-  // Radius
   for (const [key, value] of Object.entries(figmaRadius)) {
     lines.push(`  --radius-${key}: ${value};`);
   }
   lines.push(`  --radius-default: ${figmaRadius.lg};`);
 
-  // Spacing
   for (const [key, value] of Object.entries(figmaSpacing)) {
     lines.push(`  --spacing-${key}: ${value};`);
   }
 
-  // Shadows
-  for (const [key, value] of Object.entries(figmaShadows)) {
-    lines.push(`  --shadow-${key}: ${value};`);
-  }
-
-  // Z-index
   for (const [key, value] of Object.entries(zIndex)) {
     lines.push(`  --z-index-${key}: ${value};`);
   }
 
-  // Font families
   lines.push(
     `  --font-family-monospace: "${figmaFontFamilies['font-family-monospace']}", "Courier New", monospace;`,
   );
@@ -50,4 +46,30 @@ function buildSemanticTokensCss(): string {
   return lines.join('\n');
 }
 
-export const semanticTokensCss = buildSemanticTokensCss();
+function buildShadowCss(
+  shadowMap: Record<string, string>,
+  selector: string,
+): string {
+  const lines = [`${selector} {`];
+  for (const [key, value] of Object.entries(shadowMap)) {
+    // Emit both --shadow-* (used by vanilla-extract `tokens.shadow.*`) and
+    // --mantine-shadow-* (consumed by Mantine's Card/Paper/Modal defaults)
+    // so the entire component surface flips with the active color scheme.
+    lines.push(`  --shadow-${key}: ${value};`);
+    lines.push(`  --mantine-shadow-${key}: ${value};`);
+  }
+  lines.push('}');
+  return lines.join('\n');
+}
+
+const sharedTokensCss = buildSharedTokensCss();
+const lightShadowsCss = buildShadowCss(
+  figmaShadows,
+  ':root, [data-mantine-color-scheme="light"]',
+);
+const darkShadowsCss = buildShadowCss(
+  figmaShadowsDark,
+  '[data-mantine-color-scheme="dark"]',
+);
+
+export const semanticTokensCss = `${sharedTokensCss}\n${lightShadowsCss}\n${darkShadowsCss}`;

package/src/tokens/shadows.ts

@@ -1,11 +1,35 @@
 /**
- * AUTO-GENERATED - DO NOT EDIT
- * Generated from: packages/figma-tokens/source/shadows.json
+ * Shadow tokens.
+ *
+ * Both modes deliberately keep cards / papers / modals / drawers / headers
+ * flat: depth is carried by the body↔surface background delta plus the 1px
+ * `stroke.default` border on each surface. The original Figma export used a
+ * 10% black drop-shadow on every elevation level, which stacked up to a
+ * visually noisy "everything floats" look once cards were nested inside
+ * drawers, modals, and dashboards.
+ *
+ * `lg` is the one exception: floating overlays (popovers, picker flyouts)
+ * sit on top of scrollable canvas content where a border alone does not
+ * read as "lifted off the page". They get a single soft drop-shadow tuned
+ * per mode so they remain clearly elevated.
  */
 
 export const figmaShadows = {
-  sm: '0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px -1px rgba(0, 0, 0, 0.10)',
-  md: '0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -2px rgba(0, 0, 0, 0.10)',
-  lg: '0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px -4px 6px rgba(0, 0, 0, 0.10)',
-  xl: '0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px -6px 10px rgba(0, 0, 0, 0.10)',
+  sm: 'none',
+  md: 'none',
+  lg: '0px 8px 16px -4px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.06)',
+  xl: 'none',
+} as const;
+
+/**
+ * Dark-mode shadow values. Same flat treatment as light mode, but `lg` uses
+ * a heavier black alpha because the underlying surfaces are already dark —
+ * a 10% black drop-shadow that reads as elevation in light mode disappears
+ * entirely against `dark[7]`/`dark[8]`.
+ */
+export const figmaShadowsDark = {
+  sm: 'none',
+  md: 'none',
+  lg: '0px 8px 16px -4px rgba(0, 0, 0, 0.25)',
+  xl: 'none',
 } as const;