fix: theme integration (#640)

Author: ivan-dalmet

src/components/ui/checkbox.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
-const labelVariants = cva('flex items-start gap-2.5 text-primary', {
+const labelVariants = cva('flex items-start gap-2.5', {
  variants: {
  size: {
  default: 'text-sm',
@@ -19,7 +19,7 @@ const labelVariants = cva('flex items-start gap-2.5 text-primary', {
 });
 
 const checkboxVariants = cva(
- 'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20 aria-invalid:data-unchecked:border-destructive',
+ 'flex flex-none cursor-pointer items-center justify-center rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-unchecked:border aria-invalid:data-unchecked:border-destructive',
  {
  variants: {
  size: {

src/components/ui/local-switcher.tsx

@@ -39,14 +39,14 @@ export const LocalSwitcher = (props: { iconOnly?: boolean }) => {
  >
  <CheckIcon
  className={cn(
- 'mt-0.5 size-4 self-start',
+ 'mt-0.5 size-4 self-start text-current',
  i18n.language === language.key ? 'opacity-100' : 'opacity-0'
  )}
  />
  <span className="flex flex-col">
  <span>{t(`common:languages.values.${language.key}`)}</span>
  {language.key !== i18n.language && (
- <span className="text-xs text-muted-foreground">
+ <span className="text-xs opacity-60">
  {t(`common:languages.values.${language.key}`, {
  lng: language.key,
  })}

src/components/ui/radio-group.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 
 import { cn } from '@/lib/tailwind/utils';
 
-const labelVariants = cva('flex items-start gap-2.5 text-primary', {
+const labelVariants = cva('flex items-start gap-2.5', {
  variants: {
  size: {
  default: 'text-sm',
@@ -20,7 +20,7 @@ const labelVariants = cva('flex items-start gap-2.5 text-primary', {
 });
 
 const radioVariants = cva(
- 'flex flex-none cursor-pointer items-center justify-center rounded-full outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-indeterminate:border-primary/20 data-unchecked:border data-unchecked:border-primary/20 aria-invalid:data-unchecked:border-destructive',
+ 'flex flex-none cursor-pointer items-center justify-center rounded-full outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-muted-foreground disabled:opacity-20 aria-invalid:focus-visible:ring-destructive/50 data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border data-unchecked:border aria-invalid:data-unchecked:border-destructive',
  {
  variants: {
  size: {

src/components/ui/theme-switcher.tsx

@@ -68,7 +68,7 @@ export const ThemeSwitcher = (props: { iconOnly?: boolean }) => {
  >
  <CheckIcon
  className={cn(
- 'mt-0.5 size-4 self-start',
+ 'mt-0.5 size-4 self-start text-current',
  theme === item ? 'opacity-100' : 'opacity-0'
  )}
  />

src/routes/__root.tsx

@@ -105,6 +105,9 @@ function RootComponent() {
  <Providers>
  <Outlet />
  <TanStackDevtools
+ config={{
+ openHotkey: [], // Disable keyboard shortcut
+ }}
  plugins={[
  { name: 'Tanstack Query', render: <ReactQueryDevtoolsPanel /> },
  {