Skip to content

Commit 29cf719

Browse files
segunadebayosegunadebayo
committed
refactor: update preset
1 parent 1bca361 commit 29cf719

File tree

20 files changed

+200
-63
lines changed

20 files changed

+200
-63
lines changed

‎.changeset/tame-deer-boil.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@pandacss/preset-panda': minor
3+
'@pandacss/preset-base': minor
4+
---
5+
6+
- **Preset Base**: Change default spacing from `10px` and `8px`
7+
- **Preset Panda**: Add `5.5` to spacing scale to cover more minor scales

‎packages/core/__tests__/utility.test.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,9 @@ describe('Utility', () => {
217217
"(margin = 4.5)" => {
218218
"margin": "var(--spacing-4\\.5)",
219219
},
220+
"(margin = 5.5)" => {
221+
"margin": "var(--spacing-5\\.5)",
222+
},
220223
"(margin = -1)" => {
221224
"margin": "calc(var(--spacing-1) * -1)",
222225
},
@@ -319,6 +322,9 @@ describe('Utility', () => {
319322
"(margin = -4.5)" => {
320323
"margin": "calc(var(--spacing-4\\.5) * -1)",
321324
},
325+
"(margin = -5.5)" => {
326+
"margin": "calc(var(--spacing-5\\.5) * -1)",
327+
},
322328
}
323329
`)
324330

@@ -359,6 +365,7 @@ describe('Utility', () => {
359365
"(margin = 2.5)" => "m_2.5",
360366
"(margin = 3.5)" => "m_3.5",
361367
"(margin = 4.5)" => "m_4.5",
368+
"(margin = 5.5)" => "m_5.5",
362369
"(margin = -1)" => "m_-1",
363370
"(margin = -2)" => "m_-2",
364371
"(margin = -3)" => "m_-3",
@@ -393,6 +400,7 @@ describe('Utility', () => {
393400
"(margin = -2.5)" => "m_-2.5",
394401
"(margin = -3.5)" => "m_-3.5",
395402
"(margin = -4.5)" => "m_-4.5",
403+
"(margin = -5.5)" => "m_-5.5",
396404
}
397405
`)
398406
})
@@ -808,6 +816,7 @@ describe('Utility', () => {
808816
"(margin = 2.5)" => "m_2.5",
809817
"(margin = 3.5)" => "m_3.5",
810818
"(margin = 4.5)" => "m_4.5",
819+
"(margin = 5.5)" => "m_5.5",
811820
"(margin = gutter)" => "m_gutter",
812821
"(margin = -1)" => "m_-1",
813822
"(margin = -2)" => "m_-2",
@@ -843,6 +852,7 @@ describe('Utility', () => {
843852
"(margin = -2.5)" => "m_-2.5",
844853
"(margin = -3.5)" => "m_-3.5",
845854
"(margin = -4.5)" => "m_-4.5",
855+
"(margin = -5.5)" => "m_-5.5",
846856
"(margin = -gutter)" => "m_-gutter",
847857
"(marginX = sm)" => "mx_sm",
848858
"(marginX = md)" => "mx_md",
@@ -1840,6 +1850,9 @@ describe('Utility', () => {
18401850
"(margin = 4.5)" => {
18411851
"margin": "var(--spacing-4\\.5)",
18421852
},
1853+
"(margin = 5.5)" => {
1854+
"margin": "var(--spacing-5\\.5)",
1855+
},
18431856
"(margin = gutter)" => {
18441857
"margin": "var(--spacing-gutter)",
18451858
},
@@ -1945,6 +1958,9 @@ describe('Utility', () => {
19451958
"(margin = -4.5)" => {
19461959
"margin": "calc(var(--spacing-4\\.5) * -1)",
19471960
},
1961+
"(margin = -5.5)" => {
1962+
"margin": "calc(var(--spacing-5\\.5) * -1)",
1963+
},
19481964
"(margin = -gutter)" => {
19491965
"margin": "calc(var(--spacing-gutter) * -1)",
19501966
},

‎packages/generator/__tests__/generate-pattern.test.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ test('should generate pattern', () => {
144144
...rest
145145
};
146146
},
147-
defaultValues:{direction:'column',gap:'10px'}}
147+
defaultValues:{direction:'column',gap:'8px'}}
148148
149149
export const getStackStyle = (styles = {}) => {
150150
const _styles = getPatternStyles(stackConfig, styles)
@@ -192,7 +192,7 @@ test('should generate pattern', () => {
192192
...rest
193193
};
194194
},
195-
defaultValues:{gap:'10px'}}
195+
defaultValues:{gap:'8px'}}
196196
197197
export const getVstackStyle = (styles = {}) => {
198198
const _styles = getPatternStyles(vstackConfig, styles)
@@ -240,7 +240,7 @@ test('should generate pattern', () => {
240240
...rest
241241
};
242242
},
243-
defaultValues:{gap:'10px'}}
243+
defaultValues:{gap:'8px'}}
244244
245245
export const getHstackStyle = (styles = {}) => {
246246
const _styles = getPatternStyles(hstackConfig, styles)
@@ -584,7 +584,7 @@ test('should generate pattern', () => {
584584
};
585585
},
586586
defaultValues(props) {
587-
return { gap: props.columnGap || props.rowGap ? void 0 : "10px" };
587+
return { gap: props.columnGap || props.rowGap ? void 0 : "8px" };
588588
}}
589589
590590
export const getGridStyle = (styles = {}) => {
@@ -679,7 +679,7 @@ test('should generate pattern', () => {
679679
680680
const wrapConfig = {
681681
transform(props) {
682-
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "10px", align, justify, ...rest } = props;
682+
const { columnGap, rowGap, gap = columnGap || rowGap ? void 0 : "8px", align, justify, ...rest } = props;
683683
return {
684684
display: "flex",
685685
flexWrap: "wrap",

‎packages/generator/__tests__/generate-token-dts.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ test('[dts] full token types', () => {
3434
3535
export type BlurToken = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
3636
37-
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "gutter" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-gutter"
37+
export type SpacingToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "gutter" | "-1" | "-2" | "-3" | "-4" | "-5" | "-6" | "-7" | "-8" | "-9" | "-10" | "-11" | "-12" | "-14" | "-16" | "-20" | "-24" | "-28" | "-32" | "-36" | "-40" | "-44" | "-48" | "-52" | "-56" | "-60" | "-64" | "-72" | "-80" | "-96" | "-0.5" | "-1.5" | "-2.5" | "-3.5" | "-4.5" | "-5.5" | "-gutter"
3838
39-
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
39+
export type SizeToken = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "20" | "24" | "28" | "32" | "36" | "40" | "44" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "0.5" | "1.5" | "2.5" | "3.5" | "4.5" | "5.5" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "prose" | "full" | "min" | "max" | "fit" | "breakpoint-sm" | "breakpoint-md" | "breakpoint-lg" | "breakpoint-xl" | "breakpoint-2xl"
4040
4141
export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
4242
@@ -110,9 +110,9 @@ test('[dts] formatTokenName', () => {
110110
111111
export type BlurToken = "$xs" | "$sm" | "$md" | "$lg" | "$xl" | "$2xl" | "$3xl"
112112
113-
export type SpacingToken = "$0" | "$1" | "$2" | "$3" | "$4" | "$5" | "$6" | "$7" | "$8" | "$9" | "$10" | "$11" | "$12" | "$14" | "$16" | "$20" | "$24" | "$28" | "$32" | "$36" | "$40" | "$44" | "$48" | "$52" | "$56" | "$60" | "$64" | "$72" | "$80" | "$96" | "$0.5" | "$1.5" | "$2.5" | "$3.5" | "$4.5" | "$gutter" | "-$1" | "-$2" | "-$3" | "-$4" | "-$5" | "-$6" | "-$7" | "-$8" | "-$9" | "-$10" | "-$11" | "-$12" | "-$14" | "-$16" | "-$20" | "-$24" | "-$28" | "-$32" | "-$36" | "-$40" | "-$44" | "-$48" | "-$52" | "-$56" | "-$60" | "-$64" | "-$72" | "-$80" | "-$96" | "-$0.5" | "-$1.5" | "-$2.5" | "-$3.5" | "-$4.5" | "-$gutter"
113+
export type SpacingToken = "$0" | "$1" | "$2" | "$3" | "$4" | "$5" | "$6" | "$7" | "$8" | "$9" | "$10" | "$11" | "$12" | "$14" | "$16" | "$20" | "$24" | "$28" | "$32" | "$36" | "$40" | "$44" | "$48" | "$52" | "$56" | "$60" | "$64" | "$72" | "$80" | "$96" | "$0.5" | "$1.5" | "$2.5" | "$3.5" | "$4.5" | "$5.5" | "$gutter" | "-$1" | "-$2" | "-$3" | "-$4" | "-$5" | "-$6" | "-$7" | "-$8" | "-$9" | "-$10" | "-$11" | "-$12" | "-$14" | "-$16" | "-$20" | "-$24" | "-$28" | "-$32" | "-$36" | "-$40" | "-$44" | "-$48" | "-$52" | "-$56" | "-$60" | "-$64" | "-$72" | "-$80" | "-$96" | "-$0.5" | "-$1.5" | "-$2.5" | "-$3.5" | "-$4.5" | "-$5.5" | "-$gutter"
114114
115-
export type SizeToken = "$0" | "$1" | "$2" | "$3" | "$4" | "$5" | "$6" | "$7" | "$8" | "$9" | "$10" | "$11" | "$12" | "$14" | "$16" | "$20" | "$24" | "$28" | "$32" | "$36" | "$40" | "$44" | "$48" | "$52" | "$56" | "$60" | "$64" | "$72" | "$80" | "$96" | "$0.5" | "$1.5" | "$2.5" | "$3.5" | "$4.5" | "$xs" | "$sm" | "$md" | "$lg" | "$xl" | "$2xl" | "$3xl" | "$4xl" | "$5xl" | "$6xl" | "$7xl" | "$8xl" | "$prose" | "$full" | "$min" | "$max" | "$fit" | "$breakpoint-sm" | "$breakpoint-md" | "$breakpoint-lg" | "$breakpoint-xl" | "$breakpoint-2xl"
115+
export type SizeToken = "$0" | "$1" | "$2" | "$3" | "$4" | "$5" | "$6" | "$7" | "$8" | "$9" | "$10" | "$11" | "$12" | "$14" | "$16" | "$20" | "$24" | "$28" | "$32" | "$36" | "$40" | "$44" | "$48" | "$52" | "$56" | "$60" | "$64" | "$72" | "$80" | "$96" | "$0.5" | "$1.5" | "$2.5" | "$3.5" | "$4.5" | "$5.5" | "$xs" | "$sm" | "$md" | "$lg" | "$xl" | "$2xl" | "$3xl" | "$4xl" | "$5xl" | "$6xl" | "$7xl" | "$8xl" | "$prose" | "$full" | "$min" | "$max" | "$fit" | "$breakpoint-sm" | "$breakpoint-md" | "$breakpoint-lg" | "$breakpoint-xl" | "$breakpoint-2xl"
116116
117117
export type AnimationToken = "$spin" | "$ping" | "$pulse" | "$bounce"
118118

‎packages/generator/__tests__/generate-token-js.test.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1480,6 +1480,10 @@ test('[dts] should generate package', () => {
14801480
"value": "1.125rem",
14811481
"variable": "var(--spacing-4\\\\.5)"
14821482
},
1483+
"spacing.5.5": {
1484+
"value": "1.375rem",
1485+
"variable": "var(--spacing-5\\\\.5)"
1486+
},
14831487
"sizes.0": {
14841488
"value": "0rem",
14851489
"variable": "var(--sizes-0)"
@@ -1620,6 +1624,10 @@ test('[dts] should generate package', () => {
16201624
"value": "1.125rem",
16211625
"variable": "var(--sizes-4\\\\.5)"
16221626
},
1627+
"sizes.5.5": {
1628+
"value": "1.375rem",
1629+
"variable": "var(--sizes-5\\\\.5)"
1630+
},
16231631
"sizes.xs": {
16241632
"value": "20rem",
16251633
"variable": "var(--sizes-xs)"
@@ -1908,6 +1916,10 @@ test('[dts] should generate package', () => {
19081916
"value": "calc(var(--spacing-4\\\\.5) * -1)",
19091917
"variable": "var(--spacing-4\\\\.5)"
19101918
},
1919+
"spacing.-5.5": {
1920+
"value": "calc(var(--spacing-5\\\\.5) * -1)",
1921+
"variable": "var(--spacing-5\\\\.5)"
1922+
},
19111923
"spacing.-gutter": {
19121924
"value": "var(--spacing-gutter)",
19131925
"variable": "var(--spacing-gutter)"
@@ -3513,6 +3525,10 @@ test('with formatTokenName', () => {
35133525
"value": "1.125rem",
35143526
"variable": "var(--spacing-4\\\\.5)"
35153527
},
3528+
"$spacing-5.5": {
3529+
"value": "1.375rem",
3530+
"variable": "var(--spacing-5\\\\.5)"
3531+
},
35163532
"$sizes-0": {
35173533
"value": "0rem",
35183534
"variable": "var(--sizes-0)"
@@ -3653,6 +3669,10 @@ test('with formatTokenName', () => {
36533669
"value": "1.125rem",
36543670
"variable": "var(--sizes-4\\\\.5)"
36553671
},
3672+
"$sizes-5.5": {
3673+
"value": "1.375rem",
3674+
"variable": "var(--sizes-5\\\\.5)"
3675+
},
36563676
"$sizes-xs": {
36573677
"value": "20rem",
36583678
"variable": "var(--sizes-xs)"
@@ -3941,6 +3961,10 @@ test('with formatTokenName', () => {
39413961
"value": "calc(var(--spacing-4\\\\.5) * -1)",
39423962
"variable": "var(--spacing-4\\\\.5)"
39433963
},
3964+
"$spacing--5.5": {
3965+
"value": "calc(var(--spacing-5\\\\.5) * -1)",
3966+
"variable": "var(--spacing-5\\\\.5)"
3967+
},
39443968
"$spacing--gutter": {
39453969
"value": "var(--spacing-gutter)",
39463970
"variable": "var(--spacing-gutter)"

‎packages/generator/__tests__/generate-token.test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,7 @@ describe('generator', () => {
453453
--spacing-2\\.5: 0.625rem;
454454
--spacing-3\\.5: 0.875rem;
455455
--spacing-4\\.5: 1.125rem;
456+
--spacing-5\\.5: 1.375rem;
456457
--sizes-0: 0rem;
457458
--sizes-1: 0.25rem;
458459
--sizes-2: 0.5rem;
@@ -488,6 +489,7 @@ describe('generator', () => {
488489
--sizes-2\\.5: 0.625rem;
489490
--sizes-3\\.5: 0.875rem;
490491
--sizes-4\\.5: 1.125rem;
492+
--sizes-5\\.5: 1.375rem;
491493
--sizes-xs: 20rem;
492494
--sizes-sm: 24rem;
493495
--sizes-md: 28rem;

‎packages/parser/__tests__/css-raw.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -169,8 +169,8 @@ describe('{fn}.raw', () => {
169169
margin-inline: var(--spacing-10);
170170
}
171171
172-
.gap_10px {
173-
gap: 10px;
172+
.gap_8px {
173+
gap: 8px;
174174
}
175175
176176
.c_amber\\.100 {

‎packages/parser/__tests__/namespace.test.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,8 @@ describe('extract namespace', () => {
2727

2828
expect(result.css).toMatchInlineSnapshot(`
2929
"@layer utilities {
30-
.gap_10px {
31-
gap: 10px;
30+
.gap_8px {
31+
gap: 8px;
3232
}
3333
3434
.d_flex {
@@ -190,8 +190,8 @@ describe('extract namespace', () => {
190190

191191
expect(result.css).toMatchInlineSnapshot(`
192192
"@layer utilities {
193-
.gap_10px {
194-
gap: 10px;
193+
.gap_8px {
194+
gap: 8px;
195195
}
196196
197197
.c_red {

‎packages/parser/__tests__/output.test.ts‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1273,8 +1273,8 @@ describe('extract to css output pipeline', () => {
12731273

12741274
expect(result.css).toMatchInlineSnapshot(`
12751275
"@layer utilities {
1276-
.gap_10px {
1277-
gap: 10px;
1276+
.gap_8px {
1277+
gap: 8px;
12781278
}
12791279
12801280
.d_flex {
@@ -1350,8 +1350,8 @@ describe('extract to css output pipeline', () => {
13501350

13511351
expect(result.css).toMatchInlineSnapshot(`
13521352
"@layer utilities {
1353-
.gap_10px {
1354-
gap: 10px;
1353+
.gap_8px {
1354+
gap: 8px;
13551355
}
13561356
13571357
.d_flex {
@@ -1776,8 +1776,8 @@ describe('extract to css output pipeline', () => {
17761776
}
17771777
17781778
@layer utilities {
1779-
.gap_10px {
1780-
gap: 10px;
1779+
.gap_8px {
1780+
gap: 8px;
17811781
}
17821782
17831783
.z_100 {
@@ -2212,8 +2212,8 @@ describe('extract to css output pipeline', () => {
22122212
margin-inline: var(--spacing-3);
22132213
}
22142214
2215-
.gap_10px {
2216-
gap: 10px;
2215+
.gap_8px {
2216+
gap: 8px;
22172217
}
22182218
22192219
.d_flex {
@@ -2338,8 +2338,8 @@ describe('extract to css output pipeline', () => {
23382338
margin-inline: var(--spacing-3);
23392339
}
23402340
2341-
.gap_10px {
2342-
gap: 10px;
2341+
.gap_8px {
2342+
gap: 8px;
23432343
}
23442344
23452345
.d_flex {
@@ -3110,8 +3110,8 @@ describe('extract to css output pipeline', () => {
31103110
padding: var(--spacing-4);
31113111
}
31123112
3113-
.gap_10px {
3114-
gap: 10px;
3113+
.gap_8px {
3114+
gap: 8px;
31153115
}
31163116
31173117
.d_flex {
@@ -3189,8 +3189,8 @@ describe('extract to css output pipeline', () => {
31893189
padding: var(--spacing-4);
31903190
}
31913191
3192-
.gap_10px {
3193-
gap: 10px;
3192+
.gap_8px {
3193+
gap: 8px;
31943194
}
31953195
31963196
.d_flex {

0 commit comments

Comments
 (0)