kempo-css 2.1.2 → 2.1.4

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 (40) hide show
  1. package/.vscode/settings.json +2 -0
  2. package/CHANGELOG.md +7 -0
  3. package/dist/kempo.min.css +1 -1
  4. package/docs/borders-spacing.html +445 -0
  5. package/docs/buttons.html +261 -0
  6. package/docs/colors.html +198 -0
  7. package/docs/components/ThemePropertyInput.js +2 -2
  8. package/docs/elevation.html +508 -0
  9. package/docs/examples/responsive-grid.html +1 -1
  10. package/docs/index.html +236 -1477
  11. package/docs/inputs.html +251 -0
  12. package/docs/kempo.css +48 -32
  13. package/docs/kempo.min.css +1 -1
  14. package/docs/layout.html +310 -0
  15. package/docs/tables.html +261 -0
  16. package/docs/theme-editor.html +935 -802
  17. package/docs/typography.html +255 -0
  18. package/docs/utilities.html +171 -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 +115 -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 +107 -0
  35. package/docs-src/utilities.page.html +26 -0
  36. package/package.json +3 -2
  37. package/scripts/build.js +7 -1
  38. package/src/kempo.css +48 -32
  39. package/docs/init.js +0 -4
  40. package/docs/nav.js +0 -33
package/docs-src/elevation.page.html ADDED
@@ -0,0 +1,361 @@
1
+ <page pageName="Elevation" title="Elevation - Kempo CSS">
2
+ <content location="styles">
3
+ <style>
4
+ .elevation-card {
5
+ display: inline-flex;
6
+ width: 9rem;
7
+ align-items: center;
8
+ justify-content: center;
9
+ aspect-ratio: 1 / 1;
10
+ margin: var(--spacer);
11
+ padding: var(--spacer);
12
+ border-radius: var(--radius);
13
+ vertical-align: top;
14
+ text-wrap: balance;
15
+ text-align: center;
16
+ }
17
+ </style>
18
+ </content>
19
+ <content>
20
+ <p>The elevation system provides three independent utilities that work together to create visual depth and control
21
+ stacking order. Level 2 is the default page level (z-index 20). Levels 0–1 are below page level, and levels 3–10
22
+ are
23
+ above. Each level increments z-index by 10, leaving room for fine-tuning between levels.</p>
24
+ <h2 id="elevation-z-index">Z-Index (<code>elevation-*</code>)</h2>
25
+ <p>Sets <code>z-index</code> only. Use on positioned elements (navbars, dialogs, drawers) to control stacking order.
26
+ </p>
27
+ <div class="row -mx">
28
+ <div class="col m-span-12 px">
29
+ <k-card label="HTML">
30
+ <pre
31
+ style="overflow:auto;max-height:20rem"><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">"elevation-0 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 0<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 1<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 10<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 2<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 20<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 3<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 30<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 4<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 40<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 5<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 50<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>(6–10 same)<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span></code></pre>
32
+ </k-card>
33
+ </div>
34
+ <div class="col m-span-12 px">
35
+ <k-card label="Output">
36
+ <div class="elevation-0 shadow elevation-card">
37
+ <div>
38
+ <strong>Level 0</strong><br>
39
+ <span class="tc-muted small">z-index: 0</span>
40
+ </div>
41
+ </div>
42
+ <div class="elevation-1 shadow elevation-card">
43
+ <div>
44
+ <strong>Level 1</strong><br>
45
+ <span class="tc-muted small">z-index: 10</span>
46
+ </div>
47
+ </div>
48
+ <div class="elevation-2 shadow elevation-card">
49
+ <div>
50
+ <strong>Level 2</strong><br>
51
+ <span class="tc-muted small">z-index: 20</span>
52
+
53
+ </div>
54
+ </div>
55
+ <div class="elevation-3 shadow elevation-card">
56
+ <div>
57
+ <strong>Level 3</strong><br>
58
+ <span class="tc-muted small">z-index: 30</span>
59
+ </div>
60
+ </div>
61
+ <div class="elevation-4 shadow elevation-card">
62
+ <div>
63
+ <strong>Level 4</strong><br>
64
+ <span class="tc-muted small">z-index: 40</span>
65
+ </div>
66
+ </div>
67
+ <div class="elevation-5 shadow elevation-card">
68
+ <div>
69
+ <strong>Level 5</strong><br>
70
+ <span class="tc-muted small">z-index: 50</span><br />
71
+ <span class="tc-muted small">(6–10 same)</span>
72
+ </div>
73
+ </div>
74
+ </k-card>
75
+ </div>
76
+ </div>
77
+ <div class="table-wrapper mb">
78
+ <table>
79
+ <thead>
80
+ <tr>
81
+ <th>Class</th>
82
+ <th>z-index</th>
83
+ </tr>
84
+ </thead>
85
+ <tbody>
86
+ <tr>
87
+ <td><code>elevation-0</code></td>
88
+ <td>0</td>
89
+ </tr>
90
+ <tr>
91
+ <td><code>elevation-1</code></td>
92
+ <td>10</td>
93
+ </tr>
94
+ <tr>
95
+ <td><code>elevation-2</code></td>
96
+ <td>20 (page default)</td>
97
+ </tr>
98
+ <tr>
99
+ <td><code>elevation-3</code></td>
100
+ <td>30</td>
101
+ </tr>
102
+ <tr>
103
+ <td><code>elevation-4</code></td>
104
+ <td>40</td>
105
+ </tr>
106
+ <tr>
107
+ <td><code>elevation-5</code></td>
108
+ <td>50</td>
109
+ </tr>
110
+ <tr>
111
+ <td><code>elevation-6</code></td>
112
+ <td>60</td>
113
+ </tr>
114
+ <tr>
115
+ <td><code>elevation-7</code></td>
116
+ <td>70</td>
117
+ </tr>
118
+ <tr>
119
+ <td><code>elevation-8</code></td>
120
+ <td>80</td>
121
+ </tr>
122
+ <tr>
123
+ <td><code>elevation-9</code></td>
124
+ <td>90</td>
125
+ </tr>
126
+ <tr>
127
+ <td><code>elevation-10</code></td>
128
+ <td>100</td>
129
+ </tr>
130
+ </tbody>
131
+ </table>
132
+ </div>
133
+ <h2 id="elevation-shadow">Shadow (<code>shadow</code>)</h2>
134
+ <p>Combine with an <code>elevation-*</code> class to apply a depth shadow. Levels 0–1 use inset shadows (sunk),
135
+ level 2 has no shadow (page level), levels 3–5 use progressively larger outset drop shadows, and levels 6–10
136
+ use the same shadow as level 5.</p>
137
+ <div class="row -mx">
138
+ <div class="col m-span-12 px">
139
+ <k-card label="HTML">
140
+ <pre
141
+ style="overflow:auto;max-height:20rem"><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">"elevation-0 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Deep Inset Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 1<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Shallow Inset Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 2<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>No Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 3<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Small Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 4<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Medium Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 5<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Large Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Max (6–10 same)<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span></code></pre>
142
+ </k-card>
143
+ </div>
144
+ <div class="col m-span-12 px">
145
+ <k-card label="Output">
146
+ <div class="elevation-0 shadow elevation-card">
147
+ <div>
148
+ <strong>Level 0</strong><br>
149
+ <span class="tc-muted small">Deep Inset Shadow</span>
150
+ </div>
151
+ </div>
152
+ <div class="elevation-1 shadow elevation-card">
153
+ <div>
154
+ <strong>Level 1</strong><br>
155
+ <span class="tc-muted small">Shallow Inset Shadow</span>
156
+ </div>
157
+ </div>
158
+ <div class="elevation-2 shadow elevation-card">
159
+ <div>
160
+ <strong>Level 2</strong><br>
161
+ <span class="tc-muted small">No Shadow</span>
162
+ </div>
163
+ </div>
164
+ <div class="elevation-3 shadow elevation-card">
165
+ <div>
166
+ <strong>Level 3</strong><br>
167
+ <span class="tc-muted small">Small Drop Shadow</span>
168
+ </div>
169
+ </div>
170
+ <div class="elevation-4 shadow elevation-card">
171
+ <div>
172
+ <strong>Level 4</strong><br>
173
+ <span class="tc-muted small">Medium Drop Shadow</span>
174
+ </div>
175
+ </div>
176
+ <div class="elevation-5 shadow elevation-card">
177
+ <div>
178
+ <strong>Level 5</strong><br>
179
+ <span class="tc-muted small">Large Drop Shadow</span><br>
180
+ <span class="tc-muted small">Max (6–10 same)</span>
181
+ </div>
182
+ </div>
183
+ </k-card>
184
+ </div>
185
+ </div>
186
+ <h2 id="elevation-bg">Elevation Background (<code>bg-elevation</code>)</h2>
187
+ <p>Combine with an <code>elevation-*</code> class to apply an elevation-appropriate background color. In dark mode,
188
+ higher elevations are progressively lighter (simulating ambient light from above). Levels 6–10 use the same
189
+ background as level 5.</p>
190
+ <div class="row -mx">
191
+ <div class="col m-span-12 px">
192
+ <k-card label="HTML">
193
+ <pre
194
+ style="overflow:auto;max-height:20rem"><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">"elevation-0 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Darkest<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 1<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Darker<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 2<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Page default<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 3<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>A Little Lighter<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 4<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Lighter<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 5<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Lightest<span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>(6–10 same)<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span></code></pre>
195
+ </k-card>
196
+ </div>
197
+ <div class="col m-span-12 px">
198
+ <k-card label="Output">
199
+ <div class="elevation-0 bg-elevation elevation-card">
200
+ <div>
201
+ <strong>Level 0</strong><br>
202
+ <span class="tc-muted small">Darkest</span>
203
+ </div>
204
+ </div>
205
+ <div class="elevation-1 bg-elevation elevation-card">
206
+ <div>
207
+ <strong>Level 1</strong><br>
208
+ <span class="tc-muted small">Darker</span>
209
+ </div>
210
+ </div>
211
+ <div class="elevation-2 bg-elevation elevation-card">
212
+ <div>
213
+ <strong>Level 2</strong><br>
214
+ <span class="tc-muted small">Page default</span>
215
+ </div>
216
+ </div>
217
+ <div class="elevation-3 bg-elevation elevation-card">
218
+ <div>
219
+ <strong>Level 3</strong><br>
220
+ <span class="tc-muted small">A Little Lighter</span>
221
+ </div>
222
+ </div>
223
+ <div class="elevation-4 bg-elevation elevation-card">
224
+ <div>
225
+ <strong>Level 4</strong><br>
226
+ <span class="tc-muted small">Lighter</span>
227
+ </div>
228
+ </div>
229
+ <div class="elevation-5 bg-elevation elevation-card">
230
+ <div>
231
+ <strong>Level 5</strong><br>
232
+ <span class="tc-muted small">Lightest<br />(6–10 same)</span>
233
+ </div>
234
+ </div>
235
+ </k-card>
236
+ </div>
237
+ </div>
238
+ <h2 id="elevation-combined">Combined Example</h2>
239
+ <p>Use all three classes together on a positioned element to get z-index stacking, a matching shadow depth, and the
240
+ correct background color for that level.</p>
241
+ <div class="row -mx">
242
+ <div class="col m-span-12 px">
243
+ <k-card label="HTML">
244
+ <pre style="overflow:auto;max-height:20rem"><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">"elevation-0 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 0<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 0<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Deep Inset Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Darkest<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-1 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 1<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 10<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Shallow Inset Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Darker<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-2 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 2<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 20<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>No Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Page default<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-3 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 3<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 30<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Small Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>A Little Lighter<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-4 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 4<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 40<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Medium Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Lighter<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <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>&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"elevation-5 shadow bg-elevation elevation-card"</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>Level 5<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span>&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>z-index: 50<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Large Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>Lightest<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><br /> <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"tc-muted small"</span>&gt;</span>(6–10 same)<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br /> <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>&gt;</span></code></pre>
245
+ </k-card>
246
+ </div>
247
+ <div class="col m-span-12 px">
248
+ <k-card label="Output">
249
+ <div class="elevation-0 shadow bg-elevation elevation-card">
250
+ <div><strong>Level 0</strong><br>
251
+ <span class="tc-muted small">z-index: 0</span><br />
252
+ <span class="tc-muted small">Deep Inset Shadow</span>
253
+ <span class="tc-muted small">Darkest</span>
254
+ </div>
255
+ </div>
256
+ <div class="elevation-1 shadow bg-elevation elevation-card">
257
+ <div><strong>Level 1</strong><br>
258
+ <span class="tc-muted small">z-index: 10</span><br />
259
+ <span class="tc-muted small">Shallow Inset Shadow</span><br />
260
+ <span class="tc-muted small">Darker</span>
261
+ </div>
262
+ </div>
263
+ <div class="elevation-2 shadow bg-elevation elevation-card">
264
+ <div><strong>Level 2</strong><br>
265
+ <span class="tc-muted small">z-index: 20</span><br />
266
+ <span class="tc-muted small">No Shadow</span><br />
267
+ <span class="tc-muted small">Page default</span>
268
+ </div>
269
+ </div>
270
+ <div class="elevation-3 shadow bg-elevation elevation-card">
271
+ <div><strong>Level 3</strong><br>
272
+ <span class="tc-muted small">z-index: 30</span><br />
273
+ <span class="tc-muted small">Small Drop Shadow</span><br />
274
+ <span class="tc-muted small">A Little Lighter</span>
275
+ </div>
276
+ </div>
277
+ <div class="elevation-4 shadow bg-elevation elevation-card">
278
+ <div><strong>Level 4</strong><br>
279
+ <span class="tc-muted small">z-index: 40</span><br />
280
+ <span class="tc-muted small">Medium Drop Shadow</span><br />
281
+ <span class="tc-muted small">Lighter</span><br />
282
+ </div>
283
+ </div>
284
+ <div class="elevation-5 shadow bg-elevation elevation-card">
285
+ <div><strong>Level 5</strong><br>
286
+ <span class="tc-muted small">z-index: 50</span><br />
287
+ <span class="tc-muted small">Large Drop Shadow</span><br />
288
+ <span class="tc-muted small">Lightest</span><br />
289
+ <span class="tc-muted small">(6–10 same)</span>
290
+ </div>
291
+ </div>
292
+ </k-card>
293
+ </div>
294
+ </div>
295
+ <h2 id="elevation-variables">Elevation CSS Variables</h2>
296
+ <div class="table-wrapper mb">
297
+ <table>
298
+ <thead>
299
+ <tr>
300
+ <th>Variable</th>
301
+ <th>Description</th>
302
+ </tr>
303
+ </thead>
304
+ <tbody>
305
+ <tr>
306
+ <td><code>--c_bg_elevation_0</code></td>
307
+ <td>Background for level 0 (darkest / deepest)</td>
308
+ </tr>
309
+ <tr>
310
+ <td><code>--c_bg_elevation_1</code></td>
311
+ <td>Background for level 1 (sunk below page)</td>
312
+ </tr>
313
+ <tr>
314
+ <td><code>--c_bg_elevation_2</code></td>
315
+ <td>Background for level 2 — equals <code>var(--c_bg)</code> (page default)</td>
316
+ </tr>
317
+ <tr>
318
+ <td><code>--c_bg_elevation_3</code></td>
319
+ <td>Background for level 3</td>
320
+ </tr>
321
+ <tr>
322
+ <td><code>--c_bg_elevation_4</code></td>
323
+ <td>Background for level 4</td>
324
+ </tr>
325
+ <tr>
326
+ <td><code>--c_bg_elevation_5</code></td>
327
+ <td>Background for level 5</td>
328
+ </tr>
329
+ <tr>
330
+ <td><code>--c_bg_elevation_6</code> – <code>--c_bg_elevation_10</code></td>
331
+ <td>Same as <code>--c_bg_elevation_5</code> (levels 6–10 do not get lighter)</td>
332
+ </tr>
333
+ <tr>
334
+ <td><code>--shadow_0</code></td>
335
+ <td>Shadow for level 0 (deep inset)</td>
336
+ </tr>
337
+ <tr>
338
+ <td><code>--shadow_1</code></td>
339
+ <td>Shadow for level 1 (shallow inset)</td>
340
+ </tr>
341
+ <tr>
342
+ <td><code>--shadow_3</code></td>
343
+ <td>Shadow for level 3 (very small outset)</td>
344
+ </tr>
345
+ <tr>
346
+ <td><code>--shadow_4</code></td>
347
+ <td>Shadow for level 4 (small outset)</td>
348
+ </tr>
349
+ <tr>
350
+ <td><code>--shadow_5</code></td>
351
+ <td>Shadow for level 5 (medium-small outset)</td>
352
+ </tr>
353
+ <tr>
354
+ <td><code>--shadow_6</code> – <code>--shadow_10</code></td>
355
+ <td>Same as <code>--shadow_5</code> (levels 6–10 do not get deeper)</td>
356
+ </tr>
357
+ </tbody>
358
+ </table>
359
+ </div>
360
+ </content>
361
+ </page>
package/docs-src/examples/responsive-grid.html ADDED
@@ -0,0 +1,33 @@
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>Responsive Grid Example - Kempo CSS</title>
7
+ <link rel="stylesheet" href="../kempo.min.css" />
8
+ <style>
9
+ body {
10
+ overflow: hidden;
11
+ padding: 1rem;
12
+ }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <k-theme-switcher class="d-n"></k-theme-switcher>
17
+ <div class="row">
18
+ <div class="col d-span-3 t-span-6 m-span-12 b pq">
19
+ col d-span-3 t-span-6 m-span-12
20
+ </div>
21
+ <div class="col d-span-3 t-span-6 m-span-12 b pq">
22
+ col d-span-3 t-span-6 m-span-12
23
+ </div>
24
+ <div class="col d-span-3 t-span-6 m-span-12 b pq">
25
+ col d-span-3 t-span-6 m-span-12
26
+ </div>
27
+ <div class="col d-span-3 t-span-6 m-span-12 b pq">
28
+ col d-span-3 t-span-6 m-span-12
29
+ </div>
30
+ </div>
31
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
32
+ </body>
33
+ </html>
package/docs-src/head.fragment.html ADDED
@@ -0,0 +1,16 @@
1
+ <fragment>
2
+ <meta charset="UTF-8" />
3
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4
+ <title>{{title}}</title>
5
+ <link rel="icon" type="image/png" sizes="48x48" href="./media/icon48.png">
6
+ <link rel="manifest" href="./manifest.json" />
7
+ <link rel="stylesheet" href="./kempo.min.css" />
8
+ <link rel="stylesheet" href="./kempo-hljs.min.css" />
9
+ <script>
10
+ window.kempo = {
11
+ pathToStylesheet: './kempo.min.css',
12
+ pathsToIcons: ['https://cdn.jsdelivr.net/npm/kempo-ui@0.3/icons']
13
+ };
14
+ </script>
15
+ <location name="styles"></location>
16
+ </fragment>
package/docs-src/index.page.html ADDED
@@ -0,0 +1,95 @@
1
+ <page pageName="Kempo CSS" title="Kempo CSS">
2
+ <content>
3
+ <div class="ta-center">
4
+ <p>
5
+ <a href="https://github.com/dustinpoissant/kempo-css" class="btn primary mr" target="_blank">GitHub</a>
6
+ <a href="https://www.npmjs.com/package/kempo-css" class="btn" target="_blank">NPM</a>
7
+ </p>
8
+ <p>A lightweight, utility-first CSS framework.</p>
9
+ <p>Current Version: <code id="version">unknown</code></p>
10
+ </div>
11
+ <h2>Documentation</h2>
12
+ <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-auto-rows: auto auto; gap: var(--spacer);" class="mb">
13
+ <a href="./typography.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
14
+ <h3 class="tc-primary mt0">Typography</h3>
15
+ <p class="tc-muted">Headings, paragraphs, text markup, and lists.</p>
16
+ </a>
17
+ <a href="./layout.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
18
+ <h3 class="tc-primary mt0">Layout</h3>
19
+ <p class="tc-muted">Flexbox utilities, 12-column grid, and responsive breakpoints.</p>
20
+ </a>
21
+ <a href="./borders-spacing.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
22
+ <h3 class="tc-primary mt0">Borders &amp; Spacing</h3>
23
+ <p class="tc-muted">Borders, border radius, padding, margins, and negative margins.</p>
24
+ </a>
25
+ <a href="./inputs.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
26
+ <h3 class="tc-primary mt0">Inputs</h3>
27
+ <p class="tc-muted">Text inputs, labels, checkboxes, and radio buttons.</p>
28
+ </a>
29
+ <a href="./buttons.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
30
+ <h3 class="tc-primary mt0">Buttons</h3>
31
+ <p class="tc-muted">Button types, colors, sizes, and groups.</p>
32
+ </a>
33
+ <a href="./tables.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
34
+ <h3 class="tc-primary mt0">Tables</h3>
35
+ <p class="tc-muted">Basic and responsive table styles.</p>
36
+ </a>
37
+ <a href="./colors.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
38
+ <h3 class="tc-primary mt0">Colors</h3>
39
+ <p class="tc-muted">Background and text color utility classes.</p>
40
+ </a>
41
+ <a href="./elevation.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
42
+ <h3 class="tc-primary mt0">Elevation</h3>
43
+ <p class="tc-muted">Z-index, box shadows, and elevation background colors.</p>
44
+ </a>
45
+ <a href="./utilities.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
46
+ <h3 class="tc-primary mt0">Utilities</h3>
47
+ <p class="tc-muted">Miscellaneous utility classes for common needs.</p>
48
+ </a>
49
+ <a href="./theme-editor.html" class="card no-link" style="display: grid; grid-template-rows: subgrid; grid-row: span 2;">
50
+ <h3 class="tc-primary mt0">Theme Editor</h3>
51
+ <p class="tc-muted">Visually customize and export your own Kempo CSS theme.</p>
52
+ </a>
53
+ </div>
54
+ <div class="b r mb p">
55
+ <h3 class="mt0">Quick Start</h3>
56
+ <p>Install via NPM:</p>
57
+ <pre><code>npm install kempo-css</code></pre>
58
+ <p>Or use the CDN:</p>
59
+ <pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kempo-css@2/dist/kempo.min.css" /&gt;</code></pre>
60
+ </div>
61
+ <div class="row -mx mb">
62
+ <div class="col m-span-12 d-span-6 px">
63
+ <div class="b r p">
64
+ <h4 class="mt0">Features</h4>
65
+ <ul>
66
+ <li><strong>Lightweight</strong> - Small footprint, no JavaScript required</li>
67
+ <li><strong>Utility-First</strong> - Composable utility classes</li>
68
+ <li><strong>Responsive Grid</strong> - 12-column grid with breakpoints</li>
69
+ <li><strong>Dark Mode</strong> - Built-in light/dark theme support</li>
70
+ <li><strong>Elevation System</strong> - Z-index, shadows, and backgrounds</li>
71
+ <li><strong>Customizable</strong> - CSS variables for easy theming</li>
72
+ </ul>
73
+ </div>
74
+ </div>
75
+ <div class="col m-span-12 d-span-6 px">
76
+ <div class="b r p">
77
+ <h4 class="mt0">Includes</h4>
78
+ <ul>
79
+ <li><strong>Typography</strong> - Headings, text, lists</li>
80
+ <li><strong>Layout</strong> - Flexbox, grid, display utilities</li>
81
+ <li><strong>Spacing</strong> - Padding, margins, negative margins</li>
82
+ <li><strong>Forms</strong> - Inputs, labels, checkboxes, radios</li>
83
+ <li><strong>Buttons</strong> - Colors, sizes, groups</li>
84
+ <li><strong>Tables</strong> - Basic and responsive tables</li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </content>
90
+ <content location="scripts">
91
+ <script type="module">
92
+ document.getElementById('version').innerHTML = (await (await fetch('https://raw.githubusercontent.com/dustinpoissant/kempo-css/refs/heads/main/package.json')).json()).version;
93
+ </script>
94
+ </content>
95
+ </page>