chore(ui): update token names across ui package to closer match ui3

.claude/skills/ui4-review/SKILL.md

@@ -9,6 +9,24 @@ Reviews CSS changes and **auto-fixes** token violations.
 
 ---
 
+## Important: Palette vs Semantic Tokens
+
+**`--ramp-*` tokens** are the raw color palette (e.g., `--ramp-white-1000`, `--ramp-blue-500`). These are used **only** in `colors.css` to define semantic tokens.
+
+**`--color-*` tokens** are context-aware semantic tokens (e.g., `--color-bg`, `--color-text-brand`). These handle light/dark theming automatically.
+
+**Components and elements should ALWAYS use `--color-*` semantic tokens, never `--ramp-*` palette tokens directly.**
+
+```css
+/* ❌ BAD - using raw palette */
+background: var(--ramp-white-1000);
+
+/* ✅ GOOD - using semantic token */
+background: var(--color-bg);
+```
+
+---
+
 ## Process
 
 ### Step 1: Get Changed CSS Files
@@ -36,18 +54,25 @@ grep -nE '#[0-9a-fA-F]{3,8}|rgba?\(' "$FILE"
 # 4. Legacy Theme Variables
 grep -nE 'var\(--theme-|var\(--style-' "$FILE"
 
-# 5. Long-form Token Names (should use shorthands)
-grep -nE '\-\-icon-default-default|\-\-text-default-default|\-\-bg-default-default|\-\-border-default-default' "$FILE"
+# 5. Old Token Names (pre-UI4 naming)
+grep -nE '\-\-bg-default|\-\-bg-secondary|\-\-text-default|\-\-text-secondary|\-\-icon-default|\-\-icon-secondary|\-\-border-default|\-\-border-strong' "$FILE"
+
+# 6. Raw Palette Usage (should use semantic tokens instead)
+# Skip this check for colors.css which defines the semantic tokens
+grep -nE 'var\(--ramp-' "$FILE"
 ```
 
-**Invoke all 5 grep commands in a single parallel batch**, then analyze results.
+**Invoke all 6 grep commands in a single parallel batch**, then analyze results.
+
+**Note:** Raw `--ramp-*` violations are only flagged in component CSS files, not in `colors.css` where they're used to define semantic tokens.
 
 ### Step 3: Auto-Fix by Priority
 
 1. **SCSS Nesting** (breaks CSS entirely) — Fix first
 2. **Legacy Variables** (deprecated) — Replace with new tokens
-3. **Long-form Tokens** (verbose) — Convert to shorthands
-4. **Hardcoded Values** (spacing, colors, radius) — Replace with tokens
+3. **Old Token Names** (pre-UI4) — Convert to `--color-*` naming
+4. **Raw Palette Usage** (`--ramp-*` in components) — Replace with semantic `--color-*` tokens
+5. **Hardcoded Values** (spacing, colors, radius) — Replace with tokens
 
 ### Step 4: Report
 
@@ -100,35 +125,47 @@ After fixing, report:
 
 ---
 
-### Token Shorthands
-
-| Long Form                   | Shorthand           |
-| --------------------------- | ------------------- |
-| `--icon-default-default`    | `--icon-default`    |
-| `--icon-default-secondary`  | `--icon-secondary`  |
-| `--icon-default-tertiary`   | `--icon-tertiary`   |
-| `--text-default-default`    | `--text-default`    |
-| `--text-default-secondary`  | `--text-secondary`  |
-| `--text-default-tertiary`   | `--text-tertiary`   |
-| `--bg-default-default`      | `--bg-default`      |
-| `--bg-default-secondary`    | `--bg-secondary`    |
-| `--bg-default-hover`        | `--bg-hover`        |
-| `--bg-selected-default`     | `--bg-selected`     |
-| `--border-default-default`  | `--border-default`  |
-| `--border-default-strong`   | `--border-strong`   |
-| `--border-selected-default` | `--border-selected` |
+### Semantic Color Tokens (UI4 Naming)
+
+All semantic colors use the `--color-` prefix. The `default` category and variant are implicit.
+
+| Old Name            | New Name (UI4)            |
+| ------------------- | ------------------------- |
+| `--bg-default`      | `--color-bg`              |
+| `--bg-secondary`    | `--color-bg-secondary`    |
+| `--bg-hover`        | `--color-bg-hover`        |
+| `--bg-selected`     | `--color-bg-selected`     |
+| `--bg-brand`        | `--color-bg-brand`        |
+| `--bg-danger`       | `--color-bg-danger`       |
+| `--bg-success`      | `--color-bg-success`      |
+| `--bg-warning`      | `--color-bg-warning`      |
+| `--text-default`    | `--color-text`            |
+| `--text-secondary`  | `--color-text-secondary`  |
+| `--text-tertiary`   | `--color-text-tertiary`   |
+| `--text-brand`      | `--color-text-brand`      |
+| `--text-danger`     | `--color-text-danger`     |
+| `--text-success`    | `--color-text-success`    |
+| `--icon-default`    | `--color-icon`            |
+| `--icon-secondary`  | `--color-icon-secondary`  |
+| `--icon-tertiary`   | `--color-icon-tertiary`   |
+| `--icon-brand`      | `--color-icon-brand`      |
+| `--icon-danger`     | `--color-icon-danger`     |
+| `--border-default`  | `--color-border`          |
+| `--border-strong`   | `--color-border-strong`   |
+| `--border-selected` | `--color-border-selected` |
+| `--border-brand`    | `--color-border-brand`    |
 
 ---
 
 ### Legacy Variables (Replace Immediately)
 
-| Legacy                  | Replacement        |
-| ----------------------- | ------------------ |
-| `--theme-elevation-0`   | `--bg-default`     |
-| `--theme-elevation-50`  | `--bg-secondary`   |
-| `--theme-elevation-100` | `--border-default` |
-| `--theme-text`          | `--text-default`   |
-| `--style-radius-m`      | `--radius-medium`  |
+| Legacy                  | Replacement            |
+| ----------------------- | ---------------------- |
+| `--theme-elevation-0`   | `--color-bg`           |
+| `--theme-elevation-50`  | `--color-bg-secondary` |
+| `--theme-elevation-100` | `--color-border`       |
+| `--theme-text`          | `--color-text`         |
+| `--style-radius-m`      | `--radius-medium`      |
 
 ---
 

packages/next/src/elements/Nav/SidebarTabs/index.css

@@ -10,7 +10,7 @@
   .sidebar-tabs__tabs {
     display: flex;
     gap: 0;
-    background-color: var(--bg-secondary);
+    background-color: var(--color-bg-secondary);
     border-radius: var(--radius-medium);
     width: 100%;
   }
@@ -28,22 +28,22 @@
     border-radius: var(--radius-medium);
     border: 1px solid transparent;
     background-color: transparent;
-    color: var(--icon-secondary);
+    color: var(--color-icon-secondary);
     transition:
       background-color 0.15s ease,
       border-color 0.15s ease,
       color 0.15s ease;
     position: relative;
 
     &:hover {
-      color: var(--icon-default);
+      color: var(--color-icon);
     }
   }
 
   .sidebar-tabs__tab--active {
-    background-color: var(--bg-default);
-    border-color: var(--border-default);
-    color: var(--icon-default);
+    background-color: var(--color-bg);
+    border-color: var(--color-border);
+    color: var(--color-icon);
   }
 
   .sidebar-tabs__tab-icon {

packages/next/src/elements/Nav/index.css

@@ -6,7 +6,7 @@
     flex-shrink: 0;
     height: 100vh;
     width: var(--nav-width);
-    border-right: 1px solid var(--border-default);
+    border-right: 1px solid var(--color-border);
     opacity: 0;
     overflow: hidden;
     --nav-padding-inline-start: var(--spacer-2-5);
@@ -17,7 +17,7 @@
 
   [dir='rtl'] .nav {
     border-right: none;
-    border-left: 1px solid var(--border-default);
+    border-left: 1px solid var(--color-border);
   }
 
   .nav--nav-animate {
@@ -72,7 +72,7 @@
   }
 
   .nav__label {
-    color: var(--text-tertiary);
+    color: var(--color-text-tertiary);
   }
 
   .nav__controls {
@@ -118,15 +118,15 @@
     border-radius: var(--radius-medium);
 
     &:hover {
-      background: var(--bg-secondary);
+      background: var(--color-bg-secondary);
       text-decoration: none;
     }
   }
 
   .nav__link--selected {
     font-weight: 600;
     border-radius: var(--radius-medium);
-    background: var(--bg-selected);
+    background: var(--color-bg-selected);
   }
 
   @media (max-width: 1024px) {

packages/next/src/views/Dashboard/Default/ModularDashboard/index.client.tsx

@@ -369,7 +369,7 @@ function DroppableItem({ id, position }: { id: string; position: 'after' | 'befo
         bottom: 0,
         borderRadius: '1000px',
         width: '4px',
-        backgroundColor: isOver ? 'var(--bg-success-default)' : 'transparent',
+        backgroundColor: isOver ? 'var(--color-bg-success)' : 'transparent',
         marginBottom: '10px',
         marginTop: '10px',
         pointerEvents: 'none',