[filigran-ui] define style with FiligranUIStyle

packages/filigran-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "filigran-ui",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Filigran UI library",
   "author": "Filigran",
   "main": "./dist/index.js",
@@ -42,18 +42,22 @@
   },
   "exports": {
     ".": {
+      "require": "./dist/index.js",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
     "./plugin": {
+      "require": "./dist/plugin.js",
       "import": "./dist/plugin.js",
       "types": "./dist/plugin.d.ts"
     },
     "./clients": {
+      "require": "./dist/clients/index.js",
       "import": "./dist/clients/index.js",
       "types": "./dist/clients/index.d.ts"
     },
     "./servers": {
+      "require": "./dist/servers/index.js",
       "import": "./dist/servers/index.js",
       "types": "./dist/servers/index.d.ts"
     }

packages/filigran-ui/src/globals.css

@@ -1,76 +1,65 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
+    --foreground: 247 65% 3.44%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
+    --radius: 0.3rem;
   }
- 
+
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
+    --background: 247 65% 3.44%;
+    --foreground: 210 20% 98%;
+    --tw-prose-body: 210 20% 98%;
+    --muted: 247 50% 12.9%;
+    --muted-foreground: 247 10% 54.3%;
+    --popover: 247 45% 5.59%;
+    --popover-foreground: 247 10% 97.15%;
+    --card: 247 45% 5.59%;
+    --card-foreground: 247 10% 97.15%;
+    --border: 247 50% 12.9%;
+    --input: 247 50% 12.9%;
+    --primary: 247 100% 43%;
+    --primary-foreground: 247 10% 97.15%;
+    --secondary: 247 50% 12.9%;
+    --secondary-foreground: 247 10% 97.15%;
+    --accent: 247 50% 12.9%;
+    --accent-foreground: 247 10% 97.15%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --destructive-foreground: 247 10% 97.15%;
+    --ring: 247 100% 43%;
+    --radius: 0.3rem;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
+    font-family: var(--font-ibm-plex-sans), system-ui, sans-serif;
+  }
+  h1,h2,h3,h4,h5,h6 {
+    font-family: var(--font-geologica), system-ui, sans-serif;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

projects/filigran-website/tailwind.config.ts

@@ -1,3 +1,5 @@
+const FiligranUIPlugin =  require('filigran-ui/plugin')
+
 const config = {
   darkMode: ['class'],
   content: [
@@ -8,72 +10,7 @@ const config = {
     '../../packages/filigran-ui/src/components/**/*.{ts,tsx}'
   ],
   prefix: '',
-  theme: {
-    container: {
-      center: true,
-      padding: '2rem',
-      screens: {
-        '2xl': '1400px',
-      },
-    },
-    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))',
-        },
-      },
-      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',
-      },
-    },
-  },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography'), FiligranUIPlugin()],
 }
 
 export default config