@mtvh/mtvh-design-system 0.0.2 → 0.0.4

package/README.md

@@ -26,7 +26,7 @@ See more from https://decapcms.org/docs/beta-features/
 ```
 npm install @mtvh/mtvh-design-system
 ```
-
+#### All styles
 To import all styles as a single package you need to add following snippet to your main SCSS file:
 ```
 @import '/node_modules/@mtvh/mtvh-design-system/dist/mtvh.min.css';
@@ -35,5 +35,18 @@ Alternatively, you could include the css inside the footer/head tag depending on
 ```
 <link type="text/css" rel="stylesheet" href="dist/mtvh.min.css">
 ```
+#### Core and selected components
+Our core library includes the design system's base theme, typography, mixins and helper functions.
+Once you imported it, you can take full advantage of our variables and helpers.
+To import core library you need to add following snippet at the start of your main SASS file:
+```
+@import "node_modules/@mtvh/mtvh-design-system/assets/scss/mtvh";
+```
+
 #### Adding fonts and images assets
-The css uses the fonts and icons following the relative path, ie `./` you would need to store the font and images folder relatively to the css.
+The css uses the fonts and icons using a default path as below. You can amend the prefix by customize via the following variable
+```
+$font-path: "./fonts/";
+$asset-icon-path: "./images/icons/";
+```
+* Please note the font files is downloadable from mtvh-design-system git repo NOT npm

package/assets/scss/app.scss

@@ -0,0 +1,38 @@
+@import "mtvh";
+
+// 2. Include any default variable overrides here
+@import "common/colors";
+@import "common/variables-overrides";
+@import "common/variables-custom";
+
+// 8. Add additional custom code here, BS function not used in mtvh moved here, to minimise the css
+
+
+// 8. Add additional custom code here
+@import "common/global";
+@import "common/syntax";
+@import "common/dark";
+@import "components/alerts";
+@import "components/buttons";
+@import "components/callouts";
+@import "components/expressive-code";
+@import "components/code";
+@import "components/comments";
+@import "components/details";
+@import "components/forms";
+@import "components/images";
+@import "components/mermaid";
+@import "components/modals";
+@import "components/search";
+@import "components/section-nav";
+@import "components/tables";
+@import "components/tabs";
+@import "layouts/footer";
+@import "layouts/header";
+@import "layouts/pages";
+@import "layouts/posts";
+@import "layouts/sidebar";
+
+
+// 9. Custom styles
+@import "common/custom";

package/assets/scss/base/_all.scss

@@ -0,0 +1,4 @@
+@import 'global';
+@import 'functions';
+@import 'mixins';
+@import 'print';

package/assets/scss/base/_functions.scss

@@ -0,0 +1,38 @@
+@function rem($value) {
+  @if (unitless($value)) {
+    $value: $value * 1px;
+  }
+
+  @return calc( $value / $mtvh-base-font-size * 1rem);
+}
+
+
+@function str-replace( $string, $search, $replace: '' ) {
+
+  $index: str-index( $string, $search );
+  @if $index {
+    @return str-slice( $string, 1, $index - 1 ) + $replace + str-replace( str-slice( $string, $index + str-length( $search ) ), $search, $replace);
+  }
+
+  @return $string;
+}
+
+@function encode-color($string) {
+  @if type-of($string) == 'color' {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string: unquote("#{$hex}");
+  }
+
+  $string: '%23' + $string;
+  @return $string;
+}
+
+@function get-icon( $icon, $color: #fff ) {
+
+  $icon:        map-get( $icons, $icon );
+  $placeholder: '%%COLOR%%';
+
+  $data-uri: str-replace( url( $data-svg-prefix + $icon ), $placeholder, $color );
+
+  @return str-replace( $data-uri, '#', '%23' );
+}

package/assets/scss/base/_global.scss

@@ -0,0 +1,25 @@
+html {
+  font-size: 100%;
+  line-height: var(--mtvh-line-height);
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 100%;
+  line-height: var(--mtvh-line-height);
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+.mtvh-layout {
+  background-color:  var(--mtvh-grey-01);
+}

package/assets/scss/base/_mixins.scss

@@ -0,0 +1,171 @@
+@mixin animate-default() {
+  -webkit-transition: transform 0.3s ease-out;
+  -moz-transition: transform 0.3s ease-out;
+  -ms-transition: transform 0.3s ease-out;
+  -o-transition: transform 0.3s ease-out;
+  transition: transform 0.3s ease-in;
+}
+
+@mixin hover-animate( $position : 'left', $rotate : '') {
+
+   @if $position == 'right' {
+    &:hover:not(.disabled) {
+      &:after {
+        -webkit-transform: translateX(4px);
+        -moz-transform: translateX(4px);
+        -ms-transform: translateX(4px);
+        -o-transform: translateX(4px);
+        transform: translateX(4px);
+      }
+    }
+  } @else {
+    &:hover:not(.disabled) {
+      &:before{
+        -webkit-transform: translateX(-4px);
+        -moz-transform: translateX(-4px);
+        -ms-transform: translateX(-4px);
+        -o-transform: translateX(-4px);
+        transform: translateX(-4px);
+      }
+    }
+  }
+
+}
+
+@mixin icon-transform($direction) {
+  //default is a right
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  content:' ';
+  opacity: 1;
+  display: inline-block;
+  vertical-align: middle;
+  background-repeat: no-repeat;
+  margin-top: -.125rem;
+  @if $direction == 'right' {
+    margin-left: $button-icon-spacing;
+  }
+  @else {
+    margin-right: $button-icon-spacing;
+  }
+}
+
+// arrow direction: left, right, up, down, Default: right
+// arrow position: left, right
+@mixin mtvh-icon($icon : '', $color :'',  $hover-color :'', $active-color :'', $border-color :'', $position : 'left', $direction :  'right', $width : 20px, $height: 20px, $svg-path : null) {
+
+  @if $border-color != '' {
+    $border-color: $color;
+  }
+  @if $hover-color == '' {
+    $hover-color: $color;
+  }
+  @if $active-color == '' {
+    $active-color: $color;
+  }
+  &:before, &:after {
+    height: $height;
+    width: $width;
+  }
+
+  text-decoration: none;
+  @if $position == 'right' {
+
+    &:after {
+
+
+      @include animate-default;
+      @include icon-transform($direction);
+
+      @if $svg-path  {
+        background-image: url($svg-path);
+      } @else {
+        -webkit-mask: get-icon($icon);
+        mask:  get-icon($icon);
+        background-color: currentColor;
+      }
+    }
+
+    @if $svg-path == '' {
+      &:hover:not(.disabled) {
+        &:after {
+          background-color: currentColor;
+        }
+      }
+      &:focus, &:active {
+
+        &:after {
+          background-color: currentColor;
+        }
+      }
+    }
+  } @else { //position is left
+
+    &:before{ ;
+        @include animate-default;
+        @include icon-transform('left');
+        @if $svg-path  {
+          background-image: url($svg-path);
+        } @else {
+          -webkit-mask: get-icon($icon);
+          mask: get-icon($icon);
+          background-color: currentColor
+        }
+
+      }
+
+    @if $svg-path == '' {
+      &:hover:not(.disabled) {
+        &:before {
+          background-color: currentColor;
+        }
+      }
+
+      &:focus, &:active {
+        &:before {
+          background-color: currentColor;
+        }
+      }
+    }
+  }
+
+  &.base {
+    &:before, &:after {
+      mask-size: auto 9px;
+      mask-repeat: no-repeat;
+      -webkit-mask-size: auto 9px;
+      -webkit-mask-repeat: no-repeat;
+    }
+  }
+}
+
+@mixin icon-size ($width,$height) {
+  &:before, &:after {
+    mask-size: $width $height;
+    width: $width;
+    height: $height;
+    background-size: 100%;
+  }
+}
+
+
+@mixin form-invalid-text() {
+  color: var(--mtvh-red-04);
+  font-size: $font-size-sm;
+  font-weight: bold;
+  padding-left: $mtvh-spacing-spacing-6;
+  position: relative;
+  display: flex;
+  gap: $mtvh-spacing-spacing-3;
+  &:before {
+    content: '';
+    -webkit-mask: get-icon('error',$danger);
+    mask: get-icon('error',$danger);
+    background-color: currentColor;
+    mask-repeat: no-repeat;
+    -webkit-mask-repeat: no-repeat;
+    margin-left: -$mtvh-spacing-spacing-6;
+    padding-right: $icon-size-scale-sm;//$mtvh-spacing-spacing-6;
+    margin-top: $mtvh-spacing-spacing-2;
+  }
+}

package/assets/scss/base/_print.scss

@@ -0,0 +1,55 @@
+/* stylelint-disable declaration-no-important, selector-no-qualifying-type  */
+@media print {
+  *,
+  *::before,
+  *::after {
+    background: transparent !important;
+    color: var(--mtvh-black) !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  a,
+  a:visited {
+    text-decoration: underline;
+  }
+
+  a[href]::after {
+    content: ' (' attr(href) ')';
+  }
+
+  abbr[title]::after {
+    content: ' (' attr(title) ')';
+  }
+
+  a[href^='#']::after,
+  a[href^='javascript:']::after {
+    content: '';
+  }
+
+  pre {
+    white-space: pre-wrap !important;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tr,
+  img {
+    page-break-inside: avoid;
+  }
+
+  p,
+  h2,
+  h3 {
+    orphans: 3;
+    widows: 3;
+  }
+
+  h2,
+  h3 {
+    page-break-after: avoid;
+  }
+}
+/* stylelint-enable declaration-no-important, selector-no-qualifying-type  */

package/assets/scss/common/_custom.scss

@@ -0,0 +1,63 @@
+// Put your custom SCSS  for dork (documentation) code here
+.expressive-code {
+  position: relative;
+  .copy {
+    button {
+      opacity: 1;
+    }
+  }
+}
+.section-nav li a, .page-links a
+{
+  font-weight: unset;
+}
+.section-nav li.active a, #toc a.active
+{
+  font-weight: bold;
+}
+#toc a.active {
+  color: #00385E !important;
+}
+
+.table-icons
+{
+  td {
+    vertical-align: middle;
+    .center {
+      text-align: center;
+    }
+  }
+
+  .expressive-code {
+    margin: 0;
+  }
+}
+
+
+.mtvh-content-block {
+
+  h6,
+  .h6,
+  h5,
+  .h5,
+  h4,
+  .h4,
+  h3,
+  .h3,
+  h2,
+  .h2,
+  h1,
+  .h1 {
+    margin-top: 0px;
+  }
+}
+
+.mx-auto {
+  margin-right: auto !important;
+  margin-left: auto !important
+}
+.stretched-link {
+  &:after {
+    position: unset;
+  }
+}

package/assets/scss/components/_all.scss

@@ -0,0 +1,4 @@
+@import 'button';
+@import 'content-block';
+@import 'form';
+@import 'link';

package/assets/scss/components/_button.scss

@@ -0,0 +1,209 @@
+$mtvh-buttons: (
+  primary: (
+    text-color: var(--mtvh-white),
+    text-color-hover: var(--mtvh-white),
+    text-color-disabled: var(--mtvh-white),
+    text-color-active: var(--mtvh-white),
+    background: var(--mtvh-blue-04),
+    background-hover: var(--mtvh-blue-05),
+    background-focus: var(--mtvh-blue-05),
+    background-active: var(--mtvh-blue-06),
+    background-disabled: var(--mtvh-grey-06),
+    border: transparent,
+    border-hover: transparent,
+    border-active: var(--mtvh-blue-06),
+    border-color-disabled: var(--mtvh-grey-06),
+    outline-color: var(--mtvh-blue-03)
+  ),
+  light: (
+    text-color: var(--mtvh-blue-04),
+    text-color-hover: var(--mtvh-blue-05),
+    text-color-active: var(--mtvh-blue-06),
+    text-color-focus: var(--mtvh-blue-05),
+    text-color-disabled: var(--mtvh-black),
+    background: var(--mtvh-white),
+    background-hover: var(--mtvh-grey-01),
+    background-active: var(--mtvh-grey-02),
+    background-focus:   var(--mtvh-grey-01),
+    background-disabled: var(--mtvh-grey-05),
+    border: transparent,
+    border-active: transparent,
+    border-color-disabled: var(--mtvh-grey-05)
+
+  ),
+  outline-primary: (
+
+    text-color: var(--mtvh-blue-04),
+    text-color-hover: var(--mtvh-blue-05),
+    text-color-active: var(--mtvh-blue-06),
+    text-color-focus: var(--mtvh-blue-05),
+    text-color-disabled: var(--mtvh-grey-06),
+    background: transparent,
+    background-hover: transparent,
+    background-focus:  transparent,
+    background-disabled: transparent,
+    background-active: transparent,
+    border:  var(--mtvh-blue-04),
+    border-hover:  var(--mtvh-blue-05),
+    border-focus:  var(--mtvh-blue-05),
+    border-active:  var(--mtvh-blue-06),
+    border-color-disabled: var(--mtvh-grey-06)
+  ),
+  outline-light: (
+    text-color: var(--mtvh-white),
+    text-color-hover: var(--mtvh-grey-04),
+    text-color-focus: var(--mtvh-grey-04),
+    text-color-active: var(--mtvh-grey-05),
+    text-color-disabled: var(--mtvh-grey-05),
+    background: transparent,
+    background-hover: transparent,
+    background-focus:  transparent,
+    background-disabled: transparent,
+    border: var(--mtvh-white),
+    border-hover: var(--mtvh-grey-04),
+    border-focus: var(--mtvh-grey-04),
+    border-active: var(--mtvh-grey-05),
+    border-color-disabled: var(--mtvh-grey-05)
+  ),
+  purple: (
+    text-color: var(--mtvh-white),
+    text-color-hover: var(--mtvh-white),
+    text-color-focus: var(--mtvh-white),
+    background:  var(--mtvh-purple-04),
+    background-hover: var(--mtvh-purple-05),
+    background-focus: var(--mtvh-purple-05),
+    background-active: var(--mtvh-purple-06),
+    border: transparent,
+    border-hover: transparent,
+    border-radius: 6px
+  ),
+  danger: (
+    text-color: var(--mtvh-white),
+    text-color-hover: var(--mtvh-white),
+    text-color-disabled: var(--mtvh-white),
+    background: var(--mtvh-red-04),
+    background-hover: var(--mtvh-red-05),
+    background-focus: var(--mtvh-red-05),
+    background-active: var(--mtvh-red-06),
+    background-disabled: var(--mtvh-grey-06),
+    border: transparent,
+    border-hover: transparent,
+    border-active: transparent,
+    border-color-disabled: transparent
+  ),
+  outline-danger: (
+    text-color: var(--mtvh-red-04),
+    text-color-hover: var(--mtvh-red-05),
+    text-color-active: var(--mtvh-red-06),
+    text-color-focus: var(--mtvh-red-05),
+    text-color-disabled: var(--mtvh-grey-06),
+    background: var(--mtvh-white),
+    background-hover: var(--mtvh-white),
+    background-focus:  var(--mtvh-white),
+    background-disabled: var(--mtvh-white),
+    border: var(--mtvh-red-04),
+    border-hover: var(--mtvh-red-05),
+    background-active:  var(--mtvh-white),
+    border-focus: var(--mtvh-red-05),
+    border-active: var(--mtvh-red-06),
+    border-color-disabled: var(--mtvh-grey-06)
+  ),
+
+);
+
+.btn, .mtvh-btn {
+
+  font-weight: $btn-font-weight;
+  box-shadow: none;
+
+  &:focus-visible {
+    box-shadow: none;
+    outline: solid var(--mtvh-btn-outline-border) var(--mtvh-btn-outline-color);
+    outline-offset: 0;
+    outline-offset: var(--mtvh-btn-outline-border);
+    text-decoration: none;
+  }
+  &:focus:not(:focus-visible) {
+    outline: 0;
+  }
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.mtvh-btn {
+  min-height: 2.5rem;
+  min-width: var(--mtvh-btn-min-width);
+  border-radius: $btn-border-radius;
+  border: $btn-border-width solid transparent;
+  white-space: normal;
+  font-size: $btn-font-size;
+  line-height: var(--mtvh-btn-line-height);
+  text-decoration: none;
+  -webkit-font-smoothing: antialiased;
+  -webkit-appearance: none;
+  display: inline-block;
+  text-align: center;
+  padding: $btn-padding-y $btn-padding-x;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+}
+
+.mtvh-btn, .btn {
+
+  @each $color, $property-map in $mtvh-buttons {
+
+
+    &-#{$color} {
+
+      color: map-get($property-map, text-color);
+      background-color: map-get($property-map, background);
+      border-color: map-get($property-map, border);
+      border-radius: map-get($property-map, border-radius);
+
+      &:visited {
+        color: map-get($property-map, text-color);
+      }
+
+      &:hover {
+        color: map-get($property-map, text-color-hover);
+        background-color: map-get($property-map, background-hover);
+        border-color: map-get($property-map, border-hover);
+      }
+
+      &:focus {
+        color: map-get($property-map, text-color-focus);
+        background-color: map-get($property-map, background-focus);
+
+        @if map-get($property-map, border-focus) {
+          border-color: map-get($property-map, border-focus);
+        }
+
+      }
+
+      &:active:not(:disabled):not(.disabled) {
+        background-color: map-get($property-map, background-active);
+        @if map-get($property-map, text-color-active) {
+          color: map-get($property-map, text-color-active);
+          border-color: map-get($property-map, border-active);
+        }
+      }
+
+      &:disabled,
+      &.disabled {
+        pointer-events: none;
+        @if map-get($property-map, text-color-disabled) {
+          color: map-get($property-map, text-color-disabled);
+          background-color: map-get($property-map, background-disabled);
+          border-color: map-get($property-map, border-color-disabled);
+        }
+        else {
+          color: var(--mtvh-btn-disabled-color);
+          background-color: var(--mtvh-btn-disabled-bg);
+          border-color: var(--mtvh-btn-disabled-border-color);
+        }
+      }
+    }
+  }
+}
+