@webitel/ui-sdk 0.1.3 → 0.1.4-vue3

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

@@ -1,14 +1,14 @@
-
-:root {
-  --tabs-underiline-height: 1px;
-  --tabs-underiline-color: transparent;
-
-  --tab-padding: 20px 0;
-  --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-z-index: 1;
-}
+
+:root {
+  --tabs-underiline-height: 1px;
+  --tabs-underiline-color: transparent;
+
+  --tab-padding: var(--spacing-2xs);
+  --tab-gap: var(--spacing-2xs);
+  --tab-color: var(--text-outline-color);
+  --tab--hover-color: var(--text-primary-color);
+  --tab--active-color: var(--text-primary-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

@@ -0,0 +1,24 @@
+
+:root {
+  --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-tags-gap: var(--spacing-xs);
+  --tags-input-tag-text-color: var(--text-primary-color);
+  --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);
+
+  --tags-input-autocomplete-max-height: 300px;
+  --tags-input-autocomplete-border: var(--input-border);
+  --tags-input-autocomplete-border-color: var(--form-border-color);
+  --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(--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,5 @@
-
-:root {
-  --textarea-min-height: 100px;
-  --textarea-padding: 9px 35px 9px 9px; // right reset icon 16px
-}
+
+:root {
+  --textarea-min-height: 100px;
+  --textarea-padding: var(--input-padding);
+}

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

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

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

@@ -0,0 +1,24 @@
+
+:root {
+  --wt-app-header-min-height: 56px;
+  --wt-app-header-padding: var(--spacing-sm);
+
+  --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(--secondary-color);
+  --wt-app-navigator-item-border-color--hover: var(--accent-color);
+
+  --wt-header-actions-min-width: 120px;
+  --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

@@ -0,0 +1,6 @@
+
+:root {
+  --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-headline-nav/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --headline-nav-indicator-size: 6px;
+  --headline-nav-indicator-margin: 19px;
+}

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

@@ -0,0 +1,16 @@
+:root {
+  --navigation-bar-width: 340px;
+  --navigation-bar-z-index: 10;
+  --navigation-bar-bg-color: var(--main-color);
+  --navigation-bar-padding: var(--spacing-sm);
+
+  --navigation-bar-header-padding: var(--spacing-xs);
+  --navigation-bar-app-pic-width: 200px;
+  --navigation-bar-app-pic-height: 30px;
+
+  --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% - var(--icon-md-size) - var(--spacing-xs));
+}

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

@@ -0,0 +1,7 @@
+
+:root {
+  --notifications-bar-max-height: 60%;
+  --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

@@ -0,0 +1,5 @@
+:root {
+  --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-size-input-width: 70px;
-  --pagination-page-controls-margin: 10px;
+
+:root {
+  --pagination-gap: var(--spacing-xs);
+  --pagination-size-input-width: 70px;
 }

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

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

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

@@ -0,0 +1,6 @@
+
+:root {
+  --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

@@ -0,0 +1,16 @@
+
+:root {
+  --table-col-min-width: 140px;
+
+  --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 or body-1 lh
+  --table-column-gap: var(--spacing-xs);
+  --table-row-padding: var(--spacing-xs);
+
+  --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

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

package/src/css/main.scss

@@ -1,69 +1,75 @@
-// @import "./fonts";
-//@import "./utils/variables";
-//@import "./utils/helper-classes";
-@import "./styleguide/styleguide";
-@import "components/components";
-
-:root {
-  --transition: 0.2s;
-  --border-radius: 5px;
-
-  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
-}
-
-@mixin width-fit-content {
-  width: fit-content;
-  width: -moz-fit-content;
-}
-
-html {
-  height: 100%;
-}
-
-body {
-  min-height: 100%;
-  height: 100%;
-  margin: 0;
-  font-family: 'Montserrat Regular', monospace;
-  font-size: 100%;
-}
-
-//main {
-//  min-height: 100%;
-//  height: 100%;
-//}
-
-h1, h2, h3, h4, h5, h6, p {
-  margin: 0;
-  font-weight: normal;
-}
-
-//reset ul styles
-ul {
-  padding: 0;
-  margin: 0;
-  list-style-type: none;
-}
-
-iframe {
-  border: none;
-  outline: none;
-}
-
-button {
-  padding: 0;
-  background: transparent;
-  border: none;
-  outline-color: #000;
-  cursor: pointer;
-}
-
-a {
-  color: #000;
-  text-decoration: none;
-}
-
-.hidden {
-  opacity: 0;
-  pointer-events: none;
-}
+@import 'styleguide/styleguide';
+
+@import 'components/components';
+@import 'styleguide/display-helpers/display-helpers';
+
+
+@include wt-placeholder;
+
+:root {
+  --transition: 0.2s;
+
+  --box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05);
+}
+
+@mixin width-fit-content {
+  width: fit-content;
+  width: -moz-fit-content;
+}
+
+html {
+  height: 100%;
+}
+
+body {
+  @extend %typo-body-1;
+
+  min-height: 100%;
+  height: 100%;
+  margin: 0;
+}
+
+//main {
+//  min-height: 100%;
+//  height: 100%;
+//}
+
+h1, h2, h3, h4, h5, h6, p {
+  margin: 0;
+  font-weight: normal;
+}
+
+//reset ul styles
+ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+}
+
+iframe {
+  border: none;
+  outline: none;
+}
+
+button {
+  padding: 0;
+  background: transparent;
+  border: none;
+  outline-color: #000;
+  cursor: pointer;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
+
+.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+// https://github.com/Akryum/floating-vue/issues/488
+.v-popper__arrow-container {
+  display: none;
+}

package/src/css/styleguide/_styleguide.scss

@@ -0,0 +1,9 @@
+@import './scroll';
+@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/styleguide/colors/_colors.scss

@@ -0,0 +1,150 @@
+:root {
+  // HSL COLORS HUE VALUE
+  --_accent-color-hue: 42;
+  --_secondary-color-hue: 202;
+  --_page-bg-color-hue: 209;
+  --_icon-color-hue: 202;
+  --_positive-color-hue: 119;
+  --_negative-color-hue: 11;
+
+  --_hold-color-hue: 54;
+  --_transfer-color-hue: 227;
+  --_job-color-hue: 209;
+
+  // DEFAULT STATES OPACITY
+  --_opacity--default: 0.8;
+  --_opacity--hover: 1;
+  --_opacity--active: 1;
+  --_opacity--focus: 0.8;
+  --_opacity--disabled: 0.4;
+
+  // BASIC HSL COLORS VALUES
+  --_accent-color: var(--_accent-color-hue), 100%, 50%;
+  --_main-color: var(--_accent-color-hue), 20%, 99%;
+  --_contrast-color: var(--_accent-color-hue), 20%, 1%;
+  --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
+  --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
+  --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
+  --_header-color: var(--_page-bg-color-hue), 20%, 90%;
+  --_positive-color: var(--_positive-color-hue), 60%, 40%;
+  --_negative-color: var(--_negative-color-hue) , 80%, 50%;
+  --_icon-color: var(--_icon-color-hue), 100%, 15%;
+
+  --_hold-color: var(--_hold-color-hue), 80%, 50%;
+  --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
+  --_job-color: var(--_job-color-hue), 96%, 57%;
+
+  // MAIN COLORS
+  --accent-color: hsla(var(--_accent-color), 1);
+
+  --main-color: hsla(var(--_main-color), 1);
+
+  --contrast-color: hsla(var(--_contrast-color), 1);
+
+  --secondary-color: hsla(var(--_secondary-color), 1);
+  --secondary-color-50: hsla(var(--_secondary-color-50), 1);
+
+  // ICON COLORS
+  --icon-color: hsla(var(--_icon-color), var(--_opacity--default));
+  --icon-color-secondary: hsla(var(--_icon-color), 0.25);
+
+  --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
+
+  --icon-color-accent: var(--accent-color);
+  --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
+  --icon-color-active: var(--icon-color--hover);
+  --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
+  --icon-color-success: var(--true-color);
+  --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);
+
+  --accent-secondary-color: hsla(var(--_accent-color), 0.3);
+
+  // SEMANTIC COLORS
+  --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
+
+  --true-color: hsla(var(--_positive-color), var(--_opacity--default));
+  --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
+
+  --false-color: hsla(var(--_negative-color), var(--_opacity--default));
+  --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
+
+  --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
+  --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
+
+  --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
+  --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
+
+  --job-color: hsla(var(--_job-color), var(--_opacity--default));
+  --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
+
+  --link-color: hsla(205, 90%, 45%, 1);
+  --link--hover-color: hsla(205, 90%, 60%, 1);
+
+  // SUBORDINATE COLORS
+  --tag-bg-color: var(--accent-secondary-color);
+
+  // FORM STATES OPACITY
+  --form-opacity--default: var(--_opacity--default);
+  --form-opacity--hover: var(--_opacity--hover);
+  --form-opacity--active: var(--_opacity--active);
+  --form-opacity--focus: var(--_opacity--focus);
+  --form-opacity--disabled: var(--_opacity--disabled);
+
+  --form-placeholder-opacity: 0.6;
+  --form-placeholder-opacity--focus: 0.4;
+  --form-border-opacity--disabled: 0.05;
+
+  --form-opacity--ouline--default: 0.4;
+  --form-opacity--ouline--hover: 0.7;
+
+  // FORM COLORS
+  --form-input-color: var(--contrast-color); // user input color
+
+  --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
+  --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
+
+  --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
+  --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
+  --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-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));
+
+  --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));
+
+  // TEXT OPACITY
+  --text-opacity--default: var(--_opacity--default);
+  --text-opacity----outline--default: 0.7;
+  --text-opacity--disabled: 0.5;
+
+  // TEXT COLORS
+  --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
+  --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
+  --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
+  --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
+
+  // CHAT COLORS
+  --_chat-client-color: var(--_accent-color);
+  --_chat-client-opacity: 0.2;
+  --_chat-agent-color: var(--_secondary-color-50);
+  --_chat-agent-opacity: 1;
+
+  --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+  --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
+  --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
+}

package/src/css/styleguide/display-helpers/_display-helpers.scss

@@ -0,0 +1,23 @@
+@import '../viewport-breakpoints/viewport-breakpoints';
+
+.d-none {
+  display: none;
+}
+
+@media (#{$media} and #{$media-width-sm}) {
+  .d-none-sm {
+    display: none;
+  }
+  .d-block-sm {
+    display: block;
+  }
+}
+
+@media (#{$media} and #{$media-width-xs}) {
+  .d-none-xs {
+    display: none;
+  }
+  .d-block-xs {
+    display: block;
+  }
+}

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);
+}