Fix text input background color (#19190)

* convert podkit colors into css variables to handle dark mode automatically

* cleanup

---------

Co-authored-by: Filip Troníček <[email protected]>

Author: selfcontained

components/dashboard/src/components/forms/TextInputField.tsx

@@ -58,7 +58,14 @@ export const TextInput: FunctionComponent<TextInputProps> = memo(({ className, o
     return (
         <input
             // 7px top/bottom padding ensures height matches buttons (36px)
-            className={cn("py-[7px] w-full max-w-lg rounded-lg dark:text-[#A8A29E]", "text-sm", className)}
+            className={cn(
+                "py-[7px] w-full max-w-lg rounded-lg",
+                "text-pk-content-primary",
+                "bg-pk-surface-primary",
+                "border-pk-border-base",
+                "text-sm",
+                className,
+            )}
             onChange={handleChange}
             onBlur={handleBlur}
             {...props}

components/dashboard/src/components/podkit/switch/Switch.tsx

@@ -26,7 +26,7 @@ export const Switch = React.forwardRef<
                 // checked state colors
                 "data-[state=checked]:bg-kumquat-dark",
                 // unchecked state colors
-                "data-[state=unchecked]:bg-pk-surface-labels data-[state=unchecked]:dark:bg-pk-surface-labels-dark",
+                "data-[state=unchecked]:bg-pk-surface-labels",
                 className,
             )}
             {...props}
@@ -35,7 +35,7 @@ export const Switch = React.forwardRef<
             <SwitchPrimitives.Thumb
                 className={cn(
                     "pointer-events-none block h-[16px] w-[16px] rounded-full",
-                    "bg-pk-surface-primary dark:bg-pk-surface-primary-dark drop-shadow ring-0",
+                    "bg-pk-surface-primary drop-shadow ring-0",
                     // Positioning
                     "transition-transform data-[state=checked]:translate-x-[17px] data-[state=unchecked]:translate-x-[3px]",
                 )}

components/dashboard/src/index.css

@@ -9,6 +9,69 @@
 @tailwind utilities;
 
 @layer base {
+    /* Setup colors for different themes */
+    /* Using rgb color channels here to work well w/ tailwind classes */
+    /* https: //tailwindcss.com/docs/customizing-colors#using-css-variables */
+    :root {
+        /* Setup RGB color channel variables */
+        --black: 22 22 22; /* #161616 */
+        --white: 255 255 255; /* #FFFFFF */
+        --gray-900: 18 16 12; /* #12100C */
+        --gray-850: 21 19 16; /* #151310 */
+        --gray-800: 35 33 30; /* #23211E */
+        --gray-750: 44 43 40; /* #2C2B28 */
+        --gray-700: 81 79 77; /* #514F4D */
+        --gray-600: 86 84 81; /* #565451 */
+        --gray-500: 102 101 100; /* #666564 */
+        --gray-450: 153 151 149; /* #999795 */
+        --gray-400: 116 115 114; /* #747372 */
+        --gray-300: 218 218 218; /* #DADADA */
+        --gray-200: 236 231 229; /* #ECE7E5 */
+        --gray-100: 245 244 244; /* #F5F4F4 */
+        --gray-50: 249 249 249; /* #F9F9F9 */
+
+
+        /* Content */
+        --content-primary: var(--gray-900);
+        --content-secondary: var(--gray-600);
+        --content-tertiary: var(--gray-400);
+        --content-disabled: var(--gray-450);
+        --content-invert-primary: var(--gray-200);
+        --content-invert-secondary: var(--gray-300);
+
+        /* Surfaces */
+        --surface-primary: var(--white);
+        --surface-secondary: var(--gray-50);
+        --surface-tertiary: var(--gray-100);
+        --surface-labels: var(--gray-200);
+        --surface-invert: var(--gray-850);
+
+        /* Borders */
+        --border-base: var(--gray-200);
+    }
+
+    /* Dark mode color adjustments */
+    :root[class~="dark"] {
+        /* Content */
+        --content-primary: var(--gray-200);
+        --content-secondary: var(--gray-450);
+        --content-tertiary: var(--gray-500);
+        --content-disabled: var(--gray-600);
+        --content-invert-primary: var(--gray-900);
+        --content-invert-secondary: var(--gray-600);
+
+        /* Surfaces */
+        --surface-primary: var(--gray-850);
+        --surface-secondary: var(--gray-800);
+        --surface-tertiary: var(--gray-750);
+        --surface-labels: var(--gray-700);
+        --surface-invert: var(--gray-50);
+
+        /* Borders */
+        --border-base: var(--gray-700);
+    }
+
+
     html,
     body {
         @apply h-full;

components/dashboard/src/repositories/detail/variables/ConfigurationVariableList.tsx

@@ -62,7 +62,11 @@ export const ConfigurationVariableList = ({ configuration }: Props) => {
                     </TableHeader>
                     <TableBody>
                         {data.map((variable) => (
-                            <ConfigurationVariableItem configurationId={configuration.id} variable={variable} />
+                            <ConfigurationVariableItem
+                                key={variable.id}
+                                configurationId={configuration.id}
+                                variable={variable}
+                            />
                         ))}
                     </TableBody>
                 </Table>

components/dashboard/tailwind.config.js

@@ -7,6 +7,7 @@
 // tailwind.config.js
 const colors = require("tailwindcss/colors");
 
+// TODO: Can replace these w/ rgb(var(...)) references so colors are only defined in our main CSS file
 const podkitColors = {
     black: "#161616",
     white: "#FFFFFF",
@@ -52,30 +53,22 @@ module.exports = {
                 // Podkit colors - eventually we'll only use these colors
                 // Once migrated, we can remove the colors above and shift this up under theme directly instead of extend
                 "pk-content": {
-                    primary: podkitColors.gray["900"],
-                    "primary-dark": podkitColors.gray["200"],
-                    secondary: podkitColors.gray["600"],
-                    "secondary-dark": podkitColors.gray["450"],
-                    tertiary: podkitColors.gray["400"],
-                    "tertiary-dark": podkitColors.gray["500"],
-                    disabled: podkitColors.gray["450"],
-                    "disabled-dark": podkitColors.gray["600"],
-                    "invert-primary": podkitColors.gray["200"],
-                    "invert-primary-dark": podkitColors.gray["900"],
-                    "invert-secondary": podkitColors.gray["300"],
-                    "invert-secondary-dark": podkitColors.gray["600"],
+                    primary: "rgb(var(--content-primary) / <alpha-value>)",
+                    secondary: "rgb(var(--content-secondary) / <alpha-value>)",
+                    tertiary: "rgb(var(--content-tertiary) / <alpha-value>)",
+                    disabled: "rgb(var(--content-disabled) / <alpha-value>)",
+                    "invert-primary": "rgb(var(--content-invert-primary) / <alpha-value>)",
+                    "invert-secondary": "rgb(var(--content-invert-secondary) / <alpha-value>)",
                 },
                 "pk-surface": {
-                    primary: podkitColors.white,
-                    "primary-dark": podkitColors.gray["850"],
-                    secondary: podkitColors.gray["50"],
-                    "secondary-dark": podkitColors.gray["800"],
-                    tertiary: podkitColors.gray["100"],
-                    "tertiary-dark": podkitColors.gray["750"],
-                    labels: podkitColors.gray["200"],
-                    "labels-dark": podkitColors.gray["700"],
-                    invert: podkitColors.gray["850"],
-                    "invert-dark": podkitColors.gray["50"],
+                    primary: "rgb(var(--surface-primary) / <alpha-value>)",
+                    secondary: "rgb(var(--surface-secondary) / <alpha-value>)",
+                    tertiary: "rgb(var(--surface-tertiary) / <alpha-value>)",
+                    labels: "rgb(var(--surface-labels) / <alpha-value>)",
+                    invert: "rgb(var(--surface-invert) / <alpha-value>)",
+                },
+                "pk-border": {
+                    base: "rgb(var(--border-base) / <alpha-value>)",
                 },
             },
             container: {