@miadi/reference-ui 0.0.0-stage → 0.1.1
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/LICENSE +21 -0
- package/README.md +92 -2
- package/dist/index.d.ts +218 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +381 -0
- package/dist/index.js.map +1 -0
- package/dist/react.d.ts +47 -0
- package/dist/react.d.ts.map +1 -0
- package/dist/react.js +58 -0
- package/dist/react.js.map +1 -0
- package/package.json +74 -3
- package/src/index.ts +531 -0
- package/src/react.tsx +108 -0
- package/src/reference-ui.css +176 -0
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @miadi/reference-ui — chips and cards for Miadi references.
|
|
3
|
+
*
|
|
4
|
+
* Colours are custom properties a host may override. Light values are
|
|
5
|
+
* Tailwind's 700 shades (800 for east: yellow-700 measured 4.47:1 on the hover
|
|
6
|
+
* surface), dark values its 300 shades. test/reference-ui.test.mjs holds every
|
|
7
|
+
* ink at 4.5:1 or better on the page, the card and the hover surface. Dark
|
|
8
|
+
* applies under a `.dark` ancestor or `[data-theme="dark"]`. A host that
|
|
9
|
+
* darkens by system preference (`@media (prefers-color-scheme: dark)` with
|
|
10
|
+
* `:root:not(.light)`, as shadcn-style hosts do) opts in with the class
|
|
11
|
+
* `mr-auto-dark` on `<html>`: following the preference unasked put dark inks
|
|
12
|
+
* on every light-only page whose reader's system is dark (jgwill/Miadi#713,
|
|
13
|
+
* V2). A `.light` region always keeps light inks.
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
.mr-ref {
|
|
17
|
+
--mr-east: #854d0e;
|
|
18
|
+
--mr-south: #b91c1c;
|
|
19
|
+
--mr-west: #1d4ed8;
|
|
20
|
+
--mr-north: #374151;
|
|
21
|
+
--mr-foundation: #6d28d9;
|
|
22
|
+
--mr-wheel: #0f766e;
|
|
23
|
+
--mr-muted: #4b5563;
|
|
24
|
+
--mr-card-bg: #f9fafb;
|
|
25
|
+
--mr-hover-bg: #f3f4f6;
|
|
26
|
+
--mr-title: #111827;
|
|
27
|
+
--mr-accent: var(--mr-east);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.dark .mr-ref,
|
|
31
|
+
[data-theme="dark"] .mr-ref {
|
|
32
|
+
--mr-east: #fde047;
|
|
33
|
+
--mr-south: #fca5a5;
|
|
34
|
+
--mr-west: #93c5fd;
|
|
35
|
+
--mr-north: #e5e7eb;
|
|
36
|
+
--mr-foundation: #c4b5fd;
|
|
37
|
+
--mr-wheel: #5eead4;
|
|
38
|
+
--mr-muted: #9ca3af;
|
|
39
|
+
--mr-card-bg: #111827;
|
|
40
|
+
--mr-hover-bg: #1f2937;
|
|
41
|
+
--mr-title: #f3f4f6;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (prefers-color-scheme: dark) {
|
|
45
|
+
:where(.mr-auto-dark:not(.light):not([data-theme="light"])) .mr-ref {
|
|
46
|
+
--mr-east: #fde047;
|
|
47
|
+
--mr-south: #fca5a5;
|
|
48
|
+
--mr-west: #93c5fd;
|
|
49
|
+
--mr-north: #e5e7eb;
|
|
50
|
+
--mr-foundation: #c4b5fd;
|
|
51
|
+
--mr-wheel: #5eead4;
|
|
52
|
+
--mr-muted: #9ca3af;
|
|
53
|
+
--mr-card-bg: #111827;
|
|
54
|
+
--mr-hover-bg: #1f2937;
|
|
55
|
+
--mr-title: #f3f4f6;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* A light region inside a dark page keeps light inks. */
|
|
60
|
+
.light .mr-ref,
|
|
61
|
+
[data-theme="light"] .mr-ref {
|
|
62
|
+
--mr-east: #854d0e;
|
|
63
|
+
--mr-south: #b91c1c;
|
|
64
|
+
--mr-west: #1d4ed8;
|
|
65
|
+
--mr-north: #374151;
|
|
66
|
+
--mr-foundation: #6d28d9;
|
|
67
|
+
--mr-wheel: #0f766e;
|
|
68
|
+
--mr-muted: #4b5563;
|
|
69
|
+
--mr-card-bg: #f9fafb;
|
|
70
|
+
--mr-hover-bg: #f3f4f6;
|
|
71
|
+
--mr-title: #111827;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* …and a dark region inside a light page (an always-dark room) keeps dark inks. */
|
|
75
|
+
.light .dark .mr-ref,
|
|
76
|
+
.light [data-theme="dark"] .mr-ref,
|
|
77
|
+
[data-theme="light"] [data-theme="dark"] .mr-ref {
|
|
78
|
+
--mr-east: #fde047;
|
|
79
|
+
--mr-south: #fca5a5;
|
|
80
|
+
--mr-west: #93c5fd;
|
|
81
|
+
--mr-north: #e5e7eb;
|
|
82
|
+
--mr-foundation: #c4b5fd;
|
|
83
|
+
--mr-wheel: #5eead4;
|
|
84
|
+
--mr-muted: #9ca3af;
|
|
85
|
+
--mr-card-bg: #111827;
|
|
86
|
+
--mr-hover-bg: #1f2937;
|
|
87
|
+
--mr-title: #f3f4f6;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.mr-dir-east { --mr-accent: var(--mr-east); }
|
|
91
|
+
.mr-dir-south { --mr-accent: var(--mr-south); }
|
|
92
|
+
.mr-dir-west { --mr-accent: var(--mr-west); }
|
|
93
|
+
.mr-dir-north { --mr-accent: var(--mr-north); }
|
|
94
|
+
.mr-ref--foundation { --mr-accent: var(--mr-foundation); }
|
|
95
|
+
.mr-ref--wheel { --mr-accent: var(--mr-wheel); }
|
|
96
|
+
|
|
97
|
+
/* `a.mr-ref` outranks a typography plugin's `.prose :where(a)`. */
|
|
98
|
+
a.mr-ref,
|
|
99
|
+
span.mr-ref {
|
|
100
|
+
color: var(--mr-accent);
|
|
101
|
+
text-decoration: none;
|
|
102
|
+
font-weight: 500;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.mr-ref--chip {
|
|
106
|
+
display: inline-flex;
|
|
107
|
+
align-items: center;
|
|
108
|
+
gap: 0.25rem;
|
|
109
|
+
border: 1px solid currentColor;
|
|
110
|
+
border-radius: 9999px;
|
|
111
|
+
padding: 0.125rem 0.5rem;
|
|
112
|
+
font-size: 0.75rem;
|
|
113
|
+
line-height: 1rem;
|
|
114
|
+
vertical-align: baseline;
|
|
115
|
+
transition: background-color 120ms ease;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
a.mr-ref--chip:hover { background-color: var(--mr-hover-bg); }
|
|
119
|
+
|
|
120
|
+
.mr-ref__badge {
|
|
121
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.mr-ref--card {
|
|
125
|
+
display: block;
|
|
126
|
+
margin: 1rem 0;
|
|
127
|
+
border-left: 4px solid var(--mr-accent);
|
|
128
|
+
border-radius: 0.5rem;
|
|
129
|
+
background: var(--mr-card-bg);
|
|
130
|
+
padding: 0.75rem 1rem;
|
|
131
|
+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
|
|
132
|
+
transition: box-shadow 120ms ease;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
a.mr-ref--card:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
|
|
136
|
+
|
|
137
|
+
.mr-ref--card .mr-ref__badge {
|
|
138
|
+
display: block;
|
|
139
|
+
font-size: 0.75rem;
|
|
140
|
+
text-transform: uppercase;
|
|
141
|
+
letter-spacing: 0.02em;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.mr-ref__title {
|
|
145
|
+
display: block;
|
|
146
|
+
margin-top: 0.25rem;
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
color: var(--mr-title);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.mr-ref__meta {
|
|
152
|
+
display: block;
|
|
153
|
+
margin-top: 0.125rem;
|
|
154
|
+
font-size: 0.75rem;
|
|
155
|
+
font-weight: 400;
|
|
156
|
+
color: var(--mr-muted);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.mr-ref--highlight.mr-ref--chip { box-shadow: 0 0 0 1px currentColor; }
|
|
160
|
+
.mr-ref--highlight.mr-ref--card { box-shadow: 0 0 0 2px var(--mr-accent); }
|
|
161
|
+
|
|
162
|
+
span.mr-ref--unresolved {
|
|
163
|
+
color: var(--mr-muted);
|
|
164
|
+
border-style: dashed;
|
|
165
|
+
font-weight: 400;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.mr-ref__note { font-size: 0.7rem; }
|
|
169
|
+
|
|
170
|
+
/* Several references in one place: `miadi-chronicle:<ep>/foundations`. */
|
|
171
|
+
.mr-ref-list {
|
|
172
|
+
display: inline-flex;
|
|
173
|
+
flex-wrap: wrap;
|
|
174
|
+
align-items: center;
|
|
175
|
+
gap: 0.25rem;
|
|
176
|
+
}
|