@inchurch/matcha-theme 20.0.11 → 20.277.0

package/vendors/charts.scss

@@ -1,92 +1,92 @@
-@mixin vendor-chart($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);
-
-    // Fixer wrappers
-    .matcha-card,
-    .matcha-card-flat,
-    .matcha-section {
-
-        //Google Chart
-        google-chart {
-            width: 100% !important;
-            max-width: 100% !important;
-            min-width: 100% !important;
-            height: 100%;
-        }
-
-        google-chart * {
-            max-width: 100% !important;
-        }
-    }
-
-    #ngxcharts {
-        ngx-charts-chart {
-            svg {
-                height: 400px;
-                width: 400px;
-
-                g {}
-            }
-        }
-    }
-
-    .chart-legend {
-        background-color: transparent;
-        padding: 0;
-        width: 200px !important;
-        min-width: 200px;
-        max-width: 300px;
-        display: -webkit-box;
-        display: flex;
-        right: 0;
-
-        div {
-            width: 100% !important;
-        }
-
-        .legend-labels {
-            background: transparent !important;
-
-            .active {
-                .legend-label-text {
-                    color: map-get($foreground, label);
-                }
-            }
-        }
-
-        .legend-label-color {
-            border-radius: 12px !important;
-        }
-
-        .legend-label-text {
-            font-weight: normal;
-            font-size: 16px !important;
-            line-height: 20px;
-            color: map-get($foreground, foreground);
-        }
-    }
-
-    // Large devices (tablets and small monitors, 1024px and up < 1440px)
-    @media (min-width: 1024px) {
-        .chart-legend {
-            margin: 0 24px 0 0;
-            border-radius: 8px;
-            position: absolute;
-            background-color: map-get($background, background-alpha);
-            @include elevation(1);
-        }
-    }
-
-    .pie-chart {
-        .pie-label {
-            fill: map-get($foreground, label);
-            font-size: 16px !important;
-            line-height: 20px;
-            padding: 8px;
-        }
-    }
-}
+@mixin vendor-chart($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);
+
+    // Fixer wrappers
+    .matcha-card,
+    .matcha-card-flat,
+    .matcha-section {
+
+        //Google Chart
+        google-chart {
+            width: 100% !important;
+            max-width: 100% !important;
+            min-width: 100% !important;
+            height: 100%;
+        }
+
+        google-chart * {
+            max-width: 100% !important;
+        }
+    }
+
+    #ngxcharts {
+        ngx-charts-chart {
+            svg {
+                height: 400px;
+                width: 400px;
+
+                g {}
+            }
+        }
+    }
+
+    .chart-legend {
+        background-color: transparent;
+        padding: 0;
+        width: 200px !important;
+        min-width: 200px;
+        max-width: 300px;
+        display: -webkit-box;
+        display: flex;
+        right: 0;
+
+        div {
+            width: 100% !important;
+        }
+
+        .legend-labels {
+            background: transparent !important;
+
+            .active {
+                .legend-label-text {
+                    color: map-get($foreground, label);
+                }
+            }
+        }
+
+        .legend-label-color {
+            border-radius: 12px !important;
+        }
+
+        .legend-label-text {
+            font-weight: normal;
+            font-size: 16px !important;
+            line-height: 20px;
+            color: map-get($foreground, foreground);
+        }
+    }
+
+    // Large devices (tablets and small monitors, 1024px and up < 1440px)
+    @media (min-width: 1024px) {
+        .chart-legend {
+            margin: 0 24px 0 0;
+            border-radius: 8px;
+            position: absolute;
+            background-color: map-get($background, background-alpha);
+            @include elevation(1);
+        }
+    }
+
+    .pie-chart {
+        .pie-label {
+            fill: map-get($foreground, label);
+            font-size: 16px !important;
+            line-height: 20px;
+            padding: 8px;
+        }
+    }
+}

package/vendors/ng5-slider.scss

@@ -1,56 +1,56 @@
-@mixin vendor-ng-5-theme($theme) {
-    $accent: map-get($theme, accent);
-    $background: map-get($theme, background);
-    $foreground: map-get($theme, foreground);
-
-    .ng5-slider {
-        &.animate {
-            .ng5-slider-pointer {
-                transition: all 50ms linear !important;
-            }
-        }
-
-        .ng5-slider-bubble {
-            bottom: 20px;
-            padding: 0;
-            margin: 0px auto;
-            background: map-get($background, card);
-            color: map-get($foreground, label);
-            transition: all 50ms linear !important;
-        }
-
-        .ng5-slider-bar {
-            background-color: map-get($background, disabled);
-        }
-
-        .ng5-slider-pointer,
-        .ng5-slider-selection {
-            background-color: map-get($accent, default);
-        }
-
-        .ng5-slider-pointer:after {
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            top: 8px;
-            left: 8px;
-            border-radius: 8px;
-            background-color: map-get($background, card);
-        }
-
-        .ng5-slider-pointer:active:after {
-            background-color: map-get($background, card);
-        }
-
-        .ng5-slider-pointer.ng5-slider-active:after {
-            width: 16px;
-            height: 16px;
-            position: absolute;
-            top: 8px;
-            left: 8px;
-            border-radius: 8px;
-            background: map-get($background, background);
-            background-color: map-get($background, background);
-        }
-    }
-}
+@mixin vendor-ng-5-theme($theme) {
+    $accent: map-get($theme, accent);
+    $background: map-get($theme, background);
+    $foreground: map-get($theme, foreground);
+
+    .ng5-slider {
+        &.animate {
+            .ng5-slider-pointer {
+                transition: all 50ms linear !important;
+            }
+        }
+
+        .ng5-slider-bubble {
+            bottom: 20px;
+            padding: 0;
+            margin: 0px auto;
+            background: map-get($background, card);
+            color: map-get($foreground, label);
+            transition: all 50ms linear !important;
+        }
+
+        .ng5-slider-bar {
+            background-color: map-get($background, disabled);
+        }
+
+        .ng5-slider-pointer,
+        .ng5-slider-selection {
+            background-color: map-get($accent, default);
+        }
+
+        .ng5-slider-pointer:after {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            border-radius: 8px;
+            background-color: map-get($background, card);
+        }
+
+        .ng5-slider-pointer:active:after {
+            background-color: map-get($background, card);
+        }
+
+        .ng5-slider-pointer.ng5-slider-active:after {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            border-radius: 8px;
+            background: map-get($background, background);
+            background-color: map-get($background, background);
+        }
+    }
+}

package/vendors/ngx-material-timepicker.scss

@@ -1,50 +1,50 @@
-@mixin vendor-ngx-material-timepicker($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);
-
-    ngx-material-timepicker-container {
-        z-index: 10000;
-
-        .timepicker__header,
-        .clock-face__number>span.active {
-            background-color: map-get($accent, default) !important;
-        }
-
-        .timepicker-dial__control {
-            color: map-color($foreground, foreground-inverse, 0.5) !important;
-        }
-
-        .clock-face__number>span.active,
-        .dial__control,
-        .timepicker-dial__item_active,
-        .timepicker-dial__time {
-            color: map-get($foreground, foreground-inverse) !important;
-        }
-
-        .timepicker-button {
-            color: map-get($accent, default) !important;
-        }
-
-        .timepicker__body,
-        .timepicker__actions {
-            background-color: map-get($background, card) !important;
-        }
-
-        .clock-face__clock-hand,
-        .clock-face__clock-hand_minute {
-            background-color: map-get($accent, default) !important;
-        }
-
-        .clock-face__clock-hand_minute::before {
-            border-color: map-get($accent, default) !important;
-            background-color: map-get($background, card) !important;
-        }
-
-        .clock-face {
-            background-color: map-get($background, background) !important;
-        }
-    }
-}
+@mixin vendor-ngx-material-timepicker($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);
+
+    ngx-material-timepicker-container {
+        z-index: 10000;
+
+        .timepicker__header,
+        .clock-face__number>span.active {
+            background-color: map-get($accent, default) !important;
+        }
+
+        .timepicker-dial__control {
+            color: map-color($foreground, foreground-inverse, 0.5) !important;
+        }
+
+        .clock-face__number>span.active,
+        .dial__control,
+        .timepicker-dial__item_active,
+        .timepicker-dial__time {
+            color: map-get($foreground, foreground-inverse) !important;
+        }
+
+        .timepicker-button {
+            color: map-get($accent, default) !important;
+        }
+
+        .timepicker__body,
+        .timepicker__actions {
+            background-color: map-get($background, card) !important;
+        }
+
+        .clock-face__clock-hand,
+        .clock-face__clock-hand_minute {
+            background-color: map-get($accent, default) !important;
+        }
+
+        .clock-face__clock-hand_minute::before {
+            border-color: map-get($accent, default) !important;
+            background-color: map-get($background, card) !important;
+        }
+
+        .clock-face {
+            background-color: map-get($background, background) !important;
+        }
+    }
+}

package/components/matcha-uploader.scss

@@ -1,215 +0,0 @@
-@use "sass:map";
-
-// =============================================================================
-// matcha-uploader.scss — File upload component
-// Aligned with Figma matcha/uploader:
-//   Estado(3: Dropzone, Enviando, Completo)
-// Angular: matcha-uploader
-// =============================================================================
-
-@mixin matcha-uploader-theme($theme) {
-  $is-dark: map.get($theme, is-dark);
-
-  // ── Dropzone ──
-  .matcha-uploader-dropzone {
-    background: var(--matcha-color-surface-bg, #{getBackground($theme)});
-    border-color: var(--matcha-color-border, #{getGrey($theme)});
-
-    &.matcha-uploader-dragover {
-      background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-      border-color: var(--matcha-color-accent, #{getAccent($theme)});
-    }
-
-    &.matcha-uploader-error {
-      border-color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
-    }
-  }
-
-  .matcha-uploader-dropzone__icon {
-    background: var(--matcha-color-accent-alpha, #{getAccentAlpha($theme)});
-    color: var(--matcha-color-accent, #{getAccent($theme)});
-  }
-
-  .matcha-uploader-dropzone__title {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-uploader-dropzone__hint {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
-  }
-
-  // ── File item ──
-  .matcha-uploader-file {
-    background: var(--matcha-color-surface, #{getSurface($theme)});
-    border-color: var(--matcha-color-border, #{getGrey($theme)});
-  }
-
-  .matcha-uploader-file__name {
-    color: var(--matcha-color-fg, #{getForeground($theme)});
-  }
-
-  .matcha-uploader-file__size {
-    color: var(--matcha-color-text-hint, #{getBlueGrey($theme)});
-  }
-
-  .matcha-uploader-file__progress-fill {
-    background: var(--matcha-color-accent, #{getAccent($theme)});
-  }
-
-  .matcha-uploader-file__percent {
-    color: var(--matcha-color-text-label, #{getBlueGrey($theme)});
-  }
-
-  .matcha-uploader-file__check {
-    color: var(--matcha-color-feedback-success, #{getSuccess($theme)});
-  }
-
-  .matcha-uploader-file__error-text {
-    color: var(--matcha-color-feedback-danger, #{getDanger($theme)});
-  }
-
-  .matcha-uploader-file__progress {
-    background: var(--matcha-color-border, #{getGrey($theme)});
-  }
-}
-
-// ── Dropzone Layout ─────────────────────────────────────────────────────────
-
-.matcha-uploader-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  // Figma matcha/uploader Dropzone: pad 32/24, gap 16, radius 8
-  gap: var(--matcha-space-200, 16px);
-  padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
-  border: 2px dashed transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-  cursor: pointer;
-  transition: background-color var(--matcha-duration-instant, 80ms) linear,
-              border-color var(--matcha-duration-instant, 80ms) linear;
-
-  &:hover {
-    opacity: 0.9;
-  }
-}
-
-.matcha-uploader-dropzone__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--matcha-icon-size-lg, 48px);
-  height: var(--matcha-icon-size-lg, 48px);
-  border-radius: var(--matcha-radius-pill, 9999px);
-}
-
-.matcha-uploader-dropzone__text {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--matcha-space-050, 4px);
-  text-align: center;
-}
-
-.matcha-uploader-dropzone__title {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-md, 14px);
-  font-weight: var(--matcha-weight-semibold, 600);
-  line-height: var(--matcha-leading-body-md, 20px);
-}
-
-.matcha-uploader-dropzone__hint {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  line-height: var(--matcha-leading-body-sm, 16px);
-}
-
-// Hidden input
-.matcha-uploader-input {
-  display: none;
-}
-
-// ── File Item Layout ────────────────────────────────────────────────────────
-
-.matcha-uploader-file {
-  display: flex;
-  align-items: center;
-  gap: var(--matcha-space-150, 12px);
-  padding: var(--matcha-space-150, 12px) var(--matcha-space-200, 16px);
-  border: var(--matcha-border-hairline, 1px) solid transparent;
-  border-radius: var(--matcha-radius-lg, 8px);
-}
-
-.matcha-uploader-file__icon {
-  width: var(--matcha-space-500, 40px);
-  height: var(--matcha-space-500, 40px);
-  border-radius: var(--matcha-radius-md, 4px);
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-.matcha-uploader-file__info {
-  display: flex;
-  flex-direction: column;
-  gap: var(--matcha-space-050, 4px);
-  flex: 1;
-  min-width: 0;
-}
-
-.matcha-uploader-file__name {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  font-weight: var(--matcha-weight-medium, 500);
-  line-height: var(--matcha-leading-body-sm, 16px);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.matcha-uploader-file__size {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-caption, 11px);
-}
-
-// ── Progress ──
-.matcha-uploader-file__progress {
-  width: 100%;
-  height: var(--matcha-border-medium, 4px);
-  border-radius: var(--matcha-radius-xs, 2px);
-  overflow: hidden;
-}
-
-.matcha-uploader-file__progress-fill {
-  height: 100%;
-  border-radius: var(--matcha-radius-xs, 2px);
-  transition: width var(--matcha-duration-moderate, 300ms) ease;
-}
-
-.matcha-uploader-file__percent {
-  font-family: var(--matcha-font-family);
-  font-size: var(--matcha-text-body-sm, 12px);
-  flex-shrink: 0;
-}
-
-// ── Responsive ──────────────────────────────────────────────────────────────
-
-@include media-breakpoint('xs') {
-  .matcha-uploader-dropzone {
-    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
-  }
-}
-
-// ── Reduced motion ──────────────────────────────────────────────────────────
-
-@media (prefers-reduced-motion: reduce) {
-  .matcha-uploader-dropzone,
-  .matcha-uploader-file__progress-fill {
-    transition: none;
-  }
-}