kempo-css 1.0.9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/.config.json +1 -3
- package/docs/components/ThemePropertyInput.js +1 -1
- package/docs/examples/responsive-grid.html +1 -1
- package/docs/index.html +7 -7
- package/docs/init.js +1 -1
- package/docs/theme-editor.html +11 -11
- package/package.json +1 -2
- package/src/components/ThemePropertyInput.js +2 -2
- package/.github/prompts/build-theme-editor.prompt.md +0 -89
package/docs/.config.json
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"customRoutes": {
|
|
3
3
|
"/kempo.min.css": "../src/kempo.css",
|
|
4
|
-
"/kempo-hljs.min.css": "../src/kempo-hljs.css"
|
|
5
|
-
"/kempo-ui/**": "../node_modules/kempo-ui/dist/**",
|
|
6
|
-
"/icons/**": "../node_modules/kempo-ui/icons/**"
|
|
4
|
+
"/kempo-hljs.min.css": "../src/kempo-hljs.css"
|
|
7
5
|
},
|
|
8
6
|
"middleware": {
|
|
9
7
|
"logging": {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import ShadowComponent from"/kempo-ui/components/ShadowComponent.js";import{html,css}from"/kempo-ui/lit-all.min.js";export default class ThemePropertyInput extends ShadowComponent{static properties={propName:{type:String,attribute:"prop-name"},value:{type:String},availableProperties:{type:Array,attribute:"available-properties"},mode:{type:String},initialColor:{type:String,attribute:"initial-color"}};static styles=css`
|
|
1
|
+
import ShadowComponent from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ShadowComponent.js";import{html,css}from"https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/lit-all.min.js";export default class ThemePropertyInput extends ShadowComponent{static properties={propName:{type:String,attribute:"prop-name"},value:{type:String},availableProperties:{type:Array,attribute:"available-properties"},mode:{type:String},initialColor:{type:String,attribute:"initial-color"}};static styles=css`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|
|
@@ -28,6 +28,6 @@
|
|
|
28
28
|
col d-span-3 t-span-6 m-span-12
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
31
|
-
<script type="module" src="
|
|
31
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ThemeSwitcher.js"></script>
|
|
32
32
|
</body>
|
|
33
33
|
</html>
|
package/docs/index.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="manifest" href="./manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="./kempo.min.css" />
|
|
10
10
|
<link rel="stylesheet" href="./kempo-hljs.min.css" />
|
|
11
|
-
<script src="./init.js"
|
|
11
|
+
<script src="./init.js"></script>
|
|
12
12
|
</head>
|
|
13
13
|
<body>
|
|
14
14
|
<nav class="d-f bg-primary fixed">
|
|
@@ -95,11 +95,11 @@
|
|
|
95
95
|
</main>
|
|
96
96
|
<div style="height:33vh"></div>
|
|
97
97
|
<script src="./nav.js" type="module"></script>
|
|
98
|
-
<script src="
|
|
99
|
-
<script src="
|
|
100
|
-
<script src="
|
|
101
|
-
<script src="
|
|
102
|
-
<script src="
|
|
103
|
-
<script src="
|
|
98
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/SideMenu.js"></script>
|
|
99
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Icon.js"></script>
|
|
100
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ThemeSwitcher.js"></script>
|
|
101
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Import.js"></script>
|
|
102
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Resize.js"></script>
|
|
103
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Card.js"></script>
|
|
104
104
|
</body>
|
|
105
105
|
</html>
|
package/docs/init.js
CHANGED
package/docs/theme-editor.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
<link rel="manifest" href="./manifest.json" />
|
|
9
9
|
<link rel="stylesheet" href="./kempo.min.css" />
|
|
10
10
|
<link rel="stylesheet" href="./kempo-hljs.min.css" />
|
|
11
|
-
<script src="./init.js"
|
|
11
|
+
<script src="./init.js"></script>
|
|
12
12
|
<style>
|
|
13
13
|
html {
|
|
14
14
|
scrollbar-gutter: unset;
|
|
@@ -92,18 +92,18 @@
|
|
|
92
92
|
</k-split>
|
|
93
93
|
</div>
|
|
94
94
|
<script src="./nav.js" type="module"></script>
|
|
95
|
-
<script src="
|
|
96
|
-
<script src="
|
|
97
|
-
<script src="
|
|
98
|
-
<script src="
|
|
99
|
-
<script src="
|
|
100
|
-
<script src="
|
|
101
|
-
<script src="
|
|
102
|
-
<script src="
|
|
103
|
-
<script src="
|
|
95
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/SideMenu.js"></script>
|
|
96
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Split.js"></script>
|
|
97
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Icon.js"></script>
|
|
98
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ThemeSwitcher.js"></script>
|
|
99
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Import.js"></script>
|
|
100
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Resize.js"></script>
|
|
101
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Card.js"></script>
|
|
102
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ColorPicker.js"></script>
|
|
103
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/Dialog.js"></script>
|
|
104
104
|
<script src="./components/ThemePropertyInput.js" type="module"></script>
|
|
105
105
|
<script type="module">
|
|
106
|
-
import theme from '/kempo-ui/utils/theme.js';
|
|
106
|
+
import theme from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/utils/theme.js';
|
|
107
107
|
|
|
108
108
|
/*
|
|
109
109
|
Simple Context for storing theme CSS
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "kempo-css",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "scripts/build.js",
|
|
6
6
|
"scripts": {
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"kempo-server": "^1.9.1",
|
|
24
|
-
"kempo-ui": "^0.0.36",
|
|
25
24
|
"terser": "^5.44.1"
|
|
26
25
|
}
|
|
27
26
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import ShadowComponent from '/kempo-ui/components/ShadowComponent.js';
|
|
2
|
-
import { html, css } from '/kempo-ui/lit-all.min.js';
|
|
1
|
+
import ShadowComponent from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/components/ShadowComponent.js';
|
|
2
|
+
import { html, css } from 'https://cdn.jsdelivr.net/npm/kempo-ui@0.0.36/dist/lit-all.min.js';
|
|
3
3
|
|
|
4
4
|
export default class ThemePropertyInput extends ShadowComponent {
|
|
5
5
|
static properties = {
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
mode: "agent"
|
|
3
|
-
tools: ['edit', 'runNotebooks', 'search', 'new', 'runCommands', 'runTasks', 'chromedevtools/chrome-devtools-mcp/*', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'openSimpleBrowser', 'fetch', 'githubRepo', 'extensions', 'todos', 'runSubagent']
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Theme Editor
|
|
7
|
-
|
|
8
|
-
## Background
|
|
9
|
-
kempo-css can be customized by the consumer by creating their own theme file (css) which overwrites the CSS Custom Properties defined in `src/kempo.css`, the file should not overwrite the actual style properties of elements, only overwrite CSS Custom Properties.
|
|
10
|
-
|
|
11
|
-
## Description
|
|
12
|
-
|
|
13
|
-
### Page Layout
|
|
14
|
-
The theme editor" is a GUI which allows consumers to create and download a theme file. The page should be spit into 3 sections:
|
|
15
|
-
1. Navigation: The navbar is on top of the page.
|
|
16
|
-
2. Theme Editor: A set of inputs on the left side of the page, this should be full height (except the navigation) and be independently scrollable.
|
|
17
|
-
- This should have two sections, the top is a download / upload buttons, and a theme select.
|
|
18
|
-
3. Demo: HTML Elements that serve as examples to the user so they can see how their changes will affect the page. This should also be independently scrollable.
|
|
19
|
-
|
|
20
|
-
### Changing the theme
|
|
21
|
-
There should be two ways to change the theme.
|
|
22
|
-
- A `k-theme-switcher` component in the navigation bar (supports auto/light/dark) - already in place.
|
|
23
|
-
- A select dropdown on the top of the theme editor which allows the user to choose between "dark" and "light" (no "auto" option). This controls which theme's colors are being edited in the color pickers below.
|
|
24
|
-
- The select dropdown should subscribe to the theme context to stay in sync when the theme changes via the `k-theme-switcher`. When "auto" is detected, resolve it to the actual current theme (light or dark) using the theme util.
|
|
25
|
-
|
|
26
|
-
## Resources
|
|
27
|
-
|
|
28
|
-
### Kempo-UI
|
|
29
|
-
The theme editor should be built using the kempo-ui component library, which is based on Lit. Kempo-UI has already been installed as an external library.
|
|
30
|
-
- If new components need to be created for this feature, they should be placed in `src/components/` following the project's base component architecture (ShadowComponent, LightComponent, or HybridComponent).
|
|
31
|
-
- The "theme" utility should be used to get / set the theme and subscribe to theme changes.
|
|
32
|
-
- https://dustinpoissant.github.io/kempo-ui/utils/theme.html
|
|
33
|
-
- The "context" utility should be used to store the theme overwrites and synchronize UI state.
|
|
34
|
-
- https://dustinpoissant.github.io/kempo-ui/utils/context.html
|
|
35
|
-
- The "Color Picker" component should be used in the GUI.
|
|
36
|
-
- https://dustinpoissant.github.io/kempo-ui/components/color-picker.html
|
|
37
|
-
- The "Dialog" component should be used to allow the user to upload an existing theme for editing.
|
|
38
|
-
- https://dustinpoissant.github.io/kempo-ui/components/dialog.html
|
|
39
|
-
|
|
40
|
-
### chrome-devtools-mcp
|
|
41
|
-
The page is already running at http://localhost:4048/theme-editor.html there is no need to start a server, just use the chrome-devtools-mcp to verify that the theme editor is working exactly as expected.
|
|
42
|
-
|
|
43
|
-
## Phases
|
|
44
|
-
|
|
45
|
-
0. Create a custom component `k-theme-property-input` in `src/components/` that handles CSS custom property values.
|
|
46
|
-
- This component should detect if the value is a CSS custom property reference (contains `var(--`).
|
|
47
|
-
- It should provide a toggle/switch to choose between "Custom Value" and "Reference Property".
|
|
48
|
-
- When in "Custom Value" mode for colors, show a `k-color-picker`.
|
|
49
|
-
- When in "Reference Property" mode, show a select dropdown listing all available CSS custom properties (filtered to relevant types, e.g., only color properties for color values).
|
|
50
|
-
- For properties with `light-dark()`, handle both the light and dark values, which may each independently be either a color or a property reference.
|
|
51
|
-
- The component should emit a change event with the full value (e.g., `var(--c_primary)` or `rgb(51, 102, 255)`).
|
|
52
|
-
- Use the chrome-devtools-mcp to verify this component works correctly in isolation before moving on.
|
|
53
|
-
1. Create a JavaScript object that is the default theme.
|
|
54
|
-
- This can be determined by looking at `src/kempo.css` and seeing what CSS Custom Properties are defined in the `:root` rule.
|
|
55
|
-
- The object structure should store light and dark values separately for properties using `light-dark()`, and preserve `var()` references:
|
|
56
|
-
2. Create the inputs for the CSS Custom Properties, the default values should be the default values from phase 1.
|
|
57
|
-
- For color CSS Custom Properties that use `light-dark()`, show one `k-theme-property-input` per property. The displayed value should reflect the current editing theme (selected in the theme editor dropdown, not necessarily the applied theme).
|
|
58
|
-
- The `k-theme-property-input` component should handle both direct color values and `var()` references automatically.
|
|
59
|
-
- Group inputs logically: Colors first (primary, secondary, danger, warning, success, backgrounds, text colors), then typography (fonts, sizes, weights), then spacing/layout, then other properties.
|
|
60
|
-
- For each input, add a label showing the CSS variable name (e.g., "Primary Color (--c_primary)").
|
|
61
|
-
- The demo content is already loaded via `<k-import src="./docs.inc.html">` in the right pane and includes examples of all themed elements.
|
|
62
|
-
- Use the chrome-devtools-mcp to verify the page looks correct before moving on to the next phase.s-is
|
|
63
|
-
// ... etc
|
|
64
|
-
}
|
|
65
|
-
```
|
|
66
|
-
- Log it to the devtools console and verify using the chrome-devtools-mcp before moving on to the next phase.
|
|
67
|
-
2. Create the inputs for the CSS Custom Properties, the default values should be the default values from phase 1.
|
|
68
|
-
- For color CSS Custom Properties that use `light-dark()`, show one `k-color-picker` per property. The displayed value should reflect the current editing theme (selected in the theme editor dropdown, not necessarily the applied theme).
|
|
69
|
-
- Group inputs logically: Colors first (primary, secondary, danger, warning, success, backgrounds, text colors), then typography (fonts, sizes, weights), then spacing/layout, then other properties.
|
|
70
|
-
- For each color picker, add a label showing the CSS variable name (e.g., "Primary Color (--c_primary)").
|
|
71
|
-
- The demo content is already loaded via `<k-import src="./docs.inc.html">` in the right pane and includes examples of all themed elements.
|
|
72
|
-
- Use the chrome-devtools-mcp to verify the page looks correct before moving on to the next phase.
|
|
73
|
-
3. Create an event listener that listens for any change on any input, creates a new "theme" object, compares that to the default theme object from phase 1 to create a "diff" object.
|
|
74
|
-
4. Create a theme css string from the diff object.
|
|
75
|
-
- Convert the diff object back into CSS custom properties with `light-dark()` functions where appropriate.
|
|
76
|
-
- The CSS should be wrapped in a `:root` selector.
|
|
77
|
-
- Apply this theme by injecting it into a `<style id="custom-theme">` tag in the head, replacing any existing custom theme.
|
|
78
|
-
- Save the CSS string to kempo-ui context for later download.
|
|
79
|
-
- Log the CSS string to the devtools console.
|
|
80
|
-
- Use the chrome-devtools-mcp to verify that the page looks correct and the CSS string in the devtools console looks correct:
|
|
81
|
-
- Change a color input for the light theme, verify the page updates immediately when in light mode.
|
|
82
|
-
- Switch to dark theme in the editor dropdown, change a dark color, verify the page updates when in dark mode.
|
|
83
|
-
- Change a non-color input (e.g., font size, spacing) and verify the page updates across both themes.sole looks correct.
|
|
84
|
-
- Change a color input and verify that the page is updating and looks by looking at the demo.
|
|
85
|
-
- Change a non-color input and verify that the page is updating and looks correct by looking at the demo.
|
|
86
|
-
5. Hookup the "Download" button so that when the user clicks it, it downloads the minimal (diff) theme.
|
|
87
|
-
- If you have a way to verify this automatically attempt it but I might have to verify this manually, im not sure if AI agents can save the file and verify it. Ask me to save the file, i will then attach the theme file to the chat context so you can verify it looks correct.
|
|
88
|
-
6. Hookup the "Upload" button, it should use the kempo-ui Dialog to open a dialog that allows the user to upload a theme file, then when they click "Apply" it will will update the inputs on the page.
|
|
89
|
-
- If you have a way to verify this automatically attempt it, but I might have to verify this manually.
|