@ndla/preset-panda 0.0.1 → 0.0.3

package/dist/styles.css

@@ -467,18 +467,23 @@
     --colors-icon-on-action: var(--colors-white);
     --colors-surface-brand-1: var(--colors-purple-500);
     --colors-surface-brand-1-subtle: var(--colors-purple-100);
+    --colors-surface-brand-1-moderate: var(--colors-purple-300);
     --colors-surface-brand-1-strong: var(--colors-purple-950);
     --colors-surface-brand-2: var(--colors-blue-500);
-    --colors-surface-brand-2-subtle: var(--colors-blue-100);
+    --colors-surface-brand-2-subtle: var(--colors-blue-50);
+    --colors-surface-brand-2-moderate: var(--colors-blue-100);
     --colors-surface-brand-2-strong: var(--colors-blue-900);
     --colors-surface-brand-3: var(--colors-green-500);
     --colors-surface-brand-3-subtle: var(--colors-green-100);
+    --colors-surface-brand-3-moderate: var(--colors-green-300);
     --colors-surface-brand-3-strong: var(--colors-green-900);
     --colors-surface-brand-4: var(--colors-yellow-500);
     --colors-surface-brand-4-subtle: var(--colors-yellow-100);
+    --colors-surface-brand-4-moderate: var(--colors-yellow-300);
     --colors-surface-brand-4-strong: var(--colors-yellow-1100);
     --colors-surface-brand-5: var(--colors-pink-500);
     --colors-surface-brand-5-subtle: var(--colors-pink-100);
+    --colors-surface-brand-5-moderate: var(--colors-pink-300);
     --colors-surface-brand-5-strong: var(--colors-pink-900);
     --colors-surface-default: var(--colors-white);
     --colors-surface-hover: var(--colors-grey-100);
@@ -497,6 +502,7 @@
     --colors-surface-action-subtle-hover: var(--colors-purple-100);
     --colors-surface-action-subtle-hover-strong: var(--colors-purple-400);
     --colors-surface-action-subtle-active: var(--colors-purple-300);
+    --colors-surface-action-subtle-selected: var(--colors-purple-900);
     --colors-surface-success: var(--colors-green-800);
     --colors-surface-success-hover: var(--colors-green-900);
     --colors-surface-success-active: var(--colors-green-950);
@@ -509,6 +515,12 @@
     --colors-surface-warning-subtle: var(--colors-yellow-100);
     --colors-surface-warning-subtle-hover: var(--colors-yellow-300);
     --colors-surface-warning-subtle-active: var(--colors-yellow-400);
+    --colors-surface-danger: var(--colors-pink-800);
+    --colors-surface-danger-hover: var(--colors-pink-900);
+    --colors-surface-danger-active: var(--colors-pink-950);
+    --colors-surface-danger-subtle: var(--colors-pink-100);
+    --colors-surface-danger-subtle-hover: var(--colors-pink-300);
+    --colors-surface-danger-subtle-active: var(--colors-pink-500);
     --colors-surface-error: var(--colors-pink-800);
     --colors-surface-error-hover: var(--colors-pink-900);
     --colors-surface-error-active: var(--colors-pink-950);

package/es/index.js

@@ -43,4 +43,5 @@ const preset = definePreset({
     semanticTokens: semanticTokens
   }
 });
+export { forwardCssPropPlugin } from "./plugins/forwardCssPropPlugin";
 export default preset;

package/es/plugins/forwardCssPropPlugin.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const supportedJsxFrameworks = ["react"];
+export const forwardCssPropPlugin = () => {
+  return {
+    name: "forward-css-prop",
+    hooks: {
+      "config:resolved": args => {
+        const jsxFramework = args.config.jsxFramework;
+        if (!supportedJsxFrameworks.includes(jsxFramework)) {
+          throw new Error("[plugin:restrict-styled-props]: Unsupported jsxFramework: ".concat(jsxFramework, ". This Panda plugin only supports: ").concat(supportedJsxFrameworks.join(", ")));
+        }
+      },
+      "codegen:prepare": args => {
+        return transformStyledFn(args);
+      }
+    }
+  };
+};
+export const transformStyledFn = args => {
+  var _args$artifacts$find, _args$artifacts$find2;
+  const factoryArtifact = args.artifacts.find(art => art.id === "jsx-factory");
+  const factoryJs = factoryArtifact === null || factoryArtifact === void 0 ? void 0 : factoryArtifact.files.find(f => f.file.includes(".mjs") || f.file.includes(".js"));
+  const jsxTypes = (_args$artifacts$find = args.artifacts.find(art => art.id === "types-jsx")) === null || _args$artifacts$find === void 0 ? void 0 : _args$artifacts$find.files.find(f => f.file.includes("jsx"));
+  const systemTypes = (_args$artifacts$find2 = args.artifacts.find(art => art.id === "types-gen-system")) === null || _args$artifacts$find2 === void 0 ? void 0 : _args$artifacts$find2.files.find(f => f.file.includes("system-types"));
+  if (!(factoryJs !== null && factoryJs !== void 0 && factoryJs.code) || !(jsxTypes !== null && jsxTypes !== void 0 && jsxTypes.code) || !(systemTypes !== null && systemTypes !== void 0 && systemTypes.code)) {
+    return args.artifacts;
+  }
+  const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
+  factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, forwardCssProp, children, ...restProps } = props");
+  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
+  factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n      if(options.forwardCssProp || forwardCssProp) {\n        return css.raw(cvaStyles, propStyles, cssStyles)\n      }"));
+  factoryJs.code = factoryJs.code.replace("className: classes()", "...(options.forwardCssProp || forwardCssProp ? { css: classes() } : { className: classes() })");
+  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
+  jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n  forwardCssProp?: boolean"));
+  const jsxStylePropsCode = "export type JsxStyleProps =";
+  systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { forwardCssProp?: boolean } & "));
+  return args.artifacts;
+};

package/es/semanticTokens.js

@@ -206,6 +206,9 @@ export const semanticTokens = defineSemanticTokens({
           subtle: {
             value: "{colors.purple.100}"
           },
+          moderate: {
+            value: "{colors.purple.300}"
+          },
           strong: {
             value: "{colors.purple.950}"
           }
@@ -215,6 +218,9 @@ export const semanticTokens = defineSemanticTokens({
             value: "{colors.blue.500}"
           },
           subtle: {
+            value: "{colors.blue.50}"
+          },
+          moderate: {
             value: "{colors.blue.100}"
           },
           strong: {
@@ -228,6 +234,9 @@ export const semanticTokens = defineSemanticTokens({
           subtle: {
             value: "{colors.green.100}"
           },
+          moderate: {
+            value: "{colors.green.300}"
+          },
           strong: {
             value: "{colors.green.900}"
           }
@@ -239,6 +248,9 @@ export const semanticTokens = defineSemanticTokens({
           subtle: {
             value: "{colors.yellow.100}"
           },
+          moderate: {
+            value: "{colors.yellow.300}"
+          },
           strong: {
             value: "{colors.yellow.1100}"
           }
@@ -250,6 +262,9 @@ export const semanticTokens = defineSemanticTokens({
           subtle: {
             value: "{colors.pink.100}"
           },
+          moderate: {
+            value: "{colors.pink.300}"
+          },
           strong: {
             value: "{colors.pink.900}"
           }
@@ -314,6 +329,9 @@ export const semanticTokens = defineSemanticTokens({
         },
         active: {
           value: "{colors.purple.300}"
+        },
+        selected: {
+          value: "{colors.purple.900}"
         }
       },
       success: {
@@ -360,6 +378,28 @@ export const semanticTokens = defineSemanticTokens({
           value: "{colors.yellow.400}"
         }
       },
+      danger: {
+        DEFAULT: {
+          value: "{colors.pink.800}"
+        },
+        hover: {
+          value: "{colors.pink.900}"
+        },
+        active: {
+          value: "{colors.pink.950}"
+        }
+      },
+      dangerSubtle: {
+        DEFAULT: {
+          value: "{colors.pink.100}"
+        },
+        hover: {
+          value: "{colors.pink.300}"
+        },
+        active: {
+          value: "{colors.pink.500}"
+        }
+      },
       error: {
         DEFAULT: {
           value: "{colors.pink.800}"

package/lib/index.d.ts

@@ -6,4 +6,5 @@
  *
  */
 declare const preset: import("@pandacss/dev").Preset;
+export { forwardCssPropPlugin } from "./plugins/forwardCssPropPlugin";
 export default preset;

package/lib/index.js

@@ -4,6 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+Object.defineProperty(exports, "forwardCssPropPlugin", {
+  enumerable: true,
+  get: function () {
+    return _forwardCssPropPlugin.forwardCssPropPlugin;
+  }
+});
 var _dev = require("@pandacss/dev");
 var _animations = require("./animations");
 var _boxShadows = require("./boxShadows");
@@ -16,6 +22,7 @@ var _semanticTokens = require("./semanticTokens");
 var _spacing = require("./spacing");
 var _typography = require("./typography");
 var _zIndex = require("./zIndex");
+var _forwardCssPropPlugin = require("./plugins/forwardCssPropPlugin");
 /**
  * Copyright (c) 2024-present, NDLA.
  *

package/lib/plugins/forwardCssPropPlugin.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { CodegenPrepareHookArgs, PandaPlugin } from "@pandacss/types";
+export declare const forwardCssPropPlugin: () => PandaPlugin;
+export declare const transformStyledFn: (args: CodegenPrepareHookArgs) => import("@pandacss/types").Artifact[];

package/lib/plugins/forwardCssPropPlugin.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformStyledFn = exports.forwardCssPropPlugin = void 0;
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const supportedJsxFrameworks = ["react"];
+const forwardCssPropPlugin = () => {
+  return {
+    name: "forward-css-prop",
+    hooks: {
+      "config:resolved": args => {
+        const jsxFramework = args.config.jsxFramework;
+        if (!supportedJsxFrameworks.includes(jsxFramework)) {
+          throw new Error("[plugin:restrict-styled-props]: Unsupported jsxFramework: ".concat(jsxFramework, ". This Panda plugin only supports: ").concat(supportedJsxFrameworks.join(", ")));
+        }
+      },
+      "codegen:prepare": args => {
+        return transformStyledFn(args);
+      }
+    }
+  };
+};
+exports.forwardCssPropPlugin = forwardCssPropPlugin;
+const transformStyledFn = args => {
+  var _args$artifacts$find, _args$artifacts$find2;
+  const factoryArtifact = args.artifacts.find(art => art.id === "jsx-factory");
+  const factoryJs = factoryArtifact === null || factoryArtifact === void 0 ? void 0 : factoryArtifact.files.find(f => f.file.includes(".mjs") || f.file.includes(".js"));
+  const jsxTypes = (_args$artifacts$find = args.artifacts.find(art => art.id === "types-jsx")) === null || _args$artifacts$find === void 0 ? void 0 : _args$artifacts$find.files.find(f => f.file.includes("jsx"));
+  const systemTypes = (_args$artifacts$find2 = args.artifacts.find(art => art.id === "types-gen-system")) === null || _args$artifacts$find2 === void 0 ? void 0 : _args$artifacts$find2.files.find(f => f.file.includes("system-types"));
+  if (!(factoryJs !== null && factoryJs !== void 0 && factoryJs.code) || !(jsxTypes !== null && jsxTypes !== void 0 && jsxTypes.code) || !(systemTypes !== null && systemTypes !== void 0 && systemTypes.code)) {
+    return args.artifacts;
+  }
+  const propsCode = "const { as: Element = __base__, children, ...restProps } = props";
+  factoryJs.code = factoryJs.code.replace(propsCode, "const { as: Element = __base__, forwardCssProp, children, ...restProps } = props");
+  const cvaCode = "const cvaStyles = __cvaFn__.raw(variantProps)";
+  factoryJs.code = factoryJs.code.replace(cvaCode, "".concat(cvaCode, "\n      if(options.forwardCssProp || forwardCssProp) {\n        return css.raw(cvaStyles, propStyles, cssStyles)\n      }"));
+  factoryJs.code = factoryJs.code.replace("className: classes()", "...(options.forwardCssProp || forwardCssProp ? { css: classes() } : { className: classes() })");
+  const shouldForwardPropCode = "shouldForwardProp?(prop: string, variantKeys: string[]): boolean";
+  jsxTypes.code = jsxTypes.code.replace(shouldForwardPropCode, "".concat(shouldForwardPropCode, "\n  forwardCssProp?: boolean"));
+  const jsxStylePropsCode = "export type JsxStyleProps =";
+  systemTypes.code = systemTypes.code.replace(jsxStylePropsCode, "".concat(jsxStylePropsCode, " { forwardCssProp?: boolean } & "));
+  return args.artifacts;
+};
+exports.transformStyledFn = transformStyledFn;

package/lib/semanticTokens.d.ts

@@ -204,6 +204,9 @@ export declare const semanticTokens: {
                     subtle: {
                         value: string;
                     };
+                    moderate: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -215,6 +218,9 @@ export declare const semanticTokens: {
                     subtle: {
                         value: string;
                     };
+                    moderate: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -226,6 +232,9 @@ export declare const semanticTokens: {
                     subtle: {
                         value: string;
                     };
+                    moderate: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -237,6 +246,9 @@ export declare const semanticTokens: {
                     subtle: {
                         value: string;
                     };
+                    moderate: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -248,6 +260,9 @@ export declare const semanticTokens: {
                     subtle: {
                         value: string;
                     };
+                    moderate: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -313,6 +328,9 @@ export declare const semanticTokens: {
                 active: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
             };
             success: {
                 DEFAULT: {
@@ -358,6 +376,28 @@ export declare const semanticTokens: {
                     value: string;
                 };
             };
+            danger: {
+                DEFAULT: {
+                    value: string;
+                };
+                hover: {
+                    value: string;
+                };
+                active: {
+                    value: string;
+                };
+            };
+            dangerSubtle: {
+                DEFAULT: {
+                    value: string;
+                };
+                hover: {
+                    value: string;
+                };
+                active: {
+                    value: string;
+                };
+            };
             error: {
                 DEFAULT: {
                     value: string;

package/lib/semanticTokens.js

@@ -212,6 +212,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           subtle: {
             value: "{colors.purple.100}"
           },
+          moderate: {
+            value: "{colors.purple.300}"
+          },
           strong: {
             value: "{colors.purple.950}"
           }
@@ -221,6 +224,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
             value: "{colors.blue.500}"
           },
           subtle: {
+            value: "{colors.blue.50}"
+          },
+          moderate: {
             value: "{colors.blue.100}"
           },
           strong: {
@@ -234,6 +240,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           subtle: {
             value: "{colors.green.100}"
           },
+          moderate: {
+            value: "{colors.green.300}"
+          },
           strong: {
             value: "{colors.green.900}"
           }
@@ -245,6 +254,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           subtle: {
             value: "{colors.yellow.100}"
           },
+          moderate: {
+            value: "{colors.yellow.300}"
+          },
           strong: {
             value: "{colors.yellow.1100}"
           }
@@ -256,6 +268,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           subtle: {
             value: "{colors.pink.100}"
           },
+          moderate: {
+            value: "{colors.pink.300}"
+          },
           strong: {
             value: "{colors.pink.900}"
           }
@@ -320,6 +335,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         },
         active: {
           value: "{colors.purple.300}"
+        },
+        selected: {
+          value: "{colors.purple.900}"
         }
       },
       success: {
@@ -366,6 +384,28 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           value: "{colors.yellow.400}"
         }
       },
+      danger: {
+        DEFAULT: {
+          value: "{colors.pink.800}"
+        },
+        hover: {
+          value: "{colors.pink.900}"
+        },
+        active: {
+          value: "{colors.pink.950}"
+        }
+      },
+      dangerSubtle: {
+        DEFAULT: {
+          value: "{colors.pink.100}"
+        },
+        hover: {
+          value: "{colors.pink.300}"
+        },
+        active: {
+          value: "{colors.pink.500}"
+        }
+      },
       error: {
         DEFAULT: {
           value: "{colors.pink.800}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Panda preset for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -11,7 +11,8 @@
     "prepare": "panda codegen",
     "build": "node ../../scripts/build.js package",
     "build:types": "tsc -p tsconfig.build.json",
-    "prepublish": "concurrently 'yarn build:types' 'mkdir -p dist' 'panda cssgen  --outfile dist/styles.css' 'panda ship --outfile dist/panda.buildinfo.json'"
+    "prepublish": "concurrently 'yarn build:types' 'yarn build:css'",
+    "build:css": "mkdir -p dist && panda cssgen --outfile dist/styles.css"
   },
   "repository": {
     "type": "git",
@@ -35,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "06462ea8a1e84faedef361152994b7d48d4cd6e3"
+  "gitHead": "8f0469f768ed618830dea90b36b92b0d4bb20639"
 }

package/dist/panda.buildinfo.json

@@ -1,7 +0,0 @@
-{
-  "schemaVersion": "0.40.1",
-  "styles": {
-    "atomic": [],
-    "recipes": {}
-  }
-}