@pipelex/mthds-form 0.28.0 → 0.30.0

package/dist/brand/index.d.ts

@@ -361,7 +361,10 @@ interface AccentRoles {
     accent: string;
     /** A pale accent fill (deep on a dark page), behind accent ink: a pill, a badge. */
     accentFill: string;
-    /** The accent as text, reading at 4.5:1 or more on the page and on `accentFill`. */
+    /**
+     * The accent as text, reading at 4.5:1 or more on the page, on `accentFill`
+     * and on every other surface the host named (`deriveBrandRoles`' `surfaces`).
+     */
     accentInk: string;
 }
 /** The header band's roles, present when the header is set. */
@@ -385,8 +388,17 @@ type BrandRoles = (ActionRoles | Absent<ActionRoles>) & (AccentRoles | Absent<Ac
  * The roles a page paints with, from up to three seeds and the colour of the
  * page they render on. Throws when a seed or the page is not a `#rrggbb`
  * colour: a host validates what a person typed before it reaches here.
+ *
+ * `surfaces` are the other colours accent text sits on besides the page and
+ * the pale fill, each `#rrggbb`: a style's panel and the fields inside it
+ * (`resolveRoleColor` turns a style's role colour into one), or a canvas
+ * behind the page. The ink is moved until it reads on all of them. When
+ * there is an accent to derive, a surface on which not even the page's own
+ * text extreme, pure black on a light page or pure white on a dark one,
+ * reaches 4.5:1 throws, since no ink moving the page's way could read there.
+ * With no accent, no ink is derived, and the surfaces are only parsed.
  */
-declare function deriveBrandRoles(seeds: BrandSeeds | null | undefined, page: string): BrandRoles;
+declare function deriveBrandRoles(seeds: BrandSeeds | null | undefined, page: string, surfaces?: readonly string[]): BrandRoles;
 /**
  * Whether the button colour sits below 3:1 against the page, so a button may
  * be hard to see in that theme. Only a colour the person set is judged: with
@@ -395,11 +407,12 @@ declare function deriveBrandRoles(seeds: BrandSeeds | null | undefined, page: st
 declare function isActionFaint(seeds: BrandSeeds | null | undefined, page: string): boolean;
 /**
  * Whether the accent had to be darkened or lightened to become ink on the
- * page, so links read in a shade of it rather than in the colour itself. Only
+ * page (and on the `surfaces`, as `deriveBrandRoles` takes them), so links read
+ * in a shade of it rather than in the colour itself. Only
  * a colour the person set is judged, and the accent counts as set when it
  * follows a button colour the person set: with neither, the answer is `false`.
  */
-declare function isAccentAdjusted(seeds: BrandSeeds | null | undefined, page: string): boolean;
+declare function isAccentAdjusted(seeds: BrandSeeds | null | undefined, page: string, surfaces?: readonly string[]): boolean;
 /**
  * The seeds a dark theme uses: each dark colour where one is set, and the
  * light one where it is not. Colour by colour, before the accent follows the
@@ -411,4 +424,156 @@ declare function resolveDarkSeeds(colors: BrandSeeds | null | undefined, darkCol
 /** Pure black or pure white, whichever reads better on a `#rrggbb` fill. */
 declare function readableTextOn(fill: string): TextOnFill;
 
-export { type AssembleResult, type AssembledBrand, BRAND_CONTRACT, BRAND_PRODUCERS, BRAND_VARIABLES, BrandManifest, type BrandProducer, type BrandProvenance, type BrandRoles, type BrandSeeds, type BrandSource, type BrandTokens, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, type ColorMode, type ColorToken, type ColorTokenName, type ColorValue, type ContractToken, type ContractTokenType, type DimensionToken, type FontFamilyToken, MIN_CONTRAST, MIN_CONTROL_CONTRAST, type SrgbColor, type StatedFacts, type TextOnFill, type TokensValidation, assembleBrand, brandProducerId, brandProvenanceSchema, brandScope, colorHex, colorIsHex, compileBrand, contractVariable, contrastRatio, deriveBrandRoles, isAccentAdjusted, isActionFaint, isColorTokenName, readableTextOn, resolveColor, resolveDarkSeeds, srgbColorSchema, statedFactProblems, statedFactsSchema, validateBrandTokens };
+/**
+ * The app styles and the typefaces, as data, and the roles a team's choice of
+ * the two sets.
+ *
+ * A style is a small set of design values a team picks from a closed list, on
+ * top of its own colours and logo: how its headings, its panels, its corners,
+ * its call to action and its rhythm look. A typeface is picked from a short
+ * list beside it, and replaces the style's body face, and its heading face
+ * wherever the style's headings follow the body. Neither adds a colour: every
+ * fill, edge and ink a style uses is a role the theme contract already has,
+ * named here by that role (`RoleColor`), or a shadow.
+ *
+ * `deriveStyleRoles` returns roles, never custom property names, the way
+ * `deriveBrandRoles` does for the seed colours: each host maps them onto its
+ * own tokens, and the kernel's controls and the generative layer read the few
+ * optional tokens docs/theming.md lists, each with today's look as its
+ * fallback. A role a choice does not set is not a key, so a host keeps its own
+ * value there; `quiet` with no typeface sets nothing at all, which is what
+ * makes "no style" and "the default style" one state.
+ *
+ * See docs/brand.md § "App styles and typefaces".
+ */
+/** The faces of the closed list, all on Google Fonts under the SIL Open Font License. */
+type TypefaceId = 'inter' | 'dm-sans' | 'plus-jakarta-sans' | 'manrope' | 'ibm-plex-sans' | 'source-sans-3' | 'work-sans' | 'space-grotesk' | 'newsreader';
+/** The faces a team may pick as its typeface: every face but a style's own heading face. */
+type BodyTypefaceId = Exclude<TypefaceId, 'newsreader'>;
+interface Typeface {
+    id: TypefaceId;
+    /** The family name, as a stylesheet and a font service name it. */
+    family: string;
+    category: 'sans-serif' | 'serif';
+    /** The weights a host loads it in: from the host's own light titles (300) to the boldest a style sets (700). */
+    weights: readonly number[];
+    /** The generic stack that renders while the face loads, or when it never does. */
+    fallback: string;
+    /** The face first, then its fallback: a whole `font-family` value. */
+    stack: string;
+    /** Whether a team may pick it (`body`), or a style uses it for its headings only (`heading`). */
+    use: 'body' | 'heading';
+}
+/**
+ * Every face a style or a team can set. The body faces are the list a team
+ * picks from; Newsreader is the `editorial` style's heading face, listed so a
+ * host loads it, and is not a team's choice. Frozen, like `APP_STYLES`: a
+ * process serves many teams, so the catalogue one of them reads cannot be
+ * one another has edited.
+ */
+declare const TYPEFACES: readonly Typeface[];
+/** Whether `value` names a face a team may pick: a body face of `TYPEFACES`. */
+declare function isTypeface(value: unknown): value is BodyTypefaceId;
+/**
+ * A colour a style paints with, named by the role of the theme contract it
+ * is: never a colour of its own, so a team's palette and the host's theme
+ * stay the only sources of colour, and their readability guarantees hold.
+ */
+interface RoleColor {
+    role: ColorTokenName;
+    /** Mixed toward another role, in Oklab, by `share` (0 to 1): the card a little toward the foreground. */
+    toward?: {
+        role: ColorTokenName;
+        share: number;
+    };
+    /** Its opacity over what lies behind it, 0 to 1; absent, opaque. */
+    alpha?: number;
+}
+/** How a style draws a panel - a host's composer, a designed page's rail or card - in one theme. */
+interface PanelRoles {
+    fill: RoleColor;
+    /** The edge's colour, or `null` for no visible edge (the width is kept, so a panel's box does not move). */
+    edge: RoleColor | null;
+    /** The edge's width, in CSS pixels. */
+    edgeWidth: number;
+    /** A CSS `box-shadow` in a neutral ink, or `null` for none. */
+    shadow: string | null;
+    /**
+     * The fill of the fields set into the panel, where the host's field fill
+     * would sink into it; absent, the host's own.
+     */
+    field?: RoleColor;
+}
+/** The call to action's shadow: a CSS shadow's geometry, in pixels, tinted with a role. */
+interface ActionShadow {
+    x: number;
+    y: number;
+    blur: number;
+    spread: number;
+    color: RoleColor;
+}
+/**
+ * The roles a style and a typeface set. An absent role is not a key: a host
+ * keeps its own value there.
+ */
+interface StyleRoles {
+    /** The face of everything on the page. */
+    bodyFace?: Typeface;
+    /** The face of the page's titles and its sections' and panels' headings. */
+    headingFace?: Typeface;
+    headingWeight?: number;
+    /** The headings' letter spacing, in `em`. */
+    headingTracking?: string;
+    /** A control's corner radius, in CSS pixels; a panel takes one and a half of it. */
+    radius?: number;
+    /** The panel treatment in each theme: a shadow that reads on a light page is lost on a dark one. */
+    panel?: {
+        light: PanelRoles;
+        dark: PanelRoles;
+    };
+    /**
+     * The call to action's shadow in each theme, or `none` for a plain fill: a
+     * shadow in the button colour that lifts a button on a light page smears
+     * under it on a dark one.
+     */
+    actionShadow?: {
+        light: ActionShadow | 'none';
+        dark: ActionShadow | 'none';
+    };
+    /** The rhythm: a multiple of the host's own margins, paddings and gaps around the form. Never a control's size. */
+    density?: number;
+}
+type AppStyleId = 'quiet' | 'soft' | 'editorial' | 'bold';
+interface AppStyle {
+    id: AppStyleId;
+    name: string;
+    /** The direction, in one sentence, as a designer reads it. */
+    direction: string;
+    /** The roles the style sets when the team picks no typeface. */
+    roles: StyleRoles;
+}
+declare const APP_STYLE_IDS: readonly AppStyleId[];
+/** Whether `value` names one of the app styles. */
+declare function isAppStyle(value: unknown): value is AppStyleId;
+/**
+ * The roles a team's choice sets: its style and its typeface, each a stored
+ * id or nothing. An unknown or absent style is `quiet`, which sets nothing;
+ * an unknown typeface, or one a team may not pick, is no typeface, so the
+ * style's own face (or the host's) stays. The team's typeface replaces the
+ * style's body face, and its heading face wherever the style's headings
+ * follow the body.
+ */
+declare function deriveStyleRoles(style: string | null | undefined, typeface?: string | null): StyleRoles;
+/** The styles, each with its own roles: what it sets for a team that picked no typeface. */
+declare const APP_STYLES: Readonly<Record<AppStyleId, AppStyle>>;
+/**
+ * A role colour as a `#rrggbb` hex over the palette it names, to measure a
+ * surface a style draws: the ink a team's accent needs on a style's panel
+ * (`deriveBrandRoles`' `surfaces`). The mix is Oklab's, as CSS `color-mix()`
+ * computes it. A translucent colour is laid over `behind`; without it, it
+ * throws, since a translucent colour has no one value. Throws, too, for a
+ * role the palette does not hold or a palette colour that is not a hex.
+ */
+declare function resolveRoleColor(color: RoleColor, palette: Partial<Record<ColorTokenName, string>>, behind?: string): string;
+
+export { APP_STYLES, APP_STYLE_IDS, type ActionShadow, type AppStyle, type AppStyleId, type AssembleResult, type AssembledBrand, BRAND_CONTRACT, BRAND_PRODUCERS, BRAND_VARIABLES, type BodyTypefaceId, BrandManifest, type BrandProducer, type BrandProvenance, type BrandRoles, type BrandSeeds, type BrandSource, type BrandTokens, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, type ColorMode, type ColorToken, type ColorTokenName, type ColorValue, type ContractToken, type ContractTokenType, type DimensionToken, type FontFamilyToken, MIN_CONTRAST, MIN_CONTROL_CONTRAST, type PanelRoles, type RoleColor, type SrgbColor, type StatedFacts, type StyleRoles, TYPEFACES, type TextOnFill, type TokensValidation, type Typeface, type TypefaceId, assembleBrand, brandProducerId, brandProvenanceSchema, brandScope, colorHex, colorIsHex, compileBrand, contractVariable, contrastRatio, deriveBrandRoles, deriveStyleRoles, isAccentAdjusted, isActionFaint, isAppStyle, isColorTokenName, isTypeface, readableTextOn, resolveColor, resolveDarkSeeds, resolveRoleColor, srgbColorSchema, statedFactProblems, statedFactsSchema, validateBrandTokens };

package/dist/brand/index.js

@@ -201,10 +201,11 @@ function resolveColor(tokens, name, mode) {
     current = target;
   }
 }
+function linearChannel(channel) {
+  return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
+}
 function luminance(color) {
-  const [r, g, b] = color.components.map(
-    (channel) => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
-  );
+  const [r, g, b] = color.components.map(linearChannel);
   return 0.2126 * r + 0.7152 * g + 0.0722 * b;
 }
 function contrastRatio(a, b) {
@@ -486,20 +487,28 @@ function assembleBrand(source) {
 var MIN_CONTROL_CONTRAST = 3;
 var ACCENT_FILL_STRENGTH = 0.12;
 var SEARCH_STEPS = 32;
-function deriveBrandRoles(seeds, page) {
+function deriveBrandRoles(seeds, page, surfaces = []) {
   const canvas = parseHex(page, "The page colour");
+  const extreme = textOn(canvas) === "#000000" ? BLACK : WHITE;
+  const others = surfaces.map((surface, index) => parseHex(surface, `Surface ${index + 1}`));
   const action = seeds?.action == null ? null : parseHex(seeds.action, "The action seed");
   const accent = seeds?.accent == null ? action : parseHex(seeds.accent, "The accent seed");
   const header = seeds?.header == null ? null : parseHex(seeds.header, "The header seed");
   const actionRoles = action === null ? {} : { action: colorHex(action), onAction: textOn(action) };
-  const accentRoles = accent === null ? {} : accentRolesOf(accent, canvas);
+  const accentRoles = accent === null ? {} : accentRolesOf(accent, canvas, extreme, others);
   const headerRoles = header === null ? {} : { header: colorHex(header), onHeader: textOn(header) };
   return { ...actionRoles, ...accentRoles, ...headerRoles };
 }
-function accentRolesOf(accent, canvas) {
-  const extreme = textOn(canvas) === "#000000" ? BLACK : WHITE;
+function accentRolesOf(accent, canvas, extreme, surfaces) {
+  for (const surface of surfaces) {
+    if (contrastRatio(extreme, surface) < MIN_CONTRAST) {
+      throw new Error(
+        `No accent ink can read on ${colorHex(surface)}: not even ${colorHex(extreme)}, the page's own text extreme, reaches ${MIN_CONTRAST}:1 there.`
+      );
+    }
+  }
   const accentFill = paleFill(accent, canvas, extreme);
-  const accentInk = inkFor(accent, [canvas, accentFill], extreme);
+  const accentInk = inkFor(accent, [canvas, accentFill, ...surfaces], extreme);
   return {
     accent: colorHex(accent),
     accentFill: colorHex(accentFill),
@@ -511,8 +520,8 @@ function isActionFaint(seeds, page) {
   if (seeds?.action == null) return false;
   return contrastRatio(parseHex(seeds.action, "The action seed"), canvas) < MIN_CONTROL_CONTRAST;
 }
-function isAccentAdjusted(seeds, page) {
-  const roles = deriveBrandRoles(seeds, page);
+function isAccentAdjusted(seeds, page, surfaces = []) {
+  const roles = deriveBrandRoles(seeds, page, surfaces);
   return roles.accentInk !== void 0 && roles.accentInk !== roles.accent;
 }
 function resolveDarkSeeds(colors, darkColors) {
@@ -594,6 +603,260 @@ function fromHsl(hue, saturation, lightness) {
   return [r + offset, g + offset, b + offset];
 }
 
-export { BRAND_CONTRACT, BRAND_PRODUCERS, BRAND_VARIABLES, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, MIN_CONTRAST, MIN_CONTROL_CONTRAST, assembleBrand, brandProducerId, brandProvenanceSchema, brandScope, colorHex, colorIsHex, compileBrand, contractVariable, contrastRatio, deriveBrandRoles, isAccentAdjusted, isActionFaint, isColorTokenName, readableTextOn, resolveColor, resolveDarkSeeds, srgbColorSchema, statedFactProblems, statedFactsSchema, validateBrandTokens };
+// src/brand/styles.ts
+var SANS_FALLBACK = 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
+var SERIF_FALLBACK = 'ui-serif, Georgia, Cambria, "Times New Roman", serif';
+var WEIGHTS = [300, 400, 500, 600, 700];
+function face(id, family, category, use) {
+  const fallback = category === "serif" ? SERIF_FALLBACK : SANS_FALLBACK;
+  return {
+    id,
+    family,
+    category,
+    weights: WEIGHTS,
+    fallback,
+    stack: `"${family}", ${fallback}`,
+    use
+  };
+}
+var TYPEFACES = deepFreeze([
+  face("inter", "Inter", "sans-serif", "body"),
+  face("dm-sans", "DM Sans", "sans-serif", "body"),
+  face("plus-jakarta-sans", "Plus Jakarta Sans", "sans-serif", "body"),
+  face("manrope", "Manrope", "sans-serif", "body"),
+  face("ibm-plex-sans", "IBM Plex Sans", "sans-serif", "body"),
+  face("source-sans-3", "Source Sans 3", "sans-serif", "body"),
+  face("work-sans", "Work Sans", "sans-serif", "body"),
+  face("space-grotesk", "Space Grotesk", "sans-serif", "body"),
+  face("newsreader", "Newsreader", "serif", "heading")
+]);
+var FACES = new Map(TYPEFACES.map((candidate) => [candidate.id, candidate]));
+function isTypeface(value) {
+  return typeof value === "string" && FACES.get(value)?.use === "body";
+}
+function faceOf(id) {
+  return FACES.get(id);
+}
+var role = (name, more = {}) => ({
+  role: name,
+  ...more
+});
+var DEFINITIONS = {
+  // The host's own look, named: it sets nothing, and a team's typeface is its
+  // body and its headings.
+  quiet: {
+    name: "Quiet",
+    direction: "Calm and precise: light titles, hairline panels, generous air, nothing decorated.",
+    bodyFace: null,
+    headingFace: "body",
+    roles: {}
+  },
+  soft: {
+    name: "Soft",
+    direction: "Friendly and rounded: generous corners, panels that float on a soft shadow with no outline, warm medium-weight titles.",
+    bodyFace: "dm-sans",
+    headingFace: "body",
+    roles: {
+      headingWeight: 500,
+      headingTracking: "-0.015em",
+      radius: 12,
+      panel: {
+        light: {
+          fill: role("card"),
+          edge: null,
+          edgeWidth: 1,
+          shadow: "0 1px 2px rgb(16 24 40 / 0.05), 0 12px 32px -10px rgb(16 24 40 / 0.16)",
+          field: role("card")
+        },
+        // On a dark page a shadow barely shows, so the panel is lifted by its
+        // fill instead, the card a little toward the foreground, with a faint
+        // highlight along its top edge where light would catch it, and its
+        // fields sink back to the page's own background.
+        dark: {
+          fill: role("card", { toward: { role: "foreground", share: 0.07 } }),
+          edge: null,
+          edgeWidth: 1,
+          shadow: "inset 0 1px 0 rgb(255 255 255 / 0.07), 0 2px 4px rgb(0 0 0 / 0.55), 0 24px 56px -12px rgb(0 0 0 / 0.95)",
+          field: role("background")
+        }
+      },
+      // A short shadow in the button colour on a light page, kept within the
+      // gap a host leaves under its button. On a dark page the panel is lifted
+      // by its fill, and a glow in a light button colour reads as a smear.
+      actionShadow: {
+        light: { x: 0, y: 6, blur: 14, spread: -6, color: role("primary", { alpha: 0.5 }) },
+        dark: "none"
+      },
+      density: 1.08
+    }
+  },
+  editorial: {
+    name: "Editorial",
+    direction: "Considered and literary: serif display titles, fine hairlines, wide margins and a reading rhythm.",
+    bodyFace: "source-sans-3",
+    headingFace: "newsreader",
+    roles: {
+      headingWeight: 500,
+      headingTracking: "-0.01em",
+      radius: 2,
+      // Hairlines all the way in: the fields inside the panel take its own
+      // fill, so each reads as its fine edge rather than as a grey block.
+      panel: {
+        light: {
+          fill: role("card"),
+          edge: role("border"),
+          edgeWidth: 1,
+          shadow: null,
+          field: role("card")
+        },
+        dark: {
+          fill: role("card"),
+          edge: role("border"),
+          edgeWidth: 1,
+          shadow: null,
+          field: role("card")
+        }
+      },
+      actionShadow: { light: "none", dark: "none" },
+      density: 1.25
+    }
+  },
+  bold: {
+    name: "Bold",
+    direction: "Confident and graphic: heavy, tightly set titles, solid panels with firm edges, a compact rhythm.",
+    bodyFace: "space-grotesk",
+    headingFace: "body",
+    roles: {
+      headingWeight: 700,
+      headingTracking: "-0.03em",
+      radius: 6,
+      // One firm edge around a solid panel, softer on a dark page. The panel
+      // is the muted fill, which the host's fields all but match, so fields
+      // set into it take the card on a light page and the page's background
+      // on a dark one.
+      panel: {
+        light: {
+          fill: role("muted"),
+          edge: role("foreground", { alpha: 0.62 }),
+          edgeWidth: 2,
+          shadow: null,
+          field: role("card")
+        },
+        dark: {
+          fill: role("muted"),
+          edge: role("foreground", { alpha: 0.3 }),
+          edgeWidth: 2,
+          shadow: null,
+          field: role("background")
+        }
+      },
+      actionShadow: { light: "none", dark: "none" },
+      density: 0.85
+    }
+  }
+};
+var APP_STYLE_IDS = Object.freeze([
+  "quiet",
+  "soft",
+  "editorial",
+  "bold"
+]);
+function isAppStyle(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(DEFINITIONS, value);
+}
+function deriveStyleRoles(style, typeface) {
+  const definition = DEFINITIONS[isAppStyle(style) ? style : "quiet"];
+  const roles = {};
+  const body = isTypeface(typeface) ? faceOf(typeface) : definition.bodyFace === null ? void 0 : faceOf(definition.bodyFace);
+  if (body) roles.bodyFace = body;
+  const heading = definition.headingFace === "body" ? body : faceOf(definition.headingFace);
+  if (heading) roles.headingFace = heading;
+  return copyData({ ...roles, ...definition.roles });
+}
+var APP_STYLES = deepFreeze(
+  Object.fromEntries(
+    APP_STYLE_IDS.map((id) => [
+      id,
+      {
+        id,
+        name: DEFINITIONS[id].name,
+        direction: DEFINITIONS[id].direction,
+        roles: deriveStyleRoles(id)
+      }
+    ])
+  )
+);
+function copyData(value) {
+  if (Array.isArray(value)) return value.map(copyData);
+  if (value !== null && typeof value === "object") {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, inner]) => [key, copyData(inner)])
+    );
+  }
+  return value;
+}
+function deepFreeze(value) {
+  if (value !== null && typeof value === "object" && !Object.isFrozen(value)) {
+    for (const inner of Object.values(value)) deepFreeze(inner);
+    Object.freeze(value);
+  }
+  return value;
+}
+function resolveRoleColor(color, palette, behind) {
+  const of = (name) => {
+    const value = palette[name];
+    if (!isColorTokenName(name) || value === void 0) {
+      throw new Error(`The palette has no ${name} to resolve a style's colour against.`);
+    }
+    return parseHex(value, `The palette's ${name}`);
+  };
+  let rgb = of(color.role).components;
+  if (color.toward) {
+    const share = clampUnit(color.toward.share);
+    rgb = mixOklab(rgb, of(color.toward.role).components, share);
+  }
+  if (color.alpha !== void 0 && color.alpha < 1) {
+    if (behind === void 0) {
+      throw new Error(`A translucent ${color.role} has no one colour: say what it lies over.`);
+    }
+    const under = parseHex(behind, "The colour behind").components;
+    const alpha = clampUnit(color.alpha);
+    rgb = rgb.map((channel, index) => under[index] + (channel - under[index]) * alpha);
+  }
+  return colorHex({ components: rgb});
+}
+function clampUnit(value) {
+  return Math.min(1, Math.max(0, value));
+}
+function mixOklab(a, b, share) {
+  const [l1, a1, b1] = toOklab(a);
+  const [l2, a2, b2] = toOklab(b);
+  const at = (from, to) => from + (to - from) * share;
+  return fromOklab([at(l1, l2), at(a1, a2), at(b1, b2)]).map(clampUnit);
+}
+var fromLinear = (c) => c <= 31308e-7 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055;
+function toOklab(rgb) {
+  const [r, g, b] = rgb.map(linearChannel);
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s
+  ];
+}
+function fromOklab([lightness, a, b]) {
+  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ].map((channel) => fromLinear(clampUnit(channel)));
+}
+
+export { APP_STYLES, APP_STYLE_IDS, BRAND_CONTRACT, BRAND_PRODUCERS, BRAND_VARIABLES, COLOR_TOKEN_NAMES, CONTRAST_PAIRS, MIN_CONTRAST, MIN_CONTROL_CONTRAST, TYPEFACES, assembleBrand, brandProducerId, brandProvenanceSchema, brandScope, colorHex, colorIsHex, compileBrand, contractVariable, contrastRatio, deriveBrandRoles, deriveStyleRoles, isAccentAdjusted, isActionFaint, isAppStyle, isColorTokenName, isTypeface, readableTextOn, resolveColor, resolveDarkSeeds, resolveRoleColor, srgbColorSchema, statedFactProblems, statedFactsSchema, validateBrandTokens };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map