@schukai/monster 3.51.5 → 3.52.0

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

@@ -0,0 +1,54 @@
+@define-mixin button {
+
+    /** 
+     * https://caniuse.com/?search=fill-available
+     * https://lists.w3.org/Archives/Public/www-style/2015Aug/0127.html 
+     * https://caniuse.com/mdn-css_properties_width_stretch
+     * autoprefix change this to -webkit-fill-available
+    */
+    width: stretch;
+
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+
+    text-align: center;
+    text-decoration: none;
+
+    vertical-align: middle;
+
+    cursor: pointer;
+
+    user-select: none;
+
+    border-width: var(--monster-border-width);
+    border-radius: var(--monster-border-radius);
+    border-style: var(--monster-border-style);
+    box-shadow: var(--monster-box-shadow-1);
+
+    padding: .375rem .75rem;
+    outline: none;
+
+    display: inline-block;
+
+    background-position: center;
+
+    position: relative;
+    overflow: hidden;
+
+    font-family: var(--monster-font-family);
+
+    box-shadow: var(--monster-box-shadow-1);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: .4rem;
+
+}
+
+
+
+
+
+

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

@@ -0,0 +1,247 @@
+@import "hover.pcss";
+
+@define-mixin form {
+
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: nowrap;
+    position: relative;
+    flex-direction: column;
+    align-content: flex-start;
+    align-items: flex-start;
+    accent-color: var(--monster-color-secondary-2);
+
+    & label {
+        color: var(--monster-color-primary-1);
+        background-color: var(--monster-bg-color-primary-1);
+        display: grid;
+    }
+
+    & label:has(input[type="radio"]) {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+
+        & input {
+            margin-right: 0.4rem;
+            margin-left: 0.4rem;
+        }
+
+    }
+
+    & label:has(input[type="radio"]) ~ label:has(input[type="radio"]) {
+        margin-top: 0.2rem;
+    }
+
+    & label:has(input[type="checkbox"]) {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+
+        & input {
+            margin-right: 0.4rem;
+            margin-left: 0.4rem;
+        }
+
+    }
+
+    & label:has(input[type="checkbox"]) ~ label:has(input[type="checkbox"]) {
+        margin-top: 0.2rem;
+    }
+
+    & label ~ label {
+        margin-top: 1rem;
+    }
+
+    & label ~ fieldset {
+        margin-top: 1rem;
+    }
+
+    & button,
+    & input,
+    & select,
+    & textarea {
+        font-family: inherit;
+        font-size: 100%;
+        padding: 0.4rem 0.6rem;
+        margin: 0;
+        outline: none;
+        box-sizing: border-box;
+        accent-color: var(--monster-color-secondary-2);
+
+        color: var(--monster-color-primary-1);
+        background-color: var(--monster-bg-color-primary-1);
+
+    }
+
+
+    & button {
+        color: var(--monster-color-tertiary-1);
+        background-color: var(--monster-bg-color-tertiary-1);
+
+        /** monster-border-primary-1 */
+        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);
+        border-color: var(--monster-bg-color-primary-3);
+    }
+
+    & option:checked {
+        background-color: var(--monster-bg-color-primary-3);
+        color: var(--monster-color-primary-3);
+    }
+
+    & option:focus {
+        background-color: var(--monster-bg-color-primary-3);
+        color: var(--monster-color-primary-3);
+    }
+
+    & option:hover {
+        background-color: var(--monster-bg-color-primary-3);
+        color: var(--monster-color-primary-3);
+    }
+
+    & input,
+    & select,
+    & textarea {
+        border: 0;
+        border-bottom-width: thin;
+        border-bottom-radius: var(--monster-border-radius);
+        border-bottom-style: var(--monster-border-style);
+        border-bottom-shadow: var(--monster-box-shadow-1);
+        border-bottom-color: var(--monster-bg-color-primary-1);
+    }
+
+
+    & input,
+    & select,
+    & textarea {
+        border-width: thin;
+        border-radius: var(--monster-border-radius);
+        border-style: var(--monster-border-style);
+        border-shadow: var(--monster-box-shadow-1);
+        border-color: var(--monster-bg-color-primary-2);
+    }
+
+
+    & button,
+    & input:not([type="radio"]):not([type="checkbox"]),
+    & select,
+    & textarea {
+        width: 100%;
+    }
+
+    & label {
+        width: 100%;
+
+        & input:not([type="radio"]):not([type="checkbox"]),
+        & select,
+        & textarea {
+            width: 100%;
+            margin-top: 0.2rem;
+        }
+
+    }
+
+    & label + input:not([type="radio"]):not([type="checkbox"]),
+    & label + select,
+    & label + textarea {
+        width: 100%;
+        margin-top: 0.2rem;
+    }
+
+
+    & fieldset {
+        margin: 0;
+        position: relative;
+        padding: 2.5rem 2rem 2rem;
+        border: 2px solid var(--monster-bg-color-primary-3);
+
+        background-color: var(--monster-bg-color-primary-1);
+        color: var(--monster-color-primary-1);
+
+        box-sizing: border-box;
+        width: 100%;
+        outline: none;
+
+        & legend {
+            position: absolute;
+            top: 0;
+            right: 0px;
+            padding: 0.1rem 2rem 0.2rem 0.5rem;
+            max-width: 95%;
+            text-align: right;
+            text-transform: uppercase;
+            text-overflow: ellipsis;
+            font-size: 0.8rem;
+            overflow: hidden;
+            white-space: nowrap;
+        }
+
+        & label {
+        }
+
+    }
+
+    & fieldset ~ fieldset {
+        margin-top: 1rem;
+    }
+
+    & button {
+        margin: 0.2rem 0;
+    }
+
+    & button:first-of-type {
+        margin-top: 1rem;
+    }
+
+    & button:last-of-type {
+        margin-bottom: 1rem;
+    }
+
+    & input:focus-visible {
+        outline: none;
+    }
+
+
+    & button:focus,
+    & input:focus,
+    & select:focus,
+    & textarea:focus {
+        outline: 1px dashed var(--monster-color-selection-4);
+        outline-offset: 2px;
+    }
+
+
+    @media (prefers-color-scheme: light) {
+        & button,
+        & input,
+        & select,
+        & textarea {
+            background-color: var(--monster-bg-color-primary-2);
+            color: var(--monster-color-primary-2);
+            border-color: var(--monster-bg-color-primary-3);
+        }
+
+        & button:focus,
+        & input:focus,
+        & select:focus,
+        & textarea:focus {
+            outline: 1px dashed var(--monster-color-selection-3);
+            outline-offset: 2px;
+        }        
+        
+    }
+
+    & button:hover,
+    & input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
+    & select:hover,
+    & textarea:hover {
+        @mixin box-hover;
+    }
+
+
+}

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

@@ -0,0 +1,8 @@
+/**
+ here as seperate mixin, because nested don't work with slotted
+ https://github.com/postcss/postcss-nested/issues/148
+ */
+@define-mixin box-hover {
+    transition: background 0.8s, color 0.25s 0.0833333333s;
+    box-shadow: var(--monster-box-shadow-2)
+} 

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

@@ -0,0 +1,107 @@
+@define-mixin viewport0 {
+    @media (max-width: 480px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport-4 {
+    @media (max-width: 480px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport-7 {
+    @media (max-width: 768px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport-9 {
+    @media (max-width: 992px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport-12 {
+    @media (max-width: 1200px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport4 {
+    @media (min-width: 480px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport4-7 {
+    @media (min-width: 480px) and (max-width: 768px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport7 {
+    @media (min-width: 768px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport7-9 {
+    @media (min-width: 768px) and (max-width: 992px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport9 {
+    @media (min-width: 992px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport9-12 {
+    @media (min-width: 992px) and (max-width: 1200px) {
+        @mixin-content;
+    }
+}
+
+@define-mixin viewport12 {
+    @media (min-width: 1200px) {
+        @mixin-content;
+    }
+}
+
+
+/**
+Mobile, portrait ****
+320px	iPhone SE
+375px	iPhone 6, 7, 8, X
+414px	iPhone 8 Plus
+
+Mobile, landscape ****
+568px	iPhone SE
+667px	iPhone 6, 7, 8
+736px	iPhone 8 Plus
+812px	iPhone X
+
+Tablet, portrait ****	
+768px	iPad Air, iPad Mini, iPad Pro 9"
+834px	iPad Pro 10"
+
+Tablet, landscape ****	
+1024px	iPad Air, iPad Mini, iPad Pro 9"
+1024px	iPad Pro 12" (portrait)
+1112px	iPad Pro 10"
+
+Laptop displays	
+1366px	HD laptops (768p)
+1366px	iPad Pro 12" (landscape)
+1440px	13" MacBook Pro (2x scaling)
+
+Desktop displays	
+1680px	13" MacBook Pro (1.5x scaling)
+1920px	1080p displays
+
+- https://polypane.app/blog/the-complete-guide-to-css-media-queries/
+- https://css-tricks.com/a-complete-guide-to-custom-properties/
+*/
+

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

@@ -0,0 +1,288 @@
+@define-mixin defaultPoperProperty {
+    --monster-popper-witharrrow-distance: -4px;
+}
+
+@define-mixin defaultTextProperty {
+    --monster-text-shadow: none;
+}
+
+@define-mixin defaultSpaceProperty {
+    --monster-space-0: 0;
+    --monster-space-1: 2px;
+    --monster-space-2: 4px;
+    --monster-space-3: 6px;
+    --monster-space-4: 10px;
+    --monster-space-5: 16px;
+    --monster-space-6: 26px;
+    --monster-space-7: 42px;
+}
+
+@define-mixin defaultBreakPointProperty {
+    --monster-breakpoint-0: 480px;
+    --monster-breakpoint-4: 480px;
+    --monster-breakpoint-7: 768px;
+    --monster-breakpoint-9: 992px;
+    --monster-breakpoint-12: 1200px;
+}
+
+@define-mixin defaultZIndexProperty {
+    --monster-z-index-default: 0;
+    --monster-z-index-outline: 10;
+    --monster-z-index-dropdown: 200;
+    --monster-z-index-dropdown-overlay: 210;
+    --monster-z-index-sticky: 300;
+    --monster-z-index-sticky-overlay: 310;
+    --monster-z-index-fixed: 400;
+    --monster-z-index-fixed-overlay: 410;
+    --monster-z-index-modal-backdrop: 500;
+    --monster-z-index-modal-backdrop-overlay: 510;
+    --monster-z-index-offcanvas: 600;
+    --monster-z-index-offcanvas-overlay: 610;
+    --monster-z-index-modal: 700;
+    --monster-z-index-modal-overlay: 710;
+    --monster-z-index-popover: 800;
+    --monster-z-index-popover-overlay: 810;
+    --monster-z-index-tooltip: 800;
+    --monster-z-index-tooltip-overlay: 910;
+}
+
+@define-mixin defaultShadowProperty {
+    --monster-box-shadow-1: none;
+    --monster-box-shadow-2: -1px 1px 10px 1px rgba(194, 194, 194, 0.61);
+}
+
+@define-mixin defaultBorderProperty {
+    --monster-border-style: solid;
+    --monster-border-width: 2px;
+    --monster-border-radius: 0;
+}
+
+@define-mixin defaultFontProperty {
+    /** Fonts / Text / Typography **/
+    --monster-font-family: -apple-system,
+    BlinkMacSystemFont,
+    "Quicksand",
+    "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", Arial, sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+
+
+}
+
+@define-mixin defaultColorProperty {
+
+    /** PRIMARY */
+    --monster-color-primary-1: var(--monster-color-gray-6);
+    --monster-color-primary-2: var(--monster-color-gray-6);
+    --monster-color-primary-3: var(--monster-color-gray-1);
+    --monster-color-primary-4: var(--monster-color-gray-1);
+
+    --monster-bg-color-primary-1: var(--monster-color-gray-1);
+    --monster-bg-color-primary-2: var(--monster-color-gray-2);
+    --monster-bg-color-primary-3: var(--monster-color-gray-3);
+    --monster-bg-color-primary-4: var(--monster-color-gray-6);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-primary-1: var(--monster-color-gray-1);
+        --monster-color-primary-2: var(--monster-color-gray-1);
+        --monster-color-primary-3: var(--monster-color-gray-6);
+        --monster-color-primary-4: var(--monster-color-gray-6);
+
+        --monster-bg-color-primary-1: var(--monster-color-gray-6);
+        --monster-bg-color-primary-2: var(--monster-color-gray-3);
+        --monster-bg-color-primary-3: var(--monster-color-gray-2);
+        --monster-bg-color-primary-4: var(--monster-color-gray-1);
+    }
+
+    /** SECONDARY */
+    --monster-color-secondary-1: var(--monster-color-red-4);
+    --monster-color-secondary-2: var(--monster-color-red-4);
+    --monster-color-secondary-3: var(--monster-color-red-1);
+    --monster-color-secondary-4: var(--monster-color-red-1);
+
+    --monster-bg-color-secondary-1: var(--monster-color-gray-1);
+    --monster-bg-color-secondary-2: var(--monster-color-red-2);
+    --monster-bg-color-secondary-3: var(--monster-color-red-3);
+    --monster-bg-color-secondary-4: var(--monster-color-red-6);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-secondary-1: var(--monster-color-red-1);
+        --monster-color-secondary-2: var(--monster-color-red-1);
+        --monster-color-secondary-3: var(--monster-color-red-6);
+        --monster-color-secondary-4: var(--monster-color-red-4);
+
+        --monster-bg-color-secondary-1: var(--monster-color-gray-6);
+        --monster-bg-color-secondary-2: var(--monster-color-red-3);
+        --monster-bg-color-secondary-3: var(--monster-color-red-2);
+        --monster-bg-color-secondary-4: var(--monster-color-red-1);
+    }
+
+    /** TERTIARY */
+    --monster-color-tertiary-1: var(--monster-color-magenta-4);
+    --monster-color-tertiary-2: var(--monster-color-magenta-4);
+    --monster-color-tertiary-3: var(--monster-color-magenta-6);
+    --monster-color-tertiary-4: var(--monster-color-magenta-1);
+
+    --monster-bg-color-tertiary-1: var(--monster-color-gray-1);
+    --monster-bg-color-tertiary-2: var(--monster-color-magenta-1);
+    --monster-bg-color-tertiary-3: var(--monster-color-magenta-2);
+    --monster-bg-color-tertiary-4: var(--monster-color-magenta-6);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-tertiary-1: var(--monster-color-magenta-1);
+        --monster-color-tertiary-2: var(--monster-color-magenta-6);
+        --monster-color-tertiary-3: var(--monster-color-magenta-4);
+        --monster-color-tertiary-4: var(--monster-color-magenta-4);
+
+        --monster-bg-color-tertiary-1: var(--monster-color-gray-6);
+        --monster-bg-color-tertiary-2: var(--monster-color-magenta-2);
+        --monster-bg-color-tertiary-3: var(--monster-color-magenta-1);
+        --monster-bg-color-tertiary-4: var(--monster-color-magenta-1);
+    }
+
+    /** DESTRUCTIVE **/
+    --monster-color-destructive-1: var(--monster-color-red-1);
+    --monster-color-destructive-2: var(--monster-color-red-4);
+    --monster-color-destructive-3: var(--monster-color-red-6);
+    --monster-color-destructive-4: var(--monster-color-red-1);
+
+    --monster-bg-color-destructive-1: var(--monster-color-red-4);
+    --monster-bg-color-destructive-2: var(--monster-color-gray-1);
+    --monster-bg-color-destructive-3: var(--monster-color-red-2);
+    --monster-bg-color-destructive-4: var(--monster-color-red-5);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-destructive-1: var(--monster-color-red-1);
+        --monster-color-destructive-2: var(--monster-color-red-3);
+        --monster-color-destructive-3: var(--monster-color-red-4);
+        --monster-color-destructive-4: var(--monster-color-red-1);
+
+        --monster-bg-color-destructive-1: var(--monster-color-red-5);
+        --monster-bg-color-destructive-2: var(--monster-color-gray-6);
+        --monster-bg-color-destructive-3: var(--monster-color-red-1);
+        --monster-bg-color-destructive-4: var(--monster-color-red-4);
+    }
+
+    /** SUCCESS **/
+    --monster-color-success-1: var(--monster-color-green-1);
+    --monster-color-success-2: var(--monster-color-green-4);
+    --monster-color-success-3: var(--monster-color-green-6);
+    --monster-color-success-4: var(--monster-color-green-1);
+
+    --monster-bg-color-success-1: var(--monster-color-green-3);
+    --monster-bg-color-success-2: var(--monster-color-gray-1);
+    --monster-bg-color-success-3: var(--monster-color-green-2);
+    --monster-bg-color-success-4: var(--monster-color-green-5);
+
+    @media (prefers-color-scheme: dark) {
+
+        --monster-color-success-1: var(--monster-color-green-1);
+        --monster-color-success-2: var(--monster-color-green-2);
+        --monster-color-success-3: var(--monster-color-green-4);
+        --monster-color-success-4: var(--monster-color-green-1);
+
+        --monster-bg-color-success-1: var(--monster-color-green-5);
+        --monster-bg-color-success-2: var(--monster-color-gray-6);
+        --monster-bg-color-success-3: var(--monster-color-green-1);
+        --monster-bg-color-success-4: var(--monster-color-green-3);
+    }
+
+    /** WARNING **/
+    --monster-color-warning-1: var(--monster-color-orange-1);
+    --monster-color-warning-2: var(--monster-color-orange-4);
+    --monster-color-warning-3: var(--monster-color-orange-6);
+    --monster-color-warning-4: var(--monster-color-orange-1);
+
+    --monster-bg-color-warning-1: var(--monster-color-orange-3);
+    --monster-bg-color-warning-2: var(--monster-color-gray-1);
+    --monster-bg-color-warning-3: var(--monster-color-orange-2);
+    --monster-bg-color-warning-4: var(--monster-color-orange-5);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-warning-1: var(--monster-color-orange-1);
+        --monster-color-warning-2: var(--monster-color-orange-3);
+        --monster-color-warning-3: var(--monster-color-orange-4);
+        --monster-color-warning-4: var(--monster-color-orange-1);
+
+        --monster-bg-color-warning-1: var(--monster-color-orange-5);
+        --monster-bg-color-warning-2: var(--monster-color-gray-6);
+        --monster-bg-color-warning-3: var(--monster-color-orange-1);
+        --monster-bg-color-warning-4: var(--monster-color-orange-3);
+    }
+
+    /** error **/
+    --monster-color-error-1: var(--monster-color-red-1);
+    --monster-color-error-2: var(--monster-color-red-4);
+    --monster-color-error-3: var(--monster-color-red-6);
+    --monster-color-error-4: var(--monster-color-red-1);
+
+    --monster-bg-color-error-1: var(--monster-color-red-4);
+    --monster-bg-color-error-2: var(--monster-color-gray-1);
+    --monster-bg-color-error-3: var(--monster-color-red-2);
+    --monster-bg-color-error-4: var(--monster-color-red-5);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-error-1: var(--monster-color-red-1);
+        --monster-color-error-2: var(--monster-color-red-3);
+        --monster-color-error-3: var(--monster-color-red-4);
+        --monster-color-error-4: var(--monster-color-red-1);
+
+        --monster-bg-color-error-1: var(--monster-color-red-5);
+        --monster-bg-color-error-2: var(--monster-color-gray-6);
+        --monster-bg-color-error-3: var(--monster-color-red-1);
+        --monster-bg-color-error-4: var(--monster-color-red-4);
+    }
+
+    /** selection **/
+    --monster-color-selection-1: var(--monster-color-gray-6);
+    --monster-color-selection-2: var(--monster-color-gray-6);
+    --monster-color-selection-3: var(--monster-color-gray-6);
+    --monster-color-selection-4: var(--monster-color-gray-1);
+
+    --monster-bg-color-selection-1: var(--monster-color-yellow-2);
+    --monster-bg-color-selection-2: var(--monster-color-yellow-1);
+    --monster-bg-color-selection-3: var(--monster-color-yellow-2);
+    --monster-bg-color-selection-4: var(--monster-color-yellow-6);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-selection-1: var(--monster-color-gray-6);
+        --monster-color-selection-2: var(--monster-color-gray-6);
+        --monster-color-selection-3: var(--monster-color-gray-6);
+        --monster-color-selection-4: var(--monster-color-gray-1);
+
+        --monster-bg-color-selection-1: var(--monster-color-yellow-2);
+        --monster-bg-color-selection-2: var(--monster-color-yellow-1);
+        --monster-bg-color-selection-3: var(--monster-color-yellow-2);
+        --monster-bg-color-selection-4: var(--monster-color-yellow-6);
+    }
+
+
+    /** PRIMARY / DISABLED */
+    --monster-color-primary-disabled-1: var(--monster-color-gray-3);
+    --monster-color-primary-disabled-2: var(--monster-color-gray-1);
+    --monster-color-primary-disabled-3: var(--monster-color-gray-4);
+    --monster-color-primary-disabled-4: var(--monster-color-gray-4);
+
+    --monster-bg-color-primary-disabled-1: var(--monster-color-gray-1);
+    --monster-bg-color-primary-disabled-2: var(--monster-color-gray-2);
+    --monster-bg-color-primary-disabled-3: var(--monster-color-gray-3);
+    --monster-bg-color-primary-disabled-4: var(--monster-color-gray-6);
+
+    @media (prefers-color-scheme: dark) {
+        --monster-color-primary-disabled-1: var(--monster-color-gray-4);
+        --monster-color-primary-disabled-2: var(--monster-color-gray-4);
+        --monster-color-primary-disabled-3: var(--monster-color-gray-3);
+        --monster-color-primary-disabled-4: var(--monster-color-gray-3);
+
+        --monster-bg-color-primary-disabled-1: var(--monster-color-gray-6);
+        --monster-bg-color-primary-disabled-2: var(--monster-color-gray-3);
+        --monster-bg-color-primary-disabled-3: var(--monster-color-gray-2);
+        --monster-bg-color-primary-disabled-4: var(--monster-color-gray-1);
+    }
+    
+    --monster-color-gradient-1: #833ab4;
+    --monster-color-gradient-2: #fd1d1d;
+    --monster-color-gradient-3: #fcb045;
+
+}