matcha-theme 20.207.0 → 20.209.0

package/base/_reset.scss

@@ -28,7 +28,7 @@ How to use
     $foreground: map-get($theme, foreground);
 
     a {
-        color: map-get($accent, default);
+        color: getBlue($theme);
     }
 
     pre > code{
@@ -36,13 +36,13 @@ How to use
     }
     code {
         &:not(.highlight) {
-            background-color: map-get($background, card);
+            background-color: getSurface($theme);
         }
     }
 
     .changelog {
         .entry {
-            background-color: map-get($background, card);
+            background-color: getSurface($theme);
         }
     }
 
@@ -56,111 +56,16 @@ How to use
         }
     }
 
-    .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);
+            color: getBlue($theme);
         }
     }
 
     // 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);
-        }
+        background: getYellow($theme);
     }
 }
 
@@ -212,58 +117,6 @@ How to use
     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

package/components/matcha-time-range.scss

@@ -1,39 +1,40 @@
 // =========================================================
 // * Matcha Time Range Styles
 // =========================================================
+@mixin matcha-time-range-theme($theme) {
+  .matcha-time-range-container {
+    display: flex;
+    gap: 16px;
+    width: 100%;
+    align-items: flex-start;
 
-.matcha-time-range-container {
-  display: flex;
-  gap: 16px;
-  width: 100%;
-  align-items: flex-start;
-
-  // Responsividade
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 12px;
-  }
+    // Responsividade
+    @media (max-width: 768px) {
+      flex-direction: column;
+      gap: 12px;
+    }
 
-  // Os campos de hora dentro do range
-  matcha-form-field {
-    flex: 1;
-    min-width: 0;
+    // Os campos de hora dentro do range
+    matcha-form-field {
+      flex: 1;
+      min-width: 0;
 
-    &:first-child {
-      flex-shrink: 0;
-    }
+      &:first-child {
+        flex-shrink: 0;
+      }
 
-    &:last-child {
-      flex-shrink: 0;
+      &:last-child {
+        flex-shrink: 0;
+      }
     }
-  }
 
-  // Quando há erro de validação no range
-  matcha-form-field.ng-invalid.ng-touched {
-    matcha-time {
-      .matcha-time-input {
-        border-color: var(--matcha-color-error, #f44336);
+    // Quando há erro de validação no range
+    matcha-form-field.ng-invalid.ng-touched {
+      matcha-time {
+        .matcha-time-input {
+          border-color: getRed($theme);
+        }
       }
     }
   }
-}
+}

package/components/matcha-time.scss

@@ -19,7 +19,7 @@
     &:disabled {
       cursor: not-allowed;
       opacity: 0.6;
-      color: getDisabled($theme);
+      color: getGrey($theme);
     }
   }
 

package/main.scss

@@ -191,4 +191,5 @@
     @include matcha-snack-bar-theme($theme);
     @include matcha-date-theme($theme);
     @include matcha-time-theme($theme);
+    @include matcha-time-range-theme($theme);
 }

package/package.json

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