@brainfish-ai/components 0.0.0-alpha.test

package/tailwind.config.js

@@ -0,0 +1,139 @@
+const { BrainfishColors, customColor } = require('./src/colors');
+const { neutral, zinc } = require('tailwindcss/colors')
+const plugin = require('tailwindcss/plugin');
+const { fontFamily } = require('tailwindcss/defaultTheme');
+const { blue, dark, green, orange, pink, primary, purple, red, yellow } = BrainfishColors;
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        ...fontFamily,
+        sans: ['var(--bfc-font-family)', 'system-ui', 'sans-serif'],
+      },
+      fontWeight: {
+        bold: '700',
+        normal: '500',
+      },
+      colors: {
+        transparent: 'transparent',
+        primary,
+        base: {
+          orange: orange[400],
+          yellow: yellow[400],
+          primary: primary[400],
+          green: green[400],
+          blue: blue[500],
+          purple: purple[500],
+          pink: pink[400],
+          red: red[500],
+          orangeLight: orange[100],
+          yellowLight: yellow[100],
+          primaryLight: primary[100],
+          greenLight: green[100],
+          blueLight: blue[100],
+          purpleLight: purple[100],
+          pinkLight: pink[100],
+          redLight: red[100],
+        },
+        dark,
+        orange,
+        yellow,
+        green,
+        blue,
+        purple,
+        pink,
+        red,
+
+        border: customColor('--bfc-border', dark[900]),
+        input: customColor('--bfc-input', dark[200]),
+        ring: customColor('--bfc-border', dark[900]),
+        background: customColor('--bfc-background', dark[200]),
+        foreground: customColor('--bfc-foreground', dark.DEFAULT),
+        feedback: {
+          positive: customColor('--bfc-feedback-positive', green[500]),
+          negative: customColor('--bfc-feedback-negative', red[500]),
+        },
+        link: customColor('--bfc-link', blue[500]),
+        surface: {
+          DEFAULT: customColor('--bfc-surface', neutral[800]),
+          border: customColor('--bfc-surface-border', zinc[800]),
+        },
+
+        secondary: {
+          DEFAULT: customColor('--bfc-secondary', 'transparent'),
+          foreground: customColor('--bfc-secondary-foreground', 'transparent'),
+        },
+        destructive: {
+          DEFAULT: customColor('--bfc-destructive', 'transparent'),
+          foreground: customColor('--bfc-destructive-foreground', 'transparent'),
+        },
+        muted: {
+          DEFAULT: customColor('--bfc-muted', 'transparent'),
+          foreground: customColor('--bfc-muted-foreground', 'transparent'),
+        },
+        accent: {
+          DEFAULT: customColor('--bfc-accent', 'transparent'),
+          foreground: customColor('--bfc-accent-foreground', 'transparent'),
+        },
+        popover: {
+          DEFAULT: customColor('--bfc-popover', 'transparent'),
+          foreground: customColor('--bfc-foreground', 'transparent'),
+        },
+        card: {
+          DEFAULT: customColor('--bfc-card', dark[200]),
+          foreground: customColor('--bfc-card-foreground', 'transparent'),
+        },
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--bfc-radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--bfc-radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+      maxWidth: {
+        threadWidth: '1400px',
+      },
+      spacing: {
+        headerHeight: '64px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+      },
+      gridTemplateColumns: {
+        12: 'repeat(12, minmax(0, 1fr))',
+      },
+    },
+  },
+  plugins: [
+    require("tailwindcss-animate"),
+    require("@tailwindcss/container-queries"),
+    plugin(function ({ addBase }) {
+      addBase({
+        'ul': { listStyleType: 'disc' },
+        'ol': { listStyleType: 'decimal' },
+      });
+    }),
+  ],
+}