bede_changed_color_palette
This commit is contained in:
@@ -5,79 +5,79 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Base colors from DESIGN.md - AUTO-GENERATED from colors.mjs */
|
||||
:root {
|
||||
/* Base colors — AUTO-GENERATED from colors.mjs */
|
||||
/* PALETTE: Electric Blue (2026-04-26) */
|
||||
|
||||
/* Base colors from DESIGN.md */
|
||||
--background: #131313;
|
||||
--on-background: #e5e2e1;
|
||||
--foreground: #e5e2e1;
|
||||
--on-background: #dde4f0;
|
||||
--foreground: #dde4f0;
|
||||
|
||||
/* Surface colors from DESIGN.md */
|
||||
/* Surface — cool blue-tinted darks */
|
||||
--surface-DEFAULT: #131313;
|
||||
--surface-dim: #131313;
|
||||
--surface-bright: #3a3939;
|
||||
--surface-container-lowest: #0e0e0e;
|
||||
--surface-container-low: #1c1b1b;
|
||||
--surface-container: #201f1f;
|
||||
--surface-container-high: #2a2a2a;
|
||||
--surface-container-highest: #353534;
|
||||
--surface-variant: #353534;
|
||||
--surface-bright: #1e2535;
|
||||
--surface-container-lowest: #0a0c14;
|
||||
--surface-container-low: #131824;
|
||||
--surface-container: #181e2e;
|
||||
--surface-container-high: #1e2538;
|
||||
--surface-container-highest: #252d42;
|
||||
--surface-variant: #252d42;
|
||||
|
||||
/* Primary colors from DESIGN.md */
|
||||
--primary-DEFAULT: #ffb781;
|
||||
--primary-foreground: #4e2600;
|
||||
--primary-container: #f58618;
|
||||
--primary-on-container: #5b2d00;
|
||||
--primary-fixed: #ffdcc4;
|
||||
--primary-fixed-dim: #ffb781;
|
||||
--primary-on-fixed: #2f1400;
|
||||
--primary-on-fixed-variant: #6f3800;
|
||||
--primary-inverse: #924c00;
|
||||
/* Primary — Electric Blue */
|
||||
--primary-DEFAULT: #58a6ff;
|
||||
--primary-foreground: #001a4d;
|
||||
--primary-container: #1d6fd4;
|
||||
--primary-on-container: #cce0ff;
|
||||
--primary-fixed: #cce0ff;
|
||||
--primary-fixed-dim: #58a6ff;
|
||||
--primary-on-fixed: #001533;
|
||||
--primary-on-fixed-variant: #003380;
|
||||
--primary-inverse: #1d5fa8;
|
||||
|
||||
/* Secondary colors from DESIGN.md */
|
||||
--secondary-DEFAULT: #c8c6c5;
|
||||
--secondary-foreground: #303030;
|
||||
--secondary-container: #474746;
|
||||
--secondary-on-container: #b7b5b4;
|
||||
--secondary-fixed: #e5e2e1;
|
||||
--secondary-fixed-dim: #c8c6c5;
|
||||
--secondary-on-fixed: #1b1c1c;
|
||||
--secondary-on-fixed-variant: #474746;
|
||||
/* Secondary — Cool blue-grey */
|
||||
--secondary-DEFAULT: #9aa5be;
|
||||
--secondary-foreground: #1a2030;
|
||||
--secondary-container: #3d4d6b;
|
||||
--secondary-on-container: #bdc8e0;
|
||||
--secondary-fixed: #dde4f0;
|
||||
--secondary-fixed-dim: #9aa5be;
|
||||
--secondary-on-fixed: #0d1220;
|
||||
--secondary-on-fixed-variant: #3d4d6b;
|
||||
|
||||
/* Tertiary colors from DESIGN.md */
|
||||
--tertiary-DEFAULT: #00e639;
|
||||
--tertiary-foreground: #003907;
|
||||
--tertiary-container: #00bd2d;
|
||||
--tertiary-on-container: #00440a;
|
||||
--tertiary-fixed: #72ff70;
|
||||
--tertiary-fixed-dim: #00e639;
|
||||
--tertiary-on-fixed: #002203;
|
||||
--tertiary-on-fixed-variant: #00530e;
|
||||
/* Tertiary — Cyan-teal */
|
||||
--tertiary-DEFAULT: #00d4aa;
|
||||
--tertiary-foreground: #003328;
|
||||
--tertiary-container: #00a882;
|
||||
--tertiary-on-container: #b3fff0;
|
||||
--tertiary-fixed: #b3fff0;
|
||||
--tertiary-fixed-dim: #00d4aa;
|
||||
--tertiary-on-fixed: #002820;
|
||||
--tertiary-on-fixed-variant: #005544;
|
||||
|
||||
/* Error colors from DESIGN.md */
|
||||
--error-DEFAULT: #ffb4ab;
|
||||
--error-foreground: #690005;
|
||||
--error-container: #93000a;
|
||||
/* Error — pure red (no rose/pink cast) */
|
||||
--error-DEFAULT: #ff5f52;
|
||||
--error-foreground: #1a0000;
|
||||
--error-container: #7a0000;
|
||||
--error-on-container: #ffdad6;
|
||||
|
||||
/* Outline colors from DESIGN.md */
|
||||
--outline: #a48c7c;
|
||||
--outline-variant: #564335;
|
||||
/* Outline — blue-tinted */
|
||||
--outline: #3d5a8a;
|
||||
--outline-variant: #1e3055;
|
||||
|
||||
/* Inverse colors from DESIGN.md */
|
||||
--inverse-surface: #e5e2e1;
|
||||
--inverse-on-surface: #313030;
|
||||
/* Inverse */
|
||||
--inverse-surface: #dde4f0;
|
||||
--inverse-on-surface: #1a2030;
|
||||
|
||||
/* Semantic colors from DESIGN.md */
|
||||
--border: #353534;
|
||||
--muted: #9f9e9d;
|
||||
--info: #64b5f6;
|
||||
--success: #00e639;
|
||||
--warning: #ffb781;
|
||||
--alert: #ffb4ab;
|
||||
/* Semantic */
|
||||
--border: #252d42;
|
||||
--muted: #5a6a8a;
|
||||
--info: #58a6ff;
|
||||
--success: #00d4aa;
|
||||
--warning: #f0a040;
|
||||
--alert: #ff5f52;
|
||||
|
||||
/* Semantic spacing tokens */
|
||||
/* Spacing tokens */
|
||||
--spacing-unit: 4px;
|
||||
--spacing-stack-sm: 8px;
|
||||
--spacing-stack-md: 16px;
|
||||
@@ -86,9 +86,6 @@
|
||||
--spacing-container-gap: 24px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
border-radius: 0 !important;
|
||||
@@ -101,18 +98,15 @@
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Strict "NO BOLD" enforcement from AI_RULES.md - Hierarchy via size and color only */
|
||||
*, *::before, *::after {
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
/* No uppercase/italics as per AI_RULES.md and GEMINI.md */
|
||||
*, *::before, *::after {
|
||||
text-transform: none !important;
|
||||
font-style: normal !important;
|
||||
}
|
||||
|
||||
/* Typography scale with proper letter-spacing per DESIGN.md */
|
||||
h1 {
|
||||
@apply text-5xl tracking-tighter;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -127,7 +121,6 @@
|
||||
@apply tracking-tight;
|
||||
}
|
||||
|
||||
/* Input Fields: Darker than the container background per DESIGN.md */
|
||||
input, textarea, select {
|
||||
background-color: var(--surface-container-lowest);
|
||||
border: 1px solid var(--outline);
|
||||
@@ -138,16 +131,15 @@
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--primary-DEFAULT);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles: Rectangular with no radius */
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
background-color: var(--primary-DEFAULT);
|
||||
color: var(--primary-foreground);
|
||||
padding: 0.5rem 1rem;
|
||||
@apply inline-flex items-center justify-center gap-2 transition-opacity hover:opacity-90;
|
||||
border-radius: 0 !important;
|
||||
@@ -155,8 +147,8 @@
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--secondary);
|
||||
color: var(--secondary);
|
||||
border: 1px solid var(--secondary-DEFAULT);
|
||||
color: var(--secondary-DEFAULT);
|
||||
padding: 0.5rem 1rem;
|
||||
@apply inline-flex items-center justify-center gap-2 transition-colors;
|
||||
border-radius: 0 !important;
|
||||
@@ -168,20 +160,18 @@
|
||||
}
|
||||
|
||||
.level-0 {
|
||||
background-color: var(--surface);
|
||||
background-color: var(--surface-DEFAULT);
|
||||
}
|
||||
|
||||
/* Level 1 (Cards/Panels): surface-container with 1px border of outline-variant */
|
||||
.level-1 {
|
||||
@apply border;
|
||||
background-color: var(--surface-container);
|
||||
border-color: var(--outline-variant);
|
||||
}
|
||||
|
||||
/* Level 2 (Modals/Popovers): surface-container-high with 2px border of primary */
|
||||
.level-2 {
|
||||
background-color: var(--surface-container-high);
|
||||
border: 2px solid var(--primary);
|
||||
border: 2px solid var(--primary-DEFAULT);
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
@@ -195,42 +185,38 @@
|
||||
}
|
||||
|
||||
.input-field:focus {
|
||||
border-color: var(--primary);
|
||||
border-color: var(--primary-DEFAULT);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Active State: 1px solid primary */
|
||||
.active-border {
|
||||
@apply border;
|
||||
border-color: var(--primary);
|
||||
border-color: var(--primary-DEFAULT);
|
||||
}
|
||||
|
||||
/* High-contrast status blocks: No rounded corners */
|
||||
.status-success {
|
||||
background-color: var(--tertiary);
|
||||
color: var(--on-tertiary);
|
||||
background-color: var(--tertiary-DEFAULT);
|
||||
color: var(--tertiary-foreground);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.status-alert {
|
||||
background-color: var(--primary);
|
||||
color: var(--on-primary);
|
||||
background-color: var(--primary-DEFAULT);
|
||||
color: var(--primary-foreground);
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Data Tables: Header cells with a subtle background tint */
|
||||
.table-header {
|
||||
background-color: var(--surface-container-high);
|
||||
border-bottom: 1px solid var(--outline);
|
||||
padding: 0.5rem 1rem;
|
||||
color: var(--secondary);
|
||||
color: var(--secondary-DEFAULT);
|
||||
font-size: 0.875rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Log Viewers: Background surface-container-lowest with outline border */
|
||||
.log-viewer {
|
||||
background-color: var(--surface-container-lowest);
|
||||
border: 1px solid var(--outline);
|
||||
@@ -241,7 +227,6 @@
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
/* Typography utilities for DESIGN.md semantic sizing */
|
||||
.headline-lg {
|
||||
@apply text-5xl font-normal;
|
||||
letter-spacing: -0.02em;
|
||||
@@ -284,14 +269,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Custom Industrial Scrollbar Styling per DESIGN.md */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--surface);
|
||||
background: var(--surface-DEFAULT);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@@ -300,14 +284,14 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--primary);
|
||||
background: var(--primary-DEFAULT);
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-fluid-lg {
|
||||
font-size: clamp(1.125rem, 3cqi, 1.5rem);
|
||||
}
|
||||
|
||||
|
||||
.text-fluid-xl {
|
||||
font-size: clamp(1.5rem, 5cqi, 2.25rem);
|
||||
}
|
||||
@@ -328,7 +312,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Safe Area Insets for Modern Mobile Devices */
|
||||
.pb-safe {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
@@ -337,7 +320,6 @@
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
|
||||
/* Accessibility: Respect user's reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
|
||||
@@ -5,87 +5,90 @@
|
||||
* - scripts/generate-css-vars.mjs (CSS variables in globals.css)
|
||||
*
|
||||
* Changes here automatically propagate to both files via build step.
|
||||
*
|
||||
* PALETTE: Electric Blue (2026-04-26)
|
||||
* Direction: Dark industrial base + electric blue accents
|
||||
*/
|
||||
|
||||
export const colors = {
|
||||
// Base colors from DESIGN.md
|
||||
// Base colors
|
||||
background: "#131313",
|
||||
"on-background": "#e5e2e1",
|
||||
foreground: "#e5e2e1",
|
||||
"on-background": "#dde4f0",
|
||||
foreground: "#dde4f0",
|
||||
|
||||
// Surface tones from DESIGN.md
|
||||
// Surface tones — cool blue-tinted darks
|
||||
surface: {
|
||||
DEFAULT: "#131313",
|
||||
dim: "#131313",
|
||||
bright: "#3a3939",
|
||||
"container-lowest": "#0e0e0e",
|
||||
"container-low": "#1c1b1b",
|
||||
container: "#201f1f",
|
||||
"container-high": "#2a2a2a",
|
||||
"container-highest": "#353534",
|
||||
variant: "#353534",
|
||||
bright: "#1e2535",
|
||||
"container-lowest": "#0a0c14",
|
||||
"container-low": "#131824",
|
||||
container: "#181e2e",
|
||||
"container-high": "#1e2538",
|
||||
"container-highest": "#252d42",
|
||||
variant: "#252d42",
|
||||
},
|
||||
|
||||
// Primary colors from DESIGN.md
|
||||
// Primary — Electric Blue
|
||||
primary: {
|
||||
DEFAULT: "#ffb781",
|
||||
foreground: "#4e2600",
|
||||
container: "#f58618",
|
||||
"on-container": "#5b2d00",
|
||||
fixed: "#ffdcc4",
|
||||
"fixed-dim": "#ffb781",
|
||||
"on-fixed": "#2f1400",
|
||||
"on-fixed-variant": "#6f3800",
|
||||
inverse: "#924c00",
|
||||
DEFAULT: "#58a6ff",
|
||||
foreground: "#001a4d",
|
||||
container: "#1d6fd4",
|
||||
"on-container": "#cce0ff",
|
||||
fixed: "#cce0ff",
|
||||
"fixed-dim": "#58a6ff",
|
||||
"on-fixed": "#001533",
|
||||
"on-fixed-variant": "#003380",
|
||||
inverse: "#1d5fa8",
|
||||
},
|
||||
|
||||
// Secondary colors from DESIGN.md
|
||||
// Secondary — Cool blue-grey (replaces warm grey)
|
||||
secondary: {
|
||||
DEFAULT: "#c8c6c5",
|
||||
foreground: "#303030",
|
||||
container: "#474746",
|
||||
"on-container": "#b7b5b4",
|
||||
fixed: "#e5e2e1",
|
||||
"fixed-dim": "#c8c6c5",
|
||||
"on-fixed": "#1b1c1c",
|
||||
"on-fixed-variant": "#474746",
|
||||
DEFAULT: "#9aa5be",
|
||||
foreground: "#1a2030",
|
||||
container: "#3d4d6b",
|
||||
"on-container": "#bdc8e0",
|
||||
fixed: "#dde4f0",
|
||||
"fixed-dim": "#9aa5be",
|
||||
"on-fixed": "#0d1220",
|
||||
"on-fixed-variant": "#3d4d6b",
|
||||
},
|
||||
|
||||
// Tertiary colors from DESIGN.md
|
||||
// Tertiary — Cyan-teal (replaces neon green — complements blue)
|
||||
tertiary: {
|
||||
DEFAULT: "#00e639",
|
||||
foreground: "#003907",
|
||||
container: "#00bd2d",
|
||||
"on-container": "#00440a",
|
||||
fixed: "#72ff70",
|
||||
"fixed-dim": "#00e639",
|
||||
"on-fixed": "#002203",
|
||||
"on-fixed-variant": "#00530e",
|
||||
DEFAULT: "#00d4aa",
|
||||
foreground: "#003328",
|
||||
container: "#00a882",
|
||||
"on-container": "#b3fff0",
|
||||
fixed: "#b3fff0",
|
||||
"fixed-dim": "#00d4aa",
|
||||
"on-fixed": "#002820",
|
||||
"on-fixed-variant": "#005544",
|
||||
},
|
||||
|
||||
// Error colors from DESIGN.md
|
||||
// Error — pure red (no rose/pink cast)
|
||||
error: {
|
||||
DEFAULT: "#ffb4ab",
|
||||
foreground: "#690005",
|
||||
container: "#93000a",
|
||||
DEFAULT: "#ff5f52",
|
||||
foreground: "#1a0000",
|
||||
container: "#7a0000",
|
||||
"on-container": "#ffdad6",
|
||||
},
|
||||
|
||||
// Outline colors from DESIGN.md
|
||||
outline: "#a48c7c",
|
||||
"outline-variant": "#564335",
|
||||
// Outline — blue-tinted borders (replaces warm brown)
|
||||
outline: "#3d5a8a",
|
||||
"outline-variant": "#1e3055",
|
||||
|
||||
// Inverse colors from DESIGN.md
|
||||
"inverse-surface": "#e5e2e1",
|
||||
"inverse-on-surface": "#313030",
|
||||
// Inverse
|
||||
"inverse-surface": "#dde4f0",
|
||||
"inverse-on-surface": "#1a2030",
|
||||
|
||||
// Semantic colors
|
||||
border: "#353534",
|
||||
muted: "#9f9e9d",
|
||||
info: "#64b5f6",
|
||||
success: "#00e639",
|
||||
warning: "#ffb781",
|
||||
alert: "#ffb4ab",
|
||||
// Semantic
|
||||
border: "#252d42",
|
||||
muted: "#5a6a8a",
|
||||
info: "#58a6ff",
|
||||
success: "#00d4aa",
|
||||
warning: "#f0a040",
|
||||
alert: "#ff5f52",
|
||||
};
|
||||
|
||||
export const spacing = {
|
||||
|
||||
Reference in New Issue
Block a user