@novie/ui 0.1.0

package/tailwind.config.ts

@@ -0,0 +1,149 @@
+import type { Config } from "tailwindcss"
+
+const config: Config = {
+  darkMode: "class",
+  content: ["./src/**/*.{ts,tsx}"],
+  safelist: [
+    { pattern: /^bg-(success|warning|error|info|foreground|destructive)/ },
+    { pattern: /^text-(success|warning|error|info)-foreground/ },
+    { pattern: /^border-(success|warning|error|info)/ },
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+          secondary: "hsl(var(--success-secondary))",
+          tertiary: "hsl(var(--success-tertiary))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+          secondary: "hsl(var(--warning-secondary))",
+          tertiary: "hsl(var(--warning-tertiary))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+          secondary: "hsl(var(--info-secondary))",
+          tertiary: "hsl(var(--info-tertiary))",
+        },
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          foreground: "hsl(var(--error-foreground))",
+          secondary: "hsl(var(--error-secondary))",
+          tertiary: "hsl(var(--error-tertiary))",
+        },
+        page: {
+          DEFAULT: "hsl(var(--page))",
+          secondary: "hsl(var(--page-secondary))",
+        },
+        "surface-inset": "hsl(var(--surface-inset))",
+      },
+      keyframes: {
+        "progress-indeterminate": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(200%)" },
+        },
+      },
+      animation: {
+        "progress-indeterminate":
+          "progress-indeterminate 1.5s ease-in-out infinite",
+      },
+      spacing: {
+        "13": "3.25rem",  // 52px
+        "15": "3.75rem",  // 60px
+        "17": "4.25rem",  // 68px
+        "18": "4.5rem",   // 72px
+        "19": "4.75rem",  // 76px
+      },
+      fontFamily: {
+        sans: [
+          "var(--font-sans, 'Google Sans Flex Variable')",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "sans-serif",
+        ],
+      },
+      fontSize: {
+        /* Headings */
+        display: ["80px", { lineHeight: "100%", fontWeight: "700" }],
+        oversized: ["48px", { lineHeight: "100%", fontWeight: "700" }],
+        h1: ["36px", { lineHeight: "44px", fontWeight: "700", letterSpacing: "-0.5px" }],
+        h2: ["32px", { lineHeight: "36px", fontWeight: "600", letterSpacing: "-0.3px" }],
+        h3: ["28px", { lineHeight: "32px", fontWeight: "600" }],
+        h4: ["22px", { lineHeight: "26px", fontWeight: "600" }],
+        /* Body */
+        "body-lg": ["18px", { lineHeight: "28px", fontWeight: "400" }],
+        "body-lg-light": ["18px", { lineHeight: "28px", fontWeight: "300" }],
+        body: ["16px", { lineHeight: "24px", fontWeight: "400" }],
+        "body-sm": ["14px", { lineHeight: "20px", fontWeight: "400" }],
+        caption: ["12px", { lineHeight: "16px", fontWeight: "400" }],
+        overline: ["12px", { lineHeight: "16px", fontWeight: "500" }],
+        /* UI — Navigation & Links */
+        "main-nav": ["14px", { lineHeight: "100%", fontWeight: "700" }],
+        "link-paragraph": ["14px", { lineHeight: "100%", fontWeight: "400" }],
+        "link-sm": ["12px", { lineHeight: "100%", fontWeight: "400" }],
+        /* UI — Buttons */
+        "button-lg": ["16px", { lineHeight: "100%", fontWeight: "500" }],
+        button: ["14px", { lineHeight: "100%", fontWeight: "500" }],
+        "button-sm": ["12px", { lineHeight: "100%", fontWeight: "500" }],
+        /* UI — Form & Data */
+        "select-item": ["13px", { lineHeight: "100%", fontWeight: "400" }],
+        "search-filter-item": ["13px", { lineHeight: "100%", fontWeight: "600" }],
+        "notification-message": ["13px", { lineHeight: "100%", fontWeight: "500" }],
+        "report-code": ["11px", { lineHeight: "100%", fontWeight: "700" }],
+        label: ["16px", { lineHeight: "24px", fontWeight: "500" }],
+        "label-sm": ["14px", { lineHeight: "100%", fontWeight: "500" }],
+        "input-text-bold": ["14px", { lineHeight: "20px", fontWeight: "600" }],
+        "input-text": ["14px", { lineHeight: "20px", fontWeight: "400" }],
+        "help-text": ["10px", { lineHeight: "16px", fontWeight: "400" }],
+        tab: ["14px", { lineHeight: "100%", fontWeight: "600" }],
+        "table-header": ["14px", { lineHeight: "20px", fontWeight: "500" }],
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+}
+
+export default config