@loidolt/theme-styles 0.3.0 → 0.5.0
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 +18 -0
- package/package.json +2 -5
- package/src/accessibility.css +40 -1
- package/src/components/actions.css +134 -0
- package/src/components/data.css +198 -0
- package/src/components/feedback.css +177 -0
- package/src/components/forms.css +201 -0
- package/src/components/layout.css +334 -0
- package/src/components/overlays.css +313 -0
- package/src/components/prose.css +233 -0
- package/src/components/selection.css +239 -0
- package/src/components/surfaces.css +173 -0
- package/src/components.css +9 -1316
- package/src/utilities.css +12 -0
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
.ldt-accordion {
|
|
2
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
3
|
+
}
|
|
4
|
+
.ldt-accordion__item {
|
|
5
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
6
|
+
}
|
|
7
|
+
.ldt-accordion__heading {
|
|
8
|
+
margin: 0;
|
|
9
|
+
}
|
|
10
|
+
.ldt-accordion__trigger {
|
|
11
|
+
width: 100%;
|
|
12
|
+
min-height: var(--loidolt-size-control-lg);
|
|
13
|
+
display: flex;
|
|
14
|
+
align-items: center;
|
|
15
|
+
justify-content: space-between;
|
|
16
|
+
gap: 1rem;
|
|
17
|
+
border: 0;
|
|
18
|
+
padding: 0.75rem 0;
|
|
19
|
+
color: var(--loidolt-text);
|
|
20
|
+
background: transparent;
|
|
21
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
22
|
+
letter-spacing: 0.08em;
|
|
23
|
+
text-align: left;
|
|
24
|
+
text-transform: uppercase;
|
|
25
|
+
}
|
|
26
|
+
.ldt-accordion__trigger:hover:not([data-disabled]) {
|
|
27
|
+
color: var(--loidolt-text-accent);
|
|
28
|
+
}
|
|
29
|
+
.ldt-accordion__trigger[data-disabled] {
|
|
30
|
+
opacity: 0.4;
|
|
31
|
+
cursor: not-allowed;
|
|
32
|
+
}
|
|
33
|
+
.ldt-accordion__indicator {
|
|
34
|
+
width: 0;
|
|
35
|
+
height: 0;
|
|
36
|
+
flex: 0 0 auto;
|
|
37
|
+
border-inline: 0.3rem solid transparent;
|
|
38
|
+
border-top: 0.34rem solid currentColor;
|
|
39
|
+
transition: transform var(--loidolt-motion-normal) var(--loidolt-motion-easing);
|
|
40
|
+
}
|
|
41
|
+
.ldt-accordion__trigger[data-state='open'] .ldt-accordion__indicator {
|
|
42
|
+
transform: rotate(180deg);
|
|
43
|
+
}
|
|
44
|
+
.ldt-accordion__body {
|
|
45
|
+
padding-bottom: 1rem;
|
|
46
|
+
color: var(--loidolt-text-muted);
|
|
47
|
+
}
|
|
48
|
+
.ldt-toggle-group {
|
|
49
|
+
max-width: 100%;
|
|
50
|
+
display: inline-flex;
|
|
51
|
+
overflow-x: auto;
|
|
52
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
53
|
+
overscroll-behavior-inline: contain;
|
|
54
|
+
scrollbar-width: thin;
|
|
55
|
+
}
|
|
56
|
+
.ldt-toggle-group[data-orientation='vertical'] {
|
|
57
|
+
flex-direction: column;
|
|
58
|
+
overflow: visible;
|
|
59
|
+
}
|
|
60
|
+
.ldt-toggle-group__item {
|
|
61
|
+
min-height: var(--loidolt-size-control);
|
|
62
|
+
display: inline-flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
justify-content: center;
|
|
65
|
+
gap: 0.4rem;
|
|
66
|
+
border: 0;
|
|
67
|
+
padding: 0 0.85rem;
|
|
68
|
+
color: var(--loidolt-text-muted);
|
|
69
|
+
background: transparent;
|
|
70
|
+
font: var(--loidolt-font-size-sm) var(--loidolt-font-utility);
|
|
71
|
+
letter-spacing: 0.08em;
|
|
72
|
+
line-height: 1;
|
|
73
|
+
text-transform: uppercase;
|
|
74
|
+
white-space: nowrap;
|
|
75
|
+
}
|
|
76
|
+
/* One shared rule between neighbours, so the group reads as a single object rather than a row
|
|
77
|
+
of separate buttons. */
|
|
78
|
+
.ldt-toggle-group__item + .ldt-toggle-group__item {
|
|
79
|
+
border-left: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
80
|
+
}
|
|
81
|
+
.ldt-toggle-group[data-orientation='vertical'] .ldt-toggle-group__item + .ldt-toggle-group__item {
|
|
82
|
+
border-left: 0;
|
|
83
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
84
|
+
}
|
|
85
|
+
.ldt-toggle-group__item:hover:not([data-disabled], :disabled) {
|
|
86
|
+
color: var(--loidolt-text);
|
|
87
|
+
}
|
|
88
|
+
.ldt-toggle-group__item[data-state='on'],
|
|
89
|
+
.ldt-toggle-group__item[aria-current='page'] {
|
|
90
|
+
color: var(--loidolt-on-accent);
|
|
91
|
+
background: var(--loidolt-accent);
|
|
92
|
+
}
|
|
93
|
+
.ldt-toggle-group__item[data-state='on']:hover:not([data-disabled], :disabled) {
|
|
94
|
+
color: var(--loidolt-on-accent);
|
|
95
|
+
background: var(--loidolt-accent-hover);
|
|
96
|
+
}
|
|
97
|
+
.ldt-toggle-group__item[data-disabled],
|
|
98
|
+
.ldt-toggle-group__item:disabled {
|
|
99
|
+
opacity: 0.4;
|
|
100
|
+
cursor: not-allowed;
|
|
101
|
+
}
|
|
102
|
+
.ldt-toggle-group--sm .ldt-toggle-group__item {
|
|
103
|
+
min-height: var(--loidolt-size-control-sm);
|
|
104
|
+
padding: 0 0.65rem;
|
|
105
|
+
font-size: var(--loidolt-font-size-xs);
|
|
106
|
+
}
|
|
107
|
+
.ldt-toggle-group--lg .ldt-toggle-group__item {
|
|
108
|
+
min-height: var(--loidolt-size-control-lg);
|
|
109
|
+
padding: 0 1.2rem;
|
|
110
|
+
}
|
|
111
|
+
.ldt-breadcrumbs__list {
|
|
112
|
+
display: flex;
|
|
113
|
+
flex-wrap: wrap;
|
|
114
|
+
align-items: center;
|
|
115
|
+
gap: 0.35rem 0.5rem;
|
|
116
|
+
margin: 0;
|
|
117
|
+
padding: 0;
|
|
118
|
+
list-style: none;
|
|
119
|
+
}
|
|
120
|
+
.ldt-breadcrumbs__item {
|
|
121
|
+
min-width: 0;
|
|
122
|
+
display: inline-flex;
|
|
123
|
+
align-items: center;
|
|
124
|
+
gap: 0.5rem;
|
|
125
|
+
}
|
|
126
|
+
/* Generated content, so the separator is never selected, copied, or read aloud. */
|
|
127
|
+
.ldt-breadcrumbs__item + .ldt-breadcrumbs__item::before {
|
|
128
|
+
content: var(--ldt-breadcrumb-separator, '/');
|
|
129
|
+
color: var(--loidolt-text-muted);
|
|
130
|
+
}
|
|
131
|
+
.ldt-breadcrumbs__link,
|
|
132
|
+
.ldt-breadcrumbs__current {
|
|
133
|
+
overflow: hidden;
|
|
134
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
135
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
136
|
+
text-overflow: ellipsis;
|
|
137
|
+
text-transform: uppercase;
|
|
138
|
+
white-space: nowrap;
|
|
139
|
+
}
|
|
140
|
+
.ldt-breadcrumbs__link {
|
|
141
|
+
min-height: 1.5rem;
|
|
142
|
+
display: inline-flex;
|
|
143
|
+
align-items: center;
|
|
144
|
+
color: var(--loidolt-text-muted);
|
|
145
|
+
text-decoration: none;
|
|
146
|
+
}
|
|
147
|
+
.ldt-breadcrumbs__link:hover {
|
|
148
|
+
color: var(--loidolt-text-accent);
|
|
149
|
+
text-decoration: underline;
|
|
150
|
+
}
|
|
151
|
+
.ldt-breadcrumbs__current {
|
|
152
|
+
color: var(--loidolt-text);
|
|
153
|
+
}
|
|
154
|
+
.ldt-pagination__list {
|
|
155
|
+
display: flex;
|
|
156
|
+
flex-wrap: wrap;
|
|
157
|
+
align-items: center;
|
|
158
|
+
gap: 0.3rem;
|
|
159
|
+
}
|
|
160
|
+
.ldt-pagination__ellipsis {
|
|
161
|
+
padding-inline: 0.35rem;
|
|
162
|
+
color: var(--loidolt-text-muted);
|
|
163
|
+
}
|
|
164
|
+
.ldt-pagination__page {
|
|
165
|
+
min-width: var(--loidolt-size-control-sm);
|
|
166
|
+
}
|
|
167
|
+
.ldt-pagination__page[aria-current='page'],
|
|
168
|
+
/* The base button hover is more specific than a plain `[aria-current]` rule, so the current
|
|
169
|
+
page needs its own hover or it flips to the neutral inverse surface on the way past. */
|
|
170
|
+
.ldt-pagination__page[aria-current='page']:hover:not(:disabled, [aria-disabled='true']) {
|
|
171
|
+
color: var(--loidolt-on-accent);
|
|
172
|
+
border-color: var(--loidolt-accent);
|
|
173
|
+
background: var(--loidolt-accent);
|
|
174
|
+
}
|
|
175
|
+
/* A segmented control whose options are real links — ToggleGroup's shape for navigation.
|
|
176
|
+
Items reuse .ldt-toggle-group__item; aria-current="page" is the pressed state. */
|
|
177
|
+
.ldt-segmented-nav {
|
|
178
|
+
max-width: 100%;
|
|
179
|
+
display: inline-flex;
|
|
180
|
+
overflow-x: auto;
|
|
181
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border-strong);
|
|
182
|
+
overscroll-behavior-inline: contain;
|
|
183
|
+
scrollbar-width: thin;
|
|
184
|
+
}
|
|
185
|
+
.ldt-segmented-nav .ldt-toggle-group__item {
|
|
186
|
+
text-decoration: none;
|
|
187
|
+
}
|
|
188
|
+
.ldt-segmented-nav__hint {
|
|
189
|
+
color: inherit;
|
|
190
|
+
font-size: var(--loidolt-font-size-xs);
|
|
191
|
+
}
|
|
192
|
+
/* A selectable rail of thumbnails: listbox semantics, scroll-into-view, compact flip. */
|
|
193
|
+
.ldt-filmstrip {
|
|
194
|
+
min-height: 0;
|
|
195
|
+
display: flex;
|
|
196
|
+
flex-direction: column;
|
|
197
|
+
gap: var(--loidolt-space-2);
|
|
198
|
+
}
|
|
199
|
+
.ldt-filmstrip--horizontal {
|
|
200
|
+
flex-direction: row;
|
|
201
|
+
overflow-x: auto;
|
|
202
|
+
scrollbar-width: thin;
|
|
203
|
+
padding-bottom: var(--loidolt-space-1);
|
|
204
|
+
}
|
|
205
|
+
.ldt-filmstrip__item {
|
|
206
|
+
display: grid;
|
|
207
|
+
gap: var(--loidolt-space-1);
|
|
208
|
+
padding: var(--loidolt-space-1);
|
|
209
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
210
|
+
color: inherit;
|
|
211
|
+
background: none;
|
|
212
|
+
font: inherit;
|
|
213
|
+
text-align: start;
|
|
214
|
+
cursor: pointer;
|
|
215
|
+
}
|
|
216
|
+
.ldt-filmstrip--horizontal .ldt-filmstrip__item {
|
|
217
|
+
flex: none;
|
|
218
|
+
width: 4.5rem;
|
|
219
|
+
}
|
|
220
|
+
.ldt-filmstrip__item:hover {
|
|
221
|
+
background: var(--loidolt-surface-sunken);
|
|
222
|
+
}
|
|
223
|
+
.ldt-filmstrip__item[aria-selected='true'] {
|
|
224
|
+
border-color: var(--loidolt-accent);
|
|
225
|
+
outline: var(--loidolt-border-width) solid var(--loidolt-accent);
|
|
226
|
+
}
|
|
227
|
+
/* Vertical strips flip to a horizontal rail when the workspace container goes compact. */
|
|
228
|
+
@container loidolt-workspace (max-width: 760px) {
|
|
229
|
+
.ldt-filmstrip:not(.ldt-filmstrip--horizontal) {
|
|
230
|
+
flex-direction: row;
|
|
231
|
+
overflow-x: auto;
|
|
232
|
+
scrollbar-width: thin;
|
|
233
|
+
padding-bottom: var(--loidolt-space-1);
|
|
234
|
+
}
|
|
235
|
+
.ldt-filmstrip:not(.ldt-filmstrip--horizontal) .ldt-filmstrip__item {
|
|
236
|
+
flex: none;
|
|
237
|
+
width: 4.5rem;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
.ldt-card,
|
|
2
|
+
.ldt-panel {
|
|
3
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
4
|
+
color: var(--loidolt-text);
|
|
5
|
+
background: var(--loidolt-surface);
|
|
6
|
+
}
|
|
7
|
+
/* An anchor card: the whole surface is the link. */
|
|
8
|
+
.ldt-card--link {
|
|
9
|
+
display: block;
|
|
10
|
+
color: var(--loidolt-text);
|
|
11
|
+
text-decoration: none;
|
|
12
|
+
}
|
|
13
|
+
.ldt-card--link:hover {
|
|
14
|
+
border-color: var(--loidolt-accent);
|
|
15
|
+
text-decoration: none;
|
|
16
|
+
}
|
|
17
|
+
/* Full width even when a consumer turns the card into a centering flex/grid container —
|
|
18
|
+
otherwise viewBox-only SVGs and other intrinsic-less content collapse to their fallback size. */
|
|
19
|
+
.ldt-card__content {
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
.ldt-card__header,
|
|
23
|
+
.ldt-card__content,
|
|
24
|
+
.ldt-card__footer,
|
|
25
|
+
.ldt-panel__header,
|
|
26
|
+
.ldt-panel__content,
|
|
27
|
+
.ldt-panel__footer {
|
|
28
|
+
padding: var(--loidolt-space-4);
|
|
29
|
+
}
|
|
30
|
+
.ldt-card__header,
|
|
31
|
+
.ldt-panel__header {
|
|
32
|
+
border-bottom: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
33
|
+
}
|
|
34
|
+
.ldt-card__footer,
|
|
35
|
+
.ldt-panel__footer {
|
|
36
|
+
border-top: var(--loidolt-border-width) solid var(--loidolt-border-soft);
|
|
37
|
+
}
|
|
38
|
+
.ldt-card__title,
|
|
39
|
+
.ldt-panel__title {
|
|
40
|
+
margin: 0;
|
|
41
|
+
font-size: var(--loidolt-font-size-lg);
|
|
42
|
+
}
|
|
43
|
+
.ldt-card__description {
|
|
44
|
+
margin: 0.35rem 0 0;
|
|
45
|
+
color: var(--loidolt-text-muted);
|
|
46
|
+
font-family: var(--loidolt-font-utility);
|
|
47
|
+
font-size: var(--loidolt-font-size-sm);
|
|
48
|
+
}
|
|
49
|
+
/*
|
|
50
|
+
* A badge reports state; it is never pressable. Standing at control height it would otherwise be
|
|
51
|
+
* indistinguishable from a button, so three things separate them, none of which depend on hover:
|
|
52
|
+
* the pill silhouette against the system's hard corners, the recessed fill instead of a raised
|
|
53
|
+
* one, and text that stays a step smaller than button text at every size.
|
|
54
|
+
*/
|
|
55
|
+
.ldt-badge {
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
min-height: 1.4rem;
|
|
59
|
+
padding: 0.15rem 0.5rem;
|
|
60
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
61
|
+
border-radius: var(--loidolt-border-radius-pill);
|
|
62
|
+
color: var(--loidolt-text-muted);
|
|
63
|
+
background: var(--loidolt-surface-sunken);
|
|
64
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
65
|
+
/* The label voice (`.ldt-eyebrow`, `.ldt-field__label`), not the tighter control voice. */
|
|
66
|
+
letter-spacing: var(--loidolt-font-tracking-wide);
|
|
67
|
+
text-transform: uppercase;
|
|
68
|
+
}
|
|
69
|
+
/*
|
|
70
|
+
* Size steps take the button scale's *box* so a badge in a row of controls lines up with them,
|
|
71
|
+
* but not its type scale — the smaller text is part of what marks the badge as inert. Without a
|
|
72
|
+
* size class the badge keeps its compact inline metrics, which is what table cells and running
|
|
73
|
+
* copy want.
|
|
74
|
+
*/
|
|
75
|
+
.ldt-badge--sm {
|
|
76
|
+
min-height: var(--loidolt-size-control-sm);
|
|
77
|
+
padding: 0.38rem 0.7rem;
|
|
78
|
+
line-height: 1;
|
|
79
|
+
}
|
|
80
|
+
.ldt-badge--md {
|
|
81
|
+
min-height: var(--loidolt-size-control);
|
|
82
|
+
padding: 0.5rem 0.9rem;
|
|
83
|
+
line-height: 1;
|
|
84
|
+
}
|
|
85
|
+
.ldt-badge--lg {
|
|
86
|
+
min-height: var(--loidolt-size-control-lg);
|
|
87
|
+
padding: 0.5rem 1.25rem;
|
|
88
|
+
line-height: 1;
|
|
89
|
+
}
|
|
90
|
+
.ldt-badge--accent {
|
|
91
|
+
color: var(--loidolt-on-accent);
|
|
92
|
+
border-color: var(--loidolt-accent);
|
|
93
|
+
background: var(--loidolt-accent);
|
|
94
|
+
}
|
|
95
|
+
.ldt-badge--success {
|
|
96
|
+
color: var(--loidolt-on-success);
|
|
97
|
+
border-color: var(--loidolt-success);
|
|
98
|
+
background: var(--loidolt-success);
|
|
99
|
+
}
|
|
100
|
+
.ldt-badge--warning {
|
|
101
|
+
color: var(--loidolt-on-warning);
|
|
102
|
+
border-color: var(--loidolt-warning);
|
|
103
|
+
background: var(--loidolt-warning);
|
|
104
|
+
}
|
|
105
|
+
.ldt-badge--error {
|
|
106
|
+
color: var(--loidolt-on-danger);
|
|
107
|
+
border-color: var(--loidolt-danger);
|
|
108
|
+
background: var(--loidolt-danger);
|
|
109
|
+
}
|
|
110
|
+
.ldt-badge--info {
|
|
111
|
+
color: var(--loidolt-on-info);
|
|
112
|
+
border-color: var(--loidolt-info);
|
|
113
|
+
background: var(--loidolt-info);
|
|
114
|
+
}
|
|
115
|
+
/* A framed media box: fixed ratio, sunken or paper surface, contained content. */
|
|
116
|
+
.ldt-thumbnail {
|
|
117
|
+
display: grid;
|
|
118
|
+
place-items: center;
|
|
119
|
+
margin: 0;
|
|
120
|
+
aspect-ratio: var(--ldt-thumbnail-ratio, 4 / 3);
|
|
121
|
+
overflow: hidden;
|
|
122
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
123
|
+
background: var(--loidolt-surface-sunken);
|
|
124
|
+
}
|
|
125
|
+
.ldt-thumbnail--paper {
|
|
126
|
+
background: var(--loidolt-surface-paper);
|
|
127
|
+
}
|
|
128
|
+
.ldt-thumbnail__image {
|
|
129
|
+
width: 100%;
|
|
130
|
+
height: 100%;
|
|
131
|
+
object-fit: contain;
|
|
132
|
+
}
|
|
133
|
+
.ldt-thumbnail--cover .ldt-thumbnail__image {
|
|
134
|
+
object-fit: cover;
|
|
135
|
+
}
|
|
136
|
+
/* A dashboard tile: one hero number over a utility label; the link form invites a click. */
|
|
137
|
+
.ldt-stat {
|
|
138
|
+
display: block;
|
|
139
|
+
padding: var(--loidolt-space-4);
|
|
140
|
+
border: var(--loidolt-border-width) solid var(--loidolt-border);
|
|
141
|
+
color: var(--loidolt-text);
|
|
142
|
+
background: var(--loidolt-surface);
|
|
143
|
+
text-decoration: none;
|
|
144
|
+
}
|
|
145
|
+
a.ldt-stat:hover {
|
|
146
|
+
border-color: var(--loidolt-accent);
|
|
147
|
+
text-decoration: none;
|
|
148
|
+
}
|
|
149
|
+
.ldt-stat__value {
|
|
150
|
+
margin: 0;
|
|
151
|
+
font-family: var(--loidolt-font-display);
|
|
152
|
+
font-size: var(--loidolt-font-size-xl);
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
}
|
|
155
|
+
.ldt-stat__label {
|
|
156
|
+
margin: 0.25rem 0 0;
|
|
157
|
+
color: var(--loidolt-text-muted);
|
|
158
|
+
font: var(--loidolt-font-size-xs) var(--loidolt-font-utility);
|
|
159
|
+
letter-spacing: var(--loidolt-font-tracking-utility);
|
|
160
|
+
text-transform: uppercase;
|
|
161
|
+
}
|
|
162
|
+
.ldt-separator {
|
|
163
|
+
width: 100%;
|
|
164
|
+
height: var(--loidolt-border-width);
|
|
165
|
+
border: 0;
|
|
166
|
+
background: var(--loidolt-border);
|
|
167
|
+
}
|
|
168
|
+
.ldt-separator--vertical {
|
|
169
|
+
width: var(--loidolt-border-width);
|
|
170
|
+
height: auto;
|
|
171
|
+
min-height: 1em;
|
|
172
|
+
align-self: stretch;
|
|
173
|
+
}
|