From def7b9fe93f10c97a9b880694249b5f542e6761e Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Thu, 20 Aug 2026 07:11:01 -0400 Subject: [PATCH 1/2] apply shadcn preset --- package-lock.json | 17 +++--- packages/web/components.json | 2 +- packages/web/package.json | 5 +- packages/web/src/index.css | 111 ++++++++++++++++++----------------- 4 files changed, 69 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 02ade4d..c6924d0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1610,10 +1610,10 @@ "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==", "license": "MIT" }, - "node_modules/@fontsource-variable/noto-sans": { + "node_modules/@fontsource-variable/inter": { "version": "5.3.0", - "resolved": "https://registry.npmjs.org/@fontsource-variable/noto-sans/-/noto-sans-5.3.0.tgz", - "integrity": "sha512-e3ZuxzY9AL2psXPZlhwhnYrHUHv6PMoyK9MQ7croF0CUgURLqu9EMjW7q2FgVLwij1tjLsIHQrnwQ8aUcg4BiA==", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz", + "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==", "license": "OFL-1.1", "funding": { "url": "https://github.com/sponsors/ayuhito" @@ -12361,9 +12361,9 @@ "license": "ISC" }, "node_modules/shadcn": { - "version": "4.17.0", - "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.17.0.tgz", - "integrity": "sha512-kphndh72CD7mxLQ/thkbPVgfXpIjzPUllzvTWRJmU3sNGZc/WbOqzJ0FXbBGj6sqNiaGPiOLDQByy8FAtCuVUQ==", + "version": "4.18.0", + "resolved": "https://registry.npmjs.org/shadcn/-/shadcn-4.18.0.tgz", + "integrity": "sha512-tUFZgkYmfVNQVm3xX7lhSzOvDsp+O14ac5dwgXIr5mIsr79ISueb/Mu+ZtWMz0DH6v77u4eYyvbQ9TTMpSn3aw==", "dev": true, "license": "MIT", "dependencies": { @@ -14525,7 +14525,7 @@ "name": "@react-starter/web", "version": "1.8.0-alpha.1", "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", @@ -14537,6 +14537,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", @@ -14572,7 +14573,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" } diff --git a/packages/web/components.json b/packages/web/components.json index 7fc02f6..36d4657 100644 --- a/packages/web/components.json +++ b/packages/web/components.json @@ -6,7 +6,7 @@ "tailwind": { "config": "", "css": "src/index.css", - "baseColor": "neutral", + "baseColor": "mist", "cssVariables": true, "prefix": "" }, diff --git a/packages/web/package.json b/packages/web/package.json index ea42066..59cc91e 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -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", @@ -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", @@ -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" } diff --git a/packages/web/src/index.css b/packages/web/src/index.css index 9a129a1..3ba0f5f 100644 --- a/packages/web/src/index.css +++ b/packages/web/src/index.css @@ -1,25 +1,25 @@ @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); @@ -27,40 +27,40 @@ --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); @@ -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); @@ -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 { From ee8862f0b9c6254b0b4f385b3b4ece15fc98c8bd Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Thu, 20 Aug 2026 07:11:23 -0400 Subject: [PATCH 2/2] use default font color styles for ThemeToggle --- packages/web/src/common/components/Button/ThemeToggle.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/web/src/common/components/Button/ThemeToggle.tsx b/packages/web/src/common/components/Button/ThemeToggle.tsx index 5687163..3b54259 100644 --- a/packages/web/src/common/components/Button/ThemeToggle.tsx +++ b/packages/web/src/common/components/Button/ThemeToggle.tsx @@ -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'; @@ -20,7 +19,7 @@ const ThemeToggle = ({ className }: PropsWithClassName) => {