matcha-theme 18.1.28 → 18.1.30

package/abstracts/_typography.scss

@@ -122,3 +122,4 @@
         font-family: matcha-font-family($config, title);
     }
 }
+

package/base/_reset.scss

@@ -7,3 +7,421 @@
         background: map-get($background, background);
     }
 }
+
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-typography.scss';
+@include base-typography-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Typography [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin base-typography-theme($theme) {
+    $is-dark: map-get($theme, is-dark);
+    $accent: map-get($theme, accent);
+    $warn: map-get($theme, warn);
+    $primary: map-get($theme, primary);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    a {
+        color: map-get($accent, default);
+    }
+
+    code {
+        &:not(.highlight) {
+            background-color: map-get($background, card);
+        }
+    }
+
+    .changelog {
+        .entry {
+            background-color: map-get($background, card);
+        }
+    }
+
+    .text-boxed {
+        @if ($is-dark) {
+            background-color: rgba(255, 255, 255, 0.12);
+            color: rgba(255, 255, 255, 0.54);
+        } @else {
+            background-color: rgba(0, 0, 0, 0.12);
+            color: rgba(0, 0, 0, 0.54);
+        }
+    }
+
+    .text-primary {
+        color: map-get($primary, default) !important;
+    }
+
+    .text-warn {
+        color: map-get($warn, default) !important;
+    }
+
+    .text-label {
+        color: map-get($foreground, label) !important;
+    }
+
+    .text-placeholder {
+        color: map-get($foreground, placeholder) !important;
+    }
+
+    .text-basic {
+        color: map-get($foreground, text) !important;
+    }
+
+    // Changelog
+    .changelog {
+        .entry {
+            .groups {
+                .breaking-changes {
+                    .title {
+                        background: map-get($background, red);
+                    }
+                }
+
+                .new {
+                    .title {
+                        background: map-get($background, green);
+                    }
+                }
+
+                .improved {
+                    .title {
+                        background: map-get($background, purple);
+                    }
+                }
+
+                .fixed {
+                    .title {
+                        background: map-get($background, blue);
+                    }
+                }
+            }
+        }
+    }
+
+    // Code
+    code {
+        &:not(.highlight) {
+            color: map-get($background, blue);
+        }
+    }
+
+    // Mark
+    mark {
+        background: map-get($background, yellow);
+    }
+
+    // Message boxes
+    .matcha-message-box,
+    .matcha-msg-box,
+    .message-box {
+        background-color: rgba(map-get($primary, default), 0.2);
+        border-left-color: map-get($primary, default);
+        color: map-get($foreground, text);
+
+        &.error,
+        &.warning,
+        &.success,
+        &.info,
+        &--error,
+        &--warning,
+        &--success,
+        &--info {
+            color: map-get($foreground, text);
+        }
+
+        &--error,
+        &.error {
+            background-color: map-get($background, red-alpha);
+            border-left-color: map-get($background, red);
+        }
+
+        &--warning,
+        &.warning {
+            background-color: map-get($background, yellow-alpha);
+            border-left-color: map-get($background, yellow);
+        }
+
+        &--success,
+        &.success {
+            background-color: map-get($background, green-alpha);
+            border-left-color: map-get($background, green);
+        }
+
+        &--info,
+        &.info {
+            background-color: map-get($background, blue-alpha);
+            border-left-color: map-get($background, blue);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// Typography [Style]
+// -----------------------------------------------------------------------------------------------------
+// Paragraph
+.par-xs {
+    font-size: 12px !important;
+}
+
+.par-sm,
+.par-p {
+    font-size: 14px !important;
+}
+
+.par-md,
+.par-m {
+    font-size: 16px !important;
+}
+
+.par-lg {
+    font-size: 20px !important;
+}
+
+.par-xl {
+    font-size: 24px !important;
+}
+.text-medium,
+.text-semibold {
+    font-weight: 500;
+}
+
+.text-regular,
+.text-book {
+    font-weight: 400;
+}
+
+.text-bold {
+    font-weight: 700;
+}
+
+.text-black {
+    font-weight: 900;
+}
+
+.matcha-message-box,
+.matcha-msg-box,
+.message-box {
+    padding: 16px;
+    border-left: 6px solid;
+
+    &.error,
+    &.warning,
+    &.success,
+    &.info,
+    &--error,
+    &--warning,
+    &--success,
+    &--info {
+        padding: 16px;
+        border-left: 6px solid;
+    }
+}
+
+.title {
+    line-height: 24px;
+    margin: 0 0 16px 0;
+    display: flex;
+    align-items: center;
+
+    .title-bullet {
+        margin: 0px 8px 0 0;
+        display: inline-block;
+        position: relative;
+        border-radius: 10px;
+    }
+
+    .title-content {
+        line-height: 20px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        word-break: break-word;
+        white-space: initial;
+        -webkit-box-orient: vertical;
+        text-transform: capitalize;
+    }
+}
+
+.title-sm {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Container helpers
+// -----------------------------------------------------------------------------------------------------
+.matcha-container {
+	width: 100%;
+	max-width: 1128px;
+    margin-left:auto;
+    margin-right:auto;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Combo helpers
+// -----------------------------------------------------------------------------------------------------
+.combo-image-text,
+.combo-checkbox-text,
+.combo-icon-text,
+.combo-double-line {
+    display: flex;
+    align-items: center;
+}
+
+.combo-image-text .side-text,
+.combo-checkbox-text .side-text,
+.combo-icon-text .side-text,
+.combo-double-line .side-text {
+    display: inline-block;
+    width: calc(100% - 48px);
+    line-height: 20px;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+    -webkit-box-orient: vertical;
+}
+
+.combo-image-text .avatar,
+.combo-checkbox-text .avatar,
+.combo-icon-text .avatar,
+.combo-double-line .avatar {
+    border-radius: 50px;
+    min-width: 24px;
+    min-height: 24px;
+}
+
+.one-line-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+}
+
+.two-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+}
+
+.three-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+}
+
+.four-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+}
+
+.five-lines-text {
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 5;
+}
+
+.one-line-text,
+.two-lines-text,
+.three-lines-text,
+.four-lines-text,
+.five-lines-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-word;
+    white-space: initial;
+    -webkit-box-orient: vertical;
+}
+.word-break {
+    word-break: break-word
+}
+.word-break-all {
+    word-break: break-all
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Letter spacing helpers
+// -----------------------------------------------------------------------------------------------------
+.letter-spacing-condensed {
+    letter-spacing: -.08em !important;
+}
+.letter-spacing-normal {
+    letter-spacing: normal !important;
+}
+.letter-spacing-relaxed {
+    letter-spacing: .08em !important;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cursor helpers
+// -----------------------------------------------------------------------------------------------------
+.pointer-events-all {
+    pointer-events: all
+}
+.pointer-events-none {
+    pointer-events: none
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Clear Shadows
+// -----------------------------------------------------------------------------------------------------
+.flatten,
+.no-shadow,
+.shadow-none {
+    box-shadow: none !important;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Enable/Disable
+// -----------------------------------------------------------------------------------------------------
+.disabled {
+    transition: opacity 100ms linear;
+    opacity: .5;
+    pointer-events: none
+}
+.enabled {
+    transition: opacity 100ms linear;
+    opacity: 1
+}
+
+
+// -----------------------------------------------------------------------------------------------------
+// @ Hover - Show/Hide
+// -----------------------------------------------------------------------------------------------------
+.on-hover-show:hover {
+    opacity: 1;
+}
+.on-hover-hide:hover {
+    opacity: 0;
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Float
+// -----------------------------------------------------------------------------------------------------
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
+}
+.left {
+    float: left;
+}
+.right {
+    float: right;
+}
+.list,
+.list-style-none {
+    list-style: none;
+}
+.list-style-disc,
+.list-style-dot {
+    list-style: disc;
+}

package/components/matcha-cards.scss

@@ -88,6 +88,5 @@
             line-height: 1.75;
         }
     }
-
 }
 

package/main.scss

@@ -10,24 +10,14 @@
 @import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
 
 // MIXINS
-@import "./abstracts/breakpoints"; //media-breakpoint()
 @import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
 @import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
 
-// REMOVER -----------------------------------------------------
-@import "./abstracts/grid"; // display-grid() display-flex()
-@import "./abstracts/order";
-@import "./abstracts/position";
-@import "./abstracts/sizes";
-@import "./abstracts/spacings";
-// REMOVER -----------------------------------------------------
+// TYPOGRAPHY
 @import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
 
-
 // BASE
-@import "./base/helpers";
 @import "./base/reset"; // base-body-reset-theme()
-@import "./base/typography"; // base-typography-theme()
 
 // COMPONENTS
 @import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "matcha-theme",
-    "version": "18.1.28",
+    "version": "18.1.30",
     "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {

package/tokens/_color-tokens.scss

@@ -718,7 +718,7 @@ $mat-green: (
         200: $dark-primary-text,
         300: $dark-primary-text,
         400: $dark-primary-text,
-        500: $dark-primary-text,
+        500: $light-primary-text,
         600: $light-primary-text,
         700: $light-primary-text,
         800: $light-primary-text,
@@ -753,8 +753,8 @@ $mat-light-green: (
         200: $dark-primary-text,
         300: $dark-primary-text,
         400: $dark-primary-text,
-        500: $dark-primary-text,
-        600: $dark-primary-text,
+        500: $light-primary-text,
+        600: $light-primary-text,
         700: $light-primary-text,
         800: $light-primary-text,
         900: $light-primary-text,
@@ -1152,7 +1152,7 @@ $dark-theme-background-palette: (
     card-inverse: white,
     card-alpha: #2b2c2d80,
     card-alpha-inverse: #ffffff80,
-    
+
     sidebar: $color-base-dark-grey-700,
     sidebar-hover: $color-base-blue-grey-800,
     table-row-hover: #0000002b,

package/abstracts/_breakpoints.scss

@@ -1,33 +0,0 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Breakpoints generator
-//
-// Examples:
-// @include media-breakpoint("xs") {
-// Show styles in small devices ( Phones and Gadget, 0px and up < 600px )
-// }
-// @include media-breakpoint("gt-xs") {
-// Show styles in medium devices (landscapes and tablets, 600px and up < 1024px )
-// }
-// @include media-breakpoint("gt-sm") {
-// Show styles in large devices (tablets and small monitors, 1024px and up < 1440px)
-// }
-// @include media-breakpoint("gt-md") {
-// Show styles in X-Large devices (big desktops, 1440px and up < 1920)
-// }
-// @include media-breakpoint("gt-lg") {
-// Show styles in XX-Large devices (larger desktops, 1920px and up)
-// }
-// -------------------------------------------------------------------------------------------------------------------
-@mixin media-breakpoint($breakpointName) {
-    $mediaQuery: map-get($breakpoints, $breakpointName);
-
-    @if ($mediaQuery ==null) {
-        @content;
-    }
-
-    @else {
-        @media #{$mediaQuery} {
-            @content;
-        }
-    }
-}

package/abstracts/_grid.scss

@@ -1,163 +0,0 @@
-// -------------------------------------------------------------------------------------------------------------------
-// @ Display grids generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints) {
-    @each $sizeLabel, $value in $grid-sizes {
-        .row-#{$sizeLabel} {
-            display: flex;
-            flex-direction: column;
-        }
-
-        @media only screen and (min-width: #{$value}) {
-            @for $i from 1 through $grid-length {
-                .row > .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
-                    $calculated-flex-basis: calc($i / $grid-length) * 100%;
-                    flex-basis: $calculated-flex-basis;
-                }
-
-                .row > .#{$grid-prefix}-offset-#{$sizeLabel}-#{$i} {
-                    $calculated-margin-left: calc($i / $grid-length) * 100%;
-                    margin-left: $calculated-margin-left;
-                }
-            }
-
-            .row-#{$sizeLabel} {
-                flex-direction: row;
-            }
-        }
-    }
-
-    [class^="grid-"] {
-        display: grid;
-        grid-template-columns: minmax(0, 1fr);
-    }
-
-    @for $i from 0 through 12 {
-        $size: $i * 4;
-        .gap-#{$size} {
-            column-gap: #{$size}px;
-            row-gap: #{$size}px;
-        }
-        @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-            @include media-breakpoint($materialBreakpoint) {
-                $infix: if($materialBreakpoint == null, "", "-#{$breakpoint}");
-                .gap#{$infix}-#{$size} {
-                    column-gap: #{$size}px;
-                    row-gap: #{$size}px;
-                }
-            }
-        }
-    }
-
-    @each $breakpoint, $materialBreakpoint in $helper-breakpoints {
-        @include media-breakpoint($materialBreakpoint) {
-            $infix: if($materialBreakpoint ==null, "", "-#{$breakpoint}");
-
-            @for $i from 1 through $grid-length {
-                .grid#{$infix}-#{$i} {
-                    @include _grid-prop($i);
-                }
-
-                .colspan#{$infix}-#{$i} {
-                    grid-column-end: span #{$i};
-                }
-
-                .rowspan#{$infix}-#{$i} {
-                    grid-row-end: span #{$i};
-                }
-            }
-        }
-    }
-}
-
-
-
-@mixin _grid-prop($i) {
-    display: grid;
-    grid-template-columns: repeat($i, minmax(0, 1fr));
-}
-
-// -------------------------------------------------------------------------------------------------------------------
-// @ Display flex generator
-// -------------------------------------------------------------------------------------------------------------------
-@mixin display-flex($grid-prefix, $grid-length, $grid-sizes) {
-    .row {
-        display: flex;
-        flex-wrap: wrap;
-
-        > div[class*="#{$grid-prefix}-"] {
-            box-sizing: border-box;
-        }
-
-        > div:not([class*="#{$grid-prefix}-"]) {
-            flex: 1;
-        }
-
-        @for $i from 1 through $grid-length {
-            .#{$grid-prefix}-#{$i} {
-                $calculated-flex-basis: calc($i / $grid-length) * 100%;
-                flex-basis: $calculated-flex-basis;
-            }
-
-            .#{$grid-prefix}-offset-#{$i} {
-                $calculated-margin-left: calc($i / $grid-length) * 100%;
-                margin-left: $calculated-margin-left;
-            }
-
-            @each $sizeLabel, $value in $grid-sizes {
-                [class*="#{$grid-prefix}-offset-#{$sizeLabel}-"] {
-                    margin-left: 0;
-                }
-
-                .#{$grid-prefix}-#{$sizeLabel}-#{$i} {
-                    flex-basis: 100%;
-                }
-            }
-        }
-
-        @each $classLabel, $cssValue in (align-start flex-start, align-center center, align-end flex-end) {
-            > div[class*="#{$grid-prefix}-"].#{$classLabel} {
-                align-self: $cssValue;
-            }
-        }
-
-        @each $classLabel,
-            $cssValue
-                in (
-                    align-start flex-start,
-                    align-center center,
-                    align-end flex-end,
-                    space-around space-around,
-                    space-between space-between
-                )
-        {
-            &.#{$classLabel} {
-                justify-content: $cssValue;
-            }
-        }
-    }
-}
-
-@include display-grid($grid-prefix, $grid-length, $grid-sizes, $helper-breakpoints);
-@include display-flex($grid-prefix, $grid-length, $grid-sizes);
-
-// -------------------------------------------------------------------------------------------------------------------
-// Dynamic gaps
-// -------------------------------------------------------------------------------------------------------------------
-.gap-inside {
-    -moz-column-gap: 16px;
-    column-gap: 16px;
-    row-gap: 16px;
-}
-.gap-outside {
-    -moz-column-gap: 16px;
-    column-gap: 16px;
-    row-gap: 16px;
-}
-@media screen and (min-width: 600px) {
-    .gap-outside {
-        -moz-column-gap: 24px;
-        column-gap: 24px;
-        row-gap: 24px;
-    }
-}