@floegence/floe-webapp-core 0.56.3 → 0.56.7

package/dist/styles/themes/presets.js

@@ -1,6 +1,7 @@
-import { DARK_WINDOW_TOKENS as b, LIGHT_WINDOW_TOKENS as B } from "./windowTokens.js";
+import { createProgressTokens as b } from "./progressTokens.js";
+import { DARK_WINDOW_TOKENS as B, LIGHT_WINDOW_TOKENS as A } from "./windowTokens.js";
 import { CLASSIC_LIGHT_SEMANTIC_TOKENS as d, CLASSIC_DARK_SEMANTIC_TOKENS as F } from "./classicSemanticTokens.js";
-const S = [
+const T = [
   "--floe-window-background",
   "--floe-window-foreground",
   "--floe-window-muted-foreground",
@@ -70,7 +71,7 @@ const S = [
   "--selection-code-bg",
   "--selection-code-fg",
   "--glow"
-], A = {
+], E = {
   success: "#287A4B",
   successForeground: "#FFFFFF",
   warning: "#835800",
@@ -81,7 +82,7 @@ const S = [
   infoForeground: "#FFFFFF",
   note: "#6847A0",
   tip: "#1E6F73"
-}, E = {
+}, k = {
   success: "#72D39C",
   successForeground: "#07160E",
   warning: "#F0C36A",
@@ -94,19 +95,19 @@ const S = [
   tip: "#71C8C0"
 };
 function o(r) {
-  const e = r.mode === "light" ? A : E, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
+  const e = r.mode === "light" ? E : k, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
     background: r.background,
     foreground: r.foreground
-  }, [t, c, u, g, s] = r.chart, a = r.syntax ?? {
+  }, [t, c, u, i, s] = r.chart, a = r.syntax ?? {
     comment: r.mutedForeground,
     keyword: t,
     string: c,
-    number: g,
+    number: i,
     type: u,
     function: s,
-    constant: g
-  }, i = {
-    ...r.mode === "dark" ? b : B,
+    constant: i
+  }, g = {
+    ...r.mode === "dark" ? B : A,
     "--background": r.background,
     "--foreground": r.foreground,
     "--primary": r.primary,
@@ -161,7 +162,7 @@ function o(r) {
     "--chart-1": t,
     "--chart-2": c,
     "--chart-3": u,
-    "--chart-4": g,
+    "--chart-4": i,
     "--chart-5": s,
     "--selection-bg": r.selectionBackground,
     "--selection-fg": r.selectionForeground,
@@ -173,8 +174,9 @@ function o(r) {
     // selectionBackground so we don't inherit a near-white primary as glow source.
     "--glow": r.glow ?? (r.mode === "light" ? r.primary : r.selectionBackground)
   };
+  Object.assign(g, b(r.mode, g));
   for (const [l, p] of Object.entries(r.fileIconColors ?? {}))
-    i[`--floe-file-icon-${l}`] = p;
+    g[`--floe-file-icon-${l}`] = p;
   return {
     name: r.name,
     displayName: r.displayName,
@@ -188,7 +190,7 @@ function o(r) {
       border: r.border,
       colors: r.chart
     },
-    semanticTokens: i,
+    semanticTokens: g,
     monaco: {
       [r.mode]: {
         base: r.mode === "light" ? "vs" : "vs-dark",
@@ -248,10 +250,10 @@ function o(r) {
         }
       }
     },
-    tokens: r.mode === "light" ? { light: i } : { dark: i }
+    tokens: r.mode === "light" ? { light: g } : { dark: g }
   };
 }
-const k = {
+const y = {
   ...o({
     name: "classic-light",
     displayName: "Classic Light",
@@ -285,7 +287,7 @@ const k = {
   inheritsBaseTokens: !0,
   semanticTokens: d,
   tokens: void 0
-}, y = {
+}, C = {
   ...o({
     name: "classic-dark",
     displayName: "Classic Dark",
@@ -319,8 +321,8 @@ const k = {
   inheritsBaseTokens: !0,
   semanticTokens: F,
   tokens: void 0
-}, C = [
-  k,
+}, h = [
+  y,
   o({
     name: "paper",
     displayName: "Paper",
@@ -576,7 +578,7 @@ const k = {
       constant: "#745500"
     }
   }),
-  y,
+  C,
   o({
     name: "ink",
     displayName: "Ink",
@@ -962,18 +964,18 @@ const k = {
       constant: "#E9A4A0"
     }
   })
-], N = {
+], x = {
   light: "classic-light",
   dark: "classic-dark"
 };
-function h(r, e) {
+function D(r, e) {
   const n = r.mode ?? "both";
   return n === "both" || n === e;
 }
-function D(r, e) {
-  return r.filter((n) => h(n, e));
+function f(r, e) {
+  return r.filter((n) => D(n, e));
 }
-function f(r) {
+function w(r) {
   const e = /* @__PURE__ */ new Set();
   for (const n of r) {
     if (e.has(n.name))
@@ -982,26 +984,26 @@ function f(r) {
   }
 }
 function m(r, e, n, t) {
-  const c = D(r, e);
+  const c = f(r, e);
   return n && c.some((u) => u.name === n) ? n : t && c.some((u) => u.name === t) ? t : c[0]?.name;
 }
-function T(r, e, n = {}) {
-  const t = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, c = t?.version === 1, u = c && typeof t.light == "string" ? t.light : void 0, g = c && typeof t.dark == "string" ? t.dark : void 0;
+function L(r, e, n = {}) {
+  const t = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, c = t?.version === 1, u = c && typeof t.light == "string" ? t.light : void 0, i = c && typeof t.dark == "string" ? t.dark : void 0;
   return {
     version: 1,
     light: m(e, "light", u, n.light),
-    dark: m(e, "dark", g, n.dark)
+    dark: m(e, "dark", i, n.dark)
   };
 }
-f(C);
+w(h);
 export {
-  N as BUILT_IN_SHELL_THEME_DEFAULTS,
-  S as REQUIRED_SHELL_THEME_TOKENS,
-  f as assertUniqueThemePresetNames,
-  C as builtInShellThemePresets,
+  x as BUILT_IN_SHELL_THEME_DEFAULTS,
+  T as REQUIRED_SHELL_THEME_TOKENS,
+  w as assertUniqueThemePresetNames,
+  h as builtInShellThemePresets,
   o as createShellThemePreset,
-  D as getShellThemePresetsForMode,
-  T as normalizeShellThemeSelection,
-  h as presetSupportsMode,
+  f as getShellThemePresetsForMode,
+  L as normalizeShellThemeSelection,
+  D as presetSupportsMode,
   m as resolveShellThemePresetName
 };

package/dist/styles/themes/progressTokens.d.ts

@@ -0,0 +1,5 @@
+import type { FloeThemeTokenMap } from './index';
+/** Derive static progress paint from the authored palette, for CSS and host metadata.
+ * All interpolation adds white in sRGB, so even antialiased glyph edges brighten.
+ * Neutral surfaces share a conservative contrast bound; no DOM sampling is needed. */
+export declare function createProgressTokens(mode: 'light' | 'dark', tokens: Readonly<FloeThemeTokenMap>): FloeThemeTokenMap;

package/dist/styles/themes/progressTokens.js

@@ -0,0 +1,72 @@
+const g = (t) => (t /= 255) <= 0.04045 ? t / 12.92 : ((t + 0.055) / 1.055) ** 2.4, u = (t) => t.map(g).reduce((r, a, n) => r + a * [0.2126, 0.7152, 0.0722][n], 0), M = (t, r) => (Math.max(u(t), u(r)) + 0.05) / (Math.min(u(t), u(r)) + 0.05), d = (t, r) => t.map((a) => Math.round(a + (255 - a) * r)), f = (t) => `rgb(${t.join(" ")})`;
+function x(t) {
+  const [r, a, n] = t.map(g), s = Math.cbrt(0.4122214708 * r + 0.5363325363 * a + 0.0514459929 * n), o = Math.cbrt(0.2119034982 * r + 0.6806995451 * a + 0.1073969566 * n), m = Math.cbrt(0.0883024619 * r + 0.2817188376 * a + 0.6299787005 * n);
+  return [
+    0.2104542553 * s + 0.793617785 * o - 0.0040720468 * m,
+    1.9779984951 * s - 2.428592205 * o + 0.4505937099 * m,
+    0.0259040371 * s + 0.7827717662 * o - 0.808675766 * m
+  ];
+}
+function P(t, r) {
+  const [, a, n] = x(t), s = Math.min(1, 0.03 / Math.max(Math.hypot(a, n), 1e-10)), o = a * s, m = n * s, c = (r + 0.3963377774 * o + 0.2158037573 * m) ** 3, l = (r - 0.1055613458 * o - 0.0638541728 * m) ** 3, h = (r - 0.0894841775 * o - 1.291485548 * m) ** 3;
+  return [
+    4.0767416621 * c - 3.3077115913 * l + 0.2309699292 * h,
+    -1.2684380046 * c + 2.6097574011 * l - 0.3413193965 * h,
+    -0.0041960863 * c - 0.7034186147 * l + 1.707614701 * h
+  ].map(
+    (e) => Math.round(
+      Math.max(0, Math.min(1, e <= 31308e-7 ? 12.92 * e : 1.055 * e ** (1 / 2.4) - 0.055)) * 255
+    )
+  );
+}
+function b(t) {
+  let r = 0, a = 1;
+  for (let n = 0; n < 26; n++) {
+    const s = (r + a) / 2;
+    t(s) ? r = s : a = s;
+  }
+  return r;
+}
+function $(t, r) {
+  const a = (e) => {
+    const i = r[e];
+    if (!i || !/^#[\da-f]{6}$/iu.test(i))
+      throw new Error(`Progress palette requires an opaque hex color: ${e}`);
+    return [1, 3, 5].map((p) => parseInt(i.slice(p, p + 2), 16));
+  }, n = ["--background", "--card", "--muted", "--accent", "--popover", "--sidebar"].map(
+    (e) => a(e)
+  ), s = (e, i) => n.every((p) => M(e, p) >= i);
+  let o = P(a("--foreground"), t === "dark" ? 0.69 : 0.2);
+  if (t === "dark")
+    for (; (!s(o, 4.55) || M(o, a("--background")) < 5) && o.some((e) => e < 255); )
+      o = o.map((e) => Math.min(255, e + 1));
+  const m = d(
+    o,
+    t === "dark" ? 1 : b((e) => s(d(o, e), 4.65))
+  );
+  let c = a("--primary");
+  const l = a("--primary-foreground");
+  let h = 0.28;
+  if (u(l) > u(c)) {
+    const e = b(
+      (i) => M(d(c.map((p) => Math.round(p * i)), h), l) >= 4.65
+    );
+    c = c.map((i) => Math.round(i * e));
+  } else {
+    const e = (i) => {
+      const p = x(c), k = x(d(c, i));
+      return Math.hypot(...p.map((y, w) => y - k[w]));
+    };
+    for (; e(1) < 0.105; ) c = c.map((i) => Math.floor(i * 0.99));
+    for (; e(h) < 0.105 && h < 1; ) h = Math.min(1, h + 5e-3);
+  }
+  return {
+    "--floe-progress-text-base": f(o),
+    "--floe-progress-text-peak": f(m),
+    "--floe-progress-primary-base": f(c),
+    "--floe-progress-primary-white-mix": `${(h * 100).toFixed(1)}%`
+  };
+}
+export {
+  $ as createProgressTokens
+};