feat: new colors

.changeset/surface-color-tokens.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Add `#surface`, `#surface-2`, and `#surface-3` for layered backgrounds. `#light` now aliases `#surface-3`. Defaults that used `#dark-bg` (CopySnippet, CopyPasteBlock, disabled theme sample, scrollbar track, Storybook playground) use `#surface-2`. File- and radio-style tab fills use the surface scale instead of `#light` / `#white`. Prefer `#surface-2` over legacy `#dark-bg`; TypeScript named-color augmentation lists the surface tokens and no longer includes `dark-bg`.

docs/Usage.md

@@ -119,7 +119,7 @@ Each semantic group provides a base color and variants following the pattern: `#
 
 ### Neutral Scales
 
-**Dark scale:** `#dark`, `#dark-01` through `#dark-05`, `#dark-bg` — six-step neutral scale from near-black to light gray.
+**Dark scale:** `#dark`, `#dark-01` through `#dark-05` — neutral scale from near-black to light gray. **Surfaces:** `#surface`, `#surface-2`, `#surface-3` — layered UI backgrounds.
 
 **Purple scale:** `#purple-01` through `#purple-04` — additional purple shades for gradients and accents.
 

docs/components/content/CopyPasteBlock.md

@@ -17,7 +17,7 @@ A block that displays a value with copy-to-clipboard functionality. Supports pas
 
 ### Style Defaults
 
-- `fill` — `#dark-bg`
+- `fill` — `#surface-2`
 - `radius` — `1r`
 - `cursor` — pointer
 - `preset` — `t3` (switches to `t2` when `size="large"`)

docs/components/content/CopySnippet.md

@@ -20,7 +20,7 @@ A code block with copy-to-clipboard functionality and syntax highlighting. Exten
 
 ### Style Defaults
 
-- `fill` — `#dark-bg`
+- `fill` — `#surface-2`
 - `border` — `0`
 - `radius` — `1r`
 - `padding` — `0`

src/components/content/CopyPasteBlock/CopyPasteBlock.docs.mdx

@@ -19,7 +19,7 @@ A block that displays a value with copy-to-clipboard functionality. Supports pas
 
 ### Style Defaults
 
-- `fill` — `#dark-bg`
+- `fill` — `#surface-2`
 - `radius` — `1r`
 - `cursor` — pointer
 - `preset` — `t3` (switches to `t2` when `size="large"`)

src/components/content/CopyPasteBlock/CopyPasteBlock.tsx

@@ -45,7 +45,7 @@ const CopyPasteBlockElement = tasty(Card, {
   qa: 'CopyPasteBlock',
   styles: {
     display: 'grid',
-    fill: '#dark-bg',
+    fill: '#surface-2',
     radius: '1r',
     padding: {
       '': '0 1px',

src/components/content/CopySnippet/CopySnippet.docs.mdx

@@ -22,7 +22,7 @@ A code block with copy-to-clipboard functionality and syntax highlighting. Exten
 
 ### Style Defaults
 
-- `fill` — `#dark-bg`
+- `fill` — `#surface-2`
 - `border` — `0`
 - `radius` — `1r`
 - `padding` — `0`

src/components/content/CopySnippet/CopySnippet.tsx

@@ -45,7 +45,7 @@
       multiline: false,
     },
 
     '& code': {
       font: {
         '': 'monospace',
         serif: true,
@@ -94,7 +94,7 @@
   styles: {
     display: 'grid',
     gridRows: 'minmax(0, 1fr)',
-    fill: '#dark-bg',
+    fill: '#surface-2',
     border: 0,
     padding: 0,
     preset: 'default',

src/components/navigation/Tabs/styled.ts

@@ -217,10 +217,10 @@ export const TabElement = tasty(Item, {
     fill: {
       '': '#clear',
       'hovered & !type=narrow': '#dark.03',
-      'type=file': '#light',
-      'type=file & hovered': '#light.5',
-      'type=radio & hovered': '#white.5',
-      '(type=file | type=radio) & selected': '#white',
+      'type=file': '#surface-3',
+      'type=file & hovered': '#surface-3.5',
+      'type=radio & hovered': '#surface.5',
+      '(type=file | type=radio) & selected': '#surface',
     },
     border: {
       '': '#clear',

src/data/themes.ts

@@ -25,7 +25,7 @@ export default {
     border: '#note.20',
   },
   disabled: {
-    fill: '#dark-bg',
+    fill: '#surface-2',
     color: '#dark-03',
     border: '#dark.20',
   },

src/stories/Usage.docs.mdx

@@ -123,7 +123,7 @@ Each semantic group provides a base color and variants following the pattern: `#
 
 ### Neutral Scales
 
-**Dark scale:** `#dark`, `#dark-01` through `#dark-05`, `#dark-bg` — six-step neutral scale from near-black to light gray.
+**Dark scale:** `#dark`, `#dark-01` through `#dark-05` — neutral scale from near-black to light gray. **Surfaces:** `#surface`, `#surface-2`, `#surface-3` — layered UI backgrounds.
 
 **Purple scale:** `#purple-01` through `#purple-04` — additional purple shades for gradients and accents.
 

src/stories/playground/PlaygroundOutput.tsx

@@ -17,7 +17,7 @@ const OutputContent = tasty({
     overflow: 'auto',
     padding: '2x',
     margin: 0,
-    fill: '#dark-bg',
+    fill: '#surface-2',
   },
 });
 

src/tasty-augment.d.ts

@@ -16,7 +16,9 @@ declare module '@tenphi/tasty' {
     'dark-03': true;
     'dark-04': true;
     'dark-05': true;
-    'dark-bg': true;
+    surface: true;
+    'surface-2': true;
+    'surface-3': true;
     text: true;
     primary: true;
     disabled: true;

src/tokens/base.ts

@@ -60,6 +60,6 @@ export const BASE_TOKENS: Styles = {
   '$scrollbar-radius': '1.5r',
   '#scrollbar-thumb': '#text.5',
   '#scrollbar-outline': '#clear',
-  '#scrollbar-bg': '#dark-bg',
+  '#scrollbar-bg': '#surface-2',
   '#scrollbar-corner': '#clear',
 };

src/tokens/colors.ts

@@ -90,10 +90,15 @@ export const COLOR_TOKENS: Styles = {
   '#dark-03': okhsl(PURPLE_HUE, 19, 49),
   '#dark-04': okhsl(PURPLE_HUE, 14, 67),
   '#dark-05': okhsl(PURPLE_HUE, 14, 86),
-  '#dark-bg': okhsl(PURPLE_HUE, 21, 98),
 
-  // Light
-  '#light': okhsl(PURPLE_HUE, 14, 97),
+  // Surfaces
+  '#surface': okhsl(PURPLE_HUE, 21, 100),
+  '#surface-2': okhsl(PURPLE_HUE, 21, 98),
+  '#surface-3': okhsl(PURPLE_HUE, 21, 96),
+
+  // Legacy
+  '#light': '#surface-3',
+  '#dark-bg': okhsl(PURPLE_HUE, 21, 98),
 
   // Black & White
   '#white': 'okhsl(0 0% 100%)',

tasty.config.ts

@@ -38,7 +38,9 @@ export default {
     '#dark-03',
     '#dark-04',
     '#dark-05',
-    '#dark-bg',
+    '#surface',
+    '#surface-2',
+    '#surface-3',
     '#light',
     '#danger',
     '#danger-text',