make accent overridable, v0.1.11

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",

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'
                 }`
             }
         >

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: rgb(var(--accent-500));
-    --mdx-link-hover: #9587ad;
+    --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-selection: rgb(var(--accent-500) / 0.35);
-    --mdx-codeblock-bracket: rgba(125, 111, 152, 0.45);
+    --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: rgb(var(--accent-500));
-    --mdx-link-hover: #6a5d84;
+    --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-selection: rgb(var(--accent-500) / 0.22);
-    --mdx-codeblock-bracket: rgba(125, 111, 152, 0.32);
+    --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);
 }

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;
 }