@robert-stackflow/oneui 0.1.0 → 0.2.0

package/styles/base.css

@@ -143,7 +143,11 @@
 
 :where(:root[data-ui-theme] *) {
   scrollbar-width: thin;
-  scrollbar-color: color-mix(in srgb, var(--muted) 35%, transparent) transparent;
+  scrollbar-color: var(
+      --scrollbar-thumb,
+      color-mix(in srgb, var(--muted) 35%, transparent)
+    )
+    transparent;
 }
 
 @supports selector(::-webkit-scrollbar) {
@@ -169,14 +173,20 @@
     )::-webkit-scrollbar-thumb {
     border: 2px solid transparent;
     border-radius: 999px;
-    background: color-mix(in srgb, var(--muted) 42%, transparent);
+    background: var(
+      --scrollbar-thumb,
+      color-mix(in srgb, var(--muted) 42%, transparent)
+    );
     background-clip: padding-box;
   }
   :where(
       :root[data-ui-theme],
       :root[data-ui-theme] *
     )::-webkit-scrollbar-thumb:hover {
-    background-color: color-mix(in srgb, var(--muted) 65%, transparent);
+    background-color: var(
+      --scrollbar-hover,
+      color-mix(in srgb, var(--muted) 65%, transparent)
+    );
   }
   :where(
       :root[data-ui-theme],
@@ -187,3 +197,10 @@
     height: 0;
   }
 }
+
+:root[data-ui-theme] {
+  --on-danger: #fff;
+}
+:root[data-ui-theme][data-theme="dark"] {
+  --on-danger: #141414;
+}

package/styles/blue.css

@@ -1,19 +1,28 @@
 :root[data-ui-theme="blue"] {
   color-scheme: light;
-  --canvas: #f6f7fa;
+  --canvas: #f5f7fb;
   --surface: #fff;
   --elevated: #fff;
-  --sidebar: #fbfcfe;
-  --input: #fff;
-  --hover: #f1f3f8;
-  --text: #263149;
-  --muted: #66748b;
-  --placeholder: #707d91;
-  --border: #e5e9f1;
-  --border-strong: #cdd5e3;
-  --accent: #5269b6;
-  --accent-hover: #43599f;
-  --accent-soft: #edf1fc;
+  --sidebar: var(--surface);
+  --input: #f9fafc;
+  --hover: #edf1f8;
+  --text: #25324a;
+  --muted: #8592a8;
+  --placeholder: color-mix(in srgb, var(--muted) 85%, transparent);
+  --border: #e3e8f1;
+  --border-strong: var(--border);
+  --accent: #5067b8;
+  --accent-hover: #4059aa;
+  --accent-soft: #ebeffb;
+  --accent-fill: #4059aa;
+  --accent-fill-hover: #354b91;
+  --on-accent-fill: #fff;
+  --switch-on: #526edb;
+  --switch-on-hover: #526edb;
+  --switch-thumb-on: #fff;
+  --navigation-active-color: var(--accent);
+  --scrollbar-thumb: #c1cada;
+  --scrollbar-hover: #97a7be;
   --on-accent: #fff;
   --success: #348769;
   --success-soft: #edf7f1;
@@ -25,28 +34,31 @@
   --radius-lg: 14px;
   --control-height: 40px;
   --space: 24px;
-  --shadow: 0 3px 16px #273d6010;
-  --shadow-lg: 0 16px 50px #17243e1c;
+  --shadow: 0 12px 36px rgb(29 44 75 / 4.5%);
+  --shadow-lg: 0 12px 40px #17244315, 0 2px 8px #17244308;
   --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
   --fast: 160ms var(--ease);
   --sidebar-width: 228px;
 }
 :root[data-ui-theme="blue"][data-theme="dark"] {
   color-scheme: dark;
-  --canvas: #10151e;
-  --surface: #19212e;
-  --elevated: #202a39;
-  --sidebar: #141c28;
-  --input: #151e2a;
-  --hover: #243044;
-  --text: #e0e7f2;
-  --muted: #98a6bb;
-  --placeholder: #6f7f96;
-  --border: #2c384a;
-  --border-strong: #41516a;
-  --accent: #a7b9f1;
-  --accent-hover: #c0cdf5;
-  --accent-soft: #283650;
+  --canvas: #10151f;
+  --surface: #19212f;
+  --elevated: #202a3b;
+  --sidebar: var(--surface);
+  --input: #131c29;
+  --hover: #253147;
+  --text: #e1e8f4;
+  --muted: #95a4bd;
+  --border: #2c384d;
+  --border-strong: var(--border);
+  --accent: #afc1ff;
+  --accent-hover: #bdcbee;
+  --accent-soft: #263451;
+  --accent-fill: #2c3f78;
+  --accent-fill-hover: #25355f;
+  --scrollbar-thumb: #43516a;
+  --scrollbar-hover: #657794;
   --on-accent: #192540;
   --success: #87c7a8;
   --success-soft: #1d362e;
@@ -54,8 +66,8 @@
   --warning-soft: #383021;
   --danger: #ee9ba6;
   --danger-soft: #3e2632;
-  --shadow: 0 3px 16px #00000012;
-  --shadow-lg: 0 16px 50px #0005;
+  --shadow: 0 8px 30px #03081214;
+  --shadow-lg: 0 14px 44px #050a1455, 0 2px 8px #050a1430;
 }
 :root[data-ui-theme="blue"][data-accent="neutral"] {
   --accent: #343a46;
@@ -108,7 +120,7 @@
   --selected: var(--accent-soft);
   --navigation: var(--sidebar);
   --disabled: var(--placeholder);
-  --control-border: var(--border-strong);
+  --control-border: var(--border);
   --separator-width: 1px;
   --separator-style: solid;
   --separator-color: var(--border);
@@ -119,7 +131,7 @@
   --menu-item-line-height: 20px;
   --menu-item-padding-x: 11px;
   --menu-item-gap: 10px;
-  --menu-item-spacing: 2px;
+  --menu-item-spacing: 1px;
   --menu-item-icon-size: 16px;
   --menu-item-font-size: 13px;
   --menu-shortcut-font-size: 11px;
@@ -152,7 +164,7 @@
   --shadow-edge: #0004;
   --shadow-modal: #0008;
   --overlay: #050a1466;
-  --control-border: #3b4a60;
+  --control-border: var(--border);
 }
 :root[data-ui-theme="blue"][data-density="compact"] {
   --control-small: 28px;
@@ -186,10 +198,12 @@
   --field-radius: var(--radius);
   --field-font-size: 13px;
   --field-line-height: 1.4;
+  /* Keep the previous token valid for consumers with older composed styles. */
   --field-hover-strength: 38%;
+  --field-hover-border: color-mix(in srgb, var(--accent) 35%, var(--border));
   --field-focus-border: var(--accent);
   --field-focus-width: 3px;
-  --field-focus-strength: 14%;
+  --field-focus-strength: 12%;
   --field-disabled-opacity: 0.55;
   --field-readonly: var(--canvas);
   --field-gap: 8px;
@@ -198,7 +212,7 @@
   --field-message-size: 12px;
   --select-width: 168px;
   --popup-background: var(--elevated);
-  --popup-border: var(--border-strong);
+  --popup-border: var(--border);
   --popup-radius: calc(var(--radius) + 2px);
   --popup-shadow: var(--shadow-lg);
   --dialog-width: 520px;

package/styles/minimal.css

@@ -25,7 +25,7 @@
   --menu-item-line-height: 20px;
   --menu-item-padding-x: 10px;
   --menu-item-gap: 9px;
-  --menu-item-spacing: 2px;
+  --menu-item-spacing: 1px;
   --menu-item-icon-size: 16px;
   --menu-item-font-size: 12px;
   --menu-shortcut-font-size: 11px;