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

chore: update component styles and class names for consistency across the application (#8376)

Browse source
This commit is contained in:
Jayash Tripathy 2025-12-18 16:33:32 +05:30 • committed by GitHub
parent 88f4d8253d
commit c56bb06957
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 134 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,15 +7,15 @@ export const buttonVariants = cva(
variants: {
variant: {
primary:
"bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active focus:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"bg-accent-primary hover:bg-accent-primary-hover active:bg-accent-primary-active disabled:bg-layer-disabled text-on-color disabled:text-disabled",
"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",
"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 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 disabled:bg-layer-2 text-danger 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",
"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:
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active focus:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
"bg-layer-3 hover:bg-layer-3-hover active:bg-layer-3-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
ghost:
"bg-layer-transparent hover:bg-layer-transparent-hover active:bg-layer-transparent-active focus:bg-layer-transparent-active disabled:bg-layer-transparent text-secondary disabled:text-disabled",
link: "px-0 underline text-link-primary hover:text-link-primary-hover active:text-link-primary-hover focus:text-link-primary-hover disabled:text-disabled",

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

@ -37,7 +37,7 @@ function RadarChart<T extends string, K extends string>(props: TRadarChartProps<
<div className={className}>
<ResponsiveContainer width="100%" height="100%">
<CoreRadarChart cx="50%" cy="50%" outerRadius="80%" data={data} margin={margin}>
<PolarGrid stroke="--alpha(var(--border-color-subtle) / 90%)" />
<PolarGrid stroke="var(--border-color-subtle)" />
<PolarAngleAxis dataKey={angleAxis.key} tick={(props) => <CustomRadarAxisTick {...props} />} />
{showTooltip && (
<Tooltip

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

@ -29,7 +29,7 @@ const Input = React.forwardRef(function Input(props: InputProps, ref: React.Forw
type={type}
name={name}
className={cn(
"block rounded-md bg-layer-1 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
"block rounded-md bg-layer-2 text-13 placeholder-tertiary border-subtle-1 focus:outline-none",
{
"rounded-md border-[0.5px]": mode === "primary",
"rounded-sm border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-accent-strong":

39
packages/tailwind-config/variables.css
View file

@ -311,17 +311,17 @@
--background-color-surface-1: var(--color-neutral-white);
--background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-black-100);
--background-color-layer-1-active: var(--color-alpha-black-200);
--background-color-layer-1-selected: var(--color-alpha-black-300);
--background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-neutral-400);
--background-color-layer-1-selected: var(--color-neutral-400);
--background-color-layer-2: var(--color-neutral-white);
--background-color-layer-2-hover: var(--color-alpha-black-100);
--background-color-layer-2-active: var(--color-alpha-black-200);
--background-color-layer-2-selected: var(--color-alpha-black-300);
--background-color-layer-2-hover: var(--color-neutral-100);
--background-color-layer-2-active: var(--color-neutral-200);
--background-color-layer-2-selected: var(--color-neutral-200);
--background-color-layer-3: var(--color-neutral-300);
--background-color-layer-3-hover: var(--color-alpha-black-100);
--background-color-layer-3-active: var(--color-alpha-black-200);
--background-color-layer-3-selected: var(--color-alpha-black-300);
--background-color-layer-3-hover: var(--color-neutral-400);
--background-color-layer-3-active: var(--color-neutral-500);
--background-color-layer-3-selected: var(--color-neutral-500);
--background-color-layer-transparent: var(--color-alpha-white-0);
--background-color-layer-transparent-hover: var(--color-alpha-black-100);
--background-color-layer-transparent-active: var(--color-alpha-black-200);
@ -351,6 +351,7 @@
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-black-500);
--background-color-inverse: var(--color-alpha-black-1000);
/* Border colors */
--border-color-subtle: var(--color-neutral-400);
@ -634,17 +635,17 @@
--background-color-surface-1: var(--color-neutral-100);
--background-color-surface-2: var(--color-neutral-100);
--background-color-layer-1: var(--color-neutral-200);
--background-color-layer-1-hover: var(--color-alpha-white-100);
--background-color-layer-1-active: var(--color-alpha-white-200);
--background-color-layer-1-selected: var(--color-alpha-white-300);
--background-color-layer-1-hover: var(--color-neutral-300);
--background-color-layer-1-active: var(--color-neutral-400);
--background-color-layer-1-selected: var(--color-neutral-400);
--background-color-layer-2: var(--color-neutral-300);
--background-color-layer-2-hover: var(--color-alpha-white-100);
--background-color-layer-2-active: var(--color-alpha-white-200);
--background-color-layer-2-selected: var(--color-alpha-white-300);
--background-color-layer-2-hover: var(--color-neutral-400);
--background-color-layer-2-active: var(--color-neutral-500);
--background-color-layer-2-selected: var(--color-neutral-500);
--background-color-layer-3: var(--color-neutral-400);
--background-color-layer-3-hover: var(--color-alpha-white-100);
--background-color-layer-3-active: var(--color-alpha-white-200);
--background-color-layer-3-selected: var(--color-alpha-white-300);
--background-color-layer-3-hover: var(---color-neutral-500);
--background-color-layer-3-active: var(--color-neutral-600);
--background-color-layer-3-selected: var(--color-neutral-600);
--background-color-layer-transparent: var(--color-alpha-black-0);
--background-color-layer-transparent-hover: var(--color-alpha-white-100);
--background-color-layer-transparent-active: var(--color-alpha-white-200);
@ -674,6 +675,8 @@
--background-color-danger-transparent-active: var(--color-red-100);
--background-color-danger-transparent-selected: var(--color-red-100);
--background-color-backdrop: var(--color-alpha-black-1000);
--background-color-inverse: var(--color-alpha-white-1000);
/* Border colors */
--border-color-subtle: var(--color-neutral-400);

6
packages/ui/src/breadcrumbs/breadcrumbs.tsx
View file

@ -170,9 +170,11 @@ function BreadcrumbItemWrapper(props: BreadcrumbItemWrapperProps) {
<Tooltip tooltipContent={label} position="bottom" disabled={!label || label === "" || disableTooltip}>
<div
className={cn(
"group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium text-tertiary cursor-default",
"group h-full flex items-center gap-2 rounded-sm px-1.5 py-1 text-13 font-medium cursor-default",
{
"hover:text-primary hover:bg-surface-2 cursor-pointer": type === "link" && !isLast,
"text-primary": isLast,
"text-tertiary": !isLast,
"hover:text-primary hover:bg-layer-transparent-hover cursor-pointer": type === "link" && !isLast,
},
className
)}

2
packages/ui/src/dropdowns/custom-select.tsx
View file

@ -94,7 +94,7 @@ function CustomSelect(props: ICustomSelectProps) {
ref={setReferenceElement}
type="button"
className={cn(
"flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-strong",
"flex w-full items-center justify-between gap-1 rounded border border-strong",
{
"px-3 py-2 text-13": input,
"px-2 py-1 text-11": !input,