@floegence/floe-webapp-core 0.86.60 → 0.86.62

package/dist/language.css

@@ -0,0 +1,320 @@
+/*
+ * Floe visual language — the single source of truth for planes, ink, state and
+ * elevation. Every component recipe derives from this file; nothing here is a
+ * component. A theme only supplies the six base colors, and the rest of the
+ * ladder is derived from them, so every preset inherits the same system.
+ *
+ * Four ideas carry the whole language:
+ *
+ * 1. Depth is a fill step, not a line. Planes separate by a few percent of ink;
+ *    a hairline appears only where two planes would otherwise land on the same
+ *    value. Cards therefore carry no border at rest.
+ * 2. One state ramp. Hover, press and selection are all percentages of ink —
+ *    the same three alphas everywhere, so a row, a tab and a menu item respond
+ *    with one gesture. Brand color never means "hovered".
+ * 3. Corners are concentric. A child radius is its parent's radius minus the
+ *    gap between them, so nested groups never show a mismatched curve.
+ * 4. Motion is decisive. Short, decelerating, color-and-transform only.
+ */
+
+:root,
+[data-floe-theme] {
+  /* ---------------------------------------------------------------------
+   * Planes — four steps of depth. `plane` is the page ground, `surface` is a
+   * content plane sitting on it, `well` is recessed into a surface (fields,
+   * code, rails, track backgrounds), `float` is lifted above everything with
+   * a real shadow. Values are derived so a preset only has to pick its canvas.
+   * ------------------------------------------------------------------- */
+  --floe-plane: var(--background);
+  --floe-plane-raised: var(--card);
+  --floe-plane-float: var(--popover);
+  --floe-well: color-mix(in srgb, var(--foreground) 4.5%, var(--card));
+  --floe-well-strong: color-mix(in srgb, var(--foreground) 7%, var(--card));
+  --floe-well-on-plane: color-mix(in srgb, var(--foreground) 4%, var(--background));
+
+  /* ---------------------------------------------------------------------
+   * Ink — a four-step reading ramp. `ink` is body, `ink-soft` secondary copy,
+   * `ink-quiet` metadata and icons that sit outside the reading path,
+   * `ink-ghost` placeholders and disabled. Never invent a fifth grey.
+   * ------------------------------------------------------------------- */
+  --floe-ink: var(--foreground);
+  --floe-ink-soft: var(--muted-foreground);
+  --floe-ink-quiet: color-mix(in srgb, var(--foreground) 62%, var(--background));
+  --floe-ink-ghost: color-mix(in srgb, var(--foreground) 44%, var(--background));
+
+  /* ---------------------------------------------------------------------
+   * Hairlines — one width (1px), three strengths. `line` separates equal-value
+   * planes, `line-strong` marks an editable boundary that must stay findable,
+   * `line-quiet` is a divider inside dense content.
+   * ------------------------------------------------------------------- */
+  --floe-line: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --floe-line-strong: color-mix(in srgb, var(--foreground) 18%, transparent);
+  --floe-line-quiet: color-mix(in srgb, var(--foreground) 5.5%, transparent);
+  --floe-line-inverse: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Fields — a well with a whisper of an edge. The fill (not a line) says
+   * "you can type here"; the edge exists so the well has a boundary at all,
+   * and it brightens on hover, then more on focus.
+   *
+   * The edge is calibrated against the field's own fill, not the card, since
+   * that is the pair that decides whether a boundary is visible. 22% ink is
+   * the lowest value where every preset lands inside the quiet band this
+   * repository already uses for idle fields (1.25–2:1, set for porcelain-dark
+   * in b80c3e8): it measures 1.26 at the narrowest (solarized-light) and 1.76
+   * at the widest (forest). 16% left ten presets below 1.25, and in the dark
+   * presets it collapsed onto the fill entirely.
+   *
+   * The resting edge is deliberately below the 3:1 of a hit-area boundary:
+   * the well fill, the visible label and the field's own text identify the
+   * control, and `--ring` carries the 3:1 focus boundary. A labelled text
+   * field is what WCAG 1.4.11 excepts; the check that guards this file
+   * enforces the band rather than letting the edge disappear.
+   * ------------------------------------------------------------------- */
+  --floe-field-fill: var(--floe-well);
+  --floe-field-fill-hover: var(--floe-well-strong);
+  --floe-field-edge: color-mix(in srgb, var(--foreground) 22%, var(--card));
+  --floe-field-edge-hover: color-mix(in srgb, var(--foreground) 32%, var(--card));
+  --floe-field-placeholder: color-mix(in srgb, var(--foreground) 42%, var(--background));
+  /* An unchecked box or switch has no fill of its own, so its boundary *is*
+  * the control and must clear 3:1 against every plane it can sit on. */
+  --floe-control-edge: color-mix(in srgb, var(--foreground) 50%, var(--card));
+  --floe-control-edge-hover: color-mix(in srgb, var(--foreground) 66%, var(--card));
+
+  /* ---------------------------------------------------------------------
+   * State — the only hover/press/selection values in the system. They are
+   * translucent so they compose over any plane without a second palette.
+   * ------------------------------------------------------------------- */
+  --floe-state-hover: color-mix(in srgb, var(--foreground) 5.5%, transparent);
+  --floe-state-press: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --floe-state-selected: color-mix(in srgb, var(--primary) 8%, transparent);
+  --floe-state-selected-strong: color-mix(in srgb, var(--primary) 12%, transparent);
+  --floe-state-on-inverse-hover: color-mix(in srgb, var(--primary-foreground) 12%, transparent);
+
+  /* Accent — jade is the one chromatic voice: focus, selection and positive
+   * emphasis. It is never used for a resting surface. */
+  --floe-accent-ink: var(--ring);
+  --floe-accent-soft: color-mix(in srgb, var(--ring) 12%, transparent);
+  --floe-accent-line: color-mix(in srgb, var(--ring) 34%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Elevation — three steps, used sparingly. Resting cards get `none`; the
+   * hairline + fill step already separate them. `raised` is for interactive
+   * cards on hover, `float` for popovers, menus, dialogs and windows.
+   * ------------------------------------------------------------------- */
+  --floe-elevation-raised:
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent),
+    0 1px 1px -0.5px color-mix(in srgb, #000 5%, transparent);
+  --floe-elevation-float:
+    0 12px 32px -8px color-mix(in srgb, #000 18%, transparent),
+    0 4px 10px -4px color-mix(in srgb, #000 10%, transparent),
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent);
+  --floe-elevation-float-strong:
+    0 24px 56px -12px color-mix(in srgb, #000 26%, transparent),
+    0 8px 20px -8px color-mix(in srgb, #000 14%, transparent),
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Shape — concentric ladder. sm 6 · md 8 · control 10 · group 12 ·
+   * card 16 · panel 20 · float 20. A 10px control inside a 16px card with
+   * 8px padding lands on 8px, which is md: the curve stays parallel.
+   * ------------------------------------------------------------------- */
+  --floe-radius-xs: 0.25rem;
+  --floe-radius-sm: 0.375rem;
+  --floe-radius-md: 0.5rem;
+  --floe-radius-control: 0.625rem;
+  --floe-radius-field: 0.625rem;
+  --floe-radius-group: 0.75rem;
+  --floe-radius-card: 1rem;
+  --floe-radius-panel: 1.25rem;
+  --floe-radius-floating: 1.25rem;
+
+  /* ---------------------------------------------------------------------
+   * Density — one control scale, one row scale. sm 28 · md 32 · lg 36.
+   * Rows sit at 30 so a list of rows reads calmer than a toolbar.
+   * ------------------------------------------------------------------- */
+  --floe-control-height-xs: 1.5rem;
+  --floe-control-height-sm: 1.75rem;
+  --floe-control-height-md: 2rem;
+  --floe-control-height-lg: 2.25rem;
+  --floe-control-padding-sm: 0.5rem;
+  --floe-control-padding-md: 0.625rem;
+  --floe-control-padding-lg: 0.875rem;
+  --floe-row-height: 1.875rem;
+  --floe-row-height-compact: 1.625rem;
+
+  /* ---------------------------------------------------------------------
+   * Box rhythm — five paddings and three gaps. A control pad keeps a 10px
+   * radius concentric inside a 12px group; a card pad is the gutter that
+   * makes a plane read as an object rather than a rectangle.
+   * ------------------------------------------------------------------- */
+  --floe-pad-tight: 0.375rem;
+  --floe-pad-control: 0.5rem;
+  --floe-pad-group: 0.75rem;
+  --floe-pad-card: 0.875rem;
+  --floe-pad-panel: 1rem;
+  --floe-gap-inline: 0.25rem;
+  --floe-gap-control: 0.375rem;
+  --floe-gap-group: 0.75rem;
+  --floe-gap-section: 1.25rem;
+
+  /* ---------------------------------------------------------------------
+   * Type — 11 caption · 12 supporting · 13 control and body · 16 heading.
+   * One step per role; no component picks its own size.
+   * ------------------------------------------------------------------- */
+  --floe-type-caption: 0.6875rem;
+  --floe-type-supporting: 0.75rem;
+  --floe-type-control: 0.8125rem;
+  --floe-type-body: 0.8125rem;
+  --floe-type-heading: 1rem;
+  --floe-type-heading-sm: 0.9375rem;
+  --floe-type-display: 1.375rem;
+  /* Below caption. Only decorative chips that must fit inside an 8-10px
+   * badge belong here — never running text, metadata or a control label. */
+  --floe-type-micro: 0.5rem;
+  --floe-type-nano: 0.4375rem;
+  --floe-line-caption: 0.9375rem;
+  --floe-line-control: 1.25rem;
+  --floe-line-body: 1.375rem;
+  --floe-line-heading: 1.375rem;
+
+  /* ---------------------------------------------------------------------
+   * Motion — one decelerating curve and one settle curve. Nothing bounces
+   * except a deliberate spring for a control that changes shape.
+   * ------------------------------------------------------------------- */
+  --floe-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --floe-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --floe-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --floe-duration-instant: 90ms;
+  --floe-duration-fast: 140ms;
+  --floe-duration-base: 200ms;
+  --floe-duration-slow: 280ms;
+  --floe-duration-float: 240ms;
+  --floe-hover-lift: -1px;
+  --floe-press-scale: 0.985;
+  --floe-hover-lift-strong: -2px;
+}
+
+/*
+ * The interaction primitives. Components compose these instead of writing
+ * their own hover recipes, which is what kept the old set inconsistent.
+ */
+
+/* Every interactive surface moves through the same transition set. */
+[data-floe-interactive] {
+  transition:
+    background-color var(--floe-duration-fast) var(--floe-ease-out),
+    border-color var(--floe-duration-fast) var(--floe-ease-out),
+    color var(--floe-duration-fast) var(--floe-ease-out),
+    box-shadow var(--floe-duration-base) var(--floe-ease-out),
+    transform var(--floe-duration-fast) var(--floe-ease-out);
+}
+
+/* Rows, tabs, menu items: fill is transparent, so the state layer composes
+ * over whatever plane hosts them. A control that declares a surface part owns
+ * its own face (surface.css) and keeps the state layer off its fill, so a
+ * selected tab is not repainted by the generic selection tint. */
+[data-floe-interactive]:where(
+    [data-floe-interactive='row'],
+    [data-floe-interactive='item']
+  ):not([data-floe-surface-part]):hover {
+  background-color: var(--floe-state-hover);
+  color: var(--floe-ink);
+}
+
+[data-floe-interactive]:where(
+    [data-floe-interactive='row'],
+    [data-floe-interactive='item']
+  ):not([data-floe-surface-part]):active {
+  background-color: var(--floe-state-press);
+}
+
+[data-floe-interactive]:not([data-floe-surface-part]):where(
+    [aria-selected='true'],
+    [data-selected='true']
+  ) {
+  background-color: var(--floe-state-selected);
+  color: var(--floe-ink);
+}
+
+/* Icon buttons rise a single step of ink on hover, in addition to the fill. */
+[data-floe-interactive='icon']:hover {
+  color: var(--floe-ink);
+}
+
+/* Pressible controls settle rather than travel. */
+[data-floe-interactive='press']:active {
+  transform: scale(var(--floe-press-scale));
+}
+
+/* Clickable planes rise one step and take the first elevation. A card is not a
+ * control: it travels instead of settling, and the shadow says it detached from
+ * the canvas rather than competing with the fill step. */
+[data-floe-interactive='lift']:hover {
+  transform: translateY(var(--floe-hover-lift));
+  box-shadow: var(--floe-elevation-raised);
+}
+
+/*
+ * The field surface. One recipe for every editable boundary — text inputs,
+ * textareas, compound number/select fields, dropdown triggers and directory
+ * pickers — so a form never mixes two field looks. It is a filled well with a
+ * whisper edge, not a box: the fill carries the affordance, the edge only
+ * gives the well an end, and focus brightens the edge (see input-focus.css,
+ * which owns the color-only focus contract).
+ */
+@layer components {
+  .floe-field {
+    border: 1px solid var(--floe-field-edge);
+    border-radius: var(--floe-radius-field);
+    background-color: var(--floe-field-fill);
+    color: var(--floe-ink);
+    transition:
+      background-color var(--floe-duration-fast) var(--floe-ease-out),
+      border-color var(--floe-duration-fast) var(--floe-ease-out);
+  }
+
+  .floe-field:hover:not(:disabled):not([aria-disabled='true']) {
+    border-color: var(--floe-field-edge-hover);
+  }
+
+  .floe-field::placeholder {
+    color: var(--floe-field-placeholder);
+    opacity: 1;
+  }
+
+  .floe-field[aria-invalid='true'] {
+    border-color: color-mix(in srgb, var(--error) 62%, var(--card));
+  }
+
+  .floe-field:disabled,
+  .floe-field[aria-disabled='true'] {
+    background-color: var(--floe-plane);
+    border-color: var(--floe-line);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-floe-interactive] {
+    transition-duration: 1ms;
+  }
+  [data-floe-interactive='press']:active {
+    transform: none;
+  }
+  [data-floe-interactive='lift']:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-floe-theme] {
+    --floe-line: CanvasText;
+    --floe-line-strong: CanvasText;
+    --floe-state-hover: Highlight;
+    --floe-state-selected: Highlight;
+    --floe-elevation-float: none;
+    --floe-elevation-float-strong: none;
+  }
+}

package/dist/primitives.css

@@ -1,26 +1,32 @@
-/* Shared typography, spacing and shape; no layout or palette ownership. */
+/*
+ * Fonts, tracking, spacing, and the coarse-pointer touch scale.
+ *
+ * Shape, type, motion and elevation tokens live in `language.css`, the single
+ * source of truth for the visual scale. This file must not restate them: both
+ * used to declare the same names with different values, so whichever file was
+ * imported last silently won. What stays here is what `language.css` does not
+ * own, plus the touch overrides that must land on `body` instead of `:root`.
+ */
 :root {
-  --radius: 0.375rem;
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
-  --floe-type-caption: 0.6875rem;
-  --floe-type-supporting: 0.75rem;
-  --floe-type-control: 0.75rem;
-  --floe-type-body: 0.75rem;
-  --floe-type-heading: 1rem;
-  --floe-line-control: 1.125rem;
-  --floe-line-body: 1.25rem;
-  --floe-control-height-sm: 1.75rem;
-  --floe-control-height-md: 2rem;
-  --floe-row-height: 1.75rem;
+  /* `--radius` predates the language ladder and is still read by downstream
+   * consumers. Point it at the ladder rather than hard-coding a second control
+   * radius; the reference resolves at computed-value time, so import order no
+   * longer decides the result. */
+  --radius: var(--floe-radius-control);
+
+  /* Type: a precise geometric humanist voice with optical sizing. */
+  --font-sans: 'Inter', 'InterVariable', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
+  --font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Fira Code', 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  /* Soft tracking keeps rounded geometry from reading as loose at small sizes. */
+  --floe-tracking-tight: -0.02em;
+  --floe-tracking-normal: -0.011em;
+  --floe-tracking-caps: 0.06em;
+
   --floe-space-1: 0.25rem;
   --floe-space-2: 0.5rem;
   --floe-space-3: 0.75rem;
   --floe-space-4: 1rem;
   --floe-space-6: 1.5rem;
-  --floe-radius-control: 0.375rem;
-  --floe-radius-group: 0.5rem;
-  --floe-radius-floating: 12px;
 }
 
 /* Action labels stay on one line; their containing toolbar owns reflow. */

package/dist/standalone.css

@@ -5,6 +5,7 @@
  * Applications own layout and declare data-floe-surface on visible boundaries.
  */
 @import './primitives.css';
+@import './language.css';
 @import './themes/light.css';
 @import './themes/dark.css';
 @import './themes/shell-presets.generated.css';

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

@@ -1,71 +1,71 @@
 export declare const CLASSIC_LIGHT_CSS_TOKENS: {
     '--floe-window-background': "var(--popover)";
     '--floe-window-titlebar-background': "var(--popover)";
-    '--background': "#f8f7f2";
-    '--foreground': "#303a34";
-    '--inline-code-foreground': "#1559B5";
-    '--inline-code-background': "#EEF0EF";
-    '--primary': "#465a43";
-    '--primary-foreground': "#f8faf5";
-    '--secondary': "#eeefe8";
-    '--secondary-foreground': "#545f56";
-    '--muted': "#e9ece3";
-    '--muted-foreground': "#5e695c";
-    '--accent': "#e0e7da";
-    '--accent-foreground': "#303a34";
-    '--border': "#d4d8cd";
-    '--input': "#858e80";
-    '--ring': "#56694f";
-    '--chrome-border': "#dedfd7";
+    '--background': "#f6f4ef";
+    '--foreground': "#1a1b19";
+    '--inline-code-foreground': "#1c6b57";
+    '--inline-code-background': "#eeebe4";
+    '--primary': "#1c1d1b";
+    '--primary-foreground': "#fbfaf7";
+    '--secondary': "#edeae3";
+    '--secondary-foreground': "#4a4b46";
+    '--muted': "#efede7";
+    '--muted-foreground': "#6b6a64";
+    '--accent': "#eeebe4";
+    '--accent-foreground': "#1a1b19";
+    '--border': "#e4e1d9";
+    '--input': "#c9c6bd";
+    '--ring': "#2f7d63";
+    '--chrome-border': "#eeebe4";
     '--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': "#fcfbf7";
-    '--card-foreground': "#303a34";
-    '--popover': "#fffefa";
-    '--popover-foreground': "#303a34";
-    '--success': "#496744";
-    '--success-foreground': "#f8faf5";
-    '--warning': "#856828";
-    '--warning-foreground': "#fffefa";
-    '--error': "#b74744";
-    '--error-foreground': "#fffefa";
-    '--info': "#2671d9";
-    '--info-foreground': "#fffefa";
-    '--highlight-block-info-accent': "oklch(0.52 0.14 245)";
-    '--highlight-block-warning-accent': "oklch(0.62 0.16 65)";
-    '--highlight-block-success-accent': "oklch(0.55 0.14 155)";
-    '--highlight-block-error-accent': "oklch(0.55 0.16 25)";
-    '--highlight-block-note-accent': "oklch(0.52 0.16 285)";
-    '--highlight-block-tip-accent': "oklch(0.52 0.12 175)";
-    '--sidebar': "#efeee7";
-    '--sidebar-foreground': "#303a34";
-    '--sidebar-primary': "#465a43";
-    '--sidebar-primary-foreground': "#f8faf5";
-    '--sidebar-accent': "#e0e7da";
-    '--sidebar-accent-foreground': "#303a34";
-    '--sidebar-border': "#dedfd7";
-    '--sidebar-ring': "#56694f";
-    '--activity-bar': "#eeede6";
-    '--activity-bar-foreground': "#5e695c";
-    '--activity-bar-foreground-active': "#303a34";
-    '--activity-bar-badge': "#465a43";
-    '--activity-bar-badge-foreground': "#f8faf5";
-    '--terminal-background': "hsl(214 26% 17%)";
-    '--terminal-foreground': "hsl(0 0% 92%)";
-    '--chart-1': "hsl(214 26% 17%)";
-    '--chart-2': "hsl(215 16% 42%)";
-    '--chart-3': "hsl(217 91% 60%)";
-    '--chart-4': "oklch(0.68 0.16 150)";
-    '--chart-5': "hsl(38 92% 50%)";
-    '--selection-bg': "hsl(217 91% 60%)";
-    '--selection-fg': "hsl(0 0% 100%)";
-    '--selection-on-primary-bg': "hsl(38 92% 50%)";
-    '--selection-on-primary-fg': "hsl(214 26% 17%)";
-    '--selection-code-bg': "hsl(212 100% 67%)";
-    '--selection-code-fg': "hsl(220 20% 8%)";
-    '--glow': "#465a43";
+    '--card': "#fefdfb";
+    '--card-foreground': "#1a1b19";
+    '--popover': "#fffefc";
+    '--popover-foreground': "#1a1b19";
+    '--success': "#227a50";
+    '--success-foreground': "#ffffff";
+    '--warning': "#8f5c0d";
+    '--warning-foreground': "#ffffff";
+    '--error': "#b8352c";
+    '--error-foreground': "#ffffff";
+    '--info': "#2a5f9e";
+    '--info-foreground': "#ffffff";
+    '--highlight-block-info-accent': "oklch(0.52 0.13 250)";
+    '--highlight-block-warning-accent': "oklch(0.64 0.13 72)";
+    '--highlight-block-success-accent': "oklch(0.55 0.12 160)";
+    '--highlight-block-error-accent': "oklch(0.55 0.17 27)";
+    '--highlight-block-note-accent': "oklch(0.53 0.15 292)";
+    '--highlight-block-tip-accent': "oklch(0.56 0.09 195)";
+    '--sidebar': "#f1efe9";
+    '--sidebar-foreground': "#1a1b19";
+    '--sidebar-primary': "#1c1d1b";
+    '--sidebar-primary-foreground': "#fbfaf7";
+    '--sidebar-accent': "#eeebe4";
+    '--sidebar-accent-foreground': "#1a1b19";
+    '--sidebar-border': "#e8e5dd";
+    '--sidebar-ring': "#2f7d63";
+    '--activity-bar': "#edeae3";
+    '--activity-bar-foreground': "#5f5f58";
+    '--activity-bar-foreground-active': "#1a1b19";
+    '--activity-bar-badge': "#1c1d1b";
+    '--activity-bar-badge-foreground': "#fbfaf7";
+    '--terminal-background': "#16171a";
+    '--terminal-foreground': "#e9e7e2";
+    '--chart-1': "#2f7d63";
+    '--chart-2': "#5f5f58";
+    '--chart-3': "#8f5c0d";
+    '--chart-4': "#b8352c";
+    '--chart-5': "#2a5f9e";
+    '--selection-bg': "#cde7db";
+    '--selection-fg': "#10211b";
+    '--selection-on-primary-bg': "#6fd0a8";
+    '--selection-on-primary-fg': "#082016";
+    '--selection-code-bg': "#bcded0";
+    '--selection-code-fg': "#0c1f18";
+    '--glow': "#2f7d63";
     '--floe-window-foreground': "var(--foreground)";
     '--floe-window-muted-foreground': "var(--muted-foreground)";
     '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";
@@ -74,71 +74,71 @@ export declare const CLASSIC_LIGHT_CSS_TOKENS: {
 export declare const CLASSIC_DARK_CSS_TOKENS: {
     '--floe-window-background': "var(--popover)";
     '--floe-window-titlebar-background': "var(--popover)";
-    '--background': "#202223";
-    '--foreground': "#e5e6e2";
-    '--inline-code-foreground': "#6CDCEB";
-    '--inline-code-background': "#263032";
-    '--primary': "#bccbb8";
-    '--primary-foreground': "#20291f";
-    '--secondary': "#303435";
-    '--secondary-foreground': "#b8bdb8";
-    '--muted': "#343738";
-    '--muted-foreground': "#9da4a0";
-    '--accent': "#353a38";
-    '--accent-foreground': "#e5e6e2";
-    '--border': "#3e4142";
-    '--input': "#6d7571";
-    '--ring': "#acbdb3";
-    '--chrome-border': "#292c2b";
+    '--background': "#0d0e0d";
+    '--foreground': "#e9e8e3";
+    '--inline-code-foreground': "#5fd6a8";
+    '--inline-code-background': "#17201c";
+    '--primary': "#e9e8e3";
+    '--primary-foreground': "#101110";
+    '--secondary': "#1e1f1e";
+    '--secondary-foreground': "#c3c4be";
+    '--muted': "#1b1c1b";
+    '--muted-foreground': "#93948d";
+    '--accent': "#242524";
+    '--accent-foreground': "#e9e8e3";
+    '--border': "#262726";
+    '--input': "#3b3c3a";
+    '--ring': "#62b898";
+    '--chrome-border': "#1a1b1a";
     '--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': "#282b2c";
-    '--card-foreground': "#e5e6e2";
-    '--popover': "#2b2e2f";
-    '--popover-foreground': "#e5e6e2";
-    '--success': "#a1b69e";
-    '--success-foreground': "#20291f";
-    '--warning': "#c8af84";
-    '--warning-foreground': "#20291f";
-    '--error': "oklch(0.7 0.22 25)";
-    '--error-foreground': "#202223";
-    '--info': "oklch(0.7 0.15 250)";
-    '--info-foreground': "#202223";
-    '--highlight-block-info-accent': "oklch(0.62 0.12 240)";
-    '--highlight-block-warning-accent': "oklch(0.7 0.14 65)";
-    '--highlight-block-success-accent': "oklch(0.62 0.12 155)";
-    '--highlight-block-error-accent': "oklch(0.6 0.14 25)";
-    '--highlight-block-note-accent': "oklch(0.62 0.14 285)";
-    '--highlight-block-tip-accent': "oklch(0.6 0.1 175)";
-    '--sidebar': "#1b1d1e";
-    '--sidebar-foreground': "#e5e6e2";
-    '--sidebar-primary': "#bccbb8";
-    '--sidebar-primary-foreground': "#20291f";
-    '--sidebar-accent': "#353a38";
-    '--sidebar-accent-foreground': "#e5e6e2";
-    '--sidebar-border': "#292c2b";
-    '--sidebar-ring': "#acbdb3";
-    '--activity-bar': "#17191a";
-    '--activity-bar-foreground': "#9da4a0";
-    '--activity-bar-foreground-active': "#e5e6e2";
-    '--activity-bar-badge': "#bccbb8";
-    '--activity-bar-badge-foreground': "#20291f";
-    '--terminal-background': "hsl(222 32% 7%)";
-    '--terminal-foreground': "hsl(210 15% 92%)";
-    '--chart-1': "hsl(210 20% 98%)";
-    '--chart-2': "hsl(215 20% 60%)";
-    '--chart-3': "oklch(0.7 0.15 250)";
-    '--chart-4': "oklch(0.72 0.19 150)";
-    '--chart-5': "oklch(0.82 0.16 80)";
-    '--selection-bg': "hsl(215 70% 50%)";
-    '--selection-fg': "hsl(0 0% 100%)";
-    '--selection-on-primary-bg': "hsl(215 80% 35%)";
-    '--selection-on-primary-fg': "hsl(0 0% 100%)";
-    '--selection-code-bg': "hsl(212 100% 67%)";
-    '--selection-code-fg': "hsl(220 20% 8%)";
-    '--glow': "hsl(217 65% 52%)";
+    '--card': "#161716";
+    '--card-foreground': "#e9e8e3";
+    '--popover': "#1a1b1a";
+    '--popover-foreground': "#e9e8e3";
+    '--success': "#62bf93";
+    '--success-foreground': "#07200f";
+    '--warning': "#d9ac5f";
+    '--warning-foreground': "#1d1607";
+    '--error': "#e8756b";
+    '--error-foreground': "#210907";
+    '--info': "#79a9e6";
+    '--info-foreground': "#061322";
+    '--highlight-block-info-accent': "oklch(0.7 0.12 248)";
+    '--highlight-block-warning-accent': "oklch(0.78 0.12 76)";
+    '--highlight-block-success-accent': "oklch(0.74 0.12 160)";
+    '--highlight-block-error-accent': "oklch(0.68 0.17 25)";
+    '--highlight-block-note-accent': "oklch(0.7 0.14 292)";
+    '--highlight-block-tip-accent': "oklch(0.7 0.09 192)";
+    '--sidebar': "#111211";
+    '--sidebar-foreground': "#e9e8e3";
+    '--sidebar-primary': "#e9e8e3";
+    '--sidebar-primary-foreground': "#101110";
+    '--sidebar-accent': "#242524";
+    '--sidebar-accent-foreground': "#e9e8e3";
+    '--sidebar-border': "#202120";
+    '--sidebar-ring': "#62b898";
+    '--activity-bar': "#0a0b0a";
+    '--activity-bar-foreground': "#8c8d86";
+    '--activity-bar-foreground-active': "#e9e8e3";
+    '--activity-bar-badge': "#62b898";
+    '--activity-bar-badge-foreground': "#07200f";
+    '--terminal-background': "#080908";
+    '--terminal-foreground': "#e2e1dc";
+    '--chart-1': "#62b898";
+    '--chart-2': "#93948d";
+    '--chart-3': "#d9ac5f";
+    '--chart-4': "#e8756b";
+    '--chart-5': "#79a9e6";
+    '--selection-bg': "#1f4a3a";
+    '--selection-fg': "#eafaf2";
+    '--selection-on-primary-bg': "#62b898";
+    '--selection-on-primary-fg': "#07200f";
+    '--selection-code-bg': "#2c6350";
+    '--selection-code-fg': "#eafaf2";
+    '--glow': "#62b898";
     '--floe-window-foreground': "var(--foreground)";
     '--floe-window-muted-foreground': "color-mix(in srgb, var(--muted-foreground) 72%, var(--foreground))";
     '--floe-window-border': "color-mix(in srgb, var(--floe-window-background) 88%, var(--foreground))";