kempo-css 1.0.6 → 1.0.7

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 (28) hide show
  1. package/dist/kempo.min.css +1 -1
  2. package/examples/responsive-grid.html +31 -0
  3. package/index.html +96 -322
  4. package/kempo.css +4 -0
  5. package/media/hexagon.svg +22 -0
  6. package/media/icon-maskable.png +0 -0
  7. package/media/icon.svg +1 -0
  8. package/media/icon128.png +0 -0
  9. package/media/icon144.png +0 -0
  10. package/media/icon152.png +0 -0
  11. package/media/icon16-48.svg +19 -0
  12. package/media/icon16.png +0 -0
  13. package/media/icon192.png +0 -0
  14. package/media/icon256.png +0 -0
  15. package/media/icon32.png +0 -0
  16. package/media/icon384.png +0 -0
  17. package/media/icon48.png +0 -0
  18. package/media/icon512.png +0 -0
  19. package/media/icon64.png +0 -0
  20. package/media/icon72.png +0 -0
  21. package/media/icon96.png +0 -0
  22. package/media/kempo-fist.svg +21 -0
  23. package/package.json +4 -1
  24. package/src/ColorEditor.js +26 -0
  25. package/src/CssVar.js +56 -0
  26. package/src/lit-all.min.js +120 -0
  27. package/theme-builder.html +286 -0
  28. package/LICENSE +0 -21
package/theme-builder.html ADDED
@@ -0,0 +1,286 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" theme="auto">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Kempo CSS</title>
7
+ <link rel="stylesheet" href="./kempo.css" />
8
+ <link rel="stylesheet" href="./kempo-hljs.css" />
9
+ <script src="CssVar.js"></script>
10
+ <script src="CssVarColor.js"></script>
11
+ <script src="CssVarLightDarkColor.js"></script>
12
+ <style>
13
+ html {
14
+ scrollbar-gutter: none !important;
15
+ }
16
+ body {
17
+ overflow: hidden;
18
+ height: 100vh;
19
+ }
20
+ #container {
21
+ display: grid;
22
+ grid-template-columns: 24rem 1fr;
23
+ grid-template-rows: auto 1fr;
24
+ height: 100vh;
25
+ }
26
+ #vars {
27
+ padding: var(--spacer, 1rem);
28
+ grid-row: 1 / -1;
29
+ overflow-y: auto;
30
+ }
31
+ #actions {
32
+
33
+ }
34
+ #docs {
35
+ grid-row: 2;
36
+ height: 100%;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body>
41
+ <div id="container">
42
+ <div id="vars" class="br">
43
+ <h5>Colors</h5>
44
+ <label for="c_bg">Background Color</label>
45
+ <input type="color" />
46
+ <label for="c_bg__inv">Inverted Background Color</label>
47
+ <css-var-light-dark-color class="b ml mb ph" id="c_bg__inv" value="light-dark(rgb(51, 51, 51), rgb(249, 249, 249))"></css-var-light-dark-color>
48
+ <label for="c_bg__alt">Alternative Background Color</label>
49
+ <css-var-light-dark-color class="b ml mb ph" id="c_bg__alt" value="light-dark(rgb(238, 238, 238), rgb(34, 34, 34))"></css-var-light-dark-color>
50
+ <label for="c_overscroll">Overscroll Color</label>
51
+ <css-var-light-dark-color class="b ml mb ph" id="c_overscroll" value="light-dark(rgb(255, 255, 255), rgb(0, 0, 0))"></css-var-light-dark-color>
52
+ <label for="c_border">Border Color</label>
53
+ <css-var-light-dark-color class="b ml mb ph" id="c_border" value="light-dark(rgb(204, 204, 204), rgb(119, 119, 119))"></css-var-light-dark-color>
54
+ <label for="c_border__inv">Inverted Border Color</label>
55
+ <css-var-light-dark-color class="b ml mb ph" id="c_border__inv" value="light-dark(var(--d_c_bg_border), rgb(204, 204, 204))"></css-var-light-dark-color>
56
+ <label for="c_primary">Primary Color</label>
57
+ <css-var-color id="c_primary" value="rgb(51, 102, 255)"></css-var-color>
58
+ <label for="c_primary__hover">Primary Hover Color</label>
59
+ <css-var-color id="c_primary__hover" value="rgb(17, 68, 221)"></css-var-color>
60
+ <label for="c_secondary">Secondary Color</label>
61
+ <css-var-color id="c_secondary" value="rgb(153, 51, 255)"></css-var-color>
62
+ <label for="c_secondary__hover">Secondary Hover Color</label>
63
+ <css-var-color id="c_secondary__hover" value="rgb(119, 17, 221)"></css-var-color>
64
+ <label for="c_success">Success Color</label>
65
+ <css-var-color id="c_success" value="rgb(0, 136, 0)"></css-var-color>
66
+ <label for="c_success__hover">Success Hover Color</label>
67
+ <css-var-color id="c_success__hover" value="rgb(0, 102, 0)"></css-var-color>
68
+ <label for="c_warning">Warning Color</label>
69
+ <css-var-color id="c_warning" value="rgb(255, 102, 0)"></css-var-color>
70
+ <label for="c_warning__hover">Warning Hover Color</label>
71
+ <css-var-color id="c_warning__hover" value="rgb(221, 68, 0)"></css-var-color>
72
+ <label for="c_danger">Danger Color</label>
73
+ <css-var-color id="c_danger" value="rgb(255, 0, 51)"></css-var-color>
74
+ <label for="c_danger__hover">Danger Hover Color</label>
75
+ <css-var-color id="c_danger__hover" value="rgb(221, 0, 17)"></css-var-color>
76
+ <label for="c_input_accent">Input Accent Color</label>
77
+ <css-var-color id="c_input_accent" value="rgb(51, 102, 255)"></css-var-color>
78
+ <label for="c_input_border">Input Border Color</label>
79
+ <css-var-color id="c_input_border" value="var(--c_border)"></css-var-color>
80
+ <label for="c_highlight">Highlight Color</label>
81
+ <css-var-light-dark-color class="b ml mb ph" id="c_highlight" value="light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25))"></css-var-light-dark-color>
82
+ <label for="c_overlay">Overlay Color</label>
83
+ <css-var-color id="c_overlay" value="rgba(0, 0, 0, 0.5)"></css-var-color>
84
+
85
+ <h5>Fonts</h5>
86
+ <label for="ff_body">Body Font Family</label>
87
+ <css-var id="ff_body" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif"></css-var>
88
+ <label for="ff_heading">Heading Font Family</label>
89
+ <css-var id="ff_heading" value="&quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif"></css-var>
90
+ <label for="ff_mono">Monospace Font Family</label>
91
+ <css-var id="ff_mono" value="Consolas, monaco, monospace"></css-var>
92
+
93
+ <h5>Font Sizes</h5>
94
+ <label for="fs_base">Base Font Size</label>
95
+ <css-var id="fs_base" value="16px"></css-var>
96
+ <label for="fs_small">Small Font Size</label>
97
+ <css-var id="fs_small" value="calc(0.6 * var(--fs_base))"></css-var>
98
+ <label for="fs_large">Large Font Size</label>
99
+ <css-var id="fs_large" value="calc(1.5 * var(--fs_base))"></css-var>
100
+ <label for="fs_h6">H6 Font Size</label>
101
+ <css-var id="fs_h6" value="var(--fs_base)"></css-var>
102
+ <label for="fs_h5">H5 Font Size</label>
103
+ <css-var id="fs_h5" value="calc(1.25 * var(--fs_base))"></css-var>
104
+ <label for="fs_h4">H4 Font Size</label>
105
+ <css-var id="fs_h4" value="calc(1.5 * var(--fs_base))"></css-var>
106
+ <label for="fs_h3">H3 Font Size</label>
107
+ <css-var id="fs_h3" value="calc(1.75 * var(--fs_base))"></css-var>
108
+ <label for="fs_h2">H2 Font Size</label>
109
+ <css-var id="fs_h2" value="calc(2 * var(--fs_base))"></css-var>
110
+ <label for="fs_h1">H1 Font Size</label>
111
+ <css-var id="fs_h1" value="calc(2.5 * var(--fs_base))"></css-var>
112
+
113
+ <h5>Font Weights</h5>
114
+ <label for="fw_base">Base Font Weight</label>
115
+ <css-var id="fw_base" value="400"></css-var>
116
+ <label for="fw_bold">Bold Font Weight</label>
117
+ <css-var id="fw_bold" value="700"></css-var>
118
+
119
+ <h5>Spacing</h5>
120
+ <label for="spacer">Spacer</label>
121
+ <css-var id="spacer" value="1rem"></css-var>
122
+ <label for="spacer_h">Half Spacer</label>
123
+ <css-var id="spacer_h" value="calc(0.5 * var(--spacer))"></css-var>
124
+ <label for="spacer_q">Quarter Spacer</label>
125
+ <css-var id="spacer_q" value="calc(0.25 * var(--spacer))"></css-var>
126
+
127
+ <h5>Other</h5>
128
+ <label for="line_height">Line Height</label>
129
+ <css-var id="line_height" value="1.35em"></css-var>
130
+ <label for="container_width">Container Width</label>
131
+ <css-var id="container_width" value="90rem"></css-var>
132
+ <label for="animation_ms">Animation Duration</label>
133
+ <css-var id="animation_ms" value="256ms"></css-var>
134
+ <label for="radius">Border Radius</label>
135
+ <css-var id="radius" value="0.25rem"></css-var>
136
+ <label for="link_decoration">Link Decoration</label>
137
+ <css-var id="link_decoration" value="underline"></css-var>
138
+ <label for="input_padding">Input Padding</label>
139
+ <css-var id="input_padding" value="var(--spacer_h) var(--spacer)"></css-var>
140
+ <label for="input_border_width">Input Border Width</label>
141
+ <css-var id="input_border_width" value="1px"></css-var>
142
+ <label for="btn_padding">Button Padding</label>
143
+ <css-var id="btn_padding" value="var(--spacer_h) var(--spacer)"></css-var>
144
+
145
+ <h5>Text Colors</h5>
146
+ <label for="tc">Text Color</label>
147
+ <css-var id="tc" value="light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
148
+ <label for="tc_dark">Dark Text Color</label>
149
+ <css-var id="tc_dark" value="light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
150
+ <label for="tc_light">Light Text Color</label>
151
+ <css-var id="tc_light" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
152
+ <label for="tc_inv">Inverted Text Color</label>
153
+ <css-var id="tc_inv" value="light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
154
+ <label for="tc_muted">Muted Text Color</label>
155
+ <css-var id="tc_muted" value="light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5))"></css-var>
156
+ <label for="tc_on_primary">Text on Primary</label>
157
+ <css-var id="tc_on_primary" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
158
+ <label for="tc_on_secondary">Text on Secondary</label>
159
+ <css-var id="tc_on_secondary" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
160
+ <label for="tc_on_success">Text on Success</label>
161
+ <css-var id="tc_on_success" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
162
+ <label for="tc_on_warning">Text on Warning</label>
163
+ <css-var id="tc_on_warning" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
164
+ <label for="tc_on_danger">Text on Danger</label>
165
+ <css-var id="tc_on_danger" value="light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93))"></css-var>
166
+ <label for="tc_primary">Primary Text Color</label>
167
+ <css-var-light-dark-color class="b ml mb ph" id="tc_primary" value="light-dark(#36f, rgb(138, 180, 248))"></css-var-light-dark-color>
168
+ <label for="tc_secondary">Secondary Text Color</label>
169
+ <css-var-light-dark-color class="b ml mb ph" id="tc_secondary" value="light-dark(#93f, rgb(187, 102, 255))"></css-var-light-dark-color>
170
+ <label for="tc_success">Success Text Color</label>
171
+ <css-var-light-dark-color class="b ml mb ph" id="tc_success" value="light-dark(#080, rgb(102, 187, 102))"></css-var-light-dark-color>
172
+ <label for="tc_warning">Warning Text Color</label>
173
+ <css-var-light-dark-color class="b ml mb ph" id="tc_warning" value="light-dark(#f60, rgb(255, 153, 51))"></css-var-light-dark-color>
174
+ <label for="tc_danger">Danger Text Color</label>
175
+ <css-var-light-dark-color class="b ml mb ph" id="tc_danger" value="light-dark(#f03, rgb(255, 85, 119))"></css-var-light-dark-color>
176
+
177
+ <h5>Buttons</h5>
178
+ <label for="btn_box_shadow">Button Box Shadow</label>
179
+ <css-var id="btn_box_shadow" value="0 0 0 transparent"></css-var>
180
+ <label for="btn_box_shadow__hover">Button Hover Box Shadow</label>
181
+ <css-var id="btn_box_shadow__hover" value="0 0 0 transparent"></css-var>
182
+ <label for="btn_border">Button Border</label>
183
+ <css-var id="btn_border" value="transparent"></css-var>
184
+ <label for="btn_bg">Button Background</label>
185
+ <css-var-light-dark-color id="btn_bg" value="light-dark(rgb(221, 221, 221), rgb(170, 170, 170))"></css-var-light-dark-color>
186
+ <label for="btn_bg__hover">Button Hover Background</label>
187
+ <css-var-light-dark-color id="btn_bg__hover" value="light-dark(rgb(204, 204, 204), rgb(187, 187, 187))"></css-var-light-dark-color>
188
+ <label for="btn_tc">Button Text Color</label>
189
+ <css-var id="btn_tc" value="light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93))"></css-var>
190
+ <label for="btn_transparent__hover">Transparent Button Hover</label>
191
+ <css-var id="btn_transparent__hover" value="light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05))"></css-var>
192
+
193
+ <h5>Links</h5>
194
+ <label for="tc_link">Link Text Color</label>
195
+ <css-var id="tc_link" value="var(--tc_primary)"></css-var>
196
+ <label for="tc_link__hover">Link Hover Text Color</label>
197
+ <css-var id="tc_link__hover" value="var(--tc_secondary)"></css-var>
198
+ <label for="tc_link__inv">Inverted Link Text Color</label>
199
+ <css-var id="tc_link__inv" value="var(--tc_primary__inv)"></css-var>
200
+ <label for="tc_link__inv__hover">Inverted Link Hover Text Color</label>
201
+ <css-var id="tc_link__inv__hover" value="var(--tc_secondary__inv)"></css-var>
202
+
203
+ <h5>Focus</h5>
204
+ <label for="focus_shadow">Focus Shadow</label>
205
+ <css-var id="focus_shadow" value="0 0 2px 2px var(--c_primary)"></css-var>
206
+ <label for="focus_shadow_on_primary">Focus Shadow on Primary</label>
207
+ <css-var id="focus_shadow_on_primary" value="0 0 2px 2px var(--tc_on_primary)"></css-var>
208
+
209
+ <h5>Inputs</h5>
210
+ <label for="input_bg">Input Background</label>
211
+ <css-var id="input_bg" value="light-dark(white, var(--c_bg__alt))"></css-var>
212
+ <label for="input_tc">Input Text Color</label>
213
+ <css-var id="input_tc" value="light-dark(rgba(0, 0, 0, 0.93), var(--tc))"></css-var>
214
+
215
+ <h5>Shadows</h5>
216
+ <label for="drop_shadow">Drop Shadow</label>
217
+ <css-var id="drop_shadow" value="light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25))"></css-var>
218
+
219
+ <h5>Misc</h5>
220
+ <label for="date_picker_icon_filter">Date Picker Icon Filter</label>
221
+ <css-var id="date_picker_icon_filter" value="light-dark(invert(0), invert(1))"></css-var>
222
+ </div>
223
+ <div id="actions" class="d-f bb ph">
224
+ <div class="flex"></div>
225
+ <button id="save-theme" class="primary">Save Theme</button>
226
+ </div>
227
+ <iframe id="docs" src="index.html"></iframe>
228
+ </div>
229
+ <script>
230
+ const iframe = document.getElementById('docs');
231
+ let iframeDoc;
232
+ const defaults = {};
233
+
234
+ document.querySelectorAll('#vars css-var, #vars css-var-color, #vars css-var-light-dark-color').forEach(cssVar => {
235
+ defaults[cssVar.id] = cssVar.value;
236
+ });
237
+
238
+ iframe.addEventListener('load', () => {
239
+ iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
240
+ });
241
+
242
+ function updateTheme() {
243
+ const cssVars = document.querySelectorAll('#vars css-var, #vars css-var-color, #vars css-var-light-dark-color');
244
+ const changedVars = {};
245
+ cssVars.forEach(cssVar => {
246
+ if (cssVar.value !== defaults[cssVar.id]) {
247
+ const varName = '--' + cssVar.id;
248
+ changedVars[varName] = cssVar.value;
249
+ }
250
+ });
251
+ if (!iframeDoc) return;
252
+ const css = `:root {\n${Object.entries(changedVars).map(([k, v]) => ` ${k}: ${v};`).join('\n')}\n}`;
253
+ let style = iframeDoc.getElementById('dynamic-theme');
254
+ if (!style) {
255
+ style = iframeDoc.createElement('style');
256
+ style.id = 'dynamic-theme';
257
+ iframeDoc.head.appendChild(style);
258
+ }
259
+ style.textContent = css;
260
+ }
261
+
262
+ document.querySelectorAll('#vars css-var, #vars css-var-color').forEach(cssVar => {
263
+ cssVar.addEventListener('input', updateTheme);
264
+ });
265
+
266
+ document.getElementById('save-theme').addEventListener('click', () => {
267
+ const cssVars = document.querySelectorAll('#vars css-var, #vars css-var-color');
268
+ const changedVars = {};
269
+ cssVars.forEach(cssVar => {
270
+ if (cssVar.value !== defaults[cssVar.id]) {
271
+ const varName = '--' + cssVar.id;
272
+ changedVars[varName] = cssVar.value;
273
+ }
274
+ });
275
+ const css = `:root {\n${Object.entries(changedVars).map(([k, v]) => ` ${k}: ${v};`).join('\n')}\n}`;
276
+ const blob = new Blob([css], { type: 'text/css' });
277
+ const url = URL.createObjectURL(blob);
278
+ const a = document.createElement('a');
279
+ a.href = url;
280
+ a.download = 'theme.css';
281
+ a.click();
282
+ URL.revokeObjectURL(url);
283
+ });
284
+ </script>
285
+ </body>
286
+ </html>
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Dustin Poissant
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.