bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bede_changed_color_palette

Browse Source
This commit is contained in:
Daniel Bedeleanu
2026-04-26 13:09:37 +03:00
parent d7ee7bab46
commit 904e3442b0
2 changed files with 135 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
frontend/app/globals.css
View File

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

115
frontend/colors.mjs
View File

@@ -5,87 +5,90 @@
* - scripts/generate-css-vars.mjs (CSS variables in globals.css) * - scripts/generate-css-vars.mjs (CSS variables in globals.css)
* *
* Changes here automatically propagate to both files via build step. * 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 = { export const colors = {
// Base colors from DESIGN.md // Base colors
background: "#131313", background: "#131313",
"on-background": "#e5e2e1", "on-background": "#dde4f0",
foreground: "#e5e2e1", foreground: "#dde4f0",
// Surface tones from DESIGN.md // Surface tones — cool blue-tinted darks
surface: { surface: {
DEFAULT: "#131313", DEFAULT: "#131313",
dim: "#131313", dim: "#131313",
bright: "#3a3939", bright: "#1e2535",
"container-lowest": "#0e0e0e", "container-lowest": "#0a0c14",
"container-low": "#1c1b1b", "container-low": "#131824",
container: "#201f1f", container: "#181e2e",
"container-high": "#2a2a2a", "container-high": "#1e2538",
"container-highest": "#353534", "container-highest": "#252d42",
variant: "#353534", variant: "#252d42",
}, },
// Primary colors from DESIGN.md // Primary — Electric Blue
primary: { primary: {
DEFAULT: "#ffb781", DEFAULT: "#58a6ff",
foreground: "#4e2600", foreground: "#001a4d",
container: "#f58618", container: "#1d6fd4",
"on-container": "#5b2d00", "on-container": "#cce0ff",
fixed: "#ffdcc4", fixed: "#cce0ff",
"fixed-dim": "#ffb781", "fixed-dim": "#58a6ff",
"on-fixed": "#2f1400", "on-fixed": "#001533",
"on-fixed-variant": "#6f3800", "on-fixed-variant": "#003380",
inverse: "#924c00", inverse: "#1d5fa8",
}, },
// Secondary colors from DESIGN.md // Secondary — Cool blue-grey (replaces warm grey)
secondary: { secondary: {
DEFAULT: "#c8c6c5", DEFAULT: "#9aa5be",
foreground: "#303030", foreground: "#1a2030",
container: "#474746", container: "#3d4d6b",
"on-container": "#b7b5b4", "on-container": "#bdc8e0",
fixed: "#e5e2e1", fixed: "#dde4f0",
"fixed-dim": "#c8c6c5", "fixed-dim": "#9aa5be",
"on-fixed": "#1b1c1c", "on-fixed": "#0d1220",
"on-fixed-variant": "#474746", "on-fixed-variant": "#3d4d6b",
}, },
// Tertiary colors from DESIGN.md // Tertiary — Cyan-teal (replaces neon green — complements blue)
tertiary: { tertiary: {
DEFAULT: "#00e639", DEFAULT: "#00d4aa",
foreground: "#003907", foreground: "#003328",
container: "#00bd2d", container: "#00a882",
"on-container": "#00440a", "on-container": "#b3fff0",
fixed: "#72ff70", fixed: "#b3fff0",
"fixed-dim": "#00e639", "fixed-dim": "#00d4aa",
"on-fixed": "#002203", "on-fixed": "#002820",
"on-fixed-variant": "#00530e", "on-fixed-variant": "#005544",
}, },
// Error colors from DESIGN.md // Error — pure red (no rose/pink cast)
error: { error: {
DEFAULT: "#ffb4ab", DEFAULT: "#ff5f52",
foreground: "#690005", foreground: "#1a0000",
container: "#93000a", container: "#7a0000",
"on-container": "#ffdad6", "on-container": "#ffdad6",
}, },
// Outline colors from DESIGN.md // Outline — blue-tinted borders (replaces warm brown)
outline: "#a48c7c", outline: "#3d5a8a",
"outline-variant": "#564335", "outline-variant": "#1e3055",
// Inverse colors from DESIGN.md // Inverse
"inverse-surface": "#e5e2e1", "inverse-surface": "#dde4f0",
"inverse-on-surface": "#313030", "inverse-on-surface": "#1a2030",
// Semantic colors // Semantic
border: "#353534", border: "#252d42",
muted: "#9f9e9d", muted: "#5a6a8a",
info: "#64b5f6", info: "#58a6ff",
success: "#00e639", success: "#00d4aa",
warning: "#ffb781", warning: "#f0a040",
alert: "#ffb4ab", alert: "#ff5f52",
}; };
export const spacing = { export const spacing = {