u2ui 1.0.1 → 1.4.6

package/theme/test.html

@@ -0,0 +1,284 @@
+<!DOCTYPE html>
+<html lang=en>
+<head>
+    <meta charset="UTF-8">
+    <title>U2-Themes Tester</title>
+    <meta name="viewport" content="width=device-width">
+
+    <script src="../../u2/u2/tests/test-init.js" type=module async></script>
+    <script src="../../u2/u2/auto.js" type=module async></script>
+    <link href="../css/classless/full.css" rel=stylesheet>
+    <link href="../css/classless/simple.css" rel=stylesheet>
+
+<body>
+
+<header class=u2-width>
+    <h1>U2-Themes Demo</h1>
+    <u2-toc></u2-toc>
+</header>
+
+<main>
+    <u2-system> </u2-system>
+    <section class="u2-width">
+        <h2>Classless</h2>
+        <p>In this section you can see the classless part of the U2-Themes. Its just the HTML styled with the U2-Themes.</p>
+        <h3>Inline-Elements</h3>
+        <p>
+            Here you can view the typography and text level semantic elements.
+            The <a href="#">a element</a> example.
+            The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples.
+            The <b>b element</b> example.
+            The <cite>cite element</cite> example.
+            The <code>code element</code> example.
+            The <del>del element</del> example.
+            The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples.
+            The <em>em element</em> example.
+            The <i>i element</i> example.
+            The <ins>ins element</ins> example.
+            The <kbd>kbd element</kbd> example.
+            The <mark>mark element</mark> example.
+            The <q>q element <q>inside</q> a q element</q> example.
+        </p>
+        <p>
+            A second paragraph to see the distance between the elements.
+            The <s>s element</s> example.
+            The <samp>samp element</samp> example.
+            The <small>small element</small> example.
+            The <span>span element</span> example.
+            The <strong>strong element</strong> example.
+            The <sub>sub element</sub> example.
+            The <sup>sup element</sup> example.
+            The <u>u element</u> example.
+            The <var>var element</var> example.
+            Now that we have seen the different elements, a second paragraph follows to see the distance between them.
+        </p>
+
+        <h3>Form Elements</h3>
+        <form>
+            <fieldset class="u2-flex" style="align-items:baseline">
+                <legend>Fieldset Title</legend>
+                <label>
+                    Label
+                    <input placeholder="Text Input" type="text">
+                </label>
+                <label>
+                    Checkbox
+                    <input type="checkbox">
+                </label>
+                <label>
+                    Radio
+                    <input type="radio">
+                </label>
+                <label>
+                    Select
+                    <select>
+                        <option>Option One</option>
+                        <option>Option Two</option>
+                        <option>Option Three</option>
+                    </select>
+                </label>
+                <label>
+                    Textarea
+                    <textarea placeholder="Enter your message here"></textarea>
+                </label>
+                <label>
+                    Range Input
+                    <input type="range" min="0" max="100">
+                </label>                
+                <button>Button</button>
+                <button disabled>Disabled</button>
+            </fieldset>
+        </form>
+
+
+        <h3>Block-Elements</h3>
+
+        <h4>Details and Summary</h4>
+        <details>
+            <summary>Details and Summary</summary>
+            <p>Here is some more information.</p>
+        </details>
+
+        <h4>Table</h4>
+        <table class="u2-table">
+            <thead>
+                <tr>
+                    <th>Product
+                    <th>Price
+                    <th>Status
+            <tbody>
+                <tr>
+                    <td>Apple
+                    <td>1.20 CHF
+                    <td>In Stock
+                <tr>
+                    <td>Bread
+                    <td>2.80 CHF
+                    <td>Low Stock
+                <tr>
+                    <td>Cheese
+                    <td>4.50 CHF
+                    <td>Out of Stock
+        </table>        
+
+        <article>
+            <h4>Article Title</h4>
+            <p>Article content goes here.</p>
+        </article>
+
+        <blockquote>
+            When you have eliminated the impossible, whatever remains, however improbable, must be the truth.
+            <footer>Sherlock Holmes</footer>
+        </blockquote>
+
+        <dl>
+            <dt>Definition List
+            <dd>Definition List content goes here.
+            <dt>Item 2
+            <dd>Definition List content goes here.
+        </dl>
+
+        <figure>
+            <figcaption>Figure Title</figcaption>
+            <p>Figure content goes here.</p>
+        </figure>
+
+        <pre><code>pre and code foobar() {
+            print &quot;Welcome to flavor country!&quot;;
+        }</code></pre>
+
+        <progress value="70" max="100">70%</progress>
+        <meter value="2" min="0" max="10">2 out of 10</meter>
+        
+
+        <p>A nested list:</p>
+        <ol>
+            <li>
+                <p>First, get these ingredients:</p>
+                <ul>
+                    <li>carrots
+                    <li>celery
+                    <li>lentils
+                </ul>
+            <li>
+                <p>Boil some water.</p>
+            <li>
+                <p>Dump everything in the pot and follow this algorithm:</p>
+                <p>Do not bump wooden spoon or it will fall.</p>
+        </ol>
+
+        <pre><code>find wooden spoon
+uncover pot
+stir
+cover pot
+balance wooden spoon precariously on pot handle
+wait 10 minutes
+goto first step (or shut off burner when done)</code></pre>
+
+        <table>
+            <caption>Table: Data on shoe sizes, materials, and colors</caption>
+            <thead>
+                <tr>
+                    <th>Size
+                    <th>Material
+                    <th>Color
+            <tbody>
+                <tr>
+                    <td>9
+                    <td>leather
+                    <td>brown
+                <tr>
+                    <td>10
+                    <td>hemp canvas
+                    <td>natural
+                <tr>
+                    <td>11
+                    <td>glass
+                    <td>transparent
+        </table>
+
+        <button onclick="dialog1.showModal()">Open Dialog</button>
+        <dialog id="dialog1">
+            <form method=dialog>
+                <h2>Dialog title goes here.</h2>
+                <p>Dialog text goes here.</p>
+                <button>Close</button>
+            </form>
+        </dialog>
+
+    </section>
+
+    <section style="padding-block:2rem; margin-block:2rem" class="u2-width" u2-skin="invert">
+        <h3>U2 Elements</h3>
+        <p>The U2 Pattern Library is a collection of reusable components and patterns for modern web development. It is designed to be a starting point for building web applications and even other Design Systems.</p>
+    </section>
+
+    <section class="u2-width">
+
+        <h4>Tabs</h4>
+
+        <u2-tabs>
+            <h4>First Tab</h4>
+            <p>Content of the first tab</p>
+            <h4>Second Tab</h4>
+            <p>Content of the second tab</p>
+        </u2-tabs>
+
+        <h4>Alert</h4>
+
+        <u2-alert open variant="error" dismissable>
+            <h4>Alert title goes here.</h4>
+            <p>Alert text goes here.</p>
+        </u2-alert>
+
+        <u2-alert open variant="success" dismissable>
+            <p>Alert text goes here.</p>
+        </u2-alert>
+
+        <br><br>
+
+        <h4>Accordion</h4>
+        <u2-accordion>
+            <h4>Accordion</h4>
+            <h5>Here you can put any content you want.</h5>
+            <p>After the hightest Headinglevel, you can put any content you want, it will be the content of the accordion.</p>
+
+            <h4>Component</h4>
+            <h5>More content</h5>
+            <p>After the hightest Headinglevel, you can put any content you want, it will be the content of the accordion.</p>
+            
+            <h4>Another Part</h4>
+            <h5>More content</h5>
+            <p>After the hightest Headinglevel, you can put any content you want, it will be the content of the accordion.</p>
+        </u2-accordion>
+
+
+        <h4>Button Group</h4>
+
+        <u2-buttongroup gap>
+            <button>Button</button>
+            <button>Group</button>
+            <button>Button 3</button>
+            <button>Button 4</button>
+            <button>Button 5</button>
+        </u2-buttongroup>
+
+        <br><br>
+
+        <hr>
+
+        <div u2-skin="invert" style="padding:2rem">
+            <h3>Inverts dark and light colors</h3>
+            <p>Here you can see the invert skin in action.</p>
+            <button>Button</button>
+        </div>
+
+    </section>
+
+
+</main>
+<footer>
+    <p>Footer text goes here.</p>
+</footer>
+
+

package/theme/tmp/README.md

@@ -0,0 +1,10 @@
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+
+## About
+
+- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
+- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
+

package/theme/tmp/theme.css

@@ -0,0 +1,323 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+html {
+  --color: #207acc;
+  --accent: #ff6b35;
+  --color-space: oklch;
+  --hue-shift: 0;
+  
+  --width: 50rem;
+  --gap: 1rem;
+  --line-width: 1px;
+  --radius: .5rem;
+  --shadow-x: 0rem;
+  --shadow-y: .25rem;
+  
+  --control-padding-x: .75em;
+  --control-padding-y: .5em;
+  --control-border-width: var(--line-width);
+  --control-radius: var(--radius);
+  
+  --font-1: 'Inter', system-ui, sans-serif;
+  --font-2: 'JetBrains Mono', monospace;
+  --font-1-variation: "wdth" var(--font-1-wdth, 100), "opsz" var(--font-1-opsz, 14), "GRAD" var(--font-1-grad, 0), "MONO" var(--font-1-mono, 0), "CASL" var(--font-1-casl, 0);
+  --font-2-variation: "wdth" var(--font-2-wdth, 100), "opsz" var(--font-2-opsz, 14), "GRAD" var(--font-2-grad, 0), "MONO" var(--font-2-mono, 0), "CASL" var(--font-2-casl, 0);
+}
+
+:focus-visible {
+  outline: .12rem solid var(--color);
+  outline-offset: .18rem;
+  transition: outline-width .15s ease;
+  
+  &:active {
+    outline-width: .3rem;
+  }
+}
+
+input, textarea, select, button, .btn {
+  box-shadow: var(--shadow);
+  transition: box-shadow .2s ease, transform .15s ease;
+  
+  &:hover {
+    box-shadow: var(--shadow-l);
+  }
+  
+  &:active {
+    transform: translateY(1px);
+    box-shadow: var(--shadow-s);
+  }
+}
+
+button, .btn {
+  background-color: var(--color);
+  color: var(--color-bg);
+  padding-inline: var(--gap);
+  font-weight: 500;
+  cursor: pointer;
+  border: none;
+  
+  &:hover {
+    background-color: var(--color-dark);
+  }
+  
+  &:focus {
+    background-color: var(--color-dark);
+    outline-color: var(--color);
+  }
+  
+  &:active {
+    background-color: var(--color-darker);
+  }
+  
+  &:disabled {
+    background-color: var(--gray);
+    cursor: not-allowed;
+    opacity: .6;
+  }
+}
+
+dialog {
+  border: var(--line-width) solid var(--color-line);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-l);
+  padding: calc(var(--gap) * 1.5);
+  max-width: min(90vw, var(--width));
+  
+  &::backdrop {
+    background-color: color-mix(in srgb, var(--color-text), transparent 60%);
+    backdrop-filter: blur(4px);
+  }
+}
+
+u2-alert {
+  background-color: var(--color-lightest);
+  color: var(--color-darkest);
+  border: var(--line-width) solid var(--color);
+  border-left-width: calc(var(--line-width) * 4);
+  padding: var(--gap);
+  border-radius: var(--radius);
+  
+  &::part(icon) {
+    align-self: start;
+    color: var(--color);
+  }
+  
+  &[type="warning"] {
+    background-color: color-mix(in srgb, var(--orange), #fff 90%);
+    border-color: var(--orange);
+    color: color-mix(in srgb, var(--orange), #000 70%);
+    
+    &::part(icon) {
+      color: var(--orange);
+    }
+  }
+  
+  &[type="error"] {
+    background-color: color-mix(in srgb, var(--red), #fff 90%);
+    border-color: var(--red);
+    color: color-mix(in srgb, var(--red), #000 70%);
+    
+    &::part(icon) {
+      color: var(--red);
+    }
+  }
+  
+  &[type="success"] {
+    background-color: color-mix(in srgb, var(--green), #fff 90%);
+    border-color: var(--green);
+    color: color-mix(in srgb, var(--green), #000 70%);
+    
+    &::part(icon) {
+      color: var(--green);
+    }
+  }
+}
+
+u2-accordion {
+  gap: calc(var(--gap) * .5);
+  
+  &::part(trigger) {
+    background-color: var(--color-area);
+    border: var(--line-width) solid var(--color-line);
+    padding: var(--control-padding-y) var(--control-padding-x);
+    border-radius: var(--radius);
+    cursor: pointer;
+    font-weight: 500;
+    transition: background-color .2s ease, border-color .2s ease;
+  }
+  
+  &::part(trigger):hover {
+    background-color: var(--color-lighter);
+    border-color: var(--color);
+  }
+  
+  &::part(trigger):focus,
+  &::part(trigger):active {
+    background-color: var(--color-lighter);
+    border-color: var(--color);
+  }
+  
+  &::part(trigger)[aria-expanded="true"] {
+    background-color: var(--color);
+    color: var(--color-bg);
+    border-color: var(--color-dark);
+  }
+  
+  &::part(content) {
+    padding: var(--gap);
+    border: var(--line-width) solid var(--color-line);
+    border-top: none;
+    border-radius: 0 0 var(--radius) var(--radius);
+  }
+}
+
+table.u2-table {
+  border-collapse: collapse;
+  width: 100%;
+  
+  & > thead {
+    border-bottom: calc(var(--line-width) * 2) solid var(--color);
+  }
+  
+  & > tbody {
+    & tr:hover {
+      background-color: var(--color-lightest);
+    }
+  }
+  
+  & > tfoot {
+    border-top: calc(var(--line-width) * 2) solid var(--color-line);
+    font-weight: 600;
+  }
+  
+  & > * td {
+    padding: calc(var(--gap) * .5) var(--gap);
+    border-bottom: var(--line-width) solid var(--color-line);
+  }
+  
+  & > * th {
+    padding: calc(var(--gap) * .75) var(--gap);
+    text-align: left;
+    font-weight: 600;
+    color: var(--color-darker);
+  }
+}
+
+.u2-card {
+  border: var(--line-width) solid var(--color-line);
+  border-radius: var(--radius);
+  background-color: var(--color-bg);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  
+  & > * {
+    padding: var(--gap);
+  }
+  
+  & > header {
+    background-color: var(--color-area);
+    font-weight: 600;
+    border-bottom: var(--line-width) solid var(--color-line);
+  }
+  
+  & > footer {
+    background-color: var(--color-area);
+    border-top: var(--line-width) solid var(--color-line);
+  }
+}
+
+/* ============================================
+   OPINIONATED STYLES
+   Feel free to review, modify, or remove these
+   ============================================ */
+
+/* Smooth scrolling for better UX */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Better text rendering */
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+/* Code blocks and inline code styling */
+code, pre, kbd, samp {
+  font-family: var(--font-2);
+  font-size: .9em;
+}
+
+code {
+  background-color: var(--color-area);
+  padding: .2em .4em;
+  border-radius: calc(var(--radius) * .5);
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+}
+
+/* Link styling - opinionated underline behavior */
+a {
+  color: var(--color);
+  text-decoration-thickness: .1em;
+  text-underline-offset: .15em;
+  transition: color .2s ease, text-decoration-color .2s ease;
+  
+  &:hover {
+    color: var(--color-dark);
+    text-decoration-thickness: .15em;
+  }
+  
+  &:active {
+    color: var(--color-darker);
+  }
+}
+
+/* Subtle hover effect on interactive elements */
+button, .btn, select, input[type="checkbox"], input[type="radio"] {
+  &:hover:not(:disabled) {
+    transform: translateY(-1px);
+  }
+}
+
+/* Selection styling */
+::selection {
+  background-color: var(--color-light);
+  color: var(--color-bg);
+}
+
+/* Fancy focus rings for keyboard navigation */
+@media (prefers-reduced-motion: no-preference) {
+  :focus-visible {
+    animation: focus-pulse .3s ease-out;
+  }
+  
+  @keyframes focus-pulse {
+    0% { outline-width: .3rem; opacity: .7; }
+    100% { outline-width: .12rem; opacity: 1; }
+  }
+}
+
+/* Dark mode adjustments - subtle shadow tweaks */
+@media (prefers-color-scheme: dark) {
+  html {
+    --shadow-blur: calc(var(--gap) * 1.5);
+  }
+}
+
+/* Reduced motion respect */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important;
+  }
+  
+  html {
+    scroll-behavior: auto;
+  }
+}