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

tag colors

Browse Source
This commit is contained in:
nils
2025-11-17 16:49:32 +01:00
parent 61573431e3
commit 5fe11f18ac
5 changed files with 146 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/base/theme.css
+23
View File
@@ -20,6 +20,12 @@
--neutral-contrast-baseline: 1.125;
--neutral-contrast-delta: calc(var(--neutral-contrast-amount) - var(--neutral-contrast-baseline));
--neutral-chroma-scale: calc(clamp(0.0001, var(--neutral-chroma-effective), 1) / 0.1);
--tag-chip-bg-lighten: 0.4;
--tag-chip-bg-chroma-scale: 0.75;
--tag-chip-outline-lighten: 0.12;
--tag-chip-outline-chroma-scale: 0.75;
--tag-chip-text-lighten: -0.5;
--tag-chip-text-chroma-scale: 0.4;
/* --- Neutrals --- */
--bg: oklch(calc(0.97 + var(--neutral-contrast-delta) * 0.12) calc(var(--neutral-chroma-effective) * 0.001) calc(var(--neutral-hue) + var(--surface-hue-shift)));
@@ -110,6 +116,11 @@
--detail-panel-width: calc(100vw / 3);
--sidebar-width: 20em;
--documents-grid-title-size: 0.8rem;
--tag-chip-bg-lighten: 0.4;
--tag-chip-bg-chroma-scale: 0.75;
--tag-chip-outline-lighten: 0.12;
--tag-chip-outline-chroma-scale: 0.75;
}
:root[data-theme='light'] {
@@ -167,6 +178,13 @@
--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);
--tag-chip-bg-lighten: 0.2;
--tag-chip-bg-chroma-scale: 0.65;
--tag-chip-outline-lighten: 0.08;
--tag-chip-outline-chroma-scale: 0.85;
--tag-chip-text-lighten: 0.35;
--tag-chip-text-chroma-scale: 0.6;
--success: oklch(0.62 0.16 var(--success-hue));
--warning: oklch(0.68 0.17 var(--warning-hue));
--danger: oklch(0.60 0.2 var(--danger-hue));
@@ -190,6 +208,11 @@
--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);
--tag-chip-bg-lighten: -1.2;
--tag-chip-bg-chroma-scale: 1.5;
--tag-chip-outline-lighten: 0;
--tag-chip-outline-chroma-scale: 1.2;
}
@media (prefers-color-scheme: dark) {
frontend/src/styles/documents/listing.css
+28 -3
View File
@@ -14,8 +14,6 @@
min-height: 0;
}
.documents-panel tr.folder.is-drop-target {
outline: 2px dashed var(--accent-strong, var(--accent));
outline-offset: -2px;
@@ -760,15 +758,42 @@
}
.tag-chip {
--tag-chip-resolved-l: var(--tag-chip-base-l, 0.9);
--tag-chip-resolved-c: var(--tag-chip-base-c, 0);
--tag-chip-resolved-h: var(--tag-chip-base-h, 0deg);
gap: 0.25rem;
border-radius: 1rem;
padding: 0.2rem 0.4rem;
font-weight: 600;
border: none;
background: oklch(
min(1, calc(var(--tag-chip-resolved-l) + (1 - var(--tag-chip-resolved-l)) * var(--tag-chip-bg-lighten)))
calc(var(--tag-chip-resolved-c) * var(--tag-chip-bg-chroma-scale))
var(--tag-chip-resolved-h)
/ 0.9
);
--tag-chip-outline-color: var(
--tag-chip-outline,
oklch(
min(1, calc(var(--tag-chip-resolved-l) + (1 - var(--tag-chip-resolved-l)) * var(--tag-chip-outline-lighten)))
min(1, calc(var(--tag-chip-resolved-c) * var(--tag-chip-outline-chroma-scale)))
var(--tag-chip-resolved-h)
)
);
--tag-chip-text-color: var(
--tag-chip-text,
oklch(
clamp(0, calc(var(--tag-chip-resolved-l) + var(--tag-chip-text-lighten)), 1)
clamp(0, calc(var(--tag-chip-resolved-c) * var(--tag-chip-text-chroma-scale)), 1)
var(--tag-chip-resolved-h)
)
);
color: var(--tag-chip-text-color, currentColor);
}
.tag-chip--more {
background: transparent;
border-color: var(--border-strong);
border: 1px dashed var(--border-strong);
color: var(--muted);
}
frontend/src/styles/sidebar/sidebar.css
+18 -22
View File
@@ -676,49 +676,45 @@
flex-wrap: wrap;
gap: 0.35rem;
padding: 0.25rem 0 0.1rem;
--tag-chip-base-default: var(--surface-soft);
}
.sidebar-tag-pill {
.sidebar-tag-cloud .tag-chip {
border-radius: 999px;
padding: 0.25rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
cursor: pointer;
background: var(--surface-soft);
color: var(--fg);
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease,
opacity 0.12s ease;
box-shadow: 0 1px 2px var(--shadow-faint);
transition: transform 0.15s ease, opacity 0.12s ease;
}
.sidebar-tag-pill:hover {
transform: none;
box-shadow: 0 2px 6px var(--shadow-pop);
border-color: var(--accent-soft);
}
.sidebar-tag-pill:focus-visible {
outline: 2px solid var(--accent);
.sidebar-tag-cloud .tag-chip:focus-visible {
outline: 2px solid var(--tag-chip-outline-color, var(--accent));
outline-offset: 2px;
}
.sidebar-tag-pill.active {
border-color: var(--sidebar-active-pill-border);
box-shadow: 0 0 0 1.5px var(--sidebar-active-pill-border);
.sidebar-tag-cloud .tag-chip.active {
outline: 2px solid var(--tag-chip-outline-color, var(--accent));
outline-offset: 0;
}
.sidebar-tag-pill--untagged {
border: 1px dashed var(--border);
background: var(--surface-subtle);
.sidebar-tag-cloud .tag-chip:hover {
transform: none;
outline: 3px solid var(--tag-chip-outline-color, var(--accent));
outline-offset: 0;
}
.sidebar-tag-cloud .tag-chip--untagged {
--tag-chip-base: var(--surface-subtle);
color: var(--muted);
}
.sidebar-tag-pill--untagged.active {
.sidebar-tag-cloud .tag-chip--untagged.active {
color: var(--fg);
}
.sidebar-tag-cloud--has-active .sidebar-tag-pill:not(.active) {
.sidebar-tag-cloud--has-active .tag-chip:not(.active) {
opacity: 0.45;
}