@inchurch/matcha-theme 20.0.3

package/abstracts/_media-breakpoint.scss

@@ -0,0 +1,23 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Theme mixins
+// --------------------------------------------------------------------------------------------------------------------
+/*
+    Esse mixin foi criado para não precisar escrever o valor em pixels de cada breakpoint toda vez que for necessário
+    criar um media query. Se em algum momento for necessário alterar o valor de um breakpoint, basta alterar o valor nos
+    tokens e o mixin irá se encarregar de atualizar todos os media queries que utilizam aquele breakpoint.
+
+    Exemplo de uso:
+
+
+
+*/
+@mixin media-breakpoint($breakpointName) {
+    $mediaQuery: map-get($breakpoints, $breakpointName);
+    @if ($mediaQuery == null) {
+        @content;
+    } @else {
+        @media #{$mediaQuery} {
+            @content;
+        }
+    }
+}

package/abstracts/_typography.scss

@@ -0,0 +1,127 @@
+// -------------------------------------------------------------------------------------------------------------------
+// @ Typography mixins
+// -------------------------------------------------------------------------------------------------------------------
+// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
+// the individual properties if a value that isn't allowed in the shorthand is passed in.
+@mixin matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
+    // If any of the values are set to `inherit`, we can't use the shorthand
+    // so we fall back to passing in the individual properties.
+    @if (
+        $font-size
+            ==inherit or
+            $font-weight
+            ==inherit or
+            $line-height
+            ==inherit or
+            $font-family
+            ==inherit or
+            $font-size
+            ==null or
+            $font-weight
+            ==null or
+            $line-height
+            ==null or
+            $font-family
+            ==null
+    ) {
+        font-size: $font-size;
+        font-weight: $font-weight;
+        line-height: $line-height;
+        font-family: $font-family;
+    } @else {
+        // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
+        // that we need to use interpolation for `font-size/line-height` in order to prevent
+        // Sass from dividing the two values.
+        font: $font-weight #{$font-size}/#{$line-height} $font-family;
+    }
+}
+
+// Converts a typography level into CSS styles.
+@mixin matcha-typography-level-to-styles($config, $level) {
+    $font-size: matcha-font-size($config, $level);
+    $font-weight: matcha-font-weight($config, $level);
+    $line-height: matcha-line-height($config, $level);
+    $font-family: matcha-font-family($config, $level);
+
+    @include matcha-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
+    letter-spacing: matcha-letter-spacing($config, $level);
+}
+
+// Represents a collection of typography levels.
+// Defaults come from https://material.io/guidelines/style/typography.html
+// Note: The spec doesn't mention letter spacing. The values here come from
+// eyeballing it until it looked exactly like the spec examples.
+
+// h1 40px headline - bold
+// h2 32px title - medium
+// h3 24px subheading - bold
+// h4 20px subheading - bold
+
+// h5-5 18px '' - bold
+// h6 18px '' - bold
+// h7 18px '' - bold
+// h8 12px '' - bold
+
+// m 16px body - regular
+// p 14px body - regular
+// small 12px caption - regular
+@mixin matcha-reset-typography($config) {
+    // Headings — aligned with Figma matcha/text/* styles
+    .h1,
+    h1 {
+        @include matcha-typography-level-to-styles($config, display);
+    }
+
+    .h2,
+    h2 {
+        @include matcha-typography-level-to-styles($config, headline);
+    }
+
+    .h3,
+    h3 {
+        @include matcha-typography-level-to-styles($config, title-lg);
+    }
+
+    .h4,
+    h4 {
+        @include matcha-typography-level-to-styles($config, title-md);
+    }
+
+    .h5,
+    h5 {
+        @include matcha-typography-level-to-styles($config, title-sm);
+    }
+
+    .h6,
+    h6 {
+        @include matcha-typography-level-to-styles($config, label-sm);
+    }
+
+    .text-bold,
+    strong,
+    b {
+        font-weight: matcha-font-weight($config, title-lg);
+    }
+
+    & {
+        font-family: matcha-font-family($config, body-md);
+    }
+
+    button {
+        font-family: matcha-font-family($config, button-md);
+        font-weight: matcha-font-weight($config, button-md);
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="tel"],
+    input[type="url"],
+    input[type="password"],
+    input[type="number"],
+    input[type="search"],
+    textarea {
+        font-family: matcha-font-family($config, body-md);
+        font-weight: matcha-font-weight($config, body-md);
+        font-size: px-to-rem(16px);
+    }
+}

package/base/_reset.scss

@@ -0,0 +1,438 @@
+@mixin base-body-reset-theme($theme) {
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    & {
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
+        color: getForeground($theme);
+        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);
+    }
+
+    pre > code{
+        color: getBlue($theme);
+    }
+    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, foreground) !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: getPrimaryAlpha($theme);
+        border-left-color: map-get($primary, default);
+        color: map-get($foreground, foreground);
+
+        &.error,
+        &.warning,
+        &.success,
+        &.info,
+        &--error,
+        &--warning,
+        &--success,
+        &--info {
+            color: map-get($foreground, foreground);
+        }
+
+        &--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,
+.p-tiny {
+    font-size: 12px !important;
+}
+
+.par-sm,
+.par-p,
+.p-small {
+    font-size: 14px !important;
+}
+
+.par-md,
+.par-m,
+.p-medium {
+    font-size: 16px !important;
+}
+
+.par-lg,
+.p-large {
+    font-size: 20px !important;
+}
+
+.par-xl,
+.p-huge {
+    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;
+}