mypgs 2.0.0 → 3.0.0

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

@@ -1,40 +1,37 @@
 //+ VAR
-@mixin _var-button-color($background, $for: null, $colorNotContrast: var(--color-black)) {
-    @supports (color: contrast-color(red)) {
-        --button-color#{$for}: contrast-color(color-mix(in srgb, var(--button-background#{$for}) 77%, black));
-    }
-
-    @supports not (color: contrast-color(red)) {
-        --button-color#{$for}: #{$colorNotContrast};
-    }
+@use "mx-hover" as *;
 
-    --button-background#{$for}: #{$background};
+//+ BUTTON COLOR
+@mixin _buttonColor($for: "") {
     color: var(--button-color#{$for});
     background: var(--button-background#{$for});
-
-    &:is(a) {
-        color: var(--button-color#{$for});
-    }
-
-    i {
-        color: var(--button-color#{$for});
-        --fa-primary-color: var(--button-color#{$for});
-        --fa-secondary-color: var(--button-color#{$for});
-    }
+    --fa-primary-color: var(--button-color#{$for});
+    --fa-secondary-color: var(--button-color#{$for});
 }
 
-//= BUTTON
-@mixin button($hover: true, $onlyIcon: false, $strong: false) {
+//= BUTTON BASE
+@mixin buttonBase() {
+    /// color
+    --button-color: var(--color-black);
+    --button-color-strong: var(--color-whiteFixed);
+    --button-color-current: var(--color-whiteFixed);
+    --button-color-active: var(--color-whiteFixed);
+    /// background
+    --button-background: var(--color-box);
+    --button-background-strong: var(--color-primary);
+    --button-background-current: var(--color-primary);
+    --button-background-active: var(--color-primary);
+    /// olther
     --button-border: var(--border-complete);
     --button-size: 1.5rem;
-    --button-icon-size: 2.0rem;
+    --button-icon-size: 2rem;
     --button-padding-block: var(--button-size);
     --button-padding-left: calc(var(--button-size) * 2);
     --button-padding-right: calc(var(--button-size) * 2);
     --button-padding: var(--button-padding-block) var(--button-padding-right) var(--button-padding-block) var(--button-padding-left);
     --fa-secondary-opacity: 0.5;
     --fa-size: var(--button-icon-size);
-    @include _var-button-color(var(--color-box));
+    @include _buttonColor();
     font-family: var(--font);
     font-size: 1.6rem;
     font-weight: 600;
@@ -46,121 +43,86 @@
     outline: var(--button-border);
     border-radius: var(--border-radius-input);
     display: flex;
-    gap: calc(var(--button-size)/1.5);
+    gap: calc(var(--button-size) / 1.5);
     align-items: center;
     padding: var(--button-padding);
     height: max-content;
     width: max-content;
     margin-block: auto;
 
-    //== onlyIcon
-    @if($onlyIcon ==true) {
-        flex: 0 0;
-        aspect-ratio: 1;
-        border-radius: 50%;
-        justify-content: center;
-        align-items: center;
-        --button-padding: var(--button-padding-block);
-
-        i {
-            display: inline-grid;
-            place-items: center;
-            inline-size: calc(var(--button-icon-size) - -2px);
-            block-size: var(--button-icon-size);
-            line-height: 1;
-            aspect-ratio: 1;
-        }
+    &[aria-current="page"]:not(:hover, :focus-visible) {
+        @include _buttonColor("-current");
     }
 
-    @else {
-        $button-right: calc(var(--button-size) * 2);
-        $button-left: calc(var(--button-size) * 1.5);
-
-        &:has(i) {
-            --button-padding-right: #{$button-right};
-            --button-padding-left: #{$button-left};
-        }
-
-        &[pgs-option~="buttonReverse"]:has(i) {
-            --button-padding-right: #{$button-left};
-            --button-padding-left: #{$button-right};
-        }
+    &:disabled {
+        opacity: 0.2;
+        cursor: not-allowed;
     }
+}
 
-    //== hover 
-    @if ($hover ==true) {
-        @include buttonHover();
-    }
+//= BUTTON CONTENT - ICON
+//== BUTTON CONTENT
+@mixin buttonContent() {
+    $button-right: calc(var(--button-size) * 2);
+    $button-left: calc(var(--button-size) * 1.5);
 
-    @else {
-        transition: all 200ms;
-        cursor: inherit;
+    &:has(i) {
+        --button-padding-right: #{$button-right};
+        --button-padding-left: #{$button-left};
     }
 
-    //== strong 
-    @if ($strong ==true) {
-        @include _var-button-color(var(--color-primary), "-strong", var(--color-whiteFixed));
+    &[pgs-option~="buttonReverse"]:has(i) {
+        --button-padding-right: #{$button-left};
+        --button-padding-left: #{$button-right};
     }
+}
 
-    //== current 
-    &[aria-current="page"]:not(:hover, :focus-visible) {
-        @include _var-button-color(var(--color-primary), "-current", var(--color-whiteFixed));
-    }
+//== BUTTON ICON
+@mixin buttonIcon() {
+    --button-padding: var(--button-padding-block);
+    flex: 0 0;
+    aspect-ratio: 1;
+    border-radius: 50%;
+    justify-content: center;
+    align-items: center;
 
-    &:disabled {
-        opacity: 0.2;
-        cursor: not-allowed;
+    i {
+        display: inline-grid;
+        place-items: center;
+        inline-size: calc(var(--button-icon-size) + 2px);
+        block-size: var(--button-icon-size);
+        line-height: 1;
+        aspect-ratio: 1;
     }
 }
 
-//= Button HOVER
+//= BUTTON HOVER - NOHOVER
+//== BUTTON HOVER
 @mixin buttonHover() {
-    transition: all 200ms;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:not(:disabled) {
-        @media (hover: hover) and (pointer: fine) {
-
-            &:focus-visible,
-            &:hover {
-                $n: .25rem;
-                $-n: -$n;
-                box-shadow: $-n $n 0px var(--color-black);
-                transform: translate($n, $-n);
-                @include _var-button-color(var(--color-primary-soft), "-hover");
-                outline-color: transparent;
-
-                i {
-                    --fa-secondary-opacity: 0.5;
-                }
-            }
-        }
-    }
+    @include hover();
+}
 
-    &:is(a):hover {
-        text-decoration: none;
-    }
+//== BUTTON NOT HOVER
+@mixin buttonNohover() {
+    transition: all 200ms;
+    cursor: inherit;
+}
 
-    &:active {
-        box-shadow: 0 0 0 var(--color-black);
-        transform: translate(0, 0);
-    }
+//= BUTTON STRONG
+@mixin buttonStrong() {
+    @include _buttonColor("-strong");
 }
 
-//= Button mini
-@mixin buttonMini($hover: true) {
-    @include button($hover, true);
+//= BUTTON MINI
+@mixin buttonMini() {
     --button-size: 0.5rem;
     display: inline-flex;
-    aspect-ratio: unset;
-    margin-block: auto;
     aspect-ratio: 1;
+    margin-block: auto;
 }
 
-//= Button BIG
-@mixin buttonBig($hover: true) {
-    @include button($hover);
+//= BUTTON BIG
+@mixin buttonBig() {
     position: relative;
     flex-direction: column;
     justify-content: center;
@@ -182,9 +144,8 @@
     }
 }
 
-//= Button CLOSE 
+//= BUTTON CLOSE
 @mixin buttonClose($important: false) {
-    @include button(true, true);
     --button-background: var(--color-primary-soft);
     --button-size: 1rem;
     --button-icon-size: 1.3rem;
@@ -195,15 +156,12 @@
         --button-background: var(--color-error-background);
         --button-color: var(--color-error);
     }
-
-    &:hover {}
 }
 
-//= button header
+//= BUTTON HEADER
 @mixin button_header() {
     --button-size: 1.2rem;
     --button-border: unset;
     overflow-wrap: break-word;
     height: calc(var(--button-size) * 4);
-    // height: var(--header-size);
 }

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

@@ -1,39 +1,39 @@
 @use "settings" as *;
 @use "mx-button" as *;
+@use "mx-hover" as *;
 @use "mx-responsive" as *;
 
-@mixin card-insideImg() {
-    $cardImgPadding: calc(var(--card-padding) * -1);
-    border-radius: var(--border-radius);
+@mixin cardAndWell-insideImg($for) {
+    border-radius: var(--#{$for}-borderRadius);
     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: calc(var(--#{$for}-padding) * -1);
+    padding: var(--#{$for}-padding-img);
+    width: calc((var(--#{$for}-padding) * 2) + 100%);
     margin-bottom: 0;
 }
 
 @mixin card() {
     --card-padding: var(--padding);
+    --card-borderRadius: calc(var(--border-radius-input) + var(--card-padding));
+    --card-background: var(--color-box-transparent);
+    --card-padding-img: 0;
     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);
+        border-radius: var(--card-borderRadius);
     }
 
     >a {
         --card-background: var(--color-white);
-        --card-padding-img: .3rem;
-        @include buttonHover();
+        @include hover();
         height: 100%;
         padding: var(--card-padding);
+        padding-bottom: calc(var(--card-padding) * 2);
         background: var(--card-background);
-        border-radius: var(--border-radius);
+        border-radius: var(--card-borderRadius);
         outline: var(--border-complete);
     }
 
@@ -41,41 +41,40 @@
     >img,
     >a>object,
     >a>img {
-        @include card-insideImg();
+        @include cardAndWell-insideImg("card");
     }
 }
 
-@mixin boxtext() {
+@mixin well() {
     @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);
+    --well-padding: var(--padding-2);
+    --well-borderRadius: calc(var(--border-radius-input) + var(--well-padding));
+    --well-background: var(--color-box-transparent);
+    --well-padding-img: 0;
 
-    //- mobile 
-    @media (max-width: $mobile) {
-        margin-inline: 0;
-    }
-
-    &:has(.fa-solid),
-    &:has(.fa-duotone) {
-        --boxtext-background: var(--color-primary-soft);
+    //-new
 
-        i {
-            --fa-primary-color: var(--color-primary-soft);
-            --fa-secondary-color: var(--color-primary);
-            --fa-secondary-opacity: 1;
-        }
+    &:not(:has(>a)) {
+        padding: var(--well-padding);
+        background: var(--well-background);
+        border-radius: var(--well-borderRadius);
     }
 
-    &:has(.fa-triangle-exclamation) {
-        --boxtext-background: var(--color-warning-background);
+    >a {
+        --well-background: var(--color-white);
+        @include hover();
+        height: 100%;
+        padding: var(--well-padding);
+        padding-bottom: calc(var(--well-padding) * 2);
+        background: var(--well-background);
+        border-radius: var(--well-borderRadius);
+        outline: var(--border-complete);
+    }
 
-        i {
-            --fa-primary-color: var(--color-black);
-            --fa-secondary-color: var(--color-warning);
-        }
+    >object,
+    >img,
+    >a>object,
+    >a>img {
+        @include cardAndWell-insideImg("well");
     }
 }

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

@@ -93,7 +93,6 @@
     &::file-selector-button {
         --button-background: var(--color-box);
         --button-color: var(--color-black);
-
         width: 40%;
         margin-bottom: var(--gap-texts);
         margin-right: var(--gap-texts);
@@ -232,6 +231,7 @@
             outline: solid var(--color-boxDark) 0.1rem;
             background: var(--checkbox-box-background);
             color: var(--color-primary-soft);
+            transform: translateX(0.3rem);
         }
 
         //=== ICON CHECK
@@ -241,6 +241,7 @@
             text-align: center;
             opacity: 0;
             color: var(--checkbox-check-color);
+            transform: translateX(0.25rem);
         }
 
         //=== Checked
@@ -362,7 +363,7 @@
 
     //=== LABEL
     label {
-        &:not(:has([pgs~="label-unset"], +input[type=checkbox], +input[type=radio])) {
+        &:not(:has([pgs~="labelUnset"], +input[type=checkbox], +input[type=radio])) {
             &:has(+input, +select, +textarea) {
                 @include label();
             }
@@ -375,7 +376,7 @@
 
     //=== INPUT
     input {
-        &:not([pgs~="input-unset"], [type=checkbox], [type=file], [type=radio], [type=range]) {
+        &:not([pgs~=inputUnset], [type=checkbox], [type=file], [type=radio], [type=range]) {
             @include input();
         }
 
@@ -419,8 +420,10 @@
     }
 
     //==== CHECKBOX
-    label:has(input[type=checkbox]):not([pgs~="toggle"]),
-    label:has(input[type=radio]):not([pgs~="toggle"]) {
+    $not-checkbox: '[pgs~=toggle], [pgs~=twoState], [pgs~=chip], [pgs~=chips] label';
+
+    label:has(input[type=checkbox]):not(#{$not-checkbox}),
+    label:has(input[type=radio]):not(#{$not-checkbox}) {
         @include checkbox();
     }
 
@@ -446,7 +449,10 @@
 
     //===BUTTON 
     button[type="submit"] {
-        @include button(true, false, true)
+        @include buttonBase();
+        @include buttonContent();
+        @include buttonStrong();
+        @include buttonHover();
     }
 
     //===FIELDSET 
@@ -504,9 +510,6 @@
             }
         }
 
-        // button[type=submit] {
-        //     --button-background: var(--color-error);
-        // }
         label:has(+[pgs-option~="error"], [pgs-option~="error"]) {
             &:has(input[type=checkbox]) {
                 background-color: var(--color-error) !important;
@@ -522,4 +525,4 @@
             }
         }
     }
-}
+}

package/assets/scss/mixin/{_mx-form-addon.scss → _mx-formAddon.scss}

@@ -1,5 +1,6 @@
 @use "mx-button" as *;
 @use "mx-form" as *;
+@use "mx-responsive" as *;
 
 //= checkboxBackground 
 @mixin checkboxBackground() {
@@ -20,67 +21,17 @@
     //== checked
     &:has(input:checked) {
         background-color: var(--color-primary-soft);
-        color: var(--color-black);
 
+        // color: var(--color-black);
         i {
-            --fa-primary-color: var(--color-black);
-            --fa-secondary-color: var(--color-black);
-            color: var(--color-black);
+            // --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);
@@ -166,18 +117,106 @@
     }
 }
 
-//= Buttons
+//= TWOSTATE
+@mixin twoState($ifHover: true) {
+    //== label
+    position: relative;
+    isolation: isolate;
+    @include buttonBase();
+    @include buttonContent();
+
+    @if($ifHover) {
+        @include buttonHover();
+    }
+
+    flex-wrap: wrap;
+    display: flex !important;
+    cursor: pointer;
+
+    i {
+        opacity: 0.4;
+        min-width: 1.4rem;
+    }
+
+    &:hover {
+        i {
+            opacity: 1;
+        }
+    }
+
+    //== checked
+    &:has(input:checked) {
+        --button-background: var(--button-background-active);
+        --button-color: var(--button-color-active);
+
+        i {
+            --fa-secondary-opacity: 0.6;
+            opacity: 1;
+        }
+    }
+
+    input {
+        opacity: 0;
+        z-index: -1;
+        position: absolute;
+        appearance: none;
+    }
+}
+
+@mixin chip() {
+    @include twoState(false);
+    --button-size: 1rem;
+
+    &:has(input:checked) {
+        &:not(:has(i)) {
+
+            &::after,
+            &::before {
+                display: grid;
+                place-items: center;
+                width: 1.5rem;
+                height: 1.5rem;
+                border-radius: 50%;
+                font-size: 1.5rem;
+                line-height: 1;
+                font-weight: bold;
+                color: var(--color-blackFixed);
+                background-color: var(--color-whiteFixed);
+                padding: 0.2rem;
+                cursor: pointer;
+            }
+        }
+    }
+
+    //== checkbox
+    &:has(input[type=checkbox]:checked) {
+        &:not(:has(i)) {
+            padding-right: var(--button-size);
+
+            &::after {
+                content: "×";
+            }
+        }
+    }
+
+    //== radio
+    &:has(input[type=radio]:checked) {
+        &:not(:has(i)) {
+            padding-left: var(--button-size);
+
+            &::before {
+                content: "";
+            }
+        }
+    }
+}
+
+//= CHIPS
 @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);
+    border: unset;
+    @include flexRow();
 
     label {
-        outline: unset;
-        --button-background: trasparent;
+        @include chip();
     }
 }