@luz-ds/docs 0.0.0-stage → 0.1.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/LICENSE +21 -0
- package/README.md +93 -2
- package/dist/classes.json +47 -0
- package/dist/components/dodont.css +85 -0
- package/dist/components/dodont.min.css +1 -0
- package/dist/components/example.css +46 -0
- package/dist/components/example.min.css +1 -0
- package/dist/components/page-foot.css +31 -0
- package/dist/components/page-foot.min.css +1 -0
- package/dist/components/page-head.css +99 -0
- package/dist/components/page-head.min.css +1 -0
- package/dist/components/pager.css +70 -0
- package/dist/components/pager.min.css +1 -0
- package/dist/components/rail.css +161 -0
- package/dist/components/rail.min.css +1 -0
- package/dist/components/shell.css +126 -0
- package/dist/components/shell.min.css +1 -0
- package/dist/docs.css +613 -0
- package/dist/docs.min.css +1 -0
- package/package.json +53 -3
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
|
+
@layer luz.docs {
|
|
3
|
+
/* ==========================================================================
|
|
4
|
+
LUZ DOCS: rail.
|
|
5
|
+
aside.luz-docs-rail > div.luz-docs-rail__inner > nav.luz-docs-rail__onpage
|
|
6
|
+
("On this page": a details.__fold, its summary.__title, ul.__list of
|
|
7
|
+
a.__link, an h3 in a nested ul.__sub) + .luz-docs-rail__actions (Copy
|
|
8
|
+
page, Edit, Report). In the shell's third column from 80rem the aside
|
|
9
|
+
stretches over its grid area and its inner box stays in view while the
|
|
10
|
+
page scrolls (native sticky) inside it, so it never covers the footer
|
|
11
|
+
under it (WCAG 2.4.11); the inner box scrolls on its own when it is
|
|
12
|
+
taller than the window, with room at its start for a focus ring. Below
|
|
13
|
+
80rem the rail is drawn above the content (it comes before main in the
|
|
14
|
+
markup), in its column, and does not stick; a script may fold the list
|
|
15
|
+
there (its details is written open, so without one it reads in full). A link of the list also carries core's .luz-sidebar__link,
|
|
16
|
+
so core's scroll spy marks the section in view (aria-current="true"):
|
|
17
|
+
the mark is the weight and a start border, never the colour alone.
|
|
18
|
+
========================================================================== */
|
|
19
|
+
|
|
20
|
+
/* Above the content (below 80rem): the content's own top padding is the gap */
|
|
21
|
+
.luz-docs-rail {
|
|
22
|
+
padding: var(--luz-space-lg) var(--luz-space-md) 0;
|
|
23
|
+
font-family: var(--luz-font-sans);
|
|
24
|
+
font-size: var(--luz-text-sm);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Above the content (below 80rem) it keeps the content's gutters */
|
|
28
|
+
@media (min-width: 60rem) {
|
|
29
|
+
.luz-docs-rail {
|
|
30
|
+
padding-inline: var(--luz-space-xl);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@media (min-width: 80rem) {
|
|
35
|
+
.luz-docs-rail {
|
|
36
|
+
padding-block: var(--luz-space-lg);
|
|
37
|
+
padding-inline: 0 var(--luz-space-md);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.luz-docs-rail__inner {
|
|
41
|
+
position: sticky;
|
|
42
|
+
inset-block-start: var(--luz-docs-rail-top, 0);
|
|
43
|
+
max-block-size: calc(100dvh - var(--luz-docs-rail-top, 0rem));
|
|
44
|
+
overflow-y: auto;
|
|
45
|
+
/* The box clips: a focus ring (2px, 2px away) keeps its start edge */
|
|
46
|
+
padding-inline-start: var(--luz-space-xs);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.luz-docs-rail__title {
|
|
51
|
+
min-block-size: var(--luz-control-sm);
|
|
52
|
+
font-weight: 600;
|
|
53
|
+
color: var(--luz-text-primary);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* In the rail, "On this page" is a list under its title, not core's box */
|
|
57
|
+
.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__fold {
|
|
58
|
+
margin: 0;
|
|
59
|
+
padding: 0;
|
|
60
|
+
border: 0;
|
|
61
|
+
border-radius: 0;
|
|
62
|
+
background: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__title {
|
|
66
|
+
margin: 0 0 var(--luz-space-xs);
|
|
67
|
+
padding-inline: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.luz-docs-rail__list,
|
|
71
|
+
.luz-docs-rail__sub {
|
|
72
|
+
margin: 0;
|
|
73
|
+
padding: 0;
|
|
74
|
+
list-style: none;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.luz-docs-rail__list {
|
|
78
|
+
border-inline-start: 1px solid var(--luz-divider);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Core's sidebar link is drawn for the sidebar's own surface: here it is
|
|
82
|
+
text on the page */
|
|
83
|
+
.luz-docs-rail__link {
|
|
84
|
+
display: flex;
|
|
85
|
+
align-items: center;
|
|
86
|
+
min-block-size: var(--luz-control-sm);
|
|
87
|
+
margin-inline-start: -1px;
|
|
88
|
+
padding: var(--luz-space-2xs) var(--luz-space-sm);
|
|
89
|
+
border-inline-start: 2px solid transparent;
|
|
90
|
+
background: none;
|
|
91
|
+
color: var(--luz-text-secondary);
|
|
92
|
+
font-size: inherit;
|
|
93
|
+
font-weight: 400;
|
|
94
|
+
text-decoration: none;
|
|
95
|
+
/* A heading's long word ("accessibility" at 400 % text, 320 px) breaks
|
|
96
|
+
inside the column instead of widening the page (WCAG 1.4.10) */
|
|
97
|
+
overflow-wrap: anywhere;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.luz-docs-rail__sub .luz-docs-rail__link {
|
|
101
|
+
padding-inline-start: var(--luz-space-lg);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.luz-docs-rail__link:hover {
|
|
105
|
+
background: var(--luz-surface-muted);
|
|
106
|
+
color: var(--luz-text-primary);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.luz-docs-rail__link[aria-current="true"] {
|
|
110
|
+
border-inline-start-color: var(--luz-brand-primary);
|
|
111
|
+
background: none;
|
|
112
|
+
color: var(--luz-text-primary);
|
|
113
|
+
font-weight: 600;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.luz-docs-rail__actions {
|
|
117
|
+
display: grid;
|
|
118
|
+
justify-items: start;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* A rule between the list and the actions; without a list, none */
|
|
122
|
+
.luz-docs-rail__onpage + .luz-docs-rail__actions {
|
|
123
|
+
margin-block-start: var(--luz-space-lg);
|
|
124
|
+
padding-block-start: var(--luz-space-md);
|
|
125
|
+
border-block-start: 1px solid var(--luz-divider);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.luz-docs-rail__actions > :where(a, button) {
|
|
129
|
+
display: inline-flex;
|
|
130
|
+
align-items: center;
|
|
131
|
+
min-block-size: var(--luz-control-sm);
|
|
132
|
+
overflow-wrap: anywhere;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* An action a script turns into a button (copy, not go) reads as one of
|
|
136
|
+
the list: the same text, colour and underline as its links */
|
|
137
|
+
.luz-docs-rail__actions > :where(button) {
|
|
138
|
+
padding: 0;
|
|
139
|
+
border: 0;
|
|
140
|
+
background: none;
|
|
141
|
+
color: var(--luz-brand-primary);
|
|
142
|
+
font: inherit;
|
|
143
|
+
text-align: start;
|
|
144
|
+
text-decoration: underline;
|
|
145
|
+
text-underline-offset: 0.18em;
|
|
146
|
+
cursor: pointer;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/* Forced colours drop the transparent start border to the text colour: the
|
|
150
|
+
current section is the only one with a border of its own */
|
|
151
|
+
@media (forced-colors: active) {
|
|
152
|
+
.luz-docs-rail__link {
|
|
153
|
+
border-inline-start-color: Canvas;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.luz-docs-rail__link[aria-current="true"] {
|
|
157
|
+
border-inline-start-color: Highlight;
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.docs{.luz-docs-rail{padding:var(--luz-space-lg) var(--luz-space-md) 0;font-family:var(--luz-font-sans);font-size:var(--luz-text-sm)}@media(min-width:60rem){.luz-docs-rail{padding-inline:var(--luz-space-xl)}}@media(min-width:80rem){.luz-docs-rail{padding-block:var(--luz-space-lg);padding-inline:0 var(--luz-space-md)}.luz-docs-rail__inner{position:sticky;inset-block-start:var(--luz-docs-rail-top, 0);max-block-size:calc(100dvh - var(--luz-docs-rail-top, 0rem));overflow-y:auto;padding-inline-start:var(--luz-space-xs)}}.luz-docs-rail__title{min-block-size:var(--luz-control-sm);font-weight:600;color:var(--luz-text-primary)}.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__fold{margin:0;padding:0;border:0;border-radius:0;background:none}.luz-docs-rail .luz-docs-rail__onpage .luz-docs-rail__title{margin:0 0 var(--luz-space-xs);padding-inline:0}.luz-docs-rail__list,.luz-docs-rail__sub{margin:0;padding:0;list-style:none}.luz-docs-rail__list{border-inline-start:1px solid var(--luz-divider)}.luz-docs-rail__link{display:flex;align-items:center;min-block-size:var(--luz-control-sm);margin-inline-start:-1px;padding:var(--luz-space-2xs) var(--luz-space-sm);border-inline-start:2px solid transparent;background:none;color:var(--luz-text-secondary);font-size:inherit;font-weight:400;text-decoration:none;overflow-wrap:anywhere}.luz-docs-rail__sub .luz-docs-rail__link{padding-inline-start:var(--luz-space-lg)}.luz-docs-rail__link:hover{background:var(--luz-surface-muted);color:var(--luz-text-primary)}.luz-docs-rail__link[aria-current=true]{border-inline-start-color:var(--luz-brand-primary);background:none;color:var(--luz-text-primary);font-weight:600}.luz-docs-rail__actions{display:grid;justify-items:start}.luz-docs-rail__onpage+.luz-docs-rail__actions{margin-block-start:var(--luz-space-lg);padding-block-start:var(--luz-space-md);border-block-start:1px solid var(--luz-divider)}.luz-docs-rail__actions>:where(a,button){display:inline-flex;align-items:center;min-block-size:var(--luz-control-sm);overflow-wrap:anywhere}.luz-docs-rail__actions>:where(button){padding:0;border:0;background:none;color:var(--luz-brand-primary);font:inherit;text-align:start;text-decoration:underline;text-underline-offset:.18em;cursor:pointer}@media(forced-colors:active){.luz-docs-rail__link{border-inline-start-color:Canvas}.luz-docs-rail__link[aria-current=true]{border-inline-start-color:Highlight}}}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
@layer luz.tokens, luz.themes, luz.settings, luz.generic, luz.elements, luz.objects, luz.components, luz.utilities, luz.site, luz.landing, luz.cms, luz.app, luz.docs, luz.print;
|
|
2
|
+
@layer luz.docs {
|
|
3
|
+
/* ==========================================================================
|
|
4
|
+
LUZ DOCS: shell.
|
|
5
|
+
body.o-shell.luz-docs-shell > header, nav.luz-sidebar.luz-docs-nav,
|
|
6
|
+
aside.luz-docs-rail, main.o-main.luz-docs-main, footer. "On this page"
|
|
7
|
+
comes before the content, in the markup and on screen: three columns
|
|
8
|
+
from 80rem (the sidebar, the content, the rail, which stretches over the
|
|
9
|
+
content's row), two from 60rem (the rail above the content, in its
|
|
10
|
+
column), one below, in the order of the markup: nothing is lost when the
|
|
11
|
+
third column goes (WCAG 1.4.10). The skip link goes to main, past the
|
|
12
|
+
sidebar and the rail. The header and the footer span the shell. The
|
|
13
|
+
content's children keep to the measure, --luz-docs-measure.
|
|
14
|
+
Core gives the grid, the sidebar and its drawer (a popover nav at 768px
|
|
15
|
+
and below); docs gives the tracks and the measure.
|
|
16
|
+
========================================================================== */
|
|
17
|
+
|
|
18
|
+
.luz-docs-shell {
|
|
19
|
+
--luz-docs-measure: 46rem;
|
|
20
|
+
--luz-docs-nav-w: 16.5rem;
|
|
21
|
+
--luz-docs-rail-w: 14rem;
|
|
22
|
+
--luz-docs-rail-top: var(--luz-space-lg);
|
|
23
|
+
|
|
24
|
+
/* The content takes the free height: on a short page the header keeps
|
|
25
|
+
its own height (core's shell is at least the height of the window) */
|
|
26
|
+
grid-template:
|
|
27
|
+
"head" auto
|
|
28
|
+
"nav" auto
|
|
29
|
+
"rail" auto
|
|
30
|
+
"main" 1fr
|
|
31
|
+
"foot" auto / minmax(0, 1fr);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.luz-docs-shell > :where(header) {
|
|
35
|
+
grid-area: head;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.luz-docs-nav {
|
|
39
|
+
grid-area: nav;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.luz-docs-main {
|
|
43
|
+
grid-area: main;
|
|
44
|
+
display: grid;
|
|
45
|
+
grid-template-columns: minmax(0, 1fr);
|
|
46
|
+
align-content: start;
|
|
47
|
+
gap: var(--luz-space-md);
|
|
48
|
+
min-inline-size: 0;
|
|
49
|
+
/* The footer follows the content: room for one break, not two */
|
|
50
|
+
padding: var(--luz-space-lg) var(--luz-space-md) var(--luz-space-xl);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.luz-docs-rail {
|
|
54
|
+
grid-area: rail;
|
|
55
|
+
min-inline-size: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.luz-docs-shell > :where(footer) {
|
|
59
|
+
grid-area: foot;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Every child of the content keeps to the measure: a line of running text,
|
|
63
|
+
an example and its code alike. A section starts with more room above its
|
|
64
|
+
heading than between its blocks. */
|
|
65
|
+
.luz-docs-main > * {
|
|
66
|
+
max-inline-size: var(--luz-docs-measure);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.luz-docs-main > :where(h2) {
|
|
70
|
+
margin-block-start: var(--luz-space-xl);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Between core's drawer (768px and below) and two columns, the sidebar is
|
|
74
|
+
the first block above the content, popover or not */
|
|
75
|
+
@media (769px <= width < 60rem) {
|
|
76
|
+
.luz-docs-nav {
|
|
77
|
+
position: static;
|
|
78
|
+
block-size: auto;
|
|
79
|
+
inline-size: auto;
|
|
80
|
+
min-inline-size: 0;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@media (min-width: 60rem) {
|
|
85
|
+
.luz-docs-shell {
|
|
86
|
+
grid-template:
|
|
87
|
+
"head head" auto
|
|
88
|
+
"nav rail" auto
|
|
89
|
+
"nav main" 1fr
|
|
90
|
+
"nav foot" auto / var(--luz-docs-nav-w) minmax(0, 1fr);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.luz-docs-nav {
|
|
94
|
+
inline-size: auto;
|
|
95
|
+
min-inline-size: 0;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.luz-docs-main {
|
|
99
|
+
padding-inline: var(--luz-space-xl);
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (min-width: 80rem) {
|
|
104
|
+
.luz-docs-shell {
|
|
105
|
+
grid-template:
|
|
106
|
+
"head head head" auto
|
|
107
|
+
"nav main rail" 1fr
|
|
108
|
+
"nav foot foot" auto / var(--luz-docs-nav-w) minmax(0, 1fr) var(--luz-docs-rail-w);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.luz-docs-main {
|
|
112
|
+
padding-block-end: var(--luz-space-3xl);
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media print {
|
|
117
|
+
.luz-docs-shell {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.luz-docs-rail {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer luz.tokens,luz.themes,luz.settings,luz.generic,luz.elements,luz.objects,luz.components,luz.utilities,luz.site,luz.landing,luz.cms,luz.app,luz.docs,luz.print;@layer luz.docs{.luz-docs-shell{--luz-docs-measure: 46rem;--luz-docs-nav-w: 16.5rem;--luz-docs-rail-w: 14rem;--luz-docs-rail-top: var(--luz-space-lg);grid-template:"head" auto "nav" auto "rail" auto "main" 1fr "foot" auto / minmax(0,1fr)}.luz-docs-shell>:where(header){grid-area:head}.luz-docs-nav{grid-area:nav}.luz-docs-main{grid-area:main;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:var(--luz-space-md);min-inline-size:0;padding:var(--luz-space-lg) var(--luz-space-md) var(--luz-space-xl)}.luz-docs-rail{grid-area:rail;min-inline-size:0}.luz-docs-shell>:where(footer){grid-area:foot}.luz-docs-main>*{max-inline-size:var(--luz-docs-measure)}.luz-docs-main>:where(h2){margin-block-start:var(--luz-space-xl)}@media(769px<=width<60rem){.luz-docs-nav{position:static;block-size:auto;inline-size:auto;min-inline-size:0}}@media(min-width:60rem){.luz-docs-shell{grid-template:"head head" auto "nav rail" auto "nav main" 1fr "nav foot" auto / var(--luz-docs-nav-w) minmax(0,1fr)}.luz-docs-nav{inline-size:auto;min-inline-size:0}.luz-docs-main{padding-inline:var(--luz-space-xl)}}@media(min-width:80rem){.luz-docs-shell{grid-template:"head head head" auto "nav main rail" 1fr "nav foot foot" auto / var(--luz-docs-nav-w) minmax(0,1fr) var(--luz-docs-rail-w)}.luz-docs-main{padding-block-end:var(--luz-space-3xl)}}@media print{.luz-docs-shell{display:block}.luz-docs-rail{display:none}}}
|