@purpur/library 9.7.4 → 9.8.0

package/tokens/gradient/variables.css

@@ -0,0 +1,53 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-gradient-ai-text-interactive-primary: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom) -13%,
+    var(--purpur-color-text-interactive-primary) 58%
+  );
+  --purpur-gradient-ai-text-interactive-primary-negative: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -13%,
+    var(--purpur-color-text-interactive-primary-negative) 58%
+  );
+  --purpur-gradient-ai-background-interactive-expressive: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-bottom) -15%,
+    var(--purpur-color-background-interactive-expressive) 44%
+  );
+  --purpur-gradient-ai-background-interactive-expressive-negative: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -15%,
+    var(--purpur-color-background-interactive-expressive-negative) 44%
+  );
+  --purpur-gradient-ai-background-interactive-primary: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-bottom) -15%,
+    var(--purpur-color-background-interactive-primary) 44%,
+    var(--purpur-color-gradient-ai-top) 133%
+  );
+  --purpur-gradient-ai-background-interactive-primary-negative: linear-gradient(
+    280deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -15%,
+    var(--purpur-color-background-interactive-primary-negative) 23%,
+    var(--purpur-color-background-interactive-primary-negative) 68%,
+    var(--purpur-color-gradient-ai-top-negative) 112%
+  );
+  --purpur-gradient-ai-background-primary-negative: linear-gradient(
+    352deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -69%,
+    var(--purpur-color-background-primary-negative) 15%,
+    var(--purpur-color-background-primary-negative) 87%,
+    var(--purpur-color-gradient-ai-top-negative) 183%
+  );
+  --purpur-gradient-ai-border-interactive-primary: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom) -13%,
+    var(--purpur-color-border-interactive-primary) 58%
+  );
+  --purpur-gradient-ai-border-interactive-primary-negative: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -13%,
+    var(--purpur-color-border-interactive-primary-negative) 58%
+  );
+}

package/tokens/gradient/variables.d.ts

@@ -0,0 +1,9 @@
+export const purpurGradientAiTextInteractivePrimary: string;
+export const purpurGradientAiTextInteractivePrimaryNegative: string;
+export const purpurGradientAiBackgroundInteractiveExpressive: string;
+export const purpurGradientAiBackgroundInteractiveExpressiveNegative: string;
+export const purpurGradientAiBackgroundInteractivePrimary: string;
+export const purpurGradientAiBackgroundInteractivePrimaryNegative: string;
+export const purpurGradientAiBackgroundPrimaryNegative: string;
+export const purpurGradientAiBorderInteractivePrimary: string;
+export const purpurGradientAiBorderInteractivePrimaryNegative: string;

package/tokens/gradient/variables.dark.css

@@ -0,0 +1,51 @@
+[data-color-scheme="dark"] {
+  --purpur-gradient-ai-text-interactive-primary: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom) -13%,
+    var(--purpur-color-text-interactive-primary) 58%
+  );
+  --purpur-gradient-ai-text-interactive-primary-negative: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -13%,
+    var(--purpur-color-text-interactive-primary-negative) 58%
+  );
+  --purpur-gradient-ai-background-interactive-expressive: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-bottom) -15%,
+    var(--purpur-color-background-interactive-expressive) 44%
+  );
+  --purpur-gradient-ai-background-interactive-expressive-negative: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -15%,
+    var(--purpur-color-background-interactive-expressive-negative) 44%
+  );
+  --purpur-gradient-ai-background-interactive-primary: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-top),
+    var(--purpur-color-background-interactive-primary),
+    var(--purpur-color-gradient-ai-bottom)
+  );
+  --purpur-gradient-ai-background-interactive-primary-negative: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-top-negative),
+    var(--purpur-color-background-interactive-primary-negative),
+    var(--purpur-color-background-interactive-primary-negative),
+    var(--purpur-color-gradient-ai-bottom-negative)
+  );
+  --purpur-gradient-ai-background-primary-negative: linear-gradient(
+    291deg,
+    var(--purpur-color-gradient-ai-top-negative),
+    var(--purpur-color-background-primary-negative),
+    var(--purpur-color-gradient-ai-bottom-negative)
+  );
+  --purpur-gradient-ai-border-interactive-primary: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom) -13%,
+    var(--purpur-color-border-interactive-primary) 58%
+  );
+  --purpur-gradient-ai-border-interactive-primary-negative: linear-gradient(
+    289deg,
+    var(--purpur-color-gradient-ai-bottom-negative) -13%,
+    var(--purpur-color-border-interactive-primary-negative) 58%
+  );
+}

package/tokens/gradient/variables.dark.d.ts

@@ -0,0 +1,9 @@
+export const purpurGradientAiTextInteractivePrimary: string;
+export const purpurGradientAiTextInteractivePrimaryNegative: string;
+export const purpurGradientAiBackgroundInteractiveExpressive: string;
+export const purpurGradientAiBackgroundInteractiveExpressiveNegative: string;
+export const purpurGradientAiBackgroundInteractivePrimary: string;
+export const purpurGradientAiBackgroundInteractivePrimaryNegative: string;
+export const purpurGradientAiBackgroundPrimaryNegative: string;
+export const purpurGradientAiBorderInteractivePrimary: string;
+export const purpurGradientAiBorderInteractivePrimaryNegative: string;

package/tokens/gradient/variables.dark.js

@@ -0,0 +1,18 @@
+export const purpurGradientAiTextInteractivePrimary =
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";
+export const purpurGradientAiTextInteractivePrimaryNegative =
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";
+export const purpurGradientAiBackgroundInteractiveExpressive =
+  "linear-gradient(291deg, #62b2e7 -15%, #990ae3 44%)";
+export const purpurGradientAiBackgroundInteractiveExpressiveNegative =
+  "linear-gradient(291deg, #3694d3 -15%, #990ae3 44%)";
+export const purpurGradientAiBackgroundInteractivePrimary =
+  "linear-gradient(291deg, #d58df9, #f4e0ff, #62b2e7)";
+export const purpurGradientAiBackgroundInteractivePrimaryNegative =
+  "linear-gradient(291deg, #b12df4, #4e0174, #4e0174, #3694d3)";
+export const purpurGradientAiBackgroundPrimaryNegative =
+  "linear-gradient(291deg, #b12df4, #ffffff, #3694d3)";
+export const purpurGradientAiBorderInteractivePrimary =
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";
+export const purpurGradientAiBorderInteractivePrimaryNegative =
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";

package/tokens/gradient/variables.dark.json

@@ -0,0 +1,27 @@
+{
+  "gradient": {
+    "ai": {
+      "text": {
+        "interactive": {
+          "primary": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)",
+          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)"
+        }
+      },
+      "background": {
+        "interactive": {
+          "expressive": "linear-gradient(291deg, #62b2e7 -15%, #990ae3 44%)",
+          "expressive-negative": "linear-gradient(291deg, #3694d3 -15%, #990ae3 44%)",
+          "primary": "linear-gradient(291deg, #d58df9, #f4e0ff, #62b2e7)",
+          "primary-negative": "linear-gradient(291deg, #b12df4, #4e0174, #4e0174, #3694d3)"
+        },
+        "primary-negative": "linear-gradient(291deg, #b12df4, #ffffff, #3694d3)"
+      },
+      "border": {
+        "interactive": {
+          "primary": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)",
+          "primary-negative": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)"
+        }
+      }
+    }
+  }
+}

package/tokens/gradient/variables.dark.scss

@@ -0,0 +1,36 @@
+$purpur-gradient-ai-text-interactive-primary: linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%);
+$purpur-gradient-ai-text-interactive-primary-negative: linear-gradient(
+  289deg,
+  #3694d3 -13%,
+  #6d02a3 58%
+);
+$purpur-gradient-ai-background-interactive-expressive: linear-gradient(
+  291deg,
+  #62b2e7 -15%,
+  #990ae3 44%
+);
+$purpur-gradient-ai-background-interactive-expressive-negative: linear-gradient(
+  291deg,
+  #3694d3 -15%,
+  #990ae3 44%
+);
+$purpur-gradient-ai-background-interactive-primary: linear-gradient(
+  291deg,
+  #d58df9,
+  #f4e0ff,
+  #62b2e7
+);
+$purpur-gradient-ai-background-interactive-primary-negative: linear-gradient(
+  291deg,
+  #b12df4,
+  #4e0174,
+  #4e0174,
+  #3694d3
+);
+$purpur-gradient-ai-background-primary-negative: linear-gradient(291deg, #b12df4, #ffffff, #3694d3);
+$purpur-gradient-ai-border-interactive-primary: linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%);
+$purpur-gradient-ai-border-interactive-primary-negative: linear-gradient(
+  289deg,
+  #3694d3 -13%,
+  #6d02a3 58%
+);

package/tokens/gradient/variables.js

@@ -0,0 +1,18 @@
+export const purpurGradientAiTextInteractivePrimary =
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";
+export const purpurGradientAiTextInteractivePrimaryNegative =
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";
+export const purpurGradientAiBackgroundInteractiveExpressive =
+  "linear-gradient(291deg, #3694d3 -15%, #990ae3 44%)";
+export const purpurGradientAiBackgroundInteractiveExpressiveNegative =
+  "linear-gradient(291deg, #62b2e7 -15%, #990ae3 44%)";
+export const purpurGradientAiBackgroundInteractivePrimary =
+  "linear-gradient(291deg, #3694d3 -15%, #4e0174 44%, #b12df4 133%)";
+export const purpurGradientAiBackgroundInteractivePrimaryNegative =
+  "linear-gradient(280deg, #62b2e7 -15%, #f4e0ff 23%, #f4e0ff 68%, #d58df9 112%)";
+export const purpurGradientAiBackgroundPrimaryNegative =
+  "linear-gradient(352deg, #62b2e7 -69%, #1f002e 15%, #1f002e 87%, #d58df9 183%)";
+export const purpurGradientAiBorderInteractivePrimary =
+  "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)";
+export const purpurGradientAiBorderInteractivePrimaryNegative =
+  "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)";

package/tokens/gradient/variables.json

@@ -0,0 +1,27 @@
+{
+  "gradient": {
+    "ai": {
+      "text": {
+        "interactive": {
+          "primary": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)",
+          "primary-negative": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)"
+        }
+      },
+      "background": {
+        "interactive": {
+          "expressive": "linear-gradient(291deg, #3694d3 -15%, #990ae3 44%)",
+          "expressive-negative": "linear-gradient(291deg, #62b2e7 -15%, #990ae3 44%)",
+          "primary": "linear-gradient(291deg, #3694d3 -15%, #4e0174 44%, #b12df4 133%)",
+          "primary-negative": "linear-gradient(280deg, #62b2e7 -15%, #f4e0ff 23%, #f4e0ff 68%, #d58df9 112%)"
+        },
+        "primary-negative": "linear-gradient(352deg, #62b2e7 -69%, #1f002e 15%, #1f002e 87%, #d58df9 183%)"
+      },
+      "border": {
+        "interactive": {
+          "primary": "linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%)",
+          "primary-negative": "linear-gradient(289deg, #62b2e7 -13%, #f4e0ff 58%)"
+        }
+      }
+    }
+  }
+}

package/tokens/gradient/variables.scss

@@ -0,0 +1,42 @@
+$purpur-gradient-ai-text-interactive-primary: linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%);
+$purpur-gradient-ai-text-interactive-primary-negative: linear-gradient(
+  289deg,
+  #62b2e7 -13%,
+  #f4e0ff 58%
+);
+$purpur-gradient-ai-background-interactive-expressive: linear-gradient(
+  291deg,
+  #3694d3 -15%,
+  #990ae3 44%
+);
+$purpur-gradient-ai-background-interactive-expressive-negative: linear-gradient(
+  291deg,
+  #62b2e7 -15%,
+  #990ae3 44%
+);
+$purpur-gradient-ai-background-interactive-primary: linear-gradient(
+  291deg,
+  #3694d3 -15%,
+  #4e0174 44%,
+  #b12df4 133%
+);
+$purpur-gradient-ai-background-interactive-primary-negative: linear-gradient(
+  280deg,
+  #62b2e7 -15%,
+  #f4e0ff 23%,
+  #f4e0ff 68%,
+  #d58df9 112%
+);
+$purpur-gradient-ai-background-primary-negative: linear-gradient(
+  352deg,
+  #62b2e7 -69%,
+  #1f002e 15%,
+  #1f002e 87%,
+  #d58df9 183%
+);
+$purpur-gradient-ai-border-interactive-primary: linear-gradient(289deg, #3694d3 -13%, #6d02a3 58%);
+$purpur-gradient-ai-border-interactive-primary-negative: linear-gradient(
+  289deg,
+  #62b2e7 -13%,
+  #f4e0ff 58%
+);

package/tokens/index.css

@@ -0,0 +1,18 @@
+@import "./border/variables.css";
+@import "./breakpoint/variables.css";
+@import "./color/variables.css";
+@import "./filter/variables.css";
+@import "./gradient/variables.css";
+@import "./motion/variables.css";
+@import "./shadow/variables.css";
+@import "./spacing/variables.css";
+@import "./typography/variables.css";
+@import "./border/variables.dark.css";
+@import "./breakpoint/variables.dark.css";
+@import "./color/variables.dark.css";
+@import "./filter/variables.dark.css";
+@import "./gradient/variables.dark.css";
+@import "./motion/variables.dark.css";
+@import "./shadow/variables.dark.css";
+@import "./spacing/variables.dark.css";
+@import "./typography/variables.dark.css";

package/tokens/index.d.ts

@@ -0,0 +1,9 @@
+export * from "./border/variables";
+export * from "./breakpoint/variables";
+export * from "./color/variables";
+export * from "./filter/variables";
+export * from "./gradient/variables";
+export * from "./motion/variables";
+export * from "./shadow/variables";
+export * from "./spacing/variables";
+export * from "./typography/variables";

package/tokens/index.js

@@ -0,0 +1,9 @@
+export * from "./border/variables";
+export * from "./breakpoint/variables";
+export * from "./color/variables";
+export * from "./filter/variables";
+export * from "./gradient/variables";
+export * from "./motion/variables";
+export * from "./shadow/variables";
+export * from "./spacing/variables";
+export * from "./typography/variables";

package/tokens/motion/variables.css

@@ -0,0 +1,14 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-motion-duration-100: 100ms;
+  --purpur-motion-duration-150: 150ms;
+  --purpur-motion-duration-200: 200ms;
+  --purpur-motion-duration-300: 300ms;
+  --purpur-motion-duration-400: 400ms;
+  --purpur-motion-duration-500: 500ms;
+  --purpur-motion-duration-1500: 1500ms;
+  --purpur-motion-duration-2000: 2000ms;
+  --purpur-motion-easing-ease-in: cubic-bezier(0.35, 0.07, 0.88, 0.43);
+  --purpur-motion-easing-ease-out: cubic-bezier(0.33, 0.9, 0.75, 0.95);
+  --purpur-motion-easing-ease-in-out: cubic-bezier(0.45, 0, 0.52, 0.98);
+}

package/tokens/motion/variables.d.ts

@@ -0,0 +1,11 @@
+export const purpurMotionDuration100: string;
+export const purpurMotionDuration150: string;
+export const purpurMotionDuration200: string;
+export const purpurMotionDuration300: string;
+export const purpurMotionDuration400: string;
+export const purpurMotionDuration500: string;
+export const purpurMotionDuration1500: string;
+export const purpurMotionDuration2000: string;
+export const purpurMotionEasingEaseIn: string;
+export const purpurMotionEasingEaseOut: string;
+export const purpurMotionEasingEaseInOut: string;

package/tokens/motion/variables.dark.css

@@ -0,0 +1,13 @@
+[data-color-scheme="dark"] {
+  --purpur-motion-duration-100: 100ms;
+  --purpur-motion-duration-150: 150ms;
+  --purpur-motion-duration-200: 200ms;
+  --purpur-motion-duration-300: 300ms;
+  --purpur-motion-duration-400: 400ms;
+  --purpur-motion-duration-500: 500ms;
+  --purpur-motion-duration-1500: 1500ms;
+  --purpur-motion-duration-2000: 2000ms;
+  --purpur-motion-easing-ease-in: cubic-bezier(0.35, 0.07, 0.88, 0.43);
+  --purpur-motion-easing-ease-out: cubic-bezier(0.33, 0.9, 0.75, 0.95);
+  --purpur-motion-easing-ease-in-out: cubic-bezier(0.45, 0, 0.52, 0.98);
+}

package/tokens/motion/variables.dark.d.ts

@@ -0,0 +1,11 @@
+export const purpurMotionDuration100: string;
+export const purpurMotionDuration150: string;
+export const purpurMotionDuration200: string;
+export const purpurMotionDuration300: string;
+export const purpurMotionDuration400: string;
+export const purpurMotionDuration500: string;
+export const purpurMotionDuration1500: string;
+export const purpurMotionDuration2000: string;
+export const purpurMotionEasingEaseIn: string;
+export const purpurMotionEasingEaseOut: string;
+export const purpurMotionEasingEaseInOut: string;

package/tokens/motion/variables.dark.js

@@ -0,0 +1,11 @@
+export const purpurMotionDuration100 = "100ms";
+export const purpurMotionDuration150 = "150ms";
+export const purpurMotionDuration200 = "200ms";
+export const purpurMotionDuration300 = "300ms";
+export const purpurMotionDuration400 = "400ms";
+export const purpurMotionDuration500 = "500ms";
+export const purpurMotionDuration1500 = "1500ms";
+export const purpurMotionDuration2000 = "2000ms";
+export const purpurMotionEasingEaseIn = "cubic-bezier(0.35, 0.07, 0.88, 0.43)";
+export const purpurMotionEasingEaseOut = "cubic-bezier(0.33, 0.9, 0.75, 0.95)";
+export const purpurMotionEasingEaseInOut = "cubic-bezier(0.45, 0, 0.52, 0.98)";

package/tokens/motion/variables.dark.json

@@ -0,0 +1,19 @@
+{
+  "motion": {
+    "duration": {
+      "100": "100ms",
+      "150": "150ms",
+      "200": "200ms",
+      "300": "300ms",
+      "400": "400ms",
+      "500": "500ms",
+      "1500": "1500ms",
+      "2000": "2000ms"
+    },
+    "easing": {
+      "ease-in": "cubic-bezier(0.35, 0.07, 0.88, 0.43)",
+      "ease-out": "cubic-bezier(0.33, 0.9, 0.75, 0.95)",
+      "ease-in-out": "cubic-bezier(0.45, 0, 0.52, 0.98)"
+    }
+  }
+}

package/tokens/motion/variables.dark.scss

@@ -0,0 +1,11 @@
+$purpur-motion-duration-100: 100ms;
+$purpur-motion-duration-150: 150ms;
+$purpur-motion-duration-200: 200ms;
+$purpur-motion-duration-300: 300ms;
+$purpur-motion-duration-400: 400ms;
+$purpur-motion-duration-500: 500ms;
+$purpur-motion-duration-1500: 1500ms;
+$purpur-motion-duration-2000: 2000ms;
+$purpur-motion-easing-ease-in: cubic-bezier(0.35, 0.07, 0.88, 0.43);
+$purpur-motion-easing-ease-out: cubic-bezier(0.33, 0.9, 0.75, 0.95);
+$purpur-motion-easing-ease-in-out: cubic-bezier(0.45, 0, 0.52, 0.98);

package/tokens/motion/variables.js

@@ -0,0 +1,11 @@
+export const purpurMotionDuration100 = "100ms";
+export const purpurMotionDuration150 = "150ms";
+export const purpurMotionDuration200 = "200ms";
+export const purpurMotionDuration300 = "300ms";
+export const purpurMotionDuration400 = "400ms";
+export const purpurMotionDuration500 = "500ms";
+export const purpurMotionDuration1500 = "1500ms";
+export const purpurMotionDuration2000 = "2000ms";
+export const purpurMotionEasingEaseIn = "cubic-bezier(0.35, 0.07, 0.88, 0.43)";
+export const purpurMotionEasingEaseOut = "cubic-bezier(0.33, 0.9, 0.75, 0.95)";
+export const purpurMotionEasingEaseInOut = "cubic-bezier(0.45, 0, 0.52, 0.98)";

package/tokens/motion/variables.json

@@ -0,0 +1,19 @@
+{
+  "motion": {
+    "duration": {
+      "100": "100ms",
+      "150": "150ms",
+      "200": "200ms",
+      "300": "300ms",
+      "400": "400ms",
+      "500": "500ms",
+      "1500": "1500ms",
+      "2000": "2000ms"
+    },
+    "easing": {
+      "ease-in": "cubic-bezier(0.35, 0.07, 0.88, 0.43)",
+      "ease-out": "cubic-bezier(0.33, 0.9, 0.75, 0.95)",
+      "ease-in-out": "cubic-bezier(0.45, 0, 0.52, 0.98)"
+    }
+  }
+}

package/tokens/motion/variables.scss

@@ -0,0 +1,11 @@
+$purpur-motion-duration-100: 100ms;
+$purpur-motion-duration-150: 150ms;
+$purpur-motion-duration-200: 200ms;
+$purpur-motion-duration-300: 300ms;
+$purpur-motion-duration-400: 400ms;
+$purpur-motion-duration-500: 500ms;
+$purpur-motion-duration-1500: 1500ms;
+$purpur-motion-duration-2000: 2000ms;
+$purpur-motion-easing-ease-in: cubic-bezier(0.35, 0.07, 0.88, 0.43);
+$purpur-motion-easing-ease-out: cubic-bezier(0.33, 0.9, 0.75, 0.95);
+$purpur-motion-easing-ease-in-out: cubic-bezier(0.45, 0, 0.52, 0.98);

package/tokens/shadow/variables.css

@@ -0,0 +1,11 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-shadow-none: calc(0rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale))
+    calc(0rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-sm: calc(0rem * var(--purpur-rescale)) calc(0.0625rem * var(--purpur-rescale))
+    calc(0.25rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-md: calc(0rem * var(--purpur-rescale)) calc(0.25rem * var(--purpur-rescale))
+    calc(0.75rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-lg: calc(0rem * var(--purpur-rescale)) calc(0.75rem * var(--purpur-rescale))
+    calc(1.5rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+}

package/tokens/shadow/variables.d.ts

@@ -0,0 +1,4 @@
+export const purpurShadowNone: string;
+export const purpurShadowSm: string;
+export const purpurShadowMd: string;
+export const purpurShadowLg: string;

package/tokens/shadow/variables.dark.css

@@ -0,0 +1,10 @@
+[data-color-scheme="dark"] {
+  --purpur-shadow-none: calc(0rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale))
+    calc(0rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-sm: calc(0rem * var(--purpur-rescale)) calc(0.0625rem * var(--purpur-rescale))
+    calc(0.25rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-md: calc(0rem * var(--purpur-rescale)) calc(0.25rem * var(--purpur-rescale))
+    calc(0.75rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+  --purpur-shadow-lg: calc(0rem * var(--purpur-rescale)) calc(0.75rem * var(--purpur-rescale))
+    calc(1.5rem * var(--purpur-rescale)) calc(0rem * var(--purpur-rescale)) rgba(0, 0, 0, 0.1);
+}

package/tokens/shadow/variables.dark.d.ts

@@ -0,0 +1,4 @@
+export const purpurShadowNone: string;
+export const purpurShadowSm: string;
+export const purpurShadowMd: string;
+export const purpurShadowLg: string;

package/tokens/shadow/variables.dark.js

@@ -0,0 +1,4 @@
+export const purpurShadowNone = "0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowSm = "0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowMd = "0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowLg = "0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1)";

package/tokens/shadow/variables.dark.json

@@ -0,0 +1,8 @@
+{
+  "shadow": {
+    "none": "0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1)",
+    "sm": "0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1)",
+    "md": "0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1)",
+    "lg": "0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1)"
+  }
+}

package/tokens/shadow/variables.dark.scss

@@ -0,0 +1,4 @@
+$purpur-shadow-none: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-sm: 0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-md: 0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-lg: 0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1);

package/tokens/shadow/variables.js

@@ -0,0 +1,4 @@
+export const purpurShadowNone = "0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowSm = "0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowMd = "0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1)";
+export const purpurShadowLg = "0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1)";

package/tokens/shadow/variables.json

@@ -0,0 +1,8 @@
+{
+  "shadow": {
+    "none": "0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1)",
+    "sm": "0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1)",
+    "md": "0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1)",
+    "lg": "0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1)"
+  }
+}

package/tokens/shadow/variables.scss

@@ -0,0 +1,4 @@
+$purpur-shadow-none: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-sm: 0rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-md: 0rem 0.25rem 0.75rem 0rem rgba(0, 0, 0, 0.1);
+$purpur-shadow-lg: 0rem 0.75rem 1.5rem 0rem rgba(0, 0, 0, 0.1);

package/tokens/spacing/variables.css

@@ -0,0 +1,26 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-spacing-0: calc(0rem * var(--purpur-rescale));
+  --purpur-spacing-10: calc(0.0625rem * var(--purpur-rescale));
+  --purpur-spacing-25: calc(0.125rem * var(--purpur-rescale));
+  --purpur-spacing-50: calc(0.25rem * var(--purpur-rescale));
+  --purpur-spacing-100: calc(0.5rem * var(--purpur-rescale));
+  --purpur-spacing-150: calc(0.75rem * var(--purpur-rescale));
+  --purpur-spacing-200: calc(1rem * var(--purpur-rescale));
+  --purpur-spacing-250: calc(1.25rem * var(--purpur-rescale));
+  --purpur-spacing-300: calc(1.5rem * var(--purpur-rescale));
+  --purpur-spacing-400: calc(2rem * var(--purpur-rescale));
+  --purpur-spacing-600: calc(3rem * var(--purpur-rescale));
+  --purpur-spacing-800: calc(4rem * var(--purpur-rescale));
+  --purpur-spacing-1000: calc(5rem * var(--purpur-rescale));
+  --purpur-spacing-1200: calc(6rem * var(--purpur-rescale));
+  --purpur-spacing-1600: calc(8rem * var(--purpur-rescale));
+  --purpur-spacing-gutter-sm: var(--purpur-spacing-200);
+  --purpur-spacing-gutter-md: var(--purpur-spacing-300);
+  --purpur-spacing-gutter-lg: var(--purpur-spacing-300);
+  --purpur-spacing-gutter-xl: var(--purpur-spacing-300);
+  --purpur-spacing-page-padding-sm: var(--purpur-spacing-200);
+  --purpur-spacing-page-padding-md: var(--purpur-spacing-300);
+  --purpur-spacing-page-padding-lg: var(--purpur-spacing-600);
+  --purpur-spacing-page-padding-xl: var(--purpur-spacing-600);
+}

package/tokens/spacing/variables.d.ts

@@ -0,0 +1,23 @@
+export const purpurSpacing0: string;
+export const purpurSpacing10: string;
+export const purpurSpacing25: string;
+export const purpurSpacing50: string;
+export const purpurSpacing100: string;
+export const purpurSpacing150: string;
+export const purpurSpacing200: string;
+export const purpurSpacing250: string;
+export const purpurSpacing300: string;
+export const purpurSpacing400: string;
+export const purpurSpacing600: string;
+export const purpurSpacing800: string;
+export const purpurSpacing1000: string;
+export const purpurSpacing1200: string;
+export const purpurSpacing1600: string;
+export const purpurSpacingGutterSm: string;
+export const purpurSpacingGutterMd: string;
+export const purpurSpacingGutterLg: string;
+export const purpurSpacingGutterXl: string;
+export const purpurSpacingPagePaddingSm: string;
+export const purpurSpacingPagePaddingMd: string;
+export const purpurSpacingPagePaddingLg: string;
+export const purpurSpacingPagePaddingXl: string;

package/tokens/spacing/variables.dark.css

@@ -0,0 +1,17 @@
+[data-color-scheme="dark"] {
+  --purpur-spacing-0: calc(0rem * var(--purpur-rescale));
+  --purpur-spacing-10: calc(0.0625rem * var(--purpur-rescale));
+  --purpur-spacing-25: calc(0.125rem * var(--purpur-rescale));
+  --purpur-spacing-50: calc(0.25rem * var(--purpur-rescale));
+  --purpur-spacing-100: calc(0.5rem * var(--purpur-rescale));
+  --purpur-spacing-150: calc(0.75rem * var(--purpur-rescale));
+  --purpur-spacing-200: calc(1rem * var(--purpur-rescale));
+  --purpur-spacing-250: calc(1.25rem * var(--purpur-rescale));
+  --purpur-spacing-300: calc(1.5rem * var(--purpur-rescale));
+  --purpur-spacing-400: calc(2rem * var(--purpur-rescale));
+  --purpur-spacing-600: calc(3rem * var(--purpur-rescale));
+  --purpur-spacing-800: calc(4rem * var(--purpur-rescale));
+  --purpur-spacing-1000: calc(5rem * var(--purpur-rescale));
+  --purpur-spacing-1200: calc(6rem * var(--purpur-rescale));
+  --purpur-spacing-1600: calc(8rem * var(--purpur-rescale));
+}