@mlola-ui/tokens 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mlola
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+# @mlola-ui/tokens
+
+The stable, compatibility CSS entry for Mlola UI. Importing it loads the ordered
+cascade layers for tokens, foundations, materials, recipes, and motion, so a
+consumer only needs one line.
+
+`@mlola-ui/engine` is the source of truth; this package is the durable entry
+point that does not move when the engine's file layout changes.
+
+## Install
+
+```bash
+npm install @mlola-ui/tokens
+```
+
+## Use
+
+```css
+@import "@mlola-ui/tokens/tokens.css";
+```
+
+```html
+<html data-theme="atelier" data-mode="light">
+```
+
+## Exports
+
+| Path | What it is |
+| --- | --- |
+| `@mlola-ui/tokens` | the default stylesheet |
+| `@mlola-ui/tokens/tokens.json` | DTCG token document |
+| `@mlola-ui/tokens/<layer>.css` | a single layer when you want narrower boundaries |
+
+MIT licensed. Part of [Mlola UI](https://ui.mlola.com).

package/generated/foundations.css

@@ -0,0 +1,154 @@
+/* Foundation layer. */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+  font-family: var(--ml-font-sans);
+  background: var(--ml-background);
+  color: var(--ml-text);
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  margin: 0;
+  background: var(--ml-background);
+  color: var(--ml-text);
+  font-family: var(--ml-font-sans);
+  font-size: 1rem;
+  line-height: var(--ml-body-leading);
+  letter-spacing: var(--ml-tracking);
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+:where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd) {
+  margin: 0;
+}
+
+:where(ul,ol)[role="list"] {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+:where(img,picture,video,canvas,svg) {
+  display: block;
+  max-width: 100%;
+}
+
+:where(button,input,textarea,select) {
+  font: inherit;
+  color: inherit;
+}
+
+:where(button,[role="button"]) {
+  touch-action: manipulation;
+}
+
+:where(button,input,select,textarea,a[href],[tabindex]:not([tabindex="-1"])) {
+  scroll-margin-block: 1rem;
+}
+
+:where(a) {
+  color: inherit;
+  text-decoration-thickness: .08em;
+  text-underline-offset: .18em;
+}
+
+:where(h1,h2,h3) {
+  font-family: var(--ml-font-display);
+  font-weight: var(--ml-display-weight);
+  line-height: 1.08;
+  letter-spacing: -.025em;
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: clamp(2.25rem,5vw,4.75rem);
+}
+
+h2 {
+  font-size: clamp(1.75rem,3.2vw,3rem);
+}
+
+h3 {
+  font-size: clamp(1.25rem,2vw,1.75rem);
+}
+
+:where(code,kbd,samp,pre) {
+  font-family: var(--ml-font-mono);
+  font-size: .925em;
+}
+
+:where(pre) {
+  max-width: 100%;
+  overflow: auto;
+}
+
+::selection {
+  background: color-mix(in srgb,var(--ml-primary) 28%,transparent);
+  color: var(--ml-text);
+}
+
+::placeholder {
+  color: var(--ml-text-faint);
+  opacity: 1;
+}
+
+:where(a,button,input,select,textarea,[role="button"],[tabindex]):focus-visible {
+  outline: 2px solid var(--ml-focus);
+  outline-offset: 2px;
+}
+
+:where(button,input,select,textarea):disabled,
+[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: .5;
+}
+
+@media (pointer:coarse) {
+  :where(button,[role="button"],input:not([type="hidden"]),select,textarea) {
+    min-height: var(--ml-target-min);
+  }
+}
+
+@media (prefers-reduced-transparency:reduce) {
+  * {
+    backdrop-filter: none!important;
+    -webkit-backdrop-filter: none!important;
+  }
+}
+
+@media (forced-colors:active) {
+  :root {
+    --ml-border: CanvasText;
+    --ml-focus: Highlight;
+    --ml-primary: Highlight;
+    --ml-primary-foreground: HighlightText;
+    --ml-primary-text: LinkText;
+  }
+
+  :where(a,button,input,select,textarea,[role="button"]) {
+    forced-color-adjust: auto;
+  }
+
+  /* Box-shadow rings vanish in forced colours; 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

@@ -0,0 +1,55 @@
+/* Material recipes: apply a material to one surface regardless of theme. */
+.ml-material-solid {
+  background: var(--ml-surface);
+  border: var(--ml-border-width) solid var(--ml-border);
+  box-shadow: var(--ml-shadow-xs);
+}
+
+.ml-material-elevated {
+  background: var(--ml-surface-elevated);
+  border: var(--ml-border-width) solid var(--ml-border);
+  box-shadow: var(--ml-shadow-md);
+}
+
+.ml-material-glass {
+  background: color-mix(in srgb,var(--ml-surface) 86%,transparent);
+  border: var(--ml-border-width) solid color-mix(in srgb,var(--ml-border) 78%,transparent);
+  box-shadow: var(--ml-shadow-sm);
+  backdrop-filter: blur(calc(10px + 12px * var(--ml-theme-depth))) saturate(145%);
+  -webkit-backdrop-filter: blur(calc(10px + 12px * var(--ml-theme-depth))) saturate(145%);
+}
+
+.ml-material-anodized {
+  background: linear-gradient(145deg,color-mix(in srgb,var(--ml-surface-elevated) 94%,var(--ml-text)),var(--ml-surface));
+  border: var(--ml-border-width) solid var(--ml-border);
+  box-shadow: inset 0 1px color-mix(in srgb,var(--ml-text) 10%,transparent),var(--ml-shadow-sm);
+}
+
+.ml-material-paper {
+  background-color: var(--ml-surface);
+  background-image: radial-gradient(color-mix(in srgb,var(--ml-text) calc(var(--ml-texture-opacity) * 100%),transparent) .6px,transparent .7px);
+  background-size: 4px 4px;
+  border: var(--ml-border-width) solid var(--ml-border);
+}
+
+.ml-material-specular {
+  position: relative;
+  overflow: hidden;
+  background: var(--ml-surface);
+  border: var(--ml-border-width) solid var(--ml-border);
+}
+
+.ml-material-specular::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(135deg,oklch(1 0 0/.2),transparent 46%,oklch(0 0 0/.05));
+  mix-blend-mode: soft-light;
+}
+
+@supports not (backdrop-filter:blur(1px)) {
+  .ml-material-glass {
+    background: var(--ml-surface-elevated);
+  }
+}

package/generated/mlola.css

@@ -0,0 +1,10 @@
+/* Generated by @mlola-ui/engine. React and Tailwind are not required. */
+@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
+   layer so a brand wins over every canonical theme. */
+@import "./theme.css" layer(mlola.tokens);
+@import "./foundations.css" layer(mlola.foundations);
+@import "./materials.css" layer(mlola.materials);
+@import "./recipes.css" layer(mlola.recipes);
+@import "./motion.css" layer(mlola.motion);

package/generated/motion.css

@@ -0,0 +1,93 @@
+/* Motion and accessibility layer. */
+@keyframes ml-spin { to{transform:rotate(360deg)} }
+
+@keyframes ml-pulse { 50%{opacity:.5} }
+
+@keyframes ml-fade-in { from{opacity:0}to{opacity:1} }
+
+@keyframes ml-pop-in { from{opacity:0;transform:translateY(4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)} }
+
+@keyframes ml-dialog-in { from{opacity:0;transform:translate(-50%,-48%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
+
+@keyframes ml-toast-in { from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)} }
+
+@keyframes ml-slide-left { from{transform:translateX(100%)}to{transform:translateX(0)} }
+
+@keyframes ml-slide-right { from{transform:translateX(-100%)}to{transform:translateX(0)} }
+
+@keyframes ml-slide-up { from{transform:translateY(100%)}to{transform:translateY(0)} }
+
+@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 {
+  animation: ml-pop-in var(--ml-duration-normal) var(--ml-ease-bounce) both;
+}
+
+.ml-animate-slide-left {
+  animation: ml-slide-left var(--ml-duration-normal) var(--ml-ease-spring) both;
+}
+
+.ml-text-shimmer {
+  color: var(--ml-primary-text);
+}
+
+@supports ((-webkit-background-clip:text) or (background-clip:text)) {
+  .ml-text-shimmer {
+    background: linear-gradient(90deg,var(--ml-text),var(--ml-primary),var(--ml-text));
+    background-size: 200% auto;
+    background-clip: text;
+    -webkit-background-clip: text;
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    animation: ml-shimmer 3s ease-in-out infinite;
+  }
+}
+
+/* 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} }
+
+.mlola-glyph[data-animated] > * {
+  stroke-dasharray: 1 1;
+  animation: mlola-glyph-draw var(--ml-duration-slow) var(--ml-ease-standard) both;
+}
+
+.mlola-glyph[data-animated] > *:nth-child(2) { animation-delay: 60ms; }
+
+.mlola-glyph[data-animated] > *:nth-child(3) { animation-delay: 120ms; }
+
+.mlola-glyph[data-animated] > *:nth-child(n+4) { animation-delay: 180ms; }
+
+.mlola-glyph[data-animated] > [fill="currentColor"] {
+  stroke-dasharray: none;
+  animation-name: mlola-glyph-fill;
+}
+
+@media (prefers-reduced-motion:reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-delay: 0s!important;
+    animation-duration: .01ms!important;
+    animation-iteration-count: 1!important;
+    scroll-behavior: auto!important;
+    transition-delay: 0s!important;
+    transition-duration: .01ms!important;
+  }
+}