@mlola-ui/tokens 1.0.9 → 1.0.11

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.
@@ -145,10 +145,38 @@
145
145
  gap: var(--ml-space-2);
146
146
  }
147
147
 
148
+ /* A list of benefits, each after a check. Pricing tiers and feature rows share it. */
149
+ .ml-check-list {
150
+ margin: 0;
151
+ padding: 0;
152
+ list-style: none;
153
+ display: grid;
154
+ gap: var(--ml-space-2);
155
+ }
156
+
157
+ .ml-check-list li {
158
+ display: flex;
159
+ align-items: flex-start;
160
+ gap: var(--ml-space-2);
161
+ font-size: var(--ml-type-base);
162
+ color: var(--ml-text-muted);
163
+ }
164
+
165
+ .ml-check-list li > svg {
166
+ flex: none;
167
+ margin-top: 0.2em;
168
+ color: var(--ml-success-text);
169
+ }
170
+
148
171
  .ml-section {
149
172
  padding-block: clamp(3.5rem,8vw,6.5rem);
150
173
  }
151
174
 
175
+ /* A section a link jumps to clears the sticky navigation bar. */
176
+ .ml-section[id] {
177
+ scroll-margin-block-start: calc(var(--ml-control-md) + var(--ml-space-6));
178
+ }
179
+
152
180
  .ml-section-shell {
153
181
  width: min(100% - 2rem,72rem);
154
182
  margin-inline: auto;
@@ -3449,6 +3477,13 @@
3449
3477
  pointer-events: none;
3450
3478
  }
3451
3479
 
3480
+ /* A text affix ("https://", a domain, a unit) reads at the size of what is typed beside it. */
3481
+ .ml-input-leading,
3482
+ .ml-input-trailing {
3483
+ font-size: var(--ml-type-base);
3484
+ line-height: var(--ml-leading-snug);
3485
+ }
3486
+
3452
3487
  /* components/kbd */
3453
3488
  .ml-kbd {
3454
3489
  display: inline-grid;
@@ -4486,6 +4521,8 @@
4486
4521
  position: relative;
4487
4522
  display: grid;
4488
4523
  grid-template-columns: minmax(0, 1fr);
4524
+ /* In a form row taller than itself, the trigger keeps a field's height instead of stretching. */
4525
+ align-content: start;
4489
4526
  gap: var(--ml-space-1-5);
4490
4527
  width: 100%;
4491
4528
  min-width: 0;
@@ -4510,6 +4547,10 @@
4510
4547
  border: var(--ml-border-width) solid var(--ml-border);
4511
4548
  border-radius: var(--ml-radius-md);
4512
4549
  box-shadow: var(--ml-shadow-xs);
4550
+ /* The same type as a text field, so a select and an input sit level in a row. */
4551
+ font-family: var(--ml-font-sans);
4552
+ font-size: var(--ml-type-base);
4553
+ line-height: var(--ml-leading-snug);
4513
4554
  cursor: pointer;
4514
4555
  text-align: start;
4515
4556
  transition: border-color var(--ml-duration-fast),box-shadow var(--ml-duration-fast);
@@ -267,9 +267,9 @@
267
267
  --ml-text-faint: oklch(0.492 0.018 260);
268
268
  --ml-border: oklch(0.878 0.023 80);
269
269
  --ml-border-subtle: oklch(0.916 0.018 80);
270
- --ml-primary: oklch(0.638 0.153 58);
271
- --ml-primary-foreground: oklch(0.18 0.02 58);
272
- --ml-primary-hover: oklch(0.678 0.141 58);
270
+ --ml-primary: oklch(0.532 0.127 58);
271
+ --ml-primary-foreground: oklch(0.99 0 0);
272
+ --ml-primary-hover: oklch(0.482 0.115 58);
273
273
  --ml-primary-text: oklch(0.497 0.119 58);
274
274
  --ml-primary-subtle: oklch(0.95 0.031 58);
275
275
  --ml-success: oklch(0.507 0.14 150);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mlola-ui/tokens",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "Stable CSS entry for the framework-free Mlola UI design system",
5
5
  "main": "tokens.css",
6
6
  "sideEffects": [
package/tokens.json CHANGED
@@ -1361,8 +1361,8 @@
1361
1361
  "$value": {
1362
1362
  "colorSpace": "oklch",
1363
1363
  "components": [
1364
- 0.638,
1365
- 0.153,
1364
+ 0.532,
1365
+ 0.127,
1366
1366
  58
1367
1367
  ],
1368
1368
  "alpha": 1
@@ -1373,9 +1373,9 @@
1373
1373
  "$value": {
1374
1374
  "colorSpace": "oklch",
1375
1375
  "components": [
1376
- 0.18,
1377
- 0.02,
1378
- 58
1376
+ 0.99,
1377
+ 0,
1378
+ 0
1379
1379
  ],
1380
1380
  "alpha": 1
1381
1381
  }
@@ -1385,8 +1385,8 @@
1385
1385
  "$value": {
1386
1386
  "colorSpace": "oklch",
1387
1387
  "components": [
1388
- 0.678,
1389
- 0.141,
1388
+ 0.482,
1389
+ 0.115,
1390
1390
  58
1391
1391
  ],
1392
1392
  "alpha": 1