refactor: update colors in tailwind config 💨

apps/admin-dashboard/app/routes/_dashboard.applications.tsx

@@ -14,7 +14,7 @@ import { z } from 'zod';
 
 import { Application, ApplicationStatus } from '@oyster/types';
 import {
-  Color,
+  AccentColor,
   Dashboard,
   Dropdown,
   Pagination,
@@ -161,9 +161,9 @@ function ApplicationsTable() {
     {
       displayName: 'Status',
       render: (application) => {
-        const StatusColor: Record<ApplicationStatus, Color> = {
+        const StatusColor: Record<ApplicationStatus, AccentColor> = {
           accepted: 'lime-100',
-          pending: 'gold-100',
+          pending: 'amber-100',
           rejected: 'red-100',
         };
 

apps/admin-dashboard/app/tailwind.css

@@ -11,7 +11,7 @@ select {
 
 a:focus-visible,
 button:focus-visible {
-  outline-color: var(--color-primary);
+  outline-color: theme('colors.primary');
   outline-offset: 1px;
   outline-style: solid;
   outline-width: 1px;

apps/member-profile/app/routes/_profile.home.tsx

@@ -257,7 +257,7 @@ export default function HomeLayout() {
 
       {(showOnboardingCard || showSwagCard) && (
         <>
-          <div className="@[1500px]:grid-cols-3 @[1000px]:grid-cols-2 grid grid-cols-1 items-start gap-4">
+          <div className="grid grid-cols-1 items-start gap-4 @[1000px]:grid-cols-2 @[1500px]:grid-cols-3">
             {showSwagCard && <ClaimSwagPackCard />}
             {showOnboardingCard && <OnboardingSessionCard />}
           </div>
@@ -266,12 +266,12 @@ export default function HomeLayout() {
         </>
       )}
 
-      <div className="@[1500px]:grid-cols-3 @[900px]:grid-cols-2 grid grid-cols-1 items-start gap-4">
+      <div className="grid grid-cols-1 items-start gap-4 @[900px]:grid-cols-2 @[1500px]:grid-cols-3">
         <Home.Column>
           <ActiveStatusCard />
 
-          <div className="@container gap-[inherit]">
-            <div className="@[420px]:grid-cols-2 grid grid-cols-1 gap-[inherit]">
+          <div className="gap-[inherit] @container">
+            <div className="grid grid-cols-1 gap-[inherit] @[420px]:grid-cols-2">
               <MemberNumberCard />
               <TotalCommunityMemberCard />
               <EventsAttendedCard />
@@ -284,7 +284,7 @@ export default function HomeLayout() {
           <LeaderboardCard className="@[1500px]:hidden" />
         </Home.Column>
 
-        <Home.Column className="@[1500px]:flex hidden">
+        <Home.Column className="hidden @[1500px]:flex">
           <LeaderboardCard />
         </Home.Column>
 
@@ -328,9 +328,7 @@ function ActiveStatusCard() {
             <span
               className={cx(
                 'inline-block h-2 w-2 rounded-full align-middle',
-                thisWeekActiveStatus === 'active'
-                  ? 'bg-[var(--color-success)]'
-                  : 'bg-[var(--color-error)]'
+                thisWeekActiveStatus === 'active' ? 'bg-success' : 'bg-error'
               )}
             />{' '}
             {toTitleCase(thisWeekActiveStatus)}
@@ -345,8 +343,8 @@ function ActiveStatusCard() {
           <div className="grid w-fit grid-cols-8 gap-2">
             {statuses.map((status) => {
               const className = match(status.status)
-                .with('active', () => 'bg-[var(--color-success)]')
-                .with('inactive', () => 'bg-[var(--color-error)]')
+                .with('active', () => 'bg-success')
+                .with('inactive', () => 'bg-error')
                 .with(undefined, () => 'bg-gray-200')
                 .exhaustive();
 
@@ -715,7 +713,7 @@ function SocialItem({
   return (
     <li>
       <a href={href} target="_blank">
-        <Icon color="var(--color-primary)" size={28} />
+        <Icon className="text-primary" size={28} />
       </a>
     </li>
   );

apps/member-profile/app/routes/_profile.profile.emails.tsx

@@ -71,20 +71,14 @@ function EmailAddressSection() {
             <li
               className={cx(
                 'flex items-center justify-between rounded-lg border border-solid p-2',
-
-                email.primary
-                  ? 'border-[var(--color-gold)] bg-[var(--color-gold-100)]'
-                  : 'border-gray-200'
+                email.primary ? 'border-gold bg-gold-100' : 'border-gray-200'
               )}
               key={email.email}
             >
               <Text>{email.email}</Text>
 
               {email.primary && (
-                <Text
-                  className="font-medium uppercase text-[var(--color-gold)]"
-                  variant="sm"
-                >
+                <Text className="text-gold font-medium uppercase" variant="sm">
                   Primary
                 </Text>
               )}

apps/member-profile/app/tailwind.css

@@ -11,7 +11,7 @@ select {
 
 a:focus-visible,
 button:focus-visible {
-  outline-color: var(--color-primary);
+  outline-color: theme('colors.primary');
   outline-offset: 1px;
   outline-style: solid;
   outline-width: 1px;

config/tailwind/tailwind.config.js

@@ -1,3 +1,5 @@
+import colors from 'tailwindcss/colors';
+
 /** @type {import('tailwindcss').Config} */
 export const tailwindConfig = {
   content: [
@@ -8,7 +10,12 @@ export const tailwindConfig = {
   theme: {
     extend: {
       colors: {
-        primary: 'var(--color-primary)',
+        error: colors.red[600],
+        gold: '#fdb532',
+        'gold-100': '#fff7ea',
+        primary: '#348e87',
+        success: colors.green[600],
+        warning: colors.yellow[400],
       },
       keyframes: {
         'modal-animation': {

packages/ui/src/components/checkbox.tsx

@@ -1,7 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 import { Check as CheckIcon } from 'react-feather';
+import { match } from 'ts-pattern';
 
-import { ACCENT_COLORS, Color, ColorVariable } from '../utils/constants';
+import { ACCENT_COLORS, AccentColor } from '../utils/constants';
 import { cx } from '../utils/cx';
 
 type CheckboxProps = Pick<
@@ -15,7 +16,7 @@ type CheckboxProps = Pick<
   | 'required'
   | 'value'
 > & {
-  color?: Color;
+  color?: AccentColor | 'gold-100';
 };
 
 export const Checkbox = ({
@@ -25,10 +26,6 @@ export const Checkbox = ({
   readOnly,
   ...rest
 }: CheckboxProps) => {
-  const labelStyle = {
-    '--color': ColorVariable[color as Color],
-  } as React.CSSProperties;
-
   return (
     <div className="flex items-center">
       <input
@@ -47,8 +44,8 @@ export const Checkbox = ({
           'flex h-4 w-4 items-center justify-center rounded-[0.25rem] border-2 border-gray-300',
           'peer-hover:border-primary',
           'peer-focus:border-primary',
-          'peer-checked:bg-primary peer-checked:border-primary',
-          'peer-checked:disabled:bg-gray-500 peer-checked:disabled:border-gray-500'
+          'peer-checked:border-primary peer-checked:bg-primary',
+          'peer-checked:disabled:border-gray-500 peer-checked:disabled:bg-gray-500'
         )}
       >
         <CheckIcon className="h-4 w-4 text-white" />
@@ -57,10 +54,23 @@ export const Checkbox = ({
       <label
         className={cx(
           'ml-2 cursor-pointer text-sm',
-          color && 'rounded-full bg-[var(--color)] px-2'
+          color && 'rounded-full px-2',
+
+          match(color)
+            .with('amber-100', () => 'bg-amber-100')
+            .with('blue-100', () => 'bg-blue-100')
+            .with('cyan-100', () => 'bg-cyan-100')
+            .with('gold-100', () => 'bg-gold-100')
+            .with('green-100', () => 'bg-green-100')
+            .with('lime-100', () => 'bg-lime-100')
+            .with('orange-100', () => 'bg-orange-100')
+            .with('pink-100', () => 'bg-pink-100')
+            .with('purple-100', () => 'bg-purple-100')
+            .with('red-100', () => 'bg-red-100')
+            .with(undefined, () => undefined)
+            .exhaustive()
         )}
         htmlFor={id}
-        style={labelStyle}
       >
         {label}
       </label>

packages/ui/src/components/pill.tsx

@@ -38,15 +38,15 @@ export const Pill = ({ children, color, onCloseHref }: PillProps) => {
 
 export function getPillCn({ color, onCloseHref }: Omit<PillProps, 'children'>) {
   return cx(
-    'w-max rounded-full bg-[var(--background-color)] px-2 text-sm',
+    'w-max rounded-full px-2 text-sm',
 
     onCloseHref && 'flex items-center gap-1',
 
     match(color)
       .with('amber-100', () => 'bg-amber-100')
       .with('blue-100', () => 'bg-blue-100')
       .with('cyan-100', () => 'bg-cyan-100')
-      .with('gold-100', () => 'bg-[var(--color-gold-100)]')
+      .with('gold-100', () => 'bg-gold-100')
       .with('gray-100', () => 'bg-gray-100')
       .with('green-100', () => 'bg-green-100')
       .with('lime-100', () => 'bg-lime-100')

packages/ui/src/components/radio.tsx

@@ -1,6 +1,7 @@
 import React, { PropsWithChildren } from 'react';
+import { match } from 'ts-pattern';
 
-import { ACCENT_COLORS, Color, ColorVariable } from '../utils/constants';
+import { ACCENT_COLORS, AccentColor } from '../utils/constants';
 import { cx } from '../utils/cx';
 
 type RadioProps = Pick<
@@ -14,7 +15,7 @@ type RadioProps = Pick<
   | 'required'
   | 'value'
 > & {
-  color?: Color;
+  color?: AccentColor | 'primary';
 };
 
 export const Radio = ({
@@ -24,10 +25,6 @@ export const Radio = ({
   readOnly,
   ...rest
 }: RadioProps) => {
-  const style = {
-    '--color': ColorVariable[color],
-  } as React.CSSProperties;
-
   return (
     <div className="flex items-center">
       <input
@@ -46,17 +43,31 @@ export const Radio = ({
         className={cx(
           'flex h-4 w-4 items-center justify-center rounded-full border-2 border-gray-300 bg-inherit',
           'peer-hover:border-primary peer-focus:border-primary',
-          'peer-checked:bg-white peer-checked:border-primary',
+          'peer-checked:border-primary peer-checked:bg-white',
           'peer-checked:*:bg-primary'
         )}
       >
         <span className="h-[60%] w-[60%] rounded-full" />
       </div>
 
       <label
-        className="ml-2 cursor-pointer rounded-full bg-[var(--color)] px-2 text-sm"
+        className={cx(
+          'ml-2 cursor-pointer rounded-full px-2 text-sm',
+
+          match(color)
+            .with('amber-100', () => 'bg-amber-100')
+            .with('blue-100', () => 'bg-blue-100')
+            .with('cyan-100', () => 'bg-cyan-100')
+            .with('green-100', () => 'bg-green-100')
+            .with('lime-100', () => 'bg-lime-100')
+            .with('orange-100', () => 'bg-orange-100')
+            .with('pink-100', () => 'bg-pink-100')
+            .with('purple-100', () => 'bg-purple-100')
+            .with('red-100', () => 'bg-red-100')
+            .with('primary', () => 'bg-primary')
+            .exhaustive()
+        )}
         htmlFor={id}
-        style={style}
       >
         {label}
       </label>

packages/ui/src/components/spinner.tsx

@@ -1,10 +1,9 @@
 import { match } from 'ts-pattern';
 
-import { Color } from '../utils/constants';
 import { cx } from '../utils/cx';
 
 type SpinnerProps = {
-  color?: Extract<Color, 'error' | 'primary' | 'success'>;
+  color?: 'error' | 'primary' | 'success';
 };
 
 export function Spinner({ color = 'primary' }: SpinnerProps) {

packages/ui/src/components/toast.tsx

@@ -60,12 +60,12 @@ export function Toast({ message, type }: ToastProps): JSX.Element | null {
     >
       <div
         className={cx(
-          'relative box-border flex items-center justify-center rounded bg-[var(--background-color)] p-1',
+          'relative box-border flex items-center justify-center rounded p-1',
 
           match(type)
-            .with('error', () => 'bg-red-600')
-            .with('success', () => 'bg-green-600')
-            .with('warning', () => 'bg-yellow-400')
+            .with('error', () => 'bg-error')
+            .with('success', () => 'bg-success')
+            .with('warning', () => 'bg-warning')
             .exhaustive()
         )}
       >