@webitel/ui-sdk 0.9.66 → 1.0.3

package/src/css/components/molecules/wt-select/_variables.scss

@@ -1,25 +1,61 @@
 
 :root {
-  --select-caret-top-pos: 7px;
-  --select-caret-right-pos: 10px;
+  --select-caret-top-pos: var(--spacing-xs);
+  --select-caret-right-pos: var(--spacing-xs);
   --select-caret-z-index: 1;
 
-  --select-clear-top-pos: 11px;
-  --select-clear-right-pos: calc(10px + (var(--icon-md-size) + var(--select-caret-right-pos))); // 10px spacing + caret icon + caret right pos
+  --select-clear-top-pos: var(--spacing-xs);
+
+  --select-clear-right-pos: calc(
+    var(--input-padding)
+    + var(--icon-md-size)
+    + var(--select-caret-right-pos)
+    ); // spacing + caret icon + caret right pos
+
   --select-clear-z-index: var(--select-caret-z-index);
 
-  --select-tags-min-height: 38px;
-  --select-tags-padding: 9px calc(10px + var(--icon-md-size) + var(--select-caret-right-pos)) 9px 9px; // right pos = 10px spacing + caret icon size + caret offset
-  --select-tags-padding--clearable: 9px calc(10px + var(--icon-sm-size) + var(--select-clear-right-pos)) 9px 9px; // right pos = 10px spacing + clear icon size + clear offset
-  --select-tags-border: var(--input-border);
+  --select-tags-min-height: calc(24px + var(--spacing-xs) * 2); // 24px %typo-body-1 line-height
+
+  --select-tags-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-md-size)
+      + var(--select-caret-right-pos)
+    )
+    var(--input-padding)
+    var(--input-padding);  // right pos = 10px spacing + caret icon size + caret offset
+
+  --select-tags-padding--clearable:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-md-size)
+      + var(--select-clear-right-pos)
+    )
+    var(--input-padding)
+    var(--input-padding);
+
+  --select-tags-border: var(--input-border);  // right pos = 10px spacing + clear icon size + clear offset
 
   --select-input-min-height: 18px;
-  --select-badge-right-pos: 44px;
-  --select-badge-right-pos--clearable: 70px;
-  --select-badge-z-index: 1;
+
+  --select-chip-right-pos: calc(
+    var(--spacing-xs)
+    + var(--icon-md-size)
+    + var(--spacing-xs)
+  ); // 2 spacings + arrow down icon
+
+  --select-chip-right-pos--clearable: calc(
+    var(--spacing-xs)
+    + var(--icon-md-size)
+    + var(--select-chip-right-pos)
+  ); // spacing after bottom arrow + "reset" sm icon
+
+  --select-chip-z-index: 1;
 
   --select-options-padding: var(--input-padding);
 
-  --select-option--hover-color: var(--main-secondary-accent-color);
-  --select-option--active-color: var(--main-option-hover-color);
+  --select-option--hover-color: var(--accent-secondary-color);
+  --select-option--active-color: var(--accent-secondary-color);
 }

package/src/css/components/molecules/wt-switcher/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --switcher-icon-margin: 10px;
+  --switcher-icon-margin: var(--spacing-xs);
   --switcher-width: 40px;
   --switcher-height: 22px;
   --switcher-cicle-size: 14px;

package/src/css/components/molecules/wt-tabs/_variables.scss

@@ -3,12 +3,12 @@
   --tabs-underiline-height: 1px;
   --tabs-underiline-color: transparent;
 
-  --tab-padding: 20px 0;
+  --tab-padding: var(--spacing-2xs);
   --tab-margin: 0 5px;
   --tab-color: var(--text-outline-color);
   --tab--hover-color: var(--text-primary-color);
   --tab--active-color: var(--text-primary-color);
-  --tab-border: 2px solid;
-  --tab--active-border-color: var(--main-accent-color);
+  --tab-border: 4px solid;
+  --tab--active-border-color: var(--accent-color);
   --tab-z-index: 1;
 }

package/src/css/components/molecules/wt-tags-input/_variables.scss

@@ -1,15 +1,14 @@
 
 :root {
-  --tags-input-min-height: 40px; // 38px + border-box
-  --tags-input-padding: 5px 10px;
+  --tags-input-padding: var(--input-padding);
+  --tags-input-min-height: 40px; // 24px lh + paddings
   --tags-input-border: var(--input-border);
   --tags-input-border-color: var(--form-border-color);
 
-  --tags-input-tag-spacing-margin: 10px;
+  --tags-input-tags-gap: var(--spacing-xs);
   --tags-input-tag-text-color: var(--text-primary-color);
-  --tags-input-tag-bg-color: var(--main-secondary-accent-color);
-  --tags-input-tag-border-radius: 20px;
-  --tags-input-tag-actions-margin-left: var(--tags-input-tag-spacing-margin);
+  --tags-input-tag-bg-color: var(--accent-secondary-color);
+  --tags-input-tag-actions-margin-left: var(--spacing-2xs);
 
   --tags-input-tag-text-color--deletion: var(--text-contrast-color);
   --tags-input-tag-bg-color--deletion: var(--false-color);
@@ -20,6 +19,6 @@
   --tags-input-autocomplete-option-padding: var(--input-padding);
   --tags-input-autocomplete-option--text-color: var(--form-placeholder-color);
 
-  --tags-input-option-bg-color--hover: var(--main-secondary-accent-color);
+  --tags-input-option-bg-color--hover: var(--accent-secondary-color);
   --tags-input-option-text-color--hover: var(--text-primary-color);
 }

package/src/css/components/molecules/wt-textarea/_variables.scss

@@ -1,5 +1,13 @@
 
 :root {
   --textarea-min-height: 100px;
-  --textarea-padding: 9px 35px 9px 9px; // right reset icon 16px
+  --textarea-padding:
+    var(--input-padding)
+    calc(
+      var(--input-padding)
+      + var(--icon-sm-size)
+      + var(--spacing-xs)
+    )
+    var(--input-padding)
+    var(--input-padding); // right reset icon 16px
 }

package/src/css/components/molecules/wt-timepicker/_variables.scss

@@ -1,5 +1,5 @@
 
 :root {
   --timepicker-input-width: 75px;
-  --timepicker-input-margin: 10px;
+  --timepicker-input-margin: var(--spacing-xs);
 }

package/src/css/components/organisms/wt-app-header/_variables.scss

@@ -1,20 +1,24 @@
 
 :root {
-  --wt-app-header-min-height: 54px;
-  --wt-app-header-padding: 8px 60px;
+  --wt-app-header-min-height: 40px;
+  --wt-app-header-padding: var(--spacing-xs) var(--spacing-sm);
 
-  --wt-app-header-content-gap: var(--component-padding);
-  --wt-app-header-content-panel-margin: 5px;
-  --wt-app-header-content-bg-color: var(--main-primary-color);
+  --wt-app-header-content-gap: var(--spacing-sm);
+  --wt-app-header-content-panel-margin: var(--spacing-2xs);
+  --wt-app-header-content-bg-color: var(--main-color);
   --wt-app-header-content-z-index: 11;
 
   --wt-app-navigator-max-height: 80vh;
+  --wt-app-navigator-padding: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-size: 120px;
+  --wt-app-navigator-item-gap: var(--wt-app-header-content-gap);
   --wt-app-navigator-item-border: 1px solid;
-  --wt-app-navigator-item-border-color: var(--main-outline-color);
-  --wt-app-navigator-item-border-color--hover: var(--main-accent-color);
+  --wt-app-navigator-item-border-color: var(--secondary-color);
+  --wt-app-navigator-item-border-color--hover: var(--accent-color);
 
   --wt-header-actions-min-width: 120px;
-  --wt-header-actions-action-bg-color--hover: var(--main-page-bg-color);
-  --wt-header-actions-action-link-padding: 10px var(--wt-app-header-content-gap);
+  --wt-header-actions-content-sections-gap: var(--spacing-lg);
+  --wt-header-actions-padding: var(--wt-app-header-content-gap);
+  --wt-header-actions-action-bg-color--hover: var(--secondary-color);
+  --wt-header-actions-action-link-padding: var(--spacing-xs);
 }

package/src/css/components/organisms/wt-headline/_variables.scss

@@ -1,7 +1,6 @@
 
 :root {
-  --headline-min-height: 64px;
-  --headline-padding: 12px 30px;
-  --headline-title-margin: 20px;
-  --headline-background: var(--main-primary-color);
+  --headline-min-height: 40px; // button/search-bar height
+  --headline-title-margin: var(--spacing-sm);
+  --headline-background: var(--main-color);
 }

package/src/css/components/organisms/wt-navigation-bar/_variables.scss

@@ -1,14 +1,14 @@
 :root {
-  --navigation-bar-width: 350px;
+  --navigation-bar-width: 340px;
   --navigation-bar-z-index: 10;
-  --navigation-bar-bg-color: var(--main-primary-color);
-  --navigation-bar-verical-padding: 15px;
-  --navigation-bar-horizontal-padding: 10px;
+  --navigation-bar-bg-color: var(--main-color);
+  --navigation-bar-padding: var(--spacing-sm);
 
-  --navigation-bar-header-padding: var(--navigation-bar-verical-padding) 15px;
-  --navigation-bar-list-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-link-padding: var(--navigation-bar-verical-padding) var(--navigation-bar-horizontal-padding);
-  --navigation-bar-subnav-padding-left: 40px;
+  --navigation-bar-header-padding: var(--spacing-xs);
+
+  --navigation-bar-list-padding: var(--navigation-bar-padding);
+  --navigation-bar-link-padding: var(--navigation-bar-padding);
+  --navigation-bar-subnav-padding-left: var(--spacing-lg);
   --navigation-bar-active-expansion-flag-width: 5px;
-  --navigation-bar-active-expansion-name-max-width: calc(100% - 24px - 10px); // 100% - icon - icon margin
-}
+  --navigation-bar-active-expansion-name-max-width: calc(100% - var(--icon-md-size) - var(--spacing-xs));
+}

package/src/css/components/organisms/wt-notifications-bar/_variables.scss

@@ -1,7 +1,7 @@
 
 :root {
   --notifications-bar-max-height: 60%;
-  --notifications-bar-corner-margin: 10px;
-  --notifications-bar-notifications-margin: 0 10px 10px auto;
+  --notifications-bar-corner-margin: var(--spacing-sm);
+  --notifications-bar-notifications-margin: 0 0 var(--spacing-xs) auto;
   --notifications-bar-z-index: 101;
 }

package/src/css/components/organisms/wt-page-wrapper/_variables.scss

@@ -1,5 +1,5 @@
 :root {
-  --page-wrapper-padding: 20px 30px;
-  --page-wrapper-section-margin: 20px;
-  --page-wrapper-main-section-padding: 20px 30px 30px;
+  --page-wrapper-padding: var(--spacing-sm);
+  --page-wrapper-section-padding: var(--spacing-sm);
+  --page-wrapper-section-gap: var(--spacing-sm);
 }

package/src/css/components/organisms/wt-pagination/_variables.scss

@@ -1,7 +1,5 @@
 
 :root {
-  --pagination-margin-right: 10px;
-  --pagination-size-text-margin-right: 10px;
+  --pagination-gap: var(--spacing-xs);
   --pagination-size-input-width: 70px;
-  --pagination-page-controls-margin: 10px;
 }

package/src/css/components/organisms/wt-player/_variables.scss

@@ -1,8 +1,8 @@
 .wt-player {
-  --plyr-color-main: var(--main-accent-color);
+  --plyr-color-main: var(--accent-color);
   --plyr-audio-control-color: var(--icon-primary-color);
-  // --plyr-control-toggle-checked-background: var(--main-primary-color);
-  --player-close-icon-transform-translate-x: var(--spacing--sm);
+  // --plyr-control-toggle-checked-background: var(--main-color);
+  --player-close-icon-transform-translate-x: var(--spacing-xs);
   // "-1 * var" for use the negative value of a variable
-  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing--md));
+  --player-close-icon-transform-translate-y: calc(-1 * var(--spacing-md));
 }

package/src/css/components/organisms/wt-status-select/_variables.scss

@@ -1,6 +1,6 @@
 
 :root {
-  --status-select-select-tags-padding: 9px 34px 9px 9px; // 34px = 24 + 10
-  --status-select--hover-color: var(--form-input-color);
-  --status-select-bg--hover-color: #F9F9F9; // zebra-like
+  --status-select-padding: 0 calc(var(--icon-size-md) + var(--spacing-xs)) 0 0; // reset wt-select padding, but preserve arrow icon padding
+  --status-select-option-color: var(--form-input-color);
+  --status-select-bg--hover-color: var(--secondary-color);
 }

package/src/css/components/organisms/wt-table/_variables.scss

@@ -2,15 +2,15 @@
 :root {
   --table-col-min-width: 140px;
 
-  --table-head-sort-arrow-margin: 10px;
-  --table-head-borer-bottom: 1px solid;
-  --table-head-borer-color: var(--main-outline-color);
+  --table-head-sort-arrow-margin: var(--spacing-xs);
+  --table-head-border: 1px solid;
+  --table-head-border-color: var(--secondary-color);
 
-  --table-min-height: 24px; // 24px icon size + 2 paddings
-  --table-column-gap: 20px;
-  --table-row-padding: 10px;
+  --table-min-height: 24px; // 24px icon size or body-1 lh
+  --table-column-gap: var(--spacing-sm);
+  --table-row-padding: var(--spacing-sm);
 
-  --table-primary-color: var(--main-primary-color);
-  --table--hover-color: var(--main-secondary-accent-color);
-  --table-secondary-color: #F9F9F9; // zebra
+  --table-primary-color: var(--main-color);
+  --table--hover-color: var(--accent-secondary-color);
+  --table-secondary-color: var(--secondary-color-50); // zebra
 }

package/src/css/components/organisms/wt-table-actions/_variables.scss

@@ -1,4 +1,5 @@
 
 :root {
-  --table-actions-icon-gap: 20px;
+  --table-actions-padding: var(--spacing-xs);
+  --table-actions-icon-gap: var(--spacing-xs);
 }

package/src/css/main.scss

@@ -1,8 +1,10 @@
-@import 'sizes/sizes';
-@import 'display-helpers/display-helpers';
 @import 'styleguide/styleguide';
-@import 'transitions/transitions';
+
 @import 'components/components';
+@import 'styleguide/display-helpers/display-helpers';
+
+
+@include wt-placeholder;
 
 :root {
   --transition: 0.2s;
@@ -20,11 +22,11 @@ html {
 }
 
 body {
+  @extend %typo-body-1;
+
   min-height: 100%;
   height: 100%;
   margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
 }
 
 //main {

package/src/css/styleguide/_styleguide.scss

@@ -1,4 +1,9 @@
 @import './scroll';
-@import '../typography/typography';
-@import '../colors/colors';
-@import '../shadows/shadows';
+@import 'border-radius/border-radius';
+@import 'typography/typography';
+@import 'colors/colors';
+@import 'elevations/elevations';
+@import 'spacings/spacings';
+@import 'viewport-breakpoints/viewport-breakpoints';
+@import 'transitions/transitions';
+@import 'placeholder/placeholder';

package/src/css/styleguide/border-radius/_border-radius.scss

@@ -0,0 +1,4 @@
+:root {
+  --border-radius: var(--spacing-2xs);
+  --border-radius--pill: 50px;
+}

package/src/css/{colors → styleguide/colors}/_colors.scss

@@ -34,18 +34,13 @@
 
   // MAIN COLORS
   --accent-color: hsla(var(--_accent-color), 1);
-  --main-accent-color: var(--accent-color); // DEPRECATED
 
   --main-color: hsla(var(--_main-color), 1);
-  --main-primary-color: var(--main-color); // DEPRECATED
 
   --contrast-color: hsla(var(--_contrast-color), 1);
-  --main-primary-accent-color: var(--contrast-color); // DEPRECATED
 
   --secondary-color: hsla(var(--_secondary-color), 1);
   --secondary-color-50: hsla(var(--_secondary-color-50), 1);
-  --main-secondary-color: var(--secondary-color); // DEPRECATED
-  --main-outline-color: var(--secondary-color); // DEPRECATED
 
   // ICON COLORS
   --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
@@ -60,15 +55,13 @@
   --icon-color-danger: var(--false-color);
   --icon-color-transfer: var(--transfer-color);
   --icon-color-hold: var(--hold-color);
+  --icon-color-secondary-50: var(--secondary-color-50);
 
 
   --page-bg-color: hsla(var(--_page-bg-color), 1);
   --header-color: hsla(var(--_header-color), 1);
-  --main-page-bg-color: var(--page-bg-color); // DEPRECATED
 
   --accent-secondary-color: hsla(var(--_accent-color), 0.3);
-  --main-secondary-accent-color: var(--accent-secondary-color); // DEPRECATED
-  --main-option-hover-color: var(--accent-secondary-color); // DEPRECATED
 
   // SEMANTIC COLORS
   --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
@@ -86,7 +79,7 @@
   --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover)); // DEPRECATED
 
   // SUBORDINATE COLORS
-  --tag-bg-color: var(--main-secondary-accent-color);
+  --tag-bg-color: var(--accent-secondary-color);
 
   // FORM STATES OPACITY
   --form-opacity--default: var(--_opacity--default);
@@ -95,8 +88,8 @@
   --form-opacity--focus: var(--_opacity--focus);
   --form-opacity--disabled: var(--_opacity--disabled);
 
-  --form-placeholder-opacity: 0.4;
-  --form-placeholder-opacity--hover: 0.6;
+  --form-placeholder-opacity: 0.6;
+  --form-placeholder-opacity--focus: 0.4;
   --form-border-opacity--disabled: 0.05;
 
   --form-opacity--ouline--default: 0.4;
@@ -115,8 +108,8 @@
   --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
 
   --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
-  --form-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity--hover));
-  --form-placeholder--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+  --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
+  --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
 
   // outline
   --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
@@ -124,9 +117,6 @@
   --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
   --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
 
-  --form-outline-placeholder-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
-  --form-outline-placeholder--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
-
   // TEXT OPACITY
   --text-opacity--default: var(--_opacity--default);
   --text-opacity----outline--default: 0.7;

package/src/css/{display-helpers → styleguide/display-helpers}/_display-helpers.scss

@@ -1,3 +1,5 @@
+@import '../viewport-breakpoints/viewport-breakpoints';
+
 .d-none {
   display: none;
 }

package/src/css/styleguide/elevations/_elevations.scss

@@ -0,0 +1,13 @@
+:root {
+  --_elevation-color: hsla(0, 0%, 0%, 0.08);
+  --elevation-1: 0px 0px 2px 1px var(--_elevation-color);
+  --elevation-2: 0px 0px 4px 2px var(--_elevation-color);
+  --elevation-3: 0px 0px 6px 3px var(--_elevation-color);
+  --elevation-4: 0px 0px 8px 4px var(--_elevation-color);
+  --elevation-5: 0px 0px 10px 5px var(--_elevation-color);
+  --elevation-6: 0px 0px 12px 6px var(--_elevation-color);
+  --elevation-7: 0px 0px 14px 7px var(--_elevation-color);
+  --elevation-8: 0px 0px 16px 8px var(--_elevation-color);
+  --elevation-9: 0px 0px 18px 9px var(--_elevation-color);
+  --elevation-10: 0px 0px 20px 10px var(--_elevation-color);
+}

package/src/css/styleguide/fonts/_fonts.scss

@@ -0,0 +1,126 @@
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Montserrat';
+  src: url('../../../assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -0,0 +1,49 @@
+// https://stackoverflow.com/a/17181946/17782185
+// https://stackoverflow.com/a/49192800/17782185
+
+@mixin optional-at-root($sel) {
+  @at-root #{if(not &, $sel, selector-append(&, $sel))} {
+    @content;
+  }
+}
+
+$vendors: (':-webkit', '-moz', ':-moz', '-ms');
+
+@mixin wt-placeholder($style: '') {
+  @each $vendor in $vendors {
+    @include optional-at-root(':#{$vendor}-input-placeholder') {
+      font: inherit;
+      transition: var(--transition);
+
+      @if ($style == 'focus') {
+        color: var(--form-placeholder-color--focus);
+      } @else if ($style == 'disabled') {
+        color: var(--form-placeholder-color--disabled);
+      } @else {
+        color: var(--form-placeholder-color);
+      }
+
+      @content;
+    }
+  }
+}
+
+/*
+  Classes for direct extending in placeholder-like elements styling
+   (e.g. vue-multiselect .multiselect__placeholder which is technically a span)
+*/
+%wt-placeholder {
+  font: inherit;
+  transition: var(--transition);
+  color: var(--form-placeholder-color);
+}
+
+%wt-placeholder--focus {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--focus);
+}
+
+%wt-placeholder--disabled {
+  @extend %wt-placeholder;
+  color: var(--form-placeholder-color--disabled);
+}

package/src/css/styleguide/spacings/_spacings.scss

@@ -0,0 +1,15 @@
+:root {
+  // Start point
+  --_spacing-multiplicator: 8px;
+
+  // Spacings
+  --spacing-3xs: calc(var(--_spacing-multiplicator) / 4);
+  --spacing-2xs: calc(var(--_spacing-multiplicator) / 2);
+  --spacing-xs: calc(var(--_spacing-multiplicator) * 1);
+  --spacing-sm: calc(var(--_spacing-multiplicator) * 2);
+  --spacing-md: calc(var(--_spacing-multiplicator) * 3);
+  --spacing-lg: calc(var(--_spacing-multiplicator) * 4);
+  --spacing-xl: calc(var(--_spacing-multiplicator) * 5);
+  --spacing-2xl: calc(var(--_spacing-multiplicator) * 6);
+  --spacing-3xl: calc(var(--_spacing-multiplicator) * 7);
+}

package/src/css/styleguide/transitions/_transitions.scss

@@ -0,0 +1 @@
+@import 'fade/fade';