nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

colors

Browse Source
This commit is contained in:
nils
2025-10-29 23:10:51 +01:00
parent eb3eae3fac
commit 384483b14c
2 changed files with 102 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/sidebar/Sidebar.jsx
+2 -2
View File
@@ -83,7 +83,7 @@ const FolderNode = ({
<div className="folder-row__actions">
<button
type="button"
className="icon-button"
className="icon-button ghost"
onClick={(event) => {
event.stopPropagation();
if (!onRename) return;
@@ -104,7 +104,7 @@ const FolderNode = ({
</button>
<button
type="button"
className="icon-button"
className="icon-button ghost"
onClick={(event) => {
event.stopPropagation();
onDelete(node.id);
frontend/src/styles.css
+100 -23
View File
@@ -1,21 +1,24 @@
:root {
color-scheme: light;
color-scheme: light dark;
/* master warmth bias: positive = warmer, negative = cooler */
--warmth: 3deg; /* try +5deg for warmer, -5deg for cooler */
--neutral-hue: 200deg;
--foreground-hue-offset: 70deg;
--accent-hue-offset: -20deg;
--dark-hue-offset: 60deg;
--dark-foreground-hue-offset: 70deg;
/* --- Neutrals --- */
--bg: oklch(0.97 0.001 calc(100deg + var(--warmth)));
--surface: oklch(0.985 0.001 calc(100deg + var(--warmth)));
--surface-subtle: oklch(0.96 0.002 calc(100deg + var(--warmth)));
--fg: oklch(0.32 0.005 calc(270deg + var(--warmth)));
--muted: oklch(0.54 0.008 calc(270deg + var(--warmth)));
--sidebar-fg: oklch(0.56 0.007 calc(270deg + var(--warmth)));
--border: oklch(0.92 0.002 calc(270deg + var(--warmth)));
--bg: oklch(0.97 0.001 var(--neutral-hue));
--surface: oklch(0.985 0.001 var(--neutral-hue));
--surface-subtle: oklch(0.96 0.002 var(--neutral-hue));
--fg: oklch(0.32 0.005 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--muted: oklch(0.54 0.008 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--sidebar-fg: oklch(0.56 0.007 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--border: oklch(0.92 0.002 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
/* --- Accent (primary) --- */
--accent: oklch(0.61 0.2 calc(250deg + var(--warmth)));
--accent-hover: oklch(0.70 0.02 calc(100deg + var(--warmth)));
--accent: oklch(0.61 0.2 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
--accent-hover: oklch(0.70 0.02 calc(var(--neutral-hue) + var(--foreground-hue-offset) + var(--accent-hue-offset)));
--on-accent: oklch(1 0 0);
--accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
@@ -27,7 +30,7 @@
--surface-overlay: color-mix(in oklch, white 82%, transparent);
/* -- Selection --- */
--selection: oklch(0.61 0.01 calc(100deg + var(--warmth)));
--selection: oklch(0.61 0.01 var(--neutral-hue));
/* --- Derived accent states --- */
--selection-soft: color-mix(in oklch, var(--selection) 12%, transparent);
@@ -41,20 +44,20 @@
--shadow-pop: color-mix(in oklch, black 25%, transparent);
--outline-subtle: color-mix(in oklch, black 6%, transparent);
--overlay-dark: color-mix(in oklch, black 55%, transparent);
--overlay-dim: color-mix(in oklch, oklch(0.28 0.01 calc(265deg + var(--warmth))) 20%, transparent);
--overlay-dim: color-mix(in oklch, oklch(0.28 0.01 calc(var(--neutral-hue) + var(--foreground-hue-offset) - 5deg)) 20%, transparent);
--overlay-darker: color-mix(in oklch, black 75%, transparent);
--surface-danger-subtle: color-mix(in oklch, var(--danger) 12%, transparent);
--overlay-accent-subtle: color-mix(in oklch, var(--accent) 12%, transparent);
--border-strong: color-mix(in oklch, var(--fg) 24%, transparent);
--surface-hover: color-mix(in oklch, white 10%, transparent);
--overlay-accent-strong: color-mix(in oklch, var(--accent) 24%, transparent);
--overlay-backdrop: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 45%, transparent);
--overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(265deg + var(--warmth))) 18%, transparent);
--overlay-backdrop: color-mix(in oklch, oklch(0.22 0.015 calc(var(--neutral-hue) + var(--foreground-hue-offset) - 5deg)) 45%, transparent);
--overlay-shadow: color-mix(in oklch, oklch(0.22 0.015 calc(var(--neutral-hue) + var(--foreground-hue-offset) - 5deg)) 18%, transparent);
/* --- Semantic colors (relative warmth) --- */
--success: oklch(0.62 0.18 calc(190deg + var(--warmth)));
--warning: oklch(0.72 0.17 calc(95deg + var(--warmth)));
--danger: oklch(0.60 0.18 calc(35deg + var(--warmth)));
/* --- Semantic colors --- */
--success: oklch(0.62 0.18 calc(var(--neutral-hue) + 90deg));
--warning: oklch(0.72 0.17 calc(var(--neutral-hue) - 5deg));
--danger: oklch(0.60 0.18 calc(var(--neutral-hue) - 65deg));
--success-subtle: color-mix(in oklch, var(--success) 12%, transparent);
--warning-subtle: color-mix(in oklch, var(--warning) 12%, transparent);
@@ -67,12 +70,12 @@
--row-active-bg: color-mix(in oklch, var(--selection) 12%, transparent);
--sidebar-hover-bg: color-mix(in oklch, var(--selection) 8%, transparent);
--sidebar-active-bg: color-mix(in oklch, var(--selection) 16%, transparent);
--selection-ring: oklch(0.78 0.16 calc(260deg + var(--warmth)));
--selection-ring: oklch(0.78 0.16 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--sidebar-active-pill-border: color-mix(in oklch, var(--accent) 64%, transparent);
--link: var(--accent);
--link-visited: color-mix(in oklch, var(--accent) 75%, var(--fg) 25%);
--preview-nav-bg: oklch(0.18 0.05 calc(270deg + var(--warmth)));
--preview-nav-bg-hover: oklch(0.14 0.05 calc(270deg + var(--warmth)));
--preview-nav-bg: oklch(0.18 0.05 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--preview-nav-bg-hover: oklch(0.14 0.05 calc(var(--neutral-hue) + var(--foreground-hue-offset)));
--preview-nav-fg: var(--on-accent);
--text-on-dark: color-mix(in oklch, white 90%, transparent);
--surface-ink-soft: color-mix(in oklch, var(--fg) 8%, transparent);
@@ -85,6 +88,80 @@
--documents-grid-title-size: 0.8rem;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--dark-neutral-hue: calc(var(--neutral-hue) + var(--dark-hue-offset));
--dark-foreground-hue: calc(var(--neutral-hue) + var(--dark-foreground-hue-offset));
--bg: oklch(0.15 0.01 var(--dark-neutral-hue));
--surface: oklch(0.19 0.012 var(--dark-neutral-hue));
--surface-subtle: oklch(0.23 0.012 var(--dark-neutral-hue));
--fg: oklch(0.89 0.015 var(--dark-foreground-hue));
--muted: oklch(0.72 0.02 var(--dark-foreground-hue));
--sidebar-fg: oklch(0.78 0.02 var(--dark-foreground-hue));
--border: oklch(0.33 0.01 var(--dark-foreground-hue));
--accent: oklch(0.75 0.2 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--accent-hover: oklch(0.82 0.16 calc(var(--dark-foreground-hue) + var(--accent-hue-offset)));
--on-accent: oklch(0.15 0.015 var(--dark-foreground-hue));
--accent-soft: color-mix(in oklch, var(--accent) 22%, transparent);
--accent-elevated: color-mix(in oklch, var(--accent) 28%, transparent);
--accent-elevated-strong: color-mix(in oklch, var(--accent) 38%, transparent);
--accent-outline: color-mix(in oklch, var(--accent) 55%, transparent);
--accent-outline-strong: color-mix(in oklch, var(--accent) 90%, transparent);
--accent-focus: color-mix(in oklch, var(--accent) 80%, transparent);
--surface-overlay: color-mix(in oklch, black 60%, transparent);
--selection: oklch(0.44 0.04 220deg);
--selection-soft: color-mix(in oklch, var(--selection) 18%, transparent);
--shadow-faint: color-mix(in oklch, black 35%, transparent);
--shadow-soft: color-mix(in oklch, black 50%, transparent);
--shadow-medium: color-mix(in oklch, black 65%, transparent);
--shadow-strong: color-mix(in oklch, black 80%, transparent);
--shadow-deep: color-mix(in oklch, black 90%, transparent);
--shadow-pop: color-mix(in oklch, black 70%, transparent);
--outline-subtle: color-mix(in oklch, white 10%, transparent);
--overlay-dark: color-mix(in oklch, black 70%, transparent);
--overlay-dim: color-mix(in oklch, oklch(0.42 0.04 var(--dark-neutral-hue)) 35%, transparent);
--overlay-darker: color-mix(in oklch, black 85%, transparent);
--surface-danger-subtle: color-mix(in oklch, var(--danger) 26%, transparent);
--overlay-accent-subtle: color-mix(in oklch, var(--accent) 32%, transparent);
--border-strong: color-mix(in oklch, var(--fg) 30%, transparent);
--surface-hover: color-mix(in oklch, white 6%, transparent);
--overlay-accent-strong: color-mix(in oklch, var(--accent) 55%, transparent);
--overlay-backdrop: color-mix(in oklch, oklch(0.1 0.015 var(--dark-neutral-hue)) 70%, transparent);
--overlay-shadow: color-mix(in oklch, oklch(0.12 0.015 var(--dark-neutral-hue)) 55%, transparent);
--success: oklch(0.72 0.16 180deg);
--warning: oklch(0.79 0.16 80deg);
--danger: oklch(0.7 0.16 25deg);
--success-subtle: color-mix(in oklch, var(--success) 20%, transparent);
--warning-subtle: color-mix(in oklch, var(--warning) 20%, transparent);
--danger-border: color-mix(in oklch, var(--danger) 45%, transparent);
--danger-soft: color-mix(in oklch, var(--danger) 24%, transparent);
--danger-subtle: color-mix(in oklch, var(--danger) 18%, transparent);
--row-hover-bg: color-mix(in oklch, white 4%, transparent);
--row-active-bg: color-mix(in oklch, var(--selection) 20%, transparent);
--sidebar-hover-bg: color-mix(in oklch, white 6%, transparent);
--sidebar-active-bg: color-mix(in oklch, var(--selection) 26%, transparent);
--selection-ring: oklch(0.68 0.16 var(--dark-foreground-hue));
--sidebar-active-pill-border: color-mix(in oklch, var(--accent) 72%, transparent);
--link: color-mix(in oklch, var(--accent) 92%, transparent);
--link-visited: color-mix(in oklch, var(--accent) 70%, white 20%);
--preview-nav-bg: oklch(0.3 0.04 var(--dark-neutral-hue));
--preview-nav-bg-hover: oklch(0.35 0.04 var(--dark-neutral-hue));
--preview-nav-fg: var(--fg);
--text-on-dark: color-mix(in oklch, white 92%, transparent);
--surface-ink-soft: color-mix(in oklch, white 12%, transparent);
}
}
html,
body {
height: 100%;