@mdbase-dev/ui 0.1.0-beta.153 → 0.1.0-beta.154

package/css/controls.css

@@ -6,11 +6,15 @@
  * and --control-font-size; action hierarchy and focus treatment stay shared.
  */
 :root {
-  --control-height: 34px;
+  --control-height: 28px;
   --control-font-size: var(--font-size-ui);
   --control-radius: var(--radius-sm);
 }
 
+@media (pointer: coarse) {
+  :root { --control-height: 40px; }
+}
+
 .mdbase-visually-hidden {
   position: absolute;
   width: 1px;
@@ -33,7 +37,7 @@
   background: transparent;
   font: inherit;
   font-size: var(--control-font-size);
-  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
+  transition: border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard), transform var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-field {
@@ -385,25 +389,29 @@ textarea.mdbase-field {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  padding: 0 12px;
-  border: 1px solid transparent;
+  padding: 0 10px;
+  border: 1px solid var(--color-border-strong);
   border-radius: var(--control-radius);
   color: var(--color-text);
-  background: var(--color-surface-subtle);
+  background: var(--color-canvas);
   font: inherit;
   font-size: var(--control-font-size);
-  font-weight: var(--font-weight-semibold);
+  font-weight: var(--font-weight-medium);
+  text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
   transition: color var(--motion-quick) var(--ease-standard), border-color var(--motion-quick) var(--ease-standard), background var(--motion-quick) var(--ease-standard);
 }
 
 .mdbase-button:hover:not(:disabled) {
-  border-color: var(--color-text-soft);
   color: var(--color-text);
   background: var(--color-surface-subtle);
 }
 
+.mdbase-button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
 .mdbase-button.is-primary {
   border-color: var(--color-accent);
   color: var(--color-on-accent);
@@ -417,6 +425,7 @@ textarea.mdbase-field {
 }
 
 .mdbase-button.is-tertiary {
+  border-color: transparent;
   color: var(--color-text-soft);
   background: transparent;
 }
@@ -516,7 +525,7 @@ textarea.mdbase-field {
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background: var(--color-text-soft);
+  background: var(--color-text-muted);
   pointer-events: none;
   transition: transform var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
 }

package/css/fonts.css

@@ -1,5 +1,10 @@
-/* Next provides real intermediate weights (200–800), served locally under font-src 'self'. */
-@import "@fontsource-variable/atkinson-hyperlegible-next/wght.css";
+/* Served locally under font-src 'self'. Bold and italic exist for note text. */
+@import "@fontsource/ibm-plex-sans/400.css";
+@import "@fontsource/ibm-plex-sans/500.css";
+@import "@fontsource/ibm-plex-sans/600.css";
+@import "@fontsource/ibm-plex-sans/700.css";
+@import "@fontsource/ibm-plex-sans/400-italic.css";
+@import "@fontsource/ibm-plex-sans/700-italic.css";
 @import "@fontsource/azeret-mono/latin-400.css";
 @import "@fontsource/azeret-mono/latin-500.css";
 @import "@fontsource/azeret-mono/latin-600.css";

package/css/tokens.css

@@ -5,18 +5,18 @@
  */
 :root {
   color-scheme: light;
-  --color-canvas: oklch(99.5% 0.002 255);
-  --color-surface: oklch(99.5% 0.002 255);
-  --color-surface-subtle: oklch(97.8% 0.003 255);
-  --color-text: oklch(21% 0.018 255);
-  --color-text-soft: oklch(50% 0.014 255);
-  --color-text-muted: oklch(54% 0.01 255);
-  --color-text-faint: oklch(70% 0.009 255);
-  --color-border: oklch(92% 0.006 255);
-  --color-border-strong: oklch(82% 0.008 255);
-  --color-selected: oklch(96.8% 0.004 255);
-  --color-accent: oklch(47% 0.1 238);
-  --color-accent-strong: oklch(41% 0.1 238);
+  --color-canvas: oklch(100% 0 0);
+  --color-surface: oklch(100% 0 0);
+  --color-surface-subtle: oklch(97% 0.001 286);
+  --color-text: oklch(21% 0.006 286);
+  --color-text-soft: oklch(37% 0.012 286);
+  --color-text-muted: oklch(52% 0.012 286);
+  --color-text-faint: oklch(70% 0.008 286);
+  --color-border: oklch(94.5% 0.002 286);
+  --color-border-strong: oklch(90% 0.004 286);
+  --color-selected: oklch(95.8% 0.001 286);
+  --color-accent: #005c88;
+  --color-accent-strong: oklch(40% 0.1 239);
   --color-accent-soft: oklch(93.5% 0.035 238);
   --color-on-accent: oklch(98% 0.004 245);
   --color-success: oklch(44% 0.085 153);
@@ -44,7 +44,7 @@
   --app-editor: #005c88;
   --app-reader: #a4467f;
   --app-writer: #d55e00;
-  --sans: "Atkinson Hyperlegible Next Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --sans: "IBM Plex Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   /* Six steps: captions, UI chrome, section titles, prose, headings, document titles. */
   --font-size-caption: 12px;
@@ -57,9 +57,9 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
+  --radius-sm: 6px;
+  --radius-md: 6px;
+  --radius-lg: 10px;
   --elevation-low: 0 4px 12px var(--color-shadow);
   --elevation-high: 0 12px 32px var(--color-shadow);
   --space-0: 0;
@@ -96,17 +96,17 @@
 
 :root[data-theme="dark"] {
   color-scheme: dark;
-  --color-canvas: oklch(17.5% 0.012 255);
-  --color-surface: oklch(19.5% 0.012 255);
-  --color-surface-subtle: oklch(22.5% 0.012 255);
-  --color-text: oklch(92% 0.008 255);
-  --color-text-soft: oklch(70% 0.012 255);
-  --color-text-muted: oklch(62% 0.011 255);
-  --color-text-faint: oklch(56% 0.011 255);
-  --color-border: oklch(29% 0.012 255);
-  --color-border-strong: oklch(39% 0.012 255);
-  --color-selected: oklch(23.5% 0.012 255);
-  --color-accent: oklch(73% 0.105 238);
+  --color-canvas: oklch(18.7% 0.002 286);
+  --color-surface: oklch(18.7% 0.002 286);
+  --color-surface-subtle: oklch(23.6% 0.004 286);
+  --color-text: oklch(94.7% 0.003 286);
+  --color-text-soft: oklch(82% 0.007 286);
+  --color-text-muted: oklch(68% 0.01 286);
+  --color-text-faint: oklch(56% 0.01 286);
+  --color-border: oklch(25.7% 0.004 286);
+  --color-border-strong: oklch(32% 0.005 286);
+  --color-selected: oklch(25.7% 0.004 286);
+  --color-accent: #63b1e2;
   --color-accent-strong: oklch(65% 0.105 238);
   --color-accent-soft: oklch(31% 0.045 238);
   --color-on-accent: oklch(17% 0.012 255);
@@ -139,17 +139,17 @@
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
     color-scheme: dark;
-    --color-canvas: oklch(17.5% 0.012 255);
-    --color-surface: oklch(19.5% 0.012 255);
-    --color-surface-subtle: oklch(22.5% 0.012 255);
-    --color-text: oklch(92% 0.008 255);
-    --color-text-soft: oklch(70% 0.012 255);
-    --color-text-muted: oklch(62% 0.011 255);
-    --color-text-faint: oklch(56% 0.011 255);
-    --color-border: oklch(29% 0.012 255);
-    --color-border-strong: oklch(39% 0.012 255);
-    --color-selected: oklch(23.5% 0.012 255);
-    --color-accent: oklch(73% 0.105 238);
+    --color-canvas: oklch(18.7% 0.002 286);
+    --color-surface: oklch(18.7% 0.002 286);
+    --color-surface-subtle: oklch(23.6% 0.004 286);
+    --color-text: oklch(94.7% 0.003 286);
+    --color-text-soft: oklch(82% 0.007 286);
+    --color-text-muted: oklch(68% 0.01 286);
+    --color-text-faint: oklch(56% 0.01 286);
+    --color-border: oklch(25.7% 0.004 286);
+    --color-border-strong: oklch(32% 0.005 286);
+    --color-selected: oklch(25.7% 0.004 286);
+    --color-accent: #63b1e2;
     --color-accent-strong: oklch(65% 0.105 238);
     --color-accent-soft: oklch(31% 0.045 238);
     --color-on-accent: oklch(17% 0.012 255);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdbase-dev/ui",
-  "version": "0.1.0-beta.153",
+  "version": "0.1.0-beta.154",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -115,8 +115,8 @@
     "README.md"
   ],
   "dependencies": {
-    "@fontsource-variable/atkinson-hyperlegible-next": "^5.3.0",
-    "@fontsource/azeret-mono": "^5.3.0"
+    "@fontsource/azeret-mono": "^5.3.0",
+    "@fontsource/ibm-plex-sans": "^5.3.0"
   },
   "peerDependencies": {
     "@codemirror/view": "^6.0.0",
@@ -169,6 +169,6 @@
     "typecheck": "node scripts/compile-catalogues.mjs && tsc -p tsconfig.json --noEmit"
   },
   "mdbaseRelease": {
-    "commit": "06bf91cf4ccc14865b5b97f18f3387c0d7e2dbc8"
+    "commit": "45b120644deed3525b8182be081110478adaa397"
   }
 }