@factorialco/f0-core 1.25.1

package/src/tokens/spacing.ts

@@ -0,0 +1,101 @@
+import { ThemeConfig } from "tailwindcss/types/config"
+
+/**
+ * Spacing for the tailwind config
+ * Provides scale in relative(rem) and absolute(px) units
+ *
+ * The pixel scale is used by default.
+ * All properties that do not explicitly set to use relative scale, use pixels.
+ *
+ * Relative scale is used for size definitions, like heights and widths.
+ */
+
+export const absoluteSpacing: ThemeConfig["spacing"] = {
+  px: "1px",
+  0: "0px",
+  0.5: "2px",
+  1: "4px",
+  1.5: "6px",
+  2: "8px",
+  2.5: "10px",
+  3: "12px",
+  3.5: "14px",
+  4: "16px",
+  5: "20px",
+  6: "24px",
+  7: "28px",
+  8: "32px",
+  9: "36px",
+  10: "40px",
+  11: "44px",
+  12: "48px",
+  14: "56px",
+  16: "64px",
+  18: "72px",
+  20: "80px",
+  24: "96px",
+  28: "112px",
+  32: "128px",
+  36: "144px",
+  40: "160px",
+  44: "176px",
+  48: "192px",
+  52: "208px",
+  56: "224px",
+  60: "240px",
+  64: "256px",
+  72: "288px",
+  80: "320px",
+  96: "384px",
+}
+
+export const relativeSpacing: ThemeConfig["spacing"] = {
+  px: "1px",
+  0: "0px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  1.5: "0.375rem",
+  2: "0.5rem",
+  2.5: "0.625rem",
+  3: "0.75rem",
+  3.5: "0.875rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  18: "4.5rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+}
+
+/*
+ * Spacing between elements
+ * This special scale is used for the gap between common elements.
+ * Docs: https://zeroheight.com/6cc527675/p/94c391-spacing/t/3409209197
+ */
+export const betweenSpacing: ThemeConfig["spacing"] = {
+  sm: relativeSpacing[1],
+  md: relativeSpacing[2],
+  lg: relativeSpacing[3],
+  xl: relativeSpacing[4],
+}

package/tailwind.ts

@@ -0,0 +1,167 @@
+import type { Config } from "tailwindcss"
+import { borderRadius } from "./src/tokens/borderRadius"
+import { baseColors, f1Colors } from "./src/tokens/colors"
+import {
+  absoluteSpacing,
+  betweenSpacing,
+  relativeSpacing,
+} from "./src/tokens/spacing"
+
+export const baseConfig: Omit<Config, "content"> = {
+  darkMode: "class",
+  corePlugins: {
+    preflight: false,
+  },
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    colors: baseColors,
+    fontFamily: {
+      sans: ["Inter", "sans-serif"],
+    },
+    fontWeight: {
+      normal: "400",
+      medium: "500",
+      semibold: "600",
+    },
+    fontSize: {
+      xs: [
+        ".625rem",
+        {
+          lineHeight: "0.75rem",
+        },
+      ],
+      sm: [
+        ".75rem",
+        {
+          lineHeight: "1rem",
+        },
+      ],
+      base: [
+        ".875rem",
+        {
+          lineHeight: "1.25rem",
+          letterSpacing: "-0.005em",
+        },
+      ],
+      lg: [
+        "1rem",
+        {
+          lineHeight: "1.5rem",
+          letterSpacing: "-0.01em",
+        },
+      ],
+      xl: [
+        "1.125rem",
+        {
+          lineHeight: "1.75rem",
+          letterSpacing: "-0.01em",
+        },
+      ],
+      "2xl": [
+        "1.375rem",
+        {
+          lineHeight: "1.75rem",
+          letterSpacing: "-0.01em",
+        },
+      ],
+      "3xl": [
+        "1.625rem",
+        {
+          lineHeight: "2rem",
+          letterSpacing: "-0.01em",
+        },
+      ],
+      "4xl": [
+        "2.25rem",
+        {
+          lineHeight: "2.5rem",
+          letterSpacing: "-0.02em",
+        },
+      ],
+    },
+    borderRadius,
+    boxShadow: {
+      DEFAULT: "0 2px 20px 0 hsl(var(--shadow) / 0.04)",
+      md: "0 4px 20px 0 hsl(var(--shadow) / 0.08)",
+      lg: "0 8px 30px 0 hsl(var(--shadow) / 0.12)",
+      xl: "0 12px 56px 0 hsl(var(--shadow) / 0.16)",
+      none: "none",
+    },
+    // use pixel scale by default
+    spacing: absoluteSpacing,
+    extend: {
+      flexBasis: relativeSpacing,
+      height: relativeSpacing,
+      maxHeight: relativeSpacing,
+      maxWidth: relativeSpacing,
+      minHeight: relativeSpacing,
+      minWidth: relativeSpacing,
+      textIndent: relativeSpacing,
+      width: relativeSpacing,
+      gap: betweenSpacing,
+      space: betweenSpacing,
+      colors: {
+        f1: f1Colors,
+      },
+      zIndex: {
+        "50": "1250",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+      containers: {
+        "8xl": "96rem",
+        "9xl": "120rem",
+        "10xl": "152rem",
+        "11xl": "192rem",
+        "12xl": "240rem",
+      },
+      screens: {
+        xs: "480px",
+      },
+      strokeWidth: {
+        xl: "1.7px",
+        lg: "1.4px",
+        md: "1.3px",
+        sm: "1.2px",
+        xs: "1px",
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/container-queries"),
+  ],
+  safelist: [
+    {
+      pattern: /^bg-f1-/,
+      variants: ["hover", "focus", "active"],
+    },
+    {
+      pattern: /^text-f1-/,
+      variants: ["hover", "focus", "active"],
+    },
+    {
+      pattern: /^border-f1-/,
+      variants: ["hover", "focus", "active"],
+    },
+  ],
+}