@brainfish-ai/components 0.0.47 → 0.0.48-alpha.1

package/tailwind.config.js

@@ -1,6 +1,10 @@
+const { BrainfishColors } = require('./src/colors');
+const { neutral, zinc } = require('tailwindcss/colors')
+const { blue, dark, green, orange, pink, primary, purple, red, yellow } = BrainfishColors;
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  darkMode: ["class", '[data-mode="dark"]'],
+  darkMode: ["class"],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
@@ -15,52 +19,86 @@ module.exports = {
     },
     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))",
+        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: `var(--bfc-border, ${dark[900]})`,
+        input: `var(--bfc-input, ${dark[200]})`,
+        ring: `var(--bfc-border, ${dark[900]})`,
+        background: `var(--bfc-background, ${dark[200]})`,
+        foreground: `var(--bfc-foreground, ${dark.DEFAULT})`,
+        feedback: {
+          positive: `var(--bfc-feedback-positive, ${green[500]})`,
+          negative: `var(--bfc-feedback-negative, ${red[500]})`,
+        },
+        link: `var(--bfc-link, ${blue[500]})`,
+        surface: {
+          DEFAULT: `var(--bfc-surface, ${neutral[800]})`,
+          border: `var(--bfc-surface-border, ${zinc[800]})`,
+        },
+
         secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          DEFAULT: `var(--bfc-secondary)`,
+          foreground: "var(--bfc-secondary-foreground)",
         },
         destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          DEFAULT: "var(--bfc-destructive)",
+          foreground: "var(--bfc-destructive-foreground)",
         },
         muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          DEFAULT: "var(--bfc-muted)",
+          foreground: "var(--bfc-muted-foreground)",
         },
         accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          DEFAULT: "var(--bfc-accent)",
+          foreground: "var(--bfc-accent-foreground)",
         },
         popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          DEFAULT: "var(--bfc-popover)",
+          foreground: "var(--bfc-foreground)",
         },
         card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+          DEFAULT: `var(--bfc-card, ${dark[200]})`,
+          foreground: "var(--bfc-card-foreground)",
         },
       },
       borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        lg: "var(--bfc-radius)",
+        md: "calc(var(--bfc-radius) - 2px)",
+        sm: "calc(var(--bfc-radius) - 4px)",
       },
       keyframes: {
         "accordion-down": {
           from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--bfc-radix-accordion-content-height)" },
         },
         "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
+          from: { height: "var(--bfc-radix-accordion-content-height)" },
           to: { height: 0 },
         },
       },