{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gpuix-tokens", "type": "registry:lib", "title": "Runtime: tokens", "description": "The `@gpuixui/tokens` modules the component items import. Installed automatically with the component; not a component itself.", "author": "Cyberistic ", "dependencies": [ "@gpuix/native@0.11.0", "@gpuix/react@0.11.0", "react@^19.2.4" ], "files": [ { "path": "packages/tokens/src/audit.ts", "target": "@ui/gpuixui/tokens/audit.ts", "type": "registry:lib", "content": "import {\n invalidColorRoles,\n type ColourSource,\n type InvalidColorRole,\n} from \"./color.js\";\nimport {\n contrastFailures,\n contrastFloorsFor,\n type ContrastFailure,\n type ContrastFloors,\n type ContrastSource,\n} from \"./contrast.js\";\nimport { decorativeFailures, type DecorativeFailure } from \"./decorative.js\";\nimport { disabledFadeFailures, type DisabledFadeFailure } from \"./disabled.js\";\nimport {\n invalidShadowColors,\n type InvalidShadowColor,\n type ShadowSource,\n} from \"./elevation.js\";\nimport { keyboardDimFailures, type KeyboardDimFailure } from \"./focus-dim.js\";\nimport { highlightFailures, type HighlightFailure } from \"./highlight.js\";\nimport { indicatorFailures, type IndicatorFailure } from \"./indicator.js\";\nimport {\n invalidNumbers,\n type InvalidNumber,\n type NumberSource,\n} from \"./numbers.js\";\nimport {\n invalidScales,\n type InvalidScale,\n type ScaleSource,\n} from \"./scales.js\";\nimport { selectionFailures, type SelectionFailure } from \"./selection.js\";\nimport {\n seriesFailures,\n type SeriesAuditSource,\n type SeriesReport,\n} from \"./series.js\";\nimport {\n syntaxFailures,\n type SyntaxAuditSource,\n type SyntaxFailure,\n} from \"./syntax.js\";\nimport {\n switchFailures,\n type SwitchAuditSource,\n type SwitchReport,\n} from \"./switch.js\";\nimport {\n missingTokens,\n requireTokens,\n type MissingToken,\n type MissingTokenKind,\n} from \"./missing.js\";\n\nexport { missingTokens };\nexport type { MissingToken, MissingTokenKind };\n\nexport type ThemeAuditSource = ColourSource &\n ContrastSource &\n SeriesAuditSource &\n SyntaxAuditSource &\n ShadowSource &\n NumberSource &\n ScaleSource &\n SwitchAuditSource;\n\nexport interface ThemeAudit {\n readonly invalidRoles: readonly InvalidColorRole[];\n\n readonly invalidShadows: readonly InvalidShadowColor[];\n\n readonly invalidNumbers: readonly InvalidNumber[];\n\n readonly scales: readonly InvalidScale[];\n\n readonly switch: SwitchReport;\n\n readonly contrast: readonly ContrastFailure[];\n\n readonly decorative: readonly DecorativeFailure[];\n\n readonly series: SeriesReport;\n\n readonly syntax: readonly SyntaxFailure[];\n\n readonly selection: readonly SelectionFailure[];\n\n readonly indicators: readonly IndicatorFailure[];\n\n readonly highlight: readonly HighlightFailure[];\n\n readonly disabledFade: readonly DisabledFadeFailure[];\n\n readonly keyboardDim: readonly KeyboardDimFailure[];\n\n readonly passed: boolean;\n}\n\nexport function auditTheme(\n theme: ThemeAuditSource | null | undefined,\n floors?: ContrastFloors,\n): ThemeAudit {\n const source: ThemeAuditSource = theme ?? {};\n requireTokens(source);\n const contract = floors ?? contrastFloorsFor(source);\n const invalidRoles = invalidColorRoles(source);\n const invalidShadows = invalidShadowColors(source);\n const numbers = invalidNumbers(source);\n const scales = invalidScales(source);\n const toggle = switchFailures(source);\n const contrast = contrastFailures(source, contract);\n const decorative = decorativeFailures(source);\n const series = seriesFailures(source);\n const syntax = syntaxFailures(source, contract);\n const selection = selectionFailures(source, contract);\n const indicators = indicatorFailures(source, contract);\n const highlight = highlightFailures(source, contract);\n const disabledFade = disabledFadeFailures(source);\n const keyboardDim = keyboardDimFailures(source);\n return {\n invalidRoles,\n invalidShadows,\n invalidNumbers: numbers,\n scales,\n switch: toggle,\n contrast,\n decorative,\n series,\n syntax,\n selection,\n indicators,\n highlight,\n disabledFade,\n keyboardDim,\n passed:\n invalidRoles.length === 0 &&\n invalidShadows.length === 0 &&\n numbers.length === 0 &&\n scales.length === 0 &&\n toggle.paint.length === 0 &&\n toggle.placements.length === 0 &&\n toggle.metrics.length === 0 &&\n contrast.length === 0 &&\n decorative.length === 0 &&\n series.surfaces.length === 0 &&\n series.distinctness.length === 0 &&\n series.deficiencies.length === 0 &&\n syntax.length === 0 &&\n selection.length === 0 &&\n indicators.length === 0 &&\n highlight.length === 0 &&\n disabledFade.length === 0 &&\n keyboardDim.length === 0,\n };\n}\n" }, { "path": "packages/tokens/src/brand-text.ts", "target": "@ui/gpuixui/tokens/brand-text.ts", "type": "registry:lib", "content": "import {\n blend,\n isColorRole,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n type ContrastSource,\n} from \"./contrast.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const brandTextSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n \"hover\",\n \"active\",\n \"accent\",\n \"selected\",\n] as const;\n\nconst TEXT_STEPS = 50;\n\ntype BrandSource = ColourSource & ContrastSource;\n\nconst worstRatio = (\n theme: ColourSource,\n colour: string,\n): number | undefined => {\n const colors = themeColors(theme);\n return brandTextSurfaces.reduce((worst, surface) => {\n const ratio = contrastRatio(colour, colors[surface]);\n return worst === undefined || ratio === undefined\n ? undefined\n : Math.min(worst, ratio);\n }, Number.POSITIVE_INFINITY);\n};\n\nconst derivedBrandText = (\n theme: ColourSource,\n legible: (colour: string) => boolean,\n): string | undefined => {\n const { primary, foreground } = themeColors(theme);\n return primary === undefined || foreground === undefined\n ? undefined\n : (Array.from({ length: TEXT_STEPS + 1 }, (_, step) =>\n blend(primary, foreground, step / TEXT_STEPS),\n ).find(legible) ?? blend(primary, foreground, 1));\n};\n\nconst anywhereLegible =\n (theme: BrandSource, floors: ContrastFloors) =>\n (colour: string): boolean => {\n const ratio = worstRatio(theme, colour);\n return ratio === undefined || ratio >= floors.secondary;\n };\n\nexport function brandText(theme: Theme, floors?: ContrastFloors): string;\nexport function brandText(\n theme: BrandSource,\n floors?: ContrastFloors,\n): string | undefined;\nexport function brandText(\n theme: BrandSource,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): string | undefined {\n return derivedBrandText(theme, anywhereLegible(theme, floors));\n}\n\nexport function brandTextOn(\n theme: Theme,\n surface: keyof ThemeColors,\n floors?: ContrastFloors,\n): string;\nexport function brandTextOn(\n theme: BrandSource,\n surface: keyof ThemeColors,\n floors?: ContrastFloors,\n): string | undefined;\nexport function brandTextOn(\n theme: BrandSource,\n surface: keyof ThemeColors,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): string | undefined {\n const role = isColorRole(surface) ? surface : undefined;\n if (role === undefined) {\n return derivedBrandText(theme, anywhereLegible(theme, floors));\n }\n const legible = (colour: string): boolean => {\n const ratio = contrastRatio(colour, themeColors(theme)[role]);\n return ratio === undefined || ratio >= floors.secondary;\n };\n return derivedBrandText(theme, legible);\n}\n" }, { "path": "packages/tokens/src/color.ts", "target": "@ui/gpuixui/tokens/color.ts", "type": "registry:lib", "content": "import { colourFunctions, isNamedColour, measuredColour } from \"./measure.js\";\n\nexport const palette = {\n neutral: {\n 0: \"#FFFFFF\",\n 25: \"#FBFCFD\",\n 50: \"#F6F8FA\",\n 100: \"#EEF1F5\",\n 200: \"#E1E5EC\",\n 300: \"#CBD1DB\",\n 400: \"#A1A9B7\",\n 500: \"#737C8C\",\n 600: \"#545D6C\",\n 700: \"#3D4552\",\n 800: \"#2A303B\",\n 850: \"#222730\",\n 900: \"#191D25\",\n 950: \"#11141A\",\n 1000: \"#0B0D11\",\n },\n blue: {\n 50: \"#EFF4FF\",\n 100: \"#DEE9FF\",\n 200: \"#C5D8FF\",\n 300: \"#9FBEFF\",\n 400: \"#6E9CFF\",\n 500: \"#3B76F6\",\n 600: \"#2559D6\",\n 700: \"#1B45AC\",\n 800: \"#173A88\",\n 900: \"#152F6B\",\n 950: \"#0C1D42\",\n },\n iris: {\n 50: \"#EEF0FF\",\n 100: \"#E0E3FF\",\n 200: \"#C7CBFF\",\n 300: \"#A7A9FF\",\n 400: \"#8B85FB\",\n 500: \"#7567F2\",\n 600: \"#5F4BDB\",\n 700: \"#4C39B5\",\n 800: \"#3B2C8F\",\n 900: \"#2E2370\",\n 950: \"#1C1547\",\n },\n red: {\n 50: \"#FFF1F1\",\n 100: \"#FFE0E0\",\n 200: \"#FFC6C6\",\n 300: \"#FF9E9E\",\n 400: \"#FF6B6B\",\n 500: \"#E5484D\",\n 600: \"#CC3439\",\n 700: \"#A5262B\",\n 800: \"#7E1D21\",\n 900: \"#5C1619\",\n 950: \"#3A0B0D\",\n },\n green: {\n 50: \"#ECFDF3\",\n 100: \"#D3F9E2\",\n 200: \"#A8F0C6\",\n 300: \"#6FE0A3\",\n 400: \"#3BC97F\",\n 500: \"#1FA968\",\n 600: \"#158754\",\n 700: \"#116A43\",\n 800: \"#0E5135\",\n 900: \"#0A3A26\",\n 950: \"#042015\",\n },\n amber: {\n 50: \"#FFF8E8\",\n 100: \"#FFEFC6\",\n 200: \"#FFDE8A\",\n 300: \"#FFC94D\",\n 400: \"#F5B01F\",\n 500: \"#D99400\",\n 600: \"#B57600\",\n 700: \"#8E5B00\",\n 800: \"#6B4500\",\n 900: \"#4B3100\",\n 950: \"#2A1B00\",\n },\n} as const;\n\nexport interface ThemeColors {\n readonly background: string;\n\n readonly foreground: string;\n\n readonly card: string;\n\n readonly cardForeground: string;\n\n readonly popover: string;\n\n readonly popoverForeground: string;\n\n readonly primary: string;\n\n readonly primaryForeground: string;\n\n readonly secondary: string;\n\n readonly secondaryForeground: string;\n\n readonly muted: string;\n\n readonly mutedForeground: string;\n\n readonly accent: string;\n\n readonly accentForeground: string;\n\n readonly destructive: string;\n\n readonly destructiveForeground: string;\n\n readonly success: string;\n\n readonly successForeground: string;\n\n readonly warning: string;\n\n readonly warningForeground: string;\n\n readonly info: string;\n\n readonly infoForeground: string;\n\n readonly infoSoft: string;\n\n readonly infoSoftForeground: string;\n\n readonly successSoft: string;\n\n readonly successSoftForeground: string;\n\n readonly warningSoft: string;\n\n readonly warningSoftForeground: string;\n\n readonly destructiveSoft: string;\n\n readonly destructiveSoftForeground: string;\n\n readonly border: string;\n\n readonly borderStrong: string;\n\n readonly input: string;\n\n readonly inputForeground: string;\n\n readonly placeholder: string;\n\n readonly ring: string;\n\n readonly selection: string;\n\n readonly overlay: string;\n\n readonly hover: string;\n\n readonly active: string;\n\n readonly selected: string;\n\n readonly selectedForeground: string;\n\n readonly disabled: string;\n\n readonly disabledForeground: string;\n\n readonly skeleton: string;\n\n readonly scrollbar: string;\n\n readonly shadow: string;\n}\n\nexport interface ColourSource {\n readonly colors?: Partial> | null;\n}\n\nexport const namesColour = (value: unknown): value is string =>\n typeof value === \"string\" && value.trim() !== \"\";\n\nconst isRoleTable = (\n colors: Partial>,\n): colors is Partial => Object.values(colors).every(namesColour);\n\nexport function themeColors(theme: ColourSource): Partial {\n const colors = theme.colors;\n if (colors === undefined || colors === null) {\n return {};\n }\n return isRoleTable(colors)\n ? colors\n : colorRoles.reduce>((roles, role) => {\n const value = colors[role];\n return namesColour(value) ? { ...roles, [role]: value } : roles;\n }, {});\n}\n\nexport const lightColors = {\n background: palette.neutral[50],\n foreground: palette.neutral[900],\n card: palette.neutral[0],\n cardForeground: palette.neutral[900],\n popover: palette.neutral[0],\n popoverForeground: palette.neutral[900],\n primary: palette.iris[600],\n primaryForeground: palette.neutral[0],\n secondary: palette.neutral[200],\n secondaryForeground: palette.neutral[800],\n muted: palette.neutral[100],\n\n mutedForeground: \"#4B5362\",\n accent: palette.iris[100],\n accentForeground: palette.iris[800],\n destructive: palette.red[600],\n destructiveForeground: palette.neutral[0],\n success: palette.green[600],\n successForeground: palette.neutral[0],\n warning: palette.amber[400],\n warningForeground: palette.amber[950],\n info: palette.blue[600],\n infoForeground: palette.neutral[0],\n\n infoSoft: palette.blue[200],\n infoSoftForeground: palette.blue[900],\n successSoft: palette.green[200],\n successSoftForeground: palette.green[900],\n warningSoft: palette.amber[200],\n warningSoftForeground: palette.amber[900],\n destructiveSoft: palette.red[200],\n destructiveSoftForeground: palette.red[900],\n border: palette.neutral[200],\n borderStrong: \"#616A79\",\n input: palette.neutral[0],\n inputForeground: palette.neutral[900],\n placeholder: \"#606A79\",\n\n ring: palette.iris[600],\n selection: \"#7567F23D\",\n overlay: \"#00000073\",\n hover: \"#E4E9F0\",\n active: \"#D6DBE4\",\n selected: \"#DADDF8\",\n selectedForeground: palette.iris[800],\n disabled: palette.neutral[100],\n disabledForeground: palette.neutral[400],\n skeleton: palette.neutral[200],\n scrollbar: palette.neutral[300],\n shadow: \"#191D2526\",\n} satisfies ThemeColors;\n\nexport const darkColors = {\n background: palette.neutral[950],\n foreground: palette.neutral[100],\n card: palette.neutral[900],\n cardForeground: palette.neutral[100],\n popover: palette.neutral[850],\n popoverForeground: palette.neutral[50],\n primary: palette.iris[300],\n primaryForeground: palette.neutral[950],\n secondary: palette.neutral[800],\n secondaryForeground: palette.neutral[200],\n\n muted: \"#1E222A\",\n\n mutedForeground: \"#C1C7D1\",\n accent: palette.iris[900],\n accentForeground: palette.iris[200],\n destructive: palette.red[400],\n destructiveForeground: palette.red[950],\n success: palette.green[400],\n successForeground: palette.green[950],\n warning: palette.amber[300],\n warningForeground: palette.amber[950],\n info: palette.blue[300],\n infoForeground: palette.neutral[950],\n\n infoSoft: palette.blue[800],\n infoSoftForeground: palette.blue[100],\n successSoft: palette.green[800],\n successSoftForeground: palette.green[100],\n warningSoft: palette.amber[800],\n warningSoftForeground: palette.amber[100],\n destructiveSoft: palette.red[800],\n destructiveSoftForeground: palette.red[100],\n border: palette.neutral[800],\n borderStrong: \"#99A2AF\",\n input: palette.neutral[900],\n inputForeground: palette.neutral[100],\n placeholder: \"#858E9F\",\n ring: palette.iris[300],\n selection: \"#A7A9FF3D\",\n overlay: \"#000000A6\",\n hover: \"#272D37\",\n active: \"#333A46\",\n selected: \"#322773\",\n selectedForeground: palette.iris[200],\n disabled: palette.neutral[850],\n disabledForeground: palette.neutral[600],\n skeleton: palette.neutral[800],\n scrollbar: palette.neutral[700],\n shadow: \"#00000080\",\n} satisfies ThemeColors;\n\nexport const highContrastLightColors = {\n background: \"#FFFFFF\",\n foreground: \"#000000\",\n card: \"#FFFFFF\",\n cardForeground: \"#000000\",\n popover: \"#FFFFFF\",\n popoverForeground: \"#000000\",\n primary: \"#3B2C8F\",\n primaryForeground: \"#FFFFFF\",\n secondary: \"#E8E8E8\",\n secondaryForeground: \"#000000\",\n muted: \"#F2F2F2\",\n mutedForeground: \"#1F1F1F\",\n accent: \"#E0E3FF\",\n accentForeground: \"#2E2370\",\n destructive: \"#7E1D21\",\n destructiveForeground: \"#FFFFFF\",\n success: \"#0E5135\",\n successForeground: \"#FFFFFF\",\n warning: \"#F5B01F\",\n warningForeground: \"#000000\",\n info: palette.blue[700],\n infoForeground: \"#FFFFFF\",\n\n infoSoft: palette.blue[300],\n infoSoftForeground: palette.blue[950],\n successSoft: palette.green[300],\n successSoftForeground: palette.green[950],\n warningSoft: palette.amber[300],\n warningSoftForeground: palette.amber[950],\n destructiveSoft: palette.red[300],\n destructiveSoftForeground: palette.red[950],\n border: \"#6E7683\",\n borderStrong: \"#454A53\",\n input: \"#FFFFFF\",\n inputForeground: \"#000000\",\n placeholder: \"#4A4F58\",\n\n ring: \"#3B2C8F\",\n selection: \"#7567F24D\",\n overlay: \"#000000A6\",\n hover: \"#E8E8E8\",\n active: \"#D6D6D6\",\n selected: \"#D9DCF7\",\n selectedForeground: \"#2E2370\",\n\n disabled: \"#F2F2F2\",\n disabledForeground: \"#5A5A5A\",\n skeleton: \"#D6D6D6\",\n scrollbar: \"#9A9A9A\",\n shadow: \"#00000040\",\n} satisfies ThemeColors;\n\nexport const highContrastDarkColors = {\n background: \"#000000\",\n foreground: \"#FFFFFF\",\n card: \"#0D0D0D\",\n cardForeground: \"#FFFFFF\",\n popover: \"#141414\",\n popoverForeground: \"#FFFFFF\",\n primary: \"#C7CBFF\",\n primaryForeground: \"#000000\",\n secondary: \"#2E2E2E\",\n secondaryForeground: \"#FFFFFF\",\n muted: \"#1A1A1A\",\n mutedForeground: \"#E0E0E0\",\n accent: \"#231B59\",\n accentForeground: \"#E0E3FF\",\n destructive: \"#FF9E9E\",\n destructiveForeground: \"#000000\",\n success: \"#6FE0A3\",\n successForeground: \"#000000\",\n warning: \"#FFC94D\",\n warningForeground: \"#000000\",\n info: palette.blue[200],\n infoForeground: \"#000000\",\n infoSoft: palette.blue[900],\n infoSoftForeground: palette.blue[100],\n successSoft: palette.green[900],\n successSoftForeground: palette.green[100],\n warningSoft: palette.amber[900],\n warningSoftForeground: palette.amber[100],\n destructiveSoft: palette.red[900],\n destructiveSoftForeground: palette.red[100],\n border: \"#7A7A7A\",\n borderStrong: \"#C8C8C8\",\n input: \"#0D0D0D\",\n inputForeground: \"#FFFFFF\",\n placeholder: \"#B0B0B0\",\n ring: \"#C7CBFF\",\n selection: \"#C7CBFF42\",\n overlay: \"#000000CC\",\n hover: \"#2E2E2E\",\n active: \"#3D3D3D\",\n selected: \"#27205C\",\n selectedForeground: \"#E0E3FF\",\n\n disabled: \"#1A1A1A\",\n disabledForeground: \"#8A8A8A\",\n skeleton: \"#3D3D3D\",\n scrollbar: \"#8A8A8A\",\n\n shadow: \"#4A4A4AB3\",\n} satisfies ThemeColors;\n\nconst paintedHex =\n /^#?(?:[0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;\n\ninterface ChannelScan {\n readonly channels: readonly string[];\n readonly channel: string;\n readonly depth: number;\n readonly slash: boolean;\n readonly broken: boolean;\n}\n\nconst isChannelList = (args: string): boolean => {\n const initial: ChannelScan = {\n channels: [],\n channel: \"\",\n depth: 0,\n slash: false,\n broken: false,\n };\n const scan = args.split(\"\").reduce((state: ChannelScan, character) => {\n const top = state.depth === 0;\n if (state.broken) {\n return state;\n }\n if (character === \"(\") {\n return {\n ...state,\n depth: state.depth + 1,\n channel: state.channel + character,\n };\n }\n if (character === \")\") {\n return top\n ? { ...state, broken: true }\n : {\n ...state,\n depth: state.depth - 1,\n channel: state.channel + character,\n };\n }\n if (top && character === \"/\") {\n return { ...state, slash: true };\n }\n if (top && (character === \",\" || /\\s/.test(character))) {\n return {\n ...state,\n channels:\n state.channel === \"\"\n ? state.channels\n : [...state.channels, state.channel],\n channel: \"\",\n };\n }\n return { ...state, channel: state.channel + character };\n }, initial);\n if (scan.broken || scan.depth !== 0) {\n return false;\n }\n const channels =\n scan.channel === \"\" ? scan.channels : [...scan.channels, scan.channel];\n\n if (channels[0]?.toLowerCase() === \"from\") {\n return true;\n }\n return scan.slash\n ? channels.length === 4\n : channels.length === 3 || channels.length === 4;\n};\n\nexport const isPaintableColor = (value: unknown): boolean => {\n if (typeof value !== \"string\") {\n return false;\n }\n const colour = value.trim();\n if (paintedHex.test(colour) || isNamedColour(colour)) {\n return true;\n }\n const open = colour.indexOf(\"(\");\n if (open < 1 || !colour.endsWith(\")\")) {\n return false;\n }\n\n return (\n colourFunctions.has(colour.slice(0, open).trimEnd().toLowerCase()) &&\n isChannelList(colour.slice(open + 1, -1))\n );\n};\n\nexport function alpha(color: string, amount: number): string {\n const resolved = measuredColour(color);\n if (resolved === undefined || !Number.isFinite(amount)) {\n return color;\n }\n const byte = Math.round(Math.min(Math.max(amount, 0), 1) * 255);\n const hex = byte.toString(16).padStart(2, \"0\");\n return `${resolved.rgb}${hex}`.toUpperCase();\n}\n\nexport function alphaOf(color: unknown): number {\n const alphaByte = measuredColour(color)?.alpha;\n return alphaByte === undefined ? 1 : Number.parseInt(alphaByte, 16) / 255;\n}\n\nexport function blend(color: string, toward: string, amount: number): string {\n const base = measuredColour(color);\n const target = measuredColour(toward);\n if (base === undefined || target === undefined || !Number.isFinite(amount)) {\n return color;\n }\n const from = base.rgb.slice(1);\n const to = target.rgb.slice(1);\n const ratio = Math.min(Math.max(amount, 0), 1);\n const channel = (at: number): string => {\n const start = Number.parseInt(from.slice(at, at + 2), 16);\n const end = Number.parseInt(to.slice(at, at + 2), 16);\n return Math.round(start + (end - start) * ratio)\n .toString(16)\n .padStart(2, \"0\");\n };\n const rgb = [0, 2, 4].map(channel).join(\"\");\n return `#${rgb}${base.alpha ?? \"\"}`.toUpperCase();\n}\n\nexport const colorRoles = [\n \"background\",\n \"foreground\",\n \"card\",\n \"cardForeground\",\n \"popover\",\n \"popoverForeground\",\n \"primary\",\n \"primaryForeground\",\n \"secondary\",\n \"secondaryForeground\",\n \"muted\",\n \"mutedForeground\",\n \"accent\",\n \"accentForeground\",\n \"destructive\",\n \"destructiveForeground\",\n \"success\",\n \"successForeground\",\n \"warning\",\n \"warningForeground\",\n \"info\",\n \"infoForeground\",\n \"infoSoft\",\n \"infoSoftForeground\",\n \"successSoft\",\n \"successSoftForeground\",\n \"warningSoft\",\n \"warningSoftForeground\",\n \"destructiveSoft\",\n \"destructiveSoftForeground\",\n \"border\",\n \"borderStrong\",\n \"input\",\n \"inputForeground\",\n \"placeholder\",\n \"ring\",\n \"selection\",\n \"overlay\",\n \"hover\",\n \"active\",\n \"selected\",\n \"selectedForeground\",\n \"disabled\",\n \"disabledForeground\",\n \"skeleton\",\n \"scrollbar\",\n \"shadow\",\n] as const satisfies readonly (keyof ThemeColors)[];\n\ntype EveryColorRoleListed =\n Exclude extends never\n ? true\n : [\n \"a colour role is missing from the index\",\n Exclude,\n ];\n\nconst colorRoleIndex: EveryColorRoleListed<(typeof colorRoles)[number]> = true;\n\nvoid colorRoleIndex;\n\nexport const isColorRole = (value: unknown): value is keyof ThemeColors =>\n colorRoles.some((role) => role === value);\n\nexport interface InvalidColorRole {\n readonly role: keyof ThemeColors;\n\n readonly value: unknown;\n}\n\nconst storedRole = (theme: ColourSource, role: keyof ThemeColors): unknown => {\n const value: unknown = theme.colors?.[role];\n return value === null ? undefined : value;\n};\n\nexport function invalidColorRoles(\n theme: ColourSource,\n): readonly InvalidColorRole[] {\n return colorRoles.flatMap((role) => {\n const value = storedRole(theme, role);\n return isPaintableColor(value) ? [] : [{ role, value }];\n });\n}\n" }, { "path": "packages/tokens/src/contrast.ts", "target": "@ui/gpuixui/tokens/contrast.ts", "type": "registry:lib", "content": "import { themeColors, type ColourSource, type ThemeColors } from \"./color.js\";\nimport { relativeLuminance } from \"./luminance.js\";\nimport { themeContrastOf } from \"./mode.js\";\n\nexport function contrastRatio(\n foreground: string | undefined,\n background: string | undefined,\n): number | undefined {\n const first = relativeLuminance(foreground);\n const second = relativeLuminance(background);\n if (first === undefined || second === undefined) {\n return undefined;\n }\n const high = Math.max(first, second);\n const low = Math.min(first, second);\n return (high + 0.05) / (low + 0.05);\n}\n\nexport interface ContrastFloors {\n readonly body: number;\n\n readonly secondary: number;\n\n readonly boundary: number;\n\n readonly disabled: number;\n}\n\nexport const contrastFloors: ContrastFloors = {\n body: 7,\n secondary: 4.5,\n boundary: 3,\n disabled: 1.5,\n};\n\nexport const highContrastFloors: ContrastFloors = {\n body: 7,\n secondary: 7,\n boundary: 4.5,\n disabled: 3,\n};\n\nexport interface ContrastSource {\n readonly contrast?: unknown;\n}\n\nexport function contrastFloorsFor(theme: ContrastSource): ContrastFloors {\n return themeContrastOf(theme) === \"high\"\n ? highContrastFloors\n : contrastFloors;\n}\n\nexport interface ContrastPair {\n readonly foreground: keyof ThemeColors;\n\n readonly background: keyof ThemeColors;\n\n readonly floor: keyof ContrastFloors;\n}\n\nexport const contrastPairs: readonly ContrastPair[] = [\n { foreground: \"foreground\", background: \"background\", floor: \"body\" },\n { foreground: \"foreground\", background: \"card\", floor: \"body\" },\n\n { foreground: \"foreground\", background: \"popover\", floor: \"body\" },\n { foreground: \"foreground\", background: \"muted\", floor: \"body\" },\n { foreground: \"cardForeground\", background: \"card\", floor: \"body\" },\n { foreground: \"popoverForeground\", background: \"popover\", floor: \"body\" },\n { foreground: \"inputForeground\", background: \"input\", floor: \"body\" },\n\n { foreground: \"inputForeground\", background: \"background\", floor: \"body\" },\n { foreground: \"placeholder\", background: \"background\", floor: \"secondary\" },\n\n { foreground: \"mutedForeground\", background: \"input\", floor: \"secondary\" },\n {\n foreground: \"mutedForeground\",\n background: \"background\",\n floor: \"secondary\",\n },\n { foreground: \"mutedForeground\", background: \"card\", floor: \"secondary\" },\n { foreground: \"mutedForeground\", background: \"muted\", floor: \"secondary\" },\n {\n foreground: \"mutedForeground\",\n background: \"popover\",\n floor: \"secondary\",\n },\n {\n foreground: \"secondaryForeground\",\n background: \"secondary\",\n floor: \"secondary\",\n },\n {\n foreground: \"primaryForeground\",\n background: \"primary\",\n floor: \"secondary\",\n },\n {\n foreground: \"destructiveForeground\",\n background: \"destructive\",\n floor: \"secondary\",\n },\n {\n foreground: \"successForeground\",\n background: \"success\",\n floor: \"secondary\",\n },\n {\n foreground: \"warningForeground\",\n background: \"warning\",\n floor: \"secondary\",\n },\n { foreground: \"infoForeground\", background: \"info\", floor: \"secondary\" },\n { foreground: \"infoSoftForeground\", background: \"infoSoft\", floor: \"body\" },\n\n { foreground: \"foreground\", background: \"infoSoft\", floor: \"body\" },\n { foreground: \"foreground\", background: \"successSoft\", floor: \"body\" },\n { foreground: \"foreground\", background: \"warningSoft\", floor: \"body\" },\n { foreground: \"foreground\", background: \"destructiveSoft\", floor: \"body\" },\n\n {\n foreground: \"mutedForeground\",\n background: \"successSoft\",\n floor: \"secondary\",\n },\n {\n foreground: \"mutedForeground\",\n background: \"destructiveSoft\",\n floor: \"secondary\",\n },\n {\n foreground: \"successSoftForeground\",\n background: \"successSoft\",\n floor: \"body\",\n },\n {\n foreground: \"warningSoftForeground\",\n background: \"warningSoft\",\n floor: \"body\",\n },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"destructiveSoft\",\n floor: \"body\",\n },\n\n { foreground: \"infoSoftForeground\", background: \"background\", floor: \"body\" },\n { foreground: \"infoSoftForeground\", background: \"card\", floor: \"body\" },\n {\n foreground: \"successSoftForeground\",\n background: \"background\",\n floor: \"body\",\n },\n { foreground: \"successSoftForeground\", background: \"card\", floor: \"body\" },\n {\n foreground: \"warningSoftForeground\",\n background: \"background\",\n floor: \"body\",\n },\n { foreground: \"warningSoftForeground\", background: \"card\", floor: \"body\" },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"background\",\n floor: \"body\",\n },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"card\",\n floor: \"body\",\n },\n\n { foreground: \"infoSoftForeground\", background: \"popover\", floor: \"body\" },\n {\n foreground: \"successSoftForeground\",\n background: \"popover\",\n floor: \"body\",\n },\n {\n foreground: \"warningSoftForeground\",\n background: \"popover\",\n floor: \"body\",\n },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"popover\",\n floor: \"body\",\n },\n\n { foreground: \"infoSoftForeground\", background: \"muted\", floor: \"body\" },\n { foreground: \"successSoftForeground\", background: \"muted\", floor: \"body\" },\n { foreground: \"warningSoftForeground\", background: \"muted\", floor: \"body\" },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"muted\",\n floor: \"body\",\n },\n\n {\n foreground: \"accentForeground\",\n background: \"accent\",\n floor: \"body\",\n },\n\n { foreground: \"foreground\", background: \"hover\", floor: \"body\" },\n { foreground: \"foreground\", background: \"active\", floor: \"body\" },\n { foreground: \"foreground\", background: \"accent\", floor: \"body\" },\n { foreground: \"mutedForeground\", background: \"hover\", floor: \"secondary\" },\n { foreground: \"mutedForeground\", background: \"active\", floor: \"secondary\" },\n { foreground: \"mutedForeground\", background: \"accent\", floor: \"secondary\" },\n\n {\n foreground: \"foreground\",\n background: \"secondary\",\n floor: \"body\",\n },\n {\n foreground: \"mutedForeground\",\n background: \"secondary\",\n floor: \"secondary\",\n },\n\n { foreground: \"foreground\", background: \"selected\", floor: \"body\" },\n {\n foreground: \"selectedForeground\",\n background: \"selected\",\n floor: \"body\",\n },\n { foreground: \"selectedForeground\", background: \"hover\", floor: \"body\" },\n { foreground: \"selectedForeground\", background: \"active\", floor: \"body\" },\n { foreground: \"selectedForeground\", background: \"accent\", floor: \"body\" },\n\n { foreground: \"popoverForeground\", background: \"hover\", floor: \"body\" },\n { foreground: \"popoverForeground\", background: \"active\", floor: \"body\" },\n\n { foreground: \"popoverForeground\", background: \"selected\", floor: \"body\" },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"hover\",\n floor: \"body\",\n },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"active\",\n floor: \"body\",\n },\n\n {\n foreground: \"destructiveSoftForeground\",\n background: \"selected\",\n floor: \"body\",\n },\n {\n foreground: \"destructiveSoftForeground\",\n background: \"accent\",\n floor: \"body\",\n },\n { foreground: \"placeholder\", background: \"input\", floor: \"secondary\" },\n { foreground: \"borderStrong\", background: \"background\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"card\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"input\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"background\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"card\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"popover\", floor: \"boundary\" },\n\n { foreground: \"ring\", background: \"muted\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"secondary\", floor: \"boundary\" },\n\n { foreground: \"ring\", background: \"input\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"selected\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"hover\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"active\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"accent\", floor: \"boundary\" },\n\n { foreground: \"borderStrong\", background: \"muted\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"secondary\", floor: \"boundary\" },\n\n { foreground: \"borderStrong\", background: \"popover\", floor: \"boundary\" },\n\n { foreground: \"borderStrong\", background: \"hover\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"active\", floor: \"boundary\" },\n\n { foreground: \"borderStrong\", background: \"accent\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"selected\", floor: \"boundary\" },\n\n { foreground: \"borderStrong\", background: \"infoSoft\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"successSoft\", floor: \"boundary\" },\n { foreground: \"borderStrong\", background: \"warningSoft\", floor: \"boundary\" },\n {\n foreground: \"borderStrong\",\n background: \"destructiveSoft\",\n floor: \"boundary\",\n },\n\n { foreground: \"ring\", background: \"infoSoft\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"successSoft\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"warningSoft\", floor: \"boundary\" },\n { foreground: \"ring\", background: \"destructiveSoft\", floor: \"boundary\" },\n\n { foreground: \"destructive\", background: \"input\", floor: \"boundary\" },\n { foreground: \"destructive\", background: \"secondary\", floor: \"boundary\" },\n\n {\n foreground: \"disabledForeground\",\n background: \"disabled\",\n floor: \"disabled\",\n },\n\n {\n foreground: \"disabledForeground\",\n background: \"background\",\n floor: \"disabled\",\n },\n { foreground: \"disabledForeground\", background: \"card\", floor: \"disabled\" },\n {\n foreground: \"disabledForeground\",\n background: \"popover\",\n floor: \"disabled\",\n },\n\n { foreground: \"disabledForeground\", background: \"muted\", floor: \"disabled\" },\n {\n foreground: \"disabledForeground\",\n background: \"secondary\",\n floor: \"disabled\",\n },\n\n {\n foreground: \"mutedForeground\",\n background: \"selected\",\n floor: \"secondary\",\n },\n];\n\nexport interface ContrastFailure {\n readonly foreground: keyof ThemeColors;\n\n readonly background: keyof ThemeColors;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport function contrastFailures(\n theme: ColourSource & ContrastSource,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): readonly ContrastFailure[] {\n const colors = themeColors(theme);\n return contrastPairs.flatMap(({ foreground, background, floor }) => {\n const ratio = contrastRatio(colors[foreground], colors[background]);\n return ratio !== undefined && ratio >= floors[floor]\n ? []\n : [{ foreground, background, ratio, floor: floors[floor] }];\n });\n}\n" }, { "path": "packages/tokens/src/crossfade.ts", "target": "@ui/gpuixui/tokens/crossfade.ts", "type": "registry:lib", "content": "import { measuredColour } from \"./measure.js\";\nimport type { Theme } from \"./theme.js\";\n\nconst channels = (\n value: string,\n): readonly [number, number, number, number] | undefined => {\n const measured = measuredColour(value);\n if (measured === undefined) return undefined;\n const byte = (at: number) =>\n Number.parseInt(measured.rgb.slice(at, at + 2), 16);\n const alpha =\n measured.alpha === undefined ? 255 : Number.parseInt(measured.alpha, 16);\n return [byte(1), byte(3), byte(5), alpha];\n};\n\nconst hex = (n: number) =>\n Math.round(Math.min(255, Math.max(0, n)))\n .toString(16)\n .padStart(2, \"0\");\n\nexport const mixColor = (from: string, to: string, k: number): string => {\n const a = channels(from);\n const b = channels(to);\n if (a === undefined || b === undefined) return k < 0.5 ? from : to;\n const at = (i: 0 | 1 | 2 | 3) => a[i] + (b[i] - a[i]) * k;\n return `#${hex(at(0))}${hex(at(1))}${hex(at(2))}${hex(at(3))}`;\n};\n\nconst mixValue = (from: unknown, to: unknown, k: number): unknown => {\n if (typeof from === \"string\" && typeof to === \"string\")\n return from === to ? from : mixColor(from, to, k);\n if (typeof from === \"number\" && typeof to === \"number\")\n return from + (to - from) * k;\n if (Array.isArray(from) && Array.isArray(to))\n return from.map((value, i) => mixValue(value, to[i], k));\n if (\n typeof from === \"object\" &&\n from !== null &&\n typeof to === \"object\" &&\n to !== null\n ) {\n const a = from as Record;\n const b = to as Record;\n return Object.fromEntries(\n Object.keys(a).map((key) => [\n key,\n key in b ? mixValue(a[key], b[key], k) : a[key],\n ]),\n );\n }\n return k < 0.5 ? from : to;\n};\n\n// Ink takes the new theme at once: mixed alongside its surface it would cross it mid-fade and vanish.\nconst mixColors = (\n from: Theme[\"colors\"],\n to: Theme[\"colors\"],\n k: number,\n): Theme[\"colors\"] => {\n const a = from as unknown as Record;\n const b = to as unknown as Record;\n return Object.fromEntries(\n Object.keys(b).map((role) => {\n const ink = role.toLowerCase().endsWith(\"foreground\");\n return [role, ink ? b[role] : mixValue(a[role], b[role], k)];\n }),\n ) as unknown as Theme[\"colors\"];\n};\n\nexport const mixThemes = (from: Theme, to: Theme, k: number): Theme => {\n const settled = k <= 0 ? from : k >= 1 ? to : undefined;\n return (\n settled ?? {\n ...to,\n colors: mixColors(from.colors, to.colors, k),\n elevation: mixValue(\n from.elevation,\n to.elevation,\n k,\n ) as Theme[\"elevation\"],\n ...(from.switch !== undefined && to.switch !== undefined\n ? {\n switch: mixValue(from.switch, to.switch, k) as NonNullable<\n Theme[\"switch\"]\n >,\n }\n : {}),\n }\n );\n};\n" }, { "path": "packages/tokens/src/decorative.ts", "target": "@ui/gpuixui/tokens/decorative.ts", "type": "registry:lib", "content": "import {\n alphaOf,\n blend,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastPairs,\n contrastRatio,\n type ContrastPair,\n type ContrastSource,\n} from \"./contrast.js\";\nimport type { ElevationLevel, ShadowSource } from \"./elevation.js\";\nimport {\n filledFeedback,\n filledFeedbackStates,\n filledRoles,\n statusEdgeAlpha,\n statusTones,\n type FilledFeedbackState,\n type FilledRole,\n} from \"./styles.js\";\n\nexport const decorativeFloor = 1.05;\n\nexport interface DecorativeSurface {\n readonly surface:\n | \"divider\"\n | \"softDivider\"\n | \"skeleton\"\n | \"scrim\"\n | \"statusTint\"\n | \"statusEdge\"\n | \"scrollbar\"\n | \"stateWash\"\n | \"filledAction\"\n | \"track\"\n | \"disabledFace\"\n | \"actionFeedback\"\n | \"pointerWash\"\n | \"derivedDivider\"\n | \"pressedDivider\"\n | \"elevation\";\n\n readonly role: keyof ThemeColors;\n\n readonly over: keyof ThemeColors;\n\n readonly alpha?: number;\n\n readonly level?: ElevationLevel;\n}\n\nconst statusEdge = (\n tone: (typeof statusTones)[number],\n over: keyof ThemeColors,\n): DecorativeSurface => ({\n surface: \"statusEdge\",\n role: tone,\n over,\n alpha: statusEdgeAlpha,\n});\n\nconst statusTintStrips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nconst statusWashStrips = [\"hover\", \"active\", \"selected\", \"accent\"] as const;\n\nconst stateWashRoles = [\"hover\", \"active\", \"selected\", \"accent\"] as const;\nconst stateWashStrips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nconst filledActionRole = \"secondary\" as const;\nconst filledActionStrips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nconst trackRole = \"muted\" as const;\nconst trackStrips = [\"background\", \"card\", \"popover\"] as const;\n\nexport const softDividerAlpha = 0.5;\n\nexport interface ActionFeedbackPlacement {\n readonly role: FilledRole;\n\n readonly state: FilledFeedbackState;\n}\n\nexport const actionFeedbackPlacements: readonly ActionFeedbackPlacement[] =\n filledRoles.flatMap((role) =>\n filledFeedbackStates.map(\n (state): ActionFeedbackPlacement => ({ role, state }),\n ),\n );\n\nexport function actionFeedbackFailures(\n theme: ColourSource & ContrastSource,\n floor: number = decorativeFloor,\n): readonly DecorativeFailure[] {\n return actionFeedbackPlacements.flatMap(({ role, state }) => {\n const resting = themeColors(theme)[role];\n const painted = filledFeedback(theme, role, state);\n const ratio =\n resting === undefined || painted === undefined\n ? undefined\n : contrastRatio(painted, resting);\n return ratio !== undefined && ratio >= floor\n ? []\n : [\n {\n surface: \"actionFeedback\" as const,\n role,\n over: role,\n ratio,\n floor,\n },\n ];\n });\n}\n\nexport type PointerWashSurface = \"selected\" | \"accent\" | \"hover\";\n\nexport type PointerWashRole = \"accent\" | \"active\";\n\nexport interface PointerWashTransition {\n readonly wash: PointerWashRole;\n\n readonly replaced: PointerWashSurface;\n}\n\nexport const pointerWashTransitions: readonly PointerWashTransition[] = [\n { wash: \"accent\", replaced: \"selected\" },\n { wash: \"active\", replaced: \"accent\" },\n { wash: \"active\", replaced: \"hover\" },\n];\n\nconst pointerWashLabels: Readonly<\n Record\n> = {\n accent: contrastPairs.filter(({ background }) => background === \"accent\"),\n active: contrastPairs.filter(({ background }) => background === \"active\"),\n};\n\nconst POINTER_STEP_CEILING = 0.18;\n\nconst POINTER_STEPS: readonly number[] = [\n 0,\n ...Array.from(\n { length: Math.round(POINTER_STEP_CEILING * 100) },\n (_, offset) => (offset + 1) / 100,\n ),\n];\n\nexport function pointerWash(\n source: ColourSource & ContrastSource,\n wash: PointerWashRole,\n replaced: PointerWashSurface,\n floor: number = decorativeFloor,\n): string | undefined {\n const colors = themeColors(source);\n const base = colors[wash];\n const over = colors[replaced];\n const toward = colors.foreground;\n if (base === undefined || over === undefined || toward === undefined) {\n return undefined;\n }\n const floors = contrastFloorsFor(source);\n const paintedAt = (step: number): string => blend(base, toward, step);\n const seenAt = (step: number): boolean => {\n const ratio = contrastRatio(paintedAt(step), over);\n return ratio !== undefined && ratio >= floor;\n };\n const readableAt = (step: number): boolean =>\n pointerWashLabels[wash].every(({ foreground, floor: kind }) => {\n const ratio = contrastRatio(colors[foreground], paintedAt(step));\n return ratio !== undefined && ratio >= floors[kind];\n });\n const firstSeen = POINTER_STEPS.find(seenAt);\n const lastReadable = [...POINTER_STEPS].reverse().find(readableAt);\n return paintedAt(\n Math.min(\n firstSeen ?? POINTER_STEP_CEILING,\n lastReadable ?? POINTER_STEP_CEILING,\n ),\n );\n}\n\nexport function pointerWashFailures(\n theme: ColourSource & ContrastSource,\n floor: number = decorativeFloor,\n): readonly DecorativeFailure[] {\n return pointerWashTransitions.flatMap(({ wash, replaced }) => {\n const painted = pointerWash(theme, wash, replaced, floor);\n const ratio =\n painted === undefined\n ? undefined\n : contrastRatio(painted, themeColors(theme)[replaced]);\n return ratio !== undefined && ratio >= floor\n ? []\n : [\n {\n surface: \"pointerWash\" as const,\n role: wash,\n over: replaced,\n ratio,\n floor,\n },\n ];\n });\n}\n\nexport const dividerWashes = [\n \"hover\",\n \"accent\",\n \"selected\",\n] as const satisfies ReadonlyArray;\n\nexport type DividerWash = (typeof dividerWashes)[number];\n\nexport const dividerPresses: ReadonlyArray =\n pointerWashTransitions.flatMap(({ wash, replaced }) =>\n wash === \"active\" ? [replaced] : [],\n );\n\nconst DIVIDER_STEPS = 50;\n\nexport function dividerOn(\n source: ColourSource,\n surface: string | undefined,\n floor: number = decorativeFloor,\n): string | undefined {\n const colors = themeColors(source);\n const base = colors.border;\n const strongest = colors.borderStrong;\n if (base === undefined || strongest === undefined) return undefined;\n if (surface === undefined) return base;\n const seen = (colour: string): boolean => {\n const ratio = contrastRatio(colour, surface);\n return ratio !== undefined && ratio >= floor;\n };\n\n if (contrastRatio(base, surface) === undefined || seen(base)) return base;\n return (\n Array.from({ length: DIVIDER_STEPS }, (_, offset) =>\n blend(base, strongest, (offset + 1) / DIVIDER_STEPS),\n ).find(seen) ?? strongest\n );\n}\n\nexport function dividerFailures(\n theme: ColourSource & ContrastSource,\n floor: number = decorativeFloor,\n): readonly DecorativeFailure[] {\n const failureOn = (\n surface: \"derivedDivider\" | \"pressedDivider\",\n over: DividerWash | PointerWashSurface,\n painted: string | undefined,\n ): readonly DecorativeFailure[] => {\n const rule = dividerOn(theme, painted, floor);\n const ratio =\n rule === undefined || painted === undefined\n ? undefined\n : contrastRatio(rule, painted);\n return ratio !== undefined && ratio >= floor\n ? []\n : [\n {\n surface,\n role: \"border\" as const,\n over,\n ratio,\n floor,\n },\n ];\n };\n return [\n ...dividerWashes.flatMap((over) =>\n failureOn(\"derivedDivider\", over, themeColors(theme)[over]),\n ),\n ...dividerPresses.flatMap((replaced) =>\n failureOn(\n \"pressedDivider\",\n replaced,\n pointerWash(theme, \"active\", replaced, floor),\n ),\n ),\n ];\n}\n\nconst disabledFaceRole = \"disabled\" as const;\nconst enabledFaces = [\n \"primary\",\n \"secondary\",\n \"destructive\",\n \"accent\",\n \"input\",\n] as const;\n\nconst skeletonStrips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nconst elevationRole = \"shadow\" as const;\n\nconst raisedLevels = [\n \"sm\",\n \"md\",\n \"lg\",\n] as const satisfies ReadonlyArray;\n\nconst messageTintStrips = statusTones.map((tone) => `${tone}Soft` as const);\n\nconst elevationStrips = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n \"secondary\",\n \"primary\",\n \"destructive\",\n \"input\",\n \"selected\",\n \"active\",\n \"accent\",\n \"hover\",\n ...messageTintStrips,\n] as const;\n\nexport const decorativeSurfaces: readonly DecorativeSurface[] = [\n { surface: \"divider\", role: \"border\", over: \"background\" },\n { surface: \"divider\", role: \"border\", over: \"card\" },\n { surface: \"divider\", role: \"border\", over: \"popover\" },\n { surface: \"divider\", role: \"border\", over: \"muted\" },\n\n {\n surface: \"softDivider\",\n role: \"border\",\n over: \"popover\",\n alpha: softDividerAlpha,\n },\n ...skeletonStrips.map(\n (over): DecorativeSurface => ({\n surface: \"skeleton\",\n role: \"skeleton\",\n over,\n }),\n ),\n\n { surface: \"scrim\", role: \"overlay\", over: \"card\" },\n { surface: \"scrim\", role: \"overlay\", over: \"popover\" },\n { surface: \"scrim\", role: \"overlay\", over: \"muted\" },\n { surface: \"scrim\", role: \"overlay\", over: \"secondary\" },\n\n { surface: \"scrim\", role: \"overlay\", over: \"primary\" },\n { surface: \"scrim\", role: \"overlay\", over: \"destructive\" },\n { surface: \"scrim\", role: \"overlay\", over: \"input\" },\n\n { surface: \"scrim\", role: \"overlay\", over: \"selected\" },\n\n { surface: \"scrim\", role: \"overlay\", over: \"active\" },\n { surface: \"scrim\", role: \"overlay\", over: \"accent\" },\n\n { surface: \"scrim\", role: \"overlay\", over: \"hover\" },\n\n ...messageTintStrips.map(\n (over): DecorativeSurface => ({\n surface: \"scrim\",\n role: \"overlay\",\n over,\n }),\n ),\n\n { surface: \"scrollbar\", role: \"scrollbar\", over: \"background\" },\n { surface: \"scrollbar\", role: \"scrollbar\", over: \"card\" },\n { surface: \"scrollbar\", role: \"scrollbar\", over: \"popover\" },\n { surface: \"scrollbar\", role: \"scrollbar\", over: \"muted\" },\n ...filledActionStrips.map(\n (over): DecorativeSurface => ({\n surface: \"filledAction\",\n role: filledActionRole,\n over,\n }),\n ),\n ...trackStrips.map(\n (over): DecorativeSurface => ({\n surface: \"track\",\n role: trackRole,\n over,\n }),\n ),\n ...raisedLevels.flatMap((level) =>\n elevationStrips.map(\n (over): DecorativeSurface => ({\n surface: \"elevation\",\n role: elevationRole,\n over,\n level,\n }),\n ),\n ),\n ...enabledFaces.map(\n (over): DecorativeSurface => ({\n surface: \"disabledFace\",\n role: disabledFaceRole,\n over,\n }),\n ),\n ...stateWashRoles.flatMap((role) =>\n stateWashStrips.map(\n (over): DecorativeSurface => ({\n surface: \"stateWash\",\n role,\n over,\n }),\n ),\n ),\n\n { surface: \"stateWash\", role: \"accent\", over: \"selected\" },\n\n ...statusTones.flatMap((tone) => [\n ...statusTintStrips.map(\n (over): DecorativeSurface => ({\n surface: \"statusTint\",\n role: `${tone}Soft`,\n over,\n }),\n ),\n statusEdge(tone, `${tone}Soft`),\n ...statusTintStrips.map((over) => statusEdge(tone, over)),\n ...statusWashStrips.map((over) => statusEdge(tone, over)),\n ]),\n] satisfies ReadonlyArray;\n\nexport interface DecorativeFailure {\n readonly surface: DecorativeSurface[\"surface\"];\n\n readonly role: keyof ThemeColors;\n\n readonly over: keyof ThemeColors;\n\n readonly level?: ElevationLevel;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport function decorativeFailures(\n theme: ColourSource & ShadowSource & ContrastSource,\n floor: number = decorativeFloor,\n): readonly DecorativeFailure[] {\n const surfaces = decorativeSurfaces.flatMap(\n ({ surface, role, over, alpha, level }) => {\n const colors = themeColors(theme);\n const paintedOver = colors[over];\n const paintedRole =\n level === undefined\n ? colors[role]\n : theme.elevation?.[level]?.[0]?.color;\n const painted =\n paintedOver === undefined || paintedRole === undefined\n ? undefined\n : blend(paintedOver, paintedRole, alpha ?? alphaOf(paintedRole));\n const ratio = contrastRatio(painted, paintedOver);\n return ratio !== undefined && ratio >= floor\n ? []\n : [\n {\n surface,\n role,\n over,\n ...(level === undefined ? {} : { level }),\n ratio,\n floor,\n },\n ];\n },\n );\n const feedback = actionFeedbackFailures(theme, floor);\n const washes = pointerWashFailures(theme, floor);\n const rules = dividerFailures(theme, floor);\n return [...surfaces, ...feedback, ...washes, ...rules];\n}\n" }, { "path": "packages/tokens/src/disabled.ts", "target": "@ui/gpuixui/tokens/disabled.ts", "type": "registry:lib", "content": "import { themeColors, type ColourSource } from \"./color.js\";\nimport { contrastFloors, contrastRatio } from \"./contrast.js\";\nimport { fadedPair, type FadeFailure, type FadePair } from \"./fade.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const disabledOpacity = 0.5;\n\nexport type DisabledFadePair = FadePair;\n\nconst fieldFills = [\"input\", \"background\"] as const;\n\nconst fieldLabels = [\"inputForeground\", \"placeholder\"] as const;\n\nconst fieldStrips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nexport const disabledFadePairs: readonly DisabledFadePair[] = [\n { fill: \"primary\", label: \"primaryForeground\", over: \"background\" },\n { fill: \"destructive\", label: \"destructiveForeground\", over: \"background\" },\n { fill: \"secondary\", label: \"secondaryForeground\", over: \"background\" },\n ...fieldFills.flatMap((fill) =>\n fieldLabels.flatMap((label) =>\n fieldStrips.map((over) => ({ fill, label, over })),\n ),\n ),\n];\n\nexport type DisabledFadeFailure = FadeFailure;\n\nexport function disabledFadeFailures(\n theme: ColourSource,\n floor: number = contrastFloors.disabled,\n): readonly DisabledFadeFailure[] {\n const colors = themeColors(theme);\n return disabledFadePairs.flatMap((pair) => {\n const faded = fadedPair(colors, pair, disabledOpacity);\n const ratio = contrastRatio(faded.label, faded.fill);\n return ratio !== undefined && ratio >= floor\n ? []\n : [{ ...pair, ratio, floor }];\n });\n}\n\nexport interface DisabledActionStyle {\n readonly backgroundColor: string;\n\n readonly color: string;\n}\n\nexport function disabledAction(theme: Theme): DisabledActionStyle;\nexport function disabledAction(\n theme: ColourSource,\n): DisabledActionStyle | undefined;\nexport function disabledAction(\n theme: ColourSource,\n): DisabledActionStyle | undefined {\n const colors = themeColors(theme);\n const background = colors.disabled;\n const label = colors.disabledForeground;\n return background === undefined || label === undefined\n ? undefined\n : { backgroundColor: background, color: label };\n}\n" }, { "path": "packages/tokens/src/elevation.ts", "target": "@ui/gpuixui/tokens/elevation.ts", "type": "registry:lib", "content": "import {\n alpha,\n alphaOf,\n darkColors,\n highContrastDarkColors,\n highContrastLightColors,\n isPaintableColor,\n lightColors,\n} from \"./color.js\";\nimport { measuredColour } from \"./measure.js\";\nimport type { Stored } from \"./theme.js\";\n\nexport interface BoxShadow {\n readonly offsetX: number;\n\n readonly offsetY: number;\n\n readonly blurRadius: number;\n\n readonly spreadRadius: number;\n\n readonly color: string;\n}\n\nexport interface Elevation {\n readonly sm: BoxShadow[];\n\n readonly md: BoxShadow[];\n\n readonly lg: BoxShadow[];\n\n readonly overlay: BoxShadow[];\n}\n\nexport type ElevationLevel = keyof Elevation;\n\nexport const elevationLevels = [\n \"sm\",\n \"md\",\n \"lg\",\n \"overlay\",\n] as const satisfies readonly ElevationLevel[];\n\nexport const isElevationLevel = (value: unknown): value is ElevationLevel =>\n elevationLevels.some((level) => level === value);\n\nconst isShadow = (value: unknown): value is BoxShadow =>\n typeof value === \"object\" && value !== null;\n\nconst shadowColor = (shadow: unknown): string | undefined =>\n isShadow(shadow) && typeof shadow.color === \"string\"\n ? shadow.color\n : undefined;\n\nexport function elevationShadow(\n theme: ShadowSource,\n level: ElevationLevel,\n): BoxShadow | undefined {\n const shadows: unknown =\n theme.elevation?.[isElevationLevel(level) ? level : \"md\"];\n const first: unknown = Array.isArray(shadows) ? shadows[0] : undefined;\n return isShadow(first) ? first : undefined;\n}\n\nexport interface ShadowSource {\n readonly elevation?: Stored;\n}\n\nexport interface InvalidShadowColor {\n readonly level: ElevationLevel;\n\n readonly index: number;\n\n readonly color: string | undefined;\n}\n\nexport function invalidShadowColors(\n theme: ShadowSource,\n): readonly InvalidShadowColor[] {\n return elevationLevels.flatMap((level): ReadonlyArray => {\n const shadows: unknown = theme.elevation?.[level];\n\n if (!Array.isArray(shadows)) {\n return [{ level, index: 0, color: undefined }];\n }\n return shadows.flatMap((shadow: unknown, index) => {\n const color = shadowColor(shadow);\n return isPaintableColor(color) ? [] : [{ level, index, color }];\n });\n });\n}\n\nconst strength = {\n light: { sm: 0.08, md: 0.12, lg: 0.16 },\n dark: { sm: 0.4, md: 0.65, lg: 0.8 },\n} as const;\n\nconst level = (\n offsetY: number,\n blurRadius: number,\n spreadRadius: number,\n share: number,\n tint: string,\n): BoxShadow[] => [\n {\n offsetX: 0,\n offsetY,\n blurRadius,\n spreadRadius,\n color: alpha(tint, share),\n },\n];\n\nexport type ElevationSource = Partial>;\n\nconst retintedShadow = (shadow: unknown, tint: string): unknown => {\n const color = shadowColor(shadow);\n if (!isShadow(shadow) || measuredColour(color) === undefined) {\n return shadow;\n }\n return { ...shadow, color: alpha(tint, alphaOf(color)) };\n};\n\nconst retintedLevel = (shadows: unknown, tint: string): unknown =>\n Array.isArray(shadows)\n ? shadows.map((shadow: unknown) => retintedShadow(shadow, tint))\n : shadows;\n\nexport function elevationWithTint(\n elevation: Elevation,\n tint: string,\n): Elevation;\nexport function elevationWithTint(\n elevation: ElevationSource | undefined,\n tint: string,\n): ElevationSource;\nexport function elevationWithTint(\n elevation: ElevationSource | undefined,\n tint: string,\n): ElevationSource {\n return {\n sm: retintedLevel(elevation?.sm, tint),\n md: retintedLevel(elevation?.md, tint),\n lg: retintedLevel(elevation?.lg, tint),\n overlay: retintedLevel(elevation?.overlay, tint),\n };\n}\n\nexport const lightElevation: Elevation = {\n sm: level(1, 2, 0, strength.light.sm, lightColors.shadow),\n md: level(4, 12, -2, strength.light.md, lightColors.shadow),\n lg: level(16, 40, -8, strength.light.lg, lightColors.shadow),\n overlay: [],\n};\n\nexport const darkElevation: Elevation = {\n sm: level(1, 2, 0, strength.dark.sm, darkColors.shadow),\n md: level(8, 24, -4, strength.dark.md, darkColors.shadow),\n lg: level(24, 56, -12, strength.dark.lg, darkColors.shadow),\n overlay: [],\n};\n\nexport const highContrastLightElevation: Elevation = elevationWithTint(\n lightElevation,\n highContrastLightColors.shadow,\n);\n\nexport const highContrastDarkElevation: Elevation = elevationWithTint(\n darkElevation,\n highContrastDarkColors.shadow,\n);\n" }, { "path": "packages/tokens/src/fade.ts", "target": "@ui/gpuixui/tokens/fade.ts", "type": "registry:lib", "content": "import { blend, type ThemeColors } from \"./color.js\";\n\nexport interface FadePair {\n readonly fill: keyof ThemeColors;\n\n readonly label: keyof ThemeColors;\n\n readonly over: keyof ThemeColors;\n}\n\nexport interface FadeFailure extends FadePair {\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport const fadedPair = (\n colors: Partial,\n { fill, label, over }: FadePair,\n opacity: number,\n): {\n readonly label: string | undefined;\n readonly fill: string | undefined;\n} => {\n const fillColour = colors[fill];\n const overColour = colors[over];\n const labelColour = colors[label];\n if (\n fillColour === undefined ||\n overColour === undefined ||\n labelColour === undefined\n ) {\n return { label: undefined, fill: undefined };\n }\n const fadedFill = blend(fillColour, overColour, 1 - opacity);\n return {\n label: blend(labelColour, fadedFill, 1 - opacity),\n fill: fadedFill,\n };\n};\n" }, { "path": "packages/tokens/src/focus-dim.ts", "target": "@ui/gpuixui/tokens/focus-dim.ts", "type": "registry:lib", "content": "import { themeColors, type ColourSource, type ThemeColors } from \"./color.js\";\nimport { contrastRatio } from \"./contrast.js\";\nimport { decorativeFloor } from \"./decorative.js\";\nimport { fadedPair, type FadeFailure, type FadePair } from \"./fade.js\";\n\nexport const keyboardFocusDimOpacity = 0.4;\n\nexport type KeyboardDimPair = FadePair;\n\nconst strips = [\"background\", \"card\", \"popover\", \"muted\"] as const;\n\nconst fieldFills = [\"input\", \"background\"] as const;\n\nconst fieldLabels = [\"inputForeground\", \"placeholder\"] as const;\n\nconst washedRows: ReadonlyArray<\n readonly [fill: keyof ThemeColors, label: keyof ThemeColors]\n> = [\n [\"hover\", \"foreground\"],\n [\"accent\", \"foreground\"],\n [\"accent\", \"selectedForeground\"],\n [\"active\", \"foreground\"],\n [\"active\", \"selectedForeground\"],\n];\n\nexport const keyboardDimPairs: readonly KeyboardDimPair[] = strips.flatMap(\n (over) => [\n { fill: \"primary\", label: \"primaryForeground\", over },\n { fill: \"secondary\", label: \"secondaryForeground\", over },\n { fill: \"destructive\", label: \"destructiveForeground\", over },\n ...fieldFills.flatMap((fill) =>\n fieldLabels.map((label) => ({ fill, label, over })),\n ),\n { fill: over, label: \"foreground\", over },\n { fill: over, label: \"mutedForeground\", over },\n { fill: \"selected\", label: \"selectedForeground\", over },\n ...washedRows.map(([fill, label]) => ({ fill, label, over })),\n ],\n);\n\nexport type KeyboardDimFailure = FadeFailure;\n\nexport function keyboardDimFailures(\n theme: ColourSource,\n floor: number = decorativeFloor,\n): readonly KeyboardDimFailure[] {\n const colors = themeColors(theme);\n return keyboardDimPairs.flatMap((pair) => {\n const dimmed = fadedPair(colors, pair, keyboardFocusDimOpacity);\n const ratio = contrastRatio(dimmed.label, dimmed.fill);\n return ratio !== undefined && ratio >= floor\n ? []\n : [{ ...pair, ratio, floor }];\n });\n}\n" }, { "path": "packages/tokens/src/fonts.ts", "target": "@ui/gpuixui/tokens/fonts.ts", "type": "registry:lib", "content": "export interface FontRegistrar {\n registerFont(data: Uint8Array): void;\n}\n\nexport interface FontSource {\n readonly family: string;\n\n readonly data: Uint8Array;\n}\n\nconst installed = new WeakMap>();\n\nconst installedWith = (registrar: FontRegistrar): WeakSet => {\n const seen = installed.get(registrar);\n if (seen !== undefined) {\n return seen;\n }\n const created = new WeakSet();\n installed.set(registrar, created);\n return created;\n};\n\nexport function registerFonts(\n registrar: FontRegistrar,\n fonts: ReadonlyArray,\n): ReadonlyArray {\n const seen = installedWith(registrar);\n const families: string[] = [];\n fonts.forEach((font) => {\n if (!seen.has(font.data)) {\n registrar.registerFont(font.data);\n seen.add(font.data);\n }\n if (!families.includes(font.family)) {\n families.push(font.family);\n }\n });\n return families;\n}\n" }, { "path": "packages/tokens/src/highlight.ts", "target": "@ui/gpuixui/tokens/highlight.ts", "type": "registry:lib", "content": "import {\n alpha,\n alphaOf,\n blend,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n} from \"./contrast.js\";\nimport { decorativeFloor } from \"./decorative.js\";\nimport type { Radius } from \"./scale.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const highlightShares = { match: 0.3, active: 0.65 } as const;\n\nexport const highlightSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n] as const;\n\nexport type HighlightSurface = (typeof highlightSurfaces)[number];\n\nexport interface FindHighlight {\n readonly color: string;\n\n readonly activeColor: string;\n\n readonly radius: number;\n}\n\nconst SHARES = 100;\n\nconst steps: ReadonlyArray = Array.from(\n { length: SHARES + 1 },\n (_, index) => index / SHARES,\n);\n\nconst composite = (\n colors: Partial,\n fill: HighlightSurface,\n share: number,\n): string | undefined => {\n const surface = colors[fill];\n const accent = colors.primary;\n if (surface === undefined || accent === undefined) {\n return undefined;\n }\n const wash = alpha(accent, share);\n return blend(surface, wash, alphaOf(wash));\n};\n\nconst carries = (\n colors: Partial,\n share: number,\n floor: number,\n): boolean =>\n highlightSurfaces.every((fill) => {\n const painted = composite(colors, fill, share);\n if (painted === undefined) {\n return false;\n }\n const visible = contrastRatio(painted, colors[fill]);\n const legible = contrastRatio(colors.foreground, painted);\n return (\n visible !== undefined &&\n visible >= decorativeFloor &&\n legible !== undefined &&\n legible >= floor\n );\n });\n\nconst strongest = (\n colors: Partial,\n floor: number,\n): number | undefined =>\n steps.filter((share) => carries(colors, share, floor)).at(-1);\n\nconst standsApart = (\n colors: Partial,\n share: number,\n rest: number,\n): boolean =>\n highlightSurfaces.every((fill) => {\n const wash = composite(colors, fill, share);\n const other = composite(colors, fill, rest);\n if (wash === undefined || other === undefined) {\n return false;\n }\n const ratio = contrastRatio(wash, other);\n return ratio !== undefined && ratio >= decorativeFloor;\n });\n\nconst sharesFor = (\n colors: Partial,\n floors: ContrastFloors,\n): { readonly match: number; readonly active: number } => {\n const bodyCeiling = strongest(colors, floors.body);\n const match = Math.min(\n highlightShares.match,\n bodyCeiling ?? highlightShares.match,\n );\n const secondaryCeiling = strongest(colors, floors.secondary);\n const active =\n bodyCeiling !== undefined && standsApart(colors, bodyCeiling, match)\n ? bodyCeiling\n : secondaryCeiling !== undefined &&\n standsApart(colors, secondaryCeiling, match)\n ? secondaryCeiling\n : (bodyCeiling ?? secondaryCeiling ?? highlightShares.active);\n return { match, active: Math.max(active, match) };\n};\n\nexport interface FindHighlightSource extends ColourSource {\n readonly contrast?: unknown;\n\n readonly radius?: Partial | null;\n}\n\nexport function findHighlight(\n theme: Theme,\n floors?: ContrastFloors,\n): FindHighlight;\nexport function findHighlight(\n source: FindHighlightSource,\n floors?: ContrastFloors,\n): FindHighlight | undefined;\nexport function findHighlight(\n source: FindHighlightSource,\n floors: ContrastFloors = contrastFloorsFor(source),\n): FindHighlight | undefined {\n const colors = themeColors(source);\n const primary = colors.primary;\n\n const radius = source.radius?.sm;\n if (\n primary === undefined ||\n colors.foreground === undefined ||\n radius === undefined ||\n highlightSurfaces.some((fill) => colors[fill] === undefined)\n ) {\n return undefined;\n }\n const { match, active } = sharesFor(colors, floors);\n return {\n color: alpha(primary, match),\n activeColor: alpha(primary, active),\n radius,\n };\n}\n\nexport interface HighlightFailure {\n readonly kind: \"visibility\" | \"legibility\" | \"distinct\";\n\n readonly state: \"match\" | \"active\";\n\n readonly surface: HighlightSurface;\n\n readonly wash: string | undefined;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport function highlightFailures(\n theme: ColourSource & { readonly contrast?: unknown },\n floors: ContrastFloors = contrastFloorsFor(theme),\n): readonly HighlightFailure[] {\n const colors = themeColors(theme);\n const { match, active } = sharesFor(colors, floors);\n const states = [\n { state: \"match\", share: match, floor: floors.body },\n { state: \"active\", share: active, floor: floors.secondary },\n ] as const;\n const measured = highlightSurfaces.flatMap((surface) =>\n states.flatMap(({ state, share, floor }) => {\n const wash = composite(colors, surface, share);\n const failures: HighlightFailure[] = [];\n const visible = contrastRatio(wash, colors[surface]);\n if (visible === undefined || visible < decorativeFloor) {\n failures.push({\n kind: \"visibility\",\n state,\n surface,\n wash,\n ratio: visible,\n floor: decorativeFloor,\n });\n }\n const legible = contrastRatio(colors.foreground, wash);\n if (legible === undefined || legible < floor) {\n failures.push({\n kind: \"legibility\",\n state,\n surface,\n wash,\n ratio: legible,\n floor,\n });\n }\n return failures;\n }),\n );\n const apart = highlightSurfaces.flatMap((surface) => {\n const wash = composite(colors, surface, active);\n const rest = composite(colors, surface, match);\n const ratio = contrastRatio(wash, rest);\n return ratio !== undefined && ratio >= decorativeFloor\n ? []\n : [\n {\n kind: \"distinct\" as const,\n state: \"active\" as const,\n surface,\n wash,\n ratio,\n floor: decorativeFloor,\n },\n ];\n });\n return [...measured, ...apart];\n}\n" }, { "path": "packages/tokens/src/index.ts", "target": "@ui/gpuixui/tokens/index.ts", "type": "registry:lib", "content": "export * from \"./audit.js\";\nexport * from \"./brand-text.js\";\nexport * from \"./color.js\";\nexport * from \"./contrast.js\";\nexport * from \"./crossfade.js\";\nexport * from \"./decorative.js\";\nexport * from \"./disabled.js\";\nexport * from \"./elevation.js\";\nexport * from \"./focus-dim.js\";\nexport * from \"./fonts.js\";\nexport * from \"./highlight.js\";\nexport * from \"./indicator.js\";\nexport * from \"./materials.js\";\nexport * from \"./native-text.js\";\nexport * from \"./numbers.js\";\nexport * from \"./omarchy.js\";\nexport * from \"./platforms.js\";\nexport * from \"./retro.js\";\nexport * from \"./scale.js\";\nexport * from \"./scales.js\";\nexport * from \"./selection.js\";\nexport * from \"./series.js\";\nexport * from \"./shadcn-vars.js\";\nexport * from \"./shadcn.js\";\nexport * from \"./styles.js\";\nexport * from \"./switch.js\";\nexport * from \"./syntax.js\";\nexport * from \"./system-theme.js\";\nexport * from \"./theme.js\";\nexport * from \"./typography.js\";\n" }, { "path": "packages/tokens/src/indicator.ts", "target": "@ui/gpuixui/tokens/indicator.ts", "type": "registry:lib", "content": "import { themeColors, type ColourSource, type ThemeColors } from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n type ContrastSource,\n} from \"./contrast.js\";\nimport { statusTones } from \"./styles.js\";\n\nexport const indicatorRoles = [\n \"primary\",\n \"success\",\n \"destructive\",\n \"mutedForeground\",\n ...statusTones.map((tone) => `${tone}SoftForeground` as const),\n] as const satisfies readonly (keyof ThemeColors)[];\n\nexport const indicatorSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n \"hover\",\n \"active\",\n \"accent\",\n \"selected\",\n\n \"input\",\n ...statusTones.map((tone) => `${tone}Soft` as const),\n] as const;\n\nexport interface IndicatorFailure {\n readonly role: keyof ThemeColors;\n\n readonly surface: keyof ThemeColors;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport function indicatorFailures(\n theme: ColourSource & ContrastSource,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): readonly IndicatorFailure[] {\n const colors = themeColors(theme);\n return indicatorRoles.flatMap((role) =>\n indicatorSurfaces.flatMap((surface): ReadonlyArray => {\n const ratio = contrastRatio(colors[role], colors[surface]);\n return ratio !== undefined && ratio >= floors.boundary\n ? []\n : [{ role, surface, ratio, floor: floors.boundary }];\n }),\n );\n}\n" }, { "path": "packages/tokens/src/luminance.ts", "target": "@ui/gpuixui/tokens/luminance.ts", "type": "registry:lib", "content": "import { opaqueRgb } from \"./measure.js\";\n\nconst channel = (rgb: string, at: number): number => {\n const srgb = Number.parseInt(rgb.slice(at, at + 2), 16) / 255;\n return srgb <= 0.04045 ? srgb / 12.92 : ((srgb + 0.055) / 1.055) ** 2.4;\n};\n\nexport const relativeLuminance = (\n color: string | undefined,\n): number | undefined => {\n const rgb = color === undefined ? undefined : opaqueRgb(color);\n return rgb === undefined\n ? undefined\n : 0.2126 * channel(rgb, 1) +\n 0.7152 * channel(rgb, 3) +\n 0.0722 * channel(rgb, 5);\n};\n\nexport const pageMode = (\n background: string | undefined,\n): \"light\" | \"dark\" | undefined => {\n const page = relativeLuminance(background);\n if (page === undefined) {\n return undefined;\n }\n\n return 1.05 / (page + 0.05) > (page + 0.05) / 0.05 ? \"dark\" : \"light\";\n};\n" }, { "path": "packages/tokens/src/materials.ts", "target": "@ui/gpuixui/tokens/materials.ts", "type": "registry:lib", "content": "import type { ThemeColors } from \"./color.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const materialNames = [\n \"sidebar\",\n \"titlebar\",\n \"popover\",\n \"hud\",\n \"sheet\",\n] as const;\n\nexport type MaterialName = (typeof materialNames)[number];\n\nexport type MaterialFills = Readonly>>;\n\nexport type WindowBackground = \"opaque\" | \"blurred\";\n\nexport const materialFallback: Readonly<\n Record\n> = {\n sidebar: \"muted\",\n titlebar: \"background\",\n popover: \"popover\",\n hud: \"popover\",\n sheet: \"card\",\n};\n\nexport const materialFill = (theme: Theme, name: MaterialName): string => {\n const fill = theme.materials?.[name];\n return fill === undefined ||\n theme.window !== \"blurred\" ||\n theme.reduceTransparency === true\n ? theme.colors[materialFallback[name]]\n : fill;\n};\n" }, { "path": "packages/tokens/src/measure.ts", "target": "@ui/gpuixui/tokens/measure.ts", "type": "registry:lib", "content": "export interface MeasuredColour {\n readonly rgb: string;\n\n readonly alpha?: string;\n}\n\nexport const namedColours: Readonly> = {\n aliceblue: \"F0F8FF\",\n antiquewhite: \"FAEBD7\",\n aqua: \"00FFFF\",\n aquamarine: \"7FFFD4\",\n azure: \"F0FFFF\",\n beige: \"F5F5DC\",\n bisque: \"FFE4C4\",\n black: \"000000\",\n blanchedalmond: \"FFEBCD\",\n blue: \"0000FF\",\n blueviolet: \"8A2BE2\",\n brown: \"A52A2A\",\n burlywood: \"DEB887\",\n cadetblue: \"5F9EA0\",\n chartreuse: \"7FFF00\",\n chocolate: \"D2691E\",\n coral: \"FF7F50\",\n cornflowerblue: \"6495ED\",\n cornsilk: \"FFF8DC\",\n crimson: \"DC143C\",\n cyan: \"00FFFF\",\n darkblue: \"00008B\",\n darkcyan: \"008B8B\",\n darkgoldenrod: \"B8860B\",\n darkgray: \"A9A9A9\",\n darkgreen: \"006400\",\n darkgrey: \"A9A9A9\",\n darkkhaki: \"BDB76B\",\n darkmagenta: \"8B008B\",\n darkolivegreen: \"556B2F\",\n darkorange: \"FF8C00\",\n darkorchid: \"9932CC\",\n darkred: \"8B0000\",\n darksalmon: \"E9967A\",\n darkseagreen: \"8FBC8F\",\n darkslateblue: \"483D8B\",\n darkslategray: \"2F4F4F\",\n darkslategrey: \"2F4F4F\",\n darkturquoise: \"00CED1\",\n darkviolet: \"9400D3\",\n deeppink: \"FF1493\",\n deepskyblue: \"00BFFF\",\n dimgray: \"696969\",\n dimgrey: \"696969\",\n dodgerblue: \"1E90FF\",\n firebrick: \"B22222\",\n floralwhite: \"FFFAF0\",\n forestgreen: \"228B22\",\n fuchsia: \"FF00FF\",\n gainsboro: \"DCDCDC\",\n ghostwhite: \"F8F8FF\",\n gold: \"FFD700\",\n goldenrod: \"DAA520\",\n gray: \"808080\",\n green: \"008000\",\n greenyellow: \"ADFF2F\",\n grey: \"808080\",\n honeydew: \"F0FFF0\",\n hotpink: \"FF69B4\",\n indianred: \"CD5C5C\",\n indigo: \"4B0082\",\n ivory: \"FFFFF0\",\n khaki: \"F0E68C\",\n lavender: \"E6E6FA\",\n lavenderblush: \"FFF0F5\",\n lawngreen: \"7CFC00\",\n lemonchiffon: \"FFFACD\",\n lightblue: \"ADD8E6\",\n lightcoral: \"F08080\",\n lightcyan: \"E0FFFF\",\n lightgoldenrodyellow: \"FAFAD2\",\n lightgray: \"D3D3D3\",\n lightgreen: \"90EE90\",\n lightgrey: \"D3D3D3\",\n lightpink: \"FFB6C1\",\n lightsalmon: \"FFA07A\",\n lightseagreen: \"20B2AA\",\n lightskyblue: \"87CEFA\",\n lightslategray: \"778899\",\n lightslategrey: \"778899\",\n lightsteelblue: \"B0C4DE\",\n lightyellow: \"FFFFE0\",\n lime: \"00FF00\",\n limegreen: \"32CD32\",\n linen: \"FAF0E6\",\n magenta: \"FF00FF\",\n maroon: \"800000\",\n mediumaquamarine: \"66CDAA\",\n mediumblue: \"0000CD\",\n mediumorchid: \"BA55D3\",\n mediumpurple: \"9370DB\",\n mediumseagreen: \"3CB371\",\n mediumslateblue: \"7B68EE\",\n mediumspringgreen: \"00FA9A\",\n mediumturquoise: \"48D1CC\",\n mediumvioletred: \"C71585\",\n midnightblue: \"191970\",\n mintcream: \"F5FFFA\",\n mistyrose: \"FFE4E1\",\n moccasin: \"FFE4B5\",\n navajowhite: \"FFDEAD\",\n navy: \"000080\",\n oldlace: \"FDF5E6\",\n olive: \"808000\",\n olivedrab: \"6B8E23\",\n orange: \"FFA500\",\n orangered: \"FF4500\",\n orchid: \"DA70D6\",\n palegoldenrod: \"EEE8AA\",\n palegreen: \"98FB98\",\n paleturquoise: \"AFEEEE\",\n palevioletred: \"DB7093\",\n papayawhip: \"FFEFD5\",\n peachpuff: \"FFDAB9\",\n peru: \"CD853F\",\n pink: \"FFC0CB\",\n plum: \"DDA0DD\",\n powderblue: \"B0E0E6\",\n purple: \"800080\",\n rebeccapurple: \"663399\",\n red: \"FF0000\",\n rosybrown: \"BC8F8F\",\n royalblue: \"4169E1\",\n saddlebrown: \"8B4513\",\n salmon: \"FA8072\",\n sandybrown: \"F4A460\",\n seagreen: \"2E8B57\",\n seashell: \"FFF5EE\",\n sienna: \"A0522D\",\n silver: \"C0C0C0\",\n skyblue: \"87CEEB\",\n slateblue: \"6A5ACD\",\n slategray: \"708090\",\n slategrey: \"708090\",\n snow: \"FFFAFA\",\n springgreen: \"00FF7F\",\n steelblue: \"4682B4\",\n tan: \"D2B48C\",\n teal: \"008080\",\n thistle: \"D8BFD8\",\n tomato: \"FF6347\",\n turquoise: \"40E0D0\",\n violet: \"EE82EE\",\n wheat: \"F5DEB3\",\n white: \"FFFFFF\",\n whitesmoke: \"F5F5F5\",\n yellow: \"FFFF00\",\n yellowgreen: \"9ACD32\",\n transparent: \"00000000\",\n};\n\nconst entry = (\n table: Readonly>,\n key: string,\n): Value | undefined => (Object.hasOwn(table, key) ? table[key] : undefined);\n\nexport const isNamedColour = (value: string): boolean =>\n entry(namedColours, value.trim().toLowerCase()) !== undefined;\n\nexport const colourFunctions: ReadonlySet = new Set([\n \"rgb\",\n \"rgba\",\n \"hsl\",\n \"hsla\",\n \"hwb\",\n \"hwba\",\n \"hsv\",\n \"hsva\",\n \"lab\",\n \"lch\",\n \"oklab\",\n \"oklch\",\n]);\n\nconst hexDigits = /^#?([0-9A-Fa-f]{3,4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;\nconst decimal = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)$/;\nconst huePattern = /^([+-]?(?:\\d+\\.?\\d*|\\.\\d+))(deg|grad|rad|turn)?$/;\nconst functionPattern = /^([a-z]+)\\s*\\(([\\s\\S]*)\\)$/i;\n\nconst widen = (digits: string): string =>\n digits.length > 4\n ? digits\n : digits\n .split(\"\")\n .map((digit) => `${digit}${digit}`)\n .join(\"\");\n\nconst fromHex = (value: string): MeasuredColour | undefined => {\n const digits = hexDigits.exec(value)?.[1];\n if (digits === undefined) {\n return undefined;\n }\n const channels = widen(digits).toUpperCase();\n const alpha = channels.length === 8 ? channels.slice(6) : undefined;\n return alpha === undefined || alpha === \"FF\"\n ? { rgb: `#${channels.slice(0, 6)}` }\n : { rgb: `#${channels.slice(0, 6)}`, alpha };\n};\n\nconst clamp = (value: number, low: number, high: number): number =>\n Math.min(Math.max(value, low), high);\n\nconst byte = (channel: number): string =>\n Math.round(clamp(channel, 0, 255))\n .toString(16)\n .padStart(2, \"0\")\n .toUpperCase();\n\ninterface Amount {\n readonly value: number;\n readonly percent: boolean;\n}\n\nconst amount = (text: string): Amount | undefined => {\n const percent = text.endsWith(\"%\");\n const numeric = percent ? text.slice(0, -1) : text;\n return decimal.test(numeric)\n ? { value: Number(numeric), percent }\n : undefined;\n};\n\nconst degrees = (text: string): number | undefined => {\n const [, value = \"\", unit = \"deg\"] =\n huePattern.exec(text.toLowerCase()) ?? [];\n const scale: Readonly> = {\n deg: 1,\n grad: 0.9,\n rad: 180 / Math.PI,\n turn: 360,\n };\n return decimal.test(value) ? Number(value) * (scale[unit] ?? 1) : undefined;\n};\n\nconst share = (text: string): number | undefined => amount(text)?.value;\n\nconst level = (text: string): number | undefined => {\n const channel = amount(text);\n if (channel === undefined) {\n return undefined;\n }\n return channel.percent ? (channel.value * 255) / 100 : channel.value;\n};\n\nconst alphaByte = (text: string): string | undefined => {\n const channel = amount(text);\n if (channel === undefined) {\n return undefined;\n }\n return byte((channel.percent ? channel.value / 100 : channel.value) * 255);\n};\n\nconst hueChannel = (base: number, span: number, offset: number): number => {\n const wrapped = ((offset % 1) + 1) % 1;\n if (wrapped < 1 / 6) {\n return base + (span - base) * 6 * wrapped;\n }\n if (wrapped < 1 / 2) {\n return span;\n }\n return wrapped < 2 / 3 ? base + (span - base) * (2 / 3 - wrapped) * 6 : base;\n};\n\nconst pureHue = (hue: number): readonly [number, number, number] => {\n const base = 0;\n const span = 1;\n return [\n hueChannel(base, span, hue / 360 + 1 / 3) * 255,\n hueChannel(base, span, hue / 360) * 255,\n hueChannel(base, span, hue / 360 - 1 / 3) * 255,\n ];\n};\n\nconst sectorRgb = (\n hue: number,\n chroma: number,\n): readonly [number, number, number] => {\n const position = (((hue % 360) + 360) % 360) / 60;\n const second = chroma * (1 - Math.abs((position % 2) - 1));\n const sectors: readonly (readonly [number, number, number])[] = [\n [chroma, second, 0],\n [second, chroma, 0],\n [0, chroma, second],\n [0, second, chroma],\n [second, 0, chroma],\n [chroma, 0, second],\n ];\n return sectors[Math.floor(position) % 6] ?? [0, 0, 0];\n};\n\nconst hslChannels = (\n hue: number,\n saturation: number,\n lightness: number,\n): readonly [number, number, number] => {\n const sat = clamp(saturation, 0, 100) / 100;\n const light = clamp(lightness, 0, 100) / 100;\n if (sat === 0) {\n return [light * 255, light * 255, light * 255];\n }\n const span = light < 0.5 ? light * (1 + sat) : light + sat - light * sat;\n const base = 2 * light - span;\n return [\n hueChannel(base, span, hue / 360 + 1 / 3) * 255,\n hueChannel(base, span, hue / 360) * 255,\n hueChannel(base, span, hue / 360 - 1 / 3) * 255,\n ];\n};\n\nconst hwbChannels = (\n hue: number,\n white: number,\n black: number,\n): readonly [number, number, number] => {\n const pale = clamp(white, 0, 100) / 100;\n const dark = clamp(black, 0, 100) / 100;\n if (pale + dark >= 1) {\n const grey = (pale / (pale + dark)) * 255;\n return [grey, grey, grey];\n }\n const pure = pureHue(hue);\n const scale = (channel: number): number =>\n channel * (1 - pale - dark) + pale * 255;\n return [scale(pure[0]), scale(pure[1]), scale(pure[2])];\n};\n\nconst hsvChannels = (\n hue: number,\n saturation: number,\n value: number,\n): readonly [number, number, number] => {\n const sat = clamp(saturation, 0, 100) / 100;\n const bright = clamp(value, 0, 100) / 100;\n const chroma = bright * sat;\n const lift = bright - chroma;\n const [red, green, blue] = sectorRgb(hue, chroma);\n return [(red + lift) * 255, (green + lift) * 255, (blue + lift) * 255];\n};\n\ninterface Channels {\n readonly values: readonly string[];\n readonly alpha?: string;\n}\n\nconst splitChannels = (args: string): Channels | undefined => {\n const parts = args.split(\"/\");\n if (parts.length > 2) {\n return undefined;\n }\n const body = parts[0] ?? \"\";\n const explicit = parts[1]?.trim();\n if (parts.length === 2 && (explicit === undefined || explicit === \"\")) {\n return undefined;\n }\n const separated = body.includes(\",\");\n const values = (separated ? body.split(\",\") : body.trim().split(/\\s+/)).map(\n (value) => value.trim(),\n );\n if (values.length === 4 && explicit === undefined) {\n return { values: values.slice(0, 3), alpha: values[3] };\n }\n return values.length === 3 ? { values, alpha: explicit } : undefined;\n};\n\ntype Family = (\n channels: readonly string[],\n alpha: string | undefined,\n) => MeasuredColour | undefined;\n\nconst measured = (\n channels: readonly [number, number, number],\n alpha: string | undefined,\n): MeasuredColour => ({\n rgb: `#${channels.map(byte).join(\"\")}`,\n ...(alpha === undefined || alpha === \"FF\" ? {} : { alpha }),\n});\n\nconst channelRgb: Family = (values, alpha) => {\n const channels = values.map(level);\n const [red, green, blue] = channels;\n return red === undefined || green === undefined || blue === undefined\n ? undefined\n : measured([red, green, blue], alpha);\n};\n\nconst hueFamily =\n (\n channels: (\n hue: number,\n first: number,\n second: number,\n ) => readonly [number, number, number],\n ): Family =>\n (values, alpha) => {\n const [hueText, firstText, secondText] = values;\n if (\n hueText === undefined ||\n firstText === undefined ||\n secondText === undefined\n ) {\n return undefined;\n }\n const hue = degrees(hueText);\n const first = share(firstText);\n const second = share(secondText);\n return hue === undefined || first === undefined || second === undefined\n ? undefined\n : measured(channels(hue, first, second), alpha);\n };\n\nconst families: Readonly> = {\n rgb: channelRgb,\n rgba: channelRgb,\n hsl: hueFamily(hslChannels),\n hsla: hueFamily(hslChannels),\n hwb: hueFamily(hwbChannels),\n hwba: hueFamily(hwbChannels),\n hsv: hueFamily(hsvChannels),\n hsva: hueFamily(hsvChannels),\n};\n\nconst fromFunction = (\n name: string,\n args: string,\n): MeasuredColour | undefined => {\n const family = entry(families, name);\n const channels = splitChannels(args);\n if (family === undefined || channels === undefined) {\n return undefined;\n }\n const alpha =\n channels.alpha === undefined ? undefined : alphaByte(channels.alpha);\n return alpha === undefined && channels.alpha !== undefined\n ? undefined\n : family(channels.values, alpha);\n};\n\nexport const measuredColour = (value: unknown): MeasuredColour | undefined => {\n if (typeof value !== \"string\") {\n return undefined;\n }\n const colour = value.trim();\n const hex = fromHex(colour);\n if (hex !== undefined) {\n return hex;\n }\n const name = colour.toLowerCase();\n const named = entry(namedColours, name);\n if (named !== undefined) {\n return fromHex(named);\n }\n const match = functionPattern.exec(colour);\n const [, family = \"\", args = \"\"] = match ?? [];\n return fromFunction(family.toLowerCase(), args);\n};\n\nexport const opaqueRgb = (value: unknown): string | undefined => {\n const measured = measuredColour(value);\n return measured !== undefined && measured.alpha === undefined\n ? measured.rgb\n : undefined;\n};\n" }, { "path": "packages/tokens/src/missing.ts", "target": "@ui/gpuixui/tokens/missing.ts", "type": "registry:lib", "content": "import { typography as shippedTypography } from \"./typography.js\";\nimport {\n borderWidth,\n defaultDensity,\n iconSize,\n radius,\n spacing,\n} from \"./scale.js\";\n\nconst numericGroups = [\n \"spacing\",\n \"radius\",\n \"borderWidth\",\n \"iconSize\",\n \"typography\",\n \"density\",\n] as const;\n\ntype NumericGroupSource = {\n readonly [group in (typeof numericGroups)[number]]?: unknown;\n};\n\ninterface RequiredStep {\n readonly group: (typeof numericGroups)[number];\n\n readonly path: string;\n\n readonly fields?: readonly string[];\n\n readonly family?: boolean;\n}\n\nconst recordSteps = (\n group: RequiredStep[\"group\"],\n record: object,\n prefix = \"\",\n): readonly RequiredStep[] =>\n Object.keys(record).map((key) => ({ group, path: `${prefix}${key}` }));\n\nconst requiredSteps: readonly RequiredStep[] = [\n ...recordSteps(\"spacing\", spacing),\n ...recordSteps(\"radius\", radius),\n ...recordSteps(\"borderWidth\", borderWidth),\n ...recordSteps(\"iconSize\", iconSize),\n ...Object.entries(shippedTypography).map(\n ([role, value]): RequiredStep =>\n typeof value === \"string\"\n ? { group: \"typography\", path: role, family: true }\n : { group: \"typography\", path: role, fields: Object.keys(value) },\n ),\n ...recordSteps(\"density\", defaultDensity.controlHeight, \"controlHeight.\"),\n ...recordSteps(\"density\", defaultDensity.controlPaddingX, \"controlPaddingX.\"),\n { group: \"density\", path: \"rowHeight\" },\n];\n\nconst isRecord = (value: unknown): value is Record =>\n typeof value === \"object\" && value !== null;\n\nexport const isStepRecord = (\n scale: unknown,\n): scale is Readonly> =>\n typeof scale === \"object\" && scale !== null && !Array.isArray(scale);\n\nconst groupSource = (theme: unknown): NumericGroupSource =>\n isRecord(theme) ? theme : {};\n\nconst readPath = (source: unknown, path: string): unknown =>\n path\n .split(\".\")\n .reduce(\n (value, key) =>\n isRecord(value) && key in value ? value[key] : undefined,\n source,\n );\n\nconst isAbsent = (value: unknown): boolean =>\n value === undefined || value === null;\n\nexport type MissingTokenKind = \"group\" | \"step\" | \"family\";\n\nexport interface MissingToken {\n readonly group: (typeof numericGroups)[number];\n\n readonly path: string;\n\n readonly kind: MissingTokenKind;\n}\n\nexport function missingTokens(theme: unknown): readonly MissingToken[] {\n const source = groupSource(theme);\n const carries = (group: MissingToken[\"group\"]): boolean =>\n !isAbsent(source[group]);\n const groups = numericGroups\n .filter((group) => !carries(group))\n .map((group): MissingToken => ({ group, path: \"\", kind: \"group\" }));\n const steps = requiredSteps.flatMap(({ group, path, fields }) => {\n if (!carries(group)) {\n return [];\n }\n const step = readPath(source[group], path);\n if (isAbsent(step)) {\n return [{ group, path, kind: \"step\" as const }];\n }\n return (fields ?? [])\n .filter((field) => isAbsent(readPath(step, field)))\n .map((field) => ({\n group,\n path: `${path}.${field}`,\n kind: \"step\" as const,\n }));\n });\n const families = requiredSteps.flatMap(({ group, path, family }) => {\n if (family !== true || !carries(group)) {\n return [];\n }\n const value = readPath(source[group], path);\n\n return isAbsent(value) || (typeof value === \"string\" && value.trim() !== \"\")\n ? []\n : [{ group, path, kind: \"family\" as const }];\n });\n return [...groups, ...steps, ...families];\n}\n\nconst tokenNames = (missing: readonly MissingToken[]): string =>\n missing\n .map(({ group, path }) => `\\`${path === \"\" ? group : `${group}.${path}`}\\``)\n .join(\", \");\n\nconst refuseGroups = (missing: readonly MissingToken[]): void => {\n const groups = missing.filter(({ kind }) => kind === \"group\");\n if (groups.length > 0) {\n throw new Error(\n `a theme must carry every numeric group: ${tokenNames(groups)} ${\n groups.length === 1 ? \"is\" : \"are\"\n } missing. A group is a breaking change, so a theme stored by an older release must be rebuilt from a shipped one with \\`extendTheme\\`.`,\n );\n }\n};\n\nexport const requireGroups = (theme: unknown): void =>\n refuseGroups(missingTokens(theme));\n\nexport const requireTokens = (theme: unknown): void => {\n const missing = missingTokens(theme);\n refuseGroups(missing);\n const steps = missing.filter(({ kind }) => kind === \"step\");\n if (steps.length > 0) {\n throw new Error(\n `a theme must carry every numeric step: ${tokenNames(steps)} ${\n steps.length === 1 ? \"is\" : \"are\"\n } missing. A step is what the components read, so a theme stored by an older release must be rebuilt from a shipped one with \\`extendTheme\\`.`,\n );\n }\n const families = missing.filter(({ kind }) => kind === \"family\");\n if (families.length > 0) {\n throw new Error(\n `a theme must name every font family: ${tokenNames(families)} ${\n families.length === 1 ? \"is\" : \"are\"\n } blank. A family is the face every text role is laid out in, so an empty one paints the renderer's fallback instead of the theme — a theme stored without it must be rebuilt from a shipped one with \\`extendTheme\\`.`,\n );\n }\n};\n" }, { "path": "packages/tokens/src/mode.ts", "target": "@ui/gpuixui/tokens/mode.ts", "type": "registry:lib", "content": "import { themeColors, type ColourSource } from \"./color.js\";\nimport { pageMode } from \"./luminance.js\";\n\nexport const themeModes = [\"light\", \"dark\"] as const;\n\nexport type ThemeMode = (typeof themeModes)[number];\n\nexport const themeContrasts = [\"default\", \"high\"] as const;\n\nexport type ThemeContrast = (typeof themeContrasts)[number];\n\nexport const isThemeMode = (value: unknown): value is ThemeMode =>\n themeModes.some((mode) => mode === value);\n\nexport const isThemeContrast = (value: unknown): value is ThemeContrast =>\n themeContrasts.some((contrast) => contrast === value);\n\nexport const themeContrastOf = (theme: {\n readonly contrast?: unknown;\n}): ThemeContrast => {\n const stated = theme.contrast;\n if (stated === undefined || stated === null) {\n return \"default\";\n }\n return isThemeContrast(stated) ? stated : \"high\";\n};\n\nexport const themeModeOf = (\n theme: ColourSource & { readonly mode?: unknown },\n): ThemeMode => {\n const stated = theme.mode;\n if (isThemeMode(stated)) {\n return stated;\n }\n return pageMode(themeColors(theme).background) ?? \"light\";\n};\n" }, { "path": "packages/tokens/src/native-text.ts", "target": "@ui/gpuixui/tokens/native-text.ts", "type": "registry:lib", "content": "import { blend, themeColors, type ColourSource } from \"./color.js\";\nimport { opaqueRgb } from \"./measure.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n} from \"./contrast.js\";\nimport { decorativeFloor } from \"./decorative.js\";\nimport { radius, spacing, type Radius, type Spacing } from \"./scale.js\";\nimport { statusTone, textStyle, type TypeSource } from \"./styles.js\";\nimport {\n syntaxColors,\n type StoredSyntax,\n type SyntaxColors,\n} from \"./syntax.js\";\nimport { themeModeOf, type ThemeMode } from \"./mode.js\";\nimport { typography } from \"./typography.js\";\n\nexport interface NativeTextSource extends TypeSource, ColourSource {\n readonly radius?: Readonly> | null;\n readonly spacing?: Readonly> | null;\n readonly mode?: unknown;\n readonly contrast?: unknown;\n\n readonly syntax?: StoredSyntax | null;\n}\n\nconst stepOf = (\n scale: Readonly>> | null | undefined,\n library: Readonly>,\n step: Step,\n): number => {\n const value = scale?.[step];\n return typeof value === \"number\" && Number.isFinite(value)\n ? value\n : library[step];\n};\n\nconst familyOf = (theme: TypeSource, family: \"sans\" | \"mono\"): string => {\n const name: unknown = theme.typography?.[family];\n return typeof name === \"string\" && name.trim() !== \"\"\n ? name\n : typography[family];\n};\n\nexport const nativeTextFills = [\"input\", \"background\"] as const;\n\nexport type NativeTextFill = (typeof nativeTextFills)[number];\n\nexport const nativeDiffWash = 0.055;\n\nexport const nativeFenceInk = 0.035;\n\nexport const nativeFenceHeaderInk = 0.02;\n\nconst fenceInk = (fill: string): string | undefined => {\n const rgb = opaqueRgb(fill);\n if (rgb === undefined) {\n return undefined;\n }\n const channel = (at: number): number =>\n Number.parseInt(rgb.slice(at, at + 2), 16);\n\n const widest = Math.max(channel(1), channel(3), channel(5));\n const narrowest = Math.min(channel(1), channel(3), channel(5));\n return (widest + narrowest) / 2 / 255 < 0.5 ? \"#FFFFFF\" : \"#000000\";\n};\n\nexport function nativeFenceFill(fill: string): string | undefined {\n const ink = fenceInk(fill);\n return ink === undefined ? undefined : blend(fill, ink, nativeFenceInk);\n}\n\nexport function nativeFenceHeaderFill(fill: string): string | undefined {\n const body = nativeFenceFill(fill);\n const ink = fenceInk(fill);\n return body === undefined || ink === undefined\n ? undefined\n : blend(body, ink, nativeFenceHeaderInk);\n}\n\nexport interface NativeTextMetrics {\n readonly codeTextSize: number;\n\n readonly codeLineHeight: number;\n\n readonly diffTextSize: number;\n\n readonly diffLineHeight: number;\n\n readonly mdTextSize: number;\n\n readonly mdLineHeight: number;\n\n readonly mdHeadingSizes: number[];\n\n readonly mdHeadingLineHeights: number[];\n\n readonly mdCodeRadius: number;\n\n readonly mdCodeHeaderTextSize: number;\n\n readonly mdInlineCodeRadius: number;\n\n readonly codeGutterPaddingRight: number;\n\n readonly diffRowPaddingX: number;\n\n readonly diffBodyBottomPad: number;\n\n readonly mdBlockGap: number;\n\n readonly mdTableCellPadding: number;\n\n readonly mdCodePaddingX: number;\n\n readonly mdCodePaddingY: number;\n\n readonly mdCodeHeaderPaddingY: number;\n}\n\nexport interface NativeTextTheme {\n readonly appearance: ThemeMode;\n\n readonly bg?: string;\n\n readonly text?: string;\n\n readonly textMuted?: string;\n\n readonly textFaint?: string;\n\n readonly accent?: string;\n\n readonly caret?: string;\n\n readonly fontSans: string;\n\n readonly fontMono: string;\n\n readonly metrics: NativeTextMetrics;\n\n readonly diffAdd?: string;\n\n readonly diffDel?: string;\n\n readonly diffHunkBg?: string;\n\n readonly textDim?: string;\n\n readonly codeText?: string;\n\n readonly codeWash?: string;\n\n readonly border?: string;\n\n readonly syntax: SyntaxColors;\n}\n\nexport const nativeAccentShares = {\n marker: 0.85,\n rail: 0.6,\n wash: 0.05,\n} as const;\n\nexport const nativeAccentSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n] as const;\n\nexport type NativeAccentSurface = (typeof nativeAccentSurfaces)[number];\n\nconst ACCENT_STEPS = 50;\n\nexport function nativeAccent(\n source: NativeTextSource,\n floors: ContrastFloors = contrastFloorsFor(source),\n): string | undefined {\n const colors = themeColors(source);\n const primary = colors.primary;\n\n if (primary === undefined) {\n return undefined;\n }\n const rest = colors.foreground ?? primary;\n const carries = (colour: string): boolean =>\n nativeAccentSurfaces.every((surface) => {\n const fill = colors[surface];\n\n if (fill === undefined) {\n return true;\n }\n const label = contrastRatio(\n blend(fill, colour, nativeAccentShares.marker),\n fill,\n );\n const rail = contrastRatio(\n blend(fill, colour, nativeAccentShares.rail),\n fill,\n );\n return (\n (label === undefined || label >= floors.secondary) &&\n (rail === undefined || rail >= decorativeFloor)\n );\n });\n\n const step = Array.from({ length: ACCENT_STEPS + 1 }, (_, at) => at).find(\n (at) => carries(blend(primary, rest, at / ACCENT_STEPS)),\n );\n\n return step === undefined ? rest : blend(primary, rest, step / ACCENT_STEPS);\n}\n\nexport function nativeTextTheme(\n theme: NativeTextSource,\n fill: NativeTextFill = \"input\",\n): NativeTextTheme {\n const colors = themeColors(theme);\n\n const added = statusTone({ colors }, \"success\");\n const removed = statusTone({ colors }, \"destructive\");\n\n const code = textStyle(theme, \"codeBlock\");\n const body = textStyle(theme, \"body\");\n const h1 = textStyle(theme, \"h1\");\n const h2 = textStyle(theme, \"h2\");\n const h3 = textStyle(theme, \"h3\");\n const caption = textStyle(theme, \"caption\");\n return {\n appearance: themeModeOf(theme),\n bg: colors[fill],\n text: colors.inputForeground,\n textMuted: colors.mutedForeground,\n textFaint: colors.placeholder,\n\n accent: nativeAccent(theme),\n caret: colors.primary,\n fontSans: familyOf(theme, \"sans\"),\n fontMono: familyOf(theme, \"mono\"),\n\n metrics: {\n codeTextSize: code.fontSize,\n codeLineHeight: code.lineHeight,\n\n diffTextSize: code.fontSize,\n diffLineHeight: code.lineHeight,\n\n mdTextSize: body.fontSize,\n mdLineHeight: body.lineHeight,\n mdHeadingSizes: [h1.fontSize, h2.fontSize, h3.fontSize, body.fontSize],\n mdHeadingLineHeights: [\n h1.lineHeight,\n h2.lineHeight,\n h3.lineHeight,\n body.lineHeight,\n ],\n mdCodeRadius: stepOf(theme.radius, radius, \"lg\"),\n\n mdCodeHeaderTextSize: caption.fontSize,\n mdInlineCodeRadius: stepOf(theme.radius, radius, \"sm\"),\n\n codeGutterPaddingRight: stepOf(theme.spacing, spacing, \"lg\"),\n diffRowPaddingX: stepOf(theme.spacing, spacing, \"xl\"),\n diffBodyBottomPad: stepOf(theme.spacing, spacing, \"md\"),\n mdBlockGap: stepOf(theme.spacing, spacing, \"lg\"),\n mdTableCellPadding: stepOf(theme.spacing, spacing, \"lg\"),\n mdCodePaddingX: stepOf(theme.spacing, spacing, \"lg\"),\n mdCodePaddingY: stepOf(theme.spacing, spacing, \"md\"),\n\n mdCodeHeaderPaddingY: stepOf(theme.spacing, spacing, \"xs\"),\n },\n\n diffAdd: added?.foreground,\n diffDel: removed?.foreground,\n diffHunkBg: colors.muted,\n textDim: colors.mutedForeground,\n\n codeText: colors.foreground,\n codeWash: colors.muted,\n border: colors.border,\n syntax: syntaxColors(theme),\n };\n}\n" }, { "path": "packages/tokens/src/numbers.ts", "target": "@ui/gpuixui/tokens/numbers.ts", "type": "registry:lib", "content": "import type { BoxShadow, Elevation } from \"./elevation.js\";\nimport { isStepRecord, requireGroups } from \"./missing.js\";\nimport {\n controlSizes,\n targetSize,\n type BorderWidth,\n type ControlSize,\n type Density,\n type DensityName,\n type IconSize,\n type Radius,\n type Spacing,\n} from \"./scale.js\";\nimport type { Stored } from \"./theme.js\";\nimport type { TextRole, Typography } from \"./typography.js\";\n\nexport type NumberGroup =\n | \"spacing\"\n | \"radius\"\n | \"borderWidth\"\n | \"iconSize\"\n | \"typography\"\n | \"density\"\n | \"elevation\";\n\nexport type NumberRule =\n | \"finite\"\n | \"positive\"\n | \"nonNegative\"\n | \"pressable\"\n | \"leading\"\n | \"fits\"\n | \"emphasis\";\n\ntype SingleRule = Exclude;\n\nexport interface InvalidNumber {\n readonly group: NumberGroup;\n\n readonly path: string;\n\n readonly value: unknown;\n\n readonly rule: NumberRule;\n}\n\ntype TypographyNumbers = Stored;\n\nexport type NumberSource = {\n readonly spacing?: Stored;\n readonly radius?: Stored;\n readonly borderWidth?: Stored;\n readonly iconSize?: Stored;\n readonly density?: Stored | DensityName;\n\n readonly typography?: TypographyNumbers;\n\n readonly elevation?: Stored;\n};\n\nconst layable = (value: unknown, rule: SingleRule): boolean => {\n if (typeof value !== \"number\" || !Number.isFinite(value)) {\n return false;\n }\n if (rule === \"positive\") {\n return value > 0;\n }\n if (rule === \"pressable\") {\n return value >= targetSize.minimum;\n }\n return rule === \"finite\" || value >= 0;\n};\n\nconst inspect = (\n group: NumberGroup,\n path: string,\n value: unknown,\n rule: SingleRule,\n): readonly InvalidNumber[] =>\n layable(value, rule)\n ? []\n : [\n {\n group,\n path,\n value,\n rule: typeof value === \"number\" ? rule : \"finite\",\n },\n ];\n\nconst inspectLengths = (\n group: NumberGroup,\n scale: unknown,\n rule: SingleRule,\n prefix = \"\",\n): readonly InvalidNumber[] =>\n Object.entries(isStepRecord(scale) ? scale : {}).flatMap(([key, value]) =>\n value === undefined || value === null\n ? []\n : inspect(group, `${prefix}${key}`, value, rule),\n );\n\nconst inspectBorderWidths = (\n borderWidth: NumberSource[\"borderWidth\"],\n): readonly InvalidNumber[] => {\n const widths = isStepRecord(borderWidth) ? borderWidth : {};\n return [\n ...inspect(\"borderWidth\", \"thin\", widths.thin, \"nonNegative\"),\n ...inspect(\"borderWidth\", \"strong\", widths.strong, \"positive\"),\n ];\n};\n\ninterface StoredTextStyle {\n readonly fontSize: unknown;\n readonly lineHeight: unknown;\n readonly fontWeight: unknown;\n}\n\nconst isTextStyle = (value: unknown): value is StoredTextStyle =>\n isStepRecord(value) && \"fontSize\" in value;\n\nconst usable = (value: unknown): value is number =>\n typeof value === \"number\" && Number.isFinite(value) && value > 0;\n\nconst exceeds = (value: unknown, than: unknown): boolean =>\n typeof value === \"number\" && typeof than === \"number\" && value > than;\n\nconst isShadowList = (value: unknown): value is readonly BoxShadow[] =>\n Array.isArray(value);\n\nconst isShadowEntry = (value: unknown): value is BoxShadow =>\n typeof value === \"object\" && value !== null;\n\nconst inspectType = (\n typography: NumberSource[\"typography\"],\n): readonly InvalidNumber[] =>\n Object.entries(isStepRecord(typography) ? typography : {}).flatMap(\n ([role, value]) => {\n if (!isTextStyle(value)) {\n return [];\n }\n const measured = [\n ...inspect(\n \"typography\",\n `${role}.fontSize`,\n value.fontSize,\n \"positive\",\n ),\n ...inspect(\n \"typography\",\n `${role}.lineHeight`,\n value.lineHeight,\n \"positive\",\n ),\n ...inspect(\n \"typography\",\n `${role}.fontWeight`,\n value.fontWeight,\n \"finite\",\n ),\n ];\n\n const collides =\n usable(value.fontSize) &&\n usable(value.lineHeight) &&\n value.lineHeight < value.fontSize;\n return collides\n ? [\n ...measured,\n {\n group: \"typography\",\n path: `${role}.lineHeight`,\n value: value.lineHeight,\n rule: \"leading\",\n },\n ]\n : measured;\n },\n );\n\nconst inspectEmphasis = (\n typography: NumberSource[\"typography\"],\n): readonly InvalidNumber[] => {\n const roles = isStepRecord(typography) ? typography : {};\n const { body, bodyStrong } = roles;\n\n if (!isTextStyle(body) || !isTextStyle(bodyStrong)) {\n return [];\n }\n\n const reaching = (role: StoredTextStyle): boolean =>\n usable(role.fontSize) &&\n usable(role.lineHeight) &&\n role.lineHeight >= role.fontSize;\n const shared = (\n path: \"fontSize\" | \"lineHeight\",\n comparable: boolean,\n ): readonly InvalidNumber[] => {\n const bodyValue = body[path];\n const strongValue = bodyStrong[path];\n return !comparable || bodyValue === strongValue\n ? []\n : [\n {\n group: \"typography\",\n path: `bodyStrong.${path}`,\n value: strongValue,\n rule: \"emphasis\",\n },\n ];\n };\n const outweighs =\n !Number.isFinite(body.fontWeight) ||\n !Number.isFinite(bodyStrong.fontWeight) ||\n exceeds(bodyStrong.fontWeight, body.fontWeight)\n ? []\n : [\n {\n group: \"typography\",\n path: \"bodyStrong.fontWeight\",\n value: bodyStrong.fontWeight,\n rule: \"emphasis\",\n } satisfies InvalidNumber,\n ];\n return [\n ...shared(\"fontSize\", usable(body.fontSize) && usable(bodyStrong.fontSize)),\n ...shared(\"lineHeight\", reaching(body) && reaching(bodyStrong)),\n ...outweighs,\n ];\n};\n\nconst controlRoles = [\"label\", \"body\"] as const satisfies readonly TextRole[];\n\nconst rowRoles = [\"body\", \"code\"] as const satisfies readonly TextRole[];\n\nconst contentCeiling = (\n typography: NumberSource[\"typography\"],\n iconSize: NumberSource[\"iconSize\"],\n roles: readonly TextRole[],\n): number | undefined => {\n const scale = isStepRecord(typography) ? typography : {};\n const styles = roles.map((role) => scale[role]);\n const glyph = isStepRecord(iconSize) ? iconSize.md : undefined;\n const leadings = styles.flatMap((style) =>\n isTextStyle(style) ? [style.lineHeight] : [],\n );\n\n if (leadings.length !== styles.length || typeof glyph !== \"number\") {\n return undefined;\n }\n const parts: ReadonlyArray = [...leadings, glyph];\n return parts.every(\n (part): part is number => typeof part === \"number\" && Number.isFinite(part),\n )\n ? Math.max(...parts)\n : undefined;\n};\n\nconst missingFit = (\n path: string,\n value: number,\n ceiling: number | undefined,\n): readonly InvalidNumber[] =>\n ceiling === undefined || value >= ceiling\n ? []\n : [{ group: \"density\", path, value, rule: \"fits\" }];\n\nconst inspectControlHeights = (\n density: NumberSource[\"density\"],\n typography: NumberSource[\"typography\"],\n iconSize: NumberSource[\"iconSize\"],\n): readonly InvalidNumber[] => {\n const ceiling = contentCeiling(typography, iconSize, controlRoles);\n const heights: unknown = isStepRecord(density)\n ? density.controlHeight\n : undefined;\n return controlSizes.flatMap((size: ControlSize) => {\n const path = `controlHeight.${size}`;\n const value = isStepRecord(heights) ? heights[size] : undefined;\n\n if (value === undefined || value === null) {\n return [];\n }\n const pressable = inspect(\"density\", path, value, \"pressable\");\n return pressable.length > 0 || typeof value !== \"number\"\n ? pressable\n : missingFit(path, value, ceiling);\n });\n};\n\nconst inspectRowHeight = (\n density: NumberSource[\"density\"],\n typography: NumberSource[\"typography\"],\n iconSize: NumberSource[\"iconSize\"],\n): readonly InvalidNumber[] => {\n const value: unknown = isStepRecord(density) ? density.rowHeight : undefined;\n if (value === undefined || value === null) {\n return [];\n }\n const pressable = inspect(\"density\", \"rowHeight\", value, \"pressable\");\n return pressable.length > 0 || typeof value !== \"number\"\n ? pressable\n : missingFit(\n \"rowHeight\",\n value,\n contentCeiling(typography, iconSize, rowRoles),\n );\n};\n\nconst inspectShadow = (\n level: string,\n index: number,\n shadow: BoxShadow,\n): readonly InvalidNumber[] => {\n const at = `${level}[${index}].`;\n return [\n ...inspect(\"elevation\", `${at}offsetX`, shadow.offsetX, \"finite\"),\n ...inspect(\"elevation\", `${at}offsetY`, shadow.offsetY, \"finite\"),\n ...inspect(\n \"elevation\",\n `${at}blurRadius`,\n shadow.blurRadius,\n \"nonNegative\",\n ),\n ...inspect(\"elevation\", `${at}spreadRadius`, shadow.spreadRadius, \"finite\"),\n ];\n};\n\nexport function invalidNumbers(theme: NumberSource): readonly InvalidNumber[] {\n requireGroups(theme);\n return [\n ...inspectLengths(\"spacing\", theme.spacing, \"nonNegative\"),\n ...inspectLengths(\"radius\", theme.radius, \"nonNegative\"),\n ...inspectBorderWidths(theme.borderWidth),\n ...inspectLengths(\"iconSize\", theme.iconSize, \"positive\"),\n ...inspectType(theme.typography),\n ...inspectEmphasis(theme.typography),\n ...inspectControlHeights(theme.density, theme.typography, theme.iconSize),\n ...inspectLengths(\n \"density\",\n isStepRecord(theme.density) ? theme.density.controlPaddingX : undefined,\n \"nonNegative\",\n \"controlPaddingX.\",\n ),\n ...inspectRowHeight(theme.density, theme.typography, theme.iconSize),\n ...Object.entries(theme.elevation ?? {}).flatMap(([level, shadows]) =>\n isShadowList(shadows)\n ? shadows.flatMap((shadow: unknown, index) =>\n isShadowEntry(shadow) ? inspectShadow(level, index, shadow) : [],\n )\n : [],\n ),\n ];\n}\n" }, { "path": "packages/tokens/src/omarchy.ts", "target": "@ui/gpuixui/tokens/omarchy.ts", "type": "registry:lib", "content": "import type { SystemPalette } from \"./system-theme.js\";\n\nexport type OmarchyProblemReason = \"syntax\" | \"duplicate\" | \"empty\" | \"mode\";\n\nexport interface OmarchyProblem {\n readonly line: number;\n\n readonly text: string;\n\n readonly reason: OmarchyProblemReason;\n}\n\nexport interface OmarchyPaletteFile {\n readonly palette: SystemPalette;\n\n readonly problems: readonly OmarchyProblem[];\n}\n\nconst colourKeys: ReadonlySet = new Set([\n \"accent\",\n \"background\",\n \"bg\",\n \"color1\",\n \"color4\",\n \"color8\",\n \"fg\",\n \"foreground\",\n \"muted\",\n \"red\",\n \"selection\",\n]);\n\ninterface Entry {\n readonly value: string;\n readonly line: number;\n readonly text: string;\n}\n\ninterface RawValue {\n readonly text: string;\n readonly quoted: boolean;\n}\n\nconst readValue = (source: string): RawValue | undefined => {\n const delimiter = source[0];\n if (delimiter === '\"' || delimiter === \"'\") {\n const end = source.indexOf(delimiter, 1);\n if (end === -1) {\n return undefined;\n }\n const rest = source.slice(end + 1).trim();\n if (rest !== \"\" && !rest.startsWith(\"#\")) {\n return undefined;\n }\n return { text: source.slice(1, end).trim(), quoted: true };\n }\n const bare = source.split(\"#\")[0]?.trim() ?? \"\";\n return /^[A-Za-z0-9_.-]+$/.test(bare)\n ? { text: bare, quoted: false }\n : undefined;\n};\n\nconst readKey = (line: string): string | undefined => {\n const separator = line.indexOf(\"=\");\n const key = separator === -1 ? \"\" : line.slice(0, separator).trim();\n return /^[a-z0-9_]+$/.test(key) ? key : undefined;\n};\n\nconst readEntries = (\n source: string,\n): {\n readonly entries: ReadonlyMap;\n readonly problems: OmarchyProblem[];\n} => {\n const entries = new Map();\n const problems: OmarchyProblem[] = [];\n let inSection = false;\n source\n .replace(/^\\uFEFF/, \"\")\n .split(/\\r?\\n/)\n .forEach((raw, index) => {\n const text = raw.trim();\n if (inSection || text === \"\" || text.startsWith(\"#\")) {\n return;\n }\n const line = index + 1;\n const problem = (reason: OmarchyProblemReason): void => {\n problems.push({ line, text, reason });\n };\n if (text.startsWith(\"[\")) {\n inSection = true;\n problem(\"syntax\");\n return;\n }\n const separator = text.indexOf(\"=\");\n const key = readKey(text);\n if (separator === -1 || key === undefined) {\n problem(\"syntax\");\n return;\n }\n const value = readValue(text.slice(separator + 1).trim());\n if (value === undefined) {\n problem(\"syntax\");\n return;\n }\n const isColour = colourKeys.has(key);\n if (isColour && !value.quoted) {\n problem(\"syntax\");\n return;\n }\n if (!isColour && key !== \"mode\") {\n return;\n }\n if (entries.has(key)) {\n problem(\"duplicate\");\n return;\n }\n if (value.text === \"\") {\n problem(\"empty\");\n return;\n }\n entries.set(key, { value: value.text, line, text });\n });\n return { entries, problems };\n};\n\nconst resolve = (\n entries: ReadonlyMap,\n names: readonly string[],\n): string | undefined =>\n names\n .map((name) => entries.get(name)?.value)\n .find((value): value is string => value !== undefined);\n\nexport function decodeOmarchyPalette(source: string): OmarchyPaletteFile {\n const { entries, problems } = readEntries(source);\n const declared = entries.get(\"mode\");\n const mode =\n declared?.value === \"light\" || declared?.value === \"dark\"\n ? declared.value\n : undefined;\n if (declared !== undefined && mode === undefined) {\n problems.push({ line: declared.line, text: declared.text, reason: \"mode\" });\n }\n const background = resolve(entries, [\"background\", \"bg\"]);\n const foreground = resolve(entries, [\"foreground\", \"fg\"]);\n const muted = resolve(entries, [\"muted\", \"color8\"]);\n const accent = resolve(entries, [\"accent\", \"color4\"]);\n const danger = resolve(entries, [\"red\", \"color1\"]);\n const selection = resolve(entries, [\"selection\"]);\n return {\n palette: {\n ...(mode === undefined ? {} : { mode }),\n ...(background === undefined ? {} : { background }),\n ...(foreground === undefined ? {} : { foreground }),\n\n ...(muted === undefined ? {} : { muted, border: muted }),\n ...(accent === undefined ? {} : { accent }),\n ...(danger === undefined ? {} : { danger }),\n ...(selection === undefined ? {} : { selection }),\n },\n problems,\n };\n}\n" }, { "path": "packages/tokens/src/platforms.ts", "target": "@ui/gpuixui/tokens/platforms.ts", "type": "registry:lib", "content": "import type { ThemeColors } from \"./color.js\";\nimport { shadcnOverrides, type ShadcnVars } from \"./shadcn-vars.js\";\nimport {\n radius as defaultRadius,\n type DensityName,\n type Radius,\n} from \"./scale.js\";\nimport type { MaterialFills, WindowBackground } from \"./materials.js\";\nimport type { StoredSeries } from \"./series.js\";\nimport { darkSyntax, type StoredSyntax, type SyntaxColors } from \"./syntax.js\";\nimport type {\n Interaction,\n SwitchColors,\n SwitchMetrics,\n ThemeContrast,\n ThemeMode,\n ThemeOverrides,\n TypographyOverrides,\n} from \"./theme.js\";\n\nexport const systemUiFont = \".SystemUIFont\";\n\nexport const platformNames = [\"darwin\", \"linux\", \"win32\", \"default\"] as const;\n\nexport type PlatformName = (typeof platformNames)[number];\n\nexport const isPlatformName = (value: unknown): value is PlatformName =>\n platformNames.some((name) => name === value);\n\nexport interface PlatformType {\n readonly label: string;\n\n readonly sans: string;\n\n readonly mono: string;\n}\n\nexport type PlatformColors = Readonly>>;\n\nexport interface PlatformStyle extends PlatformType {\n readonly radius: Radius;\n\n readonly density: DensityName;\n\n readonly colors: PlatformColors;\n\n readonly switch?: Readonly>>;\n\n readonly switchMetrics?: SwitchMetrics;\n\n readonly materials?: Readonly>>;\n readonly window?: WindowBackground;\n\n readonly interaction?: Interaction;\n\n readonly type?: Omit;\n\n readonly series?: Readonly>>;\n\n readonly syntax?: Readonly>>>;\n\n readonly contrast: ThemeContrast;\n}\n\nexport interface PlatformStyleSource {\n readonly label?: unknown;\n\n readonly sans?: unknown;\n\n readonly mono?: unknown;\n\n readonly radius?: Partial | null;\n\n readonly density?: ThemeOverrides[\"density\"] | null;\n\n readonly contrast?: unknown;\n\n readonly colors?: Partial<\n Record | null>\n > | null;\n\n readonly series?: Partial> | null;\n\n readonly syntax?: Partial> | null;\n\n readonly switch?: Partial> | null;\n\n readonly switchMetrics?: SwitchMetrics | null;\n\n readonly materials?: Partial> | null;\n\n readonly window?: unknown;\n\n readonly interaction?: unknown;\n\n readonly type?: Omit | null;\n}\n\nconst platformDarkSyntax: SyntaxColors = {\n ...darkSyntax,\n keyword: \"#B0B2FF\",\n};\n\nconst palette = (\n modes: Readonly>,\n): PlatformColors => ({\n light: { ...mappedOf(modes.light), ...modes.light.extras },\n dark: { ...mappedOf(modes.dark), ...modes.dark.extras },\n});\n\nconst mappedOf = (palette: PlatformPalette): Partial =>\n shadcnOverrides(palette.shadcn, { derive: false }).colors ?? {};\n\ninterface PlatformPalette {\n readonly shadcn: ShadcnVars;\n readonly extras: Partial;\n}\n\nexport const platformStyles: Readonly> = {\n darwin: {\n label: \"macOS\",\n sans: systemUiFont,\n mono: \"Menlo\",\n\n radius: { none: 0, sm: 6, md: 10, lg: 14, xl: 18, full: 9999 },\n density: \"compact\",\n contrast: \"default\",\n syntax: { dark: platformDarkSyntax },\n\n switch: {\n light: {\n on: \"#34C759\",\n off: \"#E9E9EA\",\n knob: \"#FFFFFF\",\n edge: \"#C7C7CC\",\n },\n dark: {\n on: \"#30D158\",\n off: \"#39393D\",\n knob: \"#FFFFFF\",\n edge: \"#5A5A5E\",\n },\n },\n switchMetrics: { width: 38, height: 22, knob: 20, inset: 1, border: 0 },\n\n window: \"blurred\",\n interaction: \"appkit\",\n\n type: {\n body: { fontSize: 13, lineHeight: 16 },\n bodyStrong: { fontSize: 13, lineHeight: 16 },\n label: { fontSize: 12, lineHeight: 15 },\n caption: { fontSize: 11, lineHeight: 14 },\n },\n materials: {\n light: {\n sidebar: \"#E9E9EF99\",\n titlebar: \"#F2F2F7CC\",\n popover: \"#FFFFFFCC\",\n hud: \"#FFFFFFB3\",\n sheet: \"#FFFFFFE6\",\n },\n dark: {\n sidebar: \"#16161A80\",\n titlebar: \"#1C1C1ECC\",\n popover: \"#2C2C30CC\",\n hud: \"#1C1C1EB3\",\n sheet: \"#26262AE6\",\n },\n },\n colors: palette({\n light: {\n shadcn: {\n background: \"#F2F2F7\",\n card: \"#FFFFFF\",\n popover: \"#FFFFFF\",\n input: \"#FFFFFF\",\n secondary: \"#DEE3EA\",\n muted: \"#E9E9EF\",\n border: \"#D9D9E0\",\n primary: \"#0A6CD6\",\n \"primary-foreground\": \"#FFFFFF\",\n ring: \"#0A6CD6\",\n accent: \"#CADEF7\",\n \"accent-foreground\": \"#08407A\",\n },\n extras: {\n skeleton: \"#DCDFE7\",\n hover: \"#E2E2E8\",\n active: \"#DEDEE6\",\n borderStrong: \"#67686D\",\n selected: \"#D3E5FB\",\n selectedForeground: \"#0B3D6B\",\n selection: \"#0A6CD63D\",\n },\n },\n dark: {\n shadcn: {\n background: \"#1C1C1E\",\n card: \"#26262A\",\n popover: \"#2C2C30\",\n input: \"#1F1F22\",\n secondary: \"#3A3A3C\",\n muted: \"#16161A\",\n border: \"#3A3A40\",\n primary: \"#3B9DFF\",\n \"primary-foreground\": \"#11141A\",\n ring: \"#4CA2FF\",\n accent: \"#1A3D60\",\n \"accent-foreground\": \"#B2D3F9\",\n },\n extras: {\n skeleton: \"#303036\",\n hover: \"#35353B\",\n active: \"#3A3A40\",\n borderStrong: \"#ACACB1\",\n selected: \"#0C3864\",\n selectedForeground: \"#C7E0FF\",\n placeholder: \"#8A93A3\",\n selection: \"#0A84FF4D\",\n },\n },\n }),\n },\n linux: {\n label: \"Linux\",\n sans: systemUiFont,\n mono: \"DejaVu Sans Mono\",\n radius: { none: 0, sm: 4, md: 6, lg: 12, xl: 16, full: 9999 },\n density: \"spacious\",\n contrast: \"default\",\n syntax: { dark: platformDarkSyntax },\n\n switch: {\n light: { on: \"#3584E4\", off: \"#DEDDDA\", knob: \"#FFFFFF\" },\n dark: { on: \"#78AEED\", off: \"#3D3D3D\", knob: \"#FFFFFF\" },\n },\n switchMetrics: { width: 44, height: 24, knob: 18, inset: 3, border: 0 },\n colors: palette({\n light: {\n shadcn: {\n background: \"#FAFAFA\",\n card: \"#FFFFFF\",\n popover: \"#FFFFFF\",\n input: \"#FFFFFF\",\n muted: \"#ECEBE9\",\n border: \"#D4D2CF\",\n primary: \"#1A6DD3\",\n \"primary-foreground\": \"#FFFFFF\",\n ring: \"#1A6DD3\",\n accent: \"#D2E4F7\",\n \"accent-foreground\": \"#12457F\",\n },\n extras: {\n hover: \"#E3E2DF\",\n active: \"#DCDBD8\",\n borderStrong: \"#6A6965\",\n selected: \"#CADDF3\",\n selectedForeground: \"#0F3E74\",\n selection: \"#3584E43D\",\n },\n },\n dark: {\n shadcn: {\n background: \"#242424\",\n card: \"#303030\",\n popover: \"#383838\",\n input: \"#212121\",\n secondary: \"#404040\",\n muted: \"#2A2A2A\",\n border: \"#464646\",\n primary: \"#78AEED\",\n \"primary-foreground\": \"#11141A\",\n ring: \"#78AEED\",\n accent: \"#1B3E60\",\n \"accent-foreground\": \"#BBD9F7\",\n },\n extras: {\n skeleton: \"#3E3E3E\",\n hover: \"#343434\",\n active: \"#3D3D3D\",\n borderStrong: \"#B2B3B4\",\n selected: \"#1F4363\",\n selectedForeground: \"#CFE4FA\",\n placeholder: \"#8A93A3\",\n selection: \"#78AEED3D\",\n },\n },\n }),\n },\n win32: {\n label: \"Windows\",\n\n sans: systemUiFont,\n mono: \"Consolas\",\n\n radius: { none: 0, sm: 4, md: 4, lg: 8, xl: 8, full: 9999 },\n density: \"comfortable\",\n contrast: \"default\",\n syntax: { dark: platformDarkSyntax },\n\n switch: {\n light: {\n on: \"#0078D4\",\n off: \"transparent\",\n knob: \"#FFFFFF\",\n knobOff: \"#616161\",\n edge: \"#8A8A8A\",\n },\n dark: {\n on: \"#4CC2FF\",\n off: \"transparent\",\n knob: \"#000000\",\n knobOff: \"#CFCFCF\",\n edge: \"#8A8A8A\",\n },\n },\n switchMetrics: { width: 40, height: 20, knob: 12, inset: 4, border: 1 },\n colors: palette({\n light: {\n shadcn: {\n background: \"#F3F3F3\",\n card: \"#FFFFFF\",\n popover: \"#FFFFFF\",\n input: \"#FFFFFF\",\n muted: \"#EBEBEB\",\n border: \"#E5E5E5\",\n primary: \"#0078D4\",\n \"primary-foreground\": \"#FFFFFF\",\n ring: \"#0078D4\",\n accent: \"#CFE6F9\",\n \"accent-foreground\": \"#003E6F\",\n },\n extras: {\n hover: \"#E0E0E0\",\n active: \"#D6D6D6\",\n borderStrong: \"#696A6B\",\n selected: \"#C8E0F3\",\n selectedForeground: \"#093A5C\",\n destructiveSoftForeground: \"#5C1619\",\n selection: \"#0067C03D\",\n },\n },\n dark: {\n shadcn: {\n background: \"#202020\",\n card: \"#2C2C2C\",\n popover: \"#2D2D2D\",\n input: \"#1F1F1F\",\n secondary: \"#3A3A3A\",\n muted: \"#262626\",\n border: \"#3D3D3D\",\n primary: \"#4CC2FF\",\n \"primary-foreground\": \"#11141A\",\n ring: \"#4CC2FF\",\n accent: \"#1B3A50\",\n \"accent-foreground\": \"#C9E9FF\",\n },\n extras: {\n skeleton: \"#323232\",\n hover: \"#333333\",\n active: \"#3A3A3A\",\n borderStrong: \"#ACACAD\",\n selected: \"#143E59\",\n selectedForeground: \"#CDEBFF\",\n placeholder: \"#8A93A3\",\n selection: \"#60CDFF3D\",\n },\n },\n }),\n },\n default: {\n label: \"Default\",\n sans: systemUiFont,\n mono: \"Menlo\",\n radius: defaultRadius,\n density: \"comfortable\",\n contrast: \"default\",\n colors: { light: {}, dark: {} },\n },\n};\n\nexport const platformTypes: Readonly> =\n platformStyles;\n\nconst knownPlatform = (name: string): PlatformName =>\n isPlatformName(name) ? name : \"default\";\n\ndeclare const process: { readonly platform?: string } | undefined;\n\nexport const currentPlatform: PlatformName =\n typeof process === \"undefined\" || process.platform === undefined\n ? \"default\"\n : knownPlatform(process.platform);\n\nexport const systemMonoFamily: string = platformTypes[currentPlatform].mono;\n" }, { "path": "packages/tokens/src/react.tsx", "target": "@ui/gpuixui/tokens/react.tsx", "type": "registry:component", "content": "/** @jsxImportSource react */\nimport {\n createContext,\n useContext,\n useEffect,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { mixThemes } from \"./crossfade.js\";\nimport { lightTheme, type Theme } from \"./theme.js\";\n\nconst ThemeContext = createContext(undefined);\n\nexport interface ThemeProviderProps {\n readonly theme: Theme;\n\n readonly children?: ReactNode;\n}\n\nexport function ThemeProvider({ theme, children }: ThemeProviderProps) {\n return (\n {children}\n );\n}\n\nexport function useTheme(): Theme {\n return useContext(ThemeContext) ?? lightTheme;\n}\n\nexport function useThemePresence(): boolean {\n return useContext(ThemeContext) !== undefined;\n}\n\nexport function useThemeCrossfade(theme: Theme, durationMs = 450): Theme {\n const from = useRef(theme);\n const [current, setCurrent] = useState(theme);\n useEffect(() => {\n if (from.current === theme) return;\n const start = from.current;\n const began = performance.now();\n const omega = (Math.PI * 2) / (durationMs / 1000);\n const timer = setInterval(() => {\n const elapsed = (performance.now() - began) / 1000;\n const k = 1 - (1 + omega * elapsed) * Math.exp(-omega * elapsed);\n const done = elapsed * 1000 >= durationMs * 2;\n from.current = done ? theme : from.current;\n setCurrent(done ? theme : mixThemes(start, theme, k));\n if (done) clearInterval(timer);\n }, 16);\n return () => clearInterval(timer);\n }, [theme, durationMs]);\n return current;\n}\n" }, { "path": "packages/tokens/src/retro.ts", "target": "@ui/gpuixui/tokens/retro.ts", "type": "registry:lib", "content": "import { palette, type ThemeColors } from \"./color.js\";\nimport type { PlatformStyle } from \"./platforms.js\";\nimport { systemUiFont } from \"./platforms.js\";\nimport type { SeriesColors } from \"./series.js\";\nimport type { Theme } from \"./theme.js\";\nimport { applyStyle } from \"./theme.js\";\n\nexport const retroNames = [\"luna\", \"aero\", \"omarchy\"] as const;\n\nexport type RetroName = (typeof retroNames)[number];\n\nexport const isRetroName = (value: unknown): value is RetroName =>\n retroNames.some((name) => name === value);\n\nconst lunaColors: Readonly>> = {\n light: {\n background: \"#ECE9D8\",\n foreground: \"#171714\",\n card: \"#FFFFFF\",\n popover: \"#FFFFFF\",\n input: \"#FFFFFF\",\n secondary: \"#D5CFB8\",\n muted: \"#E0DCCB\",\n mutedForeground: \"#4F5550\",\n hover: \"#F4F1E3\",\n active: \"#D8D4C1\",\n border: \"#C4BFAA\",\n borderStrong: \"#495E71\",\n primary: \"#316AC5\",\n primaryForeground: \"#FFFFFF\",\n ring: \"#0058EE\",\n accent: \"#BFD4EF\",\n accentForeground: \"#123A66\",\n selected: \"#B8CEE9\",\n selectedForeground: \"#0E2F57\",\n\n success: palette.green[700],\n\n infoSoft: palette.blue[50],\n successSoft: palette.green[50],\n warningSoft: palette.amber[50],\n destructiveSoft: palette.red[50],\n selection: \"#316AC53D\",\n\n placeholder: \"#59616D\",\n disabled: \"#E4E0CE\",\n disabledForeground: \"#8C8873\",\n skeleton: \"#D2CDB6\",\n scrollbar: \"#B3AE96\",\n shadow: \"#00000040\",\n },\n dark: {\n background: \"#101E33\",\n foreground: \"#E6ECF5\",\n card: \"#172A44\",\n popover: \"#1C3250\",\n input: \"#0B1626\",\n secondary: \"#3A4A5E\",\n\n muted: \"#1B2E49\",\n mutedForeground: \"#B4C6DD\",\n hover: \"#223A58\",\n active: \"#2A4464\",\n border: \"#30496A\",\n borderStrong: \"#A9BED6\",\n primary: \"#7AB0FF\",\n primaryForeground: \"#0B1626\",\n ring: \"#7AB0FF\",\n accent: \"#1E3A5C\",\n accentForeground: \"#CFE0F7\",\n selected: \"#22456B\",\n selectedForeground: \"#DCE9FB\",\n selection: \"#7AB0FF3D\",\n placeholder: \"#93A8C4\",\n disabled: \"#1B2F4A\",\n disabledForeground: \"#7086A0\",\n skeleton: \"#22364F\",\n scrollbar: \"#3B5675\",\n shadow: \"#00000099\",\n },\n};\n\nconst aeroColors: Readonly>> = {\n light: {\n background: \"#E8EFF7\",\n foreground: \"#10222F\",\n card: \"#FFFFFF\",\n popover: \"#FFFFFF\",\n input: \"#FFFFFF\",\n secondary: \"#CFDDEA\",\n muted: \"#DEE8F2\",\n hover: \"#EFF6FD\",\n active: \"#CFDEEE\",\n border: \"#C9D6E4\",\n borderStrong: \"#4D677E\",\n primary: \"#1F6FB5\",\n primaryForeground: \"#FFFFFF\",\n ring: \"#287ABA\",\n accent: \"#C6E2F9\",\n accentForeground: \"#0B3F66\",\n selected: \"#BEDCF4\",\n selectedForeground: \"#08344F\",\n selection: \"#3399FF3D\",\n\n placeholder: \"#586978\",\n disabled: \"#E3EAF1\",\n disabledForeground: \"#8A99A6\",\n skeleton: \"#CFDCE8\",\n scrollbar: \"#AFC2D2\",\n shadow: \"#00000040\",\n },\n dark: {\n background: \"#101C27\",\n foreground: \"#E7F0F7\",\n card: \"#172835\",\n popover: \"#1C3040\",\n input: \"#0A141C\",\n secondary: \"#33475A\",\n\n muted: \"#1A2C3C\",\n mutedForeground: \"#BCCEDF\",\n hover: \"#25394A\",\n active: \"#2D4356\",\n border: \"#33495B\",\n borderStrong: \"#A7BAC9\",\n primary: \"#5FB6F2\",\n primaryForeground: \"#08161F\",\n ring: \"#5FB6F2\",\n accent: \"#1C3A4F\",\n accentForeground: \"#C6E4F8\",\n selected: \"#1F4560\",\n selectedForeground: \"#D3ECFF\",\n selection: \"#5FB6F23D\",\n placeholder: \"#90A7B9\",\n disabled: \"#1D2F3D\",\n disabledForeground: \"#6C8191\",\n skeleton: \"#213646\",\n scrollbar: \"#3C566A\",\n shadow: \"#00000099\",\n },\n};\n\nconst omarchyColors: Readonly>> =\n {\n light: {\n background: \"#FFFCF0\",\n foreground: \"#100F0F\",\n card: \"#F2F0E5\",\n popover: \"#F2F0E5\",\n input: \"#F0EEE4\",\n inputForeground: \"#100F0F\",\n secondary: \"#DAD8CE\",\n secondaryForeground: \"#100F0F\",\n muted: \"#E6E4D9\",\n mutedForeground: \"#575653\",\n\n hover: \"#DAD8CE\",\n active: \"#CECDC3\",\n accent: \"#DAD8CE\",\n accentForeground: \"#100F0F\",\n selected: \"#CECDC3\",\n selectedForeground: \"#100F0F\",\n border: \"#B7B5AC\",\n borderStrong: \"#575653\",\n primary: \"#205EA6\",\n primaryForeground: \"#FFFCF0\",\n ring: \"#205EA6\",\n success: \"#526600\",\n successForeground: \"#FFFCF0\",\n warning: \"#855B00\",\n warningForeground: \"#FFFCF0\",\n info: \"#205EA6\",\n infoForeground: \"#FFFCF0\",\n infoSoft: \"#CFE0F5\",\n infoSoftForeground: \"#0F3A66\",\n successSoft: \"#D5E0B4\",\n successSoftForeground: \"#334200\",\n warningSoft: \"#EAD29A\",\n warningSoftForeground: \"#4A3300\",\n destructiveSoft: \"#F6D2C9\",\n destructiveSoftForeground: \"#671510\",\n placeholder: \"#605E59\",\n disabled: \"#CECDC3\",\n disabledForeground: \"#87857E\",\n skeleton: \"#DAD8CE\",\n scrollbar: \"#B7B5AC\",\n selection: \"#205EA63D\",\n shadow: \"#00000040\",\n },\n dark: {\n background: \"#1A1B26\",\n foreground: \"#C0CAF5\",\n card: \"#1F2230\",\n popover: \"#1F2230\",\n input: \"#13141C\",\n inputForeground: \"#C0CAF5\",\n secondary: \"#2A2E42\",\n secondaryForeground: \"#C0CAF5\",\n muted: \"#2A2A2A\",\n mutedForeground: \"#A9B1D6\",\n hover: \"#2A2E42\",\n active: \"#343850\",\n accent: \"#2F334A\",\n accentForeground: \"#C0CAF5\",\n selected: \"#292E42\",\n selectedForeground: \"#C0CAF5\",\n border: \"#2A2E42\",\n\n borderStrong: \"#7AA2F7\",\n primary: \"#7AA2F7\",\n primaryForeground: \"#13141C\",\n ring: \"#7AA2F7\",\n\n destructive: \"#F06A84\",\n destructiveForeground: \"#13141C\",\n success: \"#9ECE6A\",\n successForeground: \"#13141C\",\n warning: \"#E0AF68\",\n warningForeground: \"#13141C\",\n info: \"#7AA2F7\",\n infoForeground: \"#13141C\",\n infoSoft: \"#23345A\",\n\n infoSoftForeground: \"#B2CAFF\",\n successSoft: \"#23331F\",\n successSoftForeground: \"#B9E88A\",\n warningSoft: \"#3A3018\",\n warningSoftForeground: \"#F0C98A\",\n destructiveSoft: \"#45242F\",\n destructiveSoftForeground: \"#FFC6CE\",\n placeholder: \"#8B93B8\",\n disabled: \"#181A24\",\n disabledForeground: \"#565F89\",\n skeleton: \"#30354C\",\n scrollbar: \"#414868\",\n selection: \"#7AA2F71A\",\n shadow: \"#000000\",\n },\n };\n\nexport const lunaSeries: SeriesColors = [\n \"#5F4BDB\",\n \"#1B45AC\",\n \"#158754\",\n \"#9A6300\",\n \"#A5262B\",\n];\n\nexport const omarchySeries: SeriesColors = [\n \"#5F4BDB\",\n \"#1B45AC\",\n \"#158754\",\n \"#9A6300\",\n \"#A5262B\",\n];\n\nexport const retroStyles: Readonly> = {\n luna: {\n label: \"Windows XP (Luna)\",\n sans: systemUiFont,\n mono: \"Lucida Console\",\n radius: { none: 0, sm: 1, md: 2, lg: 3, xl: 4, full: 9999 },\n density: \"compact\",\n contrast: \"default\",\n colors: lunaColors,\n series: { light: lunaSeries },\n },\n aero: {\n label: \"Windows 7 (Aero)\",\n sans: systemUiFont,\n mono: \"Consolas\",\n radius: { none: 0, sm: 2, md: 4, lg: 6, xl: 8, full: 9999 },\n density: \"comfortable\",\n contrast: \"default\",\n colors: aeroColors,\n },\n omarchy: {\n label: \"Omarchy\",\n sans: systemUiFont,\n mono: \"JetBrains Mono\",\n\n radius: { none: 0, sm: 1, md: 2, lg: 3, xl: 4, full: 9999 },\n\n density: \"compact\",\n contrast: \"default\",\n colors: omarchyColors,\n series: { light: omarchySeries },\n },\n};\n\nexport function retroTheme(base: Theme, name: RetroName): Theme {\n if (!isRetroName(name)) {\n throw new Error(\n `\\`${name}\\` is not an authored look: ${retroNames.join(\", \")} are the looks this release ships. A restored or configured choice is narrowed with \\`isRetroName\\` before it reaches a theme.`,\n );\n }\n return applyStyle(base, retroStyles[name]);\n}\n" }, { "path": "packages/tokens/src/scale.ts", "target": "@ui/gpuixui/tokens/scale.ts", "type": "registry:lib", "content": "export interface Spacing {\n readonly \"2xs\": number;\n\n readonly xs: number;\n\n readonly sm: number;\n\n readonly md: number;\n\n readonly lg: number;\n\n readonly xl: number;\n\n readonly \"2xl\": number;\n\n readonly \"3xl\": number;\n\n readonly \"4xl\": number;\n\n readonly \"5xl\": number;\n}\n\nexport const spacing: Spacing = {\n \"2xs\": 2,\n xs: 4,\n sm: 6,\n md: 8,\n lg: 12,\n xl: 16,\n \"2xl\": 24,\n \"3xl\": 32,\n \"4xl\": 48,\n \"5xl\": 64,\n};\n\nexport const spacingSteps = [\n \"2xs\",\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n \"5xl\",\n] as const satisfies readonly (keyof Spacing)[];\n\nexport type SpacingStep = (typeof spacingSteps)[number];\n\ntype EverySpacingStepListed =\n Exclude extends never\n ? true\n : [\n \"a spacing step is missing from the index\",\n Exclude,\n ];\n\nconst spacingIndex: EverySpacingStepListed<(typeof spacingSteps)[number]> =\n true;\n\nvoid spacingIndex;\n\nexport const isSpacingStep = (value: unknown): value is SpacingStep =>\n spacingSteps.some((step) => step === value);\n\nexport interface Radius {\n readonly none: number;\n\n readonly sm: number;\n\n readonly md: number;\n\n readonly lg: number;\n\n readonly xl: number;\n\n readonly full: number;\n}\n\nexport const radius: Radius = {\n none: 0,\n sm: 4,\n md: 6,\n lg: 8,\n xl: 12,\n full: 9999,\n};\n\nexport const radiusSteps = [\n \"none\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"full\",\n] as const satisfies readonly (keyof Radius)[];\n\nexport type RadiusStep = (typeof radiusSteps)[number];\n\ntype EveryRadiusStepListed =\n Exclude extends never\n ? true\n : [\n \"a radius step is missing from the index\",\n Exclude,\n ];\n\nconst radiusIndex: EveryRadiusStepListed<(typeof radiusSteps)[number]> = true;\n\nvoid radiusIndex;\n\nexport const isRadiusStep = (value: unknown): value is RadiusStep =>\n radiusSteps.some((step) => step === value);\n\nexport interface BorderWidth {\n readonly thin: number;\n\n readonly strong: number;\n}\n\nexport const borderWidth: BorderWidth = { thin: 1, strong: 2 };\n\nexport interface IconSize {\n readonly xs: number;\n\n readonly sm: number;\n\n readonly md: number;\n\n readonly lg: number;\n\n readonly xl: number;\n}\n\nexport const iconSize: IconSize = { xs: 12, sm: 14, md: 16, lg: 20, xl: 24 };\n\nexport const iconSizes = [\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n] as const satisfies readonly (keyof IconSize)[];\n\nexport type IconStep = (typeof iconSizes)[number];\n\ntype EveryIconStepListed =\n Exclude extends never\n ? true\n : [\n \"an icon step is missing from the index\",\n Exclude,\n ];\n\nconst iconIndex: EveryIconStepListed<(typeof iconSizes)[number]> = true;\n\nvoid iconIndex;\n\nexport const isIconSize = (value: unknown): value is IconStep =>\n iconSizes.some((step) => step === value);\n\nexport interface AvatarSize {\n readonly xs: number;\n\n readonly sm: number;\n\n readonly md: number;\n\n readonly lg: number;\n}\n\nexport const avatarSize: AvatarSize = { xs: 20, sm: 26, md: 32, lg: 40 };\n\nexport const avatarSizes = [\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n] as const satisfies readonly (keyof AvatarSize)[];\n\nexport type AvatarSizeName = (typeof avatarSizes)[number];\n\ntype EveryAvatarStepListed =\n Exclude extends never\n ? true\n : [\n \"an avatar step is missing from the index\",\n Exclude,\n ];\n\nconst avatarIndex: EveryAvatarStepListed<(typeof avatarSizes)[number]> = true;\n\nvoid avatarIndex;\n\nexport const isAvatarSize = (value: unknown): value is AvatarSizeName =>\n avatarSizes.some((step) => step === value);\n\nexport const avatarPixels = (size: unknown): number =>\n isAvatarSize(size) ? avatarSize[size] : avatarSize.md;\n\nexport interface TargetSize {\n readonly minimum: number;\n\n readonly comfortable: number;\n}\n\nexport const targetSize: TargetSize = { minimum: 24, comfortable: 44 };\n\nexport function targetInset(\n visual: number,\n floor: number = targetSize.minimum,\n): number {\n if (!Number.isFinite(visual) || !Number.isFinite(floor)) {\n return 0;\n }\n return Math.max(0, Math.ceil((floor - visual) / 2));\n}\n\nexport const densityNames = [\"compact\", \"comfortable\", \"spacious\"] as const;\n\nexport type DensityName = (typeof densityNames)[number];\n\nexport const isDensityName = (value: unknown): value is DensityName =>\n densityNames.some((name) => name === value);\n\nexport const controlSizes = [\"sm\", \"md\", \"lg\"] as const;\n\nexport type ControlSize = (typeof controlSizes)[number];\n\nexport const isControlSize = (value: unknown): value is ControlSize =>\n controlSizes.some((size) => size === value);\n\nexport interface Density {\n readonly name: DensityName;\n\n readonly controlHeight: Readonly>;\n\n readonly controlPaddingX: Readonly>;\n\n readonly rowHeight: number;\n}\n\nexport const densityPresets: Readonly> = {\n compact: {\n name: \"compact\",\n controlHeight: { sm: 24, md: 28, lg: 32 },\n controlPaddingX: { sm: 6, md: 8, lg: 10 },\n rowHeight: 28,\n },\n comfortable: {\n name: \"comfortable\",\n controlHeight: { sm: 28, md: 32, lg: 36 },\n controlPaddingX: { sm: 8, md: 10, lg: 12 },\n rowHeight: 32,\n },\n spacious: {\n name: \"spacious\",\n controlHeight: { sm: 32, md: 36, lg: 40 },\n controlPaddingX: { sm: 10, md: 12, lg: 14 },\n rowHeight: 36,\n },\n};\n\nexport const defaultDensity: Density = densityPresets.comfortable;\n" }, { "path": "packages/tokens/src/scales.ts", "target": "@ui/gpuixui/tokens/scales.ts", "type": "registry:lib", "content": "import {\n type BoxShadow,\n type Elevation,\n elevationLevels,\n elevationShadow,\n} from \"./elevation.js\";\nimport { isStepRecord, requireGroups } from \"./missing.js\";\nimport {\n controlSizes,\n type BorderWidth,\n type ControlSize,\n type Density,\n type DensityName,\n type IconSize,\n type Radius,\n type Spacing,\n} from \"./scale.js\";\nimport type { Stored } from \"./theme.js\";\nimport type { TextRole, Typography } from \"./typography.js\";\n\nexport type ScaleGroup =\n | \"spacing\"\n | \"radius\"\n | \"borderWidth\"\n | \"iconSize\"\n | \"typography\"\n | \"density\"\n | \"elevation\";\n\nexport interface InvalidScale {\n readonly group: ScaleGroup;\n\n readonly path: string;\n\n readonly value: number;\n\n readonly previous: {\n readonly path: string;\n\n readonly value: number;\n };\n}\n\nexport type ScaleSource = {\n readonly spacing?: Stored;\n readonly radius?: Stored;\n readonly borderWidth?: Stored;\n readonly iconSize?: Stored;\n readonly density?: Stored | DensityName;\n readonly typography?: Stored;\n\n readonly elevation?: Stored;\n};\n\nconst spacingKeys = [\n \"2xs\",\n \"xs\",\n \"sm\",\n \"md\",\n \"lg\",\n \"xl\",\n \"2xl\",\n \"3xl\",\n \"4xl\",\n \"5xl\",\n] as const;\n\nconst radiusKeys = [\"none\", \"sm\", \"md\", \"lg\", \"xl\", \"full\"] as const;\n\nconst borderKeys = [\"thin\", \"strong\"] as const;\n\nconst iconKeys = [\"xs\", \"sm\", \"md\", \"lg\", \"xl\"] as const;\n\nconst typeKeys = [\n \"caption\",\n \"label\",\n \"body\",\n \"h3\",\n \"h2\",\n \"h1\",\n \"display\",\n] as const satisfies readonly TextRole[];\n\nconst notRungs = {\n bodyStrong: \"emphasis\",\n\n code: \"mono\",\n codeBlock: \"mono\",\n} as const satisfies Partial>;\n\ntype EveryStepListed =\n Exclude extends never\n ? true\n : [\"a scale step is missing from its order ladder\", Exclude];\n\nconst spacingLadder: EveryStepListed<\n keyof Spacing,\n (typeof spacingKeys)[number]\n> = true;\nconst radiusLadder: EveryStepListed =\n true;\nconst borderLadder: EveryStepListed<\n keyof BorderWidth,\n (typeof borderKeys)[number]\n> = true;\nconst iconLadder: EveryStepListed =\n true;\nconst typeLadder: EveryStepListed<\n TextRole,\n (typeof typeKeys)[number] | keyof typeof notRungs\n> = true;\n\nvoid spacingLadder;\nvoid radiusLadder;\nvoid borderLadder;\nvoid iconLadder;\nvoid typeLadder;\n\ntype Step = readonly [path: string, value: number];\n\nconst keyed = (\n keys: readonly Key[],\n read: (key: Key) => number,\n): readonly Step[] => keys.map((key) => [key, read(key)] as const);\n\nconst sized = (\n prefix: string,\n read: (size: ControlSize) => number,\n): readonly Step[] =>\n controlSizes.map((size) => [`${prefix}.${size}`, read(size)] as const);\n\nconst stepNumber = (value: unknown): number =>\n typeof value === \"number\" ? value : Number.NaN;\n\nconst stepValue = (scale: unknown, key: string): number =>\n stepNumber(isStepRecord(scale) ? scale[key] : undefined);\n\nconst reach = ({ offsetY, blurRadius, spreadRadius }: BoxShadow): number =>\n offsetY + blurRadius + spreadRadius;\n\nconst elevationSteps = (\n elevation: Stored | undefined,\n): readonly Step[] =>\n elevationLevels.flatMap((level) => {\n const shadow = elevationShadow({ elevation }, level);\n if (shadow === undefined) {\n return [];\n }\n const value = reach(shadow);\n return Number.isFinite(value) ? [[level, value] as const] : [];\n });\n\nconst ordered = (\n group: ScaleGroup,\n steps: readonly Step[],\n allowEqual = false,\n): readonly InvalidScale[] =>\n steps.slice(1).flatMap(([path, value], offset) => {\n const previous = steps[offset];\n if (previous === undefined) {\n return [];\n }\n const [previousPath, previousValue] = previous;\n if (!Number.isFinite(value) || !Number.isFinite(previousValue)) {\n return [];\n }\n return value > previousValue || (allowEqual && value === previousValue)\n ? []\n : [\n {\n group,\n path,\n value,\n previous: { path: previousPath, value: previousValue },\n },\n ];\n });\n\nexport function invalidScales(theme: ScaleSource): readonly InvalidScale[] {\n requireGroups(theme);\n const density: unknown = theme.density;\n const types: unknown = theme.typography;\n const controlScale = (metric: \"controlHeight\" | \"controlPaddingX\"): unknown =>\n isStepRecord(density) ? density[metric] : undefined;\n return [\n ...ordered(\n \"spacing\",\n keyed(spacingKeys, (key) => stepValue(theme.spacing, key)),\n ),\n ...ordered(\n \"radius\",\n keyed(radiusKeys, (key) => stepValue(theme.radius, key)),\n true,\n ),\n ...ordered(\n \"borderWidth\",\n keyed(borderKeys, (key) => stepValue(theme.borderWidth, key)),\n ),\n ...ordered(\n \"iconSize\",\n keyed(iconKeys, (key) => stepValue(theme.iconSize, key)),\n ),\n ...ordered(\n \"typography\",\n\n typeKeys.flatMap((role) => {\n const style: unknown = isStepRecord(types) ? types[role] : undefined;\n return isStepRecord(style)\n ? [[`${role}.fontSize`, stepNumber(style.fontSize)] as const]\n : [];\n }),\n ),\n ...ordered(\n \"density\",\n sized(\"controlHeight\", (size) =>\n stepValue(controlScale(\"controlHeight\"), size),\n ),\n ),\n ...ordered(\n \"density\",\n sized(\"controlPaddingX\", (size) =>\n stepValue(controlScale(\"controlPaddingX\"), size),\n ),\n ),\n ...ordered(\"elevation\", elevationSteps(theme.elevation)),\n ];\n}\n" }, { "path": "packages/tokens/src/selection.ts", "target": "@ui/gpuixui/tokens/selection.ts", "type": "registry:lib", "content": "import {\n alphaOf,\n blend,\n isColorRole,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n type ContrastPair,\n type ContrastSource,\n} from \"./contrast.js\";\nimport { decorativeFloor } from \"./decorative.js\";\nimport { statusTones } from \"./styles.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const selectionPairs: readonly ContrastPair[] = [\n { foreground: \"inputForeground\", background: \"input\", floor: \"body\" },\n { foreground: \"foreground\", background: \"background\", floor: \"body\" },\n { foreground: \"cardForeground\", background: \"card\", floor: \"body\" },\n { foreground: \"popoverForeground\", background: \"popover\", floor: \"body\" },\n\n { foreground: \"foreground\", background: \"muted\", floor: \"body\" },\n {\n foreground: \"mutedForeground\",\n background: \"background\",\n floor: \"secondary\",\n },\n { foreground: \"mutedForeground\", background: \"card\", floor: \"secondary\" },\n { foreground: \"mutedForeground\", background: \"popover\", floor: \"secondary\" },\n];\n\nexport interface SelectionFailure {\n readonly kind: \"visibility\" | \"legibility\";\n\n readonly foreground: keyof ThemeColors;\n\n readonly background: keyof ThemeColors;\n\n readonly wash: string | undefined;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nconst washOver = (\n colors: Partial,\n over: keyof ThemeColors,\n): string | undefined => {\n const surface = colors[over];\n const wash = colors.selection;\n return surface === undefined || wash === undefined\n ? undefined\n : blend(surface, wash, alphaOf(wash));\n};\n\nconst WASH_STEPS = 50;\n\nconst inksOn = (surface: keyof ThemeColors): readonly (keyof ThemeColors)[] => {\n const pair = selectionPairs.find(\n (entry) => entry.background === surface && entry.floor === \"body\",\n )?.foreground;\n const tone = statusTones.find((name) => `${name}Soft` === surface);\n return [\n ...(tone === undefined ? [] : [`${tone}SoftForeground` as const]),\n ...(pair === undefined ? [] : [pair]),\n \"foreground\",\n ];\n};\n\nexport function selectionFailures(\n theme: ColourSource & ContrastSource,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): readonly SelectionFailure[] {\n const colors = themeColors(theme);\n return selectionPairs.flatMap(({ foreground, background, floor }) => {\n const wash = washOver(colors, background);\n const failures: SelectionFailure[] = [];\n const visible = contrastRatio(wash, colors[background]);\n if (visible === undefined || visible < decorativeFloor) {\n failures.push({\n kind: \"visibility\",\n foreground,\n background,\n wash,\n ratio: visible,\n floor: decorativeFloor,\n });\n }\n const legible = contrastRatio(colors[foreground], wash);\n if (legible === undefined || legible < floors[floor]) {\n failures.push({\n kind: \"legibility\",\n foreground,\n background,\n wash,\n ratio: legible,\n floor: floors[floor],\n });\n }\n return failures;\n });\n}\n\nexport function selectionOn(\n theme: Theme,\n surface: keyof ThemeColors,\n floors?: ContrastFloors,\n): string;\nexport function selectionOn(\n theme: ColourSource & ContrastSource,\n surface: keyof ThemeColors,\n floors?: ContrastFloors,\n): string | undefined;\nexport function selectionOn(\n theme: ColourSource & ContrastSource,\n surface: keyof ThemeColors,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): string | undefined {\n const colors = themeColors(theme);\n const role = isColorRole(surface) ? surface : undefined;\n const fill = role === undefined ? undefined : colors[role];\n const wash = colors.selection;\n const page = colors.background;\n if (fill === undefined || wash === undefined || page === undefined) {\n return undefined;\n }\n const inks = inksOn(surface).map((ink) => colors[ink]);\n const carries = (candidate: string): boolean => {\n const composed = blend(fill, candidate, alphaOf(candidate));\n const visible = contrastRatio(composed, fill);\n return (\n (visible === undefined || visible >= decorativeFloor) &&\n inks.every((ink) => {\n const legible = contrastRatio(ink, composed);\n return legible === undefined || legible >= floors.body;\n })\n );\n };\n return (\n Array.from({ length: WASH_STEPS + 1 }, (_, step) =>\n blend(wash, page, step / WASH_STEPS),\n ).find(carries) ?? wash\n );\n}\n" }, { "path": "packages/tokens/src/series.ts", "target": "@ui/gpuixui/tokens/series.ts", "type": "registry:lib", "content": "import {\n namesColour,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport { contrastFloorsFor, contrastRatio } from \"./contrast.js\";\nimport { opaqueRgb } from \"./measure.js\";\nimport { themeContrastOf, themeModeOf } from \"./mode.js\";\n\nexport type SeriesColors = readonly [string, string, string, string, string];\n\nexport type StoredSeries = ReadonlyArray;\n\nexport const lightSeries: SeriesColors = [\n \"#5F4BDB\",\n \"#1B45AC\",\n \"#158754\",\n \"#B57600\",\n \"#A5262B\",\n];\n\nexport const darkSeries: SeriesColors = [\n \"#A7A9FF\",\n \"#6E9CFF\",\n \"#1FA968\",\n \"#FFDE8A\",\n \"#FF9E9E\",\n];\n\nexport const highContrastLightSeries: SeriesColors = [\n \"#4C39B5\",\n \"#2559D6\",\n \"#0E5135\",\n \"#8E5B00\",\n \"#CC3439\",\n];\n\nexport const highContrastDarkSeries: SeriesColors = [\n \"#C7CBFF\",\n \"#6E9CFF\",\n \"#3BC97F\",\n \"#FFE7A8\",\n \"#FFC6C6\",\n];\n\nexport type SeriesSurface = keyof ThemeColors;\n\nexport const seriesSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n] as const;\n\nexport const seriesDistinctnessFloor = 0.06;\n\nexport const colorVisionDeficiencies = [\n \"protanopia\",\n \"deuteranopia\",\n \"tritanopia\",\n] as const;\n\nexport type ColorVisionDeficiency = (typeof colorVisionDeficiencies)[number];\n\nexport const seriesDeficiencyFloor = 0.05;\n\ntype MatrixRow = readonly [number, number, number];\n\nconst deficiencyMatrices: Readonly<\n Record\n> = {\n protanopia: [\n [0.152286, 1.052583, -0.204868],\n [0.114503, 0.786281, 0.099216],\n [-0.003882, -0.048116, 1.051998],\n ],\n deuteranopia: [\n [0.367322, 0.860646, -0.227968],\n [0.280085, 0.672501, 0.047413],\n [-0.01182, 0.04294, 0.968881],\n ],\n tritanopia: [\n [1.255528, -0.076749, -0.178779],\n [-0.078411, 0.930809, 0.147602],\n [0.004733, 0.691367, 0.3039],\n ],\n};\n\nconst seriesPositions = [0, 1, 2, 3, 4] as const;\n\nexport interface SeriesSource extends ColourSource {\n readonly mode?: unknown;\n\n readonly contrast?: unknown;\n\n readonly series?: StoredSeries | null;\n}\n\nconst shippedSeries = (theme: SeriesSource): SeriesColors => {\n const mode = themeModeOf(theme);\n if (themeContrastOf(theme) === \"high\") {\n return mode === \"dark\" ? highContrastDarkSeries : highContrastLightSeries;\n }\n return mode === \"dark\" ? darkSeries : lightSeries;\n};\n\nconst isCompleteSeries = (scale: StoredSeries): scale is SeriesColors =>\n scale.length === seriesPositions.length && scale.every(namesColour);\n\nexport function seriesPalette(\n stored: StoredSeries,\n fallback: SeriesColors,\n): SeriesColors {\n if (isCompleteSeries(stored)) {\n return stored;\n }\n const at = (position: 0 | 1 | 2 | 3 | 4): string => {\n const value = stored[position];\n return namesColour(value) ? value : fallback[position];\n };\n return [at(0), at(1), at(2), at(3), at(4)];\n}\n\nexport function seriesColors(theme: SeriesSource): SeriesColors {\n const table = shippedSeries(theme);\n return theme.series == null ? table : seriesPalette(theme.series, table);\n}\n\nexport interface SeriesSurfaceFailure {\n readonly index: number;\n\n readonly color: string | undefined;\n\n readonly surface: SeriesSurface;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nexport interface SeriesDistinctnessFailure {\n readonly index: number;\n\n readonly other: number;\n\n readonly distance: number | undefined;\n\n readonly floor: number;\n}\n\nexport interface SeriesVisionFailure {\n readonly deficiency: ColorVisionDeficiency;\n\n readonly index: number;\n\n readonly other: number;\n\n readonly distance: number | undefined;\n\n readonly floor: number;\n}\n\nexport interface SeriesReport {\n readonly surfaces: readonly SeriesSurfaceFailure[];\n\n readonly distinctness: readonly SeriesDistinctnessFailure[];\n\n readonly deficiencies: readonly SeriesVisionFailure[];\n}\n\nexport interface SeriesContract {\n readonly surface?: number;\n\n readonly surfaces?: readonly SeriesSurface[];\n\n readonly distinctness?: number;\n\n readonly deficiency?: number;\n}\n\nconst linear = (channel: number): number =>\n channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;\n\nconst encode = (channel: number): number =>\n channel <= 0.0031308 ? channel * 12.92 : 1.055 * channel ** (1 / 2.4) - 0.055;\n\nconst clamp = (channel: number): number => Math.min(1, Math.max(0, channel));\n\nconst linearRgb = (\n color: string | undefined,\n): readonly [number, number, number] | undefined => {\n const rgb = opaqueRgb(color);\n return rgb === undefined\n ? undefined\n : [\n linear(Number.parseInt(rgb.slice(1, 3), 16) / 255),\n linear(Number.parseInt(rgb.slice(3, 5), 16) / 255),\n linear(Number.parseInt(rgb.slice(5, 7), 16) / 255),\n ];\n};\n\nconst hexFromLinear = (channels: readonly [number, number, number]): string =>\n `#${channels\n .map((channel) =>\n Math.round(clamp(encode(channel)) * 255)\n .toString(16)\n .padStart(2, \"0\"),\n )\n .join(\"\")\n .toUpperCase()}`;\n\nconst oklab = (\n color: string | undefined,\n): readonly [number, number, number] | undefined => {\n const rgb = linearRgb(color);\n if (rgb === undefined) {\n return undefined;\n }\n const [red, green, blue] = rgb;\n const l =\n (0.4122214708 * red + 0.5363325363 * green + 0.0514459929 * blue) **\n (1 / 3);\n const m =\n (0.2119034982 * red + 0.6806995451 * green + 0.1073969566 * blue) **\n (1 / 3);\n const s =\n (0.0883024619 * red + 0.2817188376 * green + 0.6299787005 * blue) **\n (1 / 3);\n return [\n 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,\n ];\n};\n\nconst colorDistance = (\n first: string | undefined,\n second: string | undefined,\n): number | undefined => {\n const left = oklab(first);\n const right = oklab(second);\n if (left === undefined || right === undefined) {\n return undefined;\n }\n return Math.hypot(left[0] - right[0], left[1] - right[1], left[2] - right[2]);\n};\n\nexport function simulateColorVision(\n color: string | undefined,\n deficiency: ColorVisionDeficiency,\n): string | undefined {\n const rgb = linearRgb(color);\n if (rgb === undefined) {\n return undefined;\n }\n const matrix = deficiencyMatrices[deficiency];\n const applied = (row: MatrixRow): number =>\n row[0] * rgb[0] + row[1] * rgb[1] + row[2] * rgb[2];\n return hexFromLinear([\n applied(matrix[0]),\n applied(matrix[1]),\n applied(matrix[2]),\n ]);\n}\n\nexport type SeriesAuditSource = Omit &\n ColourSource & {\n readonly series?: StoredSeries | null;\n };\n\nexport function seriesFailures(\n theme: SeriesAuditSource,\n contract: SeriesContract = {},\n): SeriesReport {\n const variant = contrastFloorsFor(theme);\n const surfaces = contract.surfaces ?? seriesSurfaces;\n const surfaceFloor = contract.surface ?? variant.boundary;\n const distinctnessFloor = contract.distinctness ?? seriesDistinctnessFloor;\n const deficiencyFloor = contract.deficiency ?? seriesDeficiencyFloor;\n const series: StoredSeries =\n theme.series ??\n seriesColors({\n mode: theme.mode,\n contrast: theme.contrast,\n colors: theme.colors,\n });\n\n const at = (position: number): string | undefined => {\n const color = series[position];\n return namesColour(color) ? color : undefined;\n };\n const surfaceFailures = surfaces.flatMap((surface) =>\n seriesPositions.flatMap((index) => {\n const color = at(index);\n const ratio = contrastRatio(color, themeColors(theme)[surface]);\n return ratio !== undefined && ratio >= surfaceFloor\n ? []\n : [{ index, color, surface, ratio, floor: surfaceFloor }];\n }),\n );\n const distinctness = seriesPositions.flatMap((index) =>\n seriesPositions\n .filter((other) => other > index)\n .flatMap((other) => {\n const distance = colorDistance(at(index), at(other));\n return distance !== undefined && distance >= distinctnessFloor\n ? []\n : [{ index, other, distance, floor: distinctnessFloor }];\n }),\n );\n const deficiencies = colorVisionDeficiencies.flatMap((deficiency) =>\n seriesPositions.flatMap((index) =>\n seriesPositions\n .filter((other) => other > index)\n .flatMap((other) => {\n const color = at(index);\n const otherColor = at(other);\n const simulated =\n color === undefined\n ? undefined\n : simulateColorVision(color, deficiency);\n const simulatedOther =\n otherColor === undefined\n ? undefined\n : simulateColorVision(otherColor, deficiency);\n const distance =\n simulated === undefined || simulatedOther === undefined\n ? undefined\n : colorDistance(simulated, simulatedOther);\n return distance !== undefined && distance >= deficiencyFloor\n ? []\n : [{ deficiency, index, other, distance, floor: deficiencyFloor }];\n }),\n ),\n );\n return { surfaces: surfaceFailures, distinctness, deficiencies };\n}\n" }, { "path": "packages/tokens/src/shadcn-vars.ts", "target": "@ui/gpuixui/tokens/shadcn-vars.ts", "type": "registry:lib", "content": "import { alpha, isPaintableColor, type ThemeColors } from \"./color.js\";\nimport type { SeriesColors } from \"./series.js\";\nimport type { ThemeOverrides } from \"./theme.js\";\nimport type { Radius } from \"./scale.js\";\n\nexport type ShadcnVars = Readonly>;\n\nexport interface ShadcnStyles {\n readonly light: ShadcnVars;\n\n readonly dark: ShadcnVars;\n}\n\nconst ROLE_BY_VARIABLE = {\n background: \"background\",\n foreground: \"foreground\",\n card: \"card\",\n \"card-foreground\": \"cardForeground\",\n popover: \"popover\",\n \"popover-foreground\": \"popoverForeground\",\n primary: \"primary\",\n \"primary-foreground\": \"primaryForeground\",\n secondary: \"secondary\",\n \"secondary-foreground\": \"secondaryForeground\",\n muted: \"muted\",\n \"muted-foreground\": \"mutedForeground\",\n accent: \"accent\",\n \"accent-foreground\": \"accentForeground\",\n destructive: \"destructive\",\n \"destructive-foreground\": \"destructiveForeground\",\n border: \"border\",\n input: \"input\",\n ring: \"ring\",\n} as const satisfies Readonly>;\n\nconst CHART_VARIABLES = [\n \"chart-1\",\n \"chart-2\",\n \"chart-3\",\n \"chart-4\",\n \"chart-5\",\n] as const;\n\nconst LIGHT_SELECTORS: ReadonlyArray = [/:root\\b/g, /\\bhtml\\b/g];\n\nconst DARK_SELECTORS: ReadonlyArray = [/\\.dark\\b/g];\n\nconst DARK_MEDIA = \"@media (prefers-color-scheme: dark)\";\n\nconst insideDarkMedia = (css: string, at: number): boolean => {\n const start = css.lastIndexOf(DARK_MEDIA, at);\n if (start < 0) return false;\n const between = css.slice(start, at);\n const opens = (between.match(/\\{/g) ?? []).length;\n const closes = (between.match(/\\}/g) ?? []).length;\n return opens > closes;\n};\n\nconst declarationsOf = (body: string): ShadcnVars => {\n const entries = body.split(\";\").flatMap((declaration) => {\n const colon = declaration.indexOf(\":\");\n if (colon < 1) return [];\n const name = declaration.slice(0, colon).trim();\n if (!name.startsWith(\"--\")) return [];\n return [[name.slice(2), declaration.slice(colon + 1).trim()] as const];\n });\n return Object.fromEntries(entries);\n};\n\nconst blocksOf = (\n css: string,\n selectors: ReadonlyArray,\n): ReadonlyArray<{ readonly at: number; readonly body: string }> =>\n selectors.flatMap((selector) =>\n [\n ...css.matchAll(\n new RegExp(`${selector.source}\\\\s*(?:,[^{]*)?\\\\{([^{}]*)\\\\}`, \"g\"),\n ),\n ].map((match) => ({ at: match.index ?? 0, body: match[1] ?? \"\" })),\n );\n\nexport const roleVariables = (): Readonly> =>\n ROLE_BY_VARIABLE;\n\nexport const parseShadcnStyles = (css: string): ShadcnStyles => {\n const source = css.replace(/\\/\\*[\\s\\S]*?\\*\\//g, \"\");\n const merge = (target: ShadcnVars, vars: ShadcnVars): ShadcnVars =>\n Object.entries(vars).reduce>(\n (acc, [name, value]) =>\n name.startsWith(\"color-\") ? acc : { ...acc, [name]: value },\n { ...target },\n );\n const dark = DARK_SELECTORS.flatMap((selector) =>\n blocksOf(source, [selector]),\n ).reduce(\n (acc, block) => merge(acc, declarationsOf(block.body)),\n {},\n );\n const blocks = LIGHT_SELECTORS.flatMap((selector) =>\n blocksOf(source, [selector]),\n );\n const light = blocks\n .filter((block) => !insideDarkMedia(source, block.at))\n .reduce(\n (acc, block) => merge(acc, declarationsOf(block.body)),\n {},\n );\n const darkFromMedia = blocks\n .filter((block) => insideDarkMedia(source, block.at))\n .reduce(\n (acc, block) => merge(acc, declarationsOf(block.body)),\n dark,\n );\n return { light, dark: darkFromMedia };\n};\n\nexport const shadcnColour = (value: string): string => {\n const colour = value.trim();\n if (colour === \"\") return colour;\n return /^[\\d.]+(?:deg)?[\\s,]+[\\d.]+%?[\\s,]+[\\d.]+%?(?:\\s*\\/\\s*[\\d.]+%?)?$/.test(\n colour,\n )\n ? `hsl(${colour})`\n : colour;\n};\n\nconst pixelsOf = (value: string): number | undefined => {\n const match = /^([\\d.]+)(rem|px|em)?$/.exec(value.trim());\n if (match?.[1] === undefined) return undefined;\n const amount = Number.parseFloat(match[1]);\n if (!Number.isFinite(amount)) return undefined;\n return match[2] === \"rem\" || match[2] === \"em\" ? amount * 16 : amount;\n};\n\nexport interface ShadcnOverrideOptions {\n readonly derive?: boolean;\n}\n\nexport const shadcnOverrides = (\n vars: ShadcnVars,\n options: ShadcnOverrideOptions = {},\n): ThemeOverrides => {\n const colours: Partial = {};\n const named = (name: string): string | undefined => {\n const value = vars[name];\n if (value === undefined) return undefined;\n const colour = shadcnColour(value);\n return isPaintableColor(colour) ? colour : undefined;\n };\n const mapped = Object.entries(ROLE_BY_VARIABLE).reduce>(\n (acc, [variable, role]) => {\n const colour = named(variable);\n return colour === undefined ? acc : { ...acc, [role]: colour };\n },\n colours,\n );\n\n const derivedOf = (\n table: Partial,\n ): ReadonlyArray => [\n [\"inputForeground\", table.foreground],\n [\"placeholder\", table.mutedForeground],\n [\"borderStrong\", table.border],\n [\"hover\", table.muted],\n [\"active\", table.accent],\n [\"selected\", table.accent],\n [\"selectedForeground\", table.accentForeground],\n [\"disabled\", table.muted],\n [\"disabledForeground\", table.mutedForeground],\n [\"skeleton\", table.muted],\n [\"scrollbar\", table.border],\n [\"overlay\", \"#00000080\"],\n [\"shadow\", \"#00000033\"],\n ];\n const filled =\n options.derive === false\n ? mapped\n : derivedOf(mapped).reduce>(\n (acc, [role, colour]) =>\n colour === undefined || acc[role] !== undefined\n ? acc\n : { ...acc, [role]: colour },\n mapped,\n );\n const selection =\n options.derive === false ||\n filled.primary === undefined ||\n filled.selection !== undefined\n ? filled\n : { ...filled, selection: alpha(filled.primary, 0.25) };\n\n const overrides: {\n colors?: Partial;\n radius?: Partial;\n series?: SeriesColors;\n } = { colors: selection };\n\n const radius = vars.radius === undefined ? undefined : pixelsOf(vars.radius);\n if (radius !== undefined) overrides.radius = { md: radius };\n\n const [first, second, third, fourth, fifth] = CHART_VARIABLES.map(named);\n if (\n first !== undefined &&\n second !== undefined &&\n third !== undefined &&\n fourth !== undefined &&\n fifth !== undefined\n ) {\n overrides.series = [first, second, third, fourth, fifth];\n }\n\n return overrides;\n};\n" }, { "path": "packages/tokens/src/shadcn.ts", "target": "@ui/gpuixui/tokens/shadcn.ts", "type": "registry:lib", "content": "import {\n extendTheme,\n getTheme,\n platformTheme,\n type PlatformStyleOptions,\n type Theme,\n type ThemeMode,\n} from \"./theme.js\";\nimport type { PlatformName } from \"./platforms.js\";\nimport { seriesColors } from \"./series.js\";\nimport {\n parseShadcnStyles,\n roleVariables,\n shadcnOverrides,\n type ShadcnVars,\n} from \"./shadcn-vars.js\";\n\nexport const shadcnNeutral: Readonly> = {\n light: {\n background: \"oklch(1 0 0)\",\n foreground: \"oklch(0.145 0 0)\",\n card: \"oklch(1 0 0)\",\n \"card-foreground\": \"oklch(0.145 0 0)\",\n popover: \"oklch(1 0 0)\",\n \"popover-foreground\": \"oklch(0.145 0 0)\",\n primary: \"oklch(0.205 0 0)\",\n \"primary-foreground\": \"oklch(0.985 0 0)\",\n secondary: \"oklch(0.97 0 0)\",\n \"secondary-foreground\": \"oklch(0.205 0 0)\",\n muted: \"oklch(0.97 0 0)\",\n \"muted-foreground\": \"oklch(0.556 0 0)\",\n accent: \"oklch(0.97 0 0)\",\n \"accent-foreground\": \"oklch(0.205 0 0)\",\n destructive: \"oklch(0.577 0.245 27.325)\",\n border: \"oklch(0.922 0 0)\",\n input: \"oklch(0.922 0 0)\",\n ring: \"oklch(0.708 0 0)\",\n },\n dark: {\n background: \"oklch(0.145 0 0)\",\n foreground: \"oklch(0.985 0 0)\",\n card: \"oklch(0.205 0 0)\",\n \"card-foreground\": \"oklch(0.985 0 0)\",\n popover: \"oklch(0.205 0 0)\",\n \"popover-foreground\": \"oklch(0.985 0 0)\",\n primary: \"oklch(0.922 0 0)\",\n \"primary-foreground\": \"oklch(0.205 0 0)\",\n secondary: \"oklch(0.269 0 0)\",\n \"secondary-foreground\": \"oklch(0.985 0 0)\",\n muted: \"oklch(0.269 0 0)\",\n \"muted-foreground\": \"oklch(0.708 0 0)\",\n accent: \"oklch(0.269 0 0)\",\n \"accent-foreground\": \"oklch(0.985 0 0)\",\n destructive: \"oklch(0.704 0.191 22.216)\",\n border: \"oklch(1 0 0 / 10%)\",\n input: \"oklch(1 0 0 / 15%)\",\n ring: \"oklch(0.556 0 0)\",\n },\n};\n\nexport const shadcnTheme = (\n css: string,\n mode: ThemeMode,\n base: Theme = getTheme(mode),\n): Theme => {\n const styles = parseShadcnStyles(css);\n const vars = mode === \"dark\" ? styles.dark : styles.light;\n return Object.keys(vars).length === 0\n ? base\n : extendTheme(base, shadcnOverrides(vars));\n};\n\nconst cssOf = (theme: Theme): ReadonlyArray => {\n const colours = theme.colors;\n const lines = Object.entries(roleVariables()).map(\n ([variable, role]) => ` --${variable}: ${colours[role]};`,\n );\n const charts = seriesColors(theme).map(\n (colour, index) => ` --chart-${index + 1}: ${colour};`,\n );\n return [...lines, ...charts, ` --radius: ${theme.radius.md}px;`];\n};\n\nexport const shadcnNeutralTheme = (mode: ThemeMode): Theme =>\n extendTheme(getTheme(mode), shadcnOverrides(shadcnNeutral[mode]));\n\nexport const shadcnCss = (theme: Theme): string =>\n [`:root {`, ...cssOf(theme), `}`].join(\"\\n\");\n\nexport const shadcnPlatformTheme = (\n css: string,\n platform: PlatformName,\n mode: ThemeMode,\n options: PlatformStyleOptions = { keepPalette: true },\n): Theme => platformTheme(shadcnTheme(css, mode), platform, options);\n\nexport const shadcnStylesheet = (light: Theme, dark: Theme): string =>\n [\n shadcnCss(light),\n \"\",\n \".dark {\",\n ...cssOf(dark).map((line) => line.replace(/^ {2}/, \" \")),\n \"}\",\n \"\",\n ].join(\"\\n\");\n" }, { "path": "packages/tokens/src/styles.ts", "target": "@ui/gpuixui/tokens/styles.ts", "type": "registry:lib", "content": "import {\n alpha,\n blend,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastSource,\n} from \"./contrast.js\";\nimport type { BoxShadow } from \"./elevation.js\";\nimport {\n borderWidth as shippedBorderWidth,\n isControlSize,\n type BorderWidth,\n type ControlSize,\n} from \"./scale.js\";\nimport type { Stored, Theme } from \"./theme.js\";\nimport {\n isTextRole,\n typography as shippedTypography,\n type FontWeight,\n type TextStyle,\n type TextRole,\n} from \"./typography.js\";\n\nexport interface TextStyleProperties {\n readonly fontSize: number;\n\n readonly lineHeight: number;\n\n readonly fontWeight: FontWeight;\n\n readonly fontFamily: string;\n}\n\nconst roleFamily: Readonly> = {\n display: \"sans\",\n h1: \"sans\",\n h2: \"sans\",\n h3: \"sans\",\n body: \"sans\",\n bodyStrong: \"sans\",\n label: \"sans\",\n caption: \"sans\",\n code: \"mono\",\n codeBlock: \"mono\",\n};\n\nexport interface TypeSource {\n readonly typography?:\n | ({\n readonly sans?: string | null;\n readonly mono?: string | null;\n } & Partial> | null>>)\n | null;\n}\n\nexport function textStyle(\n theme: TypeSource,\n role: TextRole,\n): TextStyleProperties {\n const name = isTextRole(role) ? role : \"body\";\n const authored: unknown = theme.typography?.[name];\n const style = isTextStyle(authored) ? authored : shippedTypography[name];\n const family = theme.typography?.[roleFamily[name]];\n return {\n fontSize: style.fontSize,\n lineHeight: style.lineHeight,\n fontWeight: style.fontWeight,\n fontFamily:\n typeof family === \"string\" && family.trim() !== \"\"\n ? family\n : shippedTypography[roleFamily[name]],\n };\n}\n\nconst isTextStyle = (value: unknown): value is TextStyle =>\n typeof value === \"object\" &&\n value !== null &&\n \"fontSize\" in value &&\n isFiniteNumber(value.fontSize) &&\n \"lineHeight\" in value &&\n isFiniteNumber(value.lineHeight) &&\n \"fontWeight\" in value &&\n isFiniteNumber(value.fontWeight);\n\nconst isFiniteNumber = (value: unknown): value is number =>\n typeof value === \"number\" && Number.isFinite(value);\n\nexport interface DensitySource {\n readonly density?: {\n readonly controlHeight?: Readonly<\n Partial>\n > | null;\n readonly controlPaddingX?: Readonly<\n Partial>\n > | null;\n } | null;\n}\n\nconst densityMetric = (\n theme: DensitySource,\n metric: \"controlHeight\" | \"controlPaddingX\",\n size: ControlSize,\n): number | undefined => {\n const scale = theme.density?.[metric];\n if (scale === undefined || scale === null) return undefined;\n const value = scale[isControlSize(size) ? size : \"md\"];\n return typeof value === \"number\" && Number.isFinite(value)\n ? value\n : undefined;\n};\n\nexport function controlHeight(theme: Theme, size: ControlSize): number;\nexport function controlHeight(\n theme: DensitySource,\n size: ControlSize,\n): number | undefined;\nexport function controlHeight(\n theme: DensitySource,\n size: ControlSize,\n): number | undefined {\n return densityMetric(theme, \"controlHeight\", size);\n}\n\nexport function controlPaddingX(theme: Theme, size: ControlSize): number;\nexport function controlPaddingX(\n theme: DensitySource,\n size: ControlSize,\n): number | undefined;\nexport function controlPaddingX(\n theme: DensitySource,\n size: ControlSize,\n): number | undefined {\n return densityMetric(theme, \"controlPaddingX\", size);\n}\n\nexport const statusTones = [\n \"info\",\n \"success\",\n \"warning\",\n \"destructive\",\n] as const;\n\nexport type StatusTone = (typeof statusTones)[number];\n\nexport const isStatusTone = (value: unknown): value is StatusTone =>\n statusTones.some((tone) => tone === value);\n\nconst defaultStatusTone: StatusTone = \"info\";\n\nexport const statusEdgeAlpha = 0.3;\n\nexport interface StatusToneStyle {\n readonly background: string;\n\n readonly foreground: string;\n\n readonly border: string;\n}\n\nexport function statusTone(theme: Theme, tone: StatusTone): StatusToneStyle;\nexport function statusTone(\n theme: ColourSource,\n tone: StatusTone,\n): StatusToneStyle | undefined;\nexport function statusTone(\n theme: ColourSource,\n tone: StatusTone,\n): StatusToneStyle | undefined {\n const name = isStatusTone(tone) ? tone : defaultStatusTone;\n const colors = themeColors(theme);\n const background = colors[`${name}Soft`];\n const foreground = colors[`${name}SoftForeground`];\n const edge = colors[name];\n return background === undefined ||\n foreground === undefined ||\n edge === undefined\n ? undefined\n : { background, foreground, border: alpha(edge, statusEdgeAlpha) };\n}\n\nexport interface FocusRing {\n readonly boxShadow: BoxShadow;\n}\n\nexport interface BorderSource {\n readonly borderWidth?: Stored;\n}\n\nconst borderStep = (source: BorderSource, step: keyof BorderWidth): number => {\n const value = source.borderWidth?.[step];\n return typeof value === \"number\" && Number.isFinite(value)\n ? value\n : shippedBorderWidth[step];\n};\n\nexport interface FocusRingSource extends ColourSource, BorderSource {}\n\nexport function focusRing(theme: Theme): FocusRing;\nexport function focusRing(source: FocusRingSource): FocusRing | undefined;\nexport function focusRing(source: FocusRingSource): FocusRing | undefined {\n const color = themeColors(source).ring;\n if (color === undefined) {\n return undefined;\n }\n return {\n boxShadow: {\n offsetX: 0,\n offsetY: 0,\n blurRadius: 0,\n spreadRadius: borderStep(source, \"strong\"),\n color,\n },\n };\n}\n\nexport interface FocusVisibleOutline {\n readonly outlineWidth: number;\n\n readonly outlineColor?: string;\n\n readonly outlineOffset: number;\n}\n\nexport interface KeyboardFocusRing {\n readonly focusVisible: FocusVisibleOutline;\n}\n\nexport function keyboardFocusRing(theme: FocusRingSource): KeyboardFocusRing {\n const line = borderStep(theme, \"strong\");\n return {\n focusVisible: {\n outlineWidth: line,\n\n outlineColor: themeColors(theme).ring,\n outlineOffset: line,\n },\n };\n}\n\nexport interface ControlFocusState {\n readonly disabled?: boolean;\n\n readonly invalid?: boolean;\n}\n\nexport function controlFocusRing(\n theme: FocusRingSource,\n state: ControlFocusState = {},\n): KeyboardFocusRing | undefined {\n if (state.disabled === true) {\n return undefined;\n }\n const ring = keyboardFocusRing(theme);\n return state.invalid === true\n ? {\n focusVisible: {\n ...ring.focusVisible,\n\n outlineColor:\n themeColors(theme).destructive ?? ring.focusVisible.outlineColor,\n },\n }\n : ring;\n}\n\nexport type FilledAction = \"primary\" | \"secondary\" | \"destructive\";\n\nexport const filledRoles = [\n \"primary\",\n \"secondary\",\n \"destructive\",\n \"accent\",\n] as const;\n\nexport type FilledRole = (typeof filledRoles)[number];\n\nexport const filledFeedbackStates = [\"hover\", \"pressed\"] as const;\n\nexport type FilledFeedbackState = (typeof filledFeedbackStates)[number];\n\nexport type FilledFeedbackSource = ColourSource & ContrastSource;\n\nconst filledOnColour: Readonly> = {\n primary: \"primaryForeground\",\n secondary: \"secondaryForeground\",\n destructive: \"destructiveForeground\",\n accent: \"accentForeground\",\n};\n\nconst HOVER_STEP = 0.12;\n\nconst PRESS_STEP = 0.18;\n\nconst STEP_LADDER: readonly number[] = Array.from(\n { length: Math.round(PRESS_STEP * 100) + 1 },\n (_, offset) => (Math.round(PRESS_STEP * 100) - offset) / 100,\n);\n\nconst readableStep = (\n source: FilledFeedbackSource,\n role: FilledRole,\n nominal: number,\n): number => {\n const colors = themeColors(source);\n const fill = colors[role];\n const foreground = colors.foreground;\n if (fill === undefined || foreground === undefined) {\n return nominal;\n }\n const onColour = colors[filledOnColour[role]];\n const floor = contrastFloorsFor(source).secondary;\n const reads = (step: number): boolean => {\n const ratio = contrastRatio(onColour, blend(fill, foreground, step));\n return ratio !== undefined && ratio >= floor;\n };\n return reads(0)\n ? (STEP_LADDER.find((step) => step <= nominal && reads(step)) ?? 0)\n : nominal;\n};\n\nexport function filledFeedback(\n source: FilledFeedbackSource,\n role: FilledRole,\n state: FilledFeedbackState,\n): string | undefined {\n const colors = themeColors(source);\n const fill = colors[role];\n const foreground = colors.foreground;\n if (fill === undefined || foreground === undefined) {\n return undefined;\n }\n const nominal = state === \"hover\" ? HOVER_STEP : PRESS_STEP;\n return blend(fill, foreground, readableStep(source, role, nominal));\n}\n\nexport function filledHover(theme: Theme, role: FilledRole): string;\nexport function filledHover(\n source: FilledFeedbackSource,\n role: FilledRole,\n): string | undefined;\nexport function filledHover(\n source: FilledFeedbackSource,\n role: FilledRole,\n): string | undefined {\n return filledFeedback(source, role, \"hover\");\n}\n\nexport function filledPressed(theme: Theme, role: FilledRole): string;\nexport function filledPressed(\n source: FilledFeedbackSource,\n role: FilledRole,\n): string | undefined;\nexport function filledPressed(\n source: FilledFeedbackSource,\n role: FilledRole,\n): string | undefined {\n return filledFeedback(source, role, \"pressed\");\n}\n" }, { "path": "packages/tokens/src/switch.ts", "target": "@ui/gpuixui/tokens/switch.ts", "type": "registry:lib", "content": "import {\n isPaintableColor,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport { contrastRatio } from \"./contrast.js\";\nimport { decorativeFloor } from \"./decorative.js\";\nimport { isControlSize, type ControlSize } from \"./scale.js\";\nimport type { SwitchColors, SwitchMetrics } from \"./theme.js\";\n\nexport const switchPaintRoles = [\"on\", \"off\", \"knob\"] as const;\n\nexport type SwitchPaintRole = (typeof switchPaintRoles)[number];\n\nexport const switchSurfaces = [\n \"background\",\n \"card\",\n \"popover\",\n \"muted\",\n] as const;\n\nexport type SwitchSurface = (typeof switchSurfaces)[number];\n\nexport type SwitchPlacement =\n | {\n readonly slot: \"knob\";\n\n readonly over: \"on\" | \"off\";\n }\n | {\n readonly slot: \"on\" | \"off\";\n\n readonly over: SwitchSurface;\n };\n\nconst switchScale: Readonly> = {\n sm: 0.8,\n md: 1,\n lg: 1.2,\n};\n\nexport const switchMetricSlots = [\n \"width\",\n \"height\",\n \"knob\",\n \"inset\",\n \"border\",\n] as const;\n\nexport type SwitchMetric = (typeof switchMetricSlots)[number];\n\nconst switchMetricRules: Readonly<\n Record\n> = {\n width: \"positive\",\n height: \"positive\",\n knob: \"positive\",\n inset: \"nonNegative\",\n border: \"nonNegative\",\n};\n\nexport interface SwitchMetricFailure {\n readonly slot: SwitchMetric;\n\n readonly value: unknown;\n\n readonly rule: \"finite\" | \"positive\" | \"nonNegative\" | \"fits\";\n\n readonly needs?: number;\n}\n\nconst drawable = (slot: SwitchMetric, value: unknown): value is number =>\n typeof value === \"number\" &&\n Number.isFinite(value) &&\n (switchMetricRules[slot] === \"positive\" ? value > 0 : value >= 0);\n\nconst boxNumber = (\n box: SwitchBoxSource,\n slot: SwitchMetric,\n): number | undefined => {\n const value: unknown = box[slot];\n return drawable(slot, value) ? value : undefined;\n};\n\nconst boxValues = (box: SwitchBoxSource): readonly SwitchMetricFailure[] =>\n switchMetricSlots.flatMap((slot): ReadonlyArray => {\n const value: unknown = box[slot];\n return drawable(slot, value)\n ? []\n : [\n {\n slot,\n value,\n rule:\n typeof value === \"number\" ? switchMetricRules[slot] : \"finite\",\n },\n ];\n });\n\nconst boxFit = (box: SwitchBoxSource): readonly SwitchMetricFailure[] => {\n const width = boxNumber(box, \"width\");\n const height = boxNumber(box, \"height\");\n const knob = boxNumber(box, \"knob\");\n const inset = boxNumber(box, \"inset\");\n\n if (\n width === undefined ||\n height === undefined ||\n knob === undefined ||\n inset === undefined\n ) {\n return [];\n }\n const inner = knob + inset * 2;\n return [\n ...(height < inner\n ? [\n {\n slot: \"height\" as const,\n value: height,\n rule: \"fits\" as const,\n needs: inner,\n },\n ]\n : []),\n ...(width <= inner\n ? [\n {\n slot: \"width\" as const,\n value: width,\n rule: \"fits\" as const,\n needs: inner + 1,\n },\n ]\n : []),\n ];\n};\n\nconst boxNumbers = (\n box: SwitchBoxSource | null | undefined,\n): SwitchMetrics | undefined => {\n if (box === undefined || box === null) {\n return undefined;\n }\n const width = boxNumber(box, \"width\");\n const height = boxNumber(box, \"height\");\n const knob = boxNumber(box, \"knob\");\n const inset = boxNumber(box, \"inset\");\n const border = boxNumber(box, \"border\");\n return width === undefined ||\n height === undefined ||\n knob === undefined ||\n inset === undefined ||\n border === undefined\n ? undefined\n : { width, height, knob, inset, border };\n};\n\nexport function switchMetricsAt(\n metrics: SwitchMetrics,\n size: ControlSize,\n): SwitchMetrics;\nexport function switchMetricsAt(\n metrics: SwitchBoxSource | null | undefined,\n size: ControlSize,\n): SwitchMetrics | undefined;\nexport function switchMetricsAt(\n metrics: SwitchBoxSource | null | undefined,\n size: ControlSize,\n): SwitchMetrics | undefined {\n const box = boxNumbers(metrics);\n if (box === undefined) {\n return undefined;\n }\n const scale = switchScale[isControlSize(size) ? size : \"md\"];\n if (scale === 1) return box;\n const height = Math.round(box.height * scale);\n const inset = Math.round(box.inset * scale);\n return {\n width: Math.round(box.width * scale),\n height,\n\n knob: Math.max(\n 0,\n Math.min(Math.round(box.knob * scale), height - inset * 2),\n ),\n inset,\n border: box.border,\n };\n}\n\nconst trackEdge = (\n paint: Partial,\n track: \"on\" | \"off\",\n): string | undefined =>\n track === \"off\"\n ? (declared(paint, \"edge\") ?? declared(paint, \"off\"))\n : declared(paint, \"on\");\n\nconst knobRatio = (\n paint: Partial,\n track: \"on\" | \"off\",\n colors: Partial,\n): number | undefined => {\n const knob =\n track === \"off\"\n ? (declared(paint, \"knobOff\") ?? declared(paint, \"knob\"))\n : declared(paint, \"knob\");\n if (track === \"on\" || declared(paint, \"off\") !== \"transparent\")\n return contrastRatio(knob, trackEdge(paint, track));\n const ratios = switchSurfaces.map((surface) =>\n contrastRatio(knob, colors[surface]),\n );\n return ratios.includes(undefined)\n ? undefined\n : Math.min(...ratios.filter((ratio) => ratio !== undefined));\n};\n\nexport const switchPlacements: readonly SwitchPlacement[] = [\n { slot: \"knob\", over: \"on\" },\n { slot: \"knob\", over: \"off\" },\n ...switchSurfaces.flatMap(\n (surface): ReadonlyArray => [\n { slot: \"on\", over: surface },\n { slot: \"off\", over: surface },\n ],\n ),\n];\n\nexport interface InvalidSwitchColor {\n readonly slot: SwitchPaintRole | OptionalSwitchSlot;\n\n readonly value: string | undefined;\n}\n\nexport type SwitchPlacementFailure = SwitchPlacement & {\n readonly ratio: number | undefined;\n\n readonly floor: number;\n};\n\nexport interface SwitchReport {\n readonly paint: readonly InvalidSwitchColor[];\n\n readonly placements: readonly SwitchPlacementFailure[];\n\n readonly metrics: readonly SwitchMetricFailure[];\n}\n\nexport type SwitchBoxSource = {\n readonly [slot in SwitchMetric]?: unknown;\n};\n\nexport interface SwitchAuditSource extends ColourSource {\n readonly switch?: Partial | null;\n\n readonly switchMetrics?: SwitchBoxSource | null;\n}\n\nconst declaredSwitch = (\n theme: Pick,\n): Partial | undefined => theme.switch ?? undefined;\n\nconst declared = (\n paint: Partial,\n slot: SwitchPaintRole | OptionalSwitchSlot,\n): string | undefined => {\n const value: unknown = paint[slot];\n return typeof value === \"string\" ? value : undefined;\n};\n\nconst optionalSwitchSlots = [\"edge\", \"knobOff\"] as const;\ntype OptionalSwitchSlot = (typeof optionalSwitchSlots)[number];\n\nconst optionalFailures = (\n paint: Partial,\n): ReadonlyArray =>\n optionalSwitchSlots.flatMap((slot): ReadonlyArray => {\n const value: unknown = paint[slot];\n return value === undefined || isPaintableColor(value)\n ? []\n : [{ slot, value: typeof value === \"string\" ? value : undefined }];\n });\n\nconst paintFailures = (\n paint: Partial,\n): ReadonlyArray => [\n ...switchPaintRoles.flatMap(\n (slot): ReadonlyArray =>\n isPaintableColor(declared(paint, slot))\n ? []\n : [{ slot, value: declared(paint, slot) }],\n ),\n ...optionalFailures(paint),\n];\n\nexport function switchFailures(\n theme: SwitchAuditSource,\n floor: number = decorativeFloor,\n): SwitchReport {\n const paint = declaredSwitch(theme);\n const metrics = switchMetricFailures(theme);\n if (paint === undefined) {\n return { paint: [], placements: [], metrics };\n }\n return {\n paint: paintFailures(paint),\n placements: switchPlacements.flatMap(\n (placement): ReadonlyArray => {\n const ratio =\n placement.slot === \"knob\"\n ? knobRatio(paint, placement.over, themeColors(theme))\n : contrastRatio(\n trackEdge(paint, placement.slot),\n themeColors(theme)[placement.over],\n );\n return ratio !== undefined && ratio >= floor\n ? []\n : [{ ...placement, ratio, floor }];\n },\n ),\n metrics,\n };\n}\n\nexport function switchMetricFailures(\n theme: Pick,\n): readonly SwitchMetricFailure[] {\n const box = theme.switchMetrics ?? undefined;\n return box === undefined ? [] : [...boxValues(box), ...boxFit(box)];\n}\n\nexport function invalidSwitchColors(\n theme: Pick,\n): readonly InvalidSwitchColor[] {\n const paint = declaredSwitch(theme);\n return paint === undefined ? [] : paintFailures(paint);\n}\n" }, { "path": "packages/tokens/src/syntax.ts", "target": "@ui/gpuixui/tokens/syntax.ts", "type": "registry:lib", "content": "import {\n namesColour,\n themeColors,\n type ColourSource,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n contrastFloorsFor,\n contrastRatio,\n type ContrastFloors,\n} from \"./contrast.js\";\nimport { themeContrastOf, themeModeOf } from \"./mode.js\";\n\nexport const syntaxRoles = [\n \"comment\",\n \"keyword\",\n \"string\",\n \"stringSpecial\",\n \"escape\",\n \"number\",\n \"boolean\",\n \"typeName\",\n \"typeBuiltin\",\n \"constructor\",\n \"function\",\n \"functionBuiltin\",\n \"macroName\",\n \"property\",\n \"constant\",\n \"variable\",\n \"variableSpecial\",\n \"parameter\",\n \"operator\",\n \"punctuation\",\n \"tag\",\n \"attribute\",\n \"label\",\n \"invalid\",\n] as const;\n\nexport type SyntaxRole = (typeof syntaxRoles)[number];\n\nexport type SyntaxColors = Readonly>;\n\nexport type StoredSyntax = Readonly>;\n\nexport const syntaxRoleFloors: Readonly<\n Record\n> = {\n comment: \"secondary\",\n keyword: \"body\",\n string: \"body\",\n stringSpecial: \"body\",\n escape: \"body\",\n number: \"body\",\n boolean: \"body\",\n typeName: \"body\",\n typeBuiltin: \"body\",\n constructor: \"body\",\n function: \"body\",\n functionBuiltin: \"body\",\n macroName: \"body\",\n property: \"body\",\n constant: \"body\",\n variable: \"body\",\n variableSpecial: \"body\",\n parameter: \"body\",\n operator: \"body\",\n punctuation: \"body\",\n tag: \"body\",\n attribute: \"body\",\n label: \"body\",\n invalid: \"body\",\n};\n\nexport const lightSyntax: SyntaxColors = {\n comment: \"#545D6C\",\n keyword: \"#3B2C8F\",\n string: \"#0E5135\",\n stringSpecial: \"#0A3A26\",\n escape: \"#4B3100\",\n number: \"#2A1B00\",\n boolean: \"#173A88\",\n typeName: \"#2E2370\",\n typeBuiltin: \"#1C1547\",\n constructor: \"#152F6B\",\n function: \"#0C1D42\",\n functionBuiltin: \"#152F6B\",\n macroName: \"#5C1619\",\n property: \"#173A88\",\n constant: \"#3A0B0D\",\n variable: \"#191D25\",\n variableSpecial: \"#5C1619\",\n parameter: \"#3D4552\",\n operator: \"#2A303B\",\n punctuation: \"#3D4552\",\n tag: \"#7E1D21\",\n attribute: \"#4B3100\",\n label: \"#0B0D11\",\n invalid: \"#3A0B0D\",\n};\n\nexport const darkSyntax: SyntaxColors = {\n comment: \"#A1A9B7\",\n keyword: \"#A7A9FF\",\n string: \"#6FE0A3\",\n stringSpecial: \"#A8F0C6\",\n escape: \"#FFDE8A\",\n number: \"#FFC94D\",\n boolean: \"#9FBEFF\",\n typeName: \"#C7CBFF\",\n typeBuiltin: \"#E0E3FF\",\n constructor: \"#C5D8FF\",\n function: \"#DEE9FF\",\n functionBuiltin: \"#C5D8FF\",\n macroName: \"#FF9E9E\",\n property: \"#9FBEFF\",\n constant: \"#FFC6C6\",\n variable: \"#E1E5EC\",\n variableSpecial: \"#FFC6C6\",\n parameter: \"#CBD1DB\",\n operator: \"#E1E5EC\",\n punctuation: \"#CBD1DB\",\n tag: \"#FF9E9E\",\n attribute: \"#FFDE8A\",\n label: \"#EEF1F5\",\n invalid: \"#FF9E9E\",\n};\n\nexport const highContrastLightSyntax: SyntaxColors = {\n ...lightSyntax,\n comment: \"#3D4552\",\n};\n\nexport const highContrastDarkSyntax: SyntaxColors = {\n ...darkSyntax,\n comment: \"#CBD1DB\",\n};\n\nexport const syntaxSurfaces = [\"input\", \"background\"] as const;\n\nexport interface SyntaxSource extends ColourSource {\n readonly mode?: unknown;\n\n readonly contrast?: unknown;\n\n readonly syntax?: StoredSyntax | null;\n}\n\nconst shippedSyntax = (theme: SyntaxSource): SyntaxColors => {\n const mode = themeModeOf(theme);\n if (themeContrastOf(theme) === \"high\") {\n return mode === \"dark\" ? highContrastDarkSyntax : highContrastLightSyntax;\n }\n return mode === \"dark\" ? darkSyntax : lightSyntax;\n};\n\nconst isCompleteSyntax = (palette: StoredSyntax): palette is SyntaxColors =>\n syntaxRoles.every((role) => namesColour(palette[role]));\n\nexport function syntaxPalette(\n stored: StoredSyntax,\n fallback: SyntaxColors,\n): SyntaxColors {\n if (isCompleteSyntax(stored)) {\n return stored;\n }\n return syntaxRoles.reduce((palette, role) => {\n const value = stored[role];\n return namesColour(value) ? { ...palette, [role]: value } : palette;\n }, fallback);\n}\n\nexport function syntaxColors(theme: SyntaxSource): SyntaxColors {\n const table = shippedSyntax(theme);\n return theme.syntax == null ? table : syntaxPalette(theme.syntax, table);\n}\n\nexport interface SyntaxFailure {\n readonly role: SyntaxRole;\n\n readonly surface: keyof ThemeColors;\n\n readonly ratio: number | undefined;\n\n readonly floor: number;\n}\n\nconst readPalette = (theme: SyntaxAuditSource): StoredSyntax =>\n theme.syntax ??\n syntaxColors({\n mode: theme.mode,\n contrast: theme.contrast,\n colors: theme.colors,\n });\n\nexport interface SyntaxAuditSource extends ColourSource {\n readonly mode?: unknown;\n\n readonly contrast?: unknown;\n\n readonly syntax?: Readonly> | null;\n}\n\nconst tokenColour = (\n palette: Readonly>,\n role: SyntaxRole,\n): string | undefined => {\n const value = palette[role];\n return typeof value === \"string\" ? value : undefined;\n};\n\nexport function syntaxFailures(\n theme: SyntaxAuditSource,\n floors: ContrastFloors = contrastFloorsFor(theme),\n): readonly SyntaxFailure[] {\n const palette = readPalette(theme);\n const colors = themeColors(theme);\n return syntaxRoles.flatMap((role) =>\n syntaxSurfaces.flatMap((surface): ReadonlyArray => {\n const floor = floors[syntaxRoleFloors[role]];\n const ratio = contrastRatio(tokenColour(palette, role), colors[surface]);\n return ratio !== undefined && ratio >= floor\n ? []\n : [{ role, surface, ratio, floor }];\n }),\n );\n}\n" }, { "path": "packages/tokens/src/system-theme.ts", "target": "@ui/gpuixui/tokens/system-theme.ts", "type": "registry:lib", "content": "import {\n alpha,\n alphaOf,\n namesColour,\n themeColors,\n type ThemeColors,\n} from \"./color.js\";\nimport { contrastRatio } from \"./contrast.js\";\nimport { pageMode } from \"./luminance.js\";\nimport {\n isThemeMode,\n themeContrastOf,\n themeModeOf,\n type ThemeMode,\n} from \"./mode.js\";\nimport { extendTheme, getTheme, type Theme } from \"./theme.js\";\n\nexport interface SystemPalette {\n readonly mode?: unknown;\n\n readonly background?: string;\n\n readonly foreground?: string;\n\n readonly accent?: string;\n\n readonly muted?: string;\n\n readonly border?: string;\n\n readonly danger?: string;\n\n readonly selection?: string;\n}\n\nconst baseRoles = (base: Theme): ThemeColors => ({\n ...getTheme(themeModeOf(base), themeContrastOf(base)).colors,\n ...themeColors(base),\n});\n\nconst inkOn = (\n fill: string,\n inks: ReadonlyArray,\n roles: ThemeColors,\n): string => {\n const measured = inks.filter(namesColour);\n const candidates =\n measured.length > 0 ? measured : [roles.foreground, roles.background];\n return candidates.reduce((best, candidate) =>\n (contrastRatio(candidate, fill) ?? 0) > (contrastRatio(best, fill) ?? 0)\n ? candidate\n : best,\n );\n};\n\nconst colour = (value: string | undefined): string | undefined =>\n namesColour(value) ? value : undefined;\n\nexport function paletteMode(palette: SystemPalette): ThemeMode | undefined {\n const { background, mode } = palette;\n return isThemeMode(mode) ? mode : pageMode(background);\n}\n\nconst selectionWash = (selection: string, roles: ThemeColors): string =>\n alphaOf(selection) < 1\n ? selection\n : alpha(selection, alphaOf(roles.selection));\n\nexport function paletteToTokens(\n palette: SystemPalette,\n base: Theme = getTheme(paletteMode(palette) ?? \"light\"),\n): Theme {\n const roles = baseRoles(base);\n\n const background = colour(palette.background);\n const foreground = colour(palette.foreground);\n const muted = colour(palette.muted);\n const border = colour(palette.border);\n const accent = colour(palette.accent);\n const danger = colour(palette.danger);\n const selection = colour(palette.selection);\n\n const inks = [foreground, background] as const;\n const colors: Partial = {\n ...(background === undefined ? {} : { background }),\n ...(foreground === undefined ? {} : { foreground }),\n ...(muted === undefined\n ? {}\n : {\n muted,\n mutedForeground: inkOn(muted, inks, roles),\n }),\n ...(border === undefined ? {} : { border }),\n ...(accent === undefined\n ? {}\n : {\n primary: accent,\n primaryForeground: inkOn(accent, inks, roles),\n }),\n ...(danger === undefined\n ? {}\n : {\n destructive: danger,\n destructiveForeground: inkOn(danger, inks, roles),\n }),\n ...(selection === undefined\n ? {}\n : { selection: selectionWash(selection, roles) }),\n };\n return extendTheme(base, { colors });\n}\n\nexport interface SystemThemeTimer {\n readonly poll: (every: number, tick: () => void) => () => void;\n}\n\nexport const intervalTimer: SystemThemeTimer = {\n poll: (every, tick) => {\n const handle = setInterval(tick, every);\n return () => clearInterval(handle);\n },\n};\n\nexport const systemThemePollMs = 2000;\n\nconst maxTimerMs = 2 ** 31 - 1;\n\nconst paceOf = (every: number): number =>\n Number.isFinite(every) && every >= 1 && every <= maxTimerMs\n ? every\n : systemThemePollMs;\n\nexport interface WatchSystemThemeOptions {\n readonly read: () => SystemPalette | undefined;\n\n readonly base: Theme;\n\n readonly baseFor?: (palette: SystemPalette) => Theme;\n\n readonly onChange: (theme: Theme) => void;\n\n readonly every: number;\n\n readonly timer?: SystemThemeTimer;\n}\n\nconst paletteFields = [\n \"mode\",\n \"background\",\n \"foreground\",\n \"accent\",\n \"muted\",\n \"border\",\n \"danger\",\n \"selection\",\n] as const satisfies readonly (keyof SystemPalette)[];\n\nconst samePalette = (\n left: SystemPalette | undefined,\n right: SystemPalette | undefined,\n): boolean =>\n left === undefined || right === undefined\n ? left === right\n : paletteFields.every((field) => left[field] === right[field]);\n\nconst snapshot = (palette: SystemPalette): SystemPalette =>\n Object.assign({}, palette);\n\nexport function watchSystemTheme(options: WatchSystemThemeOptions): () => void {\n const { read, base, baseFor, onChange, timer = intervalTimer } = options;\n\n const every = paceOf(options.every);\n let delivered = false;\n let applied: SystemPalette | undefined;\n const tick = (): void => {\n const palette = read();\n if (delivered && samePalette(applied, palette)) {\n return;\n }\n onChange(\n palette === undefined\n ? base\n : paletteToTokens(palette, baseFor?.(palette) ?? base),\n );\n\n applied = palette === undefined ? undefined : snapshot(palette);\n delivered = true;\n };\n tick();\n return timer.poll(every, tick);\n}\n" }, { "path": "packages/tokens/src/theme.ts", "target": "@ui/gpuixui/tokens/theme.ts", "type": "registry:lib", "content": "import {\n colorRoles,\n darkColors,\n highContrastDarkColors,\n highContrastLightColors,\n lightColors,\n namesColour,\n themeColors,\n type ThemeColors,\n} from \"./color.js\";\nimport {\n darkElevation,\n elevationLevels,\n elevationWithTint,\n highContrastDarkElevation,\n highContrastLightElevation,\n lightElevation,\n type BoxShadow,\n type Elevation,\n type ElevationLevel,\n} from \"./elevation.js\";\nimport { isStepRecord } from \"./missing.js\";\nimport {\n isPlatformName,\n platformNames,\n platformStyles,\n type PlatformName,\n type PlatformStyleSource,\n} from \"./platforms.js\";\nimport {\n materialNames,\n type MaterialFills,\n type WindowBackground,\n} from \"./materials.js\";\nimport {\n borderWidth,\n controlSizes,\n defaultDensity,\n densityNames,\n densityPresets,\n iconSize,\n iconSizes,\n isDensityName,\n radius,\n radiusSteps,\n spacing,\n spacingSteps,\n type BorderWidth,\n type ControlSize,\n type Density,\n type DensityName,\n type IconSize,\n type Radius,\n type Spacing,\n} from \"./scale.js\";\nimport {\n seriesColors,\n seriesPalette,\n type SeriesColors,\n type StoredSeries,\n} from \"./series.js\";\nimport {\n syntaxColors,\n syntaxPalette,\n syntaxRoles,\n type StoredSyntax,\n type SyntaxColors,\n} from \"./syntax.js\";\nimport {\n textRoles,\n typography,\n type TextStyle,\n type Typography,\n} from \"./typography.js\";\n\nimport {\n isThemeContrast,\n isThemeMode,\n themeContrastOf,\n themeContrasts,\n themeModeOf,\n themeModes,\n type ThemeContrast,\n type ThemeMode,\n} from \"./mode.js\";\n\nexport {\n isThemeContrast,\n isThemeMode,\n themeContrastOf,\n themeContrasts,\n themeModeOf,\n themeModes,\n type ThemeContrast,\n type ThemeMode,\n} from \"./mode.js\";\n\nexport interface Theme {\n readonly name: string;\n\n readonly mode: ThemeMode;\n\n readonly contrast?: ThemeContrast;\n\n readonly colors: ThemeColors;\n\n readonly typography: Typography;\n\n readonly spacing: Spacing;\n\n readonly radius: Radius;\n\n readonly density: Density;\n\n readonly elevation: Elevation;\n\n readonly borderWidth: BorderWidth;\n\n readonly iconSize: IconSize;\n\n readonly series?: SeriesColors;\n\n readonly syntax?: SyntaxColors;\n\n readonly switch?: SwitchColors;\n\n readonly switchMetrics?: SwitchMetrics;\n\n readonly materials?: MaterialFills;\n\n readonly window?: WindowBackground;\n\n readonly reduceTransparency?: boolean;\n\n readonly interaction?: Interaction;\n}\n\nexport type Interaction = \"pointer\" | \"appkit\";\n\nexport interface SwitchColors {\n readonly on: string;\n\n readonly off: string;\n\n readonly knob: string;\n\n readonly knobOff?: string;\n\n readonly edge?: string;\n}\n\nexport interface SwitchMetrics {\n readonly width: number;\n\n readonly height: number;\n\n readonly knob: number;\n\n readonly inset: number;\n\n readonly border: number;\n}\n\nexport interface TypographyOverrides {\n readonly sans?: string;\n readonly mono?: string;\n readonly display?: Partial;\n readonly h1?: Partial;\n readonly h2?: Partial;\n readonly h3?: Partial;\n readonly body?: Partial;\n readonly bodyStrong?: Partial;\n readonly label?: Partial;\n readonly caption?: Partial;\n readonly code?: Partial;\n readonly codeBlock?: Partial;\n}\n\nexport interface DensityOverrides {\n readonly controlHeight?: Partial>;\n\n readonly controlPaddingX?: Partial>;\n\n readonly rowHeight?: number;\n}\n\nexport interface ThemeOverrides {\n readonly name?: string;\n\n readonly colors?: Partial;\n\n readonly typography?: TypographyOverrides;\n\n readonly spacing?: Partial;\n\n readonly radius?: Partial;\n\n readonly density?: DensityName | Density | DensityOverrides;\n\n readonly elevation?: Partial;\n\n readonly borderWidth?: Partial;\n\n readonly iconSize?: Partial;\n\n readonly series?: SeriesColors;\n\n readonly syntax?: Partial;\n\n readonly switch?: SwitchColors;\n\n readonly switchMetrics?: SwitchMetrics;\n\n readonly materials?: MaterialFills;\n\n readonly window?: WindowBackground;\n\n readonly reduceTransparency?: boolean;\n\n readonly interaction?: Interaction;\n}\n\nexport type Stored =\n T extends ReadonlyArray\n ? T | null\n : T extends object\n ? { readonly [K in keyof T]?: Stored } | null\n : T | null;\n\ntype WholeGroup = \"switch\" | \"switchMetrics\" | \"materials\";\n\nexport type ThemeOverridesSource = {\n readonly name?: unknown;\n} & {\n readonly [K in Exclude]?: K extends WholeGroup\n ? ThemeOverrides[K] | null\n : K extends \"syntax\"\n ? StoredSyntax | null\n : K extends \"series\"\n ? StoredSeries | null\n : Stored;\n};\n\ntype FixedThemeKey = \"mode\" | \"contrast\";\n\ntype EveryGroupOverridable =\n Exclude<\n Exclude,\n keyof ThemeOverrides\n > extends never\n ? true\n : [\n \"a theme group has no override\",\n Exclude, keyof ThemeOverrides>,\n ];\n\nconst groupsOverridable: EveryGroupOverridable = true;\n\nvoid groupsOverridable;\n\nexport interface ThemeConfig extends ThemeOverrides {\n readonly mode: ThemeMode;\n\n readonly contrast?: ThemeContrast;\n}\n\nconst overlay = (\n base: T,\n overrides: Stored> | null | undefined,\n): T => {\n if (overrides === undefined || overrides === null) {\n return base;\n }\n const defined = Object.entries(overrides).filter(\n ([, value]) => value !== undefined && value !== null,\n );\n return { ...base, ...Object.fromEntries(defined) };\n};\n\nconst namedRoles = (\n colors: Stored> | null | undefined,\n): Stored> | null | undefined =>\n colors === null || colors === undefined\n ? colors\n : colorRoles.reduce>((named, role) => {\n const value = colors[role];\n return typeof value === \"string\" && value.trim() !== \"\"\n ? { ...named, [role]: value }\n : named;\n }, {});\n\nconst nameOf = (value: unknown): string | undefined =>\n typeof value === \"string\" && value.trim() !== \"\" ? value : undefined;\n\nconst mergeTypography = (\n base: Typography,\n override: Stored | null | undefined,\n): Typography => {\n if (override === undefined || override === null) {\n return base;\n }\n return {\n sans: nameOf(override.sans) ?? base.sans,\n mono: nameOf(override.mono) ?? base.mono,\n display: overlay(base.display, override.display),\n h1: overlay(base.h1, override.h1),\n h2: overlay(base.h2, override.h2),\n h3: overlay(base.h3, override.h3),\n body: overlay(base.body, override.body),\n bodyStrong: overlay(base.bodyStrong, override.bodyStrong),\n label: overlay(base.label, override.label),\n caption: overlay(base.caption, override.caption),\n code: overlay(base.code, override.code),\n codeBlock: overlay(base.codeBlock, override.codeBlock),\n };\n};\n\nconst isDensityBox = (value: {\n readonly name?: unknown;\n readonly controlHeight?: Partial> | null;\n readonly controlPaddingX?: Partial> | null;\n readonly rowHeight?: unknown;\n}): value is Density =>\n isDensityName(value.name) &&\n typeof value.rowHeight === \"number\" &&\n controlSizes.every(\n (size) =>\n typeof value.controlHeight?.[size] === \"number\" &&\n typeof value.controlPaddingX?.[size] === \"number\",\n );\n\nconst mergeDensity = (\n base: Density,\n override: Stored | null | undefined,\n): Density => {\n if (override === undefined || override === null) {\n return base;\n }\n if (typeof override === \"string\") {\n if (override.trim() === \"\") {\n return base;\n }\n\n if (!isDensityName(override)) {\n throw new Error(\n `\\`${override}\\` is not a density preset: ${densityNames.join(\", \")} are the presets this release ships. A restored or configured choice is narrowed with \\`isDensityName\\` before it reaches a theme.`,\n );\n }\n return densityPresets[override];\n }\n\n if (isDensityBox(override)) {\n return override;\n }\n return {\n name: base.name,\n controlHeight: overlay(base.controlHeight, override.controlHeight),\n controlPaddingX: overlay(base.controlPaddingX, override.controlPaddingX),\n rowHeight: override.rowHeight ?? base.rowHeight,\n };\n};\n\nexport const lightTheme: Theme = {\n name: \"Light\",\n mode: \"light\",\n contrast: \"default\",\n colors: lightColors,\n typography,\n spacing,\n radius,\n density: defaultDensity,\n elevation: lightElevation,\n borderWidth,\n iconSize,\n};\n\nexport const darkTheme: Theme = {\n name: \"Dark\",\n mode: \"dark\",\n contrast: \"default\",\n colors: darkColors,\n typography,\n spacing,\n radius,\n density: defaultDensity,\n elevation: darkElevation,\n borderWidth,\n iconSize,\n};\n\nexport const themes: Readonly> = {\n light: lightTheme,\n dark: darkTheme,\n};\n\nexport const highContrastLightTheme: Theme = {\n name: \"High contrast light\",\n mode: \"light\",\n contrast: \"high\",\n colors: highContrastLightColors,\n typography,\n spacing,\n radius,\n density: defaultDensity,\n elevation: highContrastLightElevation,\n borderWidth,\n iconSize,\n};\n\nexport const highContrastDarkTheme: Theme = {\n name: \"High contrast dark\",\n mode: \"dark\",\n contrast: \"high\",\n colors: highContrastDarkColors,\n typography,\n spacing,\n radius,\n density: defaultDensity,\n elevation: highContrastDarkElevation,\n borderWidth,\n iconSize,\n};\n\nexport const highContrastThemes: Readonly> = {\n light: highContrastLightTheme,\n dark: highContrastDarkTheme,\n};\n\nexport function getTheme(\n mode: ThemeMode,\n contrast: ThemeContrast = \"default\",\n): Theme {\n if (!isThemeMode(mode)) {\n throw new Error(\n `\\`${mode}\\` is not a theme mode: ${themeModes.join(\", \")} are the modes this release ships. A restored or configured choice is narrowed with \\`isThemeMode\\` before it reaches a theme.`,\n );\n }\n if (!isThemeContrast(contrast)) {\n throw new Error(\n `\\`${contrast}\\` is not a contrast variant: ${themeContrasts.join(\", \")} are the variants this release ships. A restored or configured choice is narrowed with \\`isThemeContrast\\` before it reaches a theme.`,\n );\n }\n return contrast === \"high\" ? highContrastThemes[mode] : themes[mode];\n}\n\nexport function extendTheme(\n base: Theme,\n overrides: ThemeOverridesSource,\n): Theme {\n const identity = getTheme(themeModeOf(base), themeContrastOf(base));\n const colors = overlay(base.colors, namedRoles(overrides.colors));\n\n const elevation =\n overrides.colors?.shadow === undefined || overrides.colors.shadow === null\n ? base.elevation\n : elevationWithTint(base.elevation, colors.shadow);\n return {\n name: nameOf(overrides.name) ?? nameOf(base.name) ?? \"Theme\",\n mode: base.mode,\n contrast: base.contrast,\n colors,\n typography: mergeTypography(\n base.typography ?? identity.typography,\n overrides.typography,\n ),\n spacing: overlay(base.spacing, overrides.spacing),\n radius: overlay(base.radius, overrides.radius),\n density: mergeDensity(base.density ?? identity.density, overrides.density),\n elevation: overlay(elevation, overrides.elevation),\n borderWidth: overlay(base.borderWidth, overrides.borderWidth),\n iconSize: overlay(base.iconSize, overrides.iconSize),\n series:\n overrides.series == null\n ? base.series\n : seriesPalette(overrides.series, seriesColors(base)),\n\n syntax:\n overrides.syntax == null\n ? base.syntax\n : syntaxPalette(overrides.syntax, syntaxColors(base)),\n\n switch: overrides.switch ?? base.switch,\n switchMetrics: overrides.switchMetrics ?? base.switchMetrics,\n materials: overrides.materials ?? base.materials,\n window: overrides.window ?? base.window,\n reduceTransparency: overrides.reduceTransparency ?? base.reduceTransparency,\n interaction: overrides.interaction ?? base.interaction,\n };\n}\n\nconst borderWidthSteps = [\n \"thin\",\n \"strong\",\n] as const satisfies readonly (keyof BorderWidth)[];\n\ntype EveryBorderWidthStepListed =\n Exclude extends never\n ? true\n : [\n \"a border width step is missing from the list\",\n Exclude,\n ];\n\nconst borderWidthIndex: EveryBorderWidthStepListed<\n (typeof borderWidthSteps)[number]\n> = true;\n\nvoid borderWidthIndex;\n\nconst isEmptyGroup = (group: object): boolean =>\n Object.keys(group).length === 0;\n\nconst storedNumber = (group: unknown, key: string): number | undefined => {\n if (!isStepRecord(group)) return undefined;\n const value = group[key];\n return typeof value === \"number\" ? value : undefined;\n};\n\nconst stepOverrides = (\n steps: readonly Step[],\n theme: unknown,\n base: Readonly>,\n): Partial> | undefined => {\n const moved = steps.reduce>>(\n (overrides, step) => {\n const value = storedNumber(theme, step);\n return value === undefined || value === base[step]\n ? overrides\n : { ...overrides, [step]: value };\n },\n {},\n );\n return isEmptyGroup(moved) ? undefined : moved;\n};\n\nconst textFields = (\n role: unknown,\n base: TextStyle,\n): Partial | undefined => {\n const size = storedNumber(role, \"fontSize\");\n const leading = storedNumber(role, \"lineHeight\");\n const weight = storedNumber(role, \"fontWeight\");\n const moved: Partial = {\n ...(size === undefined || size === base.fontSize ? {} : { fontSize: size }),\n ...(leading === undefined || leading === base.lineHeight\n ? {}\n : { lineHeight: leading }),\n ...(weight === undefined || weight === base.fontWeight\n ? {}\n : { fontWeight: weight }),\n };\n return isEmptyGroup(moved) ? undefined : moved;\n};\n\nconst typographyOverrides = (\n theme: unknown,\n base: Typography,\n): TypographyOverrides | undefined => {\n const source = isStepRecord(theme) ? theme : {};\n const sans = nameOf(source.sans);\n const mono = nameOf(source.mono);\n const roles = textRoles.reduce(\n (overrides, role) => {\n const moved = textFields(source[role], base[role]);\n return moved === undefined ? overrides : { ...overrides, [role]: moved };\n },\n {\n ...(sans === undefined || sans === base.sans ? {} : { sans }),\n ...(mono === undefined || mono === base.mono ? {} : { mono }),\n },\n );\n return isEmptyGroup(roles) ? undefined : roles;\n};\n\nconst isBoxShadow = (value: unknown): value is BoxShadow =>\n isStepRecord(value) &&\n typeof value.offsetX === \"number\" &&\n typeof value.offsetY === \"number\" &&\n typeof value.blurRadius === \"number\" &&\n typeof value.spreadRadius === \"number\" &&\n typeof value.color === \"string\";\n\nconst shadowsAt = (\n elevation: unknown,\n level: ElevationLevel,\n): readonly BoxShadow[] | undefined => {\n if (!isStepRecord(elevation)) return undefined;\n const value = elevation[level];\n if (!Array.isArray(value)) return undefined;\n const shadows = value.filter(isBoxShadow);\n return shadows.length === value.length ? shadows : undefined;\n};\n\nconst sameShadows = (\n left: readonly BoxShadow[],\n right: readonly BoxShadow[],\n): boolean =>\n left.length === right.length &&\n left.every((shadow, index) => {\n const other = right[index];\n return (\n other !== undefined &&\n shadow.offsetX === other.offsetX &&\n shadow.offsetY === other.offsetY &&\n shadow.blurRadius === other.blurRadius &&\n shadow.spreadRadius === other.spreadRadius &&\n shadow.color === other.color\n );\n });\n\nconst densityOverrides = (\n density: unknown,\n base: Density,\n): ThemeOverrides[\"density\"] | undefined => {\n if (typeof density === \"string\") {\n return isDensityName(density) && density !== base.name\n ? density\n : undefined;\n }\n if (!isStepRecord(density)) {\n return undefined;\n }\n\n if (isDensityBox(density) && density.name !== base.name) {\n return density;\n }\n const controlHeight = stepOverrides(\n controlSizes,\n density.controlHeight,\n base.controlHeight,\n );\n const controlPaddingX = stepOverrides(\n controlSizes,\n density.controlPaddingX,\n base.controlPaddingX,\n );\n const rowHeight = storedNumber(density, \"rowHeight\");\n const moved: DensityOverrides = {\n ...(controlHeight === undefined ? {} : { controlHeight }),\n ...(controlPaddingX === undefined ? {} : { controlPaddingX }),\n ...(rowHeight === undefined || rowHeight === base.rowHeight\n ? {}\n : { rowHeight }),\n };\n return isEmptyGroup(moved) ? undefined : moved;\n};\n\nconst syntaxOverrides = (\n theme: StoredTheme,\n base: Theme,\n): Partial | undefined => {\n const carried = theme.syntax;\n if (!isStepRecord(carried)) {\n return undefined;\n }\n\n const table = syntaxColors(base);\n const moved = syntaxRoles.reduce>((tokens, role) => {\n const value = carried[role];\n return namesColour(value) && value !== table[role]\n ? { ...tokens, [role]: value }\n : tokens;\n }, {});\n return isEmptyGroup(moved) ? undefined : moved;\n};\n\nconst sameSeries = (\n left: StoredSeries,\n right: SeriesColors | undefined,\n): boolean =>\n right !== undefined && right.every((colour, index) => left[index] === colour);\n\nconst sameSwitch = (\n left: SwitchColors,\n right: SwitchColors | undefined,\n): boolean =>\n right !== undefined &&\n left.on === right.on &&\n left.off === right.off &&\n left.knob === right.knob &&\n left.knobOff === right.knobOff &&\n left.edge === right.edge;\n\nconst sameMetrics = (\n left: SwitchMetrics,\n right: SwitchMetrics | undefined,\n): boolean =>\n right !== undefined &&\n left.width === right.width &&\n left.height === right.height &&\n left.knob === right.knob &&\n left.inset === right.inset &&\n left.border === right.border;\n\nexport function themeOverrides(\n theme: StoredTheme,\n base: Theme,\n): ThemeOverrides {\n const mode = themeModeOf(theme);\n const contrast = themeContrastOf(theme);\n if (mode !== themeModeOf(base) || contrast !== themeContrastOf(base)) {\n throw new Error(\n `\\`${mode} · ${contrast}\\` is not an edit of \\`${themeModeOf(base)} · ${themeContrastOf(base)}\\`: a mode and a contrast variant are what a theme's numbers mean, so no override can move them. Start from the theme of the same mode with \\`getTheme\\`, or rebuild a stored theme from its own labels with \\`restoreTheme\\`.`,\n );\n }\n\n const colours = themeColors(theme);\n const colors = colorRoles.reduce>((overrides, role) => {\n const value = colours[role];\n return value === undefined || value === base.colors[role]\n ? overrides\n : { ...overrides, [role]: value };\n }, {});\n\n const shadowMoved =\n colours.shadow !== undefined && colours.shadow !== base.colors.shadow;\n const elevation = elevationLevels.reduce>(\n (overrides, level) => {\n const shadows = shadowsAt(theme.elevation, level);\n return shadows === undefined ||\n (!shadowMoved && sameShadows(shadows, base.elevation[level]))\n ? overrides\n : { ...overrides, [level]: shadows };\n },\n {},\n );\n const spacing = stepOverrides(spacingSteps, theme.spacing, base.spacing);\n const radius = stepOverrides(radiusSteps, theme.radius, base.radius);\n const borderWidth = stepOverrides(\n borderWidthSteps,\n theme.borderWidth,\n base.borderWidth,\n );\n const iconSize = stepOverrides(iconSizes, theme.iconSize, base.iconSize);\n const authoredName = nameOf(theme.name);\n const name =\n authoredName === undefined || authoredName === base.name\n ? undefined\n : authoredName;\n const typography = typographyOverrides(theme.typography, base.typography);\n const density = densityOverrides(theme.density, base.density);\n const syntax = syntaxOverrides(theme, base);\n const baseSeries = seriesColors(base);\n const carried =\n theme.series == null ? undefined : seriesPalette(theme.series, baseSeries);\n const series =\n carried === undefined || sameSeries(carried, baseSeries)\n ? undefined\n : carried;\n const toggle =\n theme.switch == null || sameSwitch(theme.switch, base.switch)\n ? undefined\n : theme.switch;\n const metrics =\n theme.switchMetrics == null ||\n sameMetrics(theme.switchMetrics, base.switchMetrics)\n ? undefined\n : theme.switchMetrics;\n const materials =\n theme.materials == null ||\n materialNames.every(\n (material) => theme.materials?.[material] === base.materials?.[material],\n )\n ? undefined\n : theme.materials;\n const window =\n theme.window == null || theme.window === base.window\n ? undefined\n : theme.window;\n const reduceTransparency =\n theme.reduceTransparency == null ||\n theme.reduceTransparency === base.reduceTransparency\n ? undefined\n : theme.reduceTransparency;\n const interaction =\n theme.interaction == null || theme.interaction === base.interaction\n ? undefined\n : theme.interaction;\n const diff = {\n ...(name === undefined ? {} : { name }),\n ...(isEmptyGroup(colors) ? {} : { colors }),\n ...(typography === undefined ? {} : { typography }),\n ...(spacing === undefined ? {} : { spacing }),\n ...(radius === undefined ? {} : { radius }),\n ...(density === undefined ? {} : { density }),\n ...(isEmptyGroup(elevation) ? {} : { elevation }),\n ...(borderWidth === undefined ? {} : { borderWidth }),\n ...(iconSize === undefined ? {} : { iconSize }),\n ...(series === undefined ? {} : { series }),\n ...(syntax === undefined ? {} : { syntax }),\n ...(toggle === undefined ? {} : { switch: toggle }),\n ...(metrics === undefined ? {} : { switchMetrics: metrics }),\n ...(materials === undefined ? {} : { materials }),\n ...(window === undefined ? {} : { window }),\n ...(reduceTransparency === undefined ? {} : { reduceTransparency }),\n ...(interaction === undefined ? {} : { interaction }),\n };\n\n const named: EveryDiffGroupListed = true;\n void named;\n return diff;\n}\n\ntype EveryDiffGroupListed =\n Exclude extends never\n ? true\n : [\n \"a theme group is missing from the diff\",\n Exclude,\n ];\n\nexport type StoredTheme = ThemeOverridesSource & {\n readonly mode?: unknown;\n\n readonly contrast?: unknown;\n};\n\nexport function restoreTheme(stored: StoredTheme | null | undefined): Theme {\n if (stored === null || stored === undefined) {\n return lightTheme;\n }\n return extendTheme(\n getTheme(themeModeOf(stored), themeContrastOf(stored)),\n stored,\n );\n}\n\nexport function createTheme(config: ThemeConfig): Theme {\n const { mode, contrast = \"default\", ...overrides } = config;\n return extendTheme(getTheme(mode, contrast), overrides);\n}\n\nconst styleContrastOf = (style: {\n readonly contrast?: unknown;\n}): ThemeContrast =>\n isThemeContrast(style.contrast) ? style.contrast : \"default\";\n\nconst styleName = (\n base: Theme,\n style: { readonly label?: unknown },\n): string => {\n const own = nameOf(base.name) ?? \"Theme\";\n const label = nameOf(style.label) ?? \"\";\n return label === \"\" ? own : `${own} · ${label}`;\n};\n\nconst modeOf = (\n group: Partial> | null | undefined,\n mode: ThemeMode,\n): T | undefined => group?.[mode] ?? undefined;\n\nexport interface PlatformStyleOptions {\n readonly keepPalette?: boolean;\n}\n\nexport function applyStyle(\n base: Theme,\n style: PlatformStyleSource,\n options: PlatformStyleOptions = {},\n): Theme {\n const contrast = themeContrastOf(base);\n\n const applies = contrast === styleContrastOf(style);\n const painted = applies && options.keepPalette !== true;\n const mode = themeModeOf(base);\n const themed = extendTheme(base, {\n name: styleName(base, style),\n typography: {\n ...style.type,\n sans: nameOf(style.sans),\n mono: nameOf(style.mono),\n },\n radius: style.radius ?? undefined,\n density: style.density ?? undefined,\n colors: painted ? modeOf(style.colors, mode) : undefined,\n series: painted ? modeOf(style.series, mode) : undefined,\n syntax: painted ? modeOf(style.syntax, mode) : undefined,\n });\n\n return {\n ...themed,\n switch: painted ? (modeOf(style.switch, mode) ?? undefined) : base.switch,\n switchMetrics: painted\n ? (style.switchMetrics ?? undefined)\n : base.switchMetrics,\n\n materials: painted ? modeOf(style.materials, mode) : base.materials,\n window: painted\n ? style.window === \"blurred\"\n ? \"blurred\"\n : undefined\n : base.window,\n interaction: applies\n ? style.interaction === \"appkit\"\n ? \"appkit\"\n : undefined\n : base.interaction,\n };\n}\n\nexport function platformTheme(\n base: Theme,\n platform: PlatformName,\n options: PlatformStyleOptions = {},\n): Theme {\n if (!isPlatformName(platform)) {\n throw new Error(\n `\\`${platform}\\` is not a platform style: ${platformNames.join(\", \")} are the styles this release ships. A restored or configured choice is narrowed with \\`isPlatformName\\` before it reaches a theme.`,\n );\n }\n return applyStyle(base, platformStyles[platform], options);\n}\n" }, { "path": "packages/tokens/src/typography.ts", "target": "@ui/gpuixui/tokens/typography.ts", "type": "registry:lib", "content": "import { systemMonoFamily, systemUiFont } from \"./platforms.js\";\n\nexport type FontWeight = number;\n\nexport interface TextStyle {\n readonly fontSize: number;\n\n readonly lineHeight: number;\n\n readonly fontWeight: FontWeight;\n}\n\nexport interface Typography {\n readonly sans: string;\n\n readonly mono: string;\n\n readonly display: TextStyle;\n\n readonly h1: TextStyle;\n\n readonly h2: TextStyle;\n\n readonly h3: TextStyle;\n\n readonly body: TextStyle;\n\n readonly bodyStrong: TextStyle;\n\n readonly label: TextStyle;\n\n readonly caption: TextStyle;\n\n readonly code: TextStyle;\n\n readonly codeBlock: TextStyle;\n}\n\nexport type TextRole = Exclude;\n\nexport const textRoles = [\n \"display\",\n \"h1\",\n \"h2\",\n \"h3\",\n \"body\",\n \"bodyStrong\",\n \"label\",\n \"caption\",\n \"code\",\n \"codeBlock\",\n] as const satisfies readonly TextRole[];\n\ntype EveryRoleListed =\n Exclude extends never\n ? true\n : [\"a text role is missing from the index\", Exclude];\n\nconst roleIndex: EveryRoleListed<(typeof textRoles)[number]> = true;\n\nvoid roleIndex;\n\nexport const isTextRole = (value: unknown): value is TextRole =>\n textRoles.some((role) => role === value);\n\nconst text = (\n fontSize: number,\n lineHeight: number,\n fontWeight: FontWeight,\n): TextStyle => ({ fontSize, lineHeight, fontWeight });\n\nexport const typography: Typography = {\n sans: systemUiFont,\n mono: systemMonoFamily,\n display: text(28, 36, 600),\n h1: text(24, 32, 600),\n h2: text(20, 28, 600),\n h3: text(16, 24, 600),\n body: text(14, 20, 400),\n bodyStrong: text(14, 20, 600),\n label: text(13, 18, 500),\n caption: text(12, 16, 400),\n code: text(13, 20, 400),\n codeBlock: text(12, 18, 400),\n};\n" } ], "docs": "[Runtime: tokens](https://gpuixui.sudokw.com/registry) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.", "meta": { "url": "/registry", "kind": "runtime", "runtime": "gpuix", "registry": "gpuixui" } }