claymorphism.css raw
1 .theme-claymorphism {
2 --radius: 1.25rem;
3 --tracking-normal: 0em;
4 --spacing: 0.25rem;
5
6 /* Logo colors */
7 --logo-ink: #000000;
8 --logo-accent: #000000;
9
10 /* App colors */
11 --background: oklch(0.9232 0.0026 48.7171);
12 --foreground: oklch(0.2795 0.0368 260.031);
13 --card: oklch(0.9699 0.0013 106.4238);
14 --card-foreground: oklch(0.2795 0.0368 260.031);
15 --popover: oklch(0.9699 0.0013 106.4238);
16 --popover-foreground: oklch(0.2795 0.0368 260.031);
17 --primary: oklch(0.5854 0.2041 277.1173);
18 --primary-foreground: oklch(1 0 0);
19 --secondary: oklch(0.8687 0.0043 56.366);
20 --secondary-foreground: oklch(0.4461 0.0263 256.8018);
21 --muted: oklch(0.9232 0.0026 48.7171);
22 --muted-foreground: oklch(0.551 0.0234 264.3637);
23 --accent: oklch(0.9376 0.026 321.9388);
24 --accent-foreground: oklch(0.3729 0.0306 259.7328);
25 --destructive: oklch(0.6368 0.2078 25.3313);
26 --border: oklch(0.8687 0.0043 56.366);
27 --input: oklch(0.8687 0.0043 56.366);
28 --ring: var(--primary);
29 --chart-1: oklch(0.5854 0.2041 277.1173);
30 --chart-2: oklch(0.5106 0.2301 276.9656);
31 --chart-3: oklch(0.4568 0.2146 277.0229);
32 --chart-4: oklch(0.3984 0.1773 277.3662);
33 --chart-5: oklch(0.3588 0.1354 278.6973);
34 --sidebar: oklch(0.8687 0.0043 56.366);
35 --sidebar-foreground: oklch(0.2795 0.0368 260.031);
36 --sidebar-primary: oklch(0.5854 0.2041 277.1173);
37 --sidebar-primary-foreground: oklch(1 0 0);
38 --sidebar-accent: oklch(0.9376 0.026 321.9388);
39 --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
40 --sidebar-border: oklch(0.8687 0.0043 56.366);
41 --sidebar-ring: var(--primary);
42
43 /* Custom shadows */
44 --shadow-2xs: 2px 2px 10px 4px hsl(240 4% 60% / 0.09);
45 --shadow-xs: 2px 2px 10px 4px hsl(240 4% 60% / 0.09);
46 --shadow-sm:
47 2px 2px 10px 4px hsl(240 4% 60% / 0.18),
48 2px 1px 2px 3px hsl(240 4% 60% / 0.18);
49 --shadow:
50 2px 2px 10px 4px hsl(240 4% 60% / 0.18),
51 2px 1px 2px 3px hsl(240 4% 60% / 0.18);
52 --shadow-md:
53 2px 2px 10px 4px hsl(240 4% 60% / 0.18),
54 2px 2px 4px 3px hsl(240 4% 60% / 0.18);
55 --shadow-lg:
56 2px 2px 10px 4px hsl(240 4% 60% / 0.18),
57 2px 4px 6px 3px hsl(240 4% 60% / 0.18);
58 --shadow-xl:
59 2px 2px 10px 4px hsl(240 4% 60% / 0.18),
60 2px 8px 10px 3px hsl(240 4% 60% / 0.18);
61 --shadow-2xl: 2px 2px 10px 4px hsl(240 4% 60% / 0.45);
62 }
63
64 .theme-claymorphism.dark {
65 --logo-ink: #ffffff;
66 --logo-accent: #ffffff;
67
68 /* App colors */
69 --background: oklch(0.2244 0.0074 67.437);
70 --foreground: oklch(0.9288 0.0126 255.5078);
71 --card: oklch(0.2801 0.008 59.3379);
72 --card-foreground: oklch(0.9288 0.0126 255.5078);
73 --popover: oklch(0.2801 0.008 59.3379);
74 --popover-foreground: oklch(0.9288 0.0126 255.5078);
75 --primary: oklch(0.6801 0.1583 276.9349);
76 --primary-foreground: oklch(0.2244 0.0074 67.437);
77 --secondary: oklch(0.3359 0.0077 59.4197);
78 --secondary-foreground: oklch(0.8717 0.0093 258.3382);
79 --muted: oklch(0.2801 0.008 59.3379);
80 --muted-foreground: oklch(0.7137 0.0192 261.3246);
81 --accent: oklch(0.3896 0.0074 59.4734);
82 --accent-foreground: oklch(0.8717 0.0093 258.3382);
83 --destructive: oklch(0.6368 0.2078 25.3313);
84 --border: oklch(0.3359 0.0077 59.4197);
85 --input: oklch(0.3359 0.0077 59.4197);
86 --ring: var(--primary);
87 --chart-1: oklch(0.6801 0.1583 276.9349);
88 --chart-2: oklch(0.5854 0.2041 277.1173);
89 --chart-3: oklch(0.5106 0.2301 276.9656);
90 --chart-4: oklch(0.4568 0.2146 277.0229);
91 --chart-5: oklch(0.3984 0.1773 277.3662);
92 --sidebar: oklch(0.3359 0.0077 59.4197);
93 --sidebar-foreground: oklch(0.9288 0.0126 255.5078);
94 --sidebar-primary: oklch(0.6801 0.1583 276.9349);
95 --sidebar-primary-foreground: oklch(0.2244 0.0074 67.437);
96 --sidebar-accent: oklch(0.3896 0.0074 59.4734);
97 --sidebar-accent-foreground: oklch(0.8717 0.0093 258.3382);
98 --sidebar-border: oklch(0.3359 0.0077 59.4197);
99 --sidebar-ring: var(--primary);
100
101 /* Custom shadows */
102 --shadow-2xs: 2px 2px 10px 4px hsl(0 0% 0% / 0.09);
103 --shadow-xs: 2px 2px 10px 4px hsl(0 0% 0% / 0.09);
104 --shadow-sm:
105 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18);
106 --shadow:
107 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18);
108 --shadow-md:
109 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 2px 4px 3px hsl(0 0% 0% / 0.18);
110 --shadow-lg:
111 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 4px 6px 3px hsl(0 0% 0% / 0.18);
112 --shadow-xl:
113 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 8px 10px 3px hsl(0 0% 0% / 0.18);
114 --shadow-2xl: 2px 2px 10px 4px hsl(0 0% 0% / 0.45);
115 }
116