Skip to content

chore: remove intermdiate base variables in favour of inline utils #281

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

chore: remove intermdiate base variables in favour of inline utils #281

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 4 additions & 201 deletions src/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -233,215 +233,18 @@
* These change based on light/dark mode
* ============================================ */

/* Text Colors */
/* TODO: These should use our skimmable colors for headings */
--text-heading-xl: var(--color-neutral-900);
--text-heading-lg: var(--color-neutral-900);
--text-heading-md: var(--color-neutral-900);
--text-heading-sm: var(--color-neutral-800);
--text-heading-xs: var(--color-neutral-800);

--text-display: var(--color-base-black);

--text-highlight: var(--color-neutral-900);
--text-default: var(--color-neutral-700);
--text-muted: var(--color-neutral-900-64);
--text-placeholder: var(--color-neutral-900-56);
--text-disabled: var(--color-neutral-900-40);

/* Fixed dark text */
--text-highlight-fixed-dark: var(--color-base-black);
--text-default-fixed-dark: var(--color-neutral-900);
--text-muted-fixed-dark: var(--color-neutral-900-64);

/* Fixed light text */
--text-highlight-fixed-light: var(--color-base-white);
--text-default-fixed-light: var(--color-neutral-100);
--text-muted-fixed-light: var(--color-neutral-100-64);

/* Inverse text */
--text-highlight-inverse: var(--color-base-white);
--text-default-inverse: var(--color-neutral-100);
--text-muted-inverse: var(--color-neutral-100-64);

--text-link-primary: var(--color-brand-blue-600);
--text-link-secondary: var(--color-base-black);
--text-link-visited: var(--color-feedback-violet-600);

--text-default-destructive: var(--color-feedback-red-700);
--text-link-destructive: var(--color-feedback-red-900);

--text-default-information: var(--color-feedback-blue-700);
--text-link-information: var(--color-feedback-blue-900);

--text-default-success: var(--color-feedback-green-700);
--text-link-success: var(--color-feedback-green-900);

--text-default-warning: var(--color-feedback-orange-700);
--text-link-warning: var(--color-feedback-orange-900);


--text-body: var(--color-neutral-900);
--text-body-muted: var(--color-neutral-400);

/* Warning State */
--bg-warning: var(--color-feedback-orange-100);
--text-warning: var(--color-feedback-orange-700);
--border-warning: var(--color-feedback-orange-300);


/* Link utilities */
--underline-link-primary: var(--color-brand-blue-600);
--underline-link-secondary: var(--color-base-black);
--underline-link-visited: var(--color-feedback-violet-600);


/* ============================================
* BORDER TOKENS
* NOTE: Text/Background/Border intermediate variables removed
* All utilities now use primitive tokens directly
* This improves performance and clarity
* ============================================ */

/* Border utilities - neutral states */
--border-neutral-active: var(--color-neutral-600);
--border-neutral-hover: var(--color-neutral-500);
--border-neutral-default: var(--color-neutral-400);
--border-neutral-disabled: var(--color-neutral-400-40);
--border-neutral-softest: var(--color-neutral-200);
--border-neutral-inset: var(--color-base-white);
--border-neutral-alpha: hsla(
0,
0%,
0%,
0.2
); /* Black with 20% opacity for light mode */


/* Border Destructive utilities */
--border-destructive-highlight: var(--color-feedback-red-600);
--border-destructive-default: var(--color-feedback-red-500);
--border-destructive-muted: var(--color-feedback-red-500-56);
--border-destructive-softest: var(--color-feedback-red-300);

/* Border Information utilities */
--border-information-highlight: var(--color-feedback-blue-600);
--border-information-default: var(--color-feedback-blue-500);
--border-information-muted: var(--color-feedback-blue-500-56);
--border-information-softest: var(--color-feedback-blue-300);

/* Border Success utilities */
--border-success-highlight: var(--color-feedback-green-600);
--border-success-default: var(--color-feedback-green-500);
--border-success-muted: var(--color-feedback-green-500-56);
--border-success-softest: var(--color-feedback-green-300);

/* Border Warning utilities */
--border-warning-highlight: var(--color-feedback-orange-600);
--border-warning-default: var(--color-feedback-orange-500);
--border-warning-muted: var(--color-feedback-orange-500-56);
--border-warning-softest: var(--color-feedback-orange-300);

/* Border Focus utilities */
/* Border Focus - still needed for focus states */
--border-focus: var(--color-brand-blue-600);


/* ============================================
* FILLS
* ============================================ */

/* Neutrals */
--fill-neutral-highlight: var(--color-base-black);
--fill-neutral-active: var(--color-neutral-900);
--fill-neutral-default: var(--color-neutral-800);
--fill-neutral-muted: var(--color-neutral-800-56);

/* Fixed dark fill */
--fill-neutral-highlight-fixed-dark: var(--color-base-black);
--fill-neutral-default-fixed-dark: var(--color-neutral-800);
--fill-neutral-muted-fixed-dark: var(--color-neutral-900-56);

/* Fixed light fill */
--fill-neutral-highlight-fixed-light: var(--color-base-white);
--fill-neutral-default-fixed-light: var(--color-neutral-100);
--fill-neutral-muted-fixed-light: var(--color-neutral-100-56);

/* Inverse fill */
--fill-neutral-highlight-inverse: var(--color-base-white);
--fill-neutral-default-inverse: var(--color-neutral-100);
--fill-neutral-muted-inverse: var(--color-neutral-100-56);

/* Links */
--fill-link-primary: var(--color-brand-blue-600);
--fill-link-secondary: var(--color-base-black);
--fill-link-visited: var(--color-feedback-violet-600);

/* Destructive */
--fill-destructive-highlight: var(--color-feedback-red-600);
--fill-destructive-default: var(--color-feedback-red-500);
--fill-destructive-muted: var(--color-feedback-red-600-56);

/* Information */
--fill-information-highlight: var(--color-feedback-blue-600);
--fill-information-default: var(--color-feedback-blue-500);
--fill-information-muted: var(--color-feedback-blue-500-56);

/* Success */
--fill-success-highlight: var(--color-feedback-green-600);
--fill-success-default: var(--color-feedback-green-500);
--fill-success-muted: var(--color-feedback-green-500-56);

/* Warning */
--fill-warning-highlight: var(--color-feedback-orange-600);
--fill-warning-default: var(--color-feedback-orange-500);
--fill-warning-muted: var(--color-feedback-orange-500-56);

/* ============================================
* Strokes
* ============================================ */

/* Neutrals */
--stroke-neutral-highlight: var(--color-base-black);
--stroke-neutral-active: var(--color-neutral-900);
--stroke-neutral-default: var(--color-neutral-800);
--stroke-neutral-muted: var(--color-neutral-800-56);

/* Fixed dark stroke */
--stroke-neutral-highlight-fixed-dark: var(--color-base-black);
--stroke-neutral-default-fixed-dark: var(--color-neutral-800);
--stroke-neutral-muted-fixed-dark: var(--color-neutral-900-56);

/* Fixed light stroke */
--stroke-neutral-highlight-fixed-light: var(--color-base-white);
--stroke-neutral-default-fixed-light: var(--color-neutral-100);
--stroke-neutral-muted-fixed-light: var(--color-neutral-100-56);

/* Inverse stroke */
--stroke-neutral-highlight-inverse: var(--color-base-white);
--stroke-neutral-default-inverse: var(--color-neutral-100);
--stroke-neutral-muted-inverse: var(--color-neutral-100-56);

/* Links */
--stroke-link-primary: var(--color-brand-blue-600);
--stroke-link-secondary: var(--color-base-black);
--stroke-link-visited: var(--color-feedback-violet-600);

/* Destructive */
--stroke-destructive-highlight: var(--color-feedback-red-600);
--stroke-destructive-default: var(--color-feedback-red-500);
--stroke-destructive-muted: var(--color-feedback-red-600-56);

/* Information */
--stroke-information-highlight: var(--color-feedback-blue-600);
--stroke-information-default: var(--color-feedback-blue-500);
--stroke-information-muted: var(--color-feedback-blue-500-56);

/* Success */
--stroke-success-highlight: var(--color-feedback-green-600);
--stroke-success-default: var(--color-feedback-green-500);
--stroke-success-muted: var(--color-feedback-green-500-56);

/* Warning */
--stroke-warning-highlight: var(--color-feedback-orange-600);
--stroke-warning-default: var(--color-feedback-orange-500);
--stroke-warning-muted: var(--color-feedback-orange-500-56);

/* ============================================
* BACKGROUNDS
Expand Down
16 changes: 15 additions & 1 deletion src/components/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,24 @@ import { cn } from '@/lib/utils'
import { ButtonSize, ButtonVariant } from '@/types'

const buttonVariants = cva(
'inline-flex normal-case items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
'relative inline-flex items-center justify-center whitespace-nowrap text-sm font-mono uppercase transition-all select-none cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-[var(--color-base-white)] dark:focus-visible:ring-offset-[var(--color-base-black)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
{
variants: {
variant: {
brand:
'relative bg-btn-brand hover:bg-btn-brand-hover text-btn-brand hover:text-btn-brand-hover disabled:bg-btn-brand-disabled disabled:text-btn-brand-disabled disabled:opacity-100 before:absolute before:content-[""] before:-z-10 before:pointer-events-none [--gradient-rotation:220deg] before:bg-[conic-gradient(from_var(--gradient-rotation),hsl(334,54%,13%),hsl(4,67%,47%),hsl(23,96%,62%),hsl(68,52%,72%),hsl(108,24%,41%),hsl(154,100%,7%),hsl(220,100%,12%),hsl(214,69%,50%),hsl(216,100%,80%),hsl(334,54%,13%))] after:absolute after:content-[""] after:-z-20 after:pointer-events-none after:opacity-0 after:transition-opacity after:duration-300 hover:after:opacity-100 after:bg-[conic-gradient(from_var(--gradient-rotation),hsl(334,54%,13%),hsl(4,67%,47%),hsl(23,96%,62%),hsl(68,52%,72%),hsl(108,24%,41%),hsl(154,100%,7%),hsl(220,100%,12%),hsl(214,69%,50%),hsl(216,100%,80%),hsl(334,54%,13%))] after:blur-sm focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-[var(--border-focus)] focus-visible:ring-offset-[var(--color-base-white)] dark:focus-visible:ring-offset-[var(--color-base-black)]',
primary:
'bg-btn-primary text-btn-primary shadow-[0px_2px_1px_0px_rgba(255,255,255,0.1)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.2)_inset] hover:bg-btn-primary-hover hover:text-btn-primary-hover hover:shadow-[0px_2px_1px_0px_rgba(255,255,255,0.08)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.25)_inset] active:bg-btn-primary-active active:text-btn-primary-active active:shadow-none disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled disabled:opacity-100',
secondary:
'bg-btn-secondary text-btn-secondary shadow-[0px_2px_1px_0px_rgba(255,255,255,0.25)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.1)_inset] hover:bg-btn-secondary-hover hover:text-btn-secondary-hover hover:shadow-[0px_2px_1px_0px_rgba(255,255,255,0.2)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.15)_inset] active:bg-btn-secondary-active active:text-btn-secondary-active active:shadow-none disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled disabled:opacity-100',
tertiary:
'bg-transparent text-btn-tertiary hover:bg-btn-secondary-hover hover:text-btn-tertiary-hover active:bg-btn-secondary-active active:text-btn-tertiary-active disabled:text-btn-tertiary-disabled disabled:opacity-100',
'destructive-primary':
'bg-btn-destructive text-btn-destructive-primary shadow-[0px_2px_1px_0px_rgba(255,255,255,0.1)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.2)_inset] hover:bg-btn-destructive-hover hover:text-btn-destructive-primary-hover hover:shadow-[0px_2px_1px_0px_rgba(255,255,255,0.08)_inset,0px_-2px_1px_0px_rgba(0,0,0,0.25)_inset] active:bg-btn-destructive-active active:text-btn-destructive-primary-active active:shadow-none disabled:bg-btn-destructive-disabled disabled:text-btn-destructive-primary-disabled disabled:opacity-100',
'destructive-secondary':
'bg-transparent text-btn-destructive-secondary hover:text-btn-destructive-secondary-hover active:text-btn-destructive-secondary-active disabled:text-btn-destructive-secondary-disabled disabled:opacity-100',

/** @deprecated Use 'primary' instead */
default:
'bg-surface-primary-inverse text-default-inverse shadow-xs hover:bg-surface-tertiary-inverse',
destructive:
Expand Down
Loading
Loading