@ndla/preset-panda 0.0.8 → 0.0.10
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/styles.css +11 -7
- package/es/boxShadows.js +1 -1
- package/es/conditions.js +1 -1
- package/es/globalCss.js +5 -1
- package/es/plugins/forwardCssPropPlugin.js +42 -12
- package/es/typography.js +2 -2
- package/lib/boxShadows.js +1 -1
- package/lib/conditions.js +1 -1
- package/lib/globalCss.js +5 -1
- package/lib/plugins/forwardCssPropPlugin.js +42 -12
- package/lib/typography.js +2 -2
- package/package.json +3 -3
package/dist/styles.css
CHANGED
|
@@ -33,6 +33,10 @@
|
|
|
33
33
|
white-space: pre-wrap;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
+
iframe#launcher {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
36
40
|
h1:not([class]) {
|
|
37
41
|
margin: 24px 0 12px 0;
|
|
38
42
|
}
|
|
@@ -60,7 +64,7 @@
|
|
|
60
64
|
line-height: var(--line-heights-3xlarge);
|
|
61
65
|
}
|
|
62
66
|
|
|
63
|
-
h1:where([lang='zh'],
|
|
67
|
+
h1:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
64
68
|
font-size: calc(var(--font-sizes-3xlarge) * 1.11);
|
|
65
69
|
line-height: calc(var(--line-heights-3xlarge) * 1.11);
|
|
66
70
|
}
|
|
@@ -72,7 +76,7 @@
|
|
|
72
76
|
line-height: var(--line-heights-xxlarge);
|
|
73
77
|
}
|
|
74
78
|
|
|
75
|
-
h2:where([lang='zh'],
|
|
79
|
+
h2:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
76
80
|
font-size: calc(var(--font-sizes-xxlarge) * 1.11);
|
|
77
81
|
line-height: calc(var(--line-heights-xxlarge) * 1.11);
|
|
78
82
|
}
|
|
@@ -84,7 +88,7 @@
|
|
|
84
88
|
line-height: var(--line-heights-xlarge);
|
|
85
89
|
}
|
|
86
90
|
|
|
87
|
-
h3:where([lang='zh'],
|
|
91
|
+
h3:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
88
92
|
font-size: calc(var(--font-sizes-xlarge) * 1.11);
|
|
89
93
|
line-height: calc(var(--line-heights-xlarge) * 1.11);
|
|
90
94
|
}
|
|
@@ -96,7 +100,7 @@
|
|
|
96
100
|
line-height: var(--line-heights-large);
|
|
97
101
|
}
|
|
98
102
|
|
|
99
|
-
h4:where([lang='zh'],
|
|
103
|
+
h4:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),h5:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),h6:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
100
104
|
font-size: calc(var(--font-sizes-large) * 1.11);
|
|
101
105
|
line-height: calc(var(--line-heights-large) * 1.11);
|
|
102
106
|
}
|
|
@@ -108,17 +112,17 @@
|
|
|
108
112
|
line-height: var(--line-heights-small);
|
|
109
113
|
}
|
|
110
114
|
|
|
111
|
-
p:where([lang='zh'],
|
|
115
|
+
p:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
112
116
|
font-size: calc(var(--font-sizes-small) * 1.11);
|
|
113
117
|
line-height: calc(var(--line-heights-small) * 1.11);
|
|
114
118
|
}
|
|
115
119
|
|
|
116
|
-
a {
|
|
120
|
+
a:not([class]),a[class=""] {
|
|
117
121
|
color: var(--colors-text-link);
|
|
118
122
|
text-decoration: underline;
|
|
119
123
|
}
|
|
120
124
|
|
|
121
|
-
a:is(:hover, [data-hover]) {
|
|
125
|
+
a:not([class]):is(:hover, [data-hover]),a[class=""]:is(:hover, [data-hover]) {
|
|
122
126
|
text-decoration: none;
|
|
123
127
|
}
|
|
124
128
|
|
package/es/boxShadows.js
CHANGED
|
@@ -27,7 +27,7 @@ export const boxShadows = defineTokens.shadows({
|
|
|
27
27
|
value: "4px 4px 0px 0px {colors.primary}"
|
|
28
28
|
},
|
|
29
29
|
inner: {
|
|
30
|
-
value:
|
|
30
|
+
value: `0px -1px 0px 0px {colors.primary} inset`
|
|
31
31
|
},
|
|
32
32
|
innerTop: {
|
|
33
33
|
value: "0px 1px 0px 0px {colors.primary} inset"
|
package/es/conditions.js
CHANGED
|
@@ -7,6 +7,6 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
export const conditions = {
|
|
10
|
-
chinese: "&:where([lang='zh'],
|
|
10
|
+
chinese: "&:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin])",
|
|
11
11
|
ariaInvalid: "&:has([aria-invalid='true']), &[aria-invalid='true']"
|
|
12
12
|
};
|
package/es/globalCss.js
CHANGED
|
@@ -34,6 +34,10 @@ export const globalCss = defineGlobalStyles({
|
|
|
34
34
|
background: "background.subtle",
|
|
35
35
|
whiteSpace: "pre-wrap"
|
|
36
36
|
},
|
|
37
|
+
/* Hide default zendesk launcher so that we can provide our own. */
|
|
38
|
+
"iframe#launcher": {
|
|
39
|
+
display: "none"
|
|
40
|
+
},
|
|
37
41
|
// TODO: Remove these again once they're no longer needed.
|
|
38
42
|
// Some text elements don't have a styling class, and therefor no margin. Handled with generic fallbacks in old global css, and now temporarily handled by these selectors.
|
|
39
43
|
"h1:not([class])": {
|
|
@@ -66,7 +70,7 @@ export const globalCss = defineGlobalStyles({
|
|
|
66
70
|
p: {
|
|
67
71
|
textStyle: "body.medium"
|
|
68
72
|
},
|
|
69
|
-
a: {
|
|
73
|
+
'a:not([class]), a[class=""]': {
|
|
70
74
|
color: "text.link",
|
|
71
75
|
textDecoration: "underline",
|
|
72
76
|
_hover: {
|
|
@@ -14,7 +14,7 @@ export const forwardCssPropPlugin = () => {
|
|
|
14
14
|
"config:resolved": args => {
|
|
15
15
|
const jsxFramework = args.config.jsxFramework;
|
|
16
16
|
if (!supportedJsxFrameworks.includes(jsxFramework)) {
|
|
17
|
-
throw new Error(
|
|
17
|
+
throw new Error(`[plugin:restrict-styled-props]: Unsupported jsxFramework: ${jsxFramework}. This Panda plugin only supports: ${supportedJsxFrameworks.join(", ")}`);
|
|
18
18
|
}
|
|
19
19
|
},
|
|
20
20
|
"codegen:prepare": args => {
|
|
@@ -24,24 +24,54 @@ export const forwardCssPropPlugin = () => {
|
|
|
24
24
|
};
|
|
25
25
|
};
|
|
26
26
|
export const transformStyledFn = args => {
|
|
27
|
-
var _args$artifacts$find, _args$artifacts$find2;
|
|
28
27
|
const factoryArtifact = args.artifacts.find(art => art.id === "jsx-factory");
|
|
29
|
-
const factoryJs = factoryArtifact
|
|
30
|
-
const jsxTypes =
|
|
31
|
-
const systemTypes =
|
|
32
|
-
if (!
|
|
28
|
+
const factoryJs = factoryArtifact?.files.find(f => f.file.includes(".mjs") || f.file.includes(".js"));
|
|
29
|
+
const jsxTypes = args.artifacts.find(art => art.id === "types-jsx")?.files.find(f => f.file.includes("jsx"));
|
|
30
|
+
const systemTypes = args.artifacts.find(art => art.id === "types-gen-system")?.files.find(f => f.file.includes("system-types"));
|
|
31
|
+
if (!factoryJs?.code || !jsxTypes?.code || !systemTypes?.code) {
|
|
33
32
|
return args.artifacts;
|
|
34
33
|
}
|
|
35
34
|
const baseCode = "const __base__ = Dynamic.__base__ || Dynamic";
|
|
36
|
-
factoryJs.code = factoryJs.code.replace(baseCode,
|
|
35
|
+
factoryJs.code = factoryJs.code.replace(baseCode, `${baseCode}
|
|
36
|
+
const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === "string"`);
|
|
37
37
|
const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
|
|
38
|
-
factoryJs.code = factoryJs.code.replace(propsCode,
|
|
38
|
+
factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
|
|
39
|
+
|
|
40
|
+
const consume = props.asChild
|
|
41
|
+
? consumeCss && options.baseComponent
|
|
42
|
+
: consumeCss ?? contextConsume`);
|
|
39
43
|
const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
|
|
40
|
-
factoryJs.code = factoryJs.code.replace(cvaCode,
|
|
41
|
-
|
|
44
|
+
factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
|
|
45
|
+
if(!consume) {
|
|
46
|
+
return css.raw(cvaStyles, propStyles, cssStyles)
|
|
47
|
+
}`);
|
|
48
|
+
factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
|
|
42
49
|
const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
|
|
43
|
-
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode,
|
|
50
|
+
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
|
|
51
|
+
/**
|
|
52
|
+
* Used when creating styled components from React components that do not support the css prop. If true, the css prop will be consumed and converted to \`className\`
|
|
53
|
+
* @example
|
|
54
|
+
* import { ark } from "@ark-ui/react"
|
|
55
|
+
* import { styled } from "@ndla/styled-system/jsx"
|
|
56
|
+
* const Button = styled(ark.button, { baseComponent: true })
|
|
57
|
+
*/
|
|
58
|
+
baseComponent?: boolean`);
|
|
44
59
|
const jsxStylePropsCode = "export type JsxStyleProps =";
|
|
45
|
-
systemTypes.code = systemTypes.code.replace(jsxStylePropsCode,
|
|
60
|
+
systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, `${jsxStylePropsCode} {
|
|
61
|
+
/**
|
|
62
|
+
* Tells a component to consume the \`css\` prop and turn it into a \`className\` prop. This is only used in conjunction with the \`baseComponent\` prop in the \`styled\` function to ensure that components that are \`asChild\`-ed onto non-panda components can consume their css before being merged with their child.
|
|
63
|
+
* @example
|
|
64
|
+
* import { ark } from "@ark-ui/react"
|
|
65
|
+
* import { styled } from "@ndla/styled-system/jsx"
|
|
66
|
+
* const Button = styled('button', { baseComponent: true })
|
|
67
|
+
*
|
|
68
|
+
* return (
|
|
69
|
+
* <Button asChild consumeCss>
|
|
70
|
+
* <div>Click me</div>
|
|
71
|
+
* </Button>
|
|
72
|
+
* )
|
|
73
|
+
*/
|
|
74
|
+
consumeCss?: boolean
|
|
75
|
+
} & `);
|
|
46
76
|
return args.artifacts;
|
|
47
77
|
};
|
package/es/typography.js
CHANGED
|
@@ -104,8 +104,8 @@ const sizes = (size, lineHeight) => {
|
|
|
104
104
|
fontSize: size,
|
|
105
105
|
lineHeight,
|
|
106
106
|
_chinese: {
|
|
107
|
-
fontSize:
|
|
108
|
-
lineHeight:
|
|
107
|
+
fontSize: `calc(token(fontSizes.${size}) * 1.11)`,
|
|
108
|
+
lineHeight: `calc(token(lineHeights.${lineHeight}) * 1.11)`
|
|
109
109
|
}
|
|
110
110
|
};
|
|
111
111
|
};
|
package/lib/boxShadows.js
CHANGED
|
@@ -33,7 +33,7 @@ const boxShadows = exports.boxShadows = _dev.defineTokens.shadows({
|
|
|
33
33
|
value: "4px 4px 0px 0px {colors.primary}"
|
|
34
34
|
},
|
|
35
35
|
inner: {
|
|
36
|
-
value:
|
|
36
|
+
value: `0px -1px 0px 0px {colors.primary} inset`
|
|
37
37
|
},
|
|
38
38
|
innerTop: {
|
|
39
39
|
value: "0px 1px 0px 0px {colors.primary} inset"
|
package/lib/conditions.js
CHANGED
|
@@ -13,6 +13,6 @@ exports.conditions = void 0;
|
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
15
|
const conditions = exports.conditions = {
|
|
16
|
-
chinese: "&:where([lang='zh'],
|
|
16
|
+
chinese: "&:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin])",
|
|
17
17
|
ariaInvalid: "&:has([aria-invalid='true']), &[aria-invalid='true']"
|
|
18
18
|
};
|
package/lib/globalCss.js
CHANGED
|
@@ -40,6 +40,10 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
40
40
|
background: "background.subtle",
|
|
41
41
|
whiteSpace: "pre-wrap"
|
|
42
42
|
},
|
|
43
|
+
/* Hide default zendesk launcher so that we can provide our own. */
|
|
44
|
+
"iframe#launcher": {
|
|
45
|
+
display: "none"
|
|
46
|
+
},
|
|
43
47
|
// TODO: Remove these again once they're no longer needed.
|
|
44
48
|
// Some text elements don't have a styling class, and therefor no margin. Handled with generic fallbacks in old global css, and now temporarily handled by these selectors.
|
|
45
49
|
"h1:not([class])": {
|
|
@@ -72,7 +76,7 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
|
|
|
72
76
|
p: {
|
|
73
77
|
textStyle: "body.medium"
|
|
74
78
|
},
|
|
75
|
-
a: {
|
|
79
|
+
'a:not([class]), a[class=""]': {
|
|
76
80
|
color: "text.link",
|
|
77
81
|
textDecoration: "underline",
|
|
78
82
|
_hover: {
|
|
@@ -20,7 +20,7 @@ const forwardCssPropPlugin = () => {
|
|
|
20
20
|
"config:resolved": args => {
|
|
21
21
|
const jsxFramework = args.config.jsxFramework;
|
|
22
22
|
if (!supportedJsxFrameworks.includes(jsxFramework)) {
|
|
23
|
-
throw new Error(
|
|
23
|
+
throw new Error(`[plugin:restrict-styled-props]: Unsupported jsxFramework: ${jsxFramework}. This Panda plugin only supports: ${supportedJsxFrameworks.join(", ")}`);
|
|
24
24
|
}
|
|
25
25
|
},
|
|
26
26
|
"codegen:prepare": args => {
|
|
@@ -31,25 +31,55 @@ const forwardCssPropPlugin = () => {
|
|
|
31
31
|
};
|
|
32
32
|
exports.forwardCssPropPlugin = forwardCssPropPlugin;
|
|
33
33
|
const transformStyledFn = args => {
|
|
34
|
-
var _args$artifacts$find, _args$artifacts$find2;
|
|
35
34
|
const factoryArtifact = args.artifacts.find(art => art.id === "jsx-factory");
|
|
36
|
-
const factoryJs = factoryArtifact
|
|
37
|
-
const jsxTypes =
|
|
38
|
-
const systemTypes =
|
|
39
|
-
if (!
|
|
35
|
+
const factoryJs = factoryArtifact?.files.find(f => f.file.includes(".mjs") || f.file.includes(".js"));
|
|
36
|
+
const jsxTypes = args.artifacts.find(art => art.id === "types-jsx")?.files.find(f => f.file.includes("jsx"));
|
|
37
|
+
const systemTypes = args.artifacts.find(art => art.id === "types-gen-system")?.files.find(f => f.file.includes("system-types"));
|
|
38
|
+
if (!factoryJs?.code || !jsxTypes?.code || !systemTypes?.code) {
|
|
40
39
|
return args.artifacts;
|
|
41
40
|
}
|
|
42
41
|
const baseCode = "const __base__ = Dynamic.__base__ || Dynamic";
|
|
43
|
-
factoryJs.code = factoryJs.code.replace(baseCode,
|
|
42
|
+
factoryJs.code = factoryJs.code.replace(baseCode, `${baseCode}
|
|
43
|
+
const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === "string"`);
|
|
44
44
|
const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
|
|
45
|
-
factoryJs.code = factoryJs.code.replace(propsCode,
|
|
45
|
+
factoryJs.code = factoryJs.code.replace(propsCode, `const { as: Element = __base__, consumeCss, children, ...restProps } = props
|
|
46
|
+
|
|
47
|
+
const consume = props.asChild
|
|
48
|
+
? consumeCss && options.baseComponent
|
|
49
|
+
: consumeCss ?? contextConsume`);
|
|
46
50
|
const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
|
|
47
|
-
factoryJs.code = factoryJs.code.replace(cvaCode,
|
|
48
|
-
|
|
51
|
+
factoryJs.code = factoryJs.code.replace(cvaCode, `${cvaCode}
|
|
52
|
+
if(!consume) {
|
|
53
|
+
return css.raw(cvaStyles, propStyles, cssStyles)
|
|
54
|
+
}`);
|
|
55
|
+
factoryJs.code = factoryJs.code.replace("className: classes()", `...(consume ? { className: classes() } : { css: classes(), consumeCss } )`);
|
|
49
56
|
const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
|
|
50
|
-
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode,
|
|
57
|
+
jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, `${shouldForwardPropCode}
|
|
58
|
+
/**
|
|
59
|
+
* Used when creating styled components from React components that do not support the css prop. If true, the css prop will be consumed and converted to \`className\`
|
|
60
|
+
* @example
|
|
61
|
+
* import { ark } from "@ark-ui/react"
|
|
62
|
+
* import { styled } from "@ndla/styled-system/jsx"
|
|
63
|
+
* const Button = styled(ark.button, { baseComponent: true })
|
|
64
|
+
*/
|
|
65
|
+
baseComponent?: boolean`);
|
|
51
66
|
const jsxStylePropsCode = "export type JsxStyleProps =";
|
|
52
|
-
systemTypes.code = systemTypes.code.replace(jsxStylePropsCode,
|
|
67
|
+
systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, `${jsxStylePropsCode} {
|
|
68
|
+
/**
|
|
69
|
+
* Tells a component to consume the \`css\` prop and turn it into a \`className\` prop. This is only used in conjunction with the \`baseComponent\` prop in the \`styled\` function to ensure that components that are \`asChild\`-ed onto non-panda components can consume their css before being merged with their child.
|
|
70
|
+
* @example
|
|
71
|
+
* import { ark } from "@ark-ui/react"
|
|
72
|
+
* import { styled } from "@ndla/styled-system/jsx"
|
|
73
|
+
* const Button = styled('button', { baseComponent: true })
|
|
74
|
+
*
|
|
75
|
+
* return (
|
|
76
|
+
* <Button asChild consumeCss>
|
|
77
|
+
* <div>Click me</div>
|
|
78
|
+
* </Button>
|
|
79
|
+
* )
|
|
80
|
+
*/
|
|
81
|
+
consumeCss?: boolean
|
|
82
|
+
} & `);
|
|
53
83
|
return args.artifacts;
|
|
54
84
|
};
|
|
55
85
|
exports.transformStyledFn = transformStyledFn;
|
package/lib/typography.js
CHANGED
|
@@ -110,8 +110,8 @@ const sizes = (size, lineHeight) => {
|
|
|
110
110
|
fontSize: size,
|
|
111
111
|
lineHeight,
|
|
112
112
|
_chinese: {
|
|
113
|
-
fontSize:
|
|
114
|
-
lineHeight:
|
|
113
|
+
fontSize: `calc(token(fontSizes.${size}) * 1.11)`,
|
|
114
|
+
lineHeight: `calc(token(lineHeights.${lineHeight}) * 1.11)`
|
|
115
115
|
}
|
|
116
116
|
};
|
|
117
117
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/preset-panda",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10",
|
|
4
4
|
"description": "Panda preset for NDLA.",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"lib"
|
|
32
32
|
],
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@pandacss/dev": "^0.
|
|
34
|
+
"@pandacss/dev": "^0.42.0"
|
|
35
35
|
},
|
|
36
36
|
"publishConfig": {
|
|
37
37
|
"access": "public"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "93dde6fe4aaca52642f8fa0a27f4acad359207cb"
|
|
40
40
|
}
|