@mekari/pixel3-theme 0.6.2-dev.0 → 0.7.0

package/src/semanticTokens/colors.ts

@@ -1,184 +1,13 @@
 import { defineSemanticTokens } from '@pandacss/dev'
 
 export const colors = defineSemanticTokens.colors({
-  // BACKGROUND SEMANTIC TOKENS
   background: {
-    surface: {
-      DEFAULT: {
-        value: {
-          base: '#F1F5F9', // Doesn't have raw token
-          _light: '#F1F5F9', // Doesn't have raw token
-          _dark: '{colors.dark}',
-          _enterprise: '{colors.slate.100}'
-        }
-      },
-      bold: {
-        value: {
-          base: '{colors.neutral.1000}',
-          _light: '{colors.neutral.1000}',
-          _dark: '{colors.neutral.100}',
-          _enterprise: '{colors.emerald.1000}'
-        }
-      }
-    },
-    information: {
-      DEFAULT: {
-        value: {
-          base: '{colors.indigo.100}',
-          _light: '{colors.indigo.100}',
-          _dark: '{colors.indigo.1000}',
-          _enterprise: '{colors.indigo.100}'
-        }
-      },
-      bold: {
-        value: {
-          base: '{colors.indigo.700}',
-          _light: '{colors.indigo.700}',
-          _dark: '{colors.indigo.400}',
-          _enterprise: '{colors.indigo.700}'
-        }
-      }
-    },
-    stage: {
-      value: {
-        base: '{colors.white}',
-        _light: '{colors.white}',
-        _dark: '{colors.dark.100}',
-        _enterprise: '{colors.white}'
-      }
-    },
-    overlay: {
-      value: {
-        base: '#232933CC', // Doesn't have raw token
-        _light: '#232933CC', // Doesn't have raw token
-        _dark: '#657F9980', // Doesn't have raw token
-        _enterprise: '#222222CC' // Doesn't have raw token
-      }
-    },
-    disabled: {
-      value: {
-        base: '{colors.neutral.100a}',
-        _light: '{colors.neutral.100a}',
-        _dark: '{colors.dark.100a}',
-        _enterprise: '{colors.slate.100}'
-      }
-    },
-    inverse: {
-      value: {
-        base: '{colors.dark.100}',
-        _light: '{colors.dark.100}',
-        _dark: '{colors.white}',
-        _enterprise: '{colors.dark.100}'
-      }
-    },
-    shadow: {
+    airene: {
       value: {
-        base: '#1D1F2429', // Doesn't have raw token
-        _light: '#1D1F2429', // Doesn't have raw token
-        _dark: '{colors.dark}',
-        _enterprise: '#1D1F2429' // Doesn't have raw token
-      }
-    },
-    neutral: {
-      DEFAULT: {
-        value: {
-          base: '{colors.white}',
-          _light: '{colors.white}',
-          _dark: '{colors.dark.200}',
-          _enterprise: '{colors.white}'
-        }
-      },
-      hovered: {
-        value: {
-          base: '{colors.neutral.100}',
-          _light: '{colors.neutral.100}',
-          _dark: '{colors.dark.250}',
-          _enterprise: '{colors.slate.100}'
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.neutral.200}',
-          _light: '{colors.neutral.200}',
-          _dark: '{colors.dark.300}',
-          _enterprise: '{colors.slate.200}'
-        }
-      },
-      selected: {
-        value: {
-          base: '{colors.neutral.100}',
-          _light: '{colors.neutral.100}',
-          _dark: '{colors.dark.250}',
-          _enterprise: '{colors.slate.100}'
-        }
-      },
-      subtle: {
-        DEFAULT: {
-          value: {
-            base: '{colors.neutral.200}',
-            _light: '{colors.neutral.200}',
-            _dark: '{colors.dark.300}',
-            _enterprise: '{colors.slate.100}'
-          }
-        },
-        hovered: {
-          value: {
-            base: '{colors.neutral.300}',
-            _light: '{colors.neutral.300}',
-            _dark: '{colors.dark.350}',
-            _enterprise: '{colors.slate.200}'
-          }
-        },
-        pressed: {
-          value: {
-            base: '{colors.neutral.400}',
-            _light: '{colors.neutral.400}',
-            _dark: '{colors.dark.400}',
-            _enterprise: '{colors.slate.300}'
-          }
-        },
-        selected: {
-          value: {
-            base: '{colors.neutral.300}',
-            _light: '{colors.neutral.300}',
-            _dark: '{colors.dark.350}',
-            _enterprise: '{colors.slate.200}'
-          }
-        }
-      },
-      bold: {
-        DEFAULT: {
-          value: {
-            base: '{colors.neutral.800}',
-            _light: '{colors.neutral.800}',
-            _dark: '{colors.dark.800}',
-            _enterprise: '{colors.slate.800}'
-          }
-        },
-        hovered: {
-          value: {
-            base: '{colors.neutral.900}',
-            _light: '{colors.neutral.900}',
-            _dark: '{colors.dark.900}',
-            _enterprise: '{colors.slate.900}'
-          }
-        },
-        pressed: {
-          value: {
-            base: '{colors.neutral.1000}',
-            _light: '{colors.neutral.1000}',
-            _dark: '{colors.dark.1000}',
-            _enterprise: '{colors.slate.1000}'
-          }
-        },
-        selected: {
-          value: {
-            base: '{colors.neutral.900}',
-            _light: '{colors.neutral.900}',
-            _dark: '{colors.dark.900}',
-            _enterprise: '{colors.slate.900}'
-          }
-        }
+        base: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)',
+        _light: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)',
+        _dark: 'radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)',
+        _enterprise: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)'
       }
     },
     brand: {
@@ -190,30 +19,6 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.emerald.100}'
         }
       },
-      hovered: {
-        value: {
-          base: '{colors.indigo.200}',
-          _light: '{colors.indigo.200}',
-          _dark: '{colors.indigo.900}',
-          _enterprise: '{colors.emerald.200}'
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.indigo.300}',
-          _light: '{colors.indigo.300}',
-          _dark: '{colors.indigo.800}',
-          _enterprise: '{colors.emerald.300}'
-        }
-      },
-      selected: {
-        value: {
-          base: '{colors.indigo.200}',
-          _light: '{colors.indigo.200}',
-          _dark: '{colors.indigo.900}',
-          _enterprise: '{colors.emerald.200}'
-        }
-      },
       bold: {
         DEFAULT: {
           value: {
@@ -257,31 +62,29 @@ export const colors = defineSemanticTokens.colors({
             }
           }
         }
-      }
-    },
-    tertiary: {
-      DEFAULT: {
-        value: {
-          base: '{colors.dark.200}',
-          _light: '{colors.dark.200}',
-          _dark: '{colors.dark.200}',
-          _enterprise: '{colors.dark.250}'
-        }
       },
       hovered: {
         value: {
-          base: '{colors.dark.300}',
-          _light: '{colors.dark.300}',
-          _dark: '{colors.dark.300}',
-          _enterprise: '{colors.dark.300}'
+          base: '{colors.indigo.200}',
+          _light: '{colors.indigo.200}',
+          _dark: '{colors.indigo.900}',
+          _enterprise: '{colors.emerald.200}'
         }
       },
       pressed: {
         value: {
-          base: '{colors.dark.400}',
-          _light: '{colors.dark.400}',
-          _dark: '{colors.dark.400}',
-          _enterprise: '{colors.dark.400}'
+          base: '{colors.indigo.300}',
+          _light: '{colors.indigo.300}',
+          _dark: '{colors.indigo.800}',
+          _enterprise: '{colors.emerald.300}'
+        }
+      },
+      selected: {
+        value: {
+          base: '{colors.indigo.200}',
+          _light: '{colors.indigo.200}',
+          _dark: '{colors.indigo.900}',
+          _enterprise: '{colors.emerald.200}'
         }
       }
     },
@@ -294,30 +97,6 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.red.100}'
         }
       },
-      hovered: {
-        value: {
-          base: '{colors.red.200}',
-          _light: '{colors.red.200}',
-          _dark: '{colors.red.900}',
-          _enterprise: '{colors.red.200}'
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.red.300}',
-          _light: '{colors.red.300}',
-          _dark: '{colors.red.800}',
-          _enterprise: '{colors.red.300}'
-        }
-      },
-      selected: {
-        value: {
-          base: '{colors.red.200}',
-          _light: '{colors.red.200}',
-          _dark: '{colors.red.900}',
-          _enterprise: '{colors.red.200}'
-        }
-      },
       bold: {
         DEFAULT: {
           value: {
@@ -351,152 +130,110 @@ export const colors = defineSemanticTokens.colors({
             _enterprise: '{colors.red.800}'
           }
         }
-      }
-    },
-    warning: {
-      DEFAULT: {
-        value: {
-          base: '{colors.yellow.100}',
-          _light: '{colors.yellow.100}',
-          _dark: '{colors.yellow.1000}',
-          _enterprise: '{colors.yellow.100}'
-        }
       },
       hovered: {
         value: {
-          base: '{colors.yellow.200}',
-          _light: '{colors.yellow.200}',
-          _dark: '{colors.yellow.900}',
-          _enterprise: '{colors.yellow.200}'
+          base: '{colors.red.200}',
+          _light: '{colors.red.200}',
+          _dark: '{colors.red.900}',
+          _enterprise: '{colors.red.200}'
         }
       },
       pressed: {
         value: {
-          base: '{colors.yellow.300}',
-          _light: '{colors.yellow.300}',
-          _dark: '{colors.yellow.800}',
-          _enterprise: '{colors.yellow.300}'
+          base: '{colors.red.300}',
+          _light: '{colors.red.300}',
+          _dark: '{colors.red.800}',
+          _enterprise: '{colors.red.300}'
         }
       },
       selected: {
         value: {
-          base: '{colors.yellow.200}',
-          _light: '{colors.yellow.200}',
-          _dark: '{colors.yellow.900}',
-          _enterprise: '{colors.yellow.200}'
+          base: '{colors.red.200}',
+          _light: '{colors.red.200}',
+          _dark: '{colors.red.900}',
+          _enterprise: '{colors.red.200}'
+        }
+      }
+    },
+    disabled: {
+      value: {
+        base: '{colors.neutral.100a}',
+        _light: '{colors.neutral.100a}',
+        _dark: '{colors.dark.100a}',
+        _enterprise: '{colors.slate.100}'
+      }
+    },
+    header: {
+      DEFAULT: {
+        value: {
+          base: '{colors.white}',
+          _light: '{colors.white}',
+          _dark: '{colors.dark.100}',
+          _enterprise: '{colors.emerald.1000}'
         }
       },
-      bold: {
-        DEFAULT: {
-          value: {
-            base: '{colors.yellow.300}',
-            _light: '{colors.yellow.300}',
-            _dark: '{colors.yellow.300}',
-            _enterprise: '{colors.yellow.300}'
-          }
-        },
+      menu: {
         hovered: {
           value: {
-            base: '{colors.yellow.400}',
-            _light: '{colors.yellow.400}',
-            _dark: '{colors.yellow.400}',
-            _enterprise: '{colors.yellow.400}'
-          }
-        },
-        pressed: {
-          value: {
-            base: '{colors.yellow.500}',
-            _light: '{colors.yellow.500}',
-            _dark: '{colors.yellow.500}',
-            _enterprise: '{colors.yellow.500}'
+            base: '{colors.transparent}',
+            _light: '{colors.transparent}',
+            _dark: '{colors.transparent}',
+            _enterprise: '#265c5880'
           }
         },
         selected: {
           value: {
-            base: '{colors.yellow.400}',
-            _light: '{colors.yellow.400}',
-            _dark: '{colors.yellow.400}',
-            _enterprise: '{colors.yellow.400}'
+            base: '{colors.transparent}',
+            _light: '{colors.transparent}',
+            _dark: '{colors.transparent}',
+            _enterprise: '{colors.lime.300}'
           }
         }
       }
     },
-    success: {
+    highlight: {
       DEFAULT: {
         value: {
-          base: '{colors.green.100}',
-          _light: '{colors.green.100}',
-          _dark: '{colors.green.1000}',
-          _enterprise: '{colors.green.100}'
-        }
-      },
-      hovered: {
-        value: {
-          base: '{colors.green.200}',
-          _light: '{colors.green.200}',
-          _dark: '{colors.green.900}',
-          _enterprise: '{colors.green.200}'
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.green.300}',
-          _light: '{colors.green.300}',
-          _dark: '{colors.green.800}',
-          _enterprise: '{colors.green.300}'
-        }
-      },
-      selected: {
-        value: {
-          base: '{colors.green.200}',
-          _light: '{colors.green.200}',
-          _dark: '{colors.green.900}',
-          _enterprise: '{colors.green.200}'
+          base: '{colors.violet.100}',
+          _light: '{colors.violet.100}',
+          _dark: '{colors.violet.1000}',
+          _enterprise: '{colors.violet.100}'
         }
       },
       bold: {
         DEFAULT: {
           value: {
-            base: '{colors.green.700}',
-            _light: '{colors.green.700}',
-            _dark: '{colors.green.400}',
-            _enterprise: '{colors.green.700}'
+            base: '{colors.violet.700}',
+            _light: '{colors.violet.700}',
+            _dark: '{colors.violet.400}',
+            _enterprise: '{colors.violet.700}'
           }
         },
         hovered: {
           value: {
-            base: '{colors.green.800}',
-            _light: '{colors.green.800}',
-            _dark: '{colors.green.300}',
-            _enterprise: '{colors.green.800}'
+            base: '{colors.violet.800}',
+            _light: '{colors.violet.800}',
+            _dark: '{colors.violet.300}',
+            _enterprise: '{colors.violet.800}'
           }
         },
         pressed: {
           value: {
-            base: '{colors.green.900}',
-            _light: '{colors.green.900}',
-            _dark: '{colors.green.200}',
-            _enterprise: '{colors.green.900}'
+            base: '{colors.violet.900}',
+            _light: '{colors.violet.900}',
+            _dark: '{colors.violet.200}',
+            _enterprise: '{colors.violet.900}'
           }
         },
         selected: {
           value: {
-            base: '{colors.green.800}',
-            _light: '{colors.green.800}',
-            _dark: '{colors.green.400}',
-            _enterprise: '{colors.green.800}'
+            base: '{colors.violet.800}',
+            _light: '{colors.violet.800}',
+            _dark: '{colors.violet.300}',
+            _enterprise: '{colors.violet.800}'
           }
         }
-      }
-    },
-    highlight: {
-      DEFAULT: {
-        value: {
-          base: '{colors.violet.100}',
-          _light: '{colors.violet.100}',
-          _dark: '{colors.violet.1000}',
-          _enterprise: '{colors.violet.100}'
-        }
       },
       hovered: {
         value: {
@@ -521,183 +258,404 @@ export const colors = defineSemanticTokens.colors({
           _dark: '{colors.violet.900}',
           _enterprise: '{colors.violet.200}'
         }
+      }
+    },
+    information: {
+      DEFAULT: {
+        value: {
+          base: '{colors.indigo.100}',
+          _light: '{colors.indigo.100}',
+          _dark: '{colors.indigo.1000}',
+          _enterprise: '{colors.indigo.100}'
+        }
       },
       bold: {
-        DEFAULT: {
-          value: {
-            base: '{colors.violet.700}',
-            _light: '{colors.violet.700}',
-            _dark: '{colors.violet.400}',
-            _enterprise: '{colors.violet.700}'
-          }
-        },
-        hovered: {
-          value: {
-            base: '{colors.violet.800}',
-            _light: '{colors.violet.800}',
-            _dark: '{colors.violet.300}',
-            _enterprise: '{colors.violet.800}'
-          }
-        },
-        pressed: {
-          value: {
-            base: '{colors.violet.900}',
-            _light: '{colors.violet.900}',
-            _dark: '{colors.violet.200}',
-            _enterprise: '{colors.violet.900}'
-          }
-        },
-        selected: {
-          value: {
-            base: '{colors.violet.800}',
-            _light: '{colors.violet.800}',
-            _dark: '{colors.violet.300}',
-            _enterprise: '{colors.violet.800}'
-          }
+        value: {
+          base: '{colors.indigo.700}',
+          _light: '{colors.indigo.700}',
+          _dark: '{colors.indigo.400}',
+          _enterprise: '{colors.indigo.700}'
         }
       }
     },
+    inverse: {
+      value: {
+        base: '{colors.dark.100}',
+        _light: '{colors.dark.100}',
+        _dark: '{colors.white}',
+        _enterprise: '{colors.dark.100}'
+      }
+    },
     nav: {
       parent: {
         value: {
-          base: '#E7EDF5', // Doesn't have raw token
-          _light: '#E7EDF5', // Doesn't have raw token
-          _dark: '{colors.dark.100}',
+          base: '#e7edf5',
+          _light: '#e7edf5',
+          _dark: '{colors.dark.-100}',
           _enterprise: '{colors.emerald.1000}'
         }
       },
       stack: {
         DEFAULT: {
           value: {
-            base: '{colors.neutral.100}',
-            _light: '{colors.neutral.100}',
-            _dark: '{colors.dark}',
-            _enterprise: '{colors.neutral.100}'
+            base: '#f1f5f9',
+            _light: '#f1f5f9',
+            _dark: '{colors.dark.DEFAULT}',
+            _enterprise: '{colors.emerald.100}'
           }
         },
         hovered: {
           value: {
-            base: '#E7EDF5', // Doesn't have raw token
-            _light: '#E7EDF5', // Doesn't have raw token
-            _dark: '{colors.dark.100}',
+            base: '#e7edf5',
+            _light: '#e7edf5',
+            _dark: '{colors.dark.-100}',
             _enterprise: '{colors.emerald.200}'
           }
         }
       }
     },
-    header: {
+    neutral: {
       DEFAULT: {
         value: {
           base: '{colors.white}',
           _light: '{colors.white}',
-          _dark: '{colors.dark.100}',
-          _enterprise: '{colors.emerald.1000}'
+          _dark: '{colors.dark.200}',
+          _enterprise: '{colors.white}'
         }
       },
-      menu: {
+      bold: {
+        DEFAULT: {
+          value: {
+            base: '{colors.neutral.800}',
+            _light: '{colors.neutral.800}',
+            _dark: '{colors.dark.800}',
+            _enterprise: '{colors.slate.800}'
+          }
+        },
         hovered: {
           value: {
-            base: '{colors.transparent}',
-            _light: '{colors.transparent}',
-            _dark: '{colors.transparent}',
-            _enterprise: '#265C5880' // Doesn't have raw token
+            base: '{colors.neutral.900}',
+            _light: '{colors.neutral.900}',
+            _dark: '{colors.dark.900}',
+            _enterprise: '{colors.slate.900}'
+          }
+        },
+        pressed: {
+          value: {
+            base: '{colors.neutral.1000}',
+            _light: '{colors.neutral.1000}',
+            _dark: '{colors.dark.1000}',
+            _enterprise: '{colors.slate.1000}'
           }
         },
         selected: {
           value: {
-            base: '{colors.transparent}',
-            _light: '{colors.transparent}',
-            _dark: '{colors.transparent}',
-            _enterprise: '{colors.lime.300}'
+            base: '{colors.neutral.900}',
+            _light: '{colors.neutral.900}',
+            _dark: '{colors.dark.900}',
+            _enterprise: '{colors.slate.900}'
           }
         }
-      }
-    },
-    airene: {
-      value: {
-        base: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)', // Doesn't have raw token
-        _light: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)', // Doesn't have raw token
-        _dark: 'radial-gradient(108.28% 139.29% at 0% 0%, #1D2656 0%, #2B2549 100%)', // Doesn't have raw token
-        _enterprise: 'radial-gradient(108.28% 139.29% at 0% 0%, #EEF0FC 0%, #F3F1FC 100%)' // Doesn't have raw token
-      }
-    }
-  },
-  // NAVIGATION SEMANTIC TOKENS (REMOVE AFTER NAV IN BACKGROUND IS UPDATED)
-  nav: {
-    parent: {
-      deprecated: 'use `background.nav.parent` instead',
-      value: {
-        base: '#E7EDF5', // Doesn't have raw token
-        _light: '#E7EDF5', // Doesn't have raw token
-        _dark: '{colors.dark.100}',
-        _enterprise: '{colors.emerald.1000}'
-      }
-    },
-    stack: {
-      DEFAULT: {
-        deprecated: 'use `background.nav.stack` instead',
+      },
+      hovered: {
         value: {
           base: '{colors.neutral.100}',
           _light: '{colors.neutral.100}',
-          _dark: '{colors.dark}',
-          _enterprise: '{colors.neutral.100}'
+          _dark: '{colors.dark.250}',
+          _enterprise: '{colors.slate.100}'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.neutral.200}',
+          _light: '{colors.neutral.200}',
+          _dark: '{colors.dark.300}',
+          _enterprise: '{colors.slate.200}'
+        }
+      },
+      selected: {
+        value: {
+          base: '{colors.neutral.100}',
+          _light: '{colors.neutral.100}',
+          _dark: '{colors.dark.250}',
+          _enterprise: '{colors.slate.100}'
+        }
+      },
+      subtle: {
+        DEFAULT: {
+          value: {
+            base: '{colors.neutral.200}',
+            _light: '{colors.neutral.200}',
+            _dark: '{colors.dark.300}',
+            _enterprise: '{colors.slate.100}'
+          }
+        },
+        hovered: {
+          value: {
+            base: '{colors.neutral.300}',
+            _light: '{colors.neutral.300}',
+            _dark: '{colors.dark.350}',
+            _enterprise: '{colors.slate.200}'
+          }
+        },
+        pressed: {
+          value: {
+            base: '{colors.neutral.400}',
+            _light: '{colors.neutral.400}',
+            _dark: '{colors.dark.400}',
+            _enterprise: '{colors.slate.300}'
+          }
+        },
+        selected: {
+          value: {
+            base: '{colors.neutral.300}',
+            _light: '{colors.neutral.300}',
+            _dark: '{colors.dark.350}',
+            _enterprise: '{colors.slate.200}'
+          }
+        }
+      }
+    },
+    overlay: {
+      value: {
+        base: '#232933cc',
+        _light: '#232933cc',
+        _dark: '#657f99cc',
+        _enterprise: '#222222cc'
+      }
+    },
+    shadow: {
+      value: {
+        base: '#1d1f2429',
+        _light: '#1d1f2429',
+        _dark: '{colors.dark.DEFAULT}',
+        _enterprise: '#1d1f2429'
+      }
+    },
+    stage: {
+      value: {
+        base: '{colors.white}',
+        _light: '{colors.white}',
+        _dark: '{colors.dark.100}',
+        _enterprise: '{colors.white}'
+      }
+    },
+    success: {
+      DEFAULT: {
+        value: {
+          base: '{colors.green.100}',
+          _light: '{colors.green.100}',
+          _dark: '{colors.green.1000}',
+          _enterprise: '{colors.green.100}'
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: '{colors.green.700}',
+            _light: '{colors.green.700}',
+            _dark: '{colors.green.500}',
+            _enterprise: '{colors.green.700}'
+          }
+        },
+        hovered: {
+          value: {
+            base: '{colors.green.800}',
+            _light: '{colors.green.800}',
+            _dark: '{colors.green.400}',
+            _enterprise: '{colors.green.800}'
+          }
+        },
+        pressed: {
+          value: {
+            base: '{colors.green.900}',
+            _light: '{colors.green.900}',
+            _dark: '{colors.green.300}',
+            _enterprise: '{colors.green.900}'
+          }
+        },
+        selected: {
+          value: {
+            base: '{colors.green.800}',
+            _light: '{colors.green.800}',
+            _dark: '{colors.green.400}',
+            _enterprise: '{colors.green.800}'
+          }
         }
       },
       hovered: {
-        deprecated: 'use `background.nav.stack.hovered` instead',
         value: {
-          base: '#E7EDF5', // Doesn't have raw token
-          _light: '#E7EDF5', // Doesn't have raw token
-          _dark: '{colors.dark.100}',
-          _enterprise: '{colors.emerald.200}'
+          base: '{colors.green.200}',
+          _light: '{colors.green.200}',
+          _dark: '{colors.green.900}',
+          _enterprise: '{colors.green.200}'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.green.300}',
+          _light: '{colors.green.300}',
+          _dark: '{colors.green.800}',
+          _enterprise: '{colors.green.300}'
+        }
+      },
+      selected: {
+        value: {
+          base: '{colors.green.200}',
+          _light: '{colors.green.200}',
+          _dark: '{colors.green.900}',
+          _enterprise: '{colors.green.200}'
         }
       }
-    }
-  },
-  // TEXT SEMANTIC TOKENS
-  text: {
-    default: {
+    },
+    surface: {
       DEFAULT: {
         value: {
-          base: '{colors.neutral.1000}',
-          _light: '{colors.neutral.1000}',
-          _dark: '{colors.dark.900}',
-          _enterprise: '{colors.slate.1000}'
+          base: '#f1f5f9',
+          _light: '#f1f5f9',
+          _dark: '{colors.dark.DEFAULT}',
+          _enterprise: '{colors.slate.100}'
         }
       },
-      static: {
+      bold: {
         value: {
           base: '{colors.neutral.1000}',
           _light: '{colors.neutral.1000}',
-          _dark: '{colors.neutral.1000}',
-          _enterprise: '{colors.dark.100}'
+          _dark: '{colors.neutral.100}',
+          _enterprise: '{colors.emerald.1000}'
         }
       }
     },
-    secondary: {
+    tertiary: {
       DEFAULT: {
         value: {
-          base: '{colors.neutral.700}',
-          _light: '{colors.neutral.700}',
-          _dark: '{colors.dark.700}',
-          _enterprise: '{colors.slate.700}'
+          base: '{colors.dark.250}',
+          _light: '{colors.dark.250}',
+          _dark: '{colors.dark.250}',
+          _enterprise: '{colors.dark.250}'
+        }
+      },
+      hovered: {
+        value: {
+          base: '{colors.dark.350}',
+          _light: '{colors.dark.350}',
+          _dark: '{colors.dark.350}',
+          _enterprise: '{colors.dark.300}'
         }
       },
       pressed: {
         value: {
-          base: '{colors.neutral.800}',
-          _light: '{colors.neutral.800}',
-          _dark: '{colors.dark.800}',
-          _enterprise: '{colors.slate.800}'
+          base: '{colors.dark.400}',
+          _light: '{colors.dark.400}',
+          _dark: '{colors.dark.400}',
+          _enterprise: '{colors.dark.400}'
         }
       }
     },
-    placeholder: {
-      value: {
-        base: '{colors.neutral.600}',
-        _light: '{colors.neutral.600}',
-        _dark: '{colors.dark.600}',
-        _enterprise: '{colors.slate.500}'
+    warning: {
+      DEFAULT: {
+        value: {
+          base: '{colors.yellow.100}',
+          _light: '{colors.yellow.100}',
+          _dark: '{colors.yellow.1000}',
+          _enterprise: '{colors.yellow.100}'
+        }
+      },
+      bold: {
+        DEFAULT: {
+          value: {
+            base: '{colors.yellow.300}',
+            _light: '{colors.yellow.300}',
+            _dark: '{colors.yellow.300}',
+            _enterprise: '{colors.yellow.300}'
+          }
+        },
+        hovered: {
+          value: {
+            base: '{colors.yellow.400}',
+            _light: '{colors.yellow.400}',
+            _dark: '{colors.yellow.400}',
+            _enterprise: '{colors.yellow.400}'
+          }
+        },
+        pressed: {
+          value: {
+            base: '{colors.yellow.500}',
+            _light: '{colors.yellow.500}',
+            _dark: '{colors.yellow.500}',
+            _enterprise: '{colors.yellow.500}'
+          }
+        },
+        selected: {
+          value: {
+            base: '{colors.yellow.400}',
+            _light: '{colors.yellow.400}',
+            _dark: '{colors.yellow.400}',
+            _enterprise: '{colors.yellow.400}'
+          }
+        }
+      },
+      hovered: {
+        value: {
+          base: '{colors.yellow.200}',
+          _light: '{colors.yellow.200}',
+          _dark: '{colors.yellow.900}',
+          _enterprise: '{colors.yellow.200}'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.yellow.300}',
+          _light: '{colors.yellow.300}',
+          _dark: '{colors.yellow.800}',
+          _enterprise: '{colors.yellow.300}'
+        }
+      },
+      selected: {
+        value: {
+          base: '{colors.yellow.200}',
+          _light: '{colors.yellow.200}',
+          _dark: '{colors.yellow.900}',
+          _enterprise: '{colors.yellow.200}'
+        }
+      }
+    }
+  },
+  text: {
+    danger: {
+      DEFAULT: {
+        value: {
+          base: '{colors.red.800}',
+          _light: '{colors.red.800}',
+          _dark: '{colors.red.300}',
+          _enterprise: '{colors.red.800}'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.red.900}',
+          _light: '{colors.red.900}',
+          _dark: '{colors.red.200}',
+          _enterprise: '{colors.red.900}'
+        }
+      }
+    },
+    default: {
+      DEFAULT: {
+        value: {
+          base: '{colors.neutral.1000}',
+          _light: '{colors.neutral.1000}',
+          _dark: '{colors.dark.900}',
+          _enterprise: '{colors.slate.1000}'
+        }
+      },
+      static: {
+        value: {
+          base: '{colors.dark.100}',
+          _light: '{colors.dark.100}',
+          _dark: '{colors.dark.100}',
+          _enterprise: '{colors.dark.100}'
+        }
       }
     },
     disabled: {
@@ -708,6 +666,22 @@ export const colors = defineSemanticTokens.colors({
         _enterprise: '{colors.slate.400}'
       }
     },
+    highlight: {
+      value: {
+        base: '{colors.violet.800}',
+        _light: '{colors.violet.800}',
+        _dark: '{colors.violet.300}',
+        _enterprise: '{colors.violet.800}'
+      }
+    },
+    information: {
+      value: {
+        base: '{colors.indigo.700}',
+        _light: '{colors.indigo.700}',
+        _dark: '{colors.indigo.400}',
+        _enterprise: '{colors.indigo.700}'
+      }
+    },
     inverse: {
       DEFAULT: {
         value: {
@@ -719,10 +693,54 @@ export const colors = defineSemanticTokens.colors({
       },
       static: {
         value: {
-          base: '{colors.white}',
-          _light: '{colors.white}',
-          _dark: '{colors.white}',
-          _enterprise: '{colors.white}'
+          base: '{colors.white}',
+          _light: '{colors.white}',
+          _dark: '{colors.white}',
+          _enterprise: '{colors.white}'
+        }
+      }
+    },
+    link: {
+      DEFAULT: {
+        value: {
+          base: '{colors.indigo.700}',
+          _light: '{colors.indigo.700}',
+          _dark: '{colors.indigo.400}',
+          _enterprise: '#165082'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.indigo.800}',
+          _light: '{colors.indigo.800}',
+          _dark: '{colors.indigo.300}',
+          _enterprise: '#0d4372'
+        }
+      }
+    },
+    placeholder: {
+      value: {
+        base: '{colors.neutral.500}',
+        _light: '{colors.neutral.500}',
+        _dark: '{colors.dark.500}',
+        _enterprise: '{colors.slate.500}'
+      }
+    },
+    secondary: {
+      DEFAULT: {
+        value: {
+          base: '{colors.neutral.700}',
+          _light: '{colors.neutral.700}',
+          _dark: '{colors.dark.700}',
+          _enterprise: '{colors.slate.700}'
+        }
+      },
+      pressed: {
+        value: {
+          base: '{colors.neutral.800}',
+          _light: '{colors.neutral.800}',
+          _dark: '{colors.dark.800}',
+          _enterprise: '{colors.slate.800}'
         }
       }
     },
@@ -734,22 +752,12 @@ export const colors = defineSemanticTokens.colors({
         _enterprise: '{colors.emerald.800}'
       }
     },
-    danger: {
-      DEFAULT: {
-        value: {
-          base: '{colors.red.800}',
-          _light: '{colors.red.800}',
-          _dark: '{colors.red.300}',
-          _enterprise: '{colors.red.800}'
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.red.900}',
-          _light: '{colors.red.900}',
-          _dark: '{colors.red.200}',
-          _enterprise: '{colors.red.900}'
-        }
+    success: {
+      value: {
+        base: '{colors.green.800}',
+        _light: '{colors.green.800}',
+        _dark: '{colors.green.300}',
+        _enterprise: '{colors.emerald.800}'
       }
     },
     warning: {
@@ -761,7 +769,6 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.orange.800}'
         }
       },
-
       inverse: {
         value: {
           base: '{colors.neutral.1000}',
@@ -770,52 +777,25 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.slate.1000}'
         }
       }
-    },
-    success: {
-      value: {
-        base: '{colors.green.800}',
-        _light: '{colors.green.800}',
-        _dark: '{colors.green.300}',
-        _enterprise: '{colors.emerald.800}'
-      }
-    },
-    highlight: {
+    }
+  },
+  icon: {
+    brand: {
       value: {
-        base: '{colors.violet.800}',
-        _light: '{colors.violet.800}',
-        _dark: '{colors.violet.300}',
-        _enterprise: '{colors.violet.800}'
+        base: '{colors.indigo.700}',
+        _light: '{colors.indigo.700}',
+        _dark: '{colors.indigo.400}',
+        _enterprise: '{colors.emerald.700}'
       }
     },
-    information: {
+    danger: {
       value: {
-        base: '{colors.indigo.800}',
-        _light: '{colors.indigo.800}',
-        _dark: '{colors.indigo.300}',
-        _enterprise: '{colors.indigo.700}'
+        base: '{colors.red.700}',
+        _light: '{colors.red.700}',
+        _dark: '{colors.red.500}',
+        _enterprise: '{colors.red.700}'
       }
     },
-    link: {
-      DEFAULT: {
-        value: {
-          base: '{colors.indigo.700}',
-          _light: '{colors.indigo.700}',
-          _dark: '{colors.indigo.400}',
-          _enterprise: '#165082' // Doesn't have raw token
-        }
-      },
-      pressed: {
-        value: {
-          base: '{colors.indigo.800}',
-          _light: '{colors.indigo.800}',
-          _dark: '{colors.indigo.300}',
-          _enterprise: '#0D4372' // Doesn't have raw token
-        }
-      }
-    }
-  },
-  // ICON SEMANTIC TOKENS
-  icon: {
     default: {
       value: {
         base: '{colors.neutral.600}',
@@ -829,7 +809,23 @@ export const colors = defineSemanticTokens.colors({
         base: '{colors.neutral.400}',
         _light: '{colors.neutral.400}',
         _dark: '{colors.dark.400}',
-        _enterprise: '{colors.neutral.400}'
+        _enterprise: '{colors.slate.400}'
+      }
+    },
+    highlight: {
+      value: {
+        base: '{colors.violet.600}',
+        _light: '{colors.violet.600}',
+        _dark: '{colors.violet.500}',
+        _enterprise: '{colors.orange.700}'
+      }
+    },
+    information: {
+      value: {
+        base: '{colors.indigo.600}',
+        _light: '{colors.indigo.600}',
+        _dark: '{colors.indigo.500}',
+        _enterprise: '{colors.indigo.600}'
       }
     },
     inverse: {
@@ -850,6 +846,14 @@ export const colors = defineSemanticTokens.colors({
         }
       }
     },
+    logo: {
+      value: {
+        base: '#000000',
+        _light: '#000000',
+        _dark: '{colors.white}',
+        _enterprise: '#000000'
+      }
+    },
     selected: {
       value: {
         base: '{colors.indigo.700}',
@@ -858,29 +862,29 @@ export const colors = defineSemanticTokens.colors({
         _enterprise: '{colors.emerald.700}'
       }
     },
-    brand: {
+    subtle: {
       value: {
-        base: '{colors.indigo.700}',
-        _light: '{colors.indigo.700}',
-        _dark: '{colors.indigo.400}',
-        _enterprise: '{colors.emerald.700}'
+        base: '{colors.neutral.300}',
+        _light: '{colors.neutral.300}',
+        _dark: '{colors.dark.300}',
+        _enterprise: '{colors.slate.300}'
       }
     },
-    danger: {
+    success: {
       value: {
-        base: '{colors.red.700}',
-        _light: '{colors.red.700}',
-        _dark: '{colors.red.400}',
-        _enterprise: '{colors.red.700}'
+        base: '{colors.green.600}',
+        _light: '{colors.green.600}',
+        _dark: '{colors.green.500}',
+        _enterprise: '{colors.emerald.600}'
       }
     },
     warning: {
       DEFAULT: {
         value: {
-          base: '{colors.orange.700}',
-          _light: '{colors.orange.700}',
+          base: '{colors.orange.600}',
+          _light: '{colors.orange.600}',
           _dark: '{colors.yellow.300}',
-          _enterprise: '{colors.orange.700}'
+          _enterprise: '{colors.orange.600}'
         }
       },
       inverse: {
@@ -891,50 +895,33 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.slate.1000}'
         }
       }
-    },
-    success: {
-      value: {
-        base: '{colors.green.700}',
-        _light: '{colors.green.700}',
-        _dark: '{colors.green.400}',
-        _enterprise: '{colors.emerald.600}'
-      }
-    },
-    highlight: {
+    }
+  },
+  border: {
+    bold: {
       value: {
-        base: '{colors.violet.700}',
-        _light: '{colors.violet.700}',
-        _dark: '{colors.violet.400}',
-        _enterprise: '{colors.orange.700}'
+        base: '{colors.neutral.600}',
+        _light: '{colors.neutral.600}',
+        _dark: '{colors.dark.600}',
+        _enterprise: '{colors.slate.400}'
       }
     },
-    information: {
+    brand: {
       value: {
         base: '{colors.indigo.700}',
         _light: '{colors.indigo.700}',
         _dark: '{colors.indigo.400}',
-        _enterprise: '{colors.indigo.600}'
+        _enterprise: '{colors.emerald.800}'
       }
     },
-    subtle: {
+    danger: {
       value: {
-        base: '{colors.neutral.300}',
-        _light: '{colors.neutral.300}',
-        _dark: '{colors.dark.300}',
-        _enterprise: '{colors.slate.300}'
+        base: '{colors.red.600}',
+        _light: '{colors.red.600}',
+        _dark: '{colors.red.500}',
+        _enterprise: '{colors.red.600}'
       }
     },
-    logo: {
-      value: {
-        base: '#000000', // Doesn't have raw token
-        _light: '#000000', // Doesn't have raw token
-        _dark: '{colors.white}',
-        _enterprise: '#000000' // Doesn't have raw token
-      }
-    }
-  },
-  // BORDER SEMANTIC TOKENS
-  border: {
     default: {
       DEFAULT: {
         value: {
@@ -953,14 +940,6 @@ export const colors = defineSemanticTokens.colors({
         }
       }
     },
-    bold: {
-      value: {
-        base: '{colors.neutral.600}',
-        _light: '{colors.neutral.600}',
-        _dark: '{colors.dark.600}',
-        _enterprise: '{colors.slate.400}'
-      }
-    },
     disabled: {
       value: {
         base: '{colors.neutral.200a}',
@@ -969,6 +948,14 @@ export const colors = defineSemanticTokens.colors({
         _enterprise: '{colors.slate.200}'
       }
     },
+    focused: {
+      value: {
+        base: '{colors.indigo.500}',
+        _light: '{colors.indigo.500}',
+        _dark: '{colors.indigo.300}',
+        _enterprise: '{colors.emerald.500}'
+      }
+    },
     form: {
       value: {
         base: '{colors.neutral.300a}',
@@ -977,12 +964,20 @@ export const colors = defineSemanticTokens.colors({
         _enterprise: '{colors.slate.300a}'
       }
     },
-    focused: {
+    highlight: {
       value: {
-        base: '{colors.indigo.500}',
-        _light: '{colors.indigo.500}',
-        _dark: '{colors.indigo.300}',
-        _enterprise: '{colors.emerald.500}'
+        base: '{colors.violet.600}',
+        _light: '{colors.violet.600}',
+        _dark: '{colors.violet.500}',
+        _enterprise: '{colors.orange.700}'
+      }
+    },
+    information: {
+      value: {
+        base: '{colors.indigo.600}',
+        _light: '{colors.indigo.600}',
+        _dark: '{colors.indigo.500}',
+        _enterprise: '{colors.indigo.600}'
       }
     },
     inverse: {
@@ -1002,14 +997,6 @@ export const colors = defineSemanticTokens.colors({
           _enterprise: '{colors.emerald.700}'
         }
       },
-      hovered: {
-        value: {
-          base: '{colors.indigo.800}',
-          _light: '{colors.indigo.800}',
-          _dark: '{colors.indigo.300}',
-          _enterprise: '{colors.emerald.800}'
-        }
-      },
       disabled: {
         value: {
           base: '{colors.indigo.200}',
@@ -1017,58 +1004,35 @@ export const colors = defineSemanticTokens.colors({
           _dark: '{colors.indigo.900}',
           _enterprise: '{colors.emerald.200}'
         }
-      }
-    },
-    brand: {
-      value: {
-        base: '{colors.indigo.700}',
-        _light: '{colors.indigo.700}',
-        _dark: '{colors.indigo.400}',
-        _enterprise: '{colors.emerald.800}'
-      }
-    },
-    danger: {
-      value: {
-        base: '{colors.red.700}',
-        _light: '{colors.red.700}',
-        _dark: '{colors.red.400}',
-        _enterprise: '{colors.red.600}'
-      }
-    },
-    warning: {
-      value: {
-        base: '{colors.yellow.300}',
-        _light: '{colors.yellow.300}',
-        _dark: '{colors.yellow.300}',
-        _enterprise: '{colors.yellow.300}'
+      },
+      hovered: {
+        value: {
+          base: '{colors.indigo.800}',
+          _light: '{colors.indigo.800}',
+          _dark: '{colors.indigo.300}',
+          _enterprise: '{colors.emerald.800}'
+        }
       }
     },
     success: {
       value: {
-        base: '{colors.green.700}',
-        _light: '{colors.green.700}',
-        _dark: '{colors.green.400}',
+        base: '{colors.green.600}',
+        _light: '{colors.green.600}',
+        _dark: '{colors.green.500}',
         _enterprise: '{colors.emerald.700}'
       }
     },
-    highlight: {
-      value: {
-        base: '{colors.violet.700}',
-        _light: '{colors.violet.700}',
-        _dark: '{colors.violet.400}',
-        _enterprise: '{colors.orange.700}'
-      }
-    },
-    information: {
-      value: {
-        base: '{colors.indigo.700}',
-        _light: '{colors.indigo.700}',
-        _dark: '{colors.indigo.400}',
-        _enterprise: '{colors.indigo.600}'
+    warning: {
+      DEFAULT: {
+        value: {
+          base: '{colors.yellow.300}',
+          _light: '{colors.yellow.300}',
+          _dark: '{colors.yellow.300}',
+          _enterprise: '{colors.yellow.300}'
+        }
       }
     }
   },
-  // CHART SEMANTIC TOKENS
   chart: {
     cat01: {
       DEFAULT: {
@@ -1147,16 +1111,16 @@ export const colors = defineSemanticTokens.colors({
         value: {
           base: '{colors.neutral.400}',
           _light: '{colors.neutral.400}',
-          _dark: '{colors.neutral.300}',
+          _dark: '{colors.dark.600}',
           _enterprise: '{colors.neutral.400}'
         }
       },
       bold: {
         value: {
-          base: '{colors.neutral.600}',
-          _light: '{colors.neutral.600}',
-          _dark: '{colors.neutral.500}',
-          _enterprise: '{colors.slate.600}'
+          base: '{colors.neutral.500}',
+          _light: '{colors.neutral.500}',
+          _dark: '{colors.dark.400}',
+          _enterprise: '{colors.neutral.500}'
         }
       }
     },
@@ -1214,5 +1178,36 @@ export const colors = defineSemanticTokens.colors({
         }
       }
     }
+  },
+  nav: {
+    parent: {
+      deprecated: 'use `background.nav.parent` instead',
+      value: {
+        base: '#e7edf5',
+        _light: '#e7edf5',
+        _dark: '{colors.dark.100}',
+        _enterprise: '{colors.emerald.1000}'
+      }
+    },
+    stack: {
+      DEFAULT: {
+        deprecated: 'use `background.nav.stack` instead',
+        value: {
+          base: '{colors.neutral.100}',
+          _light: '{colors.neutral.100}',
+          _dark: '{colors.dark.DEFAULT}',
+          _enterprise: '{colors.neutral.100}'
+        }
+      },
+      hovered: {
+        deprecated: 'use `background.nav.stack.hovered` instead',
+        value: {
+          base: '#e7edf5',
+          _light: '#e7edf5',
+          _dark: '{colors.dark.100}',
+          _enterprise: '{colors.emerald.200}'
+        }
+      }
+    }
   }
 })