@rovula/ui 0.0.9 → 0.0.11

package/src/theme/main-preset.js

@@ -1,7 +1,16 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: "class",
   theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
     extend: {
       fontSize: {
         h1: [
@@ -152,8 +161,27 @@ module.exports = {
           },
         ],
       },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      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",
+      },
     },
   },
-  presets: [require("./presets/colors")],
+  presets: [require("./presets/colors"), require("tailwindcss-animate")],
   plugins: [require("./plugins/utilities/typography")],
 };

package/src/theme/presets/colors.js

@@ -5,6 +5,10 @@ module.exports = {
   theme: {
     extend: {
       colors: {
+        border: "hsl(var(--border))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
         // Palette colors
         themes: {
           50: "rgb(var(--themes-50) / <alpha-value>)",
@@ -160,6 +164,21 @@ module.exports = {
               "rgb(var(--input-label-background-color) / <alpha-value>)",
           },
         },
+        textcolor: {
+          dark: "rgb(var(--text-default-dark) / <alpha-value>)",
+          medium: "rgb(var(--text-default-medium) / <alpha-value>)",
+          light: "rgb(var(--text-default-light) / <alpha-value>)",
+          grey: {
+            dark: "rgb(var(--text-grey-dark) / <alpha-value>)",
+            medium: "rgb(var(--text-grey-medium) / <alpha-value>)",
+            light: "rgb(var(--text-grey-light) / <alpha-value>)",
+          },
+          white: "rgb(var(--text-white) / <alpha-value>)",
+        },
+        popup: {
+          background: "rgb(var(--popup-background) / <alpha-value>)",
+          overlay: "rgb(var(--popup-overlay) / var(--popup-overlay-alpha))",
+        },
       },
     },
   },

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}