From 28b03cea19dab585944e116faacd99cb1fd08900 Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Fri, 23 Jan 2026 08:03:18 -0600 Subject: [PATCH 1/4] replace feature flag with local storage value --- .../app/src/components/theme/theme-provider.tsx | 16 ++++++++++------ packages/web/app/src/components/ui/user-menu.tsx | 3 ++- .../web/app/src/env/frontend-public-variables.ts | 1 - packages/web/app/src/env/frontend.ts | 9 --------- 4 files changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/web/app/src/components/theme/theme-provider.tsx b/packages/web/app/src/components/theme/theme-provider.tsx index dc97323e7b5..6d7bd820d3e 100644 --- a/packages/web/app/src/components/theme/theme-provider.tsx +++ b/packages/web/app/src/components/theme/theme-provider.tsx @@ -1,9 +1,13 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'; -import { env } from '@/env/frontend'; import { useLocalStorage } from '@/lib/hooks'; const STORAGE_KEY = 'hive-theme'; -const isThemeSwitcherEnabled = env.featureFlags.themeSwitcher; +const TEMP_THEME_SWITCHER_KEY = 'hive-temp-theme-switcher'; + +export function isThemeSwitcherEnabled(): boolean { + if (typeof window === 'undefined') return false; + return localStorage.getItem(TEMP_THEME_SWITCHER_KEY) === 'true'; +} export type Theme = 'light' | 'dark' | 'system'; export type ResolvedTheme = 'light' | 'dark'; @@ -33,8 +37,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) { const [storedTheme, setStoredTheme] = useLocalStorage(STORAGE_KEY, 'dark'); const [systemTheme, setSystemTheme] = useState(getSystemTheme); - // When feature flag is disabled, always use dark mode regardless of stored value - const theme: Theme = isThemeSwitcherEnabled + // When theme switcher is disabled, always use dark mode regardless of stored value + const theme: Theme = isThemeSwitcherEnabled() ? ((storedTheme === 'light' || storedTheme === 'dark' || storedTheme === 'system' ? storedTheme : 'system') as Theme) @@ -46,9 +50,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) { setStoredTheme(newTheme); }; - // Listen for system theme changes (only when feature is enabled) + // Listen for system theme changes (only when theme switcher is enabled) useEffect(() => { - if (!isThemeSwitcherEnabled) return; + if (!isThemeSwitcherEnabled()) return; const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); diff --git a/packages/web/app/src/components/ui/user-menu.tsx b/packages/web/app/src/components/ui/user-menu.tsx index 8cf8931a9c7..f6bc22c76dd 100644 --- a/packages/web/app/src/components/ui/user-menu.tsx +++ b/packages/web/app/src/components/ui/user-menu.tsx @@ -2,6 +2,7 @@ import cookies from 'js-cookie'; import { LifeBuoyIcon } from 'lucide-react'; import { FaGithub, FaGoogle, FaKey, FaUsersSlash } from 'react-icons/fa'; import { useMutation } from 'urql'; +import { isThemeSwitcherEnabled } from '@/components/theme/theme-provider'; import { ThemeSwitcher } from '@/components/theme/theme-switcher'; import { Button } from '@/components/ui/button'; import { @@ -206,7 +207,7 @@ export function UserMenu(props: { Profile settings - {env.featureFlags.themeSwitcher ? ( + {isThemeSwitcherEnabled() ? ( <> diff --git a/packages/web/app/src/env/frontend-public-variables.ts b/packages/web/app/src/env/frontend-public-variables.ts index 0cbd3791b6d..b2931568379 100644 --- a/packages/web/app/src/env/frontend-public-variables.ts +++ b/packages/web/app/src/env/frontend-public-variables.ts @@ -23,7 +23,6 @@ export const ALLOWED_ENVIRONMENT_VARIABLES = [ 'SENTRY', 'SENTRY_DSN', 'MEMBER_ROLES_DEADLINE', - 'FEATURE_FLAGS_THEME_SWITCHER_ENABLED', ] as const; export type AllowedEnvironmentVariables = (typeof ALLOWED_ENVIRONMENT_VARIABLES)[number]; diff --git a/packages/web/app/src/env/frontend.ts b/packages/web/app/src/env/frontend.ts index 7bf90dc767c..5da57ff6188 100644 --- a/packages/web/app/src/env/frontend.ts +++ b/packages/web/app/src/env/frontend.ts @@ -96,10 +96,6 @@ const MigrationsSchema = protectedObject({ ), }); -const FeatureFlagsSchema = protectedObject({ - FEATURE_FLAGS_THEME_SWITCHER_ENABLED: enabledOrDisabled, -}); - const envValues = getAllEnv(); function buildConfig() { @@ -112,7 +108,6 @@ function buildConfig() { authOkta: AuthOktaConfigSchema.safeParse(envValues), authOktaMultiTenant: AuthOktaMultiTenantSchema.safeParse(envValues), migrations: MigrationsSchema.safeParse(envValues), - featureFlags: FeatureFlagsSchema.safeParse(envValues), }; const environmentErrors: Array = []; @@ -144,7 +139,6 @@ function buildConfig() { const authOkta = extractConfig(configs.authOkta); const authOktaMultiTenant = extractConfig(configs.authOktaMultiTenant); const migrations = extractConfig(configs.migrations); - const featureFlags = extractConfig(configs.featureFlags); return { appBaseUrl: base.APP_BASE_URL.replace(/\/$/, ''), @@ -175,9 +169,6 @@ function buildConfig() { migrations: { member_roles_deadline: migrations.MEMBER_ROLES_DEADLINE ?? null, }, - featureFlags: { - themeSwitcher: featureFlags.FEATURE_FLAGS_THEME_SWITCHER_ENABLED === '1', - }, } as const; } From 3518a3c941a779fc00572f2e31e67782bcdeeada Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Fri, 23 Jan 2026 09:06:12 -0600 Subject: [PATCH 2/4] replace experimental.classRegex with classFunctions --- .vscode/settings.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 54017f31478..9d4b4615059 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -36,12 +36,7 @@ "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, "git.mergeEditor": false, - "tailwindCSS.experimental.classRegex": [ - ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], - ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], - ["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"], - ["clsx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] - ], + "tailwindCSS.classFunctions": ["cva", "cx", "cn", "clsx"], "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, From 9f249c94cacca38bb391099c69aa05f51646e098 Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Fri, 23 Jan 2026 09:14:10 -0600 Subject: [PATCH 3/4] remove dark: and conflicting light classes --- .../web/app/src/components/common/index.tsx | 19 +++++++------------ .../target/history/errors-and-changes.tsx | 4 ++-- .../src/components/target/insights/Stats.tsx | 10 +++------- .../target/proposals/change-detail.tsx | 4 ++-- packages/web/app/src/components/ui/alert.tsx | 3 +-- .../web/app/src/components/ui/callout.tsx | 11 ++++------- .../web/app/src/components/v2/accordion.tsx | 6 +++--- .../app/src/components/v2/radix-button.tsx | 6 +++--- .../app/src/components/v2/radix-select.tsx | 11 ++++------- packages/web/app/src/components/v2/slider.tsx | 2 +- .../laboratory/components/graphql-type.tsx | 4 ++-- .../components/laboratory/builder.tsx | 6 +++--- .../components/laboratory/collections.tsx | 4 ++-- .../components/laboratory/history.tsx | 2 +- .../components/laboratory/operation.tsx | 2 +- .../src/laboratory/components/ui/badge.tsx | 4 ++-- .../src/laboratory/components/ui/button.tsx | 8 ++++---- .../src/laboratory/components/ui/checkbox.tsx | 2 +- .../laboratory/components/ui/context-menu.tsx | 2 +- .../components/ui/dropdown-menu.tsx | 2 +- .../src/laboratory/components/ui/field.tsx | 2 +- .../src/laboratory/components/ui/input.tsx | 4 ++-- .../src/laboratory/components/ui/select.tsx | 2 +- .../src/laboratory/components/ui/switch.tsx | 4 ++-- .../app/src/laboratory/components/ui/tabs.tsx | 2 +- .../src/laboratory/components/ui/toggle.tsx | 2 +- packages/web/app/src/pages/auth.tsx | 2 +- .../app/src/pages/target-checks-single.tsx | 6 ++---- 28 files changed, 59 insertions(+), 77 deletions(-) diff --git a/packages/web/app/src/components/common/index.tsx b/packages/web/app/src/components/common/index.tsx index 0ce19569e0e..00acfa9e181 100644 --- a/packages/web/app/src/components/common/index.tsx +++ b/packages/web/app/src/components/common/index.tsx @@ -5,7 +5,7 @@ export function Label({ className, children, ...props }: ComponentProps<'span'>) return (
-

{title}

- {subtitle} +

{title}

+ {subtitle}
{actions}
{noPadding ? ( children ) : ( -
+
{children}
)} @@ -59,17 +54,17 @@ export const Page = ({ export const Section = { Title: ({ className, children, ...props }: ComponentProps<'h3'>): ReactElement => ( -

+

{children}

), BigTitle: ({ className, children, ...props }: ComponentProps<'h2'>): ReactElement => ( -

+

{children}

), Subtitle: ({ className, children, ...props }: ComponentProps<'div'>): ReactElement => ( -
+
{children}
), diff --git a/packages/web/app/src/components/target/history/errors-and-changes.tsx b/packages/web/app/src/components/target/history/errors-and-changes.tsx index 4f1e68fdd96..15dc4991f3e 100644 --- a/packages/web/app/src/components/target/history/errors-and-changes.tsx +++ b/packages/web/app/src/components/target/history/errors-and-changes.tsx @@ -155,7 +155,7 @@ export function ChangesBlock( ): ReactElement | null { return (
-

{props.title}

+

{props.title}

{props.changesWithUsage?.map((change, key) => (
- {labelize(change.message)} + {labelize(change.message)} {change.isSafeBasedOnUsage && ( {' '} diff --git a/packages/web/app/src/components/target/insights/Stats.tsx b/packages/web/app/src/components/target/insights/Stats.tsx index d53b81bce85..99670b04f40 100644 --- a/packages/web/app/src/components/target/insights/Stats.tsx +++ b/packages/web/app/src/components/target/insights/Stats.tsx @@ -215,9 +215,7 @@ function SuccessRateStats({ return ( - - Success rate - + Success rate @@ -242,9 +240,7 @@ function FailureRateStats({ return ( - - Failure rate - + Failure rate @@ -1114,7 +1110,7 @@ export function OperationsStats({ : 'success'; return ( -
+
diff --git a/packages/web/app/src/components/target/proposals/change-detail.tsx b/packages/web/app/src/components/target/proposals/change-detail.tsx index 7f168aaaef5..17f27b63658 100644 --- a/packages/web/app/src/components/target/proposals/change-detail.tsx +++ b/packages/web/app/src/components/target/proposals/change-detail.tsx @@ -22,7 +22,7 @@ export function ProposalChangeDetail(props: { - +
{labelize(props.change.message)}
{props.icon}
@@ -49,7 +49,7 @@ export function ChangeBlock(props: { return ( props.changes.length !== 0 && ( <> -

+

{props.title} {props.info && }

diff --git a/packages/web/app/src/components/ui/alert.tsx b/packages/web/app/src/components/ui/alert.tsx index d72ef834604..3e9506fe62d 100644 --- a/packages/web/app/src/components/ui/alert.tsx +++ b/packages/web/app/src/components/ui/alert.tsx @@ -8,8 +8,7 @@ const alertVariants = cva( variants: { variant: { default: 'bg-background text-foreground', - destructive: - 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive', + destructive: 'text-destructive border-destructive [&>svg]:text-destructive', }, }, defaultVariants: { diff --git a/packages/web/app/src/components/ui/callout.tsx b/packages/web/app/src/components/ui/callout.tsx index c9c65f61b66..8043c3dc32b 100644 --- a/packages/web/app/src/components/ui/callout.tsx +++ b/packages/web/app/src/components/ui/callout.tsx @@ -20,13 +20,10 @@ type CalloutType = keyof typeof TypeToEmoji; const calloutVariants = cva('mt-6 flex items-center gap-4 rounded-lg border px-4 py-2', { variants: { type: { - default: - 'border-orange-100 bg-orange-50 text-orange-800 dark:border-orange-400/30 dark:bg-orange-400/20 dark:text-orange-300', - error: - 'border-red-200 bg-red-100 text-red-900 dark:border-red-200/30 dark:bg-red-900/30 dark:text-red-200', - info: 'border-blue-200 bg-blue-100 text-blue-900 dark:border-blue-200/30 dark:bg-blue-900/30 dark:text-blue-200', - warning: - 'border-yellow-100 bg-yellow-50 text-yellow-900 dark:border-yellow-200/30 dark:bg-yellow-700/30 dark:text-yellow-200', + default: ' border-orange-400/30 bg-orange-400/20 text-orange-300', + error: ' border-red-200/30 bg-red-900/30 text-red-200', + info: ' border-blue-200/30 bg-blue-900/30 text-blue-200', + warning: ' border-yellow-200/30 bg-yellow-700/30 text-yellow-200', }, }, defaultVariants: { diff --git a/packages/web/app/src/components/v2/accordion.tsx b/packages/web/app/src/components/v2/accordion.tsx index f5c5f554cf3..fc1d8194b02 100644 --- a/packages/web/app/src/components/v2/accordion.tsx +++ b/packages/web/app/src/components/v2/accordion.tsx @@ -74,10 +74,10 @@ function Header({ triggerClassName, )} > - {children} + {children} @@ -95,7 +95,7 @@ function Content({ }): ReactElement { return ( -
{children}
+
{children}
 ); } diff --git a/packages/web/app/src/components/v2/radix-button.tsx b/packages/web/app/src/components/v2/radix-button.tsx index b3b3a7fb673..6f3a869136a 100644 --- a/packages/web/app/src/components/v2/radix-button.tsx +++ b/packages/web/app/src/components/v2/radix-button.tsx @@ -9,12 +9,12 @@ const Button = forwardRef>( {...props} className={clsx( 'inline-flex select-none items-center justify-center rounded-md px-4 py-2 text-sm font-medium', - 'bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-900', + 'bg-gray-800 text-gray-100 hover:bg-gray-900', 'focus-within:ring', // Register all radix states 'group', - 'dark:data-[state=open]:bg-gray-900', - 'dark:data-[state=on]:bg-gray-900', + 'data-[state=open]:bg-gray-900', + 'data-[state=on]:bg-gray-900', className, )} > diff --git a/packages/web/app/src/components/v2/radix-select.tsx b/packages/web/app/src/components/v2/radix-select.tsx index 01ed0ce8abd..35c5e7f79ff 100644 --- a/packages/web/app/src/components/v2/radix-select.tsx +++ b/packages/web/app/src/components/v2/radix-select.tsx @@ -51,11 +51,8 @@ export function RadixSelect({ )} - - + + @@ -66,7 +63,7 @@ export function RadixSelect({ key={value} value={value} className={clsx( - 'relative flex items-center rounded-md px-8 py-2 text-sm font-medium text-gray-700 focus:bg-gray-100 dark:text-gray-300 dark:focus:bg-gray-900', + 'relative flex items-center rounded-md px-8 py-2 text-sm font-medium text-gray-300 focus:bg-gray-900', 'data-disabled:opacity-50', 'cursor-pointer select-none focus:outline-none', )} @@ -79,7 +76,7 @@ export function RadixSelect({ ))} - + diff --git a/packages/web/app/src/components/v2/slider.tsx b/packages/web/app/src/components/v2/slider.tsx index f82d8106d51..49edf53ebf0 100644 --- a/packages/web/app/src/components/v2/slider.tsx +++ b/packages/web/app/src/components/v2/slider.tsx @@ -5,7 +5,7 @@ import * as S from '@radix-ui/react-slider'; export function Slider(props: S.SliderProps): ReactElement { return ( - + diff --git a/packages/web/app/src/laboratory/components/graphql-type.tsx b/packages/web/app/src/laboratory/components/graphql-type.tsx index 2e4dbaf5877..cfb04958d5d 100644 --- a/packages/web/app/src/laboratory/components/graphql-type.tsx +++ b/packages/web/app/src/laboratory/components/graphql-type.tsx @@ -31,8 +31,8 @@ export const GraphQLType = (props: { } if (props.type instanceof GraphQLScalarType || props.type instanceof GraphQLEnumType) { - return {props.type.name}; + return {props.type.name}; } - return {props.type.name}; + return {props.type.name}; }; diff --git a/packages/web/app/src/laboratory/components/laboratory/builder.tsx b/packages/web/app/src/laboratory/components/laboratory/builder.tsx index 587cd79def6..d51b17ce46c 100644 --- a/packages/web/app/src/laboratory/components/laboratory/builder.tsx +++ b/packages/web/app/src/laboratory/components/laboratory/builder.tsx @@ -83,7 +83,7 @@ export const BuilderArgument = (props: { } }} /> - + {props.field.name}: ); @@ -153,7 +153,7 @@ export const BuilderScalarField = (props: { size="sm" >
-
+
-
+
{ key={operation.name} variant="ghost" className={cn('group w-full justify-start gap-2 px-2', { - 'bg-accent dark:bg-accent/50': isActive, + 'bg-accent/50': isActive, })} size="sm" onClick={() => { @@ -219,7 +219,7 @@ export const CollectionsSearchResult = (props: { items: CollectionsSearchResultI key={operation.name} variant="ghost" className={cn('group w-full justify-start gap-2 px-2', { - 'bg-accent dark:bg-accent/50': isActive, + 'bg-accent/50': isActive, })} size="sm" onClick={() => { diff --git a/packages/web/app/src/laboratory/components/laboratory/history.tsx b/packages/web/app/src/laboratory/components/laboratory/history.tsx index d43e57f32ef..0b73ceb00be 100644 --- a/packages/web/app/src/laboratory/components/laboratory/history.tsx +++ b/packages/web/app/src/laboratory/components/laboratory/history.tsx @@ -55,7 +55,7 @@ export const HistoryOperationItem = (props: { historyItem: LaboratoryHistoryRequ variant="ghost" size="sm" className={cn('bg-background group sticky top-0 w-full justify-start px-2', { - 'bg-accent dark:bg-accent/50': isActive, + 'bg-accent/50': isActive, })} onClick={() => { setActiveTab( diff --git a/packages/web/app/src/laboratory/components/laboratory/operation.tsx b/packages/web/app/src/laboratory/components/laboratory/operation.tsx index 294bda504aa..a3b3b5ac173 100644 --- a/packages/web/app/src/laboratory/components/laboratory/operation.tsx +++ b/packages/web/app/src/laboratory/components/laboratory/operation.tsx @@ -640,7 +640,7 @@ export const Query = (props: { size="sm" variant="default" pressed={preflight?.enabled} - className="bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-6 rounded-sm border shadow-sm data-[state=on]:bg-transparent" + className="hover:text-accent-foreground bg-input/30 border-input hover:bg-input/50 h-6 rounded-sm border shadow-sm data-[state=on]:bg-transparent" onClick={() => { setPreflight({ ...(preflight ?? { script: '', enabled: true }), diff --git a/packages/web/app/src/laboratory/components/ui/badge.tsx b/packages/web/app/src/laboratory/components/ui/badge.tsx index 2106463af44..db5fb665834 100644 --- a/packages/web/app/src/laboratory/components/ui/badge.tsx +++ b/packages/web/app/src/laboratory/components/ui/badge.tsx @@ -3,7 +3,7 @@ import { cn } from '@/laboratory/lib/utils'; import { Slot } from '@radix-ui/react-slot'; const badgeVariants = cva( - 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', + 'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { @@ -11,7 +11,7 @@ const badgeVariants = cva( secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: - 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', + 'border-transparent text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/40 bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, diff --git a/packages/web/app/src/laboratory/components/ui/button.tsx b/packages/web/app/src/laboratory/components/ui/button.tsx index 95b158c7fe4..1488de9da12 100644 --- a/packages/web/app/src/laboratory/components/ui/button.tsx +++ b/packages/web/app/src/laboratory/components/ui/button.tsx @@ -3,17 +3,17 @@ import { cn } from '@/laboratory/lib/utils'; import { Slot } from '@radix-ui/react-slot'; const buttonVariants = cva( - "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", + "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: - 'bg-destructive !text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', + '!text-white hover:bg-destructive/90 focus-visible:ring-destructive/40 bg-destructive/60', outline: - 'border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', + 'border shadow-sm hover:text-accent-foreground bg-input/30 border-input hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', - ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', + ghost: 'hover:text-accent-foreground hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { diff --git a/packages/web/app/src/laboratory/components/ui/checkbox.tsx b/packages/web/app/src/laboratory/components/ui/checkbox.tsx index c1655b66db5..a8620e9ec06 100644 --- a/packages/web/app/src/laboratory/components/ui/checkbox.tsx +++ b/packages/web/app/src/laboratory/components/ui/checkbox.tsx @@ -7,7 +7,7 @@ function Checkbox({ className, ...props }: React.ComponentProps) className={cn( 'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50', 'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4', - 'has-[>[data-state=checked]]:bg-primary/5 has-[>[data-state=checked]]:border-primary dark:has-[>[data-state=checked]]:bg-primary/10', + 'has-[>[data-state=checked]]:border-primary has-[>[data-state=checked]]:bg-primary/10', className, )} {...props} diff --git a/packages/web/app/src/laboratory/components/ui/input.tsx b/packages/web/app/src/laboratory/components/ui/input.tsx index f15678d2780..5e07f33db7b 100644 --- a/packages/web/app/src/laboratory/components/ui/input.tsx +++ b/packages/web/app/src/laboratory/components/ui/input.tsx @@ -6,9 +6,9 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) { type={type} data-slot="input" className={cn( - 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-sm outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', + 'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground bg-input/30 border-input h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-sm outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', - 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', + 'aria-invalid:ring-destructive/40 aria-invalid:border-destructive', className, )} {...props} diff --git a/packages/web/app/src/laboratory/components/ui/select.tsx b/packages/web/app/src/laboratory/components/ui/select.tsx index 7ac5a55f887..7a6dd7d5706 100644 --- a/packages/web/app/src/laboratory/components/ui/select.tsx +++ b/packages/web/app/src/laboratory/components/ui/select.tsx @@ -27,7 +27,7 @@ function SelectTrigger({ data-slot="select-trigger" data-size={size} className={cn( - "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", + "border-input data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-input/30 hover:bg-input/50 flex w-fit items-center justify-between gap-2 whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className, )} {...props} diff --git a/packages/web/app/src/laboratory/components/ui/switch.tsx b/packages/web/app/src/laboratory/components/ui/switch.tsx index 3a6f57d4efd..10b1a2d7355 100644 --- a/packages/web/app/src/laboratory/components/ui/switch.tsx +++ b/packages/web/app/src/laboratory/components/ui/switch.tsx @@ -6,7 +6,7 @@ function Switch({ className, ...props }: React.ComponentProps diff --git a/packages/web/app/src/laboratory/components/ui/tabs.tsx b/packages/web/app/src/laboratory/components/ui/tabs.tsx index 2a8fa41a436..24183d584ba 100644 --- a/packages/web/app/src/laboratory/components/ui/tabs.tsx +++ b/packages/web/app/src/laboratory/components/ui/tabs.tsx @@ -29,7 +29,7 @@ function TabsTrigger({ className, ...props }: React.ComponentProps ) : (
-
+
diff --git a/packages/web/app/src/pages/target-checks-single.tsx b/packages/web/app/src/pages/target-checks-single.tsx index 60fdd43721a..8d4ee757173 100644 --- a/packages/web/app/src/pages/target-checks-single.tsx +++ b/packages/web/app/src/pages/target-checks-single.tsx @@ -202,16 +202,14 @@ const PolicyBlock = (props: { const policies = useFragment(SchemaPolicyEditor_PolicyWarningsFragment, props.policies); return (
-

{props.title}

+

{props.title}

    {policies.edges.map((edge, key) => (
  • - - {labelize(edge.node.message)} - + {labelize(edge.node.message)}
    • ))}
From 1d1af85986abdf8d2af91070afee83cf2ac2dd26 Mon Sep 17 00:00:00 2001 From: Jonathan Brennan Date: Fri, 23 Jan 2026 09:29:18 -0600 Subject: [PATCH 4/4] force dark mode --- packages/web/app/src/components/theme/theme-provider.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/web/app/src/components/theme/theme-provider.tsx b/packages/web/app/src/components/theme/theme-provider.tsx index 6d7bd820d3e..7478c79086f 100644 --- a/packages/web/app/src/components/theme/theme-provider.tsx +++ b/packages/web/app/src/components/theme/theme-provider.tsx @@ -66,7 +66,9 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) { // Apply theme to document useEffect(() => { - applyTheme(resolvedTheme); + // TODO: we're forcing dark mode here, remove when color palette work is complete + // applyTheme(resolvedTheme); + applyTheme('dark'); }, [resolvedTheme]); const value = useMemo(() => ({ theme, setTheme, resolvedTheme }), [theme, resolvedTheme]);