@ndla/preset-panda 0.0.53 → 0.0.55

package/README.md

@@ -0,0 +1,148 @@
+# @ndla/preset-panda
+
+The styling solution used across all NDLA solutions, powered by and built upon [PandaCSS](https://pandacss.com)
+
+## What this package is
+
+PandaCSS is a compile-time styling solution powered by PostCSS. At its core it is framework-agnostic, but it also provides thin wrappers for popular JavaScript frameworks. We use the React wrapper. This package exports a preset for PandaCSS, allowing for developers aligned with NDLA to create components using a shared design language. Tokens are exported as plain css variables, and as a Panda preset.
+
+## Installation
+
+```sh
+yarn add -D @ndla/preset-panda @pandacss/dev postcss
+
+```
+
+## Usage
+
+This package can be consumed through panda or through plain css. Either way, add this to your css file.
+
+```css
+@layer reset, base, tokens, recipes, utilities;
+```
+
+### With Panda
+
+Setup panda as you normally would, and add the NDLA preset.
+
+```tsx
+import preset from "@ndla/preset-panda";
+export default defineConfig({
+  presets: [preset],
+});
+```
+
+### With plain css
+
+```css
+/* Probably need a css reset here as well */
+@import "@ndla/preset-panda/dist/styles.css";
+@import "@ndla/primitives/dist/styles.css";
+@import "@ndla/icons/dist/styles.css";
+@import "@ndla/ui/dist/styles.css";
+@import "@ndla/safelink/dist/styles.css";
+
+@layer reset, base, tokens, recipes, utilities;
+```
+
+## Plugin for forwarding css prop
+
+This package also provides a special plugin that alters the styled system that panda exposes. You can read more about the behavioral changes it introduces [here](./src/plugins/README.md) If you use `@ndla/styled-system`, it is already enabled by default. If you only want to use the plugin, it can be added to any panda configuration by adding it to your plugins.
+
+```tsx
+import { forwardCssPropPlugin } from "@ndla/preset-panda";
+export default defineConfig({
+  plugins: [forwardCssPropPlugin],
+});
+```
+
+## Guidelines
+
+We strive to keep this package as lean as possible, as most other NDLA packages relies upon it, either directly or indirectly. As such, try to keep the `globalCss.ts` file as lean as possible. It is currently reserved for the following scenarios:
+
+- Truly global css
+  - Resets
+  - Global font styling
+  - Body styling
+- Extremely large pieces of css
+  - Article styling
+  - Code block styling (for now).
+
+### Semantic tokens
+
+Always prefer using semantic tokens wherever possible. Values defined in [colors.ts](./src/colors.ts) and [spacing.ts](./src/spacing.ts) should only be used if absolutely necessary. If the current semantic tokens do not fit your needs, let us know.
+
+### Style properties
+
+Prefer properties with proper completion and type safety.
+
+```tsx
+const bad = css({
+  border: "1px solid token(colors.stroke.default)",
+});
+
+const good = css({
+  border: "1px solid",
+  borderColor: "stroke.default",
+});
+```
+
+Prefer style properties that are already used throughout the code base, and that can be easily overridden.
+
+```tsx
+// Can only be overridden with backgroundColor
+const bad = css({
+  backgroundColor: "surface.default",
+});
+
+// Can be overridden with both `background` and backgroundColor
+const good = css({
+  background: "surface.default",
+});
+```
+
+There's a couple of exceptions to this rule, mostly to do with padding and margins. Read source code to get a grasp of how we use those properties :)
+
+## Styling Justifications
+
+### Shorthand vs longhand properties
+
+We prefer using longhand properties wherever possible, and our code generation reflects this. We landed on using longhand properties to lower the cost of entry into the panda ecosystem. Diverging from default css is already a big ask for new developers. By maintaining the likeness with regular css (naming-wise), we hope to encourage developers to write css as they normally would, just camel-cased instead of kebab-cased :)
+
+### Styling props
+
+PandaCSS offers three styling options when using a framework wrapper: the `css` prop, a `styled-system` like approach, and simple class names. We landed on the `css` approach. Instead of explaining why we landed on this, let's instead explain why we avoid the `styled-system` approach
+
+#### Vendor lock-in
+
+The biggest disadvantage to using a styled-system approach is that a full rewrite becomes less feasible the more you invest into the Panda ecosystem. Let's compare the two approaches.
+
+##### styled-system
+
+```tsx
+return <Box display="flex" gap="xsmall" alignItems="center" justifyContent="center" />;
+```
+
+##### Minimal (styled somewhere else)
+
+```tsx
+return <ListContainer />;
+```
+
+The latter example is much more independent from the actual styling solution, allowing for 1:1 rewrites without having to mess with the file history. Furthermore, we believe the latter to be more readable. See complex tailwind components for more horror stories.
+
+#### Performance
+
+The styled-system approach is extremely flexible, but also comes at a cost. According to [benchmarks](https://github.com/chakra-ui/panda/discussions/2604), that cost is about a 30% drop in performance. We did not want to compromise on that!
+
+### Strict property values
+
+This is a no-brainer. We want type safety wherever possible.
+
+### Why not strictTokens?
+
+Turning on strictTokens would allow us to enforce our design system to a much greater extent. In a nutshell, this option only allows tokens that are defined explicitly in `@ndla/preset-panda`. We felt this to be too restrictive. Defining every single css value we use is simply too much, and the escape hatch from this breaks autocomplete entirely.
+
+### Preflight position
+
+A preflight is more or less a css reset: A small set of css rules that evens out some styling considerations different browsers have decided to have as their defaults. We've chosen to only turn this on where packages are consumed, namely ndla-frontend and editorial-frontend. Enabling it in a package would force all consumers to use our styling reset. Furthermore, it could generate css that neither us nor the consumer actually needs. This is open to change, however. After all, we assume that our reset (or a similar reset) is used.

package/es/animations.js

@@ -1,227 +1,115 @@
-/**
- * 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 { defineTokens } from "@pandacss/dev";
-export const animations = defineTokens.animations({
-  spin: {
-    value: "spin 700ms infinite linear"
-  },
-  "collapse-in": {
-    value: "collapse-in 250ms {easings.emphasized-in}"
-  },
-  "collapse-out": {
-    value: "collapse-out 200ms {easings.emphasized-out}"
-  },
-  "fade-shift-in": {
-    value: "fade-shift-in 200ms {easings.emphasized-in}"
-  },
-  "fade-shift-out": {
-    value: "fade-shift-in 200ms {easings.emphasized-in}"
-  },
-  "backdrop-in": {
-    value: "fade-in 250ms {easings.emphasized-in}"
-  },
-  "backdrop-out": {
-    value: "fade-out 200ms {easings.emphasized-out}"
-  },
-  "dialog-in": {
-    value: "fade-in 400ms {easings.emphasized-in}"
-  },
-  "dialog-out": {
-    value: "fade-out 200ms {easings.emphasized-out}"
-  },
-  "drawer-in-left": {
-    value: "slide-in-left 400ms {easings.emphasized-in}"
-  },
-  "drawer-out-left": {
-    value: "slide-out-left 200ms {easings.emphasized-out}"
-  },
-  "drawer-in-right": {
-    value: "slide-in-right 400ms {easings.emphasized-in}"
-  },
-  "drawer-out-right": {
-    value: "slide-out-right 200ms {easings.emphasized-out}"
-  },
-  "drawer-in-bottom": {
-    value: "slide-in-bottom 400ms {easings.emphasized-in}"
-  },
-  "drawer-out-bottom": {
-    value: "slide-out-bottom 200ms {easings.emphasized-out}"
-  },
-  "drawer-in-top": {
-    value: "slide-in-top 400ms {easings.emphasized-in}"
-  },
-  "drawer-out-top": {
-    value: "slide-out-top 200ms {easings.emphasized-out}"
-  },
-  "skeleton-pulse": {
-    value: "skeleton-pulse 2s {easings.pulse} infinite"
-  }
+
+//#region src/animations.ts
+const animations = defineTokens.animations({
+	spin: { value: "spin 700ms infinite linear" },
+	"collapse-in": { value: "collapse-in 250ms {easings.emphasized-in}" },
+	"collapse-out": { value: "collapse-out 200ms {easings.emphasized-out}" },
+	"fade-shift-in": { value: "fade-shift-in 200ms {easings.emphasized-in}" },
+	"fade-shift-out": { value: "fade-shift-in 200ms {easings.emphasized-in}" },
+	"backdrop-in": { value: "fade-in 250ms {easings.emphasized-in}" },
+	"backdrop-out": { value: "fade-out 200ms {easings.emphasized-out}" },
+	"dialog-in": { value: "fade-in 400ms {easings.emphasized-in}" },
+	"dialog-out": { value: "fade-out 200ms {easings.emphasized-out}" },
+	"drawer-in-left": { value: "slide-in-left 400ms {easings.emphasized-in}" },
+	"drawer-out-left": { value: "slide-out-left 200ms {easings.emphasized-out}" },
+	"drawer-in-right": { value: "slide-in-right 400ms {easings.emphasized-in}" },
+	"drawer-out-right": { value: "slide-out-right 200ms {easings.emphasized-out}" },
+	"drawer-in-bottom": { value: "slide-in-bottom 400ms {easings.emphasized-in}" },
+	"drawer-out-bottom": { value: "slide-out-bottom 200ms {easings.emphasized-out}" },
+	"drawer-in-top": { value: "slide-in-top 400ms {easings.emphasized-in}" },
+	"drawer-out-top": { value: "slide-out-top 200ms {easings.emphasized-out}" },
+	"skeleton-pulse": { value: "skeleton-pulse 2s {easings.pulse} infinite" }
 });
-export const easings = defineTokens.easings({
-  default: {
-    value: "cubic-bezier(0.17, 0.04, 0.03, 0.94)"
-  },
-  "emphasized-in": {
-    value: "cubic-bezier(0.05, 0.7, 0.1, 1.0)"
-  },
-  "emphasized-out": {
-    value: "cubic-bezier(0.3, 0.0, 0.8, 0.15)"
-  },
-  pulse: {
-    value: "cubic-bezier(0.4, 0.0, 0.6, 1.0)"
-  }
+const easings = defineTokens.easings({
+	default: { value: "cubic-bezier(0.17, 0.04, 0.03, 0.94)" },
+	"emphasized-in": { value: "cubic-bezier(0.05, 0.7, 0.1, 1.0)" },
+	"emphasized-out": { value: "cubic-bezier(0.3, 0.0, 0.8, 0.15)" },
+	pulse: { value: "cubic-bezier(0.4, 0.0, 0.6, 1.0)" }
 });
-export const durations = defineTokens.durations({
-  superFast: {
-    value: "100ms"
-  },
-  fast: {
-    value: "200ms"
-  },
-  normal: {
-    value: "400ms"
-  },
-  slow: {
-    value: "600ms"
-  },
-  infinite: {
-    value: "infinite"
-  }
+const durations = defineTokens.durations({
+	superFast: { value: "100ms" },
+	fast: { value: "200ms" },
+	normal: { value: "400ms" },
+	slow: { value: "600ms" },
+	infinite: { value: "infinite" }
 });
-export const keyframes = {
-  spin: {
-    from: {
-      transform: "rotate(0deg)"
-    },
-    to: {
-      transform: "rotate(360deg)"
-    }
-  },
-  "fade-shift-in": {
-    "0%": {
-      opacity: "0",
-      transform: "translateY(-4px)"
-    },
-    "100%": {
-      opacity: "1",
-      transform: "translateY(0)"
-    }
-  },
-  "fade-shift-out": {
-    "0%": {
-      opacity: "1",
-      transform: "translateY(0)"
-    },
-    "100%": {
-      opacity: "0",
-      transform: "translateY(-4px)"
-    }
-  },
-  "collapse-in": {
-    "0%": {
-      height: "0"
-    },
-    "100%": {
-      height: "var(--height)"
-    }
-  },
-  "collapse-out": {
-    "0%": {
-      height: "var(--height)"
-    },
-    "100%": {
-      height: "0"
-    }
-  },
-  "fade-in": {
-    from: {
-      opacity: "0"
-    },
-    to: {
-      opacity: "1"
-    }
-  },
-  "fade-out": {
-    from: {
-      opacity: "1"
-    },
-    to: {
-      opacity: "0"
-    }
-  },
-  "slide-in-left": {
-    "0%": {
-      transform: "translateX(-100%)"
-    },
-    "100%": {
-      transform: "translateX(0%)"
-    }
-  },
-  "slide-out-left": {
-    "0%": {
-      transform: "translateX(0%)"
-    },
-    "100%": {
-      transform: "translateX(-100%)"
-    }
-  },
-  "slide-in-right": {
-    "0%": {
-      transform: "translateX(100%)"
-    },
-    "100%": {
-      transform: "translateX(0%)"
-    }
-  },
-  "slide-out-right": {
-    "0%": {
-      transform: "translateX(0%)"
-    },
-    "100%": {
-      transform: "translateX(100%)"
-    }
-  },
-  "slide-in-top": {
-    "0%": {
-      transform: "translateY(-100%)"
-    },
-    "100%": {
-      transform: "translateY(0%)"
-    }
-  },
-  "slide-out-top": {
-    "0%": {
-      transform: "translateY(0%)"
-    },
-    "100%": {
-      transform: "translateY(-100%)"
-    }
-  },
-  "slide-in-bottom": {
-    "0%": {
-      transform: "translateY(100%)"
-    },
-    "100%": {
-      transform: "translateY(0%)"
-    }
-  },
-  "slide-out-bottom": {
-    "0%": {
-      transform: "translateY(0%)"
-    },
-    "100%": {
-      transform: "translateY(100%)"
-    }
-  },
-  "skeleton-pulse": {
-    "50%": {
-      opacity: "0.5"
-    }
-  }
-};
+const keyframes = {
+	spin: {
+		from: { transform: "rotate(0deg)" },
+		to: { transform: "rotate(360deg)" }
+	},
+	"fade-shift-in": {
+		"0%": {
+			opacity: "0",
+			transform: "translateY(-4px)"
+		},
+		"100%": {
+			opacity: "1",
+			transform: "translateY(0)"
+		}
+	},
+	"fade-shift-out": {
+		"0%": {
+			opacity: "1",
+			transform: "translateY(0)"
+		},
+		"100%": {
+			opacity: "0",
+			transform: "translateY(-4px)"
+		}
+	},
+	"collapse-in": {
+		"0%": { height: "0" },
+		"100%": { height: "var(--height)" }
+	},
+	"collapse-out": {
+		"0%": { height: "var(--height)" },
+		"100%": { height: "0" }
+	},
+	"fade-in": {
+		from: { opacity: "0" },
+		to: { opacity: "1" }
+	},
+	"fade-out": {
+		from: { opacity: "1" },
+		to: { opacity: "0" }
+	},
+	"slide-in-left": {
+		"0%": { transform: "translateX(-100%)" },
+		"100%": { transform: "translateX(0%)" }
+	},
+	"slide-out-left": {
+		"0%": { transform: "translateX(0%)" },
+		"100%": { transform: "translateX(-100%)" }
+	},
+	"slide-in-right": {
+		"0%": { transform: "translateX(100%)" },
+		"100%": { transform: "translateX(0%)" }
+	},
+	"slide-out-right": {
+		"0%": { transform: "translateX(0%)" },
+		"100%": { transform: "translateX(100%)" }
+	},
+	"slide-in-top": {
+		"0%": { transform: "translateY(-100%)" },
+		"100%": { transform: "translateY(0%)" }
+	},
+	"slide-out-top": {
+		"0%": { transform: "translateY(0%)" },
+		"100%": { transform: "translateY(-100%)" }
+	},
+	"slide-in-bottom": {
+		"0%": { transform: "translateY(100%)" },
+		"100%": { transform: "translateY(0%)" }
+	},
+	"slide-out-bottom": {
+		"0%": { transform: "translateY(0%)" },
+		"100%": { transform: "translateY(100%)" }
+	},
+	"skeleton-pulse": { "50%": { opacity: "0.5" } }
+};
+
+//#endregion
+export { animations, durations, easings, keyframes };
+//# sourceMappingURL=animations.js.map

package/es/animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animations.js","names":[],"sources":["../src/animations.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { defineTokens } from \"@pandacss/dev\";\n\nexport const animations = defineTokens.animations({\n  spin: {\n    value: \"spin 700ms infinite linear\",\n  },\n  \"collapse-in\": {\n    value: \"collapse-in 250ms {easings.emphasized-in}\",\n  },\n  \"collapse-out\": {\n    value: \"collapse-out 200ms {easings.emphasized-out}\",\n  },\n  \"fade-shift-in\": {\n    value: \"fade-shift-in 200ms {easings.emphasized-in}\",\n  },\n  \"fade-shift-out\": {\n    value: \"fade-shift-in 200ms {easings.emphasized-in}\",\n  },\n  \"backdrop-in\": {\n    value: \"fade-in 250ms {easings.emphasized-in}\",\n  },\n  \"backdrop-out\": {\n    value: \"fade-out 200ms {easings.emphasized-out}\",\n  },\n  \"dialog-in\": {\n    value: \"fade-in 400ms {easings.emphasized-in}\",\n  },\n  \"dialog-out\": {\n    value: \"fade-out 200ms {easings.emphasized-out}\",\n  },\n  \"drawer-in-left\": {\n    value: \"slide-in-left 400ms {easings.emphasized-in}\",\n  },\n  \"drawer-out-left\": {\n    value: \"slide-out-left 200ms {easings.emphasized-out}\",\n  },\n  \"drawer-in-right\": {\n    value: \"slide-in-right 400ms {easings.emphasized-in}\",\n  },\n  \"drawer-out-right\": {\n    value: \"slide-out-right 200ms {easings.emphasized-out}\",\n  },\n  \"drawer-in-bottom\": {\n    value: \"slide-in-bottom 400ms {easings.emphasized-in}\",\n  },\n  \"drawer-out-bottom\": {\n    value: \"slide-out-bottom 200ms {easings.emphasized-out}\",\n  },\n  \"drawer-in-top\": {\n    value: \"slide-in-top 400ms {easings.emphasized-in}\",\n  },\n  \"drawer-out-top\": {\n    value: \"slide-out-top 200ms {easings.emphasized-out}\",\n  },\n  \"skeleton-pulse\": {\n    value: \"skeleton-pulse 2s {easings.pulse} infinite\",\n  },\n});\n\nexport const easings = defineTokens.easings({\n  default: { value: \"cubic-bezier(0.17, 0.04, 0.03, 0.94)\" },\n  \"emphasized-in\": { value: \"cubic-bezier(0.05, 0.7, 0.1, 1.0)\" },\n  \"emphasized-out\": { value: \"cubic-bezier(0.3, 0.0, 0.8, 0.15)\" },\n  pulse: { value: \"cubic-bezier(0.4, 0.0, 0.6, 1.0)\" },\n});\n\nexport const durations = defineTokens.durations({\n  superFast: { value: \"100ms\" },\n  fast: { value: \"200ms\" },\n  normal: { value: \"400ms\" },\n  slow: { value: \"600ms\" },\n  infinite: { value: \"infinite\" },\n});\n\nexport const keyframes = {\n  spin: {\n    from: { transform: \"rotate(0deg)\" },\n    to: { transform: \"rotate(360deg)\" },\n  },\n  \"fade-shift-in\": {\n    \"0%\": { opacity: \"0\", transform: \"translateY(-4px)\" },\n    \"100%\": { opacity: \"1\", transform: \"translateY(0)\" },\n  },\n  \"fade-shift-out\": {\n    \"0%\": { opacity: \"1\", transform: \"translateY(0)\" },\n    \"100%\": { opacity: \"0\", transform: \"translateY(-4px)\" },\n  },\n  \"collapse-in\": {\n    \"0%\": { height: \"0\" },\n    \"100%\": { height: \"var(--height)\" },\n  },\n  \"collapse-out\": {\n    \"0%\": { height: \"var(--height)\" },\n    \"100%\": { height: \"0\" },\n  },\n  \"fade-in\": {\n    from: { opacity: \"0\" },\n    to: { opacity: \"1\" },\n  },\n  \"fade-out\": {\n    from: { opacity: \"1\" },\n    to: { opacity: \"0\" },\n  },\n  \"slide-in-left\": {\n    \"0%\": { transform: \"translateX(-100%)\" },\n    \"100%\": { transform: \"translateX(0%)\" },\n  },\n  \"slide-out-left\": {\n    \"0%\": { transform: \"translateX(0%)\" },\n    \"100%\": { transform: \"translateX(-100%)\" },\n  },\n  \"slide-in-right\": {\n    \"0%\": { transform: \"translateX(100%)\" },\n    \"100%\": { transform: \"translateX(0%)\" },\n  },\n  \"slide-out-right\": {\n    \"0%\": { transform: \"translateX(0%)\" },\n    \"100%\": { transform: \"translateX(100%)\" },\n  },\n  \"slide-in-top\": {\n    \"0%\": { transform: \"translateY(-100%)\" },\n    \"100%\": { transform: \"translateY(0%)\" },\n  },\n  \"slide-out-top\": {\n    \"0%\": { transform: \"translateY(0%)\" },\n    \"100%\": { transform: \"translateY(-100%)\" },\n  },\n  \"slide-in-bottom\": {\n    \"0%\": { transform: \"translateY(100%)\" },\n    \"100%\": { transform: \"translateY(0%)\" },\n  },\n  \"slide-out-bottom\": {\n    \"0%\": { transform: \"translateY(0%)\" },\n    \"100%\": { transform: \"translateY(100%)\" },\n  },\n  \"skeleton-pulse\": {\n    \"50%\": { opacity: \"0.5\" },\n  },\n};\n"],"mappings":"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"}

package/es/boxShadows.js

@@ -1,38 +1,34 @@
-/**
- * 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 { defineTokens } from "@pandacss/dev";
-export const boxShadows = defineTokens.shadows({
-  xsmall: {
-    value: ["0px 1px 4px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"]
-  },
-  small: {
-    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)"]
-  },
-  medium: {
-    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)"]
-  },
-  large: {
-    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)"]
-  },
-  xlarge: {
-    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)"]
-  },
-  full: {
-    value: "4px 4px 0px 0px {colors.primary}"
-  },
-  inner: {
-    value: `0px -1px 0px 0px rgba(45, 27, 98, 0.25) inset` //colors.primary
-  },
-  innerTop: {
-    value: "0px 1px 0px 0px rgba(45, 27, 98, 0.25) inset" //colors.primary
-  },
-  innerRight: {
-    value: "-1px 0px 0px 0px rgba(45, 27, 98, 0.25) inset" //colors.primary
-  }
-});
+
+//#region src/boxShadows.ts
+const boxShadows = defineTokens.shadows({
+	xsmall: { value: ["0px 1px 4px 0px rgba(0, 0, 0, 0.15)", "0px 0px 1px 0px rgba(0, 0, 0, 0.18)"] },
+	small: { 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)"
+	] },
+	medium: { 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)"
+	] },
+	large: { 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)"
+	] },
+	xlarge: { 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)"
+	] },
+	full: { value: "4px 4px 0px 0px {colors.primary}" },
+	inner: { value: `0px -1px 0px 0px rgba(45, 27, 98, 0.25) inset` },
+	innerTop: { value: "0px 1px 0px 0px rgba(45, 27, 98, 0.25) inset" },
+	innerRight: { value: "-1px 0px 0px 0px rgba(45, 27, 98, 0.25) inset" }
+});
+
+//#endregion
+export { boxShadows };
+//# sourceMappingURL=boxShadows.js.map

package/es/boxShadows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"boxShadows.js","names":[],"sources":["../src/boxShadows.ts"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { defineTokens } from \"@pandacss/dev\";\n\nexport const boxShadows = defineTokens.shadows({\n  xsmall: { value: [\"0px 1px 4px 0px rgba(0, 0, 0, 0.15)\", \"0px 0px 1px 0px rgba(0, 0, 0, 0.18)\"] },\n  small: {\n    value: [\n      \"0px 3px 8px 0px rgba(0, 0, 0, 0.1)\",\n      \"0px 1px 3px 0px rgba(0, 0, 0, 0.1)\",\n      \"0px 0px 1px 0px rgba(0, 0, 0, 0.18)\",\n    ],\n  },\n  medium: {\n    value: [\n      \"0px 5px 12px 0px rgba(0, 0, 0, 0.13)\",\n      \"0px 1px 3px 0px rgba(0, 0, 0, 0.1)\",\n      \"0px 0px 1px 0px rgba(0, 0, 0, 0.15)\",\n    ],\n  },\n  large: {\n    value: [\n      \"0px 10px 16px 0px rgba(0, 0, 0, 0.12)\",\n      \"0px 2px 5px 0px rgba(0, 0, 0, 0.15)\",\n      \"0px 0px 1px 0px rgba(0, 0, 0, 0.12)\",\n    ],\n  },\n  xlarge: {\n    value: [\n      \"0px 10px 24px 0px rgba(0, 0, 0, 0.18)\",\n      \"0px 2px 5px 0px rgba(0, 0, 0, 0.15)\",\n      \"0px 0px 1px 0px rgba(0, 0, 0, 0.08)\",\n    ],\n  },\n  full: {\n    value: \"4px 4px 0px 0px {colors.primary}\",\n  },\n  inner: {\n    value: `0px -1px 0px 0px rgba(45, 27, 98, 0.25) inset`, //colors.primary\n  },\n  innerTop: {\n    value: \"0px 1px 0px 0px rgba(45, 27, 98, 0.25) inset\", //colors.primary\n  },\n  innerRight: {\n    value: \"-1px 0px 0px 0px rgba(45, 27, 98, 0.25) inset\", //colors.primary\n  },\n});\n"],"mappings":";;;AAUA,MAAa,aAAa,aAAa,QAAQ;CAC7C,QAAQ,EAAE,OAAO,CAAC,uCAAuC,qCAAsC,EAAE;CACjG,OAAO,EACL,OAAO;EACL;EACA;EACA;CACD,EACF;CACD,QAAQ,EACN,OAAO;EACL;EACA;EACA;CACD,EACF;CACD,OAAO,EACL,OAAO;EACL;EACA;EACA;CACD,EACF;CACD,QAAQ,EACN,OAAO;EACL;EACA;EACA;CACD,EACF;CACD,MAAM,EACJ,OAAO,mCACR;CACD,OAAO,EACL,QAAQ,+CACT;CACD,UAAU,EACR,OAAO,+CACR;CACD,YAAY,EACV,OAAO,gDACR;AACF,EAAC"}