@inchurch/matcha-theme 20.0.3

package/main.scss

@@ -0,0 +1,262 @@
+// TOKENS
+@import "./tokens/animations-tokens";
+@import "./tokens/breakpoints-tokens";
+@import "./tokens/color-tokens";
+@import "./tokens/elevation-tokens";
+@import "./tokens/spacing-tokens";
+@import "./tokens/typography-tokens";
+@import "./tokens/css-custom-properties";
+
+// FUNCTIONS
+@import "./abstracts/functions"; // map-contrast() palette() map-color() light-theme() dark-theme() matcha-typography-level() matcha-typography-config() _matcha-get-type-value() matcha-font-size() matcha-line-height() matcha-font-weight() matcha-letter-spacing() matcha-font-family() _get-umbra-map() _get-penumbra-map() _get-ambient-map() elevation-transition-property-value()
+
+// MIXINS
+@import "./abstracts/colors"; // colors-classes-static() colors-classes-dynamic()
+@import "./abstracts/elevation"; // elevation() _matcha-theme-elevation() matcha-overridable-elevation() _matcha-theme-overridable-elevation() elevation-transition() elevation-theme()
+@import "./abstracts/media-breakpoint"; // media-breakpoint()
+
+// TYPOGRAPHY
+@import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
+
+// BASE
+@import "./base/reset"; // base-body-reset-theme()
+
+// COMPONENTS
+@import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
+@import "./components/matcha-autocomplete.scss"; // matcha-autocomplete-theme($theme)
+@import "./components/matcha-option.scss"; // matcha-option-theme($theme)
+@import "./components/matcha-panel.scss"; // matcha-panel-theme($theme)
+@import "./components/matcha-select.scss"; // matcha-select-theme($theme)
+@import "./components/matcha-buttons.scss"; // matcha-button-theme($theme)
+@import "./components/matcha-button-toggle.scss"; // matcha-button-toggle-theme($theme)
+@import "./components/matcha-cards.scss"; // matcha-cards-theme($theme)
+@import "./components/matcha-color-pick.scss"; // matcha-color-pick-theme($theme)
+@import "./components/matcha-draggable.scss"; // matcha-draggable-theme($theme)
+@import "./components/matcha-drop-list.scss"; // matcha-drop-list-theme($theme)
+@import "./components/matcha-header.scss"; // matcha-header-theme($theme)
+@import "./components/matcha-horizontal-tree.scss"; // matcha-horizontal-tree-theme($theme)
+@import "./components/matcha-menu.scss"; // matcha-menu-theme($theme)
+@import "./components/matcha-progress-bar.scss"; // matcha-progress-bar-theme($theme)
+@import "./components/matcha-scrollbar.scss"; // matcha-scrollbar-theme($theme)
+@import "./components/matcha-scrollbox-shadow.scss"; // matcha-scrollbox-shadow-theme($theme)
+@import "./components/matcha-skeleton.scss"; // matcha-skeleton-theme($theme)
+@import "./components/matcha-table.scss"; // matcha-table-theme($theme)
+@import "./components/matcha-table-cell.scss"; // matcha-table-cell-theme($theme)
+@import "./components/matcha-tooltip.scss"; // matcha-tooltip-theme($theme)
+@import "./components/matcha-form-field.scss";
+@import "./components/matcha-checkbox.scss";
+@import "./components/matcha-accordion.scss";
+@import "./components/matcha-ripple.scss"; // matcha-ripple-theme($theme)
+@import "./components/matcha-spin.scss"; // matcha-spin-theme($theme)
+@import "./components/matcha-spinner.scss"; // matcha-spinner-theme($theme)
+@import "./components/matcha-hint-text.scss"; // matcha-hint-theme($theme)
+@import "./components/matcha-slide-toggle.scss"; // matcha-slide-toggle($theme)
+@import "./components/matcha-radio.scss"; // matcha-radio($theme)
+@import "./components/matcha-avatar.scss"; // matcha-avatar($theme)
+@import "./components/matcha-paginator.scss"; // matcha-paginator($theme)
+@import "./components/matcha-slider.scss"; // matcha-slider($theme)
+@import "./components/matcha-divider.scss"; // matcha-divider($theme)
+@import "./components/matcha-highlight.scss"; // matcha-highlight($theme)
+@import "./components/matcha-tabs.scss"; // matcha-tabs($theme)
+@import "./components/matcha-modal.scss"; // matcha-modal($theme)
+@import "./components/matcha-drawer.scss"; // matcha-drawer-theme($theme)
+@import "./components/matcha-chip.scss"; // matcha-chip($theme)
+@import "./components/matcha-date.scss"; // matcha-date-theme($theme)
+@import "./components/matcha-calendar.scss"; // matcha-calendar-theme($theme)
+@import "./components/matcha-page-builder.scss"; // matcha-page-builder($theme)
+@import "./components/matcha-snack-bar.scss"; // matcha-snack-bar-theme($theme)
+@import "./components/matcha-timepicker.scss"; // matcha-timepicker-theme($theme)
+@import "./components/matcha-badge.scss"; // matcha-badge-theme($theme)
+@import "./components/matcha-empty-state.scss"; // matcha-empty-state-theme($theme)
+@import "./components/matcha-nav.scss"; // matcha-nav-theme($theme)
+@import "./components/matcha-list.scss"; // matcha-list-theme($theme)
+@import "./components/matcha-icon.scss"; // matcha-icon-theme($theme)
+@import "./components/matcha-text-editor.scss"; // matcha-text-editor-theme($theme)
+@import "./components/matcha-chart-card.scss"; // matcha-chart-card-theme($theme)
+@import "./components/matcha-crop.scss"; // matcha-crop-theme($theme)
+@import "./components/matcha-footer.scss"; // matcha-footer-theme($theme)
+@import "./components/matcha-uploader.scss"; // matcha-uploader-theme($theme)
+@import "./components/matcha-notification.scss"; // matcha-notification-theme($theme)
+@import "./components/matcha-section.scss"; // matcha-section-theme($theme)
+@import "./components/matcha-form-section.scss"; // matcha-form-section-theme($theme)
+@import "./components/matcha-breadcrumb.scss"; // matcha-breadcrumb-theme($theme)
+@import "./components/matcha-image.scss"; // matcha-image-theme($theme)
+@import "./components/matcha-stepper.scss"; // matcha-stepper-theme($theme)
+@import "./components/matcha-toolbar.scss"; // matcha-toolbar-theme($theme)
+@import "./components/matcha-command-palette.scss"; // matcha-command-palette-theme($theme)
+@import "./components/matcha-profile-card.scss"; // matcha-profile-card-theme($theme)
+@import "./components/matcha-flag.scss"; // matcha-flag-theme($theme)
+@import "./components/matcha-emoji.scss"; // matcha-emoji-theme($theme)
+
+// VENDORS
+@import "./vendors/angular-editor.scss";
+@import "./vendors/angular-material-fixes.scss";
+@import "./vendors/calendar.scss";
+@import "./vendors/charts.scss";
+@import "./vendors/ng5-slider.scss";
+@import "./vendors/ngx-material-timepicker.scss";
+
+// ─── FONT LOADING ────────────────────────────────────────────────────────────
+// Manrope (Google Fonts, variable weight 200-800)
+//
+// RECOMMENDED (non-blocking): add these to your app's <head> BEFORE the CSS:
+//   <link rel="preconnect" href="https://fonts.googleapis.com">
+//   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+//   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap">
+//
+// PRODUCTION: self-host for best performance — https://fonts.google.com/specimen/Manrope
+//
+// The @import below is a backwards-compatible fallback. It is render-blocking
+// and adds ~100-300ms to First Contentful Paint. Prefer <link> in your HTML.
+// ─────────────────────────────────────────────────────────────────────────────
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
+
+// Legacy fallback — keep CircularStd for existing consumers until fully migrated
+@font-face {
+    font-family: "CircularStd";
+    src: url("fonts/CircularStd-Regular.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Regular.woff") format("woff"),
+        url("fonts/CircularStd-Regular.ttf") format("truetype"),
+        url("fonts/CircularStd-Regular.svg") format("svg");
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "CircularStd";
+    src: url("fonts/CircularStd-Medium.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Medium.woff") format("woff"),
+        url("fonts/CircularStd-Medium.ttf") format("truetype"),
+        url("fonts/CircularStd-Medium.svg") format("svg");
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "CircularStd";
+    src: url("fonts/CircularStd-Bold.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Bold.woff") format("woff"),
+        url("fonts/CircularStd-Bold.ttf") format("truetype"),
+        url("fonts/CircularStd-Bold.svg") format("svg");
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "CircularStd";
+    src: url("fonts/CircularStd-Black.eot");
+    src:
+        local("☺"),
+        url("fonts/CircularStd-Black.woff") format("woff"),
+        url("fonts/CircularStd-Black.ttf") format("truetype"),
+        url("fonts/CircularStd-Black.svg") format("svg");
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ CORE - Mixins and Includes
+// -------------------------------------------------------------------------------------------------------------------
+@mixin matcha-typography($config: null) {
+    @if $config ==null {
+        $config: matcha-typography-config();
+    }
+
+    @include matcha-reset-typography($config);
+}
+
+@mixin matcha-components($theme) {
+    @include matcha-css-custom-properties($theme);
+
+    @include colors-classes-dynamic($theme);
+    @include colors-classes-static($theme);
+
+    @include elevation-theme($theme);
+
+    @include vendor-angular-editor($theme);
+    @include vendor-angular-material-fixes($theme);
+    @include vendor-calendar-theme($theme);
+    @include vendor-chart($theme);
+    @include vendor-ng-5-theme($theme);
+    @include vendor-ngx-material-timepicker($theme);
+
+    @include base-typography-theme($theme);
+    @include base-body-reset-theme($theme);
+
+    @include matcha-cards-theme($theme);
+    @include matcha-horizontal-tree-theme($theme);
+    @include matcha-audio-player-theme($theme);
+    @include matcha-color-pick-theme($theme);
+    @include matcha-draggable-theme($theme);
+    @include matcha-scrollbox-shadow($theme);
+    @include matcha-scrollbar-theme($theme);
+
+    @include matcha-table-theme($theme);
+    @include matcha-table-cell-theme($theme);
+    @include matcha-button-toggle($theme);
+    @include matcha-button-theme($theme);
+    @include matcha-ripple-theme($theme);
+    @include matcha-tooltip-theme($theme);
+    @include matcha-header-theme($theme);
+    @include matcha-menu-theme($theme);
+    @include matcha-drop-list-theme($theme);
+    @include matcha-form-field($theme);
+    @include matcha-checkbox($theme);
+    @include matcha-spin($theme);
+    @include matcha-spinner-theme($theme);
+    @include matcha-hint-text($theme);
+    @include matcha-slide-toggle-theme($theme);
+    @include matcha-tabs($theme);
+    @include matcha-modal-theme($theme);
+    @include matcha-skeleton-theme($theme);
+    @include matcha-radio($theme);
+    @include matcha-avatar-theme($theme);
+    @include matcha-drawer-theme($theme);
+    @include matcha-autocomplete-theme($theme);
+    @include matcha-panel-theme($theme);
+    @include matcha-option-theme($theme);
+    @include matcha-select-theme($theme);
+    @include matcha-paginator-theme($theme);
+    @include matcha-slider-theme($theme);
+    @include matcha-highlight-theme($theme);
+    @include matcha-divider-theme($theme);
+    @include matcha-progress-bar-theme($theme);
+    @include matcha-page-builder-theme($theme);
+    @include matcha-snack-bar-theme($theme);
+    @include matcha-chip-theme($theme);
+    @include matcha-date-theme($theme);
+    @include matcha-calendar-theme($theme);
+    @include matcha-timepicker-theme($theme);
+    @include matcha-badge-theme($theme);
+    @include matcha-empty-state-theme($theme);
+    @include matcha-nav-theme($theme);
+    @include matcha-list-theme($theme);
+    @include matcha-icon-theme($theme);
+    @include matcha-text-editor-theme($theme);
+    @include matcha-chart-card-theme($theme);
+    @include matcha-crop-theme($theme);
+    @include matcha-footer-theme($theme);
+    @include matcha-uploader-theme($theme);
+    @include matcha-notification-theme($theme);
+    @include matcha-section-theme($theme);
+    @include matcha-form-section-theme($theme);
+    @include matcha-accordion-theme($theme);
+    @include matcha-breadcrumb-theme($theme);
+    @include matcha-image-theme($theme);
+    @include matcha-stepper-theme($theme);
+    @include matcha-toolbar-theme($theme);
+    @include matcha-command-palette-theme($theme);
+    @include matcha-profile-card-theme($theme);
+    @include matcha-flag-theme($theme);
+    @include matcha-emoji-theme($theme);
+}

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@inchurch/matcha-theme",
+  "version": "20.0.3",
+  "description": "Themes for matcha-design-system",
+  "main": "main.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/tokens/_animations-tokens.scss

@@ -0,0 +1,37 @@
+// Easing Curves
+// TODO(jelbourn): all of these need to be revisited
+
+// The default animation curves used by material design.
+$time-transition-minimal: 80;
+$time-transition-short: 200;
+$time-transition-base: 400;
+$time-transition-long: 600;
+$time-transition-xl: 1000;
+$time-delay-short: 50;
+$time-delay-base: 100;
+$time-delay-long: 200;
+$time-duration-short: 2000;
+$time-duration-base: 4000;
+$time-duration-long: 6000;
+
+$matcha-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
+$matcha-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$matcha-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+
+$swift-ease-out-duration: #{$time-transition-base}ms !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: #{$time-transition-short}ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: #{$time-transition-long}ms !default;
+$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: #{$time-transition-minimal}ms !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;

package/tokens/_breakpoints-tokens.scss

@@ -0,0 +1,26 @@
+// Media step breakpoint mixin based on Angular Material lib
+$breakpoints: (
+    xs: 'screen and (max-width: 599px)',
+    sm: 'screen and (min-width: 600px) and (max-width: 1023px)',
+    md: 'screen and (min-width: 1024px) and (max-width: 1439px)',
+    lg: 'screen and (min-width: 1440px) and (max-width: 1919px)',
+    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)',
+    lt-sm: 'screen and (max-width: 599px)',
+    lt-md: 'screen and (max-width: 1023px)',
+    lt-lg: 'screen and (max-width: 1439px)',
+    lt-xl: 'screen and (max-width: 1919px)',
+    gt-xs: 'screen and (min-width: 600px)',
+    gt-sm: 'screen and (min-width: 1024px)',
+    gt-md: 'screen and (min-width: 1440px)',
+    gt-lg: 'screen and (min-width: 1920px)'
+) !default;
+
+// Re-map the breakpoints for the helper classes
+$helper-breakpoints: (
+    initial: null,
+    xs: 'xs',
+    sm: 'gt-xs',
+    md: 'gt-sm',
+    lg: 'gt-md',
+    xl: 'gt-lg'
+);