Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(BREAKING): rm config.eject & automatic import of built-in pr… #2694

Open
wants to merge 13 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
fix: snapshots after merge
astahmer committed Aug 17, 2024
commit b771a65cd8627c4ee785b537e93e03aadc89985e
4 changes: 2 additions & 2 deletions packages/core/__tests__/color-mix.test.ts
Original file line number Diff line number Diff line change
@@ -117,10 +117,10 @@ describe('color-mix', () => {
expect(css({ gradientFrom: 'red/33' })).toMatchInlineSnapshot(`
{
"className": [
"from_red\\/33",
"grad-from_red\\/33",
],
"css": "@layer utilities {
.from_red\\/33 {
.grad-from_red\\/33 {
--mix---gradient-from: color-mix(in srgb, red 33%, transparent);
--gradient-from: var(--mix---gradient-from, red);
}
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -43,7 +43,7 @@
"@pandacss/shared": "workspace:*",
"@pandacss/token-dictionary": "workspace:*",
"@pandacss/types": "workspace:*",
"browserslist": "4.23.3",
"browserslist": "4.23.0",
"hookable": "5.5.3",
"lightningcss": "1.25.1",
"lodash.merge": "4.6.2",
1 change: 1 addition & 0 deletions packages/fixture/src/config.ts
Original file line number Diff line number Diff line change
@@ -31,6 +31,7 @@ const textStyles = {
}

export const fixturePreset = {
name: '@pandacss/fixture-preset',
presets: [presetBase, presetPanda],
conditions: {
extend: {
31 changes: 26 additions & 5 deletions packages/generator/__tests__/generate-keyframes.test.ts
Original file line number Diff line number Diff line change
@@ -54,13 +54,34 @@ describe('keyframes', () => {
}),
).toMatchInlineSnapshot(`
"@layer tokens {
@keyframes roll {
from {
height: var(--sizes-4);
@keyframes spin {
to {
transform: rotate(360deg);
}
}

to {
height: var(--sizes-8);
@keyframes ping {
75%,100% {
transform: scale(2);
opacity: 0;
}
}

@keyframes pulse {
50% {
opacity: 0.5;
}
}

@keyframes bounce {
0%,100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1);
}

50% {
transform: none;
animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}
}"
5 changes: 3 additions & 2 deletions packages/generator/__tests__/generate-prop-types.test.ts
Original file line number Diff line number Diff line change
@@ -206,7 +206,7 @@ describe('generate property types', () => {
debug: boolean;
containerName: CssProperties["containerName"];
colorPalette: "current" | "black" | "white" | "transparent" | "rose" | "pink" | "fuchsia" | "purple" | "violet" | "indigo" | "blue" | "sky" | "cyan" | "teal" | "emerald" | "green" | "lime" | "yellow" | "amber" | "orange" | "red" | "neutral" | "stone" | "zinc" | "gray" | "slate" | "deep" | "deep.test" | "deep.test.pool" | "primary" | "secondary" | "complex" | "button" | "button.card" | "surface";
textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "headline.h1" | "headline.h2";
textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "headline" | "headline.h1" | "headline.h2";
}


@@ -277,7 +277,8 @@ describe('generate property types', () => {
import type { Tokens } from '../tokens/index';

export interface UtilityValues {
textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "headline.h1" | "headline.h2";
textStyle: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "headline" | "headline.h1" | "headline.h2";
animationName: "spin" | "ping" | "pulse" | "bounce";
}


159 changes: 14 additions & 145 deletions packages/generator/__tests__/generate-token.test.ts
Original file line number Diff line number Diff line change
@@ -579,6 +579,7 @@ describe('generator', () => {
conditions: {
dark: '.dark &',
},
eject: true,
})

expect(css).toMatchInlineSnapshot(`
@@ -588,45 +589,12 @@ describe('generator', () => {
--colors-test-50: #f9f9f9;
--colors-test-100: #f2f2f2;
--colors-deep-test-yam: %555;
--colors-deep-test-pool-poller: #fff;
--colors-deep-test-pool-tall: $dfdf;
--colors-deep-test-pool-palette-50: #f9f9f9;
--colors-deep-test-pool-palette-100: #f2f2f2;
--colors-deep-test-pool-palette-200: #ebebeb;
--colors-deep-test-pool-poller: #fff;
--colors-deep-test-pool-tall: $dfdf;
--colors-primary: var(--colors-red-500);
--colors-secondary: var(--colors-red-800);
--colors-complex: var(--colors-red-800);
--colors-button-thick: #fff;
--colors-button-card-body: #fff;
--colors-button-card-heading: #fff;
--spacing-gutter: var(--spacing-4);
}

:where([data-theme=dark], .dark) {
--colors-primary: var(--colors-red-400);
--colors-secondary: var(--colors-red-700);
--colors-button-thick: #000;
--colors-button-card-body: #000;
--colors-button-card-heading: #000
}

[data-color=material] {
--colors-surface: #m-b
}

[data-color=material]:where([data-theme=dark], .dark) {
--colors-surface: #m-d
}

[data-color=pastel] {
--colors-surface: #p-b
}

@media (forced-colors: active) {
:where([data-theme=dark], .dark) {
--colors-complex: var(--colors-red-700)
}
}
}"
`)
})
@@ -650,50 +618,18 @@ describe('generator', () => {
conditions: {
dark: '.dark &',
},
eject: true,
})

expect(css).toMatchInlineSnapshot(`
"@layer tokens {
:where(html) {
--colors-deep-test-yam: %555;
--colors-deep-test-pool-poller: #fff;
--colors-deep-test-pool-tall: $dfdf;
--shadows-e1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
--colors-primary: var(--colors-red-500);
--colors-secondary: var(--colors-red-800);
--colors-complex: var(--colors-red-800);
--colors-button-thick: #fff;
--colors-button-card-body: #fff;
--colors-button-card-heading: #fff;
--spacing-gutter: var(--spacing-4);
}

:where([data-theme=dark], .dark) {
--shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3);
--colors-primary: var(--colors-red-400);
--colors-secondary: var(--colors-red-700);
--colors-button-thick: #000;
--colors-button-card-body: #000;
--colors-button-card-heading: #000
.dark {
--shadows-e1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15), 0px 1px 2px rgba(0, 0, 0, 0.3)
}

[data-color=material] {
--colors-surface: #m-b
}

[data-color=material]:where([data-theme=dark], .dark) {
--colors-surface: #m-d
}

[data-color=pastel] {
--colors-surface: #p-b
}

@media (forced-colors: active) {
:where([data-theme=dark], .dark) {
--colors-complex: var(--colors-red-700)
}
}
}"
`)
})
@@ -737,54 +673,19 @@ describe('generator', () => {
conditions: {
dark: '.dark &',
},
eject: true,
})

expect(css).toMatchInlineSnapshot(`
"@layer tokens {
:where(html) {
--borders-red: 1px solid var(--colors-red);
--borders-semantic-red: var(--borders-danger);
--colors-red: #ef4444;
--colors-semantic-red: var(--colors-danger);
--colors-deep-test-yam: %555;
--colors-deep-test-pool-poller: #fff;
--colors-deep-test-pool-tall: $dfdf;
--borders-danger: var(--borders-red);
--borders-red: 1px solid var(--colors-red);
--borders-semantic-red: var(--borders-danger);
--colors-danger: var(--colors-red);
--colors-primary: var(--colors-red-500);
--colors-secondary: var(--colors-red-800);
--colors-complex: var(--colors-red-800);
--colors-button-thick: #fff;
--colors-button-card-body: #fff;
--colors-button-card-heading: #fff;
--spacing-gutter: var(--spacing-4);
}

:where([data-theme=dark], .dark) {
--colors-primary: var(--colors-red-400);
--colors-secondary: var(--colors-red-700);
--colors-button-thick: #000;
--colors-button-card-body: #000;
--colors-button-card-heading: #000
}

[data-color=material] {
--colors-surface: #m-b
}

[data-color=material]:where([data-theme=dark], .dark) {
--colors-surface: #m-d
}

[data-color=pastel] {
--colors-surface: #p-b
--borders-danger: var(--borders-red);
}

@media (forced-colors: active) {
:where([data-theme=dark], .dark) {
--colors-complex: var(--colors-red-700)
}
}
}"
`)
})
@@ -844,53 +745,21 @@ describe('generator', () => {
conditions: {
dark: '.dark &',
},
eject: true,
})

expect(css).toMatchInlineSnapshot(`
"@layer tokens {
:where(html) {
--shadows-test1: 0px 0px 0px 4px var(--colors-test-pink);
--colors-deep-test-yam: %555;
--colors-deep-test-pool-poller: #fff;
--colors-deep-test-pool-tall: $dfdf;
--colors-test-pink: var(--colors-pink-900);
--shadows-test-broken-shadow: 0px 0px 0px 4px var(--colors-test-pink);
--shadows-complex-shadow: 0px 0px 0px 4px var(--colors-test-pink);
--colors-test-pink: var(--colors-pink-900);
--colors-primary: var(--colors-red-500);
--colors-secondary: var(--colors-red-800);
--colors-complex: var(--colors-red-800);
--colors-button-thick: #fff;
--colors-button-card-body: #fff;
--colors-button-card-heading: #fff;
--spacing-gutter: var(--spacing-4);
}

:where([data-theme=dark], .dark) {
--shadows-complex-shadow: 2px 8px 30px 4px var(--colors-test-pink);
--colors-primary: var(--colors-red-400);
--colors-secondary: var(--colors-red-700);
--colors-button-thick: #000;
--colors-button-card-body: #000;
--colors-button-card-heading: #000
}

[data-color=material] {
--colors-surface: #m-b
}

[data-color=material]:where([data-theme=dark], .dark) {
--colors-surface: #m-d
}

[data-color=pastel] {
--colors-surface: #p-b
.dark {
--shadows-complex-shadow: 2px 8px 30px 4px var(--colors-test-pink)
}

@media (forced-colors: active) {
:where([data-theme=dark], .dark) {
--colors-complex: var(--colors-red-700)
}
}
}"
`)
})
2 changes: 1 addition & 1 deletion packages/node/package.json
Original file line number Diff line number Diff line change
@@ -46,7 +46,7 @@
"@pandacss/shared": "workspace:*",
"@pandacss/token-dictionary": "workspace:*",
"@pandacss/types": "workspace:*",
"browserslist": "4.23.3",
"browserslist": "4.23.0",
"chokidar": "3.6.0",
"fast-glob": "3.3.2",
"file-size": "1.0.0",
30 changes: 17 additions & 13 deletions packages/parser/__tests__/output.test.ts
Original file line number Diff line number Diff line change
@@ -1182,13 +1182,13 @@ describe('extract to css output pipeline', () => {
expect(result.css).toMatchInlineSnapshot(`
"@layer utilities {
.color-palette_button {
--colors-color-palette-thick: var(--colors-button-thick);
--colors-color-palette-card-body: var(--colors-button-card-body);
--colors-color-palette-card-heading: var(--colors-button-card-heading);
--colors-color-palette-dark: var(--colors-button-dark);
--colors-color-palette-light: var(--colors-button-light);
--colors-color-palette-light-accent: var(--colors-button-light-accent);
--colors-color-palette-light-accent-secondary: var(--colors-button-light-accent-secondary);
--colors-color-palette-thick: var(--colors-button-thick);
--colors-color-palette-card-body: var(--colors-button-card-body);
--colors-color-palette-card-heading: var(--colors-button-card-heading);
}

.c_colorPalette\\.light {
@@ -3363,10 +3363,12 @@ describe('extract to css output pipeline', () => {
`
const result = parseAndExtract(code, {
theme: {
tokens: {
spacing: {
'025': {
value: '0.125rem',
extend: {
tokens: {
spacing: {
'025': {
value: '0.125rem',
},
},
},
},
@@ -3403,12 +3405,14 @@ describe('extract to css output pipeline', () => {
`
const result = parseAndExtract(code, {
theme: {
tokens: {
assets: {
checkbox: {
value: {
type: 'svg',
value: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`,
extend: {
tokens: {
assets: {
checkbox: {
value: {
type: 'svg',
value: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16"><path stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h8"/></svg>`,
},
},
},
},
2 changes: 1 addition & 1 deletion packages/studio/styled-system/css/css.mjs
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { createCss, createMergeCss, hypenateProperty, withoutSpace } from '../helpers.mjs';
import { sortConditions, finalizeConditions } from './conditions.mjs';

const utilities = "aspectRatio:aspect,boxDecorationBreak:decoration,zIndex:z,boxSizing:box,objectPosition:obj-pos,objectFit:obj-fit,overscrollBehavior:overscroll,overscrollBehaviorX:overscroll-x,overscrollBehaviorY:overscroll-y,position:pos/1,top:top,left:left,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,inset:inset,insetBlockEnd:inset-b,insetBlockStart:inset-t,insetInlineEnd:end/insetEnd/1,insetInlineStart:start/insetStart/1,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:basis,flex:flex,flexDirection:flex/flexDir,flexGrow:grow,flexShrink:shrink,gridTemplateColumns:grid-cols,gridTemplateRows:grid-rows,gridColumn:col-span,gridRow:row-span,gridColumnStart:col-start,gridColumnEnd:col-end,gridAutoFlow:grid-flow,gridAutoColumns:auto-cols,gridAutoRows:auto-rows,gap:gap,gridGap:gap,gridRowGap:gap-x,gridColumnGap:gap-y,rowGap:gap-x,columnGap:gap-y,justifyContent:justify,alignContent:content,alignItems:items,alignSelf:self,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pb,paddingBlockStart:pt,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mb,marginBlockStart:mt,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:space-x,spaceY:space-y,outlineWidth:ring-width/ringWidth,outlineColor:ring-color/ringColor,outline:ring/1,outlineOffset:ring-offset/ringOffset,divideX:divide-x,divideY:divide-y,divideColor:divide-color,divideStyle:divide-style,width:w/1,inlineSize:w,minWidth:min-w/minW,minInlineSize:min-w,maxWidth:max-w/maxW,maxInlineSize:max-w,height:h/1,blockSize:h,minHeight:min-h/minH,minBlockSize:min-h,maxHeight:max-h/maxH,maxBlockSize:max-b,color:text,fontFamily:font,fontSize:fs,fontWeight:fw,fontSmoothing:smoothing,fontVariantNumeric:numeric,letterSpacing:tracking,lineHeight:leading,textAlign:text-align,textDecoration:text-decor,textDecorationColor:text-decor-color,textEmphasisColor:text-emphasis-color,textDecorationStyle:decoration-style,textDecorationThickness:decoration-thickness,textUnderlineOffset:underline-offset,textTransform:text-transform,textIndent:indent,textShadow:text-shadow,textShadowColor:text-shadow/textShadowColor,textOverflow:text-overflow,verticalAlign:v-align,wordBreak:break,textWrap:text-wrap,truncate:truncate,lineClamp:clamp,listStyleType:list-type,listStylePosition:list-pos,listStyleImage:list-img,backgroundPosition:bg-pos/bgPosition,backgroundPositionX:bg-pos-x/bgPositionX,backgroundPositionY:bg-pos-y/bgPositionY,backgroundAttachment:bg-attach/bgAttachment,backgroundClip:bg-clip/bgClip,background:bg/1,backgroundColor:bg/bgColor,backgroundOrigin:bg-origin/bgOrigin,backgroundImage:bg-img/bgImage,backgroundRepeat:bg-repeat/bgRepeat,backgroundBlendMode:bg-blend/bgBlendMode,backgroundSize:bg-size/bgSize,backgroundGradient:bg-gradient/bgGradient,textGradient:text-gradient,gradientFromPosition:gradient-from-pos,gradientToPosition:gradient-to-pos,gradientFrom:gradient-from,gradientTo:gradient-to,gradientVia:gradient-via,gradientViaPosition:gradient-via-pos,borderRadius:rounded/1,borderTopLeftRadius:rounded-tl/roundedTopLeft,borderTopRightRadius:rounded-tr/roundedTopRight,borderBottomRightRadius:rounded-br/roundedBottomRight,borderBottomLeftRadius:rounded-bl/roundedBottomLeft,borderTopRadius:rounded-t/roundedTop,borderRightRadius:rounded-r/roundedRight,borderBottomRadius:rounded-b/roundedBottom,borderLeftRadius:rounded-l/roundedLeft,borderStartStartRadius:rounded-ss/roundedStartStart,borderStartEndRadius:rounded-se/roundedStartEnd,borderStartRadius:rounded-s/roundedStart,borderEndStartRadius:rounded-es/roundedEndStart,borderEndEndRadius:rounded-ee/roundedEndEnd,borderEndRadius:rounded-e/roundedEnd,border:border,borderWidth:border-w,borderTopWidth:border-tw,borderLeftWidth:border-lw,borderRightWidth:border-rw,borderBottomWidth:border-bw,borderColor:border,borderInline:border-x/borderX,borderInlineWidth:border-x/borderXWidth,borderInlineColor:border-x/borderXColor,borderBlock:border-y/borderY,borderBlockWidth:border-y/borderYWidth,borderBlockColor:border-y/borderYColor,borderLeft:border-l,borderLeftColor:border-l,borderInlineStart:border-s/borderStart,borderInlineStartWidth:border-s/borderStartWidth,borderInlineStartColor:border-s/borderStartColor,borderRight:border-r,borderRightColor:border-r,borderInlineEnd:border-e/borderEnd,borderInlineEndWidth:border-e/borderEndWidth,borderInlineEndColor:border-e/borderEndColor,borderTop:border-t,borderTopColor:border-t,borderBottom:border-b,borderBottomColor:border-b,borderBlockEnd:border-be,borderBlockEndColor:border-be,borderBlockStart:border-bs,borderBlockStartColor:border-bs,boxShadow:shadow/1,boxShadowColor:shadow-color/shadowColor,mixBlendMode:mix-blend,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:backdrop,backdropBlur:backdrop-blur,backdropBrightness:backdrop-brightness,backdropContrast:backdrop-contrast,backdropGrayscale:backdrop-grayscale,backdropHueRotate:backdrop-hue-rotate,backdropInvert:backdrop-invert,backdropOpacity:backdrop-opacity,backdropSaturate:backdrop-saturate,backdropSepia:backdrop-sepia,borderCollapse:border,borderSpacing:border-spacing,borderSpacingX:border-spacing-x,borderSpacingY:border-spacing-y,tableLayout:table,transitionTimingFunction:ease,transitionDelay:delay,transitionDuration:duration,transitionProperty:transition-prop,transition:transition,animation:animation,animationName:animation-name,animationTimingFunction:animation-ease,animationDuration:animation-duration,animationDelay:animation-delay,transformOrigin:origin,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:accent,caretColor:caret,scrollBehavior:scroll,scrollbar:scrollbar,scrollMargin:scroll-m,scrollMarginLeft:scroll-ml,scrollMarginRight:scroll-mr,scrollMarginTop:scroll-mt,scrollMarginBottom:scroll-mb,scrollMarginBlock:scroll-my/scrollMarginY,scrollMarginBlockEnd:scroll-mb,scrollMarginBlockStart:scroll-mt,scrollMarginInline:scroll-mx/scrollMarginX,scrollMarginInlineEnd:scroll-me,scrollMarginInlineStart:scroll-ms,scrollPadding:scroll-p,scrollPaddingBlock:scroll-pb/scrollPaddingY,scrollPaddingBlockStart:scroll-pt,scrollPaddingBlockEnd:scroll-pb,scrollPaddingInline:scroll-px/scrollPaddingX,scrollPaddingInlineEnd:scroll-pe,scrollPaddingInlineStart:scroll-ps,scrollPaddingLeft:scroll-pl,scrollPaddingRight:scroll-pr,scrollPaddingTop:scroll-pt,scrollPaddingBottom:scroll-pb,scrollSnapAlign:snap-align,scrollSnapStop:snap-stop,scrollSnapType:snap-type,scrollSnapStrictness:snap-strictness,scrollSnapMargin:snap-m,scrollSnapMarginTop:snap-mt,scrollSnapMarginBottom:snap-mb,scrollSnapMarginLeft:snap-ml,scrollSnapMarginRight:snap-mr,touchAction:touch,userSelect:select,fill:fill,stroke:stroke,strokeWidth:stroke-w,srOnly:sr,debug:debug,appearance:appearance,backfaceVisibility:backface,clipPath:clip-path,hyphens:hyphens,mask:mask,maskImage:mask-image,maskSize:mask-size,textSizeAdjust:text-adjust,container:cq,containerName:cq-name,containerType:cq-type,textStyle:textStyle"
const utilities = "aspectRatio:asp,boxDecorationBreak:bx-db,zIndex:z,boxSizing:bx-s,objectPosition:obj-p,objectFit:obj-f,overscrollBehavior:ovs-b,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,position:pos/1,top:top,left:left,inset:inset,insetInline:inset-x/insetX,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInlineEnd:inset-e/insetEnd/end,insetInlineStart:inset-s/insetStart/start,right:right,bottom:bottom,float:float,visibility:vis,display:d,hideFrom:hide,hideBelow:show,flexBasis:flex-b,flex:flex,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,gridColumn:grid-c,gridRow:grid-r,gridColumnStart:grid-cs,gridColumnEnd:grid-ce,gridAutoFlow:grid-af,gridAutoColumns:grid-ac,gridAutoRows:grid-ar,gap:gap,gridGap:grid-g,gridRowGap:grid-rg,gridColumnGap:grid-cg,rowGap:rg,columnGap:cg,justifyContent:jc,alignContent:ac,alignItems:ai,alignSelf:as,padding:p/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,paddingBottom:pb/1,paddingBlock:py/1/paddingY,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingInline:px/paddingX/1,paddingInlineEnd:pe/1/paddingEnd,paddingInlineStart:ps/1/paddingStart,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,marginBottom:mb/1,margin:m/1,marginBlock:my/1/marginY,marginBlockEnd:mbe,marginBlockStart:mbs,marginInline:mx/1/marginX,marginInlineEnd:me/1/marginEnd,marginInlineStart:ms/1/marginStart,spaceX:sx,spaceY:sy,outlineWidth:ring-w/ringWidth,outlineColor:ring-c/ringColor,outline:ring/1,outlineOffset:ring-o/ringOffset,divideX:dvd-x,divideY:dvd-y,divideColor:dvd-c,divideStyle:dvd-s,width:w/1,inlineSize:w-is,minWidth:min-w/minW,minInlineSize:min-w-is,maxWidth:max-w/maxW,maxInlineSize:max-w-is,height:h/1,blockSize:h-bs,minHeight:min-h/minH,minBlockSize:min-h-bs,maxHeight:max-h/maxH,maxBlockSize:max-b,color:c,fontFamily:ff,fontSize:fs,fontSizeAdjust:fs-a,fontPalette:fp,fontKerning:fk,fontFeatureSettings:ff-s,fontWeight:fw,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariationSettings:fv-s,fontVariantNumeric:fv-num,letterSpacing:ls,lineHeight:lh,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textEmphasisColor:te-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textUnderlineOffset:tu-o,textTransform:tt,textIndent:ti,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,textOverflow:tov,verticalAlign:va,wordBreak:wb,textWrap:tw,truncate:trunc,lineClamp:lc,listStyleType:li-t,listStylePosition:li-pos,listStyleImage:li-img,listStyle:li-s,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundAttachment:bg-a/bgAttachment,backgroundClip:bg-cp/bgClip,background:bg/1,backgroundColor:bg-c/bgColor,backgroundOrigin:bg-o/bgOrigin,backgroundImage:bg-i/bgImage,backgroundRepeat:bg-r/bgRepeat,backgroundBlendMode:bg-bm/bgBlendMode,backgroundSize:bg-s/bgSize,backgroundGradient:bg-grad/bgGradient,textGradient:txt-grad,gradientFromPosition:grad-from-pos,gradientToPosition:grad-to-pos,gradientFrom:grad-from,gradientTo:grad-to,gradientVia:grad-via,gradientViaPosition:grad-via-pos,borderRadius:bdr/rounded,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRightRadius:bdr-tr/roundedTopRight,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderTopRadius:bdr-t/roundedTop,borderRightRadius:bdr-r/roundedRight,borderBottomRadius:bdr-b/roundedBottom,borderLeftRadius:bdr-l/roundedLeft,borderStartStartRadius:bdr-ss/roundedStartStart,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderEndStartRadius:bdr-es/roundedEndStart,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,border:bd,borderWidth:bd-w,borderTopWidth:bd-t-w,borderLeftWidth:bd-l-w,borderRightWidth:bd-r-w,borderBottomWidth:bd-b-w,borderColor:bd-c,borderInline:bd-x/borderX,borderInlineWidth:bd-x-w/borderXWidth,borderInlineColor:bd-x-c/borderXColor,borderBlock:bd-y/borderY,borderBlockWidth:bd-y-w/borderYWidth,borderBlockColor:bd-y-c/borderYColor,borderLeft:bd-l,borderLeftColor:bd-l-c,borderInlineStart:bd-s/borderStart,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineStartColor:bd-s-c/borderStartColor,borderRight:bd-r,borderRightColor:bd-r-c,borderInlineEnd:bd-e/borderEnd,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineEndColor:bd-e-c/borderEndColor,borderTop:bd-t,borderTopColor:bd-t-c,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,opacity:op,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,mixBlendMode:mix-bm,filter:filter,brightness:brightness,contrast:contrast,grayscale:grayscale,hueRotate:hue-rotate,invert:invert,saturate:saturate,sepia:sepia,dropShadow:drop-shadow,blur:blur,backdropFilter:bkdp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,borderCollapse:bd-cl,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,tableLayout:tbl,transitionTimingFunction:trs-tmf,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transition:trs,animation:anim,animationName:anim-n,animationTimingFunction:anim-tmf,animationDuration:anim-dur,animationDelay:anim-dly,animationPlayState:anim-ps,animationComposition:anim-comp,animationFillMode:anim-fm,animationDirection:anim-dir,animationIterationCount:anim-ic,animationRange:anim-r,animationState:anim-s,animationRangeStart:anim-rs,animationRangeEnd:anim-re,animationTimeline:anim-tl,transformOrigin:trf-o,transformBox:trf-b,transformStyle:trf-s,transform:trf,rotate:rotate,rotateX:rotate-x,rotateY:rotate-y,rotateZ:rotate-z,scale:scale,scaleX:scale-x,scaleY:scale-y,translate:translate,translateX:translate-x/x,translateY:translate-y/y,translateZ:translate-z/z,accentColor:ac-c,caretColor:ca-c,scrollBehavior:scr-bhv,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarWidth:scr-bar-w,scrollMargin:scr-m,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollMarginBottom:scr-mb,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockStart:scr-pbs,scrollPaddingBlockEnd:scr-pbe,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollPaddingBottom:scr-pb,scrollSnapAlign:scr-sa,scrollSnapStop:scrs-s,scrollSnapType:scrs-t,scrollSnapStrictness:scrs-strt,scrollSnapMargin:scrs-m,scrollSnapMarginTop:scrs-mt,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,touchAction:tch-a,userSelect:us,overflow:ov,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overflowAnchor:ov-a,overflowBlock:ov-b,overflowInline:ov-i,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,fill:fill,stroke:stk,strokeWidth:stk-w,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,srOnly:sr,debug:debug,appearance:ap,backfaceVisibility:bfv,clipPath:cp-path,hyphens:hy,mask:msk,maskImage:msk-i,maskSize:msk-s,textSizeAdjust:txt-adj,container:cq,containerName:cq-n,containerType:cq-t,textStyle:textStyle"

const classNameByProp = new Map()
const shorthands = new Map()
2 changes: 1 addition & 1 deletion packages/studio/styled-system/jsx/is-valid-prop.mjs

Large diffs are not rendered by default.

9 changes: 8 additions & 1 deletion packages/studio/styled-system/styles.css
Original file line number Diff line number Diff line change
@@ -167,6 +167,9 @@
@layer base{
:root {
--made-with-panda: '🐼';
}

:root {
--global-color-border: var(--colors-border);
--global-color-placeholder: var(--colors-neutral-500);
color-scheme: light dark;
@@ -1374,7 +1377,11 @@
color: var(--colors-neutral-300);
}

.currentPage\:c_accent[aria-current=page],.\[\&\.active\]\:c_accent.active {
.currentPage\:c_accent[aria-current=page] {
color: var(--colors-accent);
}

.\[\&\.active\]\:c_accent.active {
color: var(--colors-accent);
}

4 changes: 4 additions & 0 deletions packages/studio/styled-system/tokens/index.mjs
Original file line number Diff line number Diff line change
@@ -103,6 +103,10 @@ const tokens = {
"value": "1.5rem",
"variable": "var(--radii-3xl)"
},
"radii.4xl": {
"value": "2rem",
"variable": "var(--radii-4xl)"
},
"radii.full": {
"value": "9999px",
"variable": "var(--radii-full)"
4 changes: 2 additions & 2 deletions packages/studio/styled-system/tokens/tokens.d.ts

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/studio/styled-system/types/jsx.d.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-disable */
import type { ComponentPropsWithoutRef, ElementType, ElementRef, Ref } from 'react'
import type { ComponentPropsWithoutRef, ElementType, ElementRef, JSX, Ref } from 'react'
import type { RecipeDefinition, RecipeSelection, RecipeVariantRecord } from './recipe';
import type { Assign, DistributiveOmit, DistributiveUnion, JsxHTMLProps, JsxStyleProps, Pretty } from './system-types';

5 changes: 4 additions & 1 deletion packages/studio/styled-system/types/prop-type.d.ts
Original file line number Diff line number Diff line change
@@ -7,9 +7,9 @@ export interface UtilityValues {
aspectRatio: Tokens["aspectRatios"];
top: Tokens["spacing"];
left: Tokens["spacing"];
inset: "auto" | Tokens["spacing"];
insetInline: Tokens["spacing"];
insetBlock: Tokens["spacing"];
inset: "auto" | Tokens["spacing"];
insetBlockEnd: Tokens["spacing"];
insetBlockStart: Tokens["spacing"];
insetInlineEnd: Tokens["spacing"];
@@ -164,6 +164,9 @@ export interface UtilityValues {
accentColor: Tokens["colors"];
caretColor: Tokens["colors"];
scrollbar: "visible" | "hidden";
scrollbarColor: Tokens["colors"];
scrollbarGutter: Tokens["spacing"];
scrollbarWidth: Tokens["sizes"];
scrollMargin: Tokens["spacing"];
scrollMarginLeft: Tokens["spacing"];
scrollMarginRight: Tokens["spacing"];
7 changes: 4 additions & 3 deletions packages/studio/styled-system/types/style-props.d.ts
Original file line number Diff line number Diff line change
@@ -4826,7 +4826,7 @@ scale?: ConditionalValue<UtilityValues["scale"] | CssVars | CssProperties["scale
*
* @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-color
*/
scrollbarColor?: ConditionalValue<CssProperties["scrollbarColor"] | AnyString>
scrollbarColor?: ConditionalValue<UtilityValues["scrollbarColor"] | CssVars | CssProperties["scrollbarColor"] | AnyString>
/**
* The **`scrollbar-gutter`** CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
*
@@ -4840,7 +4840,7 @@ scrollbarColor?: ConditionalValue<CssProperties["scrollbarColor"] | AnyString>
*
* @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
*/
scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
scrollbarGutter?: ConditionalValue<UtilityValues["scrollbarGutter"] | CssVars | CssProperties["scrollbarGutter"] | AnyString>
/**
* The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
*
@@ -4854,7 +4854,7 @@ scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
*
* @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-width
*/
scrollbarWidth?: ConditionalValue<CssProperties["scrollbarWidth"] | AnyString>
scrollbarWidth?: ConditionalValue<UtilityValues["scrollbarWidth"] | CssVars | CssProperties["scrollbarWidth"] | AnyString>
/**
* The **`scroll-behavior`** CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
*
@@ -7377,6 +7377,7 @@ scrollPaddingX?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars
backdropSepia?: ConditionalValue<string | number | AnyString>
borderSpacingX?: ConditionalValue<UtilityValues["borderSpacingX"] | CssVars | AnyString>
borderSpacingY?: ConditionalValue<UtilityValues["borderSpacingY"] | CssVars | AnyString>
animationState?: ConditionalValue<string | number | AnyString>
rotateX?: ConditionalValue<UtilityValues["rotateX"] | CssVars | AnyString>
rotateY?: ConditionalValue<UtilityValues["rotateY"] | CssVars | AnyString>
rotateZ?: ConditionalValue<UtilityValues["rotateZ"] | CssVars | AnyString>
25 changes: 23 additions & 2 deletions packages/studio/styled-system/types/system-types.d.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* eslint-disable */
import type { ConditionalValue, Nested } from './conditions';
import type { PropertiesFallback } from './csstype';
import type { AtRule, PropertiesFallback } from './csstype';
import type { SystemProperties, CssVarProperties } from './style-props';

type String = string & {}
@@ -46,7 +46,7 @@ interface GenericProperties {

export type NestedCssProperties = Nested<CssProperties>

export type SystemStyleObject = Nested<SystemProperties & CssVarProperties>
export type SystemStyleObject = Omit<Nested<SystemProperties & CssVarProperties>, 'base'>

export interface GlobalStyleObject {
[selector: string]: SystemStyleObject
@@ -56,12 +56,33 @@ export interface ExtendableGlobalStyleObject {
extend?: GlobalStyleObject | undefined
}

/* -----------------------------------------------------------------------------
* Composition (text styles, layer styles)
* -----------------------------------------------------------------------------*/

type FilterStyleObject<P extends string> = {
[K in P]?: K extends keyof SystemStyleObject ? SystemStyleObject[K] : unknown
}

export type CompositionStyleObject<Property extends string> = Nested<FilterStyleObject<Property> & CssVarProperties>

/* -----------------------------------------------------------------------------
* Font face
* -----------------------------------------------------------------------------*/

export type GlobalFontfaceRule = Omit<AtRule.FontFaceFallback, 'src'> & Required<Pick<AtRule.FontFaceFallback, 'src'>>

export type FontfaceRule = Omit<GlobalFontfaceRule, 'fontFamily'>

export interface GlobalFontface {
[name: string]: FontfaceRule | FontfaceRule[]
}

export interface ExtendableGlobalFontface {
[name: string]: FontfaceRule | FontfaceRule[] | GlobalFontface | undefined
extend?: GlobalFontface | undefined
}

/* -----------------------------------------------------------------------------
* Jsx style props
* -----------------------------------------------------------------------------*/
2,596 changes: 1,279 additions & 1,317 deletions pnpm-lock.yaml

Large diffs are not rendered by default.