matcha-theme 1.0.25 → 18.0.27

package/base/_reset.scss

@@ -1,9 +0,0 @@
-@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

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

@@ -1,37 +0,0 @@
-/*
-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

@@ -1,199 +0,0 @@
-@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);
-
-    $colorNames: red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow,
-    amber, orange, deep-orange;
-
-    .matcha-button {
-        border: 0px solid currentColor;
-        transition: all 50ms linear;
-        overflow: hidden;
-        position: relative;
-        font-size: 16px;
-        font-weight: 700;
-        &-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: 32px;
-            padding: 0 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-color($foreground, label);
-                    color: map-color($foreground, label);
-                }
-
-                &.color-placeholder {
-                    box-shadow: 0px 0px 0px 2px inset map-color($foreground, placeholder);
-                    color: map-color($foreground, placeholder);
-                }
-
-                &.color-primary {
-                    box-shadow: 0px 0px 0px 2px inset map-color($primary, default);
-                    color: map-color($primary, default);
-                }
-            }
-        }
-        &:hover{
-            // filter: brightness(1.1);
-        }
-        
-        &:active{
-            // filter: brightness(0.9);
-        }
-        
-        &-outline {
-            border: 0px solid currentColor;
-            box-shadow: 0px 0px 0px 2px inset;
-            background: transparent !important;
-        }
-        
-
-        &-pill {
-            border-radius: $border-radius-wider;
-        }
-
-        &-link {
-            background-color: transparent;
-            color: map-color($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;
-            background: rgba(0,0,0,.15);
-            border-radius: 999px;
-            transform: scale(0);
-            pointer-events: none;
-        }
-        .ripple.show {
-            animation: ripple 500ms ease-out;
-        }
-        
-        @keyframes ripple {
-            0% {
-                opacity: 0;
-                transform: scale(0);
-            }
-            30% {
-                opacity: 0.15;
-            }
-            100% {
-                opacity: 0;
-                transform: scale(2);
-            }
-        }
-    }
-    
-    .matcha-button.matcha-button-outline{
-        .ripple {
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.primary:not(.matcha-button-outline) {
-        .ripple {
-            background: map-color($primary, default-contrast)!important;
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.accent:not(.matcha-button-outline) {
-        .ripple {
-            background: map-color($accent, default-contrast)!important;
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.warn:not(.matcha-button-outline) {
-        .ripple {
-            background: map-color($warn, default-contrast)!important;
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.primary.matcha-button-outline {
-        .ripple {
-            background: map-color($primary, default)!important;
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.accent.matcha-button-outline {
-        .ripple {
-            background: map-color($accent, default)!important;
-            opacity: 0.2;
-        }
-    }
-    .matcha-button.warn.matcha-button-outline {
-        .ripple {
-            background: map-color($warn, default)!important;
-            opacity: 0.2;
-        }
-    }
-    
-    @each $color in $colorNames {
-        .matcha-button.#{$color} {
-            .ripple {
-                background: map-color($background, $color)!important;
-                opacity: 0.5;
-                filter: brightness(0.7);
-            }
-        }
-    }
-    
-}

package/components/matcha-cards.scss

@@ -1,93 +0,0 @@
-@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

@@ -1,32 +0,0 @@
-/*
-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

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