@pandacss/studio 0.27.2 → 0.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/package.json +10 -9
  2. package/panda.config.ts +5 -27
  3. package/src/components/color-constrast.tsx +40 -67
  4. package/src/components/color-wrapper.tsx +21 -24
  5. package/src/components/colors.tsx +57 -50
  6. package/src/components/empty-state.tsx +4 -2
  7. package/src/components/font-family.tsx +4 -4
  8. package/src/components/font-tokens.tsx +17 -26
  9. package/src/components/icons.tsx +2 -0
  10. package/src/components/input.tsx +4 -2
  11. package/src/components/layer-styles.tsx +4 -3
  12. package/src/components/overview.tsx +77 -57
  13. package/src/components/radii.tsx +6 -5
  14. package/src/components/semantic-color.tsx +4 -6
  15. package/src/components/side-nav-item.astro +1 -1
  16. package/src/components/side-nav.astro +3 -3
  17. package/src/components/sizes.tsx +7 -6
  18. package/src/components/sticky-top.tsx +10 -0
  19. package/src/components/test-score.tsx +35 -0
  20. package/src/components/text-styles.tsx +3 -2
  21. package/src/components/theme-toggle.astro +1 -1
  22. package/src/components/token-content.tsx +8 -4
  23. package/src/components/token-group.tsx +9 -4
  24. package/src/components/typography-playground.tsx +17 -16
  25. package/src/{components → icons}/logo.tsx +6 -1
  26. package/src/icons/moon.tsx +1 -0
  27. package/src/icons/sun.tsx +1 -0
  28. package/src/icons/yums.tsx +1144 -0
  29. package/src/layouts/Layout.astro +2 -1
  30. package/src/layouts/Sidebar.astro +6 -6
  31. package/src/lib/constants.ts +0 -7
  32. package/src/lib/panda-context.ts +33 -0
  33. package/src/lib/truncate.ts +4 -0
  34. package/src/lib/use-color-docs.ts +20 -14
  35. package/src/pages/colors.astro +1 -1
  36. package/src/pages/font-sizes.astro +4 -4
  37. package/src/pages/font-weights.astro +3 -4
  38. package/src/pages/index.astro +1 -1
  39. package/src/pages/layer-styles.astro +1 -1
  40. package/src/pages/letter-spacings.astro +4 -3
  41. package/src/pages/line-heights.astro +3 -4
  42. package/src/pages/playground/contrast-checker.astro +2 -2
  43. package/src/pages/playground/typography.astro +2 -2
  44. package/src/pages/radii.astro +1 -1
  45. package/src/pages/sizes.astro +4 -3
  46. package/src/pages/spacing.astro +3 -3
  47. package/src/pages/text-styles.astro +1 -1
  48. package/styled-system/jsx/index.d.ts +0 -1
  49. package/styled-system/jsx/index.mjs +1 -2
  50. package/styled-system/jsx/is-valid-prop.mjs +1 -1
  51. package/styled-system/patterns/index.d.ts +1 -2
  52. package/styled-system/patterns/index.mjs +1 -2
  53. package/styled-system/styles.css +708 -599
  54. package/styled-system/tokens/index.mjs +4 -0
  55. package/styled-system/tokens/tokens.d.ts +4 -4
  56. package/styled-system/types/prop-type.d.ts +1 -1
  57. package/tsconfig.json +8 -0
  58. package/src/components/nav-item.tsx +0 -39
  59. package/src/lib/create-context.ts +0 -27
  60. package/src/lib/panda.context.ts +0 -19
  61. package/src/lib/truncate.tsx +0 -7
package/src/layouts/Layout.astro CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  import '../../styled-system/styles.css'
3
3
  import Head from '../components/head.astro'
4
- import context from '../lib/panda.context'
4
+ import * as context from '../lib/panda-context'
5
5
  ---
6
6
 
7
7
  <!DOCTYPE html>
@@ -17,3 +17,4 @@ import context from '../lib/panda.context'
17
17
  <slot />
18
18
  </body>
19
19
  </html>
20
+
package/src/layouts/Sidebar.astro CHANGED
@@ -1,10 +1,9 @@
1
1
  ---
2
2
  import { Container, panda, Stack } from '../../styled-system/jsx'
3
3
  import '../../styled-system/styles.css'
4
- import { Logo } from '../components/logo'
5
4
  import SideNav from '../components/side-nav.astro'
6
5
  import ThemeToggle from '../components/theme-toggle.astro'
7
- import context from '../lib/panda.context'
6
+ import { Logo } from '../icons/logo'
8
7
 
9
8
  interface Props {
10
9
  title: string
@@ -15,8 +14,8 @@ const { title } = Astro.props
15
14
 
16
15
  <panda.main display="flex" height="calc(100vh - env(safe-area-inset-bottom))">
17
16
  <Stack height="full" minW="60" overflow="auto" px="12" py="8">
18
- <panda.a title="Token documentation" fontWeight="bold" fontSize="2xl" href="/" display="flex" gap="2">
19
- {context.logo ? <panda.img src={context.logo} width="16" alt="logo" /> : <Logo />}
17
+ <panda.a aria-label="Token documentation" fontWeight="bold" fontSize="2xl" href="/" display="flex" gap="2">
18
+ <Logo />
20
19
  </panda.a>
21
20
  <panda.div mt="4">
22
21
  <ThemeToggle />
@@ -24,8 +23,8 @@ const { title } = Astro.props
24
23
  <SideNav />
25
24
  </Stack>
26
25
 
27
- <Container width="full" overflow="auto">
28
- <panda.div px="4" pt="14" pb="8">
26
+ <Container width="full" overflow="auto" pb="10">
27
+ <panda.div px="4" pt="10" pb="8">
29
28
  <panda.h1 fontSize="3xl" fontWeight="semibold" mb="8" letterSpacing="tight">
30
29
  {title}
31
30
  </panda.h1>
@@ -33,3 +32,4 @@ const { title } = Astro.props
33
32
  </panda.div>
34
33
  </Container>
35
34
  </panda.main>
35
+
package/src/lib/constants.ts CHANGED
@@ -116,13 +116,6 @@ export const navItems: NavItemData[] = [
116
116
  icon: LayerStylesIcon,
117
117
  type: 'token',
118
118
  },
119
- // {
120
- // label: 'Token analyzer',
121
- // id: NavKeys.TOKEN_ANALYZER,
122
- // description: 'Visualize your tokens usage in your app.',
123
- // icon: LayerStylesIcon,
124
- // type: 'token',
125
- // },
126
119
  {
127
120
  label: 'Typography',
128
121
  id: NavKeys.TYPOGRAPHY_PLAYGROUND,
package/src/lib/panda-context.ts ADDED
@@ -0,0 +1,33 @@
1
+ import { flatten } from '@pandacss/shared'
2
+ import { Token, TokenDictionary } from '@pandacss/token-dictionary'
3
+ import type { TokenDataTypes } from '@pandacss/types'
4
+ import { config } from 'virtual:panda'
5
+
6
+ export const theme = config.theme ?? {}
7
+
8
+ export const tokens = new TokenDictionary(theme)
9
+
10
+ export const getTokens = (category: keyof TokenDataTypes): Token[] => {
11
+ const map = tokens.categoryMap.get(category) ?? new Map()
12
+ return Array.from(map.values())
13
+ }
14
+
15
+ type Colors = Array<{
16
+ label: string
17
+ value: string
18
+ }>
19
+
20
+ export const colors: Colors = getTokens('colors')
21
+ .filter((color) => !color.isConditional && !color.extensions.isVirtual)
22
+ .map((color) => ({
23
+ label: color.extensions.prop,
24
+ value: color.value,
25
+ }))
26
+
27
+ export const textStyles = flatten(theme?.textStyles ?? {})
28
+
29
+ export const layerStyles = flatten(theme?.layerStyles ?? {})
30
+
31
+ export const logo = config.studio?.logo
32
+
33
+ export const inject = config.studio?.inject ?? { head: '', body: '' }
package/src/lib/truncate.ts ADDED
@@ -0,0 +1,4 @@
1
+ export const truncate = (str: string, length = 15) => {
2
+ if (str.length > length) return str.substring(0, length) + '...'
3
+ return str
4
+ }
package/src/lib/use-color-docs.ts CHANGED
@@ -1,6 +1,6 @@
1
- import type { Token } from '@pandacss/types'
1
+ import type { Token } from '@pandacss/token-dictionary'
2
2
  import { useState } from 'react'
3
- import context from './panda.context'
3
+ import * as context from './panda-context'
4
4
 
5
5
  interface Color {
6
6
  isConditional?: boolean
@@ -14,15 +14,21 @@ type ColorToken = Token & Color
14
14
 
15
15
  const UNCATEGORIZED_ID = 'uncategorized' as const
16
16
 
17
- const groupByColorPalette = (colors: Map<string, any>, filterMethod?: (token: ColorToken) => boolean) => {
18
- const values = Array.from(colors.values()).filter((color) => !color.isConditional && !color.extensions.isVirtual)
19
- return values.reduce((acc, nxt) => {
20
- if (!filterMethod?.(nxt)) return acc
17
+ const groupByColorPalette = (colors: Token[], filterMethod?: (token: ColorToken) => boolean) => {
18
+ const values = colors.filter((color) => !color.isConditional && !color.extensions.isVirtual)
19
+
20
+ return values.reduce<Record<string, any>>((acc, color) => {
21
+ if (!filterMethod?.(color)) return acc
22
+
23
+ const colorPalette = color.extensions.colorPalette || UNCATEGORIZED_ID
24
+
25
+ if (!(colorPalette in acc)) {
26
+ acc[colorPalette] = []
27
+ }
28
+
29
+ const exists = (acc[colorPalette] as any[]).find((tok) => tok.name === color.name)
30
+ if (!exists) acc[colorPalette].push(color)
21
31
 
22
- const colorPalette = nxt.extensions.colorPalette || UNCATEGORIZED_ID
23
- if (!(colorPalette in acc)) acc[colorPalette] = []
24
- const exists = (acc[colorPalette] as any[]).find((tok) => tok.name === nxt.name)
25
- if (!exists) acc[colorPalette].push(nxt)
26
32
  return acc
27
33
  }, {})
28
34
  }
@@ -44,13 +50,13 @@ const getSemanticTokens = (allTokens: ColorToken[], filterMethod?: (token: Color
44
50
  }
45
51
  return acc
46
52
  }, [] as ColorToken[])
47
- .reduce(
53
+ .reduce<Record<string, any>>(
48
54
  (acc, nxt) => ({
49
55
  ...acc,
50
56
  [nxt.extensions?.prop]: {
51
- //@ts-expect-error
52
57
  ...acc[nxt.extensions?.prop],
53
- [nxt.extensions?.condition]: { value: nxt.value, isReference: nxt.isReference },
58
+ // @ts-ignore
59
+ [nxt.extensions.condition]: { value: nxt.value, isReference: nxt.isReference },
54
60
  extensions: nxt.extensions,
55
61
  },
56
62
  }),
@@ -59,7 +65,7 @@ const getSemanticTokens = (allTokens: ColorToken[], filterMethod?: (token: Color
59
65
  }
60
66
 
61
67
  const allTokens = context.tokens.allTokens
62
- const colors = context.getCategory('colors')
68
+ const colors = context.getTokens('colors')
63
69
 
64
70
  export const useColorDocs = () => {
65
71
  const [filterQuery, setFilterQuery] = useState('')
package/src/pages/colors.astro CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { Colors } from '../components/colors'
2
+ import Colors from '../components/colors'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
5
  ---
package/src/pages/font-sizes.astro CHANGED
@@ -1,11 +1,10 @@
1
1
  ---
2
- import { FontTokens } from '../components/font-tokens'
2
+ import FontTokens from '../components/font-tokens'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
+ import * as context from '../lib/panda-context'
5
6
 
6
- import context from '../lib/panda.context'
7
-
8
- const fontSizes = context.getCategory('fontSizes')
7
+ const fontSizes = context.getTokens('fontSizes')
9
8
  ---
10
9
 
11
10
  <Layout>
@@ -13,3 +12,4 @@ const fontSizes = context.getCategory('fontSizes')
13
12
  <FontTokens client:load fontTokens={fontSizes} token="fontSize" />
14
13
  </Sidebar>
15
14
  </Layout>
15
+
package/src/pages/font-weights.astro CHANGED
@@ -1,11 +1,10 @@
1
1
  ---
2
- import { FontTokens } from '../components/font-tokens'
2
+ import FontTokens from '../components/font-tokens'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
+ import * as context from '../lib/panda-context'
5
6
 
6
- import context from '../lib/panda.context'
7
-
8
- const fontWeights = context.getCategory('fontWeights')
7
+ const fontWeights = context.getTokens('fontWeights')
9
8
  ---
10
9
 
11
10
  <Layout>
package/src/pages/index.astro CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { Overview } from '../components/overview'
2
+ import Overview from '../components/overview'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  ---
5
5
 
package/src/pages/layer-styles.astro CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { LayerStyles } from '../components/layer-styles'
2
+ import LayerStyles from '../components/layer-styles'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
5
  ---
package/src/pages/letter-spacings.astro CHANGED
@@ -1,11 +1,11 @@
1
1
  ---
2
- import { FontTokens } from '../components/font-tokens'
2
+ import FontTokens from '../components/font-tokens'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
5
 
6
- import context from '../lib/panda.context'
6
+ import * as context from '../lib/panda-context'
7
7
 
8
- const tokens = context.getCategory('letterSpacings')
8
+ const tokens = context.getTokens('letterSpacings')
9
9
  ---
10
10
 
11
11
  <Layout>
@@ -18,3 +18,4 @@ const tokens = context.getCategory('letterSpacings')
18
18
  />
19
19
  </Sidebar>
20
20
  </Layout>
21
+
package/src/pages/line-heights.astro CHANGED
@@ -1,11 +1,10 @@
1
1
  ---
2
- import { FontTokens } from '../components/font-tokens'
2
+ import FontTokens from '../components/font-tokens'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
+ import * as context from '../lib/panda-context'
5
6
 
6
- import context from '../lib/panda.context'
7
-
8
- const tokens = context.getCategory('lineHeights')
7
+ const tokens = context.getTokens('lineHeights')
9
8
  ---
10
9
 
11
10
  <Layout>
package/src/pages/playground/contrast-checker.astro CHANGED
@@ -1,11 +1,11 @@
1
1
  ---
2
- import { ColorContrastChecker } from '../../components/color-constrast'
2
+ import ColorContrastChecker from '../../components/color-constrast'
3
3
  import Layout from '../../layouts/Layout.astro'
4
4
  import Sidebar from '../../layouts/Sidebar.astro'
5
5
  ---
6
6
 
7
7
  <Layout>
8
- <Sidebar>
8
+ <Sidebar title="Playground / Constrast">
9
9
  <ColorContrastChecker client:load />
10
10
  </Sidebar>
11
11
  </Layout>
package/src/pages/playground/typography.astro CHANGED
@@ -1,11 +1,11 @@
1
1
  ---
2
- import { TypographyPlayground } from '../../components/typography-playground'
2
+ import TypographyPlayground from '../../components/typography-playground'
3
3
  import Layout from '../../layouts/Layout.astro'
4
4
  import Sidebar from '../../layouts/Sidebar.astro'
5
5
  ---
6
6
 
7
7
  <Layout>
8
- <Sidebar>
8
+ <Sidebar title="Playground / Typography">
9
9
  <TypographyPlayground client:load />
10
10
  </Sidebar>
11
11
  </Layout>
package/src/pages/radii.astro CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { Radii } from '../components/radii'
2
+ import Radii from '../components/radii'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
5
  ---
package/src/pages/sizes.astro CHANGED
@@ -1,10 +1,10 @@
1
1
  ---
2
- import { Sizes } from '../components/sizes'
2
+ import Sizes from '../components/sizes'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
- import context from '../lib/panda.context'
5
+ import * as context from '../lib/panda-context'
6
6
 
7
- const tokens = context.getCategory('sizes')
7
+ const tokens = context.getTokens('sizes')
8
8
  ---
9
9
 
10
10
  <Layout>
@@ -12,3 +12,4 @@ const tokens = context.getCategory('sizes')
12
12
  <Sizes sizes={tokens} client:load />
13
13
  </Sidebar>
14
14
  </Layout>
15
+
package/src/pages/spacing.astro CHANGED
@@ -1,10 +1,10 @@
1
1
  ---
2
- import { Sizes } from '../components/sizes'
2
+ import Sizes from '../components/sizes'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
- import context from '../lib/panda.context'
5
+ import * as context from '../lib/panda-context'
6
6
 
7
- const tokens = context.getCategory('spacing')
7
+ const tokens = context.getTokens('spacing')
8
8
  ---
9
9
 
10
10
  <Layout>
package/src/pages/text-styles.astro CHANGED
@@ -1,5 +1,5 @@
1
1
  ---
2
- import { TextStyles } from '../components/text-styles'
2
+ import TextStyles from '../components/text-styles'
3
3
  import Layout from '../layouts/Layout.astro'
4
4
  import Sidebar from '../layouts/Sidebar.astro'
5
5
  ---
package/styled-system/jsx/index.d.ts CHANGED
@@ -21,5 +21,4 @@ export * from './divider';
21
21
  export * from './float';
22
22
  export * from './bleed';
23
23
  export * from './visually-hidden';
24
- export * from './styled-link';
25
24
  export type { HTMLPandaProps, PandaComponent } from '../types/jsx';
package/styled-system/jsx/index.mjs CHANGED
@@ -19,5 +19,4 @@ export * from './container.mjs';
19
19
  export * from './divider.mjs';
20
20
  export * from './float.mjs';
21
21
  export * from './bleed.mjs';
22
- export * from './visually-hidden.mjs';
23
- export * from './styled-link.mjs';
22
+ export * from './visually-hidden.mjs';
package/styled-system/jsx/is-valid-prop.mjs CHANGED
@@ -14,4 +14,4 @@ export {
14
14
  allCssProperties,
15
15
  isCssProperty
16
16
  };
17
- export const splitCssProps = /* @__PURE__ */ (props) => splitProps(props, isCssProperty)
17
+ export const splitCssProps = (props) => splitProps(props, isCssProperty)
package/styled-system/patterns/index.d.ts CHANGED
@@ -18,5 +18,4 @@ export * from './container';
18
18
  export * from './divider';
19
19
  export * from './float';
20
20
  export * from './bleed';
21
- export * from './visually-hidden';
22
- export * from './styled-link';
21
+ export * from './visually-hidden';
package/styled-system/patterns/index.mjs CHANGED
@@ -17,5 +17,4 @@ export * from './container.mjs';
17
17
  export * from './divider.mjs';
18
18
  export * from './float.mjs';
19
19
  export * from './bleed.mjs';
20
- export * from './visually-hidden.mjs';
21
- export * from './styled-link.mjs';
20
+ export * from './visually-hidden.mjs';