From 665fd86a29965e2c6cd4a3ed8f1c9fb01b7780be Mon Sep 17 00:00:00 2001 From: eti Date: Fri, 31 Jul 2026 22:41:12 +0200 Subject: [PATCH] =?UTF-8?q?web:=20add=20=E2=80=9Cinverted=E2=80=9D=20and?= =?UTF-8?q?=20update=20=E2=80=9Cemphasis=E2=80=9D=20color=20tokens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: eti --- web/src/app.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/web/src/app.css b/web/src/app.css index f8f75f3e..3629ac98 100644 --- a/web/src/app.css +++ b/web/src/app.css @@ -35,7 +35,7 @@ --color-background-info-subtle: #eef2ff; --color-background-info-subtle-hover: #e0e7ff; --color-background-info-emphasis: #4f46e5; - --color-background-neutral-emphasis: #1f2937; + --color-background-emphasis: #111827; /* --- background / navigation --- The settings sidebar aliases *invert* between modes, so these cannot be @@ -51,6 +51,7 @@ --color-foreground-placeholder: #9ca3af; --color-foreground-disabled: #d1d5db; --color-foreground-on-emphasis: #ffffff; + --color-foreground-inverted: #f3f4f6; --color-foreground-highlight: #854d0e; --color-foreground-success: #16a34a; --color-foreground-success-strong: #166534; @@ -89,12 +90,15 @@ --color-border-danger-subtle: #fecaca; --color-border-navigation-item-active: #e5e7eb; - /* --- shadow (inner depth) --- */ + /* --- shadow (inner depth, eg.: for the button component) --- */ --color-shadow-inner-strong: #d1d5db; --color-shadow-inner-strong-hover: #d1d5db; --color-shadow-inner-subtle: #e5e7eb; - --shadow-menu: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + /* --- shadow --- */ + --shadow-small: 0 2px 4px var(--color-alpha-dark-10); + --shadow-regular: 0 4px 12px var(--color-alpha-dark-5), 0 2px 4px var(--color-alpha-dark-5); + --shadow-large: 0 6px 16px var(--color-alpha-dark-5), 0 4px 6px var(--color-alpha-dark-5); /* --- alpha --- */ --color-alpha-light-5: color-mix(in srgb, var(--color-background-default) 5%, transparent); @@ -301,7 +305,7 @@ --color-background-info-subtle: #312e81; --color-background-info-subtle-hover: #3730a3; --color-background-info-emphasis: #4f46e5; - --color-background-neutral-emphasis: #374151; + --color-background-emphasis: #f3f4f6; /* --- background / navigation (Dark) --- inverted vs light, see above */ --color-background-navigation-frame: #1f2937; @@ -314,6 +318,7 @@ --color-foreground-placeholder: #9ca3af; --color-foreground-disabled: #6b7280; --color-foreground-on-emphasis: #ffffff; + --color-foreground-inverted: #111827; --color-foreground-highlight: #fef08a; --color-foreground-success: #4ade80; --color-foreground-success-strong: #bbf7d0; -- 2.51.2