@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/css/components/_components.scss

@@ -1,45 +0,0 @@
-@import 'atoms/wt-avatar/variables';
-@import 'atoms/wt-badge/variables';
-@import 'atoms/wt-chip/variables';
-@import "atoms/wt-button/variables";
-@import "atoms/wt-icon/variables";
-@import "atoms/wt-indicator/variables";
-@import "atoms/wt-input-info/variables";
-@import "atoms/wt-divider/variables";
-@import "atoms/wt-label/variables";
-@import "atoms/wt-loader/variables";
-@import "atoms/wt-rounded-action/variables";
-@import "atoms/wt-tooltip/variables";
-@import "atoms/wt-context-menu/variables";
-
-@import "molecules/wt-icon-btn/variables";
-@import "molecules/wt-popup/variables";
-@import "molecules/wt-progress-bar/variables";
-@import "molecules/wt-radio/variables";
-@import "molecules/wt-checkbox/variables";
-@import "molecules/wt-datepicker/variables";
-@import "molecules/wt-datetimepicker/variables";
-@import "molecules/wt-input/variables";
-@import "molecules/wt-notification/variables";
-@import "molecules/wt-search-bar/variables";
-@import "molecules/wt-select/variables";
-@import "molecules/wt-slider/variables";
-@import "molecules/wt-switcher/variables";
-@import "molecules/wt-tabs/variables";
-@import "molecules/wt-tags-input/variables";
-@import "molecules/wt-textarea/variables";
-@import "molecules/wt-timepicker/variables";
-@import "molecules/wt-button-select/variables";
-@import "molecules/wt-load-bar/variables";
-
-@import "organisms/wt-headline/variables";
-@import "organisms/wt-headline-nav/variables";
-@import "organisms/wt-app-header/variables";
-@import "organisms/wt-navigation-bar/variables";
-@import "organisms/wt-notifications-bar/variables";
-@import "organisms/wt-page-wrapper/variables";
-@import "organisms/wt-pagination/variables";
-@import "organisms/wt-status-select/variables";
-@import "organisms/wt-table/variables";
-@import "organisms/wt-table-actions/variables";
-@import "organisms/wt-player/variables";

package/src/css/components/atoms/wt-avatar/_variables.scss

@@ -1,14 +0,0 @@
-:root {
-  --avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
-  --avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
-  --avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
-  --avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 9);
-  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 12);
-
-  --avatar-size: var(--avatar-size--size-md);
-
-  --online-color: var(--true-color);
-  --dnd-color: var(--accent-color);
-  --busy-color: var(--false-color);
-  --offline-color: var(--secondary-color);
-}

package/src/css/components/atoms/wt-button/_variables.scss

@@ -1,47 +0,0 @@
-
-:root {
-  --btn-min-width: 90px;
-  --btn-border-size: 2px;
-  --btn-padding: var(--spacing-xs) var(--spacing-sm);
-
-  --btn-padding--size-md: var(--btn-padding);
-  --btn-padding--size-sm: var(--spacing-2xs) var(--spacing-xs);
-
-  --btn-padding--outline:
-    calc(var(--spacing-xs) - var(--btn-border-size))
-    calc(var(--spacing-sm) - var(--btn-border-size));
-  --btn-padding--size-md--outline: var(--btn-padding--outline);
-  --btn-padding--size-sm--outline:
-    calc(var(--spacing-2xs) - var(--btn-border-size))
-    calc(var(--spacing-xs) - var(--btn-border-size));
-
-  --btn-border: var(--btn-border-size) solid;
-
-  // BUTTON COLORS
-  --btn-dark-font-color: var(--text-primary-color);
-  --btn-light-font-color: var(--text-contrast-color);
-
-  --btn-accent-color: hsla(var(--_accent-color), var(--_opacity--default));
-  --btn-accent--hover-color: hsla(var(--_accent-color), var(--_opacity--hover));
-
-  --btn-secondary-color: hsla(var(--_secondary-color), var(--_opacity--default));
-  --btn-secondary--hover-color: hsla(var(--_secondary-color), var(--_opacity--hover));
-
-  --btn-disabled-font-color: var(--secondary-color-50);
-  --btn-disabled-color: hsla(var(--_secondary-color-hue), 15%, 75%, var(--_opacity--active));
-
-  --btn-true-color: var(--true-color);
-  --btn-true--hover-color: var(--true--hover-color);
-
-  --btn-false-color: var(--false-color);
-  --btn-false--hover-color: var(--false--hover-color);
-
-  --btn-hold-color: var(--hold-color);
-  --btn-hold--hover-color: var(--hold--hover-color);
-
-  --btn-transfer-color: var(--transfer-color);
-  --btn-transfer--hover-color: var(--transfer--hover-color);
-
-  --btn-job-color: var(--job-color);
-  --btn-job--hover-color: var(--job--hover-color);
-}

package/src/css/components/atoms/wt-icon/_variables.scss

@@ -1,8 +0,0 @@
-
-:root {
-  --icon-xl-size: 40px;
-  --icon-lg-size: 32px;
-  --icon-md-size: 24px;
-  --icon-sm-size: 16px;
-  --icon-xs-size: 8px;
-}

package/src/css/components/atoms/wt-rounded-action/_variables.scss

@@ -1,7 +0,0 @@
-:root {
-  --rounded-action-padding: calc(var(--spacing-xs) - var(--btn-border-size));
-
-  --rounded-action-padding--outline: calc(var(--spacing-xs) - var(--btn-border-size));
-
-  --rounded-action-bg-color: var(--main-color);
-}

package/src/css/components/atoms/wt-tooltip/_variables.scss

@@ -1,29 +0,0 @@
-
-:root {
-  --tooltip-padding: var(--spacing-2xs) var(--spacing-xs);
-
-  --tooltip-light-text-color: var(--text-primary-color);
-  --tooltip-light-bg-color: var(--main-color);
-  --tooltip-dark-text-color: var(--text-contrast-color);
-  --tooltip-dark-bg-color: var(--contrast-color);
-
-  --tooltip-elevation: var(--elevation-10);
-}
-
-// cause we need to set styles to element somewhere in the HTML, not inside .wt-tooltip scope
-.wt-tooltip__popper .v-popper__inner {
-  @extend %typo-body-1;
-  max-width: 80vw;
-  max-height: 80vh;
-  padding: var(--tooltip-padding);
-  color: var(--tooltip-light-text-color);
-  background: var(--tooltip-light-bg-color);
-  border-radius: var(--border-radius);
-  box-shadow: var(--tooltip-elevation);
-  transition: var(--transition);
-}
-
-.wt-tooltip--contrast__popper .v-popper__inner {
-  color: var(--tooltip-dark-text-color);
-  background: var(--tooltip-dark-bg-color);
-}

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

@@ -1,18 +0,0 @@
-.wt-button-select {
-  --button-select-button-padding: var(--spacing-xs) var(--spacing-sm);
-
-  --button-select-icon-button-padding: var(--spacing-xs);
-
-  --button-select-buttons-gap: 1px;
-
-  --button-select-icon-color-primary: var(--btn-accent-color);
-  --button-select-icon-color-secondary: var(--btn-secondary-color);
-  --button-select-icon-color-dark: var(--btn-dark-font-color);
-  --button-select-icon-color-ligth: var(--main-color);
-
-  --button-select-icon-color-primary--hover: var(--btn-accent--hover-color);
-  --button-select-icon-color-danger--hover: var(--btn-false--hover-color);
-  --button-select-icon-color-success--hover: var(--btn-true--hover-color);
-  --button-select-icon-color-transfer--hover: var(--btn-transfer--hover-color);
-  --button-select-icon-color-secondary--hover: var(--btn-secondary--hover-color);
-}

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

@@ -1,21 +0,0 @@
-
-:root {
-  --datepicker-padding:
-    var(--input-padding)
-    calc(
-      var(--input-padding)
-    + var(--icon-md-size)
-    + var(--spacing-xs)
-    );
-  --datepicker-icon-margin: var(--spacing-xs);
-  --datepicker-border: 1px solid;
-
-  --datepicker-cell-size: var(--spacing-lg);
-  --datepicker-cell-gap: var(--spacing-xs);
-  --datepicker-calendar-padding: var(--spacing-xs);
-  --datepicker-calendar-header-margin: var(--spacing-xs);
-
-  --datepicker-selected-cell-text-color: var(--main-color);
-  --datepicker-selected-cell-bg-color: var(--accent-color);
-  --datepicker-cell--hover-color: var(--secondary-color-50);
-}

package/src/css/components/molecules/wt-datepicker/datepicker-calendar.scss

@@ -1,90 +0,0 @@
-.vdp-datepicker__calendar {
-  width: fit-content;
-  right: 0;
-  padding: var(--datepicker-calendar-padding);
-  border-radius: var(--border-radius);
-  box-shadow: var(-elevation-1);
-
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-content: flex-end;
-    margin-bottom: var(--datepicker-calendar-header-margin);
-    line-height: 0;
-
-    .day__month_btn {
-      @extend %typo-body-1;
-    }
-
-    .prev, .next {
-      float: none;
-      text-indent: 0;
-      color: transparent;
-      cursor: pointer;
-      //background: red !important;
-      border: none !important; // hide default arrows
-
-      &:hover {
-        background: none;
-      }
-
-      &:before, &:after {
-        display: none;
-      }
-    }
-  }
-
-  // cells wrapper
-  & > div:last-child {
-    display: grid;
-    grid-template-columns: repeat(7, 32px);
-    grid-gap: var(--datepicker-cell-gap);
-  }
-
-  .cell {
-    @extend %typo-body-1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--datepicker-cell-size);
-    height: var(--datepicker-cell-size);
-    padding: 0;
-    border: none !important;
-    transition: var(--transition);
-
-    &.day-header {
-      @extend %typo-caption;
-      color: var(--form-label-color);
-    }
-
-    &.day {
-      border-radius: var(--border-radius);
-
-      &.selected {
-        color: var(--datepicker-selected-cell-text-color);
-        background: var(--datepicker-selected-cell-bg-color) !important;
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-cell--hover-color);
-        border-color: transparent;
-      }
-    }
-
-    &.month {
-      &.selected {
-        &:hover {
-          background: var(--datepicker-selected-cell-bg-color) !important;
-        }
-      }
-
-      &:not(.blank):not(.disabled).day:hover,
-      &:not(.blank):not(.disabled).month:hover,
-      &:not(.blank):not(.disabled).year:hover {
-        background: var(--datepicker-selected-cell-bg-color) !important;
-      }
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-
-:root {
-  --datetimepicker-padding: var(--datepicker-padding);
-  --datetimepicker-icon-margin: var(--datepicker-icon-margin);
-  --datetimepicker-border: 1px solid;
-
-  --datetimepicker-form-padding: var(--spacing-xs);
-  --datetimepicker-form-bg-color: var(--main-color);
-
-  --datetimepicker-form-content-margin: var(--spacing-xs);
-}

package/src/css/components/molecules/wt-icon-btn/_variables.scss

@@ -1,3 +0,0 @@
-
-:root {
-}

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

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