mirror of
https://github.com/Donkie/Spoolman.git
synced 2026-10-23 10:32:19 -05:00
214 lines
4.7 KiB
CSS
214 lines
4.7 KiB
CSS
/*
|
|
* Global design tokens for the Spoolman v2 frontend.
|
|
* Palette, spacing and type scale are derived from the design prototype
|
|
* (dark theme, IBM Plex, warm orange accent). Values live as CSS custom
|
|
* properties so components stay declarative; the light theme is applied by
|
|
* overriding these under :root[data-theme='light'] below. Components should
|
|
* always reference tokens (never raw hex) so both themes stay in sync.
|
|
*/
|
|
|
|
:root {
|
|
/* Surfaces */
|
|
--bg: #1f1f1f;
|
|
--bg-app: #1f1f1f;
|
|
--surface: #252525;
|
|
--surface-2: #262626;
|
|
--surface-raised: #2e2e2e;
|
|
--surface-sunken: #1c1c1c;
|
|
--input-bg: #1a1a1a;
|
|
|
|
/* Borders */
|
|
--border: #333;
|
|
--border-soft: #2b2b2b;
|
|
--border-strong: #3d3d3d;
|
|
--border-input: #383838;
|
|
--hairline: rgba(255, 255, 255, 0.05);
|
|
|
|
/* Text */
|
|
--text: #ececec;
|
|
--text-2: #c9c9c9;
|
|
--text-muted: #8a8a8a;
|
|
--text-dim: #777;
|
|
--text-faint: #666;
|
|
|
|
/* Accent (warm orange) */
|
|
--accent: #be682f;
|
|
--accent-hover: #d47a3b;
|
|
--accent-link: #d0854a;
|
|
--accent-link-hover: #e09a60;
|
|
--accent-soft: #e0996a;
|
|
--accent-muted: #8a6a4d;
|
|
--accent-muted-2: #b8a68f;
|
|
--accent-wash: rgba(190, 104, 47, 0.14);
|
|
--accent-wash-soft: rgba(190, 104, 47, 0.06);
|
|
--accent-border: #4a4239;
|
|
|
|
/* Status */
|
|
--danger: #c4503a;
|
|
--danger-soft: #d98a7a;
|
|
--success: #6bb26b;
|
|
--success-border: #3f6b3f;
|
|
--unused-bg: #33302c;
|
|
--unused-border: #4a4239;
|
|
--unused-text: #d0a479;
|
|
|
|
/* Controls (toggle/progress tracks, scrollbars, color-swatch chrome) */
|
|
--track: #3a3a3a;
|
|
--swatch-border: #363636;
|
|
--swatch-border-hover: #4a4a4a;
|
|
|
|
/* Typography */
|
|
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
|
|
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
|
|
|
|
/* Radii */
|
|
--radius-sm: 5px;
|
|
--radius: 6px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 10px;
|
|
--radius-xl: 12px;
|
|
|
|
/* Layout */
|
|
--topbar-h: 53px;
|
|
--list-w: 470px;
|
|
}
|
|
|
|
/* Light theme — overrides only the color tokens; layout/type/radii are shared.
|
|
* Surfaces run light-to-white as they rise (sunken < bg < surface < raised),
|
|
* mirroring the dark scale in reverse. The warm-orange accent is nudged darker
|
|
* so it keeps enough contrast on light backgrounds. */
|
|
:root[data-theme='light'] {
|
|
/* Surfaces */
|
|
--bg: #f2f1ee;
|
|
--bg-app: #f2f1ee;
|
|
--surface: #f8f7f5;
|
|
--surface-2: #f5f4f1;
|
|
--surface-raised: #ffffff;
|
|
--surface-sunken: #e8e6e2;
|
|
--input-bg: #ffffff;
|
|
|
|
/* Borders */
|
|
--border: #d8d6d1;
|
|
--border-soft: #e4e2dd;
|
|
--border-strong: #c4c2bc;
|
|
--border-input: #ceccc6;
|
|
--hairline: rgba(0, 0, 0, 0.06);
|
|
|
|
/* Text */
|
|
--text: #232323;
|
|
--text-2: #444444;
|
|
--text-muted: #6c6c6c;
|
|
--text-dim: #858585;
|
|
--text-faint: #9a9a9a;
|
|
|
|
/* Accent (warm orange, darkened for contrast on light) */
|
|
--accent: #b25c26;
|
|
--accent-hover: #9d4f1e;
|
|
--accent-link: #a9551f;
|
|
--accent-link-hover: #8f4718;
|
|
--accent-soft: #a35e2e;
|
|
--accent-muted: #8a5a2a;
|
|
--accent-muted-2: #916433;
|
|
--accent-wash: rgba(178, 92, 38, 0.12);
|
|
--accent-wash-soft: rgba(178, 92, 38, 0.05);
|
|
--accent-border: #e2d3c4;
|
|
|
|
/* Status */
|
|
--danger: #b7402c;
|
|
--danger-soft: #a8462f;
|
|
--success: #3d7a3d;
|
|
--success-border: #a9c9a9;
|
|
--unused-bg: #f1e9df;
|
|
--unused-border: #e0d2be;
|
|
--unused-text: #8a5a2a;
|
|
|
|
/* Controls */
|
|
--track: #c8c6bf;
|
|
--swatch-border: #d6d4cf;
|
|
--swatch-border-hover: #b4b2ac;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
font-size: 13px;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent-link);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
color: var(--accent-link-hover);
|
|
}
|
|
|
|
input,
|
|
select,
|
|
button,
|
|
textarea {
|
|
font-family: inherit;
|
|
}
|
|
|
|
input:focus,
|
|
select:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
::placeholder {
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* Hide the browser-default number spinners everywhere — they never match the
|
|
* dark theme. Fields that want steppers use the themed NumberInput component. */
|
|
input[type='number']::-webkit-inner-spin-button,
|
|
input[type='number']::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type='number'] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
}
|
|
|
|
/* Slim, unobtrusive scrollbars to match the dense dark UI */
|
|
.scroll-y {
|
|
overflow-y: auto;
|
|
min-height: 0;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--track) transparent;
|
|
}
|
|
.scroll-y::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.scroll-y::-webkit-scrollbar-thumb {
|
|
background: var(--track);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mono {
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
/* Lucide icons inherit text colour (stroke=currentColor) and sit on the text
|
|
baseline nicely with a slight nudge; flex containers override as needed. */
|
|
.lucide {
|
|
display: inline-block;
|
|
vertical-align: -0.15em;
|
|
flex: none;
|
|
}
|