fix tailwind
This commit is contained in:
parent
00f4bfa583
commit
f2a3f5e53e
63 changed files with 807 additions and 562 deletions
|
|
@ -1,314 +1,146 @@
|
|||
@import "tailwindcss";
|
||||
@config "../../tailwind.config.js";
|
||||
@import 'tailwindcss';
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Light theme */
|
||||
--background: 0 0% 100%;
|
||||
--background: oklch(0.97 0.02 250);
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--foreground: oklch(0.40 0.03 265);
|
||||
@plugin 'tailwindcss-animate';
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card: oklch(0.92 0.02 260);
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: oklch(0.40 0.03 265);
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover: oklch(0.92 0.02 260);
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover-foreground: oklch(0.40 0.03 265);
|
||||
@theme {
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary: oklch(0.60 0.20 260);
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary-foreground: oklch(0.97 0.02 250);
|
||||
--color-background: oklch(var(--background));
|
||||
--color-foreground: oklch(var(--foreground));
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary: oklch(0.87 0.03 255);
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary-foreground: oklch(0.40 0.03 265);
|
||||
--color-card: oklch(var(--card));
|
||||
--color-card-foreground: oklch(var(--card-foreground));
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted: oklch(0.87 0.03 255);
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted-foreground: oklch(0.55 0.03 265);
|
||||
--color-popover: oklch(var(--popover));
|
||||
--color-popover-foreground: oklch(var(--popover-foreground));
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent: oklch(0.70 0.15 30);
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent-foreground: oklch(0.97 0.02 250);
|
||||
--color-primary: oklch(var(--primary));
|
||||
--color-primary-foreground: oklch(var(--primary-foreground));
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive: oklch(0.50 0.28 15);
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive-foreground: oklch(0.97 0.02 250);
|
||||
--color-secondary: oklch(var(--secondary));
|
||||
--color-secondary-foreground: oklch(var(--secondary-foreground));
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--border: oklch(0.83 0.02 265);
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--input: oklch(0.83 0.02 265);
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--ring: oklch(0.60 0.20 260);
|
||||
--color-muted: oklch(var(--muted));
|
||||
--color-muted-foreground: oklch(var(--muted-foreground));
|
||||
|
||||
--radius: 0.5rem;
|
||||
--color-accent: oklch(var(--accent));
|
||||
--color-accent-foreground: oklch(var(--accent-foreground));
|
||||
|
||||
--chart-1: 12 76% 61%;
|
||||
--color-destructive: oklch(var(--destructive));
|
||||
--color-destructive-foreground: oklch(var(--destructive-foreground));
|
||||
|
||||
--chart-2: 173 58% 39%;
|
||||
--color-border: oklch(var(--border));
|
||||
--color-input: oklch(var(--input));
|
||||
--color-ring: oklch(var(--ring));
|
||||
|
||||
--chart-3: 197 37% 24%;
|
||||
--color-chart-1: oklch(var(--chart-1));
|
||||
--color-chart-2: oklch(var(--chart-2));
|
||||
--color-chart-3: oklch(var(--chart-3));
|
||||
--color-chart-4: oklch(var(--chart-4));
|
||||
--color-chart-5: oklch(var(--chart-5));
|
||||
|
||||
--chart-4: 43 74% 66%;
|
||||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||||
|
||||
--chart-5: 27 87% 67%;
|
||||
@keyframes accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--reka-accordion-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Dark theme */
|
||||
--background: 222.2 84% 4.9%;
|
||||
--background: oklch(0.25 0.05 265);
|
||||
--foreground: 210 40% 98%;
|
||||
--foreground: oklch(0.90 0.03 260);
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card: oklch(0.20 0.05 265);
|
||||
--card-foreground: 210 40% 98%;
|
||||
--card-foreground: oklch(0.90 0.03 260);
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover: oklch(0.20 0.05 265);
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--popover-foreground: oklch(0.90 0.03 260);
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary: oklch(0.75 0.15 260);
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: oklch(0.25 0.05 265);
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary: oklch(0.30 0.06 265);
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--secondary-foreground: oklch(0.90 0.03 260);
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted: oklch(0.30 0.06 265);
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted-foreground: oklch(0.78 0.06 265);
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent: oklch(0.83 0.12 30);
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--accent-foreground: oklch(0.25 0.05 265);
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive: oklch(0.75 0.18 15);
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive-foreground: oklch(0.25 0.05 265);
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--border: oklch(0.30 0.06 265);
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--input: oklch(0.30 0.06 265);
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--ring: oklch(0.75 0.15 260);
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply box-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.bg-background {
|
||||
background-color: var(--background);
|
||||
}
|
||||
.bg-foreground {
|
||||
background-color: var(--foreground);
|
||||
}
|
||||
.bg-card {
|
||||
background-color: var(--card);
|
||||
}
|
||||
.bg-card-foreground {
|
||||
background-color: var(--card-foreground);
|
||||
}
|
||||
.bg-popover {
|
||||
background-color: var(--popover);
|
||||
}
|
||||
.bg-popover-foreground {
|
||||
background-color: var(--popover-foreground);
|
||||
}
|
||||
.bg-primary {
|
||||
background-color: var(--primary);
|
||||
}
|
||||
.bg-primary-foreground {
|
||||
background-color: var(--primary-foreground);
|
||||
}
|
||||
.bg-secondary {
|
||||
background-color: var(--secondary);
|
||||
}
|
||||
.bg-secondary-foreground {
|
||||
background-color: var(--secondary-foreground);
|
||||
}
|
||||
.bg-muted {
|
||||
background-color: var(--muted);
|
||||
}
|
||||
.bg-muted-foreground {
|
||||
background-color: var(--muted-foreground);
|
||||
}
|
||||
.bg-accent {
|
||||
background-color: var(--accent);
|
||||
}
|
||||
.bg-accent-foreground {
|
||||
background-color: var(--accent-foreground);
|
||||
}
|
||||
.bg-destructive {
|
||||
background-color: var(--destructive);
|
||||
}
|
||||
.bg-destructive-foreground {
|
||||
background-color: var(--destructive-foreground);
|
||||
}
|
||||
|
||||
.text-background {
|
||||
color: var(--background);
|
||||
}
|
||||
.text-foreground {
|
||||
color: var(--foreground);
|
||||
}
|
||||
.text-card {
|
||||
color: var(--card);
|
||||
}
|
||||
.text-card-foreground {
|
||||
color: var(--card-foreground);
|
||||
}
|
||||
.text-popover {
|
||||
color: var(--popover);
|
||||
}
|
||||
.text-popover-foreground {
|
||||
color: var(--popover-foreground);
|
||||
}
|
||||
.text-primary {
|
||||
color: var(--primary);
|
||||
}
|
||||
.text-primary-foreground {
|
||||
color: var(--primary-foreground);
|
||||
}
|
||||
.text-secondary {
|
||||
color: var(--secondary);
|
||||
}
|
||||
.text-secondary-foreground {
|
||||
color: var(--secondary-foreground);
|
||||
}
|
||||
.text-muted {
|
||||
color: var(--muted);
|
||||
}
|
||||
.text-muted-foreground {
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
.text-accent {
|
||||
color: var(--accent);
|
||||
}
|
||||
.text-accent-foreground {
|
||||
color: var(--accent-foreground);
|
||||
}
|
||||
.text-destructive {
|
||||
color: var(--destructive);
|
||||
}
|
||||
.text-destructive-foreground {
|
||||
color: var(--destructive-foreground);
|
||||
}
|
||||
|
||||
@supports not (backdrop-filter: blur(1px)) {
|
||||
.select-content {
|
||||
background-color: var(--background);
|
||||
@keyframes accordion-up {
|
||||
from {
|
||||
height: var(--reka-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for ring colors */
|
||||
@layer utilities {
|
||||
.ring-border {
|
||||
--tw-ring-color: var(--border);
|
||||
}
|
||||
.ring-primary {
|
||||
--tw-ring-color: var(--primary);
|
||||
}
|
||||
.ring-background {
|
||||
--tw-ring-color: var(--background);
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
|
||||
If we ever want to remove these styles, we need to add an explicit border
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
/* Add support for border colors */
|
||||
@layer utilities {
|
||||
.border {
|
||||
border-color: var(--border);
|
||||
@layer base {
|
||||
:root {
|
||||
/* Catppuccin Latte */
|
||||
--background: 0.97 0.005 235; /* base */
|
||||
--foreground: 0.30 0.02 235; /* text */
|
||||
--card: 0.97 0.005 235;
|
||||
--card-foreground: 0.30 0.02 235;
|
||||
--popover: 0.97 0.005 235;
|
||||
--popover-foreground: 0.30 0.02 235;
|
||||
--primary: 0.55 0.15 250; /* lavender */
|
||||
--primary-foreground: 0.97 0.005 235;
|
||||
--secondary: 0.90 0.03 235; /* surface1 */
|
||||
--secondary-foreground: 0.30 0.02 235;
|
||||
--muted: 0.93 0.02 235; /* surface0 */
|
||||
--muted-foreground: 0.50 0.02 235; /* subtext0 */
|
||||
--accent: 0.65 0.15 290; /* mauve */
|
||||
--accent-foreground: 0.30 0.02 235;
|
||||
--destructive: 0.65 0.25 0; /* red */
|
||||
--destructive-foreground: 0.97 0.005 235;
|
||||
--border: 0.90 0.03 235; /* surface1 */
|
||||
--input: 0.90 0.03 235;
|
||||
--ring: 0.55 0.15 250; /* lavender */
|
||||
--chart-1: 0.65 0.25 0; /* red */
|
||||
--chart-2: 0.75 0.20 30; /* peach */
|
||||
--chart-3: 0.80 0.15 90; /* yellow */
|
||||
--chart-4: 0.70 0.15 150; /* green */
|
||||
--chart-5: 0.60 0.15 180; /* blue */
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
.border-x {
|
||||
border-left-color: var(--border);
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
.border-y {
|
||||
border-top-color: var(--border);
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
.border-t {
|
||||
border-top-color: var(--border);
|
||||
}
|
||||
.border-r {
|
||||
border-right-color: var(--border);
|
||||
}
|
||||
.border-b {
|
||||
border-bottom-color: var(--border);
|
||||
}
|
||||
.border-l {
|
||||
border-left-color: var(--border);
|
||||
}
|
||||
.border-primary {
|
||||
border-color: var(--primary);
|
||||
}
|
||||
.border-background {
|
||||
border-color: var(--background);
|
||||
}
|
||||
.border-foreground {
|
||||
border-color: var(--foreground);
|
||||
}
|
||||
.border-card {
|
||||
border-color: var(--card);
|
||||
}
|
||||
.border-card-foreground {
|
||||
border-color: var(--card-foreground);
|
||||
}
|
||||
.border-muted {
|
||||
border-color: var(--muted);
|
||||
}
|
||||
.border-muted-foreground {
|
||||
border-color: var(--muted-foreground);
|
||||
}
|
||||
.border-accent {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.border-accent-foreground {
|
||||
border-color: var(--accent-foreground);
|
||||
}
|
||||
.border-destructive {
|
||||
border-color: var(--destructive);
|
||||
}
|
||||
.border-destructive-foreground {
|
||||
border-color: var(--destructive-foreground);
|
||||
|
||||
.dark {
|
||||
/* Catppuccin Mocha */
|
||||
--background: 0.20 0.02 235; /* base */
|
||||
--foreground: 0.90 0.02 235; /* text */
|
||||
--card: 0.20 0.02 235;
|
||||
--card-foreground: 0.90 0.02 235;
|
||||
--popover: 0.20 0.02 235;
|
||||
--popover-foreground: 0.90 0.02 235;
|
||||
--primary: 0.55 0.15 250; /* lavender */
|
||||
--primary-foreground: 0.20 0.02 235;
|
||||
--secondary: 0.25 0.02 235; /* surface1 */
|
||||
--secondary-foreground: 0.90 0.02 235;
|
||||
--muted: 0.23 0.02 235; /* surface0 */
|
||||
--muted-foreground: 0.70 0.02 235; /* subtext0 */
|
||||
--accent: 0.65 0.15 290; /* mauve */
|
||||
--accent-foreground: 0.90 0.02 235;
|
||||
--destructive: 0.65 0.25 0; /* red */
|
||||
--destructive-foreground: 0.90 0.02 235;
|
||||
--border: 0.25 0.02 235; /* surface1 */
|
||||
--input: 0.25 0.02 235;
|
||||
--ring: 0.55 0.15 250; /* lavender */
|
||||
--chart-1: 0.65 0.25 0; /* red */
|
||||
--chart-2: 0.75 0.20 30; /* peach */
|
||||
--chart-3: 0.80 0.15 90; /* yellow */
|
||||
--chart-4: 0.70 0.15 150; /* green */
|
||||
--chart-5: 0.60 0.15 180; /* blue */
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue