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-src/borders-spacing.page.html ADDED
@@ -0,0 +1,297 @@
1
+ <page pageName="Borders & Spacing" title="Borders & Spacing - Kempo CSS">
2
+ <content>
3
+ <h3 id="borders">Borders</h3>
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">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"b"</span>&gt;</span>b<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">"bt"</span>&gt;</span>bt<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">"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> <span class="hljs-attr">class</span>=<span class="hljs-string">"bb"</span>&gt;</span>bb<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">"bl"</span>&gt;</span>bl<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">"bx"</span>&gt;</span>bx<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">"by"</span>&gt;</span>by<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
8
+ </k-card>
9
+ </div>
10
+ <div class="col m-span-12 px">
11
+ <k-card label="Output*">
12
+ <div class="d-ib bg-alt p mr mb b">b</div>
13
+ <div class="d-ib bg-alt p mr mb bt">bt</div>
14
+ <div class="d-ib bg-alt p mr mb br">br</div>
15
+ <div class="d-ib bg-alt p mr mb bb">bb</div>
16
+ <div class="d-ib bg-alt p mr mb bl">bl</div>
17
+ <div class="d-ib bg-alt p mr mb bx">bx</div>
18
+ <div class="d-ib bg-alt p mr mb by">by</div>
19
+ </k-card>
20
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
21
+ </div>
22
+ </div>
23
+
24
+ <h3 id="border-radius">Border Radius</h3>
25
+ <div class="row -mx">
26
+ <div class="col m-span-12 px">
27
+ <k-card label="HTML">
28
+ <pre><code class="hljs xml"><span class="hljs-comment">&lt;!-- All corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"r"</span>&gt;</span>r<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">"round"</span>&gt;</span>round<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Individual corners --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rtl"</span>&gt;</span>rtl<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">"rtr"</span>&gt;</span>rtr<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">"rbr"</span>&gt;</span>rbr<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">"rbl"</span>&gt;</span>rbl<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br /><br /><span class="hljs-comment">&lt;!-- Side combinations --&gt;</span><br /><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rt"</span>&gt;</span>rt<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">"rb"</span>&gt;</span>rb<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">"rl"</span>&gt;</span>rl<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">"rr"</span>&gt;</span>rr<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
29
+ </k-card>
30
+ </div>
31
+ <div class="col m-span-12 px">
32
+ <k-card label="Output*">
33
+ <div class="mb">
34
+ <div class="d-ib bg-alt p mr mb b r">r</div>
35
+ <div class="d-ib bg-alt p mr mb b round">round</div>
36
+ </div>
37
+ <div class="mb">
38
+ <div class="d-ib bg-alt p mr mb b rtl">rtl</div>
39
+ <div class="d-ib bg-alt p mr mb b rtr">rtr</div>
40
+ <div class="d-ib bg-alt p mr mb b rbr">rbr</div>
41
+ <div class="d-ib bg-alt p mr mb b rbl">rbl</div>
42
+ </div>
43
+ <div>
44
+ <div class="d-ib bg-alt p mr mb b rt">rt</div>
45
+ <div class="d-ib bg-alt p mr mb b rb">rb</div>
46
+ <div class="d-ib bg-alt p mr mb b rl">rl</div>
47
+ <div class="d-ib bg-alt p mr mb b rr">rr</div>
48
+ </div>
49
+ </k-card>
50
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
51
+ </div>
52
+ </div>
53
+ <h3>Border Radius Classes</h3>
54
+ <table>
55
+ <thead>
56
+ <tr>
57
+ <th>Class</th>
58
+ <th>Description</th>
59
+ </tr>
60
+ </thead>
61
+ <tbody>
62
+ <tr>
63
+ <td><code>r</code></td>
64
+ <td>All corners (0.25rem)</td>
65
+ </tr>
66
+ <tr>
67
+ <td><code>round</code></td>
68
+ <td>Fully rounded (9999rem)</td>
69
+ </tr>
70
+ <tr>
71
+ <td><code>rtl</code></td>
72
+ <td>Top-left corner only</td>
73
+ </tr>
74
+ <tr>
75
+ <td><code>rtr</code></td>
76
+ <td>Top-right corner only</td>
77
+ </tr>
78
+ <tr>
79
+ <td><code>rbr</code></td>
80
+ <td>Bottom-right corner only</td>
81
+ </tr>
82
+ <tr>
83
+ <td><code>rbl</code></td>
84
+ <td>Bottom-left corner only</td>
85
+ </tr>
86
+ <tr>
87
+ <td><code>rt</code></td>
88
+ <td>Top corners (left + right)</td>
89
+ </tr>
90
+ <tr>
91
+ <td><code>rb</code></td>
92
+ <td>Bottom corners (left + right)</td>
93
+ </tr>
94
+ <tr>
95
+ <td><code>rl</code></td>
96
+ <td>Left corners (top + bottom)</td>
97
+ </tr>
98
+ <tr>
99
+ <td><code>rr</code></td>
100
+ <td>Right corners (top + bottom)</td>
101
+ </tr>
102
+ </tbody>
103
+ </table>
104
+ <p class="mt">
105
+ <small><strong>Note:</strong> Add <code>0</code> suffix (e.g.,
106
+ <code>r0</code>, <code>rt0</code>) to cancel border radius.</small>
107
+ </p>
108
+
109
+ <h2 id="padding">Padding</h2>
110
+
111
+ <k-card>
112
+ <h3>Color Legend</h3>
113
+ <ul>
114
+ <li><strong style="color: #00ff00">Green</strong> = Padding</li>
115
+ <li><strong style="color: #ff8c00">Orange</strong> = Margins</li>
116
+ <li>
117
+ <strong style="color: #ff0000">Red</strong> = Negative Margins
118
+ </li>
119
+ <li>
120
+ <strong style="color: #ff0000">Red Border</strong> = Cancelled
121
+ Margins
122
+ </li>
123
+ </ul>
124
+ <p>*<small>Additional styles applied for demonstration purposes.</small></p>
125
+ </k-card>
126
+
127
+ <div class="row -mx">
128
+ <div class="col m-span-12 px">
129
+ <k-card label="HTML">
130
+ <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">"p"</span>&gt;</span>p<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">"pt"</span>&gt;</span>pt<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">"pr"</span>&gt;</span>pr<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">"pb"</span>&gt;</span>pb<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">"pl"</span>&gt;</span>pl<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">"px"</span>&gt;</span>px<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">"py"</span>&gt;</span>py<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
131
+ </k-card>
132
+ </div>
133
+ <div class="col m-span-12 px">
134
+ <k-card label="Output*">
135
+ <div class="d-ib bg-success mx mb p">
136
+ <div class="d-ib bg-alt pq">p</div>
137
+ </div>
138
+ <div class="d-ib bg-success mx mb pt">
139
+ <div class="d-ib bg-alt pq">pt</div>
140
+ </div>
141
+ <div class="d-ib bg-success mx mb pr">
142
+ <div class="d-ib bg-alt pq">pr</div>
143
+ </div>
144
+ <div class="d-ib bg-success mx mb pb">
145
+ <div class="d-ib bg-alt pq">pb</div>
146
+ </div>
147
+ <div class="d-ib bg-success mx mb pl">
148
+ <div class="d-ib bg-alt pq">pl</div>
149
+ </div>
150
+ <div class="d-ib bg-success mx mb px">
151
+ <div class="d-ib bg-alt pq">px</div>
152
+ </div>
153
+ <div class="d-ib bg-success mx mb py">
154
+ <div class="d-ib bg-alt pq">py</div>
155
+ </div>
156
+ </k-card>
157
+ </div>
158
+ </div>
159
+
160
+ <h3 id="margins">Margins</h3>
161
+ <div class="row -mx">
162
+ <div class="col m-span-12 px">
163
+ <k-card label="HTML">
164
+ <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">"m"</span>&gt;</span>m<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">"mt"</span>&gt;</span>mt<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">"mr"</span>&gt;</span>mr<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">"mb"</span>&gt;</span>mb<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">"ml"</span>&gt;</span>ml<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">"mx"</span>&gt;</span>mx<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">"my"</span>&gt;</span>my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
165
+ </k-card>
166
+ </div>
167
+ <div class="col m-span-12 px">
168
+ <k-card label="Output*">
169
+ <div class="d-ib bg-warning mx mb p">
170
+ <div class="d-ib bg-alt pq">m</div>
171
+ </div>
172
+ <div class="d-ib bg-warning mx mb pt">
173
+ <div class="d-ib bg-alt pq">mt</div>
174
+ </div>
175
+ <div class="d-ib bg-warning mx mb pr">
176
+ <div class="d-ib bg-alt pq">mr</div>
177
+ </div>
178
+ <div class="d-ib bg-warning mx mb pb">
179
+ <div class="d-ib bg-alt pq">mb</div>
180
+ </div>
181
+ <div class="d-ib bg-warning mx mb pl">
182
+ <div class="d-ib bg-alt pq">ml</div>
183
+ </div>
184
+ <div class="d-ib bg-warning mx mb px">
185
+ <div class="d-ib bg-alt pq">mx</div>
186
+ </div>
187
+ <div class="d-ib bg-warning mx mb py">
188
+ <div class="d-ib bg-alt pq">my</div>
189
+ </div>
190
+ </k-card>
191
+ </div>
192
+ </div>
193
+
194
+ <h3 id="negative-margins">Negative Margins</h3>
195
+ <div class="row -mx">
196
+ <div class="col m-span-12 px">
197
+ <k-card label="HTML">
198
+ <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">"-m"</span>&gt;</span>-m<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">"-mt"</span>&gt;</span>-mt<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">"-mr"</span>&gt;</span>-mr<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">"-mb"</span>&gt;</span>-mb<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">"-ml"</span>&gt;</span>-ml<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">"-mx"</span>&gt;</span>-mx<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">"-my"</span>&gt;</span>-my<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
199
+ </k-card>
200
+ </div>
201
+ <div class="col m-span-12 px">
202
+ <k-card label="Output*">
203
+ <div class="d-ib bg-danger mx mb p">
204
+ <div class="d-ib bg-alt pq">-m</div>
205
+ </div>
206
+ <div class="d-ib bg-danger mx mb pt">
207
+ <div class="d-ib bg-alt pq">-mt</div>
208
+ </div>
209
+ <div class="d-ib bg-danger mx mb pr">
210
+ <div class="d-ib bg-alt pq">-mr</div>
211
+ </div>
212
+ <div class="d-ib bg-danger mx mb pb">
213
+ <div class="d-ib bg-alt pq">-mb</div>
214
+ </div>
215
+ <div class="d-ib bg-danger mx mb pl">
216
+ <div class="d-ib bg-alt pq">-ml</div>
217
+ </div>
218
+ <div class="d-ib bg-danger mx mb px">
219
+ <div class="d-ib bg-alt pq">-mx</div>
220
+ </div>
221
+ <div class="d-ib bg-danger mx mb py">
222
+ <div class="d-ib bg-alt pq">-my</div>
223
+ </div>
224
+ </k-card>
225
+ </div>
226
+ </div>
227
+
228
+ <h3 id="cancelled-margins">Cancelled Margins</h3>
229
+ <div class="row -mx">
230
+ <div class="col m-span-12 px">
231
+ <k-card label="HTML">
232
+ <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">"m m0"</span>&gt;</span>m m0<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">"m mt0"</span>&gt;</span>m mt0<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">"m mr0"</span>&gt;</span>m mr0<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">"m mb0"</span>&gt;</span>m mb0<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">"m ml0"</span>&gt;</span>m ml0<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">"m mx0"</span>&gt;</span>m mx0<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">"m my0"</span>&gt;</span>m my0<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
233
+ </k-card>
234
+ </div>
235
+ <div class="col m-span-12 px">
236
+ <k-card label="Output*">
237
+ <div class="d-ib bg-warning mx mb">
238
+ <div
239
+ class="d-ib bg-alt pq b"
240
+ style="border-color: var(--c_danger) !important"
241
+ >
242
+ m m0
243
+ </div>
244
+ </div>
245
+ <div class="d-ib bg-warning mx mb px pb">
246
+ <div
247
+ class="d-ib bg-alt pq bt"
248
+ style="border-color: var(--c_danger) !important"
249
+ >
250
+ m mt0
251
+ </div>
252
+ </div>
253
+ <div class="d-ib bg-warning mx mb py pl">
254
+ <div
255
+ class="d-ib bg-alt pq br"
256
+ style="border-color: var(--c_danger) !important"
257
+ >
258
+ m mr0
259
+ </div>
260
+ </div>
261
+ <div class="d-ib bg-warning mx mb px pt">
262
+ <div
263
+ class="d-ib bg-alt pq bb"
264
+ style="border-color: var(--c_danger) !important"
265
+ >
266
+ m mb0
267
+ </div>
268
+ </div>
269
+ <div class="d-ib bg-warning mx mb py pr">
270
+ <div
271
+ class="d-ib bg-alt pq bl"
272
+ style="border-color: var(--c_danger) !important"
273
+ >
274
+ m ml0
275
+ </div>
276
+ </div>
277
+ <div class="d-ib bg-warning mx mb py">
278
+ <div
279
+ class="d-ib bg-alt pq bx"
280
+ style="border-color: var(--c_danger) !important"
281
+ >
282
+ m mx0
283
+ </div>
284
+ </div>
285
+ <div class="d-ib bg-warning mx mb px">
286
+ <div
287
+ class="d-ib bg-alt pq by"
288
+ style="border-color: var(--c_danger) !important"
289
+ >
290
+ m my0
291
+ </div>
292
+ </div>
293
+ </k-card>
294
+ </div>
295
+ </div>
296
+ </content>
297
+ </page>
package/docs-src/buttons.page.html ADDED
@@ -0,0 +1,113 @@
1
+ <page pageName="Buttons" title="Buttons - Kempo CSS">
2
+ <content>
3
+ <h2 id="button-types">Button Types</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">&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>
8
+ </k-card>
9
+ </div>
10
+ <div class="col m-span-12 px">
11
+ <k-card
12
+ label="Output"
13
+ class="pb"
14
+ >
15
+ <button>button</button>
16
+ <input
17
+ type="button"
18
+ value="input"
19
+ />
20
+ <input
21
+ type="submit"
22
+ value="submit input"
23
+ />
24
+ <a
25
+ href="#"
26
+ class="btn"
27
+ >a.btn</a>
28
+ </k-card>
29
+ </div>
30
+ </div>
31
+
32
+ <h2 id="button-colors">Button Colors</h2>
33
+ <div class="row -mx">
34
+ <div class="col m-span-12 px">
35
+ <k-card label="HTML">
36
+ <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>
37
+ </k-card>
38
+ </div>
39
+ <div class="col m-span-12 px">
40
+ <k-card
41
+ label="Output"
42
+ class="pb"
43
+ >
44
+ <button>Default</button>
45
+ <button class="primary">Primary</button>
46
+ <button class="secondary">Secondary</button>
47
+ <button class="success">Success</button>
48
+ <button class="warning">Warning</button>
49
+ <button class="danger">Danger</button>
50
+ </k-card>
51
+ </div>
52
+ </div>
53
+
54
+ <h2 id="button-sizes">Button Sizes</h2>
55
+ <div class="row -mx">
56
+ <div class="col m-span-12 px">
57
+ <k-card label="HTML">
58
+ <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>
59
+ </k-card>
60
+ </div>
61
+ <div class="col m-span-12 px">
62
+ <k-card
63
+ label="Output"
64
+ class="pb"
65
+ >
66
+ <button class="small">Small</button>
67
+ <button>Normal</button>
68
+ <button class="large">Large</button>
69
+ </k-card>
70
+ </div>
71
+ </div>
72
+
73
+ <h2 id="button-groups">Button Groups</h2>
74
+ <div class="row -mx">
75
+ <div class="col m-span-12 px">
76
+ <k-card label="HTML">
77
+ <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>
78
+ </k-card>
79
+ </div>
80
+ <div class="col m-span-12 px">
81
+ <k-card
82
+ label="Output"
83
+ class="pb"
84
+ >
85
+ <div class="btn-grp">
86
+ <button>Default</button>
87
+ <button>Default</button>
88
+ <button>Default</button>
89
+ </div>
90
+ </k-card>
91
+ </div>
92
+ </div>
93
+
94
+ <h2 id="no-styles">No Styles</h2>
95
+ <div class="row -mx">
96
+ <div class="col m-span-12 px">
97
+ <k-card label="HTML">
98
+ <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>
99
+ <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>
100
+ </k-card>
101
+ </div>
102
+ <div class="col m-span-12 px">
103
+ <k-card
104
+ label="Output"
105
+ class="pb"
106
+ >
107
+ <button class="no-style">no-style</button>
108
+ <button class="no-btn">no-btn</button>
109
+ </k-card>
110
+ </div>
111
+ </div>
112
+ </content>
113
+ </page>
package/docs-src/colors.page.html ADDED
@@ -0,0 +1,50 @@
1
+ <page pageName="Colors" title="Colors - Kempo CSS">
2
+ <content>
3
+ <h2 id="background">Background</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">&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>
8
+ </k-card>
9
+ </div>
10
+ <div class="col m-span-12 px">
11
+ <k-card
12
+ label="Output"
13
+ class="pb"
14
+ >
15
+ <div class="bg-alt p">Alternate</div>
16
+ <div class="bg-inv p">Inverse</div>
17
+ <div class="bg-primary p">Primary</div>
18
+ <div class="bg-secondary p">Secondary</div>
19
+ <div class="bg-success p">Success</div>
20
+ <div class="bg-warning p">Warning</div>
21
+ <div class="bg-danger p">Danger</div>
22
+ </k-card>
23
+ </div>
24
+ </div>
25
+
26
+ <h2 id="text-colors">Text Colors</h2>
27
+ <div class="row -mx">
28
+ <div class="col m-span-12 px">
29
+ <k-card label="HTML">
30
+ <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>
31
+ </k-card>
32
+ </div>
33
+ <div class="col m-span-12 px">
34
+ <k-card label="Output">
35
+ <p>Normal</p>
36
+ <p class="tc-muted">Muted</p>
37
+ <p
38
+ class="tc-inv"
39
+ style="background: grey"
40
+ >Inverse</p>
41
+ <p class="tc-primary">Primary</p>
42
+ <p class="tc-secondary">Secondary</p>
43
+ <p class="tc-success">Success</p>
44
+ <p class="tc-warning">Warning</p>
45
+ <p class="tc-danger">Danger</p>
46
+ </k-card>
47
+ </div>
48
+ </div>
49
+ </content>
50
+ </page>
package/docs-src/default.template.html ADDED
@@ -0,0 +1,22 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <fragment name="head" />
5
+ </head>
6
+ <body>
7
+ <fragment name="nav" />
8
+ <k-main>
9
+ <main>
10
+ <h1 class="ta-center">{{pageName}}</h1>
11
+ <location />
12
+ </main>
13
+ <div style="height:33vh"></div>
14
+ </k-main>
15
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Nav.js"></script>
16
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Aside.js"></script>
17
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Icon.js"></script>
18
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/ThemeSwitcher.js"></script>
19
+ <script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.3/dist/components/Card.js"></script>
20
+ <location name="scripts"></location>
21
+ </body>
22
+ </html>