Skip to content

187 Apply shadcn preset #188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mwarman merged 2 commits into from
Aug 20, 2026
Merged

187 Apply shadcn preset #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
def7b9f
apply shadcn preset
mwarman Aug 20, 2026
ee8862f
use default font color styles for ThemeToggle
mwarman Aug 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion packages/web/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"tailwind": {
"config": "",
"css": "src/index.css",
"baseColor": "neutral",
"baseColor": "mist",
"cssVariables": true,
"prefix": ""
},
Expand Down
5 changes: 3 additions & 2 deletions packages/web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"test:coverage": "vitest run --coverage --silent passed-only"
},
"dependencies": {
"@fontsource-variable/noto-sans": "5.3.0",
"@fontsource-variable/inter": "5.3.0",
"@fortawesome/fontawesome-svg-core": "7.3.1",
"@fortawesome/free-regular-svg-icons": "7.3.1",
"@fortawesome/free-solid-svg-icons": "7.3.1",
Expand All @@ -27,6 +27,7 @@
"@tanstack/react-query-devtools": "5.101.4",
"@tanstack/react-table": "8.21.3",
"axios": "1.19.0",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"dayjs": "1.11.21",
"i18next": "26.3.6",
Expand Down Expand Up @@ -62,7 +63,7 @@
"@vitest/ui": "4.1.10",
"jsdom": "29.1.1",
"msw": "2.15.0",
"shadcn": "4.17.0",
"shadcn": "4.18.0",
"storybook": "10.5.7",
"vite": "8.2.1"
}
Expand Down
5 changes: 2 additions & 3 deletions packages/web/src/common/components/Button/ThemeToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { PropsWithClassName } from '@/common/utils/types';
import { useSetSettings } from '@/common/api/useSetSettings';
import { useSettings } from '@/common/hooks/useSettings';
import { cn } from '@/common/utils/css';
import Button from './Button';
import FAIcon from '@/common/components/Icon/FAIcon';

Expand All @@ -20,7 +19,7 @@ const ThemeToggle = ({ className }: PropsWithClassName) => {
<Button
variant="text"
size="icon"
className={cn('text-primary', className)}
className={className}
title="Dark Mode"
onClick={() => setSettings({ theme: 'dark' })}
testId="button-theme-dark"
Expand All @@ -31,7 +30,7 @@ const ThemeToggle = ({ className }: PropsWithClassName) => {
<Button
variant="text"
size="icon"
className={cn('text-primary', className)}
className={className}
title="Light Mode"
onClick={() => setSettings({ theme: 'light' })}
testId="button-theme-light"
Expand Down
111 changes: 56 additions & 55 deletions packages/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,66 @@
@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';
@import '@fontsource-variable/noto-sans';
@import '@fontsource-variable/inter';

@custom-variant dark (&:is(.dark *));

:root {
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--foreground: oklch(0.148 0.004 228.8);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--card-foreground: oklch(0.148 0.004 228.8);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--popover-foreground: oklch(0.148 0.004 228.8);
--primary: oklch(0.488 0.243 264.376);
--primary-foreground: oklch(0.97 0.014 254.604);
--secondary: oklch(0.967 0.001 286.375);
--secondary-foreground: oklch(0.21 0.006 285.885);
--muted: oklch(0.963 0.002 197.1);
--muted-foreground: oklch(0.56 0.021 213.5);
--accent: oklch(0.963 0.002 197.1);
--accent-foreground: oklch(0.218 0.008 223.9);
--destructive: oklch(0.577 0.245 27.325);
--info: oklch(0.922 0 0 / 90%);
--info-foreground: oklch(0.205 0 0);
--success: oklch(0.448 0.119 151.328 / 90%);
--success-foreground: oklch(1 0 0);
--warning: oklch(0.666 0.179 58.318);
--warning-foreground: oklch(0.205 0 0);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
--border: oklch(0.925 0.005 214.3);
--input: oklch(0.925 0.005 214.3);
--ring: oklch(0.723 0.014 214.4);
--chart-1: oklch(0.879 0.169 91.605);
--chart-2: oklch(0.769 0.188 70.08);
--chart-3: oklch(0.666 0.179 58.318);
--chart-4: oklch(0.555 0.163 48.998);
--chart-5: oklch(0.473 0.137 46.201);
--radius: 0.625rem;
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
--sidebar: oklch(0.987 0.002 197.1);
--sidebar-foreground: oklch(0.148 0.004 228.8);
--sidebar-primary: oklch(0.546 0.245 262.881);
--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
--sidebar-accent: oklch(0.963 0.002 197.1);
--sidebar-accent-foreground: oklch(0.218 0.008 223.9);
--sidebar-border: oklch(0.925 0.005 214.3);
--sidebar-ring: oklch(0.723 0.014 214.4);
}

.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--background: oklch(0.148 0.004 228.8);
--foreground: oklch(0.987 0.002 197.1);
--card: oklch(0.218 0.008 223.9);
--card-foreground: oklch(0.987 0.002 197.1);
--popover: oklch(0.218 0.008 223.9);
--popover-foreground: oklch(0.987 0.002 197.1);
--primary: oklch(0.424 0.199 265.638);
--primary-foreground: oklch(0.97 0.014 254.604);
--secondary: oklch(0.274 0.006 286.033);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--muted: oklch(0.275 0.011 216.9);
--muted-foreground: oklch(0.723 0.014 214.4);
--accent: oklch(0.275 0.011 216.9);
--accent-foreground: oklch(0.987 0.002 197.1);
--destructive: oklch(0.704 0.191 22.216);
--info: oklch(0.922 0 0 / 90%);
--info-foreground: oklch(0.205 0 0);
Expand All @@ -70,24 +70,24 @@
--warning-foreground: oklch(0.205 0 0);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.809 0.105 251.813);
--chart-2: oklch(0.623 0.214 259.815);
--chart-3: oklch(0.546 0.245 262.881);
--chart-4: oklch(0.488 0.243 264.376);
--chart-5: oklch(0.424 0.199 265.638);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--ring: oklch(0.56 0.021 213.5);
--chart-1: oklch(0.879 0.169 91.605);
--chart-2: oklch(0.769 0.188 70.08);
--chart-3: oklch(0.666 0.179 58.318);
--chart-4: oklch(0.555 0.163 48.998);
--chart-5: oklch(0.473 0.137 46.201);
--sidebar: oklch(0.218 0.008 223.9);
--sidebar-foreground: oklch(0.987 0.002 197.1);
--sidebar-primary: oklch(0.623 0.214 259.815);
--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
--sidebar-accent: oklch(0.275 0.011 216.9);
--sidebar-accent-foreground: oklch(0.987 0.002 197.1);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
--sidebar-ring: oklch(0.56 0.021 213.5);
}

@theme inline {
--font-sans: 'Noto Sans Variable', sans-serif;
--font-sans: 'Inter Variable', sans-serif;
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
Expand Down Expand Up @@ -132,6 +132,7 @@
--radius-2xl: calc(var(--radius) * 1.8);
--radius-3xl: calc(var(--radius) * 2.2);
--radius-4xl: calc(var(--radius) * 2.6);
--font-heading: var(--font-sans);
}

@layer base {
Expand Down