@mtvh/mtvh-design-system 0.0.4 → 0.0.6

package/assets/scss/config/_map-list.scss

@@ -29,7 +29,9 @@ $icons: (
 ,'hamburger' : '<svg width="32" height="22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.811 21.289c-.362 0-.671-.128-.927-.384a1.266 1.266 0 0 1-.384-.929c0-.356.128-.663.384-.918.256-.256.565-.384.927-.384h28.387c.356 0 .662.128.918.384s.384.563.384.92c0 .362-.128.671-.384.927a1.253 1.253 0 0 1-.918.384H1.81Zm0-8.942c-.362 0-.671-.128-.927-.385a1.265 1.265 0 0 1-.384-.928c0-.357.128-.663.384-.919s.565-.384.927-.384h28.387c.356 0 .662.129.918.385s.384.563.384.92c0 .362-.128.671-.384.927a1.253 1.253 0 0 1-.918.384H1.81Zm0-8.943c-.362 0-.671-.128-.927-.384A1.266 1.266 0 0 1 .5 2.092c0-.357.128-.663.384-.92C1.14.918 1.449.79 1.81.79h28.387c.356 0 .662.128.918.384.256.257.384.563.384.92 0 .362-.128.672-.384.928a1.253 1.253 0 0 1-.918.383H1.81Z" fill="#000"/></svg>'
 ,'expand' : '<svg width="29" height="29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M19.448 6.664c-.288.01-.506-.093-.686-.426-.18-.332-.218-.628.04-.84.259-.212 2.023-.411 2.667-.5.644-.09 1.737-.31 2.304-.467.567-.157 1.021-.285 1.241-.045.22.24.38.507.264 1.235-.115.727-.783 4.466-.814 4.781-.031.315-.587.315-.812.166-.225-.15-.581-.207-.501-.615.08-.408.385-2.935.385-2.935s-.32.42-1.056 1.17c-1.059 1.08-1.406 1.476-2.3 2.301-.895.826-2.363 2.081-2.805 2.386-.443.306-.886.619-1.029.103-.143-.515.243-1.14.84-1.749.597-.608 1.597-1.524 2.7-2.613 1.266-1.248 2.372-2.375 2.372-2.375s-.883.143-1.5.256a8.543 8.543 0 0 1-1.31.159v.008ZM10.067 23.411c.289-.01.507.094.687.426.18.332.218.629-.04.84-.26.212-2.023.412-2.667.5-.644.09-1.738.311-2.305.468-.566.157-1.02.284-1.24.044-.22-.24-.38-.507-.264-1.234.115-.727.783-4.466.814-4.782.031-.315.587-.314.811-.165.225.149.582.206.502.614-.08.408-.385 2.936-.385 2.936s.32-.421 1.055-1.17c1.06-1.08 1.407-1.477 2.301-2.302.894-.826 2.362-2.08 2.805-2.386.443-.305.885-.619 1.028-.103.143.516-.243 1.141-.84 1.75-.596.607-1.596 1.524-2.699 2.613-1.267 1.248-2.372 2.374-2.372 2.374s.882-.143 1.499-.256a8.534 8.534 0 0 1 1.31-.159v-.008Z" fill="#000"/></svg>'
 ,'collapse' : '<svg width="29" height="29" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.911 8.78c.288-.011.507.093.686.425.18.333.218.629-.04.84-.258.212-2.022.412-2.666.501-.644.09-1.738.31-2.305.467-.567.157-1.02.284-1.24.044-.22-.24-.38-.507-.265-1.234.116-.727.784-4.466.815-4.782.03-.315.586-.314.811-.165.225.149.582.206.502.614-.08.408-.386 2.936-.386 2.936s.32-.42 1.056-1.17c1.06-1.08 1.406-1.476 2.3-2.302.895-.825 2.363-2.08 2.806-2.386.442-.305.885-.618 1.028-.103.143.516-.243 1.141-.84 1.75-.596.608-1.597 1.524-2.7 2.613-1.266 1.248-2.371 2.374-2.371 2.374s.882-.143 1.499-.256a8.542 8.542 0 0 1 1.31-.158v-.009ZM5.366 21.033c-.288.01-.507-.094-.686-.426-.18-.333-.218-.629.04-.84.259-.212 2.023-.412 2.667-.501.644-.09 1.737-.31 2.304-.467.567-.157 1.021-.284 1.24-.044.22.24.38.507.265 1.234-.115.727-.783 4.466-.814 4.782-.031.315-.587.314-.812.165-.225-.149-.581-.206-.501-.614.08-.408.385-2.936.385-2.936s-.32.42-1.056 1.17c-1.059 1.08-1.406 1.476-2.3 2.302-.895.825-2.363 2.08-2.805 2.386-.443.305-.886.618-1.029.103-.143-.516.243-1.141.84-1.75.597-.608 1.597-1.524 2.7-2.613 1.266-1.248 2.372-2.374 2.372-2.374s-.883.143-1.5.256a8.544 8.544 0 0 1-1.31.158v.009Z" fill="#000"/></svg>'
-
+,'border-tick' : '<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27"><path d="M22.174 11.832c0-4.67-5.278-9.7-10.91-8.623-13.02 2.156-15.483 22.634-2.11 22.634 13.372 0 13.02-9.34 13.02-14.011Z"/><path fill="#000" d="m16.618 9.722.552-.45.004-.005c.268-.223.602-.338.931-.338.348 0 .695.128.958.402.48.492.49 1.36-.067 1.813l-.462.377c-1.347 1.096-2.7 2.197-3.867 3.47-.126.16-.248.325-.37.488-.254.34-.508.68-.797.988-.16.171-.36.346-.574.453a3.51 3.51 0 0 1-.45.158c-.334.099-.855.009-1.131-.21-.272-.209-.357-.303-.557-.59a2.39 2.39 0 0 1-.143-.221 36.72 36.72 0 0 1-.262-.465c-.156-.28-.312-.559-.481-.831-.294-.479-.615-.94-.944-1.402-.192-.27-.196-.693-.098-.992.102-.317.334-.586.641-.744.312-.163.69-.197 1.033-.094.356.107.57.329.775.615.36.51.713 1.018 1.033 1.548.165-.2.339-.398.512-.59.437-.487.905-.932 1.39-1.373.768-.695 1.571-1.351 2.374-2.007Z"/><path fill="#000" fill-rule="evenodd" d="M11.991 1.139a9.882 9.882 0 0 1 1.661-.27h.005c.209-.017.418-.025.628-.025.347 0 .694.021 1.046.051a8.951 8.951 0 0 1 3.652 1.12c.125.035.25.086.37.15.114.059.23.116.348.174.404.199.812.4 1.175.656.325.23.641.47.953.718.65.509 1.287 1.048 1.875 1.625a8.03 8.03 0 0 1 1.647 2.34c.303.658.566 1.338.726 2.039.17.736.25 1.48.285 2.232a6.09 6.09 0 0 1-.027.787l-.017.235c-.018.3-.054.599-.094.898-.191 1.429-.574 2.831-1.202 4.14-.343.71-.708 1.394-1.114 2.07-.387.64-.864 1.223-1.358 1.787a15.008 15.008 0 0 1-1.62 1.582c-.268.225-.564.427-.857.628l-.057.04c-.325.222-.659.448-1.01.632-.758.39-1.533.71-2.348.97-.33.108-.668.18-1.01.24-.637.112-1.297.193-1.942.167-1.457-.06-2.94-.26-4.298-.791a18.953 18.953 0 0 1-2.173-.983c-.597-.325-1.198-.663-1.733-1.078-.614-.48-1.202-.958-1.75-1.501a11.185 11.185 0 0 1-1.322-1.62c-.37-.54-.749-1.096-1.02-1.686-.32-.71-.601-1.424-.829-2.168C.372 15.614.296 14.9.256 14.19a6.763 6.763 0 0 1 0-.996c.08-.787.205-1.557.379-2.33.142-.642.423-1.258.708-1.848.316-.659.668-1.296 1.122-1.873.481-.612.993-1.232 1.581-1.754a24.366 24.366 0 0 1 1.737-1.394A16.496 16.496 0 0 1 7.76 2.777c.615-.325 1.243-.642 1.902-.886a24.128 24.128 0 0 1 2.33-.752Zm5.081 2.8c-.49-.183-.975-.32-1.482-.431v.004a9.936 9.936 0 0 0-1.817-.09c-.86.12-1.688.351-2.512.612-.628.235-1.247.483-1.835.795a28.1 28.1 0 0 0-1.884 1.095c-.499.36-.975.731-1.434 1.137-.4.351-.761.732-1.118 1.12a13.11 13.11 0 0 0-.628.843c-.184.274-.344.555-.507.84l-.026.045a7.631 7.631 0 0 0-.437 1.035c-.13.424-.24.838-.339 1.27l-.01.06a7.543 7.543 0 0 0-.119 1.014c-.009.415-.004.816.018 1.231.102.77.32 1.493.583 2.22l.034.075c.171.377.341.752.558 1.1.232.377.468.745.717 1.108.237.304.473.608.744.881.32.32.646.625.984.924A19.68 19.68 0 0 0 8.1 21.883c.49.307 1.025.551 1.554.793l.071.032.056.022c.382.151.77.304 1.169.415.4.107.797.205 1.202.29.78.107 1.564.167 2.352.12a10.8 10.8 0 0 0 1.875-.427c.311-.125.623-.249.922-.402.365-.189.717-.385 1.068-.6l-.102.074-.102.072c.476-.33.957-.667 1.38-1.06.387-.364.753-.736 1.104-1.125.352-.432.695-.868.98-1.343.285-.474.552-.953.81-1.44.25-.535.468-1.083.66-1.643.178-.526.307-1.06.414-1.6.12-.88.192-1.752.156-2.638a7.244 7.244 0 0 0-.138-.872c-.094-.41-.205-.804-.339-1.202a9.672 9.672 0 0 0-.863-1.62c-.606-.745-1.368-1.377-2.116-1.989a9.851 9.851 0 0 0-.77-.573 9.041 9.041 0 0 0-.869-.5 1.255 1.255 0 0 1-.552-.193 7.848 7.848 0 0 0-.949-.534Z" clip-rule="evenodd"/></svg>'
+,'border-warning-sign' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 27 27"><path d="M20.137 7.841c-3.409-4.18-5.032-5.916-7.173-5.568-.795 0-2.784 1.74-3.855 4.292-1.07 2.553-3.747 7.773-5.032 11.95-1.285 4.176.214 5.336 1.285 5.336 1.07 0 6.317.464 9.743 0s10.6-1.624 11.135-3.944c.675-2.927-2.034-7.077-6.103-12.066Z"/><path fill="#000" d="M14.045 19.196c-.428-.49-.7-.607-1.128-.706-.811-.185-1.54.275-1.806 1.02a1.946 1.946 0 0 0-.11.576c-.012.623.278 1.269.69 1.686a1.418 1.418 0 0 0 1.776.21c.534-.34 1.06-1.045.836-1.69-.015-.04-.016-.12-.017-.221-.003-.243-.008-.608-.204-.833l-.037-.042ZM11.933 16.77c.4.549 1.083.491 1.477-.024.695-.912.637-2.314.587-3.524-.01-.239-.02-.47-.023-.688-.007-.432-.001-.866.004-1.3.014-1.06.027-2.121-.143-3.165-.185-1.113-1.975-.984-2.205.034-.27 1.191-.265 2.447-.261 3.678 0 .265.002.529 0 .79-.002.234-.01.48-.018.733-.041 1.192-.087 2.547.582 3.459v.006Z"/><path fill="#000" fill-rule="evenodd" d="M17.115 4.206c2.436 3.336 4.647 6.914 6.625 10.562 1.26 2.325 4.732 10.183.702 10.827-5.246.838-10.746.56-16.068.293h-.002c-.471-.024-.941-.048-1.409-.07a35.16 35.16 0 0 0-1.046-.029c-1.558-.027-3.378-.059-4.629-.842-1.83-1.147-1.013-4.151-.455-5.79 1.117-3.273 2.707-6.133 4.404-9.106.269-.47.62-1.009.971-1.55.334-.513.67-1.027.936-1.486l-.009-.038c-.05-.213-.107-.453.05-.703C8.39 4.335 10.128 1.542 12.43.925c1.935-.52 3.449 1.573 4.49 3.013l.194.268Zm2.488 19.162c1.957-.362 4.127-.874 4.403-1.159.252-.26-.157-1.089-.585-1.956-.307-.62-.623-1.26-.713-1.726-.141-.727-1.2-2.446-2.13-3.958-.498-.81-.96-1.562-1.225-2.068-.386-.74-1.222-1.856-2.063-2.98-.81-1.08-1.624-2.168-2.049-2.934-.865-1.562-1.947-2.678-2.488-2.79-.541-.111-2.606 2.537-3.363 3.988-.132.252-.29.547-.47.886-.859 1.61-2.23 4.183-3.75 7.594-.207.454-.443.939-.683 1.432-.82 1.687-1.689 3.476-1.689 4.512 0 .483.098.82.32 1.055.262.037.573.059.933.083l.387.028c4.892.368 10.154.375 15.165-.007Z" clip-rule="evenodd"/></svg>'
+,'border-info' : '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 27"><path d="M9.724 2.08c-4.73 0-9.822 5.362-8.731 11.082 2.183 13.226 22.919 15.729 22.919 2.145S14.453 2.08 9.724 2.08Z"/><path fill="#000" d="M15.89 7.284c-.304-.575-.542-.75-.936-.945-.747-.365-1.563-.084-1.99.58-.103.166-.19.34-.24.536-.154.604-.02 1.298.285 1.798.35.577 1.052.835 1.682.612.598-.209 1.27-.775 1.2-1.455a.901.901 0 0 1 .034-.22c.053-.237.132-.592-.007-.856l-.027-.05ZM13.431 11.653c.469-.516 1.281-.573 1.758-.024v.007c.796.911.742 2.266.693 3.458-.01.254-.02.5-.021.733-.003.261-.002.525 0 .79.004 1.231.01 2.487-.311 3.679-.274 1.017-2.405 1.146-2.624.034-.203-1.044-.187-2.106-.17-3.166.006-.434.012-.868.004-1.3-.004-.218-.016-.45-.027-.687-.06-1.21-.13-2.612.698-3.524Z"/><path fill="#000" fill-rule="evenodd" d="M12.992 1.139a9.882 9.882 0 0 1 1.66-.27h.005c.21-.017.419-.025.628-.025.348 0 .695.021 1.047.051a8.95 8.95 0 0 1 3.652 1.12c.124.035.249.086.37.15.114.059.23.116.347.174.404.199.813.4 1.175.656.325.23.642.47.953.718.65.509 1.287 1.048 1.875 1.625a8.03 8.03 0 0 1 1.648 2.34c.303.658.566 1.338.726 2.039.17.736.25 1.48.285 2.232.014.26-.007.525-.027.787l-.018.235c-.018.3-.053.599-.093.898-.192 1.429-.575 2.831-1.203 4.14-.342.71-.708 1.394-1.113 2.07-.387.64-.864 1.223-1.358 1.787a15.018 15.018 0 0 1-1.621 1.582c-.268.225-.563.427-.856.628l-.057.04c-.325.222-.66.448-1.011.632-.757.39-1.532.71-2.347.97-.33.108-.668.18-1.011.24-.637.112-1.296.193-1.942.167-1.456-.06-2.939-.26-4.297-.791a18.956 18.956 0 0 1-2.174-.983c-.596-.325-1.197-.663-1.732-1.078-.614-.48-1.202-.958-1.75-1.501a11.185 11.185 0 0 1-1.323-1.62c-.37-.54-.748-1.096-1.02-1.686-.32-.71-.6-1.424-.828-2.168-.21-.684-.285-1.398-.325-2.108a6.764 6.764 0 0 1 0-.996c.08-.787.205-1.557.379-2.33.142-.642.423-1.258.708-1.848.316-.659.668-1.296 1.122-1.873.48-.612.993-1.232 1.58-1.754a24.366 24.366 0 0 1 1.738-1.394A16.496 16.496 0 0 1 8.76 2.777c.615-.325 1.243-.642 1.902-.886a24.133 24.133 0 0 1 2.329-.752Zm5.081 2.8a10.65 10.65 0 0 0-1.483-.431v.004a9.936 9.936 0 0 0-1.817-.09c-.86.12-1.688.351-2.512.612-.628.235-1.247.483-1.834.795-.646.342-1.27.706-1.884 1.095-.499.36-.976.731-1.434 1.137-.401.351-.762.732-1.118 1.12a13.11 13.11 0 0 0-.628.843c-.184.274-.345.555-.508.84l-.026.045a7.631 7.631 0 0 0-.437 1.035c-.129.424-.24.838-.338 1.27l-.01.06a7.543 7.543 0 0 0-.12 1.014c-.008.415-.004.816.018 1.231.103.77.321 1.493.584 2.22l.034.075c.17.377.341.752.558 1.1.232.377.468.745.717 1.108.236.304.472.608.744.881.32.32.646.625.984.924a19.68 19.68 0 0 0 1.536 1.056c.49.307 1.026.551 1.555.793l.07.032.056.022c.383.151.77.304 1.17.415.4.107.797.205 1.202.29.78.107 1.563.167 2.351.12a10.8 10.8 0 0 0 1.875-.427c.312-.125.624-.249.922-.402.365-.189.717-.385 1.069-.6l-.102.074-.103.072c.477-.33.958-.667 1.38-1.06.388-.364.753-.736 1.105-1.125.352-.432.695-.868.98-1.343.285-.474.552-.953.81-1.44.25-.535.468-1.083.66-1.643.178-.526.307-1.06.414-1.6.12-.88.191-1.752.156-2.638a7.264 7.264 0 0 0-.139-.872c-.093-.41-.204-.804-.338-1.202a9.672 9.672 0 0 0-.864-1.62c-.606-.745-1.367-1.377-2.115-1.989a9.848 9.848 0 0 0-.77-.573 9.05 9.05 0 0 0-.87-.5 1.255 1.255 0 0 1-.551-.193 7.854 7.854 0 0 0-.949-.534Z" clip-rule="evenodd"/></svg>'
 );
 
 /**
@@ -63,11 +65,14 @@ $mtvh-icons : (
   'sign-in':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'expand':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'collapse':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-tick':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-warning-sign':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
+  'border-info':( width: $icon-size-scale-md, height: $icon-size-scale-md ),
   'hamburger' :( width: 32px, height: 22px ),
-  'border-info' : ( width: $icon-size-scale-md, height: $icon-size-scale-md , svg-path: '#{$asset-icon-path}border-info.svg'  ),
-  'border-tick': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-tick.svg' ),
-  'border-cross': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-cross.svg' ),
-  'border-warning-sign': ( width: $icon-size-scale-md, height: $icon-size-scale-md, svg-path: '#{$asset-icon-path}border-warning-sign.svg' ),
+
+  'border-tick-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-tick-fill.svg'),
+  'border-warning-sign-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-warning-sign-fill.svg'),
+  'border-info-fill':( width: $icon-size-scale-md, height: $icon-size-scale-md ,svg-path: '#{$asset-icon-path}border-info-fill.svg'),
 
   'credit-card': ( width: $icon-size-scale-xl, height: $icon-size-scale-xl,svg-path: '#{$asset-icon-path}credit-card.svg'),
   'bank-notes': ( width: $icon-size-scale-xl, height: $icon-size-scale-xl, svg-path: '#{$asset-icon-path}bank-notes.svg' ),

package/assets/scss/config/_palette.scss

@@ -2,7 +2,7 @@
 
   --mtvh-white: #fff;
   --mtvh-black: #000;
-
+  --mtvh-transparent: transparent;
   --mtvh-grey-01: #F7F7F7;
   --mtvh-grey-02: #EAE9E9;
   --mtvh-grey-03: #DADADA;

package/assets/scss/config/_theme.scss

@@ -1,8 +1,6 @@
 :root {
 
-  /* Borders */
   --mtvh-font: 'Paralucent', sans-serif;
-
   --mtvh-link-color:  var(--mtvh-blue-04);
 
   --mtvh-border-color: var(--mtvh-grey-06);
@@ -10,7 +8,7 @@
   --mtvh-btn-disabled-border-color: var(--mtvh-grey-06);
   --mtvh-btn-disabled-color: var(--mtvh-white);
   --mtvh-btn-border-radius: 3rem;
-
+  --mtvh-link-border-radius: 0.25rem;
   --mtvh-btn-line-height: 1.5;
   --mtvh-btn-font-weight: bold;
   --mtvh-btn-outline-color: var(--mtvh-blue-03);
@@ -20,4 +18,30 @@
   /* Shadows */
   --mtvh-box-shadow:  0px 4px 8px 0px rgba(0, 0, 0, 0.25);
   --mtvh-btn-focus-box-shadow: 0;
+
+  /* Banner */
+  --mtvh-banner-danger-bg: var(--mtvh-red-02);
+  --mtvh-banner-success-bg: var(--mtvh-green-02);
+  --mtvh-banner-success-bg-subtle: var(--mtvh-green-01);
+  --mtvh-banner-warning-bg: var(--mtvh-yellow-02);
+  --mtvh-banner-emergency-bg: var(--mtvh-red-05);
+  --mtvh-banner-dark-bg: var(--mtvh-black);
+  --mtvh-banner-white-bg: var(--mtvh-white);
+  --mtvh-banner-grey-bg: var(--mtvh-grey);
+
+  /* MTVH close button */
+  --mtvh-btn-close-yellow-01-hover-bg: var(--mtvh-yellow-02);
+  --mtvh-btn-close-green-01-hover-bg: var(--mtvh-green-02);
+  --mtvh-btn-close-red-01-hover-bg: var(--mtvh-red-02);
+  --mtvh-btn-close-white-hover-bg: var(--mtvh-grey-02);
+  --mtvh-btn-close-grey-hover-bg: var(--mtvh-grey-02);
+
+  --mtvh-btn-close-danger-hover-bg: var(--mtvh-red-03);
+  --mtvh-btn-close-success-hover-bg: var(--mtvh-green-03);
+  --mtvh-btn-close-success-hover-bg-suble: var(--mtvh-green-02);
+  --mtvh-btn-close-warning-hover-bg: var(--mtvh-yellow-03);
+
+  --mtvh-primary-outline-color: var(--mtvh-blue-03);
+  --mtvh-dark-outline-color: var(--mtvh-black);
 }
+

package/assets/scss/config/_variables.scss

@@ -1,8 +1,10 @@
-// Font
 $prefix: mtvh-;
 $enable-important-utilities: true !default;
 $data-svg-prefix: 'data:image/svg+xml;utf-8,';
+$font-path: "./fonts/" !default;
+$asset-icon-path: "./images/icons/" !default;
 
+// Font
 $font-size-base: 1rem;
 $font-size-xs: $font-size-base;
 $font-size-sm: $font-size-base * 1.125;
@@ -40,8 +42,6 @@ $mtvh-font-weight-semibold: 600 !default;
 $mtvh-font-weight-bold: 700 !default;
 $mtvh-font-weight-bolder: bolder !default;
 
-
-
 //button
 $input-btn-font-family:$font-family-sans-serif;
 $btn-border-radius: 3rem;
@@ -58,21 +58,39 @@ $link-icon-spacing: 0.5rem;
 
 $border-width-sm: 0.15rem;
 $border-width-md: 0.19rem;
+$line-height-md: 1.3;
 
-$mtvh-spacing-spacing-1: 0.125rem;
-$mtvh-spacing-spacing-2: 0.25rem;
-$mtvh-spacing-spacing-3: 0.5rem;
-$mtvh-spacing-spacing-4: 0.75rem;
-$mtvh-spacing-spacing-5: 1rem;
-$mtvh-spacing-spacing-6: 1.5rem;
-$mtvh-spacing-spacing-7: 2rem;
-$mtvh-spacing-spacing-8: 2.5rem;
+$mtvh-spacing-1: 0.125rem;
+$mtvh-spacing-2: 0.25rem;
+$mtvh-spacing-3: 0.5rem;
+$mtvh-spacing-4: 0.75rem;
+$mtvh-spacing-5: 1rem;
+$mtvh-spacing-6: 1.5rem;
+$mtvh-spacing-7: 2rem;
+$mtvh-spacing-8: 2.5rem;
+$mtvh-spacing-9: 3rem;
+$mtvh-spacing-10: 3.5rem;
+$mtvh-spacing-11: 3.75rem;
+// custom added bs spacing value
+
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: $mtvh-spacing-8
+);
 
 $icon-size-scale-xs     : 16px !default;
 $icon-size-scale-sm     : 20px !default;
 $icon-size-scale-md     : 28px !default;
 $icon-size-scale-lg     : 42px !default;
 $icon-size-scale-xl     : 56px !default;
+$breadcrumb-item-padding-x: $mtvh-spacing-4;
+$breadcrumb-font-size: $font-size-xs;
 
 $mtvh-icon-sizes: (
   "xs"                 : $icon-size-scale-xs,
@@ -82,42 +100,119 @@ $mtvh-icon-sizes: (
   "xl"                 : $icon-size-scale-xl
 ) !default;
 
+
 $success:       #23870B;
 $info:          #895ED0;
-$warning:       #D8B000; //--mtvh-purple-04
+$warning:       #F8D643; //--mtvh-purple-04
 $danger:        #DD080D;
 $primary:       #0072BF;
+$dark:          #000000;
 $btn-color: $primary;
 
-
+/* breadcrumb */
+$breadcrumb-margin-bottom: $mtvh-spacing-6;
+$breadcrumb-border-radius: none;
 /* form  */
+$form-group-margin-top: 4rem;
 $form-label-font-size : $font-size-md;
 $form-label-font-weight: 700;
 $form-label-color: #000000;
-$form-label-margin-bottom: $mtvh-spacing-spacing-3;
+$form-text-font-size: $font-size-sm;
+$form-label-margin-bottom: $mtvh-spacing-3;
 $form-select-focus-border-color: var( --mtvh-grey-06);
 $form-feedback-font-size: $font-size-sm;
 $form-feedback-invalid-color: $danger;
 $form-feedback-icon-invalid: '';
-$form-feedback-margin-top: $mtvh-spacing-spacing-4;
+$form-feedback-margin-top: $mtvh-spacing-4;
 $input-line-height: 1.5;
 $input-font-size: $font-size-sm;
-$input-padding-y: $mtvh-spacing-spacing-4;
-$input-padding-x: $mtvh-spacing-spacing-5;
+$input-padding-y: $mtvh-spacing-4;
+$input-padding-x: $mtvh-spacing-5;
 $input-focus-color: var(--mtvh-blue-05);
 $input-focus-border-color: var( --mtvh-grey-06);
 $input-border-color: var( --mtvh-grey-06);
 $input-border-radius: 0.25rem;
 $input-color: $body-color;
 $input-placeholder-color: var( --mtvh-grey-06);
-
-$line-height-md: 1.3;
-$container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px
+$input-width-size-xxs : 64px;
+$input-width-size-xs : 80px;
+$input-width-size-sm : 96px;
+$input-width-size-md : 160px;
+$input-width-size-lg : 336px;
+$input-width-size-xl : 451px;
+
+/* form check */
+$form-check-bg-color: var(--mtvh-grey-01);
+$form-check-hover-bg-color: var(--mtvh-grey-02);
+$form-check-input-width: 2em;
+$form-check-input-height: 2em;
+$form-check-margin-bottom: $mtvh-spacing-5;
+$form-check-input-checked-color: var(--mtvh-white);
+$form-check-input-checked-color: #fff;
+$form-check-padding-start: $form-check-input-width + 1em;
+$form-check-input-checked-bg-color:       var(--mtvh-purple-04);
+$form-check-input-hover-bg-color:         var(--mtvh-purple-05);
+$form-check-input-checked-border-color:   var(--mtvh-purple-04);
+$form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='m6.813 13.492 9.9-9.848c.274-.275.587-.406.937-.393.35.012.663.156.938.43.274.275.412.587.412.937 0 .35-.137.661-.413.936l-10.8 10.784a1.313 1.313 0 0 1-1.912 0l-4.463-4.456c-.274-.274-.412-.587-.412-.936 0-.35.137-.662.413-.936.274-.275.587-.412.937-.412.35 0 .663.137.938.412l3.525 3.482Z'  fill='#{$form-check-input-checked-color}'/></svg>");
+$form-check-radio-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
+$form-check-input-focus-box-shadow: "";
+$form-check-input-border: 1px solid var(--mtvh-grey-06);
+$form-check-wrapper-radio-invalid-border:  1px solid $danger;
+
+/* list group */
+$list-group-item-padding-x: 0;
+$list-group-bg: inherit;
+$list-group-item-padding-y: $mtvh-spacing-5;
+$list-group-border-radius: 0;
+
+/* button close */
+$btn-close-padding-y: 5px;
+$btn-close-padding-x: 5px;
+$btn-close-opacity: 1;
+$btn-close-focus-shadow: unset;
+$btn-close-bg: url("data:image/svg+xml,%3Csvg width='20' height='20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.992 11.816 4.18 17.627c-.26.26-.555.384-.886.372-.33-.012-.626-.147-.886-.407a1.24 1.24 0 0 1 0-1.807l5.776-5.777-5.811-5.811A1.179 1.179 0 0 1 2 3.293c.012-.342.147-.643.407-.903a1.24 1.24 0 0 1 1.807 0L9.992 8.2l5.811-5.811a1.24 1.24 0 0 1 1.807 0 1.24 1.24 0 0 1 0 1.807L11.8 10.008l5.811 5.812c.26.26.39.555.39.886 0 .33-.13.626-.39.886a1.24 1.24 0 0 1-1.807 0l-5.811-5.776Z' fill='%23000000'/%3E%3C/svg%3E");
+$btn-close-width: 1.25rem;
+$btn-close-height: 1.25rem;
+$btn-close-circle-width: 1.25rem;
+$btn-close-circle-height: 1.25rem;
+$btn-close-focus-opacity: 1;
+$btn-close-hover-opacity: 1;
+
+/* stepper */
+$stepper-bg-color: var(--mtvh-grey-06);
+$stepper-sm-font-color: var(--mtvh-purple-04);
+$stepper-active-bg-color: var(--mtvh-purple-04);
+$stepper-disabled-bg-color: var(--mtvh-grey-03);
+$stepper-disabled-font-color: var(--mtvh-black);
+$stepper-font-size: $font-size-xs;
+$stepper-font-color: var(--mtvh-white);
+$stepper-item-padding-x: $mtvh-spacing-3;
+$stepper-item-padding-y: $mtvh-spacing-2;
+$stepper-breakpoint: "lg";
+
+$alert-border-radius: 0;
+
+$success-bg-subtle:       tint-color($success, 80%);
+$info-bg-subtle:          tint-color($info, 80%);
+$warning-bg-subtle:       tint-color($warning, 80%);
+$danger-bg-subtle:        tint-color($danger, 80%);
+$light-bg-subtle:         var(--mtvh-red-02);
+$dark-bg-subtle:         var(--mtvh-red-02);
+
+$banner-theme-colors: (
+  "success":    var(--mtvh-green-02),
+  "warning":    var(--mtvh-yellow-02),
+  "danger":     var(--mtvh-red-02),
+  "emergency":        var(--mtvh-red-02),
+  "dark":             $dark,
+  "white":            var(--mtvh-white),
+  "light":            var(--mtvh-grey-01)
 );
 
-$font-path: "./fonts/" !default;
-$asset-icon-path: "./images/icons/" !default;
+$content-block-theme-colors: (
+  "yellow-01": var(--mtvh-yellow-01),
+  "red-01": var(--mtvh-red-01),
+  "green-01": var(--mtvh-green-01),
+  "grey-01": var(--mtvh-green-01),
+  "white": var(--mtvh-white),
+)

package/assets/scss/core/typography/_typography.scss

@@ -1,3 +1,6 @@
+body {
+  @include font-size($font-size-sm);
+}
 h1, h2, h3, h4, h5, h6, dt,
 .mtvh-h1,
 .mtvh-h2,
@@ -14,6 +17,12 @@ h1, h2, h3, h4, h5, h6, dt,
 h1, .mtvh-h1 {
   @extend %h1;
 }
+.mtvh-title-h1 {
+  @extend %h1;
+  @extend %parent-title-h1;
+
+}
+
 h2, .mtvh-h2 {
   @extend %h2;
 }
@@ -34,6 +43,12 @@ p {
   display: block;
 }
 
+%parent-title-h1 {
+  @include media-breakpoint-up('md') {
+    font-size: 3.25rem;
+  }
+}
+
 %h2 {
   margin-bottom: 1rem;
   font-size: 2rem;
@@ -58,6 +73,7 @@ p {
 %p  {
   margin-bottom: 1rem;
   display: block;
+  font-size: $font-size-sm;
 }
 
 .mtvh-intro {
@@ -74,6 +90,12 @@ p {
 
 a {
   font-weight: bold;
+  outline-color:  var(--mtvh-btn-outline-color);
+
+  &:focus-visible {
+    border-radius: var(--mtvh-link-border-radius);
+    outline: var(--mtvh-btn-outline-border) solid;
+  }
 }
 
 ul,

package/assets/scss/forms/_form-check.scss

@@ -0,0 +1,78 @@
+//
+// Check/radio
+//
+
+.form-check {
+
+  position: relative;
+
+  label, .form-check-input {
+    &:hover {
+      cursor: pointer;
+
+      .form-check-input {
+        cursor: pointer;
+      }
+    }
+  }
+
+  &:has([type="checkbox"]) {
+
+  }
+  &:has([type="radio"]) {
+
+
+    &:focus {
+
+    }
+
+    label {
+      &:before {
+        content: "";
+        position: absolute;
+        left: -30px;
+        top: 0;
+        width: 120%;
+        height: 120%;
+      }
+    }
+
+  }
+
+  label {
+    span {
+      display: inline-block;
+    }
+  }
+}
+
+.form-check-input {
+
+  margin-right: $mtvh-spacing-3;
+
+  &[type="checkbox"] {
+    background-size: 50%;
+  }
+
+  &:hover {
+
+    &[type="checkbox"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
+      }
+
+    }
+
+    &[type="radio"] {
+      @if $enable-gradients {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
+      } @else {
+        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
+      }
+      background-color: $form-check-input-hover-bg-color;
+    }
+  }
+
+}

package/assets/scss/forms/_form-control.scss

@@ -0,0 +1,40 @@
+.form-control  {
+  height: auto;
+  &:focus {
+    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);
+    color: $input-color;
+  }
+
+  &.is-invalid {
+    &:focus {
+      border-color: $input-border-color;
+      box-shadow: none;
+    }
+    background-color: var(--mtvh-red-01);
+    background-image: none;
+  }
+
+  span[ref|="charcount"], .text-muted {
+    color : var(--mtvh-grey-06) !important;
+  }
+}
+
+
+textarea {
+  &.form-control {
+    max-height: 496px;
+    @include media-breakpoint-up(md) {
+      max-height: 608px;
+    }
+  }
+}
+
+select {
+  &.form-control {
+    height: auto;
+  }
+}
+

package/assets/scss/forms/_form-date-input.scss

@@ -0,0 +1,14 @@
+.form-date-wrapper {
+  @include textfield-no-arrow;
+  display: flex;
+  gap: 1rem;
+}
+
+.form-date-input {
+  width: $input-width-size-xxs;
+
+  &--large {
+    width: $input-width-size-xs;
+
+  }
+}

package/assets/scss/forms/_formio.scss

@@ -0,0 +1,36 @@
+.formio-component {
+
+    margin-bottom: $mtvh-spacing-9;
+
+    &.formio-hidden{
+      margin-bottom:0;
+    }
+
+    &.formio-component-button:has(> button[type="submit"]),&.formio-component-form,&.formio-component-fieldset,&.formio-component-columns,&.formio-component-mtvhLogicSet{
+      margin-bottom:0;
+    }
+
+    &.has-message.has-error {
+      .text-danger {
+        color: var(--mtvh-red-04) !important;
+      }
+    }
+
+    //Remove padding from last child
+    div.formio-component-form{
+      & .formio-component:last-child {
+        margin-bottom:0!important;
+        border: 1px red solid;
+      }
+
+      div[ref="element"] {
+        .form-text.text-right, .form-text.pull-right {
+          float: none;
+          margin-top: 12px;
+          margin-bottom: 0;
+          text-align: left !important;
+        }
+      }
+    }
+
+}

package/assets/scss/forms/_global.scss

@@ -0,0 +1,10 @@
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

package/assets/scss/forms/_labels.scss

@@ -0,0 +1,4 @@
+.col-form-label {
+  font-size: $form-label-font-size;
+  font-weight: $form-label-font-weight;
+}

package/assets/scss/forms/_validation.scss

@@ -0,0 +1,39 @@
+// Form validation
+//
+// Provide feedback to users when form field values are valid or invalid. Works
+// primarily for client-side validation via scoped `:invalid` and `:valid`
+// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
+// server-side validation.
+
+.invalid-feedback {
+  font-weight: $mtvh-font-weight-bold;
+}
+.form-control {
+  &.is-invalid {
+    background-color: var(--mtvh-red-01);
+    &[type="radio"] {
+      border: 1px solid blue;
+    }
+  }
+}
+.form-text {
+  font-size: $font-size-sm;
+  margin-bottom: $mtvh-spacing-4;
+  &.error {
+    @include form-invalid-text();
+  }
+}
+
+/* override radio validation style */
+.form-group {
+  &.has-error {
+    &:has([type="radio"]) {
+
+      .form-check.radio {
+        input {
+          border: $form-check-input-border;
+        }
+      }
+    }
+  }
+}

package/assets/scss/mixins/_banner.scss

@@ -0,0 +1,20 @@
+@mixin mtvh-banner-icon() {
+
+  padding-top: #{$mtvh-spacing-3};
+  padding-bottom: #{$mtvh-spacing-3};
+  padding-left: (calc(#{$icon-size-scale-md} + #{$mtvh-spacing-5} ));
+  padding-right: #{$mtvh-spacing-4};
+  position: relative;
+
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    flex-shrink: 0;
+    vertical-align: top;
+    appearance: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+}

package/assets/scss/mixins/_butttons.scss

@@ -0,0 +1,51 @@
+@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;
+  }
+}