@echothink-ui/style 0.2.0

package/src/presets.css

@@ -0,0 +1,617 @@
+/* ========================================================================= *
+ * Layer 3 — Preset tokens.
+ *
+ * Each preset maps palette + primitives into the semantic contract AND the
+ * role/state/status tokens. Existing --eth-color-* / radius / shadow / effect
+ * tokens are preserved verbatim so the ~340 un-migrated components do not
+ * regress; the new role/state/status/bridge-safe tokens are added as deltas.
+ * The Carbon bridge (carbon-bridge.css) reads these to drive --cds-*.
+ * ========================================================================= */
+
+:root,
+.eth-style-carbon-like {
+  --eth-color-background: var(--cds-white, #ffffff);
+  --eth-color-text-primary: var(--cds-gray-100, #161616);
+  --eth-color-text-secondary: var(--cds-gray-70, #525252);
+  --eth-color-text-helper: var(--cds-gray-60, #6f6f6f);
+  --eth-color-border-subtle: var(--cds-gray-20, #e0e0e0);
+  --eth-color-border-strong: var(--cds-gray-50, #8d8d8d);
+  --eth-color-interactive-primary: var(--cds-blue-60, #0f62fe);
+  --eth-color-interactive-strong: var(--cds-blue-70, #0043ce);
+  --eth-color-link: var(--cds-blue-60, #0f62fe);
+  --eth-color-layer-01: var(--cds-gray-10, #f4f4f4);
+  --eth-color-layer-02: var(--cds-white, #ffffff);
+  --eth-color-layer-hover: #e8e8e8;
+  --eth-color-layer-selected: var(--cds-gray-20, #e0e0e0);
+  --eth-color-card: var(--cds-gray-10, #f4f4f4);
+  --eth-color-control: transparent;
+  --eth-color-control-hover: var(--eth-color-layer-hover);
+  --eth-color-overlay: var(--cds-white, #ffffff);
+  --eth-color-focus: var(--cds-blue-60, #0f62fe);
+  --eth-border: 1px solid var(--eth-color-border-subtle);
+  --eth-card-border: 1px solid var(--eth-color-border-subtle);
+  --eth-control-border: 1px solid var(--eth-color-border-subtle);
+  --eth-overlay-border: 1px solid var(--eth-color-border-subtle);
+  --eth-radius-surface: 0;
+  --eth-radius-card: 0;
+  --eth-radius-control: 0;
+  --eth-radius-overlay: 0;
+  --eth-shadow-surface: none;
+  --eth-shadow-card: none;
+  --eth-shadow-overlay: 0 12px 32px rgb(22 22 22 / 16%);
+  --eth-backdrop-filter: none;
+  --eth-backdrop-filter-overlay: none;
+  --eth-effect-ambient: linear-gradient(transparent, transparent);
+  --eth-effect-highlight: linear-gradient(transparent, transparent);
+  --eth-card-bg: var(--eth-color-card);
+  --eth-card-radius: 0;
+  --eth-card-shadow: none;
+  --eth-card-backdrop-filter: none;
+  --eth-card-header-bg: transparent;
+  --eth-card-footer-bg: var(--eth-color-layer-02);
+  --eth-card-divider: 1px solid var(--eth-color-border-subtle);
+
+  /* ---- role/state deltas: square, structural, bottom-border fields ---- */
+  --eth-shadow-umbra: rgb(0 0 0 / 8%);
+  --eth-shadow-penumbra: rgb(0 0 0 / 4%);
+  --eth-bridge-bg: var(--cds-white, #ffffff);
+  --eth-field-bg: var(--cds-gray-10, #f4f4f4);
+  --eth-field-bg-hover: #e8e8e8;
+  --eth-field-text: var(--eth-color-text-primary);
+  --eth-field-placeholder: var(--eth-color-text-helper);
+  --eth-field-border: 1px solid transparent;
+  --eth-field-border-bottom: 1px solid var(--eth-color-border-strong);
+  --eth-field-border-strong: 1px solid var(--eth-color-border-strong);
+  --eth-field-radius: 0;
+  --eth-field-shadow: none;
+  --eth-field-backdrop-filter: none;
+  --eth-field-border-style: bottom;
+  --eth-btn-radius: 0;
+  --eth-btn-secondary-bg: #393939;
+  --eth-btn-secondary-bg-hover: #4c4c4c;
+  --eth-btn-secondary-bg-active: #6f6f6f;
+  --eth-btn-secondary-text: #ffffff;
+  --eth-btn-shadow: none;
+  --eth-btn-backdrop-filter: none;
+  --eth-table-header-bg: var(--eth-color-layer-02);
+  --eth-table-row-border: 1px solid var(--eth-table-gridline, var(--eth-color-border-subtle));
+  --eth-table-column-border: 1px solid var(--eth-table-gridline, var(--eth-color-border-subtle));
+  --eth-table-gridline-axis: both;
+  --eth-table-row-selected-accent: var(--eth-color-interactive-primary);
+}
+
+.eth-style-soft-card {
+  --eth-color-background: #eff0f2;
+  --eth-color-text-primary: #17191d;
+  --eth-color-text-secondary: #666d78;
+  --eth-color-text-helper: #7b838d;
+  --eth-color-border-subtle: #dedfe3;
+  --eth-color-border-strong: #bfc2c8;
+  --eth-color-interactive-primary: #1f5fd6;
+  --eth-color-interactive-strong: #164eb6;
+  --eth-color-link: #164eb6;
+  --eth-color-layer-01: #ffffff;
+  --eth-color-layer-02: #f8f8f9;
+  --eth-color-layer-hover: #f1f2f4;
+  --eth-color-layer-selected: #eaf1ff;
+  --eth-color-card: #ffffff;
+  --eth-color-control: #ffffff;
+  --eth-color-control-hover: #f4f5f6;
+  --eth-color-overlay: #ffffff;
+  --eth-color-focus: #2f6df6;
+  --eth-color-danger: #c93645;
+  --eth-color-warning: #d89112;
+  --eth-color-success: #16a35b;
+  --eth-color-info: #1f5fd6;
+  --eth-border: 1px solid #dedfe3;
+  --eth-card-border: 1px solid #e1e2e5;
+  --eth-control-border: 1px solid #d9dade;
+  --eth-overlay-border: 1px solid #d9dade;
+  --eth-radius-surface: 14px;
+  --eth-radius-card: 14px;
+  --eth-radius-control: 10px;
+  --eth-radius-overlay: 14px;
+  --eth-shadow-surface: 0 10px 26px rgb(17 19 24 / 7%);
+  --eth-shadow-card: 0 2px 12px rgb(17 19 24 / 7%);
+  --eth-shadow-overlay: 0 18px 48px rgb(17 19 24 / 14%);
+  --eth-backdrop-filter: none;
+  --eth-backdrop-filter-overlay: none;
+  --eth-card-bg: #ffffff;
+  --eth-card-radius: 14px;
+  --eth-card-shadow: 0 2px 12px rgb(17 19 24 / 7%);
+  --eth-card-backdrop-filter: none;
+  --eth-card-header-bg: transparent;
+  --eth-card-footer-bg: #fafafa;
+  --eth-card-divider: 1px solid #e8e8eb;
+
+  /* ---- role/state deltas: rounded, quiet borders, light elevation ---- */
+  --eth-shadow-umbra: rgb(17 19 24 / 10%);
+  --eth-shadow-penumbra: rgb(17 19 24 / 5%);
+  --eth-bridge-bg: #eff0f2;
+  --eth-field-bg: #ffffff;
+  --eth-field-bg-hover: #ffffff;
+  --eth-field-bg-disabled: #f4f4f5;
+  --eth-field-text: #17191d;
+  --eth-field-placeholder: #878d96;
+  --eth-field-border: 1px solid #d9dade;
+  --eth-field-border-hover: 1px solid #bfc2c8;
+  --eth-field-radius: 10px;
+  --eth-field-shadow: 0 1px 2px rgb(17 19 24 / 5%);
+  --eth-field-backdrop-filter: none;
+  --eth-field-border-style: full;
+  --eth-btn-radius: 10px;
+  --eth-btn-primary-bg: #17191d;
+  --eth-btn-primary-bg-hover: #2a2d33;
+  --eth-btn-primary-bg-active: #050608;
+  --eth-btn-primary-text: #ffffff;
+  --eth-btn-secondary-bg: #ffffff;
+  --eth-btn-secondary-bg-hover: #f1f2f4;
+  --eth-btn-secondary-bg-active: #e7e8eb;
+  --eth-btn-secondary-text: #17191d;
+  --eth-btn-tertiary-text: #17191d;
+  --eth-btn-ghost-text: #17191d;
+  --eth-btn-danger-bg: #c93645;
+  --eth-btn-danger-bg-hover: #ad2e3b;
+  --eth-btn-success-bg: #16a35b;
+  --eth-btn-success-bg-hover: #12834a;
+  --eth-btn-disabled-bg: #f1f2f4;
+  --eth-btn-disabled-text: #a2a6ad;
+  --eth-btn-primary-border: 1px solid #17191d;
+  --eth-btn-secondary-border: 1px solid #d9dade;
+  --eth-btn-tertiary-border: 1px solid #c9cbd0;
+  --eth-btn-ghost-border: 1px solid transparent;
+  --eth-btn-shadow: 0 2px 8px rgb(17 19 24 / 8%);
+  --eth-btn-backdrop-filter: none;
+  --eth-table-bg: #ffffff;
+  --eth-table-border: 1px solid #e1e2e5;
+  --eth-table-radius: 14px;
+  --eth-table-shadow: 0 2px 12px rgb(17 19 24 / 6%);
+  --eth-table-header-bg: #fafafa;
+  --eth-table-header-text: #666d78;
+  --eth-table-gridline: #e9eaed;
+  --eth-table-row-border: 1px solid #e9eaed;
+  --eth-table-column-border: 0 solid transparent;
+  --eth-table-gridline-axis: horizontal;
+  --eth-table-row-hover-bg: #f6f7f8;
+  --eth-table-row-selected-bg: #eef4ff;
+  --eth-table-row-selected-hover-bg: #e5efff;
+  --eth-table-row-selected-accent: #1f5fd6;
+  --eth-status-info-bg: #eef4ff;
+  --eth-status-info-text: #164eb6;
+  --eth-status-info-border: #cfe0ff;
+  --eth-status-info-icon: #1f5fd6;
+  --eth-status-success-bg: #e8f8ef;
+  --eth-status-success-text: #0f6f3c;
+  --eth-status-success-border: #c8efd8;
+  --eth-status-success-icon: #16a35b;
+  --eth-status-warning-bg: #fff5df;
+  --eth-status-warning-text: #8a5c08;
+  --eth-status-warning-border: #f5dfab;
+  --eth-status-warning-icon: #d89112;
+  --eth-status-danger-bg: #fff0f2;
+  --eth-status-danger-text: #9e2633;
+  --eth-status-danger-border: #f2c8cf;
+  --eth-status-danger-icon: #c93645;
+  --eth-status-neutral-bg: #f1f2f4;
+  --eth-status-neutral-text: #5d646f;
+  --eth-status-neutral-border: #dedfe3;
+  --eth-status-neutral-icon: #7b838d;
+  --eth-focus-ring-color: #2f6df6;
+  --eth-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --eth-font-weight-title: 650;
+}
+
+.eth-style-glass {
+  --eth-color-background:
+    radial-gradient(circle at 18% 18%, rgb(255 255 255 / 74%) 0 10rem, transparent 26rem),
+    radial-gradient(circle at 72% 18%, rgb(207 221 228 / 46%) 0 18rem, transparent 34rem),
+    radial-gradient(circle at 80% 78%, rgb(202 221 206 / 36%) 0 14rem, transparent 28rem),
+    linear-gradient(135deg, #c4ccce 0%, #e9eeee 52%, #cbd5d8 100%);
+  --eth-color-text-primary: #20272b;
+  --eth-color-text-secondary: #687274;
+  --eth-color-text-helper: #7c8587;
+  --eth-color-border-subtle: rgb(255 255 255 / 52%);
+  --eth-color-border-strong: rgb(255 255 255 / 74%);
+  --eth-color-interactive-primary: #4b8df7;
+  --eth-color-interactive-strong: #2f73dc;
+  --eth-color-link: #316fca;
+  --eth-color-layer-01: rgb(255 255 255 / 38%);
+  --eth-color-layer-02: rgb(255 255 255 / 26%);
+  --eth-color-layer-hover: rgb(255 255 255 / 52%);
+  --eth-color-layer-selected: rgb(80 141 247 / 16%);
+  --eth-color-card: rgb(255 255 255 / 36%);
+  --eth-color-control: rgb(255 255 255 / 30%);
+  --eth-color-control-hover: rgb(255 255 255 / 52%);
+  --eth-color-overlay: rgb(255 255 255 / 48%);
+  --eth-color-focus: #4b8df7;
+  --eth-color-danger: #ff4d59;
+  --eth-color-warning: #ff9d2f;
+  --eth-color-success: #20b956;
+  --eth-color-info: #4b8df7;
+  --eth-border: 1px solid rgb(255 255 255 / 52%);
+  --eth-card-border: 1px solid rgb(255 255 255 / 56%);
+  --eth-control-border: 1px solid rgb(255 255 255 / 44%);
+  --eth-overlay-border: 1px solid rgb(255 255 255 / 62%);
+  --eth-radius-surface: 18px;
+  --eth-radius-card: 18px;
+  --eth-radius-control: 12px;
+  --eth-radius-overlay: 20px;
+  --eth-shadow-surface:
+    0 28px 90px rgb(51 62 66 / 22%),
+    0 10px 30px rgb(51 62 66 / 12%),
+    inset 0 1px 0 rgb(255 255 255 / 68%);
+  --eth-shadow-card:
+    0 18px 54px rgb(51 62 66 / 16%),
+    inset 0 1px 0 rgb(255 255 255 / 64%),
+    inset 0 -18px 42px rgb(255 255 255 / 10%);
+  --eth-shadow-overlay:
+    0 34px 110px rgb(51 62 66 / 24%),
+    inset 0 1px 0 rgb(255 255 255 / 70%);
+  --eth-backdrop-filter: blur(22px) saturate(1.22);
+  --eth-backdrop-filter-overlay: blur(28px) saturate(1.28);
+  --eth-effect-ambient:
+    radial-gradient(circle at 14% 18%, rgb(255 255 255 / 42%) 0 8rem, transparent 20rem),
+    radial-gradient(circle at 84% 12%, rgb(192 211 220 / 30%) 0 13rem, transparent 26rem),
+    radial-gradient(circle at 88% 78%, rgb(186 215 191 / 22%) 0 12rem, transparent 26rem);
+  --eth-effect-highlight:
+    linear-gradient(
+      135deg,
+      rgb(255 255 255 / 42%) 0%,
+      rgb(255 255 255 / 16%) 42%,
+      rgb(211 224 228 / 10%) 100%
+    );
+  --eth-card-bg: rgb(255 255 255 / 40%);
+  --eth-card-radius: 18px;
+  --eth-card-shadow: var(--eth-shadow-card);
+  --eth-card-backdrop-filter: var(--eth-backdrop-filter);
+  --eth-card-header-bg: rgb(255 255 255 / 18%);
+  --eth-card-footer-bg: rgb(255 255 255 / 24%);
+  --eth-card-divider: 1px solid rgb(255 255 255 / 38%);
+
+  /* ---- role/state deltas: translucent, blurred, rounded ---- */
+  --eth-shadow-umbra: rgb(51 62 66 / 18%);
+  --eth-shadow-penumbra: rgb(51 62 66 / 10%);
+
+  /* --cds-background must be a solid color, not the page gradient. */
+  --eth-bridge-bg: #e9eeee;
+  --eth-field-bg: rgb(255 255 255 / 50%);
+  --eth-field-bg-hover: rgb(255 255 255 / 66%);
+  --eth-field-bg-disabled: rgb(255 255 255 / 24%);
+  --eth-field-text: #20272b;
+  --eth-field-placeholder: #687274;
+  --eth-field-border: 1px solid rgb(255 255 255 / 46%);
+  --eth-field-border-hover: 1px solid rgb(255 255 255 / 70%);
+  --eth-field-radius: 12px;
+  --eth-field-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 60%),
+    0 8px 22px rgb(51 62 66 / 9%);
+  --eth-field-backdrop-filter: blur(16px) saturate(1.18);
+  --eth-field-border-style: full;
+  --eth-btn-radius: 12px;
+  --eth-btn-primary-bg: #4b8df7;
+  --eth-btn-primary-bg-hover: #3379e7;
+  --eth-btn-primary-bg-active: #2d68c8;
+  --eth-btn-primary-text: #ffffff;
+  --eth-btn-secondary-bg: rgb(255 255 255 / 42%);
+  --eth-btn-secondary-bg-hover: rgb(255 255 255 / 62%);
+  --eth-btn-secondary-bg-active: rgb(255 255 255 / 70%);
+  --eth-btn-secondary-text: #20272b;
+  --eth-btn-danger-bg: #ff4d59;
+  --eth-btn-danger-bg-hover: #e83d48;
+  --eth-btn-success-bg: #20b956;
+  --eth-btn-success-bg-hover: #17a249;
+  --eth-btn-disabled-bg: rgb(255 255 255 / 24%);
+  --eth-btn-disabled-text: #8e9799;
+  --eth-btn-primary-border: 1px solid rgb(75 141 247 / 55%);
+  --eth-btn-secondary-border: 1px solid rgb(255 255 255 / 48%);
+  --eth-btn-tertiary-border: 1px solid rgb(75 141 247 / 48%);
+  --eth-btn-ghost-border: 1px solid transparent;
+  --eth-btn-shadow:
+    0 10px 28px rgb(51 62 66 / 14%),
+    inset 0 1px 0 rgb(255 255 255 / 56%);
+  --eth-btn-backdrop-filter: blur(16px) saturate(1.2);
+  --eth-table-bg: rgb(255 255 255 / 42%);
+  --eth-table-border: 1px solid rgb(255 255 255 / 54%);
+  --eth-table-radius: 18px;
+  --eth-table-shadow: var(--eth-shadow-card);
+  --eth-table-backdrop-filter: var(--eth-backdrop-filter);
+  --eth-table-header-bg: rgb(255 255 255 / 28%);
+  --eth-table-header-text: #5d686b;
+  --eth-table-gridline: rgb(32 39 43 / 7%);
+  --eth-table-row-border: 1px solid rgb(255 255 255 / 22%);
+  --eth-table-column-border: 0 solid transparent;
+  --eth-table-gridline-axis: horizontal;
+  --eth-table-row-hover-bg: rgb(255 255 255 / 50%);
+  --eth-table-row-selected-bg: rgb(75 141 247 / 14%);
+  --eth-table-row-selected-hover-bg: rgb(75 141 247 / 20%);
+  --eth-table-row-selected-accent: transparent;
+  --eth-status-info-bg: rgb(75 141 247 / 14%);
+  --eth-status-info-text: #245fb4;
+  --eth-status-info-border: rgb(75 141 247 / 24%);
+  --eth-status-info-icon: #4b8df7;
+  --eth-status-success-bg: rgb(32 185 86 / 14%);
+  --eth-status-success-text: #0f7a39;
+  --eth-status-success-border: rgb(32 185 86 / 26%);
+  --eth-status-success-icon: #20b956;
+  --eth-status-warning-bg: rgb(255 157 47 / 16%);
+  --eth-status-warning-text: #8a5200;
+  --eth-status-warning-border: rgb(255 157 47 / 26%);
+  --eth-status-warning-icon: #ff9d2f;
+  --eth-status-danger-bg: rgb(255 77 89 / 14%);
+  --eth-status-danger-text: #a82531;
+  --eth-status-danger-border: rgb(255 77 89 / 26%);
+  --eth-status-danger-icon: #ff4d59;
+  --eth-status-neutral-bg: rgb(255 255 255 / 32%);
+  --eth-status-neutral-text: #5f696c;
+  --eth-status-neutral-border: rgb(255 255 255 / 38%);
+  --eth-status-neutral-icon: #7c8587;
+  --eth-popover-bg: rgb(255 255 255 / 72%);
+  --eth-popover-blur: blur(20px) saturate(1.28);
+  --eth-overlay-bg: rgb(32 39 43 / 34%);
+  --eth-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+
+.eth-style-bright {
+  --eth-color-background: #efd6f2;
+  --eth-color-text-primary: #111111;
+  --eth-color-text-secondary: #5f5f66;
+  --eth-color-text-helper: #777780;
+  --eth-color-border-subtle: #e6e2e8;
+  --eth-color-border-strong: #c8c1ce;
+  --eth-color-interactive-primary: #111111;
+  --eth-color-interactive-strong: #000000;
+  --eth-color-link: #111111;
+  --eth-color-layer-01: #ffffff;
+  --eth-color-layer-02: #faf9fb;
+  --eth-color-layer-hover: #f4f1f6;
+  --eth-color-layer-selected: #f1e8ff;
+  --eth-color-card: #ffffff;
+  --eth-color-control: #ffffff;
+  --eth-color-control-hover: #f5f2f7;
+  --eth-color-overlay: #ffffff;
+  --eth-color-focus: #111111;
+  --eth-color-danger: #ff7e92;
+  --eth-color-warning: #ff9f24;
+  --eth-color-success: #b8ff86;
+  --eth-color-info: #d6c6ff;
+  --eth-border: 1px solid #e6e2e8;
+  --eth-card-border: 1px solid #e8e2ea;
+  --eth-control-border: 1px solid #ded8e2;
+  --eth-overlay-border: 1px solid #ded8e2;
+  --eth-radius-surface: 18px;
+  --eth-radius-card: 18px;
+  --eth-radius-control: 12px;
+  --eth-radius-overlay: 18px;
+  --eth-shadow-surface: 0 28px 70px rgb(40 28 44 / 10%);
+  --eth-shadow-card: 0 10px 28px rgb(40 28 44 / 8%);
+  --eth-shadow-overlay: 0 28px 80px rgb(40 28 44 / 16%);
+  --eth-backdrop-filter: none;
+  --eth-backdrop-filter-overlay: none;
+  --eth-card-bg: #ffffff;
+  --eth-card-radius: 18px;
+  --eth-card-shadow: 0 10px 28px rgb(40 28 44 / 8%);
+  --eth-card-backdrop-filter: none;
+  --eth-card-header-bg: transparent;
+  --eth-card-footer-bg: #fbf9fc;
+  --eth-card-divider: 1px solid #ece7ef;
+
+  /* ---- role/state deltas: high-key white panels, black action, pastel statuses ---- */
+  --eth-shadow-umbra: rgb(40 28 44 / 10%);
+  --eth-shadow-penumbra: rgb(40 28 44 / 5%);
+  --eth-bridge-bg: #efd6f2;
+  --eth-field-bg: #ffffff;
+  --eth-field-bg-hover: #ffffff;
+  --eth-field-bg-disabled: #f2eef4;
+  --eth-field-text: #111111;
+  --eth-field-placeholder: #8b858e;
+  --eth-field-border: 1px solid #ded8e2;
+  --eth-field-border-hover: 1px solid #bdb4c4;
+  --eth-field-radius: 12px;
+  --eth-field-shadow: 0 2px 8px rgb(40 28 44 / 5%);
+  --eth-field-backdrop-filter: none;
+  --eth-field-border-style: full;
+  --eth-btn-radius: 14px;
+  --eth-btn-primary-bg: #111111;
+  --eth-btn-primary-bg-hover: #000000;
+  --eth-btn-primary-bg-active: #000000;
+  --eth-btn-primary-text: #ffffff;
+  --eth-btn-secondary-bg: #ffffff;
+  --eth-btn-secondary-bg-hover: #f4f1f6;
+  --eth-btn-secondary-bg-active: #ede7f1;
+  --eth-btn-secondary-text: #111111;
+  --eth-btn-tertiary-text: #111111;
+  --eth-btn-ghost-text: #111111;
+  --eth-btn-danger-bg: #ff7e92;
+  --eth-btn-danger-bg-hover: #f15e76;
+  --eth-btn-danger-text: #26070c;
+  --eth-btn-success-bg: #b8ff86;
+  --eth-btn-success-bg-hover: #a1ee6d;
+  --eth-btn-success-text: #112007;
+  --eth-btn-disabled-bg: #f1edf3;
+  --eth-btn-disabled-text: #aaa2ad;
+  --eth-btn-primary-border: 1px solid #111111;
+  --eth-btn-secondary-border: 1px solid #e2dce7;
+  --eth-btn-tertiary-border: 1px solid #111111;
+  --eth-btn-shadow: 0 8px 18px rgb(40 28 44 / 10%);
+  --eth-btn-backdrop-filter: none;
+  --eth-table-bg: #ffffff;
+  --eth-table-border: 1px solid #e8e2ea;
+  --eth-table-radius: 18px;
+  --eth-table-shadow: 0 10px 28px rgb(40 28 44 / 8%);
+  --eth-table-header-bg: #ffffff;
+  --eth-table-header-text: #656069;
+  --eth-table-gridline: #eee8f0;
+  --eth-table-row-border: 1px solid #eee8f0;
+  --eth-table-column-border: 0 solid transparent;
+  --eth-table-gridline-axis: horizontal;
+  --eth-table-row-hover-bg: #fbf7fc;
+  --eth-table-row-selected-bg: #f2e9ff;
+  --eth-table-row-selected-hover-bg: #eadcff;
+  --eth-table-row-selected-accent: #111111;
+  --eth-status-info-bg: #e7dbff;
+  --eth-status-info-text: #332254;
+  --eth-status-info-border: #d6c6ff;
+  --eth-status-info-icon: #7d5ee6;
+  --eth-status-success-bg: #d9ffc6;
+  --eth-status-success-text: #1d3a11;
+  --eth-status-success-border: #b8ff86;
+  --eth-status-success-icon: #5dcc32;
+  --eth-status-warning-bg: #ffe7bf;
+  --eth-status-warning-text: #522f00;
+  --eth-status-warning-border: #ffc86f;
+  --eth-status-warning-icon: #ff9f24;
+  --eth-status-danger-bg: #ffd0da;
+  --eth-status-danger-text: #5b1724;
+  --eth-status-danger-border: #ffafbd;
+  --eth-status-danger-icon: #ff6f86;
+  --eth-status-neutral-bg: #f4f1f6;
+  --eth-status-neutral-text: #5f5a64;
+  --eth-status-neutral-border: #e4dde8;
+  --eth-status-neutral-icon: #8d8492;
+  --eth-focus-ring-color: #111111;
+  --eth-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --eth-font-weight-title: 700;
+}
+
+.eth-style-studio-dark {
+  color-scheme: dark;
+
+  --eth-color-background: #050505;
+  --eth-color-text-primary: #f7f7f2;
+  --eth-color-text-secondary: #bebeb6;
+  --eth-color-text-helper: #8f908a;
+  --eth-color-border-subtle: #30302f;
+  --eth-color-border-strong: #484847;
+  --eth-color-interactive-primary: #a8ff4f;
+  --eth-color-interactive-strong: #c4ff78;
+  --eth-color-link: #c4ff78;
+  --eth-color-layer-01: #1f1f1f;
+  --eth-color-layer-02: #282828;
+  --eth-color-layer-hover: #303030;
+  --eth-color-layer-selected: #2f3f1f;
+  --eth-color-card: #202020;
+  --eth-color-control: #242424;
+  --eth-color-control-hover: #303030;
+  --eth-color-overlay: #202020;
+  --eth-color-focus: #a8ff4f;
+  --eth-color-danger: #ff9f24;
+  --eth-color-warning: #ff9f24;
+  --eth-color-success: #a8ff4f;
+  --eth-color-info: #ffffff;
+  --eth-border: 1px solid #30302f;
+  --eth-card-border: 1px solid #2c2c2b;
+  --eth-control-border: 1px solid #3a3a38;
+  --eth-overlay-border: 1px solid #3a3a38;
+  --eth-radius-surface: 34px;
+  --eth-radius-card: 26px;
+  --eth-radius-control: 999px;
+  --eth-radius-overlay: 28px;
+  --eth-shadow-surface: 0 40px 90px rgb(0 0 0 / 48%);
+  --eth-shadow-card: 0 20px 54px rgb(0 0 0 / 40%);
+  --eth-shadow-overlay: 0 30px 80px rgb(0 0 0 / 58%);
+  --eth-backdrop-filter: none;
+  --eth-backdrop-filter-overlay: none;
+  --eth-card-bg: #202020;
+  --eth-card-radius: 26px;
+  --eth-card-shadow: 0 20px 54px rgb(0 0 0 / 40%);
+  --eth-card-backdrop-filter: none;
+  --eth-card-header-bg: transparent;
+  --eth-card-footer-bg: #242424;
+  --eth-card-divider: 1px solid #30302f;
+
+  /* ---- role/state deltas: dark surfaces, dark fields, dark-tuned status ---- */
+  --eth-shadow-umbra: rgb(0 0 0 / 55%);
+  --eth-shadow-penumbra: rgb(0 0 0 / 35%);
+  --eth-bridge-bg: #050505;
+  --eth-field-bg: #181818;
+  --eth-field-bg-hover: #202020;
+  --eth-field-bg-disabled: #111111;
+  --eth-field-text: #f7f7f2;
+  --eth-field-placeholder: #8f908a;
+  --eth-field-text-disabled: #63645f;
+  --eth-field-border: 1px solid #3a3a38;
+  --eth-field-border-hover: 1px solid #555550;
+  --eth-field-radius: 16px;
+  --eth-field-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
+  --eth-field-backdrop-filter: none;
+  --eth-field-border-style: full;
+  --eth-btn-radius: 999px;
+  --eth-btn-primary-bg: #a8ff4f;
+  --eth-btn-primary-bg-hover: #bdff69;
+  --eth-btn-primary-bg-active: #91e843;
+  --eth-btn-primary-text: #101010;
+  --eth-btn-secondary-bg: #242424;
+  --eth-btn-secondary-bg-hover: #303030;
+  --eth-btn-secondary-bg-active: #3a3a38;
+  --eth-btn-secondary-text: #f7f7f2;
+  --eth-btn-tertiary-text: #a8ff4f;
+  --eth-btn-ghost-text: #a8ff4f;
+  --eth-btn-danger-bg: #ff9f24;
+  --eth-btn-danger-bg-hover: #ffa936;
+  --eth-btn-danger-text: #130b00;
+  --eth-btn-success-bg: #a8ff4f;
+  --eth-btn-success-bg-hover: #bdff69;
+  --eth-btn-success-text: #101010;
+  --eth-btn-disabled-bg: #242424;
+  --eth-btn-disabled-text: #666760;
+  --eth-btn-primary-border: 1px solid #a8ff4f;
+  --eth-btn-secondary-border: 1px solid #3a3a38;
+  --eth-btn-tertiary-border: 1px solid #a8ff4f;
+  --eth-btn-danger-border: 1px solid #ff9f24;
+  --eth-btn-shadow: 0 8px 22px rgb(0 0 0 / 35%);
+  --eth-btn-backdrop-filter: none;
+  --eth-table-bg: #202020;
+  --eth-table-border: 1px solid #30302f;
+  --eth-table-radius: 26px;
+  --eth-table-shadow: 0 20px 54px rgb(0 0 0 / 34%);
+  --eth-table-header-bg: #242424;
+  --eth-table-header-text: #bebeb6;
+  --eth-table-row-bg: #202020;
+  --eth-table-cell-text: #f0f0ea;
+  --eth-table-gridline: rgb(255 255 255 / 10%);
+  --eth-table-row-border: 1px solid rgb(255 255 255 / 10%);
+  --eth-table-column-border: 0 solid transparent;
+  --eth-table-gridline-axis: horizontal;
+  --eth-table-row-hover-bg: #2a2a28;
+  --eth-table-row-selected-bg: #2f3f1f;
+  --eth-table-row-selected-hover-bg: #394d26;
+  --eth-table-row-selected-accent: #a8ff4f;
+  --eth-overlay-bg: rgb(0 0 0 / 60%);
+  --eth-popover-bg: #242424;
+  --eth-popover-border: 1px solid #3a3a38;
+  --eth-focus-ring-color: #a8ff4f;
+
+  /* dark-adjusted status: deep-tinted bg + light fg */
+  --eth-status-info-bg: #ffffff;
+  --eth-status-info-text: #101010;
+  --eth-status-info-border: #ffffff;
+  --eth-status-info-icon: #ffffff;
+  --eth-status-success-bg: color-mix(in srgb, #a8ff4f 18%, #101010);
+  --eth-status-success-text: #c4ff78;
+  --eth-status-success-border: color-mix(in srgb, #a8ff4f 45%, transparent);
+  --eth-status-success-icon: #a8ff4f;
+  --eth-status-warning-bg: color-mix(in srgb, #ff9f24 18%, #101010);
+  --eth-status-warning-text: #ffbf6b;
+  --eth-status-warning-border: color-mix(in srgb, #ff9f24 45%, transparent);
+  --eth-status-warning-icon: #ff9f24;
+  --eth-status-danger-bg: color-mix(in srgb, #ff5b4d 18%, #101010);
+  --eth-status-danger-text: #ff9f91;
+  --eth-status-danger-border: color-mix(in srgb, #ff5b4d 45%, transparent);
+  --eth-status-danger-icon: #ff5b4d;
+  --eth-status-neutral-bg: #242424;
+  --eth-status-neutral-text: #bebeb6;
+  --eth-status-neutral-border: #3a3a38;
+  --eth-status-neutral-icon: #8f908a;
+  --eth-font-family-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  --eth-font-weight-title: 760;
+  --eth-font-weight-body: 500;
+}
+
+.eth-style-carbon-like,
+.eth-style-soft-card,
+.eth-style-glass,
+.eth-style-bright,
+.eth-style-studio-dark {
+  background: var(--eth-color-background);
+  color: var(--eth-color-text-primary);
+}

package/src/primitives.css

@@ -0,0 +1,82 @@
+/* ========================================================================= *
+ * Layer 2 — Primitive scales.
+ *
+ * Non-color structural values: radius, spacing, border width, blur, motion,
+ * z-index, and elevation geometry. Global and preset-independent — presets
+ * choose WHICH step they use, they do not redefine the steps. Additive: these
+ * do not replace the existing --eth-radius-* / --eth-space-* role tokens in
+ * @echothink-ui/tokens, they sit alongside them.
+ * ========================================================================= */
+
+:root {
+  /* Radius scale */
+  --eth-radius-0: 0;
+  --eth-radius-1: 2px;
+  --eth-radius-2: 4px;
+  --eth-radius-3: 6px;
+  --eth-radius-4: 8px;
+  --eth-radius-5: 10px;
+  --eth-radius-6: 12px;
+  --eth-radius-7: 16px;
+  --eth-radius-round: 999px;
+
+  /* Spacing scale (4px base) */
+  --eth-space-0: 0;
+  --eth-space-1: 2px;
+  --eth-space-2: 4px;
+  --eth-space-3: 6px;
+  --eth-space-4: 8px;
+  --eth-space-5: 12px;
+  --eth-space-6: 16px;
+  --eth-space-7: 20px;
+  --eth-space-8: 24px;
+  --eth-space-9: 32px;
+  --eth-space-10: 40px;
+  --eth-space-11: 48px;
+  --eth-space-12: 64px;
+
+  /* Border width scale */
+  --eth-border-width-0: 0;
+  --eth-border-width-1: 1px;
+  --eth-border-width-2: 2px;
+  --eth-border-width-3: 3px;
+
+  /* Blur scale */
+  --eth-blur-0: 0;
+  --eth-blur-1: 4px;
+  --eth-blur-2: 8px;
+  --eth-blur-3: 16px;
+  --eth-blur-4: 24px;
+
+  /* Motion */
+  --eth-duration-fast: 70ms;
+  --eth-duration-base: 110ms;
+  --eth-duration-slow: 240ms;
+  --eth-easing-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
+  --eth-easing-entrance: cubic-bezier(0, 0, 0.38, 0.9);
+  --eth-easing-exit: cubic-bezier(0.2, 0, 1, 0.9);
+
+  /* Z-index scale */
+  --eth-z-base: 0;
+  --eth-z-sticky: 100;
+  --eth-z-overlay: 1000;
+  --eth-z-modal: 1100;
+  --eth-z-popover: 1200;
+  --eth-z-toast: 1300;
+  --eth-z-tooltip: 1400;
+
+  /* Elevation geometry — shadow colors are set per preset (light default). */
+  --eth-shadow-umbra: rgb(31 41 51 / 10%);
+  --eth-shadow-penumbra: rgb(31 41 51 / 6%);
+  --eth-elevation-0: none;
+  --eth-elevation-1: 0 1px 2px var(--eth-shadow-umbra);
+  --eth-elevation-2:
+    0 2px 6px var(--eth-shadow-umbra),
+    0 1px 2px var(--eth-shadow-penumbra);
+  --eth-elevation-3:
+    0 8px 24px var(--eth-shadow-umbra),
+    0 2px 6px var(--eth-shadow-penumbra);
+  --eth-elevation-4:
+    0 16px 48px var(--eth-shadow-umbra),
+    0 4px 12px var(--eth-shadow-penumbra);
+}