Implement Fluid Emerald app redesign
This commit is contained in:
+117
-49
@@ -37,8 +37,8 @@
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--radius-sm: 0.125rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.25rem;
|
||||
--radius-lg: 0.5rem;
|
||||
--radius-xl: 0.75rem;
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
--text-headline-lg: 1.5rem;
|
||||
--text-headline-lg--line-height: 2rem;
|
||||
--text-headline-lg--font-weight: 600;
|
||||
--text-headline-lg--letter-spacing: 0;
|
||||
--text-headline-lg--letter-spacing: -0.025em;
|
||||
--text-headline-md: 1.125rem;
|
||||
--text-headline-md--line-height: 1.5rem;
|
||||
--text-headline-md--font-weight: 600;
|
||||
--text-headline-md--letter-spacing: 0;
|
||||
--text-headline-md--letter-spacing: -0.015em;
|
||||
--text-headline-lg-mobile: 1.25rem;
|
||||
--text-headline-lg-mobile--line-height: 1.75rem;
|
||||
--text-headline-lg-mobile--font-weight: 600;
|
||||
@@ -275,50 +275,50 @@
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0f172a;
|
||||
--foreground: #eff1f3;
|
||||
--card: #111827;
|
||||
--card-foreground: #eff1f3;
|
||||
--popover: #111827;
|
||||
--popover-foreground: #eff1f3;
|
||||
--primary: #4ae176;
|
||||
--background: #0b1326;
|
||||
--foreground: #e5eaf5;
|
||||
--card: #131b2e;
|
||||
--card-foreground: #e5eaf5;
|
||||
--popover: #171f33;
|
||||
--popover-foreground: #e5eaf5;
|
||||
--primary: #4be277;
|
||||
--primary-foreground: #002109;
|
||||
--secondary: #1f2937;
|
||||
--secondary-foreground: #eff1f3;
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #cbd5e1;
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #eff1f3;
|
||||
--destructive: #f87171;
|
||||
--destructive-foreground: #ffffff;
|
||||
--border: #334155;
|
||||
--input: #334155;
|
||||
--ring: #4ae176;
|
||||
--chart-1: #4ae176;
|
||||
--secondary: #222a3d;
|
||||
--secondary-foreground: #e5eaf5;
|
||||
--muted: #171f33;
|
||||
--muted-foreground: #aeb8cd;
|
||||
--accent: #222a3d;
|
||||
--accent-foreground: #f3f6fc;
|
||||
--destructive: #ffb4ab;
|
||||
--destructive-foreground: #690005;
|
||||
--border: #3b4358;
|
||||
--input: #4a5268;
|
||||
--ring: #4be277;
|
||||
--chart-1: #4be277;
|
||||
--chart-2: #60a5fa;
|
||||
--chart-3: #fbbf24;
|
||||
--chart-4: #f87171;
|
||||
--chart-5: #b7c8e1;
|
||||
--surface: #0f172a;
|
||||
--surface-dim: #020617;
|
||||
--surface-bright: #111827;
|
||||
--surface-container-lowest: #111827;
|
||||
--surface-container-low: #1e293b;
|
||||
--surface-container: #263445;
|
||||
--surface-container-high: #334155;
|
||||
--surface-container-highest: #475569;
|
||||
--surface-variant: #334155;
|
||||
--surface-tint: #4ae176;
|
||||
--on-surface: #eff1f3;
|
||||
--on-surface-variant: #cbd5e1;
|
||||
--on-background: #eff1f3;
|
||||
--outline: #94a3b8;
|
||||
--outline-variant: #334155;
|
||||
--primary-container: #14532d;
|
||||
--surface: #0b1326;
|
||||
--surface-dim: #060e20;
|
||||
--surface-bright: #2d3449;
|
||||
--surface-container-lowest: #060e20;
|
||||
--surface-container-low: #131b2e;
|
||||
--surface-container: #171f33;
|
||||
--surface-container-high: #222a3d;
|
||||
--surface-container-highest: #2d3449;
|
||||
--surface-variant: #2d3449;
|
||||
--surface-tint: #4be277;
|
||||
--on-surface: #e5eaf5;
|
||||
--on-surface-variant: #aeb8cd;
|
||||
--on-background: #e5eaf5;
|
||||
--outline: #8993aa;
|
||||
--outline-variant: #3b4358;
|
||||
--primary-container: #136c35;
|
||||
--on-primary: #002109;
|
||||
--on-primary-container: #bbf7d0;
|
||||
--primary-fixed: #6bff8f;
|
||||
--primary-fixed-dim: #4ae176;
|
||||
--primary-fixed-dim: #4be277;
|
||||
--on-primary-fixed: #002109;
|
||||
--on-primary-fixed-variant: #005321;
|
||||
--secondary-container: #1e3a5f;
|
||||
@@ -343,15 +343,15 @@
|
||||
--inverse-surface: #eff1f3;
|
||||
--inverse-on-surface: #191c1e;
|
||||
--inverse-primary: #006e2f;
|
||||
--sidebar-background: #111827;
|
||||
--sidebar-foreground: #eff1f3;
|
||||
--sidebar-primary: #4ae176;
|
||||
--sidebar-background: #060e20;
|
||||
--sidebar-foreground: #e5eaf5;
|
||||
--sidebar-primary: #4be277;
|
||||
--sidebar-primary-foreground: #002109;
|
||||
--sidebar-accent: #1e293b;
|
||||
--sidebar-accent-foreground: #eff1f3;
|
||||
--sidebar-border: #334155;
|
||||
--sidebar-ring: #4ae176;
|
||||
--sidebar: #111827;
|
||||
--sidebar-accent: #171f33;
|
||||
--sidebar-accent-foreground: #f3f6fc;
|
||||
--sidebar-border: #2d3449;
|
||||
--sidebar-ring: #4be277;
|
||||
--sidebar: #060e20;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -359,6 +359,74 @@
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
@apply min-h-screen bg-background text-foreground antialiased;
|
||||
letter-spacing: -0.006em;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in srgb, var(--primary) 24%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
textarea,
|
||||
select {
|
||||
@apply border-input bg-surface-container-lowest text-foreground rounded-md border px-3 py-2 text-sm shadow-xs outline-none transition-[border-color,box-shadow,background-color];
|
||||
background-color: var(--surface-container-lowest) !important;
|
||||
}
|
||||
|
||||
textarea:focus-visible,
|
||||
select:focus-visible {
|
||||
@apply border-ring ring-ring/25 ring-3;
|
||||
}
|
||||
|
||||
textarea:disabled,
|
||||
select:disabled {
|
||||
@apply cursor-not-allowed opacity-55;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply w-full border-separate border-spacing-0;
|
||||
}
|
||||
|
||||
thead {
|
||||
@apply bg-surface-container-low text-on-surface-variant;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
@apply transition-colors hover:bg-primary/3;
|
||||
}
|
||||
|
||||
th {
|
||||
@apply text-label-uppercase font-bold tracking-[0.08em];
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.app-page {
|
||||
@apply mx-auto flex w-full max-w-[96rem] flex-1 flex-col gap-6 px-4 py-5 sm:px-6 sm:py-7 lg:px-8;
|
||||
}
|
||||
|
||||
.app-page-narrow {
|
||||
@apply mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-5 sm:px-6 sm:py-7 lg:px-8;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
@apply flex flex-wrap items-center gap-2;
|
||||
}
|
||||
|
||||
.status-success {
|
||||
@apply border-primary/25 bg-primary/8 text-on-primary-container rounded-lg border px-4 py-3 text-sm dark:text-primary-fixed;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@apply border-outline-variant bg-surface-container-low text-on-surface-variant rounded-lg border border-dashed px-5 py-8 text-center text-sm;
|
||||
}
|
||||
|
||||
.table-shell {
|
||||
@apply border-outline-variant bg-surface-container-lowest overflow-hidden rounded-xl border;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
@apply text-label-uppercase text-primary font-bold uppercase tracking-[0.12em];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user