u2ui 1.0.1 → 1.4.6

package/theme/elegance/theme.css

@@ -0,0 +1,120 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600&family=Merriweather:wght@400;700&display=swap');
+
+/* Modern and Elegant Theme */
+
+html {
+    --hsl-h: 210; /* Blauer Farbton */
+    --hsl-s: 50%; /* Sättigung */
+    --hsl-l: 45%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 5px;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(0, 0, 0, 0.1);
+
+    --color-text: hsl(210, var(--hsl-s), 20%);
+    --color-bg: hsl(210, var(--hsl-s), 95%);
+    --color-line: hsl(210, var(--hsl-s), 70%);
+}
+
+body {
+    font-family: 'Raleway', sans-serif;
+    font-size: min(1em, 17px);
+    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, h2, h3 {
+    font-family: 'Merriweather', serif;
+}
+
+h1 {
+    font-size: 3em;
+    color: hsl(210, var(--hsl-s), 30%);
+}
+
+h2 {
+    font-size: 2.5em;
+    color: hsl(210, var(--hsl-s), 25%);
+}
+
+h3 {
+    font-size: 2em;
+    color: hsl(210, var(--hsl-s), 20%);
+}
+
+input, textarea, select, button, .btn {
+    font-family: 'Raleway', sans-serif;
+    padding-inline: .8em;
+    padding-block: .6em;
+    border: var(--line-width) solid var(--color-line);
+    border-radius: var(--radius);
+    transition: border-color .2s;
+    &: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: background-color .2s, color .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-left: .3em solid var(--color-text);
+    font-size: max(.85rem, 14px);
+    padding: .7em;
+    border-radius: var(--radius);
+    &::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/luxury/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/luxury/theme.css

@@ -0,0 +1,107 @@
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+
+/* this is a very luxury theme */
+
+html {
+    --hsl-h: 45; /* Goldener Farbton */
+    --hsl-s: 70%; /* Sättigung */
+    --hsl-l: 50%; /* Helligkeit */
+
+    /* misc */
+    --width: 50rem; /* the main-width */
+    --line-width: 1px;
+    --radius: 0;
+
+    --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 { /* how to prevent custom-elements to recive the outline they are focu and active if an inner element is focus and active */
+    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);
+    &: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-duration: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-text);
+        color: var(--color-bg);
+    }
+}
+
+dialog {
+    transition-duration:.3s;
+    background-color:var(--color-bg);
+    color:var(--color-text);
+    border: var(--line-width) solid var(--color-line);
+    padding:2rem;
+    box-shadow: var(--shadow);
+}
+dialog::backdrop {
+    transition-duration:.3s;
+    background-color: color-mix(in srgb, var(--color-bg), transparent 15%);
+}
+
+
+
+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/minimalism/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/minimalism/theme.css

@@ -0,0 +1,103 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400..900&display=swap');
+
+/* this is a very modern minimalist theme */
+
+html {
+    --hsl-h: 220; /* Dunkelblauer Farbton */
+    --hsl-s: 20%; /* Sättigung */
+    --hsl-l: 90%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 4px;
+
+    --shadow-x: 0;
+    --shadow-y: .2rem;
+    --shadow-blur: .5rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0002;
+
+    --color-text: hsl(220, var(--hsl-s), 10%);
+    --color-bg: hsl(220, var(--hsl-s), 93%);
+    --color-line: hsl(220, var(--hsl-s), 50%);
+}
+
+body {
+    font-size: min(1em, 17px);
+    font-family: 'Montserrat', sans-serif;
+}
+
+:focus-visible {
+    outline: .12rem solid var(--color-line);
+    outline-offset: .18rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size: 4em;
+}
+h1, h2 {
+    font-family: 'Montserrat', sans-serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: .8em;
+    padding-block: .6em;
+    border-color: transparent;
+    border-radius: var(--radius);
+    background-color: var(--color-light);
+    color: var(--color-text);
+    &:focus {
+        border: .1rem solid var(--color-line);
+    }
+}
+
+button, .btn {
+    background-color: var(--color-text);
+    color: var(--color-bg);
+    border-color:transparent;
+    padding-inline: 1.3em;
+    border-radius: var(--radius);
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-line);
+        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-text), transparent 90%);
+    border-left: .3em solid var(--color-text);
+    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-line);
+        outline-offset: .18rem;
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+    }
+}

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

@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
+
+
+/* this is a very nature theme */
+
+html {
+    --hsl-h: 120; /* Grüner Farbton */
+    --hsl-s: 50%; /* Sättigung */
+    --hsl-l: 40%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 5px;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
+
+    --color-text: hsl(120, var(--hsl-s), 25%);
+    --color-bg: hsl(120, 40%, 98%);
+    --color-line: hsl(120, var(--hsl-s), 20%);
+}
+
+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: 'Merriweather', 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: 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/pastell/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/pastell/theme.css

@@ -0,0 +1,99 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
+
+/* this is a very pastel theme */
+
+html {
+    --hsl-h: 210; /* Blauer Farbton */
+    --hsl-s: 100%; /* Sättigung */
+    --hsl-l: 85%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 8px;
+
+    --shadow-x: 0;
+    --shadow-y: .25rem;
+    --shadow-blur: .8rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0003;
+
+    --color-text: hsl(210, var(--hsl-s), 30%);
+    --color-bg: hsl(210, 100%, 98%);
+    --color-line: hsl(210, var(--hsl-s), 60%);
+}
+
+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: 'Quicksand', 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-line);
+        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/pop/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/pop/theme.css

@@ -0,0 +1,101 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400..900&display=swap');
+
+/* this is a very pop pink theme */
+
+html {
+    --hsl-h: 330; /* Pinker Farbton */
+    --hsl-s: 100%; /* Sättigung */
+    --hsl-l: 70%; /* Helligkeit */
+
+    /* misc */
+    --width: 42rem;
+    --line-width: 1px;
+    --radius: 12px;
+
+    --shadow-x: 0;
+    --shadow-y: .5rem;
+    --shadow-blur: 1rem;
+    --shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) #0004;
+
+    --color-text: hsl(330, var(--hsl-s), 40%);
+    --color-bg: hsl(330, 100%, 95%);
+    --color-line: hsl(330, var(--hsl-s), 50%);
+}
+
+body {
+    font-size: min(1em, 17px);
+    font-family: 'Poppins', sans-serif;
+}
+
+:focus-visible {
+    outline: .15rem solid var(--color-line);
+    outline-offset: .2rem;
+    &:active { outline-width: .3rem; }
+}
+
+h1 {
+    font-size: 4em;
+    color: var(--color-text);
+}
+h1, h2 {
+    font-family: 'Poppins', sans-serif;
+}
+
+input, textarea, select, button, .btn {
+    padding-inline: 1em;
+    padding-block: .8em;
+    border-color: var(--color-line);
+    border-radius: var(--radius);
+    &:focus {
+        border-color: var(--color-text);
+    }
+}
+
+button, .btn {
+    background-color: var(--color-text);
+    color: var(--color-bg);
+    border: none;
+    padding-inline: 1.5em;
+    transition: .2s;
+    &:hover, &:focus {
+        background-color: var(--color-line);
+        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), transparent 90%);
+    border-left: .3em solid var(--color);
+    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: hsl(330, 100%, 60%);
+    }
+    &::part(trigger):focus, &::part(trigger):active {
+        outline: .15rem solid var(--color-line);
+        outline-offset: .2rem;
+    }
+    &::part(content) {
+        background-color: var(--color-bg);
+        padding: .7em;
+    }
+}