@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
@@ -0,0 +1,176 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="black"] {
6
+ --background: oklch(1.0 0 0);
7
+ --foreground: oklch(0.2138 0.0019 286.2347);
8
+ --card: oklch(1.0 0 0);
9
+ --card-foreground: oklch(0.2138 0.0019 286.2347);
10
+ --popover: oklch(1.0 0 0);
11
+ --popover-foreground: oklch(0.2138 0.0019 286.2347);
12
+ --primary: oklch(0.2138 0.0019 286.2347);
13
+ --primary-foreground: oklch(0.9851 0 0);
14
+ --secondary: oklch(0.9702 0 0);
15
+ --secondary-foreground: oklch(0.2138 0.0019 286.2347);
16
+ --muted: oklch(0.9702 0 0);
17
+ --muted-foreground: oklch(0.5555 0 0);
18
+ --accent: oklch(0.9702 0 0);
19
+ --accent-foreground: oklch(0.2138 0.0019 286.2347);
20
+ --destructive: oklch(0.5406 0.2164 30.0696);
21
+ --destructive-foreground: oklch(1.0 0 0);
22
+ --border: oklch(0.9219 0 0);
23
+ --input: oklch(0.9219 0 0);
24
+ --ring: oklch(0.709 0 0);
25
+ --chart-1: oklch(0.762 0.121 268.8807);
26
+ --chart-2: oklch(0.5429 0.2366 268.4747);
27
+ --chart-3: oklch(0.4787 0.2656 267.596);
28
+ --chart-4: oklch(0.4303 0.2586 266.8914);
29
+ --chart-5: oklch(0.3727 0.2109 269.7479);
30
+ --sidebar: oklch(0.9851 0 0);
31
+ --sidebar-foreground: oklch(0.2138 0.0019 286.2347);
32
+ --sidebar-primary: oklch(0.2138 0.0019 286.2347);
33
+ --sidebar-primary-foreground: oklch(0.9851 0 0);
34
+ --sidebar-accent: oklch(0.9702 0 0);
35
+ --sidebar-accent-foreground: oklch(0.2138 0.0019 286.2347);
36
+ --sidebar-border: oklch(0.9219 0 0);
37
+ --sidebar-ring: oklch(0.709 0 0);
38
+ --font-sans: Nunito, ui-sans-serif, sans-serif, system-ui;
39
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
40
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
41
+ "Courier New", monospace;
42
+ --radius: 0.5rem;
43
+ --shadow-x: -50px;
44
+ --shadow-y: -50px;
45
+ --shadow-blur: 0px;
46
+ --shadow-spread: -50px;
47
+ --shadow-opacity: 0;
48
+ --shadow-color: oklch(0 0 0);
49
+ --shadow-2xs: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
50
+ --shadow-xs: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
51
+ --shadow-sm: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 1px 2px -51px hsl(0 0% 0% / 0.0);
52
+ --shadow: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 1px 2px -51px hsl(0 0% 0% / 0.0);
53
+ --shadow-md: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 2px 4px -51px hsl(0 0% 0% / 0.0);
54
+ --shadow-lg: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 4px 6px -51px hsl(0 0% 0% / 0.0);
55
+ --shadow-xl: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 8px 10px -51px hsl(0 0% 0% / 0.0);
56
+ --shadow-2xl: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
57
+ --tracking-normal: 0em;
58
+ --spacing: 0.25rem;
59
+ }
60
+
61
+ [data-theme="black"].dark,
62
+ [data-theme="black"] .dark {
63
+ --background: oklch(0 0 0);
64
+ --foreground: oklch(1.0 0 0);
65
+ --card: oklch(0 0 0);
66
+ --card-foreground: oklch(1.0 0 0);
67
+ --popover: oklch(0 0 0);
68
+ --popover-foreground: oklch(1.0 0 0);
69
+ --primary: oklch(1.0 0 0);
70
+ --primary-foreground: oklch(0 0 0);
71
+ --secondary: oklch(0.1776 0 0);
72
+ --secondary-foreground: oklch(1.0 0 0);
73
+ --muted: oklch(0.1776 0 0);
74
+ --muted-foreground: oklch(0.709 0 0);
75
+ --accent: oklch(0.1776 0 0);
76
+ --accent-foreground: oklch(1.0 0 0);
77
+ --destructive: oklch(0.6491 0.2386 33.1474);
78
+ --destructive-foreground: oklch(1.0 0 0);
79
+ --border: oklch(0.1776 0 0);
80
+ --input: oklch(0.1776 0 0);
81
+ --ring: oklch(0.1776 0 0);
82
+ --chart-1: oklch(0.762 0.121 268.8807);
83
+ --chart-2: oklch(0.5429 0.2366 268.4747);
84
+ --chart-3: oklch(0.4787 0.2656 267.596);
85
+ --chart-4: oklch(0.4303 0.2586 266.8914);
86
+ --chart-5: oklch(0.3727 0.2109 269.7479);
87
+ --sidebar: oklch(0.1776 0 0);
88
+ --sidebar-foreground: oklch(1.0 0 0);
89
+ --sidebar-primary: oklch(0.4333 0.2791 265.9524);
90
+ --sidebar-primary-foreground: oklch(1.0 0 0);
91
+ --sidebar-accent: oklch(0.1776 0 0);
92
+ --sidebar-accent-foreground: oklch(1.0 0 0);
93
+ --sidebar-border: oklch(0.1776 0 0);
94
+ --sidebar-ring: oklch(0.1776 0 0);
95
+ --font-sans: Nunito, ui-sans-serif, sans-serif, system-ui;
96
+ --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
97
+ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
98
+ "Courier New", monospace;
99
+ --radius: 0.5rem;
100
+ --shadow-x: -50px;
101
+ --shadow-y: -50px;
102
+ --shadow-blur: 0px;
103
+ --shadow-spread: -50px;
104
+ --shadow-opacity: 0;
105
+ --shadow-color: oklch(0 0 0);
106
+ --shadow-2xs: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
107
+ --shadow-xs: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
108
+ --shadow-sm: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 1px 2px -51px hsl(0 0% 0% / 0.0);
109
+ --shadow: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 1px 2px -51px hsl(0 0% 0% / 0.0);
110
+ --shadow-md: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 2px 4px -51px hsl(0 0% 0% / 0.0);
111
+ --shadow-lg: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 4px 6px -51px hsl(0 0% 0% / 0.0);
112
+ --shadow-xl: -50px -50px 0px -50px hsl(0 0% 0% / 0.0), -50px 8px 10px -51px hsl(0 0% 0% / 0.0);
113
+ --shadow-2xl: -50px -50px 0px -50px hsl(0 0% 0% / 0.0);
114
+ }
115
+
116
+ @theme inline {
117
+ --color-background: var(--background);
118
+ --color-foreground: var(--foreground);
119
+ --color-card: var(--card);
120
+ --color-card-foreground: var(--card-foreground);
121
+ --color-popover: var(--popover);
122
+ --color-popover-foreground: var(--popover-foreground);
123
+ --color-primary: var(--primary);
124
+ --color-primary-foreground: var(--primary-foreground);
125
+ --color-secondary: var(--secondary);
126
+ --color-secondary-foreground: var(--secondary-foreground);
127
+ --color-muted: var(--muted);
128
+ --color-muted-foreground: var(--muted-foreground);
129
+ --color-accent: var(--accent);
130
+ --color-accent-foreground: var(--accent-foreground);
131
+ --color-destructive: var(--destructive);
132
+ --color-destructive-foreground: var(--destructive-foreground);
133
+ --color-border: var(--border);
134
+ --color-input: var(--input);
135
+ --color-ring: var(--ring);
136
+ --color-chart-1: var(--chart-1);
137
+ --color-chart-2: var(--chart-2);
138
+ --color-chart-3: var(--chart-3);
139
+ --color-chart-4: var(--chart-4);
140
+ --color-chart-5: var(--chart-5);
141
+ --color-sidebar: var(--sidebar);
142
+ --color-sidebar-foreground: var(--sidebar-foreground);
143
+ --color-sidebar-primary: var(--sidebar-primary);
144
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
145
+ --color-sidebar-accent: var(--sidebar-accent);
146
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
147
+ --color-sidebar-border: var(--sidebar-border);
148
+ --color-sidebar-ring: var(--sidebar-ring);
149
+
150
+ --font-sans: var(--font-sans);
151
+ --font-mono: var(--font-mono);
152
+ --font-serif: var(--font-serif);
153
+
154
+ --radius-sm: calc(var(--radius) - 4px);
155
+ --radius-md: calc(var(--radius) - 2px);
156
+ --radius-lg: var(--radius);
157
+ --radius-xl: calc(var(--radius) + 4px);
158
+
159
+ --shadow-2xs: var(--shadow-2xs);
160
+ --shadow-xs: var(--shadow-xs);
161
+ --shadow-sm: var(--shadow-sm);
162
+ --shadow: var(--shadow);
163
+ --shadow-md: var(--shadow-md);
164
+ --shadow-lg: var(--shadow-lg);
165
+ --shadow-xl: var(--shadow-xl);
166
+ --shadow-2xl: var(--shadow-2xl);
167
+ }
168
+
169
+ @layer base {
170
+ * {
171
+ @apply border-border outline-ring/50;
172
+ }
173
+ body {
174
+ @apply bg-background text-foreground;
175
+ }
176
+ }
@@ -0,0 +1,174 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="damon"] {
6
+ --background: oklch(0.98 0.03 260);
7
+ --foreground: oklch(0.06 0.01 270);
8
+ --card: oklch(0.99 0.02 260);
9
+ --card-foreground: oklch(0.06 0.01 270);
10
+ --popover: oklch(0.98 0.03 260);
11
+ --popover-foreground: oklch(0.06 0.01 270);
12
+ --primary: oklch(0.06 0.01 270);
13
+ --primary-foreground: oklch(0.98 0.03 260);
14
+ --secondary: oklch(0.94 0 0);
15
+ --secondary-foreground: oklch(0.06 0.01 270);
16
+ --muted: oklch(0.97 0 0);
17
+ --muted-foreground: oklch(0.44 0 0);
18
+ --accent: oklch(0.94 0 0);
19
+ --accent-foreground: oklch(0.06 0.01 270);
20
+ --destructive: oklch(0.63 0.19 23.03);
21
+ --destructive-foreground: oklch(0.98 0.03 260);
22
+ --border: oklch(0.92 0 0);
23
+ --input: oklch(0.94 0 0);
24
+ --ring: oklch(0.06 0.01 270);
25
+ --chart-1: oklch(0.81 0.17 75.35);
26
+ --chart-2: oklch(0.55 0.22 264.53);
27
+ --chart-3: oklch(0.72 0 0);
28
+ --chart-4: oklch(0.92 0 0);
29
+ --chart-5: oklch(0.56 0 0);
30
+ --sidebar: oklch(0.98 0.03 260);
31
+ --sidebar-foreground: oklch(0.06 0.01 270);
32
+ --sidebar-primary: oklch(0.06 0.01 270);
33
+ --sidebar-primary-foreground: oklch(0.98 0.03 260);
34
+ --sidebar-accent: oklch(0.94 0 0);
35
+ --sidebar-accent-foreground: oklch(0.06 0.01 270);
36
+ --sidebar-border: oklch(0.94 0 0);
37
+ --sidebar-ring: oklch(0.06 0.01 270);
38
+ --font-sans: Geist, sans-serif;
39
+ --font-serif: Georgia, serif;
40
+ --font-mono: Geist Mono, monospace;
41
+ --radius: 0.5rem;
42
+ --shadow-x: 0px;
43
+ --shadow-y: 1px;
44
+ --shadow-blur: 2px;
45
+ --shadow-spread: 0px;
46
+ --shadow-opacity: 0.18;
47
+ --shadow-color: hsl(0 0% 0%);
48
+ --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
49
+ --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
50
+ --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
51
+ --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
52
+ --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
53
+ --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
54
+ --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
55
+ --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
56
+ --tracking-normal: 0em;
57
+ --spacing: 0.25rem;
58
+ }
59
+
60
+ [data-theme="damon"].dark,
61
+ [data-theme="damon"] .dark {
62
+ --background: oklch(0.04 0.005 270);
63
+ --foreground: oklch(0.88 0.04 260);
64
+ --card: oklch(0.14 0.005 270);
65
+ --card-foreground: oklch(0.88 0.04 260);
66
+ --popover: oklch(0.18 0.005 270);
67
+ --popover-foreground: oklch(0.88 0.04 260);
68
+ --primary: oklch(0.88 0.04 260);
69
+ --primary-foreground: oklch(0.04 0.005 270);
70
+ --secondary: oklch(0.25 0 0);
71
+ --secondary-foreground: oklch(0.88 0.04 260);
72
+ --muted: oklch(0.23 0 0);
73
+ --muted-foreground: oklch(0.72 0 0);
74
+ --accent: oklch(0.32 0 0);
75
+ --accent-foreground: oklch(0.88 0.04 260);
76
+ --destructive: oklch(0.69 0.2 23.91);
77
+ --destructive-foreground: oklch(0.04 0.005 270);
78
+ --border: oklch(0.26 0 0);
79
+ --input: oklch(0.32 0 0);
80
+ --ring: oklch(0.72 0 0);
81
+ --chart-1: oklch(0.81 0.17 75.35);
82
+ --chart-2: oklch(0.58 0.21 260.84);
83
+ --chart-3: oklch(0.56 0 0);
84
+ --chart-4: oklch(0.44 0 0);
85
+ --chart-5: oklch(0.92 0 0);
86
+ --sidebar: oklch(0.18 0.005 270);
87
+ --sidebar-foreground: oklch(0.88 0.04 260);
88
+ --sidebar-primary: oklch(0.88 0.04 260);
89
+ --sidebar-primary-foreground: oklch(0.04 0.005 270);
90
+ --sidebar-accent: oklch(0.32 0 0);
91
+ --sidebar-accent-foreground: oklch(0.88 0.04 260);
92
+ --sidebar-border: oklch(0.32 0 0);
93
+ --sidebar-ring: oklch(0.72 0 0);
94
+ --font-sans: Geist, sans-serif;
95
+ --font-serif: Georgia, serif;
96
+ --font-mono: Geist Mono, monospace;
97
+ --radius: 0.5rem;
98
+ --shadow-x: 0px;
99
+ --shadow-y: 1px;
100
+ --shadow-blur: 2px;
101
+ --shadow-spread: 0px;
102
+ --shadow-opacity: 0.18;
103
+ --shadow-color: hsl(0 0% 0%);
104
+ --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
105
+ --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
106
+ --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
107
+ --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
108
+ --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
109
+ --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
110
+ --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
111
+ --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
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
+ }
@@ -0,0 +1,182 @@
1
+ @import "tailwindcss";
2
+
3
+ @custom-variant dark (&:is(.dark *));
4
+
5
+ [data-theme="deepPurple"] {
6
+ --background: oklch(0.9838 0.0035 247.8583);
7
+ --foreground: oklch(0.1284 0.0267 261.5937);
8
+ --card: oklch(1.0 0 0);
9
+ --card-foreground: oklch(0.1284 0.0267 261.5937);
10
+ --popover: oklch(1.0 0 0);
11
+ --popover-foreground: oklch(0.1284 0.0267 261.5937);
12
+ --primary: oklch(0.4865 0.2423 291.8661);
13
+ --primary-foreground: oklch(0.9838 0.0035 247.8583);
14
+ --secondary: oklch(0.9486 0.0085 303.5068);
15
+ --secondary-foreground: oklch(0.341 0.1625 292.9477);
16
+ --muted: oklch(0.9679 0.0027 264.5424);
17
+ --muted-foreground: oklch(0.5503 0.0235 264.362);
18
+ --accent: oklch(0.9546 0.0227 303.2883);
19
+ --accent-foreground: oklch(0.4865 0.2423 291.8661);
20
+ --destructive: oklch(0.6356 0.2082 25.3782);
21
+ --destructive-foreground: oklch(0.9838 0.0035 247.8583);
22
+ --border: oklch(0.9278 0.0058 264.5314);
23
+ --input: oklch(0.9278 0.0058 264.5314);
24
+ --ring: oklch(0.4865 0.2423 291.8661);
25
+ --chart-1: oklch(0.4865 0.2423 291.8661);
26
+ --chart-2: oklch(0.7216 0.1282 217.8676);
27
+ --chart-3: oklch(0.6356 0.1398 156.1492);
28
+ --chart-4: oklch(0.6192 0.2037 312.7283);
29
+ --chart-5: oklch(0.6532 0.2114 353.9392);
30
+ --sidebar: oklch(1.0 0 0);
31
+ --sidebar-foreground: oklch(0.1284 0.0267 261.5937);
32
+ --sidebar-primary: oklch(0.4865 0.2423 291.8661);
33
+ --sidebar-primary-foreground: oklch(0.9838 0.0035 247.8583);
34
+ --sidebar-accent: oklch(0.9486 0.0085 303.5068);
35
+ --sidebar-accent-foreground: oklch(0.4865 0.2423 291.8661);
36
+ --sidebar-border: oklch(0.9278 0.0058 264.5314);
37
+ --sidebar-ring: oklch(0.4865 0.2423 291.8661);
38
+ --font-sans: Plus Jakarta 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: 30px;
45
+ --shadow-spread: 0px;
46
+ --shadow-opacity: 0.08;
47
+ --shadow-color: hsl(263, 70%, 50%);
48
+ --shadow-2xs: 0px 8px 30px 0px hsl(263 70% 50% / 0.04);
49
+ --shadow-xs: 0px 8px 30px 0px hsl(263 70% 50% / 0.04);
50
+ --shadow-sm: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 1px 2px -1px hsl(263 70% 50% / 0.08);
51
+ --shadow: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 1px 2px -1px hsl(263 70% 50% / 0.08);
52
+ --shadow-md: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 2px 4px -1px hsl(263 70% 50% / 0.08);
53
+ --shadow-lg: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 4px 6px -1px hsl(263 70% 50% / 0.08);
54
+ --shadow-xl: 0px 8px 30px 0px hsl(263 70% 50% / 0.08), 0px 8px 10px -1px hsl(263 70% 50% / 0.08);
55
+ --shadow-2xl: 0px 8px 30px 0px hsl(263 70% 50% / 0.2);
56
+ --tracking-normal: -0.02em;
57
+ --spacing: 0.25rem;
58
+ }
59
+
60
+ [data-theme="deepPurple"].dark,
61
+ [data-theme="deepPurple"] .dark {
62
+ --background: oklch(0.1091 0.0091 301.6956);
63
+ --foreground: oklch(0.9838 0.0035 247.8583);
64
+ --card: oklch(0.1376 0.0118 301.0607);
65
+ --card-foreground: oklch(0.9838 0.0035 247.8583);
66
+ --popover: oklch(0.1486 0.014 299.9811);
67
+ --popover-foreground: oklch(0.9838 0.0035 247.8583);
68
+ --primary: oklch(0.6083 0.2172 297.1153);
69
+ --primary-foreground: oklch(0.1091 0.0091 301.6956);
70
+ --secondary: oklch(0.2363 0.0582 299.6364);
71
+ --secondary-foreground: oklch(0.8266 0.0933 301.9462);
72
+ --muted: oklch(0.2217 0.0242 299.7054);
73
+ --muted-foreground: oklch(0.7497 0.0224 301.0128);
74
+ --accent: oklch(0.2255 0.0836 296.7401);
75
+ --accent-foreground: oklch(0.6083 0.2172 297.1153);
76
+ --destructive: oklch(0.6356 0.2082 25.3782);
77
+ --destructive-foreground: oklch(0.9838 0.0035 247.8583);
78
+ --border: oklch(0.2505 0.0293 299.5707);
79
+ --input: oklch(0.2505 0.0293 299.5707);
80
+ --ring: oklch(0.6083 0.2172 297.1153);
81
+ --chart-1: oklch(0.6083 0.2172 297.1153);
82
+ --chart-2: oklch(0.7741 0.1272 215.0981);
83
+ --chart-3: oklch(0.7801 0.1859 154.5892);
84
+ --chart-4: oklch(0.7001 0.1882 313.2907);
85
+ --chart-5: oklch(0.6888 0.2092 353.1317);
86
+ --sidebar: oklch(0.1249 0.0104 301.6956);
87
+ --sidebar-foreground: oklch(0.9838 0.0035 247.8583);
88
+ --sidebar-primary: oklch(0.6083 0.2172 297.1153);
89
+ --sidebar-primary-foreground: oklch(0.1091 0.0091 301.6956);
90
+ --sidebar-accent: oklch(0.2096 0.0482 299.9505);
91
+ --sidebar-accent-foreground: oklch(0.6083 0.2172 297.1153);
92
+ --sidebar-border: oklch(0.2217 0.0242 299.7054);
93
+ --sidebar-ring: oklch(0.6083 0.2172 297.1153);
94
+ --font-sans: Plus Jakarta 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: 20px;
100
+ --shadow-blur: 40px;
101
+ --shadow-spread: -10px;
102
+ --shadow-opacity: 0.6;
103
+ --shadow-color: hsl(0, 0%, 0%);
104
+ --shadow-2xs: 0px 20px 40px -10px hsl(0 0% 0% / 0.3);
105
+ --shadow-xs: 0px 20px 40px -10px hsl(0 0% 0% / 0.3);
106
+ --shadow-sm: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 1px 2px -11px hsl(0 0% 0% / 0.6);
107
+ --shadow: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 1px 2px -11px hsl(0 0% 0% / 0.6);
108
+ --shadow-md: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 2px 4px -11px hsl(0 0% 0% / 0.6);
109
+ --shadow-lg: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 4px 6px -11px hsl(0 0% 0% / 0.6);
110
+ --shadow-xl: 0px 20px 40px -10px hsl(0 0% 0% / 0.6), 0px 8px 10px -11px hsl(0 0% 0% / 0.6);
111
+ --shadow-2xl: 0px 20px 40px -10px hsl(0 0% 0% / 1.5);
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
+ }
@@ -0,0 +1,13 @@
1
+ /* Все темы. Каждая обёрнута в [data-theme="<name>"], применяется тогда,
2
+ когда на <html> или родительском элементе выставлен соответствующий атрибут. */
3
+ @import "./black.css";
4
+ @import "./damon.css";
5
+ @import "./deepPurple.css";
6
+ @import "./lightGreen.css";
7
+ @import "./minimalNeutral.css";
8
+ @import "./openprofile.css";
9
+ @import "./pasteelement.css";
10
+ @import "./shopifyRed.css";
11
+ @import "./tiesen.css";
12
+ @import "./vescrow.css";
13
+ @import "./zen.css";