feat: new colors (#1087)

Author: tenphi

.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

@@ -94,7 +94,7 @@ const CopySnippetElement = tasty(Card, {
   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',
   },