swatchkit 1.1.0 → 1.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/package.json +2 -2
- package/src/blueprints/colors.json +11 -0
- package/src/blueprints/compositions/cluster.css +20 -0
- package/src/blueprints/compositions/flow.css +10 -0
- package/src/blueprints/compositions/grid.css +36 -0
- package/src/blueprints/compositions/index.css +12 -0
- package/src/blueprints/compositions/prose.css +89 -0
- package/src/blueprints/compositions/repel.css +23 -0
- package/src/blueprints/compositions/sidebar.css +44 -0
- package/src/blueprints/compositions/switcher.css +32 -0
- package/src/blueprints/compositions/wrapper.css +14 -0
- package/src/blueprints/fonts.json +24 -0
- package/src/blueprints/global/elements.css +609 -0
- package/src/blueprints/global/index.css +13 -0
- package/src/blueprints/global/reset.css +91 -0
- package/src/blueprints/global/variables.css +58 -0
- package/src/blueprints/main.css +27 -0
- package/src/blueprints/spacing.json +19 -0
- package/src/blueprints/swatchkit-ui.css +79 -0
- package/src/blueprints/text-leading.json +13 -0
- package/src/blueprints/text-sizes.json +21 -0
- package/src/blueprints/text-weights.json +11 -0
- package/src/blueprints/utilities/index.css +9 -0
- package/src/blueprints/utilities/region.css +12 -0
- package/src/blueprints/utilities/visually-hidden.css +18 -0
- package/src/blueprints/viewports.json +10 -0
- package/src/generators/index.js +401 -0
- package/src/preview-layout.html +14 -0
- package/src/templates/compositions/cluster/description.html +7 -0
- package/src/templates/compositions/cluster/index.html +7 -0
- package/src/templates/compositions/flow/description.html +8 -0
- package/src/templates/compositions/flow/index.html +6 -0
- package/src/templates/compositions/grid/description.html +12 -0
- package/src/templates/compositions/grid/index.html +7 -0
- package/src/templates/compositions/prose/description.html +8 -0
- package/src/templates/compositions/prose/index.html +6 -0
- package/src/templates/compositions/repel/description.html +9 -0
- package/src/templates/compositions/repel/index.html +4 -0
- package/src/templates/compositions/sidebar/description.html +13 -0
- package/src/templates/compositions/sidebar/index.html +4 -0
- package/src/templates/compositions/switcher/description.html +8 -0
- package/src/templates/compositions/switcher/index.html +29 -0
- package/src/templates/compositions/wrapper/description.html +8 -0
- package/src/templates/compositions/wrapper/index.html +5 -0
- package/src/templates/prose.html +366 -0
- package/src/templates/script.js +44 -0
- package/src/templates/utilities/region/description.html +8 -0
- package/src/templates/utilities/region/index.html +5 -0
- package/src/templates/utilities/visually-hidden/description.html +7 -0
- package/src/templates/utilities/visually-hidden/index.html +7 -0
- package/src/tokens.js +428 -0
- package/src/utils/clamp-generator.js +38 -0
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title><!-- PREVIEW_TITLE --> — Preview</title>
|
|
7
|
+
<link rel="stylesheet" href="<!-- CSS_PATH -->main.css" />
|
|
8
|
+
<!-- HEAD_EXTRAS -->
|
|
9
|
+
</head>
|
|
10
|
+
<body class="wrapper region">
|
|
11
|
+
<!-- PREVIEW_CONTENT -->
|
|
12
|
+
<script src="<!-- JS_PATH -->js/swatches.js"></script>
|
|
13
|
+
</body>
|
|
14
|
+
</html>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="cluster" style="outline: 1px dashed var(--color-mid); padding: var(--space-s);">
|
|
2
|
+
<span style="background: var(--color-primary); padding: var(--space-xs) var(--space-s); border-radius: 2rem; color: var(--color-light);">Design</span>
|
|
3
|
+
<span style="background: var(--color-primary); padding: var(--space-xs) var(--space-s); border-radius: 2rem; color: var(--color-light);">CSS</span>
|
|
4
|
+
<span style="background: var(--color-primary); padding: var(--space-xs) var(--space-s); border-radius: 2rem; color: var(--color-light);">Layout</span>
|
|
5
|
+
<span style="background: var(--color-primary); padding: var(--space-xs) var(--space-s); border-radius: 2rem; color: var(--color-light);">Every Layout</span>
|
|
6
|
+
<span style="background: var(--color-primary); padding: var(--space-xs) var(--space-s); border-radius: 2rem; color: var(--color-light);">Patterns</span>
|
|
7
|
+
</div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
Adds vertical rhythm between direct children using
|
|
4
|
+
<code>margin-block-start</code>. The space is controlled by
|
|
5
|
+
<code>--flow-space</code>, defaulting to <code>1em</code>. Override
|
|
6
|
+
per-element by setting <code>--flow-space</code> directly on a child.
|
|
7
|
+
</p>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<div class="flow" style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">
|
|
2
|
+
<p>First child — no margin above.</p>
|
|
3
|
+
<p>Second child — flow space above.</p>
|
|
4
|
+
<p>Third child — flow space above.</p>
|
|
5
|
+
<p style="--flow-space: var(--space-xl)">This child has extra space above via <code>--flow-space: var(--space-xl)</code>.</p>
|
|
6
|
+
</div>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
An auto-filling grid using the RAM pattern (Repeat, Auto, Minmax). Items are
|
|
4
|
+
at least <code>--grid-min-item-size</code> wide (default
|
|
5
|
+
<code>16rem</code>), growing to fill available space. No media queries
|
|
6
|
+
needed — the grid adapts intrinsically.
|
|
7
|
+
</p>
|
|
8
|
+
<p>
|
|
9
|
+
Use <code>data-layout="50-50"</code> for a two-column split, or
|
|
10
|
+
<code>data-layout="thirds"</code> for three columns.
|
|
11
|
+
</p>
|
|
12
|
+
</div>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<ul class="grid" role="list" style="--grid-min-item-size: 8rem; list-style: none; padding: 0; margin: 0;">
|
|
2
|
+
<li style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Card</li>
|
|
3
|
+
<li style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Card</li>
|
|
4
|
+
<li style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Card</li>
|
|
5
|
+
<li style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Card</li>
|
|
6
|
+
<li style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Card</li>
|
|
7
|
+
</ul>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
Optimises long-form reading by increasing <code>--flow-space</code>,
|
|
4
|
+
constraining line length to <code>60ch</code>, and adding extra breathing
|
|
5
|
+
room around headings, figures, and horizontal rules. Apply alongside
|
|
6
|
+
<code>flow</code>.
|
|
7
|
+
</p>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<article class="prose flow">
|
|
2
|
+
<h2>A prose section</h2>
|
|
3
|
+
<p>This paragraph is constrained to 60 characters wide for comfortable reading. The flow spacing is increased compared to a plain <code>.flow</code> container.</p>
|
|
4
|
+
<h3>A subsection heading</h3>
|
|
5
|
+
<p>Headings get extra space above them to clearly separate sections, and tighter space below to visually bind them to the content that follows.</p>
|
|
6
|
+
</article>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
Pushes two items to opposite ends of their container using
|
|
4
|
+
<code>justify-content: space-between</code>. Wraps on small viewports.
|
|
5
|
+
Useful for header rows, card footers, or any pattern that pairs a label with
|
|
6
|
+
an action.
|
|
7
|
+
</p>
|
|
8
|
+
<p>Add <code>data-nowrap</code> to prevent wrapping.</p>
|
|
9
|
+
</div>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
A two-child layout where the first child becomes a fixed-width sidebar and
|
|
4
|
+
the second takes all remaining space. When the content area would shrink
|
|
5
|
+
below <code>--sidebar-content-min-width</code> (default <code>50%</code>),
|
|
6
|
+
the layout stacks vertically.
|
|
7
|
+
</p>
|
|
8
|
+
<p>
|
|
9
|
+
Set <code>data-direction="rtl"</code> to put the sidebar on the right. Set
|
|
10
|
+
<code>data-reversed</code> to reverse the visual order without changing
|
|
11
|
+
source order.
|
|
12
|
+
</p>
|
|
13
|
+
</div>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
<div class="sidebar" style="outline: 1px dashed var(--color-mid);">
|
|
2
|
+
<div style="background: var(--color-primary); padding: var(--space-m); color: var(--color-light);">Sidebar</div>
|
|
3
|
+
<div style="background: var(--color-light); padding: var(--space-m); outline: 1px dashed var(--color-mid);">Main content area</div>
|
|
4
|
+
</div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
Lays out children horizontally until the container is narrower than
|
|
4
|
+
<code>--switcher-target-container-width</code> (default <code>40rem</code>),
|
|
5
|
+
then stacks them vertically. No media queries needed. Optimised for two and
|
|
6
|
+
three items — a fourth or more will always stack.
|
|
7
|
+
</p>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<div class="switcher" style="outline: 1px dashed var(--color-mid)">
|
|
2
|
+
<div
|
|
3
|
+
style="
|
|
4
|
+
background: var(--color-light);
|
|
5
|
+
padding: var(--space-m);
|
|
6
|
+
outline: 1px dashed var(--color-mid);
|
|
7
|
+
"
|
|
8
|
+
>
|
|
9
|
+
First panel
|
|
10
|
+
</div>
|
|
11
|
+
<div
|
|
12
|
+
style="
|
|
13
|
+
background: var(--color-light);
|
|
14
|
+
padding: var(--space-m);
|
|
15
|
+
outline: 1px dashed var(--color-mid);
|
|
16
|
+
"
|
|
17
|
+
>
|
|
18
|
+
First panel
|
|
19
|
+
</div>
|
|
20
|
+
<div
|
|
21
|
+
style="
|
|
22
|
+
background: var(--color-light);
|
|
23
|
+
padding: var(--space-m);
|
|
24
|
+
outline: 1px dashed var(--color-mid);
|
|
25
|
+
"
|
|
26
|
+
>
|
|
27
|
+
Second panel
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>
|
|
3
|
+
Centers content horizontally and constrains it to a maximum width using
|
|
4
|
+
<code>--wrapper-max-width</code> (default <code>1360px</code>). Adds
|
|
5
|
+
horizontal padding using <code>--gutter</code> to keep content away from
|
|
6
|
+
viewport edges on small screens.
|
|
7
|
+
</p>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<div style="background: var(--color-light); outline: 1px dashed var(--color-mid);">
|
|
2
|
+
<div class="wrapper" style="background: color-mix(in srgb, var(--color-primary) 15%, transparent); padding-block: var(--space-m);">
|
|
3
|
+
<p>This content is wrapped and centered with max-width constraints.</p>
|
|
4
|
+
</div>
|
|
5
|
+
</div>
|
|
@@ -0,0 +1,366 @@
|
|
|
1
|
+
<article class="wrapper prose flow">
|
|
2
|
+
<h1>Prose content and global styles kitchen sink</h1>
|
|
3
|
+
<p>We start with a paragraph of text that features various HTML tags, used in flow content. Account for <em>emphasis</em>, <strong>strong</strong> and <small>small</small> text. Don't forget to account for abbreviations too, using the <abbr title="abbreviation">abbr</abbr> (<code><abbr></code>) element. Lastly you can define <del>deleted text</del>
|
|
4
|
+
<ins>inserted text</ins>.</p>
|
|
5
|
+
<p>If you are referencing keyboard keys, make sure you use the <code><kbd></code> element like this: <kbd>shift</kbd>. Like we have already in these paragraphs, if you are referencing code, use the <code><code></code> element. Don't forget the <code><samp></code> element either. An example for that element is this: <samp>Press F1 to continue</samp>. </p>
|
|
6
|
+
<p>Use the <code><var></code> element to reference a variable like this: The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.</p>
|
|
7
|
+
<p>If you want an inline quote, use the <code><q></code> element <q>quoted text</q>. Lastly don't forget the subscript (<code><sub></code>) (H<sub>2</sub>O) and superscript (<code><sup></code>) (E = MC<sup>2</sup>), and of course, <a href="https://example.com">link elements</a>. </p>
|
|
8
|
+
<h2>Blockquote styles are the context for this heading level 2 which is long for testing leading and balance</h2>
|
|
9
|
+
<blockquote>
|
|
10
|
+
<p>Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum.</p>
|
|
11
|
+
</blockquote>
|
|
12
|
+
<blockquote cite="https://www.huxley.net/bnw/four.html">
|
|
13
|
+
<q>Words can be like X-rays, if you use them properly—they'll go through anything. You read and you're pierced.</q>
|
|
14
|
+
<footer>Aldous Huxley, <cite>Brave New World</cite>
|
|
15
|
+
</footer>
|
|
16
|
+
</blockquote>
|
|
17
|
+
<p>Make sure you only use a cite if the quote source can be linked to.</p>
|
|
18
|
+
<hr>
|
|
19
|
+
<p>Just a quick paragraph to follow the horizontal rule. A bit of Lipsum? Sure thing: Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
|
20
|
+
<h2>Details and summary</h2>
|
|
21
|
+
<details>
|
|
22
|
+
<summary>Toggle the details element</summary>
|
|
23
|
+
<p>Previously hidden content until the details element is in its <code>open</code> state.
|
|
24
|
+
</p></details>
|
|
25
|
+
<h2>Tables</h2>
|
|
26
|
+
<table>
|
|
27
|
+
<caption>A nice caption for this table</caption>
|
|
28
|
+
<tbody>
|
|
29
|
+
<tr>
|
|
30
|
+
<th>Person</th>
|
|
31
|
+
<th>Number</th>
|
|
32
|
+
<th>Third Column</th>
|
|
33
|
+
</tr>
|
|
34
|
+
<tr>
|
|
35
|
+
<td>Someone Lastname</td>
|
|
36
|
+
<td>900</td>
|
|
37
|
+
<td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<td>
|
|
41
|
+
<a href="#">Person Name</a>
|
|
42
|
+
</td>
|
|
43
|
+
<td>1200</td>
|
|
44
|
+
<td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>
|
|
45
|
+
</tr>
|
|
46
|
+
<tr>
|
|
47
|
+
<td>Another Person</td>
|
|
48
|
+
<td>1500</td>
|
|
49
|
+
<td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
|
|
50
|
+
</tr>
|
|
51
|
+
<tr>
|
|
52
|
+
<td>Last One</td>
|
|
53
|
+
<td>2800</td>
|
|
54
|
+
<td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>
|
|
55
|
+
</tr>
|
|
56
|
+
</tbody>
|
|
57
|
+
</table>
|
|
58
|
+
<p>Sometimes, a table has column headers</p>
|
|
59
|
+
<table>
|
|
60
|
+
<caption>A nice caption for this table</caption>
|
|
61
|
+
<tbody>
|
|
62
|
+
<tr>
|
|
63
|
+
<th></th>
|
|
64
|
+
<th>Person</th>
|
|
65
|
+
<th>Number</th>
|
|
66
|
+
<th>Third Column</th>
|
|
67
|
+
</tr>
|
|
68
|
+
<tr>
|
|
69
|
+
<th>This column's heading</th>
|
|
70
|
+
<td>Someone Lastname</td>
|
|
71
|
+
<td>900</td>
|
|
72
|
+
<td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>
|
|
73
|
+
</tr>
|
|
74
|
+
<tr>
|
|
75
|
+
<th>Another column heading</th>
|
|
76
|
+
<td>
|
|
77
|
+
<a href="#">Person Name</a>
|
|
78
|
+
</td>
|
|
79
|
+
<td>1200</td>
|
|
80
|
+
<td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>
|
|
81
|
+
</tr>
|
|
82
|
+
<tr>
|
|
83
|
+
<th>Code in tables should have more paired back styles</th>
|
|
84
|
+
<td>Another Person</td>
|
|
85
|
+
<td>
|
|
86
|
+
<code>1500</code>
|
|
87
|
+
</td>
|
|
88
|
+
<td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>
|
|
89
|
+
</tr>
|
|
90
|
+
<tr>
|
|
91
|
+
<th>Last column header</th>
|
|
92
|
+
<td>Last One</td>
|
|
93
|
+
<td>2800</td>
|
|
94
|
+
<td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>
|
|
95
|
+
</tr>
|
|
96
|
+
</tbody>
|
|
97
|
+
</table>
|
|
98
|
+
<h2>Description lists time</h2>
|
|
99
|
+
<p>Just a quick paragraph to introduce heading level 3 too.</p>
|
|
100
|
+
<h3>Description lists are under-used, but extremely useful</h3>
|
|
101
|
+
<dl>
|
|
102
|
+
<dt>A description list term</dt>
|
|
103
|
+
<dd>A description list detail</dd>
|
|
104
|
+
<dt>Another term</dt>
|
|
105
|
+
<dd>A slightly longer details element to work with.</dd>
|
|
106
|
+
</dl>
|
|
107
|
+
<h3>Sometimes description lists have multiple details</h3>
|
|
108
|
+
<dl>
|
|
109
|
+
<dt>This term introduces two details</dt>
|
|
110
|
+
<dd>This is the first one</dd>
|
|
111
|
+
<dd>This is the second one, which is a bit longer</dd>
|
|
112
|
+
</dl>
|
|
113
|
+
<h2>Lists, glorious lists</h2>
|
|
114
|
+
<p>Lists in various forms.</p>
|
|
115
|
+
<h3>A simple undordered list</h3>
|
|
116
|
+
<ul>
|
|
117
|
+
<li>List item one</li>
|
|
118
|
+
<li>List item two</li>
|
|
119
|
+
<li>List item three, which is a longer item to make sure our marker styles work well for mult-line list items</li>
|
|
120
|
+
<li>List item four</li>
|
|
121
|
+
</ul>
|
|
122
|
+
<h3>Moving on to a nested undordered list</h3>
|
|
123
|
+
<ul>
|
|
124
|
+
<li>Unordered List item one <ul>
|
|
125
|
+
<li>Nested list item <ul>
|
|
126
|
+
<li>Level 3, item one</li>
|
|
127
|
+
<li>Level 3, item two</li>
|
|
128
|
+
<li>Level 3, item three</li>
|
|
129
|
+
<li>Level 3, item four</li>
|
|
130
|
+
</ul>
|
|
131
|
+
</li>
|
|
132
|
+
<li>List item two</li>
|
|
133
|
+
<li>List item three</li>
|
|
134
|
+
<li>List item four</li>
|
|
135
|
+
</ul>
|
|
136
|
+
</li>
|
|
137
|
+
<li>List item two</li>
|
|
138
|
+
<li>List item three</li>
|
|
139
|
+
<li>List item four</li>
|
|
140
|
+
</ul>
|
|
141
|
+
<h3>Order, numbered lists are next</h3>
|
|
142
|
+
<ol>
|
|
143
|
+
<li>List item one</li>
|
|
144
|
+
<li>List item two</li>
|
|
145
|
+
<li>List item three, which is a longer item to make sure our marker styles work well for mult-line list items</li>
|
|
146
|
+
<li>List item four</li>
|
|
147
|
+
</ol>
|
|
148
|
+
<h3>Moving on to a nested undordered list</h3>
|
|
149
|
+
<ol>
|
|
150
|
+
<li>Ordered List item one <ol>
|
|
151
|
+
<li>Nested list item <ol>
|
|
152
|
+
<li>Level 3, item one</li>
|
|
153
|
+
<li>Level 3, item two</li>
|
|
154
|
+
<li>Level 3, item three</li>
|
|
155
|
+
<li>Level 3, item four</li>
|
|
156
|
+
</ol>
|
|
157
|
+
</li>
|
|
158
|
+
<li>List item two</li>
|
|
159
|
+
<li>List item three</li>
|
|
160
|
+
<li>List item four</li>
|
|
161
|
+
</ol>
|
|
162
|
+
</li>
|
|
163
|
+
<li>List item two</li>
|
|
164
|
+
<li>List item three</li>
|
|
165
|
+
<li>List item four</li>
|
|
166
|
+
</ol>
|
|
167
|
+
<h3>A mix of both</h3>
|
|
168
|
+
<ul>
|
|
169
|
+
<li>Unordered List item one <ol>
|
|
170
|
+
<li>Nested ordered list item <ul>
|
|
171
|
+
<li>Level 3, item one</li>
|
|
172
|
+
<li>Level 3, item two</li>
|
|
173
|
+
<li>Level 3, item three</li>
|
|
174
|
+
<li>Level 3, item four</li>
|
|
175
|
+
</ul>
|
|
176
|
+
</li>
|
|
177
|
+
<li>List item two</li>
|
|
178
|
+
<li>List item three</li>
|
|
179
|
+
<li>List item four</li>
|
|
180
|
+
</ol>
|
|
181
|
+
</li>
|
|
182
|
+
<li>List item two</li>
|
|
183
|
+
<li>List item three</li>
|
|
184
|
+
<li>List item four</li>
|
|
185
|
+
</ul>
|
|
186
|
+
<h2>Preformatted text / blocks of code styles follow on next</h2>
|
|
187
|
+
<pre><code>.context-alert {
|
|
188
|
+
position: absolute;
|
|
189
|
+
inset: auto 0 calc(100% + 0.5em) 0;
|
|
190
|
+
padding: 0.25em;
|
|
191
|
+
background: var(--color-primary);
|
|
192
|
+
color: var(--color-light);
|
|
193
|
+
font-weight: var(--font-bold);
|
|
194
|
+
text-align: center;
|
|
195
|
+
transition: opacity var(--transition-fade) 200ms,
|
|
196
|
+
transform var(--transition-bounce-fast) 200ms;
|
|
197
|
+
}</code></pre>
|
|
198
|
+
<h2>Forms</h2>
|
|
199
|
+
<form>
|
|
200
|
+
<div>
|
|
201
|
+
<label for="input-email">Email address with placeholder</label>
|
|
202
|
+
<input type="email" id="input-email" placeholder="E.G name@domain.com">
|
|
203
|
+
</div>
|
|
204
|
+
<div>
|
|
205
|
+
<label for="input-number">Number</label>
|
|
206
|
+
<input type="number" id="input-number">
|
|
207
|
+
</div>
|
|
208
|
+
<div>
|
|
209
|
+
<label for="input-password">Password</label>
|
|
210
|
+
<input type="password" id="input-password">
|
|
211
|
+
</div>
|
|
212
|
+
<div>
|
|
213
|
+
<label for="input-search">Search</label>
|
|
214
|
+
<input type="search" id="input-search">
|
|
215
|
+
</div>
|
|
216
|
+
<div>
|
|
217
|
+
<label for="input-tel">Telephone number</label>
|
|
218
|
+
<input type="tel" id="input-tel">
|
|
219
|
+
</div>
|
|
220
|
+
<div>
|
|
221
|
+
<label for="input-text">Text</label>
|
|
222
|
+
<input type="text" id="input-text">
|
|
223
|
+
</div>
|
|
224
|
+
<div>
|
|
225
|
+
<label for="input-url">Url with placeholder</label>
|
|
226
|
+
<input type="url" id="input-url" placeholder="https://example.com">
|
|
227
|
+
</div>
|
|
228
|
+
<div>
|
|
229
|
+
<label for="input-color">Color</label>
|
|
230
|
+
<input type="color" id="input-color" value="#ff00ff">
|
|
231
|
+
</div>
|
|
232
|
+
<div>
|
|
233
|
+
<label for="input-date">Date</label>
|
|
234
|
+
<input type="date" id="input-date">
|
|
235
|
+
</div>
|
|
236
|
+
<div>
|
|
237
|
+
<label for="input-date-time-local">Date and time</label>
|
|
238
|
+
<input type="datetime-local" id="input-date-time-local">
|
|
239
|
+
</div>
|
|
240
|
+
<div>
|
|
241
|
+
<label for="input-month">Month</label>
|
|
242
|
+
<input type="month" id="input-month">
|
|
243
|
+
</div>
|
|
244
|
+
<div>
|
|
245
|
+
<label for="input-week">Week</label>
|
|
246
|
+
<input type="week" id="input-week">
|
|
247
|
+
</div>
|
|
248
|
+
<div>
|
|
249
|
+
<label for="input-time">Time</label>
|
|
250
|
+
<input type="time" id="input-time">
|
|
251
|
+
</div>
|
|
252
|
+
<div>
|
|
253
|
+
<label for="input-select">Example select</label>
|
|
254
|
+
<select id="input-select">
|
|
255
|
+
<option>Option number 1</option>
|
|
256
|
+
<option>Option number 2</option>
|
|
257
|
+
<option>Option number 3</option>
|
|
258
|
+
<option>Option number 4</option>
|
|
259
|
+
<option>Option number 5</option>
|
|
260
|
+
</select>
|
|
261
|
+
</div>
|
|
262
|
+
<div>
|
|
263
|
+
<label for="input-multi-select">Example multiple select</label>
|
|
264
|
+
<select multiple id="input-multi-select">
|
|
265
|
+
<option>Option number 1</option>
|
|
266
|
+
<option>Option number 2</option>
|
|
267
|
+
<option>Option number 3</option>
|
|
268
|
+
<option>Option number 4</option>
|
|
269
|
+
<option>Option number 5</option>
|
|
270
|
+
</select>
|
|
271
|
+
</div>
|
|
272
|
+
<div>
|
|
273
|
+
<label for="input-datalist">Example datalist</label>
|
|
274
|
+
<input list="datalist-list-element" id="input-datalist">
|
|
275
|
+
<datalist id="datalist-list-element">
|
|
276
|
+
<option>Option number 1</option>
|
|
277
|
+
<option>Option number 2</option>
|
|
278
|
+
<option>Option number 3</option>
|
|
279
|
+
<option>Option number 4</option>
|
|
280
|
+
<option>Option number 5</option>
|
|
281
|
+
</datalist>
|
|
282
|
+
</div>
|
|
283
|
+
<div>
|
|
284
|
+
<label for="input-textarea">Example textarea</label>
|
|
285
|
+
<textarea id="input-textarea" rows="3"></textarea>
|
|
286
|
+
</div>
|
|
287
|
+
<div>
|
|
288
|
+
<label for="input-textarea-no-rows">Example textarea with no rows attribute</label>
|
|
289
|
+
<textarea id="input-textarea-no-rows"></textarea>
|
|
290
|
+
</div>
|
|
291
|
+
<div>
|
|
292
|
+
<label for="input-file">File input</label>
|
|
293
|
+
<input type="file" id="input-file">
|
|
294
|
+
</div>
|
|
295
|
+
<div>
|
|
296
|
+
<label for="input-disabled">A disabled input</label>
|
|
297
|
+
<input type="text" id="input-disabled" disabled>
|
|
298
|
+
</div>
|
|
299
|
+
<div>
|
|
300
|
+
<label for="input-readonly">A readonly input</label>
|
|
301
|
+
<input type="text" id="input-readonly" readonly value="Some readonly text">
|
|
302
|
+
</div>
|
|
303
|
+
<fieldset>
|
|
304
|
+
<legend>I am a legend element for radio inputs</legend>
|
|
305
|
+
<label for="radio-1">
|
|
306
|
+
<input type="radio" name="input-radios" id="radio-1" value="option-1" checked>
|
|
307
|
+
<span>We put the label text in a span because we can use <code>:has()</code> to style radios and checkboxes with flexbox</span>
|
|
308
|
+
</label>
|
|
309
|
+
<label for="radio-2">
|
|
310
|
+
<input type="radio" name="input-radios" id="radio-2" value="option-2">
|
|
311
|
+
<span>
|
|
312
|
+
The second option should de-select option 1
|
|
313
|
+
</span>
|
|
314
|
+
</label>
|
|
315
|
+
<label for="radio-3">
|
|
316
|
+
<input type="radio" name="input-radios" id="radio-3" value="option3" disabled>
|
|
317
|
+
<span>This one is disabled and can't be selected</span>
|
|
318
|
+
</label>
|
|
319
|
+
</fieldset>
|
|
320
|
+
<fieldset>
|
|
321
|
+
<legend>I am also a legend but this time for checkboxes</legend>
|
|
322
|
+
<label for="input-checkbox">
|
|
323
|
+
<input type="checkbox" id="input-checkbox">
|
|
324
|
+
<span>Checkbox number one</span>
|
|
325
|
+
</label>
|
|
326
|
+
<label for="input-checkbox-1">
|
|
327
|
+
<input type="checkbox" id="input-checkbox-1">
|
|
328
|
+
<span>Checkbox number two has a longer label to make sure our CSS is top notch</span>
|
|
329
|
+
</label>
|
|
330
|
+
<label for="input-checkbox-2">
|
|
331
|
+
<input type="checkbox" id="input-checkbox-2" disabled>
|
|
332
|
+
<span>Checkbox number three is disabled and cant't be checked</span>
|
|
333
|
+
</label>
|
|
334
|
+
</fieldset>
|
|
335
|
+
</form>
|
|
336
|
+
<p>Where are buttons? Good question. Not here because we don't tend to style up default buttons and instead opt to treat them as components with a <code>.button</code> class.</p>
|
|
337
|
+
<h2>Images, figures, pictures and videos</h2>
|
|
338
|
+
<p>Under no circumstances should you have an image without an <code>alt</code> attribute. At a minimum, it should be an empty value like this one. That should only be used for purely decorative images though. </p>
|
|
339
|
+
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY4MjA3NzQ4Mg&ixlib=rb-4.0.3&q=80&w=1080" alt="Abstract liquid oil painting texture">
|
|
340
|
+
<h3>An image in a figure with a caption</h3>
|
|
341
|
+
<figure>
|
|
342
|
+
<img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&auto=format&fit=crop&w=4470&q=80" alt="Foggy mountains with a moody atmosphere">
|
|
343
|
+
<figcaption>Nature's moody atmosphere. By <a href="https://unsplash.com/@v2osk">v2osk</a>
|
|
344
|
+
</figcaption>
|
|
345
|
+
</figure>
|
|
346
|
+
<h3>A picture element</h3>
|
|
347
|
+
<picture>
|
|
348
|
+
<source srcset="https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500&h=1500&q=80" media="(min-width: 1500px)">
|
|
349
|
+
<source srcset="https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" media="(orientation: portrait)">
|
|
350
|
+
<img src="https://images.unsplash.com/photo-1497366216548-37526070297c?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&h=500&q=80" alt="Modern minimalistic architecture">
|
|
351
|
+
</picture>
|
|
352
|
+
<h3>A video element</h3>
|
|
353
|
+
<video controls src="https://assets.codepen.io/174183/flower.mp4"></video>
|
|
354
|
+
<h3>An SVG with an image role and alternative text</h3>
|
|
355
|
+
<svg role="img" aria-label="a black spiral" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 331.27 316.68" width="500" height="500">
|
|
356
|
+
<path fill="#000" d="M182.4,339.4a152.15,152.15,0,0,1-53.8-9.9A155.78,155.78,0,0,1,28.7,188.4,159.57,159.57,0,0,1,72.4,73.9,165,165,0,0,1,251,33.7a169,169,0,0,1,94,89,173,173,0,0,1,14.9,65.4l-10,.3A160.63,160.63,0,0,0,299.8,75.9a158.8,158.8,0,0,0-52.3-32.8,156.72,156.72,0,0,0-60.2-10.2A153.62,153.62,0,0,0,79.8,81a153,153,0,0,0-31.3,49.9,150.15,150.15,0,0,0-9.7,57.4,147.9,147.9,0,0,0,12.9,56.1,145.82,145.82,0,0,0,33,46.2,144,144,0,0,0,47.6,29.7,141.53,141.53,0,0,0,108-3.2,139.62,139.62,0,0,0,43.9-31.4,138.19,138.19,0,0,0,28.2-45.2,135.22,135.22,0,0,0,8.6-51.9v-.3a133.79,133.79,0,0,0-11.8-50.4,130.65,130.65,0,0,0-72.8-68.1A127,127,0,0,0,139.5,73a124.84,124.84,0,0,0-39.2,28.3,122.5,122.5,0,0,0-25,40.5,119,119,0,0,0,3.2,91.3A117.52,117.52,0,0,0,105.2,270a116.09,116.09,0,0,0,38.2,23.5,112.41,112.41,0,0,0,85.8-3.2,109.78,109.78,0,0,0,34.5-25.1,108.34,108.34,0,0,0,21.9-35.8,104.88,104.88,0,0,0,6.4-40.8v-.2a102.95,102.95,0,0,0-33.2-71.5A98.37,98.37,0,0,0,150.6,99.8a96.58,96.58,0,0,0-29.8,22A94.57,94.57,0,0,0,102,152.9a90.45,90.45,0,0,0,3.1,69.1,88.84,88.84,0,0,0,20.4,27.5,86.82,86.82,0,0,0,28.7,17.2,83.27,83.27,0,0,0,63.6-3.2,78.84,78.84,0,0,0,25.1-18.8,79.77,79.77,0,0,0,15.7-26.4,76.75,76.75,0,0,0,4.2-29.7v-.2a75.91,75.91,0,0,0-7.3-28.2,74.17,74.17,0,0,0-17.2-22.8,72,72,0,0,0-24-14.1,68.73,68.73,0,0,0-52.5,3.2,65.22,65.22,0,0,0-20.4,15.7,63.75,63.75,0,0,0-12.5,21.7,61.63,61.63,0,0,0-3.1,24.1,59.53,59.53,0,0,0,6.2,22.8,57.9,57.9,0,0,0,14.1,18.1,57.22,57.22,0,0,0,19.3,11,55.31,55.31,0,0,0,21.4,2.6,52,52,0,0,0,35.8-18.1,48.88,48.88,0,0,0,11.5-35.6v-.3a47.14,47.14,0,0,0-5-17,44.33,44.33,0,0,0-10.9-13.4,42.4,42.4,0,0,0-14.6-7.9,40,40,0,0,0-15.8-1.5,37.19,37.19,0,0,0-14.5,4.5,35.59,35.59,0,0,0-11.1,9.3,34.65,34.65,0,0,0-6.3,12.2,33.45,33.45,0,0,0-1,13,30,30,0,0,0,3.9,11.7,30.94,30.94,0,0,0,7.7,8.8,28,28,0,0,0,9.8,4.8,25.44,25.44,0,0,0,10.3.5,25,25,0,0,0,8.9-3.2,23.63,23.63,0,0,0,6.5-6.1,21.32,21.32,0,0,0,3.3-7.4,18.94,18.94,0,0,0,0-7.5l-.1-.3a15.54,15.54,0,0,0-6.9-10,12.22,12.22,0,0,0-4.9-1.8,11.47,11.47,0,0,0-4.8.4,7.35,7.35,0,0,0-3.2,1.8,10,10,0,0,0-2,2.6,4.41,4.41,0,0,0-.5,1.9h0l.5-1.7,4.3.8a4.51,4.51,0,0,1,1.1.3l2.7-.5.5,2.8a5.39,5.39,0,0,1,.7,1.3l-.2.9,1.2,4.6-.7.2.3,1.7-2.6-.5a12,12,0,0,1-1.1,1.2,8.24,8.24,0,0,1-5.8,1.8,10.78,10.78,0,0,1-4.9-1.5,11.85,11.85,0,0,1-4.3-4.6l-.1-.1a14.34,14.34,0,0,1-1.5-5.7,15.94,15.94,0,0,1,1.4-7,19.79,19.79,0,0,1,4.4-6A18.07,18.07,0,0,1,186,168a21.66,21.66,0,0,1,17.6,2.5,26.67,26.67,0,0,1,7.3,6.9,25.6,25.6,0,0,1,4.2,9.9l.1.6a28.53,28.53,0,0,1-.2,10.9,30.21,30.21,0,0,1-4.9,11.2A32.8,32.8,0,0,1,188,223.4a35.68,35.68,0,0,1-14.2-.7,39.22,39.22,0,0,1-13.5-6.5A39.76,39.76,0,0,1,144.9,189a43.47,43.47,0,0,1,1.3-16.9,46.53,46.53,0,0,1,8.1-15.8,47.29,47.29,0,0,1,32.3-17.4,50.39,50.39,0,0,1,19.7,1.9,53.84,53.84,0,0,1,18.1,9.7A55,55,0,0,1,237.8,167a56.72,56.72,0,0,1,6.2,21v.3a57.39,57.39,0,0,1-2.5,22.2,58.55,58.55,0,0,1-11.3,20.4,61.69,61.69,0,0,1-18.8,14.9,63.21,63.21,0,0,1-23.8,6.7,63.9,63.9,0,0,1-25.3-3.1,67.49,67.49,0,0,1-22.7-12.9,68.23,68.23,0,0,1-16.5-21.2,69.25,69.25,0,0,1-7.2-26.6,71.61,71.61,0,0,1,3.6-28,74.68,74.68,0,0,1,38.1-43.1,78.1,78.1,0,0,1,60.1-3.6,81.92,81.92,0,0,1,47,41.9A84.73,84.73,0,0,1,273,188v.3a86.3,86.3,0,0,1-4.8,33.4,89.32,89.32,0,0,1-46,50.9,92.64,92.64,0,0,1-34.9,8.8,95.3,95.3,0,0,1-36.3-5.3,96.56,96.56,0,0,1-54.8-49.8,99.29,99.29,0,0,1-9.4-37.7,101.84,101.84,0,0,1,26.7-73.5,105.45,105.45,0,0,1,33-24.3,108.28,108.28,0,0,1,40.5-10,110.73,110.73,0,0,1,41.9,6.4,111.16,111.16,0,0,1,62.7,57.6A114.76,114.76,0,0,1,302.1,188v.2a116,116,0,0,1-31,83.7,120,120,0,0,1-83.7,38.4,123.5,123.5,0,0,1-47.4-7.6,125.51,125.51,0,0,1-41.5-25.5,127.2,127.2,0,0,1-40.6-88.8,130.7,130.7,0,0,1,35.2-94,134.21,134.21,0,0,1,94-42.7,138.85,138.85,0,0,1,53,8.6,140.3,140.3,0,0,1,46.2,28.6,141.86,141.86,0,0,1,44.8,99v.3a145.36,145.36,0,0,1-39.4,104.2,148.88,148.88,0,0,1-104.2,46.9C185.6,339.4,184,339.4,182.4,339.4Z" transform="translate(-28.63 -22.72)"></path>
|
|
357
|
+
</svg>
|
|
358
|
+
<h2>All of the headings</h2>
|
|
359
|
+
<p>We tend to only specifically style up headings up to level 4 in terms of leading and balance because if you're getting into 5 and 6, you probably want to be simplifying your content. We'll add them here though to double check they look OK.</p>
|
|
360
|
+
<h1>Sed posuere consectetur est at lobortis.</h1>
|
|
361
|
+
<h2>Sed posuere consectetur est at lobortis.</h2>
|
|
362
|
+
<h3>Sed posuere consectetur est at lobortis.</h3>
|
|
363
|
+
<h4>Sed posuere consectetur est at lobortis.</h4>
|
|
364
|
+
<h5>Sed posuere consectetur est at lobortis.</h5>
|
|
365
|
+
<h6>Sed posuere consectetur est at lobortis.</h6>
|
|
366
|
+
</article>
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
// Token Value Display Script
|
|
2
|
+
//
|
|
3
|
+
// Shows the computed (resolved) value of CSS custom properties next to each
|
|
4
|
+
// .token-value element in the token documentation pages. For example, a color
|
|
5
|
+
// token swatch might display "(#3b82f6)" beside the variable name.
|
|
6
|
+
//
|
|
7
|
+
// How it reaches the browser:
|
|
8
|
+
// 1. `swatchkit init` copies this file to swatchkit/tokens/script.js
|
|
9
|
+
// 2. The build scans section directories for loose .js files, collects them
|
|
10
|
+
// (along with any component-folder scripts), wraps each in an IIFE, and
|
|
11
|
+
// concatenates them into dist/swatchkit/js/swatches.js
|
|
12
|
+
// 3. The layout templates include a <script> tag pointing to js/swatches.js
|
|
13
|
+
|
|
14
|
+
const elements = document.querySelectorAll('.token-value');
|
|
15
|
+
if (elements.length > 0) {
|
|
16
|
+
elements.forEach(el => {
|
|
17
|
+
const prop = el.getAttribute('data-var');
|
|
18
|
+
// Since this script runs at the end of body, styles should be loaded.
|
|
19
|
+
const computed = getComputedStyle(el).getPropertyValue(prop).trim();
|
|
20
|
+
if (computed) {
|
|
21
|
+
el.innerHTML += ` <span style="opacity: 0.5; font-family: monospace; font-size: 0.8em">(${computed})</span>`;
|
|
22
|
+
} else {
|
|
23
|
+
// Fallback for when the variable isn't directly on the element or is global
|
|
24
|
+
// Try creating a temp element to read the variable
|
|
25
|
+
const temp = document.createElement('div');
|
|
26
|
+
temp.style.fontSize = '16px'; // Force a known base
|
|
27
|
+
temp.style.lineHeight = `var(${prop})`;
|
|
28
|
+
document.body.appendChild(temp);
|
|
29
|
+
const computedPx = getComputedStyle(temp).lineHeight;
|
|
30
|
+
document.body.removeChild(temp);
|
|
31
|
+
|
|
32
|
+
let displayValue = computedPx;
|
|
33
|
+
if (computedPx.endsWith('px')) {
|
|
34
|
+
const pxVal = parseFloat(computedPx);
|
|
35
|
+
const ratio = pxVal / 16;
|
|
36
|
+
displayValue = Math.round(ratio * 100) / 100;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if(displayValue) {
|
|
40
|
+
el.innerHTML += ` <span style="opacity: 0.5; font-family: monospace; font-size: 0.8em">(${displayValue})</span>`;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>Adds consistent vertical padding to a section of content. Uses <code>--region-space</code> if set, otherwise falls back to <code>--space-m</code>. Also sets <code>position: relative</code> for absolutely-positioned children.</p>
|
|
3
|
+
<p>Override the space for a specific region using a spacing utility class:</p>
|
|
4
|
+
<pre><code><section class="region">...</section>
|
|
5
|
+
|
|
6
|
+
<!-- With a custom space -->
|
|
7
|
+
<section class="region region-space:space-xl">...</section></code></pre>
|
|
8
|
+
</div>
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<div style="outline: 1px dashed var(--color-mid);">
|
|
2
|
+
<section class="region" style="background: color-mix(in srgb, var(--color-primary) 10%, transparent);">
|
|
3
|
+
<p>This section uses <code>.region</code> — vertical padding is applied via <code>--region-space</code>.</p>
|
|
4
|
+
</section>
|
|
5
|
+
</div>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div class="flow">
|
|
2
|
+
<p>Hides content visually while keeping it accessible to screen readers and other assistive technologies. Use this instead of <code>display: none</code> or <code>visibility: hidden</code> when the content should still be announced — for example, a label for an icon-only button.</p>
|
|
3
|
+
<pre><code><button>
|
|
4
|
+
<svg aria-hidden="true">...</svg>
|
|
5
|
+
<span class="visually-hidden">Open menu</span>
|
|
6
|
+
</button></code></pre>
|
|
7
|
+
</div>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
<div style="display: flex; align-items: center; gap: 1rem; padding: 1rem;">
|
|
2
|
+
<button>
|
|
3
|
+
<span class="visually-hidden">Open menu</span>
|
|
4
|
+
☰
|
|
5
|
+
</button>
|
|
6
|
+
<p style="margin: 0; font-size: 0.9rem; color: var(--color-dark-glare);">This button has a visually hidden label. Inspect or use a screen reader to see it.</p>
|
|
7
|
+
</div>
|