@mlola-ui/engine 1.0.8 → 1.0.10

package/build.mjs

@@ -34,6 +34,11 @@ const layers = {
 
 const layerOrder = "mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, mlola.accessibility";
 const aggregate = `/* Generated by @mlola-ui/engine. React and Tailwind are not required. */
+/* Where Mlola sits among a utility framework's layers, by Tailwind's names:
+   above its reset, so preflight never unstyles a component, whichever
+   stylesheet the app imports first. Without such a framework these layers
+   stay empty. */
+@layer theme, base, mlola, components, utilities;
 @layer ${layerOrder};
 @import "./tokens.css" layer(mlola.tokens);
 /* The project theme is a token source too, imported last within the same

package/generated/assets.json

@@ -1376,13 +1376,13 @@
               "path": "download.svg",
               "role": "source",
               "bytes": 3444,
-              "integrity": "sha256-5cm99iahdj31U8SY6CmP2+i/Y7gqzep2xLhZSyR3lIw="
+              "integrity": "sha256-BUz1gF+cjzSGX80cAXkBEbk2B/QfikfDVvMkXf9aetY="
             },
             {
               "path": "download.tsx",
               "role": "react",
               "bytes": 4359,
-              "integrity": "sha256-HCmxOC90IVFKx9MvBDtG9tuxSrYCOvS/yUm6Hxa6vN8="
+              "integrity": "sha256-HqMG8B7wBduafDrBZ3k0PSxWpPZPWArZsJy3YXyv+Ew="
             }
           ],
           "themeable": true,
@@ -1673,7 +1673,7 @@
           "id": "link",
           "kind": "2d",
           "title": "Connected",
-          "summary": "Two interlocking metal links carrying a tiny shared signal.",
+          "summary": "Two open chain links joined by a clear central bar with a restrained signal accent.",
           "tags": [
             "link",
             "connection",
@@ -1683,14 +1683,14 @@
             {
               "path": "link.svg",
               "role": "source",
-              "bytes": 2874,
-              "integrity": "sha256-dMvq0GVsY+/hNe6z8rZ5SJL7Jh/2RmtYFV6UX3+5GnY="
+              "bytes": 2504,
+              "integrity": "sha256-+gKXIfVp1G3qEUWS1veswBBwNwRcs5c04F1y3NKB7hs="
             },
             {
               "path": "link.tsx",
               "role": "react",
-              "bytes": 3737,
-              "integrity": "sha256-PmDMYKD2awnUZuEc/5AKBEk1wZefhKnwenG8MRSNpc8="
+              "bytes": 3357,
+              "integrity": "sha256-MGE+g1e9BmbGHP1XMzC/YKBCNqp3LO+b5Jb2DiN7wNU="
             }
           ],
           "themeable": true,
@@ -1841,7 +1841,7 @@
           "id": "notifications",
           "kind": "2d",
           "title": "Notifications",
-          "summary": "A small desk bell with one fresh notification card beside it.",
+          "summary": "A softly outlined notification bell with a small clapper and one fresh message card.",
           "tags": [
             "notifications",
             "alerts",
@@ -1851,14 +1851,14 @@
             {
               "path": "notifications.svg",
               "role": "source",
-              "bytes": 3439,
-              "integrity": "sha256-+PZJkoooLoCtu8uoDJbdXAxR0oJPcA86j0uz9Ww2YyQ="
+              "bytes": 3485,
+              "integrity": "sha256-ihNfIqnU8XYhAQnwgl9t2ZOjN0m8XIC8HJmRsec7+EM="
             },
             {
               "path": "notifications.tsx",
               "role": "react",
-              "bytes": 4364,
-              "integrity": "sha256-c6x6JvSMARTd588qqW/pJ9RgdvEqINR2G6OxvvKOnAk="
+              "bytes": 4431,
+              "integrity": "sha256-8epIRgSRCUZLmlIjw/P2MZbmkYNXeIz4l5IiX6s22pc="
             }
           ],
           "themeable": true,
@@ -1949,6 +1949,62 @@
           "license": "MIT",
           "author": "Mlola"
         },
+        {
+          "id": "precise-layout",
+          "kind": "2d",
+          "title": "Precise layout",
+          "summary": "A measured layout sheet and an extended tape, with aligned tick marks and a folded end hook.",
+          "tags": [
+            "measure",
+            "layout",
+            "design"
+          ],
+          "files": [
+            {
+              "path": "precise-layout.svg",
+              "role": "source",
+              "bytes": 4986,
+              "integrity": "sha256-19uhMUCRTWI2J0Po8hbC3cyBmOhv2dxjMqLMsjHaFAo="
+            },
+            {
+              "path": "precise-layout.tsx",
+              "role": "react",
+              "bytes": 6002,
+              "integrity": "sha256-xUeKXphcaq5uFvfkci0bXbK3jzhh1QkRSSukH/BlG3k="
+            }
+          ],
+          "themeable": true,
+          "license": "MIT",
+          "author": "Mlola"
+        },
+        {
+          "id": "print-ready",
+          "kind": "2d",
+          "title": "Print ready",
+          "summary": "A compact desktop printer with a fresh sheet feeding through a clearly defined output slot.",
+          "tags": [
+            "print",
+            "documents",
+            "export"
+          ],
+          "files": [
+            {
+              "path": "print-ready.svg",
+              "role": "source",
+              "bytes": 4240,
+              "integrity": "sha256-Z5LuX5KA6LA/slehxyi5lJi2sMSmiVw5oGnzKqKxNAw="
+            },
+            {
+              "path": "print-ready.tsx",
+              "role": "react",
+              "bytes": 5222,
+              "integrity": "sha256-WI61gBtD0xRJYGOQLOxyo5utgw8obTyYad4Rjbvqunc="
+            }
+          ],
+          "themeable": true,
+          "license": "MIT",
+          "author": "Mlola"
+        },
         {
           "id": "quick-calculation",
           "kind": "2d",
@@ -1977,6 +2033,34 @@
           "license": "MIT",
           "author": "Mlola"
         },
+        {
+          "id": "quiet-workspace",
+          "kind": "2d",
+          "title": "Quiet workspace",
+          "summary": "An articulated task lamp beside an open notebook, giving a single piece of work room to breathe.",
+          "tags": [
+            "workspace",
+            "focus",
+            "notes"
+          ],
+          "files": [
+            {
+              "path": "quiet-workspace.svg",
+              "role": "source",
+              "bytes": 4306,
+              "integrity": "sha256-nQ8z7c5LiW6GkN6gPJqFP6fdjf7ZtgTL0KdLJzi5FAo="
+            },
+            {
+              "path": "quiet-workspace.tsx",
+              "role": "react",
+              "bytes": 5307,
+              "integrity": "sha256-18G80gjKTkOyudwlynL4CgJz2IhMjRl9H2s7w5yeOno="
+            }
+          ],
+          "themeable": true,
+          "license": "MIT",
+          "author": "Mlola"
+        },
         {
           "id": "responsive-layout",
           "kind": "2d",
@@ -2799,6 +2883,42 @@
           "license": "MIT",
           "author": "Mlola"
         },
+        {
+          "id": "measuring-tape",
+          "kind": "3d",
+          "title": "Measuring tape",
+          "summary": "An enamel tape measure with a circular porcelain inset, evenly spaced marks and a folded metal end hook.",
+          "tags": [
+            "measure",
+            "precision",
+            "design"
+          ],
+          "files": [
+            {
+              "path": "measuring-tape.glb",
+              "role": "source",
+              "bytes": 592628,
+              "integrity": "sha256-gjp8OVIjpEbmo0zeegc7p9W+gkYGeNqwETxuBfE43Js="
+            },
+            {
+              "path": "measuring-tape-poster.webp",
+              "role": "poster",
+              "bytes": 16086,
+              "integrity": "sha256-Ygzmwy/ttH5//dWsBUTsR+4XGQlD/YpodjI6y9caXuo="
+            }
+          ],
+          "themeable": true,
+          "materials": [
+            "primary",
+            "metal",
+            "surface",
+            "neutral",
+            "accent",
+            "ink"
+          ],
+          "license": "MIT",
+          "author": "Mlola"
+        },
         {
           "id": "notebook",
           "kind": "3d",
@@ -2936,6 +3056,41 @@
           "license": "MIT",
           "author": "Mlola"
         },
+        {
+          "id": "paper-printer",
+          "kind": "3d",
+          "title": "Paper printer",
+          "summary": "A compact porcelain printer with a rear paper feed, inset output slot and a neatly printed sheet.",
+          "tags": [
+            "print",
+            "documents",
+            "workspace"
+          ],
+          "files": [
+            {
+              "path": "paper-printer.glb",
+              "role": "source",
+              "bytes": 457012,
+              "integrity": "sha256-9sK7cA4R5ZYekDnTBrsZlUnYY4E/SUddQ/dCJGTtO9c="
+            },
+            {
+              "path": "paper-printer-poster.webp",
+              "role": "poster",
+              "bytes": 16926,
+              "integrity": "sha256-lRC0WaPykkZxEhtgEi4f0N93LFGoJ2uE0kfWbQOPR7Y="
+            }
+          ],
+          "themeable": true,
+          "materials": [
+            "surface",
+            "primary",
+            "neutral",
+            "ink",
+            "accent"
+          ],
+          "license": "MIT",
+          "author": "Mlola"
+        },
         {
           "id": "rocket",
           "kind": "3d",
@@ -3040,6 +3195,41 @@
           "license": "MIT",
           "author": "Mlola"
         },
+        {
+          "id": "task-lamp",
+          "kind": "3d",
+          "title": "Task lamp",
+          "summary": "An articulated desk lamp with aligned metal joints, an enamel light bar and a porcelain diffuser.",
+          "tags": [
+            "workspace",
+            "focus",
+            "lighting"
+          ],
+          "files": [
+            {
+              "path": "task-lamp.glb",
+              "role": "source",
+              "bytes": 283168,
+              "integrity": "sha256-hAolZPXrmhkMW0DjUx/aB4iXTEBm3YFDnoTzOqsMtMc="
+            },
+            {
+              "path": "task-lamp-poster.webp",
+              "role": "poster",
+              "bytes": 16676,
+              "integrity": "sha256-KczARj6DGDO6U9YrYZ5LLTKCHK922mbXLvJtcmeMEfQ="
+            }
+          ],
+          "themeable": true,
+          "materials": [
+            "surface",
+            "neutral",
+            "metal",
+            "primary",
+            "accent"
+          ],
+          "license": "MIT",
+          "author": "Mlola"
+        },
         {
           "id": "usb-stick",
           "kind": "3d",

package/generated/mlola.css

@@ -1,4 +1,9 @@
 /* Generated by @mlola-ui/engine. React and Tailwind are not required. */
+/* Where Mlola sits among a utility framework's layers, by Tailwind's names:
+   above its reset, so preflight never unstyles a component, whichever
+   stylesheet the app imports first. Without such a framework these layers
+   stay empty. */
+@layer theme, base, mlola, components, utilities;
 @layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, mlola.accessibility;
 @import "./tokens.css" layer(mlola.tokens);
 /* The project theme is a token source too, imported last within the same

package/generated/recipes.css

@@ -7,9 +7,26 @@
   display: none !important;
 }
 
-/* Icons keep their size inside flex rows; a squeezed row shrinks text, not glyphs. */
+/* Icons sit on the text's optical center and keep their size inside flex
+   rows; a squeezed row shrinks text, not glyphs. The same rules ship in
+   @mlola-ui/icons/glyphs.css for apps that use the icons without the engine. */
 :where(.mlola-glyph) {
+  display: inline-block;
   flex-shrink: 0;
+  overflow: visible;
+  vertical-align: -0.125em;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+:where(.mlola-glyph[data-optical-size="small"]) {
+  --mlola-glyph-stroke: 2;
+  --mlola-glyph-optical-scale: 0.94;
+}
+
+:where(.mlola-glyph[data-optical-size="large"]) {
+  --mlola-glyph-stroke: 1.5;
+  --mlola-glyph-optical-scale: 1.03;
 }
 
 .ml-visually-hidden {

package/generated/themes.json

@@ -54,7 +54,7 @@
       "id": "atelier",
       "label": "Atelier Umami",
       "name": "Atelier Umami",
-      "swatch": "oklch(0.638 0.153 58)",
+      "swatch": "oklch(0.532 0.127 58)",
       "material": "paper",
       "theme": {
         "type": 0.82,

package/generated/tokens.css

@@ -267,9 +267,9 @@
   --ml-text-faint: oklch(0.492 0.018 260);
   --ml-border: oklch(0.878 0.023 80);
   --ml-border-subtle: oklch(0.916 0.018 80);
-  --ml-primary: oklch(0.638 0.153 58);
-  --ml-primary-foreground: oklch(0.18 0.02 58);
-  --ml-primary-hover: oklch(0.678 0.141 58);
+  --ml-primary: oklch(0.532 0.127 58);
+  --ml-primary-foreground: oklch(0.99 0 0);
+  --ml-primary-hover: oklch(0.482 0.115 58);
   --ml-primary-text: oklch(0.497 0.119 58);
   --ml-primary-subtle: oklch(0.95 0.031 58);
   --ml-success: oklch(0.507 0.14 150);

package/generated/tokens.json

@@ -1361,8 +1361,8 @@
           "$value": {
             "colorSpace": "oklch",
             "components": [
-              0.638,
-              0.153,
+              0.532,
+              0.127,
               58
             ],
             "alpha": 1
@@ -1373,9 +1373,9 @@
           "$value": {
             "colorSpace": "oklch",
             "components": [
-              0.18,
-              0.02,
-              58
+              0.99,
+              0,
+              0
             ],
             "alpha": 1
           }
@@ -1385,8 +1385,8 @@
           "$value": {
             "colorSpace": "oklch",
             "components": [
-              0.678,
-              0.141,
+              0.482,
+              0.115,
               58
             ],
             "alpha": 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mlola-ui/engine",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Framework-free CSS, spring easings, and the machine-readable contract for Mlola UI",
   "type": "module",
   "sideEffects": [

package/src/deprecations.mjs

@@ -8,8 +8,6 @@
  * ledger entry remains.
  */
 
-export const CURRENT_VERSION = "0.3.0";
-
 export const DEPRECATIONS = [
   // 1.0 removed data-skin, the shadcn --background/--chart-*/--sidebar-*
   // aliases, the .ml-button-* class variants and every other duplicate

package/src/palette.mjs

@@ -126,13 +126,15 @@ const isAchromatic = (color) => color.C < 0.03;
 
 /**
  * WCAG 2's ratio favours dark ink on mid-tone saturated colors, but eyes read
- * white on a violet, blue, green or red far better. In light mode a chromatic,
- * non-warm fill darkens a little (at most 0.12 L) so white clears the target;
- * yellows and oranges keep dark ink, as convention expects.
+ * white on a violet, blue, green, red or burnt orange far better: dark ink on
+ * a mid orange reads as dark on dark. In light mode a chromatic fill darkens a
+ * little (at most 0.12 L) so white clears the target. Ambers and yellows keep
+ * dark ink, as convention expects, and so does an orange too bright to reach
+ * white within that step.
  */
 function deepenForWhite(fill, mode) {
-  const warm = fill.H > 40 && fill.H < 130;
-  if (mode !== "light" || isAchromatic(fill) || warm || contrast(WHITE, fill) >= TARGETS.body) return fill;
+  const yellow = fill.H >= 65 && fill.H < 130;
+  if (mode !== "light" || isAchromatic(fill) || yellow || contrast(WHITE, fill) >= TARGETS.body) return fill;
   const deeper = solveLightness(fill, WHITE, TARGETS.body, "darker");
   return fill.L - deeper.L <= 0.12 ? deeper : fill;
 }