@ndla/preset-panda 0.0.1

package/es/typography.js

@@ -0,0 +1,247 @@
+/**
+ * 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 { defineTextStyles, defineTokens } from "@pandacss/dev";
+export const fontWeights = defineTokens.fontWeights({
+  light: {
+    value: 300
+  },
+  normal: {
+    value: 400
+  },
+  semibold: {
+    value: 600
+  },
+  bold: {
+    value: 700
+  }
+});
+export const fonts = defineTokens.fonts({
+  sans: {
+    value: ["Satoshi", "Helvetica", "Arial", "STKaiti", "'华文楷体'", "KaiTi", "SimKai", "'楷体'", "KaiU", "DFKai-SB", "'標楷體'", "SongTi", "'宋体'", "sans-serif"]
+  },
+  serif: {
+    value: ["'Source Serif Pro'", "Times", "STKaiti", "'华文楷体'", "KaiTi", "SimKai", "'楷体'", "KaiU", "DFKai-SB", "'標楷體'", "SongTi", "'宋体'", "serif"]
+  },
+  code: {
+    value: ["'Source Code ProVariable'", "Monaco"]
+  }
+});
+export const fontSizes = defineTokens.fontSizes({
+  // 12px
+  xxsmall: {
+    value: "0.75rem"
+  },
+  // 14px
+  xsmall: {
+    value: "0.875rem"
+  },
+  // 16px
+  small: {
+    value: "1rem"
+  },
+  // 18px
+  medium: {
+    value: "1.125rem"
+  },
+  // 22px
+  large: {
+    value: "1.375rem"
+  },
+  // 26px
+  xlarge: {
+    value: "1.625rem"
+  },
+  // 30px
+  xxlarge: {
+    value: "1.875rem"
+  },
+  // 38px
+  "3xlarge": {
+    value: "2.375rem"
+  },
+  // 48px
+  "4xlarge": {
+    value: "3rem"
+  }
+});
+export const lineHeights = defineTokens.lineHeights({
+  xxsmall: {
+    value: "0.75rem"
+  },
+  xsmall: {
+    value: "1.375rem"
+  },
+  small: {
+    value: "1.5rem"
+  },
+  medium: {
+    value: "1.75rem"
+  },
+  large: {
+    value: "1.875rem"
+  },
+  xlarge: {
+    value: "2.25rem"
+  },
+  xxlarge: {
+    value: "2.375rem"
+  },
+  "3xlarge": {
+    value: "3rem"
+  },
+  "4xlarge": {
+    value: "3.75rem"
+  }
+});
+const sizes = (size, lineHeight) => {
+  return {
+    fontSize: size,
+    lineHeight,
+    _chinese: {
+      fontSize: "calc(token(fontSizes.".concat(size, ") * 1.11)"),
+      lineHeight: "calc(token(lineHeights.".concat(lineHeight, ") * 1.11)")
+    }
+  };
+};
+export const textStyles = defineTextStyles({
+  heading: {
+    large: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("4xlarge", "4xlarge")
+      }
+    },
+    medium: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("3xlarge", "3xlarge")
+      }
+    },
+    small: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("xxlarge", "xxlarge")
+      }
+    }
+  },
+  title: {
+    large: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("xlarge", "xlarge")
+      }
+    },
+    medium: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("large", "large")
+      }
+    },
+    small: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "bold",
+        ...sizes("medium", "small")
+      }
+    }
+  },
+  body: {
+    article: {
+      value: {
+        fontFamily: "serif",
+        fontWeight: "normal",
+        ...sizes("medium", "medium")
+      }
+    },
+    articleLink: {
+      value: {
+        fontFamily: "serif",
+        fontWeight: "normal",
+        ...sizes("medium", "medium")
+      }
+    },
+    link: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("medium", "medium")
+      }
+    },
+    xlarge: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("medium", "large")
+      }
+    },
+    large: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("medium", "medium")
+      }
+    },
+    medium: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("small", "small")
+      }
+    },
+    small: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("xsmall", "xsmall")
+      }
+    }
+  },
+  label: {
+    large: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("medium", "medium")
+      },
+      strong: {
+        value: {
+          fontFamily: "sans",
+          fontWeight: "bold",
+          ...sizes("medium", "medium")
+        }
+      }
+    },
+    medium: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("small", "small")
+      }
+    },
+    small: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("xsmall", "xsmall")
+      }
+    },
+    xsmall: {
+      value: {
+        fontFamily: "sans",
+        fontWeight: "normal",
+        ...sizes("xxsmall", "xxsmall")
+      }
+    }
+  }
+});

package/es/zIndex.js

@@ -0,0 +1,47 @@
+/**
+ * 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 zIndex = defineTokens.zIndex({
+  hide: {
+    value: -1
+  },
+  base: {
+    value: 0
+  },
+  docked: {
+    value: 10
+  },
+  dropdown: {
+    value: 1000
+  },
+  sticky: {
+    value: 1100
+  },
+  banner: {
+    value: 1200
+  },
+  overlay: {
+    value: 1300
+  },
+  modal: {
+    value: 1400
+  },
+  popover: {
+    value: 1500
+  },
+  skipLink: {
+    value: 1600
+  },
+  toast: {
+    value: 1700
+  },
+  tooltip: {
+    value: 1800
+  }
+});

package/lib/animations.d.ts

@@ -0,0 +1,225 @@
+/**
+ * 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 declare const animations: {
+    spin: {
+        value: string;
+    };
+    "collapse-in": {
+        value: string;
+    };
+    "collapse-out": {
+        value: string;
+    };
+    "fade-shift-in": {
+        value: string;
+    };
+    "fade-shift-out": {
+        value: string;
+    };
+    "backdrop-in": {
+        value: string;
+    };
+    "backdrop-out": {
+        value: string;
+    };
+    "dialog-in": {
+        value: string;
+    };
+    "dialog-out": {
+        value: string;
+    };
+    "drawer-in-left": {
+        value: string;
+    };
+    "drawer-out-left": {
+        value: string;
+    };
+    "drawer-in-right": {
+        value: string;
+    };
+    "drawer-out-right": {
+        value: string;
+    };
+    "drawer-in-bottom": {
+        value: string;
+    };
+    "drawer-out-bottom": {
+        value: string;
+    };
+    "drawer-in-top": {
+        value: string;
+    };
+    "drawer-out-top": {
+        value: string;
+    };
+    "skeleton-pulse": {
+        value: string;
+    };
+};
+export declare const easings: {
+    default: {
+        value: string;
+    };
+    "emphasized-in": {
+        value: string;
+    };
+    "emphasized-out": {
+        value: string;
+    };
+    pulse: {
+        value: string;
+    };
+};
+export declare const durations: {
+    superFast: {
+        value: string;
+    };
+    fast: {
+        value: string;
+    };
+    normal: {
+        value: string;
+    };
+    slow: {
+        value: string;
+    };
+    infinite: {
+        value: string;
+    };
+};
+export declare const keyframes: {
+    spin: {
+        from: {
+            transform: string;
+        };
+        to: {
+            transform: string;
+        };
+    };
+    "fade-shift-in": {
+        "0%": {
+            opacity: string;
+            transform: string;
+        };
+        "100%": {
+            opacity: string;
+            transform: string;
+        };
+    };
+    "fade-shift-out": {
+        "0%": {
+            opacity: string;
+            transform: string;
+        };
+        "100%": {
+            opacity: string;
+            transform: string;
+        };
+    };
+    "collapse-in": {
+        "0%": {
+            height: string;
+        };
+        "100%": {
+            height: string;
+        };
+    };
+    "collapse-out": {
+        "0%": {
+            height: string;
+        };
+        "100%": {
+            height: string;
+        };
+    };
+    "fade-in": {
+        from: {
+            opacity: string;
+        };
+        to: {
+            opacity: string;
+        };
+    };
+    "fade-out": {
+        from: {
+            opacity: string;
+        };
+        to: {
+            opacity: string;
+        };
+    };
+    "slide-in-left": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-out-left": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-in-right": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-out-right": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-in-top": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-out-top": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-in-bottom": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "slide-out-bottom": {
+        "0%": {
+            transform: string;
+        };
+        "100%": {
+            transform: string;
+        };
+    };
+    "skeleton-pulse": {
+        "50%": {
+            opacity: string;
+        };
+    };
+};