feat: added new semantic tokens

hirosystems · Jan 24, 2025 · be1bca2 · be1bca2
1 parent 8d9ab57
commit be1bca2
Showing 1 changed file with 43 additions and 1 deletion.
diff --git a/src/ui/theme/semanticTokens.ts b/src/ui/theme/semanticTokens.ts
@@ -1,4 +1,4 @@
-export const SEMANTIC_TOKENS = {
+export const CURRENT_SEMANTIC_TOKENS = {
   colors: {
     brand: { value: '#FC6432' },
     borderPrimary: {
@@ -25,6 +25,9 @@ export const SEMANTIC_TOKENS = {
     surfaceHighlight: {
       value: { base: '{colors.slate.150}', _dark: '{colors.slate.900}' },
     },
+    surfaceTertiary: {
+      value: { base: '{colors.neutral.sand-50}', _dark: '{colors.black}' },
+    },
     text: {
       value: { base: '{colors.slate.900}', _dark: '{colors.slate.50}' },
     },
@@ -86,6 +89,27 @@ export const SEMANTIC_TOKENS = {
       },
     },
     navbar: {
+      logo: {
+        icon: {
+          value: { base: '{colors.neutral.sand-50}', _dark: '{colors.neutral.sand-1000}' },
+        },
+        bg: {
+          value: { base: '{colors.neutral.sand-1000}', _dark: '{colors.neutral.sand-100}' },
+        },
+      },
+      menu: {
+        bg: {
+          value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-900}' },
+        },
+        menuItem: {
+          bg: {
+            value: { base: '{colors.neutral.sand-50}', _dark: '{colors.black}' },
+          },
+        },
+      },
+      listIconHoverBg: {
+        value: { base: '{colors.neutral.sand-600}', _dark: '{colors.neutral.sand-700}' },
+      },
       // this is the same as the time filter
       networkLabelBadge: {
         value: { base: '{colors.purple.600}', _dark: '{colors.purple.300}' },
@@ -215,3 +239,21 @@ export const SEMANTIC_TOKENS = {
     },
   },
 };
+
+export const NEW_SEMANTIC_TOKENS = {
+  colors: {
+    newBorderSecondary: {
+      value: { base: '{colors.neutral.sand-200}', _dark: '{colors.neutral.sand-700}' },
+    },
+    iconPrimary: {
+      value: { base: '{colors.black}', _dark: '{colors.neutral.sand-100}' },
+    },
+  },
+};
+
+export const SEMANTIC_TOKENS = {
+  colors: {
+    ...CURRENT_SEMANTIC_TOKENS.colors,
+    ...NEW_SEMANTIC_TOKENS.colors,
+  },
+};