Skip to content

Commit b33e62a

Browse files
farazcskfarazcsk
committed
chore: remove intermdiate base variables in favour of inline utils
1 parent cdac081 commit b33e62a

File tree

3 files changed

+1025
-461
lines changed

3 files changed

+1025
-461
lines changed

‎src/base.css‎

Lines changed: 4 additions & 201 deletions
Original file line numberDiff line numberDiff line change
@@ -233,215 +233,18 @@
233233
* These change based on light/dark mode
234234
* ============================================ */
235235

236-
/* Text Colors */
237-
/* TODO: These should use our skimmable colors for headings */
238-
--text-heading-xl: var(--color-neutral-900);
239-
--text-heading-lg: var(--color-neutral-900);
240-
--text-heading-md: var(--color-neutral-900);
241-
--text-heading-sm: var(--color-neutral-800);
242-
--text-heading-xs: var(--color-neutral-800);
243-
244-
--text-display: var(--color-base-black);
245-
246-
--text-highlight: var(--color-neutral-900);
247-
--text-default: var(--color-neutral-700);
248-
--text-muted: var(--color-neutral-900-64);
249-
--text-placeholder: var(--color-neutral-900-56);
250-
--text-disabled: var(--color-neutral-900-40);
251-
252-
/* Fixed dark text */
253-
--text-highlight-fixed-dark: var(--color-base-black);
254-
--text-default-fixed-dark: var(--color-neutral-900);
255-
--text-muted-fixed-dark: var(--color-neutral-900-64);
256-
257-
/* Fixed light text */
258-
--text-highlight-fixed-light: var(--color-base-white);
259-
--text-default-fixed-light: var(--color-neutral-100);
260-
--text-muted-fixed-light: var(--color-neutral-100-64);
261-
262-
/* Inverse text */
263-
--text-highlight-inverse: var(--color-base-white);
264-
--text-default-inverse: var(--color-neutral-100);
265-
--text-muted-inverse: var(--color-neutral-100-64);
266-
267-
--text-link-primary: var(--color-brand-blue-600);
268-
--text-link-secondary: var(--color-base-black);
269-
--text-link-visited: var(--color-feedback-violet-600);
270-
271-
--text-default-destructive: var(--color-feedback-red-700);
272-
--text-link-destructive: var(--color-feedback-red-900);
273-
274-
--text-default-information: var(--color-feedback-blue-700);
275-
--text-link-information: var(--color-feedback-blue-900);
276-
277-
--text-default-success: var(--color-feedback-green-700);
278-
--text-link-success: var(--color-feedback-green-900);
279-
280-
--text-default-warning: var(--color-feedback-orange-700);
281-
--text-link-warning: var(--color-feedback-orange-900);
282-
283-
284-
--text-body: var(--color-neutral-900);
285-
--text-body-muted: var(--color-neutral-400);
286-
287-
/* Warning State */
288-
--bg-warning: var(--color-feedback-orange-100);
289-
--text-warning: var(--color-feedback-orange-700);
290-
--border-warning: var(--color-feedback-orange-300);
291-
292-
293-
/* Link utilities */
294-
--underline-link-primary: var(--color-brand-blue-600);
295-
--underline-link-secondary: var(--color-base-black);
296-
--underline-link-visited: var(--color-feedback-violet-600);
297-
298-
299236
/* ============================================
300-
* BORDER TOKENS
237+
* NOTE: Text/Background/Border intermediate variables removed
238+
* All utilities now use primitive tokens directly
239+
* This improves performance and clarity
301240
* ============================================ */
302241

303-
/* Border utilities - neutral states */
304-
--border-neutral-active: var(--color-neutral-600);
305-
--border-neutral-hover: var(--color-neutral-500);
306-
--border-neutral-default: var(--color-neutral-400);
307-
--border-neutral-disabled: var(--color-neutral-400-40);
308-
--border-neutral-softest: var(--color-neutral-200);
309-
--border-neutral-inset: var(--color-base-white);
310-
--border-neutral-alpha: hsla(
311-
0,
312-
0%,
313-
0%,
314-
0.2
315-
); /* Black with 20% opacity for light mode */
316-
317-
318-
/* Border Destructive utilities */
319-
--border-destructive-highlight: var(--color-feedback-red-600);
320-
--border-destructive-default: var(--color-feedback-red-500);
321-
--border-destructive-muted: var(--color-feedback-red-500-56);
322-
--border-destructive-softest: var(--color-feedback-red-300);
323-
324-
/* Border Information utilities */
325-
--border-information-highlight: var(--color-feedback-blue-600);
326-
--border-information-default: var(--color-feedback-blue-500);
327-
--border-information-muted: var(--color-feedback-blue-500-56);
328-
--border-information-softest: var(--color-feedback-blue-300);
329242

330-
/* Border Success utilities */
331-
--border-success-highlight: var(--color-feedback-green-600);
332-
--border-success-default: var(--color-feedback-green-500);
333-
--border-success-muted: var(--color-feedback-green-500-56);
334-
--border-success-softest: var(--color-feedback-green-300);
335-
336-
/* Border Warning utilities */
337-
--border-warning-highlight: var(--color-feedback-orange-600);
338-
--border-warning-default: var(--color-feedback-orange-500);
339-
--border-warning-muted: var(--color-feedback-orange-500-56);
340-
--border-warning-softest: var(--color-feedback-orange-300);
341-
342-
/* Border Focus utilities */
243+
/* Border Focus - still needed for focus states */
343244
--border-focus: var(--color-brand-blue-600);
344245

345246

346-
/* ============================================
347-
* FILLS
348-
* ============================================ */
349-
350-
/* Neutrals */
351-
--fill-neutral-highlight: var(--color-base-black);
352-
--fill-neutral-active: var(--color-neutral-900);
353-
--fill-neutral-default: var(--color-neutral-800);
354-
--fill-neutral-muted: var(--color-neutral-800-56);
355-
356-
/* Fixed dark fill */
357-
--fill-neutral-highlight-fixed-dark: var(--color-base-black);
358-
--fill-neutral-default-fixed-dark: var(--color-neutral-800);
359-
--fill-neutral-muted-fixed-dark: var(--color-neutral-900-56);
360-
361-
/* Fixed light fill */
362-
--fill-neutral-highlight-fixed-light: var(--color-base-white);
363-
--fill-neutral-default-fixed-light: var(--color-neutral-100);
364-
--fill-neutral-muted-fixed-light: var(--color-neutral-100-56);
365-
366-
/* Inverse fill */
367-
--fill-neutral-highlight-inverse: var(--color-base-white);
368-
--fill-neutral-default-inverse: var(--color-neutral-100);
369-
--fill-neutral-muted-inverse: var(--color-neutral-100-56);
370-
371-
/* Links */
372-
--fill-link-primary: var(--color-brand-blue-600);
373-
--fill-link-secondary: var(--color-base-black);
374-
--fill-link-visited: var(--color-feedback-violet-600);
375-
376-
/* Destructive */
377-
--fill-destructive-highlight: var(--color-feedback-red-600);
378-
--fill-destructive-default: var(--color-feedback-red-500);
379-
--fill-destructive-muted: var(--color-feedback-red-600-56);
380-
381-
/* Information */
382-
--fill-information-highlight: var(--color-feedback-blue-600);
383-
--fill-information-default: var(--color-feedback-blue-500);
384-
--fill-information-muted: var(--color-feedback-blue-500-56);
385-
386-
/* Success */
387-
--fill-success-highlight: var(--color-feedback-green-600);
388-
--fill-success-default: var(--color-feedback-green-500);
389-
--fill-success-muted: var(--color-feedback-green-500-56);
390-
391-
/* Warning */
392-
--fill-warning-highlight: var(--color-feedback-orange-600);
393-
--fill-warning-default: var(--color-feedback-orange-500);
394-
--fill-warning-muted: var(--color-feedback-orange-500-56);
395-
396-
/* ============================================
397-
* Strokes
398-
* ============================================ */
399-
400-
/* Neutrals */
401-
--stroke-neutral-highlight: var(--color-base-black);
402-
--stroke-neutral-active: var(--color-neutral-900);
403-
--stroke-neutral-default: var(--color-neutral-800);
404-
--stroke-neutral-muted: var(--color-neutral-800-56);
405-
406-
/* Fixed dark stroke */
407-
--stroke-neutral-highlight-fixed-dark: var(--color-base-black);
408-
--stroke-neutral-default-fixed-dark: var(--color-neutral-800);
409-
--stroke-neutral-muted-fixed-dark: var(--color-neutral-900-56);
410-
411-
/* Fixed light stroke */
412-
--stroke-neutral-highlight-fixed-light: var(--color-base-white);
413-
--stroke-neutral-default-fixed-light: var(--color-neutral-100);
414-
--stroke-neutral-muted-fixed-light: var(--color-neutral-100-56);
415-
416-
/* Inverse stroke */
417-
--stroke-neutral-highlight-inverse: var(--color-base-white);
418-
--stroke-neutral-default-inverse: var(--color-neutral-100);
419-
--stroke-neutral-muted-inverse: var(--color-neutral-100-56);
420247

421-
/* Links */
422-
--stroke-link-primary: var(--color-brand-blue-600);
423-
--stroke-link-secondary: var(--color-base-black);
424-
--stroke-link-visited: var(--color-feedback-violet-600);
425-
426-
/* Destructive */
427-
--stroke-destructive-highlight: var(--color-feedback-red-600);
428-
--stroke-destructive-default: var(--color-feedback-red-500);
429-
--stroke-destructive-muted: var(--color-feedback-red-600-56);
430-
431-
/* Information */
432-
--stroke-information-highlight: var(--color-feedback-blue-600);
433-
--stroke-information-default: var(--color-feedback-blue-500);
434-
--stroke-information-muted: var(--color-feedback-blue-500-56);
435-
436-
/* Success */
437-
--stroke-success-highlight: var(--color-feedback-green-600);
438-
--stroke-success-default: var(--color-feedback-green-500);
439-
--stroke-success-muted: var(--color-feedback-green-500-56);
440-
441-
/* Warning */
442-
--stroke-warning-highlight: var(--color-feedback-orange-600);
443-
--stroke-warning-default: var(--color-feedback-orange-500);
444-
--stroke-warning-muted: var(--color-feedback-orange-500-56);
445248

446249
/* ============================================
447250
* BACKGROUNDS

‎src/components/Button/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const ButtonText = React.forwardRef<
7878
ButtonText.displayName = 'ButtonText'
7979

8080
const buttonVariants = cva(
81-
'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(--bg-surface-primary-default)] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
81+
'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',
8282
{
8383
variants: {
8484
context: {
@@ -87,7 +87,7 @@ const buttonVariants = cva(
8787
},
8888
variant: {
8989
brand:
90-
'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(--bg-surface-primary-default)]',
90+
'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)]',
9191
primary:
9292
'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',
9393
secondary:

0 commit comments

Comments
 (0)