matcha-theme 18.0.27 → 18.1.28

package/base/_reset.scss

@@ -0,0 +1,9 @@
+@mixin base-body-reset-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    & {
+        color: map-get($foreground, text);
+        background: map-get($background, background);
+    }
+}

package/base/_typography.scss

@@ -0,0 +1,244 @@
+/*
+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;
+}

package/components/matcha-audio-player.scss

@@ -0,0 +1,37 @@
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-audio-player.scss';
+@include matcha-audio-player-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Audio Player [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-audio-player-theme($theme) {
+    $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);
+
+    .matcha-audio-player {
+        .audio-player {
+            audio {
+                // display:none
+            }
+
+            .audio & {
+                a {
+                    display: none;
+                }
+
+                audio {
+                    display: inline-block;
+                }
+            }
+        }
+
+        .is-selected {
+            box-shadow: 0px 0px 0px 2px inset map-get($accent, default);
+        }
+    }
+}

package/components/matcha-buttons.scss

@@ -0,0 +1,165 @@
+@mixin matcha-button-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-button {
+        border: 0px solid currentColor;
+        transition: all 50ms linear;
+        overflow: hidden;
+        position: relative;
+        font-size: 16px;
+        font-weight: 700;
+        height: 56px;
+        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;
+        }
+        &-xs {
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(32px);
+            max-height: px-to-rem(32px);
+        }
+
+        &-sm {
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(40px);
+            max-height: px-to-rem(40px);
+        }
+
+        &-md {
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(48px);
+            max-height: px-to-rem(48px);
+        }
+
+        &-lg {
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(56px);
+            max-height: px-to-rem(56px);
+        }
+
+        &-xl {
+            padding: 0 px-to-rem(32px);
+            border-radius: px-to-rem(8px);
+            line-height: px-to-rem(56px);
+            max-height: px-to-rem(56px);
+        }
+
+        &-main {
+            background: map-get($background, background);
+            line-height: px-to-rem(32px);
+            padding: 0 px-to-rem(16px);
+        }
+
+        &-xs,
+        &-sm,
+        &-md,
+        &-lg,
+        &-xl {
+            min-width: 24px;
+
+            &.stroked {
+                box-shadow: 0px 0px 0px 2px inset;
+
+                &.color-label {
+                    box-shadow: 0px 0px 0px 2px inset map-get($foreground, label);
+                    color: map-get($foreground, label);
+                }
+
+                &.color-placeholder {
+                    box-shadow: 0px 0px 0px 2px inset map-get($foreground, placeholder);
+                    color: map-get($foreground, placeholder);
+                }
+            }
+        }
+        &: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;
+            background: transparent !important;
+        }
+
+        &-pill {
+            border-radius: 999px;
+        }
+
+        &-link {
+            background-color: transparent;
+            color: map-get($foreground, label);
+            text-transform: initial;
+            letter-spacing: 0;
+            text-decoration: underline;
+            padding: 0;
+        }
+
+        &-icon {
+            aspect-ratio: 1;
+            padding: 0 !important;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .ripple {
+            position: absolute;
+            border-radius: 999px;
+            transform: scale(0);
+            pointer-events: none;
+        }
+        .ripple.show {
+            animation: ripple 400ms ease-out;
+        }
+
+        @keyframes ripple {
+            0% {
+                opacity: 0;
+                transform: scale(0);
+            }
+            25% {
+                opacity: 1;
+            }
+            100% {
+                opacity: 0;
+                transform: scale(2);
+            }
+        }
+    }
+}

package/components/matcha-cards.scss

@@ -0,0 +1,93 @@
+@mixin matcha-cards-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-card,
+    .matcha-card-flat {
+        // background: map-get($background, card);
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ Cards
+// -----------------------------------------------------------------------------------------------------
+.matcha-card,
+.matcha-card-flat {
+    padding: 16px;
+    border-radius: 8px;
+
+    &-border,
+    &-border-left {
+        border-left: 8px solid;
+    }
+
+    &-border-right {
+        border-right: 8px solid;
+    }
+
+    &.disabled {
+        transition: opacity 100ms linear;
+        opacity: 0.5;
+        pointer-events: none;
+    }
+
+    &.enabled {
+        transition: opacity 100ms linear;
+        opacity: 1;
+    }
+
+    &.variable-width {
+        min-width: 0;
+    }
+
+    &.auto-width {
+        min-width: 0;
+        max-width: none;
+    }
+
+    &.fixed-width {
+        min-width: 264px;
+        max-width: 264px;
+        width: 264px;
+    }
+
+    // Buttons
+    .mat-button {
+        min-width: 0 !important;
+        padding: 0 8px !important;
+    }
+
+    // Button Toggle Group
+    .mat-button-toggle-group,
+    .mat-button-toggle-standalone {
+        box-shadow: none !important;
+    }
+
+    .mat-tab-label {
+        min-width: 0 !important;
+    }
+
+    // Divider
+    .card-divider {
+        margin: 16px;
+
+        &.full-width {
+            margin: 0;
+        }
+    }
+
+    // Expand Area
+    .card-expand-area {
+        overflow: hidden;
+
+        .card-expanded-content {
+            padding: 8px 16px 16px 16px;
+            line-height: 1.75;
+        }
+    }
+
+}
+

package/components/matcha-color-pick.scss

@@ -0,0 +1,32 @@
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-color-pick.scss';
+@include matcha-color-pick-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Color Pick [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-color-pick-theme($theme) {
+    $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);
+
+    .matcha-color-pick {
+        .mat-radio-group {
+            .mat-radio-button {
+                .mat-radio-label {
+                    .mat-radio-label-content {
+                        width: 100%;
+                    }
+                }
+            }
+        }
+
+        .is-selected {
+            border-radius: 8px;
+            box-shadow: 0px 0px 0px 2px map-get($background, card);
+        }
+    }
+}

package/components/matcha-draggable.scss

@@ -0,0 +1,25 @@
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-draggable.scss';
+@include matcha-draggable-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Draggable [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin matcha-draggable-theme($theme) {
+    $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);
+
+    .matcha-draggable {
+        .check-with-label:checked+.label-for-check {
+            box-shadow: 0px 0px 0px 8px map-get($background, card), 0px 0px 0px 10px map-get($foreground, placeholder);
+        }
+
+        .is-selected {
+            box-shadow: 0px 0px 0px 8px map-get($background, card), 0px 0px 0px 10px map-get($foreground, placeholder);
+        }
+    }
+}