@ndla/preset-panda 0.0.1

package/es/animations.js

@@ -0,0 +1,227 @@
+/**
+ * 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"
+  }
+});
+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)"
+  }
+});
+export 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"
+    }
+  }
+};

package/es/boxShadows.js

@@ -0,0 +1,26 @@
+/**
+ * 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({
+  xxsmall: {
+    value: ["0px 1px 3px 0px rgba(0, 0, 0, 0.15)", "0px 0px 0.5px 0px rgba(0, 0, 0, 0.18)"]
+  },
+  xsmall: {
+    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)"]
+  },
+  medium: {
+    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)"]
+  },
+  large: {
+    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)"]
+  },
+  xlarge: {
+    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)"]
+  }
+});

package/es/breakpoints.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ *
+ */
+
+export const breakpoints = {
+  mobile: "20em",
+  mobileWide: "29.75em",
+  tablet: "37.5625em",
+  tabletWide: "48em",
+  desktop: "61.3125em",
+  wide: "81.3125em",
+  ultraWide: "100.0625em"
+};

package/es/colors.js

@@ -0,0 +1,242 @@
+/**
+ * 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 colors = defineTokens.colors({
+  grey: {
+    50: {
+      value: "#FAFAFA"
+    },
+    100: {
+      value: "#F2F2F3"
+    },
+    200: {
+      value: "#E4E4E7"
+    },
+    300: {
+      value: "#C9C9CF"
+    },
+    400: {
+      value: "#AFAFB6"
+    },
+    500: {
+      value: "#94949E"
+    },
+    600: {
+      value: "#797986"
+    },
+    700: {
+      value: "#61616B"
+    },
+    800: {
+      value: "#494950"
+    },
+    900: {
+      value: "#303036"
+    },
+    950: {
+      value: "#18181B"
+    }
+  },
+  blue: {
+    50: {
+      value: "#F1F9FD"
+    },
+    100: {
+      value: "#D1ECFA"
+    },
+    200: {
+      value: "#ACDFF6"
+    },
+    300: {
+      value: "#87D4F2"
+    },
+    400: {
+      value: "#6CCCEF"
+    },
+    500: {
+      value: "#40BDEB"
+    },
+    600: {
+      value: "#1E9CD2"
+    },
+    700: {
+      value: "#197AB2"
+    },
+    800: {
+      value: "#155784"
+    },
+    900: {
+      value: "#113F5F"
+    },
+    950: {
+      value: "#0B253D"
+    }
+  },
+  purple: {
+    50: {
+      value: "#F9F6FE"
+    },
+    100: {
+      value: "#F2EBFC"
+    },
+    200: {
+      value: "#E7DAFA"
+    },
+    300: {
+      value: "#DDC7FA"
+    },
+    400: {
+      value: "#D2B4F8"
+    },
+    500: {
+      value: "#C8A4F7"
+    },
+    600: {
+      value: "#B586F3"
+    },
+    700: {
+      value: "#8B65DC"
+    },
+    800: {
+      value: "#823CC8"
+    },
+    900: {
+      value: "#5E1F9E"
+    },
+    950: {
+      value: "#40116F"
+    }
+  },
+  yellow: {
+    50: {
+      value: "#FFFCF0"
+    },
+    100: {
+      value: "#FFF9DB"
+    },
+    200: {
+      value: "#FFF7CC"
+    },
+    300: {
+      value: "#FFF1A8"
+    },
+    400: {
+      value: "#FFED8F"
+    },
+    500: {
+      value: "#FFE767"
+    },
+    600: {
+      value: "#FFDD33"
+    },
+    700: {
+      value: "#FFCC00"
+    },
+    800: {
+      value: "#FFB700"
+    },
+    900: {
+      value: "#FAA700"
+    },
+    950: {
+      value: "#F08C00"
+    },
+    1000: {
+      value: "#CC8302"
+    },
+    1100: {
+      value: "#A25C06"
+    },
+    1200: {
+      value: "#86480D"
+    },
+    1300: {
+      value: "#7A3701"
+    },
+    1400: {
+      value: "#481A00"
+    }
+  },
+  green: {
+    50: {
+      value: "#EDFDF2"
+    },
+    100: {
+      value: "#DAFBE5"
+    },
+    200: {
+      value: "#C3F8D5"
+    },
+    300: {
+      value: "#A7F6C1"
+    },
+    400: {
+      value: "#81F3A7"
+    },
+    500: {
+      value: "#63F293"
+    },
+    600: {
+      value: "#42D774"
+    },
+    700: {
+      value: "#2CAF58"
+    },
+    800: {
+      value: "#238042"
+    },
+    900: {
+      value: "#174F2A"
+    },
+    950: {
+      value: "#11361E"
+    }
+  },
+  pink: {
+    50: {
+      value: "#FEF2F3"
+    },
+    100: {
+      value: "#FDECEF"
+    },
+    200: {
+      value: "#FCDEE3"
+    },
+    300: {
+      value: "#F9C3CE"
+    },
+    400: {
+      value: "#F79CAE"
+    },
+    500: {
+      value: "#F67992"
+    },
+    600: {
+      value: "#EF4D6D"
+    },
+    700: {
+      value: "#D53457"
+    },
+    800: {
+      value: "#A82447"
+    },
+    900: {
+      value: "#761935"
+    },
+    950: {
+      value: "#4A1124"
+    }
+  },
+  white: {
+    value: "#FFFFFF"
+  },
+  primary: {
+    value: "#2D1B62"
+  }
+});

package/es/conditions.js

@@ -0,0 +1,12 @@
+/**
+ * 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.
+ *
+ */
+
+export const conditions = {
+  chinese: "&:where([lang='zh'], &[lang='zh-Hans'], &[lang='zh-Hant']):not([data-pinyin])",
+  ariaInvalid: "&:has([aria-invalid='true']), &[aria-invalid='true']"
+};

package/es/globalCss.js

@@ -0,0 +1,76 @@
+/**
+ * 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 { defineGlobalStyles } from "@pandacss/dev";
+export const globalCss = defineGlobalStyles({
+  ":root": {
+    // Applied to html in preflight (css reset)
+    "--global-font-body": "fonts.sans",
+    // Code, kbd, pre, samp
+    "--global-font-mono": "fonts.code"
+  },
+  html: {
+    minHeight: "100%"
+  },
+  body: {
+    background: "background.default"
+  },
+  "a, summary,[tabindex]:not([tabindex='-1'])": {
+    outline: "none",
+    _focusVisible: {
+      outline: "3px",
+      borderRadius: "xsmall",
+      outlineColor: "stroke.default",
+      outlineOffset: "3px",
+      outlineStyle: "solid"
+    }
+  },
+  code: {
+    background: "background.subtle",
+    whiteSpace: "pre-wrap"
+  },
+  // TODO: Remove these again once they're no longer needed.
+  // 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.
+  "h1:not([class])": {
+    margin: "24px 0 12px 0"
+  },
+  "h2:not([class])": {
+    margin: "48px 0 12px 0"
+  },
+  "h3:not([class]), h4:not([class]), h5:not([class])": {
+    margin: "36px 0 6px 0"
+  },
+  "p:not([class])": {
+    marginBottom: "24px"
+  },
+  "blockquote:not([class])": {
+    margin: "30px 0"
+  },
+  h1: {
+    textStyle: "heading.medium"
+  },
+  h2: {
+    textStyle: "heading.small"
+  },
+  h3: {
+    textStyle: "title.large"
+  },
+  "h4, h5, h6": {
+    textStyle: "title.medium"
+  },
+  p: {
+    textStyle: "body.medium"
+  },
+  a: {
+    color: "text.link",
+    textDecoration: "underline",
+    _hover: {
+      textDecoration: "none"
+    }
+  }
+});

package/es/index.js

@@ -0,0 +1,46 @@
+/**
+ * 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 { definePreset } from "@pandacss/dev";
+import { animations, durations, easings, keyframes } from "./animations";
+import { boxShadows } from "./boxShadows";
+import { breakpoints } from "./breakpoints";
+import { colors } from "./colors";
+import { conditions } from "./conditions";
+import { globalCss } from "./globalCss";
+import { radii } from "./radii";
+import { semanticTokens } from "./semanticTokens";
+import { spacing } from "./spacing";
+import { fontWeights, textStyles, fonts, fontSizes, lineHeights } from "./typography";
+import { zIndex } from "./zIndex";
+const preset = definePreset({
+  globalCss: globalCss,
+  conditions: conditions,
+  theme: {
+    breakpoints: breakpoints,
+    textStyles: textStyles,
+    keyframes: keyframes,
+    tokens: {
+      colors: colors,
+      easings: easings,
+      durations: durations,
+      radii: radii,
+      spacing: spacing,
+      sizes: spacing,
+      lineHeights: lineHeights,
+      fontWeights: fontWeights,
+      fontSizes: fontSizes,
+      fonts: fonts,
+      animations: animations,
+      shadows: boxShadows,
+      zIndex: zIndex
+    },
+    semanticTokens: semanticTokens
+  }
+});
+export default preset;

package/es/radii.js

@@ -0,0 +1,29 @@
+/**
+ * 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 radii = defineTokens.radii({
+  sharp: {
+    value: "0px"
+  },
+  xsmall: {
+    value: "{spacing.4xsmall}"
+  },
+  small: {
+    value: "{spacing.xxsmall}"
+  },
+  medium: {
+    value: "{spacing.xsmall}"
+  },
+  large: {
+    value: "{spacing.medium}"
+  },
+  full: {
+    value: "100%"
+  }
+});