@floegence/floe-webapp-core 0.39.9 → 0.40.0

package/dist/themes/dark.css

@@ -11,33 +11,39 @@
   --primary-foreground: hsl(222 30% 10%);
 
   /* Secondary */
-  --secondary: hsl(220 25% 14%);
+  --secondary: hsl(220 18% 15%);
   --secondary-foreground: hsl(210 20% 98%);
 
-  /* Muted */
-  --muted: hsl(220 25% 14%);
-  --muted-foreground: hsl(215 20% 60%);
+  /* Muted — hover/inactive fill, one step above card */
+  --muted: hsl(220 16% 16%);
+  --muted-foreground: hsl(215 16% 56%);
 
-  /* Accent */
-  --accent: hsl(220 25% 16%);
+  /* Accent — selected/active fill, one step above muted */
+  --accent: hsl(220 14% 19%);
   --accent-foreground: hsl(210 20% 98%);
 
   /* Border */
-  --border: hsl(220 20% 18%);
-  --input: hsl(220 25% 14%);
+  --border: hsl(220 16% 20%);
+  --input: hsl(220 18% 15%);
   --ring: hsl(215 25% 70%);
-  --chrome-border: var(--border);
+  /* chrome-border: hairline seams between shell chrome panels */
+  --chrome-border: hsl(220 16% 13%);
+  /* glow: dedicated accent color for glow/bloom effects.
+     --primary in dark mode is near-white (hsl 210 20% 98%), which creates
+     an overpowering white bloom when used as a glow source. This token
+     maps to a specific blue that reads as luminous without burning. */
+  --glow: hsl(217 65% 52%);
   --top-bar-border: var(--chrome-border);
   --activity-bar-border: var(--chrome-border);
   --bottom-bar-border: var(--chrome-border);
   --terminal-panel-border: var(--chrome-border);
 
-  /* Card */
-  --card: hsl(222 28% 10%);
+  /* Card — one clear step above sidebar */
+  --card: hsl(220 20% 13%);
   --card-foreground: hsl(210 20% 98%);
 
-  /* Popover */
-  --popover: hsl(222 28% 10%);
+  /* Popover — floating layer, one step above card */
+  --popover: hsl(220 18% 15%);
   --popover-foreground: hsl(210 20% 98%);
 
   /* Status colors */
@@ -58,20 +64,20 @@
   --highlight-block-note-accent: oklch(0.62 0.14 285);
   --highlight-block-tip-accent: oklch(0.6 0.1 175);
 
-  /* Sidebar */
-  --sidebar: hsl(222 28% 10%);
+  /* Sidebar — distinct structural plane between background and card */
+  --sidebar: hsl(221 22% 11%);
   --sidebar-foreground: hsl(210 20% 98%);
   --sidebar-primary: hsl(217 80% 55%);
   --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(220 25% 16%);
+  --sidebar-accent: hsl(220 14% 19%);
   --sidebar-accent-foreground: hsl(210 20% 98%);
-  --sidebar-border: hsl(220 20% 18%);
+  --sidebar-border: hsl(220 16% 13%);
   --sidebar-ring: hsl(217 80% 55%);
 
-  /* Activity bar */
-  --activity-bar: hsl(222 30% 9%);
-  --activity-bar-foreground: hsl(215 20% 55%);
-  --activity-bar-foreground-active: hsl(210 20% 98%);
+  /* Activity bar — deepest surface, anchors the left edge of the layout */
+  --activity-bar: hsl(222 28% 7%);
+  --activity-bar-foreground: hsl(215 16% 50%);
+  --activity-bar-foreground-active: hsl(210 20% 96%);
   --activity-bar-badge: hsl(217 80% 55%);
   --activity-bar-badge-foreground: hsl(0 0% 100%);
 

package/dist/themes/light.css

@@ -19,8 +19,8 @@
   --muted: hsl(36 15% 94%);
   --muted-foreground: hsl(215 16% 42%);
 
-  /* Accent - Subtle warm highlight */
-  --accent: hsl(34 11% 88%);
+  /* Accent - Subtle warm highlight, darker than sidebar for visible hover/active fills */
+  --accent: hsl(34 9% 85%);
   --accent-foreground: hsl(214 26% 17%);
 
   /* Border - Warm gray */
@@ -33,6 +33,9 @@
   --bottom-bar-border: var(--chrome-border);
   --terminal-panel-border: var(--chrome-border);
 
+  /* glow: in light mode primary is dark ink — works well as a depth/shadow glow accent */
+  --glow: var(--primary);
+
   /* Card */
   --card: hsl(36 100% 99%);
   --card-foreground: hsl(214 26% 17%);
@@ -59,19 +62,20 @@
   --highlight-block-note-accent: oklch(0.52 0.16 285);
   --highlight-block-tip-accent: oklch(0.52 0.12 175);
 
-  /* Sidebar */
-  --sidebar: hsl(36 13% 92%);
+  /* Sidebar — distinct from background, slightly deeper */
+  --sidebar: hsl(34 13% 90%);
   --sidebar-foreground: hsl(214 26% 17%);
   --sidebar-primary: hsl(214 26% 17%);
   --sidebar-primary-foreground: hsl(36 100% 99%);
-  --sidebar-accent: hsl(34 11% 88%);
+  --sidebar-accent: hsl(34 9% 84%);
   --sidebar-accent-foreground: hsl(214 26% 17%);
-  --sidebar-border: hsl(33 11% 84%);
+  --sidebar-border: hsl(33 9% 82%);
   --sidebar-ring: hsl(214 26% 17%);
 
-  /* Activity bar */
-  --activity-bar: hsl(36 13% 92%);
-  --activity-bar-foreground: hsl(215 16% 42%);
+  /* Activity bar — deepest light-mode surface, clearly separate from sidebar.
+     L90% keeps --muted-foreground contrast ratio ≥ 4.5 on this surface (WCAG AA). */
+  --activity-bar: hsl(34 11% 90%);
+  --activity-bar-foreground: hsl(215 14% 46%);
   --activity-bar-foreground-active: hsl(214 26% 17%);
   --activity-bar-badge: hsl(214 26% 17%);
   --activity-bar-badge-foreground: hsl(36 100% 99%);

package/dist/themes/shell-presets.generated.css

@@ -62,6 +62,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #243447;
 }
 :root[data-floe-shell-theme='mist'] {
   --background: #eef3f7;
@@ -126,6 +127,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #234e63;
 }
 :root[data-floe-shell-theme='meadow'] {
   --background: #eef4ec;
@@ -190,6 +192,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #24523d;
 }
 :root[data-floe-shell-theme='citrus'] {
   --background: #fff5e1;
@@ -254,6 +257,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #874000;
 }
 :root[data-floe-shell-theme='lilac'] {
   --background: #f5f0fa;
@@ -318,6 +322,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #51407e;
 }
 :root[data-floe-shell-theme='light-plus'] {
   --background: #ffffff;
@@ -382,6 +387,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #005fb8;
 }
 :root[data-floe-shell-theme='quiet-light'] {
   --background: #f5f5f5;
@@ -446,6 +452,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #4b61b9;
 }
 :root[data-floe-shell-theme='solarized-light'] {
   --background: #fdf6e3;
@@ -510,6 +517,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #075e73;
 }
 :root[data-floe-shell-theme='github-light'] {
   --background: #f6f8fa;
@@ -574,6 +582,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #0969da;
 }
 :root[data-floe-shell-theme='hc-light'] {
   --background: #ffffff;
@@ -638,6 +647,7 @@
   --selection-on-primary-fg: #243447;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #0000a8;
 }
 :root[data-floe-shell-theme='ink'] {
   --background: #0b1420;
@@ -702,6 +712,7 @@
   --selection-on-primary-fg: #eaf2f7;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #395c9f;
 }
 :root[data-floe-shell-theme='slate'] {
   --background: #171b22;
@@ -766,6 +777,7 @@
   --selection-on-primary-fg: #eef1f5;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #52677e;
 }
 :root[data-floe-shell-theme='forest'] {
   --background: #0b1a17;
@@ -830,6 +842,7 @@
   --selection-on-primary-fg: #edf6f1;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #2d7d67;
 }
 :root[data-floe-shell-theme='ember'] {
   --background: #1d1115;
@@ -894,6 +907,7 @@
   --selection-on-primary-fg: #fff1f1;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #a94632;
 }
 :root[data-floe-shell-theme='ocean'] {
   --background: #071a25;
@@ -958,6 +972,7 @@
   --selection-on-primary-fg: #e9f7fc;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #176c8e;
 }
 :root[data-floe-shell-theme='dark-plus'] {
   --background: #1e1e1e;
@@ -1022,6 +1037,7 @@
   --selection-on-primary-fg: #d4d4d4;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #264f78;
 }
 :root[data-floe-shell-theme='monokai'] {
   --background: #272822;
@@ -1086,6 +1102,7 @@
   --selection-on-primary-fg: #f8f8f2;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #5a594e;
 }
 :root[data-floe-shell-theme='nord'] {
   --background: #2e3440;
@@ -1150,6 +1167,7 @@
   --selection-on-primary-fg: #eceff4;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #4c668a;
 }
 :root[data-floe-shell-theme='dracula'] {
   --background: #282a36;
@@ -1214,6 +1232,7 @@
   --selection-on-primary-fg: #f8f8f2;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #52566d;
 }
 :root[data-floe-shell-theme='abyss'] {
   --background: #000c18;
@@ -1278,4 +1297,135 @@
   --selection-on-primary-fg: #ddeeff;
   --selection-code-bg: #58a6ff;
   --selection-code-fg: #08111d;
+  --glow: #005a8d;
+}
+:root[data-floe-shell-theme='studio'] {
+  --background: #111116;
+  --foreground: #e2e2ec;
+  --primary: #9580ff;
+  --primary-foreground: #111116;
+  --secondary: #20202b;
+  --secondary-foreground: #e2e2ec;
+  --muted: #20202b;
+  --muted-foreground: #8888a8;
+  --accent: #20202b;
+  --accent-foreground: #e2e2ec;
+  --border: #2a2a3c;
+  --input: #7070a8;
+  --ring: #9580ff;
+  --chrome-border: #2a2a3c;
+  --top-bar-border: #2a2a3c;
+  --activity-bar-border: #2a2a3c;
+  --bottom-bar-border: #2a2a3c;
+  --terminal-panel-border: #2a2a3c;
+  --card: #18181f;
+  --card-foreground: #e2e2ec;
+  --popover: #18181f;
+  --popover-foreground: #e2e2ec;
+  --success: #72d39c;
+  --success-foreground: #07160e;
+  --warning: #f0c36a;
+  --warning-foreground: #1b1405;
+  --error: #ff8a82;
+  --error-foreground: #210706;
+  --info: #79b8ff;
+  --info-foreground: #061321;
+  --highlight-block-info-accent: #79b8ff;
+  --highlight-block-warning-accent: #f0c36a;
+  --highlight-block-success-accent: #72d39c;
+  --highlight-block-error-accent: #ff8a82;
+  --highlight-block-note-accent: #c19be8;
+  --highlight-block-tip-accent: #71c8c0;
+  --sidebar: #13131a;
+  --sidebar-foreground: #e2e2ec;
+  --sidebar-primary: #9580ff;
+  --sidebar-primary-foreground: #111116;
+  --sidebar-accent: #20202b;
+  --sidebar-accent-foreground: #e2e2ec;
+  --sidebar-border: #2a2a3c;
+  --sidebar-ring: #9580ff;
+  --activity-bar: #13131a;
+  --activity-bar-foreground: #8888a8;
+  --activity-bar-foreground-active: #e2e2ec;
+  --activity-bar-badge: #9580ff;
+  --activity-bar-badge-foreground: #111116;
+  --terminal-background: #0c0c12;
+  --terminal-foreground: #d8d8e8;
+  --chart-1: #9580ff;
+  --chart-2: #79d5f7;
+  --chart-3: #8be08e;
+  --chart-4: #f0c060;
+  --chart-5: #f06090;
+  --selection-bg: #4840a0;
+  --selection-fg: #ffffff;
+  --selection-on-primary-bg: #111116;
+  --selection-on-primary-fg: #e2e2ec;
+  --selection-code-bg: #58a6ff;
+  --selection-code-fg: #08111d;
+  --glow: #4840a0;
+}
+:root[data-floe-shell-theme='graphite'] {
+  --background: #1c1c1e;
+  --foreground: #f2f2f7;
+  --primary: #0070e0;
+  --primary-foreground: #ffffff;
+  --secondary: #3a3a3c;
+  --secondary-foreground: #f2f2f7;
+  --muted: #3a3a3c;
+  --muted-foreground: #aeaeb2;
+  --accent: #3a3a3c;
+  --accent-foreground: #f2f2f7;
+  --border: #38383a;
+  --input: #888888;
+  --ring: #0070e0;
+  --chrome-border: #38383a;
+  --top-bar-border: #38383a;
+  --activity-bar-border: #38383a;
+  --bottom-bar-border: #38383a;
+  --terminal-panel-border: #38383a;
+  --card: #2c2c2e;
+  --card-foreground: #f2f2f7;
+  --popover: #2c2c2e;
+  --popover-foreground: #f2f2f7;
+  --success: #72d39c;
+  --success-foreground: #07160e;
+  --warning: #f0c36a;
+  --warning-foreground: #1b1405;
+  --error: #ff8a82;
+  --error-foreground: #210706;
+  --info: #79b8ff;
+  --info-foreground: #061321;
+  --highlight-block-info-accent: #79b8ff;
+  --highlight-block-warning-accent: #f0c36a;
+  --highlight-block-success-accent: #72d39c;
+  --highlight-block-error-accent: #ff8a82;
+  --highlight-block-note-accent: #c19be8;
+  --highlight-block-tip-accent: #71c8c0;
+  --sidebar: #242426;
+  --sidebar-foreground: #f2f2f7;
+  --sidebar-primary: #0070e0;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #3a3a3c;
+  --sidebar-accent-foreground: #f2f2f7;
+  --sidebar-border: #38383a;
+  --sidebar-ring: #0070e0;
+  --activity-bar: #242426;
+  --activity-bar-foreground: #aeaeb2;
+  --activity-bar-foreground-active: #f2f2f7;
+  --activity-bar-badge: #0070e0;
+  --activity-bar-badge-foreground: #ffffff;
+  --terminal-background: #141416;
+  --terminal-foreground: #e5e5ea;
+  --chart-1: #0a84ff;
+  --chart-2: #32ade6;
+  --chart-3: #34c759;
+  --chart-4: #ff9f0a;
+  --chart-5: #ff453a;
+  --selection-bg: #0070e0;
+  --selection-fg: #ffffff;
+  --selection-on-primary-bg: #1c1c1e;
+  --selection-on-primary-fg: #f2f2f7;
+  --selection-code-bg: #58a6ff;
+  --selection-code-fg: #08111d;
+  --glow: #0070e0;
 }

package/dist/ui.css

@@ -516,7 +516,7 @@
   }
 
   .processing-text-glow {
-    color: var(--primary);
+    color: var(--glow);
     animation: text-glow 2s ease-in-out infinite;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.39.9",
+  "version": "0.40.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",