@polastack/design-system 0.1.9 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polastack/design-system",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Polastack Design System - UI components and design tokens for business applications",
   "type": "module",
   "license": "MIT",

package/src/styles/globals.css

@@ -263,21 +263,32 @@
 }
 
 .dark {
-  --color-surface: var(--color-neutral-950);
-  --color-surface-raised: var(--color-neutral-900);
-  --color-surface-sunken: var(--color-neutral-950);
-  --color-surface-muted: var(--color-neutral-800);
+  /*
+   * Surface elevation ladder (darkest → lightest):
+   *   sunken  #0A0A0C  — recessed/inset areas
+   *   surface #121215  — main background (≈ Material Design / Linear range)
+   *   raised  #1A1A1E  — cards, panels, modals
+   *   muted   #232327  — hover states, subtle fills
+   *
+   * Values are hand-picked (not from the neutral scale) to sit between
+   * Material Design #121212 and Radix Gray #111111, with a very subtle
+   * cool tint that complements the teal brand.
+   */
+  --color-surface: #121215;
+  --color-surface-raised: #1A1A1E;
+  --color-surface-sunken: #0A0A0C;
+  --color-surface-muted: #232327;
   --color-on-surface: var(--color-neutral-50);
   --color-on-surface-secondary: var(--color-neutral-400);
   --color-on-surface-muted: var(--color-neutral-400);
-  --color-border: var(--color-neutral-800);
-  --color-border-input: var(--color-neutral-700);
+  --color-border: #28282C;
+  --color-border-input: #38383E;
   --color-ring: var(--color-primary-400);
-  --color-ring-offset: var(--color-neutral-950);
+  --color-ring-offset: #121215;
   --color-surface-overlay: rgb(0 0 0 / 0.6);
   --color-tooltip-bg: var(--color-neutral-100);
   --color-tooltip-text: var(--color-neutral-900);
-  --color-skeleton: var(--color-neutral-800);
+  --color-skeleton: #232327;
   color-scheme: dark;
 }