mypgs 2.0.0 → 3.0.0

package/assets/scss/components/_button.scss

@@ -2,29 +2,37 @@
 
 //# BUTTON
 [pgs~=button] {
-    @include button()
-}
+    @include buttonBase();
 
-[pgs~=buttonNohover] {
-    @include button(false)
-}
+    &:not([pgs-option~=buttonIcon], [pgs-option~=buttonMini], [pgs-option~=buttonClose]) {
+        @include buttonContent();
+    }
 
-[pgs~=buttonIcon] {
-    @include button(true, true);
-}
+    &:is([pgs-option~=buttonIcon], [pgs-option~=buttonMini], [pgs-option~=buttonClose]) {
+        @include buttonIcon();
+    }
 
-[pgs~=buttonStrong] {
-    @include button(true, false, true)
-}
+    &:not([pgs-option~=buttonNohover]) {
+        @include buttonHover();
+    }
 
-[pgs~=buttonMini] {
-    @include buttonMini();
-}
+    &[pgs-option~=buttonNohover] {
+        @include buttonNohover();
+    }
 
-[pgs~=buttonBig] {
-    @include buttonBig()
-}
+    &[pgs-option~=buttonStrong] {
+        @include buttonStrong();
+    }
+
+    &[pgs-option~=buttonMini] {
+        @include buttonMini();
+    }
 
-[pgs~=buttonClose] {
-    @include buttonClose();
-}
+    &[pgs-option~=buttonBig] {
+        @include buttonBig();
+    }
+
+    &[pgs-option~=buttonClose] {
+        @include buttonClose();
+    }
+}

package/assets/scss/components/_card.scss

@@ -1,10 +1,15 @@
 @use "../mixin/mixin" as *;
 
-[pgs~=card],
-[pgs~=cardImg] {
+[pgs~=card]{
     @include card();
 
     [pgs~=card-img] {
-        @include card-insideImg();
+        @include cardAndWell-insideImg("card");
     }
-}
+}
+[pgs~=well] {
+    @include well();
+    [pgs~=card-img] {
+        @include cardAndWell-insideImg("box");
+    }
+}

package/assets/scss/components/_form.scss

@@ -25,22 +25,6 @@
     @include select();
 }
 
-[pgs~=checkboxBackground] {
-    @include checkboxBackground();
-}
-
-[pgs~=twoState] {
-    @include twoState();
-}
-
-[pgs~=toggle] {
-    @include toggle();
-}
-
-[pgs~=chips] {
-    @include chips();
-}
-
 [pgs~=radio],
 [pgs~=checkbox] {
     @include checkbox();

package/assets/scss/components/_formAddon.scss

@@ -0,0 +1,22 @@
+@use "../mixin/mixin" as *;
+
+//# FORM ADDON
+[pgs~=checkboxBackground] {
+    @include checkboxBackground();
+}
+
+[pgs~=twoState] {
+    @include twoState();
+}
+
+[pgs~=toggle] {
+    @include toggle();
+}
+
+[pgs~=chips] {
+    @include chips();
+}
+
+[pgs~=chip] {
+    @include chip();
+}

package/assets/scss/components/_logo.scss

@@ -8,15 +8,14 @@
     --logo-finter: invert(1) hue-rotate(180deg) brightness(1.5);
 
     //== DARKMODE
-    @at-root [pgs-state~=darkmode] #{&}[pgs-option~="logoDarkmode"] [pgs~="logo-image"] {
+    &:is(body[pgs-state~="darkmode"] [pgs-option~="logoDarkmode"]) [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
-    
+
     //== FIXED DARKMODE
     &[pgs-option~="logoDarkmodeFixed"] [pgs~="logo-image"] {
         filter: var(--logo-finter);
     }
-    
 
     //- tablet 
     @media (max-width: $tablet) {
@@ -50,4 +49,4 @@
             text-wrap: nowrap;
         }
     }
-}
+}

package/assets/scss/components/_menu.scss

@@ -2,6 +2,16 @@
 
 //# MENU
 [pgs~=menu] {
+    // Menu colours inherit the button theme by default.  A consumer can set the
+    // --menu-* variables on this element to theme menus independently.
+    --menu-color: var(--color-black);
+    --menu-background: var(--color-box);
+    --menu-color-current: var(--color-whiteFixed);
+    --menu-background-current: var(--color-primary);
+    --menu-color-strong: var(--color-whiteFixed);
+    --menu-background-strong: var(--color-primary);
+    --menu-border: var(--border-complete);
+
     ul {
         display: flex;
         font-weight: 600;
@@ -15,12 +25,25 @@
             >a {
                 flex-grow: 1;
                 min-width: fit-content;
-                @include button();
+                @include buttonBase();
+                @include buttonHover();
+                @include buttonContent();
+                --button-color: var(--menu-color);
+                --button-color-strong: var(--menu-color-strong);
+                --button-color-current: var(--menu-color-current);
+                --button-background: var(--menu-background);
+                --button-background-strong: var(--menu-background-strong);
+                --button-background-current: var(--menu-background-current);
+                --button-border: var(--menu-border);
 
                 >span {
-                    line-height: 1.6;
+                    line-height: 1;
                     flex-grow: 1;
                 }
+
+                &:hover {
+                    z-index: -1;
+                }
             }
 
             li {
@@ -56,7 +79,7 @@
         translate: -15px;
 
         &[aria-expanded="true"] {
-            --button-background: var(--color-primary);
+            --button-background: var(--menu-background-current);
 
             span {
                 rotate: 180deg;

package/assets/scss/components/_modals.scss

@@ -20,6 +20,8 @@ dialog[pgs~="modal-dialog"] {
     --modal-backdrop: var(--backdrop);
     --modal-background: var(--color-box);
     --modal-color: var(--color-black);
+    --modal-padding: var(--padding);
+    --modal-borderRadius: calc(var(--border-radius-input) + var(--modal-padding));
     border: none;
     min-width: 100%;
     min-height: 100svh;
@@ -54,12 +56,12 @@ dialog[pgs~="modal-dialog"] {
         container-type: inline-size;
         background: var(--modal-background);
         color: var(--modal-color);
-        border-radius: var(--border-radius);
+        border-radius: var(--modal-borderRadius);
         position: relative;
         gap: 0;
 
         >* {
-            padding: var(--padding);
+            padding: var(--modal-padding);
         }
 
         //==== HEADER
@@ -67,7 +69,7 @@ dialog[pgs~="modal-dialog"] {
             @include flexRow(nowrap);
             padding-bottom: calc(var(--padding) / 2);
             border-bottom: var(--border-complete);
-            border-radius: var(--border-radius) var(--border-radius) 0 0;
+            border-radius: var(--modal-borderRadius) var(--modal-borderRadius) 0 0;
             z-index: 1;
 
             [pgs~="modal-close"] {
@@ -136,7 +138,7 @@ dialog[pgs~="modal-dialog"] {
         height: 100svh;
         top: 0;
         overflow-y: auto;
-        padding-top: calc(var(--heightOfHeader) + var(--padding));
+        padding-top: calc(var(--heightOfHeader) + var(--gap-texts));
         z-index: 90;
         position: fixed;
         inset: 0;

package/assets/scss/components/_search.scss

@@ -133,8 +133,8 @@
         margin-inline: auto;
         background-color: var(--color-white);
 
-        input {
-            padding-block: 20px;
+        [pgs~="modal-close"]{
+            padding: var(--button-size);
         }
     }
 }

package/assets/scss/components/_slides.scss

@@ -113,7 +113,6 @@
     [pgs~="slides-next"] {
         position: absolute;
         z-index: 4;
-        --button-background: var(--color-box);
         top: 50%;
         translate: 0 -50%;
 

package/assets/scss/components/_stepTabs.scss

@@ -36,7 +36,8 @@
         }
 
         [pgs~=stepTabs-dots-dot] {
-            @include button(false, true);
+            @include buttonBase();
+            @include buttonIcon();
             border-radius: 50%;
             --fa-size: 1.8rem;
 

package/assets/scss/components/_tooltip.scss

@@ -4,7 +4,6 @@
     --dropdown-padding: 15px;
 
     [pgs~="tooltip-button"][pgs~="dropdown-button"] {
-        // --button-background: var(--color-black);
         --fa-size: .9rem;
     }
 

package/assets/scss/index.scss

@@ -22,10 +22,8 @@
 */
 [pgs~=initP] {
     @include meta.load-css("layout/layout");
-    @include meta.load-css("layout/flex");
-    @include meta.load-css("layout/grid");
+    @include meta.load-css("layout/responsive");
     @include meta.load-css("layout/pageShell");
-    @include meta.load-css("layout/gap");
     @include meta.load-css("layout/header");
     @include meta.load-css("layout/footer");
 }
@@ -39,6 +37,7 @@
     @include meta.load-css("components/card");
     @include meta.load-css("components/button");
     @include meta.load-css("components/form");
+    @include meta.load-css("components/formAddon");
     @include meta.load-css("components/menu");
     @include meta.load-css("components/accordion");
     @include meta.load-css("components/breadcumbs");
@@ -50,6 +49,7 @@
     @include meta.load-css("components/stepTabs");
     @include meta.load-css("components/summary");
     @include meta.load-css("components/badges");
+    @include meta.load-css("components/alerts");
     @include meta.load-css("components/notification");
     @include meta.load-css("components/tooltip");
     @include meta.load-css("components/search");

package/assets/scss/layout/_footer.scss

@@ -20,8 +20,6 @@
         top: 0;
         translate: 0 -50%;
         z-index: 1;
-        --button-background: var(--color-primary);
-        --button-color: var(--color-whiteFixed);
 
         &:has(i.fa-sun) {
             &::after {

package/assets/scss/layout/_header.scss

@@ -37,8 +37,7 @@
             display: contents;
         }
 
-        [pgs~=button],
-        [pgs~=buttonIcon] {
+        [pgs~=button] {
             @include button_header();
         }
 
@@ -74,6 +73,14 @@
                     opacity: 0.6;
                 }
 
+                &:hover {
+
+                    &::before,
+                    &::after {
+                        background-color: var(--color-white);
+                    }
+                }
+
                 //=== OPEN
                 &[aria-expanded="true"] {
                     gap: 0px;
@@ -106,6 +113,7 @@
         // padding: 2rem;
         padding-top: var(--heightOfHeader);
         padding-inline: 5px;
+        --modal-padding: 10px;
         --modal-background: color-mix(in srgb, var(--color-primary-soft) 50%, var(--color-white) 50%);
 
         [pgs~="modal-dialog-content"] {

package/assets/scss/layout/_pageShell.scss

@@ -10,10 +10,14 @@ $pageShell-test-gap: 4rem;
     max-height: none;
     width: 100%;
     min-width: 100%;
+    overflow: visible;
+    overscroll-behavior: auto;
+    scrollbar-gutter: auto;
 
-    [pgs~="pageShell-aside"] {
+    [pgs~="pageShell-aside-scroll"] {
         scrollbar-gutter: auto;
         overflow: visible;
+        overscroll-behavior: auto;
     }
 }
 
@@ -194,4 +198,4 @@ $pageShell-test-gap: 4rem;
             @include pageShell-aside-flow;
         }
     }
-}
+}

package/assets/scss/layout/_responsive.scss

@@ -0,0 +1,63 @@
+@use "../mixin/mixin" as *;
+
+//# RESPONSIVE
+//= FLEX
+//== FLEX COLUMN
+[pgs~=flexColumn] {
+    @include flexColumn();
+}
+
+//== FLEX ROW
+[pgs~=flexRow] {
+    @include flexRow();
+}
+
+//== COLUMN
+[pgs~=flexColumn],
+[pgs~=flexRow] {
+    
+    @for $i from 1 through 8 {
+        &[pgs-option~=column-#{$i}] {
+            width: 100%;
+            flex-wrap: wrap;
+            flex-direction: row;
+            @include columnFlex($i);
+        }
+    }
+}
+
+//= GRID
+//== COLUMN
+[pgs~=grid] {
+    display: grid;
+    gap: var(--gap-elements);
+    width: 100%;
+
+    @for $i from 1 through 8 {
+        &[pgs-option~=column-#{$i}] {
+            @include columnGrid($i);
+        }
+    }
+}
+
+//= GAP
+[pgs~=gapTexts] {
+    gap: var(--gap-texts);
+}
+
+[pgs~=gapElements] {
+    gap: var(--gap-elements);
+}
+
+[pgs~=gapSections] {
+    gap: var(--gap-sections);
+}
+
+//= WRAP
+[pgs~=nowrap] {
+    flex-wrap: nowrap;
+}
+
+[pgs~=wrap] {
+    flex-wrap: wrap;
+}

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

@@ -61,7 +61,7 @@
 }
 
 //= HEADING
-@mixin heading($size, $marginTop: true) {
+@mixin heading($size) {
     font-family: var(--font-titoli);
     --heading-size: #{$size};
     color: var(--color-black);
@@ -70,12 +70,8 @@
     min-width: 0;
     font-weight: 900;
     overflow-wrap: anywhere;
-    
-    @if($marginTop){
-        margin-top: calc(var(--heading-size)/4);
-    }
-
     // text-box: trim-both cap alphabetic;
+
     @media (max-width: $tablet) {
         font-size: clamp(1.6rem, var(--heading-size) / 3 + 8vw, var(--heading-size));
     }
@@ -98,11 +94,11 @@
 
 
 @mixin h1(){
-    @include heading($h1, false);
+    @include heading($h1);
 }
 
 @mixin h2(){
-    @include heading($h2, false);
+    @include heading($h2);
 }
 
 @mixin h3(){