-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
+page.svelte
183 lines (178 loc) · 7.57 KB
/
+page.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<script lang="ts">
import DocsShell from '$lib/layouts/DocsShell/DocsShell.svelte';
import { DocsFeature, type DocsShellSettings } from '$lib/layouts/DocsShell/types';
import { Table, type TableSource } from '@skeletonlabs/skeleton';
// Docs Shell
const settings: DocsShellSettings = {
feature: DocsFeature.Element,
name: 'Design Tokens',
description: 'The Skeleton Tailwind plugin provides a set of utility classes that adjust to your theme settings.',
// stylesheetIncludes: ['all', 'tokens'],
source: 'packages/plugin/src/tailwind/tokens'
};
// Local
const headings = ['Class', 'Values', 'Description'];
const vColorsAll = '<a class="anchor" href="/docs/colors">Theme Colors</a>';
const vPairings = '<a class="anchor" href="/docs/tokens#color-pairing-chart">Color Pairing</a>';
const vCorners = 'tl | tr | bl | br';
const descPairings = 'Pairing values can be 50-900 or 900-50 format.';
// Tables
const tableBackgrounds: TableSource = {
head: headings,
body: [
['<code class="code">.bg-[color]-backdrop-token</code>', vColorsAll, 'Background styles for modal backdrops.'],
['<code class="code">.bg-[color]-hover-token</code>', vColorsAll, 'Background styles for hoverable elements.'],
['<code class="code">.bg-[color]-active-token</code>', vColorsAll, 'Background styles for active selected elements.'],
['<code class="code">.bg-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]
]
};
const tableBorderRadius: TableSource = {
head: headings,
body: [
['<code class="code">.rounded-token</code>', '', 'Border radius for small elements: buttons, badges, chips, etc.'],
['<code class="code">.rounded-[corner]-token</code>', vCorners, 'Corner border radius styles for small elements.'],
['<code class="code">.rounded-container-token</code>', '', 'Border radius for large elements, such as cards and textareas'],
['<code class="code">.rounded-[corner]-container-token</code>', vCorners, 'Corner border radius styles for large elements.']
]
};
const tableBorder: TableSource = {
head: headings,
body: [
['<code class="code">.border-token</code>', '', "Implements your theme's configured border size."],
['<code class="code">.border-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]
]
};
const tableFills: TableSource = {
head: headings,
body: [
['<code class="code">.fill-token</code>', '', 'The default responsive light/dark mode fill color.'],
['<code class="code">.fill-on-[color]-token</code>', vColorsAll, 'Provides an accessible foreground color.']
]
};
const tableRings: TableSource = {
head: headings,
body: [
['<code class="code">.ring-outline-token</code>', '', 'Creates a subtle transparent outline like Card elements.'],
['<code class="code">.ring-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]
]
};
const tableText: TableSource = {
head: headings,
body: [
['<code class="code">.font-heading-token</code>', '', "Implements your theme's configured heading font family."],
['<code class="code">.font-token</code>', '', "Implements your theme's configured base font family."],
['<code class="code">.text-token</code>', '', "Implements your theme's configured base text color."],
['<code class="code">.text-on-[color]-token</code>', vColorsAll, 'Provides an accessible foreground color.'],
['<code class="code">.text-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]
]
};
const tableTDecoration: TableSource = {
head: headings,
body: [['<code class="code">.decoration-[color]-[pairings]-token</code>', `${vColorsAll}<br>${vPairings}`, descPairings]]
};
const tableMisc: TableSource = {
head: headings,
body: [
[
'<code class="code">accent-[color]-token</code>',
vColorsAll,
'Provides an input <a class="anchor" href="https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color" target="_blank">accent-color</a>.'
]
]
};
</script>
<DocsShell {settings} tabs={false}>
<!-- Slot: Usage -->
<svelte:fragment slot="usage">
<hr />
<section class="space-y-4">
<p class="!text-xl">
Skeleton utilizes a simple but powerful <strong>design token</strong> system to implement theme settings in elements and components.
These represent the defaults for most elements and components, which means they auto-adapt based on your theme with minimal configuration
out of the box. Best of all you can use these within your custom components as well!
</p>
</section>
<section class="space-y-4">
<h2 class="h2">Learn More</h2>
<p>We recommend this conference talk by Brad Frost if you would like to learn more about the design token concept.</p>
<iframe
class="w-full aspect-video mx-auto rounded-container-token shadow"
src="https://www.youtube.com/embed/JbxKTBvSLeY"
title="Creating Themeable Design Systems with BRAD FROST"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
</section>
<section class="space-y-4">
<h2 class="h2">Theme Flow</h2>
<p>
Below is a visualization of how Skeleton uses your theme to control your UI. We start with your theme's CSS variables, then
construct design token classes based on these variables, next components utilize these design token classes, then finally you
construct your pages with sets of elements and components.
</p>
<img
class="rounded-container-token shadow-lg"
src="https://user-images.githubusercontent.com/1509726/222240675-f872f5ee-0a30-444d-90af-5d428be3731c.jpg"
alt="flow"
/>
</section>
<section class="space-y-4">
<h2 class="h2">Color Pairing Chart</h2>
<p>
Below is a visualization of color pairings in Skeleton. This is how we balance light and dark mode for your themes in practice. For
example, the <em>surface</em> color swatch 50 is the lightest available color, so we utilize that for your light theme background
color. While swatch 900 is the darkest, so vice versa. These two colors form a pair. We then generate design token classes for
<code class="code">.bg-surface-50-900-token</code>
and <code class="code">bg-surface-900-50-token</code> that automatically switch between these in light/dark mode respectively.
</p>
<img
class="rounded-container-token shadow-lg"
src="https://user-images.githubusercontent.com/1509726/222245000-6d07cddb-c946-402e-8fd3-d969c1f02210.jpg"
alt="pairings"
/>
</section>
<hr />
<!-- Backgrounds -->
<section class="space-y-4">
<h2 class="h2">Backgrounds</h2>
<Table source={tableBackgrounds} />
</section>
<!-- Border Radius -->
<section class="space-y-4">
<h2 class="h2">Border Radius</h2>
<Table source={tableBorderRadius} />
</section>
<!-- Borders -->
<section class="space-y-4">
<h2 class="h2">Borders</h2>
<Table source={tableBorder} />
</section>
<!-- Fills -->
<section class="space-y-4">
<h2 class="h2">SVG Fill Color</h2>
<Table source={tableFills} />
</section>
<!-- Rings -->
<section class="space-y-4">
<h2 class="h2">Rings</h2>
<p>Utilities for creating outline rings with box-shadows.</p>
<Table source={tableRings} />
</section>
<!-- Text -->
<section class="space-y-4">
<h2 class="h2">Text</h2>
<Table source={tableText} />
</section>
<!--Text Decoration-->
<section class="space-y-4">
<h2 class="h2">Text Decoration</h2>
<Table source={tableTDecoration} />
</section>
<!-- Accent -->
<section class="space-y-4">
<h2 class="h2">Accent</h2>
<Table source={tableMisc} />
</section>
</svelte:fragment>
</DocsShell>