Skip to content

Commit 91f3d1a

Browse files
maxholmanmaxholman
authored
Merge pull request #22 from maxholman/refactor-variants
refactor: ongoing v1 refactoring
2 parents 030ebde + 203d3ae commit 91f3d1a

24 files changed

Lines changed: 723 additions & 559 deletions

‎lib/badge.css.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,35 @@
1-
import { fallbackVar, style, styleVariants } from '@vanilla-extract/css';
1+
import {
2+
createGlobalThemeContract,
3+
fallbackVar,
4+
style,
5+
styleVariants,
6+
} from '@vanilla-extract/css';
7+
import { createGlobalThemeMapFn } from './css-helpers.js';
28
import { purposeVariantVars } from './purpose.css.js';
3-
import { globalVars } from './vars.css.js';
9+
import { baseVars, type Prefix } from './vars.css.js';
10+
11+
/**
12+
* Badge vars
13+
*/
14+
export const badgeVarsMapFnPrefix = 'badge' satisfies Prefix;
15+
export const badgeVars = createGlobalThemeContract(
16+
{
17+
// border: {
18+
// radius: '',
19+
// width: '',
20+
// },
21+
borderStyle: 'solid',
22+
},
23+
createGlobalThemeMapFn(badgeVarsMapFnPrefix),
24+
);
425

526
const badgeClassName = style({
6-
borderRadius: globalVars.border.radius,
7-
borderWidth: globalVars.border.width,
27+
borderRadius: baseVars.border.radius,
28+
borderWidth: baseVars.border.width,
829
borderStyle: 'solid',
930
});
1031

11-
export const badgeVariantClassNames = styleVariants(purposeVariantVars, (v) => [
32+
export const badgePurposeClassNames = styleVariants(purposeVariantVars, (v) => [
1233
badgeClassName,
1334
{
1435
color: v.fgColor,

‎lib/badges.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { forwardRef, type ForwardedRef } from 'react';
2-
import { badgeVariantClassNames } from './badge.css.js';
2+
import { badgePurposeClassNames } from './badge.css.js';
33
import { Box } from './box.js';
44
import { useStringLikeDetector } from './hooks/use-string-like.js';
55
import { Inline, type FlexProps } from './layout.js';
@@ -22,7 +22,7 @@ export const Badge = forwardRef(
2222
component="span"
2323
padding="2"
2424
paddingInline="3"
25-
className={[className, variant && badgeVariantClassNames[variant]]}
25+
className={[className, variant && badgePurposeClassNames[variant]]}
2626
{...props}
2727
>
2828
{isStringLike(children) ? (

‎lib/button.css.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
import { calc } from '@vanilla-extract/css-utils';
77
import { createGlobalThemeMapFn } from './css-helpers.js';
88
import { typedObjectEntries, typedObjectFromEntries } from './utils.js';
9-
import { propsVars, globalVars } from './vars.css.js';
9+
import { propsVars, baseVars, type Prefix } from './vars.css.js';
1010

1111
export type ButtonVariant =
1212
| 'default'
@@ -18,21 +18,22 @@ export type ButtonVariant =
1818
export type ButtonState = 'active' | 'disabled' | 'hover' | 'rest';
1919

2020
const buttonStateVarsShape = {
21+
rest: { bgColor: '', fgColor: '', borderColor: '' },
22+
hover: { bgColor: '', fgColor: '', borderColor: '' },
2123
active: { bgColor: '', fgColor: '', borderColor: '' },
2224
disabled: { bgColor: '', fgColor: '', borderColor: '' },
23-
hover: { bgColor: '', fgColor: '', borderColor: '' },
24-
rest: { bgColor: '', fgColor: '', borderColor: '' },
2525
} satisfies Record<ButtonState, { bgColor: ''; fgColor: ''; borderColor: '' }>;
2626

27+
export const buttonVariantMapFnPrefix = 'button' satisfies Prefix;
2728
export const buttonVariantVars = createGlobalThemeContract(
2829
{
29-
default: buttonStateVarsShape,
30-
danger: buttonStateVarsShape,
3130
primary: buttonStateVarsShape,
31+
default: buttonStateVarsShape,
3232
invisible: buttonStateVarsShape,
33+
danger: buttonStateVarsShape,
3334
inactive: buttonStateVarsShape,
3435
} satisfies Record<ButtonVariant, typeof buttonStateVarsShape>,
35-
createGlobalThemeMapFn('button'),
36+
createGlobalThemeMapFn(buttonVariantMapFnPrefix),
3637
);
3738

3839
export const buttonVariantClassNames = styleVariants(
@@ -76,8 +77,8 @@ export const buttonClassName = style([
7677
{
7778
cursor: 'pointer',
7879
userSelect: 'none',
79-
borderRadius: globalVars.border.radius,
80-
borderWidth: globalVars.border.width,
80+
borderRadius: baseVars.border.radius,
81+
borderWidth: baseVars.border.width,
8182
selectors: {
8283
'&[disabled]': {
8384
pointerEvents: 'none',

‎lib/button.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe('Button', () => {
1616
// ASSERT
1717
expect(screen.getByRole('button')).toMatchInlineSnapshot(`
1818
<button
19-
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"
19+
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"
2020
type="button"
2121
>
2222
<span

‎lib/callout.css.ts‎

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,34 @@
1-
import { createVar, style, styleVariants } from '@vanilla-extract/css';
1+
import {
2+
createGlobalThemeContract,
3+
createVar,
4+
style,
5+
styleVariants,
6+
} from '@vanilla-extract/css';
7+
import { createGlobalThemeMapFn } from './css-helpers.js';
28
import { purposeVariantVars } from './purpose.css.js';
3-
import { calloutVars, globalVars } from './vars.css.js';
9+
import { baseVars, type Prefix } from './vars.css.js';
10+
11+
/**
12+
* Callout vars
13+
*/
14+
export const calloutVarsMapFnPrefix = 'callout' satisfies Prefix;
15+
export const calloutVars = createGlobalThemeContract(
16+
{
17+
// border: {
18+
// radius: '',
19+
// width: '',
20+
// },
21+
padding: '',
22+
},
23+
createGlobalThemeMapFn(calloutVarsMapFnPrefix),
24+
);
425

526
const calloutClassName = style({
627
display: 'grid',
728
gridTemplateColumns: 'auto 1fr',
829
borderStyle: 'solid',
9-
borderRadius: globalVars.border.radius,
10-
borderWidth: globalVars.border.width,
30+
borderRadius: baseVars.border.radius,
31+
borderWidth: baseVars.border.width,
1132
padding: calloutVars.padding,
1233
});
1334

‎lib/decorative.css.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { style } from '@vanilla-extract/css';
2-
import { propsVars, globalVars } from './vars.css.js';
2+
import { propsVars, baseVars } from './vars.css.js';
33

44
export const dividerClassName = style({
55
height: propsVars.border.width[1],
6-
backgroundColor: globalVars.color.muted.borderColor,
6+
backgroundColor: baseVars.color.muted.borderColor,
77
});

‎lib/design-system.css.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { style } from '@vanilla-extract/css';
2-
import { globalVars } from './vars.css.js';
2+
import { baseVars } from './vars.css.js';
33

44
export const designSystemClassName = style({
5-
color: globalVars.color.fgColor,
6-
backgroundColor: globalVars.color.bgColor,
5+
color: baseVars.color.fgColor,
6+
backgroundColor: baseVars.color.bgColor,
77
});

‎lib/forms.css.ts‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,32 @@
1-
import { style } from '@vanilla-extract/css';
1+
import { createGlobalThemeContract, style } from '@vanilla-extract/css';
22
import { calc } from '@vanilla-extract/css-utils';
3+
import { createGlobalThemeMapFn } from './css-helpers.js';
34
import {
5+
focusableClassName,
46
focusColorVar,
57
focusVisibleClassName,
68
focusWidthVar,
7-
focusableClassName,
89
} from './focusable.css.js';
910
import { purposeVariantVars } from './purpose.css.js';
10-
import {
11-
formControlVars,
12-
globalVars,
13-
propsVars,
14-
textVariantVars,
15-
} from './vars.css.js';
11+
import { textVariantVars } from './typography.css.js';
12+
import { baseVars, type Prefix, propsVars } from './vars.css.js';
13+
14+
/**
15+
* Form control vars
16+
*/
17+
export const formControlVarsMapFnPrefix = 'formControl' satisfies Prefix;
18+
export const formControlVars = createGlobalThemeContract(
19+
{
20+
// border: {
21+
// radius: '',
22+
// width: '',
23+
// },
24+
outline: {
25+
width: '',
26+
},
27+
},
28+
createGlobalThemeMapFn(formControlVarsMapFnPrefix),
29+
);
1630

1731
export const formInputPasswordIcon = style({
1832
aspectRatio: '1/1',
@@ -69,7 +83,7 @@ export const formInputFocusNotCheckRadioClassName = style([
6983
focusVisibleClassName,
7084
{
7185
outlineWidth: formControlVars.outline.width,
72-
borderRadius: globalVars.border.radius,
86+
borderRadius: baseVars.border.radius,
7387
borderColor: purposeVariantVars.default.muted.borderColor,
7488
selectors: {
7589
'&:focus': {
@@ -168,7 +182,7 @@ export const formInputCheckboxInput = style([
168182
// size and color of the check
169183
aspectRatio: '1/1',
170184
// height: '0.35em',
171-
boxShadow: `inset 1em 1em ${globalVars.color.accent}`,
185+
boxShadow: `inset 1em 1em ${baseVars.color.accent}`,
172186
},
173187
'&:checked': {
174188
// background/border of the check
@@ -189,7 +203,7 @@ export const formInputRadioInput = style([
189203
height: '0.5rem',
190204
aspectRatio: '1/1',
191205
borderRadius: '50%',
192-
boxShadow: `inset 1em 1em ${globalVars.color.accent}`,
206+
boxShadow: `inset 1em 1em ${baseVars.color.accent}`,
193207
},
194208
},
195209
},

‎lib/link.css.ts‎

Lines changed: 72 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,76 @@
1-
import { style, styleVariants } from '@vanilla-extract/css';
2-
import { focusRadiusVar, focusableClassName } from './focusable.css.js';
31
import {
4-
globalVars,
5-
propsVars,
6-
textLinkVars,
7-
textVariantVars,
8-
} from './vars.css.js';
2+
createGlobalThemeContract,
3+
style,
4+
styleVariants,
5+
} from '@vanilla-extract/css';
6+
import { createGlobalThemeMapFn } from './css-helpers.js';
7+
import { focusableClassName, focusRadiusVar } from './focusable.css.js';
8+
import { textVariantVars } from './typography.css.js';
9+
import { baseVars, type Prefix, propsVars } from './vars.css.js';
910

1011
export type LinkVariant = 'strong' | 'normal' | 'weak' | 'none';
1112

13+
/**
14+
* text links vars
15+
*/
16+
export const textLinkVarsMapFnPrefix = 'textlink' satisfies Prefix;
17+
export const textLinkVars = createGlobalThemeContract(
18+
{
19+
strong: {
20+
fontWeight: '',
21+
rest: {
22+
fgColor: '',
23+
textDecoration: '',
24+
},
25+
hover: {
26+
fgColor: '',
27+
textDecoration: '',
28+
},
29+
},
30+
normal: {
31+
fontWeight: '',
32+
rest: {
33+
fgColor: '',
34+
textDecoration: '',
35+
},
36+
hover: {
37+
fgColor: '',
38+
textDecoration: '',
39+
},
40+
},
41+
weak: {
42+
fontWeight: '',
43+
rest: {
44+
fgColor: '',
45+
textDecoration: '',
46+
},
47+
hover: {
48+
fgColor: '',
49+
textDecoration: '',
50+
},
51+
},
52+
none: {
53+
fontWeight: '',
54+
rest: {
55+
fgColor: '',
56+
textDecoration: '',
57+
},
58+
hover: {
59+
fgColor: '',
60+
textDecoration: '',
61+
},
62+
},
63+
} satisfies Record<
64+
LinkVariant,
65+
{
66+
fontWeight: string;
67+
rest: { fgColor: string; textDecoration: string };
68+
hover: { fgColor: string; textDecoration: string };
69+
}
70+
>,
71+
createGlobalThemeMapFn(textLinkVarsMapFnPrefix),
72+
);
73+
1274
const textLinkClassName = style([
1375
focusableClassName,
1476
{
@@ -28,11 +90,11 @@ const textLinkClassName = style([
2890
export const linkStyleVariantLegacy = styleVariants(
2991
{
3092
strong: {
31-
color: globalVars.color.accent,
93+
color: baseVars.color.accent,
3294
fontWeight: textVariantVars.fontWeight.medium,
3395
},
3496
normal: {
35-
color: globalVars.color.accent,
97+
color: baseVars.color.accent,
3698
},
3799
none: {
38100
// color: linkColorVar,
@@ -41,7 +103,7 @@ export const linkStyleVariantLegacy = styleVariants(
41103
textDecoration: 'underline',
42104
selectors: {
43105
'&:hover': {
44-
color: globalVars.color.accent,
106+
color: baseVars.color.accent,
45107
},
46108
},
47109
},

‎lib/modal.css.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { style, type StyleRule } from '@vanilla-extract/css';
22
import { precomputedViewportRules, type Viewport } from './box.css.js';
33
import { typedObjectEntries, typedObjectFromEntries } from './utils.js';
4-
import { propsVars, globalVars } from './vars.css.js';
4+
import { propsVars, baseVars } from './vars.css.js';
55

66
// WARN: ordering is important here as it affects the generated CSS
77
// it should be the opposite order of viewportSizes (I think)
@@ -76,10 +76,10 @@ export const modalClassName = style({
7676
});
7777

7878
export const modalInnerClassName = style({
79-
backgroundColor: globalVars.color.bgColor,
80-
borderRadius: globalVars.border.radius,
81-
outlineColor: globalVars.color.borderColor,
82-
outlineWidth: globalVars.border.width,
79+
backgroundColor: baseVars.color.bgColor,
80+
borderRadius: baseVars.border.radius,
81+
outlineColor: baseVars.color.borderColor,
82+
outlineWidth: baseVars.border.width,
8383
outlineStyle: 'solid',
8484
});
8585

0 commit comments

Comments
 (0)