Reorganize destructive colors

cartridge-gg · Jan 17, 2025 · 8ae135a · 8ae135a
1 parent e6afad2
commit 8ae135a
Show file tree

Hide file tree

Showing 18 changed files with 44 additions and 54 deletions.
diff --git a/packages/keychain/src/components/ErrorAlert.tsx b/packages/keychain/src/components/ErrorAlert.tsx
@@ -58,7 +58,7 @@ export function ErrorAlert({
       case "warning":
         return { bg: "bg-[#1f2320]", text: "text-[white]" };
       case "error":
-        return { bg: "bg-[#f9b9b9]", text: "text-[black]" };
+        return { bg: "bg-destructive", text: "text-[black]" };
       default:
         return { bg: "bg-background-100", text: "text-foreground" };
     }

diff --git a/packages/keychain/src/components/connect/CreateSession.tsx b/packages/keychain/src/components/connect/CreateSession.tsx
@@ -159,7 +159,7 @@ export function CreateSession({
 
         {!policies?.verified && (
           <div
-            className="flex items-center p-3 mb-3 gap-5 border border-solid-primary rounded-md cursor-pointer border-destructive text-destructive"
+            className="flex items-center p-3 mb-3 gap-5 border border-solid-primary rounded-md cursor-pointer border-destructive-foreground text-destructive-foreground"
             onClick={() => !isConnecting && setIsConsent(!isConsent)}
           >
             <Checkbox

diff --git a/packages/keychain/src/components/connect/create/CreateController.tsx b/packages/keychain/src/components/connect/create/CreateController.tsx
@@ -60,7 +60,7 @@ export function CreateControllerView({
         <Content className="gap-0">
           <div
             className={cn(
-              "border-[#E46958] rounded",
+              "border-destructive-100 rounded",
               validation.status === "invalid" || error ? "border" : undefined,
             )}
           >

diff --git a/packages/keychain/src/components/connect/create/StatusTray.tsx b/packages/keychain/src/components/connect/create/StatusTray.tsx
@@ -30,7 +30,7 @@ export function StatusTray({ username, validation, error }: StatusTrayProps) {
     <div
       className={cn(
         "flex flex-col top-[-2px] rounded-b relative z-0 gap-px  overflow-hidden",
-        isError ? "bg-[#E46958]" : "bg-background-200",
+        isError ? "bg-destructive" : "bg-background-200",
       )}
     >
       <div

diff --git a/packages/keychain/src/components/settings/Delegate.tsx b/packages/keychain/src/components/settings/Delegate.tsx
@@ -56,7 +56,7 @@ export function Delegate({ onBack }: { onBack: () => void }) {
               onChange={(e) => setDelegateAddress(e.target.value)}
             />
             {!isValid && delegateAddress !== "" && (
-              <div className="flex items-center gap-2 text-destructive">
+              <div className="flex items-center gap-2 text-destructive-foreground">
                 <AlertIcon size="sm" />
                 <div className="text-sm">Invalid address!</div>
               </div>

diff --git a/packages/keychain/src/components/settings/Recovery.tsx b/packages/keychain/src/components/settings/Recovery.tsx
@@ -51,7 +51,7 @@ export function Recovery({ onBack }: { onBack: () => void }) {
               onChange={(e) => setExternalOwnerAddress(e.target.value)}
             />
             {!isValid && externalOwnerAddress !== "" && (
-              <div className="flex items-center gap-2 text-destructive">
+              <div className="flex items-center gap-2 text-destructive-foreground">
                 <AlertIcon size="sm" />
                 <div className="text-sm">Invalid address!</div>
               </div>

diff --git a/packages/profile/src/components/inventory/collection/send/index.tsx b/packages/profile/src/components/inventory/collection/send/index.tsx
@@ -166,18 +166,18 @@ const Warning = ({
   return (
     <div
       className={cn(
-        "border border-destructive rounded flex items-center gap-2 p-2 cursor-pointer select-none",
+        "border border-destructive-foreground rounded flex items-center gap-2 p-2 cursor-pointer select-none",
         !warning && "hidden",
       )}
       onClick={() => setValidated(!validated)}
     >
       {validated && (
-        <CheckboxCheckedDuoIcon className="text-destructive min-h-5 min-w-5 hover:opacity-80" />
+        <CheckboxCheckedDuoIcon className="text-destructive-foreground min-h-5 min-w-5 hover:opacity-80" />
       )}
       {!validated && (
-        <CheckboxUncheckedIcon className="text-destructive min-h-5 min-w-5 hover:opacity-80" />
+        <CheckboxUncheckedIcon className="text-destructive-foreground min-h-5 min-w-5 hover:opacity-80" />
       )}
-      <p className="text-xs text-destructive">{warning}</p>
+      <p className="text-xs text-destructive-foreground">{warning}</p>
     </div>
   );
 };
diff --git a/packages/profile/src/components/inventory/token/send/index.tsx b/packages/profile/src/components/inventory/token/send/index.tsx
@@ -97,18 +97,18 @@ export function SendToken() {
         <Separator className="bg-spacer" />
         <div
           className={cn(
-            "border border-destructive rounded flex items-center gap-2 p-2 cursor-pointer select-none",
+            "border border-destructive-foreground rounded flex items-center gap-2 p-2 cursor-pointer select-none",
             !warning && "hidden",
           )}
           onClick={() => setValidated(!validated)}
         >
           {validated && (
-            <CheckboxCheckedDuoIcon className="text-destructive min-h-5 min-w-5 hover:opacity-80" />
+            <CheckboxCheckedDuoIcon className="text-destructive-foreground min-h-5 min-w-5 hover:opacity-80" />
           )}
           {!validated && (
-            <CheckboxUncheckedIcon className="text-destructive min-h-5 min-w-5 hover:opacity-80" />
+            <CheckboxUncheckedIcon className="text-destructive-foreground min-h-5 min-w-5 hover:opacity-80" />
           )}
-          <p className="text-xs text-destructive">{warning}</p>
+          <p className="text-xs text-destructive-foreground">{warning}</p>
         </div>
         <Button
           disabled={disabled}

diff --git a/packages/ui-next/src/components/icons/error-alert-icon.tsx b/packages/ui-next/src/components/icons/error-alert-icon.tsx
@@ -25,7 +25,7 @@ export function ErrorAlertIcon({
       return (
         <AlertIconRaw
           size={size}
-          className={cn("text-destructive", className)}
+          className={cn("text-destructive-100", className)}
         />
       );
   }

diff --git a/packages/ui-next/src/components/icons/utils.tsx b/packages/ui-next/src/components/icons/utils.tsx
@@ -22,7 +22,7 @@ export const iconVariants = cva(base, {
 export const duotoneVariant = {
   default: "[&_*.accentColor]:fill-secondary",
   destructive:
-    "[&_*.accentColor]:fill-destructive [&_*.color]:fill-destructive",
+    "[&_*.accentColor]:fill-destructive-foreground [&_*.color]:fill-destructive-foreground",
 };
 
 export const duotoneIconVariants = cva(base, {

diff --git a/packages/ui-next/src/components/primitives/alert.tsx b/packages/ui-next/src/components/primitives/alert.tsx
@@ -10,7 +10,7 @@ const alertVariants = cva(
       variant: {
         default: "bg-background text-foreground",
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+          "border-destructive-foreground/50 text-destructive-foreground dark:border-destructive-foreground [&>svg]:text-destructive-foreground",
       },
     },
     defaultVariants: {

diff --git a/packages/ui-next/src/components/primitives/badge.tsx b/packages/ui-next/src/components/primitives/badge.tsx
@@ -15,7 +15,7 @@ const badgeVariants = cva(
         muted:
           "border-transparent bg-muted text-muted-foreground hover:bg-muted/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+          "border-transparent bg-destructive-foreground text-destructive-foreground shadow hover:bg-destructive-foreground/80",
         outline: "text-foreground",
       },
     },

diff --git a/packages/ui-next/src/components/primitives/button.tsx b/packages/ui-next/src/components/primitives/button.tsx
@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default:
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive-foreground text-destructive-foreground shadow-sm hover:bg-destructive-foreground/90",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:

diff --git a/packages/ui-next/src/components/primitives/form.tsx b/packages/ui-next/src/components/primitives/form.tsx
@@ -153,7 +153,10 @@ const FormMessage = React.forwardRef<
     <p
       ref={ref}
       id={formMessageId}
-      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      className={cn(
+        "text-[0.8rem] font-medium text-destructive-foreground",
+        className,
+      )}
       {...props}
     >
       {body}

diff --git a/packages/ui-next/src/components/primitives/toast.tsx b/packages/ui-next/src/components/primitives/toast.tsx
@@ -31,7 +31,7 @@ const toastVariants = cva(
       variant: {
         default: "border bg-background text-foreground",
         destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+          "destructive group border-destructive-foreground bg-destructive-foreground text-destructive-foreground",
       },
     },
     defaultVariants: {
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-background-100 focus:outline-none focus:ring-1 focus:ring-foreground disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-background-100 focus:outline-none focus:ring-1 focus:ring-foreground disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive-foreground/30 group-[.destructive]:hover:bg-destructive-foreground group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive-foreground",
       className,
     )}
     {...props}

diff --git a/packages/ui-next/src/preset.ts b/packages/ui-next/src/preset.ts
@@ -37,6 +37,7 @@ export const cartridgeTWPreset: Partial<Config> = {
       secondary: "hsl(var(--secondary))",
       destructive: {
         DEFAULT: "hsl(var(--destructive))",
+        100: "hsl(var(--destructive-100))",
         foreground: "hsl(var(--destructive-foreground))",
       },
       muted: {

diff --git a/packages/ui-next/src/stories/colors.stories.tsx b/packages/ui-next/src/stories/colors.stories.tsx
@@ -1,4 +1,3 @@
-import { cn } from "@/utils";
 import { Meta, StoryObj } from "@storybook/react";
 import { PropsWithChildren } from "react";
 
@@ -16,7 +15,7 @@ export const Surface: Story = {
   args: {
     children: (
       <>
-        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background border border-muted/40 text-xs">
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-background text-xs">
           <div>bg-background</div>
         </div>
 
@@ -56,10 +55,10 @@ export const Accent: Story = {
 export const Muted: Story = {
   args: {
     children: (
-      <>
-        <Sample color="bg-muted" legacyName="solid.accent" />
-        <Sample color="bg-muted-foreground" legacyName="text.secondary" />
-      </>
+      <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-muted text-muted-foreground text-xs">
+        <div>bg-muted</div>
+        <div>text-muted-foreground</div>
+      </div>
     ),
   },
 };
@@ -68,34 +67,20 @@ export const Destructive: Story = {
   args: {
     children: (
       <>
-        <Sample color="bg-destructive" legacyName="text.error" />
-        <Sample color="bg-destructive-foreground" legacyName="text.error" />
-      </>
-    ),
-  },
-};
-
-export const Others: Story = {
-  args: {
-    children: (
-      <>
-        <Sample color="bg-border" legacyName="black" />
-        <Sample color="bg-input" legacyName="black" />
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-destructive text-xs">
+          <div>bg-destructive</div>
+        </div>
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-destructive-100 text-xs">
+          <div>bg-destructive-100</div>
+        </div>
+        <div className="size-40 flex flex-shrink-0 flex-col items-center justify-center bg-destructive-foreground text-xs">
+          <div>bg-destructive-foreground</div>
+        </div>
       </>
     ),
   },
 };
 
-function Colors({ children }: PropsWithChildren) {
-  return <div className="flex gap-4 bg-background">{children}</div>;
-}
-
-function Sample({ color, legacyName }: { color: string; legacyName: string }) {
-  return (
-    <div className="flex flex-col items-center gap-2">
-      <div className={cn("h-40 w-40", color)} />
-      <p className="text-sm">{color.replace(" border", "")}</p>
-      <p className="text-sm text-muted-foreground">(v0.2: {legacyName})</p>
-    </div>
-  );
+function Colors(props: PropsWithChildren) {
+  return <div className="flex gap-4" {...props} />;
 }
diff --git a/packages/ui-next/src/themes/default.css b/packages/ui-next/src/themes/default.css
@@ -17,7 +17,8 @@
     --accent: 207 15% 85%;
     --accent-foreground: 132 6% 30%;
 
-    --destructive: 0 72% 65%;
+    --destructive: 0 85% 85%;
+    --destructive-100: 7 72% 62%;
     --destructive-foreground: 0 72% 65%;
 
     --spacer: 0 0% 0%;