lightThemeValues

const lightThemeValues: object

Defined in: src/theme/lightThemeValues.ts:18

Light theme values — pure data, no @vanilla-extract/css calls.

Mirrors darkThemeValues shape exactly so createCustomTheme and createLightTheme can share the merge helper and so LightThemeValues stays structurally compatible with DarkThemeValues.

Lives in a plain .ts module so build-time tooling (token export, docs generation) can import the values without booting the Vanilla Extract runtime. lightTheme.css.ts re-exports this object and is the file that actually creates the scoped theme class.

Note on colors.surface.whiteOverlay: the token name is kept for contract compatibility, but in light mode it flips polarity to a subtle dark overlay (rgba(0, 0, 0, 0.06)) so it still reads as a “subtle tint over the underlying surface”.

Type Declaration

borderRadius

readonly borderRadius: object

borderRadius.lg

readonly lg: "6px" = '6px'

borderRadius.md

readonly md: "4px" = '4px'

borderRadius.none

readonly none: "0px" = '0px'

borderRadius.sm

readonly sm: "2px" = '2px'

colors

readonly colors: object

colors.accent

readonly accent: object

colors.accent.error

readonly error: "#d32f2f" = '#d32f2f'

colors.accent.primary

readonly primary: "#0066cc" = '#0066cc'

colors.accent.secondary

readonly secondary: "#004a99" = '#004a99'

colors.accent.success

readonly success: "#2e7d32" = '#2e7d32'

colors.accent.warning

readonly warning: "#a64500" = '#a64500'

colors.backdrop

readonly backdrop: "rgba(0, 0, 0, 0.4)" = 'rgba(0, 0, 0, 0.4)'

colors.background

readonly background: object

colors.background.elevated

readonly elevated: "#ffffff" = '#ffffff'

colors.background.inset

readonly inset: "#f8f8fa" = '#f8f8fa'

colors.background.primary

readonly primary: "#ffffff" = '#ffffff'

colors.background.secondary

readonly secondary: "#f5f5f7" = '#f5f5f7'

colors.background.tertiary

readonly tertiary: "#ebebee" = '#ebebee'

colors.border

readonly border: object

colors.border.default

readonly default: "#e0e0e3" = '#e0e0e3'

colors.border.error

readonly error: "#d32f2f" = '#d32f2f'

colors.border.focus

readonly focus: "#0066cc" = '#0066cc'

colors.border.success

readonly success: "#2e7d32" = '#2e7d32'

colors.surface

readonly surface: object

colors.surface.active

readonly active: "#e6e6ea" = '#e6e6ea'

colors.surface.default

readonly default: "#ffffff" = '#ffffff'

colors.surface.disabled

readonly disabled: "#f5f5f7" = '#f5f5f7'

colors.surface.hover

readonly hover: "#f0f0f3" = '#f0f0f3'

colors.surface.row

readonly row: "#ffffff" = '#ffffff'

colors.surface.rowHover

readonly rowHover: "#f5f5f7" = '#f5f5f7'

colors.surface.whiteOverlay

readonly whiteOverlay: "rgba(0, 0, 0, 0.06)" = 'rgba(0, 0, 0, 0.06)'

colors.text

readonly text: object

colors.text.disabled

readonly disabled: "#b0b0b0" = '#b0b0b0'

colors.text.muted

readonly muted: "#6b6b6b" = '#6b6b6b'

colors.text.primary

readonly primary: "#1a1a1a" = '#1a1a1a'

colors.text.secondary

readonly secondary: "#4a4a4a" = '#4a4a4a'

demo

readonly demo: object

demo.canvas

readonly canvas: object

demo.canvas.gradientEnd

readonly gradientEnd: "#ebebee" = '#ebebee'

demo.canvas.gradientMid

readonly gradientMid: "#f0f0f3" = '#f0f0f3'

demo.canvas.gradientStart

readonly gradientStart: "#fafafa" = '#fafafa'

shadows

readonly shadows: object

shadows.focus

readonly focus: "0 0 0 2px rgba(0, 102, 204, 0.3)" = '0 0 0 2px rgba(0, 102, 204, 0.3)'

shadows.lg

readonly lg: "0 4px 12px rgba(0, 0, 0, 0.10)" = '0 4px 12px rgba(0, 0, 0, 0.10)'

shadows.md

readonly md: "0 2px 4px rgba(0, 0, 0, 0.08)" = '0 2px 4px rgba(0, 0, 0, 0.08)'

shadows.separatorBottom

readonly separatorBottom: "0 1px 2px rgba(0, 0, 0, 0.04)" = '0 1px 2px rgba(0, 0, 0, 0.04)'

shadows.separatorLeft

readonly separatorLeft: "-1px 0 2px rgba(0, 0, 0, 0.04)" = '-1px 0 2px rgba(0, 0, 0, 0.04)'

shadows.separatorRight

readonly separatorRight: "1px 0 2px rgba(0, 0, 0, 0.04)" = '1px 0 2px rgba(0, 0, 0, 0.04)'

shadows.sm

readonly sm: "0 1px 2px rgba(0, 0, 0, 0.06)" = '0 1px 2px rgba(0, 0, 0, 0.06)'

shadows.thumb

readonly thumb: "0 0 2px rgba(0, 0, 0, 0.15)" = '0 0 2px rgba(0, 0, 0, 0.15)'

shadows.xl

readonly xl: "0 8px 24px rgba(0, 0, 0, 0.12)" = '0 8px 24px rgba(0, 0, 0, 0.12)'

shell

readonly shell: object

shell.dock

readonly dock: object

shell.dock.borderBarBg

readonly borderBarBg: "#f5f5f7" = '#f5f5f7'

shell.dock.borderBarSize

readonly borderBarSize: "28px" = '28px'

shell.dock.dropOverlay

readonly dropOverlay: "rgba(0, 102, 204, 0.15)" = 'rgba(0, 102, 204, 0.15)'

shell.dock.splitterColor

readonly splitterColor: "#e0e0e3" = '#e0e0e3'

shell.dock.splitterHoverColor

readonly splitterHoverColor: "#0066cc" = '#0066cc'

shell.dock.splitterSize

readonly splitterSize: "4px" = '4px'

shell.dock.tabActiveBg

readonly tabActiveBg: "#ffffff" = '#ffffff'

shell.dock.tabActiveText

readonly tabActiveText: "#1a1a1a" = '#1a1a1a'

shell.dock.tabBg

readonly tabBg: "#f5f5f7" = '#f5f5f7'

shell.dock.tabHeight

readonly tabHeight: "28px" = '28px'

shell.dock.tabHoverBg

readonly tabHoverBg: "#ebebee" = '#ebebee'

shell.dock.tabText

readonly tabText: "#4a4a4a" = '#4a4a4a'

shell.menuBar

readonly menuBar: object

shell.menuBar.activeBg

readonly activeBg: "#0066cc" = '#0066cc'

shell.menuBar.bg

readonly bg: "#f5f5f7" = '#f5f5f7'

shell.menuBar.height

readonly height: "28px" = '28px'

shell.menuBar.hoverBg

readonly hoverBg: "#ebebee" = '#ebebee'

shell.menuBar.shortcutText

readonly shortcutText: "#6b6b6b" = '#6b6b6b'

shell.menuBar.text

readonly text: "#1a1a1a" = '#1a1a1a'

shell.statusBar

readonly statusBar: object

shell.statusBar.bg

readonly bg: "#0066cc" = '#0066cc'

shell.statusBar.height

readonly height: "22px" = '22px'

shell.statusBar.heightMd

readonly heightMd: "26px" = '26px'

shell.statusBar.text

readonly text: "#ffffff" = '#ffffff'

shell.toolbar

readonly toolbar: object

shell.toolbar.bg

readonly bg: "#f5f5f7" = '#f5f5f7'

shell.toolbar.height

readonly height: object

shell.toolbar.height.md

readonly md: "40px" = '40px'

shell.toolbar.height.sm

readonly sm: "32px" = '32px'

shell.toolbar.separator

readonly separator: "#e0e0e3" = '#e0e0e3'

spacing

readonly spacing: object

spacing.lg

readonly lg: "12px" = '12px'

spacing.md

readonly md: "8px" = '8px'

spacing.sm

readonly sm: "4px" = '4px'

spacing.xl

readonly xl: "16px" = '16px'

spacing.xs

readonly xs: "2px" = '2px'

spacing.xxl

readonly xxl: "24px" = '24px'

spacing.xxxl

readonly xxxl: "32px" = '32px'

transitions

readonly transitions: object

transitions.fast

readonly fast: "100ms ease-out" = '100ms ease-out'

transitions.normal

readonly normal: "200ms ease-out" = '200ms ease-out'

transitions.slow

readonly slow: "300ms ease-out" = '300ms ease-out'

typography

readonly typography: object

typography.fontFamily

readonly fontFamily: object

typography.fontFamily.mono

readonly mono: “SF Mono, Monaco, Consolas, “Liberation Mono”, “Courier New”, monospace” = 'SF Mono, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'

typography.fontFamily.sans

readonly sans: “-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, “Helvetica Neue”, Arial, sans-serif” = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'

typography.fontSize

readonly fontSize: object

typography.fontSize.lg

readonly lg: "14px" = '14px'

typography.fontSize.md

readonly md: "12px" = '12px'

typography.fontSize.sm

readonly sm: "11px" = '11px'

typography.fontSize.xl

readonly xl: "16px" = '16px'

typography.fontSize.xs

readonly xs: "10px" = '10px'

typography.fontSize.xxs

readonly xxs: "9px" = '9px'

typography.fontWeight

readonly fontWeight: object

typography.fontWeight.medium

readonly medium: "500" = '500'

typography.fontWeight.normal

readonly normal: "400" = '400'

typography.fontWeight.semibold

readonly semibold: "600" = '600'

typography.lineHeight

readonly lineHeight: object

typography.lineHeight.normal

readonly normal: "1.4" = '1.4'

typography.lineHeight.relaxed

readonly relaxed: "1.6" = '1.6'

typography.lineHeight.tight

readonly tight: "1.2" = '1.2'

zIndex

readonly zIndex: object

zIndex.base

readonly base: "1" = '1'

zIndex.dropdown

readonly dropdown: "1000" = '1000'

zIndex.modal

readonly modal: "1100" = '1100'

zIndex.popover

readonly popover: "1000" = '1000'

zIndex.tooltip

readonly tooltip: "1000" = '1000'