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.
- package/.vscode/settings.json +2 -0
- package/CHANGELOG.md +12 -0
- package/dist/kempo.min.css +1 -1
- package/docs/borders-spacing.html +446 -0
- package/docs/buttons.html +262 -0
- package/docs/colors.html +199 -0
- package/docs/components/ThemePropertyInput.js +2 -2
- package/docs/elevation.html +509 -0
- package/docs/examples/responsive-grid.html +1 -1
- package/docs/index.html +237 -1477
- package/docs/inputs.html +252 -0
- package/docs/kempo.css +13 -0
- package/docs/kempo.min.css +1 -1
- package/docs/layout.html +311 -0
- package/docs/tables.html +262 -0
- package/docs/theme-editor.html +936 -802
- package/docs/typography.html +275 -0
- package/docs/utilities.html +172 -0
- package/docs-src/.config.js +26 -0
- package/docs-src/borders-spacing.page.html +297 -0
- package/docs-src/buttons.page.html +113 -0
- package/docs-src/colors.page.html +50 -0
- package/docs-src/default.template.html +22 -0
- package/docs-src/elevation.page.html +361 -0
- package/docs-src/examples/responsive-grid.html +33 -0
- package/docs-src/head.fragment.html +16 -0
- package/docs-src/index.page.html +95 -0
- package/docs-src/inputs.page.html +103 -0
- package/docs-src/layout.page.html +163 -0
- package/docs-src/nav.fragment.html +116 -0
- package/docs-src/tables.page.html +114 -0
- package/docs-src/theme-editor.page.html +850 -0
- package/docs-src/theme-editor.template.html +11 -0
- package/docs-src/typography.page.html +126 -0
- package/docs-src/utilities.page.html +26 -0
- package/llms.txt +2 -0
- package/package.json +3 -2
- package/scripts/build.js +7 -1
- package/src/kempo.css +13 -0
- package/tests/typography.browser-test.js +26 -0
- package/docs/init.js +0 -4
- package/docs/nav.js +0 -33
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<page pageName="Typography" title="Typography - Kempo CSS">
|
|
2
|
+
<content>
|
|
3
|
+
<h2 id="paragraphs">Paragraphs</h2>
|
|
4
|
+
<div class="row -mx">
|
|
5
|
+
<div class="col m-span-12 px">
|
|
6
|
+
<k-card label="HTML">
|
|
7
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum non unde laborum officia doloremque, repudiandae laudantium nihil! Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit, assumenda ipsa esse!<span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
8
|
+
</k-card>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="col m-span-12 px">
|
|
11
|
+
<k-card label="Output">
|
|
12
|
+
<p>
|
|
13
|
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum
|
|
14
|
+
non unde laborum officia doloremque, repudiandae laudantium nihil!
|
|
15
|
+
Sed at omnis eos a obcaecati. Mollitia minus voluptatem velit,
|
|
16
|
+
assumenda ipsa esse!
|
|
17
|
+
</p>
|
|
18
|
+
</k-card>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<h2 id="headings">Headings</h2>
|
|
23
|
+
<div class="row -mx">
|
|
24
|
+
<div class="col m-span-12 px">
|
|
25
|
+
<k-card label="HTML">
|
|
26
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Heading 1<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h2</span>></span>Heading 2<span class="hljs-tag"></<span class="hljs-name">h2</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h3</span>></span>Heading 3<span class="hljs-tag"></<span class="hljs-name">h3</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h4</span>></span>Heading 4<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h5</span>></span>Heading 5<span class="hljs-tag"></<span class="hljs-name">h5</span>></span><br><span class="hljs-tag"><<span class="hljs-name">h6</span>></span>Heading 6<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></code></pre>
|
|
27
|
+
</k-card>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="col m-span-12 px">
|
|
30
|
+
<k-card label="Output">
|
|
31
|
+
<h1>Heading 1</h1>
|
|
32
|
+
<h2>Heading 2</h2>
|
|
33
|
+
<h3>Heading 3</h3>
|
|
34
|
+
<h4>Heading 4</h4>
|
|
35
|
+
<h5>Heading 5</h5>
|
|
36
|
+
<h6>Heading 6</h6>
|
|
37
|
+
</k-card>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<h2 id="textmarkup">Text Markup</h2>
|
|
42
|
+
<div class="row -mx">
|
|
43
|
+
<div class="col m-span-12 px">
|
|
44
|
+
<k-card label="HTML">
|
|
45
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">p</span>></span><span class="hljs-tag"><<span class="hljs-name">strong</span>></span>strong<span class="hljs-tag"></<span class="hljs-name">strong</span>></span> <span class="hljs-tag"><<span class="hljs-name">i</span>></span>italics<span class="hljs-tag"></<span class="hljs-name">i</span>></span> <span class="hljs-tag"><<span class="hljs-name">del</span>></span>strike<span class="hljs-tag"></<span class="hljs-name">del</span>></span> <span class="hljs-tag"><<span class="hljs-name">u</span>></span>underline<span class="hljs-tag"></<span class="hljs-name">u</span>></span> <span class="hljs-tag"><<span class="hljs-name">sub</span>></span>sub<span class="hljs-tag"></<span class="hljs-name">sub</span>></span> Normal <span class="hljs-tag"><<span class="hljs-name">sup</span>></span>super<span class="hljs-tag"></<span class="hljs-name">sup</span>></span> <span class="hljs-tag"><<span class="hljs-name">b</span>></span>bold<span class="hljs-tag"></<span class="hljs-name">b</span>></span> <span class="hljs-tag"><<span class="hljs-name">mark</span>></span>highlighted<span class="hljs-tag"></<span class="hljs-name">mark</span>></span><span class="hljs-tag"></<span class="hljs-name">p</span>></span></code></pre>
|
|
46
|
+
</k-card>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="col m-span-12 px">
|
|
49
|
+
<k-card label="Output">
|
|
50
|
+
<p>
|
|
51
|
+
<strong>strong</strong> <i>italics</i> <del>strike</del>
|
|
52
|
+
<u>underline</u> <sub>sub</sub> Normal <sup>super</sup>
|
|
53
|
+
<b>bold</b> <mark>highlighted</mark>
|
|
54
|
+
</p>
|
|
55
|
+
</k-card>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<h2 id="textdecoration">Text Decoration</h2>
|
|
60
|
+
<p>Utility classes to control text decoration without relying on semantic HTML elements like <code><u></code> or <code><del></code>. Useful with rich text editors like Lexical that don't support those elements.</p>
|
|
61
|
+
<div class="row -mx">
|
|
62
|
+
<div class="col m-span-12 px">
|
|
63
|
+
<k-card label="HTML">
|
|
64
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-n"</span>></span>no decoration<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-u"</span>></span>underline<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"td-lt"</span>></span>line-through<span class="hljs-tag"></<span class="hljs-name">span</span>></span></code></pre>
|
|
65
|
+
</k-card>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="col m-span-12 px">
|
|
68
|
+
<k-card label="Output">
|
|
69
|
+
<p>
|
|
70
|
+
<span class="td-n">no decoration</span><br>
|
|
71
|
+
<span class="td-u">underline</span><br>
|
|
72
|
+
<span class="td-lt">line-through</span>
|
|
73
|
+
</p>
|
|
74
|
+
</k-card>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<h2 id="lists">Lists</h2>
|
|
79
|
+
<div class="row -mx">
|
|
80
|
+
<div class="col m-span-12 px">
|
|
81
|
+
<k-card label="HTML">
|
|
82
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ol</span>></span></code></pre>
|
|
83
|
+
</k-card>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="col m-span-12 px">
|
|
86
|
+
<k-card label="Output">
|
|
87
|
+
<ol>
|
|
88
|
+
<li>Item 1</li>
|
|
89
|
+
<li>Item 2</li>
|
|
90
|
+
<li>
|
|
91
|
+
Item 3
|
|
92
|
+
<ol>
|
|
93
|
+
<li>Sub Item 1</li>
|
|
94
|
+
<li>Sub Item 2</li>
|
|
95
|
+
<li>Sub Item 3</li>
|
|
96
|
+
</ol>
|
|
97
|
+
</li>
|
|
98
|
+
</ol>
|
|
99
|
+
</k-card>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="row -mx">
|
|
103
|
+
<div class="col m-span-12 px">
|
|
104
|
+
<k-card label="HTML">
|
|
105
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span><br> Item 3<br> <span class="hljs-tag"><<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>Sub Item 3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span></code></pre>
|
|
106
|
+
</k-card>
|
|
107
|
+
</div>
|
|
108
|
+
<div class="col m-span-12 px">
|
|
109
|
+
<k-card label="Output">
|
|
110
|
+
<ul>
|
|
111
|
+
<li>Item 1</li>
|
|
112
|
+
<li>Item 2</li>
|
|
113
|
+
<li>
|
|
114
|
+
Item 3
|
|
115
|
+
<ul>
|
|
116
|
+
<li>Sub Item 1</li>
|
|
117
|
+
<li>Sub Item 2</li>
|
|
118
|
+
<li>Sub Item 3</li>
|
|
119
|
+
</ul>
|
|
120
|
+
</li>
|
|
121
|
+
</ul>
|
|
122
|
+
</k-card>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</content>
|
|
126
|
+
</page>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<page
|
|
2
|
+
pageName="Utilities"
|
|
3
|
+
title="Utilities - Kempo CSS"
|
|
4
|
+
>
|
|
5
|
+
<content>
|
|
6
|
+
<div style="height:50vh"></div>
|
|
7
|
+
<p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
|
|
8
|
+
like dialogs and side menus that temporarily take over the page.</p>
|
|
9
|
+
<div class="row -mx">
|
|
10
|
+
<div class="col m-span-12 px">
|
|
11
|
+
<k-card label="HTML">
|
|
12
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">onclick</span>=<span class="hljs-string">"document.body.classList.toggle('no-scroll')"</span>></span>Toggle Body Scrolling<span class="hljs-tag"></<span class="hljs-name">button</span>></span></code></pre>
|
|
13
|
+
</k-card>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="col m-span-12 px">
|
|
16
|
+
<k-card label="Output">
|
|
17
|
+
<button
|
|
18
|
+
class="mb"
|
|
19
|
+
onclick="document.body.classList.toggle('no-scroll')"
|
|
20
|
+
>Toggle Body Scrolling</button>
|
|
21
|
+
</k-card>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
<div style="height:50vh"></div>
|
|
25
|
+
</content>
|
|
26
|
+
</page>
|
package/llms.txt
CHANGED
|
@@ -110,6 +110,8 @@ Examples: `.m-d-n` hides on mobile; `.d-d-f` makes flex on desktop only.
|
|
|
110
110
|
- `.ff-mono` — monospace font
|
|
111
111
|
- `.ta-left`, `.ta-center`, `.ta-right` — text alignment
|
|
112
112
|
- `.td-n` — `text-decoration: none`
|
|
113
|
+
- `.td-u` — `text-decoration: underlined`
|
|
114
|
+
- `.td-lt` — `text-decoration: line-through`
|
|
113
115
|
- `.no-link` / `.no-link:hover` — removes link color and underline
|
|
114
116
|
- `.link` — applies link styling to non-`<a>` elements
|
|
115
117
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kempo-css",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.5",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "scripts/build.js",
|
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
"build": "node scripts/build.js",
|
|
9
9
|
"build:watch": "node scripts/build.js --watch",
|
|
10
10
|
"test": "npx kempo-test",
|
|
11
|
+
"dev": "npx kempo-server --root docs-src --port 4048",
|
|
11
12
|
"docs": "npx kempo-server --root docs --port 4048"
|
|
12
13
|
},
|
|
13
14
|
"keywords": [],
|
|
@@ -15,7 +16,7 @@
|
|
|
15
16
|
"license": "MIT",
|
|
16
17
|
"devDependencies": {
|
|
17
18
|
"clean-css-cli": "^5.6.3",
|
|
18
|
-
"kempo-server": "^
|
|
19
|
+
"kempo-server": "^3.0.3",
|
|
19
20
|
"kempo-testing-framework": "^1.4.0",
|
|
20
21
|
"terser": "^5.44.1"
|
|
21
22
|
},
|
package/scripts/build.js
CHANGED
|
@@ -4,6 +4,7 @@ import { execSync } from 'child_process';
|
|
|
4
4
|
import fs from 'fs';
|
|
5
5
|
import path from 'path';
|
|
6
6
|
import { minify } from 'terser';
|
|
7
|
+
import { renderDir } from 'kempo-server/templating';
|
|
7
8
|
|
|
8
9
|
// Check for watch flag
|
|
9
10
|
const isWatchMode = process.argv.includes('--watch');
|
|
@@ -107,7 +108,7 @@ async function processComponents(){
|
|
|
107
108
|
}
|
|
108
109
|
}
|
|
109
110
|
|
|
110
|
-
processComponents().then(() => {
|
|
111
|
+
processComponents().then(async () => {
|
|
111
112
|
|
|
112
113
|
// Copy CSS to docs
|
|
113
114
|
const cssFiles = ['src/kempo.css', 'src/kempo-hljs.css'];
|
|
@@ -133,6 +134,11 @@ minifiedFiles.forEach(file => {
|
|
|
133
134
|
|
|
134
135
|
console.log('\nBuild complete!');
|
|
135
136
|
console.log(`Minified files are in the ${outputDir}/ directory`);
|
|
137
|
+
|
|
138
|
+
// Render docs from docs-src
|
|
139
|
+
console.log('\nRendering docs...');
|
|
140
|
+
const docsCount = await renderDir('./docs-src', './docs');
|
|
141
|
+
console.log(`Rendered ${docsCount} doc pages`);
|
|
136
142
|
}).catch(error => {
|
|
137
143
|
console.error('Build error:', error);
|
|
138
144
|
process.exit(1);
|
package/src/kempo.css
CHANGED
|
@@ -373,6 +373,13 @@ summary:focus {
|
|
|
373
373
|
.fixed.scrolled {
|
|
374
374
|
box-shadow: var(--elevation_2_shadow);
|
|
375
375
|
}
|
|
376
|
+
k-nav[fixed] {
|
|
377
|
+
box-shadow: none;
|
|
378
|
+
transition: box-shadow var(--animation_ms);
|
|
379
|
+
}
|
|
380
|
+
k-nav[fixed].scrolled {
|
|
381
|
+
box-shadow: var(--elevation_2_shadow);
|
|
382
|
+
}
|
|
376
383
|
|
|
377
384
|
/*
|
|
378
385
|
Typography
|
|
@@ -491,6 +498,12 @@ li ul {
|
|
|
491
498
|
.td-n {
|
|
492
499
|
text-decoration: none;
|
|
493
500
|
}
|
|
501
|
+
.td-u {
|
|
502
|
+
text-decoration: underline;
|
|
503
|
+
}
|
|
504
|
+
.td-lt {
|
|
505
|
+
text-decoration: line-through;
|
|
506
|
+
}
|
|
494
507
|
|
|
495
508
|
/*
|
|
496
509
|
Spacing, Borders and Radius
|
|
@@ -251,5 +251,31 @@ export default {
|
|
|
251
251
|
} else {
|
|
252
252
|
fail(`Expected none, got ${textDecoration}`);
|
|
253
253
|
}
|
|
254
|
+
},
|
|
255
|
+
|
|
256
|
+
'should apply .td-u class': ({pass, fail}) => {
|
|
257
|
+
const el = document.createElement('span');
|
|
258
|
+
el.className = 'td-u';
|
|
259
|
+
document.body.appendChild(el);
|
|
260
|
+
const textDecoration = getStyle(el, 'textDecorationLine');
|
|
261
|
+
el.remove();
|
|
262
|
+
if(textDecoration === 'underline'){
|
|
263
|
+
pass('.td-u sets text-decoration: underline');
|
|
264
|
+
} else {
|
|
265
|
+
fail(`Expected underline, got ${textDecoration}`);
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
|
|
269
|
+
'should apply .td-lt class': ({pass, fail}) => {
|
|
270
|
+
const el = document.createElement('span');
|
|
271
|
+
el.className = 'td-lt';
|
|
272
|
+
document.body.appendChild(el);
|
|
273
|
+
const textDecoration = getStyle(el, 'textDecorationLine');
|
|
274
|
+
el.remove();
|
|
275
|
+
if(textDecoration === 'line-through'){
|
|
276
|
+
pass('.td-lt sets text-decoration: line-through');
|
|
277
|
+
} else {
|
|
278
|
+
fail(`Expected line-through, got ${textDecoration}`);
|
|
279
|
+
}
|
|
254
280
|
}
|
|
255
281
|
};
|
package/docs/init.js
DELETED
package/docs/nav.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
document.getElementById('toggleNavSideMenu').addEventListener('click', async () => {
|
|
2
|
-
await window.customElements.whenDefined('k-side-menu');
|
|
3
|
-
document.getElementById('navSideMenu').toggle();
|
|
4
|
-
});
|
|
5
|
-
document.addEventListener('click', function(e) {
|
|
6
|
-
if (e.target.matches('a[href^="#"]')) {
|
|
7
|
-
e.preventDefault();
|
|
8
|
-
const targetId = e.target.getAttribute('href').replace('#', '');
|
|
9
|
-
const target = document.getElementById(targetId);
|
|
10
|
-
if (target) {
|
|
11
|
-
target.scrollIntoView({ behavior: 'smooth' });
|
|
12
|
-
const url = window.location.pathname + window.location.search + '#' + targetId;
|
|
13
|
-
history.replaceState(null, '', url);
|
|
14
|
-
document.getElementById('navSideMenu').close();
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
});
|
|
18
|
-
|
|
19
|
-
/*
|
|
20
|
-
Fixed Nav Shadow on Scroll
|
|
21
|
-
*/
|
|
22
|
-
const fixedNav = document.querySelector('nav.fixed');
|
|
23
|
-
if(fixedNav){
|
|
24
|
-
const updateNavShadow = () => {
|
|
25
|
-
if(window.scrollY > 0){
|
|
26
|
-
fixedNav.classList.add('scrolled');
|
|
27
|
-
} else {
|
|
28
|
-
fixedNav.classList.remove('scrolled');
|
|
29
|
-
}
|
|
30
|
-
};
|
|
31
|
-
window.addEventListener('scroll', updateNavShadow, { passive: true });
|
|
32
|
-
updateNavShadow();
|
|
33
|
-
}
|