@floegence/floe-webapp-core 0.87.0 → 0.87.1

package/dist/floe.css

@@ -22,6 +22,7 @@
 @import './themes/light.css';
 @import './themes/dark.css';
 @import './themes/shell-presets.generated.css';
+@import './themes/porcelain-light.css';
 
 
 /*

package/dist/standalone.css

@@ -9,5 +9,6 @@
 @import './themes/light.css';
 @import './themes/dark.css';
 @import './themes/shell-presets.generated.css';
+@import './themes/porcelain-light.css';
 @import './surface.css';
 @import './input-focus.css';

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

@@ -1,5 +1,5 @@
 import { LIGHT_WINDOW_TOKENS } from './windowTokens.ts';
-import type { FloeThemePreset, FloeThemePresetMode } from './index';
+import type { FloeMonacoThemeDefinition, FloeThemePreset, FloeThemePresetMode, FloeThemeTokenMap } from './index';
 export type FloeShellThemeMode = 'light' | 'dark';
 export interface FloeShellThemeSelection {
     version: 1;
@@ -49,6 +49,10 @@ interface ShellThemePaletteDefinition {
     fileIconColors?: Partial<Record<'primary' | 'warning' | 'info' | 'success' | 'error', string>>;
     status?: Partial<Record<keyof typeof LIGHT_STATUS, string>>;
     windowTokens?: Partial<Record<keyof typeof LIGHT_WINDOW_TOKENS, string>>;
+    /** Authored material and reading roles, shared by CSS and non-renderer hosts. */
+    semanticTokens?: FloeThemeTokenMap;
+    /** Complete inherited editor roles when the base syntax is unsuitable. */
+    monaco?: Partial<Pick<FloeMonacoThemeDefinition, 'rules' | 'colors'>>;
     syntax?: {
         comment: string;
         keyword: string;
@@ -88,7 +92,7 @@ export declare const builtInShellThemePresets: readonly [FloeThemePreset, FloeTh
         border?: string;
         colors: readonly [string, string, string, string, string];
     };
-    monaco?: Partial<Record<"light" | "dark", import("./index").FloeMonacoThemeDefinition>>;
+    monaco?: Partial<Record<"light" | "dark", FloeMonacoThemeDefinition>>;
 }, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, {
     inheritsBaseTokens: true;
     semanticTokens: Readonly<Partial<Record<`--${string}`, string>>>;
@@ -105,7 +109,7 @@ export declare const builtInShellThemePresets: readonly [FloeThemePreset, FloeTh
         border?: string;
         colors: readonly [string, string, string, string, string];
     };
-    monaco?: Partial<Record<"light" | "dark", import("./index").FloeMonacoThemeDefinition>>;
+    monaco?: Partial<Record<"light" | "dark", FloeMonacoThemeDefinition>>;
 }, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset, FloeThemePreset];
 export declare const BUILT_IN_SHELL_THEME_DEFAULTS: {
     readonly light: "classic-light";

package/dist/styles/themes/presets.js

@@ -1,5 +1,5 @@
-import { createProgressTokens as B } from "./progressTokens.js";
-import { DARK_WINDOW_TOKENS as k, LIGHT_WINDOW_TOKENS as E } from "./windowTokens.js";
+import { createProgressTokens as k } from "./progressTokens.js";
+import { DARK_WINDOW_TOKENS as B, LIGHT_WINDOW_TOKENS as E } from "./windowTokens.js";
 import { CLASSIC_LIGHT_SEMANTIC_TOKENS as t, CLASSIC_DARK_SEMANTIC_TOKENS as F } from "./classicSemanticTokens.js";
 const T = [
   "--floe-window-background",
@@ -112,7 +112,7 @@ function o(r) {
     function: s,
     constant: i
   }, g = {
-    ...r.mode === "dark" ? k : E,
+    ...r.mode === "dark" ? B : E,
     ...r.windowTokens,
     "--background": r.background,
     "--foreground": r.foreground,
@@ -182,10 +182,10 @@ 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, b] of Object.entries(r.fileIconColors ?? {}))
-    g[`--floe-file-icon-${l}`] = b;
-  return {
+  Object.assign(g, k(r.mode, g));
+  for (const [m, b] of Object.entries(r.fileIconColors ?? {}))
+    g[`--floe-file-icon-${m}`] = b;
+  return Object.assign(g, r.semanticTokens), {
     name: r.name,
     displayName: r.displayName,
     description: r.description,
@@ -220,7 +220,8 @@ function o(r) {
           { token: "entity.name.function", foreground: a.function },
           { token: "support.function", foreground: a.function },
           { token: "constant.language", foreground: a.constant },
-          { token: "variable.predefined", foreground: a.constant }
+          { token: "variable.predefined", foreground: a.constant },
+          ...r.monaco?.rules ?? []
         ],
         colors: {
           "editor.background": r.background,
@@ -254,7 +255,8 @@ function o(r) {
           "editorInfo.foreground": e.info,
           "scrollbarSlider.background": `${r.input}66`,
           "scrollbarSlider.hoverBackground": `${r.input}99`,
-          "scrollbarSlider.activeBackground": `${r.input}CC`
+          "scrollbarSlider.activeBackground": `${r.input}CC`,
+          ...r.monaco?.colors
         }
       }
     },
@@ -329,38 +331,88 @@ const C = {
   inheritsBaseTokens: !0,
   semanticTokens: F,
   tokens: void 0
-}, D = [
+}, h = [
   o({
     name: "porcelain-light",
-    inlineCode: { foreground: "#006A85", background: "#E9EBE8" },
+    inlineCode: { foreground: "#674778", background: "#F0F0F0" },
     displayName: "Porcelain Light",
-    description: "Original Redeven warm ivory and blue-gray ink, with quiet modern surfaces.",
+    description: "Clean porcelain whites, neutral layers, and restrained charcoal.",
     fileIconColors: {
-      primary: "hsl(214 26% 17%)",
+      primary: "#343434",
       warning: "hsl(38 92% 50%)",
       info: "hsl(217 91% 60%)",
       success: "oklch(0.68 0.16 150)",
       error: "oklch(0.65 0.2 25)"
     },
     mode: "light",
-    background: "#F4F1ED",
-    foreground: "#202A37",
-    card: "#FFFDFA",
-    muted: "#F1EFEC",
-    accent: "#E4E1DD",
-    mutedForeground: "#576579",
-    primary: "#202A37",
-    primaryForeground: "#FFFDFA",
-    border: "#D8D3CC",
-    input: "#828891",
-    sidebar: "#EEECE9",
+    background: "#FAFAFA",
+    foreground: "#292929",
+    card: "#FFFFFF",
+    muted: "#F4F4F4",
+    accent: "#EEEEEE",
+    mutedForeground: "#686868",
+    primary: "#343434",
+    primaryForeground: "#FFFFFF",
+    border: "#DEDEDE",
+    input: "#878787",
+    sidebar: "#F7F7F7",
     terminalBackground: "#202A37",
     terminalForeground: "#EBEBEB",
-    selectionBackground: "#2671D9",
+    selectionBackground: "#343434",
     selectionForeground: "#FFFFFF",
-    chart: ["#202A37", "#5A687C", "#2671D9", "#287A4B", "#835800"],
+    chart: ["#343434", "#626262", "#2671D9", "#287A4B", "#835800"],
+    semanticTokens: {
+      "--accent-foreground": "#353535",
+      "--sidebar-accent": "#E9E9E9",
+      "--sidebar-accent-foreground": "#353535",
+      "--activity-bar-foreground-active": "#343434",
+      "--selection-on-primary-bg": "#EAEAEA",
+      "--selection-on-primary-fg": "#292929",
+      "--selection-code-bg": "#EAEAEA",
+      "--selection-code-fg": "#292929",
+      "--floe-progress-text-base": "#292929",
+      "--floe-progress-text-peak": "#686868",
+      "--floe-progress-primary-base": "#343434",
+      "--floe-field-fill": "#FAFAFA",
+      "--floe-field-fill-hover": "#F5F5F5",
+      "--floe-field-placeholder": "#686868",
+      "--floe-ink-quiet": "#686868",
+      "--floe-ink-ghost": "#686868",
+      "--floe-field-edge": "#C4C4C4",
+      "--floe-field-edge-hover": "#A3A3A3",
+      "--floe-control-edge": "#878787",
+      "--floe-control-edge-hover": "#686868",
+      "--floe-well": "#F6F6F6",
+      "--floe-well-strong": "#F0F0F0",
+      "--floe-well-on-plane": "#F6F6F6",
+      "--floe-workbench-canvas": "#F4F4F4"
+    },
+    monaco: {
+      rules: [
+        { token: "attribute.name", foreground: "#9C225E" },
+        { token: "attribute.value", foreground: "#26736F" },
+        { token: "attribute.value.number", foreground: "#8A5A00" },
+        { token: "attribute.value.unit", foreground: "#8A5A00" },
+        { token: "tag", foreground: "#245B9B" },
+        { token: "metatag", foreground: "#005FB8" },
+        { token: "metatag.content", foreground: "#26736F" },
+        { token: "delimiter", foreground: "#292929" },
+        { token: "delimiter.bracket", foreground: "#292929" },
+        { token: "operator", foreground: "#292929" },
+        { token: "regexp", foreground: "#26736F" },
+        { token: "invalid", foreground: "#B32635" },
+        { token: "string.invalid", foreground: "#B32635" }
+      ],
+      colors: {
+        "editor.inactiveSelectionBackground": "#EAEAEA",
+        "editor.selectionHighlightBackground": "#EAEAEA",
+        "editor.findMatchBackground": "#EAEAEA",
+        "editor.findMatchHighlightBackground": "#EEEEEE",
+        "editor.findMatchBorder": "#343434"
+      }
+    },
     syntax: {
-      comment: "#5A687C",
+      comment: "#686868",
       keyword: "#005FB8",
       string: "#26736F",
       number: "#8A5A00",
@@ -1085,12 +1137,12 @@ const C = {
   light: "classic-light",
   dark: "classic-dark"
 };
-function h(r, e) {
+function f(r, e) {
   const n = r.mode ?? "both";
   return n === "both" || n === e;
 }
-function f(r, e) {
-  return r.filter((n) => h(n, e));
+function D(r, e) {
+  return r.filter((n) => f(n, e));
 }
 function w(r) {
   const e = /* @__PURE__ */ new Set();
@@ -1100,27 +1152,27 @@ function w(r) {
     e.add(n.name);
   }
 }
-function m(r, e, n, d) {
-  const c = f(r, e);
+function l(r, e, n, d) {
+  const c = D(r, e);
   return n && c.some((u) => u.name === n) ? n : d && c.some((u) => u.name === d) ? d : c[0]?.name;
 }
 function L(r, e, n = {}) {
   const d = typeof r == "object" && r !== null && !Array.isArray(r) ? r : void 0, c = d?.version === 1, u = c && typeof d.light == "string" ? d.light : void 0, i = c && typeof d.dark == "string" ? d.dark : void 0;
   return {
     version: 1,
-    light: m(e, "light", u, n.light),
-    dark: m(e, "dark", i, n.dark)
+    light: l(e, "light", u, n.light),
+    dark: l(e, "dark", i, n.dark)
   };
 }
-w(D);
+w(h);
 export {
   x as BUILT_IN_SHELL_THEME_DEFAULTS,
   T as REQUIRED_SHELL_THEME_TOKENS,
   w as assertUniqueThemePresetNames,
-  D as builtInShellThemePresets,
+  h as builtInShellThemePresets,
   o as createShellThemePreset,
-  f as getShellThemePresetsForMode,
+  D as getShellThemePresetsForMode,
   L as normalizeShellThemeSelection,
-  h as presetSupportsMode,
-  m as resolveShellThemePresetName
+  f as presetSupportsMode,
+  l as resolveShellThemePresetName
 };