Add custom dark theme with Fichero brand blue accent
Replace Bootstrap default dark grays and hardcoded colors with a design-token system: surface levels, ink hierarchy, logo blue (#07addf) as the single accent, mark-feed red for print indicators. Card browsers get rounded corners, subtle borders, and hover-reveal action buttons.
This commit is contained in:
Hamza
@@ -12,6 +12,7 @@
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "theme";
|
||||
@import "font";
|
||||
|
||||
body {
|
||||
|
||||
211
web/src/styles/theme.scss
Normal file
211
web/src/styles/theme.scss
Normal file
@@ -0,0 +1,211 @@
|
||||
// Fichero custom dark theme
|
||||
// Pure CSS custom property overrides applied after Bootstrap loads.
|
||||
|
||||
// ── Design tokens ──────────────────────────────────────────────
|
||||
|
||||
:root {
|
||||
// Surfaces (cool neutral darks)
|
||||
--surface-0: #161819;
|
||||
--surface-1: #1c1e20;
|
||||
--surface-2: #232628;
|
||||
--surface-3: #2a2d30;
|
||||
|
||||
// Text
|
||||
--ink-primary: #e4e7eb;
|
||||
--ink-secondary: #949ba4;
|
||||
--ink-tertiary: #5d6670;
|
||||
--ink-muted: #3a4048;
|
||||
|
||||
// Accent (Fichero logo blue)
|
||||
--fichero: #07addf;
|
||||
--fichero-hover: #0699c7;
|
||||
--fichero-subtle: rgba(7, 173, 223, 0.10);
|
||||
--fichero-rgb: 7, 173, 223;
|
||||
|
||||
// Functional (print-start indicator)
|
||||
--mark-feed: #e85454;
|
||||
|
||||
// Semantic
|
||||
--status-ok: #6bb88a;
|
||||
--status-ok-rgb: 107, 184, 138;
|
||||
--status-warn: #d4a24c;
|
||||
--status-warn-rgb: 212, 162, 76;
|
||||
--status-danger: #d45454;
|
||||
--status-danger-rgb: 212, 84, 84;
|
||||
|
||||
// Borders
|
||||
--border-standard: rgba(228, 231, 235, 0.08);
|
||||
--border-soft: rgba(228, 231, 235, 0.05);
|
||||
--border-emphasis: rgba(228, 231, 235, 0.14);
|
||||
--border-focus: rgba(7, 173, 223, 0.5);
|
||||
|
||||
// Controls
|
||||
--control-bg: #141617;
|
||||
--control-border: rgba(228, 231, 235, 0.10);
|
||||
|
||||
// Radii
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 14px;
|
||||
}
|
||||
|
||||
// ── Bootstrap dark-mode overrides ──────────────────────────────
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
// Body
|
||||
--bs-body-bg: var(--surface-0);
|
||||
--bs-body-bg-rgb: 22, 24, 25;
|
||||
--bs-body-color: var(--ink-primary);
|
||||
--bs-body-color-rgb: 228, 231, 235;
|
||||
|
||||
// Secondary / tertiary
|
||||
--bs-secondary-bg: var(--surface-1);
|
||||
--bs-secondary-color: var(--ink-secondary);
|
||||
--bs-tertiary-bg: var(--surface-2);
|
||||
--bs-tertiary-color: var(--ink-tertiary);
|
||||
|
||||
// Borders
|
||||
--bs-border-color: var(--border-standard);
|
||||
--bs-border-color-translucent: var(--border-standard);
|
||||
|
||||
// Theme colors
|
||||
--bs-primary: var(--fichero);
|
||||
--bs-primary-rgb: var(--fichero-rgb);
|
||||
--bs-danger: var(--status-danger);
|
||||
--bs-danger-rgb: var(--status-danger-rgb);
|
||||
--bs-success: var(--status-ok);
|
||||
--bs-success-rgb: var(--status-ok-rgb);
|
||||
--bs-warning: var(--status-warn);
|
||||
--bs-warning-rgb: var(--status-warn-rgb);
|
||||
|
||||
// Subtle backgrounds (toasts, alerts)
|
||||
--bs-primary-bg-subtle: var(--fichero-subtle);
|
||||
--bs-primary-text-emphasis: var(--fichero);
|
||||
--bs-danger-bg-subtle: rgba(212, 84, 84, 0.10);
|
||||
--bs-danger-border-subtle: rgba(212, 84, 84, 0.25);
|
||||
--bs-danger-text-emphasis: #e87070;
|
||||
--bs-success-bg-subtle: rgba(107, 184, 138, 0.10);
|
||||
--bs-success-border-subtle: rgba(107, 184, 138, 0.25);
|
||||
--bs-success-text-emphasis: #85d0a4;
|
||||
--bs-warning-bg-subtle: rgba(212, 162, 76, 0.10);
|
||||
--bs-warning-border-subtle: rgba(212, 162, 76, 0.25);
|
||||
--bs-warning-text-emphasis: #e0b86a;
|
||||
|
||||
// Links
|
||||
--bs-link-color: var(--fichero);
|
||||
--bs-link-color-rgb: var(--fichero-rgb);
|
||||
--bs-link-hover-color: var(--fichero-hover);
|
||||
|
||||
// Focus ring
|
||||
--bs-focus-ring-color: var(--border-focus);
|
||||
|
||||
// Border radii
|
||||
--bs-border-radius: var(--radius-sm);
|
||||
--bs-border-radius-lg: var(--radius-md);
|
||||
--bs-border-radius-xl: var(--radius-lg);
|
||||
}
|
||||
|
||||
// ── Button overrides ───────────────────────────────────────────
|
||||
|
||||
.btn-primary {
|
||||
--bs-btn-bg: var(--fichero);
|
||||
--bs-btn-border-color: var(--fichero);
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-hover-bg: var(--fichero-hover);
|
||||
--bs-btn-hover-border-color: var(--fichero-hover);
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-active-bg: var(--fichero-hover);
|
||||
--bs-btn-active-border-color: var(--fichero-hover);
|
||||
--bs-btn-active-color: #fff;
|
||||
--bs-btn-disabled-bg: var(--fichero);
|
||||
--bs-btn-disabled-border-color: var(--fichero);
|
||||
--bs-btn-disabled-color: #fff;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
--bs-btn-bg: var(--surface-2);
|
||||
--bs-btn-border-color: var(--border-standard);
|
||||
--bs-btn-color: var(--ink-primary);
|
||||
--bs-btn-hover-bg: var(--surface-3);
|
||||
--bs-btn-hover-border-color: var(--border-emphasis);
|
||||
--bs-btn-hover-color: var(--ink-primary);
|
||||
--bs-btn-active-bg: var(--surface-3);
|
||||
--bs-btn-active-border-color: var(--border-emphasis);
|
||||
--bs-btn-active-color: var(--ink-primary);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
--bs-btn-bg: var(--status-danger);
|
||||
--bs-btn-border-color: var(--status-danger);
|
||||
--bs-btn-hover-bg: #c04848;
|
||||
--bs-btn-hover-border-color: #c04848;
|
||||
--bs-btn-active-bg: #c04848;
|
||||
--bs-btn-active-border-color: #c04848;
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
--bs-btn-color: var(--ink-secondary);
|
||||
--bs-btn-border-color: var(--border-emphasis);
|
||||
--bs-btn-hover-bg: var(--surface-2);
|
||||
--bs-btn-hover-border-color: var(--border-emphasis);
|
||||
--bs-btn-hover-color: var(--ink-primary);
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
--bs-btn-bg: var(--surface-2);
|
||||
--bs-btn-border-color: var(--border-standard);
|
||||
--bs-btn-color: var(--ink-primary);
|
||||
--bs-btn-hover-bg: var(--surface-3);
|
||||
--bs-btn-hover-border-color: var(--border-emphasis);
|
||||
--bs-btn-hover-color: var(--ink-primary);
|
||||
}
|
||||
|
||||
// ── Form controls ──────────────────────────────────────────────
|
||||
|
||||
.form-control,
|
||||
.form-select {
|
||||
background-color: var(--control-bg);
|
||||
border-color: var(--control-border);
|
||||
color: var(--ink-primary);
|
||||
|
||||
&:focus {
|
||||
background-color: var(--control-bg);
|
||||
border-color: var(--fichero);
|
||||
color: var(--ink-primary);
|
||||
box-shadow: 0 0 0 0.2rem var(--border-focus);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: var(--surface-2);
|
||||
border-color: var(--control-border);
|
||||
color: var(--ink-secondary);
|
||||
}
|
||||
|
||||
// ── Dropdowns ──────────────────────────────────────────────────
|
||||
|
||||
.dropdown-menu {
|
||||
--bs-dropdown-bg: var(--surface-2);
|
||||
--bs-dropdown-border-color: var(--border-emphasis);
|
||||
--bs-dropdown-link-color: var(--ink-primary);
|
||||
--bs-dropdown-link-hover-bg: var(--surface-3);
|
||||
--bs-dropdown-link-hover-color: var(--ink-primary);
|
||||
--bs-dropdown-link-active-bg: var(--fichero-subtle);
|
||||
--bs-dropdown-link-active-color: var(--fichero);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
// ── Modals ─────────────────────────────────────────────────────
|
||||
|
||||
.modal-content {
|
||||
--bs-modal-bg: var(--surface-3);
|
||||
--bs-modal-border-color: var(--border-emphasis);
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
|
||||
// ── Progress bar ───────────────────────────────────────────────
|
||||
|
||||
.progress {
|
||||
--bs-progress-bg: var(--surface-1);
|
||||
--bs-progress-bar-bg: var(--fichero);
|
||||
}
|
||||
Reference in New Issue
Block a user