@gryt/theme 0.4.0 → 0.6.0

package/dist/index.js

@@ -1,4 +1,4 @@
-function G(r) {
+function N(r) {
   return r <= 0.04045 ? r / 12.92 : ((r + 0.055) / 1.055) ** 2.4;
 }
 function v(r) {
@@ -15,12 +15,12 @@ function x(r) {
     parseInt(t.slice(4, 6), 16) / 255
   ];
 }
-function N([r, a, t]) {
+function I([r, a, t]) {
   const e = (o) => Math.round(L(o) * 255).toString(16).padStart(2, "0");
   return `#${e(r)}${e(a)}${e(t)}`;
 }
 function S(r) {
-  const [a, t, e] = x(r).map(G), o = Math.cbrt(
+  const [a, t, e] = x(r).map(N), 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 S(r) {
 }
 function y({ 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, f = (r - 0.0894841775 * e - 1.291485548 * o) ** 3;
-  return N([
+  return I([
     v(L(4.0767416621 * c - 3.3077115913 * n + 0.2309699292 * f)),
     v(L(-1.2684380046 * c + 2.6097574011 * n - 0.3413193965 * f)),
     v(L(-0.0041960863 * c - 0.7034186147 * n + 1.707614701 * f))
@@ -75,7 +75,7 @@ const W = [
   0,
   8e-3
 ];
-function I(r) {
+function U(r) {
   const a = {
     0: r.bg,
     1: r.surface,
@@ -98,7 +98,7 @@ function w(r, a) {
       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(
+    const n = I(
       o.map((u, i) => L(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)}%)`;
@@ -131,7 +131,7 @@ const q = [
   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) {
+function C(r) {
   const a = {
     0: r.bg,
     1: r.surface,
@@ -150,12 +150,12 @@ function b(r) {
   );
   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);
+function G(r) {
+  const [a, t, e] = x(r).map(N);
   return 0.2126 * a + 0.7152 * t + 0.0722 * e;
 }
-function oe(r, a) {
-  const t = E(r), e = E(a);
+function se(r, a) {
+  const t = G(r), e = G(a);
   return (Math.max(t, e) + 0.05) / (Math.min(t, e) + 0.05);
 }
 const s = {
@@ -197,7 +197,7 @@ const s = {
   muted: "#5b5d65",
   text: "#1f2129"
 }, _ = {
-  neutral: I({
+  neutral: U({
     bg: s.color.bg,
     surface: s.color.surface,
     surfaceRaised: s.color.surfaceRaised,
@@ -213,25 +213,25 @@ const s = {
   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),
+}, A = {
+  neutral: C(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)
-}, C = T.neutral[3], se = {
+}, O = A.neutral[3], fe = {
   neutral: w(_.neutral, s.color.bg),
   accent: w(_.accent, s.color.bg)
-}, fe = {
-  neutral: w(T.neutral, l.bg),
-  accent: w(T.accent, l.bg)
+}, de = {
+  neutral: w(A.neutral, l.bg),
+  accent: w(A.accent, l.bg)
 };
-function de(r = {}) {
+function ue(r = {}) {
   const a = r.appearance === "light", e = { ...a ? {
     ...s.color,
     ...l,
-    surfaceHover: C
+    surfaceHover: O
   } : s.color, ...r.color }, o = { ...s.radius, ...r.radius }, c = {
     bg: e.bg,
     surface: e.surface,
@@ -240,14 +240,14 @@ function de(r = {}) {
     muted: e.muted,
     text: e.text
   }, n = a ? {
-    neutral: U(c),
+    neutral: C(c),
     accent: b(e.accent),
     secondary: b(e.secondary),
     success: b(e.success),
     danger: b(e.danger),
     warning: b(e.warning)
   } : {
-    neutral: I(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 R = [
   "onAccent",
   "onSecondary",
   "onDanger"
-], O = [
+], j = [
   "bg",
   "surface",
   "surfaceRaised",
@@ -362,14 +362,14 @@ const p = {
     bg: l.bg,
     surface: l.surface,
     surfaceRaised: l.surfaceRaised,
-    surfaceHover: C,
+    surfaceHover: O,
     border: l.border,
     muted: l.muted,
     text: l.text
   },
   radius: { ...s.radius }
 };
-function j(r) {
+function D(r) {
   return {
     ...r.name === void 0 ? {} : { name: r.name },
     hue: { ...r.hue },
@@ -382,7 +382,7 @@ function j(r) {
 function Z(r, a) {
   return a === "light" && r.lightHue !== null ? r.lightHue : r.hue;
 }
-function ue(r, a) {
+function ge(r, a) {
   return {
     appearance: a,
     color: { ...Z(r, a), ...r[a] },
@@ -413,12 +413,12 @@ const H = {
 function z(r) {
   return ee.test(r.trim());
 }
-function D(r) {
+function E(r) {
   const a = r.trim().toLowerCase();
   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), o = $(r.name ?? "");
+function ie(r, a) {
+  const t = new URLSearchParams(), e = (c) => E(c).slice(1), o = $(r.name ?? "");
   o !== "" && t.set("name", o);
   for (const c of R)
     r.hue[c] !== p.hue[c] && t.set(H[c], e(r.hue[c]));
@@ -427,14 +427,14 @@ function ge(r, a) {
       t.set(`lh-${H[c]}`, e(r.lightHue[c]));
   for (const c of ["dark", "light"]) {
     const n = c === "dark" ? "d" : "l";
-    for (const f of O)
+    for (const f of j)
       r[c][f] !== p[c][f] && t.set(`${n}-${Y[f]}`, e(r[c][f]));
   }
   for (const c of M)
     r.radius[c] !== p.radius[c] && t.set(`r-${c}`, String(r.radius[c]));
   return a === "light" && t.set("mode", "light"), t;
 }
-function ie(r) {
+function le(r) {
   const a = r.trim();
   if (a === "") return null;
   if (a.startsWith("{")) return ae(a);
@@ -442,13 +442,13 @@ function ie(r) {
   return re(new URLSearchParams(t));
 }
 function re(r) {
-  const a = j(p);
+  const a = D(p);
   let t = !1;
   const e = (c) => {
     const n = r.get(c);
     if (n === null) return null;
     const f = n.startsWith("#") ? n : `#${n}`;
-    return z(f) ? (t = !0, D(f)) : null;
+    return z(f) ? (t = !0, E(f)) : null;
   }, o = $(r.get("name") ?? "");
   o !== "" && (a.name = o, t = !0);
   for (const c of R) {
@@ -465,7 +465,7 @@ function re(r) {
   }
   for (const c of ["dark", "light"]) {
     const n = c === "dark" ? "d" : "l";
-    for (const f of O) {
+    for (const f of j) {
       const d = e(`${n}-${Y[f]}`);
       d !== null && (a[c][f] = d);
     }
@@ -487,12 +487,12 @@ function ae(r) {
     return null;
   }
   if (typeof a != "object" || a === null) return null;
-  const t = a, e = j(p);
+  const t = a, e = D(p);
   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), o = !0);
+        typeof g == "string" && z(g) && d in f && (f[d] = E(g), o = !0);
   };
   if (typeof t.name == "string") {
     const n = $(t.name);
@@ -511,7 +511,7 @@ function ae(r) {
     }
   return o ? { theme: e, appearance: "dark" } : null;
 }
-const k = { 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 = [
+const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, T = { 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 = { sm: 8, md: 8, lg: 8, xl: 8, full: 8 }, oe = [
   {
     id: "gryt",
     name: "Gryt",
@@ -520,6 +520,19 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
     source: "github.com/Gryt-chat/code-theme",
     theme: p
   },
+  {
+    /* Credits to Carlo, who made this in the generator and sent the link.
+       Same colours as above — the only change is the radius, and the one that
+       matters is `full`: it drops 999 to 8, so the controls that were pills
+       (buttons, the search field, badges) become rectangles with the same
+       corner as everything else. */
+    id: "gryt-rounded",
+    name: "Gryt Rounded",
+    note: "The shipped palette, every corner at eight pixels. Made by Carlo.",
+    group: "Gryt",
+    source: "Carlo",
+    theme: { ...D(p), name: "Gryt Rounded", radius: ne }
+  },
   {
     id: "ember",
     name: "Ember",
@@ -601,7 +614,7 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
         muted: "#5b5b63",
         text: "#17171a"
       },
-      radius: A
+      radius: T
     }
   },
   {
@@ -702,7 +715,7 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
         muted: "#6c664b",
         text: "#1f1f1f"
       },
-      radius: A
+      radius: T
     }
   },
   {
@@ -760,7 +773,7 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
         muted: "#4c566a",
         text: "#2e3440"
       },
-      radius: A
+      radius: T
     }
   },
   {
@@ -1038,9 +1051,9 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
       radius: P
     }
   }
-], le = new Map(
-  ne.map((r) => [r.id, r])
-), he = [
+], he = new Map(
+  oe.map((r) => [r.id, r])
+), be = [
   0,
   0.1217,
   0.3812,
@@ -1068,7 +1081,7 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
   1.0004,
   1.0001,
   1
-], be = [
+], ye = [
   0,
   0.0496,
   0.1585,
@@ -1096,11 +1109,19 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
   0.9981,
   0.9986,
   1
-], ye = {
+], me = {
   /** Most interactions. */
   spring: 500,
   /** Drawer, where the travel is the width of a panel. */
   springSoft: 700,
+  /**
+   * For something that travels further than its own width.
+   *
+   * A bottom sheet comes up from off the screen and covers most of it, which is
+   * a longer journey than a drawer's. Reusing `springSoft` there meant the same
+   * time over more distance, and it read as a snap.
+   */
+  springSlow: 900,
   /** Colour changes, which should not feel sprung. */
   fast: 150,
   /**
@@ -1110,7 +1131,7 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
    * that a second pass starts before you wonder whether it has stopped.
    */
   sweep: 1400
-}, me = {
+}, pe = {
   button: { hover: 1.03, press: 0.96 },
   iconButton: { hover: 1.06, press: 0.94 },
   checkbox: { hover: 1.08, press: 0.92 },
@@ -1119,8 +1140,8 @@ const k = { sm: 8, md: 12, lg: 20, xl: 28, full: 999 }, A = { sm: 6, md: 8, lg:
   toggle: { hover: 1.06, press: 0.94 },
   toast: { hover: 1.04, press: 0.96 },
   sliderThumb: { hover: 1.12, press: 0.94 }
-}, pe = 64;
-function Le(r, a) {
+}, Le = 64;
+function xe(r, a) {
   if (r.length === 0) return a;
   if (a <= 0) return r[0];
   if (a >= 1) return r[r.length - 1];
@@ -1129,42 +1150,42 @@ function Le(r, a) {
 }
 export {
   R as GRYT_HUE_KEYS,
-  O as GRYT_NEUTRAL_KEYS,
+  j as GRYT_NEUTRAL_KEYS,
   M as GRYT_RADIUS_KEYS,
   V as GRYT_THEME_NAME_MAX,
   w as alphaScale,
-  j as cloneGrytTheme,
-  oe as contrast,
-  de as createGrytTheme,
-  ie as decodeGrytTheme,
-  ge as encodeGrytTheme,
-  se as grytAlphaScales,
-  fe as grytAlphaScalesLight,
-  pe as grytDrawerBleed,
-  ye as grytDurations,
+  D as cloneGrytTheme,
+  se as contrast,
+  ue as createGrytTheme,
+  le as decodeGrytTheme,
+  ie as encodeGrytTheme,
+  fe as grytAlphaScales,
+  de as grytAlphaScalesLight,
+  Le as grytDrawerBleed,
+  me as grytDurations,
   l as grytLightTokens,
-  ne as grytPresets,
-  le as grytPresetsById,
-  me as grytScaleSteps,
+  oe as grytPresets,
+  he as grytPresetsById,
+  pe as grytScaleSteps,
   _ as grytScales,
-  T as grytScalesLight,
+  A as grytScalesLight,
   p as grytTheme,
   Z as grytThemeHues,
-  ue as grytThemeToOptions,
+  ge as grytThemeToOptions,
   s as grytTokens,
   S as hexToOklch,
   x as hexToRgb,
   h as hueScale,
   b as hueScaleLight,
   z as isHexColor,
-  I as neutralScale,
-  U as neutralScaleLight,
-  D as normalizeHexColor,
+  U as neutralScale,
+  C as neutralScaleLight,
+  E as normalizeHexColor,
   $ as normalizeThemeName,
   y as oklchToHex,
-  N as rgbToHex,
-  Le as sampleCurve,
-  he as springSamples,
-  be as springTightSamples
+  I as rgbToHex,
+  xe as sampleCurve,
+  be as springSamples,
+  ye as springTightSamples
 };
 //# sourceMappingURL=index.js.map