@uniweb/kit 0.10.3 → 0.10.4
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/package.json +5 -4
- package/src/callout-tokens.css +89 -0
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@uniweb/kit",
|
|
3
|
-
"version": "0.10.
|
|
3
|
+
"version": "0.10.4",
|
|
4
4
|
"description": "Standard component library for Uniweb foundations",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": "./src/index.js",
|
|
8
8
|
"./xref": "./src/xref/index.js",
|
|
9
9
|
"./theme-tokens.css": "./src/theme-tokens.css",
|
|
10
|
-
"./prose-tokens.css": "./src/prose-tokens.css"
|
|
10
|
+
"./prose-tokens.css": "./src/prose-tokens.css",
|
|
11
|
+
"./callout-tokens.css": "./src/callout-tokens.css"
|
|
11
12
|
},
|
|
12
13
|
"files": [
|
|
13
14
|
"src",
|
|
@@ -42,8 +43,8 @@
|
|
|
42
43
|
"shiki": "^3.0.0",
|
|
43
44
|
"tailwind-merge": "^3.6.0",
|
|
44
45
|
"@uniweb/semantic-parser": "1.2.0",
|
|
45
|
-
"@uniweb/
|
|
46
|
-
"@uniweb/
|
|
46
|
+
"@uniweb/core": "0.8.0",
|
|
47
|
+
"@uniweb/scene": "0.1.2"
|
|
47
48
|
},
|
|
48
49
|
"peerDependencies": {
|
|
49
50
|
"react": "^19.0.0",
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Callout styling for the five standard concept tags, wired to the theme.
|
|
3
|
+
*
|
|
4
|
+
* Usage — one line, in the foundation's stylesheet, alongside the others:
|
|
5
|
+
*
|
|
6
|
+
* @import "@uniweb/kit/callout-tokens.css";
|
|
7
|
+
*
|
|
8
|
+
* OPT-IN, and that is the point. kit's render engine emits a concept block as
|
|
9
|
+
* a plain bordered box carrying `data-concept="<tag>"` and decides nothing
|
|
10
|
+
* about how it looks, because what a callout looks like is a foundation's
|
|
11
|
+
* design. This file is the answer for the foundations that do not want to make
|
|
12
|
+
* that decision — the common look, themed, in one import.
|
|
13
|
+
*
|
|
14
|
+
* ── Why five names may live here when they may not live in a component ──
|
|
15
|
+
*
|
|
16
|
+
* kit answers for no NAME: it must never render its own accordion for `faq` or
|
|
17
|
+
* its own Alert for a `@Alert` reference, because that shadows a foundation
|
|
18
|
+
* shipping its own and cannot be overridden without forking. Two things make a
|
|
19
|
+
* stylesheet different:
|
|
20
|
+
*
|
|
21
|
+
* 1. CSS loses to specificity. A foundation that disagrees writes one rule
|
|
22
|
+
* and wins, keeping kit's walk and its own look.
|
|
23
|
+
* 2. These five are not names we invented. `NOTE`, `TIP`, `IMPORTANT`,
|
|
24
|
+
* `WARNING` and `CAUTION` are GitHub's alert kinds, which content-reader
|
|
25
|
+
* accepts as a second spelling of a concept block. Implementing a
|
|
26
|
+
* published convention is the same category as shipping icon-library
|
|
27
|
+
* prefixes; inventing a list would be the concept registry the whole
|
|
28
|
+
* design forbids.
|
|
29
|
+
*
|
|
30
|
+
* ── The colours are the site's ──
|
|
31
|
+
*
|
|
32
|
+
* Every value below is a semantic token the site sets in `theme.yml` —
|
|
33
|
+
* `--info`, `--warning`, `--error`, `--success` and their `-subtle` surfaces.
|
|
34
|
+
* kit supplies the MAPPING (which tag means which token); the site supplies
|
|
35
|
+
* what those tokens are, and they flip with the visitor's scheme on their own.
|
|
36
|
+
* No fixed palette appears here, for the reason `tests/no-fixed-palettes.test.js`
|
|
37
|
+
* exists.
|
|
38
|
+
*
|
|
39
|
+
* ── Tags with no rule ──
|
|
40
|
+
*
|
|
41
|
+
* A concept block whose tag is not one of the five keeps the engine's plain
|
|
42
|
+
* bordered box. That is deliberate: an unrecognized concept should look
|
|
43
|
+
* unremarkable rather than borrow a severity it was never given.
|
|
44
|
+
*/
|
|
45
|
+
|
|
46
|
+
[data-concept] {
|
|
47
|
+
border-radius: var(--radius, 0.5rem);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[data-concept="note"],
|
|
51
|
+
[data-concept="info"] {
|
|
52
|
+
border-color: var(--info);
|
|
53
|
+
background-color: var(--info-subtle);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
[data-concept="tip"],
|
|
57
|
+
[data-concept="success"] {
|
|
58
|
+
border-color: var(--success);
|
|
59
|
+
background-color: var(--success-subtle);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
[data-concept="important"] {
|
|
63
|
+
border-color: var(--primary);
|
|
64
|
+
background-color: var(--muted);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
[data-concept="warning"] {
|
|
68
|
+
border-color: var(--warning);
|
|
69
|
+
background-color: var(--warning-subtle);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[data-concept="caution"],
|
|
73
|
+
[data-concept="error"] {
|
|
74
|
+
border-color: var(--error);
|
|
75
|
+
background-color: var(--error-subtle);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/*
|
|
79
|
+
* A callout inside a `prose` container should not inherit the container's
|
|
80
|
+
* first-child/last-child margin collapsing on its own children, or the box
|
|
81
|
+
* gains dead space at top and bottom that its neighbours do not have.
|
|
82
|
+
*/
|
|
83
|
+
[data-concept] > :first-child {
|
|
84
|
+
margin-top: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
[data-concept] > :last-child {
|
|
88
|
+
margin-bottom: 0;
|
|
89
|
+
}
|