B2B-95: add design system token values to theme, apply to main components
This commit is contained in:
@@ -11,35 +11,64 @@
|
||||
--font-sans: var(--font-sans) -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
--font-heading: var(--font-heading);
|
||||
|
||||
--background: var(--color-white);
|
||||
--background: hsla(0, 0%, 100%, 1);
|
||||
--foreground: hsla(240, 10%, 4%, 1);
|
||||
--foreground-50: hsla(240, 10%, 4%, 0.5);
|
||||
|
||||
--background-90: hsla(0, 0%, 100%, 0.9);
|
||||
--background-80: hsla(0, 0%, 100%, 0.8);
|
||||
|
||||
--card: var(--color-white);
|
||||
--card-foreground: var(--color-neutral-950);
|
||||
|
||||
--popover: var(--color-white);
|
||||
--popover: hsla(0, 0%, 100%, 1);
|
||||
--popover-foreground: hsla(240, 10%, 4%, 1);
|
||||
|
||||
--primary: hsla(145, 78%, 18%, 1);
|
||||
--primary-foreground: hsla(356, 100%, 97%, 1);
|
||||
|
||||
--primary-90: hsla(145, 78%, 18%, 0.9);
|
||||
--primary-80: hsla(145, 78%, 18%, 0.8);
|
||||
--primary-50: hsla(145, 78%, 18%, 0.5);
|
||||
--primary-20: hsla(145, 78%, 18%, 0.2);
|
||||
--primary-10: hsla(145, 78%, 18%, 0.1);
|
||||
|
||||
--secondary: hsla(240, 5%, 96%, 1);
|
||||
--secondary-foreground: hsla(240, 6%, 10%, 1);
|
||||
|
||||
--secondary-90: hsla(240, 5%, 96%, 0.9);
|
||||
--secondary-80: hsla(240, 5%, 96%, 0.8);
|
||||
|
||||
|
||||
--muted: hsla(240, 5%, 96%, 1);
|
||||
--muted-foreground: hsla(240, 4%, 41%, 1);
|
||||
|
||||
--muted-90: hsla(240, 5%, 96%, 0.9);
|
||||
--muted-80: hsla(240, 5%, 96%, 0.8);
|
||||
--muted-50: hsla(240, 5%, 96%, 0.5);
|
||||
--muted-40: hsla(240, 5%, 96%, 0.4);
|
||||
|
||||
--accent: hsla(240, 5%, 96%, 1);
|
||||
--accent-foreground: hsla(240, 6%, 10%, 1);
|
||||
|
||||
--accent-90: hsla(240, 5%, 96%, 0.9);
|
||||
--accent-80: hsla(240, 5%, 96%, 0.8);
|
||||
--accent-50: hsla(240, 5%, 96%, 0.5);
|
||||
|
||||
--destructive: hsla(0, 84%, 60%, 1);
|
||||
--destructive-foreground: hsla(0, 0%, 98%, 1);
|
||||
|
||||
--border: hsla(240, 6%, 90%, 1);
|
||||
--destructiv-90: hsla(0, 84%, 60%, 0.9);
|
||||
--destructiv-80: hsla(0, 84%, 60%, 0.8);
|
||||
--destructiv-50: hsla(0, 84%, 60%, 0.5);
|
||||
|
||||
|
||||
--border: hsla(240, 6%, 90%, 1);
|
||||
--input: hsla(240, 6%, 90%, 1);
|
||||
--ring: var(--color-neutral-800);
|
||||
|
||||
--radius: 1rem;
|
||||
--radius: calc(1rem);
|
||||
--spacing: 0.25rem;
|
||||
|
||||
--chart-1: var(--color-orange-400);
|
||||
--chart-2: var(--color-teal-600);
|
||||
@@ -47,15 +76,14 @@
|
||||
--chart-4: var(--color-yellow-200);
|
||||
--chart-5: var(--color-orange-200);
|
||||
|
||||
--sidebar-background: var(--color-neutral-50);
|
||||
--sidebar-foreground: oklch(37.05% 0.012 285.8);
|
||||
--sidebar-primary: var(--color-neutral-950);
|
||||
--sidebar-background: var(--background);
|
||||
--sidebar-foreground: var(--foreground);
|
||||
--sidebar-primary: var(--primary);
|
||||
--sidebar-primary-foreground: var(--color-white);
|
||||
--sidebar-accent: var(--color-neutral-100);
|
||||
--sidebar-accent-foreground: var(--color-neutral-950);
|
||||
--sidebar-accent: var(--secondary);
|
||||
--sidebar-accent-foreground: var(--secondary-foreground);
|
||||
--sidebar-border: var(--border);
|
||||
--sidebar-ring: var(--color-blue-500);
|
||||
/* --foreground: 240 10% 4%; */
|
||||
--sidebar-ring: var(--ring);
|
||||
}
|
||||
|
||||
.dark {
|
||||
|
||||
Reference in New Issue
Block a user