binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5809] refactor: tailwind config inline variables (#8437)

Browse source
This commit is contained in:
Aaryan Khandelwal 2025-12-26 16:36:29 +05:30 • committed by GitHub
parent e3ba7c2889
commit 92ac28fcb8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
169 changed files with 1273 additions and 1130 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/propel/src/animated-counter/animated-counter.stories.tsx
View file

@ -26,7 +26,7 @@ export const Default: Story = {
<div className="space-y-6 p-4">
<div className="flex items-center justify-center gap-6">
<button
className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 transition-colors shadow-md"
className="px-4 py-2 bg-red-500 text-on-color font-medium rounded-lg hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-danger-strong focus:ring-offset-2 transition-colors shadow-md"
onClick={() => setCount((prev) => Math.max(0, prev - 1))}
>
-1
@ -35,7 +35,7 @@ export const Default: Story = {
<AnimatedCounter {...args} count={count} />
</div>
<button
className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 transition-colors shadow-md"
className="px-4 py-2 bg-green-500 text-on-color font-medium rounded-lg hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-success-strong focus:ring-offset-2 transition-colors shadow-md"
onClick={() => setCount((prev) => prev + 1)}
>
+1

4
packages/propel/src/avatar/avatar.tsx
View file

@ -107,8 +107,8 @@ export function Avatar(props: Props) {
<AvatarPrimitive.Fallback
className={cn(sizeInfo.fontSize, "grid h-full w-full place-items-center", getBorderRadius(shape), className)}
style={{
backgroundColor: fallbackBackgroundColor ?? "rgba(var(--color-primary-500))",
color: fallbackTextColor ?? "#ffffff",
backgroundColor: fallbackBackgroundColor ?? "var(--background-color-accent-primary)",
color: fallbackTextColor ?? "var(--text-color-on-color)",
}}
>
{fallbackLetter}

6
packages/propel/src/badge/helper.tsx
View file

@ -6,9 +6,9 @@ export const badgeVariants = cva("inline-flex items-center justify-center gap-1
variant: {
neutral: "bg-layer-3 text-tertiary",
brand: "bg-accent-subtle-hover text-accent-primary",
warning: "bg-warning-subtle text-warning",
success: "bg-success-subtle-1 text-success",
danger: "bg-danger-subtle text-danger",
warning: "bg-warning-subtle text-warning-primary",
success: "bg-success-subtle-1 text-success-primary",
danger: "bg-danger-subtle text-danger-primary",
},
size: {
sm: "h-4 px-1 text-caption-sm-medium rounded-sm",

6
packages/propel/src/banner/banner.stories.tsx
View file

@ -44,7 +44,7 @@ function SuccessIcon() {
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-green-600"
className="text-success-primary"
>
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
<polyline points="22 4 12 14.01 9 11.01" />
@ -63,7 +63,7 @@ function ErrorIcon() {
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="text-red-600"
className="text-danger-primary"
>
<circle cx="12" cy="12" r="10" />
<line x1="15" y1="9" x2="9" y2="15" />
@ -116,7 +116,7 @@ function CloseButton({ onClick }: { onClick?: () => void }) {
return (
<button
onClick={onClick}
className="rounded-sm p-1 hover:bg-alpha-black-100 dark:hover:bg-alpha-white-100 transition-colors"
className="rounded-sm p-1 hover:bg-black/5 dark:hover:bg-white/5 transition-colors"
aria-label="Dismiss"
>
<svg

4
packages/propel/src/banner/helper.tsx
View file

@ -14,8 +14,8 @@ export const bannerSizeStyling = {
// TODO: update this with new color once its implemented
// Banner variant styling
export const bannerStyling: IBannerStyling = {
success: "bg-green-500/10",
error: "bg-red-500/10",
success: "bg-success-primary",
error: "bg-danger-primary",
warning: "bg-yellow-500/10",
info: "bg-blue-500/10",
};

2
packages/propel/src/button/helper.tsx
View file

@ -11,7 +11,7 @@ export const buttonVariants = cva(
"error-fill":
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-outline":
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
secondary:
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
tertiary:

2
packages/propel/src/charts/bar-chart/root.tsx
View file

@ -174,7 +174,7 @@ export const BarChart = React.memo(function BarChart<K extends string, T extends
{showTooltip && (
<Tooltip
cursor={{
fill: "var(--color-alpha-black-300)",
fill: "var(--alpha-black-300)",
className: "bg-layer-1 cursor-pointer",
}}
wrapperStyle={{

24
packages/propel/src/context-menu/context-menu.stories.tsx
View file

@ -80,8 +80,8 @@ export const WithIcons: Story = {
Share
</ContextMenu.Item>
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
@ -126,8 +126,8 @@ export const WithSubmenus: Story = {
</ContextMenu.Submenu>
<ContextMenu.Separator />
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
@ -165,8 +165,8 @@ export const DisabledItems: Story = {
Share (Disabled)
</ContextMenu.Item>
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
@ -212,8 +212,8 @@ export const OnFileCard: Story = {
Archive
</ContextMenu.Item>
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
@ -327,8 +327,8 @@ export const NestedSubmenus: Story = {
</ContextMenu.Submenu>
<ContextMenu.Separator />
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
</ContextMenu.Item>
</ContextMenu.Content>
</ContextMenu.Portal>
@ -365,8 +365,8 @@ export const WithKeyboardShortcuts: Story = {
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>
<Trash className="mr-2 h-4 w-4 text-red-500" />
<span className="text-red-500">Delete</span>
<Trash className="mr-2 h-4 w-4 text-danger-primary" />
<span className="text-danger-primary">Delete</span>
<span className="ml-auto text-11 text-placeholder">⌘⌫</span>
</ContextMenu.Item>
</ContextMenu.Content>

10
packages/propel/src/design-system/design-system-philosophy.stories.tsx
View file

@ -42,7 +42,7 @@ const Info: React.FC<{ title: string; children?: React.ReactNode; tone?: "info"
tone = "info",
}) => (
<div
className={`mb-4 rounded-md border ${tone === "warn" ? "border-red-500 bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
className={`mb-4 rounded-md border ${tone === "warn" ? "border-danger-strong bg-red-50 p-4" : "border-subtle bg-layer-1 p-4"}`}
>
<h3 className={`text-primary mb-2 text-16 font-semibold`}>{title}</h3>
<div className="text-secondary text-13">{children}</div>
@ -376,7 +376,7 @@ export const CommonMistakes: Story = {
</Info>
<div className="space-y-6">
<div className="border-2 border-red-500 rounded-md p-4">
<div className="border-2 border-danger-strong rounded-md p-4">
<h4 className="text-primary mb-2 font-semibold">❌ Mistake 1: Nested Surfaces (Same Plane)</h4>
<Surface>
<p className="text-secondary mb-2 text-13">Surface 1</p>
@ -389,7 +389,7 @@ export const CommonMistakes: Story = {
</p>
</div>
<div className="border-2 border-red-500 rounded-md p-4">
<div className="border-2 border-danger-strong rounded-md p-4">
<h4 className="text-primary mb-2 font-semibold">❌ Mistake 2: Wrong Layer-Surface Association</h4>
<Surface>
<p className="text-secondary mb-2 text-13">Surface 1</p>
@ -403,7 +403,7 @@ export const CommonMistakes: Story = {
</p>
</div>
<div className="border-2 border-red-500 rounded-md p-4">
<div className="border-2 border-danger-strong rounded-md p-4">
<h4 className="text-primary mb-2 font-semibold">❌ Mistake 3: Mismatched Hover State</h4>
<Surface>
<div className="bg-layer-1 hover:bg-layer-2-hover rounded-md p-4 transition-colors">
@ -413,7 +413,7 @@ export const CommonMistakes: Story = {
<p className="text-tertiary mt-2 text-11">✅ Fix: Use bg-layer-1 hover:bg-layer-1-hover</p>
</div>
<div className="border-2 border-red-500 rounded-md p-4">
<div className="border-2 border-danger-strong rounded-md p-4">
<h4 className="text-primary mb-2 font-semibold">❌ Mistake 4: Canvas for Pages</h4>
<div className="bg-canvas rounded-md p-4">
<p className="text-secondary text-13">Using bg-canvas for a page or component - WRONG!</p>

2
packages/propel/src/icon-button/helper.tsx
View file

@ -12,7 +12,7 @@ export const iconButtonVariants = cva(
"error-fill":
"bg-danger-primary hover:bg-danger-primary-hover active:bg-danger-primary-active focus:bg-danger-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"error-outline":
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
"bg-layer-2 hover:bg-danger-subtle active:bg-danger-subtle-hover focus:bg-danger-subtle-hover disabled:bg-layer-2 text-danger-primary disabled:text-disabled border border-danger-strong disabled:border-subtle-1",
secondary:
"bg-layer-2 hover:bg-layer-2-hover active:bg-layer-2-active focus:bg-layer-2-active disabled:bg-layer-transparent text-secondary disabled:text-disabled border border-strong disabled:border-subtle-1 shadow-raised-100",
tertiary:

2
packages/propel/src/input/input.tsx
View file

@ -35,7 +35,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":
mode === "transparent",
"rounded-sm border-none bg-transparent ring-0": mode === "true-transparent",
"border-red-500": hasError,
"border-danger-strong": hasError,
"px-1.5 py-1": inputSize === "xs",
"px-3 py-2": inputSize === "sm",
"p-3": inputSize === "md",

2
packages/propel/src/menu/menu.stories.tsx
View file

@ -228,7 +228,7 @@ export const ComplexMenu: Story = {
</Menu.SubMenu>
<div className="my-1 border-t border-gray-200" />
<Menu.MenuItem onClick={() => alert("Logout")}>
<div className="flex items-center gap-2 text-red-500">
<div className="flex items-center gap-2 text-danger-primary">
<LogOut className="h-4 w-4" />
<span>Logout</span>
</div>

4
packages/propel/src/pill/pill.tsx
View file

@ -44,9 +44,9 @@ export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
const pillVariants = {
[EPillVariant.DEFAULT]: "bg-surface-2 text-secondary border border-subtle-1",
[EPillVariant.PRIMARY]: "bg-accent-primary/10 text-accent-primary border border-accent-strong/20",
[EPillVariant.SUCCESS]: "bg-green-50 text-green-700 border border-green-200",
[EPillVariant.SUCCESS]: "bg-green-50 text-success-primary border border-success-subtle",
[EPillVariant.WARNING]: "bg-amber-50 text-amber-700 border border-amber-200",
[EPillVariant.ERROR]: "bg-red-50 text-red-700 border border-red-200",
[EPillVariant.ERROR]: "bg-red-50 text-danger-primary border border-danger-subtle",
[EPillVariant.INFO]: "bg-blue-50 text-blue-700 border border-blue-200",
};

2
packages/propel/src/portal/modal-portal.tsx
View file

@ -95,7 +95,7 @@ export function ModalPortal({
>
{showOverlay && (
<div
className={cn("absolute inset-0 bg-alpha-black-700 transition-opacity duration-300", overlayClassName)}
className={cn("absolute inset-0 bg-black/50 transition-colors duration-300", overlayClassName)}
onClick={handleOverlayClick}
aria-hidden="true"
/>

2
packages/propel/src/scrollarea/scrollarea.stories.tsx
View file

@ -283,7 +283,7 @@ export const DataTable: Story = {
<td className="px-4 py-2">user{i + 1}@example.com</td>
<td className="px-4 py-2">
<span
className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-green-500/20 text-green-500" : "bg-gray-500/20 text-gray-500"}`}
className={`px-2 py-1 rounded-sm text-11 ${i % 3 === 0 ? "bg-success-primary text-success-primary" : "bg-gray-500/20 text-gray-500"}`}
>
{i % 3 === 0 ? "Active" : "Inactive"}
</span>

6
packages/propel/src/spinners/circular-bar-spinner.stories.tsx
View file

@ -49,7 +49,7 @@ export const ExtraLarge: Story = {
export const CustomColor: Story = {
args: {
className: "text-green-500",
className: "text-success-primary",
},
};
@ -91,11 +91,11 @@ export const ColorVariations: Story = {
<p className="mt-2 text-11 text-gray-600">Blue</p>
</div>
<div className="text-center">
<CircularBarSpinner className="text-green-500" height="24px" width="24px" />
<CircularBarSpinner className="text-success-primary" height="24px" width="24px" />
<p className="mt-2 text-11 text-gray-600">Green</p>
</div>
<div className="text-center">
<CircularBarSpinner className="text-red-500" height="24px" width="24px" />
<CircularBarSpinner className="text-danger-primary" height="24px" width="24px" />
<p className="mt-2 text-11 text-gray-600">Red</p>
</div>
<div className="text-center">

4
packages/propel/src/spinners/circular-spinner.stories.tsx
View file

@ -91,11 +91,11 @@ export const ColorVariations: Story = {
<p className="mt-2 text-11 text-gray-600">Blue</p>
</div>
<div className="text-center">
<Spinner className="text-green-500" />
<Spinner className="text-success-primary" />
<p className="mt-2 text-11 text-gray-600">Green</p>
</div>
<div className="text-center">
<Spinner className="text-red-500" />
<Spinner className="text-danger-primary" />
<p className="mt-2 text-11 text-gray-600">Red</p>
</div>
<div className="text-center">

2
packages/propel/src/switch/switch.stories.tsx
View file

@ -185,7 +185,7 @@ export const Interactive: Story = {
<p className="text-13 text-gray-700">
Status: <span className="font-semibold">{enabled ? "Enabled" : "Disabled"}</span>
</p>
{enabled && <p className="mt-2 text-11 text-green-600">Feature is now active and ready to use!</p>}
{enabled && <p className="mt-2 text-11 text-success-primary">Feature is now active and ready to use!</p>}
</div>
</div>
);

12
packages/propel/src/table/table.stories.tsx
View file

@ -139,7 +139,7 @@ export const WithActions: Story = {
<TableCell>Admin</TableCell>
<TableCell className="text-right">
<button className="mr-2 text-blue-500 hover:underline">Edit</button>
<button className="text-red-500 hover:underline">Delete</button>
<button className="text-danger-primary hover:underline">Delete</button>
</TableCell>
</TableRow>
<TableRow>
@ -148,7 +148,7 @@ export const WithActions: Story = {
<TableCell>User</TableCell>
<TableCell className="text-right">
<button className="mr-2 text-blue-500 hover:underline">Edit</button>
<button className="text-red-500 hover:underline">Delete</button>
<button className="text-danger-primary hover:underline">Delete</button>
</TableCell>
</TableRow>
</TableBody>
@ -173,10 +173,10 @@ export const WithBadges: Story = {
<TableRow>
<TableCell>Website Redesign</TableCell>
<TableCell>
<span className="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">In Progress</span>
<span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">In Progress</span>
</TableCell>
<TableCell>
<span className="rounded-full bg-red-100 px-2 py-1 text-11 text-red-800">High</span>
<span className="rounded-full bg-red-100 px-2 py-1 text-11 text-danger-primary">High</span>
</TableCell>
<TableCell>John Doe</TableCell>
</TableRow>
@ -196,7 +196,7 @@ export const WithBadges: Story = {
<span className="rounded-full bg-gray-100 px-2 py-1 text-11 text-gray-800">Completed</span>
</TableCell>
<TableCell>
<span className="rounded-full bg-green-100 px-2 py-1 text-11 text-green-800">Low</span>
<span className="rounded-full bg-green-100 px-2 py-1 text-11 text-success-primary">Low</span>
</TableCell>
<TableCell>Bob Wilson</TableCell>
</TableRow>
@ -297,7 +297,7 @@ export const LargeDataset: Story = {
<TableCell>
<span
className={`rounded-full px-2 py-1 text-11 ${
i % 2 === 0 ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"
i % 2 === 0 ? "bg-green-100 text-success-primary" : "bg-gray-100 text-gray-800"
}`}
>
{i % 2 === 0 ? "Active" : "Inactive"}

2
packages/propel/src/tabs/tabs.stories.tsx
View file

@ -252,7 +252,7 @@ export const DynamicTabs: Story = {
e.stopPropagation();
removeTab(tab.value);
}}
className="ml-2 hover:text-red-500"
className="ml-2 hover:text-danger-primary"
>
×
</button>

2
packages/propel/src/tooltip/tooltip.stories.tsx
View file

@ -237,7 +237,7 @@ export const IconButtons: Story = {
<Tooltip tooltipContent="Delete" position="top">
<button className="rounded-sm p-2 hover:bg-gray-100">
<svg
className="h-5 w-5 text-red-600"
className="h-5 w-5 text-danger-primary"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"