@capsuletech/web-style 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 (49) hide show
  1. package/README.md +7 -0
  2. package/dist/assets/web-style.css +1 -0
  3. package/dist/constants.d.ts +2 -0
  4. package/dist/createStyle.d.ts +4 -0
  5. package/dist/editor/ThemeEditor.d.ts +17 -0
  6. package/dist/editor/apply.d.ts +12 -0
  7. package/dist/editor/export.d.ts +9 -0
  8. package/dist/editor/index.d.ts +7 -0
  9. package/dist/editor/oklch.d.ts +14 -0
  10. package/dist/editor/panel/ExportButton.d.ts +6 -0
  11. package/dist/editor/panel/FontControl.d.ts +12 -0
  12. package/dist/editor/panel/ModeToggle.d.ts +11 -0
  13. package/dist/editor/panel/OklchSliders.d.ts +10 -0
  14. package/dist/editor/panel/Panel.d.ts +11 -0
  15. package/dist/editor/panel/PresetPicker.d.ts +11 -0
  16. package/dist/editor/panel/RadiusControl.d.ts +6 -0
  17. package/dist/editor/panel/Section.d.ts +15 -0
  18. package/dist/editor/panel/Slider.d.ts +18 -0
  19. package/dist/editor/panel/SpacingControl.d.ts +6 -0
  20. package/dist/editor/presets.d.ts +10 -0
  21. package/dist/editor/preview/Preview.d.ts +9 -0
  22. package/dist/editor/preview/SampleAuth.d.ts +6 -0
  23. package/dist/editor/preview/SampleButtons.d.ts +5 -0
  24. package/dist/editor/preview/SampleMetrics.d.ts +1 -0
  25. package/dist/editor/preview/SamplePricing.d.ts +1 -0
  26. package/dist/editor/types.d.ts +31 -0
  27. package/dist/editor.mjs +549 -0
  28. package/dist/editor.mjs.map +1 -0
  29. package/dist/index.css +168 -0
  30. package/dist/index.d.ts +4 -0
  31. package/dist/index.mjs +114 -0
  32. package/dist/index.mjs.map +1 -0
  33. package/dist/package.json +32 -0
  34. package/dist/switcher/ThemeSwitcher.d.ts +19 -0
  35. package/dist/switcher/index.d.ts +1 -0
  36. package/dist/themes/black.css +176 -0
  37. package/dist/themes/damon.css +174 -0
  38. package/dist/themes/deepPurple.css +182 -0
  39. package/dist/themes/index.css +13 -0
  40. package/dist/themes/lightGreen.css +182 -0
  41. package/dist/themes/minimalNeutral.css +174 -0
  42. package/dist/themes/openprofile.css +178 -0
  43. package/dist/themes/pasteelement.css +174 -0
  44. package/dist/themes/shopifyRed.css +182 -0
  45. package/dist/themes/tiesen.css +184 -0
  46. package/dist/themes/vescrow.css +182 -0
  47. package/dist/themes/zen.css +182 -0
  48. package/dist/utils.d.ts +4 -0
  49. package/package.json +41 -0
package/dist/themes/lightGreen.css ADDED
@@ -0,0 +1,182 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="lightGreen"] {
6
+ --background: oklch(0.9892 0.0054 117.9205);
7
+ --foreground: oklch(0.2077 0.0398 265.7549);
8
+ --card: oklch(1.0 0 0);
9
+ --card-foreground: oklch(0.2077 0.0398 265.7549);
10
+ --popover: oklch(1.0 0 0);
11
+ --popover-foreground: oklch(0.2077 0.0398 265.7549);
12
+ --primary: oklch(0.8871 0.2122 128.5041);
13
+ --primary-foreground: oklch(0 0 0);
14
+ --secondary: oklch(0.3717 0.0392 257.287);
15
+ --secondary-foreground: oklch(0.9842 0.0034 247.8575);
16
+ --muted: oklch(0.9683 0.0069 247.8956);
17
+ --muted-foreground: oklch(0.5544 0.0407 257.4166);
18
+ --accent: oklch(0.9819 0.0181 155.8263);
19
+ --accent-foreground: oklch(0.4479 0.1083 151.3277);
20
+ --destructive: oklch(0.6368 0.2078 25.3313);
21
+ --destructive-foreground: oklch(1.0 0 0);
22
+ --border: oklch(0.9288 0.0126 255.5078);
23
+ --input: oklch(0.9288 0.0126 255.5078);
24
+ --ring: oklch(0.8871 0.2122 128.5041);
25
+ --chart-1: oklch(0.8871 0.2122 128.5041);
26
+ --chart-2: oklch(0.3717 0.0392 257.287);
27
+ --chart-3: oklch(0.7227 0.192 149.5793);
28
+ --chart-4: oklch(0.5544 0.0407 257.4166);
29
+ --chart-5: oklch(0.7107 0.0351 256.7878);
30
+ --sidebar: oklch(1.0 0 0);
31
+ --sidebar-foreground: oklch(0.2077 0.0398 265.7549);
32
+ --sidebar-primary: oklch(0.8871 0.2122 128.5041);
33
+ --sidebar-primary-foreground: oklch(0 0 0);
34
+ --sidebar-accent: oklch(0.9842 0.0034 247.8575);
35
+ --sidebar-accent-foreground: oklch(0.2077 0.0398 265.7549);
36
+ --sidebar-border: oklch(0.9683 0.0069 247.8956);
37
+ --sidebar-ring: oklch(0.8871 0.2122 128.5041);
38
+ --font-sans: Inter, system-ui, sans-serif;
39
+ --font-serif: Georgia, serif;
40
+ --font-mono: JetBrains Mono, monospace;
41
+ --radius: 1rem;
42
+ --shadow-x: 0px;
43
+ --shadow-y: 8px;
44
+ --shadow-blur: 20px;
45
+ --shadow-spread: 0px;
46
+ --shadow-opacity: 0.05;
47
+ --shadow-color: #000000;
48
+ --shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
49
+ --shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
50
+ --shadow-sm: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
51
+ --shadow: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
52
+ --shadow-md: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
53
+ --shadow-lg: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
54
+ --shadow-xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
55
+ --shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
56
+ --tracking-normal: -0.01em;
57
+ --spacing: 0.25rem;
58
+ }
59
+
60
+ [data-theme="lightGreen"].dark,
61
+ [data-theme="lightGreen"] .dark {
62
+ --background: oklch(0.1288 0.0406 264.6952);
63
+ --foreground: oklch(0.9842 0.0034 247.8575);
64
+ --card: oklch(0.2077 0.0398 265.7549);
65
+ --card-foreground: oklch(0.9842 0.0034 247.8575);
66
+ --popover: oklch(0.2077 0.0398 265.7549);
67
+ --popover-foreground: oklch(0.9842 0.0034 247.8575);
68
+ --primary: oklch(0.8871 0.2122 128.5041);
69
+ --primary-foreground: oklch(0 0 0);
70
+ --secondary: oklch(0.2795 0.0368 260.031);
71
+ --secondary-foreground: oklch(0.9842 0.0034 247.8575);
72
+ --muted: oklch(0.2795 0.0368 260.031);
73
+ --muted-foreground: oklch(0.7107 0.0351 256.7878);
74
+ --accent: oklch(0.3925 0.0896 152.5353);
75
+ --accent-foreground: oklch(0.8871 0.2122 128.5041);
76
+ --destructive: oklch(0.4437 0.1613 26.8994);
77
+ --destructive-foreground: oklch(1.0 0 0);
78
+ --border: oklch(0.2795 0.0368 260.031);
79
+ --input: oklch(0.2795 0.0368 260.031);
80
+ --ring: oklch(0.8871 0.2122 128.5041);
81
+ --chart-1: oklch(0.8871 0.2122 128.5041);
82
+ --chart-2: oklch(0.6231 0.188 259.8145);
83
+ --chart-3: oklch(0.7227 0.192 149.5793);
84
+ --chart-4: oklch(0.6268 0.2325 303.9004);
85
+ --chart-5: oklch(0.7686 0.1647 70.0804);
86
+ --sidebar: oklch(0.1288 0.0406 264.6952);
87
+ --sidebar-foreground: oklch(0.9842 0.0034 247.8575);
88
+ --sidebar-primary: oklch(0.8871 0.2122 128.5041);
89
+ --sidebar-primary-foreground: oklch(0 0 0);
90
+ --sidebar-accent: oklch(0.2795 0.0368 260.031);
91
+ --sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
92
+ --sidebar-border: oklch(0.2795 0.0368 260.031);
93
+ --sidebar-ring: oklch(0.8871 0.2122 128.5041);
94
+ --font-sans: Inter, system-ui, sans-serif;
95
+ --font-serif: Georgia, serif;
96
+ --font-mono: JetBrains Mono, monospace;
97
+ --radius: 1rem;
98
+ --shadow-x: 0px;
99
+ --shadow-y: 10px;
100
+ --shadow-blur: 25px;
101
+ --shadow-spread: 0px;
102
+ --shadow-opacity: 0.4;
103
+ --shadow-color: #000000;
104
+ --shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
105
+ --shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
106
+ --shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
107
+ --shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
108
+ --shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
109
+ --shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
110
+ --shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
111
+ --shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1.0);
112
+ }
113
+
114
+ @theme inline {
115
+ --color-background: var(--background);
116
+ --color-foreground: var(--foreground);
117
+ --color-card: var(--card);
118
+ --color-card-foreground: var(--card-foreground);
119
+ --color-popover: var(--popover);
120
+ --color-popover-foreground: var(--popover-foreground);
121
+ --color-primary: var(--primary);
122
+ --color-primary-foreground: var(--primary-foreground);
123
+ --color-secondary: var(--secondary);
124
+ --color-secondary-foreground: var(--secondary-foreground);
125
+ --color-muted: var(--muted);
126
+ --color-muted-foreground: var(--muted-foreground);
127
+ --color-accent: var(--accent);
128
+ --color-accent-foreground: var(--accent-foreground);
129
+ --color-destructive: var(--destructive);
130
+ --color-destructive-foreground: var(--destructive-foreground);
131
+ --color-border: var(--border);
132
+ --color-input: var(--input);
133
+ --color-ring: var(--ring);
134
+ --color-chart-1: var(--chart-1);
135
+ --color-chart-2: var(--chart-2);
136
+ --color-chart-3: var(--chart-3);
137
+ --color-chart-4: var(--chart-4);
138
+ --color-chart-5: var(--chart-5);
139
+ --color-sidebar: var(--sidebar);
140
+ --color-sidebar-foreground: var(--sidebar-foreground);
141
+ --color-sidebar-primary: var(--sidebar-primary);
142
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
143
+ --color-sidebar-accent: var(--sidebar-accent);
144
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
145
+ --color-sidebar-border: var(--sidebar-border);
146
+ --color-sidebar-ring: var(--sidebar-ring);
147
+
148
+ --font-sans: var(--font-sans);
149
+ --font-mono: var(--font-mono);
150
+ --font-serif: var(--font-serif);
151
+
152
+ --radius-sm: calc(var(--radius) - 4px);
153
+ --radius-md: calc(var(--radius) - 2px);
154
+ --radius-lg: var(--radius);
155
+ --radius-xl: calc(var(--radius) + 4px);
156
+
157
+ --shadow-2xs: var(--shadow-2xs);
158
+ --shadow-xs: var(--shadow-xs);
159
+ --shadow-sm: var(--shadow-sm);
160
+ --shadow: var(--shadow);
161
+ --shadow-md: var(--shadow-md);
162
+ --shadow-lg: var(--shadow-lg);
163
+ --shadow-xl: var(--shadow-xl);
164
+ --shadow-2xl: var(--shadow-2xl);
165
+
166
+ --tracking-tighter: calc(var(--tracking-normal) - 0.05em);
167
+ --tracking-tight: calc(var(--tracking-normal) - 0.025em);
168
+ --tracking-normal: var(--tracking-normal);
169
+ --tracking-wide: calc(var(--tracking-normal) + 0.025em);
170
+ --tracking-wider: calc(var(--tracking-normal) + 0.05em);
171
+ --tracking-widest: calc(var(--tracking-normal) + 0.1em);
172
+ }
173
+
174
+ @layer base {
175
+ * {
176
+ @apply border-border outline-ring/50;
177
+ }
178
+ body {
179
+ @apply bg-background text-foreground;
180
+ letter-spacing: var(--tracking-normal);
181
+ }
182
+ }
package/dist/themes/minimalNeutral.css ADDED
@@ -0,0 +1,174 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="minimalNeutral"] {
6
+ --background: oklch(1 0 0);
7
+ --foreground: oklch(0.145 0 0);
8
+ --card: oklch(0.995 0 0);
9
+ --card-foreground: oklch(0.145 0 0);
10
+ --popover: oklch(1 0 0);
11
+ --popover-foreground: oklch(0.145 0 0);
12
+ --primary: oklch(0.205 0 0);
13
+ --primary-foreground: oklch(0.985 0 0);
14
+ --secondary: oklch(0.87 0 0);
15
+ --secondary-foreground: oklch(0.145 0 0);
16
+ --muted: oklch(0.95 0 0);
17
+ --muted-foreground: oklch(0.556 0 0);
18
+ --accent: oklch(0.95 0 0);
19
+ --accent-foreground: oklch(0.205 0 0);
20
+ --destructive: oklch(0.577 0.245 27.325);
21
+ --destructive-foreground: oklch(1 0 0);
22
+ --border: oklch(0.95 0 0);
23
+ --input: oklch(0.97 0 0);
24
+ --ring: oklch(0.708 0 0);
25
+ --chart-1: oklch(0.81 0.1 252);
26
+ --chart-2: oklch(0.62 0.19 260);
27
+ --chart-3: oklch(0.55 0.22 263);
28
+ --chart-4: oklch(0.49 0.22 264);
29
+ --chart-5: oklch(0.42 0.18 266);
30
+ --sidebar: oklch(0.985 0 0);
31
+ --sidebar-foreground: oklch(0.145 0 0);
32
+ --sidebar-primary: oklch(0.205 0 0);
33
+ --sidebar-primary-foreground: oklch(0.985 0 0);
34
+ --sidebar-accent: oklch(0.97 0 0);
35
+ --sidebar-accent-foreground: oklch(0.205 0 0);
36
+ --sidebar-border: oklch(0.922 0 0);
37
+ --sidebar-ring: oklch(0.708 0 0);
38
+ --font-sans: DM Sans, ui-sans-serif, sans-serif, system-ui;
39
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
40
+ --font-mono: Geist Mono, ui-monospace, monospace;
41
+ --radius: 1rem;
42
+ --shadow-x: 0;
43
+ --shadow-y: 1px;
44
+ --shadow-blur: 3px;
45
+ --shadow-spread: 0px;
46
+ --shadow-opacity: 0.1;
47
+ --shadow-color: oklch(0 0 0);
48
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
49
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
50
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
51
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
52
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
53
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
54
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
55
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
56
+ --tracking-normal: 0em;
57
+ --spacing: 0.25rem;
58
+ }
59
+
60
+ [data-theme="minimalNeutral"].dark,
61
+ [data-theme="minimalNeutral"] .dark {
62
+ --background: oklch(0.205 0 0);
63
+ --foreground: oklch(0.985 0 0);
64
+ --card: oklch(0.165 0 0);
65
+ --card-foreground: oklch(0.985 0 0);
66
+ --popover: oklch(0.205 0 0);
67
+ --popover-foreground: oklch(0.985 0 0);
68
+ --primary: oklch(0.922 0 0);
69
+ --primary-foreground: oklch(0.205 0 0);
70
+ --secondary: oklch(0.269 0 0);
71
+ --secondary-foreground: oklch(0.985 0 0);
72
+ --muted: oklch(0.269 0 0);
73
+ --muted-foreground: oklch(0.708 0 0);
74
+ --accent: oklch(0.371 0 0);
75
+ --accent-foreground: oklch(0.985 0 0);
76
+ --destructive: oklch(0.704 0.191 22.216);
77
+ --destructive-foreground: oklch(0.985 0 0);
78
+ --border: oklch(0.269 0 0);
79
+ --input: oklch(0.269 0 0);
80
+ --ring: oklch(0.556 0 0);
81
+ --chart-1: oklch(0.81 0.1 252);
82
+ --chart-2: oklch(0.62 0.19 260);
83
+ --chart-3: oklch(0.55 0.22 263);
84
+ --chart-4: oklch(0.49 0.22 264);
85
+ --chart-5: oklch(0.42 0.18 266);
86
+ --sidebar: oklch(0.269 0 0);
87
+ --sidebar-foreground: oklch(0.985 0 0);
88
+ --sidebar-primary: oklch(0.488 0.243 264.376);
89
+ --sidebar-primary-foreground: oklch(0.985 0 0);
90
+ --sidebar-accent: oklch(0.269 0 0);
91
+ --sidebar-accent-foreground: oklch(0.985 0 0);
92
+ --sidebar-border: oklch(0.275 0 0);
93
+ --sidebar-ring: oklch(0.439 0 0);
94
+ --font-sans: DM Sans, ui-sans-serif, sans-serif, system-ui;
95
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
96
+ --font-mono: Geist Mono, ui-monospace, monospace;
97
+ --radius: 1rem;
98
+ --shadow-x: 0;
99
+ --shadow-y: 1px;
100
+ --shadow-blur: 3px;
101
+ --shadow-spread: 0px;
102
+ --shadow-opacity: 0.1;
103
+ --shadow-color: oklch(0 0 0);
104
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
105
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
106
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
107
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
108
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
109
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
110
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
111
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
112
+ }
113
+
114
+ @theme inline {
115
+ --color-background: var(--background);
116
+ --color-foreground: var(--foreground);
117
+ --color-card: var(--card);
118
+ --color-card-foreground: var(--card-foreground);
119
+ --color-popover: var(--popover);
120
+ --color-popover-foreground: var(--popover-foreground);
121
+ --color-primary: var(--primary);
122
+ --color-primary-foreground: var(--primary-foreground);
123
+ --color-secondary: var(--secondary);
124
+ --color-secondary-foreground: var(--secondary-foreground);
125
+ --color-muted: var(--muted);
126
+ --color-muted-foreground: var(--muted-foreground);
127
+ --color-accent: var(--accent);
128
+ --color-accent-foreground: var(--accent-foreground);
129
+ --color-destructive: var(--destructive);
130
+ --color-destructive-foreground: var(--destructive-foreground);
131
+ --color-border: var(--border);
132
+ --color-input: var(--input);
133
+ --color-ring: var(--ring);
134
+ --color-chart-1: var(--chart-1);
135
+ --color-chart-2: var(--chart-2);
136
+ --color-chart-3: var(--chart-3);
137
+ --color-chart-4: var(--chart-4);
138
+ --color-chart-5: var(--chart-5);
139
+ --color-sidebar: var(--sidebar);
140
+ --color-sidebar-foreground: var(--sidebar-foreground);
141
+ --color-sidebar-primary: var(--sidebar-primary);
142
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
143
+ --color-sidebar-accent: var(--sidebar-accent);
144
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
145
+ --color-sidebar-border: var(--sidebar-border);
146
+ --color-sidebar-ring: var(--sidebar-ring);
147
+
148
+ --font-sans: var(--font-sans);
149
+ --font-mono: var(--font-mono);
150
+ --font-serif: var(--font-serif);
151
+
152
+ --radius-sm: calc(var(--radius) - 4px);
153
+ --radius-md: calc(var(--radius) - 2px);
154
+ --radius-lg: var(--radius);
155
+ --radius-xl: calc(var(--radius) + 4px);
156
+
157
+ --shadow-2xs: var(--shadow-2xs);
158
+ --shadow-xs: var(--shadow-xs);
159
+ --shadow-sm: var(--shadow-sm);
160
+ --shadow: var(--shadow);
161
+ --shadow-md: var(--shadow-md);
162
+ --shadow-lg: var(--shadow-lg);
163
+ --shadow-xl: var(--shadow-xl);
164
+ --shadow-2xl: var(--shadow-2xl);
165
+ }
166
+
167
+ @layer base {
168
+ * {
169
+ @apply border-border outline-ring/50;
170
+ }
171
+ body {
172
+ @apply bg-background text-foreground;
173
+ }
174
+ }
package/dist/themes/openprofile.css ADDED
@@ -0,0 +1,178 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="openprofile"] {
6
+ --background: oklch(1 0 0);
7
+ --foreground: oklch(0.2178 0 0);
8
+ --card: oklch(0.9938 0.0013 106.4231);
9
+ --card-foreground: oklch(0.2393 0 0);
10
+ --popover: oklch(0.9938 0.0013 106.4231);
11
+ --popover-foreground: oklch(0.2393 0 0);
12
+ --primary: oklch(0.8223 0.1648 86.7192);
13
+ --primary-foreground: oklch(0.3407 0 0);
14
+ --secondary: oklch(0.97 0 0);
15
+ --secondary-foreground: oklch(0.2686 0 0);
16
+ --muted: oklch(0.97 0 0);
17
+ --muted-foreground: oklch(0.464 0 0);
18
+ --accent: oklch(0.97 0 0);
19
+ --accent-foreground: oklch(0.5348 0.1072 86.8308);
20
+ --destructive: oklch(0.577 0.245 27.325);
21
+ --destructive-foreground: oklch(1.0 0 0);
22
+ --border: oklch(0.922 0 0);
23
+ --input: oklch(0.8852 0.0126 91.5295);
24
+ --ring: oklch(0.8223 0.1648 86.7192);
25
+ --chart-1: oklch(0.81 0.1 252);
26
+ --chart-2: oklch(0.7204 0.1473 60.6715);
27
+ --chart-3: oklch(0.6323 0.1623 252.0967);
28
+ --chart-4: oklch(0.617 0.1909 24.6833);
29
+ --chart-5: oklch(0.6759 0.1634 150.2272);
30
+ --sidebar: oklch(0.985 0 0);
31
+ --sidebar-foreground: oklch(0.2178 0 0);
32
+ --sidebar-primary: oklch(0.8223 0.1648 86.7192);
33
+ --sidebar-primary-foreground: oklch(0 0 0);
34
+ --sidebar-accent: oklch(0.9229 0.0505 90.9613);
35
+ --sidebar-accent-foreground: oklch(0.5863 0.118 86.1524);
36
+ --sidebar-border: oklch(0.8723 0.0153 94.2191);
37
+ --sidebar-ring: oklch(0.8223 0.1648 86.7192);
38
+ --font-sans:
39
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
40
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
41
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
42
+ "Courier New", monospace;
43
+ --radius: 1.4rem;
44
+ --shadow-x: 0;
45
+ --shadow-y: 1px;
46
+ --shadow-blur: 3px;
47
+ --shadow-spread: 0px;
48
+ --shadow-opacity: 0.01;
49
+ --shadow-color: oklch(0 0 0);
50
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.01);
51
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.01);
52
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 1px 2px -1px hsl(0 0% 0% / 0.01);
53
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 1px 2px -1px hsl(0 0% 0% / 0.01);
54
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 2px 4px -1px hsl(0 0% 0% / 0.01);
55
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 4px 6px -1px hsl(0 0% 0% / 0.01);
56
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 8px 10px -1px hsl(0 0% 0% / 0.01);
57
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.03);
58
+ --tracking-normal: 0em;
59
+ --spacing: 0.25rem;
60
+ }
61
+
62
+ [data-theme="openprofile"].dark,
63
+ [data-theme="openprofile"] .dark {
64
+ --background: oklch(0.145 0 0);
65
+ --foreground: oklch(0.9401 0 0);
66
+ --card: oklch(0.1913 0 0);
67
+ --card-foreground: oklch(0.9401 0 0);
68
+ --popover: oklch(0.2178 0 0);
69
+ --popover-foreground: oklch(0.9401 0 0);
70
+ --primary: oklch(0.8223 0.1648 86.7192);
71
+ --primary-foreground: oklch(0 0 0);
72
+ --secondary: oklch(0.269 0 0);
73
+ --secondary-foreground: oklch(0.9401 0 0);
74
+ --muted: oklch(0.269 0 0);
75
+ --muted-foreground: oklch(0.683 0 0);
76
+ --accent: oklch(0.9508 0.0657 91.1875);
77
+ --accent-foreground: oklch(0.1913 0 0);
78
+ --destructive: oklch(0.6453 0.2404 27.3106);
79
+ --destructive-foreground: oklch(1.0 0 0);
80
+ --border: oklch(0.2478 0 0);
81
+ --input: oklch(0.3407 0 0);
82
+ --ring: oklch(0.8223 0.1648 86.7192);
83
+ --chart-1: oklch(0.8223 0.1648 86.7192);
84
+ --chart-2: oklch(0.7204 0.1473 60.6715);
85
+ --chart-3: oklch(0.6693 0.1427 250.8035);
86
+ --chart-4: oklch(0.6762 0.3056 327.4089);
87
+ --chart-5: oklch(0.6759 0.1634 150.2272);
88
+ --sidebar: oklch(0.205 0 0);
89
+ --sidebar-foreground: oklch(0.9401 0 0);
90
+ --sidebar-primary: oklch(0.8223 0.1648 86.7192);
91
+ --sidebar-primary-foreground: oklch(0 0 0);
92
+ --sidebar-accent: oklch(0.3019 0.0263 91.8088);
93
+ --sidebar-accent-foreground: oklch(0.8223 0.1648 86.7192);
94
+ --sidebar-border: oklch(0.3012 0 0);
95
+ --sidebar-ring: oklch(0.8223 0.1648 86.7192);
96
+ --font-sans:
97
+ ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
98
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
99
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
100
+ "Courier New", monospace;
101
+ --radius: 1.4rem;
102
+ --shadow-x: 0;
103
+ --shadow-y: 1px;
104
+ --shadow-blur: 3px;
105
+ --shadow-spread: 0px;
106
+ --shadow-opacity: 0.01;
107
+ --shadow-color: oklch(0 0 0);
108
+ --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.01);
109
+ --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.01);
110
+ --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 1px 2px -1px hsl(0 0% 0% / 0.01);
111
+ --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 1px 2px -1px hsl(0 0% 0% / 0.01);
112
+ --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 2px 4px -1px hsl(0 0% 0% / 0.01);
113
+ --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 4px 6px -1px hsl(0 0% 0% / 0.01);
114
+ --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.01), 0 8px 10px -1px hsl(0 0% 0% / 0.01);
115
+ --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.03);
116
+ }
117
+
118
+ @theme inline {
119
+ --color-background: var(--background);
120
+ --color-foreground: var(--foreground);
121
+ --color-card: var(--card);
122
+ --color-card-foreground: var(--card-foreground);
123
+ --color-popover: var(--popover);
124
+ --color-popover-foreground: var(--popover-foreground);
125
+ --color-primary: var(--primary);
126
+ --color-primary-foreground: var(--primary-foreground);
127
+ --color-secondary: var(--secondary);
128
+ --color-secondary-foreground: var(--secondary-foreground);
129
+ --color-muted: var(--muted);
130
+ --color-muted-foreground: var(--muted-foreground);
131
+ --color-accent: var(--accent);
132
+ --color-accent-foreground: var(--accent-foreground);
133
+ --color-destructive: var(--destructive);
134
+ --color-destructive-foreground: var(--destructive-foreground);
135
+ --color-border: var(--border);
136
+ --color-input: var(--input);
137
+ --color-ring: var(--ring);
138
+ --color-chart-1: var(--chart-1);
139
+ --color-chart-2: var(--chart-2);
140
+ --color-chart-3: var(--chart-3);
141
+ --color-chart-4: var(--chart-4);
142
+ --color-chart-5: var(--chart-5);
143
+ --color-sidebar: var(--sidebar);
144
+ --color-sidebar-foreground: var(--sidebar-foreground);
145
+ --color-sidebar-primary: var(--sidebar-primary);
146
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
147
+ --color-sidebar-accent: var(--sidebar-accent);
148
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
149
+ --color-sidebar-border: var(--sidebar-border);
150
+ --color-sidebar-ring: var(--sidebar-ring);
151
+
152
+ --font-sans: var(--font-sans);
153
+ --font-mono: var(--font-mono);
154
+ --font-serif: var(--font-serif);
155
+
156
+ --radius-sm: calc(var(--radius) - 4px);
157
+ --radius-md: calc(var(--radius) - 2px);
158
+ --radius-lg: var(--radius);
159
+ --radius-xl: calc(var(--radius) + 4px);
160
+
161
+ --shadow-2xs: var(--shadow-2xs);
162
+ --shadow-xs: var(--shadow-xs);
163
+ --shadow-sm: var(--shadow-sm);
164
+ --shadow: var(--shadow);
165
+ --shadow-md: var(--shadow-md);
166
+ --shadow-lg: var(--shadow-lg);
167
+ --shadow-xl: var(--shadow-xl);
168
+ --shadow-2xl: var(--shadow-2xl);
169
+ }
170
+
171
+ @layer base {
172
+ * {
173
+ @apply border-border outline-ring/50;
174
+ }
175
+ body {
176
+ @apply bg-background text-foreground;
177
+ }
178
+ }