Dark Mode Updates (#92)

* chevron down icon fix hardcoded color * initial darkmode redesign * more darkmode for questionaire theme * deps: bump lucide icons and surveyjs * cleanup * surveyjs - revert changes to light theme * surveyjs - revert changes to light theme * tailwind colors: rename util-red to red * spelling Co-authored-by: Sarah Funkhouser <[email protected]> Signed-off-by: Brian Wigginton <[email protected]> * tw colors: reorder and comment --------- Signed-off-by: Brian Wigginton <[email protected]> Co-authored-by: Sarah Funkhouser <[email protected]>
theopenlane · Dec 4, 2024 · ba9f20b · ba9f20b
1 parent 4b869f7
commit ba9f20b
Show file tree

Hide file tree

Showing 25 changed files with 1,109 additions and 273 deletions.
diff --git a/apps/console/src/app/globals.css b/apps/console/src/app/globals.css
@@ -5,7 +5,7 @@
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  @apply text-firefly-950 dark:text-ziggurat-200 font-sans;
+  @apply text-neutral-950 dark:text-neutral-200 font-sans;
 }
 
 h4 {
@@ -16,9 +16,9 @@ h5 {
   @apply text-[1.313rem] tracking-[-0.033rem];
 }
 p {
-  @apply text-firefly-950/90 dark:text-ziggurat-200;
+  @apply text-neutral-800 dark:text-neutral-300;
 }
 
 p.red {
-  @apply text-util-red-500;
+  @apply text-red-500;
 }
diff --git a/apps/console/src/app/layout.tsx b/apps/console/src/app/layout.tsx
@@ -27,7 +27,7 @@ export default function RootLayout({
         </script>
       </head>
       <body
-        className={`${outfit.variable} ${mincho.variable} ${jetBrainsMono.variable} font-sans w-full h-full bg-ziggurat-100 overscroll-none dark:bg-oxford-blue-900`}
+        className={`${outfit.variable} ${mincho.variable} ${jetBrainsMono.variable} font-sans w-full h-full bg-ziggurat-100 overscroll-none dark:bg-glaucous-950`}
       >
         <SessionProvider>
           <Providers>{children}</Providers>

diff --git a/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx b/apps/console/src/components/pages/protected/questionnaire/questionnaire-editor.tsx
@@ -164,7 +164,7 @@ export default function CreateQuestionnaire(input: { templateId: string, existin
   }
 
   return (
-    <Panel className='flex h-full bg-ziggurat-100 dark:bg-oxford-blue-900 border-ziggurat-100 dark:border-oxford-blue-900 p-0'>
+    <Panel className='flex h-full bg-ziggurat-100 dark:bg-glaucous-950 border-ziggurat-100 dark:border-oxford-blue-900 p-0'>
       <SurveyCreatorComponent creator={creator} />
     </Panel>
   )

diff --git a/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx b/apps/console/src/components/pages/protected/questionnaire/theme-dark.tsx
diff --git a/apps/console/src/components/shared/header/header.styles.tsx b/apps/console/src/components/shared/header/header.styles.tsx
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 const headerStyles = tv({
   slots: {
     header:
-      'bg-ziggurat-100 text-firefly-950 fixed left-0 right-0 top-0 z-20 dark:bg-oxford-blue-900 dark:text-ziggurat-200',
+      'bg-ziggurat-100 text-firefly-950 fixed left-0 right-0 top-0 z-20 dark:bg-glaucous-950 dark:text-ziggurat-200',
     nav: 'flex h-20 items-center justify-between pl-6 pr-7',
     mobileSidebar: 'block md:!hidden',
     userNav: 'flex items-center gap-9',

diff --git a/apps/console/src/components/shared/loading/loading.styles.tsx b/apps/console/src/components/shared/loading/loading.styles.tsx
@@ -2,7 +2,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 
 const loadingStyles = tv({
   slots: {
-    loader: 'h-full w0full rounded bg-ziggurat-100 dark:bg-oxford-blue-900 animate-pulse',
+    loader: 'h-full w0full rounded bg-ziggurat-100 dark:bg-glaucous-950 animate-pulse',
   },
 })
 

diff --git a/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx b/apps/console/src/components/shared/organization-selector/organization-selector.styles.tsx
@@ -10,7 +10,7 @@ const organizationSelectorStyles = tv({
     dropdownContent: 'p-0',
     allOrganizationsLink:
       'flex items-center gap-2 py-5 px-6 border-t border-oxford-blue-200',
-    popoverContent: 'p-0 w-[400px] dark:bg-ziggurat-900',
+    popoverContent: 'p-0 w-[400px] dark:bg-glaucous-900',
     searchWrapper: 'py-5 px-6',
     orgWrapper:
       'transition-all duration-500 flex gap-3 items-center py-4 px-6 border-t border-oxford-blue-200 hover:bg-firefly-700 cursor-pointer relative',

diff --git a/apps/console/src/components/shared/organization-selector/organization-selector.tsx b/apps/console/src/components/shared/organization-selector/organization-selector.tsx
@@ -102,7 +102,7 @@ export const OrganizationSelector = () => {
     <div className={container()}>
       <Logo width={30} asIcon={true} />
       <div>
-        <div className={organizationLabel()}>Organization:</div>
+        <div className={organizationLabel()}>Organization</div>
         <Popover>
           <PopoverTrigger>
             <div className={organizationDropdown()}>

diff --git a/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx b/apps/console/src/components/shared/sidebar/sidebar-nav/sidebar-nav.styles.tsx
@@ -2,24 +2,23 @@ import { tv, type VariantProps } from 'tailwind-variants'
 
 const sidebarNavStyles = tv({
   slots: {
-    nav: 'space-y-1 bg-ziggurat-100 dark:bg-oxford-blue-900 h-screen relative overflow-y-auto overflow-x-visible pt-24 pb-8 tracking-tighter',
-    icon: 'h-5 w-5 text-java-400',
+    nav: 'space-y-1 bg-ziggurat-100 dark:bg-glaucous-950 h-screen relative overflow-y-auto overflow-x-visible pt-24 pb-8 tracking-tighter',
+    icon: 'h-5 w-5 text-glaucous-400',
     linkLabel:
       'font-normal absolute left-12 text-base text-nowrap duration-200',
     accordionTrigger:
       'group relative flex h-[2.2rem] justify-between px-4 py-2 text-base duration-200 hover:bg-muted hover:no-underline',
     link: 'font-sans px-4 py-2 group relative flex h-[2.2rem] justify-start items-center',
     accordionItem: 'border-none ',
     separator: '!my-4',
-    heading:
-      'text-firefly-950 font-sans px-4 py-2 uppercase font-bold tracking-[0.42px] text-sm',
+    heading: 'text-glaucous-950 font-sans px-4 py-2 uppercase font-bold tracking-[0.42px] text-sm',
     badgeCount:
       'flex relative ml-40 pt-px justify-center bg-aquamarine-400 text-[14px] font-semibold rounded-[6px] w-[22px] h-[22px] text-white',
   },
   variants: {
     isCurrent: {
       true: {
-        link: 'rounded-md bg-aquamarine-400 font-bold hover:bg-muted dark:bg-aquamarine-400 dark:text-firefly-950',
+        link: 'rounded-md bg-firefly-400 font-bold hover:bg-muted dark:bg-firefly-400 dark:text-glaucous-950',
         badgeCount:
           'flex relative ml-40 pt-px justify-center bg-ziggurat-100 dark:bg-oxford-blue-900 text-[14px] font-semibold rounded-[6px] w-[22px] h-[22px] text-firefly-950 dark:text-white',
       },

diff --git a/apps/console/src/components/shared/sidebar/sidebar.styles.tsx b/apps/console/src/components/shared/sidebar/sidebar.styles.tsx
@@ -2,10 +2,10 @@ import { tv, type VariantProps } from 'tailwind-variants'
 
 const sidebarStyles = tv({
   slots: {
-    nav: 'relative hidden h-screen border-oxford-blue-200 bg-ziggurat-100 text-firefly-950 border-oxford-blue-200 md:block w-[57px] dark:bg-oxford-blue-900 dark:border-oxford-blue-200 dark:text-ziggurat-200',
+    nav: 'relative hidden h-screen border-oxford-blue-200 bg-ziggurat-100 text-firefly-950 border-oxford-blue-200 md:block w-[57px] dark:bg-glaucous-950 dark:border-oxford-blue-200 dark:text-ziggurat-200',
     navInner: 'relative overflow-scroll',
     expandNav:
-      'absolute z-50 gap-1 flex items-center justify-center bg-ziggurat-100 -right-[58px] w-[58px] h-[42px] bottom-0 cursor-pointer rounded-tr-lg border border-oxford-blue-200 border-b-0 text-3xl text-java-400 dark:bg-oxford-blue-900 dark:border-oxford-blue-200',
+      'absolute z-50 gap-1 flex items-center justify-center bg-ziggurat-100 -right-[58px] w-[58px] h-[42px] bottom-0 cursor-pointer rounded-tr-lg border border-oxford-blue-200 border-b-0 text-3xl text-java-400 dark:bg-glaucous-950 dark:border-oxford-blue-200',
     expandNavIcon: 'rotate-180',
     sideNav:
       'text-background text-sm bg-oxford-blue-900 left-8 opacity-0 transition-all duration-300 group-hover:z-50 group-hover:ml-4 group-hover:rounded group-hover:bg-foreground group-hover:p-2 group-hover:opacity-100',

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -13,11 +13,11 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@repo/ui": "workspace:*",
-    "lucide-react": "^0.454.0",
+    "lucide-react": "^0.462.0",
     "react": "18.3.12",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.51.2",
-    "survey-react-ui": "^1.12.8",
+    "survey-react-ui": "^1.12.12",
     "survey-creator-react": "^1.12.8"
   },
   "devDependencies": {

diff --git a/packages/tailwind-config/tailwind.config.ts b/packages/tailwind-config/tailwind.config.ts
@@ -28,12 +28,12 @@ export const config: Omit<Config, 'content'> = {
         heading: '-0.038rem',
       },
       colors: {
-        aquamarine: { // bright green, button styles
+        aquamarine: {
           '50': '#e8fff9',
           '100': '#c8ffef',
           '200': '#96ffe4',
           '300': '#53ffdd',
-          '400': '#09f1c7', // button color
+          '400': '#09f1c7', // light: button color
           '500': '#00deb7',
           '600': '#00b696',
           '700': '#00927d',
@@ -42,45 +42,73 @@ export const config: Omit<Config, 'content'> = {
           '950': '#003531',
         },
         java: {
-            '50': '#f2fbfa',
-            '100': '#d3f4ef',
-            '200': '#a7e8df',
-            '300': '#74d4cc',
-            '400': '#59c1bb', // brand 2 from marketing site
-            '500': '#2d9f9a',
-            '600': '#227f7d',
-            '700': '#1f6666',
-            '800': '#1d5152',
-            '900': '#1c4545',
-            '950': '#0b2628',
+          '50': '#f2fbfa',
+          '100': '#d3f4ef',
+          '200': '#a7e8df',
+          '300': '#74d4cc',
+          '400': '#59c1bb', // marketing: brand 2 color
+          '500': '#2d9f9a',
+          '600': '#227f7d',
+          '700': '#1f6666',
+          '800': '#1d5152',
+          '900': '#1c4545',
+          '950': '#0b2628',
+        },
+        // dark green background from marketing site
+        firefly: {
+          '50': '#edfefd',
+          '100': '#d1fcfb',
+          '200': '#a9f8f7',
+          '300': '#6ef1f2', // button color
+          '400': '#2ce0e4',
+          '500': '#10c3ca',
+          '600': '#109daa',
+          '700': '#147d8a',
+          '800': '#1a6570',
+          '900': '#1a535f',
+          '950': '#082930', // light: text color
         },
         ziggurat: {
-            '50': '#f5f9fa',
-            '100': '#e9f1f5', // background color in light mode
-            '200': '#bdd9e1', // font color in dark mode
-            '300': '#a3cbd6',
-            '400': '#72b0be',
-            '500': '#5097a7',
-            '600': '#3d7b8c',
-            '700': '#336371',
-            '800': '#2d545f',
-            '900': '#2a4750', // background of panels/tables/etc. in dark mode
-            '950': '#1c2e35',
+          '50': '#f5f9fa',
+          '100': '#e9f1f5', // light: background color
+          '200': '#bdd9e1',
+          '300': '#a3cbd6',
+          '400': '#72b0be',
+          '500': '#5097a7',
+          '600': '#3d7b8c',
+          '700': '#336371',
+          '800': '#2d545f',
+          '900': '#2a4750',
+          '950': '#1c2e35',
+        },
+        'oxford-blue': {
+          '50': '#f2f7f9',
+          '100': '#dfeaee',
+          '200': '#c2d7df',
+          '300': '#98bac8',
+          '400': '#6694aa',
+          '500': '#4b788f',
+          '600': '#416379',
+          '700': '#395365',
+          '800': '#354755',
+          '900': '#303e4a', // dark: background color
+          '950': '#1c2630',
         },
-        firefly: { // dark green background from marketing site
-            '50': '#edfefd',
-            '100': '#d1fcfb',
-            '200': '#a9f8f7',
-            '300': '#6ef1f2',
-            '400': '#2ce0e4',
-            '500': '#10c3ca',
-            '600': '#109daa',
-            '700': '#147d8a',
-            '800': '#1a6570',
-            '900': '#1a535f',
-            '950': '#082930', // font color in light mode
+        glaucous: {
+          '50': '#E2E7EE',
+          '100': '#D1D9E5',
+          '200': '#B4C1D5',
+          '300': '#93A6C2',
+          '400': '#768EB2',
+          '500': '#5A76A0',
+          '600': '#4A6082',
+          '700': '#374862',
+          '800': '#273344',
+          '900': '#161D27', // dark: panel background color
+          '950': '#0D1117', // dark: background color
         },
-        'river-bed': { // icon font color
+        'river-bed': {
+          // icon font color
           '50': '#f4f6f7',
           '100': '#e3e8ea',
           '200': '#c9d2d8',
@@ -92,31 +120,44 @@ export const config: Omit<Config, 'content'> = {
           '800': '#3d444d',
           '900': '#363b43',
           '950': '#21252b',
-      },
-        'oxford-blue': {
-            '50': '#f2f7f9',
-            '100': '#dfeaee',
-            '200': '#c2d7df',
-            '300': '#98bac8',
-            '400': '#6694aa',
-            '500': '#4b788f',
-            '600': '#416379',
-            '700': '#395365',
-            '800': '#354755',
-            '900': '#303e4a', // background color in dark mode
-            '950': '#1c2630',
         },
-        'util-red': {
-          900: '#771D1D',
-          800: '#9B1C1C',
-          700: '#C81E1E',
-          600: '#E02424',
-          500: '#F05252',
-          400: '#F98080',
-          300: '#F8B4B4',
-          200: '#FBD5D5',
-          100: '#FDE8E8',
-          50: '#FDF2F2',
+        neutral: {
+          '50': '#f1f7f9',
+          '100': '#e1ecef',
+          '200': '#c5d7dd',
+          '300': '#aabec5', // dark: paragraph font color
+          '400': '#92a4aa',
+          '500': '#828a8c',
+          '600': '#6e6e6e',
+          '700': '#575757',
+          '800': '#3d3d3d', // light: paragraph font color
+          '900': '#242424',
+          '950': '#1a1a1a',
+        },
+        saffron: {
+          '50': '#FEFBF1',
+          '100': '#FDF5DD',
+          '200': '#FBEABC',
+          '300': '#F9E19F',
+          '400': '#F7D77D',
+          '500': '#F5CB5C',
+          '600': '#F1B91D',
+          '700': '#C0900C',
+          '800': '#7D5E08',
+          '900': '#3E2F04',
+          '950': '#221902',
+        },
+        red: {
+          '50': '#fdf2f2',
+          '100': '#fde8e8',
+          '200': '#fbd5d5',
+          '300': '#f8b4b4',
+          '400': '#f98080',
+          '500': '#f05252',
+          '600': '#e02424',
+          '700': '#c81e1e',
+          '800': '#9b1c1c',
+          '900': '#771d1d',
         },
       },
       fontFamily: {

diff --git a/packages/ui/src/avatar/avatar.styles.tsx b/packages/ui/src/avatar/avatar.styles.tsx
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 export const avatarStyles = tv({
   slots: {
     avatarImageWrap:
-      'relative flex h-11 w-11 shrink-0 overflow-hidden border-none rounded-md p-0',
+      'relative flex h-8 w-8 shrink-0 overflow-hidden border-none rounded-md p-0',
     avatarImage: 'aspect-square h-full w-full',
     avatarFallBack:
       'uppercase flex h-full w-full items-center justify-center rounded-md bg-aquamarine-400 text-white',

diff --git a/packages/ui/src/button/button.styles.tsx b/packages/ui/src/button/button.styles.tsx
@@ -14,7 +14,7 @@ export const buttonStyles = tv({
   },
   variants: {
     variant: {
-      aquamarine: '!bg-aquamarine-400 hover:!opacity-90',
+      aquamarine: 'bg-firefly-300 dark:bg-firefly-300 hover:!opacity-90',
       outline:
         'border-java-800 text-oxford-blue-800 dark:text-oxford-blue-100 dark:border-java-100 border hover:!opacity-90',
       outlineLight:
@@ -24,7 +24,7 @@ export const buttonStyles = tv({
       outlineInputPadding:
         'border-java-500 text-oxford-blue-800 mx-1 dark:text-oxford-blue-100 dark:border-java-100 border hover:!opacity-90',
       redOutline:
-        'border-util-red-500 text-util-red-500 border bg-white hover:!opacity-90 dark:border-util-red-500 dark:text-util-red-500',
+        'border-red-500 text-red-500 border bg-white hover:!opacity-90 dark:border-red-500 dark:text-red-500',
       white: {},
       success: 'flex-row-reverse !bg-aquamarine-600 hover:!opacity-90',
     },

diff --git a/packages/ui/src/dialog/dialog.styles.tsx b/packages/ui/src/dialog/dialog.styles.tsx
@@ -5,7 +5,7 @@ export const dialogStyles = tv({
     overlay:
       'text-left fixed inset-0 z-50 bg-java-900/70 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
     content:
-      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ziggurat-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-ziggurat-800 dark:bg-ziggurat-900',
+      'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-ziggurat-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-ziggurat-800 dark:bg-glaucous-900',
     close:
       'absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ziggurat-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-ziggurat-100 data-[state=open]:text-ziggurat-500 dark:ring-offset-ziggurat-950 dark:focus:ring-ziggurat-300 dark:data-[state=open]:bg-ziggurat-800 dark:data-[state=open]:text-ziggurat-400',
     closeIcon: 'h-4 w-4',

diff --git a/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx b/packages/ui/src/dropdown-menu/dropdown-menu.styles.tsx
@@ -10,7 +10,7 @@ export const dropdownMenuStyles = tv({
     subContent:
       'z-50 min-w-72 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
     menuContent:
-      'font-sans z-50 min-w-72 px-6 py-6 overflow-hidden rounded-md border border-oxford-blue-200 bg-white dark:bg-ziggurat-900 text-popover-foreground shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'font-sans z-50 min-w-72 px-6 py-6 overflow-hidden rounded-md border border-oxford-blue-200 bg-white dark:bg-glaucous-900 text-popover-foreground shadow-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
     menuItem:
       'relative flex cursor-default select-none items-center gap-3 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
     menuCheckboxItem:

diff --git a/packages/ui/src/form/form.styles.tsx b/packages/ui/src/form/form.styles.tsx
@@ -5,9 +5,9 @@ export const formStyles = tv({
     formItem: 'space-y-2',
     formLabelError: '',
     formDescription: 'text-sm',
-    formMessageIcon: 'text-util-red-400',
+    formMessageIcon: 'text-red-400',
     formMessage:
-      'text-util-red-500 rounded  p-[14px] bg-util-red-100 flex items-center gap-4 !mt-5',
+      'text-red-500 rounded  p-[14px] bg-red-100 flex items-center gap-4 !mt-5',
   },
 })
 

diff --git a/packages/ui/src/icons/chevron-down.tsx b/packages/ui/src/icons/chevron-down.tsx
@@ -10,7 +10,7 @@ export const ChevronDown = () => (
   >
     <path
       d="M1.175 0L0 1.175L5 6.175L10 1.175L8.82502 0L5 3.8167L1.175 0Z"
-      fill="white"
+      fill="currentcolor"
     />
   </svg>
 )
diff --git a/packages/ui/src/input/input.styles.tsx b/packages/ui/src/input/input.styles.tsx
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants'
 export const inputStyles = tv({
   slots: {
     input:
-      'flex h-12 w-full rounded-md border font-sans autofill:bg-white autofill:text-firefly-950 autofill:font-sans border-oxford-blue-200 bg-transparent px-3 py-none text-base transition-colors file:border-0 file:bg-transparent file:text-base file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-firefly-100 disabled:cursor-not-allowed disabled:opacity-50',
+      'flex h-12 w-full rounded-md border font-sans autofill:bg-white autofill:text-firefly-950 autofill:font-sans border-oxford-blue-200 bg-transparent px-3 py-none text-base transition-colors file:border-0 file:bg-transparent file:text-base file:font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-firefly-100 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder-ziggurat-400',
     inputWrapper: 'relative flex items-center',
     iconWrapper:
       'absolute z-20 text-firefly-500 top-1/2 -translate-y-1/2 right-4',