styles: settings extensions tweaks (#2173)

This commit is contained in:
Nahiyan Khan
2025-04-11 19:33:34 -04:00
committed by GitHub
parent 57e2973715
commit 33255cd554
5 changed files with 12 additions and 6 deletions

View File

@@ -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" />

View File

@@ -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 />

View File

@@ -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-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-bgStandard data-[state=unchecked]:bg-input'
: '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-white dark:bg-gray-900 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-black data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
)}
/>
</SwitchPrimitives.Root>

View File

@@ -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);

View File

@@ -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)',