59e39fe538
- Replace 28-line backend/internal/web/ui/base.css stub with full go-backend token vocabulary (223 lines, --color-brand-primary: #804eec) - Create backend/internal/web/ui/auth.css with auth-provider button styles extracted from button.css Phase 8 block - Update backend/tailwind.input.css to import auth.css after base.css
223 lines
7.8 KiB
CSS
223 lines
7.8 KiB
CSS
:root {
|
|
/* Text */
|
|
--color-text-primary: hsl(0 0% 9%);
|
|
--color-text-secondary: #475467;
|
|
--color-text-muted: hsl(0 0% 43.5%);
|
|
--color-text-faint: #9ca3af;
|
|
--color-text-inverse: #ffffff;
|
|
--color-text-brand: #804eec;
|
|
--color-text-brand-hover: #6f3fd4;
|
|
--color-text-brand-strong: #7c3aed;
|
|
--color-text-brand-accent: #7f56d9;
|
|
--color-text-heading-alt: #1f2937;
|
|
--color-text-body-subtle: #374151;
|
|
--color-text-google: #1f1f1f;
|
|
--color-text-overlay: #344054;
|
|
--color-text-disabled: #667085;
|
|
|
|
/* Surfaces */
|
|
--color-surface-page: hsl(0 0% 100%);
|
|
--color-surface-default: #ffffff;
|
|
--color-surface-card: rgba(255, 255, 255, 0.8);
|
|
--color-surface-subtle: hsl(0 0% 96.1%);
|
|
--color-surface-muted: #f3f4f6;
|
|
--color-surface-muted-hover: #e5e7eb;
|
|
--color-surface-muted-active: #d1d5db;
|
|
--color-surface-muted-inverse: #111827;
|
|
--color-surface-elevated: rgba(255, 255, 255, 0.92);
|
|
--color-surface-elevated-strong: rgba(255, 255, 255, 0.95);
|
|
--color-surface-elevated-soft: rgba(255, 255, 255, 0.9);
|
|
--color-surface-overlay: rgba(255, 255, 255, 0.88);
|
|
--color-surface-overlay-strong: rgba(255, 255, 255, 0.96);
|
|
--color-surface-brand-soft: #ede9fe;
|
|
--color-surface-brand-soft-hover: #ddd6fe;
|
|
--color-surface-brand-soft-active: #c4b5fd;
|
|
--color-surface-brand-muted: #f4f3ff;
|
|
--color-surface-neutral-hover: rgba(249, 250, 251, 0.9);
|
|
--color-surface-page-tint: #f8f7ff;
|
|
--color-surface-page-tint-alt: #f4f7fb;
|
|
|
|
/* Borders */
|
|
--color-border-default: hsl(0 0% 90.9%);
|
|
--color-border-strong: #d1d5db;
|
|
--color-border-muted: #e5e7eb;
|
|
--color-border-subtle: #d0d5dd;
|
|
--color-border-google: #747775;
|
|
--color-border-panel: rgba(30, 27, 46, 0.08);
|
|
--color-border-panel-muted: rgba(107, 114, 128, 0.22);
|
|
--color-border-panel-strong: rgba(107, 114, 128, 0.35);
|
|
--color-border-overlay: rgba(148, 163, 184, 0.22);
|
|
--color-border-overlay-strong: rgba(148, 163, 184, 0.3);
|
|
|
|
/* Brand and focus */
|
|
--color-brand-ink: #1e1b2e;
|
|
--color-brand-primary: #804eec;
|
|
--color-brand-primary-hover: #6d28d9;
|
|
--color-brand-primary-active: #5b21b6;
|
|
--color-brand-secondary: #a855f7;
|
|
--color-brand-accent: #3b82f6;
|
|
--color-focus-ring: rgba(124, 58, 237, 0.2);
|
|
--color-focus-ring-strong: rgba(139, 92, 246, 0.16);
|
|
--color-ring-subtle: rgba(30, 27, 46, 0.35);
|
|
|
|
/* Status: info */
|
|
--color-status-info-soft-bg: #eff6ff;
|
|
--color-status-info-soft-border: #bfdbfe;
|
|
--color-status-info-foreground: #2563eb;
|
|
|
|
/* Status: warning */
|
|
--color-status-warning-soft-bg: #fff4e2;
|
|
--color-status-warning-soft-border: #db9729;
|
|
--color-status-warning-foreground: #db9729;
|
|
--color-status-warning-strong: #db9729;
|
|
--color-status-warning-strong-hover: #c37f12;
|
|
--color-status-warning-strong-active: #a9670c;
|
|
--color-status-warning-strong-foreground: #ffffff;
|
|
--color-status-warning-soft-foreground-strong: #b86e00;
|
|
--color-status-warning-soft-bg-hover: #fee6b7;
|
|
--color-status-warning-soft-bg-active: #fdd58e;
|
|
--color-status-warning-emphasis-bg: #fffbeb;
|
|
--color-status-warning-emphasis-border: #fde68a;
|
|
--color-status-warning-emphasis-foreground: #ca8a04;
|
|
|
|
/* Status: success */
|
|
--color-status-success-soft-bg: #ecfdf3;
|
|
--color-status-success-soft-border: #bbf7d0;
|
|
--color-status-success-foreground: #16a34a;
|
|
--color-status-success-strong: #16a34a;
|
|
--color-status-success-strong-hover: #15803d;
|
|
--color-status-success-strong-active: #166534;
|
|
--color-status-success-strong-foreground: #ffffff;
|
|
--color-status-success-soft-foreground-strong: #15803d;
|
|
--color-status-success-soft-bg-hover: #d1fadf;
|
|
--color-status-success-soft-bg-active: #a6f4c5;
|
|
--color-status-success-banner-bg: hsl(143 85% 96%);
|
|
--color-status-success-banner-border: hsl(145 92% 87%);
|
|
--color-status-success-banner-foreground: hsl(140 100% 27%);
|
|
|
|
/* Status: danger */
|
|
--color-status-danger-soft-bg: #fef2f2;
|
|
--color-status-danger-soft-bg-alt: #fef3f2;
|
|
--color-status-danger-soft-border: #fecaca;
|
|
--color-status-danger-foreground: #dc2626;
|
|
--color-status-danger-strong: #dc2626;
|
|
--color-status-danger-strong-hover: #b91c1c;
|
|
--color-status-danger-strong-active: #991b1b;
|
|
--color-status-danger-strong-foreground: #ffffff;
|
|
--color-status-danger-soft-foreground-strong: #b42318;
|
|
--color-status-danger-soft-bg-hover: #fee4e2;
|
|
--color-status-danger-soft-bg-active: #fecdca;
|
|
--color-status-danger-icon-hover: #ef4444;
|
|
--color-status-danger-banner-bg: hsl(359 100% 97%);
|
|
--color-status-danger-banner-border: hsl(359 100% 94%);
|
|
--color-status-danger-banner-foreground: hsl(360 100% 45%);
|
|
|
|
/* Effects */
|
|
--overlay-backdrop-default: rgba(17, 24, 39, 0.52);
|
|
--overlay-dark-soft: rgba(30, 27, 46, 0.05);
|
|
--overlay-dark-soft-alt: rgba(30, 27, 46, 0.06);
|
|
--overlay-dark-border: rgba(30, 27, 46, 0.08);
|
|
--overlay-dark-strong: rgba(30, 27, 46, 0.14);
|
|
--overlay-brand-soft: rgba(124, 58, 237, 0.1);
|
|
--overlay-brand-soft-strong: rgba(124, 58, 237, 0.14);
|
|
--overlay-brand-muted: rgba(128, 78, 236, 0.08);
|
|
--overlay-brand-faint: rgba(128, 78, 236, 0.04);
|
|
--overlay-brand-glow: rgba(128, 78, 236, 0.1);
|
|
--overlay-google-state: #303030;
|
|
--shadow-auth-card: 0 20px 45px rgba(0, 0, 0, 0.1);
|
|
--shadow-surface-sm: 0 10px 30px rgba(15, 23, 42, 0.05);
|
|
--shadow-surface-md: 0 10px 30px rgba(15, 23, 42, 0.06);
|
|
--shadow-surface-hover: 0 12px 30px rgba(15, 23, 42, 0.08);
|
|
--shadow-surface-lg: 0 24px 48px rgba(15, 23, 42, 0.18);
|
|
--shadow-surface-xl: 0 32px 70px rgba(15, 23, 42, 0.12);
|
|
--shadow-sidebar: 20px 0 45px rgba(30, 27, 46, 0.06);
|
|
--shadow-floating-control: 0 10px 24px rgba(30, 27, 46, 0.14);
|
|
--shadow-google-button:
|
|
0 1px 2px 0 rgba(60, 64, 67, 0.3),
|
|
0 1px 3px 1px rgba(60, 64, 67, 0.15);
|
|
--shadow-brand-action: 0 18px 35px rgba(124, 58, 237, 0.25);
|
|
--gradient-shell:
|
|
linear-gradient(135deg, var(--overlay-brand-muted), transparent 30%),
|
|
linear-gradient(160deg, var(--overlay-dark-soft), transparent 42%),
|
|
linear-gradient(to bottom right, var(--overlay-dark-border), var(--color-surface-page), var(--overlay-brand-faint));
|
|
--gradient-card-glow:
|
|
linear-gradient(to bottom right, rgba(30, 27, 46, 0.1), var(--overlay-dark-soft), var(--overlay-brand-glow));
|
|
--gradient-overview-badge:
|
|
linear-gradient(to right, var(--color-brand-secondary), var(--color-brand-accent));
|
|
--gradient-app-surface:
|
|
linear-gradient(180deg, var(--color-surface-overlay-strong) 0%, var(--color-surface-default) 100%);
|
|
--gradient-not-found-bg:
|
|
radial-gradient(circle at top, var(--overlay-brand-soft-strong), transparent 35%),
|
|
linear-gradient(180deg, var(--color-surface-page-tint) 0%, var(--color-surface-page-tint-alt) 100%);
|
|
--gradient-not-found-primary:
|
|
linear-gradient(135deg, var(--color-text-brand-strong) 0%, var(--color-status-info-foreground) 100%);
|
|
|
|
/* Runtime fallbacks */
|
|
--color-project-fallback: #3b82f6;
|
|
--color-project-accent-purple: #a855f7;
|
|
--color-project-accent-red: #ef4444;
|
|
|
|
/* Legacy aliases */
|
|
--background: var(--color-surface-page);
|
|
--foreground: var(--color-text-primary);
|
|
--muted-foreground: var(--color-text-muted);
|
|
--border: var(--color-border-default);
|
|
--input: var(--color-border-default);
|
|
--card: var(--color-surface-card);
|
|
--accent: var(--color-surface-subtle);
|
|
--primary: var(--color-brand-ink);
|
|
--primary-foreground: var(--color-text-inverse);
|
|
--secondary: var(--color-brand-primary);
|
|
--ring: var(--color-ring-subtle);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
font-family:
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
|
|
.light-only {
|
|
display: block;
|
|
}
|
|
|
|
.dark-only {
|
|
display: none;
|
|
}
|
|
|
|
.visually-hidden {
|
|
border: 0;
|
|
clip: rect(0 0 0 0);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
width: 1px;
|
|
}
|