init
This commit is contained in:
phaichayon
77
src/styles/globals.css
Normal file
77
src/styles/globals.css
Normal file
@@ -0,0 +1,77 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@import './theme.css';
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/* Global scrollbar styling to match ScrollArea */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--border);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--muted-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
/* View Transition Wave Effect */
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
animation: none;
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
::view-transition-old(root) {
|
||||
/* Ensure the outgoing view (old theme) is beneath */
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
/* Ensure the incoming view (new theme) is always on top */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes reveal {
|
||||
from {
|
||||
/* Use CSS variables for the origin, defaulting to center if not set */
|
||||
clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
|
||||
opacity: 0.7;
|
||||
}
|
||||
to {
|
||||
/* Use CSS variables for the origin, defaulting to center if not set */
|
||||
clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
/* Apply the reveal animation */
|
||||
animation: reveal 0.4s ease-in-out forwards;
|
||||
}
|
||||
33
src/styles/theme.css
Normal file
33
src/styles/theme.css
Normal file
@@ -0,0 +1,33 @@
|
||||
/* Import individual theme files */
|
||||
@import './themes/claude.css';
|
||||
@import './themes/neobrutualism.css';
|
||||
@import './themes/supabase.css';
|
||||
@import './themes/vercel.css';
|
||||
@import './themes/mono.css';
|
||||
@import './themes/notebook.css';
|
||||
@import './themes/light-green.css';
|
||||
@import './themes/zen.css';
|
||||
@import './themes/astro-vista.css';
|
||||
@import './themes/whatsapp.css';
|
||||
|
||||
body {
|
||||
@apply overscroll-none;
|
||||
}
|
||||
|
||||
:root {
|
||||
--header-height: calc(var(--spacing, 0.25rem) * 12 + 1px);
|
||||
}
|
||||
|
||||
/* Apply theme fonts to body for all themes */
|
||||
/* This ensures theme-specific fonts override Next.js font variables */
|
||||
/* Font variables are defined on [data-theme] (html element) */
|
||||
/* We need to override Next.js font variables on body to use html's values */
|
||||
/* Using initial removes the property, allowing parent (html) values to cascade */
|
||||
[data-theme] body {
|
||||
/* Remove Next.js font variables to allow theme variables from html to cascade */
|
||||
--font-sans: initial;
|
||||
--font-mono: initial;
|
||||
--font-serif: initial;
|
||||
/* Apply font-family - will now resolve from html's [data-theme] variables */
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
159
src/styles/themes/astro-vista.css
Normal file
159
src/styles/themes/astro-vista.css
Normal file
@@ -0,0 +1,159 @@
|
||||
[data-theme='astro-vista'] {
|
||||
--background: oklch(0.9383 0.0042 236.4993);
|
||||
--foreground: oklch(0.3211 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.3211 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.3211 0 0);
|
||||
--primary: oklch(0.642 0.1691 38.5815);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.4138 0.0846 259.8759);
|
||||
--secondary-foreground: oklch(1 0 0);
|
||||
--muted: oklch(0.9846 0.0017 247.8389);
|
||||
--muted-foreground: oklch(0.551 0.0234 264.3637);
|
||||
--accent: oklch(0.9119 0.0222 243.8174);
|
||||
--accent-foreground: oklch(0.3791 0.1378 265.5222);
|
||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.8452 0 0);
|
||||
--input: oklch(0.97 0.0029 264.542);
|
||||
--ring: oklch(0.6397 0.172 36.4421);
|
||||
--chart-1: oklch(0.6693 0.0706 248.923);
|
||||
--chart-2: oklch(0.6678 0.1546 41.62);
|
||||
--chart-3: oklch(0.5957 0.1807 19.9763);
|
||||
--chart-4: oklch(0.7859 0.1342 83.6986);
|
||||
--chart-5: oklch(0.4227 0.0732 267.3899);
|
||||
--sidebar: oklch(0.903 0.0046 258.3257);
|
||||
--sidebar-foreground: oklch(0.3211 0 0);
|
||||
--sidebar-primary: oklch(0.6397 0.172 36.4421);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.9119 0.0222 243.8174);
|
||||
--sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
|
||||
--sidebar-border: oklch(0.9276 0.0058 264.5313);
|
||||
--sidebar-ring: oklch(0.6397 0.172 36.4421);
|
||||
--font-sans: var(--font-outfit), sans-serif;
|
||||
--font-serif: var(--font-merriweather), serif;
|
||||
--font-mono: var(--font-fira-code), monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: #1a1a1a;
|
||||
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
|
||||
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
|
||||
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='astro-vista'].dark {
|
||||
--background: oklch(0.2178 0 0);
|
||||
--foreground: oklch(0.9219 0 0);
|
||||
--card: oklch(0.2435 0 0);
|
||||
--card-foreground: oklch(0.9219 0 0);
|
||||
--popover: oklch(0.2435 0 0);
|
||||
--popover-foreground: oklch(0.9219 0 0);
|
||||
--primary: oklch(0.642 0.1691 38.5815);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.3743 0.0726 258.5213);
|
||||
--secondary-foreground: oklch(0.9219 0 0);
|
||||
--muted: oklch(0.285 0 0);
|
||||
--muted-foreground: oklch(0.5999 0 0);
|
||||
--accent: oklch(0.338 0.0589 267.5867);
|
||||
--accent-foreground: oklch(0.8823 0.0571 254.1284);
|
||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.329 0 0);
|
||||
--input: oklch(0.3092 0 0);
|
||||
--ring: oklch(0.6397 0.172 36.4421);
|
||||
--chart-1: oklch(0.7124 0.0606 248.6896);
|
||||
--chart-2: oklch(0.6678 0.1546 41.62);
|
||||
--chart-3: oklch(0.5957 0.1807 19.9763);
|
||||
--chart-4: oklch(0.7859 0.1342 83.6986);
|
||||
--chart-5: oklch(0.4227 0.0732 267.3899);
|
||||
--sidebar: oklch(0.2393 0 0);
|
||||
--sidebar-foreground: oklch(0.9219 0 0);
|
||||
--sidebar-primary: oklch(0.6397 0.172 36.4421);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.338 0.0589 267.5867);
|
||||
--sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
|
||||
--sidebar-border: oklch(0.329 0 0);
|
||||
--sidebar-ring: oklch(0.6397 0.172 36.4421);
|
||||
--font-sans: var(--font-outfit), sans-serif;
|
||||
--font-serif: var(--font-merriweather), serif;
|
||||
--font-mono: var(--font-fira-code), monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: #1a1a1a;
|
||||
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
|
||||
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.05);
|
||||
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-md: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.1), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.1);
|
||||
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 10.1961% / 0.25);
|
||||
}
|
||||
|
||||
[data-theme='astro-vista'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
172
src/styles/themes/claude.css
Normal file
172
src/styles/themes/claude.css
Normal file
@@ -0,0 +1,172 @@
|
||||
[data-theme='claude'] {
|
||||
--background: oklch(0.9818 0.0054 95.0986);
|
||||
--foreground: oklch(0.3438 0.0269 95.7226);
|
||||
--card: oklch(0.9818 0.0054 95.0986);
|
||||
--card-foreground: oklch(0.1908 0.002 106.5859);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2671 0.0196 98.939);
|
||||
--primary: oklch(0.6171 0.1375 39.0427);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.9245 0.0138 92.9892);
|
||||
--secondary-foreground: oklch(0.4334 0.0177 98.6048);
|
||||
--muted: oklch(0.9341 0.0153 90.239);
|
||||
--muted-foreground: oklch(0.6059 0.0075 97.4233);
|
||||
--accent: oklch(0.9245 0.0138 92.9892);
|
||||
--accent-foreground: oklch(0.2671 0.0196 98.939);
|
||||
--destructive: oklch(0.1908 0.002 106.5859);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.8847 0.0069 97.3627);
|
||||
--input: oklch(0.7621 0.0156 98.3528);
|
||||
--ring: oklch(0.6171 0.1375 39.0427);
|
||||
--chart-1: oklch(0.5583 0.1276 42.9956);
|
||||
--chart-2: oklch(0.6898 0.1581 290.4107);
|
||||
--chart-3: oklch(0.8816 0.0276 93.128);
|
||||
--chart-4: oklch(0.8822 0.0403 298.1792);
|
||||
--chart-5: oklch(0.5608 0.1348 42.0584);
|
||||
--sidebar: oklch(0.9663 0.008 98.8792);
|
||||
--sidebar-foreground: oklch(0.359 0.0051 106.6524);
|
||||
--sidebar-primary: oklch(0.6171 0.1375 39.0427);
|
||||
--sidebar-primary-foreground: oklch(0.9881 0 0);
|
||||
--sidebar-accent: oklch(0.9245 0.0138 92.9892);
|
||||
--sidebar-accent-foreground: oklch(0.325 0 0);
|
||||
--sidebar-border: oklch(0.9401 0 0);
|
||||
--sidebar-ring: oklch(0.7731 0 0);
|
||||
--font-sans:
|
||||
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';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='claude'].dark {
|
||||
--background: oklch(0.2679 0.0036 106.6427);
|
||||
--foreground: oklch(0.8074 0.0142 93.0137);
|
||||
--card: oklch(0.2679 0.0036 106.6427);
|
||||
--card-foreground: oklch(0.9818 0.0054 95.0986);
|
||||
--popover: oklch(0.3085 0.0035 106.6039);
|
||||
--popover-foreground: oklch(0.9211 0.004 106.4781);
|
||||
--primary: oklch(0.6724 0.1308 38.7559);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.9818 0.0054 95.0986);
|
||||
--secondary-foreground: oklch(0.3085 0.0035 106.6039);
|
||||
--muted: oklch(0.2213 0.0038 106.707);
|
||||
--muted-foreground: oklch(0.7713 0.0169 99.0657);
|
||||
--accent: oklch(0.213 0.0078 95.4245);
|
||||
--accent-foreground: oklch(0.9663 0.008 98.8792);
|
||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.3618 0.0101 106.8928);
|
||||
--input: oklch(0.4336 0.0113 100.2195);
|
||||
--ring: oklch(0.6724 0.1308 38.7559);
|
||||
--chart-1: oklch(0.5583 0.1276 42.9956);
|
||||
--chart-2: oklch(0.6898 0.1581 290.4107);
|
||||
--chart-3: oklch(0.213 0.0078 95.4245);
|
||||
--chart-4: oklch(0.3074 0.0516 289.323);
|
||||
--chart-5: oklch(0.5608 0.1348 42.0584);
|
||||
--sidebar: oklch(0.2357 0.0024 67.7077);
|
||||
--sidebar-foreground: oklch(0.8074 0.0142 93.0137);
|
||||
--sidebar-primary: oklch(0.325 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9881 0 0);
|
||||
--sidebar-accent: oklch(0.168 0.002 106.6177);
|
||||
--sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
|
||||
--sidebar-border: oklch(0.9401 0 0);
|
||||
--sidebar-ring: oklch(0.7731 0 0);
|
||||
--font-sans:
|
||||
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';
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono:
|
||||
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: oklch(0 0 0);
|
||||
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
|
||||
}
|
||||
|
||||
[data-theme='claude'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
165
src/styles/themes/light-green.css
Normal file
165
src/styles/themes/light-green.css
Normal file
@@ -0,0 +1,165 @@
|
||||
[data-theme='light-green'] {
|
||||
--background: oklch(0.9892 0.0054 117.9205);
|
||||
--foreground: oklch(0.2077 0.0398 265.7549);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2077 0.0398 265.7549);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2077 0.0398 265.7549);
|
||||
--primary: oklch(0.8871 0.2122 128.5041);
|
||||
--primary-foreground: oklch(0 0 0);
|
||||
--secondary: oklch(0.3717 0.0392 257.287);
|
||||
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--muted: oklch(0.9683 0.0069 247.8956);
|
||||
--muted-foreground: oklch(0.5544 0.0407 257.4166);
|
||||
--accent: oklch(0.9819 0.0181 155.8263);
|
||||
--accent-foreground: oklch(0.4479 0.1083 151.3277);
|
||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9288 0.0126 255.5078);
|
||||
--input: oklch(0.9288 0.0126 255.5078);
|
||||
--ring: oklch(0.8871 0.2122 128.5041);
|
||||
--chart-1: oklch(0.8871 0.2122 128.5041);
|
||||
--chart-2: oklch(0.3717 0.0392 257.287);
|
||||
--chart-3: oklch(0.7227 0.192 149.5793);
|
||||
--chart-4: oklch(0.5544 0.0407 257.4166);
|
||||
--chart-5: oklch(0.7107 0.0351 256.7878);
|
||||
--sidebar: oklch(1 0 0);
|
||||
--sidebar-foreground: oklch(0.2077 0.0398 265.7549);
|
||||
--sidebar-primary: oklch(0.8871 0.2122 128.5041);
|
||||
--sidebar-primary-foreground: oklch(0 0 0);
|
||||
--sidebar-accent: oklch(0.9842 0.0034 247.8575);
|
||||
--sidebar-accent-foreground: oklch(0.2077 0.0398 265.7549);
|
||||
--sidebar-border: oklch(0.9683 0.0069 247.8956);
|
||||
--sidebar-ring: oklch(0.8871 0.2122 128.5041);
|
||||
--font-sans: var(--font-inter), system-ui, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: var(--font-jetbrains-mono), monospace;
|
||||
--radius: 1rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 8px;
|
||||
--shadow-blur: 20px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.05;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
|
||||
--shadow-xs: 0px 8px 20px 0px hsl(0 0% 0% / 0.03);
|
||||
--shadow-sm: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
|
||||
--shadow: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05);
|
||||
--shadow-md: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
|
||||
--shadow-lg: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05);
|
||||
--shadow-2xl: 0px 8px 20px 0px hsl(0 0% 0% / 0.13);
|
||||
--tracking-normal: -0.01em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='light-green'].dark {
|
||||
--background: oklch(0.1288 0.0406 264.6952);
|
||||
--foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--card: oklch(0.2077 0.0398 265.7549);
|
||||
--card-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--popover: oklch(0.2077 0.0398 265.7549);
|
||||
--popover-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--primary: oklch(0.8871 0.2122 128.5041);
|
||||
--primary-foreground: oklch(0 0 0);
|
||||
--secondary: oklch(0.2795 0.0368 260.031);
|
||||
--secondary-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--muted: oklch(0.2795 0.0368 260.031);
|
||||
--muted-foreground: oklch(0.7107 0.0351 256.7878);
|
||||
--accent: oklch(0.3925 0.0896 152.5353);
|
||||
--accent-foreground: oklch(0.8871 0.2122 128.5041);
|
||||
--destructive: oklch(0.4437 0.1613 26.8994);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.2795 0.0368 260.031);
|
||||
--input: oklch(0.2795 0.0368 260.031);
|
||||
--ring: oklch(0.8871 0.2122 128.5041);
|
||||
--chart-1: oklch(0.8871 0.2122 128.5041);
|
||||
--chart-2: oklch(0.6231 0.188 259.8145);
|
||||
--chart-3: oklch(0.7227 0.192 149.5793);
|
||||
--chart-4: oklch(0.6268 0.2325 303.9004);
|
||||
--chart-5: oklch(0.7686 0.1647 70.0804);
|
||||
--sidebar: oklch(0.1288 0.0406 264.6952);
|
||||
--sidebar-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--sidebar-primary: oklch(0.8871 0.2122 128.5041);
|
||||
--sidebar-primary-foreground: oklch(0 0 0);
|
||||
--sidebar-accent: oklch(0.2795 0.0368 260.031);
|
||||
--sidebar-accent-foreground: oklch(0.9842 0.0034 247.8575);
|
||||
--sidebar-border: oklch(0.2795 0.0368 260.031);
|
||||
--sidebar-ring: oklch(0.8871 0.2122 128.5041);
|
||||
--font-sans: var(--font-inter), system-ui, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: var(--font-jetbrains-mono), monospace;
|
||||
--radius: 1rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 10px;
|
||||
--shadow-blur: 25px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.4;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
|
||||
--shadow-xs: 0px 10px 25px 0px hsl(0 0% 0% / 0.2);
|
||||
--shadow-sm: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-md: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-lg: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-xl: 0px 10px 25px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-2xl: 0px 10px 25px 0px hsl(0 0% 0% / 1);
|
||||
}
|
||||
|
||||
[data-theme='light-green'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
}
|
||||
}
|
||||
162
src/styles/themes/mono.css
Normal file
162
src/styles/themes/mono.css
Normal file
@@ -0,0 +1,162 @@
|
||||
[data-theme='mono'] {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.1448 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.1448 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.1448 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.9702 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9702 0 0);
|
||||
--muted-foreground: oklch(0.5486 0 0);
|
||||
--accent: oklch(0.9702 0 0);
|
||||
--accent-foreground: oklch(0.2046 0 0);
|
||||
--destructive: oklch(0.583 0.2387 28.4765);
|
||||
--destructive-foreground: oklch(0.9702 0 0);
|
||||
--border: oklch(0.9219 0 0);
|
||||
--input: oklch(0.9219 0 0);
|
||||
--ring: oklch(0.709 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.9851 0 0);
|
||||
--sidebar-foreground: oklch(0.1448 0 0);
|
||||
--sidebar-primary: oklch(0.2046 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-accent: oklch(0.9702 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-border: oklch(0.9219 0 0);
|
||||
--sidebar-ring: oklch(0.709 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 0px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='mono'].dark {
|
||||
--background: oklch(0.1448 0 0);
|
||||
--foreground: oklch(0.9851 0 0);
|
||||
--card: oklch(0.2134 0 0);
|
||||
--card-foreground: oklch(0.9851 0 0);
|
||||
--popover: oklch(0.2686 0 0);
|
||||
--popover-foreground: oklch(0.9851 0 0);
|
||||
--primary: oklch(0.5555 0 0);
|
||||
--primary-foreground: oklch(0.9851 0 0);
|
||||
--secondary: oklch(0.2686 0 0);
|
||||
--secondary-foreground: oklch(0.9851 0 0);
|
||||
--muted: oklch(0.2686 0 0);
|
||||
--muted-foreground: oklch(0.709 0 0);
|
||||
--accent: oklch(0.3715 0 0);
|
||||
--accent-foreground: oklch(0.9851 0 0);
|
||||
--destructive: oklch(0.7022 0.1892 22.2279);
|
||||
--destructive-foreground: oklch(0.2686 0 0);
|
||||
--border: oklch(0.3407 0 0);
|
||||
--input: oklch(0.4386 0 0);
|
||||
--ring: oklch(0.5555 0 0);
|
||||
--chart-1: oklch(0.5555 0 0);
|
||||
--chart-2: oklch(0.5555 0 0);
|
||||
--chart-3: oklch(0.5555 0 0);
|
||||
--chart-4: oklch(0.5555 0 0);
|
||||
--chart-5: oklch(0.5555 0 0);
|
||||
--sidebar: oklch(0.2046 0 0);
|
||||
--sidebar-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-primary: oklch(0.9851 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.2046 0 0);
|
||||
--sidebar-accent: oklch(0.2686 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-border: oklch(1 0 0);
|
||||
--sidebar-ring: oklch(0.4386 0 0);
|
||||
--font-sans: Geist Mono, monospace;
|
||||
--font-serif: Geist Mono, monospace;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 0px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-xs: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
--shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0);
|
||||
--shadow-2xl: 0px 1px 0px 0px hsl(0 0% 0% / 0);
|
||||
}
|
||||
|
||||
[data-theme='mono'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
162
src/styles/themes/neobrutualism.css
Normal file
162
src/styles/themes/neobrutualism.css
Normal file
@@ -0,0 +1,162 @@
|
||||
[data-theme='neobrutualism'] {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0.6489 0.237 26.9728);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.968 0.211 109.7692);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.9551 0 0);
|
||||
--muted-foreground: oklch(0.3211 0 0);
|
||||
--accent: oklch(0.5635 0.2408 260.8178);
|
||||
--accent-foreground: oklch(1 0 0);
|
||||
--destructive: oklch(0 0 0);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0 0 0);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(0.6489 0.237 26.9728);
|
||||
--chart-1: oklch(0.6489 0.237 26.9728);
|
||||
--chart-2: oklch(0.968 0.211 109.7692);
|
||||
--chart-3: oklch(0.5635 0.2408 260.8178);
|
||||
--chart-4: oklch(0.7323 0.2492 142.4953);
|
||||
--chart-5: oklch(0.5931 0.2726 328.3634);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0.6489 0.237 26.9728);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.5635 0.2408 260.8178);
|
||||
--sidebar-accent-foreground: oklch(1 0 0);
|
||||
--sidebar-border: oklch(0 0 0);
|
||||
--sidebar-ring: oklch(0.6489 0.237 26.9728);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-x: 4px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 0px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 1;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='neobrutualism'].dark {
|
||||
--background: oklch(0 0 0);
|
||||
--foreground: oklch(1 0 0);
|
||||
--card: oklch(0.3211 0 0);
|
||||
--card-foreground: oklch(1 0 0);
|
||||
--popover: oklch(0.3211 0 0);
|
||||
--popover-foreground: oklch(1 0 0);
|
||||
--primary: oklch(0.7044 0.1872 23.1858);
|
||||
--primary-foreground: oklch(0 0 0);
|
||||
--secondary: oklch(0.9691 0.2005 109.6228);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.2178 0 0);
|
||||
--muted-foreground: oklch(0.8452 0 0);
|
||||
--accent: oklch(0.6755 0.1765 252.2592);
|
||||
--accent-foreground: oklch(0 0 0);
|
||||
--destructive: oklch(1 0 0);
|
||||
--destructive-foreground: oklch(0 0 0);
|
||||
--border: oklch(1 0 0);
|
||||
--input: oklch(1 0 0);
|
||||
--ring: oklch(0.7044 0.1872 23.1858);
|
||||
--chart-1: oklch(0.7044 0.1872 23.1858);
|
||||
--chart-2: oklch(0.9691 0.2005 109.6228);
|
||||
--chart-3: oklch(0.6755 0.1765 252.2592);
|
||||
--chart-4: oklch(0.7395 0.2268 142.8504);
|
||||
--chart-5: oklch(0.6131 0.2458 328.0714);
|
||||
--sidebar: oklch(0 0 0);
|
||||
--sidebar-foreground: oklch(1 0 0);
|
||||
--sidebar-primary: oklch(0.7044 0.1872 23.1858);
|
||||
--sidebar-primary-foreground: oklch(0 0 0);
|
||||
--sidebar-accent: oklch(0.6755 0.1765 252.2592);
|
||||
--sidebar-accent-foreground: oklch(0 0 0);
|
||||
--sidebar-border: oklch(1 0 0);
|
||||
--sidebar-ring: oklch(0.7044 0.1872 23.1858);
|
||||
--font-sans: DM Sans, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: Space Mono, monospace;
|
||||
--radius: 0px;
|
||||
--shadow-x: 4px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 0px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 1;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
|
||||
--shadow-xs: 4px 4px 0px 0px hsl(0 0% 0% / 0.5);
|
||||
--shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
|
||||
--shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 1px 2px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 2px 4px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 4px 6px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1), 4px 8px 10px -1px hsl(0 0% 0% / 1);
|
||||
--shadow-2xl: 4px 4px 0px 0px hsl(0 0% 0% / 2.5);
|
||||
}
|
||||
|
||||
[data-theme='neobrutualism'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
173
src/styles/themes/notebook.css
Normal file
173
src/styles/themes/notebook.css
Normal file
@@ -0,0 +1,173 @@
|
||||
[data-theme='notebook'] {
|
||||
--background: oklch(0.9821 0 0);
|
||||
--foreground: oklch(0.3485 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.3485 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.3485 0 0);
|
||||
--primary: oklch(0.4891 0 0);
|
||||
--primary-foreground: oklch(0.9551 0 0);
|
||||
--secondary: oklch(0.9006 0 0);
|
||||
--secondary-foreground: oklch(0.3485 0 0);
|
||||
--muted: oklch(0.9158 0 0);
|
||||
--muted-foreground: oklch(0.4313 0 0);
|
||||
--accent: oklch(0.9354 0.0456 94.8549);
|
||||
--accent-foreground: oklch(0.4015 0.0436 37.9587);
|
||||
--destructive: oklch(0.6627 0.0978 20.0041);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.5538 0.0025 17.232);
|
||||
--input: oklch(1 0 0);
|
||||
--ring: oklch(0.7058 0 0);
|
||||
--chart-1: oklch(0.3211 0 0);
|
||||
--chart-2: oklch(0.4495 0 0);
|
||||
--chart-3: oklch(0.5693 0 0);
|
||||
--chart-4: oklch(0.683 0 0);
|
||||
--chart-5: oklch(0.7921 0 0);
|
||||
--sidebar: oklch(0.9551 0 0);
|
||||
--sidebar-foreground: oklch(0.3485 0 0);
|
||||
--sidebar-primary: oklch(0.4891 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9551 0 0);
|
||||
--sidebar-accent: oklch(0.9354 0.0456 94.8549);
|
||||
--sidebar-accent-foreground: oklch(0.4015 0.0436 37.9587);
|
||||
--sidebar-border: oklch(0.8078 0 0);
|
||||
--sidebar-ring: oklch(0.7058 0 0);
|
||||
--font-sans: 'Architects Daughter', sans-serif;
|
||||
--font-serif: 'Times New Roman', Times, serif;
|
||||
--font-mono: 'Courier New', Courier, monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-x: 1px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 5px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.03;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
|
||||
--shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
|
||||
--shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
|
||||
--tracking-normal: 0.5px;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='notebook'].dark {
|
||||
--background: oklch(0.2891 0 0);
|
||||
--foreground: oklch(0.8945 0 0);
|
||||
--card: oklch(0.3211 0 0);
|
||||
--card-foreground: oklch(0.8945 0 0);
|
||||
--popover: oklch(0.3211 0 0);
|
||||
--popover-foreground: oklch(0.8945 0 0);
|
||||
--primary: oklch(0.7572 0 0);
|
||||
--primary-foreground: oklch(0.2891 0 0);
|
||||
--secondary: oklch(0.4676 0 0);
|
||||
--secondary-foreground: oklch(0.8078 0 0);
|
||||
--muted: oklch(0.3904 0 0);
|
||||
--muted-foreground: oklch(0.7058 0 0);
|
||||
--accent: oklch(0.9067 0 0);
|
||||
--accent-foreground: oklch(0.3211 0 0);
|
||||
--destructive: oklch(0.7915 0.0491 18.241);
|
||||
--destructive-foreground: oklch(0.2891 0 0);
|
||||
--border: oklch(0.4276 0 0);
|
||||
--input: oklch(0.3211 0 0);
|
||||
--ring: oklch(0.8078 0 0);
|
||||
--chart-1: oklch(0.9521 0 0);
|
||||
--chart-2: oklch(0.8576 0 0);
|
||||
--chart-3: oklch(0.7572 0 0);
|
||||
--chart-4: oklch(0.6534 0 0);
|
||||
--chart-5: oklch(0.5452 0 0);
|
||||
--sidebar: oklch(0.2478 0 0);
|
||||
--sidebar-foreground: oklch(0.8945 0 0);
|
||||
--sidebar-primary: oklch(0.7572 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.2478 0 0);
|
||||
--sidebar-accent: oklch(0.9067 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.3211 0 0);
|
||||
--sidebar-border: oklch(0.4276 0 0);
|
||||
--sidebar-ring: oklch(0.8078 0 0);
|
||||
--font-sans: 'Architects Daughter', sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: 'Fira Code', 'Courier New', monospace;
|
||||
--radius: 0.625rem;
|
||||
--shadow-x: 1px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 5px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.03;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
|
||||
--shadow-xs: 1px 4px 5px 0px hsl(0 0% 0% / 0.01);
|
||||
--shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03);
|
||||
--shadow-2xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.07);
|
||||
}
|
||||
|
||||
[data-theme='notebook'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme='notebook'] body {
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
167
src/styles/themes/supabase.css
Normal file
167
src/styles/themes/supabase.css
Normal file
@@ -0,0 +1,167 @@
|
||||
[data-theme='supabase'] {
|
||||
--background: oklch(0.9911 0 0);
|
||||
--foreground: oklch(0.2046 0 0);
|
||||
--card: oklch(0.9911 0 0);
|
||||
--card-foreground: oklch(0.2046 0 0);
|
||||
--popover: oklch(0.9911 0 0);
|
||||
--popover-foreground: oklch(0.4386 0 0);
|
||||
--primary: oklch(0.8348 0.1302 160.908);
|
||||
--primary-foreground: oklch(0.2626 0.0147 166.4589);
|
||||
--secondary: oklch(0.994 0 0);
|
||||
--secondary-foreground: oklch(0.2046 0 0);
|
||||
--muted: oklch(0.9461 0 0);
|
||||
--muted-foreground: oklch(0.2435 0 0);
|
||||
--accent: oklch(0.9461 0 0);
|
||||
--accent-foreground: oklch(0.2435 0 0);
|
||||
--destructive: oklch(0.5523 0.1927 32.7272);
|
||||
--destructive-foreground: oklch(0.9934 0.0032 17.2118);
|
||||
--border: oklch(0.9037 0 0);
|
||||
--input: oklch(0.9731 0 0);
|
||||
--ring: oklch(0.8348 0.1302 160.908);
|
||||
--chart-1: oklch(0.8348 0.1302 160.908);
|
||||
--chart-2: oklch(0.6231 0.188 259.8145);
|
||||
--chart-3: oklch(0.6056 0.2189 292.7172);
|
||||
--chart-4: oklch(0.7686 0.1647 70.0804);
|
||||
--chart-5: oklch(0.6959 0.1491 162.4796);
|
||||
--sidebar: oklch(0.9911 0 0);
|
||||
--sidebar-foreground: oklch(0.5452 0 0);
|
||||
--sidebar-primary: oklch(0.8348 0.1302 160.908);
|
||||
--sidebar-primary-foreground: oklch(0.2626 0.0147 166.4589);
|
||||
--sidebar-accent: oklch(0.9461 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.2435 0 0);
|
||||
--sidebar-border: oklch(0.9037 0 0);
|
||||
--sidebar-ring: oklch(0.8348 0.1302 160.908);
|
||||
--font-sans: Outfit, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.17;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
|
||||
--tracking-normal: 0.025em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='supabase'].dark {
|
||||
--background: oklch(0.1822 0 0);
|
||||
--foreground: oklch(0.9288 0.0126 255.5078);
|
||||
--card: oklch(0.2046 0 0);
|
||||
--card-foreground: oklch(0.9288 0.0126 255.5078);
|
||||
--popover: oklch(0.2603 0 0);
|
||||
--popover-foreground: oklch(0.7348 0 0);
|
||||
--primary: oklch(0.4365 0.1044 156.7556);
|
||||
--primary-foreground: oklch(0.9213 0.0135 167.1556);
|
||||
--secondary: oklch(0.2603 0 0);
|
||||
--secondary-foreground: oklch(0.9851 0 0);
|
||||
--muted: oklch(0.2393 0 0);
|
||||
--muted-foreground: oklch(0.7122 0 0);
|
||||
--accent: oklch(0.3132 0 0);
|
||||
--accent-foreground: oklch(0.9851 0 0);
|
||||
--destructive: oklch(0.3123 0.0852 29.7877);
|
||||
--destructive-foreground: oklch(0.9368 0.0045 34.3092);
|
||||
--border: oklch(0.2809 0 0);
|
||||
--input: oklch(0.2603 0 0);
|
||||
--ring: oklch(0.8003 0.1821 151.711);
|
||||
--chart-1: oklch(0.8003 0.1821 151.711);
|
||||
--chart-2: oklch(0.7137 0.1434 254.624);
|
||||
--chart-3: oklch(0.709 0.1592 293.5412);
|
||||
--chart-4: oklch(0.8369 0.1644 84.4286);
|
||||
--chart-5: oklch(0.7845 0.1325 181.912);
|
||||
--sidebar: oklch(0.1822 0 0);
|
||||
--sidebar-foreground: oklch(0.6301 0 0);
|
||||
--sidebar-primary: oklch(0.4365 0.1044 156.7556);
|
||||
--sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
|
||||
--sidebar-accent: oklch(0.3132 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.9851 0 0);
|
||||
--sidebar-border: oklch(0.2809 0 0);
|
||||
--sidebar-ring: oklch(0.8003 0.1821 151.711);
|
||||
--font-sans: Outfit, sans-serif;
|
||||
--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||
--font-mono: monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 3px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.17;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
|
||||
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
|
||||
--tracking-normal: 0.025em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='supabase'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
}
|
||||
}
|
||||
159
src/styles/themes/vercel.css
Normal file
159
src/styles/themes/vercel.css
Normal file
@@ -0,0 +1,159 @@
|
||||
[data-theme='vercel'] {
|
||||
--background: oklch(0.99 0 0);
|
||||
--foreground: oklch(0 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0 0 0);
|
||||
--popover: oklch(0.99 0 0);
|
||||
--popover-foreground: oklch(0 0 0);
|
||||
--primary: oklch(0 0 0);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.94 0 0);
|
||||
--secondary-foreground: oklch(0 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.44 0 0);
|
||||
--accent: oklch(0.94 0 0);
|
||||
--accent-foreground: oklch(0 0 0);
|
||||
--destructive: oklch(0.63 0.19 23.03);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.92 0 0);
|
||||
--input: oklch(0.94 0 0);
|
||||
--ring: oklch(0 0 0);
|
||||
--chart-1: oklch(0.81 0.17 75.35);
|
||||
--chart-2: oklch(0.55 0.22 264.53);
|
||||
--chart-3: oklch(0.72 0 0);
|
||||
--chart-4: oklch(0.92 0 0);
|
||||
--chart-5: oklch(0.56 0 0);
|
||||
--sidebar: oklch(0.99 0 0);
|
||||
--sidebar-foreground: oklch(0 0 0);
|
||||
--sidebar-primary: oklch(0 0 0);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.94 0 0);
|
||||
--sidebar-accent-foreground: oklch(0 0 0);
|
||||
--sidebar-border: oklch(0.94 0 0);
|
||||
--sidebar-ring: oklch(0 0 0);
|
||||
--font-sans: Geist, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 2px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.18;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='vercel'].dark {
|
||||
--background: oklch(0 0 0);
|
||||
--foreground: oklch(1 0 0);
|
||||
--card: oklch(0.14 0 0);
|
||||
--card-foreground: oklch(1 0 0);
|
||||
--popover: oklch(0.18 0 0);
|
||||
--popover-foreground: oklch(1 0 0);
|
||||
--primary: oklch(1 0 0);
|
||||
--primary-foreground: oklch(0 0 0);
|
||||
--secondary: oklch(0.25 0 0);
|
||||
--secondary-foreground: oklch(1 0 0);
|
||||
--muted: oklch(0.23 0 0);
|
||||
--muted-foreground: oklch(0.72 0 0);
|
||||
--accent: oklch(0.32 0 0);
|
||||
--accent-foreground: oklch(1 0 0);
|
||||
--destructive: oklch(0.69 0.2 23.91);
|
||||
--destructive-foreground: oklch(0 0 0);
|
||||
--border: oklch(0.26 0 0);
|
||||
--input: oklch(0.32 0 0);
|
||||
--ring: oklch(0.72 0 0);
|
||||
--chart-1: oklch(0.81 0.17 75.35);
|
||||
--chart-2: oklch(0.58 0.21 260.84);
|
||||
--chart-3: oklch(0.56 0 0);
|
||||
--chart-4: oklch(0.44 0 0);
|
||||
--chart-5: oklch(0.92 0 0);
|
||||
--sidebar: oklch(0.18 0 0);
|
||||
--sidebar-foreground: oklch(1 0 0);
|
||||
--sidebar-primary: oklch(1 0 0);
|
||||
--sidebar-primary-foreground: oklch(0 0 0);
|
||||
--sidebar-accent: oklch(0.32 0 0);
|
||||
--sidebar-accent-foreground: oklch(1 0 0);
|
||||
--sidebar-border: oklch(0.32 0 0);
|
||||
--sidebar-ring: oklch(0.72 0 0);
|
||||
--font-sans: Geist, sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: Geist Mono, monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 1px;
|
||||
--shadow-blur: 2px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.18;
|
||||
--shadow-color: hsl(0 0% 0%);
|
||||
--shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09);
|
||||
--shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18);
|
||||
--shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45);
|
||||
}
|
||||
|
||||
[data-theme='vercel'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
163
src/styles/themes/whatsapp.css
Normal file
163
src/styles/themes/whatsapp.css
Normal file
@@ -0,0 +1,163 @@
|
||||
[data-theme='whatsapp'] {
|
||||
--background: oklch(0.9605 0.0046 258.3248);
|
||||
--foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--primary: oklch(0.4335 0.0754 182.2315);
|
||||
--primary-foreground: oklch(1 0 0);
|
||||
--secondary: oklch(0.9644 0.0208 166.1014);
|
||||
--secondary-foreground: oklch(0.4335 0.0754 182.2315);
|
||||
--muted: oklch(0.9605 0.0046 258.3248);
|
||||
--muted-foreground: oklch(0.5589 0.0255 233.7233);
|
||||
--accent: oklch(0.761 0.2015 149.7403);
|
||||
--accent-foreground: oklch(1 0 0);
|
||||
--destructive: oklch(0.6257 0.2058 29.0773);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.9436 0.0051 228.8204);
|
||||
--input: oklch(0.9436 0.0051 228.8204);
|
||||
--ring: oklch(0.761 0.2015 149.7403);
|
||||
--chart-1: oklch(0.761 0.2015 149.7403);
|
||||
--chart-2: oklch(0.4335 0.0754 182.2315);
|
||||
--chart-3: oklch(0.5762 0.0995 182.3964);
|
||||
--chart-4: oklch(0.7356 0.137 232.8053);
|
||||
--chart-5: oklch(0.6509 0.1283 170.4258);
|
||||
--sidebar: oklch(1 0 0);
|
||||
--sidebar-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--sidebar-primary: oklch(0.4335 0.0754 182.2315);
|
||||
--sidebar-primary-foreground: oklch(1 0 0);
|
||||
--sidebar-accent: oklch(0.9644 0.0208 166.1014);
|
||||
--sidebar-accent-foreground: oklch(0.4335 0.0754 182.2315);
|
||||
--sidebar-border: oklch(0.9436 0.0051 228.8204);
|
||||
--sidebar-ring: oklch(0.761 0.2015 149.7403);
|
||||
--font-sans:
|
||||
'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans',
|
||||
sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--radius: 1rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 2px;
|
||||
--shadow-blur: 10px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: rgba(0, 0, 0, 0.1);
|
||||
--shadow-2xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0px 2px 10px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0px 2px 10px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow: 0px 2px 10px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0px 2px 10px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0px 2px 10px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0px 2px 10px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0px 2px 10px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='whatsapp'].dark {
|
||||
--background: oklch(0.1854 0.0182 238.2143);
|
||||
--foreground: oklch(0.9436 0.0051 228.8204);
|
||||
--card: oklch(0.2848 0.023 235.6578);
|
||||
--card-foreground: oklch(0.9436 0.0051 228.8204);
|
||||
--popover: oklch(0.2848 0.023 235.6578);
|
||||
--popover-foreground: oklch(0.9436 0.0051 228.8204);
|
||||
--primary: oklch(0.6509 0.1283 170.4258);
|
||||
--primary-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--secondary: oklch(0.2933 0.0423 172.8195);
|
||||
--secondary-foreground: oklch(0.6509 0.1283 170.4258);
|
||||
--muted: oklch(0.2456 0.0195 239.1061);
|
||||
--muted-foreground: oklch(0.6637 0.0236 235.1968);
|
||||
--accent: oklch(0.761 0.2015 149.7403);
|
||||
--accent-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--destructive: oklch(0.6257 0.2058 29.0773);
|
||||
--destructive-foreground: oklch(0.9436 0.0051 228.8204);
|
||||
--border: oklch(0.3351 0.0253 234.8586);
|
||||
--input: oklch(0.3351 0.0253 234.8586);
|
||||
--ring: oklch(0.6509 0.1283 170.4258);
|
||||
--chart-1: oklch(0.761 0.2015 149.7403);
|
||||
--chart-2: oklch(0.6509 0.1283 170.4258);
|
||||
--chart-3: oklch(0.5762 0.0995 182.3964);
|
||||
--chart-4: oklch(0.7356 0.137 232.8053);
|
||||
--chart-5: oklch(0.4335 0.0754 182.2315);
|
||||
--sidebar: oklch(0.2153 0.0187 235.1251);
|
||||
--sidebar-foreground: oklch(0.9436 0.0051 228.8204);
|
||||
--sidebar-primary: oklch(0.6509 0.1283 170.4258);
|
||||
--sidebar-primary-foreground: oklch(0.2153 0.0187 235.1251);
|
||||
--sidebar-accent: oklch(0.2933 0.0423 172.8195);
|
||||
--sidebar-accent-foreground: oklch(0.6509 0.1283 170.4258);
|
||||
--sidebar-border: oklch(0.3351 0.0253 234.8586);
|
||||
--sidebar-ring: oklch(0.6509 0.1283 170.4258);
|
||||
--font-sans:
|
||||
'Segoe UI', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, Ubuntu, Cantarell, 'Fira Sans',
|
||||
sans-serif;
|
||||
--font-serif: Georgia, serif;
|
||||
--font-mono: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
||||
--radius: 1rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 12px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.4;
|
||||
--shadow-color: rgba(0, 0, 0, 0.4);
|
||||
--shadow-2xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.2);
|
||||
--shadow-xs: 0px 4px 12px 0px hsl(0 0% 0% / 0.2);
|
||||
--shadow-sm: 0px 4px 12px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow: 0px 4px 12px 0px hsl(0 0% 0% / 0.4), 0px 1px 2px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-md: 0px 4px 12px 0px hsl(0 0% 0% / 0.4), 0px 2px 4px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-lg: 0px 4px 12px 0px hsl(0 0% 0% / 0.4), 0px 4px 6px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-xl: 0px 4px 12px 0px hsl(0 0% 0% / 0.4), 0px 8px 10px -1px hsl(0 0% 0% / 0.4);
|
||||
--shadow-2xl: 0px 4px 12px 0px hsl(0 0% 0% / 1);
|
||||
}
|
||||
|
||||
[data-theme='whatsapp'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
}
|
||||
}
|
||||
165
src/styles/themes/zen.css
Normal file
165
src/styles/themes/zen.css
Normal file
@@ -0,0 +1,165 @@
|
||||
[data-theme='zen'] {
|
||||
--background: oklch(0.9195 0.0169 88.003);
|
||||
--foreground: oklch(0.235 0 0);
|
||||
--card: oklch(0.953 0.0156 86.4257);
|
||||
--card-foreground: oklch(0.235 0 0);
|
||||
--popover: oklch(0.953 0.0156 86.4257);
|
||||
--popover-foreground: oklch(0.235 0 0);
|
||||
--primary: oklch(0.3012 0 0);
|
||||
--primary-foreground: oklch(0.9169 0.0175 99.616);
|
||||
--secondary: oklch(0.8647 0.0201 87.5232);
|
||||
--secondary-foreground: oklch(0.3012 0 0);
|
||||
--muted: oklch(0.834 0.0232 87.163);
|
||||
--muted-foreground: oklch(0.4688 0.0136 84.5932);
|
||||
--accent: oklch(0.9169 0.0175 99.616);
|
||||
--accent-foreground: oklch(0.3012 0 0);
|
||||
--destructive: oklch(0.5771 0.2152 27.325);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.8434 0.0231 87.1621);
|
||||
--input: oklch(0.8434 0.0231 87.1621);
|
||||
--ring: oklch(0.3012 0 0);
|
||||
--chart-1: oklch(0.6863 0.1743 34.2614);
|
||||
--chart-2: oklch(0.235 0 0);
|
||||
--chart-3: oklch(0.4688 0.0136 84.5932);
|
||||
--chart-4: oklch(0.7057 0.025 82.0932);
|
||||
--chart-5: oklch(0.834 0.0232 87.163);
|
||||
--sidebar: oklch(0.8985 0.0199 87.5195);
|
||||
--sidebar-foreground: oklch(0.235 0 0);
|
||||
--sidebar-primary: oklch(0.3012 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.9169 0.0175 99.616);
|
||||
--sidebar-accent: oklch(0.9169 0.0175 99.616);
|
||||
--sidebar-accent-foreground: oklch(0.3012 0 0);
|
||||
--sidebar-border: oklch(0.8434 0.0231 87.1621);
|
||||
--sidebar-ring: oklch(0.3012 0 0);
|
||||
--font-sans: var(--font-inter), sans-serif;
|
||||
--font-serif: var(--font-playfair-display), serif;
|
||||
--font-mono: var(--font-jetbrains-mono), monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 4px;
|
||||
--shadow-blur: 10px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.1;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-xs: 0px 4px 10px 0px hsl(0 0% 0% / 0.05);
|
||||
--shadow-sm: 0px 4px 10px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow: 0px 4px 10px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-md: 0px 4px 10px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-lg: 0px 4px 10px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px hsl(0 0% 0% / 0.1);
|
||||
--shadow-2xl: 0px 4px 10px 0px hsl(0 0% 0% / 0.25);
|
||||
--tracking-normal: 0.01em;
|
||||
--spacing: 0.25rem;
|
||||
}
|
||||
|
||||
[data-theme='zen'].dark {
|
||||
--background: oklch(0.1913 0 0);
|
||||
--foreground: oklch(0.9173 0.0133 82.4015);
|
||||
--card: oklch(0.2264 0 0);
|
||||
--card-foreground: oklch(0.9173 0.0133 82.4015);
|
||||
--popover: oklch(0.2264 0 0);
|
||||
--popover-foreground: oklch(0.9173 0.0133 82.4015);
|
||||
--primary: oklch(0.852 0.0205 100.6306);
|
||||
--primary-foreground: oklch(0.3329 0 0);
|
||||
--secondary: oklch(0.252 0 0);
|
||||
--secondary-foreground: oklch(0.852 0.0205 100.6306);
|
||||
--muted: oklch(0.285 0 0);
|
||||
--muted-foreground: oklch(0.6348 0.0113 81.7875);
|
||||
--accent: oklch(0.3329 0 0);
|
||||
--accent-foreground: oklch(0.852 0.0205 100.6306);
|
||||
--destructive: oklch(0.6368 0.2078 25.3313);
|
||||
--destructive-foreground: oklch(1 0 0);
|
||||
--border: oklch(0.2931 0 0);
|
||||
--input: oklch(0.2931 0 0);
|
||||
--ring: oklch(0.852 0.0205 100.6306);
|
||||
--chart-1: oklch(0.6863 0.1743 34.2614);
|
||||
--chart-2: oklch(0.859 0.0209 74.6369);
|
||||
--chart-3: oklch(0.6348 0.0113 81.7875);
|
||||
--chart-4: oklch(0.4681 0.0069 84.5829);
|
||||
--chart-5: oklch(0.3523 0 0);
|
||||
--sidebar: oklch(0.173 0 0);
|
||||
--sidebar-foreground: oklch(0.9173 0.0133 82.4015);
|
||||
--sidebar-primary: oklch(0.852 0.0205 100.6306);
|
||||
--sidebar-primary-foreground: oklch(0.3329 0 0);
|
||||
--sidebar-accent: oklch(0.3329 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.852 0.0205 100.6306);
|
||||
--sidebar-border: oklch(0.2931 0 0);
|
||||
--sidebar-ring: oklch(0.852 0.0205 100.6306);
|
||||
--font-sans: var(--font-inter), sans-serif;
|
||||
--font-serif: var(--font-playfair-display), serif;
|
||||
--font-mono: var(--font-jetbrains-mono), monospace;
|
||||
--radius: 0.5rem;
|
||||
--shadow-x: 0px;
|
||||
--shadow-y: 6px;
|
||||
--shadow-blur: 15px;
|
||||
--shadow-spread: 0px;
|
||||
--shadow-opacity: 0.3;
|
||||
--shadow-color: #000000;
|
||||
--shadow-2xs: 0px 6px 15px 0px hsl(0 0% 0% / 0.15);
|
||||
--shadow-xs: 0px 6px 15px 0px hsl(0 0% 0% / 0.15);
|
||||
--shadow-sm: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 1px 2px -1px hsl(0 0% 0% / 0.3);
|
||||
--shadow: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 1px 2px -1px hsl(0 0% 0% / 0.3);
|
||||
--shadow-md: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 2px 4px -1px hsl(0 0% 0% / 0.3);
|
||||
--shadow-lg: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 4px 6px -1px hsl(0 0% 0% / 0.3);
|
||||
--shadow-xl: 0px 6px 15px 0px hsl(0 0% 0% / 0.3), 0px 8px 10px -1px hsl(0 0% 0% / 0.3);
|
||||
--shadow-2xl: 0px 6px 15px 0px hsl(0 0% 0% / 0.75);
|
||||
}
|
||||
|
||||
[data-theme='zen'] {
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--font-sans: var(--font-sans);
|
||||
--font-mono: var(--font-mono);
|
||||
--font-serif: var(--font-serif);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--shadow-2xs: var(--shadow-2xs);
|
||||
--shadow-xs: var(--shadow-xs);
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow: var(--shadow);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
--tracking-tighter: calc(var(--tracking-normal) - 0.05em);
|
||||
--tracking-tight: calc(var(--tracking-normal) - 0.025em);
|
||||
--tracking-normal: var(--tracking-normal);
|
||||
--tracking-wide: calc(var(--tracking-normal) + 0.025em);
|
||||
--tracking-wider: calc(var(--tracking-normal) + 0.05em);
|
||||
--tracking-widest: calc(var(--tracking-normal) + 0.1em);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user