kempo-css 2.1.3 → 2.1.5

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.
Files changed (42) hide show
  1. package/.vscode/settings.json +2 -0
  2. package/CHANGELOG.md +12 -0
  3. package/dist/kempo.min.css +1 -1
  4. package/docs/borders-spacing.html +446 -0
  5. package/docs/buttons.html +262 -0
  6. package/docs/colors.html +199 -0
  7. package/docs/components/ThemePropertyInput.js +2 -2
  8. package/docs/elevation.html +509 -0
  9. package/docs/examples/responsive-grid.html +1 -1
  10. package/docs/index.html +237 -1477
  11. package/docs/inputs.html +252 -0
  12. package/docs/kempo.css +13 -0
  13. package/docs/kempo.min.css +1 -1
  14. package/docs/layout.html +311 -0
  15. package/docs/tables.html +262 -0
  16. package/docs/theme-editor.html +936 -802
  17. package/docs/typography.html +275 -0
  18. package/docs/utilities.html +172 -0
  19. package/docs-src/.config.js +26 -0
  20. package/docs-src/borders-spacing.page.html +297 -0
  21. package/docs-src/buttons.page.html +113 -0
  22. package/docs-src/colors.page.html +50 -0
  23. package/docs-src/default.template.html +22 -0
  24. package/docs-src/elevation.page.html +361 -0
  25. package/docs-src/examples/responsive-grid.html +33 -0
  26. package/docs-src/head.fragment.html +16 -0
  27. package/docs-src/index.page.html +95 -0
  28. package/docs-src/inputs.page.html +103 -0
  29. package/docs-src/layout.page.html +163 -0
  30. package/docs-src/nav.fragment.html +116 -0
  31. package/docs-src/tables.page.html +114 -0
  32. package/docs-src/theme-editor.page.html +850 -0
  33. package/docs-src/theme-editor.template.html +11 -0
  34. package/docs-src/typography.page.html +126 -0
  35. package/docs-src/utilities.page.html +26 -0
  36. package/llms.txt +2 -0
  37. package/package.json +3 -2
  38. package/scripts/build.js +7 -1
  39. package/src/kempo.css +13 -0
  40. package/tests/typography.browser-test.js +26 -0
  41. package/docs/init.js +0 -4
  42. package/docs/nav.js +0 -33
package/docs/buttons.html ADDED
@@ -0,0 +1,262 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Buttons - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
51
+ <a href="./typography.html#lists" class="d-b">Lists</a>
52
+ </div>
53
+ <h5><a href="./layout.html">Layout</a></h5>
54
+ <div class="ml mb -mt">
55
+ <a href="./layout.html#display" class="d-b">Display</a>
56
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
57
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
58
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
59
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
60
+ </div>
61
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
62
+ <div class="ml mb -mt">
63
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
64
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
65
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
66
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
67
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
68
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
69
+ </div>
70
+ <h5><a href="./inputs.html">Inputs</a></h5>
71
+ <div class="ml mb -mt">
72
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
73
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
74
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
75
+ </div>
76
+ <h5><a href="./buttons.html">Buttons</a></h5>
77
+ <div class="ml mb -mt">
78
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
79
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
80
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
81
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
82
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
83
+ </div>
84
+ <h5><a href="./tables.html">Tables</a></h5>
85
+ <div class="ml mb -mt">
86
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
87
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
88
+ </div>
89
+ <h5><a href="./colors.html">Colors</a></h5>
90
+ <div class="ml mb -mt">
91
+ <a href="./colors.html#background" class="d-b">Background</a>
92
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
93
+ </div>
94
+ <h5><a href="./elevation.html">Elevation</a></h5>
95
+ <div class="ml mb -mt">
96
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
97
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
98
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
99
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
100
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
101
+ </div>
102
+ <h5><a href="./utilities.html">Utilities</a></h5>
103
+ <div class="ml mb -mt">
104
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
105
+ </div>
106
+ <hr />
107
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
108
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
109
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
110
+ <div style="height:33vh"></div>
111
+ </menu>
112
+ </k-aside>
113
+ <script type="module">
114
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
115
+ await window.customElements.whenDefined('k-aside');
116
+ document.getElementById('navSideMenu').toggle();
117
+ });
118
+ document.addEventListener('click', function(e) {
119
+ if (e.target.matches('a[href^="#"]')) {
120
+ e.preventDefault();
121
+ const targetId = e.target.getAttribute('href').replace('#', '');
122
+ const target = document.getElementById(targetId);
123
+ if (target) {
124
+ target.scrollIntoView({ behavior: 'smooth' });
125
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
126
+ document.getElementById('navSideMenu').hide();
127
+ }
128
+ }
129
+ });
130
+ const fixedNav = document.querySelector('k-nav[fixed]');
131
+ if (fixedNav) {
132
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
133
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
134
+ updateNavShadow();
135
+ }
136
+ </script>
137
+
138
+ <k-main>
139
+ <main>
140
+ <h1 class="ta-center">Buttons</h1>
141
+
142
+ <h2 id="button-types">Button Types</h2>
143
+ <div class="row -mx">
144
+ <div class="col m-span-12 px">
145
+ <k-card label="HTML">
146
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>button<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"input"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"submit"</span> <span class="hljs-attr">value</span>=<span class="hljs-string">"submit input"</span> /&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn"</span>&gt;</span>a.btn<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span></code></pre>
147
+ </k-card>
148
+ </div>
149
+ <div class="col m-span-12 px">
150
+ <k-card
151
+ label="Output"
152
+ class="pb"
153
+ >
154
+ <button>button</button>
155
+ <input
156
+ type="button"
157
+ value="input"
158
+ />
159
+ <input
160
+ type="submit"
161
+ value="submit input"
162
+ />
163
+ <a
164
+ href="#"
165
+ class="btn"
166
+ >a.btn</a>
167
+ </k-card>
168
+ </div>
169
+ </div>
170
+
171
+ <h2 id="button-colors">Button Colors</h2>
172
+ <div class="row -mx">
173
+ <div class="col m-span-12 px">
174
+ <k-card label="HTML">
175
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
176
+ </k-card>
177
+ </div>
178
+ <div class="col m-span-12 px">
179
+ <k-card
180
+ label="Output"
181
+ class="pb"
182
+ >
183
+ <button>Default</button>
184
+ <button class="primary">Primary</button>
185
+ <button class="secondary">Secondary</button>
186
+ <button class="success">Success</button>
187
+ <button class="warning">Warning</button>
188
+ <button class="danger">Danger</button>
189
+ </k-card>
190
+ </div>
191
+ </div>
192
+
193
+ <h2 id="button-sizes">Button Sizes</h2>
194
+ <div class="row -mx">
195
+ <div class="col m-span-12 px">
196
+ <k-card label="HTML">
197
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"small"</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"large"</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
198
+ </k-card>
199
+ </div>
200
+ <div class="col m-span-12 px">
201
+ <k-card
202
+ label="Output"
203
+ class="pb"
204
+ >
205
+ <button class="small">Small</button>
206
+ <button>Normal</button>
207
+ <button class="large">Large</button>
208
+ </k-card>
209
+ </div>
210
+ </div>
211
+
212
+ <h2 id="button-groups">Button Groups</h2>
213
+ <div class="row -mx">
214
+ <div class="col m-span-12 px">
215
+ <k-card label="HTML">
216
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn-grp"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>Default<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br /><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
217
+ </k-card>
218
+ </div>
219
+ <div class="col m-span-12 px">
220
+ <k-card
221
+ label="Output"
222
+ class="pb"
223
+ >
224
+ <div class="btn-grp">
225
+ <button>Default</button>
226
+ <button>Default</button>
227
+ <button>Default</button>
228
+ </div>
229
+ </k-card>
230
+ </div>
231
+ </div>
232
+
233
+ <h2 id="no-styles">No Styles</h2>
234
+ <div class="row -mx">
235
+ <div class="col m-span-12 px">
236
+ <k-card label="HTML">
237
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-style"</span>&gt;</span>no-style<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
238
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"no-btn"</span>&gt;</span>no-btn<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></code></pre>
239
+ </k-card>
240
+ </div>
241
+ <div class="col m-span-12 px">
242
+ <k-card
243
+ label="Output"
244
+ class="pb"
245
+ >
246
+ <button class="no-style">no-style</button>
247
+ <button class="no-btn">no-btn</button>
248
+ </k-card>
249
+ </div>
250
+ </div>
251
+
252
+ </main>
253
+ <div style="height:33vh"></div>
254
+ </k-main>
255
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
256
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
257
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
258
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
259
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
260
+
261
+ </body>
262
+ </html>
package/docs/colors.html ADDED
@@ -0,0 +1,199 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Colors - Kempo CSS</title>
8
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
9
+ <link rel="manifest" href="./manifest.json" />
10
+ <link rel="stylesheet" href="./kempo.min.css" />
11
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
12
+ <script>
13
+ window.kempo = {
14
+ pathToStylesheet: './kempo.min.css',
15
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
16
+ };
17
+ </script>
18
+
19
+
20
+ </head>
21
+ <body>
22
+
23
+ <k-nav fixed class="bg-primary">
24
+ <button id="toggleNavSideMenu" class="link">
25
+ <k-icon name="menu"></k-icon>
26
+ </button>
27
+ <a href="./" class="d-if ph" style="align-items: center">
28
+ <img src="./media/icon32.png" alt="Kempo CSS Icon" class="pr" />
29
+ Kempo CSS
30
+ </a>
31
+ <a href="./theme-editor.html">Theme Editor</a>
32
+ <div class="flex"></div>
33
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon></a>
34
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon></a>
35
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon></a>
36
+ <k-theme-switcher></k-theme-switcher>
37
+ </k-nav>
38
+ <div style="width: 100%; height: 4rem;"></div>
39
+ <k-aside id="navSideMenu" main="overlay" state="offscreen">
40
+ <menu>
41
+ <div class="ta-center bb mb r0">
42
+ <h1 class="tc-primary">Kempo CSS</h1>
43
+ <img src="./media/icon128.png" alt="Kempo CSS Icon" />
44
+ </div>
45
+ <h5><a href="./typography.html">Typography</a></h5>
46
+ <div class="ml mb -mt">
47
+ <a href="./typography.html#paragraphs" class="d-b">Paragraphs</a>
48
+ <a href="./typography.html#headings" class="d-b">Headings</a>
49
+ <a href="./typography.html#textmarkup" class="d-b">Text Markup</a>
50
+ <a href="./typography.html#textdecoration" class="d-b">Text Decoration</a>
51
+ <a href="./typography.html#lists" class="d-b">Lists</a>
52
+ </div>
53
+ <h5><a href="./layout.html">Layout</a></h5>
54
+ <div class="ml mb -mt">
55
+ <a href="./layout.html#display" class="d-b">Display</a>
56
+ <a href="./layout.html#flexbox" class="d-b">Flexbox</a>
57
+ <a href="./layout.html#grid" class="d-b">Grid System</a>
58
+ <a href="./layout.html#responsive-grid" class="d-b">Responsive Grid</a>
59
+ <a href="./layout.html#min-width-grid" class="d-b">Alternative Responsive Grid</a>
60
+ </div>
61
+ <h5><a href="./borders-spacing.html">Borders &amp; Spacing</a></h5>
62
+ <div class="ml mb -mt">
63
+ <a href="./borders-spacing.html#borders" class="d-b">Borders</a>
64
+ <a href="./borders-spacing.html#border-radius" class="d-b">Border Radius</a>
65
+ <a href="./borders-spacing.html#padding" class="d-b">Padding</a>
66
+ <a href="./borders-spacing.html#margins" class="d-b">Margins</a>
67
+ <a href="./borders-spacing.html#negative-margins" class="d-b">Negative Margins</a>
68
+ <a href="./borders-spacing.html#cancelled-margins" class="d-b">Cancelled Margins</a>
69
+ </div>
70
+ <h5><a href="./inputs.html">Inputs</a></h5>
71
+ <div class="ml mb -mt">
72
+ <a href="./inputs.html#basic-inputs" class="d-b">Basic Inputs</a>
73
+ <a href="./inputs.html#labels" class="d-b">Labels</a>
74
+ <a href="./inputs.html#checkbox-radio" class="d-b">Checkbox / Radio</a>
75
+ </div>
76
+ <h5><a href="./buttons.html">Buttons</a></h5>
77
+ <div class="ml mb -mt">
78
+ <a href="./buttons.html#button-types" class="d-b">Button Types</a>
79
+ <a href="./buttons.html#button-colors" class="d-b">Button Colors</a>
80
+ <a href="./buttons.html#button-sizes" class="d-b">Button Sizes</a>
81
+ <a href="./buttons.html#button-groups" class="d-b">Button Groups</a>
82
+ <a href="./buttons.html#no-styles" class="d-b">No Styles</a>
83
+ </div>
84
+ <h5><a href="./tables.html">Tables</a></h5>
85
+ <div class="ml mb -mt">
86
+ <a href="./tables.html#basic-table" class="d-b">Basic Table</a>
87
+ <a href="./tables.html#responsive-table" class="d-b">Responsive Table</a>
88
+ </div>
89
+ <h5><a href="./colors.html">Colors</a></h5>
90
+ <div class="ml mb -mt">
91
+ <a href="./colors.html#background" class="d-b">Background</a>
92
+ <a href="./colors.html#text-colors" class="d-b">Text Colors</a>
93
+ </div>
94
+ <h5><a href="./elevation.html">Elevation</a></h5>
95
+ <div class="ml mb -mt">
96
+ <a href="./elevation.html#elevation-z-index" class="d-b">Z-Index</a>
97
+ <a href="./elevation.html#elevation-shadow" class="d-b">Shadow</a>
98
+ <a href="./elevation.html#elevation-bg" class="d-b">Elevation Background</a>
99
+ <a href="./elevation.html#elevation-combined" class="d-b">Combined Example</a>
100
+ <a href="./elevation.html#elevation-variables" class="d-b">CSS Variables</a>
101
+ </div>
102
+ <h5><a href="./utilities.html">Utilities</a></h5>
103
+ <div class="ml mb -mt">
104
+ <a href="./utilities.html#noScroll" class="d-b">Disable Body Scrolling</a>
105
+ </div>
106
+ <hr />
107
+ <a href="https://github.com/dustinpoissant/kempo-css?tab=License-1-ov-file#creative-commons-attribution-noncommercial-sharealike-20" target="_blank"><k-icon name="license"></k-icon> Read the License</a><br />
108
+ <a href="https://www.npmjs.com/package/kempo-css" target="_blank"><k-icon name="npm"></k-icon> View on NPM</a><br />
109
+ <a href="https://github.com/dustinpoissant/kempo-css" target="_blank"><k-icon name="github-mark"></k-icon> View on GitHub</a>
110
+ <div style="height:33vh"></div>
111
+ </menu>
112
+ </k-aside>
113
+ <script type="module">
114
+ document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
115
+ await window.customElements.whenDefined('k-aside');
116
+ document.getElementById('navSideMenu').toggle();
117
+ });
118
+ document.addEventListener('click', function(e) {
119
+ if (e.target.matches('a[href^="#"]')) {
120
+ e.preventDefault();
121
+ const targetId = e.target.getAttribute('href').replace('#', '');
122
+ const target = document.getElementById(targetId);
123
+ if (target) {
124
+ target.scrollIntoView({ behavior: 'smooth' });
125
+ history.replaceState(null, '', window.location.pathname + window.location.search + '#' + targetId);
126
+ document.getElementById('navSideMenu').hide();
127
+ }
128
+ }
129
+ });
130
+ const fixedNav = document.querySelector('k-nav[fixed]');
131
+ if (fixedNav) {
132
+ const updateNavShadow = () => fixedNav.classList.toggle('scrolled', window.scrollY > 0);
133
+ window.addEventListener('scroll', updateNavShadow, { passive: true });
134
+ updateNavShadow();
135
+ }
136
+ </script>
137
+
138
+ <k-main>
139
+ <main>
140
+ <h1 class="ta-center">Colors</h1>
141
+
142
+ <h2 id="background">Background</h2>
143
+ <div class="row -mx">
144
+ <div class="col m-span-12 px">
145
+ <k-card label="HTML">
146
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-alt"</span>&gt;</span>Alternate<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-inv"</span>&gt;</span>Inverse<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"bg-danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
147
+ </k-card>
148
+ </div>
149
+ <div class="col m-span-12 px">
150
+ <k-card
151
+ label="Output"
152
+ class="pb"
153
+ >
154
+ <div class="bg-alt p">Alternate</div>
155
+ <div class="bg-inv p">Inverse</div>
156
+ <div class="bg-primary p">Primary</div>
157
+ <div class="bg-secondary p">Secondary</div>
158
+ <div class="bg-success p">Success</div>
159
+ <div class="bg-warning p">Warning</div>
160
+ <div class="bg-danger p">Danger</div>
161
+ </k-card>
162
+ </div>
163
+ </div>
164
+
165
+ <h2 id="text-colors">Text Colors</h2>
166
+ <div class="row -mx">
167
+ <div class="col m-span-12 px">
168
+ <k-card label="HTML">
169
+ <pre><code class="hljs xml"><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>Normal<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted"</span>&gt;</span>Muted<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-inv"</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"background: grey"</span>&gt;</span>Inverse<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-success"</span>&gt;</span>Success<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-warning"</span>&gt;</span>Warning<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span></code></pre>
170
+ </k-card>
171
+ </div>
172
+ <div class="col m-span-12 px">
173
+ <k-card label="Output">
174
+ <p>Normal</p>
175
+ <p class="tc-muted">Muted</p>
176
+ <p
177
+ class="tc-inv"
178
+ style="background: grey"
179
+ >Inverse</p>
180
+ <p class="tc-primary">Primary</p>
181
+ <p class="tc-secondary">Secondary</p>
182
+ <p class="tc-success">Success</p>
183
+ <p class="tc-warning">Warning</p>
184
+ <p class="tc-danger">Danger</p>
185
+ </k-card>
186
+ </div>
187
+ </div>
188
+
189
+ </main>
190
+ <div style="height:33vh"></div>
191
+ </k-main>
192
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
193
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
194
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
195
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
196
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
197
+
198
+ </body>
199
+ </html>
package/docs/components/ThemePropertyInput.js CHANGED
@@ -1,5 +1,5 @@
1
- import ShadowComponent from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/components/ShadowComponent.js';
2
- import { html, css } from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.1.6/dist/lit-all.min.js';
1
+ import ShadowComponent from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ShadowComponent.js';
2
+ import { html, css } from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/lit-all.min.js';
3
3
 
4
4
  export default class ThemePropertyInput extends ShadowComponent {
5
5
  static properties = {