matcha-theme 1.0.1 → 1.0.3

package/abstracts/_spacings.scss

@@ -2,13 +2,11 @@
 // @ Spacing - Margin and Padding
 // Generate spacing values from -64 to 64 jumping from 4 to 4
 // -----------------------------------------------------------------------------------------------------
-@each $breakpoint,
-$materialBreakpoint in $helper-breakpoints {
-    @include media-breakpoint($materialBreakpoint) {
-        $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
+@each $breakpoint-infix, $media-size in $helper-breakpoints {
+    @include media-breakpoint($media-size) {
+        $infix: if($media-size ==null, "", "-#{$breakpoint-infix}");
 
-        @each $prop,
-        $abbrev in (margin: m, padding: p) {
+        @each $prop, $abbrev in (margin: m, padding: p) {
             @if ($prop ==margin) {
                 @for $index from -16 through 16 {
                     $size: $index * 4;
@@ -21,11 +19,6 @@ $materialBreakpoint in $helper-breakpoints {
                     .#{$abbrev}#{$infix}-#{$size}--force {
                         #{$prop}: $length !important;
                     }
-                }
-
-                @for $index from -16 through 16 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
                     .#{$abbrev}x#{$infix}-#{$size} {
                         #{$prop}-right: $length;
@@ -37,7 +30,6 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-bottom: $length;
                     }
 
-
                     .#{$abbrev}x#{$infix}-#{$size}--force {
                         #{$prop}-right: $length !important;
                         #{$prop}-left: $length !important;
@@ -47,11 +39,6 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-top: $length !important;
                         #{$prop}-bottom: $length !important;
                     }
-                }
-
-                @for $index from -16 through 16 {
-                    $size: $index * 4;
-                    $length: #{$size}px;
 
                     .#{$abbrev}t#{$infix}-#{$size} {
                         #{$prop}-top: $length;
@@ -69,7 +56,6 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-left: $length;
                     }
 
-
                     .#{$abbrev}t#{$infix}-#{$size}--force {
                         #{$prop}-top: $length !important;
                     }
@@ -86,6 +72,67 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-left: $length !important;
                     }
                 }
+
+                // Some special margin utils for flex alignments
+                .m#{$infix}-auto {
+                    margin: auto;
+                }
+
+                .mt#{$infix}-auto {
+                    margin-top: auto;
+                }
+
+                .mr#{$infix}-auto {
+                    margin-right: auto;
+                }
+
+                .mb#{$infix}-auto {
+                    margin-bottom: auto;
+                }
+
+                .ml#{$infix}-auto {
+                    margin-left: auto;
+                }
+
+                .mx#{$infix}-auto {
+                    margin-right: auto;
+                    margin-left: auto;
+                }
+
+                .my#{$infix}-auto {
+                    margin-top: auto;
+                    margin-bottom: auto;
+                }
+
+                .m#{$infix}-auto--force {
+                    margin: auto !important;
+                }
+
+                .mt#{$infix}-auto--force {
+                    margin-top: auto !important;
+                }
+
+                .mr#{$infix}-auto--force {
+                    margin-right: auto !important;
+                }
+
+                .mb#{$infix}-auto--force {
+                    margin-bottom: auto !important;
+                }
+
+                .ml#{$infix}-auto--force {
+                    margin-left: auto !important;
+                }
+
+                .mx#{$infix}-auto--force {
+                    margin-right: auto !important;
+                    margin-left: auto !important;
+                }
+
+                .my#{$infix}-auto--force {
+                    margin-top: auto !important;
+                    margin-bottom: auto !important;
+                }
             }
 
             @if ($prop ==padding) {
@@ -116,7 +163,6 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-bottom: $length;
                     }
 
-
                     .#{$abbrev}x#{$infix}-#{$size}--force {
                         #{$prop}-right: $length !important;
                         #{$prop}-left: $length !important;
@@ -148,7 +194,6 @@ $materialBreakpoint in $helper-breakpoints {
                         #{$prop}-left: $length;
                     }
 
-
                     .#{$abbrev}t#{$infix}-#{$size}--force {
                         #{$prop}-top: $length !important;
                     }
@@ -166,71 +211,6 @@ $materialBreakpoint in $helper-breakpoints {
                     }
                 }
             }
-
-            @if ($abbrev ==m) {
-
-                // Some special margin utils for flex alignments
-                .m#{$infix}-auto {
-                    margin: auto;
-                }
-
-                .mt#{$infix}-auto {
-                    margin-top: auto;
-                }
-
-                .mr#{$infix}-auto {
-                    margin-right: auto;
-                }
-
-                .mb#{$infix}-auto {
-                    margin-bottom: auto;
-                }
-
-                .ml#{$infix}-auto {
-                    margin-left: auto;
-                }
-
-                .mx#{$infix}-auto {
-                    margin-right: auto;
-                    margin-left: auto;
-                }
-
-                .my#{$infix}-auto {
-                    margin-top: auto;
-                    margin-bottom: auto;
-                }
-
-
-                .m#{$infix}-auto--force {
-                    margin: auto !important;
-                }
-
-                .mt#{$infix}-auto--force {
-                    margin-top: auto !important;
-                }
-
-                .mr#{$infix}-auto--force {
-                    margin-right: auto !important;
-                }
-
-                .mb#{$infix}-auto--force {
-                    margin-bottom: auto !important;
-                }
-
-                .ml#{$infix}-auto--force {
-                    margin-left: auto !important;
-                }
-
-                .mx#{$infix}-auto--force {
-                    margin-right: auto !important;
-                    margin-left: auto !important;
-                }
-
-                .my#{$infix}-auto--force {
-                    margin-top: auto !important;
-                    margin-bottom: auto !important;
-                }
-            }
         }
     }
 }

package/base/_typography.scss

@@ -34,9 +34,7 @@ How to use
         @if ($is-dark) {
             background-color: rgba(255, 255, 255, 0.12);
             color: rgba(255, 255, 255, 0.54);
-        }
-
-        @else {
+        } @else {
             background-color: rgba(0, 0, 0, 0.12);
             color: rgba(0, 0, 0, 0.54);
         }
@@ -207,7 +205,6 @@ How to use
     }
 }
 
-
 .title {
     line-height: 24px;
     margin: 0 0 16px 0;

package/main.scss

@@ -34,10 +34,10 @@
 @import "./components/matcha-header.scss"; // matcha-header-theme($theme)
 @import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
 @import "./components/matcha-icons.scss";
-@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)
-@import "./components/matcha-table.scss";// matcha-table-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)
+@import "./components/matcha-table.scss"; // matcha-table-theme($theme)
 
 // VENDORS
 @import "./vendors/angular-editor.scss";
@@ -47,11 +47,45 @@
 @import "./vendors/ng5-slider.scss";
 @import "./vendors/ngx-material-timepicker.scss";
 
+// DEFAULT FONTS
+@font-face {
+    font-family: "CircularStd-Regular";
+    src: url("fonts/CircularStd-Regular.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Regular.woff") format("woff"),
+        url("fonts/CircularStd-Regular.ttf") format("truetype"),
+        url("fonts/CircularStd-Regular.svg") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CircularStd-Medium";
+    src: url("fonts/CircularStd-Medium.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Medium.woff") format("woff"),
+        url("fonts/CircularStd-Medium.ttf") format("truetype"),
+        url("fonts/CircularStd-Medium.svg") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "CircularStd-Bold";
+    src: url("fonts/CircularStd-Bold.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Bold.woff") format("woff"),
+        url("fonts/CircularStd-Bold.ttf") format("truetype"),
+        url("fonts/CircularStd-Bold.svg") format("svg");
+    font-weight: normal;
+    font-style: normal;
+}
 // -------------------------------------------------------------------------------------------------------------------
 // @ CORE - Mixins and Includes
 // -------------------------------------------------------------------------------------------------------------------
-@include colors-classes-static($matchaPalettes);
-
 @mixin matcha-typography($config: null) {
     @if $config ==null {
         $config: matcha-typography-config();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "description": "styles for matcha-design-system",
     "main": "main.scss",
     "scripts": {

package/tokens/_breakpoints.scss

@@ -1,29 +1,27 @@
 // Media step breakpoint mixin based on Angular Material lib
 $breakpoints: (
-    xs: 'screen and (max-width: 599px)',
-    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
-    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
-    lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
-    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
-    lt-sm: 'screen and (max-width: 599px)',
-    lt-md: 'screen and (max-width: 1023px)',
-    lt-lg: 'screen and (max-width: 1439px)',
-    lt-xl: 'screen and (max-width: 1919px)',
-    gt-xs: 'screen and (min-width: 600px)',
-    gt-sm: 'screen and (min-width: 1024px)',
-    //old size - 980px
-    gt-md: 'screen and (min-width: 1440px)',
-    //old size - 1280px
-    gt-lg: 'screen and (min-width: 1920px)'
-    ) !default;
+    xs: "screen and (max-width: 599px)",
+    sm: "screen and (min-width: 600px) and (max-width: 1023px)",
+    md: "screen and (min-width: 1024px) and (max-width: 1439px)",
+    lg: "screen and (min-width: 1440px) and (max-width: 1919px)",
+    xl: "screen and (min-width: 1920px) and (max-width: 5000px)",
+    lt-sm: "screen and (max-width: 599px)",
+    lt-md: "screen and (max-width: 1023px)",
+    lt-lg: "screen and (max-width: 1439px)",
+    lt-xl: "screen and (max-width: 1919px)",
+    gt-xs: "screen and (min-width: 600px)",
+    gt-sm: "screen and (min-width: 1024px)",
+    gt-md: "screen and (min-width: 1440px)",
+    gt-lg: "screen and (min-width: 1920px)"
+) !default;
 
 // Re-map the breakpoints for the helper classes
 $helper-breakpoints: (
     xs: null,
-    sm: 'gt-xs',
-    md: 'gt-sm',
-    lg: 'gt-md',
-    xl: 'gt-lg'
+    sm: "gt-xs",
+    md: "gt-sm",
+    lg: "gt-md",
+    xl: "gt-lg"
 );
 
 // Map the icon sizes for the helper classes
@@ -32,15 +30,9 @@ $helper-i-sizes: (
     sm: 16,
     md: 24,
     lg: 32,
-    xl: 48,
+    xl: 48
 );
 
-$grid-prefix: 'col';
+$grid-prefix: "col";
 $grid-length: 12;
-$grid-sizes: (
-    xs 600px,
-    sm 1024px,
-    md 1440px,
-    lg 1920px,
-    xl 2560px
-);
+$grid-sizes: (sm 600px, md 1024px, lg 1440px, xl 1920px);

package/tokens/_color-tokens.scss

@@ -1119,32 +1119,6 @@ $mat-dark-grey: (
 // Alias for alternate spelling.
 $dark-grey: $mat-dark-grey;
 
-// Color for static-colors classes generator
-$matchaPalettes: (
-    "red": $red,
-    "pink": $pink,
-    "purple": $purple,
-    "deep-purple": $deep-purple,
-    "indigo": $indigo,
-    "blue": $blue,
-    "light-blue": $light-blue,
-    "cyan": $cyan,
-    "teal": $teal,
-    "green": $green,
-    "light-green": $light-green,
-    "lime": $lime,
-    "yellow": $yellow,
-    "amber": $amber,
-    "orange": $orange,
-    "deep-orange": $deep-orange,
-    "brown": $brown,
-    "grey": $grey,
-    "blue-grey": $blue-grey
-);
-
-// Material color hues list
-$matchaHues: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400, A700;
-
 // -------------------------------------------------------------------------------------------------------------------
 // @ Color palette for Surface & Base Colors.
 // --------------------------------------------------------------------------------------------------------------------

package/vendors/angular-material-fixes.scss

@@ -6,16 +6,70 @@
     $foreground: map-get($theme, foreground);
 
     // -------------------------------------------------------------------------------------------------------------------
-    // @ ANGULAR MATERIAL - Matcha Style
+    // @ ANGULAR MATERIAL - To attempt to fix some of the issues with the Angular Material components we have to override
     // -------------------------------------------------------------------------------------------------------------------
     .mat-mdc-outlined-button {
         --mdc-outlined-button-container-shape: 8px;
     }
-
     .mat-mdc-raised-button {
         --mdc-protected-button-container-height: 36px;
         --mdc-protected-button-container-shape: 8px;
-        --mdc-protected-button-container-elevation: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+        --mdc-protected-button-container-elevation: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+            0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+    }
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,
+    .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing {
+        --mdc-outlined-text-field-outline-width: 2px;
+    }
+    .mdc-text-field--outlined {
+        --mdc-outlined-text-field-container-shape: 8px;
+    }
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined
+        .mdc-notched-outline--upgraded
+        .mdc-floating-label--float-above {
+        --mat-mdc-form-field-label-transform: translateY(-29.75px)
+            scale(var(--mat-mdc-form-field-floating-label-scale, 0.75));
+    }
+
+    /* reduce the input height fom 56px to 48px */
+    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
+        top: 22px;
+    }
+    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
+        padding-top: 12px;
+        padding-bottom: 12px;
+    }
+    .mat-mdc-form-field-infix {
+        min-height: 48px;
+    }
+
+    /* align icons inside of buttons */
+    .mat-mdc-icon-button.mat-mdc-button-base {
+        padding: 0;
+    }
+    .mat-mdc-icon-button.mat-mdc-button-base {
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        flex-wrap: wrap;
     }
 
+    // /*error label*/
+    // mat-form-field-invalid
+    // .theme-default-dark .mat-mdc-form-field-subscript-wrapper,
+    // .theme-default-dark .mat-mdc-form-field-bottom-align::before {
+    //     -moz-osx-font-smoothing: grayscale;
+    //     -webkit-font-smoothing: antialiased;
+    //     font-family: var(--mat-form-field-subscript-text-font);
+    //     line-height: var(--mat-form-field-subscript-text-line-height);
+    //     font-size: var(--mat-form-field-subscript-text-size);
+    //     letter-spacing: var(--mat-form-field-subscript-text-tracking);
+    //     font-weight: var(--mat-form-field-subscript-text-weight);
+    // }
+    // .mat-mdc-form-field-bottom-align::before {
+    //     content: "";
+    //     display: inline-block;
+    //     height: 16px;
+    // }
 }