@papit/create 0.0.1

package/asset/component-templates/theme/lib/theme.css

@@ -0,0 +1,80 @@
+@layer theme {
+    :root {
+        color-scheme: light;
+        [data-theme="opposite"], .theme-opposite { color-scheme: dark; }
+
+        @media (prefers-color-scheme: dark) { 
+            color-scheme: dark; 
+            [data-theme="opposite"], .theme-opposite { color-scheme: light; }
+        }
+
+        /* Brand */
+        --primary:   light-dark(oklch(14% 0 0), oklch(92% 0 0));   /* near black */
+        --secondary: light-dark(oklch(80% 0 0), oklch(28% 0 0));   /* near #ccc  */
+        --tertiary:  light-dark(oklch(55% 0 0), oklch(55% 0 0));   /* mid grey   */
+
+        /* Semantic — vivid, same hues in both modes */
+        --success: light-dark(oklch(72% 0.22 145), oklch(76% 0.22 145)); /* spring green  */
+        --info:    light-dark(oklch(52% 0.22 262), oklch(58% 0.22 262)); /* deep blue     */
+        --warning: light-dark(oklch(78% 0.19 68), oklch(82% 0.19 68));  /* orange-yellow */
+        --error:   light-dark(oklch(53% 0.24 24), oklch(58% 0.24 24));  /* fire red      */
+
+        /* Backgrounds — near white → mid grey */
+        --background-lightest: light-dark(oklch(100% 0 0), oklch(32% 0 0));
+        --background-lighter:  light-dark(oklch(98%  0 0), oklch(24% 0 0));
+        --background-light:    light-dark(oklch(95%  0 0), oklch(20% 0 0));
+        --background:          light-dark(oklch(92%  0 0), oklch(16% 0 0));
+        --background-dark:     light-dark(oklch(86%  0 0), oklch(12% 0 0));
+        --background-darker:   light-dark(oklch(78%  0 0), oklch(8%  0 0));
+        --background-darkest:  light-dark(oklch(68%  0 0), oklch(4%  0 0));
+
+        /* Foregrounds — mid grey → near black */
+        --foreground-lightest: light-dark(oklch(52% 0 0), oklch(100% 0 0));
+        --foreground-lighter:  light-dark(oklch(40% 0 0), oklch(97%  0 0));
+        --foreground-light:    light-dark(oklch(28% 0 0), oklch(92%  0 0));
+        --foreground:          light-dark(oklch(16% 0 0), oklch(86%  0 0));
+        --foreground-dark:     light-dark(oklch(10% 0 0), oklch(74%  0 0));
+        --foreground-darker:   light-dark(oklch(6%  0 0), oklch(62%  0 0));
+        --foreground-darkest:  light-dark(oklch(2%  0 0), oklch(48%  0 0));
+    }
+
+    [data-theme="light"], .theme-light { 
+        color-scheme: light; 
+        [data-theme="opposite"], .theme-opposite { color-scheme: dark; }
+    }
+    [data-theme="dark"], .theme-dark { 
+        color-scheme: dark; 
+        [data-theme="opposite"], .theme-opposite { color-scheme: light; }
+    }
+    
+
+    /* == UNITS == */
+    :root {
+        --base-unit: 0.25rem;
+        --space-1: calc(var(--base-unit)  * 1);  /* 0.25rem - 4px  */
+        --space-2: calc(var(--base-unit)  * 2);  /* 0.5rem  - 8px  */
+        --space-3: calc(var(--base-unit)  * 3);  /* 0.75rem - 12px */
+        --space-4: calc(var(--base-unit)  * 4);  /* 1rem    - 16px */
+        --space-5: calc(var(--base-unit)  * 5);  /* 1.25rem - 20px */
+        --space-6: calc(var(--base-unit)  * 6);  /* 1.5rem  - 24px */
+        --space-7: calc(var(--base-unit)  * 7);  /* 1.75rem - 28px */
+        --space-8: calc(var(--base-unit)  * 8);  /* 2rem    - 32px */
+        --space-9: calc(var(--base-unit)  * 9);  /* 2.25rem - 36px */
+        --space-10: calc(var(--base-unit) * 10); /* 2.5rem  - 40px */
+        --space-11: calc(var(--base-unit) * 11); /* 2.75rem - 44px */
+        --space-12: calc(var(--base-unit) * 12); /* 3rem    - 48px */
+        --space-13: calc(var(--base-unit) * 13); /* 3.25rem - 52px */
+        --space-14: calc(var(--base-unit) * 14); /* 3.5rem  - 56px */
+        --space-15: calc(var(--base-unit) * 15); /* 3.75rem - 60px */
+        --space-16: calc(var(--base-unit) * 16); /* 4rem    - 64px */
+        --space-17: calc(var(--base-unit) * 17); /* 4.25rem - 68px */
+        --space-18: calc(var(--base-unit) * 18); /* 4.5rem  - 72px */
+        --space-19: calc(var(--base-unit) * 19); /* 4.75rem - 76px */
+        --space-20: calc(var(--base-unit) * 20); /* 5rem    - 80px */
+
+        --radius-small: var(--space-2);
+        --radius-medium: var(--space-4);
+        --radius-large: var(--space-8);
+        --radius-full: 100vh;
+    }
+}

package/asset/component-templates/theme/src/theme.css

@@ -0,0 +1,205 @@
+@layer theme {
+    :root {
+        /* Brand */
+        --primary: light-dark(oklch(14% 0 0), oklch(92% 0 0));
+        /* near black */
+        --secondary: light-dark(oklch(80% 0 0), oklch(28% 0 0));
+        /* near #ccc  */
+        --tertiary: light-dark(oklch(55% 0 0), oklch(55% 0 0));
+        /* mid grey   */
+
+        --text: light-dark(oklch(10% 0 0), oklch(95% 0 0));
+        --text-inverse: light-dark(oklch(95% 0 0), oklch(10% 0 0));
+        --text-secondary: light-dark(oklch(42% 0 0), oklch(62% 0 0));
+        /* muted, readable in both modes */
+
+        /* Semantic — vivid, same hues in both modes */
+        --success: light-dark(oklch(50% 0.18 145), oklch(72% 0.20 145));
+        /* spring green  */
+        --info: light-dark(oklch(46% 0.20 262), oklch(65% 0.20 262));
+        /* deep blue     */
+        --warning: light-dark(oklch(58% 0.18 68), oklch(80% 0.18 68));
+        /* orange-yellow */
+        --error: light-dark(oklch(50% 0.22 25), oklch(65% 0.22 25));
+        /* fire red      */
+
+        /* In light mode: backgrounds are near-white, constrained range so nothing feels "dark" */
+        --background-light: light-dark(oklch(99% 0 0), oklch(22% 0 0));
+        /* page canvas */
+        --background: light-dark(oklch(96% 0 0), oklch(17% 0 0));
+        /* cards, panels */
+        --background-dark: light-dark(oklch(90% 0 0), oklch(12% 0 0));
+        /* borders, pressed, wells */
+
+        /* In light mode: foregrounds are near-black, three intensities */
+        --foreground-light: light-dark(oklch(52% 0 0), oklch(62% 0 0));
+        /* placeholder, caption, muted */
+        --foreground: light-dark(oklch(24% 0 0), oklch(86% 0 0));
+        /* body text */
+        --foreground-dark: light-dark(oklch(10% 0 0), oklch(96% 0 0));
+        /* headings, emphasis */
+
+        /* INVERSE Backgrounds — near white → mid grey */
+
+        --background-light-inverse: light-dark(oklch(22% 0 0), oklch(99% 0 0));
+        /* page canvas */
+        --background-inverse: light-dark(oklch(17% 0 0), oklch(96% 0 0));
+        /* cards, panels */
+        --background-dark-inverse: light-dark(oklch(12% 0 0), oklch(90% 0 0));
+        /* borders, pressed, wells */
+
+        /* In light mode: foregrounds are near-black, three intensities */
+        --foreground-light-inverse: light-dark(oklch(62% 0 0), oklch(52% 0 0));
+        /* placeholder, caption, muted */
+        --foreground-inverse: light-dark(oklch(86% 0 0), oklch(24% 0 0));
+        /* body text */
+        --foreground-dark-inverse: light-dark(oklch(96% 0 0), oklch(10% 0 0));
+        /* headings, emphasis */
+
+        --focus-color: light-dark(blue, cornflowerblue);
+    }
+
+    /* make sure web-components are hidden intially to avoid flashes */
+    *:not(:defined) {
+        visibility: hidden;
+    }
+
+    :root {
+        color-scheme: light;
+
+        [data-theme="opposite"],
+        .theme-opposite {
+            color-scheme: dark;
+            background-color: var(--background, light-dark(oklch(96% 0 0), oklch(17% 0 0)));
+            color: var(--text);
+
+            [data-theme="opposite"],
+            .theme-opposite {
+                color-scheme: light;
+            }
+
+            /* nested 1 level */
+        }
+
+        @media (prefers-color-scheme: dark) {
+            color-scheme: dark;
+
+            [data-theme="opposite"],
+            .theme-opposite {
+                color-scheme: light;
+
+                [data-theme="opposite"],
+                .theme-opposite {
+                    color-scheme: dark;
+                }
+
+                /* nested 1 level */
+            }
+        }
+    }
+
+    [data-theme="light"],
+    .theme-light {
+        color-scheme: light;
+
+        [data-theme="opposite"],
+        .theme-opposite {
+            color-scheme: dark;
+
+            [data-theme="opposite"],
+            .theme-opposite {
+                color-scheme: light;
+            }
+
+            /* nested 1 level */
+        }
+    }
+
+    [data-theme="dark"],
+    .theme-dark {
+        color-scheme: dark;
+
+        [data-theme="opposite"],
+        .theme-opposite {
+            color-scheme: light;
+
+            [data-theme="opposite"],
+            .theme-opposite {
+                color-scheme: dark;
+            }
+
+            /* nested 1 level */
+        }
+    }
+
+    /* == UNITS == */
+    :root {
+        --base-unit: 0.25rem;
+        --space-1: calc(var(--base-unit) * 1);
+        /* 0.25rem - 4px  */
+        --space-2: calc(var(--base-unit) * 2);
+        /* 0.5rem  - 8px  */
+        --space-3: calc(var(--base-unit) * 3);
+        /* 0.75rem - 12px */
+        --space-4: calc(var(--base-unit) * 4);
+        /* 1rem    - 16px */
+        --space-5: calc(var(--base-unit) * 5);
+        /* 1.25rem - 20px */
+        --space-6: calc(var(--base-unit) * 6);
+        /* 1.5rem  - 24px */
+        --space-7: calc(var(--base-unit) * 7);
+        /* 1.75rem - 28px */
+        --space-8: calc(var(--base-unit) * 8);
+        /* 2rem    - 32px */
+        --space-9: calc(var(--base-unit) * 9);
+        /* 2.25rem - 36px */
+        --space-10: calc(var(--base-unit) * 10);
+        /* 2.5rem  - 40px */
+        --space-11: calc(var(--base-unit) * 11);
+        /* 2.75rem - 44px */
+        --space-12: calc(var(--base-unit) * 12);
+        /* 3rem    - 48px */
+        --space-13: calc(var(--base-unit) * 13);
+        /* 3.25rem - 52px */
+        --space-14: calc(var(--base-unit) * 14);
+        /* 3.5rem  - 56px */
+        --space-15: calc(var(--base-unit) * 15);
+        /* 3.75rem - 60px */
+        --space-16: calc(var(--base-unit) * 16);
+        /* 4rem    - 64px */
+        --space-17: calc(var(--base-unit) * 17);
+        /* 4.25rem - 68px */
+        --space-18: calc(var(--base-unit) * 18);
+        /* 4.5rem  - 72px */
+        --space-19: calc(var(--base-unit) * 19);
+        /* 4.75rem - 76px */
+        --space-20: calc(var(--base-unit) * 20);
+        /* 5rem    - 80px */
+
+        --radius-small: var(--space-2);
+        --radius-medium: var(--space-4);
+        --radius-large: var(--space-8);
+        --radius-full: 100vh;
+    }
+
+    /* THEME VIEW TRANSITION */
+    @media (prefers-reduced-motion: no-preference) {
+        ::view-transition-old(root) {
+            animation-delay: 500ms;
+        }
+
+        ::view-transition-new(root) {
+            animation: theme-transition-in 500ms;
+        }
+    }
+
+    @keyframes theme-transition-in {
+        from {
+            clip-path: circle(0% at var(--theme-transition-location, 80% 0%));
+        }
+
+        to {
+            clip-path: circle(200% at var(--theme-transition-location, 80% 0%));
+        }
+    }
+}

package/asset/component-templates/theme/tests/index.html

@@ -0,0 +1,15 @@
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VARIABLE_NAME test</title>
+
+  <script defer src="main.js"></script>
+</head>
+
+<body>
+  <h1>VARIABLE_NAME test</h1>
+</body>
+
+</html>

package/asset/component-templates/theme/tests/main.js

@@ -0,0 +1 @@
+import 'VARIABLE_FULL_NAME';

package/asset/component-templates/theme/tests/public/translations/en.json

@@ -0,0 +1,7 @@
+{
+  "meta": {
+    "region": "GB",
+    "language": "en-UK"
+  },
+  "VARIABLE_NAME": "VARIABLE_NAME"
+}

package/asset/component-templates/theme/tests/snapshot.test.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  // Navigate to your test page
+  await page.goto('tests/VARIABLE_NAME/');
+});
+
+test.describe("VARIABLE_FULL_NAME visual regression", () => {
+  test('default snapshot', async ({ page }) => {
+    await expect(page).toHaveScreenshot();
+  });
+})

package/asset/component-templates/theme/tests/unit.test.ts

@@ -0,0 +1,67 @@
+import { test, expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+    // Navigate to your test page
+    await page.goto('tests/VARIABLE_NAME/');
+});
+
+declare global {
+    interface Window {
+        EVENT_EMITTED: any;
+    }
+}
+
+test.describe.skip("VARIABLE_FULL_NAME unit tests", () => {
+    test('available in DOM', async ({ page }) => {
+        // Interact with your component and make assertions
+    });
+});
+
+test.describe.skip("helpers", () => {
+    test("wait for event : enter press", async ({ page }) => {
+        const target = page.getByTestId("base-target");
+        await page.evaluate(() => {
+            window.EVENT_EMITTED = null;
+            const target = document.querySelector<HTMLElement>("*[data-testid='base-target']");
+            if (!target) return;
+
+            target.addEventListener("event-name", () => {
+                window.EVENT_EMITTED = true;
+            });
+
+            target.focus();
+            target.dispatchEvent(new KeyboardEvent("up", { key: "Enter" }));
+            // enter is tricky to capture so we make sure to dispatch inside evalute
+        });
+
+        await target.focus();
+        await target.press("Enter");
+
+        expect(await page.evaluate(() => window.EVENT_EMITTED)).toBeTruthy();
+    });
+
+    test("should submit a form", async ({ page }) => {
+        // NOTE this requires in main.js you have form.onsubmit = (e) => { e.preventDefault() }
+        // setting this in evaluate did not work.. (maybe with page.evalute)
+
+        await page.getByTestId("a").fill("hello");
+        await page.getByTestId("submit").click();
+
+        const results = await page.evaluate(() => {
+            const form = document.querySelector("form");
+            if (!form) return null;
+
+            const formdata = new FormData(form);
+            return {
+                a: formdata.get("a"),
+                b: formdata.get("b"),
+            }
+        });
+
+        expect(results).not.toBe(null);
+        expect(results).toMatchObject({
+            a: "hello",
+            b: "value",
+        });
+    });
+});

package/asset/component-templates/theme/views/index.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>VARIABLE_CLASS_NAME | experiment</title>
+
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  
+  <!-- Styles -->
+  <link rel="stylesheet" href="/theme.css" />
+  <link rel="stylesheet" href="style.css" />
+
+  <script defer src="main.js"></script>
+</head>
+
+<body>
+    <template>
+        <section class="showcase-section">
+            <h2 class="showcase-title">Brand</h2>
+            <div class="swatch-row">
+                <div class="swatch swatch--primary"><span class="swatch-label">--primary</span></div>
+                <div class="swatch swatch--secondary"><span class="swatch-label">--secondary</span></div>
+                <div class="swatch swatch--tertiary"><span class="swatch-label">--tertiary</span></div>
+            </div>
+        </section>
+    
+        <section class="showcase-section">
+            <h2 class="showcase-title">Semantic</h2>
+            <div class="swatch-row">
+                <div class="swatch swatch--success"><span class="swatch-label">--success</span></div>
+                <div class="swatch swatch--info"><span class="swatch-label">--info</span></div>
+                <div class="swatch swatch--warning"><span class="swatch-label">--warning</span></div>
+                <div class="swatch swatch--error"><span class="swatch-label">--error</span></div>
+            </div>
+        </section>
+    
+        <section class="showcase-section">
+            <h2 class="showcase-title">Background</h2>
+            <div class="swatch-row">
+                <div class="swatch swatch--background-lightest"><span class="swatch-label">--background-lightest</span></div>
+                <div class="swatch swatch--background-lighter"><span class="swatch-label">--background-lighter</span></div>
+                <div class="swatch swatch--background-light"><span class="swatch-label">--background-light</span></div>
+                <div class="swatch swatch--background"><span class="swatch-label">--background</span></div>
+                <div class="swatch swatch--background-dark"><span class="swatch-label">--background-dark</span></div>
+                <div class="swatch swatch--background-darker"><span class="swatch-label">--background-darker</span></div>
+                <div class="swatch swatch--background-darkest"><span class="swatch-label">--background-darkest</span></div>
+            </div>
+        </section>
+    
+        <section class="showcase-section">
+            <h2 class="showcase-title">Foreground</h2>
+            <div class="swatch-row">
+                <div class="swatch swatch--foreground-lightest"><span class="swatch-label">--foreground-lightest</span></div>
+                <div class="swatch swatch--foreground-lighter"><span class="swatch-label">--foreground-lighter</span></div>
+                <div class="swatch swatch--foreground-light"><span class="swatch-label">--foreground-light</span></div>
+                <div class="swatch swatch--foreground"><span class="swatch-label">--foreground</span></div>
+                <div class="swatch swatch--foreground-dark"><span class="swatch-label">--foreground-dark</span></div>
+                <div class="swatch swatch--foreground-darker"><span class="swatch-label">--foreground-darker</span></div>
+                <div class="swatch swatch--foreground-darkest"><span class="swatch-label">--foreground-darkest</span></div>
+            </div>
+        </section>
+    
+        <section class="showcase-section">
+            <h2 class="showcase-title">Spacing</h2>
+            <div class="space-list">
+                <div class="space-item space-item--1"><span class="space-label">--space-1</span></div>
+                <div class="space-item space-item--2"><span class="space-label">--space-2</span></div>
+                <div class="space-item space-item--3"><span class="space-label">--space-3</span></div>
+                <div class="space-item space-item--4"><span class="space-label">--space-4</span></div>
+                <div class="space-item space-item--5"><span class="space-label">--space-5</span></div>
+                <div class="space-item space-item--6"><span class="space-label">--space-6</span></div>
+                <div class="space-item space-item--7"><span class="space-label">--space-7</span></div>
+                <div class="space-item space-item--8"><span class="space-label">--space-8</span></div>
+                <div class="space-item space-item--9"><span class="space-label">--space-9</span></div>
+                <div class="space-item space-item--10"><span class="space-label">--space-10</span></div>
+                <div class="space-item space-item--12"><span class="space-label">--space-12</span></div>
+                <div class="space-item space-item--16"><span class="space-label">--space-16</span></div>
+                <div class="space-item space-item--20"><span class="space-label">--space-20</span></div>
+            </div>
+        </section>
+    
+        <section class="showcase-section">
+            <h2 class="showcase-title">Radius</h2>
+            <div class="swatch-row">
+                <div class="radius-item radius-item--small"><span class="radius-label">--radius-small</span></div>
+                <div class="radius-item radius-item--medium"><span class="radius-label">--radius-medium</span></div>
+                <div class="radius-item radius-item--large"><span class="radius-label">--radius-large</span></div>
+                <div class="radius-item radius-item--full"><span class="radius-label">--radius-full</span></div>
+            </div>
+        </section>
+    </template>
+
+
+    <select>
+        <option value="system">system</option>
+        <option value="light">light</option>
+        <option value="dark">dark</option>
+    </select>
+    
+    <div data-template>placeholder-becuase-my-html-parser-has-limits</div>
+
+    <div class="theme-opposite">
+        <div data-template>placeholder-becuase-my-html-parser-has-limits</div>
+    </div>
+</body>
+
+</html>

package/asset/component-templates/theme/views/main.js

@@ -0,0 +1,14 @@
+window.onload = () => {
+    document.querySelector("select").onchange = (e) => {
+        const { value } = e.currentTarget;
+        if (value === "system") return document.body.removeAttribute("data-theme");
+
+        document.body.setAttribute("data-theme", value);
+    }
+
+    const template = document.querySelector("template");
+    document.querySelectorAll("[data-template]").forEach(el => {
+        console.log(el)
+        el.replaceWith(template.content.cloneNode(true));
+    });
+}