@autonomys/design-tokens 1.4.18

package/dist/tokens/typography.js

@@ -0,0 +1,205 @@
+/**
+ * Auto Design Typography Tokens
+ *
+ * These typography tokens are derived from the application's design system
+ * and match the font styles used throughout the codebase.
+ */
+// Font families
+export const fontFamilies = {
+    sans: 'var(--font-geist-sans), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+    mono: 'var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    display: "var(--font-roboto-serif), serif",
+    body: "var(--font-libre-franklin), sans-serif",
+};
+// Font sizes - following a modular scale
+export const fontSizes = {
+    xs: "0.75rem", // 12px
+    sm: "0.875rem", // 14px
+    base: "1rem", // 16px
+    lg: "1.125rem", // 18px
+    xl: "1.25rem", // 20px
+    "2xl": "1.5rem", // 24px
+    "3xl": "1.875rem", // 30px
+    "4xl": "2.25rem", // 36px
+    "5xl": "3rem", // 48px
+    // Title sizes
+    title1: "3.313rem", // 53px
+    title2: "2.938rem", // 47px
+    title3: "2.5rem", // 40px
+    // Body sizes
+    bodyLg: "2rem", // 32px
+    bodyMd: "1.688rem", // 27px
+    bodySm: "1.313rem", // 21px
+    // Button sizes
+    buttonLg: "1.188rem", // 19px
+    buttonMd: "1rem", // 16px
+    // Other sizes
+    preTitle: "1.188rem", // 19px
+    detail: "1.188rem", // 19px
+};
+// Font weights
+export const fontWeights = {
+    extralight: 200,
+    light: 300,
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+};
+// Line heights
+export const lineHeights = {
+    none: 1,
+    tight: 1.25,
+    snug: 1.375,
+    normal: 1.5,
+    relaxed: 1.625,
+    loose: 2,
+};
+// Letter spacings
+export const letterSpacings = {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+};
+// Font styles for specific text elements
+export const textStyles = {
+    // Headings
+    h1: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes["4xl"],
+        fontWeight: fontWeights.bold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.tight,
+    },
+    h2: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes["2xl"],
+        fontWeight: fontWeights.bold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.tight,
+    },
+    h3: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.xl,
+        fontWeight: fontWeights.semibold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.normal,
+    },
+    h4: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.lg,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.normal,
+    },
+    // Body text
+    bodyLarge: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.lg,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.relaxed,
+        letterSpacing: letterSpacings.normal,
+    },
+    bodyDefault: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.base,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.relaxed,
+        letterSpacing: letterSpacings.normal,
+    },
+    bodySmall: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.sm,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.relaxed,
+        letterSpacing: letterSpacings.normal,
+    },
+    bodyXSmall: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.xs,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.relaxed,
+        letterSpacing: letterSpacings.normal,
+    },
+    // UI elements
+    buttonLarge: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.base,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.none,
+        letterSpacing: letterSpacings.wide,
+        textTransform: "none",
+    },
+    buttonDefault: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.sm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.none,
+        letterSpacing: letterSpacings.wide,
+        textTransform: "none",
+    },
+    buttonSmall: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.xs,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.none,
+        letterSpacing: letterSpacings.wide,
+        textTransform: "none",
+    },
+    // Special elements
+    label: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.sm,
+        fontWeight: fontWeights.medium,
+        lineHeight: lineHeights.normal,
+        letterSpacing: letterSpacings.normal,
+    },
+    caption: {
+        fontFamily: fontFamilies.sans,
+        fontSize: fontSizes.xs,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.normal,
+        letterSpacing: letterSpacings.normal,
+    },
+    code: {
+        fontFamily: fontFamilies.mono,
+        fontSize: fontSizes.sm,
+        fontWeight: fontWeights.normal,
+        lineHeight: lineHeights.normal,
+        letterSpacing: letterSpacings.normal,
+    },
+    // Title styles
+    title1: {
+        fontFamily: fontFamilies.display,
+        fontSize: fontSizes.title1,
+        fontWeight: fontWeights.bold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.tight,
+    },
+    title2: {
+        fontFamily: fontFamilies.display,
+        fontSize: fontSizes.title2,
+        fontWeight: fontWeights.bold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.tight,
+    },
+    title3: {
+        fontFamily: fontFamilies.display,
+        fontSize: fontSizes.title3,
+        fontWeight: fontWeights.bold,
+        lineHeight: lineHeights.tight,
+        letterSpacing: letterSpacings.tight,
+    },
+};
+export default {
+    fontFamilies,
+    fontSizes,
+    fontWeights,
+    lineHeights,
+    letterSpacings,
+    textStyles,
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@autonomys/design-tokens",
+  "version": "1.4.18",
+  "description": "Auto Design Tokens",
+  "type": "module",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/autonomys/auto-sdk"
+  },
+  "author": {
+    "name": "Autonomys",
+    "url": "https://www.autonomys.xyz"
+  },
+  "bugs": {
+    "url": "https://github.com/autonomys/auto-sdk/issues"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build-tokens.js && rollup -c",
+    "prebuild": "rm -rf dist",
+    "dev": "npm run build -- --watch",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.5.7",
+    "tailwindcss": "^3.3.5"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "autoprefixer": "^10.4.16",
+    "cssnano": "^6.0.1",
+    "fs-extra": "^11.1.1",
+    "postcss": "^8.4.31",
+    "postcss-import": "^15.1.0",
+    "rollup": "^4.1.4",
+    "typescript": "^5.3.3"
+  },
+  "packageManager": "yarn@4.7.0"
+}