@assure-one/design-system 1.31.0 → 1.33.0

package/dist/tokens/index.js

@@ -1,52 +1,52 @@
 // src/tokens/reference.ts
 var colors = {
   /* Surfaces */
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  bg3: "#F0F0ED",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8",
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  bg3: "#e7eaf1",
+  surface: "#ffffff",
+  surface2: "#f7f8fc",
   /* Foreground */
-  fg: "#0A0A0A",
-  fg2: "#38383B",
-  fg3: "#6B6B70",
-  fg4: "#9A9AA0",
-  fg5: "#C4C4C8",
+  fg: "#0a0a0a",
+  fg2: "#38383b",
+  fg3: "#5f5f64",
+  fg4: "#6b6b70",
+  fg5: "#9a9aa0",
   /* Rules */
-  rule: "#EAEAE6",
-  ruleSoft: "#F0F0EC",
-  ruleStrong: "#DADAD4",
+  rule: "#e4e7ef",
+  ruleSoft: "#eef0f5",
+  ruleStrong: "#d3d8e3",
   /* Accent (cyan) */
-  accent: "#0066FF",
-  accent2: "#0052CC",
-  accentTint: "#E8F0FF",
-  accentHover: "#005BE6",
-  accentActive: "#004FCC",
+  accent: "#6c42f8",
+  accent2: "#5127e8",
+  accentTint: "#efeaff",
+  accentHover: "#5e35f2",
+  accentActive: "#5127e8",
   /* Pro (purple) */
-  proBg: "#F4F1FF",
-  proBgHover: "#EEE9FF",
-  proBgActive: "#E4DDFF",
-  proFg: "#6C42F8",
-  proHover: "#5E35F2",
-  proActive: "#5127E8",
-  proDisabled: "#B7A7F3",
-  proLine: "#7B5BD8",
+  proBg: "#f4f1ff",
+  proBgHover: "#eee9ff",
+  proBgActive: "#e4ddff",
+  proFg: "#6c42f8",
+  proHover: "#5e35f2",
+  proActive: "#5127e8",
+  proDisabled: "#b7a7f3",
+  proLine: "#7b5bd8",
   /* Disabled */
-  fgDisabled: "#A7A7AC",
-  bgDisabled: "#F3F3F1",
+  fgDisabled: "#a7a7ac",
+  bgDisabled: "#f3f3f1",
   /* Status */
-  successFg: "#1F7A3D",
-  successBg: "#EAF6EE",
-  successLine: "#C5E5CF",
-  warningFg: "#B45F0A",
-  warningBg: "#FFF3E5",
-  warningLine: "#F5D5A8",
-  dangerFg: "#C43838",
-  dangerBg: "#FBEAEA",
-  dangerLine: "#ECC5C5",
+  successFg: "#1f7a3d",
+  successBg: "#eaf6ee",
+  successLine: "#c5e5cf",
+  warningFg: "#8a4606",
+  warningBg: "#fff3e5",
+  warningLine: "#f5d5a8",
+  dangerFg: "#c43838",
+  dangerBg: "#fbeaea",
+  dangerLine: "#ecc5c5",
   /* On-brand */
-  fgOnAccent: "#FFFFFF",
-  fgOnPro: "#FFFFFF"
+  fgOnAccent: "#ffffff",
+  fgOnPro: "#ffffff"
 };
 var typography = {
   family: {
@@ -72,17 +72,17 @@ var radii = {
   full: "9999px"
 };
 var shadows = {
-  quiet: "0 1px 2px rgba(10,10,10,0.03)",
-  card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)",
-  pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)",
-  focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)"
+  quiet: "0 1px 2px rgba(16, 20, 36, 0.05)",
+  card: "0 1px 2px rgba(16, 20, 36, 0.04), 0 4px 12px -4px rgba(16, 20, 36, 0.08)",
+  pop: "0 0 0 1px rgba(16, 20, 36, 0.03), 0 2px 4px -1px rgba(16, 20, 36, 0.06), 0 12px 28px -6px rgba(16, 20, 36, 0.14)",
+  focusRing: "0 0 0 2px #ffffff, 0 0 0 4px #6c42f8"
 };
 var overlays = {
   hover: "rgba(10, 10, 10, 0.03)",
   active: "rgba(10, 10, 10, 0.05)"
 };
 var layout = {
-  shellSidebarWidth: "256px",
+  shellSidebarWidth: "200px",
   shellHeaderHeight: "56px",
   contentPad: "32px"
 };
@@ -103,10 +103,10 @@ var spacing = {
   180: "180px"
 };
 var surfaces = {
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8"
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  surface: "#ffffff",
+  surface2: "#f7f8fc"
 };
 var motion = {
   ease: {
@@ -122,6 +122,28 @@ var motion = {
     slow: "400ms"
   }
 };
+var iconSizes = {
+  xs: "12px",
+  sm: "14px",
+  md: "16px",
+  lg: "20px"
+};
+var zIndex = {
+  base: 0,
+  sticky: 100,
+  overlay: 200,
+  modal: 300,
+  popover: 400,
+  toast: 500,
+  tooltip: 600
+};
+var breakpoints = {
+  sm: "40rem",
+  md: "48rem",
+  lg: "64rem",
+  xl: "80rem",
+  "2xl": "96rem"
+};
 var reference = {
   colors,
   typography,
@@ -131,7 +153,10 @@ var reference = {
   layout,
   motion,
   spacing,
-  surfaces
+  surfaces,
+  iconSizes,
+  zIndex,
+  breakpoints
 };
 
 // src/tokens/system.ts
@@ -329,6 +354,54 @@ var systemTokens = {
       }
     }
   },
+  /**
+   * Control sizing (amendment A1, W2-03). One outer height per size name, with
+   * the padding, gap, label size and glyph size derived from it.
+   *
+   * **Nothing reads these yet** and the numbers are gated on decision D5
+   * (implementation plan §3) — what each control renders *today* is in
+   * `docs/design-system/control-sizes.md`, and W2-05 is the task that unifies
+   * them. Referencing the scale here is also what keeps the custom properties
+   * in the published stylesheet, so `[data-ds-density="compact"]` has something
+   * to re-point.
+   */
+  control: {
+    height: {
+      xs: "var(--control-height-xs)",
+      sm: "var(--control-height-sm)",
+      md: "var(--control-height-md)",
+      lg: "var(--control-height-lg)",
+      xl: "var(--control-height-xl)"
+    },
+    paddingX: {
+      xs: "var(--control-padding-x-xs)",
+      sm: "var(--control-padding-x-sm)",
+      md: "var(--control-padding-x-md)",
+      lg: "var(--control-padding-x-lg)",
+      xl: "var(--control-padding-x-xl)"
+    },
+    gap: {
+      xs: "var(--control-gap-xs)",
+      sm: "var(--control-gap-sm)",
+      md: "var(--control-gap-md)",
+      lg: "var(--control-gap-lg)",
+      xl: "var(--control-gap-xl)"
+    },
+    fontSize: {
+      xs: "var(--control-font-size-xs)",
+      sm: "var(--control-font-size-sm)",
+      md: "var(--control-font-size-md)",
+      lg: "var(--control-font-size-lg)",
+      xl: "var(--control-font-size-xl)"
+    },
+    icon: {
+      xs: "var(--control-icon-xs)",
+      sm: "var(--control-icon-sm)",
+      md: "var(--control-icon-md)",
+      lg: "var(--control-icon-lg)",
+      xl: "var(--control-icon-xl)"
+    }
+  },
   layout: {
     shellSidebarWidth: "var(--shell-sidebar-w)",
     shellSidebarRailWidth: "var(--shell-sidebar-w-rail)",
@@ -346,6 +419,440 @@ var systemTokens = {
   }
 };
 
-export { colors, layout, motion, overlays, radii, reference, shadows, spacing, surfaces, systemTokens, typography };
+// src/foundation/theme/srgb.ts
+var SRGB_TO_LINEAR_1E6 = [
+  0,
+  304,
+  607,
+  911,
+  1214,
+  1518,
+  1821,
+  2125,
+  2428,
+  2732,
+  3035,
+  3347,
+  3677,
+  4025,
+  4391,
+  4777,
+  5182,
+  5605,
+  6049,
+  6512,
+  6995,
+  7499,
+  8023,
+  8568,
+  9134,
+  9721,
+  10330,
+  10960,
+  11612,
+  12286,
+  12983,
+  13702,
+  14444,
+  15209,
+  15996,
+  16807,
+  17642,
+  18500,
+  19382,
+  20289,
+  21219,
+  22174,
+  23153,
+  24158,
+  25187,
+  26241,
+  27321,
+  28426,
+  29557,
+  30713,
+  31896,
+  33105,
+  34340,
+  35601,
+  36889,
+  38204,
+  39546,
+  40915,
+  42311,
+  43735,
+  45186,
+  46665,
+  48172,
+  49707,
+  51269,
+  52861,
+  54480,
+  56128,
+  57805,
+  59511,
+  61246,
+  63010,
+  64803,
+  66626,
+  68478,
+  70360,
+  72272,
+  74214,
+  76185,
+  78187,
+  80220,
+  82283,
+  84376,
+  86500,
+  88656,
+  90842,
+  93059,
+  95307,
+  97587,
+  99899,
+  102242,
+  104616,
+  107023,
+  109462,
+  111932,
+  114435,
+  116971,
+  119538,
+  122139,
+  124772,
+  127438,
+  130136,
+  132868,
+  135633,
+  138432,
+  141263,
+  144128,
+  147027,
+  149960,
+  152926,
+  155926,
+  158961,
+  162029,
+  165132,
+  168269,
+  171441,
+  174647,
+  177888,
+  181164,
+  184475,
+  187821,
+  191202,
+  194618,
+  198069,
+  201556,
+  205079,
+  208637,
+  212231,
+  215861,
+  219526,
+  223228,
+  226966,
+  230740,
+  234551,
+  238398,
+  242281,
+  246201,
+  250158,
+  254152,
+  258183,
+  262251,
+  266356,
+  270498,
+  274677,
+  278894,
+  283149,
+  287441,
+  291771,
+  296138,
+  300544,
+  304987,
+  309469,
+  313989,
+  318547,
+  323143,
+  327778,
+  332452,
+  337164,
+  341914,
+  346704,
+  351533,
+  356400,
+  361307,
+  366253,
+  371238,
+  376262,
+  381326,
+  386429,
+  391572,
+  396755,
+  401978,
+  407240,
+  412543,
+  417885,
+  423268,
+  428690,
+  434154,
+  439657,
+  445201,
+  450786,
+  456411,
+  462077,
+  467784,
+  473531,
+  479320,
+  485150,
+  491021,
+  496933,
+  502886,
+  508881,
+  514918,
+  520996,
+  527115,
+  533276,
+  539479,
+  545724,
+  552011,
+  558340,
+  564712,
+  571125,
+  577580,
+  584078,
+  590619,
+  597202,
+  603827,
+  610496,
+  617207,
+  623960,
+  630757,
+  637597,
+  644480,
+  651406,
+  658375,
+  665387,
+  672443,
+  679542,
+  686685,
+  693872,
+  701102,
+  708376,
+  715694,
+  723055,
+  730461,
+  737910,
+  745404,
+  752942,
+  760525,
+  768151,
+  775822,
+  783538,
+  791298,
+  799103,
+  806952,
+  814847,
+  822786,
+  830770,
+  838799,
+  846873,
+  854993,
+  863157,
+  871367,
+  879622,
+  887923,
+  896269,
+  904661,
+  913099,
+  921582,
+  930111,
+  938686,
+  947307,
+  955973,
+  964686,
+  973445,
+  982251,
+  991102,
+  1e6
+];
+var HEX_3 = /^#[0-9a-fA-F]{3}$/;
+var HEX_6 = /^#[0-9a-fA-F]{6}$/;
+var HEX_DIGITS = "0123456789abcdef";
+function parseHexColor(value) {
+  if (HEX_6.test(value)) {
+    const n = Number.parseInt(value.slice(1), 16);
+    return [n >> 16 & 255, n >> 8 & 255, n & 255];
+  }
+  if (HEX_3.test(value)) {
+    const n = Number.parseInt(value.slice(1), 16);
+    const r = n >> 8 & 15;
+    const g = n >> 4 & 15;
+    const b = n & 15;
+    return [r * 17, g * 17, b * 17];
+  }
+  return null;
+}
+function formatHexColor([r, g, b]) {
+  const byte = (v) => HEX_DIGITS[v >> 4 & 15] + HEX_DIGITS[v & 15];
+  return `#${byte(r)}${byte(g)}${byte(b)}`;
+}
+function relativeLuminance([r, g, b]) {
+  const lr = SRGB_TO_LINEAR_1E6[r] / 1e6;
+  const lg = SRGB_TO_LINEAR_1E6[g] / 1e6;
+  const lb = SRGB_TO_LINEAR_1E6[b] / 1e6;
+  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const lighter = la > lb ? la : lb;
+  const darker = la > lb ? lb : la;
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function mixSrgb(a, b, percent) {
+  const mix = (x, y) => Math.round((x * percent + y * (100 - percent)) / 100);
+  return [mix(a[0], b[0]), mix(a[1], b[1]), mix(a[2], b[2])];
+}
+var WHITE = [255, 255, 255];
+var BLACK = [0, 0, 0];
+function readableInk(fill) {
+  return contrastRatio(BLACK, fill) >= contrastRatio(WHITE, fill) ? BLACK : WHITE;
+}
+function darkenUntilContrast(colour, against, minRatio) {
+  for (let percent = 100; percent >= 0; percent -= 1) {
+    const candidate = mixSrgb(colour, BLACK, percent);
+    if (contrastRatio(candidate, against) >= minRatio) return candidate;
+  }
+  return BLACK;
+}
+
+// src/foundation/theme/brand-theme.ts
+var BRAND_THEME_PROPERTIES = [
+  "--ds-color-action-brand-bg",
+  "--ds-color-action-brand-bg-hover",
+  "--ds-color-action-brand-bg-active",
+  "--ds-color-action-brand-bg-disabled",
+  "--ds-color-action-brand-subtle-bg",
+  "--ds-color-action-brand-subtle-bg-hover",
+  "--ds-color-action-brand-subtle-bg-active",
+  "--ds-color-action-brand-border",
+  "--ds-color-action-brand-ring",
+  "--ds-color-action-brand-fg",
+  "--ds-color-action-accent-bg",
+  "--ds-color-action-accent-bg-strong",
+  "--ds-color-action-accent-bg-hover",
+  "--ds-color-action-accent-bg-active",
+  "--ds-color-action-accent-subtle-bg",
+  "--ds-color-action-accent-ring",
+  "--ds-color-action-accent-fg",
+  "--ds-color-border-focus",
+  "--ds-focus-ring-color",
+  "--ds-focus-ring-border",
+  "--ds-gradient-brand",
+  "--ds-compat-color-brand-soft",
+  "--ds-compat-color-brand-soft-foreground"
+];
+var MIN_FILL_CONTRAST = 3;
+var MIN_TEXT_CONTRAST = 4.5;
+var CANVAS = WHITE;
+var RAMP = {
+  hover: 88,
+  active: 74,
+  disabled: 42,
+  subtle: 8,
+  subtleHover: 13,
+  subtleActive: 20,
+  border: 45,
+  ring: 20,
+  /** The soft tint and its ink, which the app-vocabulary bridge reads. */
+  soft: 12,
+  softInk: 68
+};
+var towardsInk = (colour, percent) => `color-mix(in srgb, ${colour} ${percent}%, var(--ds-color-content))`;
+var towardsTransparent = (colour, percent) => `color-mix(in srgb, ${colour} ${percent}%, transparent)`;
+var ACCEPTED = '#rgb or #rrggbb, for example "#6c42f8"';
+var SEED_KEYS = /* @__PURE__ */ new Set(["brand", "accent"]);
+function describe(value) {
+  if (typeof value === "string") return JSON.stringify(value);
+  if (value === null) return "null";
+  if (Array.isArray(value)) return "an array";
+  return typeof value;
+}
+function readColour(key, value) {
+  if (typeof value !== "string") {
+    throw new TypeError(
+      `createBrandTheme: "${key}" must be a hex colour string (${ACCEPTED}), received ${describe(value)}.`
+    );
+  }
+  const rgb = parseHexColor(value);
+  if (!rgb) {
+    throw new TypeError(
+      `createBrandTheme: "${key}" must be a hex colour (${ACCEPTED}), received ${describe(value)}. Named colours, rgb()/hsl() and eight-digit hex with alpha are not accepted \u2014 a brand seed must be opaque and unambiguous.`
+    );
+  }
+  return rgb;
+}
+function validateSeed(seed) {
+  if (seed === null || typeof seed !== "object" || Array.isArray(seed)) {
+    throw new TypeError(
+      `createBrandTheme: expected a seed object with a "brand" colour, received ${describe(seed)}.`
+    );
+  }
+  const unknown = Object.keys(seed).filter((key) => !SEED_KEYS.has(key));
+  if (unknown.length) {
+    throw new TypeError(
+      `createBrandTheme: unknown seed ${unknown.length === 1 ? "key" : "keys"} ${unknown.map((key) => JSON.stringify(key)).join(", ")}. The seed accepts "brand" and an optional "accent" (decision D7).`
+    );
+  }
+}
+function clampFill(seed) {
+  if (contrastRatio(seed, CANVAS) >= MIN_FILL_CONTRAST) return seed;
+  return darkenUntilContrast(seed, CANVAS, MIN_FILL_CONTRAST);
+}
+function createBrandTheme(seed) {
+  validateSeed(seed);
+  const brandSeed = readColour("brand", seed.brand);
+  const accentSeed = seed.accent === void 0 || seed.accent === null ? brandSeed : readColour("accent", seed.accent);
+  const brand = clampFill(brandSeed);
+  const accent = clampFill(accentSeed);
+  const brandHex = formatHexColor(brand);
+  const accentHex = formatHexColor(accent);
+  const soft = mixSrgb(brand, WHITE, RAMP.soft);
+  const softInk = darkenUntilContrast(mixSrgb(brand, BLACK, RAMP.softInk), soft, MIN_TEXT_CONTRAST);
+  return Object.freeze({
+    "--ds-color-action-brand-bg": brandHex,
+    "--ds-color-action-brand-bg-hover": towardsInk(brandHex, RAMP.hover),
+    "--ds-color-action-brand-bg-active": towardsInk(brandHex, RAMP.active),
+    "--ds-color-action-brand-bg-disabled": formatHexColor(mixSrgb(brand, WHITE, RAMP.disabled)),
+    "--ds-color-action-brand-subtle-bg": formatHexColor(mixSrgb(brand, WHITE, RAMP.subtle)),
+    "--ds-color-action-brand-subtle-bg-hover": formatHexColor(
+      mixSrgb(brand, WHITE, RAMP.subtleHover)
+    ),
+    "--ds-color-action-brand-subtle-bg-active": formatHexColor(
+      mixSrgb(brand, WHITE, RAMP.subtleActive)
+    ),
+    "--ds-color-action-brand-border": formatHexColor(mixSrgb(brand, WHITE, RAMP.border)),
+    "--ds-color-action-brand-ring": towardsTransparent(brandHex, RAMP.ring),
+    "--ds-color-action-brand-fg": formatHexColor(readableInk(brand)),
+    "--ds-color-action-accent-bg": accentHex,
+    "--ds-color-action-accent-bg-strong": towardsInk(accentHex, RAMP.active),
+    "--ds-color-action-accent-bg-hover": towardsInk(accentHex, RAMP.hover),
+    "--ds-color-action-accent-bg-active": towardsInk(accentHex, RAMP.active),
+    "--ds-color-action-accent-subtle-bg": formatHexColor(mixSrgb(accent, WHITE, RAMP.subtle)),
+    "--ds-color-action-accent-ring": towardsTransparent(accentHex, RAMP.ring),
+    "--ds-color-action-accent-fg": formatHexColor(readableInk(accent)),
+    "--ds-color-border-focus": accentHex,
+    "--ds-focus-ring-color": towardsTransparent(brandHex, RAMP.ring),
+    "--ds-focus-ring-border": brandHex,
+    "--ds-gradient-brand": `linear-gradient(135deg, ${brandHex}, ${towardsInk(brandHex, RAMP.hover)})`,
+    "--ds-compat-color-brand-soft": formatHexColor(soft),
+    "--ds-compat-color-brand-soft-foreground": formatHexColor(softInk)
+  });
+}
+
+export { BRAND_THEME_PROPERTIES, breakpoints, colors, createBrandTheme, iconSizes, layout, motion, overlays, radii, reference, shadows, spacing, surfaces, systemTokens, typography, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map