Skip to content

Commit 860cc7d

Browse files
segunadebayosegunadebayo
authored
feat: support radial and conic gradients (#3319)
* feat: implement * chore: update
1 parent a6421bd commit 860cc7d

File tree

16 files changed

+467
-45
lines changed

16 files changed

+467
-45
lines changed

‎.changeset/famous-kiwis-glow.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
'@pandacss/preset-base': minor
3+
---
4+
5+
Add support for `bgLinear`, `bgRadial` and `bgConic` properties.
6+
7+
### `bgLinear`
8+
9+
```tsx
10+
<div
11+
className={css({
12+
bgLinear: 'to-r',
13+
gradientFrom: 'cyan.500',
14+
gradientTo: 'blue.500',
15+
})}
16+
/>
17+
```
18+
19+
### `bgRadial`
20+
21+
```tsx
22+
<div
23+
className={css({
24+
bgRadial: 'in srgb',
25+
gradientFrom: 'pink.400',
26+
gradientFromPosition: '40%',
27+
gradientTo: 'fuchsia.700',
28+
})}
29+
/>
30+
```
31+
32+
### `bgConic`
33+
34+
```tsx
35+
<div
36+
className={css({
37+
bgConic: 'in srgb',
38+
gradientFrom: 'blue.600',
39+
gradientTo: 'sky.400',
40+
gradientToPosition: '50%',
41+
})}
42+
/>
43+
```
44+
45+
Add support for `boxSize` property that maps to `width` and `height` properties.
46+
47+
```tsx
48+
<div className={css({ boxSize: '24' })} />
49+
```

‎packages/core/__tests__/rule-processor.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1117,9 +1117,9 @@ describe('rule processor', () => {
11171117
}
11181118
11191119
.bg-grad_to-b {
1120-
--gradient-stops: var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
1121-
--gradient: var(--gradient-via-stops, var(--gradient-stops));
1122-
background-image: linear-gradient(to bottom, var(--gradient));
1120+
--gradient-stops: var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position));
1121+
--gradient-position: to bottom;
1122+
background-image: linear-gradient(var(--gradient-stops));
11231123
}
11241124
11251125
.grad-from_rgb\\(200_200_200_\\/_\\.4\\) {

‎packages/core/__tests__/style-decoder.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2282,9 +2282,9 @@ describe('style decoder', () => {
22822282
"layer": undefined,
22832283
"result": {
22842284
".bg-grad_to-b": {
2285-
"--gradient": "var(--gradient-via-stops, var(--gradient-stops))",
2286-
"--gradient-stops": "var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
2287-
"backgroundImage": "linear-gradient(to bottom, var(--gradient))",
2285+
"--gradient-position": "to bottom",
2286+
"--gradient-stops": "var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))",
2287+
"backgroundImage": "linear-gradient(var(--gradient-stops))",
22882288
},
22892289
},
22902290
},

‎packages/generator/__tests__/generate-css-fn.test.ts

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎packages/generator/__tests__/generate-prop-types.test.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ describe('generate property types', () => {
7676
minBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
7777
maxHeight: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
7878
maxBlockSize: "auto" | Tokens["sizes"] | "svh" | "lvh" | "dvh" | "screen" | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6";
79+
boxSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
7980
color: Tokens["colors"];
8081
fontFamily: Tokens["fonts"];
8182
fontSize: Tokens["fontSizes"];
@@ -92,8 +93,9 @@ describe('generate property types', () => {
9293
truncate: boolean;
9394
background: Tokens["colors"];
9495
backgroundColor: Tokens["colors"];
95-
backgroundGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
96-
textGradient: "to-t" | "to-tr" | "to-r" | "to-br" | "to-b" | "to-bl" | "to-l" | "to-tl";
96+
backgroundGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
97+
backgroundLinear: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
98+
textGradient: 'to-t' | 'to-tr' | 'to-r' | 'to-br' | 'to-b' | 'to-bl' | 'to-l' | 'to-tl';
9799
gradientFrom: Tokens["colors"];
98100
gradientTo: Tokens["colors"];
99101
gradientVia: Tokens["colors"];

‎packages/generator/__tests__/generate-style-props.test.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6998,6 +6998,9 @@ describe('generate property types', () => {
69986998
*/
69996999
bgSize?: ConditionalValue<CssProperties["backgroundSize"] | AnyString>
70007000
bgGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
7001+
bgLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | AnyString>
7002+
bgRadial?: ConditionalValue<string | number | AnyString>
7003+
bgConic?: ConditionalValue<string | number | AnyString>
70017004
/**
70027005
* The **\`border-radius\`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
70037006
*
@@ -7369,9 +7372,13 @@ describe('generate property types', () => {
73697372
divideY?: ConditionalValue<string | number | AnyString>
73707373
divideColor?: ConditionalValue<UtilityValues["divideColor"] | CssVars | AnyString>
73717374
divideStyle?: ConditionalValue<UtilityValues["divideStyle"] | CssVars | AnyString>
7375+
boxSize?: ConditionalValue<UtilityValues["boxSize"] | CssVars | AnyString>
73727376
fontSmoothing?: ConditionalValue<UtilityValues["fontSmoothing"] | CssVars | AnyString>
73737377
truncate?: ConditionalValue<UtilityValues["truncate"] | CssVars | AnyString>
73747378
backgroundGradient?: ConditionalValue<UtilityValues["backgroundGradient"] | CssVars | AnyString>
7379+
backgroundLinear?: ConditionalValue<UtilityValues["backgroundLinear"] | CssVars | AnyString>
7380+
backgroundRadial?: ConditionalValue<string | number | AnyString>
7381+
backgroundConic?: ConditionalValue<string | number | AnyString>
73757382
textGradient?: ConditionalValue<UtilityValues["textGradient"] | CssVars | AnyString>
73767383
gradientFromPosition?: ConditionalValue<string | number | AnyString>
73777384
gradientToPosition?: ConditionalValue<string | number | AnyString>
@@ -14493,6 +14500,9 @@ describe('generate property types', () => {
1449314500
*/
1449414501
bgSize?: ConditionalValue<WithEscapeHatch<CssProperties["backgroundSize"]>>
1449514502
bgGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundGradient"] | CssVars>>
14503+
bgLinear?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundLinear"] | CssVars>>
14504+
bgRadial?: ConditionalValue<WithEscapeHatch<string | number>>
14505+
bgConic?: ConditionalValue<WithEscapeHatch<string | number>>
1449614506
/**
1449714507
* The **\`border-radius\`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
1449814508
*
@@ -14864,9 +14874,13 @@ describe('generate property types', () => {
1486414874
divideY?: ConditionalValue<WithEscapeHatch<string | number>>
1486514875
divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
1486614876
divideStyle?: ConditionalValue<WithEscapeHatch<string | number>>
14877+
boxSize?: ConditionalValue<WithEscapeHatch<UtilityValues["boxSize"] | CssVars>>
1486714878
fontSmoothing?: ConditionalValue<WithEscapeHatch<UtilityValues["fontSmoothing"] | CssVars>>
1486814879
truncate?: ConditionalValue<WithEscapeHatch<UtilityValues["truncate"] | CssVars>>
1486914880
backgroundGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundGradient"] | CssVars>>
14881+
backgroundLinear?: ConditionalValue<WithEscapeHatch<UtilityValues["backgroundLinear"] | CssVars>>
14882+
backgroundRadial?: ConditionalValue<WithEscapeHatch<string | number>>
14883+
backgroundConic?: ConditionalValue<WithEscapeHatch<string | number>>
1487014884
textGradient?: ConditionalValue<WithEscapeHatch<UtilityValues["textGradient"] | CssVars>>
1487114885
gradientFromPosition?: ConditionalValue<WithEscapeHatch<string | number>>
1487214886
gradientToPosition?: ConditionalValue<WithEscapeHatch<string | number>>

‎packages/preset-base/src/utilities/gradient.ts

Lines changed: 71 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,99 @@
1-
import type { UtilityConfig } from '@pandacss/types'
1+
import type { PropertyValues, UtilityConfig } from '@pandacss/types'
22
import { createColorMixTransform } from '../color-mix-transform'
33

44
const gradientVia = createColorMixTransform('--gradient-via')
55

6-
const gradientTemplate = {
7-
'to-t': 'linear-gradient(to top, var(--gradient))',
8-
'to-tr': 'linear-gradient(to top right, var(--gradient))',
9-
'to-r': 'linear-gradient(to right, var(--gradient))',
10-
'to-br': 'linear-gradient(to bottom right, var(--gradient))',
11-
'to-b': 'linear-gradient(to bottom, var(--gradient))',
12-
'to-bl': 'linear-gradient(to bottom left, var(--gradient))',
13-
'to-l': 'linear-gradient(to left, var(--gradient))',
14-
'to-tl': 'linear-gradient(to top left, var(--gradient))',
6+
const union = (values: Iterable<string>) => {
7+
return Array.from(values)
8+
.map((value) => `'${value}'`)
9+
.join(' | ')
1510
}
1611

17-
const gradientVars = {
18-
'--gradient-stops':
19-
'var(--gradient-via-stops, var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))',
20-
'--gradient': 'var(--gradient-via-stops, var(--gradient-stops))',
12+
const linearGradientDirectionMap = new Map([
13+
['to-t', 'to top'],
14+
['to-tr', 'to top right'],
15+
['to-r', 'to right'],
16+
['to-br', 'to bottom right'],
17+
['to-b', 'to bottom'],
18+
['to-bl', 'to bottom left'],
19+
['to-l', 'to left'],
20+
['to-tl', 'to top left'],
21+
])
22+
23+
const linearGradientValues: PropertyValues = {
24+
type: union(linearGradientDirectionMap.keys()),
2125
}
2226

27+
const gradientStops =
28+
'var(--gradient-via-stops, var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-to) var(--gradient-to-position))'
29+
30+
const gradientViaStops =
31+
'var(--gradient-position), var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)'
32+
2333
export const backgroundGradients: UtilityConfig = {
2434
backgroundGradient: {
2535
shorthand: 'bgGradient',
2636
className: 'bg-grad',
2737
group: 'Background Gradient',
28-
values(theme) {
38+
values: linearGradientValues,
39+
transform(value) {
2940
return {
30-
...theme('gradients'),
31-
...gradientTemplate,
41+
'--gradient-stops': gradientStops,
42+
'--gradient-position': linearGradientDirectionMap.get(value) || value,
43+
backgroundImage: `linear-gradient(var(--gradient-stops))`,
3244
}
3345
},
46+
},
47+
48+
backgroundLinear: {
49+
shorthand: 'bgLinear',
50+
className: 'bg-linear',
51+
group: 'Background Gradient',
52+
values: linearGradientValues,
3453
transform(value) {
3554
return {
36-
...gradientVars,
37-
backgroundImage: value,
55+
'--gradient-stops': gradientStops,
56+
'--gradient-position': linearGradientDirectionMap.get(value) || value,
57+
backgroundImage: `linear-gradient(var(--gradient-stops))`,
3858
}
3959
},
4060
},
41-
textGradient: {
42-
className: 'txt-grad',
61+
62+
backgroundRadial: {
63+
shorthand: 'bgRadial',
64+
className: 'bg-radial',
4365
group: 'Background Gradient',
44-
values(theme) {
66+
transform(value) {
4567
return {
46-
...theme('gradients'),
47-
...gradientTemplate,
68+
'--gradient-stops': gradientStops,
69+
'--gradient-position': value,
70+
backgroundImage: `radial-gradient(var(--gradient-stops,${value}))`,
4871
}
4972
},
73+
},
74+
75+
backgroundConic: {
76+
shorthand: 'bgConic',
77+
className: 'bg-conic',
78+
group: 'Background Gradient',
79+
transform(value) {
80+
return {
81+
'--gradient-stops': gradientStops,
82+
'--gradient-position': value,
83+
backgroundImage: `conic-gradient(var(--gradient-stops))`,
84+
}
85+
},
86+
},
87+
88+
textGradient: {
89+
className: 'txt-grad',
90+
group: 'Background Gradient',
91+
values: linearGradientValues,
5092
transform(value) {
5193
return {
52-
...gradientVars,
53-
backgroundImage: value,
94+
'--gradient-stops': gradientStops,
95+
'--gradient-position': linearGradientDirectionMap.get(value) || value,
96+
backgroundImage: `linear-gradient(var(--gradient-stops))`,
5497
WebkitBackgroundClip: 'text',
5598
color: 'transparent',
5699
}
@@ -94,8 +137,8 @@ export const backgroundGradients: UtilityConfig = {
94137
const transformed = gradientVia(value, args)
95138
return {
96139
...transformed,
97-
'--gradient-stops':
98-
'var(--gradient-from) var(--gradient-from-position), var(--gradient-via) var(--gradient-via-position), var(--gradient-to) var(--gradient-to-position)',
140+
'--gradient-stops': 'var(--gradient-via-stops)',
141+
'--gradient-via-stops': gradientViaStops,
99142
}
100143
},
101144
},

‎packages/preset-base/src/utilities/sizing.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,4 +128,15 @@ export const sizing: UtilityConfig = {
128128
group: 'Height',
129129
values: heightValues,
130130
},
131+
boxSize: {
132+
className: 'size',
133+
group: 'Width',
134+
values: widthValues,
135+
transform(value) {
136+
return {
137+
width: value,
138+
height: value,
139+
}
140+
},
141+
},
131142
}

0 commit comments

Comments
 (0)