@collaflow/design 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,261 @@
+export { collaflowPreset } from './tailwind/preset.cjs';
+import 'tailwindcss';
+
+declare const colors: {
+    light: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    dark: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+};
+type Colors = typeof colors;
+
+declare const typography: {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+};
+type Typography = typeof typography;
+
+declare const spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+};
+type Spacing = typeof spacing;
+
+declare const radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+};
+type Radius = typeof radius;
+
+declare const shadow: {
+    card: string;
+    popover: string;
+    modal: string;
+};
+type Shadow = typeof shadow;
+
+declare const lightTheme: {
+    readonly name: "light";
+    readonly colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    readonly typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: number;
+            normal: number;
+            relaxed: number;
+        };
+    };
+    readonly spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+    };
+    readonly radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    readonly shadow: {
+        card: string;
+        popover: string;
+        modal: string;
+    };
+};
+type LightTheme = typeof lightTheme;
+
+declare const darkTheme: {
+    readonly name: "dark";
+    readonly colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    readonly typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: number;
+            normal: number;
+            relaxed: number;
+        };
+    };
+    readonly spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+    };
+    readonly radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    readonly shadow: {
+        card: string;
+        popover: string;
+        modal: string;
+    };
+};
+type DarkTheme = typeof darkTheme;
+
+export { type Colors, type DarkTheme, type LightTheme, type Radius, type Shadow, type Spacing, type Typography, colors, darkTheme, lightTheme, radius, shadow, spacing, typography };

package/dist/index.d.ts

@@ -0,0 +1,261 @@
+export { collaflowPreset } from './tailwind/preset.js';
+import 'tailwindcss';
+
+declare const colors: {
+    light: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    dark: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+};
+type Colors = typeof colors;
+
+declare const typography: {
+    fontFamily: {
+        sans: string[];
+        mono: string[];
+    };
+    fontSize: {
+        xs: string;
+        sm: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+    };
+    fontWeight: {
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeight: {
+        tight: number;
+        normal: number;
+        relaxed: number;
+    };
+};
+type Typography = typeof typography;
+
+declare const spacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    6: string;
+    8: string;
+    12: string;
+    16: string;
+};
+type Spacing = typeof spacing;
+
+declare const radius: {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+};
+type Radius = typeof radius;
+
+declare const shadow: {
+    card: string;
+    popover: string;
+    modal: string;
+};
+type Shadow = typeof shadow;
+
+declare const lightTheme: {
+    readonly name: "light";
+    readonly colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    readonly typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: number;
+            normal: number;
+            relaxed: number;
+        };
+    };
+    readonly spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+    };
+    readonly radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    readonly shadow: {
+        card: string;
+        popover: string;
+        modal: string;
+    };
+};
+type LightTheme = typeof lightTheme;
+
+declare const darkTheme: {
+    readonly name: "dark";
+    readonly colors: {
+        background: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+        };
+        text: {
+            primary: string;
+            secondary: string;
+            disabled: string;
+        };
+        border: {
+            default: string;
+            strong: string;
+        };
+        accent: {
+            blue: string;
+            green: string;
+            orange: string;
+            red: string;
+        };
+    };
+    readonly typography: {
+        fontFamily: {
+            sans: string[];
+            mono: string[];
+        };
+        fontSize: {
+            xs: string;
+            sm: string;
+            base: string;
+            lg: string;
+            xl: string;
+            '2xl': string;
+            '3xl': string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: number;
+            normal: number;
+            relaxed: number;
+        };
+    };
+    readonly spacing: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        6: string;
+        8: string;
+        12: string;
+        16: string;
+    };
+    readonly radius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        full: string;
+    };
+    readonly shadow: {
+        card: string;
+        popover: string;
+        modal: string;
+    };
+};
+type DarkTheme = typeof darkTheme;
+
+export { type Colors, type DarkTheme, type LightTheme, type Radius, type Shadow, type Spacing, type Typography, colors, darkTheme, lightTheme, radius, shadow, spacing, typography };

package/dist/index.js

@@ -0,0 +1,157 @@
+// src/tokens/colors.ts
+var colors = {
+  light: {
+    background: {
+      primary: "#F7F7F5",
+      secondary: "#FFFFFF",
+      tertiary: "#F6F5F4"
+    },
+    text: {
+      primary: "#1F1F1F",
+      secondary: "#6B6B6B",
+      disabled: "#9B9B9B"
+    },
+    border: {
+      default: "#E5E5E5",
+      strong: "#D3D3D3"
+    },
+    accent: {
+      blue: "#2383E2",
+      green: "#0F7B6C",
+      orange: "#DFAB01",
+      red: "#E03E3E"
+    }
+  },
+  dark: {
+    background: {
+      primary: "#191919",
+      secondary: "#202020",
+      tertiary: "#2A2A2A"
+    },
+    text: {
+      primary: "#E8E8E8",
+      secondary: "#9B9B9B",
+      disabled: "#6B6B6B"
+    },
+    border: {
+      default: "#333333",
+      strong: "#444444"
+    },
+    accent: {
+      blue: "#4A9EFF",
+      green: "#2A9D99",
+      orange: "#E5B73B",
+      red: "#FF5C5C"
+    }
+  }
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontFamily: {
+    sans: ["Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+    mono: ["SFMono-Regular", "Menlo", "Consolas", "monospace"]
+  },
+  fontSize: {
+    xs: "12px",
+    sm: "14px",
+    base: "16px",
+    lg: "20px",
+    xl: "24px",
+    "2xl": "32px",
+    "3xl": "48px"
+  },
+  fontWeight: {
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  },
+  lineHeight: {
+    tight: 1.25,
+    normal: 1.5,
+    relaxed: 1.75
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  0: "0px",
+  1: "4px",
+  2: "8px",
+  3: "12px",
+  4: "16px",
+  6: "24px",
+  8: "32px",
+  12: "48px",
+  16: "64px"
+};
+
+// src/tokens/radius.ts
+var radius = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  full: "9999px"
+};
+
+// src/tokens/shadow.ts
+var shadow = {
+  card: "0 1px 3px rgba(0,0,0,0.1)",
+  popover: "0 4px 12px rgba(0,0,0,0.15)",
+  modal: "0 8px 24px rgba(0,0,0,0.2)"
+};
+
+// src/themes/light.ts
+var lightTheme = {
+  name: "light",
+  colors: colors.light,
+  typography,
+  spacing,
+  radius,
+  shadow
+};
+
+// src/themes/dark.ts
+var darkTheme = {
+  name: "dark",
+  colors: colors.dark,
+  typography,
+  spacing,
+  radius,
+  shadow
+};
+
+// src/tailwind/preset.ts
+var collaflowPreset = {
+  darkMode: ["class"],
+  theme: {
+    extend: {
+      colors: {
+        background: colors.light.background,
+        foreground: colors.light.text.primary,
+        muted: colors.light.text.secondary,
+        border: colors.light.border,
+        accent: colors.light.accent
+      },
+      fontFamily: typography.fontFamily,
+      fontSize: typography.fontSize,
+      fontWeight: typography.fontWeight,
+      spacing,
+      borderRadius: radius,
+      boxShadow: shadow
+    }
+  }
+};
+export {
+  collaflowPreset,
+  colors,
+  darkTheme,
+  lightTheme,
+  radius,
+  shadow,
+  spacing,
+  typography
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/colors.ts","../src/tokens/typography.ts","../src/tokens/spacing.ts","../src/tokens/radius.ts","../src/tokens/shadow.ts","../src/themes/light.ts","../src/themes/dark.ts","../src/tailwind/preset.ts"],"sourcesContent":["export const colors = {\n  light: {\n    background: {\n      primary: '#F7F7F5',\n      secondary: '#FFFFFF',\n      tertiary: '#F6F5F4',\n    },\n    text: {\n      primary: '#1F1F1F',\n      secondary: '#6B6B6B',\n      disabled: '#9B9B9B',\n    },\n    border: {\n      default: '#E5E5E5',\n      strong: '#D3D3D3',\n    },\n    accent: {\n      blue: '#2383E2',\n      green: '#0F7B6C',\n      orange: '#DFAB01',\n      red: '#E03E3E',\n    },\n  },\n  dark: {\n    background: {\n      primary: '#191919',\n      secondary: '#202020',\n      tertiary: '#2A2A2A',\n    },\n    text: {\n      primary: '#E8E8E8',\n      secondary: '#9B9B9B',\n      disabled: '#6B6B6B',\n    },\n    border: {\n      default: '#333333',\n      strong: '#444444',\n    },\n    accent: {\n      blue: '#4A9EFF',\n      green: '#2A9D99',\n      orange: '#E5B73B',\n      red: '#FF5C5C',\n    },\n  },\n};\n\nexport type Colors = typeof colors;\n","export const typography = {\n  fontFamily: {\n    sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'sans-serif'],\n    mono: ['SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],\n  },\n  fontSize: {\n    xs: '12px',\n    sm: '14px',\n    base: '16px',\n    lg: '20px',\n    xl: '24px',\n    '2xl': '32px',\n    '3xl': '48px',\n  },\n  fontWeight: {\n    normal: '400',\n    medium: '500',\n    semibold: '600',\n    bold: '700',\n  },\n  lineHeight: {\n    tight: 1.25,\n    normal: 1.5,\n    relaxed: 1.75,\n  },\n};\n\nexport type Typography = typeof typography;\n","export const spacing = {\n  0: '0px',\n  1: '4px',\n  2: '8px',\n  3: '12px',\n  4: '16px',\n  6: '24px',\n  8: '32px',\n  12: '48px',\n  16: '64px',\n};\n\nexport type Spacing = typeof spacing;\n","export const radius = {\n  none: '0px',\n  sm: '4px',\n  md: '8px',\n  lg: '12px',\n  full: '9999px',\n};\n\nexport type Radius = typeof radius;\n","export const shadow = {\n  card: '0 1px 3px rgba(0,0,0,0.1)',\n  popover: '0 4px 12px rgba(0,0,0,0.15)',\n  modal: '0 8px 24px rgba(0,0,0,0.2)',\n};\n\nexport type Shadow = typeof shadow;\n","import { colors, typography, spacing, radius, shadow } from '../tokens';\n\nexport const lightTheme = {\n  name: 'light',\n  colors: colors.light,\n  typography,\n  spacing,\n  radius,\n  shadow,\n} as const;\n\nexport type LightTheme = typeof lightTheme;\n","import { colors, typography, spacing, radius, shadow } from '../tokens';\n\nexport const darkTheme = {\n  name: 'dark',\n  colors: colors.dark,\n  typography,\n  spacing,\n  radius,\n  shadow,\n} as const;\n\nexport type DarkTheme = typeof darkTheme;\n","import { colors, typography, spacing, radius, shadow } from '../tokens';\nimport type { Config } from 'tailwindcss';\n\nexport const collaflowPreset: Partial<Config> = {\n  darkMode: ['class'],\n  theme: {\n    extend: {\n      colors: {\n        background: colors.light.background,\n        foreground: colors.light.text.primary,\n        muted: colors.light.text.secondary,\n        border: colors.light.border,\n        accent: colors.light.accent,\n      },\n      fontFamily: typography.fontFamily,\n      fontSize: typography.fontSize,\n      fontWeight: typography.fontWeight,\n      spacing,\n      borderRadius: radius,\n      boxShadow: shadow,\n    },\n  },\n};\n"],"mappings":";AAAO,IAAM,SAAS;AAAA,EACpB,OAAO;AAAA,IACL,YAAY;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,IACP;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,IACZ;AAAA,IACA,QAAQ;AAAA,MACN,SAAS;AAAA,MACT,QAAQ;AAAA,IACV;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,KAAK;AAAA,IACP;AAAA,EACF;AACF;;;AC7CO,IAAM,aAAa;AAAA,EACxB,YAAY;AAAA,IACV,MAAM,CAAC,SAAS,iBAAiB,sBAAsB,YAAY,YAAY;AAAA,IAC/E,MAAM,CAAC,kBAAkB,SAAS,YAAY,WAAW;AAAA,EAC3D;AAAA,EACA,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,MAAM;AAAA,EACR;AAAA,EACA,YAAY;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;;;ACzBO,IAAM,UAAU;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,IAAI;AACN;;;ACVO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AACR;;;ACNO,IAAM,SAAS;AAAA,EACpB,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AACT;;;ACFO,IAAM,aAAa;AAAA,EACxB,MAAM;AAAA,EACN,QAAQ,OAAO;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACPO,IAAM,YAAY;AAAA,EACvB,MAAM;AAAA,EACN,QAAQ,OAAO;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;;ACNO,IAAM,kBAAmC;AAAA,EAC9C,UAAU,CAAC,OAAO;AAAA,EAClB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,YAAY,OAAO,MAAM;AAAA,QACzB,YAAY,OAAO,MAAM,KAAK;AAAA,QAC9B,OAAO,OAAO,MAAM,KAAK;AAAA,QACzB,QAAQ,OAAO,MAAM;AAAA,QACrB,QAAQ,OAAO,MAAM;AAAA,MACvB;AAAA,MACA,YAAY,WAAW;AAAA,MACvB,UAAU,WAAW;AAAA,MACrB,YAAY,WAAW;AAAA,MACvB;AAAA,MACA,cAAc;AAAA,MACd,WAAW;AAAA,IACb;AAAA,EACF;AACF;","names":[]}