refactor: delete the background that does not support dark mode (#383)

openlabs-dev · Sep 5, 2024 · ed6caf4 · ed6caf4
1 parent 45dec5f
commit ed6caf4
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 18 deletions.
diff --git 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
@@ -10,7 +10,7 @@ const inter = DM_Sans({
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="bg-gradient-to-tl from-white via-default-100 to-default-200">
+      <body>
         <RootProvider>{children}</RootProvider>
       </body>
     </html>

diff --git a/docs/components/banners/hero.tsx b/docs/components/banners/hero.tsx
@@ -9,7 +9,7 @@ export function Hero() {
       <div className="container px-4 md:px-6">
         <div className="flex flex-col items-center space-y-4 text-center">
           <div className="space-y-4">
-            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none text-foreground">
               A design system built
               {' '}
               <br />

diff --git a/docs/components/install-command.tsx b/docs/components/install-command.tsx
@@ -17,10 +17,10 @@ export default function InstallCommand() {
   }
 
   return (
-    <div className="flex items-center space-x-2 border rounded-medium p-1 max-w-md">
+    <div className="flex items-center space-x-2 border dark:border-default-300 rounded-medium p-1 max-w-md">
       <pre className="flex items-center gap-2 flex-grow px-3 py-2">
         <Terminal className="text-neutral-500" />
-        <code className="text-xs sm:text-sm text-neutral-500 dark:text-white">
+        <code className="text-xs sm:text-sm text-neutral-500">
           {installCommand}
         </code>
       </pre>

diff --git 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
@@ -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
@@ -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
@@ -10,7 +10,7 @@ import { cva } from 'class-variance-authority'
  *   // accordion elements
  * </Card>
  */
-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',