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

2
packages/ui/src/auth-form/auth-confirm-password-input.tsx
View file

@ -73,7 +73,7 @@ export function AuthConfirmPasswordInput({
onBlur={handleBlur}
autoComplete="on"
/>
{confirmPassword && passwordsMatch && <p className="text-13 text-green-500">Passwords match</p>}
{confirmPassword && passwordsMatch && <p className="text-13 text-success-primary">Passwords match</p>}
</div>
);
}

4
packages/ui/src/auth-form/auth-input.tsx
View file

@ -42,7 +42,7 @@ export function AuthInput({
className={cn(
"rounded-md disable-autofill-style h-6 w-full placeholder:text-14 placeholder:text-placeholder p-0 border-none",
{
"border-red-500": error,
"border-danger-strong": error,
},
className
)}
@ -58,7 +58,7 @@ export function AuthInput({
)}
</div>
{error && <p className={cn("text-13 text-red-500", errorClassName)}>{error}</p>}
{error && <p className={cn("text-13 text-danger-primary", errorClassName)}>{error}</p>}
</div>
);
}

24
packages/ui/src/badge/helper.tsx
View file

@ -81,14 +81,14 @@ export const badgeStyling: IBadgeStyling = {
disabled: `cursor-not-allowed !bg-green-300`,
},
"accent-success": {
default: `text-green-500 bg-green-50`,
hover: `hover:bg-green-100 hover:text-green-600`,
disabled: `cursor-not-allowed !text-green-300`,
default: `text-success-primary bg-green-50`,
hover: `hover:bg-green-100 hover:text-success-primary`,
disabled: `cursor-not-allowed text-success-secondary!`,
},
"outline-success": {
default: `text-green-500 bg-surface-1 border border-green-500`,
hover: `hover:text-green-600 hover:bg-green-50`,
disabled: `cursor-not-allowed !text-green-300 border-green-300`,
default: `text-success-primary bg-surface-1 border border-success-strong`,
hover: `hover:text-success-primary hover:bg-green-50`,
disabled: `cursor-not-allowed text-success-secondary! border-success-subtle`,
},
warning: {
@ -113,14 +113,14 @@ export const badgeStyling: IBadgeStyling = {
disabled: `cursor-not-allowed !bg-red-300`,
},
"accent-destructive": {
default: `text-red-500 bg-red-50`,
hover: `hover:bg-red-100 hover:text-red-600`,
disabled: `cursor-not-allowed !text-red-300`,
default: `text-danger-primary bg-red-50`,
hover: `hover:bg-red-100 hover:text-danger-primary`,
disabled: `cursor-not-allowed text-danger-secondary!`,
},
"outline-destructive": {
default: `text-red-500 bg-surface-1 border border-red-500`,
hover: `hover:text-red-600 hover:bg-red-50`,
disabled: `cursor-not-allowed !text-red-300 border-red-300`,
default: `text-danger-primary bg-surface-1 border border-danger-strong`,
hover: `hover:text-danger-primary hover:bg-red-50`,
disabled: `cursor-not-allowed text-danger-secondary! border-danger-subtle`,
},
};

20
packages/ui/src/button/helper.tsx
View file

@ -74,27 +74,27 @@ export const buttonStyling: IButtonStyling = {
disabled: `cursor-not-allowed bg-layer-disabled! text-disabled!`,
},
"accent-danger": {
default: `text-red-500 bg-red-50`,
hover: `hover:text-red-600 hover:bg-red-100`,
pressed: `focus:text-red-500 focus:bg-red-100`,
default: `text-danger-primary bg-red-50`,
hover: `hover:text-danger-primary hover:bg-red-100`,
pressed: `focus:text-danger-primary focus:bg-red-100`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"outline-danger": {
default: `bg-layer-2 text-danger border border-danger-strong`,
default: `bg-layer-2 text-danger-primary border border-danger-strong`,
hover: `hover:bg-danger-subtle`,
pressed: `focus:bg-danger-subtle-hover`,
disabled: `cursor-not-allowed text-disabled! border-subtle-1!`,
},
"link-danger": {
default: `text-red-500 bg-surface-1`,
hover: `hover:text-red-400`,
pressed: `focus:text-red-400`,
default: `text-danger-primary bg-surface-1`,
hover: `hover:text-danger-primary`,
pressed: `focus:text-danger-primary`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"tertiary-danger": {
default: `text-red-500 bg-surface-1 border border-red-200`,
hover: `hover:bg-red-50 hover:border-red-300`,
pressed: `focus:text-red-400`,
default: `text-danger-primary bg-surface-1 border border-danger-subtle`,
hover: `hover:bg-red-50 hover:border-danger-subtle`,
pressed: `focus:text-danger-primary`,
disabled: `cursor-not-allowed !bg-layer-1 !text-placeholder`,
},
"link-neutral": {

2
packages/ui/src/form-fields/input.tsx
View file

@ -36,7 +36,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",

4
packages/ui/src/form-fields/password/helper.tsx
View file

@ -20,7 +20,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
case E_PASSWORD_STRENGTH.LENGTH_NOT_VALID:
return {
message: "Password is too short",
textColor: "text-red-500",
textColor: "text-danger-primary",
activeFragments: 1,
};
case E_PASSWORD_STRENGTH.STRENGTH_NOT_VALID:
@ -32,7 +32,7 @@ export const getStrengthInfo = (strength: E_PASSWORD_STRENGTH): StrengthInfo =>
case E_PASSWORD_STRENGTH.STRENGTH_VALID:
return {
message: "Password is strong",
textColor: "text-green-500",
textColor: "text-success-primary",
activeFragments: 3,
};
default:

4
packages/ui/src/form-fields/password/indicator.tsx
View file

@ -53,14 +53,14 @@ export function PasswordStrengthIndicator({
<div className="flex items-center justify-center p-0.5">
<CircleCheck
className={cn("h-3 w-3 flex-shrink-0", {
"text-green-500": criterion.isValid,
"text-success-primary": criterion.isValid,
"text-primary": !criterion.isValid,
})}
/>
</div>
<span
className={cn("!text-11", {
"text-green-500": criterion.isValid,
"text-success-primary": criterion.isValid,
"text-primary": !criterion.isValid,
})}
>

2
packages/ui/src/form-fields/password/password-input.tsx
View file

@ -34,7 +34,7 @@ export function PasswordInput({
"w-full px-3 py-2 pr-10 text-secondary border rounded-md bg-surface-1 focus:outline-none focus:ring-2 focus:ring-accent-strong placeholder:text-placeholder focus:border-transparent transition-all duration-200",
{
"border-strong": !error,
"border-red-500": error,
"border-danger-strong": error,
},
className
)}

4
packages/ui/src/form-fields/root.tsx
View file

@ -50,8 +50,8 @@ export function ValidationMessage({ type, message, className }: ValidationMessag
className={cn(
"text-13",
{
"text-red-500": type === "error",
"text-green-500": type === "success",
"text-danger-primary": type === "error",
"text-success-primary": type === "success",
},
className
)}

2
packages/ui/src/form-fields/textarea.tsx
View file

@ -46,7 +46,7 @@ const TextArea = React.forwardRef(function TextArea(
"px-1.5 py-1": textAreaSize === "xs",
"px-3 py-2": textAreaSize === "sm",
"p-3": textAreaSize === "md",
"border-red-500": hasError,
"border-danger-strong": hasError,
"bg-red-100": hasError && mode === "primary",
},
className

2
packages/ui/src/modals/alert-modal.tsx
View file

@ -42,7 +42,7 @@ const BUTTON_VARIANTS: Record<TModalVariant, TButtonVariant> = {
};
const VARIANT_CLASSES: Record<TModalVariant, string> = {
danger: "bg-red-500/20 text-red-500",
danger: "bg-danger-primary text-danger-primary",
primary: "bg-accent-primary/20 text-accent-primary",
};