@mlola-ui/tokens 1.2.1 → 1.3.0

package/generated/accessibility.css

@@ -1,7 +1,4 @@
-/* Accessibility layer: last in the cascade, so these guarantees hold over any recipe. */
-/* On a touch screen, a text field smaller than 16px makes iOS zoom the page
-   when it takes focus, and the page stays zoomed after. Every field that
-   takes typing is at least 16px there; everything else keeps its size. */
+/* @mlola-ui/engine accessibility.css, generated. The sources keep the comments. */
 @media (pointer: coarse) {
   :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), textarea, select, [contenteditable]:not([contenteditable="false"])) {
     font-size: max(1rem, 1em);

package/generated/foundations.css

@@ -1,4 +1,4 @@
-/* Foundation layer. */
+/* @mlola-ui/engine foundations.css, generated. The sources keep the comments. */
 *,
 *::before,
 *::after {
@@ -28,10 +28,6 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-/* A layer on <body> (a menu, list, tooltip, dialog, toaster) carries the
-   theme and mode of the place it opened from, which may not be the page's.
-   Inherited text would be the page's, worked out on <body>; the layer
-   restates it, so its ink and type are its own theme's. */
 [data-ml-portal] {
   color: var(--ml-text);
   font-family: var(--ml-font-sans);
@@ -124,18 +120,11 @@ h3 {
   opacity: .5;
 }
 
-/* Room for a fingertip on text fields, which grow with their content.
-   Buttons keep the shape their recipe draws: stretching a round or square
-   control only distorts it. Small ones widen their target invisibly instead
-   (see [data-hit] below), and every other button already clears the 24px
-   minimum of WCAG 2.5.8. */
 @media (pointer:coarse) {
   :where(input:not([type="hidden"],[type="checkbox"],[type="radio"],[type="range"],[type="color"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="image"]),select,textarea):where(:not([data-shape="inline"])) {
     min-height: var(--ml-target-min);
   }
 
-  /* A control drawn smaller than a fingertip keeps its look and gains an
-     invisible target around it. */
   :where([data-hit="expand"]) {
     position: relative;
   }
@@ -167,16 +156,8 @@ h3 {
     forced-color-adjust: auto;
   }
 
-  /* Box-shadow rings vanish in forced colors; the system highlight stands in. */
   :focus-visible {
     outline: 2px solid Highlight!important;
     outline-offset: 2px!important;
   }
 }
-
-/* The page scrollbar is left to the platform: styling it with
-   ::-webkit-scrollbar forces a classic, space-taking scrollbar even where the
-   system uses overlay scrollbars, and the page then shifts whenever an
-   overlay locks scrolling. The theme's color-scheme already tints it for dark
-   mode. Scroll areas inside components opt into a thin, themed scrollbar
-   with the standard properties in their own stylesheets. */

package/generated/materials.css

@@ -1,4 +1,4 @@
-/* Material recipes: apply a material to one surface regardless of theme. */
+/* @mlola-ui/engine materials.css, generated. The sources keep the comments. */
 .ml-material-solid {
   background: var(--ml-surface);
   border: var(--ml-border-width) solid var(--ml-border);

package/generated/motion.css

@@ -1,4 +1,4 @@
-/* Motion and accessibility layer. */
+/* @mlola-ui/engine motion.css, generated. The sources keep the comments. */
 @keyframes ml-spin { to{transform:rotate(360deg)} }
 
 @keyframes ml-pulse { 50%{opacity:.5} }
@@ -19,12 +19,8 @@
 
 @keyframes ml-slide-down { from{transform:translateY(-100%)}to{transform:translateY(0)} }
 
-/* An overlay panel entering from wherever it sits: the element sets
-   --ml-enter-from to the transform it starts at. */
 @keyframes ml-panel-in { from{opacity:0;transform:var(--ml-enter-from)} }
 
-
-
 @keyframes ml-shimmer { from{background-position:200% center}to{background-position:-200% center} }
 
 .ml-animate-pop {
@@ -51,10 +47,6 @@
   }
 }
 
-/* Glyph motion: an animated glyph draws itself, stroke by stroke, and its
-   filled details fade in after. It runs once when a glyph becomes active
-   (a check on success, a bell on a new alert) and never while idle. Shapes
-   carry pathLength="1", so one dash length fits every stroke. */
 @keyframes mlola-glyph-draw { from{stroke-dashoffset:1} }
 
 @keyframes mlola-glyph-fill { from{opacity:0} }