Add text-brand semantic color tokens for theme flexibility (#1631)

.changeset/green-frogs-glow.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+feat: Add text-brand semantic color tokens for theme flexibility

packages/app/src/AuthPage.tsx

@@ -138,7 +138,7 @@ export default function AuthPage({ action }: { action: 'register' | 'login' }) {
               : isRegister
                 ? 'Register for '
                 : 'Login to '}
-            <span className="text-success fw-bold">HyperDX</span>
+            <span className="text-brand fw-bold">HyperDX</span>
           </div>
           {action === 'login' && (
             <div className="text-center mb-2 ">Welcome back!</div>

packages/app/src/DBDashboardImportPage.tsx

@@ -110,7 +110,7 @@ function FileSelection({
                 <Dropzone.Accept>
                   <IconUpload
                     size={52}
-                    color="var(--color-text-success)"
+                    color="var(--color-text-brand)"
                     stroke={1.5}
                   />
                 </Dropzone.Accept>

packages/app/src/Icon.tsx

@@ -10,7 +10,7 @@ export default function Icon({ size = 16 }: { size?: number }) {
       <g clipPath="url(#clip0_614_1164)">
         <path
           d="M256 0L477.703 128V384L256 512L34.2975 384V128L256 0Z"
-          fill="var(--color-bg-brand)"
+          fill="var(--color-text-brand)"
         />
         <path
           d="M311.365 84.4663C314.818 86.9946 316.431 92.1862 315.256 96.9926L284.313 223.563H341.409C344.836 223.563 347.936 226.127 349.295 230.086C350.655 234.046 350.014 238.644 347.665 241.786L210.211 425.598C207.472 429.26 203.089 430.062 199.635 427.534C196.182 425.005 194.569 419.814 195.744 415.007L226.686 288.437H169.591C166.164 288.437 163.064 285.873 161.705 281.914C160.345 277.954 160.986 273.356 163.335 270.214L300.789 86.4023C303.528 82.7403 307.911 81.938 311.365 84.4663Z"

packages/app/src/OnboardingChecklist.tsx

@@ -193,13 +193,13 @@ const OnboardingChecklist = ({
                     alignItems: 'center',
                     justifyContent: 'center',
                     border: step.isComplete
-                      ? '1px solid var(--color-text-success)'
+                      ? '1px solid var(--color-text-brand)'
                       : '1px solid var(--color-border)',
                     backgroundColor: step.isComplete
                       ? 'transparent'
                       : 'var(--color-bg-muted)',
                     color: step.isComplete
-                      ? 'var(--color-text-success)'
+                      ? 'var(--color-text-brand)'
                       : 'var(--color-text)',
                     flexShrink: 0,
                   }}

packages/app/src/components/DBInfraPanel.tsx

@@ -244,7 +244,7 @@ export default ({
                         add(new Date(timestamp), { days: 1 }),
                       ]}
                       anchorEvent={{
-                        label: <div className="text-success">This Event</div>,
+                        label: <div className="text-brand">This Event</div>,
                         timestamp: new Date(timestamp).toISOString(),
                       }}
                     />

packages/app/src/components/ExpandableRowTable.tsx

@@ -154,7 +154,7 @@ const ExpandButton = memo(
           type="button"
           className={cx(styles.expandButton, {
             [styles.expanded]: isExpanded,
-            'text-success': highlightedLineId === rowId,
+            'text-brand': highlightedLineId === rowId,
             'text-muted': highlightedLineId !== rowId,
           })}
           onClick={e => {

packages/app/src/components/InputLanguageSwitch.tsx

@@ -25,7 +25,7 @@ export default function InputLanguageSwitch({
         </Text>
       )}
       <Text
-        c={language === 'sql' ? 'var(--color-text-success)' : 'gray'}
+        c={language === 'sql' ? 'var(--color-text-brand)' : 'gray'}
         onClick={() => onLanguageChange('sql')}
         size="xs"
         role="button"
@@ -37,7 +37,7 @@ export default function InputLanguageSwitch({
         size="xs"
         role="button"
         fw={500}
-        c={language === 'lucene' ? 'var(--color-text-success)' : 'gray'}
+        c={language === 'lucene' ? 'var(--color-text-brand)' : 'gray'}
         onClick={() => onLanguageChange('lucene')}
       >
         Lucene

packages/app/src/components/TimePicker/TimePicker.tsx

@@ -223,7 +223,7 @@ const TimePickerComponent = ({
           data-testid="time-picker-input"
           leftSection={
             isLiveMode ? (
-              <IconBolt size={16} className="text-success" />
+              <IconBolt size={16} className="text-brand" />
             ) : (
               <IconCalendarFilled size={16} />
             )
@@ -231,7 +231,7 @@ const TimePickerComponent = ({
           styles={{
             input: {
               color: isLiveMode
-                ? 'var(--color-text-success)'
+                ? 'var(--color-text-brand)'
                 : 'var(--color-text)',
             },
           }}

packages/app/src/components/charts/DisplaySwitcher.tsx

@@ -30,7 +30,7 @@ function DisplaySwitcher<T extends string>({
             size="xs"
             me={2}
             className={cx({
-              'text-success': value === optionValue,
+              'text-brand': value === optionValue,
               'text-muted-hover': value !== optionValue,
             })}
             disabled={disabled}

packages/app/src/theme/semanticColorsGrouped.ts

@@ -14,7 +14,6 @@ export const semanticColorsGrouped = {
     'color-bg-success',
     'color-bg-danger',
     'color-bg-warning',
-    'color-bg-brand',
     'color-bg-modal',
     'color-bg-code',
     'color-bg-kbd',
@@ -30,6 +29,8 @@ export const semanticColorsGrouped = {
     'color-text-muted-hover',
     'color-text-success',
     'color-text-success-hover',
+    'color-text-brand',
+    'color-text-brand-hover',
     'color-text-danger',
   ],
   icons: ['color-icon-primary', 'color-icon-muted'],

packages/app/styles/SessionSubpanelV2.module.scss

@@ -59,7 +59,7 @@
   }
 
   .eventRowTitle {
-    color: var(--color-text-success);
+    color: var(--color-text-brand);
   }
 }
 

packages/app/styles/SessionsPage.module.scss

@@ -1,7 +1,7 @@
 .sessionCard {
   &:hover {
     .emailText {
-      color: var(--color-text-success);
+      color: var(--color-text-brand);
     }
   }
 }

packages/app/styles/SourceSelectControlled.module.scss

@@ -1,12 +1,12 @@
 .sourceSchemaPreviewButton {
   pointer-events: all;
   font-size: var(--mantine-font-size-xxs);
-  color: var(--color-text-success);
+  color: var(--color-text-brand);
   padding-inline: var(--mantine-spacing-xxxs);
   border-radius: var(--mantine-radius-xs);
 
   &:hover {
-    color: var(--color-text-success-hover);
+    color: var(--color-text-brand-hover);
     cursor: pointer;
   }
 }

packages/app/styles/_semantic-colors.scss

@@ -18,7 +18,6 @@
   --color-bg-success: var(--mantine-color-green-5);
   --color-bg-danger: var(--mantine-color-red-4);
   --color-bg-warning: var(--mantine-color-orange-5);
-  --color-bg-brand: #4ffa7a;
 
   /* Borders & Dividers */
   --color-border: var(--mantine-color-dark-5);
@@ -34,6 +33,8 @@
   --color-text-muted-hover: var(--mantine-color-dark-1);
   --color-text-success: var(--mantine-color-green-4);
   --color-text-success-hover: var(--mantine-color-green-3);
+  --color-text-brand: var(--mantine-color-green-4);
+  --color-text-brand-hover: var(--mantine-color-green-3);
   --color-text-danger: var(--mantine-color-red-3);
   --color-text-sidenav-link: var(--mantine-color-dark-0);
   --color-text-sidenav-link-active: var(--color-text-primary);
@@ -117,7 +118,6 @@
   --color-bg-success: var(--mantine-color-green-8);
   --color-bg-danger: var(--mantine-color-red-8);
   --color-bg-warning: var(--mantine-color-orange-8);
-  --color-bg-brand: var(--mantine-color-green-8);
 
   /* Borders & Dividers - inverted */
   --color-border: var(--mantine-color-gray-1);
@@ -133,6 +133,8 @@
   --color-text-muted-hover: var(--mantine-color-dark-9);
   --color-text-success: var(--mantine-color-green-8);
   --color-text-success-hover: var(--mantine-color-green-9);
+  --color-text-brand: var(--mantine-color-green-8);
+  --color-text-brand-hover: var(--mantine-color-green-9);
   --color-text-danger: var(--mantine-color-red-8);
   --color-text-sidenav-link: var(--mantine-color-dark-6);
   --color-text-sidenav-link-active: var(--mantine-color-green-9);

packages/app/styles/_utilities.scss

@@ -116,6 +116,19 @@
   }
 }
 
+.text-brand {
+  color: var(--color-text-brand) !important;
+}
+
+.text-brand-hover {
+  color: var(--color-text-brand);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-text-brand-hover);
+  }
+}
+
 .text-link {
   color: var(--color-text-primary) !important;
 }