@floegence/floe-webapp-core 0.52.1 → 0.52.2

package/dist/styles/themes/classicSemanticTokens.js

@@ -1,3 +1,4 @@
+import { LIGHT_WINDOW_TOKENS as n, DARK_WINDOW_TOKENS as i } from "./windowTokens.js";
 function a(h) {
   const l = {}, c = (r, e = /* @__PURE__ */ new Set()) => {
     const o = h[r];
@@ -9,7 +10,8 @@ function a(h) {
     l[r] = c(r);
   return Object.freeze(l);
 }
-const n = {
+const t = {
+  ...n,
   "--background": "hsl(34 24% 94%)",
   "--foreground": "hsl(214 26% 17%)",
   "--primary": "hsl(214 26% 17%)",
@@ -73,7 +75,8 @@ const n = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(214 26% 17%)"
-}, i = {
+}, d = {
+  ...i,
   "--background": "hsl(222 30% 8%)",
   "--foreground": "hsl(210 20% 98%)",
   "--primary": "hsl(210 20% 98%)",
@@ -137,8 +140,8 @@ const n = {
   "--selection-code-bg": "hsl(212 100% 67%)",
   "--selection-code-fg": "hsl(220 20% 8%)",
   "--glow": "hsl(217 65% 52%)"
-}, t = a(n), d = a(i);
+}, b = a(t), u = a(d);
 export {
-  d as CLASSIC_DARK_SEMANTIC_TOKENS,
-  t as CLASSIC_LIGHT_SEMANTIC_TOKENS
+  u as CLASSIC_DARK_SEMANTIC_TOKENS,
+  b as CLASSIC_LIGHT_SEMANTIC_TOKENS
 };

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

@@ -6,7 +6,7 @@ export interface FloeShellThemeSelection {
     dark?: string;
 }
 export type FloeShellThemeDefaults = Partial<Record<FloeShellThemeMode, string>>;
-type ShellThemeTokenName = '--background' | '--foreground' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
+type ShellThemeTokenName = '--floe-window-background' | '--floe-window-foreground' | '--floe-window-muted-foreground' | '--floe-window-titlebar-background' | '--floe-window-border' | '--floe-window-shadow' | '--background' | '--foreground' | '--primary' | '--primary-foreground' | '--secondary' | '--secondary-foreground' | '--muted' | '--muted-foreground' | '--accent' | '--accent-foreground' | '--border' | '--input' | '--ring' | '--chrome-border' | '--top-bar-border' | '--activity-bar-border' | '--bottom-bar-border' | '--terminal-panel-border' | '--card' | '--card-foreground' | '--popover' | '--popover-foreground' | '--success' | '--success-foreground' | '--warning' | '--warning-foreground' | '--error' | '--error-foreground' | '--info' | '--info-foreground' | '--highlight-block-info-accent' | '--highlight-block-warning-accent' | '--highlight-block-success-accent' | '--highlight-block-error-accent' | '--highlight-block-note-accent' | '--highlight-block-tip-accent' | '--sidebar' | '--sidebar-foreground' | '--sidebar-primary' | '--sidebar-primary-foreground' | '--sidebar-accent' | '--sidebar-accent-foreground' | '--sidebar-border' | '--sidebar-ring' | '--activity-bar' | '--activity-bar-foreground' | '--activity-bar-foreground-active' | '--activity-bar-badge' | '--activity-bar-badge-foreground' | '--terminal-background' | '--terminal-foreground' | '--chart-1' | '--chart-2' | '--chart-3' | '--chart-4' | '--chart-5' | '--selection-bg' | '--selection-fg' | '--selection-on-primary-bg' | '--selection-on-primary-fg' | '--selection-code-bg' | '--selection-code-fg' | '--glow';
 export declare const REQUIRED_SHELL_THEME_TOKENS: readonly ShellThemeTokenName[];
 interface ShellThemePaletteDefinition {
     name: string;

package/dist/styles/themes/presets.js

@@ -1,5 +1,12 @@
-import { CLASSIC_LIGHT_SEMANTIC_TOKENS as s, CLASSIC_DARK_SEMANTIC_TOKENS as m } from "./classicSemanticTokens.js";
-const C = [
+import { DARK_WINDOW_TOKENS as s, LIGHT_WINDOW_TOKENS as m } from "./windowTokens.js";
+import { CLASSIC_LIGHT_SEMANTIC_TOKENS as l, CLASSIC_DARK_SEMANTIC_TOKENS as b } from "./classicSemanticTokens.js";
+const w = [
+  "--floe-window-background",
+  "--floe-window-foreground",
+  "--floe-window-muted-foreground",
+  "--floe-window-titlebar-background",
+  "--floe-window-border",
+  "--floe-window-shadow",
   "--background",
   "--foreground",
   "--primary",
@@ -63,7 +70,7 @@ const C = [
   "--selection-code-bg",
   "--selection-code-fg",
   "--glow"
-], l = {
+], p = {
   success: "#287A4B",
   successForeground: "#FFFFFF",
   warning: "#835800",
@@ -74,7 +81,7 @@ const C = [
   infoForeground: "#FFFFFF",
   note: "#6847A0",
   tip: "#1E6F73"
-}, b = {
+}, B = {
   success: "#72D39C",
   successForeground: "#07160E",
   warning: "#F0C36A",
@@ -87,7 +94,7 @@ const C = [
   tip: "#71C8C0"
 };
 function o(r) {
-  const e = r.mode === "light" ? l : b, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
+  const e = r.mode === "light" ? p : B, n = r.mode === "light" ? { background: "#F4C95D", foreground: "#243447" } : {
     background: r.background,
     foreground: r.foreground
   }, [t, d, F, c, g] = r.chart, a = r.syntax ?? {
@@ -99,6 +106,7 @@ function o(r) {
     function: g,
     constant: c
   }, u = {
+    ...r.mode === "dark" ? s : m,
     "--background": r.background,
     "--foreground": r.foreground,
     "--primary": r.primary,
@@ -241,7 +249,7 @@ function o(r) {
     tokens: r.mode === "light" ? { light: u } : { dark: u }
   };
 }
-const p = {
+const E = {
   ...o({
     name: "classic-light",
     displayName: "Classic Light",
@@ -273,9 +281,9 @@ const p = {
     }
   }),
   inheritsBaseTokens: !0,
-  semanticTokens: s,
+  semanticTokens: l,
   tokens: void 0
-}, B = {
+}, k = {
   ...o({
     name: "classic-dark",
     displayName: "Classic Dark",
@@ -307,10 +315,10 @@ const p = {
     }
   }),
   inheritsBaseTokens: !0,
-  semanticTokens: m,
+  semanticTokens: b,
   tokens: void 0
-}, E = [
-  p,
+}, A = [
+  E,
   o({
     name: "paper",
     displayName: "Paper",
@@ -566,7 +574,7 @@ const p = {
       constant: "#745500"
     }
   }),
-  B,
+  k,
   o({
     name: "ink",
     displayName: "Ink",
@@ -882,18 +890,18 @@ const p = {
       constant: "#BF5AF2"
     }
   })
-], D = {
+], v = {
   light: "classic-light",
   dark: "classic-dark"
 };
-function A(r, e) {
+function y(r, e) {
   const n = r.mode ?? "both";
   return n === "both" || n === e;
 }
-function k(r, e) {
-  return r.filter((n) => A(n, e));
+function h(r, e) {
+  return r.filter((n) => y(n, e));
 }
-function y(r) {
+function C(r) {
   const e = /* @__PURE__ */ new Set();
   for (const n of r) {
     if (e.has(n.name))
@@ -902,10 +910,10 @@ function y(r) {
   }
 }
 function i(r, e, n, t) {
-  const d = k(r, e);
+  const d = h(r, e);
   return n && d.some((F) => F.name === n) ? n : t && d.some((F) => F.name === t) ? t : d[0]?.name;
 }
-function f(r, e, n = {}) {
+function S(r, e, n = {}) {
   const t = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, d = t?.version === 1, F = d && typeof t.light == "string" ? t.light : void 0, c = d && typeof t.dark == "string" ? t.dark : void 0;
   return {
     version: 1,
@@ -913,15 +921,15 @@ function f(r, e, n = {}) {
     dark: i(e, "dark", c, n.dark)
   };
 }
-y(E);
+C(A);
 export {
-  D as BUILT_IN_SHELL_THEME_DEFAULTS,
-  C as REQUIRED_SHELL_THEME_TOKENS,
-  y as assertUniqueThemePresetNames,
-  E as builtInShellThemePresets,
+  v as BUILT_IN_SHELL_THEME_DEFAULTS,
+  w as REQUIRED_SHELL_THEME_TOKENS,
+  C as assertUniqueThemePresetNames,
+  A as builtInShellThemePresets,
   o as createShellThemePreset,
-  k as getShellThemePresetsForMode,
-  f as normalizeShellThemeSelection,
-  A as presetSupportsMode,
+  h as getShellThemePresetsForMode,
+  S as normalizeShellThemeSelection,
+  y as presetSupportsMode,
   i as resolveShellThemePresetName
 };

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

@@ -0,0 +1,17 @@
+/** Palette-relative, opaque window material; resolved by CSS only when the theme changes. */
+export declare const LIGHT_WINDOW_TOKENS: {
+    readonly '--floe-window-background': "color-mix(in srgb, var(--card) 35%, white)";
+    readonly '--floe-window-foreground': "var(--foreground)";
+    readonly '--floe-window-muted-foreground': "var(--muted-foreground)";
+    readonly '--floe-window-titlebar-background': "color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground))";
+    readonly '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";
+    readonly '--floe-window-shadow': "0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%)";
+};
+export declare const DARK_WINDOW_TOKENS: {
+    readonly '--floe-window-background': "color-mix(in srgb, var(--card) 90%, white)";
+    readonly '--floe-window-foreground': "var(--foreground)";
+    readonly '--floe-window-muted-foreground': "color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground))";
+    readonly '--floe-window-titlebar-background': "color-mix(in srgb, var(--floe-window-background) 95%, white)";
+    readonly '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";
+    readonly '--floe-window-shadow': "0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%)";
+};

package/dist/styles/themes/windowTokens.js

@@ -0,0 +1,19 @@
+const o = {
+  "--floe-window-background": "color-mix(in srgb, var(--card) 35%, white)",
+  "--floe-window-foreground": "var(--foreground)",
+  "--floe-window-muted-foreground": "var(--muted-foreground)",
+  "--floe-window-titlebar-background": "color-mix(in srgb, var(--floe-window-background) 92%, var(--foreground))",
+  "--floe-window-border": "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))",
+  "--floe-window-shadow": "0 1px 3px rgb(0 0 0 / 14%), 0 12px 28px -8px rgb(0 0 0 / 18%)"
+}, r = {
+  "--floe-window-background": "color-mix(in srgb, var(--card) 90%, white)",
+  "--floe-window-foreground": "var(--foreground)",
+  "--floe-window-muted-foreground": "color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground))",
+  "--floe-window-titlebar-background": "color-mix(in srgb, var(--floe-window-background) 95%, white)",
+  "--floe-window-border": "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))",
+  "--floe-window-shadow": "0 1px 3px rgb(0 0 0 / 30%), 0 12px 28px -8px rgb(0 0 0 / 32%)"
+};
+export {
+  r as DARK_WINDOW_TOKENS,
+  o as LIGHT_WINDOW_TOKENS
+};