From ed6caf41cca577a8d798bbd17a0e7cbc274e853d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebasti=C3=A1n=20Garc=C3=ADa?= Date: Thu, 5 Sep 2024 09:58:15 -0500 Subject: [PATCH] refactor: delete the background that does not support dark mode (#383) --- docs/app/global.css | 9 +++++++++ docs/app/layout.tsx | 2 +- docs/components/banners/hero.tsx | 2 +- docs/components/install-command.tsx | 4 ++-- docs/tailwind.config.js | 2 +- src/plugins/colors/semantics.ts | 10 +++++----- src/plugins/components/button.ts | 14 +++++++------- src/plugins/components/card.ts | 2 +- 8 files changed, 27 insertions(+), 18 deletions(-) diff --git a/docs/app/global.css b/docs/app/global.css index b5c61c95..349b44de 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -1,3 +1,12 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + body { + @apply bg-background text-foreground; + font-feature-settings: + 'rlig' 1, + 'calt' 1; + } +} diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx index f5c9438a..a98dc10b 100644 --- a/docs/app/layout.tsx +++ b/docs/app/layout.tsx @@ -10,7 +10,7 @@ const inter = DM_Sans({ export default function Layout({ children }: { children: ReactNode }) { return ( - + {children} diff --git a/docs/components/banners/hero.tsx b/docs/components/banners/hero.tsx index f6238f94..f6b16ccc 100644 --- a/docs/components/banners/hero.tsx +++ b/docs/components/banners/hero.tsx @@ -9,7 +9,7 @@ export function Hero() {
-

+

A design system built {' '}
diff --git a/docs/components/install-command.tsx b/docs/components/install-command.tsx index 3106ee48..7e358ca4 100644 --- a/docs/components/install-command.tsx +++ b/docs/components/install-command.tsx @@ -17,10 +17,10 @@ export default function InstallCommand() { } return ( -
+ 
         
-        
+        
           {installCommand}
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js index 44ee0498..c9f4d639 100644 --- a/docs/tailwind.config.js +++ b/docs/tailwind.config.js @@ -12,5 +12,5 @@ export default { './node_modules/@openlite/ui/dist/**/*.{js,ts,tsx,mdx}', ], presets: [createPreset()], - plugins: [openui()], + plugins: [openui({ defaultTheme: 'light' })], } diff --git a/src/plugins/colors/semantics.ts b/src/plugins/colors/semantics.ts index b2db1534..d62d5d6f 100644 --- a/src/plugins/colors/semantics.ts +++ b/src/plugins/colors/semantics.ts @@ -28,8 +28,8 @@ export const themeColorsLight: ThemeColors = { ...base.light, default: { ...common.neutral, - foreground: '#FFFFFF', - DEFAULT: '#000000', + foreground: readableColor(common.neutral[300]), + DEFAULT: common.neutral[300], }, primary: { ...common.azure, @@ -56,9 +56,9 @@ export const themeColorsLight: ThemeColors = { export const themeColorsDark: ThemeColors = { ...base.dark, default: { - ...common.neutral, - foreground: '#000000', - DEFAULT: '#FFFFFF', + ...swapColorValues(common.neutral), + foreground: readableColor(common.neutral[700]), + DEFAULT: common.neutral[700], }, primary: { ...swapColorValues(common.azure), diff --git a/src/plugins/components/button.ts b/src/plugins/components/button.ts index 68efa5bc..9fce9d9a 100644 --- a/src/plugins/components/button.ts +++ b/src/plugins/components/button.ts @@ -15,17 +15,17 @@ export const button = cva( { variants: { variant: { - default: 'bg-default text-default-foreground hover:bg-default/90', - primary: 'bg-primary text-primary-foreground hover:bg-primary/90', - error: 'bg-error text-error-foreground hover:bg-error/80', - success: 'bg-success text-success-foreground hover:bg-success/80', - warn: 'bg-warn text-warn-foreground hover:bg-warn/80', - ghost: 'bg-transparent !shadow-none hover:bg-black/10', + default: 'bg-default text-default-foreground', + primary: 'bg-primary text-primary-foreground', + error: 'bg-error text-error-foreground', + success: 'bg-success text-success-foreground', + warn: 'bg-warn text-warn-foreground', + ghost: 'bg-transparent !shadow-none', link: 'underline-offset-4 hover:underline bg-transparent !shadow-none', }, outline: { none: 'border-0', - default: 'border border-default-300 bg-transparent text-foreground hover:bg-default-200', + default: 'border dark:border-default-700 bg-transparent text-foreground', primary: 'border border-primary bg-transparent text-foreground hover:text-primary-foreground hover:bg-primary', error: 'border border-error bg-transparent text-foreground hover:text-error-foreground hover:bg-error', success: 'border border-success bg-transparent text-foreground hover:text-success-foreground hover:bg-success', diff --git a/src/plugins/components/card.ts b/src/plugins/components/card.ts index ddf0c6c0..97264f35 100644 --- a/src/plugins/components/card.ts +++ b/src/plugins/components/card.ts @@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority' * // accordion elements * */ -export const card = cva('cursor-pointer flex border border-default-300 justify-between items-center', { +export const card = cva('cursor-pointer flex border justify-between items-center', { variants: { rounded: { none: 'rounded-none',