matcha-theme 1.0.1

package/main.scss

@@ -0,0 +1,87 @@
+// 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-icons.scss";
+@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";
+
+// -------------------------------------------------------------------------------------------------------------------
+// @ CORE - Mixins and Includes
+// -------------------------------------------------------------------------------------------------------------------
+@include colors-classes-static($matchaPalettes);
+
+@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 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);
+}

package/package.json

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

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,46 @@
+// 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)',
+    //old size - 980px
+    gt-md: 'screen and (min-width: 1440px)',
+    //old size - 1280px
+    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: (
+    xs 600px,
+    sm 1024px,
+    md 1440px,
+    lg 1920px,
+    xl 2560px
+);