Merge pull request #22 from maxholman/refactor-variants

refactor: ongoing v1 refactoring

lib/badge.css.ts

@@ -1,14 +1,35 @@
-import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
+import {
+  createGlobalThemeContract,
+  fallbackVar,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { createGlobalThemeMapFn } from './css-helpers.js';
 import { purposeVariantVars } from './purpose.css.js';
-import { globalVars } from './vars.css.js';
+import { baseVars, type Prefix } from './vars.css.js';
+
+/**
+ * Badge vars
+ */
+export const badgeVarsMapFnPrefix = 'badge' satisfies Prefix;
+export const badgeVars = createGlobalThemeContract(
+  {
+    // border: {
+    //   radius: '',
+    //   width: '',
+    // },
+    borderStyle: 'solid',
+  },
+  createGlobalThemeMapFn(badgeVarsMapFnPrefix),
+);
 
 const badgeClassName = style({
-  borderRadius: globalVars.border.radius,
-  borderWidth: globalVars.border.width,
+  borderRadius: baseVars.border.radius,
+  borderWidth: baseVars.border.width,
   borderStyle: 'solid',
 });
 
-export const badgeVariantClassNames = styleVariants(purposeVariantVars, (v) => [
+export const badgePurposeClassNames = styleVariants(purposeVariantVars, (v) => [
   badgeClassName,
   {
     color: v.fgColor,

lib/badges.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, type ForwardedRef } from 'react';
-import { badgeVariantClassNames } from './badge.css.js';
+import { badgePurposeClassNames } from './badge.css.js';
 import { Box } from './box.js';
 import { useStringLikeDetector } from './hooks/use-string-like.js';
 import { Inline, type FlexProps } from './layout.js';
@@ -22,7 +22,7 @@ export const Badge = forwardRef(
         component="span"
         padding="2"
         paddingInline="3"
-        className={[className, variant && badgeVariantClassNames[variant]]}
+        className={[className, variant && badgePurposeClassNames[variant]]}
         {...props}
       >
         {isStringLike(children) ? (

lib/button.css.ts

@@ -6,7 +6,7 @@ import {
 import { calc } from '@vanilla-extract/css-utils';
 import { createGlobalThemeMapFn } from './css-helpers.js';
 import { typedObjectEntries, typedObjectFromEntries } from './utils.js';
-import { propsVars, globalVars } from './vars.css.js';
+import { propsVars, baseVars, type Prefix } from './vars.css.js';
 
 export type ButtonVariant =
   | 'default'
@@ -18,21 +18,22 @@ export type ButtonVariant =
 export type ButtonState = 'active' | 'disabled' | 'hover' | 'rest';
 
 const buttonStateVarsShape = {
+  rest: { bgColor: '', fgColor: '', borderColor: '' },
+  hover: { bgColor: '', fgColor: '', borderColor: '' },
   active: { bgColor: '', fgColor: '', borderColor: '' },
   disabled: { bgColor: '', fgColor: '', borderColor: '' },
-  hover: { bgColor: '', fgColor: '', borderColor: '' },
-  rest: { bgColor: '', fgColor: '', borderColor: '' },
 } satisfies Record<ButtonState, { bgColor: ''; fgColor: ''; borderColor: '' }>;
 
+export const buttonVariantMapFnPrefix = 'button' satisfies Prefix;
 export const buttonVariantVars = createGlobalThemeContract(
   {
-    default: buttonStateVarsShape,
-    danger: buttonStateVarsShape,
     primary: buttonStateVarsShape,
+    default: buttonStateVarsShape,
     invisible: buttonStateVarsShape,
+    danger: buttonStateVarsShape,
     inactive: buttonStateVarsShape,
   } satisfies Record<ButtonVariant, typeof buttonStateVarsShape>,
-  createGlobalThemeMapFn('button'),
+  createGlobalThemeMapFn(buttonVariantMapFnPrefix),
 );
 
 export const buttonVariantClassNames = styleVariants(
@@ -76,8 +77,8 @@ export const buttonClassName = style([
   {
     cursor: 'pointer',
     userSelect: 'none',
-    borderRadius: globalVars.border.radius,
-    borderWidth: globalVars.border.width,
+    borderRadius: baseVars.border.radius,
+    borderWidth: baseVars.border.width,
     selectors: {
       '&[disabled]': {
         pointerEvents: 'none',

lib/button.test.tsx

@@ -16,7 +16,7 @@ describe('Button', () => {
     // ASSERT
     expect(screen.getByRole('button')).toMatchInlineSnapshot(`
       <button
-        class="button_buttonVariantClassNames_default__1sytq440 button_buttonClassName__1sytq44p layout_alignItemsVariants_center__17vpgba1 layout_justifyContentVariants_center__17vpgbad box_viewportStyleVariants_2__fg8qdbmn box_flexWrapVariants_nowrap__fg8qdbm0 box_viewportStyleVariants_5__fg8qdben box_viewportStyleVariants_6__fg8qdbc1 box_flexDirectionVariants_row__fg8qdblt"
+        class="button_buttonVariantClassNames_default__1sytq441 button_buttonClassName__1sytq44p layout_alignItemsVariants_center__17vpgba1 layout_justifyContentVariants_center__17vpgbad box_viewportStyleVariants_2__fg8qdbmn box_flexWrapVariants_nowrap__fg8qdbm0 box_viewportStyleVariants_5__fg8qdben box_viewportStyleVariants_6__fg8qdbc1 box_flexDirectionVariants_row__fg8qdblt"
         type="button"
       >
         <span

lib/callout.css.ts

@@ -1,13 +1,34 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import {
+  createGlobalThemeContract,
+  createVar,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { createGlobalThemeMapFn } from './css-helpers.js';
 import { purposeVariantVars } from './purpose.css.js';
-import { calloutVars, globalVars } from './vars.css.js';
+import { baseVars, type Prefix } from './vars.css.js';
+
+/**
+ * Callout vars
+ */
+export const calloutVarsMapFnPrefix = 'callout' satisfies Prefix;
+export const calloutVars = createGlobalThemeContract(
+  {
+    // border: {
+    //   radius: '',
+    //   width: '',
+    // },
+    padding: '',
+  },
+  createGlobalThemeMapFn(calloutVarsMapFnPrefix),
+);
 
 const calloutClassName = style({
   display: 'grid',
   gridTemplateColumns: 'auto 1fr',
   borderStyle: 'solid',
-  borderRadius: globalVars.border.radius,
-  borderWidth: globalVars.border.width,
+  borderRadius: baseVars.border.radius,
+  borderWidth: baseVars.border.width,
   padding: calloutVars.padding,
 });
 

lib/decorative.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
-import { propsVars, globalVars } from './vars.css.js';
+import { propsVars, baseVars } from './vars.css.js';
 
 export const dividerClassName = style({
   height: propsVars.border.width[1],
-  backgroundColor: globalVars.color.muted.borderColor,
+  backgroundColor: baseVars.color.muted.borderColor,
 });

lib/design-system.css.ts

@@ -1,7 +1,7 @@
 import { style } from '@vanilla-extract/css';
-import { globalVars } from './vars.css.js';
+import { baseVars } from './vars.css.js';
 
 export const designSystemClassName = style({
-  color: globalVars.color.fgColor,
-  backgroundColor: globalVars.color.bgColor,
+  color: baseVars.color.fgColor,
+  backgroundColor: baseVars.color.bgColor,
 });

lib/forms.css.ts

@@ -1,18 +1,32 @@
-import { style } from '@vanilla-extract/css';
+import { createGlobalThemeContract, style } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
+import { createGlobalThemeMapFn } from './css-helpers.js';
 import {
+  focusableClassName,
   focusColorVar,
   focusVisibleClassName,
   focusWidthVar,
-  focusableClassName,
 } from './focusable.css.js';
 import { purposeVariantVars } from './purpose.css.js';
-import {
-  formControlVars,
-  globalVars,
-  propsVars,
-  textVariantVars,
-} from './vars.css.js';
+import { textVariantVars } from './typography.css.js';
+import { baseVars, type Prefix, propsVars } from './vars.css.js';
+
+/**
+ * Form control vars
+ */
+export const formControlVarsMapFnPrefix = 'formControl' satisfies Prefix;
+export const formControlVars = createGlobalThemeContract(
+  {
+    // border: {
+    //   radius: '',
+    //   width: '',
+    // },
+    outline: {
+      width: '',
+    },
+  },
+  createGlobalThemeMapFn(formControlVarsMapFnPrefix),
+);
 
 export const formInputPasswordIcon = style({
   aspectRatio: '1/1',
@@ -69,7 +83,7 @@ export const formInputFocusNotCheckRadioClassName = style([
   focusVisibleClassName,
   {
     outlineWidth: formControlVars.outline.width,
-    borderRadius: globalVars.border.radius,
+    borderRadius: baseVars.border.radius,
     borderColor: purposeVariantVars.default.muted.borderColor,
     selectors: {
       '&:focus': {
@@ -168,7 +182,7 @@ export const formInputCheckboxInput = style([
         // size and color of the check
         aspectRatio: '1/1',
         // height: '0.35em',
-        boxShadow: `inset 1em 1em ${globalVars.color.accent}`,
+        boxShadow: `inset 1em 1em ${baseVars.color.accent}`,
       },
       '&:checked': {
         // background/border of the check
@@ -189,7 +203,7 @@ export const formInputRadioInput = style([
         height: '0.5rem',
         aspectRatio: '1/1',
         borderRadius: '50%',
-        boxShadow: `inset 1em 1em ${globalVars.color.accent}`,
+        boxShadow: `inset 1em 1em ${baseVars.color.accent}`,
       },
     },
   },

lib/link.css.ts

@@ -1,14 +1,76 @@
-import { style, styleVariants } from '@vanilla-extract/css';
-import { focusRadiusVar, focusableClassName } from './focusable.css.js';
 import {
-  globalVars,
-  propsVars,
-  textLinkVars,
-  textVariantVars,
-} from './vars.css.js';
+  createGlobalThemeContract,
+  style,
+  styleVariants,
+} from '@vanilla-extract/css';
+import { createGlobalThemeMapFn } from './css-helpers.js';
+import { focusableClassName, focusRadiusVar } from './focusable.css.js';
+import { textVariantVars } from './typography.css.js';
+import { baseVars, type Prefix, propsVars } from './vars.css.js';
 
 export type LinkVariant = 'strong' | 'normal' | 'weak' | 'none';
 
+/**
+ * text links vars
+ */
+export const textLinkVarsMapFnPrefix = 'textlink' satisfies Prefix;
+export const textLinkVars = createGlobalThemeContract(
+  {
+    strong: {
+      fontWeight: '',
+      rest: {
+        fgColor: '',
+        textDecoration: '',
+      },
+      hover: {
+        fgColor: '',
+        textDecoration: '',
+      },
+    },
+    normal: {
+      fontWeight: '',
+      rest: {
+        fgColor: '',
+        textDecoration: '',
+      },
+      hover: {
+        fgColor: '',
+        textDecoration: '',
+      },
+    },
+    weak: {
+      fontWeight: '',
+      rest: {
+        fgColor: '',
+        textDecoration: '',
+      },
+      hover: {
+        fgColor: '',
+        textDecoration: '',
+      },
+    },
+    none: {
+      fontWeight: '',
+      rest: {
+        fgColor: '',
+        textDecoration: '',
+      },
+      hover: {
+        fgColor: '',
+        textDecoration: '',
+      },
+    },
+  } satisfies Record<
+    LinkVariant,
+    {
+      fontWeight: string;
+      rest: { fgColor: string; textDecoration: string };
+      hover: { fgColor: string; textDecoration: string };
+    }
+  >,
+  createGlobalThemeMapFn(textLinkVarsMapFnPrefix),
+);
+
 const textLinkClassName = style([
   focusableClassName,
   {
@@ -28,11 +90,11 @@ const textLinkClassName = style([
 export const linkStyleVariantLegacy = styleVariants(
   {
     strong: {
-      color: globalVars.color.accent,
+      color: baseVars.color.accent,
       fontWeight: textVariantVars.fontWeight.medium,
     },
     normal: {
-      color: globalVars.color.accent,
+      color: baseVars.color.accent,
     },
     none: {
       // color: linkColorVar,
@@ -41,7 +103,7 @@ export const linkStyleVariantLegacy = styleVariants(
       textDecoration: 'underline',
       selectors: {
         '&:hover': {
-          color: globalVars.color.accent,
+          color: baseVars.color.accent,
         },
       },
     },

lib/modal.css.ts

@@ -1,7 +1,7 @@
 import { style, type StyleRule } from '@vanilla-extract/css';
 import { precomputedViewportRules, type Viewport } from './box.css.js';
 import { typedObjectEntries, typedObjectFromEntries } from './utils.js';
-import { propsVars, globalVars } from './vars.css.js';
+import { propsVars, baseVars } from './vars.css.js';
 
 // WARN: ordering is important here as it affects the generated CSS
 // it should be the opposite order of viewportSizes (I think)
@@ -76,10 +76,10 @@ export const modalClassName = style({
 });
 
 export const modalInnerClassName = style({
-  backgroundColor: globalVars.color.bgColor,
-  borderRadius: globalVars.border.radius,
-  outlineColor: globalVars.color.borderColor,
-  outlineWidth: globalVars.border.width,
+  backgroundColor: baseVars.color.bgColor,
+  borderRadius: baseVars.border.radius,
+  outlineColor: baseVars.color.borderColor,
+  outlineWidth: baseVars.border.width,
   outlineStyle: 'solid',
 });