@schukai/monster 3.51.4 → 3.52.0

package/source/components/style/card.pcss

@@ -0,0 +1,108 @@
+@import "mixin/hover.pcss";
+
+
+.cards {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 22px;
+
+    & .card {
+
+        display: flex;
+        background-color: var(--monster-bg-color-primary-1);
+        color: var(--monster-color-primary-1);
+        box-sizing: border-box;
+
+        align-items: stretch;
+        flex-direction: column;
+        justify-content: space-between;
+        align-content: stretch;
+        flex-wrap: nowrap;
+
+        border-width: var(--monster-border-width);
+        border-radius: var(--monster-border-radius);
+        border-style: var(--monster-border-style);
+        border-shadow: var(--monster-box-shadow-1);
+
+        overflow: hidden;
+
+
+        & img {
+            object-fit: scale-down;
+            display: block;
+            padding: 0;
+            margin-left: 0;
+            width: 101%;
+            overflow: hidden;
+
+            &:hover {
+                @mixin box-hover;
+                transform: scale(1.05);
+            }
+
+        }
+
+
+        & p, & h1, & h2, & h3, & h4, & h5, & h6 {
+            margin: 0;
+            padding-right: 1rem;
+            padding-left: 1rem;
+        }
+
+        & p:last-child, & h1:last-child, & h2:last-child, & h3:last-child, & h4:last-child, & h5:last-child, & h6:last-child {
+            padding-bottom: 1rem;
+        }
+
+        & p:first-child, & h1:first-child, & h2:first-child, & h3:first-child, & h4:first-child, & h5:first-child, & h6:first-child {
+            padding-top: 1rem;
+        }
+
+        & img + p, & img + h1, & img + h2, & img + h3, & img + h4, & img + h5, & img + h6 {
+            padding-top: 1rem;
+        }
+
+        & p + img, & h1 + img, & h2 + img, & h3 + img, & h4 + img, & h5 + img, & h6 + img {
+            padding-bottom: 1rem;
+        }
+
+        & p + p, & h1 + p, & h2 + p, & h3 + p, & h4 + p, & h5 + p, & h6 + p {
+            padding-top: 1rem;
+        }
+
+        & button + p, & .button + p, & button + h1, & .button + h1, & button + h2, & .button + h2, & button + h3, & .button + h3, & button + h4, & .button + h4, & button + h5, & .button + h5, & button + h6, & .button + h6 {
+            padding-bottom: 1rem;
+        }
+
+        & p + button, & p + .button, & h1 + button, & h1 + .button, & h2 + button, & h2 + .button, & h3 + button, 
+        & h3 + .button, & h4 + button, & h4 + .button, & h5 + button, & h5 + .button, & h6 + button, & h6 + .button {
+            margin-top: 1rem;
+        }
+
+        & button, & .button {
+            border-left: none;
+            border-right: none;
+        }
+
+        & button:first-child, & .button:first-child {
+            border-top: none;
+        }
+
+        & button:last-child, & .button:last-child {
+            border-bottom: none;
+
+            &:hover {
+                @mixin box-hover;
+                transform: scale(1.05);
+            }
+        }
+
+        &.card:hover {
+            @mixin box-hover;
+            z-index: var(--monster-z-index-outline);
+        }
+    }
+}
+
+
+
+

package/source/components/style/color.pcss

@@ -0,0 +1,257 @@
+/*******
+
+Format for CSS variables: --monster-color-COLORNAME-SHADE
+
+Available values for COLORNAME:
+	gray,
+	rose, raspberry, red, orange, cinnamon, amber, yellow, lime,
+	chartreuse, green, emerald, aquamarine, teal, cyan, powder, sky
+	cerulean, azure, blue, indigo, violet, purple, magenta, pink
+
+Available values for SHADE:
+	1, 2, 3, 4, 5, 6
+
+Minimum contrast can be inferred by the difference between two SHADE numbers
+
+- Difference of 2: (3:1)
+- Difference of 3: (4.5:1)
+- Difference of 4: (7:1)
+
+reasonable-colors.css uses hex values. HSL, LCH, and RGB color spaces are available.
+
+For .scss friendly variable declarations, FILENAME.scss for each color space are provided.
+
+More information available at: https://www.reasonable.work/colors 
+License: [MIT](https://github.com/matthewhowell/reasonable-colors/blob/master/LICENSE)
+
+*******/
+
+:root,
+::after,
+::before {
+    /** palette **/
+
+    /* gray */
+    --monster-color-gray-1: #f6f6f6;
+    --monster-color-gray-2: #e2e2e2;
+    --monster-color-gray-3: #8b8b8b;
+    --monster-color-gray-4: #6f6f6f;
+    --monster-color-gray-5: #3e3e3e;
+    --monster-color-gray-6: #222222;
+
+    /* rose */
+    /* hue 1 */
+    --monster-color-rose-1: #fff7f9;
+    --monster-color-rose-2: #ffdce5;
+    --monster-color-rose-3: #ff3b8d;
+    --monster-color-rose-4: #db0072;
+    --monster-color-rose-5: #800040;
+    --monster-color-rose-6: #4c0023;
+
+    /* raspberry */
+    /* hue 2 */
+    --monster-color-raspberry-1: #fff8f8;
+    --monster-color-raspberry-2: #ffdddf;
+    --monster-color-raspberry-3: #ff426c;
+    --monster-color-raspberry-4: #de0051;
+    --monster-color-raspberry-5: #82002c;
+    --monster-color-raspberry-6: #510018;
+
+    /* red */
+    /* hue 3 */
+    --monster-color-red-1: #fff8f6;
+    --monster-color-red-2: #ffddd8;
+    --monster-color-red-3: #ff4647;
+    --monster-color-red-4: #e0002b;
+    --monster-color-red-5: #830014;
+    --monster-color-red-6: #530003;
+
+    /* orange */
+    /* hue 4 */
+    --monster-color-orange-1: #fff8f5;
+    --monster-color-orange-2: #ffded1;
+    --monster-color-orange-3: #fd4d00;
+    --monster-color-orange-4: #cd3c00;
+    --monster-color-orange-5: #752100;
+    --monster-color-orange-6: #401600;
+
+    /* cinnamon */
+    /* hue 5 */
+    --monster-color-cinnamon-1: #fff8f3;
+    --monster-color-cinnamon-2: #ffdfc6;
+    --monster-color-cinnamon-3: #d57300;
+    --monster-color-cinnamon-4: #ac5c00;
+    --monster-color-cinnamon-5: #633300;
+    --monster-color-cinnamon-6: #371d00;
+
+    /* amber */
+    /* hue 6 */
+    --monster-color-amber-1: #fff8ef;
+    --monster-color-amber-2: #ffe0b2;
+    --monster-color-amber-3: #b98300;
+    --monster-color-amber-4: #926700;
+    --monster-color-amber-5: #523800;
+    --monster-color-amber-6: #302100;
+
+    /* yellow */
+    /* hue 7 */
+    --monster-color-yellow-1: #fff9e5;
+    --monster-color-yellow-2: #ffe53e;
+    --monster-color-yellow-3: #9c8b00;
+    --monster-color-yellow-4: #7d6f00;
+    --monster-color-yellow-5: #463d00;
+    --monster-color-yellow-6: #292300;
+
+    /* lime */
+    /* hue 8 */
+    --monster-color-lime-1: #f7ffac;
+    --monster-color-lime-2: #d5f200;
+    --monster-color-lime-3: #819300;
+    --monster-color-lime-4: #677600;
+    --monster-color-lime-5: #394100;
+    --monster-color-lime-6: #222600;
+
+    /* chartreuse */
+    /* hue 9 */
+    --monster-color-chartreuse-1: #e5ffc3;
+    --monster-color-chartreuse-2: #98fb00;
+    --monster-color-chartreuse-3: #5c9b00;
+    --monster-color-chartreuse-4: #497c00;
+    --monster-color-chartreuse-5: #264500;
+    --monster-color-chartreuse-6: #182600;
+
+    /* green */
+    /* hue 10 */
+    --monster-color-green-1: #e0ffd9;
+    --monster-color-green-2: #72ff6c;
+    --monster-color-green-3: #00a21f;
+    --monster-color-green-4: #008217;
+    --monster-color-green-5: #004908;
+    --monster-color-green-6: #062800;
+
+    /* emerald */
+    /* hue 11 */
+    --monster-color-emerald-1: #dcffe6;
+    --monster-color-emerald-2: #5dffa2;
+    --monster-color-emerald-3: #00a05a;
+    --monster-color-emerald-4: #008147;
+    --monster-color-emerald-5: #004825;
+    --monster-color-emerald-6: #002812;
+
+    /* aquamarine */
+    /* hue 12 */
+    --monster-color-aquamarine-1: #daffef;
+    --monster-color-aquamarine-2: #42ffc6;
+    --monster-color-aquamarine-3: #009f78;
+    --monster-color-aquamarine-4: #007f5f;
+    --monster-color-aquamarine-5: #004734;
+    --monster-color-aquamarine-6: #00281b;
+
+    /* teal */
+    /* hue 13 */
+    --monster-color-teal-1: #d7fff7;
+    --monster-color-teal-2: #00ffe4;
+    --monster-color-teal-3: #009e8c;
+    --monster-color-teal-4: #007c6e;
+    --monster-color-teal-5: #00443c;
+    --monster-color-teal-6: #002722;
+
+    /* cyan */
+    /* hue 14 */
+    --monster-color-cyan-1: #c4fffe;
+    --monster-color-cyan-2: #00fafb;
+    --monster-color-cyan-3: #00999a;
+    --monster-color-cyan-4: #007a7b;
+    --monster-color-cyan-5: #004344;
+    --monster-color-cyan-6: #002525;
+
+    /* powder */
+    /* hue 15 */
+    --monster-color-powder-1: #dafaff;
+    --monster-color-powder-2: #8df0ff;
+    --monster-color-powder-3: #0098a9;
+    --monster-color-powder-4: #007987;
+    --monster-color-powder-5: #004048;
+    --monster-color-powder-6: #002227;
+
+    /* sky */
+    /* hue 16 */
+    --monster-color-sky-1: #e3f7ff;
+    --monster-color-sky-2: #aee9ff;
+    --monster-color-sky-3: #0094b4;
+    --monster-color-sky-4: #007590;
+    --monster-color-sky-5: #00404f;
+    --monster-color-sky-6: #001f28;
+
+    /* cerulean */
+    /* hue 17 */
+    --monster-color-cerulean-1: #e8f6ff;
+    --monster-color-cerulean-2: #b9e3ff;
+    --monster-color-cerulean-3: #0092c5;
+    --monster-color-cerulean-4: #00749d;
+    --monster-color-cerulean-5: #003c54;
+    --monster-color-cerulean-6: #001d2a;
+
+    /* azure */
+    /* hue 18 */
+    --monster-color-azure-1: #e8f2ff;
+    --monster-color-azure-2: #c6e0ff;
+    --monster-color-azure-3: #008fdb;
+    --monster-color-azure-4: #0071af;
+    --monster-color-azure-5: #003b5e;
+    --monster-color-azure-6: #001c30;
+
+    /* blue */
+    /* hue 19 */
+    --monster-color-blue-1: #f0f4ff;
+    --monster-color-blue-2: #d4e0ff;
+    --monster-color-blue-3: #0089fc;
+    --monster-color-blue-4: #006dca;
+    --monster-color-blue-5: #00386d;
+    --monster-color-blue-6: #001a39;
+
+    /* indigo */
+    /* hue 20 */
+    --monster-color-indigo-1: #f3f3ff;
+    --monster-color-indigo-2: #deddff;
+    --monster-color-indigo-3: #657eff;
+    --monster-color-indigo-4: #0061fc;
+    --monster-color-indigo-5: #00328a;
+    --monster-color-indigo-6: #001649;
+
+    /* violet */
+    /* hue 21 */
+    --monster-color-violet-1: #f7f1ff;
+    --monster-color-violet-2: #e8daff;
+    --monster-color-violet-3: #9b70ff;
+    --monster-color-violet-4: #794aff;
+    --monster-color-violet-5: #2d0fbf;
+    --monster-color-violet-6: #0b0074;
+
+    /* purple */
+    /* hue 22 */
+    --monster-color-purple-1: #fdf4ff;
+    --monster-color-purple-2: #f7d9ff;
+    --monster-color-purple-3: #d150ff;
+    --monster-color-purple-4: #b01fe3;
+    --monster-color-purple-5: #660087;
+    --monster-color-purple-6: #3a004f;
+
+    /* magenta */
+    /* hue 23 */
+    --monster-color-magenta-1: #fff3fc;
+    --monster-color-magenta-2: #ffd7f6;
+    --monster-color-magenta-3: #f911e0;
+    --monster-color-magenta-4: #ca00b6;
+    --monster-color-magenta-5: #740068;
+    --monster-color-magenta-6: #44003c;
+
+    /* pink */
+    /* hue 24 */
+    --monster-color-pink-1: #fff7fb;
+    --monster-color-pink-2: #ffdcec;
+    --monster-color-pink-3: #ff2fb2;
+    --monster-color-pink-4: #d2008f;
+    --monster-color-pink-5: #790051;
+    --monster-color-pink-6: #4b0030;
+}

package/source/components/style/common.pcss

@@ -0,0 +1,103 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+
+* {
+    box-sizing: border-box;
+    font-family: var(--monster-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
+}
+
+
+
+
+.visible {
+    tvisibility: visible !important;
+}
+
+
+
+.invisible {
+    visibility: hidden !important;
+}
+
+
+.hidden {
+    display: none !important;
+}
+
+
+.inline {
+    display: inline !important;
+}
+
+
+.block {
+    display: block !important;
+}
+
+
+.flex {
+    display: flex !important;
+}
+
+
+[data-monster-role=control] {
+    outline: none;
+}
+
+
+div[data-monster-role=popper] {
+    box-sizing: border-box;
+    display: none;
+    border: var(--monster-border-width, 1px) solid var(--monster-border-color, black);
+    padding: 0px;
+    z-index: 10;
+    background-color: white;
+}
+
+
+:host([disabled]) {
+    border-color: var(--monster-disabled-border-color, rgba(118, 118, 118, 0.3));
+    color: var(--monster-disabled-color, rgb(84, 84, 84));
+    background-color: var(--monster-disabled-background-color, rgba(239, 239, 239, 0.3));
+}
+
+
+:host([disabled]) * {
+    border-color: var(--monster-disabled-border-color, rgba(118, 118, 118, 0.3));
+    color: var(--monster-disabled-color, rgb(84, 84, 84));
+}
+
+
+:disabled {
+    border-color: var(--monster-disabled-border-color, rgba(118, 118, 118, 0.3));
+    color: var(--monster-disabled-color, rgb(84, 84, 84));
+    background-color: var(--monster-disabled-background-color, rgba(239, 239, 239, 0.3));
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: .55;
+}
+
+
+
+input:focus-visible {
+    outline: none;
+}

package/source/components/style/control.pcss

@@ -0,0 +1,11 @@
+[data-monster-role=control] {
+    outline: none;
+    width: 100%;
+}
+
+[data-monster-role=control].flex {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+

package/source/components/style/data-grid.pcss

@@ -0,0 +1,43 @@
+@import "mixin/media.pcss";
+@import "mixin/typography.pcss";
+
+
+
+.monster-data-grid-container {
+    display: block;
+    width: 100%;
+    overflow-x: auto;
+    background-color: var(--monster-bg-color-primary-2);
+    color: var(--monster-color-primary-2);
+    padding: 20px;
+    box-sizing: border-box;
+
+    & > div {
+        display: grid;
+    }
+
+    @for $i from 1 to 50 {
+        & .col-$(i) {
+            grid-column: $(i);
+            color: var(--monster-color-primary-1);
+            background-color: var(--monster-bg-color-primary-1);
+            border: none;
+            padding: 0.4rem 0.4rem;
+            display: flex;
+            @mixin paragraph;
+        }
+    }
+
+    & .col-start-end {
+        grid-column: 1 / -1;
+    }
+
+    & .header {
+        font-weight: 600;
+        font-size: 1rem;
+        margin-bottom: 0.4rem;
+        @mixin paragraph;
+    }
+
+
+}

package/source/components/style/display.pcss

@@ -0,0 +1,42 @@
+.block {
+    display: block;
+}
+
+.inline {
+    display: inline;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
+.grid {
+    display: grid;
+}
+
+.inline-grid {
+    display: inline-grid;
+}
+
+.flex {
+    display: flex;
+}
+
+.inline-flex {
+    display: inline-flex;
+}
+
+.hidden,
+.none,
+.hide {
+    display: none;
+}
+
+.visible {
+    visibility: visible;
+}
+
+.invisible {
+    visibility: hidden;
+}
+

package/source/components/style/floating-ui.pcss

@@ -0,0 +1,33 @@
+div[data-monster-role=popper] {
+
+    box-sizing: border-box;
+    display: none;
+    padding: 1.1em;
+    z-index: var(--monster-z-index-modal);
+    background: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
+    border-radius: var(--monster-border-radius);
+    border-width: var(--monster-border-width);
+    border-style: var(--monster-border-style);
+    border-color: var(--monster-bg-color-primary-4);
+    box-shadow: var(--monster-box-shadow-1);
+
+    justify-content: space-between;
+    align-content: center;
+
+    width: max-content;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+
+    & div[data-monster-role=arrow] {
+        position: absolute;
+        width: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));
+        height: calc(2 * max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance)));
+        z-index: -1;
+        pointer-events: none;
+        background: var(--monster-bg-color-primary-1);
+    }
+
+}

package/source/components/style/form.pcss

@@ -0,0 +1,5 @@
+@import "mixin/form.pcss";
+
+.monster-form {
+    @mixin form;
+}

package/source/components/style/host.pcss

@@ -0,0 +1,15 @@
+:host([disabled]), :host([disabled]) * {
+    color: var(--monster-color-primary-3, inherit);
+    background-color: var(--monster-bg-color-primary-3, inherit);
+    border-color: var(--monster-color-primary-3, inherit);
+}
+
+:disabled {
+    color: var(--monster-color-primary-3, inherit);
+    background-color: var(--monster-bg-color-primary-3, inherit);
+    border-color: var(--monster-color-primary-3, inherit);
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: .55;
+}
+

package/source/components/style/link.pcss

@@ -0,0 +1,63 @@
+
+
+
+
+/**
+Note the order there is important (LVHA-order):
+- Link
+- Visited
+- Hover
+- Active
+- Focus
+
+@see https://developer.mozilla.org/en-US/docs/Web/CSS/:link?retiredLocale=de
+
+ */
+
+
+a, a:link, a:visited, a:hover, a:active, a:focus {
+    color: var(--monster-color-primary-1);
+    text-decoration: none;
+    outline: none;
+    background:
+            linear-gradient(
+                    to right,
+                    var(--monster-color-gradient-1),
+                    var(--monster-color-gradient-2),
+                    var(--monster-color-gradient-3)
+            );
+    background-size: 100% 1px, 0 3px;
+    background-position: 100% 100%, 0 100%;
+    background-repeat: no-repeat;
+    transition: background-size 400ms;
+}
+
+a:hover, a:active, a:focus {
+    outline: none;
+    background: linear-gradient(
+            to right,
+            var(--monster-color-gradient-1),
+            var(--monster-color-gradient-2),
+            var(--monster-color-gradient-3)
+    );
+    
+    background-clip: text;
+    color: transparent;
+    
+    
+}
+
+
+a:focus {
+    outline: 1px dashed var(--monster-color-selection-4);
+    outline-offset: 2px;
+}
+
+@media (prefers-color-scheme: light) {
+
+    a:focus {
+        outline: 1px dashed var(--monster-color-selection-3);
+        outline-offset: 2px;
+    }
+
+}

package/source/components/style/mixin/badge.pcss

@@ -0,0 +1,18 @@
+@define-mixin badge {
+    display: inline-block;
+    padding: .25em .4em;
+    font-size: 75%;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
+    vertical-align: baseline;
+    border-radius: .25rem;
+    text-decoration: none;
+}
+
+@define-mixin pill {
+    padding-right: .6em;
+    padding-left: .6em;
+    border-radius: 10rem;
+}