@webitel/ui-sdk 23.12.43 → 23.12.45-1

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

@@ -2,10 +2,8 @@
 :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);
+  --wt-tooltip-text-color: var(--text-main-color);
+  --wt-tooltip-background-color: var(--dp-24-surface-color);
 
   --tooltip-elevation: var(--elevation-10);
 }

package/src/components/wt-tooltip/wt-tooltip.vue

@@ -1,7 +1,6 @@
 <template>
   <div
     :class="{
-      'wt-tooltip--contrast': contrast,
       'wt-tooltip--visible': isVisible,
     }"
     class="wt-tooltip"
@@ -43,10 +42,6 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-  contrast: {
-    type: Boolean,
-    default: false,
-  },
   placement: {
     type: String,
     default: 'auto',
@@ -133,18 +128,11 @@ onMounted(() => {
   .wt-tooltip-floating {
     @extend %typo-body-2;
     padding: var(--spacing-2xs) var(--spacing-xs);
-    color: var(--contrast-color);
-    background: var(--main-color);
+    color: var(--wt-tooltip-text-color);
+    background: var(--wt-tooltip-background-color);
     border-radius: var(--border-radius);
     box-shadow: var(--elevation-10);
     z-index: 1000;
   }
-
-  &--contrast {
-    .wt-tooltip-floating {
-      color: var(--main-color);
-      background: var(--contrast-color);
-    }
-  }
 }
 </style>

package/src/css/styleguide/colors/_colors.scss

@@ -36,7 +36,7 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-4);
-  --success-on-color: var(--black);
+  --success-on-color: var(--white);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
@@ -48,7 +48,7 @@
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-4);
-  --error-on-color: var(--black);
+  --error-on-color: var(--white);
 
   // info colors
   --info-color: var(--blue-darken-1);
@@ -80,6 +80,12 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-color: var(--dp-10-surface-color);
+  --secondary-hover-color: var(--dp-14-surface-color);
+  --secondary-light-color: var(--dp-16-surface-color);
+  --secondary-on-color: var(--grey-darken-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);
@@ -93,7 +99,7 @@
 
 :root.theme--dark {
   // dp colors
-  --dp-24-surface-color: hsl(0, 0%, 25%);
+  --dp-24-surface-color: hsl(225, 20%, 25%);
   --dp-23-surface-color: hsl(225, 20%, 24%);
   --dp-22-surface-color: hsl(225, 20%, 23%);
   --dp-21-surface-color: hsl(225, 20%, 22%);
@@ -125,19 +131,19 @@
   --success-color: var(--green-darken-4);
   --success-hover-color: var(--green-darken-3);
   --success-light-color: var(--green-lighten-3);
-  --success-on-color: var(--white);
+  --success-on-color: var(--black);
 
   // warning colors
   --warning-color: var(--orange-accent-2);
   --warning-hover-color: var(--orange-accent-1);
   --warning-light-color: var(--orange-lighten-3);
-  --warning-on-color: var(--white);
+  --warning-on-color: var(--black);
 
   // error colors
   --error-color: var(--red-accent-2);
   --error-hover-color: var(--red-lighten-2);
   --error-light-color: var(--red-lighten-3);
-  --error-on-color: var(--white);
+  --error-on-color: var(--black);
 
   // info colors
   --info-color: var(--blue-darken-1);
@@ -169,6 +175,9 @@
   --primary-light-color: var(--amber-lighten-4);
   --primary-on-color: var(--black);
 
+  // secondary colors
+  --secondary-on-color: var(--grey-lighten-4);
+
   // accent colors
   --accent-color: var(--purple-lighten-1);
   --sub-accent-color: var(--indigo-darken-3);

package/src/css/styleguide/colors/reusable/_text-field.scss

@@ -2,17 +2,33 @@
 
 :root {
   // TODO: move to separate helper-text component
+  // helper
   --wt-helper-text-color: var(--text-main-color);
   --wt-helper-text-disabled-color: var(--text-disabled-color);
 
+  // placeholder
   --wt-text-field-error-text-color: var(--error-color);
   --wt-text-field-placeholder-color: var(--text-main-color);
   --wt-text-field-placeholder-error-color: var(--error-color);
   --wt-text-field-placeholder-disabled-color: var(--text-disabled-color);
 
+  // border
   --wt-text-field-input-border-color: var(--grey-darken-1);
   --wt-text-field-input-border-disabled-color: var(--dp-16-surface-color);
   --wt-text-field-input-border-error-color: var(--error-color);
+
+  // input bg
+  --wt-text-field-input-background-disabled-color: var(--dp-16-surface-color);
+
+  // select
+  --wt-text-field-select-option-text-color: var(--text-main-color);
+  --wt-text-field-select-option-text-hover-color: var(--primary-on-color);
+  --wt-text-field-select-option-text-selected-color: var(--primary-on-color);
+
+  --wt-text-field-select-option-wrapper-border-color: var(--dp-22-surface-color);
+  --wt-text-field-select-option-background-color: var(--dp-22-surface-color);
+  --wt-text-field-select-option-background-hover-color: var(--primary-light-color);
+  --wt-text-field-select-option-background-selected-color: var(--primary-color);
 }
 
 :root.theme--dark {

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

@@ -42,3 +42,8 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
   @extend %wt-placeholder;
   color: var(--wt-text-field-placeholder-disabled-color);
 }
+
+%wt-placeholder--error {
+  @extend %wt-placeholder;
+  color: var(--wt-text-field-placeholder-error-color);
+}

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

@@ -1,24 +0,0 @@
-
-: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);
-}