@databricks/design-system 2.0.8 → 2.0.10

package/scaffold_tool/src/theme-picker-templates.js

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createThemeProviderFile = createThemeProviderFile;
+exports.createThemePickerFile = createThemePickerFile;
+function createThemeProviderFile(initialTheme = 'dubois') {
+    return `import { Global } from '@emotion/react';
+import { createContext, useContext, useEffect, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { ApplyGlobalStyles, DesignSystemProvider, DesignSystemThemeProvider } from '@databricks/design-system';
+import { APP_THEMES, isAppThemeName, type AppThemeName } from './app-themes';
+
+export type AppColorMode = 'system' | 'light' | 'dark';
+
+export interface AppThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: AppThemeName;
+  colorMode?: AppColorMode;
+}
+
+export interface AppThemeContextValue {
+  themeName: AppThemeName;
+  setThemeName: (name: AppThemeName) => void;
+  colorMode: AppColorMode;
+  setColorMode: (mode: AppColorMode) => void;
+  isColorModeControlled: boolean;
+}
+
+const AppThemeContext = createContext<AppThemeContextValue | undefined>(undefined);
+
+export function AppThemeProvider({ children, defaultTheme = '${initialTheme}', colorMode }: AppThemeProviderProps) {
+  const [themeName, setThemeName] = useState<AppThemeName>(defaultTheme);
+  const [savedColorMode, setSavedColorMode] = useState<AppColorMode>('system');
+  const systemDarkMode = useSyncExternalStore(subscribeToColorScheme, getSystemDarkMode, getServerDarkMode);
+  const selectedColorMode = colorMode ?? savedColorMode;
+  const isDarkMode = selectedColorMode === 'system' ? systemDarkMode : selectedColorMode === 'dark';
+  const selectedTheme = APP_THEMES[themeName];
+
+  // Read after mounting so server markup and the first client render agree.
+  useEffect(() => {
+    const storedTheme = readPreference('dbui.theme');
+    const storedMode = readPreference('dbui.color-mode');
+    if (isAppThemeName(storedTheme)) setThemeName(storedTheme);
+    if (isAppColorMode(storedMode)) setSavedColorMode(storedMode);
+  }, []);
+
+  function selectTheme(name: AppThemeName) {
+    setThemeName(name);
+    savePreference('dbui.theme', name);
+  }
+
+  function selectColorMode(mode: AppColorMode) {
+    setSavedColorMode(mode);
+    savePreference('dbui.color-mode', mode);
+  }
+
+  return (
+    <AppThemeContext.Provider
+      value={{
+        themeName,
+        setThemeName: selectTheme,
+        colorMode: selectedColorMode,
+        setColorMode: selectColorMode,
+        isColorModeControlled: colorMode !== undefined,
+      }}
+    >
+      <DesignSystemThemeProvider
+        isDarkMode={isDarkMode}
+        semanticColors={isDarkMode ? selectedTheme.darkColors : selectedTheme.lightColors}
+        designTokenOverrides={isDarkMode ? selectedTheme.darkTokens : selectedTheme.lightTokens}
+      >
+        <DesignSystemProvider themeOverrides={selectedTheme.themeOverrides}>
+          <ApplyGlobalStyles />
+          <Global styles={[selectedTheme.css, { body: { colorScheme: isDarkMode ? 'dark' : 'light' } }]} />
+          {children}
+        </DesignSystemProvider>
+      </DesignSystemThemeProvider>
+    </AppThemeContext.Provider>
+  );
+}
+
+export function useAppTheme(): AppThemeContextValue {
+  const context = useContext(AppThemeContext);
+  if (!context) throw new Error('useAppTheme must be used within AppThemeProvider.');
+  return context;
+}
+
+export function isAppColorMode(value: string | undefined): value is AppColorMode {
+  return value === 'system' || value === 'light' || value === 'dark';
+}
+
+function readPreference(key: string): string | undefined {
+  try {
+    return window.localStorage.getItem(key) ?? undefined;
+  } catch {
+    // Storage may be blocked; fall back to the scaffold defaults.
+    return undefined;
+  }
+}
+
+function savePreference(key: string, value: string) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+    // Storage may be disabled; the choice still works for the current visit.
+  }
+}
+
+function subscribeToColorScheme(onChange: () => void) {
+  const query = window.matchMedia('(prefers-color-scheme: dark)');
+  query.addEventListener('change', onChange);
+  return () => query.removeEventListener('change', onChange);
+}
+
+function getSystemDarkMode() {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
+
+function getServerDarkMode() {
+  return false;
+}
+`;
+}
+function createThemePickerFile() {
+    return `import { Button, DropdownMenu } from '@databricks/design-system';
+import { useAppTheme, isAppColorMode } from './app-theme';
+import { APP_THEMES, isAppThemeName } from './app-themes';
+
+export interface ThemePickerProps {
+  floating?: boolean;
+}
+
+export function ThemePicker({ floating = true }: ThemePickerProps) {
+  const { themeName, setThemeName, colorMode, setColorMode, isColorModeControlled } = useAppTheme();
+
+  return (
+    <div
+      css={floating ? {
+        position: 'fixed',
+        bottom: 'var(--db-space-4)',
+        right: 'var(--db-space-4)',
+        zIndex: 'var(--app-theme-picker-z-index, 999)',
+      } : undefined}
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger asChild>
+          <Button componentId="starter.theme_picker">
+            Theme: {APP_THEMES[themeName].name}
+          </Button>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" side="top">
+          <DropdownMenu.Label>Theme</DropdownMenu.Label>
+          <DropdownMenu.RadioGroup
+            componentId="starter.theme"
+            aria-label="Theme"
+            value={themeName}
+            onValueChange={(value) => { if (isAppThemeName(value)) setThemeName(value); }}
+          >
+            {Object.entries(APP_THEMES).map(([name, definition]) => (
+              <DropdownMenu.RadioItem key={name} value={name}>
+                <DropdownMenu.ItemIndicator />
+                {definition.name}
+              </DropdownMenu.RadioItem>
+            ))}
+          </DropdownMenu.RadioGroup>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Label>Appearance</DropdownMenu.Label>
+          <DropdownMenu.RadioGroup
+            componentId="starter.color_mode"
+            aria-label="Appearance"
+            value={colorMode}
+            onValueChange={(value) => { if (isAppColorMode(value)) setColorMode(value); }}
+          >
+            <DropdownMenu.RadioItem value="system" disabled={isColorModeControlled}>
+              <DropdownMenu.ItemIndicator />
+              System
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="light" disabled={isColorModeControlled}>
+              <DropdownMenu.ItemIndicator />
+              Light
+            </DropdownMenu.RadioItem>
+            <DropdownMenu.RadioItem value="dark" disabled={isColorModeControlled}>
+              <DropdownMenu.ItemIndicator />
+              Dark
+            </DropdownMenu.RadioItem>
+          </DropdownMenu.RadioGroup>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </div>
+  );
+}
+`;
+}

package/scaffold_tool/src/theme-templates.js

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createThemeRegistryFile = createThemeRegistryFile;
+exports.createThemeCssFile = createThemeCssFile;
+exports.createThemeReadme = createThemeReadme;
+const scaffold_theme_1 = require("./scaffold-theme");
+const TYPOGRAPHY_TOKEN_MAPPINGS = [
+    ['fontSizeSm', '--db-font-size-sm', 'px'],
+    ['fontSizeBase', '--db-font-size-base', 'px'],
+    ['fontSizeMd', '--db-font-size-md', 'px'],
+    ['fontSizeLg', '--db-font-size-lg', 'px'],
+    ['fontSizeXl', '--db-font-size-xl', 'px'],
+    ['fontSizeXxl', '--db-font-size-2xl', 'px'],
+    ['lineHeightBase', '--db-line-height-base', ''],
+    ['lineHeightBase', '--db-btn-line-height', ''],
+    ['lineHeightSm', '--db-btn-line-height-small', ''],
+    ['typographyRegularFontWeight', '--db-font-weight-normal', ''],
+    // Legacy bold is also the semibold tier used by token-based components.
+    ['typographyBoldFontWeight', '--db-font-weight-semibold', ''],
+    ['typographyBoldFontWeight', '--db-font-weight-bold', ''],
+];
+function createThemeRegistryFile() {
+    const definitions = Object.entries(scaffold_theme_1.CUSTOM_SCAFFOLD_THEMES).map(([name, theme]) => createThemeDefinition(name.replace('-', '_'), theme));
+    return `import {
+  consumerLightColorList,
+  consumerDarkColorList,
+  type DesignSystemProviderProps,
+  type DesignTokenOverrides,
+} from '@databricks/design-system';
+
+export type AppThemeName = 'dubois' | 'base' | 'genie-one' | 'shadcn';
+
+export interface AppThemeDefinition {
+  name: string;
+  lightColors?: typeof consumerLightColorList;
+  darkColors?: typeof consumerDarkColorList;
+  lightTokens?: DesignTokenOverrides;
+  darkTokens?: DesignTokenOverrides;
+  themeOverrides?: DesignSystemProviderProps['themeOverrides'];
+  css: string;
+}
+
+${definitions.join('\n\n')}
+
+export const APP_THEMES: Record<AppThemeName, AppThemeDefinition> = {
+  dubois: { name: 'Du Bois', css: '' },
+  base,
+  'genie-one': genie_one,
+  shadcn,
+};
+
+export function isAppThemeName(value: string | undefined): value is AppThemeName {
+  return value !== undefined && Object.prototype.hasOwnProperty.call(APP_THEMES, value);
+}
+`;
+}
+function createThemeDefinition(identifier, theme) {
+    const tokens = getThemeTokens(theme);
+    return `const ${identifier}LightColorOverrides = ${JSON.stringify(getModeValues(theme.semanticColors, 'light'), null, 2)} satisfies Partial<typeof consumerLightColorList>;
+const ${identifier}DarkColorOverrides = ${JSON.stringify(getModeValues(theme.semanticColors, 'dark'), null, 2)} satisfies Partial<typeof consumerDarkColorList>;
+const ${identifier}: AppThemeDefinition = {
+  name: ${JSON.stringify(theme.name)},
+  lightColors: { ...consumerLightColorList, ...${identifier}LightColorOverrides },
+  darkColors: { ...consumerDarkColorList, ...${identifier}DarkColorOverrides },
+  lightTokens: ${JSON.stringify(getModeValues(tokens, 'light'), null, 2)} satisfies DesignTokenOverrides,
+  darkTokens: ${JSON.stringify(getModeValues(tokens, 'dark'), null, 2)} satisfies DesignTokenOverrides,
+  themeOverrides: ${JSON.stringify({ typography: theme.typography }, null, 2)} satisfies DesignSystemProviderProps['themeOverrides'],
+  css: ${JSON.stringify(createThemeCssFile(theme))},
+};`;
+}
+function createThemeCssFile(theme) {
+    const tokens = getThemeTokens(theme);
+    const lightTokens = getModeValues(tokens, 'light');
+    const darkTokens = getModeValues(tokens, 'dark');
+    return [
+        '/* Override design tokens at each theme boundary, including portaled menus and dialogs. */',
+        ':root, .du-bois-light, .du-bois-dark {',
+        '  --action-border-radius: var(--db-btn-border-radius);',
+        '  --input-border-radius: var(--db-shape-control);',
+        '  --list-item-border-radius: var(--db-shape-container-small);',
+        '  --popup-border-radius: var(--db-shape-container-medium);',
+        '  --info-container-border-radius: var(--db-shape-container-large);',
+        '}',
+        '',
+        ':root, .du-bois-light {',
+        ...Object.entries(lightTokens).map(([name, value]) => `  ${name}: ${value};`),
+        '}',
+        '',
+        '.du-bois-dark {',
+        ...Object.entries(darkTokens).map(([name, value]) => `  ${name}: ${value};`),
+        '}',
+        '',
+        'body {',
+        '  margin: 0;',
+        '  font-family: var(--db-font-family);',
+        '  font-size: var(--db-font-size-base);',
+        '  line-height: var(--db-line-height-base);',
+        '  -webkit-font-smoothing: antialiased;',
+        '}',
+        '',
+    ].join('\n');
+}
+function createThemeReadme(initialTheme, sourceDirectory) {
+    const prefix = sourceDirectory === 'src' ? 'src/' : '';
+    const name = (0, scaffold_theme_1.getScaffoldTheme)(initialTheme)?.name ?? 'Du Bois';
+    return [
+        '# App themes',
+        '',
+        `This app starts with ${name}. The floating Theme button switches between Du Bois, dbui Base,`,
+        'Genie One, and shadcn neutral, and selects System, Light, or Dark appearance.',
+        'Choices are saved locally in this browser. System appearance follows operating-system changes.',
+        '',
+        `- \`${prefix}app-themes.ts\`: palettes, typography, CSS tokens, and document styles for all themes.`,
+        `- \`${prefix}app-theme.tsx\`: AppThemeProvider, useAppTheme, mode tracking, and saved preferences.`,
+        `- \`${prefix}theme-picker.tsx\`: the removable, reusable ThemePicker control.`,
+        `- \`${prefix}dbui.css\`: baseline document typography.`,
+        '',
+        'AppThemeProvider accepts `defaultTheme="shadcn"` (used when there is no saved selection).',
+        'Pass `colorMode="light"`, `"dark"`, or `"system"` to control appearance from your app instead;',
+        'the picker disables its appearance choices while that prop is set.',
+        'Use `useAppTheme()` inside the provider to read or change `themeName` and `colorMode`.',
+        '',
+        'The picker is a sibling of the app at its entry point. Remove that element to hide it, or move it',
+        'inside your app and pass `floating={false}` to place the button in your own toolbar.',
+        'Keep the provider mounted when switching themes so your app state is preserved.',
+        'The floating picker uses `--db-space-4` for its edge spacing. Set `--app-theme-picker-z-index`',
+        'to customize its stacking level (defaults to 999, below the default overlay layer).',
+        '',
+        'Preferences use the localStorage keys `dbui.theme` and `dbui.color-mode`. Remove those keys to',
+        'restore the scaffold defaults. If storage is unavailable, switching still works for this visit.',
+        '',
+        'Customize only provider settings and CSS variable tokens, never common component CSS.',
+        'Each theme’s stylesheet is replaced on selection, and the provider also carries tokens into portals.',
+        'All theme fonts are bundled locally so switching needs no runtime font CDN request.',
+        '',
+        'These are prototype approximations using Du Bois components. Legacy inputs retain their built-in',
+        'font. Base and shadcn use darker legacy primary fills in dark mode to keep fixed white checkbox',
+        'marks legible; token-based controls use the target theme accent colors.',
+        '',
+    ].join('\n');
+}
+function getModeValues(values, mode) {
+    return Object.fromEntries(Object.entries(values).map(([name, value]) => [
+        name,
+        typeof value === 'string' ? value : value[mode === 'dark' ? 1 : 0],
+    ]));
+}
+function getThemeTokens(theme) {
+    const tokens = {};
+    for (const [property, token, unit] of TYPOGRAPHY_TOKEN_MAPPINGS) {
+        const value = theme.typography[property];
+        if (value !== undefined) {
+            tokens[token] = `${value}${unit}`;
+        }
+    }
+    return { ...tokens, ...theme.tokens };
+}

package/scaffold_tool/src/themes/base.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BASE_THEME = void 0;
+// Figma OftbSQf85jOPln9RhSEhVv: Colors / Base Light and Base Dark, Typography / Desktop.
+exports.BASE_THEME = {
+    name: 'dbui Base',
+    packages: ['@fontsource-variable/figtree@5.3.0', '@fontsource/commit-mono@5.3.0'],
+    fontImports: ['@fontsource-variable/figtree', '@fontsource/commit-mono/400.css', '@fontsource/commit-mono/600.css'],
+    typography: {
+        fontSizeSm: 12,
+        fontSizeBase: 13,
+        fontSizeMd: 16,
+        fontSizeLg: 20,
+        fontSizeXl: 24,
+        fontSizeXxl: 32,
+        lineHeightSm: '16px',
+        lineHeightBase: '20px',
+        lineHeightMd: '24px',
+        lineHeightLg: '28px',
+        lineHeightXl: '32px',
+        lineHeightXxl: '40px',
+        typographyRegularFontWeight: 400,
+        typographyBoldFontWeight: 600,
+    },
+    semanticColors: {
+        backgroundPrimary: ['#ffffff', '#11171c'],
+        backgroundSecondary: ['#fafafa', '#1f272d'],
+        composerBackground: ['#ffffff', '#1f272d'],
+        textPrimary: ['#333333', '#e8ecf0'],
+        textSecondary: ['#666666', '#92a4b3'],
+        textPlaceholder: ['#8a8a8a', '#8396a5'],
+        border: ['#e5e5e5', 'rgba(255, 255, 255, 0.1)'],
+        borderAccessible: ['#d4d4d4', 'rgba(255, 255, 255, 0.15)'],
+        actionDefaultBackgroundDefault: ['transparent', 'transparent'],
+        actionDefaultBackgroundHover: ['#f0f0f0', 'rgba(255, 255, 255, 0.08)'],
+        actionDefaultBackgroundPress: ['#e6e6e6', 'rgba(255, 255, 255, 0.12)'],
+        actionDefaultBorderDefault: ['#d4d4d4', 'rgba(255, 255, 255, 0.15)'],
+        actionDefaultBorderHover: ['#a3a3a3', 'rgba(255, 255, 255, 0.3)'],
+        actionDefaultBorderPress: ['#737373', 'rgba(255, 255, 255, 0.48)'],
+        actionDefaultBorderFocus: ['#404040', '#f6f7f9'],
+        actionDefaultTextDefault: ['#333333', '#e8ecf0'],
+        actionDefaultTextHover: ['#141414', '#ffffff'],
+        actionDefaultTextPress: ['#141414', '#ffffff'],
+        actionDefaultIconDefault: ['#666666', '#92a4b3'],
+        actionDefaultIconHover: ['#333333', '#e8ecf0'],
+        actionDefaultIconPress: ['#141414', '#ffffff'],
+        // Legacy checked controls have fixed white marks; native controls use the accent tokens below.
+        actionPrimaryBackgroundDefault: ['#2272b4', '#2272b4'],
+        actionPrimaryBackgroundHover: ['#0e538b', '#0e538b'],
+        actionPrimaryBackgroundPress: ['#04355d', '#04355d'],
+        actionPrimaryTextDefault: ['#ffffff', '#ffffff'],
+        actionPrimaryTextHover: ['#ffffff', '#ffffff'],
+        actionPrimaryTextPress: ['#ffffff', '#ffffff'],
+        actionPrimaryIcon: ['#ffffff', '#ffffff'],
+        actionLinkDefault: ['#2272b4', '#8acaff'],
+        actionLinkHover: ['#0e538b', '#bae1fc'],
+        actionLinkPress: ['#04355d', '#d7edfe'],
+        actionIconBackgroundDefault: ['transparent', 'transparent'],
+        actionIconBackgroundHover: ['#f0f0f0', 'rgba(255, 255, 255, 0.08)'],
+        actionIconBackgroundPress: ['#e6e6e6', 'rgba(255, 255, 255, 0.12)'],
+        actionIconIconDefault: ['#666666', '#92a4b3'],
+        actionIconIconHover: ['#333333', '#e8ecf0'],
+        actionIconIconPress: ['#141414', '#ffffff'],
+        actionTertiaryBackgroundDefault: ['transparent', 'transparent'],
+        actionTertiaryBackgroundHover: ['#f0f0f0', 'rgba(255, 255, 255, 0.08)'],
+        actionTertiaryBackgroundPress: ['#e6e6e6', 'rgba(255, 255, 255, 0.12)'],
+        actionTertiaryTextDefault: ['#666666', '#92a4b3'],
+        actionTertiaryTextHover: ['#333333', '#e8ecf0'],
+        actionTertiaryTextPress: ['#141414', '#ffffff'],
+        actionTertiaryIconDefault: ['#666666', '#92a4b3'],
+        actionTertiaryIconHover: ['#333333', '#e8ecf0'],
+        actionTertiaryIconPress: ['#141414', '#ffffff'],
+        actionDisabledBackground: ['rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)'],
+        actionDisabledBorder: ['rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)'],
+        actionDisabledText: ['rgba(0, 0, 0, 0.38)', 'rgba(255, 255, 255, 0.38)'],
+        codeBackground: ['#f5f5f5', '#2b343d'],
+        tableBackgroundUnselectedDefault: ['transparent', 'transparent'],
+        tableBackgroundUnselectedHover: ['#f0f0f0', 'rgba(255, 255, 255, 0.08)'],
+        tableBackgroundSelectedDefault: ['rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.1)'],
+        tableBackgroundSelectedHover: ['rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.14)'],
+        tooltipBackgroundTooltip: ['#171717', '#f6f7f9'],
+        tooltipTextTooltip: ['#ffffff', '#11171c'],
+        overlayOverlay: ['rgba(0, 0, 0, 0.72)', 'rgba(0, 0, 0, 0.85)'],
+        backgroundDanger: ['#fff5f7', '#3a010b'],
+        backgroundSuccess: ['#f3fcf6', '#04220e'],
+        backgroundWarning: ['#fff9eb', '#381001'],
+        textValidationDanger: ['#c82d4c', '#f792a6'],
+        textValidationSuccess: ['#277c43', '#8ddda8'],
+        textValidationWarning: ['#be501e', '#f2be88'],
+        progressFillPrimary: ['#2272b4', '#8acaff'],
+    },
+    tokens: {
+        '--db-font-family': '"Figtree Variable", system-ui, sans-serif',
+        '--db-mono-font-family': '"Commit Mono", ui-monospace, monospace',
+        '--db-color-action-primary-background-default': ['#2272b4', '#8acaff'],
+        '--db-color-action-primary-background-hover': ['#0e538b', '#bae1fc'],
+        '--db-color-action-primary-background-press': ['#04355d', '#d7edfe'],
+        '--db-color-action-primary-text-default': ['#ffffff', '#11171c'],
+        '--db-color-action-primary-text-hover': ['#ffffff', '#11171c'],
+        '--db-color-action-primary-text-press': ['#ffffff', '#11171c'],
+        '--db-color-action-primary-icon': ['#ffffff', '#11171c'],
+        '--db-font-weight-medium': '500',
+        '--db-btn-border-radius': 'var(--db-shape-control-large)',
+        '--db-shape-control': '4px',
+        '--db-shape-control-large': '999px',
+        '--db-shape-container-small': '8px',
+        '--db-shape-container-medium': '12px',
+        '--db-shape-container-large': '16px',
+        '--db-surface-strong': ['#f5f5f5', '#2b343d'],
+        '--db-surface-selected-active': ['rgba(0, 0, 0, 0.16)', 'rgba(255, 255, 255, 0.16)'],
+        '--db-text-strong': ['#141414', '#ffffff'],
+        '--db-border-subtle': ['#f5f5f5', 'rgba(255, 255, 255, 0.06)'],
+        '--db-border-hover': ['#a3a3a3', 'rgba(255, 255, 255, 0.3)'],
+        '--db-border-active': ['#737373', 'rgba(255, 255, 255, 0.48)'],
+        '--db-accent-surface': ['#d7edfe', '#04355d'],
+        '--db-accent-surface-subtle': ['#f0f8ff', '#021e38'],
+        '--db-accent-surface-selected': ['#d7edfe', '#04355d'],
+        '--db-selection-toggle-surface-checked': 'var(--db-accent-surface-strong)',
+        '--db-checkbox-mark': 'var(--db-text-on-accent-surface)',
+        '--db-radio-mark': 'var(--db-text-on-accent-surface)',
+        '--db-positive-surface': ['#d4f7df', '#093919'],
+        '--db-positive-surface-strong': ['#277c43', '#3ba65e'],
+        '--db-positive-surface-hover': ['#115026', '#8ddda8'],
+        '--db-positive-surface-active': ['#093919', '#b1ecc5'],
+        '--db-positive-surface-selected': ['#b1ecc5', '#115026'],
+        '--db-text-on-positive-surface': ['#ffffff', '#11171c'],
+        '--db-caution-surface': ['#fceaca', '#5f1b02'],
+        '--db-caution-surface-strong': '#de7921',
+        '--db-caution-surface-hover': ['#be501e', '#f2be88'],
+        '--db-caution-surface-active': ['#93320b', '#f8d4a5'],
+        '--db-caution-surface-selected': ['#f8d4a5', '#93320b'],
+        '--db-text-on-caution-surface': ['#141414', '#11171c'],
+        '--db-negative-surface': ['#fde2e8', '#630316'],
+        '--db-negative-surface-strong': ['#c82d4c', '#e65b77'],
+        '--db-negative-surface-selected': ['#fbd0d8', '#9e102c'],
+        '--db-elevation-low': [
+            '0 2px 3px -1px rgb(0 0 0 / 0.05), 0 1px 0 0 rgb(0 0 0 / 0.02)',
+            '0 2px 3px -1px rgb(0 0 0 / 0.45), 0 1px 0 0 rgb(0 0 0 / 0.26)',
+        ],
+        '--db-elevation-med': ['0 2px 16px 0 rgb(0 0 0 / 0.08)', '0 2px 16px 0 rgb(0 0 0 / 0.61)'],
+        '--db-elevation-high': ['0 8px 40px 0 rgb(0 0 0 / 0.13)', '0 8px 40px 0 rgb(0 0 0 / 0.87)'],
+    },
+};

package/scaffold_tool/src/themes/genie-one.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GENIE_ONE_THEME = void 0;
+// Matches DatabricksOneConsumerTheme and onechat-common/src/chatTheme.ts.
+exports.GENIE_ONE_THEME = {
+    name: 'Genie One',
+    packages: [],
+    fontImports: ['@databricks/design-system/fonts/dm-sans.css', '@databricks/design-system/fonts/dm-mono.css'],
+    typography: {
+        fontSizeBase: 15,
+        fontSizeMd: 15,
+        fontSizeSm: 14,
+        fontSizeXl: 20,
+        fontSizeXxl: 24,
+        lineHeightBase: '24px',
+        lineHeightMd: '24px',
+        lineHeightSm: '20px',
+        lineHeightXxl: '32px',
+    },
+    semanticColors: {
+        // The consumer shell keeps blue checked controls in dark mode.
+        actionPrimaryBackgroundDefault: ['#161616', '#4299e0'],
+        actionPrimaryBackgroundHover: ['#424242', '#8acaff'],
+        actionPrimaryBackgroundPress: ['#525252', '#bae1fc'],
+    },
+    tokens: {
+        '--db-font-family': '"DM Sans", system-ui, sans-serif',
+        '--db-mono-font-family': '"DM Mono", ui-monospace, monospace',
+        '--db-font-size-lg': '18px',
+        '--db-btn-border-radius': '9999px',
+        '--db-surface-strong': ['#ebebeb', '#37444f'],
+        '--db-border-subtle': ['#0000000d', '#ffffff0f'],
+        '--db-checkbox-mark': 'var(--db-color-action-primary-text-default)',
+        '--db-radio-mark': 'var(--db-color-action-primary-text-default)',
+    },
+};

package/scaffold_tool/src/themes/shadcn.js

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHADCN_THEME = void 0;
+// Neutral palette from https://ui.shadcn.com/docs/theming, expressed in sRGB for legacy color utilities.
+exports.SHADCN_THEME = {
+    name: 'shadcn neutral',
+    packages: ['@fontsource-variable/geist@5.3.0', '@fontsource-variable/geist-mono@5.3.0'],
+    fontImports: ['@fontsource-variable/geist', '@fontsource-variable/geist-mono'],
+    typography: {
+        fontSizeSm: 12,
+        fontSizeBase: 14,
+        fontSizeMd: 16,
+        fontSizeLg: 20,
+        fontSizeXl: 24,
+        fontSizeXxl: 30,
+        lineHeightSm: '16px',
+        lineHeightBase: '20px',
+        lineHeightMd: '24px',
+        lineHeightLg: '28px',
+        lineHeightXl: '32px',
+        lineHeightXxl: '36px',
+        typographyRegularFontWeight: 400,
+        typographyBoldFontWeight: 600,
+    },
+    semanticColors: {
+        backgroundPrimary: ['#ffffff', '#0a0a0a'],
+        backgroundSecondary: ['#f5f5f5', '#262626'],
+        composerBackground: ['#ffffff', '#171717'],
+        textPrimary: ['#0a0a0a', '#fafafa'],
+        textSecondary: ['#737373', '#a3a3a3'],
+        textPlaceholder: ['#737373', '#a3a3a3'],
+        border: ['#e5e5e5', 'rgba(255, 255, 255, 0.1)'],
+        borderAccessible: ['#a3a3a3', '#737373'],
+        actionDefaultBackgroundDefault: ['#ffffff', '#171717'],
+        actionDefaultBackgroundHover: ['#f5f5f5', '#262626'],
+        actionDefaultBackgroundPress: ['#e5e5e5', '#404040'],
+        actionDefaultBorderDefault: ['#e5e5e5', 'rgba(255, 255, 255, 0.15)'],
+        actionDefaultBorderHover: ['#a3a3a3', '#737373'],
+        actionDefaultBorderPress: ['#737373', '#a3a3a3'],
+        actionDefaultBorderFocus: ['#a3a3a3', '#737373'],
+        actionDefaultTextDefault: ['#171717', '#fafafa'],
+        actionDefaultTextHover: ['#171717', '#fafafa'],
+        actionDefaultTextPress: ['#171717', '#fafafa'],
+        actionDefaultIconDefault: ['#737373', '#a3a3a3'],
+        actionDefaultIconHover: ['#171717', '#fafafa'],
+        actionDefaultIconPress: ['#171717', '#fafafa'],
+        // Legacy checked controls have fixed white marks; native controls use the accent tokens below.
+        actionPrimaryBackgroundDefault: ['#171717', '#525252'],
+        actionPrimaryBackgroundHover: ['#303030', '#404040'],
+        actionPrimaryBackgroundPress: ['#404040', '#262626'],
+        actionPrimaryTextDefault: ['#fafafa', '#fafafa'],
+        actionPrimaryTextHover: ['#fafafa', '#fafafa'],
+        actionPrimaryTextPress: ['#fafafa', '#fafafa'],
+        actionPrimaryIcon: ['#fafafa', '#fafafa'],
+        actionLinkDefault: ['#171717', '#e5e5e5'],
+        actionLinkHover: ['#404040', '#fafafa'],
+        actionLinkPress: ['#525252', '#ffffff'],
+        actionIconBackgroundDefault: ['transparent', 'transparent'],
+        actionIconBackgroundHover: ['#f5f5f5', '#262626'],
+        actionIconBackgroundPress: ['#e5e5e5', '#404040'],
+        actionIconIconDefault: ['#737373', '#a3a3a3'],
+        actionIconIconHover: ['#171717', '#fafafa'],
+        actionIconIconPress: ['#171717', '#fafafa'],
+        actionTertiaryBackgroundDefault: ['transparent', 'transparent'],
+        actionTertiaryBackgroundHover: ['#f5f5f5', '#262626'],
+        actionTertiaryBackgroundPress: ['#e5e5e5', '#404040'],
+        actionTertiaryTextDefault: ['#171717', '#fafafa'],
+        actionTertiaryTextHover: ['#171717', '#fafafa'],
+        actionTertiaryTextPress: ['#171717', '#fafafa'],
+        actionTertiaryIconDefault: ['#737373', '#a3a3a3'],
+        actionTertiaryIconHover: ['#171717', '#fafafa'],
+        actionTertiaryIconPress: ['#171717', '#fafafa'],
+        actionDisabledBackground: ['#f5f5f5', '#262626'],
+        actionDisabledBorder: ['#e5e5e5', '#404040'],
+        actionDisabledText: ['#a3a3a3', '#737373'],
+        actionDangerPrimaryBackgroundDefault: ['#e7000b', '#ff6467'],
+        actionDangerPrimaryBackgroundHover: ['#cf000a', '#ff7b7d'],
+        actionDangerPrimaryBackgroundPress: ['#b90009', '#ff9294'],
+        actionDangerPrimaryText: ['#ffffff', '#171717'],
+        actionDangerDefaultTextDefault: ['#e7000b', '#ff6467'],
+        actionDangerDefaultTextHover: ['#cf000a', '#ff7b7d'],
+        actionDangerDefaultTextPress: ['#b90009', '#ff9294'],
+        actionDangerDefaultBorderDefault: ['#e7000b', '#ff6467'],
+        actionDangerDefaultBorderHover: ['#cf000a', '#ff7b7d'],
+        actionDangerDefaultBorderPress: ['#b90009', '#ff9294'],
+        codeBackground: ['#f5f5f5', '#262626'],
+        tableBackgroundUnselectedDefault: ['transparent', 'transparent'],
+        tableBackgroundUnselectedHover: ['#f5f5f5', '#262626'],
+        tableBackgroundSelectedDefault: ['#f5f5f5', '#262626'],
+        tableBackgroundSelectedHover: ['#e5e5e5', '#404040'],
+        tooltipBackgroundTooltip: ['#171717', '#e5e5e5'],
+        tooltipTextTooltip: ['#fafafa', '#171717'],
+        overlayOverlay: ['rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.5)'],
+        textValidationDanger: ['#e7000b', '#ff6467'],
+        borderDanger: ['#e7000b', '#ff6467'],
+        skeleton: ['#e5e5e5', '#262626'],
+        progressFill: ['#a3a3a3', '#737373'],
+        progressFillPrimary: ['#171717', '#e5e5e5'],
+        progressTrack: ['#f5f5f5', '#262626'],
+    },
+    tokens: {
+        '--db-font-family': '"Geist Variable", system-ui, sans-serif',
+        '--db-mono-font-family': '"Geist Mono Variable", ui-monospace, monospace',
+        '--db-color-action-primary-background-default': ['#171717', '#e5e5e5'],
+        '--db-color-action-primary-background-hover': ['#303030', '#cecece'],
+        '--db-color-action-primary-background-press': ['#404040', '#b8b8b8'],
+        '--db-color-action-primary-text-default': ['#fafafa', '#171717'],
+        '--db-color-action-primary-text-hover': ['#fafafa', '#171717'],
+        '--db-color-action-primary-text-press': ['#fafafa', '#171717'],
+        '--db-color-action-primary-icon': ['#fafafa', '#171717'],
+        '--db-font-size-3xl': '30px',
+        '--db-font-size-4xl': '36px',
+        '--db-font-weight-medium': '500',
+        '--db-btn-font-weight': '500',
+        '--db-btn-height': '36px',
+        '--db-btn-height-small': '32px',
+        '--db-btn-padding-horizontal': '16px',
+        '--db-btn-gap': '8px',
+        '--db-shape-control': '8px',
+        '--db-shape-control-large': '10px',
+        '--db-shape-container-small': '6px',
+        '--db-shape-container-medium': '8px',
+        '--db-shape-container-large': '10px',
+        '--db-selection-toggle-border-radius': '4px',
+        '--db-checkbox-mark': 'var(--db-color-action-primary-text-default)',
+        '--db-radio-mark': 'var(--db-color-action-primary-text-default)',
+        '--db-surface-strong': ['#e5e5e5', '#404040'],
+        '--db-border-subtle': ['#f5f5f5', '#262626'],
+        '--db-border-hover': ['#a3a3a3', '#737373'],
+        '--db-border-active': ['#737373', '#a3a3a3'],
+        '--db-elevation-low': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        '--db-elevation-med': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        '--db-elevation-high': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+    },
+};