@mlola-ui/tokens 1.0.8 → 1.0.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generated/mlola.css +5 -0
- package/generated/recipes.css +18 -1
- package/package.json +1 -1
package/generated/mlola.css
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
/* Generated by @mlola-ui/engine. React and Tailwind are not required. */
|
|
2
|
+
/* Where Mlola sits among a utility framework's layers, by Tailwind's names:
|
|
3
|
+
above its reset, so preflight never unstyles a component, whichever
|
|
4
|
+
stylesheet the app imports first. Without such a framework these layers
|
|
5
|
+
stay empty. */
|
|
6
|
+
@layer theme, base, mlola, components, utilities;
|
|
2
7
|
@layer mlola.tokens, mlola.foundations, mlola.materials, mlola.recipes, mlola.motion, mlola.accessibility;
|
|
3
8
|
@import "./tokens.css" layer(mlola.tokens);
|
|
4
9
|
/* The project theme is a token source too, imported last within the same
|
package/generated/recipes.css
CHANGED
|
@@ -7,9 +7,26 @@
|
|
|
7
7
|
display: none !important;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
/* Icons
|
|
10
|
+
/* Icons sit on the text's optical center and keep their size inside flex
|
|
11
|
+
rows; a squeezed row shrinks text, not glyphs. The same rules ship in
|
|
12
|
+
@mlola-ui/icons/glyphs.css for apps that use the icons without the engine. */
|
|
11
13
|
:where(.mlola-glyph) {
|
|
14
|
+
display: inline-block;
|
|
12
15
|
flex-shrink: 0;
|
|
16
|
+
overflow: visible;
|
|
17
|
+
vertical-align: -0.125em;
|
|
18
|
+
transform-box: fill-box;
|
|
19
|
+
transform-origin: center;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
:where(.mlola-glyph[data-optical-size="small"]) {
|
|
23
|
+
--mlola-glyph-stroke: 2;
|
|
24
|
+
--mlola-glyph-optical-scale: 0.94;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:where(.mlola-glyph[data-optical-size="large"]) {
|
|
28
|
+
--mlola-glyph-stroke: 1.5;
|
|
29
|
+
--mlola-glyph-optical-scale: 1.03;
|
|
13
30
|
}
|
|
14
31
|
|
|
15
32
|
.ml-visually-hidden {
|