kempo-css 1.1.1 → 1.2.0

package/docs/docs.inc.html

@@ -806,6 +806,45 @@
   </div>
 </div>
 
+<h2 id="drop-shadow">Drop Shadow</h2>
+<p>Add the <code>drop-shadow</code> class to add a box shadow effect to any element. The shadow automatically adjusts for light and dark themes.</p>
+<div class="row -mx">
+  <div class="col m-span-12 px">
+    <k-card label="HTML">
+      <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">"drop-shadow"</span>&gt;</span>Drop Shadow<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">"card drop-shadow"</span>&gt;</span>Card with Drop Shadow<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre>
+    </k-card>
+  </div>
+  <div class="col m-span-12 px">
+    <k-card label="Output">
+      <div class="d-ib p bg-default r drop-shadow mb">Drop Shadow</div>
+      <div class="card drop-shadow">Card with Drop Shadow</div>
+    </k-card>
+  </div>
+</div>
+<h3>Drop Shadow CSS Variables</h3>
+<table>
+  <thead>
+    <tr>
+      <th>Variable</th>
+      <th>Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><code>--drop_shadow</code></td>
+      <td>The active drop shadow (automatically set based on theme)</td>
+    </tr>
+    <tr>
+      <td><code>--drop_shadow__light</code></td>
+      <td>Drop shadow for light theme</td>
+    </tr>
+    <tr>
+      <td><code>--drop_shadow__dark</code></td>
+      <td>Drop shadow for dark theme (stronger for better visibility)</td>
+    </tr>
+  </tbody>
+</table>
+
 <h2 id="noScroll">Disable Body Scrolling</h2>
 <p>Add the <code>no-scroll</code> class to the body to temparily disable body scrolling, this is used for things
   like dialogs and side menus that temporarily take over the page.</p>

package/docs/kempo.css

@@ -1,3 +1,6 @@
+/*
+  CSS Variables
+*/
 :root {
   color-scheme: light;
   --ff_body: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -32,7 +35,7 @@
   --c_bg__alt: light-dark(rgb(238, 238, 238), rgb(34, 34, 34));
   --c_overscroll: light-dark(rgb(255, 255, 255), rgb(0, 0, 0));
   --c_border: light-dark(rgb(204, 204, 204), rgb(119, 119, 119));
-  --c_border__inv: light-dark(var(--d_c_bg_border), rgb(204, 204, 204));
+  --c_border__inv: light-dark(rgb(119, 119, 119), rgb(204, 204, 204));
   --c_primary: rgb(51, 102, 255);
   --c_primary__hover: rgb(17, 68, 221);
   --c_secondary: rgb(153, 51, 255);
@@ -77,7 +80,9 @@
   --focus_shadow_on_primary: 0 0 2px 2px var(--tc_on_primary);
   --input_bg: light-dark(white, var(--c_bg__alt));
   --input_tc: light-dark(rgba(0, 0, 0, 0.93), var(--tc));
-  --drop_shadow: light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));
+  --drop_shadow__light: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);
+  --drop_shadow__dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
+  --drop_shadow: var(--drop_shadow__light);
   --date_picker_icon_filter: light-dark(invert(0), invert(1));
 }
 [theme="light"] {
@@ -86,12 +91,21 @@
 
 [theme="dark"] {
   color-scheme: dark;
+  --drop_shadow: var(--drop_shadow__dark);
 }
 
 [theme="auto"] {
   color-scheme: light dark;
 }
+@media (prefers-color-scheme: dark) {
+  [theme="auto"] {
+    --drop_shadow: var(--drop_shadow__dark);
+  }
+}
 
+/*
+  Base / Reset
+*/
 :root {
   interpolate-size: allow-keywords;
 }
@@ -600,6 +614,10 @@ li ul {
   .m-cols-9 { grid-template-columns: repeat(9, 1fr); }
   .m-cols-10 { grid-template-columns: repeat(10, 1fr); }
 }
+
+/*
+  Buttons
+*/
 button:not(.no-btn):not(.no-style),
 .btn,
 input[type="button"],
@@ -772,6 +790,10 @@ input[type="reset"].link {
   display: block;
   width: 100%;
 }
+
+/*
+  Forms
+*/
 input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),
 select,
 textarea {
@@ -864,6 +886,10 @@ input[type="week"]::-webkit-calendar-picker-indicator,
 input[type="search"]::-webkit-search-cancel-button {
   filter: var(--date_picker_icon_filter);
 }
+
+/*
+  Tables
+*/
 .table-wrapper {
   overflow-x: auto;
 }
@@ -898,6 +924,10 @@ tr:last-child td:first-child {
 tr:last-child td:last-child {
   border-bottom-right-radius: var(--radius);
 }
+
+/*
+  Colors
+*/
 .bg-default {
   background-color: var(--c_bg);
   color: var(--tc);
@@ -1003,6 +1033,10 @@ tr:last-child td:last-child {
 .tc-muted {
   color: var(--tc_muted);
 }
+
+/*
+  Components
+*/
 .card {
   border: 1px solid var(--c_border);
   border-radius: var(--radius);

package/docs/theme-editor.html

@@ -199,7 +199,9 @@
       "--focus_shadow_on_primary": "0 0 2px 2px var(--tc_on_primary)",
       "--input_bg": { light: "white", dark: "var(--c_bg__alt)" },
       "--input_tc": { light: "rgba(0, 0, 0, 0.93)", dark: "var(--tc)" },
-      "--drop_shadow": { light: "0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)", dark: "0 0.25rem 0.5rem rgba(0, 0, 0, 0.25)" },
+      "--drop_shadow__light": "0 0.25rem 0.5rem rgba(0, 0, 0, 0.333)",
+      "--drop_shadow__dark": "0 0.25rem 0.5rem rgba(0, 0, 0, 0.5)",
+      "--drop_shadow": { light: "var(--drop_shadow__light)", dark: "var(--drop_shadow__dark)" },
       "--date_picker_icon_filter": { light: "invert(0)", dark: "invert(1)" }
     };
 
@@ -282,7 +284,8 @@
         title: 'Focus & Effects',
         props: [
           '--focus_shadow', '--focus_shadow_on_primary',
-          '--drop_shadow', '--date_picker_icon_filter',
+          '--drop_shadow', '--drop_shadow__light', '--drop_shadow__dark',
+          '--date_picker_icon_filter',
           '--c_highlight', '--c_overlay'
         ]
       },

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "kempo-css",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
+  "type": "module",
   "main": "scripts/build.js",
   "scripts": {
     "build": "node scripts/build.js",
@@ -21,6 +22,7 @@
   },
   "dependencies": {
     "kempo-server": "^1.9.1",
+    "kempo-testing-framework": "^1.4.0",
     "terser": "^5.44.1"
   }
 }

package/scripts/build.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-const { minify } = require('terser');
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+import { minify } from 'terser';
 
 // Check for watch flag
 const isWatchMode = process.argv.includes('--watch');

package/src/kempo.css

@@ -1,3 +1,6 @@
+/*
+  CSS Variables
+*/
 :root {
   color-scheme: light;
   --ff_body: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -32,7 +35,7 @@
   --c_bg__alt: light-dark(rgb(238, 238, 238), rgb(34, 34, 34));
   --c_overscroll: light-dark(rgb(255, 255, 255), rgb(0, 0, 0));
   --c_border: light-dark(rgb(204, 204, 204), rgb(119, 119, 119));
-  --c_border__inv: light-dark(var(--d_c_bg_border), rgb(204, 204, 204));
+  --c_border__inv: light-dark(rgb(119, 119, 119), rgb(204, 204, 204));
   --c_primary: rgb(51, 102, 255);
   --c_primary__hover: rgb(17, 68, 221);
   --c_secondary: rgb(153, 51, 255);
@@ -77,7 +80,9 @@
   --focus_shadow_on_primary: 0 0 2px 2px var(--tc_on_primary);
   --input_bg: light-dark(white, var(--c_bg__alt));
   --input_tc: light-dark(rgba(0, 0, 0, 0.93), var(--tc));
-  --drop_shadow: light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));
+  --drop_shadow__light: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.333);
+  --drop_shadow__dark: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
+  --drop_shadow: var(--drop_shadow__light);
   --date_picker_icon_filter: light-dark(invert(0), invert(1));
 }
 [theme="light"] {
@@ -86,12 +91,21 @@
 
 [theme="dark"] {
   color-scheme: dark;
+  --drop_shadow: var(--drop_shadow__dark);
 }
 
 [theme="auto"] {
   color-scheme: light dark;
 }
+@media (prefers-color-scheme: dark) {
+  [theme="auto"] {
+    --drop_shadow: var(--drop_shadow__dark);
+  }
+}
 
+/*
+  Base / Reset
+*/
 :root {
   interpolate-size: allow-keywords;
 }
@@ -600,6 +614,10 @@ li ul {
   .m-cols-9 { grid-template-columns: repeat(9, 1fr); }
   .m-cols-10 { grid-template-columns: repeat(10, 1fr); }
 }
+
+/*
+  Buttons
+*/
 button:not(.no-btn):not(.no-style),
 .btn,
 input[type="button"],
@@ -772,6 +790,10 @@ input[type="reset"].link {
   display: block;
   width: 100%;
 }
+
+/*
+  Forms
+*/
 input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="radio"]):not([type="checkbox"]),
 select,
 textarea {
@@ -864,6 +886,10 @@ input[type="week"]::-webkit-calendar-picker-indicator,
 input[type="search"]::-webkit-search-cancel-button {
   filter: var(--date_picker_icon_filter);
 }
+
+/*
+  Tables
+*/
 .table-wrapper {
   overflow-x: auto;
 }
@@ -898,6 +924,10 @@ tr:last-child td:first-child {
 tr:last-child td:last-child {
   border-bottom-right-radius: var(--radius);
 }
+
+/*
+  Colors
+*/
 .bg-default {
   background-color: var(--c_bg);
   color: var(--tc);
@@ -1003,6 +1033,10 @@ tr:last-child td:last-child {
 .tc-muted {
   color: var(--tc_muted);
 }
+
+/*
+  Components
+*/
 .card {
   border: 1px solid var(--c_border);
   border-radius: var(--radius);

package/tests/base_reset.browser-test.js

@@ -0,0 +1,201 @@
+const getStyle = (el, prop) => getComputedStyle(el)[prop];
+
+export const beforeAll = async () => {
+  const link = document.createElement('link');
+  link.rel = 'stylesheet';
+  link.href = '/src/kempo.css';
+  document.head.appendChild(link);
+  await new Promise(resolve => link.onload = resolve);
+};
+
+export default {
+  'should apply box-sizing border-box to all elements': ({pass, fail}) => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const boxSizing = getStyle(div, 'boxSizing');
+    div.remove();
+    if(boxSizing === 'border-box'){
+      pass('box-sizing is border-box');
+    } else {
+      fail(`Expected border-box, got ${boxSizing}`);
+    }
+  },
+
+  'should reset margin on body': ({pass, fail}) => {
+    const margin = getStyle(document.body, 'margin');
+    if(margin === '0px'){
+      pass('Body margin is reset to 0');
+    } else {
+      fail(`Expected 0px margin, got ${margin}`);
+    }
+  },
+
+  'should set min-height 100vh on body': ({pass, fail}) => {
+    const minHeight = getStyle(document.body, 'minHeight');
+    const viewportHeight = window.innerHeight;
+    const minHeightValue = parseFloat(minHeight);
+    if(minHeightValue >= viewportHeight){
+      pass('Body min-height is at least 100vh');
+    } else {
+      fail(`Expected min-height >= ${viewportHeight}px, got ${minHeight}`);
+    }
+  },
+
+  'should apply background color to body': ({pass, fail}) => {
+    const bg = getStyle(document.body, 'backgroundColor');
+    if(bg && bg !== 'transparent' && bg !== 'rgba(0, 0, 0, 0)'){
+      pass(`Body has background color: ${bg}`);
+    } else {
+      fail('Body should have a background color');
+    }
+  },
+
+  'should apply text color to body': ({pass, fail}) => {
+    const color = getStyle(document.body, 'color');
+    if(color && color !== 'transparent' && color !== 'rgba(0, 0, 0, 0)'){
+      pass(`Body has text color: ${color}`);
+    } else {
+      fail('Body should have a text color');
+    }
+  },
+
+  'should reset top margin on headings': ({pass, fail}) => {
+    const headings = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const failed = [];
+    headings.forEach(tag => {
+      const el = document.createElement(tag);
+      document.body.appendChild(el);
+      const marginTop = getStyle(el, 'marginTop');
+      el.remove();
+      if(marginTop !== '0px'){
+        failed.push(`${tag}: ${marginTop}`);
+      }
+    });
+    if(failed.length === 0){
+      pass('All headings have top margin reset to 0');
+    } else {
+      fail(`Headings with non-zero top margin: ${failed.join(', ')}`);
+    }
+  },
+
+  'should apply bottom margin to headings': ({pass, fail}) => {
+    const h1 = document.createElement('h1');
+    document.body.appendChild(h1);
+    const marginBottom = parseFloat(getStyle(h1, 'marginBottom'));
+    h1.remove();
+    if(marginBottom > 0){
+      pass(`Headings have bottom margin: ${marginBottom}px`);
+    } else {
+      fail('Headings should have bottom margin for spacing');
+    }
+  },
+
+  'should apply bottom margin to paragraphs': ({pass, fail}) => {
+    const p = document.createElement('p');
+    document.body.appendChild(p);
+    const marginBottom = parseFloat(getStyle(p, 'marginBottom'));
+    const marginTop = getStyle(p, 'marginTop');
+    p.remove();
+    if(marginTop === '0px' && marginBottom > 0){
+      pass(`Paragraphs have 0 top margin and ${marginBottom}px bottom margin`);
+    } else {
+      fail(`Expected 0 top margin and positive bottom margin, got top: ${marginTop}, bottom: ${marginBottom}px`);
+    }
+  },
+
+  'should apply container max-width': ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.className = 'container';
+    document.body.appendChild(container);
+    const maxWidth = getStyle(container, 'maxWidth');
+    container.remove();
+    if(maxWidth && maxWidth !== 'none'){
+      pass(`Container has max-width: ${maxWidth}`);
+    } else {
+      fail('Container should have a max-width');
+    }
+  },
+
+  'should center container horizontally': ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.className = 'container';
+    document.body.appendChild(container);
+    const marginLeft = getStyle(container, 'marginLeft');
+    const marginRight = getStyle(container, 'marginRight');
+    container.remove();
+    // When container is narrower than viewport, auto margins compute to equal pixel values
+    // When container fills viewport, they're both 0 or equal
+    if(marginLeft === marginRight){
+      pass('Container is horizontally centered');
+    } else {
+      fail(`Expected equal margins, got left: ${marginLeft}, right: ${marginRight}`);
+    }
+  },
+
+  'should apply padding to container': ({pass, fail}) => {
+    const container = document.createElement('div');
+    container.className = 'container';
+    document.body.appendChild(container);
+    const paddingLeft = parseFloat(getStyle(container, 'paddingLeft'));
+    const paddingRight = parseFloat(getStyle(container, 'paddingRight'));
+    container.remove();
+    if(paddingLeft > 0 && paddingRight > 0){
+      pass(`Container has padding: left ${paddingLeft}px, right ${paddingRight}px`);
+    } else {
+      fail('Container should have left and right padding');
+    }
+  },
+
+  'should style main element like container': ({pass, fail}) => {
+    const main = document.createElement('main');
+    document.body.appendChild(main);
+    const maxWidth = getStyle(main, 'maxWidth');
+    const marginLeft = getStyle(main, 'marginLeft');
+    const marginRight = getStyle(main, 'marginRight');
+    main.remove();
+    if(maxWidth && maxWidth !== 'none' && marginLeft === marginRight){
+      pass('Main element is styled like container');
+    } else {
+      fail(`Main should have max-width and centered margins, got maxWidth: ${maxWidth}, margins: ${marginLeft}/${marginRight}`);
+    }
+  },
+
+  'should hide overflow on body.no-scroll': ({pass, fail}) => {
+    document.body.classList.add('no-scroll');
+    const overflow = getStyle(document.body, 'overflow');
+    document.body.classList.remove('no-scroll');
+    if(overflow === 'hidden'){
+      pass('body.no-scroll hides overflow');
+    } else {
+      fail(`Expected overflow hidden, got ${overflow}`);
+    }
+  },
+
+  'should style summary element with pointer cursor': ({pass, fail}) => {
+    const details = document.createElement('details');
+    const summary = document.createElement('summary');
+    summary.textContent = 'Test';
+    details.appendChild(summary);
+    document.body.appendChild(details);
+    const cursor = getStyle(summary, 'cursor');
+    details.remove();
+    if(cursor === 'pointer'){
+      pass('Summary has pointer cursor');
+    } else {
+      fail(`Expected pointer cursor, got ${cursor}`);
+    }
+  },
+
+  'should reset menu margin and padding': ({pass, fail}) => {
+    const menu = document.createElement('menu');
+    document.body.appendChild(menu);
+    const margin = getStyle(menu, 'margin');
+    const padding = getStyle(menu, 'padding');
+    menu.remove();
+    if(margin === '0px' && padding === '0px'){
+      pass('Menu margin and padding reset');
+    } else {
+      fail(`Menu should have 0 margin/padding, got margin: ${margin}, padding: ${padding}`);
+    }
+  }
+};