hlmnhkl-ui 0.27.0 → 0.29.0

package/README.md

@@ -1,6 +1,6 @@
 # hlmnhkl/ui
 
-React components, measured down to the part you never see: the 44px tap area, the 2px focus ring, the timing of every move. Black, white and grey, and copied into your app so the code is yours.
+React components, measured down to the part you never see: the 44px tap area, the 2px focus ring, the timing of every move. Black, white and grey with one blue accent, and copied into your app so the code is yours.
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/hilmanhaikal/hlmnhkl-ui/main/.github/assets/home-dark.png">
@@ -74,7 +74,7 @@ Setup for other tools: [MCP server](https://ui.hlmnhkl.my/mcp).
 
 ## Pro
 
-71 more components (such as DataGrid, Calendar, Chart, KanbanBoard and Combobox), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
+72 more components (such as DataGrid, Calendar, Chart, KanbanBoard and Combobox), page blocks, full templates and brand themes are coming as hlmnhkl/ui Pro. You can see them on the [docs site](https://ui.hlmnhkl.my).
 
 ## Licence
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hlmnhkl-ui",
-  "version": "0.27.0",
-  "description": "React components in a monochrome style. Copy them into your app with npx hlmnhkl-ui add <name>.",
+  "version": "0.29.0",
+  "description": "React components in black, white and grey with one blue accent. Copy them into your app with npx hlmnhkl-ui add <name>.",
   "license": "MIT",
   "homepage": "https://ui.hlmnhkl.my",
   "repository": {

package/scripts/pro-components.json

@@ -22,6 +22,7 @@
   "Drawer",
   "EmojiPicker",
   "FileUpload",
+  "GlassLens",
   "HoverCard",
   "IcInput",
   "Image",

package/src/components/Button/Button.module.css

@@ -74,7 +74,7 @@
   box-shadow: var(--hl-shadow-1);
 }
 @media (hover: hover) {
-  .primary:hover:not([aria-disabled="true"]) { background: var(--hl-color-inverse-hover); }
+  .primary:hover:not([aria-disabled="true"]) { background: var(--hl-color-accent-hover); }
 }
 
 .secondary {

package/src/components/Dialog/Dialog.module.css

@@ -27,9 +27,11 @@
   max-height: calc(100dvh - var(--hl-space-5) * 2);
   display: flex;
   flex-direction: column;
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-panel);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-4);
   outline: none;
   pointer-events: auto;

package/src/components/DropdownMenu/DropdownMenu.module.css

@@ -6,9 +6,11 @@
   max-height: calc(100dvh - 2 * var(--hl-space-5));
   overflow-y: auto;
   padding: var(--hl-space-2);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-md);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   outline: none;
   transform-origin: top left;

package/src/components/Fab/Fab.module.css

@@ -45,7 +45,7 @@
 }
 
 @media (hover: hover) {
-  .fab:hover { background: var(--hl-color-inverse-hover); }
+  .fab:hover { background: var(--hl-color-accent-hover); }
 }
 
 .fab:active { scale: var(--hl-press-scale); }
@@ -142,7 +142,9 @@
 .actionLabel {
   padding: var(--hl-space-2) var(--hl-space-4);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-2);
   font-size: var(--hl-text-sm);
   font-weight: var(--hl-weight-medium);
@@ -157,7 +159,9 @@
   height: var(--hl-hit-min);
   margin-inline-end: calc((var(--hl-fab-size) - var(--hl-hit-min)) / 2);
   border-radius: var(--hl-radius-full);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-2);
 }
 

package/src/components/IconButton/IconButton.module.css

@@ -74,5 +74,5 @@
 }
 .primary { background: var(--hl-color-accent); color: var(--hl-color-accent-fg); }
 @media (hover: hover) {
-  .primary:hover:not(:disabled) { background: var(--hl-color-inverse-hover); }
+  .primary:hover:not(:disabled) { background: var(--hl-color-accent-hover); }
 }

package/src/components/Popover/Popover.module.css

@@ -4,9 +4,11 @@
   width: max-content;
   max-width: min(var(--hl-panel-w-sm), calc(100vw - var(--hl-space-5) * 2));
   padding: var(--hl-space-5);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-panel);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   outline: none;
   transform-origin: top left;

package/src/components/Sheet/Sheet.module.css

@@ -19,10 +19,12 @@
   display: flex;
   flex-direction: column;
   margin-left: calc(min(100%, var(--hl-panel-w-lg)) / -2);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-bottom: 0;
   border-radius: var(--hl-radius-sheet) var(--hl-radius-sheet) 0 0;
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-4);
   outline: none;
   padding-bottom: env(safe-area-inset-bottom);

package/src/components/Toast/Toast.module.css

@@ -46,9 +46,11 @@
   align-items: flex-start;
   gap: var(--hl-space-4);
   padding: var(--hl-space-5) var(--hl-space-2) var(--hl-space-5) var(--hl-space-5);
-  border: var(--hl-line) solid var(--hl-color-border);
+  border: var(--hl-line) solid var(--hl-glass-edge, var(--hl-color-border));
   border-radius: var(--hl-radius-md);
-  background: var(--hl-color-surface);
+  background: var(--hl-glass-bg, var(--hl-color-surface));
+  -webkit-backdrop-filter: var(--hl-glass-filter, none);
+  backdrop-filter: var(--hl-glass-filter, none);
   box-shadow: var(--hl-shadow-3);
   pointer-events: auto;
   touch-action: pan-y;

package/src/components/Toggle/Toggle.module.css

@@ -59,7 +59,7 @@
 
 @media (hover: hover) {
   .root:hover:not(:disabled):not([data-on]) { background: var(--hl-color-surface-hover); }
-  .root[data-on]:hover:not(:disabled) { background: var(--hl-color-inverse-hover); }
+  .root[data-on]:hover:not(:disabled) { background: var(--hl-color-accent-hover); }
 }
 
 .root:focus-visible {

package/src/tokens.css

@@ -36,9 +36,13 @@
   --hl-color-inverse-fg: var(--hl-gray-0);
   --hl-color-inverse-hover: var(--hl-gray-700);
   --hl-color-shimmer: rgb(255 255 255 / 0.7);
-  /* Accent: the foreground by default, so the library stays monochrome */
-  --hl-color-accent: var(--hl-color-inverse);
-  --hl-color-accent-fg: var(--hl-color-inverse-fg);
+  /* Accent: marking blue, the layout dye a machinist wipes on a part to check its fit, for what is chosen
+     or on: primary buttons, checked and selected states, the current tab, progress. Blue because most
+     apps use it for the main action, so it reads at once. Everything else stays black, white and grey.
+     White on it is 6.8:1. */
+  --hl-color-accent: #1f5aa6;
+  --hl-color-accent-fg: #ffffff;
+  --hl-color-accent-hover: #194a8a;
 
   /* Status: always paired with an icon or word */
   --hl-color-success: #12733a;
@@ -235,6 +239,9 @@
     --hl-color-inverse: #ececec;
     --hl-color-inverse-fg: #0a0a0a;
     --hl-color-inverse-hover: var(--hl-gray-300);
+    --hl-color-accent: #7fa8e6;
+    --hl-color-accent-fg: #0a0a0a;
+    --hl-color-accent-hover: #9bbcec;
     --hl-color-shimmer: rgb(255 255 255 / 0.06);
     --hl-color-success: #4cc97a;
     --hl-color-warning: #f2b33d;
@@ -273,6 +280,9 @@
   --hl-color-inverse: #ececec;
   --hl-color-inverse-fg: #0a0a0a;
   --hl-color-inverse-hover: var(--hl-gray-300);
+  --hl-color-accent: #7fa8e6;
+  --hl-color-accent-fg: #0a0a0a;
+  --hl-color-accent-hover: #9bbcec;
   --hl-color-shimmer: rgb(255 255 255 / 0.06);
   --hl-color-success: #4cc97a;
   --hl-color-warning: #f2b33d;
@@ -411,15 +421,18 @@
   /* A cell's widest, so long text wraps and a sideways-scrolling table stays readable. */
   --hl-table-cell-max: 320px;
 
-  /* Charts: series differ by shade, dash and marker, never colour alone */
+  /* Charts: series differ by colour, dash and marker, never colour alone. The colours are a survey map's
+     own code, in a fixed order: navy (the accent's family), contour brown, survey green, revision purple,
+     chart ochre. Checked for colour-blind separation (8.0 or more for adjacent pairs) and 3:1 against the surface, in both
+     themes. A sixth series folds into "Other" or a second chart; it never gets a made-up colour. */
   --hl-chart-h: 260px;
   --hl-chart-donut: 220px;
   --hl-chart-area-opacity: 0.14;
-  --hl-chart-1: var(--hl-gray-950);
-  --hl-chart-2: var(--hl-gray-600);
-  --hl-chart-3: #8a8a8a;
-  --hl-chart-4: var(--hl-gray-800);
-  --hl-chart-5: var(--hl-gray-500);
+  --hl-chart-1: #2f64b4;
+  --hl-chart-2: #b36324;
+  --hl-chart-3: #2f9a6e;
+  --hl-chart-4: #8a52c2;
+  --hl-chart-5: #a8861a;
   --hl-chart-dash-1: none;
   --hl-chart-dash-2: 6 4;
   --hl-chart-dash-3: 1.5 3.5;
@@ -434,22 +447,23 @@
   --hl-editor-min-h: 160px;
 }
 
+/* The same five colours, a step lighter for the dark surface, checked there on their own. */
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --hl-chart-1: var(--hl-gray-50);
-    --hl-chart-2: var(--hl-gray-400);
-    --hl-chart-3: #707070;
-    --hl-chart-4: var(--hl-gray-200);
-    --hl-chart-5: var(--hl-gray-500);
+    --hl-chart-1: #638fdb;
+    --hl-chart-2: #c97638;
+    --hl-chart-3: #3ea97a;
+    --hl-chart-4: #a873d6;
+    --hl-chart-5: #b0902a;
   }
 }
 
 [data-theme="dark"] {
-  --hl-chart-1: var(--hl-gray-50);
-  --hl-chart-2: var(--hl-gray-400);
-  --hl-chart-3: #707070;
-  --hl-chart-4: var(--hl-gray-200);
-  --hl-chart-5: var(--hl-gray-500);
+  --hl-chart-1: #638fdb;
+  --hl-chart-2: #c97638;
+  --hl-chart-3: #3ea97a;
+  --hl-chart-4: #a873d6;
+  --hl-chart-5: #b0902a;
 }
 
 @media (prefers-reduced-motion: reduce) {