styles: settings extensions tweaks (#2173)

ui/desktop/src/components/settings_v2/extensions/ExtensionsSection.tsx

@@ -153,7 +153,7 @@ export default function ExtensionsSection({ deepLinkConfig, showEnvVars }: Exten
 
         <div className="flex gap-4 pt-4 w-full">
           <Button
-            className="flex items-center gap-2 justify-center text-white dark:text-textSubtle bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
+            className="flex items-center gap-2 justify-center text-white dark:text-black bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
             onClick={() => setIsAddModalOpen(true)}
           >
             <Plus className="h-4 w-4" />

ui/desktop/src/components/settings_v2/models/subcomponents/AddModelButton.tsx

@@ -14,7 +14,7 @@ export const AddModelButton = ({ setView }: AddModelButtonProps) => {
   return (
     <>
       <Button
-        className="flex items-center gap-2 justify-center text-white dark:text-textSubtle bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
+        className="flex items-center gap-2 justify-center text-white dark:text-black bg-bgAppInverse hover:bg-bgStandardInverse [&>svg]:!size-4"
         onClick={() => setIsAddModelModalOpen(true)}
       >
         <ArrowLeftRight />

ui/desktop/src/components/ui/switch.tsx

@@ -12,8 +12,8 @@ export const Switch = React.forwardRef<
     className={cn(
       'peer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
       variant === 'default'
-        ? 'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input'
+        ? 'data-[state=checked]:bg-bgStandard data-[state=unchecked]:bg-input'
-        : 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
+        : 'data-[state=checked]:bg-black dark:data-[state=checked]:bg-white data-[state=unchecked]:bg-bgStandard dark:data-[state=unchecked]:bg-[#333333]',
       className
     )}
     {...props}
@@ -23,8 +23,8 @@ export const Switch = React.forwardRef<
       className={cn(
         'pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform',
         variant === 'default'
-          ? 'bg-background data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          ? 'bg-bgProminent data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-          : 'bg-white dark:bg-gray-900 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
+          : 'bg-white dark:bg-black data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
       )}
     />
   </SwitchPrimitives.Root>

ui/desktop/src/styles/main.css

@@ -99,7 +99,9 @@
     --background-standard: var(--grey-90);
     --background-subtle: var(--grey-95);
     --background-app-inverse: var(--constant-black);
+    --background-subtle-inverse: var(--dark-grey-15);
     --background-standard-inverse: var(--dark-grey-25);
+    --background-prominent-inverse: var(--dark-grey-40);
 
     --border-divider: var(--grey-90);
     --border-inverse: var(--constant-white);
@@ -128,6 +130,8 @@
       --background-standard: var(--dark-grey-25);
       --background-subtle: var(--dark-grey-15);
       --background-app-inverse: var(--constant-white);
+      --background-subtle-inverse: var(--grey-95);
+      --background-standard-inverse: var(--grey-90);
       --background-prominent-inverse: var(--grey-80);
 
       --border-divider: var(--dark-grey-25);

ui/desktop/tailwind.config.ts

@@ -55,7 +55,9 @@ export default {
         bgStandard: 'var(--background-standard)',
         bgProminent: 'var(--background-prominent)',
         bgAppInverse: 'var(--background-app-inverse)',
+        bgSubtleInverse: 'var(--background-subtle-inverse)',
         bgStandardInverse: 'var(--background-standard-inverse)',
+        bgProminentInverse: 'var(--background-prominent-inverse)',
 
         borderSubtle: 'var(--border-subtle)',
         borderStandard: 'var(--border-standard)',