@aglyn/aglyn 1.0.0-beta.268 → 1.0.0-beta.270

package/src/lib/app-utils/native-themes.js

@@ -0,0 +1,732 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ /**
+ * THE NATIVE APPS' THEMES, AS DATA (AGL-3950).
+ *
+ * The values are read from the Native App Figma file's variables (Themes,
+ * page 2:8; collections Aglyn / Theme, Aglyn / Appearance, Aglyn / Accent,
+ * Aglyn / Brand and Aglyn / Density), which win wherever they define a value:
+ *
+ * - `THEME_PALETTES`: Aglyn is the look that ships, the console's resolved
+ *   MUI scheme (see `AGLYN_LIGHT`); Quiet, Night and High contrast, light and
+ *   dark, are exactly as Figma's Theme modes hold them. Ocean and Warm exist in Figma
+ *   only as four-color previews (rail, surface, canvas, accent), so their
+ *   full palettes are derived here by `deriveThemeFromPreview`, the rule
+ *   below, and drawn back into Figma as swatch boards.
+ * - `THEME_ACCENTS`: the Accent modes Blue, Violet, Pink and Workspace
+ *   brand, exactly. `deriveAccent` returns them for their ring colors and
+ *   derives any other color (a picked accent, a workspace's brand) by rule.
+ * - `THEME_ACCENT_SWATCHES`: the six swatches the Theme settings sheet shows.
+ * - `THEME_DENSITIES`: Comfortable and Compact.
+ *
+ * Contrast is WCAG 2's relative luminance, as `accessible-shade.ts` (the
+ * console's theme) measures it; lightness steps are HSL lightness, as it
+ * walks them.
+ *
+ * NO IMPORTS, on purpose: the native apps read the values, the types and the
+ * answers of these functions through the generated contracts.
+ */ /** A theme the apps offer. */ import { _ as _extends } from "@swc/helpers/_/_extends";
+// ── Color arithmetic ────────────────────────────────────────────────────────
+const HEX = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i;
+/** `[r, g, b]` in 0–255, or null for anything that is not `#RRGGBB(AA)`. */ function channels(color) {
+    const match = HEX.exec(color != null ? color : '');
+    if (!match) return null;
+    const value = match[1];
+    return [
+        0,
+        2,
+        4
+    ].map((index)=>parseInt(value.slice(index, index + 2), 16));
+}
+function hexOf(rgb) {
+    return `#${rgb.map((value)=>Math.round(Math.min(255, Math.max(0, value))).toString(16).padStart(2, '0')).join('')}`;
+}
+/** Whether a value is `#RRGGBB`. */ export function isThemeColor(value) {
+    return typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value);
+}
+function linear(channel) {
+    const value = channel / 255;
+    return value <= 0.03928 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+function luminance(rgb) {
+    return 0.2126 * linear(rgb[0]) + 0.7152 * linear(rgb[1]) + 0.0722 * linear(rgb[2]);
+}
+/** WCAG 2 contrast between two `#RRGGBB` colors, as the console's `contrastRatio` measures it. */ export function themeContrast(a, b) {
+    const x = channels(a);
+    const y = channels(b);
+    if (!x || !y) return 1;
+    const [high, low] = [
+        luminance(x),
+        luminance(y)
+    ].sort((p, q)=>q - p);
+    return (high + 0.05) / (low + 0.05);
+}
+function toHsl([r, g, b]) {
+    const [red, green, blue] = [
+        r / 255,
+        g / 255,
+        b / 255
+    ];
+    const max = Math.max(red, green, blue);
+    const min = Math.min(red, green, blue);
+    const lightness = (max + min) / 2;
+    if (max === min) return [
+        0,
+        0,
+        lightness
+    ];
+    const delta = max - min;
+    const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+    let hue;
+    if (max === red) hue = (green - blue) / delta + (green < blue ? 6 : 0);
+    else if (max === green) hue = (blue - red) / delta + 2;
+    else hue = (red - green) / delta + 4;
+    return [
+        hue / 6,
+        saturation,
+        lightness
+    ];
+}
+function fromHsl(hue, saturation, lightness) {
+    const l = Math.min(1, Math.max(0, lightness));
+    if (saturation === 0) return hexOf([
+        l * 255,
+        l * 255,
+        l * 255
+    ]);
+    const q = l < 0.5 ? l * (1 + saturation) : l + saturation - l * saturation;
+    const p = 2 * l - q;
+    const channel = (t)=>{
+        let x = t;
+        if (x < 0) x += 1;
+        if (x > 1) x -= 1;
+        if (x < 1 / 6) return p + (q - p) * 6 * x;
+        if (x < 1 / 2) return q;
+        if (x < 2 / 3) return p + (q - p) * (2 / 3 - x) * 6;
+        return p;
+    };
+    return hexOf([
+        channel(hue + 1 / 3) * 255,
+        channel(hue) * 255,
+        channel(hue - 1 / 3) * 255
+    ]);
+}
+/** `color` with its HSL lightness moved by `delta` (−1 to 1). */ function shiftLightness(color, delta) {
+    const rgb = channels(color);
+    if (!rgb) return color;
+    const [h, s, l] = toHsl(rgb);
+    return fromHsl(h, s, l + delta);
+}
+/**
+ * `color` walked in 2% HSL-lightness steps (darker, or lighter) until it
+ * reaches `minContrast` against `against`; the pole when nothing reaches it.
+ */ function walkToContrast(color, against, minContrast, direction) {
+    let candidate = color;
+    for(let step = 0; step <= 50; step += 1){
+        candidate = shiftLightness(color, direction * 0.02 * step);
+        if (themeContrast(candidate, against) >= minContrast) return candidate;
+    }
+    return candidate;
+}
+/** `from` moved `amount` (0–1) of the way to `to`, per sRGB channel. */ export function themeLerp(from, to, amount) {
+    const a = channels(from);
+    const b = channels(to);
+    if (!a || !b) return from;
+    return hexOf(a.map((value, index)=>value + (b[index] - value) * amount));
+}
+/** `color` with an alpha byte: `#RRGGBBAA`. */ function withAlpha(color, alpha) {
+    const rgb = channels(color);
+    if (!rgb) return color;
+    return `${hexOf(rgb)}${Math.round(alpha * 255).toString(16).padStart(2, '0')}`;
+}
+// ── Themes ──────────────────────────────────────────────────────────────────
+/** Text that must read on every surface: WCAG AA. */ export const THEME_TEXT_CONTRAST = 4.5;
+/** An icon, a border or an indicator: WCAG AA for non-text. */ export const THEME_NON_TEXT_CONTRAST = 3;
+const DANGER_LIGHT = {
+    dangerFill: '#b3261e',
+    dangerFillHover: '#9c211a',
+    dangerFillPressed: '#861c16'
+};
+const DANGER_DARK = {
+    dangerFill: '#c93a31',
+    dangerFillHover: '#b3261e',
+    dangerFillPressed: '#9c211a'
+};
+/**
+ * Figma's Aglyn mode as it stood before that mode moved to the console's
+ * scheme (2026-10-19): the base Quiet's status colors and the Ocean and Warm
+ * derivations build on, as the native shells' themes already do. Kept by
+ * value, so moving the shipping Aglyn look moves nothing else.
+ */ const FIGMA_AGLYN_LIGHT = _extends({
+    canvas: '#f5f5f5',
+    surface: '#ffffff',
+    raised: '#ffffff',
+    sunken: '#edf0f4',
+    rail: '#e6eaf0',
+    hover: '#eef1f5',
+    titlebar: '#fafbfc',
+    borderSubtle: '#e3e7ec',
+    borderStrong: '#c8d0d9',
+    textPrimary: '#1f2329',
+    textSecondary: '#5e6773',
+    textTertiary: '#7a838e',
+    successBg: '#e5f3e6',
+    successFg: '#2e6f31',
+    warningBg: '#fff0da',
+    warningFg: '#85560f',
+    dangerBg: '#fce6e5',
+    dangerFg: '#a8231e',
+    infoBg: '#e3f0fb',
+    infoFg: '#10548f',
+    newBg: '#f5e4f9',
+    newFg: '#8e2aa1',
+    scrim: '#0f172152'
+}, DANGER_LIGHT);
+const FIGMA_AGLYN_DARK = _extends({
+    canvas: '#161c21',
+    surface: '#1e262e',
+    raised: '#27313b',
+    sunken: '#12181d',
+    rail: '#0f1418',
+    hover: '#2a343e',
+    titlebar: '#1a2128',
+    borderSubtle: '#2e3944',
+    borderStrong: '#45525f',
+    textPrimary: '#f3f5f7',
+    textSecondary: '#b3bcc6',
+    textTertiary: '#8a96a3',
+    successBg: '#1b3320',
+    successFg: '#82c785',
+    warningBg: '#3a2c14',
+    warningFg: '#ffc479',
+    dangerBg: '#3b1a1a',
+    dangerFg: '#ed7876',
+    infoBg: '#132c42',
+    infoFg: '#5da1dc',
+    newBg: '#3a1e44',
+    newFg: '#e979fc',
+    scrim: '#0000008c'
+}, DANGER_DARK);
+/**
+ * The palettes `deriveThemeFromPreview` starts from (the original Figma Aglyn
+ * mode), exported so each platform can port the derivation and replay its
+ * cases against the same base.
+ */ export const THEME_FIGMA_BASE = {
+    light: FIGMA_AGLYN_LIGHT,
+    dark: FIGMA_AGLYN_DARK
+};
+/**
+ * The Aglyn theme is the look that ships: the console's resolved MUI scheme
+ * (`getConsoleTheme`, the same scheme the native shared tokens are generated
+ * from), with translucent text, dividers and hover composited onto the paper
+ * they sit on, and the status colors as the console's MUI Alert draws them
+ * (standard: the intent's light shade lightened 90% for the ground and
+ * darkened 60% for the text in light, the reverse in dark). Where the console
+ * scheme has no such color (sunken, rail, titlebar, the strong border, the
+ * "new" status, the scrim) Figma's Aglyn mode supplies it, and so does the
+ * danger FILL: the console's `error.main` carries white text at 4.36:1, under
+ * the 4.5:1 a button label owes. `apps/console/specs/native-theme-aglyn.spec.ts`
+ * holds these to the console's scheme.
+ */ const AGLYN_LIGHT = _extends({}, FIGMA_AGLYN_LIGHT, {
+    canvas: '#f5f5f5',
+    surface: '#ffffff',
+    raised: '#ffffff',
+    hover: '#f5f5f5',
+    borderSubtle: '#e0e0e0',
+    textPrimary: '#212121',
+    textSecondary: '#666666',
+    textTertiary: '#9e9e9e',
+    successBg: '#f0f8f1',
+    successFg: '#2c4c2e',
+    warningBg: '#fff8ef',
+    warningFg: '#664a28',
+    dangerBg: '#fceeed',
+    dangerFg: '#5c2220',
+    infoBg: '#ecf4fb',
+    infoFg: '#1c3a56'
+});
+const AGLYN_DARK = _extends({}, FIGMA_AGLYN_DARK, {
+    canvas: '#161c21',
+    surface: '#2a3440',
+    raised: '#2a3440',
+    hover: '#3b444f',
+    borderSubtle: '#444c57',
+    textPrimary: '#ffffff',
+    textSecondary: '#bfc2c6',
+    textTertiary: '#959aa0',
+    successBg: '#0b130b',
+    successFg: '#c5e5c7',
+    warningBg: '#19120a',
+    warningFg: '#ffe3c1',
+    dangerBg: '#170c0b',
+    dangerFg: '#f7c9c8',
+    infoBg: '#091015',
+    infoFg: '#bfd9f1'
+});
+/** The Aglyn theme's fields the console's scheme supplies; the rest are Figma's Aglyn mode. */ export const THEME_CONSOLE_FIELDS = [
+    'canvas',
+    'surface',
+    'raised',
+    'hover',
+    'borderSubtle',
+    'textPrimary',
+    'textSecondary',
+    'textTertiary',
+    'successBg',
+    'successFg',
+    'warningBg',
+    'warningFg',
+    'dangerBg',
+    'dangerFg',
+    'infoBg',
+    'infoFg'
+];
+const QUIET_LIGHT = _extends({}, FIGMA_AGLYN_LIGHT, {
+    canvas: '#f4f4f2',
+    surface: '#ffffff',
+    raised: '#ffffff',
+    sunken: '#ecece9',
+    rail: '#eaeae7',
+    hover: '#efefec',
+    titlebar: '#fafaf8',
+    borderSubtle: '#e2e2de',
+    borderStrong: '#cbcbc5',
+    textPrimary: '#222220',
+    textSecondary: '#5f5f5a',
+    textTertiary: '#7c7c76'
+});
+const QUIET_DARK = _extends({}, FIGMA_AGLYN_DARK, {
+    canvas: '#1a1a19',
+    surface: '#222221',
+    raised: '#2b2b29',
+    sunken: '#141413',
+    rail: '#121211',
+    hover: '#30302e',
+    titlebar: '#1e1e1d',
+    borderSubtle: '#353533',
+    borderStrong: '#4a4a47',
+    textPrimary: '#f2f2ef',
+    textSecondary: '#b5b5af',
+    textTertiary: '#8e8e88'
+});
+const NIGHT = _extends({
+    canvas: '#0b1120',
+    surface: '#121a2b',
+    raised: '#1a2337',
+    sunken: '#070c17',
+    rail: '#050913',
+    hover: '#1e2840',
+    titlebar: '#0e1525',
+    borderSubtle: '#222c42',
+    borderStrong: '#33405c',
+    textPrimary: '#eef2fa',
+    textSecondary: '#a9b4cb',
+    textTertiary: '#8290ab',
+    successBg: '#12301f',
+    successFg: '#7bcb8f',
+    warningBg: '#352914',
+    warningFg: '#f6be6e',
+    dangerBg: '#3a1820',
+    dangerFg: '#f08a8f',
+    infoBg: '#122a47',
+    infoFg: '#79b2ee',
+    newBg: '#36193f',
+    newFg: '#e68af6',
+    scrim: '#00000099'
+}, DANGER_DARK);
+const HIGH_CONTRAST_LIGHT = _extends({
+    canvas: '#ffffff',
+    surface: '#ffffff',
+    raised: '#ffffff',
+    sunken: '#f0f0f0',
+    rail: '#efefef',
+    hover: '#e4e4e4',
+    titlebar: '#ffffff',
+    borderSubtle: '#6b6b6b',
+    borderStrong: '#000000',
+    textPrimary: '#000000',
+    textSecondary: '#1f1f1f',
+    textTertiary: '#3d3d3d',
+    successBg: '#ddf3de',
+    successFg: '#0b4d10',
+    warningBg: '#ffe9c7',
+    warningFg: '#5c3a00',
+    dangerBg: '#fadbd9',
+    dangerFg: '#7a0f0b',
+    infoBg: '#ddebfa',
+    infoFg: '#0a3a66',
+    newBg: '#f1ddf6',
+    newFg: '#5e0f70',
+    scrim: '#00000080'
+}, DANGER_LIGHT);
+const HIGH_CONTRAST_DARK = _extends({
+    canvas: '#000000',
+    surface: '#000000',
+    raised: '#0a0a0a',
+    sunken: '#141414',
+    rail: '#0f0f0f',
+    hover: '#262626',
+    titlebar: '#000000',
+    borderSubtle: '#9a9a9a',
+    borderStrong: '#ffffff',
+    textPrimary: '#ffffff',
+    textSecondary: '#ededed',
+    textTertiary: '#c7c7c7',
+    successBg: '#0b2a0e',
+    successFg: '#9be7a0',
+    warningBg: '#2e2000',
+    warningFg: '#ffd08a',
+    dangerBg: '#330b0a',
+    dangerFg: '#ff9e9b',
+    infoBg: '#0a2340',
+    infoFg: '#9ccbff',
+    newBg: '#2e0b38',
+    newFg: '#f2a8ff',
+    scrim: '#000000b2'
+}, DANGER_DARK);
+/** Figma's previews of the two themes it does not hold in full. */ export const THEME_PREVIEWS = {
+    ocean: {
+        rail: '#0b3954',
+        surface: '#f2f8fb',
+        canvas: '#e3eef4',
+        accent: '#087e8b'
+    },
+    warm: {
+        rail: '#e9dccb',
+        surface: '#fffaf3',
+        canvas: '#f5ece0',
+        accent: '#c2571a'
+    }
+};
+/**
+ * The rail color a theme's DARK appearance is tinted toward. Ocean's rail is
+ * already dark, so it is its own seed; Warm's is a light sand, so its dark
+ * appearance leans to a dark sand instead.
+ */ export const THEME_DARK_RAIL_SEEDS = {
+    ocean: '#0b3954',
+    warm: '#7a5634'
+};
+/**
+ * A theme's full palette from Figma's four-color preview (AGL-3950), by the
+ * same rules for both:
+ *
+ * Light: the preview's canvas, surface and rail as given; raised = surface;
+ * sunken = canvas 25% toward the rail; hover = surface 10% toward the rail;
+ * titlebar = surface 35% toward the canvas; the borders are Figma's Aglyn
+ * mode's, 18% (subtle) and 22% (strong) toward the rail. Text, status, scrim
+ * and the danger fill are Figma's Aglyn mode's.
+ *
+ * Dark: Figma's Aglyn dark mode tinted toward the dark rail seed: canvas
+ * 22%, surface and raised 18%, rail 45%; everything else is that mode's.
+ *
+ * "Toward" is a straight per-channel sRGB blend, rounded to the byte.
+ */ export function deriveThemeFromPreview(preview, darkRailSeed) {
+    return {
+        light: _extends({}, FIGMA_AGLYN_LIGHT, {
+            canvas: preview.canvas,
+            surface: preview.surface,
+            raised: preview.surface,
+            rail: preview.rail,
+            sunken: themeLerp(preview.canvas, preview.rail, 0.25),
+            hover: themeLerp(preview.surface, preview.rail, 0.1),
+            titlebar: themeLerp(preview.surface, preview.canvas, 0.35),
+            borderSubtle: themeLerp(FIGMA_AGLYN_LIGHT.borderSubtle, preview.rail, 0.18),
+            borderStrong: themeLerp(FIGMA_AGLYN_LIGHT.borderStrong, preview.rail, 0.22)
+        }),
+        dark: _extends({}, FIGMA_AGLYN_DARK, {
+            canvas: themeLerp(FIGMA_AGLYN_DARK.canvas, darkRailSeed, 0.22),
+            surface: themeLerp(FIGMA_AGLYN_DARK.surface, darkRailSeed, 0.18),
+            raised: themeLerp(FIGMA_AGLYN_DARK.raised, darkRailSeed, 0.18),
+            rail: themeLerp(FIGMA_AGLYN_DARK.rail, darkRailSeed, 0.45)
+        })
+    };
+}
+const OCEAN = deriveThemeFromPreview(THEME_PREVIEWS.ocean, THEME_DARK_RAIL_SEEDS.ocean);
+const WARM = deriveThemeFromPreview(THEME_PREVIEWS.warm, THEME_DARK_RAIL_SEEDS.warm);
+/** The Aglyn blue every Figma theme's "Accent: Theme" resolves to. */ const AGLYN_ACCENT = '#00b0ff';
+/** Every theme, in the order the Theme settings sheet lists them. */ export const THEME_PALETTES = [
+    {
+        id: 'aglyn',
+        label: '',
+        brandLabel: true,
+        light: AGLYN_LIGHT,
+        dark: AGLYN_DARK,
+        accent: AGLYN_ACCENT,
+        source: 'console'
+    },
+    {
+        id: 'quiet',
+        label: 'Quiet',
+        light: QUIET_LIGHT,
+        dark: QUIET_DARK,
+        accent: AGLYN_ACCENT,
+        source: 'figma'
+    },
+    {
+        id: 'night',
+        label: 'Night',
+        light: NIGHT,
+        dark: NIGHT,
+        accent: AGLYN_ACCENT,
+        alwaysDark: true,
+        source: 'figma'
+    },
+    {
+        id: 'ocean',
+        label: 'Ocean',
+        light: OCEAN.light,
+        dark: OCEAN.dark,
+        accent: THEME_PREVIEWS.ocean.accent,
+        source: 'derived'
+    },
+    {
+        id: 'warm',
+        label: 'Warm',
+        light: WARM.light,
+        dark: WARM.dark,
+        accent: THEME_PREVIEWS.warm.accent,
+        source: 'derived'
+    },
+    {
+        id: 'highContrast',
+        label: 'High contrast',
+        light: HIGH_CONTRAST_LIGHT,
+        dark: HIGH_CONTRAST_DARK,
+        accent: AGLYN_ACCENT,
+        source: 'figma'
+    }
+];
+// ── Accents ─────────────────────────────────────────────────────────────────
+/** The surfaces an accent's text is held to. */ const LIGHT_PAGE = AGLYN_LIGHT.surface;
+const DARK_PAGE = AGLYN_DARK.surface;
+/** Text and icons on a fill that keeps a light brand color. */ const DARK_ON_LIGHTNESS = 0.08;
+function accentText(raw) {
+    return {
+        textLight: walkToContrast(raw, LIGHT_PAGE, THEME_TEXT_CONTRAST, -1),
+        textDark: walkToContrast(raw, DARK_PAGE, THEME_TEXT_CONTRAST, 1)
+    };
+}
+/** Figma's Accent modes, exactly as the Accent collection holds them. */ const FIGMA_ACCENTS = [
+    {
+        id: 'blue',
+        label: 'Blue',
+        accent: {
+            fill: '#0073ae',
+            icon: '#0091d5',
+            soft: '#00b0ff29',
+            ring: '#00b0ff',
+            on: '#ffffff',
+            hover: '#00669b',
+            pressed: '#005884'
+        }
+    },
+    {
+        id: 'violet',
+        label: 'Violet',
+        accent: {
+            fill: '#5b3fd6',
+            icon: '#8c72f5',
+            soft: '#7a5cf02e',
+            ring: '#7a5cf0',
+            on: '#ffffff',
+            hover: '#4e34c2',
+            pressed: '#4129aa'
+        }
+    },
+    {
+        id: 'pink',
+        label: 'Pink',
+        accent: {
+            fill: '#e040fb',
+            icon: '#c93ae3',
+            soft: '#e040fb29',
+            ring: '#e040fb',
+            on: '#1e0424',
+            hover: '#cc2ee6',
+            pressed: '#b523cf'
+        }
+    },
+    {
+        id: 'workspaceBrand',
+        label: 'Workspace brand',
+        accent: {
+            fill: '#2e7d5b',
+            icon: '#2e8f66',
+            soft: '#2e7d5b2e',
+            ring: '#3fa77a',
+            on: '#ffffff',
+            hover: '#276c4e',
+            pressed: '#205a41'
+        }
+    }
+];
+/** The named accents, Figma's own values with their text shades. */ export const THEME_ACCENTS = FIGMA_ACCENTS.map(({ id, label, accent })=>({
+        id,
+        label,
+        accent: _extends({}, accent, accentText(accent.ring))
+    }));
+/** The accent picker's swatches, in Figma's order. */ export const THEME_ACCENT_SWATCHES = [
+    {
+        id: 'aglynBlue',
+        label: 'Brand blue',
+        color: '#0073ae'
+    },
+    {
+        id: 'sky',
+        label: 'Sky',
+        color: '#00b0ff'
+    },
+    {
+        id: 'violet',
+        label: 'Violet',
+        color: '#7a5cf0'
+    },
+    {
+        id: 'pink',
+        label: 'Pink',
+        color: '#e040fb'
+    },
+    {
+        id: 'green',
+        label: 'Green',
+        color: '#2e7d5b'
+    },
+    {
+        id: 'warm',
+        label: 'Warm',
+        color: '#c2571a'
+    }
+];
+/**
+ * Every control's shade of one accent color (AGL-3950).
+ *
+ * A color one of Figma's Accent modes is drawn from (its ring) answers with
+ * that mode exactly: Figma wins where it defines a value. Any other color is
+ * derived:
+ *
+ * 1. White text on the color already reads (4.5:1): the fill is the color,
+ *    `on` is white.
+ * 2. The color carries white text only at the large-text bar (3:1 up to
+ *    4.5:1) and near-black text reads on it at 4.5:1: the fill KEEPS the
+ *    brand color and `on` flips to near-black, the color's own hue at 8%
+ *    lightness. Darkening such a color far enough for white text moves it
+ *    visibly off the brand; this is Figma's Pink (#E040FB, 3.34:1). The 3:1
+ *    threshold is the one that sends Pink here and Blue (2.43:1) and the
+ *    workspace green (2.99:1) to rule 3, as Figma draws them.
+ * 3. Otherwise the fill is the color darkened in 2% HSL-lightness steps until
+ *    white reaches 4.5:1, and `on` is white.
+ *
+ * hover and pressed are the fill 4% and 8% darker (HSL lightness), soft is
+ * the color at 16% alpha, ring is the color, icon is the color darkened in 2%
+ * steps until it reaches 3:1 on the light surface, and the two text shades
+ * walk it (darker on light, lighter on dark) until 4.5:1 on that surface.
+ * Null for anything that is not `#RRGGBB`.
+ */ export function deriveAccent(color) {
+    if (!isThemeColor(color)) return null;
+    const raw = color.toLowerCase();
+    const named = THEME_ACCENTS.find((entry)=>entry.accent.ring === raw);
+    if (named) return _extends({}, named.accent);
+    const white = '#ffffff';
+    const onWhite = themeContrast(raw, white);
+    let fill = raw;
+    let on = white;
+    if (onWhite < THEME_TEXT_CONTRAST) {
+        const rgb = channels(raw);
+        const [h, s] = toHsl(rgb);
+        const nearBlack = fromHsl(h, Math.min(s, 0.8), DARK_ON_LIGHTNESS);
+        if (onWhite >= THEME_NON_TEXT_CONTRAST && themeContrast(raw, nearBlack) >= THEME_TEXT_CONTRAST) {
+            on = nearBlack;
+        } else {
+            fill = walkToContrast(raw, white, THEME_TEXT_CONTRAST, -1);
+        }
+    }
+    return _extends({
+        fill,
+        icon: walkToContrast(raw, LIGHT_PAGE, THEME_NON_TEXT_CONTRAST, -1),
+        soft: withAlpha(raw, 0.16),
+        ring: raw,
+        on,
+        hover: shiftLightness(fill, -0.04),
+        pressed: shiftLightness(fill, -0.08)
+    }, accentText(raw));
+}
+// ── Density ─────────────────────────────────────────────────────────────────
+/** Figma's Density modes. */ export const THEME_DENSITIES = [
+    {
+        id: 'comfortable',
+        label: 'Comfortable',
+        space2: 2,
+        space4: 4,
+        space6: 6,
+        space8: 8,
+        space10: 10,
+        space12: 12,
+        space16: 16,
+        space20: 20,
+        space24: 24,
+        space32: 32,
+        space40: 40,
+        space48: 48,
+        space64: 64,
+        radiusXs: 4,
+        radiusSm: 6,
+        radiusMd: 8,
+        radiusLg: 12,
+        radiusXl: 16,
+        radius2xl: 24,
+        radiusFull: 999,
+        rowHeight: 32,
+        controlHeight: 32,
+        listRowHeight: 60,
+        phoneRowHeight: 52,
+        titlebarHeight: 52
+    },
+    {
+        id: 'compact',
+        label: 'Compact',
+        space2: 2,
+        space4: 4,
+        space6: 4,
+        space8: 6,
+        space10: 8,
+        space12: 8,
+        space16: 12,
+        space20: 16,
+        space24: 20,
+        space32: 24,
+        space40: 32,
+        space48: 40,
+        space64: 48,
+        radiusXs: 4,
+        radiusSm: 6,
+        radiusMd: 8,
+        radiusLg: 12,
+        radiusXl: 16,
+        radius2xl: 24,
+        radiusFull: 999,
+        rowHeight: 28,
+        controlHeight: 28,
+        listRowHeight: 48,
+        phoneRowHeight: 44,
+        titlebarHeight: 44
+    }
+];
+/** A theme by id, Aglyn for anything unknown. */ export function themePalette(id) {
+    var _THEME_PALETTES_find;
+    return (_THEME_PALETTES_find = THEME_PALETTES.find((entry)=>entry.id === id)) != null ? _THEME_PALETTES_find : THEME_PALETTES[0];
+}
+
+//# sourceMappingURL=native-themes.js.map