From 5cc3e3646cd9f6678b7484398be8b85b288a6b16 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Beatrice=20Dellac=C3=A0?= Date: Mon, 23 Feb 2026 22:59:57 +0100 Subject: [PATCH] make accent overridable, v0.1.11 --- package.json | 2 +- src/components/SidebarNavItem.tsx | 2 +- src/styles/base.css | 22 ++++++++++------- src/styles/components.css | 40 ++++++++++++++++++++++++------- 4 files changed, 48 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 05d995e..63d440e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@panic/web-ui", - "version": "0.1.10", + "version": "0.1.11", "license": "AGPL-3.0-only", "description": "Core components for panic.haus web applications", "type": "module", diff --git a/src/components/SidebarNavItem.tsx b/src/components/SidebarNavItem.tsx index 6867466..befd2d1 100644 --- a/src/components/SidebarNavItem.tsx +++ b/src/components/SidebarNavItem.tsx @@ -28,7 +28,7 @@ export function SidebarNavItem({ onClick={onClick} className={({ isActive }) => `inline-flex h-8 items-center rounded-lg text-sm font-medium transition ${layoutClass} ${ - isActive ? 'bg-accent-500 text-white' : 'ui-body-secondary hover:bg-zinc-500/15' + isActive ? 'ui-accent-active' : 'ui-body-secondary hover:bg-zinc-500/15' }` } > diff --git a/src/styles/base.css b/src/styles/base.css index cfb057d..54176eb 100644 --- a/src/styles/base.css +++ b/src/styles/base.css @@ -1,6 +1,12 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { + /* Consumer projects can override these accent tokens after importing @panic/web-ui styles. */ + --accent-300: 168 155 191; + --accent-400: 149 135 173; + --accent-500: 125 111 152; + --accent-600: 106 93 132; + --accent-contrast: 255 255 255; --bg-page: #16121a; --surface-bg: rgba(24, 24, 27, 0.45); --surface-bg-strong: rgba(24, 24, 27, 0.62); @@ -33,8 +39,8 @@ --error-border: rgba(252, 165, 165, 0.3); --error-bg: rgba(239, 68, 68, 0.1); --error-text: #fecaca; - --mdx-link: #7d6f98; - --mdx-link-hover: #9587ad; + --mdx-link: rgb(var(--accent-500)); + --mdx-link-hover: rgb(var(--accent-400)); --mdx-inline-code-bg: #27272a; --mdx-inline-code-border: #3f3f46; --mdx-codeblock-bg: #18181b; @@ -42,8 +48,8 @@ --mdx-codeblock-text: #e4e4e7; --mdx-codeblock-gutter: #a1a1aa; --mdx-codeblock-active: #27272a; - --mdx-codeblock-selection: rgba(125, 111, 152, 0.35); - --mdx-codeblock-bracket: rgba(125, 111, 152, 0.45); + --mdx-codeblock-selection: rgb(var(--accent-500) / 0.35); + --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.45); --shadow-glow: 0 0 0 1px rgba(63, 63, 70, 0.65), 0 18px 44px rgba(0, 0, 0, 0.45); } @@ -78,8 +84,8 @@ --error-border: rgba(248, 113, 113, 0.35); --error-bg: rgba(254, 226, 226, 0.8); --error-text: #991b1b; - --mdx-link: #7d6f98; - --mdx-link-hover: #6a5d84; + --mdx-link: rgb(var(--accent-500)); + --mdx-link-hover: rgb(var(--accent-600)); --mdx-inline-code-bg: #f4f4f5; --mdx-inline-code-border: #d4d4d8; --mdx-codeblock-bg: #ffffff; @@ -87,7 +93,7 @@ --mdx-codeblock-text: #18181b; --mdx-codeblock-gutter: #71717a; --mdx-codeblock-active: #f4f4f5; - --mdx-codeblock-selection: rgba(125, 111, 152, 0.22); - --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32); + --mdx-codeblock-selection: rgb(var(--accent-500) / 0.22); + --mdx-codeblock-bracket: rgb(var(--accent-500) / 0.32); --shadow-glow: 0 0 0 1px rgba(212, 212, 216, 0.9), 0 18px 36px rgba(15, 23, 42, 0.08); } diff --git a/src/styles/components.css b/src/styles/components.css index 113839e..f5544e6 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -12,7 +12,12 @@ appearance: none; -webkit-appearance: none; -webkit-text-fill-color: var(--text-primary); - @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition focus:border-accent-400 focus:ring-2 focus:ring-accent-400/30; + @apply w-full rounded-xl px-3 py-2 text-sm outline-none transition; +} + +.field:focus { + border-color: rgb(var(--accent-400)); + box-shadow: 0 0 0 2px rgb(var(--accent-400) / 0.3); } .field::placeholder { @@ -55,7 +60,13 @@ } .btn-solid.btn-primary { - @apply bg-accent-500 text-white hover:bg-accent-400 disabled:opacity-100; + background-color: rgb(var(--accent-500)); + color: rgb(var(--accent-contrast)); + @apply disabled:opacity-100; +} + +.btn-solid.btn-primary:hover { + background-color: rgb(var(--accent-400)); } .btn-solid.btn-primary:disabled { @@ -107,16 +118,19 @@ } .btn-outlined.btn-primary { - @apply border-accent-500 text-accent-300; + border-color: rgb(var(--accent-500)); + color: rgb(var(--accent-300)); background-color: transparent; } .btn-outlined.btn-primary:hover { - @apply bg-accent-500/15 text-accent-300; + background-color: rgb(var(--accent-500) / 0.15); + color: rgb(var(--accent-300)); } .btn-outlined.btn-primary:disabled { - @apply border-accent-500/40 text-accent-300/60; + border-color: rgb(var(--accent-500) / 0.4); + color: rgb(var(--accent-300) / 0.6); background-color: transparent; } @@ -149,16 +163,17 @@ } .btn-noborder.btn-primary { - @apply text-accent-300; + color: rgb(var(--accent-300)); background-color: transparent; } .btn-noborder.btn-primary:hover { - @apply bg-accent-500/15 text-accent-300; + background-color: rgb(var(--accent-500) / 0.15); + color: rgb(var(--accent-300)); } .btn-noborder.btn-primary:disabled { - @apply text-accent-300/60; + color: rgb(var(--accent-300) / 0.6); background-color: transparent; } @@ -228,6 +243,15 @@ color: var(--error-text); } +.ui-accent-active { + background-color: rgb(var(--accent-500)); + color: rgb(var(--accent-contrast)); +} + +.ui-accent-active:hover { + background-color: rgb(var(--accent-400)); +} + .chip-root { @apply inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold leading-none; }