Skip to content

Commit ff2fd70

Browse files
damlayildizdamlayildiz
committed
fix: add prefix to css variables
1 parent 2ed3725 commit ff2fd70

File tree

2 files changed

+99
-99
lines changed

2 files changed

+99
-99
lines changed

‎examples/vanilla-js/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
chatbot.setAttribute("api-key", window.ChatbotConfig.apiKey);
3030
chatbot.setAttribute(
3131
"style",
32-
"--primary: #f5426c; --primary-foreground: #ffffff"
32+
"--docs-chatbot-primary: #f5426c; --docs-chatbot-primary-foreground: #ffffff"
3333
);
3434
</script>
3535
</body>

‎src/index.css‎

Lines changed: 98 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -4,77 +4,77 @@
44
@custom-variant dark (&:is(.dark *));
55

66
@theme inline {
7-
--radius-sm: calc(var(--radius) - 4px);
8-
--radius-md: calc(var(--radius) - 2px);
9-
--radius-lg: var(--radius);
10-
--radius-xl: calc(var(--radius) + 4px);
11-
--color-background: var(--background);
12-
--color-foreground: var(--foreground);
13-
--color-card: var(--card);
14-
--color-card-foreground: var(--card-foreground);
15-
--color-popover: var(--popover);
16-
--color-popover-foreground: var(--popover-foreground);
17-
--color-primary: var(--primary);
18-
--color-primary-foreground: var(--primary-foreground);
19-
--color-secondary: var(--secondary);
20-
--color-secondary-foreground: var(--secondary-foreground);
21-
--color-muted: var(--muted);
22-
--color-muted-foreground: var(--muted-foreground);
23-
--color-accent: var(--accent);
24-
--color-accent-foreground: var(--accent-foreground);
25-
--color-destructive: var(--destructive);
26-
--color-border: var(--border);
27-
--color-input: var(--input);
28-
--color-ring: var(--ring);
29-
--color-chart-1: var(--chart-1);
30-
--color-chart-2: var(--chart-2);
31-
--color-chart-3: var(--chart-3);
32-
--color-chart-4: var(--chart-4);
33-
--color-chart-5: var(--chart-5);
34-
--color-sidebar: var(--sidebar);
35-
--color-sidebar-foreground: var(--sidebar-foreground);
36-
--color-sidebar-primary: var(--sidebar-primary);
37-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
38-
--color-sidebar-accent: var(--sidebar-accent);
39-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
40-
--color-sidebar-border: var(--sidebar-border);
41-
--color-sidebar-ring: var(--sidebar-ring);
7+
--radius-sm: calc(var(--docs-chatbot-radius) - 4px);
8+
--radius-md: calc(var(--docs-chatbot-radius) - 2px);
9+
--radius-lg: var(--docs-chatbot-radius);
10+
--radius-xl: calc(var(--docs-chatbot-radius) + 4px);
11+
--color-background: var(--docs-chatbot-background);
12+
--color-foreground: var(--docs-chatbot-foreground);
13+
--color-card: var(--docs-chatbot-card);
14+
--color-card-foreground: var(--docs-chatbot-card-foreground);
15+
--color-popover: var(--docs-chatbot-popover);
16+
--color-popover-foreground: var(--docs-chatbot-popover-foreground);
17+
--color-primary: var(--docs-chatbot-primary);
18+
--color-primary-foreground: var(--docs-chatbot-primary-foreground);
19+
--color-secondary: var(--docs-chatbot-secondary);
20+
--color-secondary-foreground: var(--docs-chatbot-secondary-foreground);
21+
--color-muted: var(--docs-chatbot-muted);
22+
--color-muted-foreground: var(--docs-chatbot-muted-foreground);
23+
--color-accent: var(--docs-chatbot-accent);
24+
--color-accent-foreground: var(--docs-chatbot-accent-foreground);
25+
--color-destructive: var(--docs-chatbot-destructive);
26+
--color-border: var(--docs-chatbot-border);
27+
--color-input: var(--docs-chatbot-input);
28+
--color-ring: var(--docs-chatbot-ring);
29+
--color-chart-1: var(--docs-chatbot-chart-1);
30+
--color-chart-2: var(--docs-chatbot-chart-2);
31+
--color-chart-3: var(--docs-chatbot-chart-3);
32+
--color-chart-4: var(--docs-chatbot-chart-4);
33+
--color-chart-5: var(--docs-chatbot-chart-5);
34+
--color-sidebar: var(--docs-chatbot-sidebar);
35+
--color-sidebar-foreground: var(--docs-chatbot-sidebar-foreground);
36+
--color-sidebar-primary: var(--docs-chatbot-sidebar-primary);
37+
--color-sidebar-primary-foreground: var(--docs-chatbot-sidebar-primary-foreground);
38+
--color-sidebar-accent: var(--docs-chatbot-sidebar-accent);
39+
--color-sidebar-accent-foreground: var(--docs-chatbot-sidebar-accent-foreground);
40+
--color-sidebar-border: var(--docs-chatbot-sidebar-border);
41+
--color-sidebar-ring: var(--docs-chatbot-sidebar-ring);
4242
}
4343

4444
:host,
4545
:root {
46-
--radius: 0.625rem;
47-
--background: oklch(1 0 0);
48-
--foreground: oklch(0.145 0 0);
49-
--card: oklch(1 0 0);
50-
--card-foreground: oklch(0.145 0 0);
51-
--popover: oklch(1 0 0);
52-
--popover-foreground: oklch(0.145 0 0);
53-
--primary: oklch(0.205 0 0);
54-
--primary-foreground: oklch(0.985 0 0);
55-
--secondary: oklch(0.97 0 0);
56-
--secondary-foreground: oklch(0.205 0 0);
57-
--muted: oklch(0.97 0 0);
58-
--muted-foreground: oklch(0.556 0 0);
59-
--accent: oklch(0.97 0 0);
60-
--accent-foreground: oklch(0.205 0 0);
61-
--destructive: oklch(0.577 0.245 27.325);
62-
--border: oklch(0.922 0 0);
63-
--input: oklch(0.922 0 0);
64-
--ring: oklch(0.708 0 0);
65-
--chart-1: oklch(0.646 0.222 41.116);
66-
--chart-2: oklch(0.6 0.118 184.704);
67-
--chart-3: oklch(0.398 0.07 227.392);
68-
--chart-4: oklch(0.828 0.189 84.429);
69-
--chart-5: oklch(0.769 0.188 70.08);
70-
--sidebar: oklch(0.985 0 0);
71-
--sidebar-foreground: oklch(0.145 0 0);
72-
--sidebar-primary: oklch(0.205 0 0);
73-
--sidebar-primary-foreground: oklch(0.985 0 0);
74-
--sidebar-accent: oklch(0.97 0 0);
75-
--sidebar-accent-foreground: oklch(0.205 0 0);
76-
--sidebar-border: oklch(0.922 0 0);
77-
--sidebar-ring: oklch(0.708 0 0);
46+
--docs-chatbot-radius: 0.625rem;
47+
--docs-chatbot-background: oklch(1 0 0);
48+
--docs-chatbot-foreground: oklch(0.145 0 0);
49+
--docs-chatbot-card: oklch(1 0 0);
50+
--docs-chatbot-card-foreground: oklch(0.145 0 0);
51+
--docs-chatbot-popover: oklch(1 0 0);
52+
--docs-chatbot-popover-foreground: oklch(0.145 0 0);
53+
--docs-chatbot-primary: oklch(0.205 0 0);
54+
--docs-chatbot-primary-foreground: oklch(0.985 0 0);
55+
--docs-chatbot-secondary: oklch(0.97 0 0);
56+
--docs-chatbot-secondary-foreground: oklch(0.205 0 0);
57+
--docs-chatbot-muted: oklch(0.97 0 0);
58+
--docs-chatbot-muted-foreground: oklch(0.556 0 0);
59+
--docs-chatbot-accent: oklch(0.97 0 0);
60+
--docs-chatbot-accent-foreground: oklch(0.205 0 0);
61+
--docs-chatbot-destructive: oklch(0.577 0.245 27.325);
62+
--docs-chatbot-border: oklch(0.922 0 0);
63+
--docs-chatbot-input: oklch(0.922 0 0);
64+
--docs-chatbot-ring: oklch(0.708 0 0);
65+
--docs-chatbot-chart-1: oklch(0.646 0.222 41.116);
66+
--docs-chatbot-chart-2: oklch(0.6 0.118 184.704);
67+
--docs-chatbot-chart-3: oklch(0.398 0.07 227.392);
68+
--docs-chatbot-chart-4: oklch(0.828 0.189 84.429);
69+
--docs-chatbot-chart-5: oklch(0.769 0.188 70.08);
70+
--docs-chatbot-sidebar: oklch(0.985 0 0);
71+
--docs-chatbot-sidebar-foreground: oklch(0.145 0 0);
72+
--docs-chatbot-sidebar-primary: oklch(0.205 0 0);
73+
--docs-chatbot-sidebar-primary-foreground: oklch(0.985 0 0);
74+
--docs-chatbot-sidebar-accent: oklch(0.97 0 0);
75+
--docs-chatbot-sidebar-accent-foreground: oklch(0.205 0 0);
76+
--docs-chatbot-sidebar-border: oklch(0.922 0 0);
77+
--docs-chatbot-sidebar-ring: oklch(0.708 0 0);
7878
}
7979

8080
:host {
@@ -127,37 +127,37 @@
127127
}
128128

129129
.dark {
130-
--background: oklch(0.145 0 0);
131-
--foreground: oklch(0.985 0 0);
132-
--card: oklch(0.205 0 0);
133-
--card-foreground: oklch(0.985 0 0);
134-
--popover: oklch(0.205 0 0);
135-
--popover-foreground: oklch(0.985 0 0);
136-
--primary: oklch(0.922 0 0);
137-
--primary-foreground: oklch(0.205 0 0);
138-
--secondary: oklch(0.269 0 0);
139-
--secondary-foreground: oklch(0.985 0 0);
140-
--muted: oklch(0.269 0 0);
141-
--muted-foreground: oklch(0.708 0 0);
142-
--accent: oklch(0.269 0 0);
143-
--accent-foreground: oklch(0.985 0 0);
144-
--destructive: oklch(0.704 0.191 22.216);
145-
--border: oklch(1 0 0 / 10%);
146-
--input: oklch(1 0 0 / 15%);
147-
--ring: oklch(0.556 0 0);
148-
--chart-1: oklch(0.488 0.243 264.376);
149-
--chart-2: oklch(0.696 0.17 162.48);
150-
--chart-3: oklch(0.769 0.188 70.08);
151-
--chart-4: oklch(0.627 0.265 303.9);
152-
--chart-5: oklch(0.645 0.246 16.439);
153-
--sidebar: oklch(0.205 0 0);
154-
--sidebar-foreground: oklch(0.985 0 0);
155-
--sidebar-primary: oklch(0.488 0.243 264.376);
156-
--sidebar-primary-foreground: oklch(0.985 0 0);
157-
--sidebar-accent: oklch(0.269 0 0);
158-
--sidebar-accent-foreground: oklch(0.985 0 0);
159-
--sidebar-border: oklch(1 0 0 / 10%);
160-
--sidebar-ring: oklch(0.556 0 0);
130+
--docs-chatbot-background: oklch(0.145 0 0);
131+
--docs-chatbot-foreground: oklch(0.985 0 0);
132+
--docs-chatbot-card: oklch(0.205 0 0);
133+
--docs-chatbot-card-foreground: oklch(0.985 0 0);
134+
--docs-chatbot-popover: oklch(0.205 0 0);
135+
--docs-chatbot-popover-foreground: oklch(0.985 0 0);
136+
--docs-chatbot-primary: oklch(0.922 0 0);
137+
--docs-chatbot-primary-foreground: oklch(0.205 0 0);
138+
--docs-chatbot-secondary: oklch(0.269 0 0);
139+
--docs-chatbot-secondary-foreground: oklch(0.985 0 0);
140+
--docs-chatbot-muted: oklch(0.269 0 0);
141+
--docs-chatbot-muted-foreground: oklch(0.708 0 0);
142+
--docs-chatbot-accent: oklch(0.269 0 0);
143+
--docs-chatbot-accent-foreground: oklch(0.985 0 0);
144+
--docs-chatbot-destructive: oklch(0.704 0.191 22.216);
145+
--docs-chatbot-border: oklch(1 0 0 / 10%);
146+
--docs-chatbot-input: oklch(1 0 0 / 15%);
147+
--docs-chatbot-ring: oklch(0.556 0 0);
148+
--docs-chatbot-chart-1: oklch(0.488 0.243 264.376);
149+
--docs-chatbot-chart-2: oklch(0.696 0.17 162.48);
150+
--docs-chatbot-chart-3: oklch(0.769 0.188 70.08);
151+
--docs-chatbot-chart-4: oklch(0.627 0.265 303.9);
152+
--docs-chatbot-chart-5: oklch(0.645 0.246 16.439);
153+
--docs-chatbot-sidebar: oklch(0.205 0 0);
154+
--docs-chatbot-sidebar-foreground: oklch(0.985 0 0);
155+
--docs-chatbot-sidebar-primary: oklch(0.488 0.243 264.376);
156+
--docs-chatbot-sidebar-primary-foreground: oklch(0.985 0 0);
157+
--docs-chatbot-sidebar-accent: oklch(0.269 0 0);
158+
--docs-chatbot-sidebar-accent-foreground: oklch(0.985 0 0);
159+
--docs-chatbot-sidebar-border: oklch(1 0 0 / 10%);
160+
--docs-chatbot-sidebar-ring: oklch(0.556 0 0);
161161
}
162162

163163
@layer base {

0 commit comments

Comments
 (0)