@conversokit/themes 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/ThemeProvider.d.ts +11 -0
  2. package/dist/ThemeProvider.d.ts.map +1 -0
  3. package/dist/ThemeProvider.js +19 -0
  4. package/dist/css.d.ts +3 -0
  5. package/dist/css.d.ts.map +1 -0
  6. package/dist/css.js +32 -0
  7. package/dist/index.d.ts +43 -0
  8. package/dist/index.d.ts.map +1 -0
  9. package/dist/index.js +124 -0
  10. package/package.json +38 -0
package/dist/ThemeProvider.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import type { Theme } from './index.js';
3
+ export interface ThemeProviderProps {
4
+ theme: Theme;
5
+ children: React.ReactNode;
6
+ className?: string;
7
+ style?: React.CSSProperties;
8
+ }
9
+ export declare const ThemeProvider: React.FC<ThemeProviderProps>;
10
+ export declare function useTheme(): Theme;
11
+ //# sourceMappingURL=ThemeProvider.d.ts.map
package/dist/ThemeProvider.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../src/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAMxC,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqBtD,CAAC;AAEF,wBAAgB,QAAQ,IAAI,KAAK,CAEhC"}
package/dist/ThemeProvider.js ADDED
@@ -0,0 +1,19 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { createContext, useContext, useMemo } from 'react';
3
+ import { themeToCssVars } from './css.js';
4
+ import { lightTheme } from './index.js';
5
+ const ThemeContext = createContext(lightTheme);
6
+ export const ThemeProvider = ({ theme, children, className, style }) => {
7
+ const vars = useMemo(() => themeToCssVars(theme), [theme]);
8
+ const merged = {
9
+ ...vars,
10
+ backgroundColor: 'var(--ck-background)',
11
+ color: 'var(--ck-text)',
12
+ fontFamily: 'var(--ck-font-family)',
13
+ ...style
14
+ };
15
+ return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-conversokit-theme": theme.name, className: className, style: merged, children: children }) }));
16
+ };
17
+ export function useTheme() {
18
+ return useContext(ThemeContext);
19
+ }
package/dist/css.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import type { Theme } from './index.js';
2
+ export declare function themeToCssVars(theme: Theme): Record<string, string>;
3
+ //# sourceMappingURL=css.d.ts.map
package/dist/css.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAExC,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA+BnE"}
package/dist/css.js ADDED
@@ -0,0 +1,32 @@
1
+ export function themeToCssVars(theme) {
2
+ return {
3
+ '--ck-primary': theme.primary,
4
+ '--ck-primary-foreground': theme.primaryForeground,
5
+ '--ck-secondary': theme.secondary,
6
+ '--ck-background': theme.background,
7
+ '--ck-surface': theme.surface,
8
+ '--ck-foreground': theme.foreground,
9
+ '--ck-text': theme.text,
10
+ '--ck-muted': theme.muted,
11
+ '--ck-border': theme.border,
12
+ '--ck-accent': theme.accent,
13
+ '--ck-danger': theme.danger,
14
+ '--ck-success': theme.success,
15
+ '--ck-radius-sm': theme.radius.sm,
16
+ '--ck-radius-md': theme.radius.md,
17
+ '--ck-radius-lg': theme.radius.lg,
18
+ '--ck-font-family': theme.typography.fontFamily,
19
+ '--ck-font-size-sm': theme.typography.fontSizeSm,
20
+ '--ck-font-size-base': theme.typography.fontSizeBase,
21
+ '--ck-font-size-lg': theme.typography.fontSizeLg,
22
+ '--ck-font-size-xl': theme.typography.fontSizeXl,
23
+ '--ck-font-weight-regular': String(theme.typography.fontWeightRegular),
24
+ '--ck-font-weight-bold': String(theme.typography.fontWeightBold),
25
+ '--ck-spacing-1': theme.spacing(1),
26
+ '--ck-spacing-2': theme.spacing(2),
27
+ '--ck-spacing-3': theme.spacing(3),
28
+ '--ck-spacing-4': theme.spacing(4),
29
+ '--ck-spacing-6': theme.spacing(6),
30
+ '--ck-spacing-8': theme.spacing(8)
31
+ };
32
+ }
package/dist/index.d.ts ADDED
@@ -0,0 +1,43 @@
1
+ export interface ThemeRadius {
2
+ sm: string;
3
+ md: string;
4
+ lg: string;
5
+ }
6
+ export interface ThemeTypography {
7
+ fontFamily: string;
8
+ fontSizeSm: string;
9
+ fontSizeBase: string;
10
+ fontSizeLg: string;
11
+ fontSizeXl: string;
12
+ fontWeightRegular: number;
13
+ fontWeightBold: number;
14
+ }
15
+ export interface Theme {
16
+ name: string;
17
+ primary: string;
18
+ primaryForeground: string;
19
+ secondary: string;
20
+ background: string;
21
+ surface: string;
22
+ foreground: string;
23
+ text: string;
24
+ muted: string;
25
+ border: string;
26
+ accent: string;
27
+ danger: string;
28
+ success: string;
29
+ spacing: (factor: number) => string;
30
+ radius: ThemeRadius;
31
+ typography: ThemeTypography;
32
+ }
33
+ export declare const lightTheme: Theme;
34
+ export declare const darkTheme: Theme;
35
+ export declare const minimalTheme: Theme;
36
+ export declare const modernSaasTheme: Theme;
37
+ export declare const enterpriseTheme: Theme;
38
+ export declare const commerceTheme: Theme;
39
+ export declare const travelTheme: Theme;
40
+ export declare const themes: Record<string, Theme>;
41
+ export { themeToCssVars } from './css.js';
42
+ export { ThemeProvider, useTheme } from './ThemeProvider.js';
43
+ //# sourceMappingURL=index.d.ts.map
package/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,MAAM,EAAE,WAAW,CAAC;IACpB,UAAU,EAAE,eAAe,CAAC;CAC7B;AAqBD,eAAO,MAAM,UAAU,EAAE,KAiBxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAevB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAU7B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAkB7B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAW3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAQxC,CAAC;AAEF,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,124 @@
1
+ const baseSpacing = (factor) => `${4 * factor}px`;
2
+ const baseRadius = {
3
+ sm: '4px',
4
+ md: '8px',
5
+ lg: '12px'
6
+ };
7
+ const baseTypography = {
8
+ fontFamily: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
9
+ fontSizeSm: '0.875rem',
10
+ fontSizeBase: '1rem',
11
+ fontSizeLg: '1.125rem',
12
+ fontSizeXl: '1.25rem',
13
+ fontWeightRegular: 400,
14
+ fontWeightBold: 600
15
+ };
16
+ export const lightTheme = {
17
+ name: 'light',
18
+ primary: '#6366f1',
19
+ primaryForeground: '#ffffff',
20
+ secondary: '#4f46e5',
21
+ background: '#ffffff',
22
+ surface: '#ffffff',
23
+ foreground: '#111827',
24
+ text: '#111827',
25
+ muted: '#6b7280',
26
+ border: '#e5e7eb',
27
+ accent: '#10b981',
28
+ danger: '#dc2626',
29
+ success: '#10b981',
30
+ spacing: baseSpacing,
31
+ radius: baseRadius,
32
+ typography: baseTypography
33
+ };
34
+ export const darkTheme = {
35
+ ...lightTheme,
36
+ name: 'dark',
37
+ primary: '#818cf8',
38
+ primaryForeground: '#0b1020',
39
+ secondary: '#6366f1',
40
+ background: '#0b1020',
41
+ surface: '#111827',
42
+ foreground: '#f9fafb',
43
+ text: '#f9fafb',
44
+ muted: '#9ca3af',
45
+ border: '#1f2937',
46
+ accent: '#34d399',
47
+ danger: '#f87171',
48
+ success: '#34d399'
49
+ };
50
+ export const minimalTheme = {
51
+ ...lightTheme,
52
+ name: 'minimal',
53
+ primary: '#111827',
54
+ primaryForeground: '#ffffff',
55
+ secondary: '#374151',
56
+ surface: '#fafafa',
57
+ border: '#d1d5db',
58
+ accent: '#111827',
59
+ radius: { sm: '2px', md: '4px', lg: '6px' }
60
+ };
61
+ export const modernSaasTheme = {
62
+ ...lightTheme,
63
+ name: 'modern-saas',
64
+ primary: '#7c3aed',
65
+ primaryForeground: '#ffffff',
66
+ secondary: '#5b21b6',
67
+ background: '#fafafa',
68
+ surface: '#ffffff',
69
+ accent: '#06b6d4',
70
+ border: '#e4e4e7'
71
+ };
72
+ export const enterpriseTheme = {
73
+ ...lightTheme,
74
+ name: 'enterprise',
75
+ primary: '#0f172a',
76
+ primaryForeground: '#ffffff',
77
+ secondary: '#1e293b',
78
+ background: '#f8fafc',
79
+ surface: '#ffffff',
80
+ text: '#0f172a',
81
+ muted: '#475569',
82
+ border: '#cbd5e1',
83
+ accent: '#0ea5e9',
84
+ radius: { sm: '2px', md: '4px', lg: '6px' },
85
+ typography: {
86
+ ...baseTypography,
87
+ fontFamily: '"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif'
88
+ }
89
+ };
90
+ export const commerceTheme = {
91
+ ...lightTheme,
92
+ name: 'commerce',
93
+ primary: '#ea580c',
94
+ primaryForeground: '#ffffff',
95
+ secondary: '#c2410c',
96
+ background: '#fffbf5',
97
+ surface: '#ffffff',
98
+ accent: '#16a34a',
99
+ border: '#fed7aa',
100
+ radius: { sm: '6px', md: '10px', lg: '16px' }
101
+ };
102
+ export const travelTheme = {
103
+ ...lightTheme,
104
+ name: 'travel',
105
+ primary: '#0ea5e9',
106
+ primaryForeground: '#ffffff',
107
+ secondary: '#0369a1',
108
+ background: '#f0f9ff',
109
+ surface: '#ffffff',
110
+ accent: '#f59e0b',
111
+ border: '#bae6fd',
112
+ radius: { sm: '8px', md: '12px', lg: '20px' }
113
+ };
114
+ export const themes = {
115
+ light: lightTheme,
116
+ dark: darkTheme,
117
+ minimal: minimalTheme,
118
+ 'modern-saas': modernSaasTheme,
119
+ enterprise: enterpriseTheme,
120
+ commerce: commerceTheme,
121
+ travel: travelTheme
122
+ };
123
+ export { themeToCssVars } from './css.js';
124
+ export { ThemeProvider, useTheme } from './ThemeProvider.js';
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@conversokit/themes",
3
+ "version": "0.1.0",
4
+ "description": "Themes for ConversoKit (light, dark, minimal, modern-saas, enterprise, commerce, travel) — `<ThemeProvider>` injecting `--ck-*` CSS variables.",
5
+ "license": "Apache-2.0",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/Xyborg/ConversoKit.git",
9
+ "directory": "packages/themes"
10
+ },
11
+ "homepage": "https://github.com/Xyborg/ConversoKit#readme",
12
+ "bugs": "https://github.com/Xyborg/ConversoKit/issues",
13
+ "type": "module",
14
+ "publishConfig": {
15
+ "access": "public"
16
+ },
17
+ "main": "dist/index.js",
18
+ "types": "dist/index.d.ts",
19
+ "files": [
20
+ "dist"
21
+ ],
22
+ "scripts": {
23
+ "build": "tsc --project tsconfig.json",
24
+ "dev": "tsc --project tsconfig.json --watch",
25
+ "typecheck": "tsc --noEmit",
26
+ "lint": "eslint src",
27
+ "test": "vitest run"
28
+ },
29
+ "peerDependencies": {
30
+ "react": "^18.0.0"
31
+ },
32
+ "devDependencies": {
33
+ "@types/react": "^18.0.28",
34
+ "react": "^18.2.0",
35
+ "typescript": "^5.2.0",
36
+ "vitest": "^1.6.0"
37
+ }
38
+ }