@scalepad/ui 0.1.1 → 0.2.0

package/scripts/verify-consumption.mjs

@@ -0,0 +1,242 @@
+#!/usr/bin/env node
+/**
+ * verify-consumption
+ *
+ * Smoke test that catches the class of bug a colleague hit when consuming
+ * `@scalepad/ui` from a fresh project:
+ *
+ *   - Missing transitive peer dependencies (e.g. @tiptap/core, @tiptap/extensions)
+ *   - Vite setup gaps (vanilla-extract plugin not wired up, optimizeDeps not configured)
+ *
+ * What it does:
+ *   1. `pnpm pack` the local `@scalepad/ui` and `@scalepad/ui-utils` workspaces.
+ *   2. Create a temp Vite + React 19 project in the OS temp dir.
+ *   3. Install the local tarballs plus the required peers from the README.
+ *   4. Write a minimal `App.tsx` that imports `ThemeProvider`, `Button`,
+ *      `showToast`, and `SlashRichTextEditor` (so all the optional-peer
+ *      code paths are exercised).
+ *   5. Run `vite build`. If exit code is non-zero, this script fails.
+ *
+ * Intended use:
+ *   `pnpm --filter @scalepad/ui run verify:consumption` before publishing
+ *   a new version. Not wired into CI yet; we'll iterate on speed first.
+ */
+import { spawnSync } from 'node:child_process';
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const pkgRoot = resolve(__dirname, '..');
+const monorepoRoot = resolve(pkgRoot, '..', '..');
+const utilsRoot = resolve(monorepoRoot, 'packages', 'utils');
+
+const log = (msg) => console.log(`[verify-consumption] ${msg}`);
+const die = (msg) => {
+  console.error(`[verify-consumption] FAIL: ${msg}`);
+  process.exit(1);
+};
+
+function run(cmd, args, opts = {}) {
+  const display = `${cmd} ${args.join(' ')}`;
+  log(`$ ${display} (cwd=${opts.cwd ?? process.cwd()})`);
+  const result = spawnSync(cmd, args, {
+    stdio: 'inherit',
+    encoding: 'utf8',
+    ...opts,
+  });
+  if (result.status !== 0) {
+    die(`${display} exited with status ${result.status}`);
+  }
+  return result;
+}
+
+function findTarball(dir, prefix) {
+  const matches = readdirSync(dir).filter(
+    (f) => f.startsWith(prefix) && f.endsWith('.tgz'),
+  );
+  if (matches.length === 0) {
+    die(`no ${prefix}*.tgz produced in ${dir}`);
+  }
+  if (matches.length > 1) {
+    log(`warning: multiple ${prefix}*.tgz found, using newest`);
+  }
+  // sort by mtime via spawnSync(ls -t) would be heavier; for two same-run packs,
+  // alphabetical reverse-sort gets the higher version number.
+  matches.sort().reverse();
+  return join(dir, matches[0]);
+}
+
+// 1. Pack both workspaces.
+log('packing @scalepad/ui and @scalepad/ui-utils...');
+run('pnpm', ['pack', '--pack-destination', pkgRoot], { cwd: pkgRoot });
+run('pnpm', ['pack', '--pack-destination', utilsRoot], { cwd: utilsRoot });
+
+const uiTarball = findTarball(pkgRoot, 'scalepad-ui-');
+const utilsTarball = findTarball(utilsRoot, 'scalepad-ui-utils-');
+log(`ui tarball   = ${uiTarball}`);
+log(`utils tarball= ${utilsTarball}`);
+
+// 2. Make a temp project.
+const projectDir = mkdtempSync(join(tmpdir(), 'scalepad-ui-verify-'));
+log(`temp project = ${projectDir}`);
+mkdirSync(join(projectDir, 'src'), { recursive: true });
+
+// 3. Write package.json with the README's required + optional peers.
+const projectPkg = {
+  name: 'scalepad-ui-verify',
+  private: true,
+  version: '0.0.0',
+  type: 'module',
+  scripts: {
+    build: 'vite build',
+  },
+  // Required peers only. Mantine, recharts, clsx, react-intersection-observer
+  // come in as runtime deps of @scalepad/ui — consumers do NOT install them.
+  // Tiptap is an optional peer; this smoke test exercises the rich-text editor
+  // entry points, so we install the full Tiptap set here.
+  dependencies: {
+    '@scalepad/ui': `file:${uiTarball}`,
+    '@scalepad/ui-utils': `file:${utilsTarball}`,
+    '@tanstack/react-query': '^5.0.0',
+    '@tanstack/react-table': '^8.21.3',
+    '@vanilla-extract/css': '^1.16.2',
+    dayjs: '^1.11.19',
+    'lucide-react': '^0.469.0',
+    react: '^19.0.0',
+    'react-dom': '^19.0.0',
+    '@tiptap/core': '^3.22.3',
+    '@tiptap/extensions': '^3.22.3',
+    '@tiptap/pm': '^3.22.3',
+    '@tiptap/react': '^3.22.3',
+    '@tiptap/starter-kit': '^3.22.3',
+    '@tiptap/suggestion': '^3.22.3',
+    '@tiptap/extension-blockquote': '^3.22.3',
+    '@tiptap/extension-bold': '^3.22.3',
+    '@tiptap/extension-bubble-menu': '^3.22.3',
+    '@tiptap/extension-bullet-list': '^3.22.3',
+    '@tiptap/extension-code': '^3.22.3',
+    '@tiptap/extension-code-block': '^3.22.3',
+    '@tiptap/extension-document': '^3.22.3',
+    '@tiptap/extension-dropcursor': '^3.22.3',
+    '@tiptap/extension-gapcursor': '^3.22.3',
+    '@tiptap/extension-hard-break': '^3.22.3',
+    '@tiptap/extension-heading': '^3.22.3',
+    '@tiptap/extension-horizontal-rule': '^3.22.3',
+    '@tiptap/extension-image': '^3.22.3',
+    '@tiptap/extension-italic': '^3.22.3',
+    '@tiptap/extension-link': '^3.22.3',
+    '@tiptap/extension-list': '^3.22.3',
+    '@tiptap/extension-list-item': '^3.22.3',
+    '@tiptap/extension-list-keymap': '^3.22.3',
+    '@tiptap/extension-ordered-list': '^3.22.3',
+    '@tiptap/extension-paragraph': '^3.22.3',
+    '@tiptap/extension-placeholder': '^3.22.3',
+    '@tiptap/extension-strike': '^3.22.3',
+    '@tiptap/extension-text': '^3.22.3',
+    '@tiptap/extension-underline': '^3.22.3',
+  },
+  devDependencies: {
+    '@vitejs/plugin-react': '^5.0.4',
+    '@types/react': '^19.2.2',
+    '@types/react-dom': '^19.2.1',
+    typescript: '^6.0.3',
+    vite: '^7.1.9',
+  },
+};
+writeFileSync(
+  join(projectDir, 'package.json'),
+  JSON.stringify(projectPkg, null, 2),
+);
+
+writeFileSync(
+  join(projectDir, 'tsconfig.json'),
+  JSON.stringify(
+    {
+      compilerOptions: {
+        target: 'ES2022',
+        lib: ['ES2022', 'DOM', 'DOM.Iterable'],
+        jsx: 'react-jsx',
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        noEmit: true,
+        resolveJsonModule: true,
+        isolatedModules: true,
+      },
+      include: ['src'],
+    },
+    null,
+    2,
+  ),
+);
+
+writeFileSync(
+  join(projectDir, 'vite.config.ts'),
+  `import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { scalepadUi } from '@scalepad/ui/vite';
+
+export default defineConfig({
+  plugins: [react(), scalepadUi()],
+});
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'index.html'),
+  `<!doctype html>
+<html>
+  <head><meta charset="utf-8" /><title>verify</title></head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`,
+);
+
+writeFileSync(
+  join(projectDir, 'src', 'main.tsx'),
+  `import '@mantine/core/styles.css';
+import { createRoot } from 'react-dom/client';
+import {
+  Button,
+  Notifications,
+  showSuccessToast,
+  SlashRichTextEditor,
+  ThemeProvider,
+} from '@scalepad/ui';
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Notifications />
+      <Button onClick={() => showSuccessToast({ title: 'hi', message: 'world' })}>
+        Click
+      </Button>
+      <SlashRichTextEditor commands={[]} placeholder="type" />
+    </ThemeProvider>
+  );
+}
+
+createRoot(document.getElementById('root')!).render(<App />);
+`,
+);
+
+// 4. Install. Use npm so we don't depend on the user's pnpm workspace config;
+//    file: deps work cleanly under npm and don't leak the monorepo's hoisting.
+log('installing in temp project (this is slow on cold cache)...');
+run('npm', ['install', '--no-audit', '--no-fund', '--legacy-peer-deps=false'], {
+  cwd: projectDir,
+});
+
+// 5. Build.
+log('building...');
+run('npx', ['vite', 'build'], { cwd: projectDir });
+
+log('OK — built successfully.');
+log(`(temp project left at ${projectDir} for inspection; delete when done)`);

package/src/ThemeProvider.tsx

@@ -9,9 +9,14 @@ import '@mantine/schedule/styles.css';
 // oxlint-disable-next-line import/no-unassigned-import
 import './inter-font';
 
-import type { ReactNode } from 'react';
+import { useMemo, type ReactNode } from 'react';
 
-import { MantineProvider, type MantineThemeOverride } from '@mantine/core';
+import {
+  localStorageColorSchemeManager,
+  MantineProvider,
+  type MantineColorScheme,
+  type MantineThemeOverride,
+} from '@mantine/core';
 
 import { mantineTheme } from './theme';
 import { semanticColorsCss } from './tokens/semantic-colors';
@@ -20,15 +25,58 @@ import { semanticTokensCss } from './tokens/semantic-tokens-css';
 export interface ThemeProviderProps {
   children: ReactNode;
   theme?: MantineThemeOverride;
+  /**
+   * Initial color scheme used when no persisted value is found. Defaults to
+   * `'auto'` so a fresh visitor follows their OS appearance preference.
+   */
+  defaultColorScheme?: MantineColorScheme;
+  /**
+   * localStorage key used to persist the user's color scheme choice. Apps that
+   * embed ThemeProvider can namespace this to keep multiple apps from sharing
+   * a key on the same origin.
+   */
+  colorSchemeStorageKey?: string;
 }
 
-export function ThemeProvider({ children, theme }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  theme,
+  defaultColorScheme = 'auto',
+  colorSchemeStorageKey = 'scalepad-ui.color-scheme',
+}: ThemeProviderProps) {
+  const colorSchemeManager = useMemo(
+    () => localStorageColorSchemeManager({ key: colorSchemeStorageKey }),
+    [colorSchemeStorageKey],
+  );
+
   return (
-    <MantineProvider theme={theme || mantineTheme}>
+    <MantineProvider
+      theme={theme || mantineTheme}
+      defaultColorScheme={defaultColorScheme}
+      colorSchemeManager={colorSchemeManager}
+    >
       {/* Inject Figma semantic color tokens as CSS custom properties */}
       <style dangerouslySetInnerHTML={{ __html: semanticColorsCss }} />
       {/* Inject semantic radius, spacing, shadows, z-index, font-family */}
       <style dangerouslySetInnerHTML={{ __html: semanticTokensCss }} />
+      {/*
+        Global font / glyph rendering. macOS defaults to subpixel
+        antialiasing which makes light text on dark surfaces look
+        bolded/blurry, and Mantine's reset sometimes overrides body-level
+        inline styles. Forcing grayscale antialiasing + optimizeLegibility
+        keeps text crisp in both light and dark mode.
+      */}
+      <style
+        dangerouslySetInnerHTML={{
+          __html: `
+            html, body {
+              -webkit-font-smoothing: antialiased;
+              -moz-osx-font-smoothing: grayscale;
+              text-rendering: optimizeLegibility;
+            }
+          `,
+        }}
+      />
       {/* Override Mantine Table hover to use semantic primary light */}
       <style
         dangerouslySetInnerHTML={{

package/src/components/IconButton/IconButton.tsx

@@ -18,11 +18,58 @@ export interface IconButtonProps extends MantineActionIconProps {
   variant?: IconButtonVariant;
 }
 
+/**
+ * Mantine's ActionIcon resolves `--ai-color`, `--ai-bg`, `--ai-hover`, and
+ * `--ai-hover-color` to the variant resolver's output and applies them as
+ * inline `style="..."` on the rendered button. Inline styles win over our
+ * vanilla-extract class CSS, so a class-level `color: tokens.color.text.*`
+ * can be silently overridden by Mantine's resolved variant color (especially
+ * in dark mode where `subtle + primary` resolves to a pale green that reads
+ * as washed out or "black" against the dark surface).
+ *
+ * Returning a `vars` *function* here pins the CSS variables to our semantic
+ * tokens at the same level Mantine writes them — instance vars merge into
+ * (and override) the varsResolver output, so `color: var(--ai-color)` in
+ * Mantine's class rule picks up our token instead. Mantine 8 invokes the
+ * `vars` prop as a function (`vars(theme, props)`), so it must be callable —
+ * passing a plain object throws "vars is not a function" at render time.
+ */
+type ActionIconVarsFn = MantineActionIconProps['vars'];
+
+const ghostVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const ghostMutedVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-subdued-strong)',
+    '--ai-bg': 'transparent',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
+const outlineVars: ActionIconVarsFn = () => ({
+  root: {
+    '--ai-color': 'var(--color-text-default)',
+    '--ai-bg': 'var(--color-background-default)',
+    '--ai-bd': '1px solid var(--color-stroke-default)',
+    '--ai-hover': 'var(--color-background-primary-light)',
+    '--ai-hover-color': 'var(--color-text-primary-default)',
+  },
+});
+
 const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ variant = 'outline', className, ...props }, ref) => {
     let mantineVariant: 'outline' | 'subtle' | 'filled' = 'outline';
     let mantineColor = props.color;
     let customClassName = className;
+    let customVars: ActionIconVarsFn | undefined;
 
     if (variant === 'primary') {
       mantineVariant = 'filled';
@@ -40,6 +87,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'outline') {
       mantineVariant = 'outline';
       customClassName = `${iconButtonStyles.outlineIconButton}${className ? ` ${className}` : ''}`;
+      customVars = outlineVars;
     } else if (variant === 'outline-inverse') {
       mantineVariant = 'outline';
       mantineColor = 'white';
@@ -47,9 +95,11 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
     } else if (variant === 'ghost') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostVars;
     } else if (variant === 'ghost-muted') {
       mantineVariant = 'subtle';
       customClassName = `${iconButtonStyles.ghostMutedIconButton}${className ? ` ${className}` : ''}`;
+      customVars = ghostMutedVars;
     }
 
     return (
@@ -58,6 +108,7 @@ const IconButtonBase = forwardRef<HTMLButtonElement, IconButtonProps>(
         variant={mantineVariant}
         color={mantineColor}
         className={customClassName}
+        vars={customVars}
         {...props}
         radius={props.radius ?? 'lg'}
       />

package/src/components/SubNavigation/SubNavigation.css.ts

@@ -1,5 +1,6 @@
 import { style } from '@vanilla-extract/css';
 
+import { mantineVars } from '../../theme/mantineVars';
 import { tokens } from '../../theme/themeContract.css';
 import { textStyleVariants } from '../../tokens/text-styles';
 
@@ -59,6 +60,25 @@ export const itemActive = style({
       backgroundColor: tokens.color.background.primaryLightHover,
       color: tokens.color.text.primaryDefault,
     },
+    // Dark mode: the global `primaryLight` (greenAlpha 12%) reads as a barely
+    // perceivable wash and `primaryDefault` (green[3]) is too pale to register
+    // as "selected". The 25-35% tint we initially tried still composited to a
+    // dim teal over the dark canvas (≈#243B3B over #161B24). Push the green
+    // wash to ~50% / 60% so the active tab reads as a clearly saturated
+    // brand surface, and pair with near-white text for a strong "selected"
+    // affordance.
+    //
+    // `mantineVars.darkSelector` already ends in ` &`, so we use it raw
+    // rather than appending another ` &` (which would produce an invalid
+    // self-descendant selector and silently fail to apply).
+    [mantineVars.darkSelector]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.5)',
+      color: tokens.color.text.title,
+    },
+    [`${mantineVars.darkSelector}:hover`]: {
+      backgroundColor: 'rgba(77, 155, 127, 0.6)',
+      color: tokens.color.text.title,
+    },
   },
 });
 

package/src/index.ts

@@ -475,8 +475,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',