Resolve missing commit

app/components/Alert/Alert.container.tsx

@@ -26,7 +26,6 @@ const AlertContainer = memo<AlertProps>(
             titleColor: "text-[var(--color-content-invert-primary)]",
             descriptionColor: "text-[var(--color-content-invert-secondary)]",
             iconColor: "var(--color-kiwi-kiwi500)",
-            closeButtonColor: "text-[var(--color-content-invert-primary)]",
             closeButtonIconColor: "var(--color-content-invert-primary)",
           };
         case "warning":
@@ -39,7 +38,6 @@ const AlertContainer = memo<AlertProps>(
             titleColor: "text-[var(--color-content-invert-primary)]",
             descriptionColor: "text-[var(--color-content-invert-secondary)]",
             iconColor: "var(--color-yellow-yellow500)",
-            closeButtonColor: "text-[var(--color-content-invert-primary)]",
             closeButtonIconColor: "var(--color-content-invert-primary)",
           };
         case "danger":
@@ -53,8 +51,6 @@ const AlertContainer = memo<AlertProps>(
             descriptionColor:
               "text-[var(--color-content-invert-negative-primary)]",
             iconColor: "var(--color-red-red500)",
-            closeButtonColor:
-              "text-[var(--color-content-invert-negative-primary)]",
             closeButtonIconColor: "var(--color-content-invert-primary)",
           };
         default:
@@ -67,7 +63,6 @@ const AlertContainer = memo<AlertProps>(
             titleColor: "text-[var(--color-content-default-primary)]",
             descriptionColor: "text-[var(--color-content-default-primary)]",
             iconColor: "var(--color-content-default-brand-primary)",
-            closeButtonColor: "text-[var(--color-content-default-primary)]",
             closeButtonIconColor: "var(--color-content-default-brand-primary)",
           };
       }
@@ -99,8 +94,6 @@ const AlertContainer = memo<AlertProps>(
         ? `font-inter text-[16px] leading-[24px] font-normal tracking-[0%] ${statusStyles.descriptionColor} relative shrink-0 w-full mt-[var(--spacing-scale-004)]`
         : `font-inter text-[18px] leading-[23.4px] font-normal tracking-[0%] ${statusStyles.descriptionColor} relative shrink-0 w-full mt-[var(--spacing-scale-004)]`;
 
-    const closeButtonClasses = `flex gap-[var(--spacing-scale-006)] items-center justify-center overflow-clip p-[var(--spacing-scale-012)] rounded-[var(--radius-full)] shrink-0 hover:bg-[var(--color-surface-default-secondary)] transition-colors ${statusStyles.closeButtonColor}`;
-
     return (
       <AlertView
         title={title}
@@ -113,7 +106,6 @@ const AlertContainer = memo<AlertProps>(
         titleClasses={titleClasses}
         descriptionClasses={descriptionClasses}
         iconColor={statusStyles.iconColor}
-        closeButtonClasses={closeButtonClasses}
         closeButtonIconColor={statusStyles.closeButtonIconColor}
         onClose={onClose}
       />

app/components/Alert/Alert.types.ts

@@ -18,7 +18,6 @@ export interface AlertViewProps {
   titleClasses: string;
   descriptionClasses: string;
   iconColor: string;
-  closeButtonClasses: string;
   closeButtonIconColor: string;
   onClose?: () => void;
 }

app/components/Alert/Alert.view.tsx

@@ -1,4 +1,5 @@
 import type { AlertViewProps } from "./Alert.types";
+import Button from "../Button";
 
 export function AlertView({
   title,
@@ -11,7 +12,6 @@ export function AlertView({
   titleClasses,
   descriptionClasses,
   iconColor,
-  closeButtonClasses,
   closeButtonIconColor,
   onClose,
 }: AlertViewProps) {
@@ -48,11 +48,12 @@ export function AlertView({
         <p className={titleClasses}>{title}</p>
         {description && <p className={descriptionClasses}>{description}</p>}
       </div>
-      <button
+      <Button
-        type="button"
+        variant="ghost"
+        size="xsmall"
         onClick={onClose}
-        className={closeButtonClasses}
+        ariaLabel="Close alert"
-        aria-label="Close alert"
+        className="shrink-0"
       >
         <svg
           width="20"
@@ -79,7 +80,7 @@ export function AlertView({
             />
           </g>
         </svg>
-      </button>
+      </Button>
     </div>
   );
 }

app/components/Button.tsx

@@ -8,7 +8,8 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     | "primary"
     | "outlined"
     | "dark"
-    | "inverse";
+    | "inverse"
+    | "ghost";
   size?: "xsmall" | "small" | "medium" | "large" | "xlarge";
   className?: string;
   disabled?: boolean;
@@ -69,6 +70,8 @@ const Button = memo<ButtonProps>(
       dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
       inverse:
         "bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
+      ghost:
+        "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:scale-[1.02] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-brand-primary)] active:shadow-none active:scale-[0.98] disabled:bg-transparent disabled:text-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
     };
 
     const hoverOutlineStyles: Record<string, string> = {
@@ -79,12 +82,13 @@ const Button = memo<ButtonProps>(
       xlarge: "hover:outline-[2.5px]",
     };
 
-    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, or inverse
+    // Only apply outline styles to default and secondary variants, not primary, outlined, dark, inverse, or ghost
     const outlineStyles =
       variant === "primary" ||
       variant === "outlined" ||
       variant === "dark" ||
-      variant === "inverse"
+      variant === "inverse" ||
+      variant === "ghost"
         ? ""
         : hoverOutlineStyles[size];
 

app/components/Tooltip/Tooltip.view.tsx

@@ -20,7 +20,7 @@ export function TooltipView({
       aria-live="polite"
       id={`tooltip-${text.replace(/\s+/g, "-").toLowerCase()}`}
     >
-      <p className="font-inter text-[var(--sizing-350,14px)] leading-[16px] font-medium tracking-[0%] text-[var(--color-content-inverse-primary)] relative shrink-0">
+      <p className="font-inter text-[var(--sizing-350,14px)] leading-[16px] font-medium tracking-[0%] text-[var(--color-content-default-primary)] relative shrink-0">
         {text}
       </p>
       <div

stories/Alert.stories.js

@@ -32,36 +32,36 @@ const Template = (args) => {
   );
 };
 
-export const Default = Template.bind({});
+export const ToastDefault = Template.bind({});
-Default.args = {
+ToastDefault.args = {
-  title: "Short alert banner message goes here",
+  title: "Short alert toast message goes here",
   description:
     "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
   status: "default",
   type: "toast",
 };
 
-export const Positive = Template.bind({});
+export const ToastPositive = Template.bind({});
-Positive.args = {
+ToastPositive.args = {
-  title: "Short alert banner message goes here",
+  title: "Short alert toast message goes here",
   description:
     "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
   status: "positive",
   type: "toast",
 };
 
-export const Warning = Template.bind({});
+export const ToastWarning = Template.bind({});
-Warning.args = {
+ToastWarning.args = {
-  title: "Short alert banner message goes here",
+  title: "Short alert toast message goes here",
   description:
     "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
   status: "warning",
   type: "toast",
 };
 
-export const Danger = Template.bind({});
+export const ToastDanger = Template.bind({});
-Danger.args = {
+ToastDanger.args = {
-  title: "Short alert banner message goes here",
+  title: "Short alert toast message goes here",
   description:
     "Nascetur ipsum a nisi tempor cras nam neque volutpat. Aliquam id est faucibus nunc quis. Eleifend suspendisse.",
   status: "danger",

stories/Button.stories.js

@@ -22,6 +22,7 @@ export default {
         "outlined",
         "dark",
         "inverse",
+        "ghost",
       ],
       description: "The visual style variant of the button",
     },
@@ -75,6 +76,9 @@ export const Variants = {
         <Button {..._args} variant="inverse">
           Inverse
         </Button>
+        <Button {..._args} variant="ghost">
+          Ghost
+        </Button>
       </div>
     </div>
   ),
@@ -267,6 +271,27 @@ export const AllVariants = {
         </div>
       </div>
 
+      <div>
+        <h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
+        <div className="space-x-4">
+          <Button variant="ghost" size="xsmall">
+            XSmall
+          </Button>
+          <Button variant="ghost" size="small">
+            Small
+          </Button>
+          <Button variant="ghost" size="medium">
+            Medium
+          </Button>
+          <Button variant="ghost" size="large">
+            Large
+          </Button>
+          <Button variant="ghost" size="xlarge">
+            XLarge
+          </Button>
+        </div>
+      </div>
+
       <div>
         <h3 className="text-white font-semibold mb-3">Disabled States</h3>
         <div className="space-x-4">
@@ -288,6 +313,9 @@ export const AllVariants = {
           <Button variant="inverse" size="large" disabled>
             Inverse Disabled
           </Button>
+          <Button variant="ghost" size="large" disabled>
+            Ghost Disabled
+          </Button>
         </div>
       </div>
     </div>