@ndla/preset-panda 0.0.5 → 0.0.7-alpha.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 (7) hide show
  1. package/dist/styles.css +8 -5
  2. package/es/boxShadows.js +16 -7
  3. package/es/plugins/forwardCssPropPlugin.js +7 -5
  4. package/lib/boxShadows.d.ts +11 -2
  5. package/lib/boxShadows.js +16 -7
  6. package/lib/plugins/forwardCssPropPlugin.js +7 -5
  7. package/package.json +3 -3
package/dist/styles.css CHANGED
@@ -383,11 +383,14 @@
383
383
  --animations-drawer-in-top: slide-in-top 400ms var(--easings-emphasized-in);
384
384
  --animations-drawer-out-top: slide-out-top 200ms var(--easings-emphasized-out);
385
385
  --animations-skeleton-pulse: skeleton-pulse 2s var(--easings-pulse) infinite;
386
- --shadows-xxsmall: 0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
387
- --shadows-xsmall: 0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
388
- --shadows-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15);
389
- --shadows-large: 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12);
390
- --shadows-xlarge: 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08);
386
+ --shadows-xsmall: 0px 1px 4px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
387
+ --shadows-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.18);
388
+ --shadows-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px 1px 0px rgba(0, 0, 0, 0.15);
389
+ --shadows-large: 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.12);
390
+ --shadows-xlarge: 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.08);
391
+ --shadows-full: 4px 4px 0px 0px var(--colors-primary);
392
+ --shadows-inner: 0px -1px 0px 0px var(--colors-primary) inset;
393
+ --shadows-inner-top: 0px 1px 0px 0px var(--colors-primary) inset;
391
394
  --z-index-hide: -1;
392
395
  --z-index-base: 0;
393
396
  --z-index-docked: 10;
package/es/boxShadows.js CHANGED
@@ -8,19 +8,28 @@
8
8
 
9
9
  import { defineTokens } from "@pandacss/dev";
10
10
  export const boxShadows = defineTokens.shadows({
11
- xxsmall: {
12
- value: ["0px 1px 3px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.18)"]
13
- },
14
11
  xsmall: {
15
- value: ["0px 3px 8px 0px rgba(0, 0, 0, 0.10)", "0px 1px 3px 0px rgba(0, 0, 0, 0.10)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.18)"]
12
+ value: ["0px 1px 4px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"]
13
+ },
14
+ small: {
15
+ value: ["0px 3px 8px 0px rgba(0, 0, 0, 0.1)", "0px 1px 3px 0px rgba(0, 0, 0, 0.1)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"]
16
16
  },
17
17
  medium: {
18
- value: ["0px 5px 12px 0px rgba(0, 0, 0, 0.13)", "0px 1px 3px 0px rgba(0, 0, 0, 0.10)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.15)"]
18
+ value: ["0px 5px 12px 0px rgba(0, 0, 0, 0.13)", "0px 1px 3px 0px rgba(0, 0, 0, 0.1)", "0px 0px 1px 0px rgba(0, 0, 0, 0.15)"]
19
19
  },
20
20
  large: {
21
- value: ["0px 10px 16px 0px rgba(0, 0, 0, 0.12)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.12)"]
21
+ value: ["0px 10px 16px 0px rgba(0, 0, 0, 0.12)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.12)"]
22
22
  },
23
23
  xlarge: {
24
- value: ["0px 10px 24px 0px rgba(0, 0, 0, 0.18)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.08)"]
24
+ value: ["0px 10px 24px 0px rgba(0, 0, 0, 0.18)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.08)"]
25
+ },
26
+ full: {
27
+ value: "4px 4px 0px 0px {colors.primary}"
28
+ },
29
+ inner: {
30
+ value: "0px -1px 0px 0px {colors.primary} inset"
31
+ },
32
+ innerTop: {
33
+ value: "0px 1px 0px 0px {colors.primary} inset"
25
34
  }
26
35
  });
package/es/plugins/forwardCssPropPlugin.js CHANGED
@@ -32,14 +32,16 @@ export const transformStyledFn = args => {
32
32
  if (!(factoryJs !== null && factoryJs !== void 0 && factoryJs.code) || !(jsxTypes !== null && jsxTypes !== void 0 && jsxTypes.code) || !(systemTypes !== null && systemTypes !== void 0 && systemTypes.code)) {
33
33
  return args.artifacts;
34
34
  }
35
+ const baseCode = "const __base__ = Dynamic.__base__ || Dynamic";
36
+ factoryJs.code = factoryJs.code.replace(baseCode, "".concat(baseCode, "\n const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === \"string\""));
35
37
  const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
36
- factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, forwardCssProp, children, ...restProps } = props");
38
+ factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, consumeCss, children, ...restProps } = props\n\n const consume = props.asChild\n ? consumeCss && options.baseComponent\n : consumeCss ?? contextConsume");
37
39
  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
38
- factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n if(options.forwardCssProp || forwardCssProp) {\n return css.raw(cvaStyles, propStyles, cssStyles)\n }"));
39
- factoryJs.code = factoryJs.code.replace("className: classes()", "...(options.forwardCssProp || forwardCssProp ? { css: classes() } : { className: classes() })");
40
+ factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n if(!consume) {\n return css.raw(cvaStyles, propStyles, cssStyles)\n }"));
41
+ factoryJs.code = factoryJs.code.replace("className: classes()", "...(consume ? { className: classes() } : { css: classes(), consumeCss } )");
40
42
  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
41
- jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n forwardCssProp?: boolean"));
43
+ jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n /**\n * 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` \n * @example\n * import { ark } from \"@ark-ui/react\"\n * import { styled } from \"@ndla/styled-system/jsx\"\n * const Button = styled(ark.button, { baseComponent: true })\n */\n baseComponent?: boolean"));
42
44
  const jsxStylePropsCode = "export type JsxStyleProps =";
43
- systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { forwardCssProp?: boolean } & "));
45
+ systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { \n /**\n * 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.\n * @example\n * import { ark } from \"@ark-ui/react\"\n * import { styled } from \"@ndla/styled-system/jsx\"\n * const Button = styled('button', { baseComponent: true })\n *\n * return (\n * <Button asChild consumeCss>\n * <div>Click me</div>\n * </Button>\n * )\n */\n consumeCss?: boolean \n } & "));
44
46
  return args.artifacts;
45
47
  };
package/lib/boxShadows.d.ts CHANGED
@@ -6,10 +6,10 @@
6
6
  *
7
7
  */
8
8
  export declare const boxShadows: {
9
- xxsmall: {
9
+ xsmall: {
10
10
  value: string[];
11
11
  };
12
- xsmall: {
12
+ small: {
13
13
  value: string[];
14
14
  };
15
15
  medium: {
@@ -21,4 +21,13 @@ export declare const boxShadows: {
21
21
  xlarge: {
22
22
  value: string[];
23
23
  };
24
+ full: {
25
+ value: string;
26
+ };
27
+ inner: {
28
+ value: string;
29
+ };
30
+ innerTop: {
31
+ value: string;
32
+ };
24
33
  };
package/lib/boxShadows.js CHANGED
@@ -14,19 +14,28 @@ var _dev = require("@pandacss/dev");
14
14
  */
15
15
 
16
16
  const boxShadows = exports.boxShadows = _dev.defineTokens.shadows({
17
- xxsmall: {
18
- value: ["0px 1px 3px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.18)"]
19
- },
20
17
  xsmall: {
21
- value: ["0px 3px 8px 0px rgba(0, 0, 0, 0.10)", "0px 1px 3px 0px rgba(0, 0, 0, 0.10)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.18)"]
18
+ value: ["0px 1px 4px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"]
19
+ },
20
+ small: {
21
+ value: ["0px 3px 8px 0px rgba(0, 0, 0, 0.1)", "0px 1px 3px 0px rgba(0, 0, 0, 0.1)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"]
22
22
  },
23
23
  medium: {
24
- value: ["0px 5px 12px 0px rgba(0, 0, 0, 0.13)", "0px 1px 3px 0px rgba(0, 0, 0, 0.10)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.15)"]
24
+ value: ["0px 5px 12px 0px rgba(0, 0, 0, 0.13)", "0px 1px 3px 0px rgba(0, 0, 0, 0.1)", "0px 0px 1px 0px rgba(0, 0, 0, 0.15)"]
25
25
  },
26
26
  large: {
27
- value: ["0px 10px 16px 0px rgba(0, 0, 0, 0.12)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.12)"]
27
+ value: ["0px 10px 16px 0px rgba(0, 0, 0, 0.12)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.12)"]
28
28
  },
29
29
  xlarge: {
30
- value: ["0px 10px 24px 0px rgba(0, 0, 0, 0.18)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.08)"]
30
+ value: ["0px 10px 24px 0px rgba(0, 0, 0, 0.18)", "0px 2px 5px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.08)"]
31
+ },
32
+ full: {
33
+ value: "4px 4px 0px 0px {colors.primary}"
34
+ },
35
+ inner: {
36
+ value: "0px -1px 0px 0px {colors.primary} inset"
37
+ },
38
+ innerTop: {
39
+ value: "0px 1px 0px 0px {colors.primary} inset"
31
40
  }
32
41
  });
package/lib/plugins/forwardCssPropPlugin.js CHANGED
@@ -39,15 +39,17 @@ const transformStyledFn = args => {
39
39
  if (!(factoryJs !== null && factoryJs !== void 0 && factoryJs.code) || !(jsxTypes !== null && jsxTypes !== void 0 && jsxTypes.code) || !(systemTypes !== null && systemTypes !== void 0 && systemTypes.code)) {
40
40
  return args.artifacts;
41
41
  }
42
+ const baseCode = "const __base__ = Dynamic.__base__ || Dynamic";
43
+ factoryJs.code = factoryJs.code.replace(baseCode, "".concat(baseCode, "\n const contextConsume = options.baseComponent ?? Dynamic.__base__ ?? typeof Dynamic === \"string\""));
42
44
  const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
43
- factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, forwardCssProp, children, ...restProps } = props");
45
+ factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, consumeCss, children, ...restProps } = props\n\n const consume = props.asChild\n ? consumeCss && options.baseComponent\n : consumeCss ?? contextConsume");
44
46
  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
45
- factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n if(options.forwardCssProp || forwardCssProp) {\n return css.raw(cvaStyles, propStyles, cssStyles)\n }"));
46
- factoryJs.code = factoryJs.code.replace("className: classes()", "...(options.forwardCssProp || forwardCssProp ? { css: classes() } : { className: classes() })");
47
+ factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n if(!consume) {\n return css.raw(cvaStyles, propStyles, cssStyles)\n }"));
48
+ factoryJs.code = factoryJs.code.replace("className: classes()", "...(consume ? { className: classes() } : { css: classes(), consumeCss } )");
47
49
  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
48
- jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n forwardCssProp?: boolean"));
50
+ jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n /**\n * 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` \n * @example\n * import { ark } from \"@ark-ui/react\"\n * import { styled } from \"@ndla/styled-system/jsx\"\n * const Button = styled(ark.button, { baseComponent: true })\n */\n baseComponent?: boolean"));
49
51
  const jsxStylePropsCode = "export type JsxStyleProps =";
50
- systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { forwardCssProp?: boolean } & "));
52
+ systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { \n /**\n * 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.\n * @example\n * import { ark } from \"@ark-ui/react\"\n * import { styled } from \"@ndla/styled-system/jsx\"\n * const Button = styled('button', { baseComponent: true })\n *\n * return (\n * <Button asChild consumeCss>\n * <div>Click me</div>\n * </Button>\n * )\n */\n consumeCss?: boolean \n } & "));
51
53
  return args.artifacts;
52
54
  };
53
55
  exports.transformStyledFn = transformStyledFn;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ndla/preset-panda",
3
- "version": "0.0.5",
3
+ "version": "0.0.7-alpha.0",
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.40.1"
34
+ "@pandacss/dev": "^0.41.0"
35
35
  },
36
36
  "publishConfig": {
37
37
  "access": "public"
38
38
  },
39
- "gitHead": "dd4b2b6ce225256191f8245096e5514a80588a57"
39
+ "gitHead": "366de9299263ac11ce0fa06ed12d975b329c93e9"
40
40
  }