@pandacss/studio 0.17.3 → 0.17.5
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.
- package/dist/studio.js +2 -2
- package/dist/studio.mjs +2 -2
- package/package.json +7 -7
- package/src/components/semantic-color.tsx +19 -3
- package/src/components/typography-playground.tsx +8 -4
- package/src/lib/panda.context.ts +1 -1
- package/styled-system/chunks/src__components__color-wrapper.css +25 -16
- package/styled-system/chunks/src__components__colors.css +1 -0
- package/styled-system/chunks/src__components__empty-state.css +1 -0
- package/styled-system/chunks/src__components__font-family.css +1 -0
- package/styled-system/chunks/src__components__font-tokens.css +1 -0
- package/styled-system/chunks/src__components__input.css +16 -10
- package/styled-system/chunks/src__components__layer-styles.css +7 -5
- package/styled-system/chunks/src__components__nav-item.css +5 -3
- package/styled-system/chunks/src__components__overview.css +7 -4
- package/styled-system/chunks/src__components__radii.css +1 -0
- package/styled-system/chunks/src__components__semantic-color.css +5 -0
- package/styled-system/chunks/src__components__side-nav-item.css +7 -4
- package/styled-system/chunks/src__components__side-nav.css +1 -0
- package/styled-system/chunks/src__components__text-styles.css +1 -0
- package/styled-system/chunks/src__components__theme-toggle.css +4 -2
- package/styled-system/chunks/src__components__token-content.css +1 -0
- package/styled-system/chunks/src__components__token-group.css +1 -0
- package/styled-system/chunks/src__components__typography-playground.css +1 -0
- package/styled-system/chunks/src__layouts__Sidebar.css +4 -4
- package/styled-system/css/cva.mjs +3 -3
- package/styled-system/jsx/factory-helper.mjs +1 -1
- package/styled-system/styles.css +4 -4
package/dist/studio.js
CHANGED
|
@@ -33,10 +33,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
33
33
|
));
|
|
34
34
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
35
35
|
|
|
36
|
-
// ../../node_modules/.pnpm/tsup@7.1.
|
|
36
|
+
// ../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js
|
|
37
37
|
var getImportMetaUrl, importMetaUrl;
|
|
38
38
|
var init_cjs_shims = __esm({
|
|
39
|
-
"../../node_modules/.pnpm/tsup@7.1.
|
|
39
|
+
"../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/cjs_shims.js"() {
|
|
40
40
|
"use strict";
|
|
41
41
|
getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
|
|
42
42
|
importMetaUrl = /* @__PURE__ */ getImportMetaUrl();
|
package/dist/studio.mjs
CHANGED
|
@@ -34,12 +34,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
34
34
|
mod
|
|
35
35
|
));
|
|
36
36
|
|
|
37
|
-
// ../../node_modules/.pnpm/tsup@7.1.
|
|
37
|
+
// ../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js
|
|
38
38
|
import { fileURLToPath } from "url";
|
|
39
39
|
import path from "path";
|
|
40
40
|
var getFilename, getDirname, __dirname;
|
|
41
41
|
var init_esm_shims = __esm({
|
|
42
|
-
"../../node_modules/.pnpm/tsup@7.1.
|
|
42
|
+
"../../node_modules/.pnpm/tsup@7.1.0_typescript@5.2.2/node_modules/tsup/assets/esm_shims.js"() {
|
|
43
43
|
"use strict";
|
|
44
44
|
getFilename = () => fileURLToPath(import.meta.url);
|
|
45
45
|
getDirname = () => path.dirname(getFilename());
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pandacss/studio",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.5",
|
|
4
4
|
"description": "The automated token documentation for Panda CSS",
|
|
5
5
|
"main": "dist/studio.js",
|
|
6
6
|
"module": "dist/studio.mjs",
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
"react": "18.2.0",
|
|
44
44
|
"react-dom": "18.2.0",
|
|
45
45
|
"vite": "4.4.11",
|
|
46
|
-
"@pandacss/config": "0.17.
|
|
47
|
-
"@pandacss/logger": "0.17.
|
|
48
|
-
"@pandacss/node": "0.17.
|
|
49
|
-
"@pandacss/shared": "0.17.
|
|
50
|
-
"@pandacss/token-dictionary": "0.17.
|
|
51
|
-
"@pandacss/types": "0.17.
|
|
46
|
+
"@pandacss/config": "0.17.5",
|
|
47
|
+
"@pandacss/logger": "0.17.5",
|
|
48
|
+
"@pandacss/node": "0.17.5",
|
|
49
|
+
"@pandacss/shared": "0.17.5",
|
|
50
|
+
"@pandacss/token-dictionary": "0.17.5",
|
|
51
|
+
"@pandacss/types": "0.17.5"
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@types/react": "18.2.22",
|
|
@@ -1,14 +1,28 @@
|
|
|
1
1
|
import { Flex, panda } from '../../styled-system/jsx'
|
|
2
2
|
import { ColorWrapper } from './color-wrapper'
|
|
3
|
+
import context from '../lib/panda.context'
|
|
4
|
+
|
|
5
|
+
const getSemanticColorValue = (variable: string): string => {
|
|
6
|
+
const _name = variable.match(/var\(\s*--(.*?)\s*\)/)
|
|
7
|
+
if (!_name) return variable
|
|
8
|
+
const name = _name[1].replaceAll('-', '.')
|
|
9
|
+
const token = context.tokens.getByName(name)
|
|
10
|
+
if (token) return token.originalValue
|
|
11
|
+
const defaultToken = context.tokens.getByName(`${name}.default`)
|
|
12
|
+
return getSemanticColorValue(defaultToken?.value)
|
|
13
|
+
}
|
|
3
14
|
|
|
4
15
|
// remove initial underscore
|
|
5
16
|
const cleanCondition = (condition: string) => condition.replace(/^_/, '')
|
|
6
17
|
|
|
7
18
|
export function SemanticColorDisplay(props: { value: string; condition: string; token?: string }) {
|
|
8
19
|
const { value, condition, token } = props
|
|
20
|
+
|
|
21
|
+
const tokenValue = getSemanticColorValue(value)
|
|
22
|
+
|
|
9
23
|
return (
|
|
10
24
|
<Flex direction="column" w="full">
|
|
11
|
-
<ColorWrapper height="12" style={{ background:
|
|
25
|
+
<ColorWrapper height="12" style={{ background: tokenValue }}>
|
|
12
26
|
<panda.span
|
|
13
27
|
fontWeight="medium"
|
|
14
28
|
fontSize="sm"
|
|
@@ -24,9 +38,11 @@ export function SemanticColorDisplay(props: { value: string; condition: string;
|
|
|
24
38
|
{cleanCondition(condition)}
|
|
25
39
|
</panda.span>
|
|
26
40
|
</ColorWrapper>
|
|
27
|
-
|
|
41
|
+
<panda.div fontWeight="medium" mt="2">
|
|
42
|
+
{token}
|
|
43
|
+
</panda.div>
|
|
28
44
|
<panda.div opacity="0.7" fontSize="sm" textTransform="uppercase">
|
|
29
|
-
{value}
|
|
45
|
+
{value} {value !== tokenValue && `- ${tokenValue}`}
|
|
30
46
|
</panda.div>
|
|
31
47
|
</Flex>
|
|
32
48
|
)
|
|
@@ -3,9 +3,11 @@ import { Stack, panda } from '../../styled-system/jsx'
|
|
|
3
3
|
import context from '../lib/panda.context'
|
|
4
4
|
import { TokenContent } from './token-content'
|
|
5
5
|
import { TokenGroup } from './token-group'
|
|
6
|
+
import type { Token } from '@pandacss/token-dictionary'
|
|
6
7
|
|
|
7
|
-
const getFirstToken = <T extends Map<string, any>>(token
|
|
8
|
-
|
|
8
|
+
const getFirstToken = <T extends Map<string, any>>(token?: T) =>
|
|
9
|
+
token ? Array.from(token.values())[0].extensions.prop : {}
|
|
10
|
+
const tokens = Object.fromEntries<Map<string, Token> | undefined>(context.tokens.categoryMap)
|
|
9
11
|
|
|
10
12
|
const defaultConfig = {
|
|
11
13
|
fontSize: getFirstToken(tokens.fontSizes),
|
|
@@ -19,7 +21,7 @@ export function TypographyPlayground() {
|
|
|
19
21
|
const configValues = Object.entries(config).reduce(
|
|
20
22
|
(acc, [token, label]) => ({
|
|
21
23
|
...acc,
|
|
22
|
-
[token]: tokens[`${token}s`]
|
|
24
|
+
[token]: tokens[`${token}s`]?.get(label)?.value,
|
|
23
25
|
}),
|
|
24
26
|
{},
|
|
25
27
|
)
|
|
@@ -37,7 +39,9 @@ export function TypographyPlayground() {
|
|
|
37
39
|
}
|
|
38
40
|
|
|
39
41
|
const renderTokenSwitch = (token: keyof typeof defaultConfig) => {
|
|
40
|
-
const
|
|
42
|
+
const _token = tokens[`${token}s`]
|
|
43
|
+
if (!_token) return
|
|
44
|
+
const values = Array.from(_token.values())
|
|
41
45
|
return (
|
|
42
46
|
<panda.select background="card" value={config[token]} onChange={(e) => onChangeConfig(e, token)}>
|
|
43
47
|
{values.map((token) => (
|
package/src/lib/panda.context.ts
CHANGED
|
@@ -8,7 +8,7 @@ const { theme } = config
|
|
|
8
8
|
const context = {
|
|
9
9
|
tokens: new TokenDictionary(theme ?? {}),
|
|
10
10
|
getCategory(category: keyof TokenDataTypes) {
|
|
11
|
-
return this.tokens.categoryMap.get(category)
|
|
11
|
+
return this.tokens.categoryMap.get(category) ?? new Map()
|
|
12
12
|
},
|
|
13
13
|
textStyles: flatten(theme?.textStyles ?? {}),
|
|
14
14
|
layerStyles: flatten(theme?.layerStyles ?? {}),
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
+
|
|
2
3
|
.w_full {
|
|
3
4
|
width: var(--sizes-full)
|
|
4
5
|
}
|
|
@@ -22,28 +23,36 @@
|
|
|
22
23
|
.shadow_inset {
|
|
23
24
|
box-shadow: var(--shadows-inset)
|
|
24
25
|
}
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
|
|
27
|
+
.before\:content_\'\'::before {
|
|
28
|
+
content: ''
|
|
27
29
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
|
|
31
|
+
.before\:pos_absolute::before {
|
|
32
|
+
position: absolute
|
|
30
33
|
}
|
|
31
|
-
|
|
32
|
-
|
|
34
|
+
|
|
35
|
+
.before\:rounded_sm::before {
|
|
36
|
+
border-radius: var(--radii-sm)
|
|
33
37
|
}
|
|
34
|
-
|
|
35
|
-
|
|
38
|
+
|
|
39
|
+
.before\:w_100\%::before {
|
|
40
|
+
width: 100%
|
|
36
41
|
}
|
|
37
|
-
|
|
38
|
-
|
|
42
|
+
|
|
43
|
+
.before\:h_100\%::before {
|
|
44
|
+
height: 100%
|
|
39
45
|
}
|
|
40
|
-
|
|
41
|
-
|
|
46
|
+
|
|
47
|
+
.before\:bg_24px::before {
|
|
48
|
+
background-size: 24px
|
|
42
49
|
}
|
|
43
|
-
|
|
44
|
-
|
|
50
|
+
|
|
51
|
+
.before\:z_-1::before {
|
|
52
|
+
z-index: -1
|
|
45
53
|
}
|
|
46
|
-
|
|
47
|
-
|
|
54
|
+
|
|
55
|
+
.before\:bg-img_check::before {
|
|
56
|
+
background-image: var(--assets-check)
|
|
48
57
|
}
|
|
49
58
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
+
|
|
2
3
|
.bg_transparent {
|
|
3
4
|
background: var(--colors-transparent)
|
|
4
5
|
}
|
|
@@ -22,8 +23,9 @@
|
|
|
22
23
|
.text_neutral\.600 {
|
|
23
24
|
color: var(--colors-neutral-600)
|
|
24
25
|
}
|
|
25
|
-
|
|
26
|
-
|
|
26
|
+
|
|
27
|
+
.dark\:text_neutral\.300.dark, .dark .dark\:text_neutral\.300 {
|
|
28
|
+
color: var(--colors-neutral-300)
|
|
27
29
|
}
|
|
28
30
|
|
|
29
31
|
.shadow_sm {
|
|
@@ -37,16 +39,20 @@
|
|
|
37
39
|
.border_border {
|
|
38
40
|
border-color: var(--colors-border)
|
|
39
41
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
|
|
43
|
+
.focusWithin\:outline-style_solid:focus-within {
|
|
44
|
+
outline-style: solid
|
|
42
45
|
}
|
|
43
|
-
|
|
44
|
-
|
|
46
|
+
|
|
47
|
+
.focusWithin\:ring_2px:focus-within {
|
|
48
|
+
outline-width: 2px
|
|
45
49
|
}
|
|
46
|
-
|
|
47
|
-
|
|
50
|
+
|
|
51
|
+
.focusWithin\:ring_2px:focus-within {
|
|
52
|
+
outline-offset: 2px
|
|
48
53
|
}
|
|
49
|
-
|
|
50
|
-
|
|
54
|
+
|
|
55
|
+
.focusWithin\:ring_neutral\.400:focus-within {
|
|
56
|
+
outline-color: var(--colors-neutral-400)
|
|
51
57
|
}
|
|
52
58
|
}
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
|
|
3
|
+
.divide-y_1px > :not([hidden]) ~ :not([hidden]) {
|
|
4
|
+
border-top-width: 1px;
|
|
5
|
+
border-bottom-width: 0px
|
|
5
6
|
}
|
|
6
|
-
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
.divide_card > :not([hidden]) ~ :not([hidden]) {
|
|
9
|
+
border-color: var(--colors-card)
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
.px_1 {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
+
|
|
2
3
|
.w_60 {
|
|
3
4
|
width: var(--sizes-60)
|
|
4
5
|
}
|
|
@@ -18,9 +19,6 @@
|
|
|
18
19
|
.transition_all_0\.2s_ease {
|
|
19
20
|
transition: all 0.2s ease
|
|
20
21
|
}
|
|
21
|
-
.hover\:shadow_lg:is(:hover, [data-hover]) {
|
|
22
|
-
box-shadow: var(--shadows-lg)
|
|
23
|
-
}
|
|
24
22
|
.\[\&_svg\]\:font_normal svg {
|
|
25
23
|
font-weight: var(--font-weights-normal)
|
|
26
24
|
}
|
|
@@ -52,4 +50,8 @@
|
|
|
52
50
|
.mt_3 {
|
|
53
51
|
margin-top: var(--spacing-3)
|
|
54
52
|
}
|
|
53
|
+
|
|
54
|
+
.hover\:shadow_lg:is(:hover, [data-hover]) {
|
|
55
|
+
box-shadow: var(--shadows-lg)
|
|
56
|
+
}
|
|
55
57
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
+
|
|
2
3
|
.bg_\#646cff {
|
|
3
4
|
background: #646cff
|
|
4
5
|
}
|
|
@@ -110,10 +111,12 @@
|
|
|
110
111
|
.p_0 {
|
|
111
112
|
padding: var(--spacing-0)
|
|
112
113
|
}
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
|
|
115
|
+
.\[\&\:hover\]\:bg_\#4049f0:hover {
|
|
116
|
+
background: #4049f0
|
|
115
117
|
}
|
|
116
|
-
|
|
117
|
-
|
|
118
|
+
|
|
119
|
+
.\[\&\:hover\]\:shadow_lg:hover {
|
|
120
|
+
box-shadow: var(--shadows-lg)
|
|
118
121
|
}
|
|
119
122
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@layer utilities {
|
|
2
|
+
|
|
2
3
|
.d_block {
|
|
3
4
|
display: block
|
|
4
5
|
}
|
|
@@ -18,10 +19,12 @@
|
|
|
18
19
|
.font_medium {
|
|
19
20
|
font-weight: var(--font-weights-medium)
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
22
|
+
|
|
23
|
+
.currentPage\:text_yellow\.300[aria-current=page] {
|
|
24
|
+
color: var(--colors-yellow-300)
|
|
23
25
|
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
|
|
27
|
+
.hover\:text_yellow\.300:is(:hover, [data-hover]) {
|
|
28
|
+
color: var(--colors-yellow-300)
|
|
26
29
|
}
|
|
27
30
|
}
|
|
@@ -99,15 +99,15 @@
|
|
|
99
99
|
.overflow_auto {
|
|
100
100
|
overflow: auto
|
|
101
101
|
}
|
|
102
|
-
@media screen and (min-width: 48em) {
|
|
103
102
|
|
|
104
|
-
|
|
103
|
+
@media screen and (min-width: 48em) {
|
|
104
|
+
.md\:px_6 {
|
|
105
105
|
padding-inline: var(--spacing-6)
|
|
106
106
|
}
|
|
107
107
|
}
|
|
108
|
-
@media screen and (min-width: 64em) {
|
|
109
108
|
|
|
110
|
-
|
|
109
|
+
@media screen and (min-width: 64em) {
|
|
110
|
+
.lg\:px_8 {
|
|
111
111
|
padding-inline: var(--spacing-8)
|
|
112
112
|
}
|
|
113
113
|
}
|
|
@@ -24,9 +24,9 @@ export function cva(config) {
|
|
|
24
24
|
return mergeCss(variantCss, compoundVariantCss)
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
function merge(
|
|
28
|
-
const override = defaults(
|
|
29
|
-
const variantKeys = uniq(
|
|
27
|
+
function merge(__cva) {
|
|
28
|
+
const override = defaults(__cva.config)
|
|
29
|
+
const variantKeys = uniq(__cva.variantKeys, Object.keys(variants))
|
|
30
30
|
return cva({
|
|
31
31
|
base: mergeCss(base, override.base),
|
|
32
32
|
variants: Object.fromEntries(
|
|
@@ -10,7 +10,7 @@ export const composeShouldForwardProps = (tag, shouldForwardProp) =>
|
|
|
10
10
|
export const composeCvaFn = (cvaA, cvaB) => {
|
|
11
11
|
if (cvaA && !cvaB) return cvaA
|
|
12
12
|
if (!cvaA && cvaB) return cvaB
|
|
13
|
-
if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB
|
|
13
|
+
if ((cvaA.__cva__ && cvaB.__cva__) || (cvaA.__recipe__ && cvaB.__recipe__)) return cvaA.merge(cvaB)
|
|
14
14
|
const error = new TypeError('Cannot merge cva with recipe. Please use either cva or recipe.')
|
|
15
15
|
TypeError.captureStackTrace?.(error)
|
|
16
16
|
throw error
|
package/styled-system/styles.css
CHANGED
|
@@ -99,10 +99,6 @@
|
|
|
99
99
|
gap: var(--spacing-0\.5)
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
.mt_2 {
|
|
103
|
-
margin-top: var(--spacing-2)
|
|
104
|
-
}
|
|
105
|
-
|
|
106
102
|
.grid-cols_repeat\(auto-fit\,_minmax\(13rem\,_1fr\)\) {
|
|
107
103
|
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr))
|
|
108
104
|
}
|
|
@@ -368,6 +364,10 @@
|
|
|
368
364
|
border-color: var(--colors-neutral-700)
|
|
369
365
|
}
|
|
370
366
|
|
|
367
|
+
.mt_2 {
|
|
368
|
+
margin-top: var(--spacing-2)
|
|
369
|
+
}
|
|
370
|
+
|
|
371
371
|
.fs_sm {
|
|
372
372
|
font-size: var(--font-sizes-sm)
|
|
373
373
|
}
|