kempo-css 1.0.7 → 1.0.9

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "kempo-css",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "",
-  "main": "build.js",
+  "main": "scripts/build.js",
   "scripts": {
-    "build": "node build.js",
-    "build:watch": "node build.js --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "node scripts/build.js",
+    "build:watch": "node scripts/build.js --watch",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "docs": "npx kempo-server --root docs --port 4048"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
+  "license": "CC-BY-NC-SA-2.0",
   "devDependencies": {
     "clean-css-cli": "^5.6.3"
   },
@@ -19,6 +20,8 @@
     "url": "https://github.com/dustinpoissant/kempo-css"
   },
   "dependencies": {
-    "@dustinpoissant/device-frame": "^1.0.1"
+    "kempo-server": "^1.9.1",
+    "kempo-ui": "^0.0.36",
+    "terser": "^5.44.1"
   }
 }

package/{build.js → scripts/build.js}

@@ -3,6 +3,7 @@
 const { execSync } = require('child_process');
 const fs = require('fs');
 const path = require('path');
+const { minify } = require('terser');
 
 // Check for watch flag
 const isWatchMode = process.argv.includes('--watch');
@@ -62,8 +63,80 @@ inputFiles.forEach((inputFile, index) => {
   }
 });
 
-console.log('Build complete!');
-console.log(`Minified files are in the ${outputDir}/ directory`);
+// Process and minify components
+async function processComponents(){
+  const componentsDir = 'src/components';
+  const docsComponentsDir = 'docs/components';
+
+  if(!fs.existsSync(componentsDir)){
+    return;
+  }
+
+  if(!fs.existsSync(docsComponentsDir)){
+    fs.mkdirSync(docsComponentsDir, { recursive: true });
+    console.log(`Created ${docsComponentsDir}/ directory`);
+  }
+
+  const componentFiles = fs.readdirSync(componentsDir).filter(file => file.endsWith('.js'));
+  
+  console.log('\nProcessing JavaScript files...');
+  for(const file of componentFiles){
+    const srcPath = path.join(componentsDir, file);
+    const destPath = path.join(docsComponentsDir, file);
+    
+    try{
+      const code = fs.readFileSync(srcPath, 'utf-8');
+      
+      if(file.endsWith('.min.js')){
+        fs.writeFileSync(destPath, code);
+        console.log(`Copied ${srcPath} → ${destPath} (already minified)`);
+      }else{
+        console.log(`Minifying ${srcPath}...`);
+        const result = await minify(code);
+        fs.writeFileSync(destPath, result.code);
+        const originalSize = Buffer.byteLength(code, 'utf-8');
+        const minifiedSize = Buffer.byteLength(result.code, 'utf-8');
+        const savings = ((originalSize - minifiedSize) / originalSize * 100).toFixed(1);
+        console.log(`   Original: ${(originalSize / 1024).toFixed(1)}KB`);
+        console.log(`   Minified: ${(minifiedSize / 1024).toFixed(1)}KB`);
+        console.log(`   Savings: ${savings}%`);
+      }
+    }catch(error){
+      console.error(`Error processing ${srcPath}:`, error.message);
+    }
+  }
+}
+
+processComponents().then(() => {
+
+// Copy CSS to docs
+const cssFiles = ['src/kempo.css', 'src/kempo-hljs.css'];
+const docsDir = 'docs';
+
+cssFiles.forEach(file => {
+  if(fs.existsSync(file)){
+    const fileName = path.basename(file);
+    const destPath = path.join(docsDir, fileName);
+    fs.copyFileSync(file, destPath);
+    console.log(`Copied ${file} → ${destPath}`);
+  }
+});
+
+// Copy minified CSS to docs
+const minifiedFiles = fs.readdirSync(outputDir).filter(file => file.endsWith('.css'));
+minifiedFiles.forEach(file => {
+  const srcPath = path.join(outputDir, file);
+  const destPath = path.join(docsDir, file);
+  fs.copyFileSync(srcPath, destPath);
+  console.log(`Copied ${srcPath} → ${destPath}`);
+});
+
+  console.log('\nBuild complete!');
+  console.log(`Minified files are in the ${outputDir}/ directory`);
+}).catch(error => {
+  console.error('Build error:', error);
+  process.exit(1);
+});
 
 // Watch mode functionality
 if (isWatchMode) {

package/src/components/ThemePropertyInput.js

@@ -0,0 +1,154 @@
+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`
+    :host {
+      display: block;
+    }
+    label {
+      display: block;
+      margin-bottom: 0.25rem;
+    }
+    .input-wrapper {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+    }
+    .mode-select {
+      width: 100px;
+      flex-shrink: 0;
+    }
+    .value-input {
+      flex: 1;
+    }
+  `;
+
+  constructor() {
+    super();
+    this.propName = '';
+    this.value = '';
+    this.availableProperties = [];
+    this.mode = 'color';
+    this.initialColor = '';
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    
+    if(this.value?.startsWith('var(')) {
+      this.mode = 'var';
+    }
+  }
+
+  firstUpdated() {
+    this.attachColorPickerListener();
+  }
+
+  updated(changedProperties) {
+    super.updated?.(changedProperties);
+    this.attachColorPickerListener();
+  }
+
+  attachColorPickerListener() {
+    if(this.mode === 'color') {
+      const colorPicker = this.shadowRoot?.querySelector('k-color-picker');
+      if(colorPicker && !colorPicker._hasChangeListener) {
+        colorPicker._hasChangeListener = true;
+        colorPicker.addEventListener('change', this.handleColorChange);
+        colorPicker.addEventListener('input', this.handleColorChange);
+      }
+    }
+  }
+
+  /*
+    Event Handlers
+  */
+
+  handleModeChange = (e) => {
+    this.mode = e.target.value;
+    
+    if(this.mode === 'var' && !this.value.startsWith('var(')) {
+      this.value = this.availableProperties[0] ? `var(${this.availableProperties[0]})` : '';
+    } else if(this.mode === 'color' && this.value.startsWith('var(')) {
+      this.value = this.initialColor || '#000000';
+    }
+    
+    this.emitChange();
+  };
+
+  handleVarInput = (e) => {
+    const varName = e.target.value;
+    this.value = varName.startsWith('var(') ? varName : `var(${varName})`;
+    this.emitChange();
+  };
+
+  handleColorChange = (e) => {
+    this.value = e.target.value;
+    this.emitChange();
+  };
+
+  /*
+    Utility Functions
+  */
+
+  emitChange() {
+    this.dispatchEvent(new CustomEvent('value-change', {
+      detail: { propName: this.propName, value: this.value },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  /*
+    Rendering
+  */
+
+  render() {
+    const datalistId = `${this.propName}-datalist`;
+    const varName = this.value?.startsWith('var(') 
+      ? this.value.slice(4, -1).trim() 
+      : '';
+
+    return html`
+      <label>${this.propName}</label>
+      <div class="input-wrapper">
+        <select class="mode-select" .value=${this.mode} @change=${this.handleModeChange}>
+          <option value="var">Var</option>
+          <option value="color">Color</option>
+        </select>
+
+        ${this.mode === 'var' 
+          ? html`
+            <input 
+              class="value-input"
+              list=${datalistId}
+              .value=${varName}
+              @input=${this.handleVarInput}
+              placeholder="--property-name"
+            />
+            <datalist id=${datalistId}>
+              ${this.availableProperties.map(prop => html`<option value=${prop}></option>`)}
+            </datalist>
+          `
+          : html`
+            <k-color-picker 
+              class="value-input"
+              value=${this.value}
+            ></k-color-picker>
+          `
+        }
+      </div>
+    `;
+  }
+}
+
+customElements.define('k-theme-property-input', ThemePropertyInput);

package/src/kempo-hljs.css

@@ -0,0 +1,125 @@
+:root {
+  --c_text: light-dark(#000000, #DCDCDC);
+  --c_keyword: light-dark(#0000ff, #569CD6);
+  --c_builtin: light-dark(#00b0e8, #4EC9B0);
+  --c_number: light-dark(#709756, #B8D7A3);
+  --c_string: light-dark(#a31515, #D69D85);
+  --c_regex: light-dark(#914525, #9A5334);
+  --c_function: inherit;
+  --c_comment: light-dark(#008000, #57A64A);
+  --c_doc: light-dark(#808080, #608B4E);
+  --c_tag: light-dark(#7d7d7d, #9B9B9B);
+  --c_var: light-dark(#b436bf, #BD63C5);
+  --c_attr: light-dark(#ff0000, #9CDCFE);
+  --c_section: light-dark(#a31515, #ffd700);
+  --c_selector: light-dark(#0000ff, #569CD6);
+  --c_addition: light-dark(#a31515, #144212);
+  --c_deletion: light-dark(#2b91af, #600);
+  --c_caret: light-dark(black, white);
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  color: var(--c_text);
+}
+
+.hljs-keyword,
+.hljs-literal,
+.hljs-symbol,
+.hljs-name,
+.hljs-link {
+  color: var(--c_keyword);
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+.hljs-built_in,
+.hljs-type {
+  color: var(--c_builtin);
+}
+
+.hljs-number,
+.hljs-class {
+  color: var(--c_number);
+}
+
+.hljs-string,
+.hljs-meta-string {
+  color: var(--c_string);
+}
+
+.hljs-regexp,
+.hljs-template-tag {
+  color: var(--c_regex);
+}
+
+.hljs-subst,
+.hljs-function,
+.hljs-title,
+.hljs-params,
+.hljs-formula {
+  color: var(--c_function);
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--c_comment);
+  font-style: italic
+}
+
+.hljs-doctag {
+  color: var(--c_doc);
+}
+
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-tag {
+  color: var(--c_tag);
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: var(--c_var);
+}
+
+.hljs-attr,
+.hljs-attribute,
+.hljs-builtin-name {
+  color: var(--c_attr);
+}
+
+.hljs-section {
+  color: var(--c_section);
+}
+
+.hljs-emphasis {
+  font-style: italic
+}
+
+.hljs-strong {
+  font-weight: bold
+}
+
+.hljs-bullet,
+.hljs-selector-tag,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--c_selector);
+}
+
+.hljs-addition {
+  background-color: var(--c_addition);
+  display: inline-block;
+  width: 100%
+}
+
+.hljs-deletion {
+  background-color: var(--c_deletion);
+  display: inline-block;
+  width: 100%
+}