@oneli8/core 1.0.0-beta.11 → 1.0.0-beta.12
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/ai-context.json +1 -1
- package/package.json +2 -2
- package/src/materials/gem/gem.css +53 -4
package/ai-context.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneli8/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.12",
|
|
4
4
|
"description": "OneLi8 Design System, framework agnostic. renderX returns an HTML string, hydrateX wires existing DOM. Ships the design language and the rules it follows.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-system",
|
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
"NOTICE"
|
|
90
90
|
],
|
|
91
91
|
"dependencies": {
|
|
92
|
-
"@oneli8/tokens": "1.0.0-beta.
|
|
92
|
+
"@oneli8/tokens": "1.0.0-beta.12"
|
|
93
93
|
},
|
|
94
94
|
"engines": {
|
|
95
95
|
"node": ">=20"
|
|
@@ -445,11 +445,40 @@
|
|
|
445
445
|
1 - (1 - a)^4. Measured in proof/gem-halo-contrast.html. */
|
|
446
446
|
text-shadow: var(--_gem-glow), var(--_gem-glow),
|
|
447
447
|
var(--_gem-glow), var(--_gem-glow);
|
|
448
|
-
/* The cut edge
|
|
448
|
+
/* The cut edge, exactly as the Gem slab carries it in Figma — Light Gem Slab
|
|
449
|
+
297:617, which is the container this class is the code equivalent of:
|
|
450
|
+
|
|
451
|
+
INNER_SHADOW offset 3, 3 blur 6 Cut Edge / High
|
|
452
|
+
INNER_SHADOW offset -3,-3 blur 12 spread -3 Cut Edge / Mid
|
|
453
|
+
DROP_SHADOW offset 0,12 blur 36 Cut Edge / Shadow
|
|
454
|
+
DROP_SHADOW offset 0, 3 blur 6 Cut Edge / Shadow
|
|
455
|
+
|
|
456
|
+
TWO inner shadows, from OPPOSITE corners: light falling top-left and shade
|
|
457
|
+
gathering bottom-right. That is why the bezel reads on all four sides in
|
|
458
|
+
Figma. This carried a top specular and a 1px rim instead — the CONTROL
|
|
459
|
+
recipe, which belongs to buttons and fields, not to a slab — so the cut
|
|
460
|
+
only ever showed along the top. Every offset and blur here is on the 3px
|
|
461
|
+
grid, which is how the slab was drawn. */
|
|
449
462
|
box-shadow:
|
|
450
|
-
inset
|
|
451
|
-
inset
|
|
452
|
-
0
|
|
463
|
+
inset 3px 3px 6px 0 var(--ol8-material-gem-color-cutedge-high),
|
|
464
|
+
inset -3px -3px 12px -3px var(--ol8-material-gem-color-cutedge-mid),
|
|
465
|
+
0 12px 36px var(--ol8-material-gem-color-cutedge-shadow),
|
|
466
|
+
0 3px 6px var(--ol8-material-gem-color-cutedge-shadow);
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
/* A Token or Choice Chip sitting ON a Gem surface.
|
|
470
|
+
Both draw the Choice Chip silhouette, whose default --_surface is
|
|
471
|
+
color.surface.sunken — an opaque plate. On glass that reads as a solid
|
|
472
|
+
lozenge stuck to the surface, and in the Light appearance its ink is dark,
|
|
473
|
+
so the label goes invisible against near-white gem content beside it.
|
|
474
|
+
The pill turns transparent and the label takes the gem ink and halo, so the
|
|
475
|
+
chip reads as a boundary around content rather than a second material. */
|
|
476
|
+
.ol8-gem .ol8-chip {
|
|
477
|
+
--_surface: transparent;
|
|
478
|
+
--_edge: var(--ol8-material-gem-color-cutedge-high);
|
|
479
|
+
--_ink: var(--ol8-material-gem-color-quiet-content);
|
|
480
|
+
text-shadow: var(--_gem-glow), var(--_gem-glow),
|
|
481
|
+
var(--_gem-glow), var(--_gem-glow);
|
|
453
482
|
}
|
|
454
483
|
|
|
455
484
|
/* Disabled on a generic Gem surface, same single grey, same absent halo. */
|
|
@@ -479,6 +508,26 @@
|
|
|
479
508
|
--_gem-blur: var(--ol8-material-gem-blur-environmental);
|
|
480
509
|
}
|
|
481
510
|
|
|
511
|
+
/* The third rung, and the SAME face as reduced transparency below reached for
|
|
512
|
+
a different reason. That one is the PREFERENCE route — the person asked for
|
|
513
|
+
less transparency, system-wide. This is the CONTEXT route: this surface is
|
|
514
|
+
legibility-critical right now, and the environment losing presence is the
|
|
515
|
+
correct trade rather than a regression. An athlete reading a split while
|
|
516
|
+
running laps is the case: speed is exactly when the ambient face recedes,
|
|
517
|
+
and exactly when this reader can least afford it.
|
|
518
|
+
|
|
519
|
+
Both land on legibilityFace because there is one dense-but-see-through face,
|
|
520
|
+
not two. 0.72 leaves 28% of the scene visible and measures 7.70:1 against
|
|
521
|
+
near-white ink in the worst region of a daylight plate, with no credit taken
|
|
522
|
+
for the halo — AAA while still worn-display honest.
|
|
523
|
+
|
|
524
|
+
Blur holds at the stabilized 12px. Environmental's 18px exists to let the
|
|
525
|
+
scene dominate, which is the opposite of what this face is for. */
|
|
526
|
+
.ol8-gem[data-ol8-face="legibility"] {
|
|
527
|
+
--_gem-face: var(--ol8-material-gem-color-quiet-legibilityface);
|
|
528
|
+
--_gem-blur: var(--ol8-material-gem-blur-stabilized);
|
|
529
|
+
}
|
|
530
|
+
|
|
482
531
|
/* REDUCED TRANSPARENCY, THE WORN-DISPLAY READING OF IT
|
|
483
532
|
Gem is worn, so the background is the real world and an opaque panel would
|
|
484
533
|
occlude the street for the person who needs help reading the interface most.
|