@gryt/theme 0.7.0 → 0.8.0

package/dist/index.js

@@ -1,4 +1,4 @@
-function P(r) {
+function _(r) {
   return r <= 0.04045 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
 }
 function A(r) {
@@ -15,12 +15,12 @@ function H(r) {
     parseInt(t.slice(4, 6), 16) / 255
   ];
 }
-function _([r, a, t]) {
+function N([r, a, t]) {
   const e = (o) => Math.round(x(o) * 255).toString(16).padStart(2, "0");
   return `#${e(r)}${e(a)}${e(t)}`;
 }
 function R(r) {
-  const [a, t, e] = H(r).map(P), o = Math.cbrt(
+  const [a, t, e] = H(r).map(_), o = Math.cbrt(
     0.4122214708 * a + 0.5363325363 * t + 0.0514459929 * e
   ), c = Math.cbrt(
     0.2119034982 * a + 0.6806995451 * t + 0.1073969566 * e
@@ -35,7 +35,7 @@ function R(r) {
 }
 function m({ l: r, c: a, h: t }) {
   const e = a * Math.cos(t * Math.PI / 180), o = a * Math.sin(t * Math.PI / 180), c = (r + 0.3963377774 * e + 0.2158037573 * o) ** 3, n = (r - 0.1055613458 * e - 0.0638541728 * o) ** 3, d = (r - 0.0894841775 * e - 1.291485548 * o) ** 3;
-  return _([
+  return N([
     A(x(4.0767416621 * c - 3.3077115913 * n + 0.2309699292 * d)),
     A(x(-1.2684380046 * c + 2.6097574011 * n - 0.3413193965 * d)),
     A(x(-0.0041960863 * c - 0.7034186147 * n + 1.707614701 * d))
@@ -48,7 +48,7 @@ function h(r, a) {
   const o = R(a).l, c = Math.min(0.95, Math.max(0.84, o + 0.04)), n = Math.min(0.98, Math.max(c + 0.06, 0.93));
   return e.push(m({ l: c, c: 0.11, h: t })), e.push(m({ l: n, c: 0.055, h: t })), e;
 }
-const W = [
+const q = [
   0.187,
   0.231,
   0.245,
@@ -61,7 +61,7 @@ const W = [
   0.57,
   0.627,
   0.908
-], q = [
+], K = [
   0.011,
   0.014,
   0.016,
@@ -75,7 +75,7 @@ const W = [
   0,
   8e-3
 ];
-function N(r) {
+function U(r) {
   const a = {
     0: r.bg,
     1: r.surface,
@@ -84,8 +84,8 @@ function N(r) {
     10: r.muted,
     11: r.text
   }, t = R(r.border).h;
-  return W.map(
-    (e, o) => a[o] ?? m({ l: e, c: q[o], h: t })
+  return q.map(
+    (e, o) => a[o] ?? m({ l: e, c: K[o], h: t })
   );
 }
 function S(r, a) {
@@ -98,13 +98,13 @@ function S(r, a) {
       i > p ? c = Math.max(c, p < 1 ? (i - p) / (1 - p) : 0) : i < p && (c = Math.max(c, p > 0 ? (p - i) / p : 0));
     }
     if (c < 1e-6) return "transparent";
-    const n = _(
+    const n = N(
       o.map((u, i) => x(t[i] + (u - t[i]) / c))
     ), [d, f, g] = H(n).map((u) => Math.round(u * 255));
     return `rgb(${d} ${f} ${g} / ${(c * 100).toFixed(1)}%)`;
   });
 }
-const K = [
+const J = [
   0.962,
   1,
   0.978,
@@ -117,7 +117,7 @@ const K = [
   0.61,
   0.48,
   0.25
-], J = [
+], X = [
   6e-3,
   0,
   4e-3,
@@ -130,8 +130,8 @@ const K = [
   0.014,
   0.012,
   0.014
-], X = [0.975, 0.955, 0.93, 0.905, 0.878, 0.845, 0.795, 0.72], Q = [0.012, 0.024, 0.038, 0.05, 0.062, 0.074, 0.09, 0.11];
-function U(r) {
+], Q = [0.975, 0.955, 0.93, 0.905, 0.878, 0.845, 0.795, 0.72], V = [0.012, 0.024, 0.038, 0.05, 0.062, 0.074, 0.09, 0.11];
+function F(r) {
   const a = {
     0: r.bg,
     1: r.surface,
@@ -140,18 +140,18 @@ function U(r) {
     10: r.muted,
     11: r.text
   }, t = R(r.border).h;
-  return K.map(
-    (e, o) => a[o] ?? m({ l: e, c: J[o], h: t })
+  return J.map(
+    (e, o) => a[o] ?? m({ l: e, c: X[o], h: t })
   );
 }
 function b(r) {
-  const { l: a, c: t, h: e } = R(r), o = X.map(
-    (c, n) => m({ l: c, c: Q[n], h: e })
+  const { l: a, c: t, h: e } = R(r), o = Q.map(
+    (c, n) => m({ l: c, c: V[n], h: e })
   );
   return o.push(r), o.push(m({ l: Math.max(0, a - 0.07), c: t, h: e })), o.push(m({ l: 0.46, c: 0.15, h: e })), o.push(m({ l: 0.33, c: 0.1, h: e })), o;
 }
 function E(r) {
-  const [a, t, e] = H(r).map(P);
+  const [a, t, e] = H(r).map(_);
   return 0.2126 * a + 0.7152 * t + 0.0722 * e;
 }
 function se(r, a) {
@@ -197,7 +197,7 @@ const s = {
   muted: "#5b5d65",
   text: "#1f2129"
 }, C = {
-  neutral: N({
+  neutral: U({
     bg: s.color.bg,
     surface: s.color.surface,
     surfaceRaised: s.color.surfaceRaised,
@@ -214,13 +214,13 @@ const s = {
   danger: h(s.color.danger, s.color.dangerLight),
   warning: h(s.color.warning, s.color.warning)
 }, T = {
-  neutral: U(l),
+  neutral: F(l),
   accent: b(s.color.accent),
   secondary: b(s.color.secondary),
   success: b(s.color.success),
   danger: b(s.color.danger),
   warning: b(s.color.warning)
-}, F = T.neutral[3], de = {
+}, O = T.neutral[3], de = {
   neutral: S(C.neutral, s.color.bg),
   accent: S(C.accent, s.color.bg)
 }, fe = {
@@ -231,7 +231,7 @@ function ue(r = {}) {
   const a = r.appearance === "light", e = { ...a ? {
     ...s.color,
     ...l,
-    surfaceHover: F
+    surfaceHover: O
   } : s.color, ...r.color }, o = { ...s.radius, ...r.radius }, c = {
     bg: e.bg,
     surface: e.surface,
@@ -240,14 +240,14 @@ function ue(r = {}) {
     muted: e.muted,
     text: e.text
   }, n = a ? {
-    neutral: U(c),
+    neutral: F(c),
     accent: b(e.accent),
     secondary: b(e.secondary),
     success: b(e.success),
     danger: b(e.danger),
     warning: b(e.warning)
   } : {
-    neutral: N(c),
+    neutral: U(c),
     accent: h(e.accent, e.accentLight),
     secondary: h(e.secondary, e.secondaryLight),
     success: h(e.success, e.success),
@@ -322,7 +322,7 @@ const v = [
   "onAccent",
   "onSecondary",
   "onDanger"
-], O = [
+], B = [
   "bg",
   "surface",
   "surfaceRaised",
@@ -330,9 +330,9 @@ const v = [
   "border",
   "muted",
   "text"
-], D = ["sm", "md", "lg", "xl", "full"], V = 60;
+], D = ["sm", "md", "lg", "xl", "full"], Z = 60;
 function M(r) {
-  return r.replace(/\s+/g, " ").trim().slice(0, V);
+  return r.replace(/\s+/g, " ").trim().slice(0, Z);
 }
 const L = {
   hue: {
@@ -362,7 +362,7 @@ const L = {
     bg: l.bg,
     surface: l.surface,
     surfaceRaised: l.surfaceRaised,
-    surfaceHover: F,
+    surfaceHover: O,
     border: l.border,
     muted: l.muted,
     text: l.text
@@ -379,13 +379,13 @@ function G(r) {
     radius: { ...r.radius }
   };
 }
-function Z(r, a) {
+function ee(r, a) {
   return a === "light" && r.lightHue !== null ? r.lightHue : r.hue;
 }
 function ge(r, a) {
   return {
     appearance: a,
-    color: { ...Z(r, a), ...r[a] },
+    color: { ...ee(r, a), ...r[a] },
     radius: { ...r.radius }
   };
 }
@@ -401,7 +401,7 @@ const w = {
   onAccent: "on-accent",
   onSecondary: "on-secondary",
   onDanger: "on-danger"
-}, B = {
+}, j = {
   bg: "bg",
   surface: "surface",
   surfaceRaised: "raised",
@@ -409,9 +409,9 @@ const w = {
   border: "border",
   muted: "muted",
   text: "text"
-}, ee = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
-function j(r) {
-  return ee.test(r.trim());
+}, re = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+function W(r) {
+  return re.test(r.trim());
 }
 function $(r) {
   const a = r.trim().toLowerCase();
@@ -427,8 +427,8 @@ function ie(r, a) {
       t.set(`lh-${w[c]}`, e(r.lightHue[c]));
   for (const c of ["dark", "light"]) {
     const n = c === "dark" ? "d" : "l";
-    for (const d of O)
-      r[c][d] !== L[c][d] && t.set(`${n}-${B[d]}`, e(r[c][d]));
+    for (const d of B)
+      r[c][d] !== L[c][d] && t.set(`${n}-${j[d]}`, e(r[c][d]));
   }
   for (const c of D)
     r.radius[c] !== L.radius[c] && t.set(`r-${c}`, String(r.radius[c]));
@@ -437,18 +437,18 @@ function ie(r, a) {
 function le(r) {
   const a = r.trim();
   if (a === "") return null;
-  if (a.startsWith("{")) return ae(a);
+  if (a.startsWith("{")) return ce(a);
   const t = a.includes("?") ? a.slice(a.indexOf("?") + 1) : a;
-  return re(new URLSearchParams(t));
+  return ae(new URLSearchParams(t));
 }
-function re(r) {
+function ae(r) {
   const a = G(L);
   let t = !1;
   const e = (c) => {
     const n = r.get(c);
     if (n === null) return null;
     const d = n.startsWith("#") ? n : `#${n}`;
-    return j(d) ? (t = !0, $(d)) : null;
+    return W(d) ? (t = !0, $(d)) : null;
   }, o = M(r.get("name") ?? "");
   o !== "" && (a.name = o, t = !0);
   for (const c of v) {
@@ -465,8 +465,8 @@ function re(r) {
   }
   for (const c of ["dark", "light"]) {
     const n = c === "dark" ? "d" : "l";
-    for (const d of O) {
-      const f = e(`${n}-${B[d]}`);
+    for (const d of B) {
+      const f = e(`${n}-${j[d]}`);
       f !== null && (a[c][d] = f);
     }
   }
@@ -479,7 +479,7 @@ function re(r) {
     appearance: r.get("mode") === "light" ? "light" : "dark"
   } : null;
 }
-function ae(r) {
+function ce(r) {
   let a;
   try {
     a = JSON.parse(r);
@@ -492,7 +492,7 @@ function ae(r) {
   const c = (n, d) => {
     if (!(typeof n != "object" || n === null))
       for (const [f, g] of Object.entries(n))
-        typeof g == "string" && j(g) && f in d && (d[f] = $(g), o = !0);
+        typeof g == "string" && W(g) && f in d && (d[f] = $(g), o = !0);
   };
   if (typeof t.name == "string") {
     const n = M(t.name);
@@ -511,7 +511,7 @@ function ae(r) {
     }
   return o ? { theme: e, appearance: "dark" } : null;
 }
-const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg: 14, xl: 18, full: 999 }, ce = { sm: 4, md: 6, lg: 10, xl: 14, full: 6 }, te = { sm: 6, md: 8, lg: 10, xl: 14, full: 10 }, I = { sm: 2, md: 4, lg: 6, xl: 8, full: 4 }, ne = { sm: 8, md: 8, lg: 8, xl: 8, full: 8 }, oe = [
+const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg: 14, xl: 18, full: 999 }, I = { sm: 4, md: 6, lg: 10, xl: 14, full: 6 }, te = { sm: 6, md: 8, lg: 10, xl: 14, full: 10 }, P = { sm: 2, md: 4, lg: 6, xl: 8, full: 4 }, ne = { sm: 8, md: 8, lg: 8, xl: 8, full: 8 }, oe = [
   {
     id: "gryt",
     name: "Gryt",
@@ -900,6 +900,74 @@ const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg:
       radius: y
     }
   },
+  {
+    /* Four photographs: snow-loaded spruces through a gym window, a dark room
+           lit by white strips, a white can on black rubber, grey sweatpants.
+    
+           Paper is already near-monochrome, so this earns its place by being cold
+           rather than neutral. Every grey carries the blue that overcast snow
+           light has — Paper's are hueless, and side by side the difference is the
+           whole theme.
+    
+           The accent is the white can on the black floor, which is why this is the
+           only Gryt preset with a split `lightHue`. A near-white accent is the
+           point in the dark half and invisible in the light one, so light gets the
+           colour of a wet window frame instead and keeps the same job. */
+    id: "winter-arc",
+    name: "Winter Arc",
+    note: "Cold monochrome. A near-white accent in the dark, snow-light greys.",
+    group: "Gryt",
+    theme: {
+      name: "Winter Arc",
+      hue: {
+        accent: "#dce6ec",
+        accentLight: "#f0f6f9",
+        secondary: "#7d95a3",
+        secondaryLight: "#9db1bc",
+        success: "#7fa88d",
+        danger: "#c2686b",
+        dangerLight: "#d68b8d",
+        warning: "#b9a068",
+        onAccent: "#0b0d0f",
+        onSecondary: "#0b1114",
+        onDanger: "#1b0c0d"
+      },
+      lightHue: {
+        accent: "#2b3a44",
+        accentLight: "#43596a",
+        secondary: "#55707f",
+        secondaryLight: "#6f8b9a",
+        success: "#4a7059",
+        danger: "#a4494c",
+        dangerLight: "#b96b6e",
+        warning: "#856c33",
+        onAccent: "#eef3f6",
+        onSecondary: "#eef3f6",
+        onDanger: "#fdf2f2"
+      },
+      dark: {
+        bg: "#0b0d0f",
+        surface: "#111417",
+        surfaceRaised: "#171b1f",
+        surfaceHover: "#1f252a",
+        border: "#2a3238",
+        muted: "#8b979f",
+        text: "#eef3f6"
+      },
+      light: {
+        bg: "#eaeef1",
+        surface: "#ffffff",
+        surfaceRaised: "#f4f7f9",
+        surfaceHover: "#dde4e9",
+        border: "#c6d0d7",
+        muted: "#55626b",
+        text: "#0f1417"
+      },
+      /* Hard corners on purpose. The reference is window mullions, plate
+         edges and rubber floor tiles, and Paper already has the soft set. */
+      radius: I
+    }
+  },
   {
     id: "signal",
     name: "Signal",
@@ -939,7 +1007,7 @@ const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg:
         muted: "#3d3d3d",
         text: "#000000"
       },
-      radius: I
+      radius: P
     }
   },
   {
@@ -1175,7 +1243,7 @@ const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg:
         muted: "#59636e",
         text: "#1f2328"
       },
-      radius: ce
+      radius: I
     }
   },
   {
@@ -1331,7 +1399,7 @@ const y = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, k = { sm: 6, md: 8, lg:
         muted: "#586e75",
         text: "#073642"
       },
-      radius: I
+      radius: P
     }
   }
 ], he = new Map(
@@ -1433,9 +1501,9 @@ function xe(r, a) {
 }
 export {
   v as GRYT_HUE_KEYS,
-  O as GRYT_NEUTRAL_KEYS,
+  B as GRYT_NEUTRAL_KEYS,
   D as GRYT_RADIUS_KEYS,
-  V as GRYT_THEME_NAME_MAX,
+  Z as GRYT_THEME_NAME_MAX,
   S as alphaScale,
   G as cloneGrytTheme,
   se as contrast,
@@ -1453,20 +1521,20 @@ export {
   C as grytScales,
   T as grytScalesLight,
   L as grytTheme,
-  Z as grytThemeHues,
+  ee as grytThemeHues,
   ge as grytThemeToOptions,
   s as grytTokens,
   R as hexToOklch,
   H as hexToRgb,
   h as hueScale,
   b as hueScaleLight,
-  j as isHexColor,
-  N as neutralScale,
-  U as neutralScaleLight,
+  W as isHexColor,
+  U as neutralScale,
+  F as neutralScaleLight,
   $ as normalizeHexColor,
   M as normalizeThemeName,
   m as oklchToHex,
-  _ as rgbToHex,
+  N as rgbToHex,
   xe as sampleCurve,
   be as springSamples,
   ye as springTightSamples