@inchurch/matcha-theme 21.4.0 → 22.1.0

package/base/_reset.scss

@@ -1,445 +1,446 @@
-@mixin base-body-reset-theme($theme: ()) {
-    // theme-agnóstico em valor (var); fica per-classe de tema pelo & (pinta o
-    // elemento que carrega a classe). $theme vestigial (default ()).
-    & {
-        *, *:before, *:after {
-            box-sizing: border-box;
-        }
-        color: var(--matcha-color-fg);
-        background: var(--matcha-color-surface-bg);
-    }
-}
-
-/*
-How to use
-@import '~matcha-ds/assets/scss/components/matcha-typography.scss';
-@include base-typography-theme($theme);
-*/
-// -----------------------------------------------------------------------------------------------------
-// Typography [Theme]
-// -----------------------------------------------------------------------------------------------------
-@mixin base-typography-theme($theme) {
-    // theme-agnóstico: tudo via var(--matcha-color-*) (runtime). $theme mantido só
-    // na assinatura por retrocompat dos call sites.
-
-    a {
-        color: var(--matcha-color-accent);
-    }
-
-    pre > code{
-        color: var(--matcha-color-info);
-    }
-    code {
-        &:not(.highlight) {
-            // Token em runtime (não getter compile-time): resolve no escopo de tema
-            // MAIS PRÓXIMO, então temas aninhados (ex.: preview light dentro de body
-            // dark) não colidem mais — antes geravam tarja escura sobre card claro.
-            // Dark é value-preserving (#1c1f26); light adota o surface-card do DSV3.
-            background-color: var(--matcha-color-surface-card);
-        }
-    }
-
-    .changelog {
-        .entry {
-            background-color: var(--matcha-color-surface-card);
-        }
-    }
-
-    .text-boxed {
-        background-color: var(--matcha-color-text-boxed-bg);
-        color: var(--matcha-color-text-boxed-fg);
-    }
-
-    .text-primary {
-        color: var(--matcha-color-primary) !important;
-    }
-
-    .text-warn {
-        color: var(--matcha-color-warn) !important;
-    }
-
-    .text-label {
-        color: var(--matcha-color-text-label) !important;
-    }
-
-    .text-placeholder {
-        color: var(--matcha-color-text-placeholder) !important;
-    }
-
-    .text-basic {
-        color: var(--matcha-color-fg) !important;
-    }
-
-    // Changelog
-    .changelog {
-        .entry {
-            .groups {
-                .breaking-changes {
-                    .title {
-                        background: var(--matcha-color-danger);
-                    }
-                }
-
-                .new {
-                    .title {
-                        background: var(--matcha-color-success);
-                    }
-                }
-
-                .improved {
-                    .title {
-                        background: var(--matcha-prim-purple-500);
-                    }
-                }
-
-                .fixed {
-                    .title {
-                        background: var(--matcha-color-info);
-                    }
-                }
-            }
-        }
-    }
-
-    // Code
-    code {
-        &:not(.highlight) {
-            color: var(--matcha-color-info);
-        }
-    }
-
-    // Mark
-    mark {
-        background: var(--matcha-color-warn);
-    }
-
-    // Message boxes
-    .matcha-message-box,
-    .matcha-msg-box,
-    .message-box {
-        background-color: var(--matcha-color-primary-alpha);
-        border-left-color: var(--matcha-color-primary);
-        color: var(--matcha-color-fg);
-
-        &.error,
-        &.warning,
-        &.success,
-        &.info,
-        &--error,
-        &--warning,
-        &--success,
-        &--info {
-            color: var(--matcha-color-fg);
-        }
-
-        &--error,
-        &.error {
-            background-color: var(--matcha-color-danger-alpha);
-            border-left-color: var(--matcha-color-danger);
-        }
-
-        &--warning,
-        &.warning {
-            background-color: var(--matcha-color-warn-alpha);
-            border-left-color: var(--matcha-color-warn);
-        }
-
-        &--success,
-        &.success {
-            background-color: var(--matcha-color-success-alpha);
-            border-left-color: var(--matcha-color-success);
-        }
-
-        &--info,
-        &.info {
-            background-color: var(--matcha-color-info-alpha);
-            border-left-color: var(--matcha-color-info);
-        }
-    }
-}
-
-// -----------------------------------------------------------------------------------------------------
-// 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
-}
-
-// Helpers pontuais migrados do matcha-core (DSV3): matcha-core é só a grade
-// gerada; helpers escritos à mão vivem aqui na base (junto de .word-break etc.).
-// (.break-word não migra — use .word-break acima, mesma regra.)
-.overflow-wrap-anywhere { overflow-wrap: anywhere; }
-.font-inherit           { font-family: inherit; }
-.font-italic            { font-style: italic; }
-.tabular-nums           { font-variant-numeric: tabular-nums; }
-.user-select-none       { -webkit-user-select: none; user-select: none; }
-.scrollbar-none {
-    scrollbar-width: none;
-    &::-webkit-scrollbar { display: none; }
-}
-
-// -----------------------------------------------------------------------------------------------------
-// @ 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;
-}
+@mixin base-body-reset-theme($theme: ()) {
+    // theme-agnóstico em valor (var); fica per-classe de tema pelo & (pinta o
+    // elemento que carrega a classe). $theme vestigial (default ()).
+    & {
+        color: var(--matcha-color-fg);
+        background: var(--matcha-color-surface-bg);
+
+        *, *:before, *:after {
+            box-sizing: border-box;
+        }
+    }
+}
+
+/*
+How to use
+@import '~matcha-ds/assets/scss/components/matcha-typography.scss';
+@include base-typography-theme($theme);
+*/
+// -----------------------------------------------------------------------------------------------------
+// Typography [Theme]
+// -----------------------------------------------------------------------------------------------------
+@mixin base-typography-theme($theme) {
+    // theme-agnóstico: tudo via var(--matcha-color-*) (runtime). $theme mantido só
+    // na assinatura por retrocompat dos call sites.
+
+    a {
+        color: var(--matcha-color-accent);
+    }
+
+    pre > code{
+        color: var(--matcha-color-info);
+    }
+    code {
+        &:not(.highlight) {
+            // Token em runtime (não getter compile-time): resolve no escopo de tema
+            // MAIS PRÓXIMO, então temas aninhados (ex.: preview light dentro de body
+            // dark) não colidem mais — antes geravam tarja escura sobre card claro.
+            // Dark é value-preserving (#1c1f26); light adota o surface-card do DSV3.
+            background-color: var(--matcha-color-surface-card);
+        }
+    }
+
+    .changelog {
+        .entry {
+            background-color: var(--matcha-color-surface-card);
+        }
+    }
+
+    .text-boxed {
+        background-color: var(--matcha-color-text-boxed-bg);
+        color: var(--matcha-color-text-boxed-fg);
+    }
+
+    .text-primary {
+        color: var(--matcha-color-primary) !important;
+    }
+
+    .text-warn {
+        color: var(--matcha-color-warn) !important;
+    }
+
+    .text-label {
+        color: var(--matcha-color-text-label) !important;
+    }
+
+    .text-placeholder {
+        color: var(--matcha-color-text-placeholder) !important;
+    }
+
+    .text-basic {
+        color: var(--matcha-color-fg) !important;
+    }
+
+    // Changelog
+    .changelog {
+        .entry {
+            .groups {
+                .breaking-changes {
+                    .title {
+                        background: var(--matcha-color-danger);
+                    }
+                }
+
+                .new {
+                    .title {
+                        background: var(--matcha-color-success);
+                    }
+                }
+
+                .improved {
+                    .title {
+                        background: var(--matcha-prim-purple-500);
+                    }
+                }
+
+                .fixed {
+                    .title {
+                        background: var(--matcha-color-info);
+                    }
+                }
+            }
+        }
+    }
+
+    // Code
+    code {
+        &:not(.highlight) {
+            color: var(--matcha-color-info);
+        }
+    }
+
+    // Mark
+    mark {
+        background: var(--matcha-color-warn);
+    }
+
+    // Message boxes
+    .matcha-message-box,
+    .matcha-msg-box,
+    .message-box {
+        background-color: var(--matcha-color-primary-alpha);
+        border-left-color: var(--matcha-color-primary);
+        color: var(--matcha-color-fg);
+
+        &.error,
+        &.warning,
+        &.success,
+        &.info,
+        &--error,
+        &--warning,
+        &--success,
+        &--info {
+            color: var(--matcha-color-fg);
+        }
+
+        &--error,
+        &.error {
+            background-color: var(--matcha-color-danger-alpha);
+            border-left-color: var(--matcha-color-danger);
+        }
+
+        &--warning,
+        &.warning {
+            background-color: var(--matcha-color-warn-alpha);
+            border-left-color: var(--matcha-color-warn);
+        }
+
+        &--success,
+        &.success {
+            background-color: var(--matcha-color-success-alpha);
+            border-left-color: var(--matcha-color-success);
+        }
+
+        &--info,
+        &.info {
+            background-color: var(--matcha-color-info-alpha);
+            border-left-color: var(--matcha-color-info);
+        }
+    }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// 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
+}
+
+// Helpers pontuais migrados do matcha-core (DSV3): matcha-core é só a grade
+// gerada; helpers escritos à mão vivem aqui na base (junto de .word-break etc.).
+// (.break-word não migra — use .word-break acima, mesma regra.)
+.overflow-wrap-anywhere { overflow-wrap: anywhere; }
+.font-inherit           { font-family: inherit; }
+.font-italic            { font-style: italic; }
+.tabular-nums           { font-variant-numeric: tabular-nums; }
+.user-select-none       { -webkit-user-select: none; user-select: none; }
+.scrollbar-none {
+    scrollbar-width: none;
+    &::-webkit-scrollbar { display: none; }
+}
+
+// -----------------------------------------------------------------------------------------------------
+// @ 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;
+}