From c26de6ecfe243d5833de28e67e2100ebcb129dc9 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Thu, 4 Apr 2024 15:11:35 -0700 Subject: [PATCH] style: update dark mode and adjust accent colors --- src/lib/app.css | 19 ++++++------ src/lib/components/Blog/Article.svelte | 2 +- src/lib/components/ui/button/index.ts | 43 +++++++++++++------------- src/lib/styles/markdown.css | 8 ++--- src/routes/+page.svelte | 4 +-- 5 files changed, 36 insertions(+), 40 deletions(-) diff --git a/src/lib/app.css b/src/lib/app.css index bce41fd..90a3cfc 100644 --- a/src/lib/app.css +++ b/src/lib/app.css @@ -7,7 +7,7 @@ --background: 0 0% 93%; --foreground: 240 10% 3.9%; - --muted: 240 4.8% 95.9%; + --muted: 240 4.8% 90%; --muted-foreground: 240 3.8% 46.1%; --popover: 0 0% 96%; @@ -22,11 +22,11 @@ --primary: 240 5.9% 10%; --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; + --secondary: 240 4.8% 90%; + --secondary-foreground: 240 5.9% 12%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; + --accent: 240 4.8% 90%; + --accent-foreground: 240 5.9% 12%; --destructive: 0 72.2% 50.6%; --destructive-foreground: 0 0% 98%; @@ -39,16 +39,16 @@ } .dark { - --background: 240 10% 3.9%; + --background: 240 10% 7%; --foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; - --popover: 240 10% 3.9%; + --popover: 240 10% 6%; --popover-foreground: 0 0% 98%; - --card: 240 10% 3.9%; + --card: 240 10% 6%; --card-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; @@ -88,8 +88,7 @@ Cantarell, 'Open Sans', 'Helvetica Neue', - sans-serif, - 'Noto Color Emoji'; + sans-serif; } } diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte index 403bfa0..2b732d7 100644 --- a/src/lib/components/Blog/Article.svelte +++ b/src/lib/components/Blog/Article.svelte @@ -23,7 +23,7 @@ {/if} -
+
{@html content}
diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts index 96714df..86b4f18 100644 --- a/src/lib/components/ui/button/index.ts +++ b/src/lib/components/ui/button/index.ts @@ -1,35 +1,34 @@ -import type { Button as ButtonPrimitive } from "bits-ui"; -import { type VariantProps, tv } from "tailwind-variants"; -import Root from "./button.svelte"; +import type { Button as ButtonPrimitive } from 'bits-ui'; +import { type VariantProps, tv } from 'tailwind-variants'; +import Root from './button.svelte'; const buttonVariants = tv({ - base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", + base: 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50', variants: { variant: { - default: "bg-primary text-primary-foreground shadow hover:bg-primary/90", - destructive: - "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", + default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90', + destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', outline: - "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", - secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', + secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', + ghost: 'hover:bg-accent hover:text-accent-foreground', + link: 'text-primary underline-offset-4 hover:underline' }, size: { - default: "h-9 px-4 py-2", - sm: "h-8 rounded-md px-3 text-xs", - lg: "h-10 rounded-md px-8", - icon: "h-9 w-9", - }, + default: 'h-9 px-4 py-2', + sm: 'h-8 rounded-md px-3 text-xs', + lg: 'h-10 rounded-md px-8', + icon: 'h-9 w-9' + } }, defaultVariants: { - variant: "default", - size: "default", - }, + variant: 'default', + size: 'default' + } }); -type Variant = VariantProps["variant"]; -type Size = VariantProps["size"]; +type Variant = VariantProps['variant']; +type Size = VariantProps['size']; type Props = ButtonPrimitive.Props & { variant?: Variant; @@ -46,5 +45,5 @@ export { Root as Button, type Props as ButtonProps, type Events as ButtonEvents, - buttonVariants, + buttonVariants }; diff --git a/src/lib/styles/markdown.css b/src/lib/styles/markdown.css index 1554565..fcddbb7 100644 --- a/src/lib/styles/markdown.css +++ b/src/lib/styles/markdown.css @@ -29,7 +29,7 @@ } dl { - font-family: monospace, monospace; + font-family: monospace; } dl dt { font-weight: bold; @@ -87,7 +87,7 @@ padding: 1em; overflow: auto; font-size: 0.85rem; - font-family: monospace, monospace; + font-family: monospace; border: 1px dashed rgba(250, 100, 50, 0.5); } @@ -95,7 +95,7 @@ margin: 1em 0; } figure figcaption { - font-family: monospace, monospace; + font-family: monospace; font-size: 0.75em; text-align: center; color: grey; @@ -114,7 +114,7 @@ @apply border-l-red-600 bg-red-100 dark:bg-red-900 dark:text-red-100; } .markdown-alert-title { - @apply flex items-center font-medium text-xl; + @apply flex items-center font-medium text-xl font-sans; } .markdown-alert-caution > .markdown-alert-title { @apply text-red-600 fill-red-600 dark:text-red-100 dark:fill-red-100; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index ca4414e..a22b8a9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -88,9 +88,7 @@

- +