update styles, v0.1.17

.drone.yml

@@ -13,24 +13,18 @@ trigger:
 
 steps:
     - name: install
-      image: node:22
+      image: node:25
       commands:
-          - corepack enable
-          - corepack prepare yarn@1.22.22 --activate
           - yarn install --frozen-lockfile
 
     - name: lint
-      image: node:22
+      image: node:25
       commands:
-          - corepack enable
-          - corepack prepare yarn@1.22.22 --activate
           - yarn lint
 
     - name: build
-      image: node:22
+      image: node:25
       commands:
-          - corepack enable
-          - corepack prepare yarn@1.22.22 --activate
           - yarn build
 
 ---
@@ -39,22 +33,18 @@ type: docker
 name: web-ui-publish
 
 trigger:
-    branch:
-        - main
     event:
-        - promote
-    target:
-        - production
+        - tag
+    ref:
+        - refs/tags/v*
 
 steps:
     - name: publish-npm
-      image: node:22
+      image: node:25
       environment:
           NEXUS_NPM_TOKEN:
               from_secret: nexus_npm_token
       commands:
-          - corepack enable
-          - corepack prepare yarn@1.22.22 --activate
           - yarn install --frozen-lockfile
           - npm config set //nexus.beatrice.wtf/repository/npm-hosted/:_authToken "$NEXUS_NPM_TOKEN"
           - yarn publish:nexus

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panic/web-ui",
-    "version": "0.1.10",
+    "version": "0.1.17",
     "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);
@@ -16,6 +22,8 @@
     --field-disabled-border: #3f3f46;
     --field-disabled-text: #bbb6c3;
     --field-disabled-placeholder: #71717a;
+    --field-selection-bg: rgb(var(--accent-500) / 0.42);
+    --field-selection-text: var(--text-primary);
     --ghost-bg: rgba(24, 24, 27, 0.5);
     --ghost-border: #3f3f46;
     --ghost-hover: rgba(39, 39, 42, 0.7);
@@ -33,8 +41,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 +50,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);
 }
 
@@ -63,6 +71,8 @@
     --field-disabled-border: #d7d7d7;
     --field-disabled-text: #71717a;
     --field-disabled-placeholder: #a1a1aa;
+    --field-selection-bg: rgb(var(--accent-500) / 0.24);
+    --field-selection-text: var(--text-primary);
     --ghost-bg: rgba(255, 255, 255, 0.88);
     --ghost-border: #d4d4d8;
     --ghost-hover: #f4f4f5;
@@ -78,8 +88,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 +97,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);
 }

src/styles/components.css

@@ -12,13 +12,98 @@
     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 {
     color: var(--text-soft);
 }
 
+.field::selection {
+    background-color: var(--field-selection-bg);
+    color: var(--field-selection-text);
+    -webkit-text-fill-color: var(--field-selection-text);
+}
+
+.field[type='date']::-webkit-datetime-edit-day-field,
+.field[type='date']::-webkit-datetime-edit-month-field,
+.field[type='date']::-webkit-datetime-edit-year-field,
+.field[type='time']::-webkit-datetime-edit-hour-field,
+.field[type='time']::-webkit-datetime-edit-minute-field,
+.field[type='datetime-local']::-webkit-datetime-edit-day-field,
+.field[type='datetime-local']::-webkit-datetime-edit-month-field,
+.field[type='datetime-local']::-webkit-datetime-edit-year-field,
+.field[type='datetime-local']::-webkit-datetime-edit-hour-field,
+.field[type='datetime-local']::-webkit-datetime-edit-minute-field {
+    border-radius: 0.375rem;
+}
+
+.field[type='date']::-webkit-datetime-edit-day-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='date']::-webkit-datetime-edit-month-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='date']::-webkit-datetime-edit-year-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='time']::-webkit-datetime-edit-hour-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='time']::-webkit-datetime-edit-minute-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-day-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-month-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-year-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-hour-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-minute-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+
 .field:disabled {
     border-color: var(--field-disabled-border);
     background-color: var(--field-disabled-bg);
@@ -55,7 +140,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 +198,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 +243,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 +323,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;
 }