Skip to content

Commit 6241dd4

Browse files
cschroetercschroeter
committed
refactor layer styles
1 parent fc32343 commit 6241dd4

14 files changed

Lines changed: 95 additions & 121 deletions

File tree

‎packages/preset/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ export const preset = definePreset({
3535
extend: {
3636
light: ':root &, .light &',
3737
invalid: '&:is(:user-invalid, [data-invalid], [aria-invalid=true])',
38+
hover: '&:not(:disabled):hover',
39+
active: '&:not(:disabled):active',
40+
checked: '&:is([data-state=checked], [data-state=indeterminate])',
3841
},
3942
},
4043
theme: {

‎packages/preset/src/recipes/avatar.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,30 +96,22 @@ export const avatar = defineSlotRecipe({
9696
variant: {
9797
solid: {
9898
root: {
99-
background: 'colorPalette.solid.bg',
100-
color: 'colorPalette.solid.fg',
99+
layerStyle: 'solid',
101100
},
102101
},
103102
surface: {
104103
root: {
105-
background: 'colorPalette.surface.bg',
106-
color: 'colorPalette.surface.fg',
107-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
108-
shadowColor: 'colorPalette.surface.border',
104+
layerStyle: 'surface',
109105
},
110106
},
111107
subtle: {
112108
root: {
113-
background: 'colorPalette.subtle.bg',
114-
color: 'colorPalette.subtle.fg',
109+
layerStyle: 'subtle',
115110
},
116111
},
117112
outline: {
118113
root: {
119-
background: 'colorPalette.outline.bg',
120-
color: 'colorPalette.outline.fg',
121-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
122-
shadowColor: 'colorPalette.outline.border',
114+
layerStyle: 'outline',
123115
},
124116
},
125117
},

‎packages/preset/src/recipes/badge.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,16 @@ export const badge = defineRecipe({
1919
variants: {
2020
variant: {
2121
solid: {
22-
background: 'colorPalette.solid.bg',
23-
color: 'colorPalette.solid.fg',
22+
layerStyle: 'solid',
2423
},
2524
surface: {
26-
background: 'colorPalette.surface.bg',
27-
color: 'colorPalette.surface.fg',
28-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
29-
shadowColor: 'colorPalette.surface.border',
25+
layerStyle: 'surface',
3026
},
3127
subtle: {
32-
background: 'colorPalette.subtle.bg',
33-
color: 'colorPalette.subtle.fg',
28+
layerStyle: 'subtle',
3429
},
3530
outline: {
36-
background: 'colorPalette.outline.bg',
37-
color: 'colorPalette.outline.fg',
38-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
39-
shadowColor: 'colorPalette.outline.border',
31+
layerStyle: 'outline',
4032
},
4133
},
4234
size: {

‎packages/preset/src/recipes/button.ts‎

Lines changed: 5 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -38,62 +38,19 @@ export const button = defineRecipe({
3838
variants: {
3939
variant: {
4040
solid: {
41-
background: 'colorPalette.solid.bg',
42-
color: 'colorPalette.solid.fg',
43-
_hover: {
44-
background: 'colorPalette.solid.bg.hover',
45-
},
46-
_active: {
47-
background: 'colorPalette.solid.bg.active',
48-
},
41+
layerStyle: 'solid.interactive',
4942
},
5043
surface: {
51-
background: 'colorPalette.surface.bg',
52-
color: 'colorPalette.surface.fg',
53-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
54-
shadowColor: 'colorPalette.surface.border',
55-
_hover: {
56-
background: 'colorPalette.surface.bg.hover',
57-
shadowColor: 'colorPalette.surface.border.hover',
58-
},
59-
_active: {
60-
background: 'colorPalette.surface.bg.active',
61-
shadowColor: 'colorPalette.surface.border.active',
62-
},
44+
layerStyle: 'surface.interactive',
6345
},
6446
subtle: {
65-
background: 'colorPalette.subtle.bg',
66-
color: 'colorPalette.subtle.fg',
67-
_hover: {
68-
background: 'colorPalette.subtle.bg.hover',
69-
},
70-
_active: {
71-
background: 'colorPalette.subtle.bg.active',
72-
},
47+
layerStyle: 'subtle.interactive',
7348
},
7449
outline: {
75-
background: 'colorPalette.outline.bg',
76-
color: 'colorPalette.outline.fg',
77-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
78-
shadowColor: 'colorPalette.outline.border',
79-
_hover: {
80-
background: 'colorPalette.outline.bg.hover',
81-
shadowColor: 'colorPalette.outline.border.hover',
82-
},
83-
_active: {
84-
background: 'colorPalette.outline.bg.active',
85-
shadowColor: 'colorPalette.outline.border.active',
86-
},
50+
layerStyle: 'outline.interactive',
8751
},
8852
plain: {
89-
background: 'colorPalette.plain.bg',
90-
color: 'colorPalette.plain.fg',
91-
_hover: {
92-
background: 'colorPalette.plain.bg.hover',
93-
},
94-
_active: {
95-
background: 'colorPalette.plain.bg.active',
96-
},
53+
layerStyle: 'plain.interactive',
9754
},
9855
},
9956
size: {

‎packages/preset/src/recipes/checkbox.ts‎

Lines changed: 7 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,8 @@ export const checkbox = defineSlotRecipe({
6060
control: {
6161
control: {
6262
borderColor: 'border.default',
63-
'&:is([data-state=checked], [data-state=indeterminate])': {
64-
background: 'colorPalette.solid.bg',
65-
color: 'colorPalette.solid.fg',
66-
borderColor: 'transparent',
63+
_checked: {
64+
layerStyle: 'solid',
6765
},
6866
_invalid: {
6967
background: 'bg.error',
@@ -73,30 +71,25 @@ export const checkbox = defineSlotRecipe({
7371
},
7472
surface: {
7573
control: {
76-
background: 'colorPalette.surface.bg',
77-
color: 'colorPalette.surface.fg',
78-
borderColor: 'colorPalette.surface.border',
74+
layerStyle: 'surface',
7975
},
8076
},
8177
subtle: {
8278
control: {
83-
background: 'colorPalette.subtle.bg',
84-
color: 'colorPalette.subtle.fg',
79+
layerStyle: 'subtle',
8580
},
8681
},
8782
outline: {
8883
control: {
89-
background: 'colorPalette.outline.bg',
90-
borderColor: 'gray.a7',
91-
color: 'colorPalette.outline.fg',
92-
'&:is([data-state=checked], [data-state=indeterminate])': {
84+
layerStyle: 'outline',
85+
_checked: {
9386
borderColor: 'colorPalette.solid',
9487
},
9588
},
9689
},
9790
plain: {
9891
control: {
99-
color: 'colorPalette.plain.fg',
92+
layerStyle: 'plain',
10093
},
10194
},
10295
},

‎packages/preset/src/recipes/code.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,19 @@ export const code = defineRecipe({
1919
variants: {
2020
variant: {
2121
solid: {
22-
background: 'colorPalette.solid.bg',
23-
color: 'colorPalette.solid.fg',
22+
layerStyle: 'solid',
2423
},
2524
surface: {
26-
background: 'colorPalette.surface.bg',
27-
color: 'colorPalette.surface.fg',
28-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
29-
shadowColor: 'colorPalette.surface.border',
25+
layerStyle: 'surface',
3026
},
3127
subtle: {
32-
background: 'colorPalette.subtle.bg',
33-
color: 'colorPalette.subtle.fg',
28+
layerStyle: 'subtle',
3429
},
3530
outline: {
36-
background: 'colorPalette.outline.bg',
37-
color: 'colorPalette.outline.fg',
38-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
39-
shadowColor: 'colorPalette.outline.border',
31+
layerStyle: 'outline',
4032
},
4133
plain: {
42-
color: 'colorPalette.a11',
34+
layerStyle: 'plain',
4335
},
4436
},
4537
size: {

‎packages/preset/src/recipes/kbd.ts‎

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,19 @@ export const kbd = defineRecipe({
1919
variants: {
2020
variant: {
2121
solid: {
22-
background: 'colorPalette.solid.bg',
23-
color: 'colorPalette.solid.fg',
22+
layerStyle: 'solid',
2423
},
2524
surface: {
26-
background: 'colorPalette.surface.bg',
27-
color: 'colorPalette.surface.fg',
28-
borderWidth: '1px',
29-
borderBottomWidth: '2px',
30-
borderColor: 'colorPalette.surface.border',
25+
layerStyle: 'surface',
3126
},
3227
outline: {
33-
background: 'colorPalette.outline.bg',
34-
color: 'colorPalette.outline.fg',
35-
shadow: 'inset 0 0 0px 1px var(--shadow-color)',
36-
shadowColor: 'colorPalette.outline.border',
28+
layerStyle: 'outline',
3729
},
3830
subtle: {
39-
background: 'colorPalette.subtle.bg',
40-
color: 'colorPalette.subtle.fg',
31+
layerStyle: 'subtle',
4132
},
4233
plain: {
43-
color: 'colorPalette.plain.fg',
34+
layerStyle: 'plain',
4435
},
4536
},
4637
size: {

‎packages/preset/src/theme/layer-styles.ts‎

Lines changed: 56 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,64 @@
1-
import { defineLayerStyles } from '@pandacss/dev'
1+
import { defineLayerStyles, defineStyles } from '@pandacss/dev'
2+
3+
const solid = defineStyles({
4+
background: 'colorPalette.solid.bg',
5+
color: 'colorPalette.solid.fg',
6+
borderColor: 'transparent',
7+
})
8+
9+
const surface = defineStyles({
10+
'--border-color': '{colors.colorPalette.surface.border}',
11+
background: 'colorPalette.surface.bg',
12+
color: 'colorPalette.surface.fg',
13+
boxShadow: 'inset 0 0 0px 1px var(--border-color)',
14+
})
15+
16+
const subtle = defineStyles({
17+
background: 'colorPalette.subtle.bg',
18+
color: 'colorPalette.subtle.fg',
19+
})
20+
21+
const outline = defineStyles({
22+
'--border-color': '{colors.colorPalette.outline.border}',
23+
background: 'colorPalette.outline.bg',
24+
boxShadow: 'inset 0 0 0px 1px var(--border-color)',
25+
color: 'colorPalette.outline.fg',
26+
})
27+
28+
const plain = defineStyles({
29+
background: 'colorPalette.plain.bg',
30+
color: 'colorPalette.plain.fg',
31+
})
32+
33+
const createInteractiveVariant = (base: any, variant: string) => ({
34+
...base,
35+
_hover: {
36+
'--border-color': `{colors.colorPalette.${variant}.border.hover}`,
37+
background: `colorPalette.${variant}.bg.hover`,
38+
},
39+
_active: {
40+
'--border-color': `{colors.colorPalette.${variant}.border.active}`,
41+
background: `colorPalette.${variant}.bg.active`,
42+
},
43+
})
244

345
export const layerStyles = defineLayerStyles({
46+
solid: { value: solid },
47+
surface: { value: surface },
48+
subtle: { value: subtle },
49+
outline: { value: outline },
50+
plain: { value: plain },
51+
52+
'solid.interactive': { value: createInteractiveVariant(solid, 'solid') },
53+
'surface.interactive': { value: createInteractiveVariant(surface, 'surface') },
54+
'subtle.interactive': { value: createInteractiveVariant(subtle, 'subtle') },
55+
'outline.interactive': { value: createInteractiveVariant(outline, 'outline') },
56+
'plain.interactive': { value: createInteractiveVariant(plain, 'plain') },
57+
458
disabled: {
559
value: {
660
cursor: 'not-allowed',
7-
opacity: '0.6',
61+
opacity: '0.67',
862
filter: 'grayscale(100%)',
963
},
1064
},

‎website/public/registry/components/react/avatar.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
{
2121
"type": "recipe",
2222
"fileName": "avatar.ts",
23-
"content": "import { avatarAnatomy } from '@ark-ui/react/avatar'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const avatar = defineSlotRecipe({\n className: 'avatar',\n slots: avatarAnatomy.keys(),\n base: {\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: 'medium',\n position: 'relative',\n verticalAlign: 'top',\n flexShrink: '0',\n userSelect: 'none',\n width: 'var(--avatar-size)',\n height: 'var(--avatar-size)',\n fontSize: 'var(--avatar-font-size)',\n borderRadius: 'var(--avatar-radius)',\n '&[data-group-item]': {\n borderWidth: '0.125em',\n borderColor: 'bg.default',\n },\n },\n fallback: {\n lineHeight: '1',\n textTransform: 'uppercase',\n fontWeight: 'medium',\n fontSize: 'var(--avatar-font-size)',\n borderRadius: 'var(--avatar-radius)',\n },\n image: {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n borderRadius: 'var(--avatar-radius)',\n },\n },\n defaultVariants: {\n size: 'md',\n shape: 'full',\n variant: 'subtle',\n },\n variants: {\n size: {\n full: {\n root: {\n '--avatar-size': '100%',\n '--avatar-font-size': '100%',\n },\n },\n '2xs': {\n root: {\n '--avatar-font-size': 'fontSizes.2xs',\n '--avatar-size': 'sizes.6',\n },\n },\n xs: {\n root: {\n '--avatar-font-size': 'fontSizes.xs',\n '--avatar-size': 'sizes.8',\n },\n },\n sm: {\n root: {\n '--avatar-font-size': 'fontSizes.sm',\n '--avatar-size': 'sizes.9',\n },\n },\n md: {\n root: {\n '--avatar-font-size': 'fontSizes.md',\n '--avatar-size': 'sizes.10',\n },\n },\n lg: {\n root: {\n '--avatar-font-size': 'fontSizes.md',\n '--avatar-size': 'sizes.11',\n },\n },\n xl: {\n root: {\n '--avatar-font-size': 'fontSizes.lg',\n '--avatar-size': 'sizes.12',\n },\n },\n '2xl': {\n root: {\n '--avatar-font-size': 'fontSizes.xl',\n '--avatar-size': 'sizes.16',\n },\n },\n },\n variant: {\n solid: {\n root: {\n background: 'colorPalette.solid.bg',\n color: 'colorPalette.solid.fg',\n },\n },\n surface: {\n root: {\n background: 'colorPalette.surface.bg',\n color: 'colorPalette.surface.fg',\n shadow: 'inset 0 0 0px 1px var(--shadow-color)',\n shadowColor: 'colorPalette.surface.border',\n },\n },\n subtle: {\n root: {\n background: 'colorPalette.subtle.bg',\n color: 'colorPalette.subtle.fg',\n },\n },\n outline: {\n root: {\n background: 'colorPalette.outline.bg',\n color: 'colorPalette.outline.fg',\n shadow: 'inset 0 0 0px 1px var(--shadow-color)',\n shadowColor: 'colorPalette.outline.border',\n },\n },\n },\n borderless: {\n true: {\n root: {\n '&[data-group-item]': {\n borderWidth: '0px',\n },\n },\n },\n },\n shape: {\n square: {},\n rounded: {\n root: { '--avatar-radius': 'radii.l3' },\n },\n full: {\n root: { '--avatar-radius': 'radii.full' },\n },\n },\n },\n})\n",
23+
"content": "import { avatarAnatomy } from '@ark-ui/react/avatar'\nimport { defineSlotRecipe } from '@pandacss/dev'\n\nexport const avatar = defineSlotRecipe({\n className: 'avatar',\n slots: avatarAnatomy.keys(),\n base: {\n root: {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontWeight: 'medium',\n position: 'relative',\n verticalAlign: 'top',\n flexShrink: '0',\n userSelect: 'none',\n width: 'var(--avatar-size)',\n height: 'var(--avatar-size)',\n fontSize: 'var(--avatar-font-size)',\n borderRadius: 'var(--avatar-radius)',\n '&[data-group-item]': {\n borderWidth: '0.125em',\n borderColor: 'bg.default',\n },\n },\n fallback: {\n lineHeight: '1',\n textTransform: 'uppercase',\n fontWeight: 'medium',\n fontSize: 'var(--avatar-font-size)',\n borderRadius: 'var(--avatar-radius)',\n },\n image: {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n borderRadius: 'var(--avatar-radius)',\n },\n },\n defaultVariants: {\n size: 'md',\n shape: 'full',\n variant: 'subtle',\n },\n variants: {\n size: {\n full: {\n root: {\n '--avatar-size': '100%',\n '--avatar-font-size': '100%',\n },\n },\n '2xs': {\n root: {\n '--avatar-font-size': 'fontSizes.2xs',\n '--avatar-size': 'sizes.6',\n },\n },\n xs: {\n root: {\n '--avatar-font-size': 'fontSizes.xs',\n '--avatar-size': 'sizes.8',\n },\n },\n sm: {\n root: {\n '--avatar-font-size': 'fontSizes.sm',\n '--avatar-size': 'sizes.9',\n },\n },\n md: {\n root: {\n '--avatar-font-size': 'fontSizes.md',\n '--avatar-size': 'sizes.10',\n },\n },\n lg: {\n root: {\n '--avatar-font-size': 'fontSizes.md',\n '--avatar-size': 'sizes.11',\n },\n },\n xl: {\n root: {\n '--avatar-font-size': 'fontSizes.lg',\n '--avatar-size': 'sizes.12',\n },\n },\n '2xl': {\n root: {\n '--avatar-font-size': 'fontSizes.xl',\n '--avatar-size': 'sizes.16',\n },\n },\n },\n variant: {\n solid: {\n root: {\n layerStyle: 'solid',\n },\n },\n surface: {\n root: {\n layerStyle: 'surface',\n },\n },\n subtle: {\n root: {\n layerStyle: 'subtle',\n },\n },\n outline: {\n root: {\n layerStyle: 'outline',\n },\n },\n },\n borderless: {\n true: {\n root: {\n '&[data-group-item]': {\n borderWidth: '0px',\n },\n },\n },\n },\n shape: {\n square: {},\n rounded: {\n root: { '--avatar-radius': 'radii.l3' },\n },\n full: {\n root: { '--avatar-radius': 'radii.full' },\n },\n },\n },\n})\n",
2424
"indexFile": {
2525
"imports": [
2626
{

0 commit comments

Comments
 (0)