make styles exportable

Author: mykalmax

web/common/package.json

@@ -50,8 +50,11 @@
         "default": "./dist/sqlmesh-common.umd.js"
       }
     },
-    "./design": "./dist/styles/design/index.css",
-    "./design/*": "./dist/styles/design/*"
+    "./styles/*": "./dist/styles/*",
+    "./design/*": "./dist/styles/design/*",
+    "./configs/*": "./dist/configs/*",
+    "./tailwind.base.config.js": "./dist/configs/tailwind.base.config.js",
+    "./styles/tailwind.min.css": "./dist/styles/tailwind.min.css"
   },
   "files": [
     "/dist"
@@ -89,4 +92,4 @@
   },
   "type": "module",
   "types": "dist/index.d.ts"
-}
+}

web/common/src/components/Badge/Badge.tsx

@@ -21,6 +21,7 @@ export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
       <Comp
         className={cn(badgeVariants({ size, shape, className }))}
         ref={ref}
+        data-component="Badge"
         {...props}
       />
     )

web/common/tailwind.base.config.js

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    colors: {
+      transparent: 'transparent',
+      white: 'var(--color-white)',
+      black: 'var(--color-black)',
+      dark: 'var(--color-dark)',
+      light: 'var(--color-light)',
+      brand: 'var(--color-brand)',
+      prose: 'var(--color-prose)',
+      badge: {
+        background: 'var(--color-badge-background)',
+        foreground: 'var(--color-badge-foreground)',
+      },
+    },
+    extend: {
+      borderRadius: {
+        '2xs': 'var(--radius-xs)',
+        xs: 'calc(var(--radius-xs) + 1px)',
+        sm: 'calc(var(--radius-xs) + 2px)',
+        md: 'calc(var(--radius-s))',
+        lg: 'calc(var(--radius-s) + 1px)',
+        xl: 'calc(var(--radius-s) + 2px)',
+        '2xl': 'calc(var(--radius-m))',
+      },
+      fontSize: {
+        '2xs': 'var(--text-2xs)',
+        xs: 'var(--text-xs)',
+        s: 'var(--text-s)',
+        m: 'var(--text-m)',
+        l: 'var(--text-l)',
+        xl: 'var(--text-xl)',
+        '2xl': 'var(--text-2xl)',
+        '3xl': 'var(--text-3xl)',
+        '4xl': 'var(--text-4xl)',
+      },
+      fontFamily: {
+        mono: ['var(--font-mono)'],
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+}

web/common/tailwind.config.js

@@ -1,45 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', './src/**/*.stories.{js,ts,jsx,tsx}'],
-  theme: {
-    colors: {
-      transparent: 'transparent',
-      white: 'var(--color-white)',
-      black: 'var(--color-black)',
-      dark: 'var(--color-dark)',
-      light: 'var(--color-light)',
-      brand: 'var(--color-brand)',
-      prose: 'var(--color-prose)',
-      badge: {
-        background: 'var(--color-badge-background)',
-        foreground: 'var(--color-badge-foreground)',
-      },
-    },
-    extend: {
-      borderRadius: {
-        '2xs': 'var(--radius-xs)',
-        xs: 'calc(var(--radius-xs) + 1px)',
-        sm: 'calc(var(--radius-xs) + 2px)',
-        md: 'calc(var(--radius-s))',
-        lg: 'calc(var(--radius-s) + 1px)',
-        xl: 'calc(var(--radius-s) + 2px)',
-        '2xl': 'calc(var(--radius-m))',
-      },
-      fontSize: {
-        '2xs': 'var(--text-2xs)',
-        xs: 'var(--text-xs)',
-        s: 'var(--text-s)',
-        m: 'var(--text-m)',
-        l: 'var(--text-l)',
-        xl: 'var(--text-xl)',
-        '2xl': 'var(--text-2xl)',
-        '3xl': 'var(--text-3xl)',
-        '4xl': 'var(--text-4xl)',
-      },
-      fontFamily: {
-        mono: ['var(--font-mono)'],
-      },
-    },
-  },
-  plugins: [require('@tailwindcss/typography')],
+  presets: [require('./tailwind.base.config')],
 }

web/common/vite.config.js

@@ -17,6 +17,10 @@ export default defineConfig({
           src: 'src/styles/design',
           dest: 'styles',
         },
+        {
+          src: 'tailwind.base.config.js',
+          dest: 'configs',
+        },
       ],
     }),
   ],