matcha-theme 18.0.27 → 18.0.28

package/main.scss

@@ -0,0 +1,135 @@
+// TOKENS
+@import "./tokens/animations";
+@import "./tokens/breakpoints";
+@import "./tokens/color-tokens";
+@import "./tokens/elevation-tokens";
+@import "./tokens/spacing-tokens";
+@import "./tokens/typography-tokens";
+
+// 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/breakpoints"; //media-breakpoint()
+@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/grid"; // display-grid() display-flex()
+@import "./abstracts/order";
+@import "./abstracts/position";
+@import "./abstracts/sizes";
+@import "./abstracts/spacings";
+@import "./abstracts/typography"; // matcha-typography-font-shorthand() matcha-typography-level-to-styles() matcha-reset-typography()
+
+// BASE
+@import "./base/helpers";
+@import "./base/reset"; // base-body-reset-theme()
+@import "./base/typography"; // base-typography-theme()
+
+// COMPONENTS
+@import "./components/matcha-audio-player.scss"; //matcha-audio-player-theme($theme)
+@import "./components/matcha-buttons.scss"; // matcha-button-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-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-table.scss"; // matcha-table-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";
+
+// DEFAULT FONTS
+@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-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-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-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;
+}
+// -------------------------------------------------------------------------------------------------------------------
+// @ 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 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);
+    @include matcha-scrollbox-shadow($theme);
+    @include matcha-scrollbar-theme($theme);
+
+    @include matcha-table-theme($theme);
+
+    @include matcha-button-theme($theme);
+    @include matcha-header-theme($theme);
+    @include matcha-menu-theme($theme);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "matcha-theme",
-    "version": "18.0.27",
-    "description": "styles for matcha-design-system",
+    "version": "18.0.28",
+    "description": "Themes for matcha-design-system",
     "main": "main.scss",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1"

package/tokens/_animations.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.scss

@@ -0,0 +1,38 @@
+// 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: (
+    xs: null,
+    sm: "gt-xs",
+    md: "gt-sm",
+    lg: "gt-md",
+    xl: "gt-lg"
+);
+
+// Map the icon sizes for the helper classes
+$helper-i-sizes: (
+    xs: 12,
+    sm: 16,
+    md: 24,
+    lg: 32,
+    xl: 48
+);
+
+$grid-prefix: "col";
+$grid-length: 12;
+$grid-sizes: (sm 600px, md 1024px, lg 1440px, xl 1920px);