@gryt/theme 0.1.0 → 0.2.0

package/dist/index.js

@@ -16,17 +16,17 @@ function x(r) {
   ];
 }
 function N([r, a, t]) {
-  const e = (s) => Math.round(p(s) * 255).toString(16).padStart(2, "0");
+  const e = (o) => Math.round(p(o) * 255).toString(16).padStart(2, "0");
   return `#${e(r)}${e(a)}${e(t)}`;
 }
-function R(r) {
-  const [a, t, e] = x(r).map(G), s = Math.cbrt(
+function S(r) {
+  const [a, t, e] = x(r).map(G), o = Math.cbrt(
     0.4122214708 * a + 0.5363325363 * t + 0.0514459929 * e
   ), c = Math.cbrt(
     0.2119034982 * a + 0.6806995451 * t + 0.1073969566 * e
   ), n = Math.cbrt(
     0.0883024619 * a + 0.2817188376 * t + 0.6299787005 * e
-  ), f = 0.2104542553 * s + 0.793617785 * c - 0.0040720468 * n, d = 1.9779984951 * s - 2.428592205 * c + 0.4505937099 * n, g = 0.0259040371 * s + 0.7827717662 * c - 0.808675766 * n;
+  ), f = 0.2104542553 * o + 0.793617785 * c - 0.0040720468 * n, d = 1.9779984951 * o - 2.428592205 * c + 0.4505937099 * n, g = 0.0259040371 * o + 0.7827717662 * c - 0.808675766 * n;
   return {
     l: f,
     c: Math.hypot(d, g),
@@ -34,7 +34,7 @@ function R(r) {
   };
 }
 function y({ l: r, c: a, h: t }) {
-  const e = a * Math.cos(t * Math.PI / 180), s = a * Math.sin(t * Math.PI / 180), c = (r + 0.3963377774 * e + 0.2158037573 * s) ** 3, n = (r - 0.1055613458 * e - 0.0638541728 * s) ** 3, f = (r - 0.0894841775 * e - 1.291485548 * s) ** 3;
+  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, f = (r - 0.0894841775 * e - 1.291485548 * o) ** 3;
   return N([
     k(p(4.0767416621 * c - 3.3077115913 * n + 0.2309699292 * f)),
     k(p(-1.2684380046 * c + 2.6097574011 * n - 0.3413193965 * f)),
@@ -43,9 +43,9 @@ function y({ l: r, c: a, h: t }) {
 }
 const F = [0.195, 0.24, 0.27, 0.3, 0.33, 0.37, 0.43, 0.52], W = [0.014, 0.026, 0.04, 0.052, 0.062, 0.072, 0.084, 0.1];
 function h(r, a) {
-  const { h: t } = R(r), e = F.map((f, d) => y({ l: f, c: W[d], h: t }));
+  const { h: t } = S(r), e = F.map((f, d) => y({ l: f, c: W[d], h: t }));
   e.push(r, a);
-  const s = R(a).l, c = Math.min(0.95, Math.max(0.84, s + 0.04)), n = Math.min(0.98, Math.max(c + 0.06, 0.93));
+  const o = S(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(y({ l: c, c: 0.11, h: t })), e.push(y({ l: n, c: 0.055, h: t })), e;
 }
 const B = [
@@ -83,23 +83,23 @@ function I(r) {
     5: r.border,
     10: r.muted,
     11: r.text
-  }, t = R(r.border).h;
+  }, t = S(r.border).h;
   return B.map(
-    (e, s) => a[s] ?? y({ l: e, c: K[s], h: t })
+    (e, o) => a[o] ?? y({ l: e, c: K[o], h: t })
   );
 }
-function w(r, a) {
+function R(r, a) {
   const t = x(a);
   return r.map((e) => {
-    const s = x(e);
+    const o = x(e);
     let c = 0;
     for (let u = 0; u < 3; u++) {
-      const i = s[u], m = t[u];
+      const i = o[u], m = t[u];
       i > m ? c = Math.max(c, m < 1 ? (i - m) / (1 - m) : 0) : i < m && (c = Math.max(c, m > 0 ? (m - i) / m : 0));
     }
     if (c < 1e-6) return "transparent";
     const n = N(
-      s.map((u, i) => p(t[i] + (u - t[i]) / c))
+      o.map((u, i) => p(t[i] + (u - t[i]) / c))
     ), [f, d, g] = x(n).map((u) => Math.round(u * 255));
     return `rgb(${f} ${d} ${g} / ${(c * 100).toFixed(1)}%)`;
   });
@@ -139,16 +139,16 @@ function U(r) {
     5: r.border,
     10: r.muted,
     11: r.text
-  }, t = R(r.border).h;
+  }, t = S(r.border).h;
   return q.map(
-    (e, s) => a[s] ?? y({ l: e, c: J[s], h: t })
+    (e, o) => a[o] ?? y({ l: e, c: J[o], h: t })
   );
 }
 function b(r) {
-  const { l: a, c: t, h: e } = R(r), s = X.map(
+  const { l: a, c: t, h: e } = S(r), o = X.map(
     (c, n) => y({ l: c, c: Q[n], h: e })
   );
-  return s.push(r), s.push(y({ l: Math.max(0, a - 0.07), c: t, h: e })), s.push(y({ l: 0.46, c: 0.15, h: e })), s.push(y({ l: 0.33, c: 0.1, h: e })), s;
+  return o.push(r), o.push(y({ l: Math.max(0, a - 0.07), c: t, h: e })), o.push(y({ l: 0.46, c: 0.15, h: e })), o.push(y({ l: 0.33, c: 0.1, h: e })), o;
 }
 function E(r) {
   const [a, t, e] = x(r).map(G);
@@ -158,7 +158,7 @@ function oe(r, a) {
   const t = E(r), e = E(a);
   return (Math.max(t, e) + 0.05) / (Math.min(t, e) + 0.05);
 }
-const o = {
+const s = {
   color: {
     bg: "#111318",
     surface: "#1a1d24",
@@ -198,41 +198,41 @@ const o = {
   text: "#1f2129"
 }, _ = {
   neutral: I({
-    bg: o.color.bg,
-    surface: o.color.surface,
-    surfaceRaised: o.color.surfaceRaised,
-    border: o.color.border,
-    muted: o.color.muted,
-    text: o.color.text
+    bg: s.color.bg,
+    surface: s.color.surface,
+    surfaceRaised: s.color.surfaceRaised,
+    border: s.color.border,
+    muted: s.color.muted,
+    text: s.color.text
   }),
-  accent: h(o.color.accent, o.color.accentLight),
+  accent: h(s.color.accent, s.color.accentLight),
   secondary: h(
-    o.color.secondary,
-    o.color.secondaryLight
+    s.color.secondary,
+    s.color.secondaryLight
   ),
-  success: h(o.color.success, o.color.success),
-  danger: h(o.color.danger, o.color.dangerLight),
-  warning: h(o.color.warning, o.color.warning)
+  success: h(s.color.success, s.color.success),
+  danger: h(s.color.danger, s.color.dangerLight),
+  warning: h(s.color.warning, s.color.warning)
 }, T = {
   neutral: U(l),
-  accent: b(o.color.accent),
-  secondary: b(o.color.secondary),
-  success: b(o.color.success),
-  danger: b(o.color.danger),
-  warning: b(o.color.warning)
+  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)
 }, C = T.neutral[3], se = {
-  neutral: w(_.neutral, o.color.bg),
-  accent: w(_.accent, o.color.bg)
+  neutral: R(_.neutral, s.color.bg),
+  accent: R(_.accent, s.color.bg)
 }, fe = {
-  neutral: w(T.neutral, l.bg),
-  accent: w(T.accent, l.bg)
+  neutral: R(T.neutral, l.bg),
+  accent: R(T.accent, l.bg)
 };
 function de(r = {}) {
   const a = r.appearance === "light", e = { ...a ? {
-    ...o.color,
+    ...s.color,
     ...l,
     surfaceHover: C
-  } : o.color, ...r.color }, s = { ...o.radius, ...r.radius }, c = {
+  } : s.color, ...r.color }, o = { ...s.radius, ...r.radius }, c = {
     bg: e.bg,
     surface: e.surface,
     surfaceRaised: e.surfaceRaised,
@@ -259,7 +259,7 @@ function de(r = {}) {
       f[`--gryt-${d}-${i + 1}`] = u, f[`--color-gryt-${d}-${i + 1}`] = u;
     });
   for (const d of ["neutral", "accent"])
-    w(n[d], e.bg).forEach((g, u) => {
+    R(n[d], e.bg).forEach((g, u) => {
       f[`--gryt-${d}-a${u + 1}`] = g, f[`--color-gryt-${d}-a${u + 1}`] = g;
     });
   return {
@@ -303,14 +303,14 @@ function de(r = {}) {
     "--color-gryt-on-accent": e.onAccent,
     "--color-gryt-on-secondary": e.onSecondary,
     "--color-gryt-on-danger": e.onDanger,
-    "--gryt-radius-sm": `${s.sm}px`,
-    "--gryt-radius-md": `${s.md}px`,
-    "--gryt-radius-lg": `${s.lg}px`,
-    "--gryt-radius-xl": `${s.xl}px`,
-    "--gryt-radius-full": `${s.full}px`
+    "--gryt-radius-sm": `${o.sm}px`,
+    "--gryt-radius-md": `${o.md}px`,
+    "--gryt-radius-lg": `${o.lg}px`,
+    "--gryt-radius-xl": `${o.xl}px`,
+    "--gryt-radius-full": `${o.full}px`
   };
 }
-const S = [
+const w = [
   "accent",
   "accentLight",
   "secondary",
@@ -336,27 +336,27 @@ function $(r) {
 }
 const L = {
   hue: {
-    accent: o.color.accent,
-    accentLight: o.color.accentLight,
-    secondary: o.color.secondary,
-    secondaryLight: o.color.secondaryLight,
-    success: o.color.success,
-    danger: o.color.danger,
-    dangerLight: o.color.dangerLight,
-    warning: o.color.warning,
-    onAccent: o.color.onAccent,
-    onSecondary: o.color.onSecondary,
-    onDanger: o.color.onDanger
+    accent: s.color.accent,
+    accentLight: s.color.accentLight,
+    secondary: s.color.secondary,
+    secondaryLight: s.color.secondaryLight,
+    success: s.color.success,
+    danger: s.color.danger,
+    dangerLight: s.color.dangerLight,
+    warning: s.color.warning,
+    onAccent: s.color.onAccent,
+    onSecondary: s.color.onSecondary,
+    onDanger: s.color.onDanger
   },
   lightHue: null,
   dark: {
-    bg: o.color.bg,
-    surface: o.color.surface,
-    surfaceRaised: o.color.surfaceRaised,
-    surfaceHover: o.color.surfaceHover,
-    border: o.color.border,
-    muted: o.color.muted,
-    text: o.color.text
+    bg: s.color.bg,
+    surface: s.color.surface,
+    surfaceRaised: s.color.surfaceRaised,
+    surfaceHover: s.color.surfaceHover,
+    border: s.color.border,
+    muted: s.color.muted,
+    text: s.color.text
   },
   light: {
     bg: l.bg,
@@ -367,7 +367,7 @@ const L = {
     muted: l.muted,
     text: l.text
   },
-  radius: { ...o.radius }
+  radius: { ...s.radius }
 };
 function j(r) {
   return {
@@ -418,12 +418,12 @@ function D(r) {
   return a.length === 4 ? `#${a[1]}${a[1]}${a[2]}${a[2]}${a[3]}${a[3]}` : a;
 }
 function ge(r, a) {
-  const t = new URLSearchParams(), e = (c) => D(c).slice(1), s = $(r.name ?? "");
-  s !== "" && t.set("name", s);
-  for (const c of S)
+  const t = new URLSearchParams(), e = (c) => D(c).slice(1), o = $(r.name ?? "");
+  o !== "" && t.set("name", o);
+  for (const c of w)
     r.hue[c] !== L.hue[c] && t.set(H[c], e(r.hue[c]));
   if (r.lightHue !== null)
-    for (const c of S)
+    for (const c of w)
       t.set(`lh-${H[c]}`, e(r.lightHue[c]));
   for (const c of ["dark", "light"]) {
     const n = c === "dark" ? "d" : "l";
@@ -449,15 +449,15 @@ function re(r) {
     if (n === null) return null;
     const f = n.startsWith("#") ? n : `#${n}`;
     return z(f) ? (t = !0, D(f)) : null;
-  }, s = $(r.get("name") ?? "");
-  s !== "" && (a.name = s, t = !0);
-  for (const c of S) {
+  }, o = $(r.get("name") ?? "");
+  o !== "" && (a.name = o, t = !0);
+  for (const c of w) {
     const n = e(H[c]);
     n !== null && (a.hue[c] = n);
   }
   if (r.has(`lh-${H.accent}`)) {
     const c = { ...a.hue };
-    for (const n of S) {
+    for (const n of w) {
       const f = e(`lh-${H[n]}`);
       f !== null && (c[n] = f);
     }
@@ -488,15 +488,15 @@ function ae(r) {
   }
   if (typeof a != "object" || a === null) return null;
   const t = a, e = j(L);
-  let s = !1;
+  let o = !1;
   const c = (n, f) => {
     if (!(typeof n != "object" || n === null))
       for (const [d, g] of Object.entries(n))
-        typeof g == "string" && z(g) && d in f && (f[d] = D(g), s = !0);
+        typeof g == "string" && z(g) && d in f && (f[d] = D(g), o = !0);
   };
   if (typeof t.name == "string") {
     const n = $(t.name);
-    n !== "" && (e.name = n, s = !0);
+    n !== "" && (e.name = n, o = !0);
   }
   if (c(t.hue, e.hue), c(t.dark, e.dark), c(t.light, e.light), typeof t.lightHue == "object" && t.lightHue !== null) {
     const n = { ...e.hue };
@@ -507,11 +507,11 @@ function ae(r) {
       t.radius
     )) {
       const d = Number(f);
-      M.includes(n) && Number.isFinite(d) && d >= 0 && d <= 999 && (e.radius[n] = Math.round(d), s = !0);
+      M.includes(n) && Number.isFinite(d) && d >= 0 && d <= 999 && (e.radius[n] = Math.round(d), o = !0);
     }
-  return s ? { theme: e, appearance: "dark" } : null;
+  return o ? { theme: e, appearance: "dark" } : null;
 }
-const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { 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 }, P = { sm: 2, md: 4, lg: 6, xl: 8, full: 4 }, ne = [
+const v = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { 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 }, P = { sm: 2, md: 4, lg: 6, xl: 8, full: 4 }, ne = [
   {
     id: "gryt",
     name: "Gryt",
@@ -559,7 +559,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#6b5b50",
         text: "#241a14"
       },
-      radius: A
+      radius: v
     }
   },
   {
@@ -601,7 +601,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#5b5b63",
         text: "#17171a"
       },
-      radius: v
+      radius: A
     }
   },
   {
@@ -702,7 +702,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#6c664b",
         text: "#1f1f1f"
       },
-      radius: v
+      radius: A
     }
   },
   {
@@ -760,7 +760,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#4c566a",
         text: "#2e3440"
       },
-      radius: v
+      radius: A
     }
   },
   {
@@ -819,7 +819,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#6c6f85",
         text: "#4c4f69"
       },
-      radius: A
+      radius: v
     }
   },
   {
@@ -927,7 +927,7 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
         muted: "#87867f",
         text: "#141413"
       },
-      radius: A
+      radius: v
     }
   },
   {
@@ -1040,13 +1040,87 @@ const A = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, v = { sm: 6, md: 8, lg:
   }
 ], le = new Map(
   ne.map((r) => [r.id, r])
-);
+), he = [
+  0,
+  0.1217,
+  0.3812,
+  0.6579,
+  0.883,
+  1.0304,
+  1.1034,
+  1.12,
+  1.1025,
+  1.0705,
+  1.0376,
+  1.0115,
+  0.9949,
+  0.987,
+  0.9857,
+  0.9881,
+  0.992,
+  0.9959,
+  0.9989,
+  1.0008,
+  1.0016,
+  1.0017,
+  1.0014,
+  1.0009,
+  1.0004,
+  1.0001,
+  1
+], be = [
+  0,
+  0.0496,
+  0.1585,
+  0.2869,
+  0.4135,
+  0.5279,
+  0.6263,
+  0.7079,
+  0.7741,
+  0.8268,
+  0.8681,
+  0.9002,
+  0.9249,
+  0.9437,
+  0.958,
+  0.9688,
+  0.9768,
+  0.9829,
+  0.9874,
+  0.9907,
+  0.9932,
+  0.995,
+  0.9963,
+  0.9973,
+  0.9981,
+  0.9986,
+  1
+], ye = {
+  /** Most interactions. */
+  spring: 500,
+  /** Drawer, where the travel is the width of a panel. */
+  springSoft: 700,
+  /** Colour changes, which should not feel sprung. */
+  fast: 150
+}, me = {
+  button: { hover: 1.03, press: 0.96 },
+  toast: { hover: 1.04, press: 0.96 },
+  sliderThumb: { hover: 1.12, press: 0.94 }
+};
+function Le(r, a) {
+  if (r.length === 0) return a;
+  if (a <= 0) return r[0];
+  if (a >= 1) return r[r.length - 1];
+  const t = (r.length - 1) * a, e = Math.floor(t), o = t - e, c = r[e], n = r[e + 1] ?? c;
+  return c + (n - c) * o;
+}
 export {
-  S as GRYT_HUE_KEYS,
+  w as GRYT_HUE_KEYS,
   O as GRYT_NEUTRAL_KEYS,
   M as GRYT_RADIUS_KEYS,
   V as GRYT_THEME_NAME_MAX,
-  w as alphaScale,
+  R as alphaScale,
   j as cloneGrytTheme,
   oe as contrast,
   de as createGrytTheme,
@@ -1054,16 +1128,18 @@ export {
   ge as encodeGrytTheme,
   se as grytAlphaScales,
   fe as grytAlphaScalesLight,
+  ye as grytDurations,
   l as grytLightTokens,
   ne as grytPresets,
   le as grytPresetsById,
+  me as grytScaleSteps,
   _ as grytScales,
   T as grytScalesLight,
   L as grytTheme,
   Z as grytThemeHues,
   ue as grytThemeToOptions,
-  o as grytTokens,
-  R as hexToOklch,
+  s as grytTokens,
+  S as hexToOklch,
   x as hexToRgb,
   h as hueScale,
   b as hueScaleLight,
@@ -1073,6 +1149,9 @@ export {
   D as normalizeHexColor,
   $ as normalizeThemeName,
   y as oklchToHex,
-  N as rgbToHex
+  N as rgbToHex,
+  Le as sampleCurve,
+  he as springSamples,
+  be as springTightSamples
 };
 //# sourceMappingURL=index.js.map