@lerianstudio/sindarian-ui 2.0.0-beta.21 → 2.0.0-beta.23
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/dist/document.css +219 -0
- package/dist/globals.css +1 -0
- package/dist/standalone.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
/* Long-form reading voice. Plain declarations on lib tokens and the
|
|
2
|
+
--font-stack-* slots, so Tailwind builds and a raw <link> share this file. */
|
|
3
|
+
@layer components {
|
|
4
|
+
.doc-label,
|
|
5
|
+
.doc-prose th,
|
|
6
|
+
.doc-prose dt {
|
|
7
|
+
font-family: var(--font-stack-mono);
|
|
8
|
+
font-size: 11px;
|
|
9
|
+
font-weight: 500;
|
|
10
|
+
line-height: 1.4;
|
|
11
|
+
text-transform: uppercase;
|
|
12
|
+
letter-spacing: 0.08em;
|
|
13
|
+
color: hsl(var(--muted-foreground));
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* Safari drops list semantics with list-style none: give the list role="list". */
|
|
17
|
+
.doc-ticks {
|
|
18
|
+
list-style: none;
|
|
19
|
+
padding-left: 0;
|
|
20
|
+
}
|
|
21
|
+
.doc-ticks > li {
|
|
22
|
+
position: relative;
|
|
23
|
+
padding-left: 1.25rem;
|
|
24
|
+
}
|
|
25
|
+
.doc-ticks > li::before {
|
|
26
|
+
content: '';
|
|
27
|
+
position: absolute;
|
|
28
|
+
left: 0;
|
|
29
|
+
/* centred on the first line of a 1.7 line box */
|
|
30
|
+
top: calc(0.85em - 0.25rem);
|
|
31
|
+
width: 0.5rem;
|
|
32
|
+
height: 0.5rem;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
background: hsl(var(--accent));
|
|
35
|
+
border: 1px solid hsl(var(--accent-foreground));
|
|
36
|
+
border-radius: 2px;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Tables, code, figures and dl span the 75rem column; running text and
|
|
40
|
+
blockquotes keep a 96ch reading measure inside it. */
|
|
41
|
+
.doc-prose {
|
|
42
|
+
max-width: 75rem;
|
|
43
|
+
margin-inline: auto;
|
|
44
|
+
font-family: var(--font-stack-sans);
|
|
45
|
+
font-size: 1rem;
|
|
46
|
+
line-height: 1.7;
|
|
47
|
+
color: hsl(var(--foreground));
|
|
48
|
+
overflow-wrap: break-word;
|
|
49
|
+
}
|
|
50
|
+
.doc-prose > :first-child {
|
|
51
|
+
margin-top: 0;
|
|
52
|
+
}
|
|
53
|
+
.doc-prose :where(p, ul, ol, dl, blockquote, pre, table, figure) {
|
|
54
|
+
margin: 0 0 1.25rem;
|
|
55
|
+
}
|
|
56
|
+
/* revert: Tailwind's preflight strips list markers; give back the UA ones. */
|
|
57
|
+
.doc-prose :where(ul, ol):not(.doc-ticks) {
|
|
58
|
+
padding-left: 1.5rem;
|
|
59
|
+
list-style: revert;
|
|
60
|
+
}
|
|
61
|
+
.doc-prose li + li {
|
|
62
|
+
margin-top: 0.25rem;
|
|
63
|
+
}
|
|
64
|
+
.doc-prose :where(p, li, blockquote) {
|
|
65
|
+
max-width: 96ch;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.doc-prose :where(h1, h2, h3) {
|
|
69
|
+
font-family: var(--font-stack-serif);
|
|
70
|
+
font-weight: 500;
|
|
71
|
+
letter-spacing: 0;
|
|
72
|
+
}
|
|
73
|
+
.doc-prose h1 {
|
|
74
|
+
font-size: clamp(2rem, 4vw, 2.5rem);
|
|
75
|
+
line-height: 1.1;
|
|
76
|
+
text-wrap: balance;
|
|
77
|
+
margin: 0 0 1.5rem;
|
|
78
|
+
}
|
|
79
|
+
.doc-prose h2 {
|
|
80
|
+
font-size: 1.5rem;
|
|
81
|
+
line-height: 1.25;
|
|
82
|
+
margin: 2.5rem 0 1rem;
|
|
83
|
+
padding-top: 1.25rem;
|
|
84
|
+
border-top: 1px solid hsl(var(--border));
|
|
85
|
+
}
|
|
86
|
+
.doc-prose h3 {
|
|
87
|
+
font-size: 1.25rem;
|
|
88
|
+
line-height: 1.3;
|
|
89
|
+
margin: 2rem 0 0.75rem;
|
|
90
|
+
}
|
|
91
|
+
.doc-prose :where(h4, h5, h6) {
|
|
92
|
+
font-weight: 600;
|
|
93
|
+
font-size: 1rem;
|
|
94
|
+
line-height: 1.5;
|
|
95
|
+
margin: 1.5rem 0 0.5rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.doc-prose a {
|
|
99
|
+
overflow-wrap: anywhere;
|
|
100
|
+
color: hsl(var(--link));
|
|
101
|
+
text-decoration: underline;
|
|
102
|
+
text-underline-offset: 0.2em;
|
|
103
|
+
text-decoration-thickness: 1px;
|
|
104
|
+
}
|
|
105
|
+
.doc-prose a:hover {
|
|
106
|
+
color: hsl(var(--link-hover) / 0.8);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.doc-prose blockquote {
|
|
110
|
+
margin-left: 0;
|
|
111
|
+
margin-right: 0;
|
|
112
|
+
padding: 0.75rem 1.25rem;
|
|
113
|
+
border-left: 3px solid hsl(var(--accent));
|
|
114
|
+
background: hsl(var(--accent) / 0.1);
|
|
115
|
+
}
|
|
116
|
+
.doc-prose blockquote > :last-child {
|
|
117
|
+
margin-bottom: 0;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.doc-prose :where(code, kbd, pre, figcaption) {
|
|
121
|
+
font-family: var(--font-stack-mono);
|
|
122
|
+
background: hsl(var(--muted));
|
|
123
|
+
color: hsl(var(--foreground));
|
|
124
|
+
}
|
|
125
|
+
.doc-prose :where(code, kbd) {
|
|
126
|
+
overflow-wrap: anywhere;
|
|
127
|
+
font-size: 0.875em;
|
|
128
|
+
padding: 0.1em 0.35em;
|
|
129
|
+
border-radius: calc(var(--radius) - 4px);
|
|
130
|
+
}
|
|
131
|
+
.doc-prose pre {
|
|
132
|
+
font-size: 0.875rem;
|
|
133
|
+
line-height: 1.6;
|
|
134
|
+
padding: 1rem 1.25rem;
|
|
135
|
+
border-radius: calc(var(--radius) - 2px);
|
|
136
|
+
overflow-x: auto;
|
|
137
|
+
}
|
|
138
|
+
.doc-prose pre code {
|
|
139
|
+
padding: 0;
|
|
140
|
+
background: none;
|
|
141
|
+
font-size: inherit;
|
|
142
|
+
}
|
|
143
|
+
.doc-prose figure {
|
|
144
|
+
margin-left: 0;
|
|
145
|
+
margin-right: 0;
|
|
146
|
+
}
|
|
147
|
+
.doc-prose figcaption {
|
|
148
|
+
font-size: 0.8125rem;
|
|
149
|
+
padding: 0.375rem 0.75rem;
|
|
150
|
+
border-radius: calc(var(--radius) - 4px);
|
|
151
|
+
margin-top: 0.5rem;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.doc-prose table {
|
|
155
|
+
width: 100%;
|
|
156
|
+
border-collapse: collapse;
|
|
157
|
+
font-size: 0.9375rem;
|
|
158
|
+
line-height: 1.5;
|
|
159
|
+
}
|
|
160
|
+
.doc-prose th {
|
|
161
|
+
text-align: left;
|
|
162
|
+
padding: 0.5rem 0.75rem;
|
|
163
|
+
border-bottom: 2px solid hsl(var(--foreground));
|
|
164
|
+
}
|
|
165
|
+
.doc-prose td {
|
|
166
|
+
padding: 0.625rem 0.75rem;
|
|
167
|
+
border-bottom: 1px solid hsl(var(--border));
|
|
168
|
+
font-variant-numeric: tabular-nums;
|
|
169
|
+
vertical-align: top;
|
|
170
|
+
}
|
|
171
|
+
.doc-prose :where(th, td):first-child {
|
|
172
|
+
padding-left: 0;
|
|
173
|
+
}
|
|
174
|
+
.doc-prose :where(th, td):last-child {
|
|
175
|
+
padding-right: 0;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.doc-prose hr {
|
|
179
|
+
border: 0;
|
|
180
|
+
border-top: 1px dashed hsl(var(--border));
|
|
181
|
+
margin: 2rem 0;
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.doc-prose dl {
|
|
185
|
+
display: grid;
|
|
186
|
+
grid-template-columns: fit-content(20rem) minmax(0, 1fr);
|
|
187
|
+
gap: 0.5rem 1.5rem;
|
|
188
|
+
align-items: baseline;
|
|
189
|
+
}
|
|
190
|
+
.doc-prose dt {
|
|
191
|
+
grid-column: 1;
|
|
192
|
+
overflow-wrap: anywhere;
|
|
193
|
+
}
|
|
194
|
+
.doc-prose dd {
|
|
195
|
+
grid-column: 2;
|
|
196
|
+
margin: 0;
|
|
197
|
+
overflow-wrap: anywhere;
|
|
198
|
+
font-family: var(--font-stack-mono);
|
|
199
|
+
font-size: 0.875rem;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Phones: a wide table scrolls inside the column, never the page; dl stacks. */
|
|
203
|
+
@media (max-width: 40rem) {
|
|
204
|
+
.doc-prose table {
|
|
205
|
+
display: block;
|
|
206
|
+
overflow-x: auto;
|
|
207
|
+
}
|
|
208
|
+
/* An ID or endpoint in a cell keeps its width, so the table scrolls instead of shredding it. */
|
|
209
|
+
.doc-prose td :where(code, a) {
|
|
210
|
+
overflow-wrap: normal;
|
|
211
|
+
}
|
|
212
|
+
.doc-prose dl {
|
|
213
|
+
display: block;
|
|
214
|
+
}
|
|
215
|
+
.doc-prose dt:not(:first-child) {
|
|
216
|
+
margin-top: 0.5rem;
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
}
|
package/dist/globals.css
CHANGED
package/dist/standalone.css
CHANGED