kempo-css 2.0.0 → 2.1.2

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 (32) hide show
  1. package/.github/workflows/test.yml +25 -25
  2. package/AGENTS.md +43 -43
  3. package/CHANGELOG.md +117 -107
  4. package/CONTRIBUTING.md +17 -0
  5. package/LICENSE.md +21 -21
  6. package/README.md +2 -48
  7. package/dist/kempo.min.css +1 -1
  8. package/docs/demo.inc.html +213 -213
  9. package/docs/index.html +171 -160
  10. package/docs/kempo-hljs.css +124 -124
  11. package/docs/kempo.css +1194 -1210
  12. package/docs/kempo.min.css +1 -1
  13. package/docs/manifest.json +87 -87
  14. package/docs/nav.js +32 -32
  15. package/docs/theme-editor.html +19 -64
  16. package/llms.txt +205 -0
  17. package/package.json +1 -1
  18. package/scripts/build.js +173 -173
  19. package/src/kempo-hljs.css +124 -124
  20. package/src/kempo.css +1194 -1210
  21. package/tests/base_reset.browser-test.js +201 -201
  22. package/tests/buttons.browser-test.js +223 -223
  23. package/tests/colors.browser-test.js +277 -277
  24. package/tests/components.browser-test.js +131 -131
  25. package/tests/css_variables.browser-test.js +170 -170
  26. package/tests/display_flex.browser-test.js +159 -159
  27. package/tests/elevation.browser-test.js +239 -239
  28. package/tests/forms.browser-test.js +224 -224
  29. package/tests/rows_columns.browser-test.js +171 -171
  30. package/tests/spacing.browser-test.js +310 -310
  31. package/tests/tables.browser-test.js +192 -192
  32. package/tests/typography.browser-test.js +255 -255
package/docs/demo.inc.html CHANGED
@@ -1,213 +1,213 @@
1
- <h1>Colors</h1>
2
- <h2>Background Colors</h2>
3
- <div class="d-f gap fw mb">
4
- <div class="p bg-alt">bg-alt</div>
5
- <div class="p bg-inv">bg-inv</div>
6
- <div class="p bg-primary tc-on_primary">bg-primary</div>
7
- <div class="p bg-secondary tc-on_secondary">bg-secondary</div>
8
- <div class="p bg-success tc-on_success">bg-success</div>
9
- <div class="p bg-warning tc-on_warning">bg-warning</div>
10
- <div class="p bg-danger tc-on_danger">bg-danger</div>
11
- </div>
12
- <h2>Text Colors</h2>
13
- <div class="mb">
14
- <p>Normal text color</p>
15
- <p class="tc-muted">Muted text color</p>
16
- <p class="tc-primary">Primary text color</p>
17
- <p class="tc-secondary">Secondary text color</p>
18
- <p class="tc-success">Success text color</p>
19
- <p class="tc-warning">Warning text color</p>
20
- <p class="tc-danger">Danger text color</p>
21
- </div>
22
- <div class="p bg-inv mb">
23
- <p class="tc-inv">Inverse text color on inverse background</p>
24
- </div>
25
-
26
- <h1>Border Colors</h1>
27
- <div class="d-f gap fw mb">
28
- <div class="p b">Default border</div>
29
- <div class="p b bg-inv" style="border-color: var(--c_border__inv);">Inverse border</div>
30
- </div>
31
-
32
- <h1>Link Colors</h1>
33
- <p>
34
- <a href="#">This is a link</a> - normal link styling
35
- </p>
36
- <div class="p bg-inv mb">
37
- <a href="#" class="tc-link__inv">Inverse link</a> - for use on dark backgrounds
38
- </div>
39
-
40
- <h1>Buttons</h1>
41
- <h2>Button Types</h2>
42
- <div class="mb">
43
- <button class="mb mr">button</button>
44
- <input type="button" value="input" class="mb mr" />
45
- <input type="submit" value="submit" class="mb mr" />
46
- <a href="#" class="btn mb mr">a.btn</a>
47
- </div>
48
-
49
- <h2>Button Colors</h2>
50
- <div class="mb">
51
- <button class="mb mr">Default</button>
52
- <button class="primary mb mr">Primary</button>
53
- <button class="secondary mb mr">Secondary</button>
54
- <button class="success mb mr">Success</button>
55
- <button class="warning mb mr">Warning</button>
56
- <button class="danger mb mr">Danger</button>
57
- </div>
58
-
59
- <h2>Button Sizes</h2>
60
- <div class="d-f fw ai-center mb">
61
- <button class="small mb mr">Small</button>
62
- <button class="mb mr">Normal</button>
63
- <button class="large mb mr">Large</button>
64
- </div>
65
-
66
- <h2>Button Groups</h2>
67
- <div class="btn-grp mb">
68
- <button>One</button>
69
- <button>Two</button>
70
- <button>Three</button>
71
- </div>
72
-
73
- <h1>Inputs</h1>
74
- <div class="mb">
75
- <label>Text Input</label>
76
- <input type="text" placeholder="Enter text..." />
77
- </div>
78
- <div class="mb">
79
- <label>Textarea</label>
80
- <textarea placeholder="Enter longer text..."></textarea>
81
- </div>
82
- <div class="mb">
83
- <label>Select</label>
84
- <select>
85
- <option>Option 1</option>
86
- <option>Option 2</option>
87
- <option>Option 3</option>
88
- </select>
89
- </div>
90
- <div class="mb">
91
- <input type="checkbox" id="demo-check1" />
92
- <label for="demo-check1" class="checkbox">Checkbox 1</label>
93
- <input type="checkbox" id="demo-check2" />
94
- <label for="demo-check2" class="checkbox">Checkbox 2</label>
95
- </div>
96
- <div class="mb">
97
- <input type="radio" name="demo-radios" id="demo-rad1" />
98
- <label for="demo-rad1" class="checkbox">Radio 1</label>
99
- <input type="radio" name="demo-radios" id="demo-rad2" />
100
- <label for="demo-rad2" class="checkbox">Radio 2</label>
101
- </div>
102
-
103
- <h1>Focus & Effects</h1>
104
- <p>Click or tab to inputs and buttons to see focus styles.</p>
105
- <div class="mb">
106
- <input type="text" class="mb mr" placeholder="Focus me..." />
107
- <button class="mb mr">Focus me</button>
108
- <button class="primary mb mr">Focus me</button>
109
- </div>
110
- <div class="p bg-alt drop-shadow mb" style="display: inline-block;">
111
- Drop shadow effect
112
- </div>
113
-
114
- <h1>Elevation & Shadows</h1>
115
- <h2>Elevation Levels</h2>
116
- <p class="mb">Elevation creates visual hierarchy. Positive levels rise above the page with drop shadows. Negative levels cut into the page with inset shadows.</p>
117
- <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
118
- <div class="elevation--2 p r" style="min-width: 140px; text-align: center;">
119
- <strong>Level -2</strong><br><span class="tc-muted small">Deep inset</span>
120
- </div>
121
- <div class="elevation--1 p r" style="min-width: 140px; text-align: center;">
122
- <strong>Level -1</strong><br><span class="tc-muted small">Shallow inset</span>
123
- </div>
124
- <div class="elevation-0 p r" style="min-width: 140px; text-align: center;">
125
- <strong>Level 0</strong><br><span class="tc-muted small">Page level</span>
126
- </div>
127
- <div class="elevation-1 p r" style="min-width: 140px; text-align: center;">
128
- <strong>Level 1</strong><br><span class="tc-muted small">Small shadow</span>
129
- </div>
130
- <div class="elevation-2 p r" style="min-width: 140px; text-align: center;">
131
- <strong>Level 2</strong><br><span class="tc-muted small">Medium shadow</span>
132
- </div>
133
- <div class="elevation-3 p r" style="min-width: 140px; text-align: center;">
134
- <strong>Level 3</strong><br><span class="tc-muted small">Large shadow</span>
135
- </div>
136
- </div>
137
-
138
- <h2>Drop Shadow</h2>
139
- <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
140
- <div class="p r bg-alt drop-shadow" style="min-width: 140px; text-align: center;">
141
- <strong>Drop Shadow</strong><br><span class="tc-muted small">.drop-shadow class</span>
142
- </div>
143
- </div>
144
-
145
- <h1>Typography</h1>
146
- <h2>Headings</h2>
147
- <h1>Heading 1</h1>
148
- <h2>Heading 2</h2>
149
- <h3>Heading 3</h3>
150
- <h4>Heading 4</h4>
151
- <h5>Heading 5</h5>
152
- <h6>Heading 6</h6>
153
-
154
- <h2>Paragraph Text</h2>
155
- <p>This is a paragraph of text demonstrating the base font family and size. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
156
- <p><small>This is small text.</small></p>
157
- <p><strong>This is bold text.</strong></p>
158
-
159
- <h2>Monospace</h2>
160
- <p><code>Inline code uses the monospace font family.</code></p>
161
- <pre>Preformatted text also uses monospace.</pre>
162
-
163
- <h1>Spacing & Layout</h1>
164
- <h2>Key</h2>
165
- <ul class="mb">
166
- <li><strong class="tc-success">Green</strong> = Padding</li>
167
- <li><strong class="tc-warning">Orange</strong> = Margins</li>
168
- </ul>
169
-
170
- <h2>Padding</h2>
171
- <div class="mb">
172
- <div class="d-ib bg-success mr mb p"><div class="d-ib bg-alt pq">p</div></div>
173
- <div class="d-ib bg-success mr mb pt"><div class="d-ib bg-alt pq">pt</div></div>
174
- <div class="d-ib bg-success mr mb pr"><div class="d-ib bg-alt pq">pr</div></div>
175
- <div class="d-ib bg-success mr mb pb"><div class="d-ib bg-alt pq">pb</div></div>
176
- <div class="d-ib bg-success mr mb pl"><div class="d-ib bg-alt pq">pl</div></div>
177
- <div class="d-ib bg-success mr mb px"><div class="d-ib bg-alt pq">px</div></div>
178
- <div class="d-ib bg-success mr mb py"><div class="d-ib bg-alt pq">py</div></div>
179
- </div>
180
-
181
- <h2>Margins</h2>
182
- <div class="mb">
183
- <div class="d-ib bg-warning mr mb p"><div class="d-ib bg-alt pq">m</div></div>
184
- <div class="d-ib bg-warning mr mb pt"><div class="d-ib bg-alt pq">mt</div></div>
185
- <div class="d-ib bg-warning mr mb pr"><div class="d-ib bg-alt pq">mr</div></div>
186
- <div class="d-ib bg-warning mr mb pb"><div class="d-ib bg-alt pq">mb</div></div>
187
- <div class="d-ib bg-warning mr mb pl"><div class="d-ib bg-alt pq">ml</div></div>
188
- <div class="d-ib bg-warning mr mb px"><div class="d-ib bg-alt pq">mx</div></div>
189
- <div class="d-ib bg-warning mr mb py"><div class="d-ib bg-alt pq">my</div></div>
190
- </div>
191
-
192
- <h2>Container</h2>
193
- <p>The <code>.container</code> class limits content width.</p>
194
-
195
- <h1>Effects & Animation</h1>
196
- <h2>Border Radius</h2>
197
- <div class="mb">
198
- <div class="d-ib bg-alt p mr mb b r">r</div>
199
- <div class="d-ib bg-alt p mr mb b round">round</div>
200
- </div>
201
- <div class="mb">
202
- <div class="d-ib bg-alt p mr mb b rtl">rtl</div>
203
- <div class="d-ib bg-alt p mr mb b rtr">rtr</div>
204
- <div class="d-ib bg-alt p mr mb b rbr">rbr</div>
205
- <div class="d-ib bg-alt p mr mb b rbl">rbl</div>
206
- </div>
207
- <div class="mb">
208
- <div class="d-ib bg-alt p mr mb b rt">rt</div>
209
- <div class="d-ib bg-alt p mr mb b rb">rb</div>
210
- <div class="d-ib bg-alt p mr mb b rl">rl</div>
211
- <div class="d-ib bg-alt p mr mb b rr">rr</div>
212
- </div>
213
- <p><small><strong>Note:</strong> Add <code>0</code> suffix (e.g., <code>r0</code>, <code>rt0</code>) to cancel border radius.</small></p>
1
+ <h1>Colors</h1>
2
+ <h2>Background Colors</h2>
3
+ <div class="d-f gap fw mb">
4
+ <div class="p bg-alt">bg-alt</div>
5
+ <div class="p bg-inv">bg-inv</div>
6
+ <div class="p bg-primary tc-on_primary">bg-primary</div>
7
+ <div class="p bg-secondary tc-on_secondary">bg-secondary</div>
8
+ <div class="p bg-success tc-on_success">bg-success</div>
9
+ <div class="p bg-warning tc-on_warning">bg-warning</div>
10
+ <div class="p bg-danger tc-on_danger">bg-danger</div>
11
+ </div>
12
+ <h2>Text Colors</h2>
13
+ <div class="mb">
14
+ <p>Normal text color</p>
15
+ <p class="tc-muted">Muted text color</p>
16
+ <p class="tc-primary">Primary text color</p>
17
+ <p class="tc-secondary">Secondary text color</p>
18
+ <p class="tc-success">Success text color</p>
19
+ <p class="tc-warning">Warning text color</p>
20
+ <p class="tc-danger">Danger text color</p>
21
+ </div>
22
+ <div class="p bg-inv mb">
23
+ <p class="tc-inv">Inverse text color on inverse background</p>
24
+ </div>
25
+
26
+ <h1>Border Colors</h1>
27
+ <div class="d-f gap fw mb">
28
+ <div class="p b">Default border</div>
29
+ <div class="p b bg-inv" style="border-color: var(--c_border__inv);">Inverse border</div>
30
+ </div>
31
+
32
+ <h1>Link Colors</h1>
33
+ <p>
34
+ <a href="#">This is a link</a> - normal link styling
35
+ </p>
36
+ <div class="p bg-inv mb">
37
+ <a href="#" class="tc-link__inv">Inverse link</a> - for use on dark backgrounds
38
+ </div>
39
+
40
+ <h1>Buttons</h1>
41
+ <h2>Button Types</h2>
42
+ <div class="mb">
43
+ <button class="mb mr">button</button>
44
+ <input type="button" value="input" class="mb mr" />
45
+ <input type="submit" value="submit" class="mb mr" />
46
+ <a href="#" class="btn mb mr">a.btn</a>
47
+ </div>
48
+
49
+ <h2>Button Colors</h2>
50
+ <div class="mb">
51
+ <button class="mb mr">Default</button>
52
+ <button class="primary mb mr">Primary</button>
53
+ <button class="secondary mb mr">Secondary</button>
54
+ <button class="success mb mr">Success</button>
55
+ <button class="warning mb mr">Warning</button>
56
+ <button class="danger mb mr">Danger</button>
57
+ </div>
58
+
59
+ <h2>Button Sizes</h2>
60
+ <div class="d-f fw ai-center mb">
61
+ <button class="small mb mr">Small</button>
62
+ <button class="mb mr">Normal</button>
63
+ <button class="large mb mr">Large</button>
64
+ </div>
65
+
66
+ <h2>Button Groups</h2>
67
+ <div class="btn-grp mb">
68
+ <button>One</button>
69
+ <button>Two</button>
70
+ <button>Three</button>
71
+ </div>
72
+
73
+ <h1>Inputs</h1>
74
+ <div class="mb">
75
+ <label>Text Input</label>
76
+ <input type="text" placeholder="Enter text..." />
77
+ </div>
78
+ <div class="mb">
79
+ <label>Textarea</label>
80
+ <textarea placeholder="Enter longer text..."></textarea>
81
+ </div>
82
+ <div class="mb">
83
+ <label>Select</label>
84
+ <select>
85
+ <option>Option 1</option>
86
+ <option>Option 2</option>
87
+ <option>Option 3</option>
88
+ </select>
89
+ </div>
90
+ <div class="mb">
91
+ <input type="checkbox" id="demo-check1" />
92
+ <label for="demo-check1" class="checkbox">Checkbox 1</label>
93
+ <input type="checkbox" id="demo-check2" />
94
+ <label for="demo-check2" class="checkbox">Checkbox 2</label>
95
+ </div>
96
+ <div class="mb">
97
+ <input type="radio" name="demo-radios" id="demo-rad1" />
98
+ <label for="demo-rad1" class="checkbox">Radio 1</label>
99
+ <input type="radio" name="demo-radios" id="demo-rad2" />
100
+ <label for="demo-rad2" class="checkbox">Radio 2</label>
101
+ </div>
102
+
103
+ <h1>Focus & Effects</h1>
104
+ <p>Click or tab to inputs and buttons to see focus styles.</p>
105
+ <div class="mb">
106
+ <input type="text" class="mb mr" placeholder="Focus me..." />
107
+ <button class="mb mr">Focus me</button>
108
+ <button class="primary mb mr">Focus me</button>
109
+ </div>
110
+ <div class="p bg-alt drop-shadow mb" style="display: inline-block;">
111
+ Drop shadow effect
112
+ </div>
113
+
114
+ <h1>Elevation & Shadows</h1>
115
+ <h2>Elevation Levels</h2>
116
+ <p class="mb">Elevation creates visual hierarchy. Positive levels rise above the page with drop shadows. Negative levels cut into the page with inset shadows.</p>
117
+ <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
118
+ <div class="elevation--2 p r" style="min-width: 140px; text-align: center;">
119
+ <strong>Level -2</strong><br><span class="tc-muted small">Deep inset</span>
120
+ </div>
121
+ <div class="elevation--1 p r" style="min-width: 140px; text-align: center;">
122
+ <strong>Level -1</strong><br><span class="tc-muted small">Shallow inset</span>
123
+ </div>
124
+ <div class="elevation-0 p r" style="min-width: 140px; text-align: center;">
125
+ <strong>Level 0</strong><br><span class="tc-muted small">Page level</span>
126
+ </div>
127
+ <div class="elevation-1 p r" style="min-width: 140px; text-align: center;">
128
+ <strong>Level 1</strong><br><span class="tc-muted small">Small shadow</span>
129
+ </div>
130
+ <div class="elevation-2 p r" style="min-width: 140px; text-align: center;">
131
+ <strong>Level 2</strong><br><span class="tc-muted small">Medium shadow</span>
132
+ </div>
133
+ <div class="elevation-3 p r" style="min-width: 140px; text-align: center;">
134
+ <strong>Level 3</strong><br><span class="tc-muted small">Large shadow</span>
135
+ </div>
136
+ </div>
137
+
138
+ <h2>Drop Shadow</h2>
139
+ <div class="d-f mb" style="gap: var(--spacer); flex-wrap: wrap;">
140
+ <div class="p r bg-alt drop-shadow" style="min-width: 140px; text-align: center;">
141
+ <strong>Drop Shadow</strong><br><span class="tc-muted small">.drop-shadow class</span>
142
+ </div>
143
+ </div>
144
+
145
+ <h1>Typography</h1>
146
+ <h2>Headings</h2>
147
+ <h1>Heading 1</h1>
148
+ <h2>Heading 2</h2>
149
+ <h3>Heading 3</h3>
150
+ <h4>Heading 4</h4>
151
+ <h5>Heading 5</h5>
152
+ <h6>Heading 6</h6>
153
+
154
+ <h2>Paragraph Text</h2>
155
+ <p>This is a paragraph of text demonstrating the base font family and size. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
156
+ <p><small>This is small text.</small></p>
157
+ <p><strong>This is bold text.</strong></p>
158
+
159
+ <h2>Monospace</h2>
160
+ <p><code>Inline code uses the monospace font family.</code></p>
161
+ <pre>Preformatted text also uses monospace.</pre>
162
+
163
+ <h1>Spacing & Layout</h1>
164
+ <h2>Key</h2>
165
+ <ul class="mb">
166
+ <li><strong class="tc-success">Green</strong> = Padding</li>
167
+ <li><strong class="tc-warning">Orange</strong> = Margins</li>
168
+ </ul>
169
+
170
+ <h2>Padding</h2>
171
+ <div class="mb">
172
+ <div class="d-ib bg-success mr mb p"><div class="d-ib bg-alt pq">p</div></div>
173
+ <div class="d-ib bg-success mr mb pt"><div class="d-ib bg-alt pq">pt</div></div>
174
+ <div class="d-ib bg-success mr mb pr"><div class="d-ib bg-alt pq">pr</div></div>
175
+ <div class="d-ib bg-success mr mb pb"><div class="d-ib bg-alt pq">pb</div></div>
176
+ <div class="d-ib bg-success mr mb pl"><div class="d-ib bg-alt pq">pl</div></div>
177
+ <div class="d-ib bg-success mr mb px"><div class="d-ib bg-alt pq">px</div></div>
178
+ <div class="d-ib bg-success mr mb py"><div class="d-ib bg-alt pq">py</div></div>
179
+ </div>
180
+
181
+ <h2>Margins</h2>
182
+ <div class="mb">
183
+ <div class="d-ib bg-warning mr mb p"><div class="d-ib bg-alt pq">m</div></div>
184
+ <div class="d-ib bg-warning mr mb pt"><div class="d-ib bg-alt pq">mt</div></div>
185
+ <div class="d-ib bg-warning mr mb pr"><div class="d-ib bg-alt pq">mr</div></div>
186
+ <div class="d-ib bg-warning mr mb pb"><div class="d-ib bg-alt pq">mb</div></div>
187
+ <div class="d-ib bg-warning mr mb pl"><div class="d-ib bg-alt pq">ml</div></div>
188
+ <div class="d-ib bg-warning mr mb px"><div class="d-ib bg-alt pq">mx</div></div>
189
+ <div class="d-ib bg-warning mr mb py"><div class="d-ib bg-alt pq">my</div></div>
190
+ </div>
191
+
192
+ <h2>Container</h2>
193
+ <p>The <code>.container</code> class limits content width.</p>
194
+
195
+ <h1>Effects & Animation</h1>
196
+ <h2>Border Radius</h2>
197
+ <div class="mb">
198
+ <div class="d-ib bg-alt p mr mb b r">r</div>
199
+ <div class="d-ib bg-alt p mr mb b round">round</div>
200
+ </div>
201
+ <div class="mb">
202
+ <div class="d-ib bg-alt p mr mb b rtl">rtl</div>
203
+ <div class="d-ib bg-alt p mr mb b rtr">rtr</div>
204
+ <div class="d-ib bg-alt p mr mb b rbr">rbr</div>
205
+ <div class="d-ib bg-alt p mr mb b rbl">rbl</div>
206
+ </div>
207
+ <div class="mb">
208
+ <div class="d-ib bg-alt p mr mb b rt">rt</div>
209
+ <div class="d-ib bg-alt p mr mb b rb">rb</div>
210
+ <div class="d-ib bg-alt p mr mb b rl">rl</div>
211
+ <div class="d-ib bg-alt p mr mb b rr">rr</div>
212
+ </div>
213
+ <p><small><strong>Note:</strong> Add <code>0</code> suffix (e.g., <code>r0</code>, <code>rt0</code>) to cancel border radius.</small></p>