refactor(themes): rename 'primary' color to 'accent'

kripod · Jul 13, 2024 · 72d9e76 · 72d9e76
1 parent a8fb79a
commit 72d9e76
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/components/ButtonPrimary.tsx b/src/components/ButtonPrimary.tsx
@@ -25,7 +25,7 @@ export const ButtonPrimary = forwardRef(function ButtonPrimary(
         className,
         "font-medium",
         sentiment === "neutral" &&
-          "bg-ui-primary-600 text-ui-primary-50 active:bg-ui-primary-700",
+          "bg-ui-accent-600 text-ui-accent-50 active:bg-ui-accent-700",
         sentiment === "danger" &&
           "bg-ui-danger-600 text-ui-danger-50 active:bg-ui-danger-700",
       )}

diff --git a/src/components/ButtonSecondary.tsx b/src/components/ButtonSecondary.tsx
@@ -25,7 +25,7 @@ export const ButtonSecondary = forwardRef(function ButtonSecondary(
         className,
         "bg-ui-neutral-50 font-medium ring-1 ring-inset",
         sentiment === "neutral" &&
-          "text-ui-primary-700 ring-ui-primary-600 active:bg-ui-primary-100",
+          "text-ui-accent-700 ring-ui-accent-600 active:bg-ui-accent-100",
         sentiment === "danger" &&
           "text-ui-danger-700 ring-ui-danger-600 active:bg-ui-danger-100",
       )}

diff --git a/src/themes.ts b/src/themes.ts
@@ -5,7 +5,7 @@ function oklchCoords(color: string) {
 }
 
 type ColorGroup =
-  | "primary"
+  | "accent"
   | "neutral"
   | "info"
   | "danger"
@@ -45,7 +45,7 @@ function colorFamily<T extends ColorGroup>(
 interface Theme extends ColorFamily<ColorGroup> {}
 
 export const lightTheme = {
-  ...colorFamily("primary", colors.indigo),
+  ...colorFamily("accent", colors.indigo),
   ...colorFamily("neutral", colors.zinc),
   ...colorFamily("info", colors.blue),
   ...colorFamily("danger", colors.red),
@@ -54,7 +54,7 @@ export const lightTheme = {
 } as const satisfies Theme;
 
 export const darkTheme = {
-  ...colorFamily("primary", colors.indigo, { invert: true }),
+  ...colorFamily("accent", colors.indigo, { invert: true }),
   ...colorFamily("neutral", colors.zinc, { invert: true }),
   ...colorFamily("info", colors.blue, { invert: true }),
   ...colorFamily("danger", colors.red, { invert: true }),

diff --git a/src/utils/controlClassName.ts b/src/utils/controlClassName.ts
@@ -6,7 +6,7 @@ interface ControlProps {
 
 export function controlClassName({ size }: ControlProps) {
   return clsx(
-    "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-primary-600 disabled:pointer-events-none disabled:opacity-40",
+    "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-accent-600 disabled:pointer-events-none disabled:opacity-40",
     size === "sm" && "h-8 rounded-md text-base/none",
     size === "md" && "h-10 rounded-lg text-base/none",
     size === "lg" && "h-14 rounded-xl text-xl/none",