feat: Lighten dark mode and use slate instead of gray (#335)

namesakefyi · Jan 22, 2025 · 7281014 · 7281014
1 parent 2eefe42
commit 7281014
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 10 deletions.
diff --git a/src/components/app/AppSidebar/AppSidebar.tsx b/src/components/app/AppSidebar/AppSidebar.tsx
@@ -35,7 +35,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
 
   return (
     <div className="w-72 lg:w-80 xl:w-[22rem] flex flex-col shrink-0 sticky top-0 h-screen overflow-y-auto border-r border-gray-dim">
-      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-gray-app z-20">
+      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-gray-1 dark:bg-graydark-2 z-20">
         <Link href={{ to: "/" }} className="p-1 -m-1">
           <Logo className="h-5 lg:h-[1.35rem]" />
         </Link>
@@ -58,7 +58,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
         </div>
       </div>
       <div className="app-padding flex-1">{children}</div>
-      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
+      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-1 dark:bg-graydark-2">
         <Authenticated>
           <MenuTrigger>
             <Button

diff --git a/src/components/app/PageHeader/PageHeader.tsx b/src/components/app/PageHeader/PageHeader.tsx
@@ -19,7 +19,7 @@ export const PageHeader = ({
   return (
     <header
       className={twMerge(
-        "h-header flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
+        "h-header flex bg-gray-1 dark:bg-graydark-2 shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
         className,
       )}
     >

diff --git a/src/components/common/Nav/Nav.tsx b/src/components/common/Nav/Nav.tsx
@@ -14,7 +14,7 @@ interface NavItemProps extends LinkProps {
 
 const navItemStyles = tv({
   extend: focusRing,
-  base: "rounded-md no-underline flex items-center text-sm lg:text-base gap-1.5 hover:bg-gray-3/50 dark:hover:bg-graydark-3/50 h-8 lg:h-9 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
+  base: "rounded-md no-underline flex items-center text-sm lg:text-base gap-1.5 hover:bg-gray-3 dark:hover:bg-graydark-3 h-8 lg:h-9 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
   variants: {
     isActive: {
       true: "bg-gray-3 hover:bg-gray-3 dark:bg-graydark-3 dark:hover:bg-graydark-3",

diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
@@ -34,7 +34,7 @@ export function Tabs(props: TabsProps) {
 }
 
 const tabListStyles = tv({
-  base: "grid bg-gray-3 dark:bg-gray-app rounded-lg p-1",
+  base: "grid bg-gray-3 dark:bg-graydark-3 rounded-lg p-1",
   variants: {
     orientation: {
       horizontal: "grid-flow-col auto-cols-fr",

diff --git a/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx b/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx
@@ -135,7 +135,7 @@ export const EditQuestTimeRequiredModal = ({
 
   return (
     <Modal isOpen={open}>
-      <Form onSubmit={handleSubmit}>
+      <Form onSubmit={handleSubmit} className="w-full">
         <ModalHeader title="Edit time required" />
         {timeInput && (
           <TimeRequiredInput timeRequired={timeInput} onChange={setTimeInput} />

diff --git a/src/routes/_authenticated/_home.tsx b/src/routes/_authenticated/_home.tsx
@@ -117,7 +117,7 @@ function IndexRoute() {
 
     return (
       <AppSidebar>
-        <div className="flex items-center mb-4 bg-gray-app z-10">
+        <div className="flex items-center mb-4 z-10">
           <ProgressBar
             label="Quest progress"
             value={completedQuests}

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -15,7 +15,7 @@
     @apply text-base lg:text-lg;
 
     a {
-      @apply underline underline-offset-2 decoration-gray-9 dark:decoration-graydark-9 hover:decoration-inherit;
+      @apply underline underline-offset-2 hover:decoration-inherit;
     }
 
     *:not(li) + * {
@@ -108,8 +108,8 @@
 }
 
 body {
-  @apply bg-gray-app;
   color-scheme: dark light;
+  @apply bg-gray-1 dark:bg-graydark-2;
 }
 
 body,

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -12,7 +12,12 @@ export default {
     tailwindcssReactAriaComponents,
     tailwindcssAnimate,
     tailwindcssAriaAttributes,
-    tailwindcssRadixColors,
+    tailwindcssRadixColors({
+      exclude: ["mauve", "sage", "olive", "sand"],
+      aliases: {
+        slate: "gray",
+      },
+    }),
     tailwindcssContainerQueries,
   ],
 } satisfies Config;