New Style Setup Config
This commit is contained in:
+2
-237
@@ -1,9 +1,9 @@
|
||||
@import "./style.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin "@tailwindcss/forms";
|
||||
|
||||
@layer base {
|
||||
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
@@ -11,239 +11,4 @@
|
||||
}
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
@custom-variant hover (&:hover);
|
||||
|
||||
:root {
|
||||
/* Roles (defaults) */
|
||||
--primary: 221 83% 53%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 262 83% 58%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 26 95% 55%;
|
||||
--tertiary-foreground: 26 100% 10%;
|
||||
--accent: 173 80% 40%;
|
||||
--accent-foreground: 168 75% 97%;
|
||||
--info: 199 89% 48%;
|
||||
--info-foreground: 210 40% 98%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
--link: 221 83% 53%;
|
||||
--link-visited: 262 83% 58%;
|
||||
}
|
||||
|
||||
/* ---------- Brand palettes (swap only role colors) ---------- */
|
||||
/* ocean */
|
||||
[data-color="ocean"] {
|
||||
--primary: 199 89% 48%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 172 66% 45%;
|
||||
--secondary-foreground: 168 75% 97%;
|
||||
--tertiary: 260 84% 60%;
|
||||
--tertiary-foreground: 260 100% 98%;
|
||||
--accent: 205 100% 36%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 95% 62%;
|
||||
--success: 145 65% 43%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* forest */
|
||||
[data-color="forest"] {
|
||||
--primary: 142 71% 35%;
|
||||
--primary-foreground: 144 60% 98%;
|
||||
--secondary: 84 64% 35%;
|
||||
--secondary-foreground: 60 30% 96%;
|
||||
--tertiary: 25 86% 50%;
|
||||
--tertiary-foreground: 26 100% 10%;
|
||||
--accent: 160 84% 39%;
|
||||
--accent-foreground: 150 80% 96%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 42%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* sunset */
|
||||
[data-color="sunset"] {
|
||||
--primary: 14 90% 57%;
|
||||
--primary-foreground: 24 100% 97%;
|
||||
--secondary: 340 82% 52%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--tertiary: 48 96% 53%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 262 83% 58%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* grape */
|
||||
[data-color="grape"] {
|
||||
--primary: 262 83% 58%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 292 84% 61%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 199 89% 48%;
|
||||
--tertiary-foreground: 210 40% 98%;
|
||||
--accent: 316 73% 52%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 150 70% 40%;
|
||||
--success-foreground: 150 40% 96%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* slate (low-chroma) */
|
||||
[data-color="slate"] {
|
||||
--primary: 215 20% 50%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 220 14% 34%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 220 10% 60%;
|
||||
--tertiary-foreground: 222 47% 10%;
|
||||
--accent: 215 16% 47%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 215 20% 65%;
|
||||
--success: 142 25% 45%;
|
||||
--success-foreground: 144 40% 96%;
|
||||
--warning: 38 60% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 70% 55%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 216 10% 40%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* mint */
|
||||
[data-color="mint"] {
|
||||
--primary: 158 64% 45%;
|
||||
--primary-foreground: 160 84% 98%;
|
||||
--secondary: 174 60% 40%;
|
||||
--secondary-foreground: 168 75% 97%;
|
||||
--tertiary: 192 84% 40%;
|
||||
--tertiary-foreground: 210 40% 98%;
|
||||
--accent: 173 80% 40%;
|
||||
--accent-foreground: 168 75% 97%;
|
||||
--info: 199 90% 50%;
|
||||
--success: 156 72% 36%;
|
||||
--success-foreground: 158 70% 96%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 2 83% 63%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* amber */
|
||||
[data-color="amber"] {
|
||||
--primary: 38 94% 55%;
|
||||
--primary-foreground: 26 83% 12%;
|
||||
--secondary: 14 90% 57%;
|
||||
--secondary-foreground: 24 100% 97%;
|
||||
--tertiary: 26 100% 55%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 199 89% 48%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 94% 55%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* crimson */
|
||||
[data-color="crimson"] {
|
||||
--primary: 350 85% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 84% 60%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--tertiary: 17 88% 60%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 262 83% 58%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* indigo */
|
||||
[data-color="indigo"] {
|
||||
--primary: 231 89% 60%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 262 83% 58%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 173 80% 40%;
|
||||
--tertiary-foreground: 168 75% 97%;
|
||||
--accent: 199 89% 48%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 201 96% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-tertiary: hsl(var(--tertiary));
|
||||
--color-tertiary-foreground: hsl(var(--tertiary-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-info: hsl(var(--info));
|
||||
--color-info-foreground: hsl(var(--info-foreground));
|
||||
--color-success: hsl(var(--success));
|
||||
--color-success-foreground: hsl(var(--success-foreground));
|
||||
--color-warning: hsl(var(--warning));
|
||||
--color-warning-foreground: hsl(var(--warning-foreground));
|
||||
--color-danger: hsl(var(--danger));
|
||||
--color-danger-foreground: hsl(var(--danger-foreground));
|
||||
--color-neutral: hsl(var(--neutral));
|
||||
--color-neutral-foreground: hsl(var(--neutral-foreground));
|
||||
}
|
||||
@custom-variant hover (&:hover);
|
||||
@@ -0,0 +1,234 @@
|
||||
:root {
|
||||
/* Roles (defaults) */
|
||||
--primary: 221 83% 53%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 262 83% 58%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 26 95% 55%;
|
||||
--tertiary-foreground: 26 100% 10%;
|
||||
--accent: 173 80% 40%;
|
||||
--accent-foreground: 168 75% 97%;
|
||||
--info: 199 89% 48%;
|
||||
--info-foreground: 210 40% 98%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
--link: 221 83% 53%;
|
||||
--link-visited: 262 83% 58%;
|
||||
}
|
||||
|
||||
/* ---------- Brand palettes (swap only role colors) ---------- */
|
||||
/* ocean */
|
||||
[data-color="ocean"] {
|
||||
--primary: 199 89% 48%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 172 66% 45%;
|
||||
--secondary-foreground: 168 75% 97%;
|
||||
--tertiary: 260 84% 60%;
|
||||
--tertiary-foreground: 260 100% 98%;
|
||||
--accent: 205 100% 36%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 95% 62%;
|
||||
--success: 145 65% 43%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* forest */
|
||||
[data-color="forest"] {
|
||||
--primary: 142 71% 35%;
|
||||
--primary-foreground: 144 60% 98%;
|
||||
--secondary: 84 64% 35%;
|
||||
--secondary-foreground: 60 30% 96%;
|
||||
--tertiary: 25 86% 50%;
|
||||
--tertiary-foreground: 26 100% 10%;
|
||||
--accent: 160 84% 39%;
|
||||
--accent-foreground: 150 80% 96%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 42%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* sunset */
|
||||
[data-color="sunset"] {
|
||||
--primary: 14 90% 57%;
|
||||
--primary-foreground: 24 100% 97%;
|
||||
--secondary: 340 82% 52%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--tertiary: 48 96% 53%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 262 83% 58%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* grape */
|
||||
[data-color="grape"] {
|
||||
--primary: 262 83% 58%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 292 84% 61%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 199 89% 48%;
|
||||
--tertiary-foreground: 210 40% 98%;
|
||||
--accent: 316 73% 52%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 150 70% 40%;
|
||||
--success-foreground: 150 40% 96%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* slate (low-chroma) */
|
||||
[data-color="slate"] {
|
||||
--primary: 215 20% 50%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 220 14% 34%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 220 10% 60%;
|
||||
--tertiary-foreground: 222 47% 10%;
|
||||
--accent: 215 16% 47%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 215 20% 65%;
|
||||
--success: 142 25% 45%;
|
||||
--success-foreground: 144 40% 96%;
|
||||
--warning: 38 60% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 70% 55%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 216 10% 40%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* mint */
|
||||
[data-color="mint"] {
|
||||
--primary: 158 64% 45%;
|
||||
--primary-foreground: 160 84% 98%;
|
||||
--secondary: 174 60% 40%;
|
||||
--secondary-foreground: 168 75% 97%;
|
||||
--tertiary: 192 84% 40%;
|
||||
--tertiary-foreground: 210 40% 98%;
|
||||
--accent: 173 80% 40%;
|
||||
--accent-foreground: 168 75% 97%;
|
||||
--info: 199 90% 50%;
|
||||
--success: 156 72% 36%;
|
||||
--success-foreground: 158 70% 96%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 2 83% 63%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* amber */
|
||||
[data-color="amber"] {
|
||||
--primary: 38 94% 55%;
|
||||
--primary-foreground: 26 83% 12%;
|
||||
--secondary: 14 90% 57%;
|
||||
--secondary-foreground: 24 100% 97%;
|
||||
--tertiary: 26 100% 55%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 199 89% 48%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 94% 55%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* crimson */
|
||||
[data-color="crimson"] {
|
||||
--primary: 350 85% 55%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 0 84% 60%;
|
||||
--secondary-foreground: 0 0% 100%;
|
||||
--tertiary: 17 88% 60%;
|
||||
--tertiary-foreground: 26 100% 12%;
|
||||
--accent: 262 83% 58%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 199 89% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
/* indigo */
|
||||
[data-color="indigo"] {
|
||||
--primary: 231 89% 60%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 262 83% 58%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--tertiary: 173 80% 40%;
|
||||
--tertiary-foreground: 168 75% 97%;
|
||||
--accent: 199 89% 48%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--info: 201 96% 48%;
|
||||
--success: 142 71% 45%;
|
||||
--success-foreground: 144 60% 98%;
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 26 83% 15%;
|
||||
--danger: 0 84% 60%;
|
||||
--danger-foreground: 0 0% 100%;
|
||||
--neutral: 215 16% 47%;
|
||||
--neutral-foreground: 210 40% 98%;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--color-primary: hsl(var(--primary));
|
||||
--color-primary-foreground: hsl(var(--primary-foreground));
|
||||
--color-secondary: hsl(var(--secondary));
|
||||
--color-secondary-foreground: hsl(var(--secondary-foreground));
|
||||
--color-tertiary: hsl(var(--tertiary));
|
||||
--color-tertiary-foreground: hsl(var(--tertiary-foreground));
|
||||
--color-accent: hsl(var(--accent));
|
||||
--color-accent-foreground: hsl(var(--accent-foreground));
|
||||
--color-info: hsl(var(--info));
|
||||
--color-info-foreground: hsl(var(--info-foreground));
|
||||
--color-success: hsl(var(--success));
|
||||
--color-success-foreground: hsl(var(--success-foreground));
|
||||
--color-warning: hsl(var(--warning));
|
||||
--color-warning-foreground: hsl(var(--warning-foreground));
|
||||
--color-danger: hsl(var(--danger));
|
||||
--color-danger-foreground: hsl(var(--danger-foreground));
|
||||
--color-neutral: hsl(var(--neutral));
|
||||
--color-neutral-foreground: hsl(var(--neutral-foreground));
|
||||
}
|
||||
Reference in New Issue
Block a user