CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Resolve missing commit

Browse Source
This commit is contained in:
adilallo
2026-02-02 10:13:01 -07:00
parent 293bbfc474
commit 9149883ae0
7 changed files with 55 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Alert/Alert.container.tsx
-8
View File
@@ -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
-1
View File
@@ -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
+7 -6
View File
@@ -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
type="button"
<Button
variant="ghost"
size="xsmall"
onClick={onClose}
className={closeButtonClasses}
aria-label="Close alert"
ariaLabel="Close alert"
className="shrink-0"
>
<svg
width="20"
@@ -79,7 +80,7 @@ export function AlertView({
/>
</g>
</svg>
</button>
</Button>
</div>
);
}
app/components/Button.tsx
+7 -3
View File
@@ -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
+1 -1
View File
@@ -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