u2ui 1.0.1 → 1.4.6

package/theme/prompt.css

@@ -0,0 +1,175 @@
+/*
+You are writing CSS for a design system.
+make a beautiful, consistent and stylesheet based on this CSS.
+A base css is already included with best practices, also available variables are already included, you can adjust them if needed.
+Use appropriate Google Fonts.
+
+
+IMPORTANT CONTEXT:
+- A base CSS file is ALREADY LOADED with all foundational styles
+- All variables listed below are ALREADY DEFINED and AUTOMATICALLY APPLIED
+- You can CHANGE the values of variables (like --color, --gap, --radius) if it makes sense for your design
+- You can USE the generated variables (like --accent-light, --color-darker) in your styles
+- Add Optionated styles at the bottom of the file.
+- Don't invent new classes
+
+Your tasks:
+1. Adjust base variables (--color, --accent, --gap, --radius, etc.) as needed
+2. Fill in empty style properties marked with comments or empty values
+3. Add hover/focus states and component-specific styles
+4. Use Google Fonts (import at the top if needed)
+5. Add a section at the end for questionable/opinionated styles (mark them clearly so they can be easily reviewed or removed)
+
+*/
+
+html {
+    --color: #ff6b35;
+    --accent: #004e89;
+
+    /* available custom properties:
+    --color-lightest: color-mix(in var(--color-space), var(--color), #fff 97%);
+    --color-lighter:  color-mix(in var(--color-space), var(--color), #fff 85%);
+    --color-light:    color-mix(in var(--color-space), var(--color), #fff 50%);
+    --color-dark:     color-mix(in var(--color-space), var(--color), #000 30%);
+    --color-darker:   color-mix(in var(--color-space), var(--color), #000 60%);
+    --color-darkest:  color-mix(in var(--color-space), var(--color), #000 87%);
+
+    --accent-lightest: color-mix(in var(--color-space), var(--accent), #fff 97%);
+    --accent-lighter:  color-mix(in var(--color-space), var(--accent), #fff 85%);
+    --accent-light:    color-mix(in var(--color-space), var(--accent), #fff 50%);
+    --accent-dark:     color-mix(in var(--color-space), var(--accent), #000 30%);
+    --accent-darker:   color-mix(in var(--color-space), var(--accent), #000 60%);
+    --accent-darkest:  color-mix(in var(--color-space), var(--accent), #000 87%);
+
+    --gray:          oklch(from var(--color) l min(c,0.01) h);
+    --gray-lighter:  color-mix(in var(--color-space), var(--gray), #fff 85%);
+    --gray-light:    color-mix(in var(--color-space), var(--gray), #fff 50%);
+    --gray-dark:     color-mix(in var(--color-space), var(--gray), #000 30%);
+    --gray-darker:   color-mix(in var(--color-space), var(--gray), #000 60%);
+
+    /* Semantic - automatisch aus Grundfarbe * /
+    --color-bg:   light-dark(var(--color-lightest), var(--color-darkest)); /* wird bereits auf "html" angewendet * /
+    --color-text: light-dark(var(--color-darkest), var(--color-lightest)); /* wird bereits auf "html" angewendet * /
+    --color-line: var(--color-text);
+    --color-area: light-dark(var(--color-lighter), var(--color-darker));
+
+    /* Farbpalette - Hue-Rotation * /
+    --palette-base: oklch(from var(--color) max(l, 0.4) max(c, 0.15) h);
+
+    --red:    oklch(from var(--palette-base) l c calc(25 + var(--hue-shift)));
+    --orange: oklch(from var(--palette-base) l c calc(60 + var(--hue-shift)));
+    --yellow: oklch(from var(--palette-base) l c calc(95 + var(--hue-shift)));
+    --lime:   oklch(from var(--palette-base) l c calc(125 + var(--hue-shift)));
+    --green:  oklch(from var(--palette-base) l c calc(155 + var(--hue-shift)));
+    --cyan:   oklch(from var(--palette-base) l c calc(195 + var(--hue-shift)));
+    --blue:   oklch(from var(--palette-base) l c calc(240 + var(--hue-shift)));
+    --purple: oklch(from var(--palette-base) l c calc(285 + var(--hue-shift)));
+    --pink:   oklch(from var(--palette-base) l c calc(340 + var(--hue-shift)));
+
+    --shadow-blur: var(--gap);
+    --shadow-color: color-mix(in srgb, var(--color-text), transparent 70%);
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
+    --shadow-s: calc(var(--shadow-x) * 0.5) calc(var(--shadow-y) * 0.5) calc(var(--shadow-blur) * 0.5) var(--shadow-color);
+    --shadow-l: calc(var(--shadow-x) * 1.5) calc(var(--shadow-y) * 1.5) calc(var(--shadow-blur) * 1.5) var(--shadow-color);
+
+    --color: #207acc;
+
+    --accent: var(--color);
+
+    --color-space: oklch;
+    --hue-shift: 0;
+
+    /* misc * /
+    --width: 50rem;
+    --gap: 1rem;
+
+    --line-width: 1px;
+    --radius: .3rem;
+
+    --shadow-x:0rem;
+    --shadow-y:.25rem;
+
+    /* form controls * /
+    --control-padding-x: .4em;
+    --control-padding-y: .3em;
+    --control-border-width: var(--line-width);
+    --control-radius: var(--radius);
+
+    --line-height: calc(var(--line-height-absolute) + var(--line-height-relative)); /* --line-height is set on every element, use this instead of line-height * /
+    --font-1: system-ui, sans-serif; /* main font * /
+    --font-2: system-ui, sans-serif;
+
+    --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-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+input, textarea, select, button, .btn {
+    box-shadow: var(--shadow);
+}
+
+button, .btn { /* button styles */
+    background-color:; /* default is var(--color) */
+    color:; /* default is var(--color-bg) */
+    padding-inline: var(--gap);
+    &:hover, &:focus {
+    }
+}
+
+dialog {
+}
+
+u2-alert {
+    background-color: var(--color);
+    color: var(--color-bg);
+    border: var(--line-width) solid var(--color-text);
+    padding: var(--gap);
+    &::part(icon) {
+        align-self: start;
+        color:inherit;
+    }
+}
+
+u2-accordion {
+    gap:; /* gap between triggers */
+    &::part(trigger) {
+    }
+    &::part(trigger):hover {
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+    }
+    &::part(content) {
+    }
+}
+
+table.u2-table {
+    & > thead {}
+    & > tbody {}
+    & > tfoot {}
+    & > * td {}
+    & > * th {}
+}
+
+.u2-card {
+    & > * {
+        padding: var(--gap); /* children have gaps not the card */
+    }
+}

package/theme/retro/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/retro/theme.css

@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+
+/* this is a very retro theme */
+
+html {
+    --hsl-h: 45; /* Orangefarbener Farbton */
+    --hsl-s: 100%; /* Sättigung */
+    --hsl-l: 50%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 10px;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0005;
+
+    --color-text: hsl(45, var(--hsl-s), 25%);
+    --color-bg: hsl(45, 100%, 90%);
+    --color-line: hsl(45, var(--hsl-s), 40%);
+}
+
+body {
+    font-size: min(1em, 17px);
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size: 3.5em;
+}
+h1, h2 {
+    font-family: 'Bebas Neue', sans-serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color: var(--color-line);
+    &:focus {
+        border-color: var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    border-color: var(--color-line);
+    padding-inline: 1.3em;
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+    }
+}
+
+dialog {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    border: var(--line-width) solid var(--color-line);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+}
+
+u2-alert {
+    background-color: color-mix(in srgb, var(--color), var(--color-bg) 96%);
+    border-width: 0 0 0 .13em;
+    border-width: 0;
+    font-size: max(.85rem, 14px);
+    &::part(icon) {
+        align-self: start;
+    }
+}
+
+u2-accordion {
+    &::part(trigger) {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+        padding: .7em;
+        border-radius: var(--radius);
+    }
+    &::part(trigger):hover {
+        background-color: color-mix(in srgb, var(--color-text), white 10%);
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+        outline: .12rem solid var(--color-text);
+        outline-offset: .18rem;
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+    }
+}

package/theme/soft/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/soft/theme.css

@@ -0,0 +1,84 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,400;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,400&display=swap');
+
+/* this is an elegant theme */
+
+html {
+    --hsl-h: 210; /* Eleganter Blauton */
+    --hsl-s: 20%; /* Sättigung */
+    --hsl-l: 40%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 0.3rem;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
+
+    --color-text: hsl(var(--hsl-h), var(--hsl-s), 25%);
+    --color-bg: hsl(var(--hsl-h), var(--hsl-s), 98%);
+    --color-line: hsl(var(--hsl-h), var(--hsl-s), 50%);
+}
+
+body {
+    font-size: min(1em, 17px);
+    font-family: 'Roboto', sans-serif;
+    background-color: var(--color-bg);
+    color: var(--color-text);
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size: 3.5em;
+}
+h1, h2 {
+    font-family: 'Playfair Display', serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color: var(--color-line);
+    border-radius: var(--radius);
+    &:focus {
+        border-color: var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: transparent;
+    color: var(--color-text);
+    border-color: var(--color-text);
+    padding-inline: 1.3em;
+    text-transform: uppercase;
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+    }
+}
+
+dialog {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    border: var(--line-width) solid var(--color-line);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+    border-radius: var(--radius);
+}
+
+u2-alert {
+    background-color: color-mix(in srgb, var(--color-text), var(--color-bg) 90%);
+    border-width: 0 0 0 var(--line-width);
+    font-size: max(.85rem, 14px);
+    padding: 1rem;
+    border-radius: var(--radius);
+}

package/theme/tech/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/tech/theme.css

@@ -0,0 +1,98 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300..900&display=swap');
+
+/* Tech Theme */
+
+html {
+    --hsl-h: 200; /* Blauer Farbton */
+    --hsl-s: 70%; /* Sättigung */
+    --hsl-l: 50%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 3px;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
+
+    --color-text: hsl(200, var(--hsl-s), 25%);
+}
+
+body {
+    font-size: min(1em, 17px);
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size:3.5em;
+}
+h1, h2 {
+    font-family: 'Roboto Mono', monospace;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color:var(--color-line);
+    &:focus {
+        border-color:var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: transparent;
+    color: var(--color-text);
+    border-color: var(--color-text);
+    padding-inline: 1.3em;
+    text-transform: uppercase;
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+    }
+}
+
+dialog {
+    background-color:var(--color-bg);
+    color:var(--color-text);
+    border: var(--line-width) solid var(--color-line);
+    padding:2rem;
+    box-shadow: var(--shadow);
+}
+
+u2-alert {
+    background-color: color-mix(in srgb, var(--color), var(--color-bg) 96%);
+    border-width: 0 0 0 .13em;
+    border-width:0;
+    font-size: max(.85rem, 14px);
+    &::part(icon) {
+        align-self:start;
+    }
+}
+
+u2-accordion {
+    &::part(trigger) {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+        padding: .7em;
+        border-radius: var(--radius);
+    }
+    &::part(trigger):hover {
+        background-color: color-mix(in srgb, var(--color-text), white 10%);
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+        outline: .12rem solid var(--color-text);
+        outline-offset: .18rem;
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+    }
+}

package/theme/test/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/test/theme.css

@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400..700&display=swap');
+
+/* Schatten Theme */
+
+html {
+    --hsl-h: 240; /* Blauer Farbton */
+    --hsl-s: 30%; /* Sättigung */
+    --hsl-l: 50%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 8px;
+
+    --shadow-x: 0.2rem;
+    --shadow-y: 0.5rem;
+    --shadow-blur: 1rem;
+    --shadow-color: rgba(0, 0, 0, 0.3);
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
+
+    --color-text: hsl(240, var(--hsl-s), 25%);
+    --color-bg: hsl(240, var(--hsl-s), 95%);
+}
+
+body {
+    font-size: min(1em, 17px);
+    box-shadow: var(--shadow);
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-text);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size: 3.5em;
+    text-shadow: var(--shadow);
+}
+h1, h2 {
+    font-family: 'Lora', serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color: var(--color-text);
+    box-shadow: var(--shadow);
+    &:focus {
+        border-color: var(--color-text);
+        box-shadow: 0 0 0.5rem var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: transparent;
+    color: var(--color-text);
+    border-color: var(--color-text);
+    padding-inline: 1.3em;
+    text-transform: uppercase;
+    transition: .2s;
+    box-shadow: var(--shadow);
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+        box-shadow: 0 0 0.5rem var(--color-text);
+    }
+}
+
+dialog {
+    background-color: var(--color-bg);
+    color: var(--color-text);
+    border: var(--line-width) solid var(--color-text);
+    padding: 2rem;
+    box-shadow: var(--shadow);
+}
+
+u2-alert {
+    background-color: color-mix(in srgb, var(--color-text), var(--color-bg) 96%);
+    border-width: 0 0 0 .13em;
+    font-size: max(.85rem, 14px);
+    box-shadow: var(--shadow);
+    &::part(icon) {
+        align-self: start;
+    }
+}
+
+u2-accordion {
+    &::part(trigger) {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+        padding: .7em;
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+    }
+    &::part(trigger):hover {
+        background-color: color-mix(in srgb, var(--color-text), white 10%);
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+        outline: .12rem solid var(--color-text);
+        outline-offset: .18rem;
+        box-shadow: 0 0 0.5rem var(--color-text);
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+        box-shadow: var(--shadow);
+    }
+}