matcha-theme 1.0.27 → 18.0.28

package/abstracts/_colors.scss

@@ -228,7 +228,7 @@ $index: 0;
     $grey-contrast: map-get($grey, 'contrast');
     $blue-grey: map-get($palettes, blue-grey);
     $blue-grey-contrast: map-get($blue-grey, 'contrast');
-    
+
     // colors from theme
     $primary: map-get($theme, primary);
     $primary-contrast: map-get($primary, 'contrast');
@@ -236,17 +236,17 @@ $index: 0;
     $accent-contrast: map-get($accent, 'contrast');
     $warn: map-get($theme, warn);
     $warn-contrast: map-get($warn, 'contrast');
-    
+
     $background: map-get($theme, background);
     $foreground: map-get($theme, foreground);
-    
+
     .color-unset{
         color: map-get($foreground, text );
         .ripple {
             background: map-get($foreground, text );
         }
     }
-    
+
     @if ($is-dark) {
         .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 100), 0.2)}
         .red .ripple{background: rgba(map-get($red-contrast, 100), 0.2)}
@@ -457,40 +457,6 @@ $index: 0;
             background: map-get($blue-grey, 100);
             color: map-get($blue-grey-contrast, 100);
         }
-        
-        .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, 100), 0.2)}
-        .primary .ripple{background: rgba(map-get($primary-contrast, 100), 0.2)}
-        .background-primary{background: map-get($primary, 100)}
-        .border-color-primary{border-color: map-get($primary, 100)}
-        .primary.matcha-button-outline, .color-primary{color: map-get($primary, 100)}
-        .fill-primary{fill: map-get($primary, 100)}
-        .stroke-primary{stroke: map-get($primary, 100)}
-        .primary{
-            background: map-get($primary, 100);
-            color: map-get($primary-contrast, 100);
-        }
-        .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, 100), 0.2)}
-        .accent .ripple{background: rgba(map-get($accent-contrast, 100), 0.2)}
-        .background-accent{background: map-get($accent, 100)}
-        .border-color-accent{border-color: map-get($accent, 100)}
-        .accent.matcha-button-outline, .color-accent{color: map-get($accent, 100)}
-        .fill-accent{fill: map-get($accent, 100)}
-        .stroke-accent{stroke: map-get($accent, 100)}
-        .accent{
-            background: map-get($accent, 100);
-            color: map-get($accent-contrast, 100);
-        }
-        .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, 100), 0.2)}
-        .warn .ripple{background: rgba(map-get($warn-contrast, 100), 0.2)}
-        .background-warn{background: map-get($warn, 100)}
-        .border-color-warn{border-color: map-get($warn, 100)}
-        .warn.matcha-button-outline, .color-warn{color: map-get($warn, 100)}
-        .fill-warn{fill: map-get($warn, 100)}
-        .stroke-warn{stroke: map-get($warn, 100)}
-        .warn{
-            background: map-get($warn, 100);
-            color: map-get($warn-contrast, 100);
-        }
     } @else {
         .red.matcha-button-outline .ripple, .background-red-alpha {background: rgba(map-get($red, 500), 0.2)}
         .red .ripple{background: rgba(map-get($red-contrast, 500), 0.2)}
@@ -503,7 +469,7 @@ $index: 0;
             background: map-get($red, 500);
             color: map-get($red-contrast, 500);
         }
-        
+
         .pink.matcha-button-outline .ripple, .background-pink-alpha {background: rgba(map-get($pink, 500), 0.2)}
         .pink .ripple{background: rgba(map-get($pink-contrast, 500), 0.2)}
         .background-pink{background: map-get($pink, 500)}
@@ -702,41 +668,57 @@ $index: 0;
             background: map-get($blue-grey, 500);
             color: map-get($blue-grey-contrast, 500);
         }
-        .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, 500), 0.2)}
-        .primary .ripple{background: rgba(map-get($primary-contrast, 500), 0.2)}
-        .background-primary{background: map-get($primary, 500)}
-        .border-color-primary{border-color: map-get($primary, 500)}
-        .primary.matcha-button-outline, .color-primary{color: map-get($primary, 500)}
-        .fill-primary{fill: map-get($primary, 500)}
-        .stroke-primary{stroke: map-get($primary, 500)}
-        .primary{
-            background: map-get($primary, 500);
-            color: map-get($primary-contrast, 500);
-        }
-        .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, 500), 0.2)}
-        .accent .ripple{background: rgba(map-get($accent-contrast, 500), 0.2)}
-        .background-accent{background: map-get($accent, 500)}
-        .border-color-accent{border-color: map-get($accent, 500)}
-        .accent.matcha-button-outline, .color-accent{color: map-get($accent, 500)}
-        .fill-accent{fill: map-get($accent, 500)}
-        .stroke-accent{stroke: map-get($accent, 500)}
-        .accent{
-            background: map-get($accent, 500);
-            color: map-get($accent-contrast, 500);
-        }
-        .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, 500), 0.2)}
-        .warn .ripple{background: rgba(map-get($warn-contrast, 500), 0.2)}
-        .background-warn{background: map-get($warn, 500)}
-        .border-color-warn{border-color: map-get($warn, 500)}
-        .warn.matcha-button-outline, .color-warn{color: map-get($warn, 500)}
-        .fill-warn{fill: map-get($warn, 500)}
-        .stroke-warn{stroke: map-get($warn, 500)}
-        .warn{
-            background: map-get($warn, 500);
-            color: map-get($warn-contrast, 500);
-        }
     }
 
+    .primary.matcha-button-outline .ripple, .background-primary-alpha {background: rgba(map-get($primary, default), 0.2)}
+    .primary .ripple{background: rgba(map-get($primary, default-contrast), 0.2)}
+    .background-primary{background: map-get($primary, default)}
+    .border-color-primary{border-color: map-get($primary, default)}
+    .primary.matcha-button-outline, .color-primary{color: map-get($primary, default)}
+    .fill-primary{fill: map-get($primary, default)}
+    .stroke-primary{stroke: map-get($primary, default)}
+    .primary{
+        background: map-get($primary, default);
+        color: map-get($primary, default-contrast);
+    }
+
+    .accent.matcha-button-outline .ripple, .background-accent-alpha {background: rgba(map-get($accent, default), 0.2)}
+    .accent .ripple{background: rgba(map-get($accent, default-contrast), 0.2)}
+    .background-accent{background: map-get($accent, default)}
+    .border-color-accent{border-color: map-get($accent, default)}
+    .accent.matcha-button-outline, .color-accent{color: map-get($accent, default)}
+    .fill-accent{fill: map-get($accent, default)}
+    .stroke-accent{stroke: map-get($accent, default)}
+    .accent{
+        background: map-get($accent, default);
+        color: map-get($accent, default-contrast);
+    }
+
+    .warn.matcha-button-outline .ripple, .background-warn-alpha {background: rgba(map-get($warn, default), 0.2)}
+    .warn .ripple{background: rgba(map-get($warn, default-contrast), 0.2)}
+    .background-warn{background: map-get($warn, default)}
+    .border-color-warn{border-color: map-get($warn, default)}
+    .warn.matcha-button-outline, .color-warn{color: map-get($warn, default)}
+    .fill-warn{fill: map-get($warn, default)}
+    .stroke-warn{stroke: map-get($warn, default)}
+    .warn{
+        background: map-get($warn, default);
+        color: map-get($warn, default-contrast);
+    }
+
+    .basic.matcha-button-outline .ripple, .background-basic-alpha {background: rgba(map-get($foreground, base), 0.2)}
+    .basic .ripple{background: rgba(map-get($foreground, base), 0.2)}
+    .background-basic{background: map-get($background, card)}
+    .border-color-basic{border-color: map-get($foreground, base)}
+    .basic.matcha-button-outline, .color-basic{color: map-get($foreground, base)}
+    .fill-basic{fill: map-get($background, card)}
+    .stroke-basic{stroke: map-get($foreground, base)}
+    .basic{
+        background: map-get($background, card);
+        color: map-get($foreground, base);
+    }
+
+
     $attributes: (
         color: $foreground,
         border-color: $foreground,

package/abstracts/_grid.scss

@@ -11,11 +11,13 @@
         @media only screen and (min-width: #{$value}) {
             @for $i from 1 through $grid-length {
                 .row > .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
-                    flex-basis: $i / $grid-length * 100%;
+                    $calculated-flex-basis: calc($i / $grid-length) * 100%;
+                    flex-basis: $calculated-flex-basis;
                 }
 
                 .row > .#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
-                    margin-left: $i / $grid-length * 100%;
+                    $calculated-margin-left: calc($i / $grid-length) * 100%;
+                    margin-left: $calculated-margin-left;
                 }
             }
 
@@ -93,11 +95,13 @@
 
         @for $i from 1 through $grid-length {
             .#{$grid-prefix}-#{$i} {
-                flex-basis: $i / $grid-length * 100%;
+                $calculated-flex-basis: calc($i / $grid-length) * 100%;
+                flex-basis: $calculated-flex-basis;
             }
 
             .#{$grid-prefix}-offset-#{$i} {
-                margin-left: $i / $grid-length * 100%;
+                $calculated-margin-left: calc($i / $grid-length) * 100%;
+                margin-left: $calculated-margin-left;
             }
 
             @each $sizeLabel, $value in $grid-sizes {
@@ -156,4 +160,4 @@
         column-gap: 24px;
         row-gap: 24px;
     }
-}
+}

package/abstracts/_sizes.scss

@@ -1,35 +1,30 @@
 // -----------------------------------------------------------------------------------------------------
 // @ Size helpers
 // -----------------------------------------------------------------------------------------------------
+// Media step breakpoint mixin based on Angular Material lib
+
+@mixin generate-size-classes($prop, $abbrev, $length, $size, $infix: "", $important: false) {
+    .#{$abbrev}#{$infix}-#{$size} {
+        #{$prop}: $length#{if($important, " !important", "")};
+    }
+
+    .max-#{$abbrev}#{$infix}-#{$size} {
+        max-#{$prop}: $length#{if($important, " !important", "")};
+    }
+
+    .min-#{$abbrev}#{$infix}-#{$size} {
+        min-#{$prop}: $length#{if($important, " !important", "")};
+    }
+}
+
 @each $prop, $abbrev in (height: h, width: w) {
     // pixels - Without breakpoint infix
     @for $index from 0 through 64 {
         $size: $index * 4;
         $length: #{$size}px;
 
-        .#{$abbrev}-#{$size} {
-            #{$prop}: $length;
-        }
-
-        .max-#{$abbrev}-#{$size} {
-            max-#{$prop}: $length;
-        }
-
-        .min-#{$abbrev}-#{$size} {
-            min-#{$prop}: $length;
-        }
-
-        .#{$abbrev}-#{$size}--force {
-            #{$prop}: $length !important;
-        }
-
-        .max-#{$abbrev}-#{$size}--force {
-            max-#{$prop}: $length !important;
-        }
-
-        .min-#{$abbrev}-#{$size}--force {
-            min-#{$prop}: $length !important;
-        }
+        @include generate-size-classes($prop, $abbrev, $length, $size);
+        @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
     }
 
     // percentage - Without breakpoint infix
@@ -37,17 +32,8 @@
         $i-p: 5 * $i;
         $size-p: 5% * $i;
 
-        .#{$abbrev}-#{$i-p}-p {
-            #{$prop}: $size-p !important;
-        }
-
-        .max-#{$abbrev}-#{$i-p}-p {
-            max-#{$prop}: $size-p !important;
-        }
-
-        .min-#{$abbrev}-#{$i-p}-p {
-            min-#{$prop}: $size-p !important;
-        }
+        @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p");
+        @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", "", true);
     }
 
     // big sizes - Without breakpoint infix
@@ -55,17 +41,8 @@
         $size: $i * 100;
         $length: #{$size}px;
 
-        .#{$abbrev}-#{$size} {
-            #{$prop}: $length !important;
-        }
-
-        .max-#{$abbrev}-#{$size} {
-            max-#{$prop}: $length !important;
-        }
-
-        .min-#{$abbrev}-#{$size} {
-            min-#{$prop}: $length !important;
-        }
+        @include generate-size-classes($prop, $abbrev, $length, $size);
+        @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", "", true);
     }
 
     // auto - Without breakpoint infix
@@ -76,7 +53,7 @@
 
 @each $breakpoint-infix, $media-size in $helper-breakpoints {
     @include media-breakpoint($media-size) {
-        $infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
+        $infix: if($media-size == null, "", "-#{$breakpoint-infix}");
 
         @each $prop, $abbrev in (height: h, width: w) {
             // pixels - With breakpoint infix
@@ -84,29 +61,8 @@
                 $size: $index * 4;
                 $length: #{$size}px;
 
-                .#{$abbrev}#{$infix}-#{$size} {
-                    #{$prop}: $length;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size} {
-                    max-#{$prop}: $length;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size} {
-                    min-#{$prop}: $length;
-                }
-
-                .#{$abbrev}#{$infix}-#{$size}--force {
-                    #{$prop}: $length !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size}--force {
-                    max-#{$prop}: $length !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size}--force {
-                    min-#{$prop}: $length !important;
-                }
+                @include generate-size-classes($prop, $abbrev, $length, $size, $infix);
+                @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
             }
 
             // percentage - With breakpoint infix
@@ -114,35 +70,17 @@
                 $i-p: 5 * $i;
                 $size-p: 5% * $i;
 
-                .#{$abbrev}#{$infix}-#{$i-p}-p {
-                    #{$prop}: $size-p !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$i-p}-p {
-                    max-#{$prop}: $size-p !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$i-p}-p {
-                    min-#{$prop}: $size-p !important;
-                }
+                @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p", $infix);
+                @include generate-size-classes($prop, $abbrev, $size-p, "#{$i-p}-p--force", $infix, true);
             }
 
             // big sizes - With breakpoint infix
-            @for $i from 3 through 8 {
+            @for $i from 3 through 10 {
                 $size: $i * 100;
                 $length: #{$size}px;
 
-                .#{$abbrev}#{$infix}-#{$size} {
-                    #{$prop}: $length !important;
-                }
-
-                .max-#{$abbrev}#{$infix}-#{$size} {
-                    max-#{$prop}: $length !important;
-                }
-
-                .min-#{$abbrev}#{$infix}-#{$size} {
-                    min-#{$prop}: $length !important;
-                }
+                @include generate-size-classes($prop, $abbrev, $length, $size, $infix);
+                @include generate-size-classes($prop, $abbrev, $length, "#{$size}--force", $infix, true);
             }
 
             // auto - With breakpoint infix
@@ -152,15 +90,6 @@
         }
     }
 }
-.max-w-1920{
-    max-width: 1920px;
-}
-.max-w-1440{
-    max-width: 1440px;
-}
-.max-w-1024{
-    max-width: 1024px;
-}
-.max-w-600{
-    max-width: 600px;
-}
+
+
+

package/base/_helpers.scss

@@ -529,54 +529,54 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-            
+
             .text#{$infix}-decoration-strike,
             .text#{$infix}-strike,
             .text#{$infix}-line-through {
                 text-decoration: line-through !important
             }
-            
+
             .text#{$infix}-decoration-none,
             .text#{$infix}-none {
                 text-decoration: none !important
             }
-            
+
             .text#{$infix}-super {
                 vertical-align: super !important
             }
-            
+
             .text#{$infix}-sub {
                 vertical-align: sub !important
             }
-            
+
             .text#{$infix}-capitalize {
                 text-transform: capitalize !important
             }
-            
+
             .text#{$infix}-lowercase {
                 text-transform: lowercase !important
             }
-            
+
             .text#{$infix}-uppercase {
                 text-transform: uppercase !important
             }
-            
+
             .text#{$infix}-nowrap {
                 white-space: nowrap
             }
-            
+
             .text#{$infix}-left {
                 text-align: left !important
             }
-            
+
             .text#{$infix}-center {
                 text-align: center !important
             }
-            
+
             .text#{$infix}-right {
                 text-align: right !important
             }
-            
+
             .text#{$infix}-boxed {
                 border-radius: 2px;
                 padding: 4px 8px;
@@ -585,7 +585,7 @@ $align-class-names: top, right, bottom, left;
                 font-weight: 600;
                 white-space: nowrap
             }
-            
+
             .text#{$infix}-truncate,
             .text#{$infix}-ellipsis {
                 display: block;
@@ -607,7 +607,7 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-            
+
             @for $i from 0 through 4 {
                 $border-value: $i * 2;
                 $border-suffix: "-#{$border-value}";
@@ -648,7 +648,7 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-            
+
             @for $i from 0 through 8 {
                 $radius-value: $i * 2;
                 $radius-suffix: "-#{$radius-value}";
@@ -1831,7 +1831,7 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-    
+
             @for $index from 1 through 9 {
                 $weight: $index * 100;
                 .font-weight#{$infix}-#{$weight},
@@ -1851,7 +1851,7 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-    
+
             $index: 0;
             @while $index <= 18 {
                 $size: $index * 4;
@@ -1873,7 +1873,7 @@ $align-class-names: top, right, bottom, left;
     @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
         @include media-breakpoint($materialBreakpoint) {
             $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-    
+
             $index: 0;
             @while $index <= 36 {
                 $height: $index * 2;

package/components/matcha-buttons.scss

@@ -94,23 +94,23 @@
         &:hover{
             // filter: brightness(1.1);
         }
-        
+
         &:active{
             // filter: brightness(0.9);
         }
-        
+
         &:disabled {
             background-color: map-get($background, disabled);
             color: map-get($foreground, disabled);
             border-color: map-get($foreground, disabled);
         }
-        
+
         &-basic {
             border: 0px solid currentColor;
             box-shadow: 0px 0px 0px 0px inset;
             background: transparent !important;
         }
-        
+
         &-outline {
             border: 0px solid currentColor;
             box-shadow: 0px 0px 0px 2px inset;
@@ -118,7 +118,7 @@
         }
 
         &-pill {
-            border-radius: $border-radius-wider;
+            border-radius: 999px;
         }
 
         &-link {
@@ -129,7 +129,7 @@
             text-decoration: underline;
             padding: 0;
         }
-        
+
         &-icon {
             aspect-ratio: 1;
             padding: 0 !important;
@@ -137,12 +137,7 @@
             align-items: center;
             justify-content: center;
         }
-        
-        &.color-unset{
-            .ripple {
-                background: rgba(0,0,0,.15);
-            }
-        }
+
         .ripple {
             position: absolute;
             border-radius: 999px;
@@ -152,7 +147,7 @@
         .ripple.show {
             animation: ripple 400ms ease-out;
         }
-        
+
         @keyframes ripple {
             0% {
                 opacity: 0;

package/components/matcha-menu.scss

@@ -0,0 +1,71 @@
+@mixin matcha-menu-theme($theme) {
+    $primary: map-get($theme, primary);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .matcha-menu{
+        position: relative;
+    }
+
+    .matcha-menu-trigger{
+        line-height: 48px;
+    }
+    .menu {
+        position: absolute;
+        background: white;
+        display: none;
+        flex-direction: column;
+        z-index: 1000;
+      }
+
+      .menu.show {
+        display: flex;
+        left: 100%;
+      }
+
+      .menu-item {
+        position: relative;
+        button{
+            background: white;
+            border: none;
+            padding: 0;
+            cursor: pointer;
+            font-size: 16px;
+            font-weight: 700;
+            height: 48px;
+            appearance: auto;
+            text-rendering: auto;
+            letter-spacing: normal;
+            word-spacing: normal;
+            line-height: normal;
+            text-transform: none;
+            text-indent: 0px;
+            text-shadow: none;
+            display: inline-block;
+            text-align: center;
+            align-items: flex-start;
+            cursor: default;
+            box-sizing: border-box;
+            *{
+                pointer-events: none;
+            }
+        }
+      }
+
+      .submenu {
+        position: absolute;
+        display: none;
+      }
+
+      .menu-item:hover > .submenu {
+        display: block;
+        z-index: 1001; /* Ensure submenus appear above other content */
+        position:relative;
+        top: -48px;
+      }
+
+
+
+}

package/main.scss

@@ -33,6 +33,7 @@
 @import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
 @import "./components/matcha-header.scss"; // matcha-header-theme($theme)
 @import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
+@import "./components/matcha-menu.scss"; // matcha-menu-theme($theme)
 @import "./components/matcha-progress-bar.scss"; // matcha-progress-bar-theme($theme)
 @import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
 @import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
@@ -130,4 +131,5 @@
 
     @include matcha-button-theme($theme);
     @include matcha-header-theme($theme);
+    @include matcha-menu-theme($theme);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "matcha-theme",
-    "version": "1.0.27",
-    "description": "styles for matcha-design-system",
+    "version": "18.0.28",
+    "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"