update and refactor color management

src/components/ActivityToast/ActivityToast.tsx

@@ -5,10 +5,12 @@ import {
   Anchor,
   BackgroundColor,
   bgColorClass,
+  BorderColor,
+  borderColorClass,
   Radius,
   Variant,
 } from "@/types";
-import { cn } from "@/util/classes.ts";
+import { cn } from "@/util/classes";
 import { textColor } from "@/styles/text";
 import radiusStyles from "@/styles/radius";
 
@@ -38,7 +40,8 @@ export const ActivityToast: FC<ActivityToastProps> = ({
         "gap-x-sm",
         "items-center",
         "py-2 pr-4 pl-3",
-        "border border-content-border-secondary-primary",
+        "border",
+        borderColorClass(BorderColor.Default),
         bgColorClass(BackgroundColor.Card1),
         radiusStyles(Radius.Md),
         className

src/components/Button/Button.tsx

@@ -1,8 +1,19 @@
-import { Size, Variant } from "@/types";
+import {
+  ActionColor,
+  bgColorClass,
+  BorderColor,
+  borderColorClass,
+  ElementState,
+  Radius,
+  Size,
+  textColorClass,
+  Variant,
+} from "@/types";
 import { cn } from "@/util/classes";
 import { Button as HeadlessButton } from "@headlessui/react";
 import clsx from "clsx";
 import type { ButtonHTMLAttributes, FC } from "react";
+import radiusStyles from "@/styles/radius";
 
 type ButtonSize = Exclude<Size, Size.Lg>;
 
@@ -16,30 +27,33 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const variantStyles: Record<Variant, string> = {
   [Variant.Primary]: clsx(
-    "bg-action-primary-primary",
-    "hover:bg-action-primary-secondary",
-    "active:bg-action-primary-tertiary",
-    "text-action-primary-text"
+    bgColorClass(ActionColor.PrimaryDefault),
+    bgColorClass(ActionColor.PrimaryHover, ElementState.Hover),
+    bgColorClass(ActionColor.PrimaryFocus, ElementState.Active),
+    textColorClass(ActionColor.PrimaryText)
   ),
   [Variant.Secondary]: clsx(
     "border-1",
-    "bg-action-secondary-primary border-content-border-secondary-primary",
-    "hover:bg-action-secondary-secondary hover:border-content-border-secondary-secondary",
-    "active:bg-action-secondary-tertiary active:border-content-border-secondary-tertiary",
-    "text-action-secondary-text",
-    "disabled:border-content-border-secondary-disabled"
+    bgColorClass(ActionColor.SecondaryDefault),
+    borderColorClass(BorderColor.Default),
+    bgColorClass(ActionColor.SecondaryHover, ElementState.Hover),
+    borderColorClass(BorderColor.Hover, ElementState.Hover),
+    bgColorClass(ActionColor.SecondaryFocus, ElementState.Active),
+    borderColorClass(BorderColor.Focus, ElementState.Active),
+    textColorClass(ActionColor.SecondaryText),
+    borderColorClass(BorderColor.Disabled, ElementState.Disabled)
   ),
   [Variant.Success]: clsx(
-    "bg-action-success-primary",
-    "hover:bg-action-success-secondary",
-    "active:bg-action-success-tertiary",
-    "text-action-success-text"
+    bgColorClass(ActionColor.SuccessDefault),
+    bgColorClass(ActionColor.SuccessHover, ElementState.Hover),
+    bgColorClass(ActionColor.SuccessFocus, ElementState.Active),
+    textColorClass(ActionColor.SuccessText)
   ),
   [Variant.Danger]: clsx(
-    "bg-action-danger-primary",
-    "hover:bg-action-danger-secondary",
-    "active:bg-action-danger-tertiary",
-    "text-action-danger-text"
+    bgColorClass(ActionColor.DangerDefault),
+    bgColorClass(ActionColor.DangerHover, ElementState.Hover),
+    bgColorClass(ActionColor.DangerFocus, ElementState.Active),
+    textColorClass(ActionColor.DangerText)
   ),
 };
 
@@ -69,7 +83,7 @@ export const Button: FC<ButtonProps> = ({
     <HeadlessButton
       className={cn(
         "inline-flex items-center justify-center",
-        borderless ? "rounded-full" : "rounded-sm",
+        borderless ? radiusStyles(Radius.Full) : radiusStyles(Radius.Sm),
         "font-medium",
         "transition-colors",
         "hover:cursor-pointer",

src/components/Checkbox/Checkbox.tsx

@@ -1,11 +1,21 @@
 import radiusStyles from "@/styles/radius";
-import { Radius, Size, TextColor, textColorClass } from "@/types";
+import {
+  ActionColor,
+  bgColorClass,
+  BorderColor,
+  borderColorClass,
+  ElementState,
+  Radius,
+  Size,
+  TextColor,
+  textColorClass,
+} from "@/types";
 import { cn } from "@/util/classes";
 import { Checkbox as HeadlessCheckbox, Field, Label } from "@headlessui/react";
 import clsx from "clsx";
 import { type FC, InputHTMLAttributes } from "react";
-import { CheckmarkIcon } from "../Icons/Checkmark";
-import { TEXT_STYLES } from "@/styles/text.ts";
+import { CheckmarkIcon } from "@/components/Icons/Checkmark";
+import { TEXT_STYLES } from "@/styles/text";
 
 type ModifiedCheckboxProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
@@ -57,7 +67,7 @@ export const Checkbox: FC<CheckboxProps> = ({
           "cursor-pointer",
           "appearance-none",
           "border",
-          "border-content-border-secondary-primary",
+          borderColorClass(BorderColor.Default),
           "group-hover:border-action-primary-primary",
           radiusStyles(radius),
           sizeStyles[size],
@@ -68,8 +78,8 @@ export const Checkbox: FC<CheckboxProps> = ({
           "focus:ring-offset-2",
           "disabled:opacity-50",
           "disabled:cursor-not-allowed",
-          "data-checked:bg-action-primary-primary",
-          "data-checked:border-action-primary-primary",
+          bgColorClass(ActionColor.PrimaryDefault, ElementState.Checked),
+          borderColorClass(BorderColor.Active, ElementState.Checked),
           className
         )}
         {...props}

src/components/FormField/FormField.tsx

@@ -40,7 +40,7 @@ export const FormField: FC<FormFieldProps> = ({
 
         {control}
 
-        {error && <Text color={TextColor.SemanticDestructive}>{error}</Text>}
+        {error && <Text color={TextColor.Destructive}>{error}</Text>}
       </Stack>
     </Field>
   );

src/components/Heading/Heading.tsx

@@ -1,5 +1,5 @@
 import type { FC, HTMLAttributes } from "react";
-import { TextVariant } from "@/types";
+import { TextColor, textColorClass, TextVariant } from "@/types";
 import HeadingLevel from "@/types/heading";
 import { textStyles } from "@/styles/text";
 import clsx from "clsx";
@@ -33,7 +33,7 @@ export const Heading: FC<HeadingProps> = ({
   return (
     <Element
       className={clsx(
-        "text-content-text-primary",
+        textColorClass(TextColor.Primary),
         variantStyles[level],
         className
       )}

src/components/Input/Input.tsx

@@ -1,11 +1,22 @@
 import radiusStyles from "@/styles/radius";
-import { Radius, Size } from "@/types";
+import {
+  BackgroundColor,
+  bgColorClass,
+  BorderColor,
+  borderColorClass,
+  ElementState,
+  Radius,
+  Size,
+  TextColor,
+  textColorClass,
+} from "@/types";
 import { cn } from "@/util/classes";
 import { Field, Input as HeadlessInput } from "@headlessui/react";
-import { InputHTMLAttributes, type FC } from "react";
-import { IconProps } from "../Icons/types";
+import { type FC, InputHTMLAttributes } from "react";
+import { IconProps } from "@/components/Icons/types";
 import { InputIcon } from "./InputIcon";
 import { paddingLeftStyles, sizeStyles } from "./styles";
+
 type ModifiedInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,
   "size" | "className"
@@ -44,20 +55,24 @@ export const Input: FC<InputProps> = ({
 }) => {
   const inputClasses = cn(
     "w-full",
-    "bg-content-background-primary",
-    "text-content-text-primary",
+    bgColorClass(BackgroundColor.Background),
+    textColorClass(TextColor.Primary),
     "placeholder:text-content-text-tertiary",
     "transition-colors",
     "border",
-    error ? "border-semantic-destructive" : "border-content-border-default",
-    !disabled && !error && "hover:border-content-border-hover",
+    error
+      ? borderColorClass(BorderColor.Error)
+      : borderColorClass(BorderColor.Default),
+    !disabled &&
+      !error &&
+      borderColorClass(BorderColor.Hover, ElementState.Hover),
     "focus:outline-none",
     error
-      ? "focus:border-semantic-destructive"
-      : "focus:border-content-border-focus",
+      ? borderColorClass(BorderColor.Error, ElementState.Focus)
+      : borderColorClass(BorderColor.Focus, ElementState.Focus),
     "disabled:opacity-50",
     "disabled:cursor-not-allowed",
-    "disabled:border-content-border-secondary-disabled",
+    borderColorClass(BorderColor.Disabled, ElementState.Disabled),
     radiusStyles(radius),
     sizeStyles[size],
     Icon ? paddingLeftStyles[size] : "pl-3",

src/components/Input/InputIcon.spec.tsx

@@ -1,4 +1,4 @@
-import { Size } from "@/types";
+import { Size, TextColor, textColorClass } from "@/types";
 import { render } from "@testing-library/react";
 import { CheckmarkIcon } from "../Icons/Checkmark";
 import { InputIcon } from "./InputIcon";
@@ -12,21 +12,21 @@ describe("InputIcon", () => {
     expect(svg).toBeInTheDocument();
   });
 
-  it("should apply text-content-text-primary when hasText is true", () => {
+  it("should apply correct styling when hasText is true", () => {
     const { container } = render(
       <InputIcon Icon={CheckmarkIcon} size={Size.Md} hasText={true} />
     );
     const span = container.querySelector("span");
-    expect(span).toHaveClass("text-content-text-primary");
-    expect(span).not.toHaveClass("text-content-text-secondary");
+    expect(span).toHaveClass(textColorClass(TextColor.Primary));
+    expect(span).not.toHaveClass(textColorClass(TextColor.Secondary));
   });
 
-  it("should apply text-content-text-secondary when hasText is false", () => {
+  it("should apply correct styling when hasText is false", () => {
     const { container } = render(
       <InputIcon Icon={CheckmarkIcon} size={Size.Md} hasText={false} />
     );
     const span = container.querySelector("span");
-    expect(span).toHaveClass("text-content-text-secondary");
-    expect(span).not.toHaveClass("text-content-text-primary");
+    expect(span).toHaveClass(textColorClass(TextColor.Secondary));
+    expect(span).not.toHaveClass(textColorClass(TextColor.Primary));
   });
 });

src/components/Input/InputIcon.tsx

@@ -1,7 +1,7 @@
-import { Size } from "@/types";
+import { Size, TextColor, textColorClass } from "@/types";
 import { cn } from "@/util/classes";
 import { type FC } from "react";
-import { IconProps } from "../Icons/types";
+import { IconProps } from "@/components/Icons/types";
 import { iconPaddingStyles, iconSizeStyles } from "./styles";
 
 export interface InputIconProps {
@@ -15,7 +15,9 @@ export const InputIcon: FC<InputIconProps> = ({ Icon, size, hasText }) => {
     <span
       className={cn(
         "absolute left-0 flex items-center justify-center",
-        hasText ? "text-content-text-primary" : "text-content-text-secondary",
+        hasText
+          ? textColorClass(TextColor.Primary)
+          : textColorClass(TextColor.Secondary),
         iconPaddingStyles[size]
       )}
     >

src/components/ListItem/ListItem.tsx

@@ -3,8 +3,16 @@ import type { SyntheticListenerMap } from "@dnd-kit/core/dist/hooks/utilities";
 import clsx from "clsx";
 import { DragHandleIcon } from "@/components/Icons/DragHandle";
 import { Text } from "@/components/Text";
-import { TextColor, TextVariant } from "@/types";
+import {
+  BackgroundColor,
+  bgColorClass,
+  Radius,
+  TextColor,
+  textColorClass,
+  TextVariant,
+} from "@/types";
 import { Checkbox } from "@/components/Checkbox";
+import radiusStyles from "@/styles/radius";
 
 export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
   canSelect?: boolean;
@@ -33,11 +41,11 @@ export const ListItem: FC<ListItemProps> = ({
     <div
       className={clsx(
         "flex flex-nowrap items-center justify-between",
+        "w-full",
         "gap-x-lg",
         "py-3 pr-3 pl-2",
-        "bg-content-bg-card-2",
-        "rounded-sm",
-        "w-full",
+        bgColorClass(BackgroundColor.Card2),
+        radiusStyles(Radius.Sm),
         className
       )}
       {...props}
@@ -54,7 +62,9 @@ export const ListItem: FC<ListItemProps> = ({
             className="flex align-items cursor-grab touch-none"
             {...dragHandleListeners}
           >
-            <DragHandleIcon className="size-4 text-content-text-secondary" />
+            <DragHandleIcon
+              className={clsx("size-4", textColorClass(TextColor.Secondary))}
+            />
           </span>
         )}
         <Text variant={TextVariant.Lg}>{primaryContent}</Text>

src/components/Pill/Pill.tsx

@@ -1,19 +1,28 @@
 import radiusStyles from "@/styles/radius";
 import shadowStyles from "@/styles/shadow";
-import { BackgroundColor, Radius, Shadow, Size, TextColor } from "@/types";
+import {
+  BackgroundColor,
+  Radius,
+  SemanticColor,
+  Shadow,
+  Size,
+  StatusColor,
+  TextColor,
+} from "@/types";
 import { bgColorClass, textColorClass } from "@/types/color";
 import clsx from "clsx";
 import type { FC, HTMLAttributes } from "react";
 
-type PillSize = Exclude<Size, Size.Lg>;
+export type PillSize = Exclude<Size, Size.Lg>;
+export type PillColor = BackgroundColor | SemanticColor | StatusColor;
 
 export interface PillProps extends HTMLAttributes<HTMLSpanElement> {
   size?: PillSize;
   radius?: Radius;
   shadow?: Shadow;
   color?: TextColor;
   isStatus?: boolean;
-  backgroundColor?: BackgroundColor;
+  backgroundColor?: PillColor;
 }
 
 const sizeStyles: Record<PillSize, string> = {