@rak200/ui 0.2.13 → 0.2.14
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/README.md +1 -1
- package/dist/card.d.ts +41 -0
- package/dist/card.d.ts.map +1 -0
- package/dist/card.js +88 -0
- package/dist/card.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/tokens.d.ts +2 -2
- package/dist/tokens.d.ts.map +1 -1
- package/dist/tokens.js +32 -0
- package/dist/tokens.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -86,7 +86,7 @@ components; `docs/` is what describes them.
|
|
|
86
86
|
|
|
87
87
|
## Status
|
|
88
88
|
|
|
89
|
-
**v0.**
|
|
89
|
+
**v0.** Twelve components — `<ui-button>`, `<ui-card>`, `<ui-field>`, `<ui-dialog>`, `<ui-input>`,
|
|
90
90
|
`<ui-textarea>`, `<ui-checkbox>`, `<ui-switch>`, `<ui-select>`, `<ui-radio-group>`, `<ui-radio>`
|
|
91
91
|
and `<ui-icon>` — the token layer
|
|
92
92
|
under them, and an adopted glyph set, built to the ecosystem's full quality bar rather than
|
package/dist/card.d.ts
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { LitElement, type TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* A container: a surface with a boundary, a corner and a lift.
|
|
4
|
+
*
|
|
5
|
+
* **Presentational, and deliberately not interactive.** A card that reacts to a click is a
|
|
6
|
+
* button or a link, and both already exist — here and in the platform. This element grows
|
|
7
|
+
* no `clickable` attribute, because the first thing such an attribute has to do is
|
|
8
|
+
* reimplement keyboard activation, the accessible name and the disabled semantics that
|
|
9
|
+
* `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
|
|
10
|
+
* leaving them to find out.
|
|
11
|
+
*
|
|
12
|
+
* **It claims no role either.** There is no card element and no APG pattern for one, so
|
|
13
|
+
* the shadow root renders slots and nothing else: what a card *means* is the host's, and
|
|
14
|
+
* they say it by slotting a heading, or by writing `<article>` around this element when
|
|
15
|
+
* the content really is self-contained. A `role` invented here would be one every consumer
|
|
16
|
+
* inherits and none of them chose.
|
|
17
|
+
*
|
|
18
|
+
* **Three regions, ordered here rather than in the host's markup.** The slots are declared
|
|
19
|
+
* header, body, footer, so that is the order they render in whatever order the host wrote
|
|
20
|
+
* them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
|
|
21
|
+
* contributes no box to lay out or to space.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```html
|
|
25
|
+
* <ui-card>
|
|
26
|
+
* <h3 slot="header">Monthly plan</h3>
|
|
27
|
+
* <p>Everything in the free tier, plus priority support.</p>
|
|
28
|
+
* <div slot="footer"><ui-button>Choose</ui-button></div>
|
|
29
|
+
* </ui-card>
|
|
30
|
+
* ```
|
|
31
|
+
*/
|
|
32
|
+
export declare class UiCard extends LitElement {
|
|
33
|
+
static readonly styles: import("lit").CSSResult;
|
|
34
|
+
render(): TemplateResult;
|
|
35
|
+
}
|
|
36
|
+
declare global {
|
|
37
|
+
interface HTMLElementTagNameMap {
|
|
38
|
+
'ui-card': UiCard;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
//# sourceMappingURL=card.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,MAAO,SAAQ,UAAU;IAClC,gBAAyB,MAAM,0BAwC7B;IAEO,MAAM,IAAI,cAAc;CAOpC;AAQD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,SAAS,EAAE,MAAM,CAAC;KACrB;CACJ"}
|
package/dist/card.js
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { LitElement, css, html } from 'lit';
|
|
2
|
+
import { reference } from './reference.js';
|
|
3
|
+
/**
|
|
4
|
+
* A container: a surface with a boundary, a corner and a lift.
|
|
5
|
+
*
|
|
6
|
+
* **Presentational, and deliberately not interactive.** A card that reacts to a click is a
|
|
7
|
+
* button or a link, and both already exist — here and in the platform. This element grows
|
|
8
|
+
* no `clickable` attribute, because the first thing such an attribute has to do is
|
|
9
|
+
* reimplement keyboard activation, the accessible name and the disabled semantics that
|
|
10
|
+
* `<button>` and `<a>` carry for free. `docs/card.md` sends a reader there rather than
|
|
11
|
+
* leaving them to find out.
|
|
12
|
+
*
|
|
13
|
+
* **It claims no role either.** There is no card element and no APG pattern for one, so
|
|
14
|
+
* the shadow root renders slots and nothing else: what a card *means* is the host's, and
|
|
15
|
+
* they say it by slotting a heading, or by writing `<article>` around this element when
|
|
16
|
+
* the content really is self-contained. A `role` invented here would be one every consumer
|
|
17
|
+
* inherits and none of them chose.
|
|
18
|
+
*
|
|
19
|
+
* **Three regions, ordered here rather than in the host's markup.** The slots are declared
|
|
20
|
+
* header, body, footer, so that is the order they render in whatever order the host wrote
|
|
21
|
+
* them — and an unfilled one costs nothing, because a `<slot>` is `display: contents` and
|
|
22
|
+
* contributes no box to lay out or to space.
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* ```html
|
|
26
|
+
* <ui-card>
|
|
27
|
+
* <h3 slot="header">Monthly plan</h3>
|
|
28
|
+
* <p>Everything in the free tier, plus priority support.</p>
|
|
29
|
+
* <div slot="footer"><ui-button>Choose</ui-button></div>
|
|
30
|
+
* </ui-card>
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export class UiCard extends LitElement {
|
|
34
|
+
static { this.styles = css `
|
|
35
|
+
/* A column rather than a block, and the footer below is why: margin-block-start:
|
|
36
|
+
auto needs a flex line to push against. That is what makes a row of cards in a
|
|
37
|
+
grid line their footers up when the bodies are different lengths — the one thing
|
|
38
|
+
a footer slot buys that writing the element last does not.
|
|
39
|
+
|
|
40
|
+
The slots are left at their default display: contents, so the flex items are
|
|
41
|
+
the host's own elements. An empty region is then absent rather than
|
|
42
|
+
zero-height — gap never spaces a card that has no footer. */
|
|
43
|
+
:host {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
gap: calc(${reference('--ui-space')} * 2);
|
|
47
|
+
box-sizing: border-box;
|
|
48
|
+
padding: calc(${reference('--ui-space')} * 2);
|
|
49
|
+
font-family: ${reference('--ui-font')};
|
|
50
|
+
/* The pair, never half of it: a surface declared without the text colour that
|
|
51
|
+
was chosen against it inherits whatever the page set, and the contrast the
|
|
52
|
+
token layer measured stops holding at the one place it was measured for. */
|
|
53
|
+
color: ${reference('--ui-color-text')};
|
|
54
|
+
background: ${reference('--ui-color-surface')};
|
|
55
|
+
border: 1px solid ${reference('--ui-color-border')};
|
|
56
|
+
border-radius: ${reference('--ui-radius')};
|
|
57
|
+
/* The boundary and the shadow are one decision made twice, because each covers
|
|
58
|
+
where the other cannot. The shadow is what says *raised* on a light page and
|
|
59
|
+
nearly nothing on a dark one — it is black at a low alpha, and light-dark()
|
|
60
|
+
cannot carry a second value for it, since it takes colours and a shadow is
|
|
61
|
+
not one. The boundary is derived, so it mixes toward the text and is correct
|
|
62
|
+
in both schemes by construction. Drop either and the card loses its edge in
|
|
63
|
+
one scheme: measured, a bordered card on the dark surface is the only thing
|
|
64
|
+
separating it from the page behind it. */
|
|
65
|
+
box-shadow: ${reference('--ui-elevation-raised')};
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Pushed to the bottom of whatever height the card ended up with. Written on the
|
|
69
|
+
slotted element rather than on a wrapper, because a wrapper would be a flex item
|
|
70
|
+
of its own — present, and therefore spaced by gap, even with nothing in it. */
|
|
71
|
+
slot[name='footer']::slotted(*) {
|
|
72
|
+
margin-block-start: auto;
|
|
73
|
+
}
|
|
74
|
+
`; }
|
|
75
|
+
render() {
|
|
76
|
+
return html `
|
|
77
|
+
<slot name="header"></slot>
|
|
78
|
+
<slot></slot>
|
|
79
|
+
<slot name="footer"></slot>
|
|
80
|
+
`;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
// Stryker disable next-line StringLiteral: the registration runs once, at import, inside
|
|
84
|
+
// the warm process Stryker switches mutants in — so by the time a mutant on this line is
|
|
85
|
+
// active the element is already defined under the original name, and no test can observe
|
|
86
|
+
// the change. Outside the runner's reach, not an equivalent mutant.
|
|
87
|
+
customElements.define('ui-card', UiCard);
|
|
88
|
+
//# sourceMappingURL=card.js.map
|
package/dist/card.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"card.js","sourceRoot":"","sources":["../src/card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;aACT,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;wBAYjB,SAAS,CAAC,YAAY,CAAC;;4BAEnB,SAAS,CAAC,YAAY,CAAC;2BACxB,SAAS,CAAC,WAAW,CAAC;;;;qBAI5B,SAAS,CAAC,iBAAiB,CAAC;0BACvB,SAAS,CAAC,oBAAoB,CAAC;gCACzB,SAAS,CAAC,mBAAmB,CAAC;6BACjC,SAAS,CAAC,aAAa,CAAC;;;;;;;;;0BAS3B,SAAS,CAAC,uBAAuB,CAAC;;;;;;;;;KASvD,CAAC;IAEO,MAAM;QACX,OAAO,IAAI,CAAA;;;;SAIV,CAAC;IACN,CAAC;;AAGL,yFAAyF;AACzF,yFAAyF;AACzF,yFAAyF;AACzF,oEAAoE;AACpE,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,EACf,KAAK,KAAK,EACV,KAAK,YAAY,GACpB,MAAM,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,aAAa,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAyB,MAAM,YAAY,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EACH,MAAM,EACN,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,eAAe,GAGlB,MAAM,aAAa,CAAC"}
|
package/dist/tokens.d.ts
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
* it does break is code that **enumerates** the set, an exhaustive `Record<Token, string>`
|
|
32
32
|
* above all. The supported shape is the partial map, which is what a theme is anyway.
|
|
33
33
|
*/
|
|
34
|
-
export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke"];
|
|
34
|
+
export declare const tokens: readonly ["--ui-color-accent", "--ui-color-accent-contrast", "--ui-color-surface", "--ui-color-text", "--ui-color-focus", "--ui-color-danger", "--ui-color-scrim", "--ui-radius", "--ui-space", "--ui-font", "--ui-duration-100", "--ui-easing-state", "--ui-easing-enter", "--ui-easing-exit", "--ui-icon-size", "--ui-icon-stroke", "--ui-elevation-100"];
|
|
35
35
|
/** A CSS custom property this package defines and gives a default. */
|
|
36
36
|
export type Token = (typeof tokens)[number];
|
|
37
37
|
/**
|
|
@@ -44,7 +44,7 @@ export type Token = (typeof tokens)[number];
|
|
|
44
44
|
* what it buys is an override surface a host can hold in their head: change the accent and
|
|
45
45
|
* the hover and pressed colours follow, rather than being one more name each.
|
|
46
46
|
*/
|
|
47
|
-
export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed"];
|
|
47
|
+
export declare const derivedTokens: readonly ["--ui-duration-state", "--ui-color-border", "--ui-color-text-muted", "--ui-color-hover", "--ui-color-pressed", "--ui-color-accent-hover", "--ui-color-accent-pressed", "--ui-elevation-raised"];
|
|
48
48
|
/** A CSS custom property this package computes rather than declares. */
|
|
49
49
|
export type DerivedToken = (typeof derivedTokens)[number];
|
|
50
50
|
/**
|
package/dist/tokens.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,MAAM,6VA4ET,CAAC;AAEX,sEAAsE;AACtE,MAAM,MAAM,KAAK,GAAG,CAAC,OAAO,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5C;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,2MAwBhB,CAAC;AAEX,wEAAwE;AACxE,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CA+CpD,CAAC;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAwB3D,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,CAW/D,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAsBxC"}
|
package/dist/tokens.js
CHANGED
|
@@ -90,6 +90,23 @@ export const tokens = [
|
|
|
90
90
|
// size, and 2 is the weight the adopted set is drawn at.
|
|
91
91
|
'--ui-icon-size',
|
|
92
92
|
'--ui-icon-stroke',
|
|
93
|
+
// Elevation, arriving with `ui-card` — the category `ROADMAP.md` said would, after the
|
|
94
|
+
// first overlay arrived and brought none.
|
|
95
|
+
//
|
|
96
|
+
// A step in a scale, named by an ordinal with gaps, for the reason the duration scale
|
|
97
|
+
// gives above: elevation is *relative* by nature — a card sits above the page, a menu
|
|
98
|
+
// above the card — so the names have to be able to grow between each other. No
|
|
99
|
+
// component reads this one; they read `--ui-elevation-raised`, which points in here.
|
|
100
|
+
// No second step comes with it: a tooltip and a menu are the components that would
|
|
101
|
+
// judge one, and neither is written.
|
|
102
|
+
//
|
|
103
|
+
// **It carries no dark value, and cannot.** `darkScheme` is emitted through
|
|
104
|
+
// `light-dark()`, which takes colours — and a shadow is not a colour. So this is one
|
|
105
|
+
// value in both schemes, and on a dark page it does almost nothing: black on charcoal
|
|
106
|
+
// is black. What separates a raised surface there is the *boundary*, which is derived
|
|
107
|
+
// and therefore already scheme-correct — which is why `src/card.ts` draws both and
|
|
108
|
+
// says so beside them.
|
|
109
|
+
'--ui-elevation-100',
|
|
93
110
|
];
|
|
94
111
|
/**
|
|
95
112
|
* The roles computed from the grounds rather than declared beside them.
|
|
@@ -120,6 +137,11 @@ export const derivedTokens = [
|
|
|
120
137
|
'--ui-color-pressed',
|
|
121
138
|
'--ui-color-accent-hover',
|
|
122
139
|
'--ui-color-accent-pressed',
|
|
140
|
+
// The purpose the elevation scale is read through, arriving with `ui-card`. `raised`
|
|
141
|
+
// is a role rather than a component: a card is the first surface lifted off the page
|
|
142
|
+
// and will not be the last, and the name a host retunes should not be the name of
|
|
143
|
+
// whichever component happened to need it first.
|
|
144
|
+
'--ui-elevation-raised',
|
|
123
145
|
];
|
|
124
146
|
/**
|
|
125
147
|
* The default value of every ground token, applied at `:root` by {@link tokenStyleSheet}.
|
|
@@ -168,6 +190,12 @@ export const defaults = {
|
|
|
168
190
|
'--ui-easing-exit': 'ease-in',
|
|
169
191
|
'--ui-icon-size': '1.25em',
|
|
170
192
|
'--ui-icon-stroke': '2',
|
|
193
|
+
// Two layers rather than one, which is what makes a shadow read as *lift* instead of
|
|
194
|
+
// as a smudge: a tight, nearly opaque one draws the contact edge, and a wider, softer
|
|
195
|
+
// one is the cast. Both are black at a low alpha, so the shadow darkens whatever it
|
|
196
|
+
// falls on rather than tinting it — a coloured shadow is a decision this layer would
|
|
197
|
+
// have to defend at every hue a host might set.
|
|
198
|
+
'--ui-elevation-100': '0 1px 2px -1px rgb(0 0 0 / 0.1), 0 2px 6px -1px rgb(0 0 0 / 0.1)',
|
|
171
199
|
};
|
|
172
200
|
/**
|
|
173
201
|
* A ground as it is written inside a formula: the name, with its own default behind it.
|
|
@@ -232,6 +260,10 @@ export const formulas = {
|
|
|
232
260
|
// is 4.52 in light, a rounding error from failing, and a default nobody could then
|
|
233
261
|
// retune without breaking a floor they were not thinking about.
|
|
234
262
|
'--ui-color-text-muted': mix('--ui-color-text', 65, '--ui-color-surface'),
|
|
263
|
+
// A plain reference, like the duration purpose above: the scale is where the value
|
|
264
|
+
// lives, and a host who wants flatter cards moves the role rather than reverse
|
|
265
|
+
// engineering which step a card happens to read.
|
|
266
|
+
'--ui-elevation-raised': ground('--ui-elevation-100'),
|
|
235
267
|
};
|
|
236
268
|
/**
|
|
237
269
|
* The grounds whose value differs when the page is rendered dark.
|
package/dist/tokens.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG;IAClB,mBAAmB;IACnB,4BAA4B;IAC5B,oBAAoB;IACpB,iBAAiB;IACjB,kBAAkB;IAClB,mBAAmB;IACnB,oFAAoF;IACpF,mFAAmF;IACnF,kFAAkF;IAClF,iFAAiF;IACjF,oFAAoF;IACpF,wEAAwE;IACxE,EAAE;IACF,iFAAiF;IACjF,oFAAoF;IACpF,iFAAiF;IACjF,qFAAqF;IACrF,+EAA+E;IAC/E,kBAAkB;IAClB,aAAa;IACb,YAAY;IACZ,WAAW;IACX,kFAAkF;IAClF,sFAAsF;IACtF,+CAA+C;IAC/C,EAAE;IACF,uFAAuF;IACvF,sFAAsF;IACtF,uFAAuF;IACvF,oFAAoF;IACpF,4CAA4C;IAC5C,mBAAmB;IACnB,mBAAmB;IACnB,qFAAqF;IACrF,oFAAoF;IACpF,sFAAsF;IACtF,qDAAqD;IACrD,EAAE;IACF,uFAAuF;IACvF,uFAAuF;IACvF,mFAAmF;IACnF,kFAAkF;IAClF,mBAAmB;IACnB,kBAAkB;IAClB,oFAAoF;IACpF,mFAAmF;IACnF,mFAAmF;IACnF,2BAA2B;IAC3B,EAAE;IACF,mFAAmF;IACnF,kFAAkF;IAClF,6EAA6E;IAC7E,EAAE;IACF,8EAA8E;IAC9E,sFAAsF;IACtF,yDAAyD;IACzD,gBAAgB;IAChB,kBAAkB;
|
|
1
|
+
{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}
|