mypgs 1.0.0

package/assets/scss/mixin/_mx-card.scss

@@ -0,0 +1,77 @@
+@mixin card-insideImg() {
+    $cardImgPadding: calc(var(--card-padding) * -1);
+    border-radius: var(--border-radius);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin: $cardImgPadding;
+    padding: var(--card-padding-img);
+    width: calc((var(--card-padding) * 2) + 100%);
+    margin-bottom: 0;
+}
+
+@mixin card() {
+    --card-padding: var(--padding);
+    height: 100%;
+
+    &:not(:has(>a)) {
+        --card-background: var(--color-box-transparent);
+        --card-padding-img: 0;
+        padding: var(--card-padding);
+        background: var(--card-background);
+        border-radius: var(--border-radius);
+        // box-shadow: var(--box-shadow);
+    }
+
+    >a {
+        --card-background: var(--color-white);
+        --card-padding-img: .3rem;
+        @include buttonHover();
+        height: 100%;
+        padding: var(--card-padding);
+        background: var(--card-background);
+        border-radius: var(--border-radius);
+        outline: var(--border-complete);
+    }
+
+    >object,
+    >img,
+    >a>object,
+    >a>img {
+        @include card-insideImg();
+    }
+}
+
+@mixin boxtext() {
+    @include flexColumn();
+    --boxtext-background: light-dark(color-mix(in srgb, var(--color-background) 100%, transparent 10%), color-mix(in srgb, var(--color-background) 50%, transparent 50%));
+    background: var(--boxtext-background);
+    padding: 1.5rem;
+    margin-inline: calc(-1.5rem / 2);
+    width: unset;
+    border-radius: var(--border-radius-input);
+
+    //- mobile 
+    @media (max-width: $mobile) {
+        margin-inline: 0;
+    }
+
+    &:has(.fa-solid),
+    &:has(.fa-duotone) {
+        --boxtext-background: var(--color-primary-soft);
+
+        i {
+            --fa-primary-color: var(--color-primary-soft);
+            --fa-secondary-color: var(--color-primary);
+            --fa-secondary-opacity: 1;
+        }
+    }
+
+    &:has(.fa-triangle-exclamation) {
+        --boxtext-background: var(--color-warning-background);
+
+        i {
+            --fa-primary-color: var(--color-black);
+            --fa-secondary-color: var(--color-warning);
+        }
+    }
+}

package/assets/scss/mixin/_mx-color.scss

@@ -0,0 +1,34 @@
+$percentage-light: 78%;
+$percentage-dark: 60%;
+
+@mixin color-softAndLight() {
+    //== soft
+    --color-primary-soft: light-dark(color-mix(in srgb, var(--color-primary), var(--color-white) #{$percentage-light}), color-mix(in srgb, var(--color-primary), var(--color-white) #{$percentage-dark}));
+    --color-secondary-soft: light-dark(color-mix(in srgb, var(--color-secondary), var(--color-white) #{$percentage-light}), color-mix(in srgb, var(--color-secondary), var(--color-white) #{$percentage-dark}));
+    --color-quaternary-soft: light-dark(color-mix(in srgb, var(--color-quaternary), var(--color-white) #{$percentage-light}), color-mix(in srgb, var(--color-quaternary), var(--color-white) #{$percentage-dark}));
+    --color-tertiary-soft: light-dark(color-mix(in srgb, var(--color-tertiary), var(--color-white) #{$percentage-light}), color-mix(in srgb, var(--color-tertiary), var(--color-white) #{$percentage-dark}));
+    //==light
+    --color-primary-light: color-mix(in srgb, var(--color-primary), var(--color-whiteFixed) #{$percentage-light});
+    --color-secondary-light: color-mix(in srgb, var(--color-secondary), var(--color-whiteFixed) #{$percentage-light});
+    --color-quaternary-light: color-mix(in srgb, var(--color-quaternary), var(--color-whiteFixed) #{$percentage-light});
+    --color-tertiary-light: color-mix(in srgb, var(--color-tertiary), var(--color-whiteFixed) #{$percentage-light});
+}
+
+@mixin color-strongAndDark() {
+    //== strong    
+    --color-primary-strong: light-dark(color-mix(in srgb, var(--color-primary), var(--color-black) #{$percentage-dark}), color-mix(in srgb, var(--color-primary), var(--color-black) #{$percentage-light}));
+    --color-secondary-strong: light-dark(color-mix(in srgb, var(--color-secondary), var(--color-black) #{$percentage-dark}), color-mix(in srgb, var(--color-secondary), var(--color-black) #{$percentage-light}));
+    --color-quaternary-strong: light-dark(color-mix(in srgb, var(--color-quaternary), var(--color-black) #{$percentage-dark}), color-mix(in srgb, var(--color-quaternary), var(--color-black) #{$percentage-light}));
+    --color-tertiary-strong: light-dark(color-mix(in srgb, var(--color-tertiary), var(--color-black) #{$percentage-dark}), color-mix(in srgb, var(--color-tertiary), var(--color-black) #{$percentage-light}));
+    //== dark
+    --color-primary-dark: color-mix(in srgb, var(--color-primary), var(--color-blackFixed) #{$percentage-dark});
+    --color-secondary-dark: color-mix(in srgb, var(--color-secondary), var(--color-blackFixed) #{$percentage-dark});
+    --color-quaternary-dark: color-mix(in srgb, var(--color-quaternary), var(--color-blackFixed) #{$percentage-dark});
+    --color-tertiary-dark: color-mix(in srgb, var(--color-tertiary), var(--color-blackFixed) #{$percentage-dark});
+}
+
+@mixin color-status-background() {
+    --color-success-background: color-mix(in srgb, var(--color-success) 20%, var(--color-white) 80%);
+    --color-warning-background: color-mix(in srgb, var(--color-warning) 20%, var(--color-white) 80%);
+    --color-error-background: color-mix(in srgb, var(--color-error) 20%, var(--color-white) 80%);
+}

package/assets/scss/mixin/_mx-form-addon.scss

@@ -0,0 +1,180 @@
+//= checkboxBackground 
+@mixin checkboxBackground() {
+    position: relative;
+    isolation: isolate;
+    @include checkbox();
+    color: var(--color-text);
+    padding: var(--padding-2);
+    border-radius: var(--border-radius-input);
+    align-items: center;
+    gap: var(--gap-texts);
+    background-color: var(--color-box-transparent);
+
+    label {
+        margin-bottom: 0 !important;
+    }
+
+    //== checked
+    &:has(input:checked) {
+        background-color: var(--color-primary-soft);
+        color: var(--color-black);
+
+        i {
+            --fa-primary-color: var(--color-black);
+            --fa-secondary-color: var(--color-black);
+            color: var(--color-black);
+            opacity: 1;
+        }
+    }
+}
+
+//= TWOSTATE 
+@mixin twoState() {
+    position: relative;
+    isolation: isolate;
+    --button-background-active: var(--color-primary-strong);
+    --button-color-active: var(--color-white);
+
+    //== label
+    label {
+        @include button();
+        flex-wrap: wrap;
+        display: flex !important;
+        cursor: pointer;
+
+        i {
+            color: var(--color-black);
+            opacity: 0.4;
+            min-width: 1.4rem;
+            transition: 300ms;
+        }
+
+        &:hover {
+            i {
+                opacity: 1;
+            }
+        }
+    }
+
+    //== checked
+    &:has(input:checked) label {
+        --button-background: var(--button-background-active);
+        
+        @supports not (color: contrast-color(red)) {
+            --button-color: var(--button-color-active);
+        }
+
+        i {
+            --fa-secondary-opacity: 0.6;
+            opacity: 1;
+        }
+    }
+
+    input {
+        opacity: 0;
+        z-index: -1;
+        position: absolute;
+        appearance: none;
+    }
+}
+
+//= TOGGLE 
+@mixin toggle() {
+    --toggle-size: var(--border-radius-input);
+    --toggle-color-thumb: var(--color-white);
+    --toggle-color-rail: #cbcbcb;
+    --toggle-color-rail-checked: var(--color-primary);
+    $space: 2px;
+    isolation: isolate;
+    display: flex;
+    gap: var(--gap-texts);
+    margin-bottom: var(--gap-texts);
+
+    label {
+        cursor: pointer;
+    }
+
+    //== rail & thumb
+    input {
+        position: relative;
+        appearance: none;
+        margin-left: auto;
+        cursor: pointer;
+        min-width: calc(var(--toggle-size) * 2);
+
+        &::after,
+        &::before {
+            content: "";
+            position: relative;
+            transform: unset;
+            top: unset;
+            margin-left: auto;
+            transition: all 250ms;
+            display: block;
+            border-radius: var(--border-radius-input);
+            order: 1;
+        }
+
+        //=== rail
+        &::before {
+            background: var(--toggle-color-rail);
+            width: calc(var(--toggle-size) * 2);
+            min-width: calc(var(--toggle-size) * 2);
+            height: var(--toggle-size);
+            flex-shrink: 2;
+        }
+
+        //=== thumb
+        &::after {
+            content: "";
+            opacity: 1;
+            background-color: var(--toggle-color-thumb);
+            height: calc(var(--toggle-size) - ($space * 2));
+            width: calc(var(--toggle-size) + $space);
+            top: $space;
+            left: $space;
+            z-index: 1;
+            position: absolute;
+        }
+
+        //== HOVER
+        &:hover::after {
+            scale: 1.4;
+            background-color: color-mix(in srgb, var(--toggle-color-thumb) 25%, transparent 75%);
+            outline: 1.5px solid var(--color-primary);
+        }
+
+        //== CHECKED
+        &:checked {
+            &::before {
+                background: var(--color-primary);
+            }
+
+            &::after {
+                left: unset;
+                right: $space;
+            }
+        }
+
+        //== FOCUS
+        &:focus-visible::after {
+            outline: 3px solid var(--color-link) !important;
+        }
+    }
+}
+
+//= Buttons
+@mixin chips() {
+    display: flex;
+    gap: .1rem;
+    padding: .4rem;
+    outline: var(--border-complete);
+    width: fit-content;
+    border-radius: var(--border-radius-input);
+    background-color: var(--color-box-transparent);
+
+    label {
+        outline: unset;
+        --button-background: trasparent;
+    }
+}