@webitel/ui-sdk 23.12.50 → 23.12.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "23.12.50",
+  "version": "23.12.52",
   "private": false,
   "scripts": {
     "dev": "vite",

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

@@ -6,7 +6,7 @@
 
   --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-bg-color: var(--content-wrapper-color);
   --wt-app-header-content-z-index: 11;
 
   --wt-app-navigator-max-height: 80vh;

package/src/components/wt-app-header/wt-header-actions.vue

@@ -159,11 +159,13 @@ export default {
 .wt-header-actions__name {
   @extend %typo-subtitle-1;
   white-space: nowrap;
+  color: var(--text-main-color);
 }
 
 .wt-header-actions__account {
   @extend %typo-body-1;
   white-space: nowrap;
+  color: var(--text-main-color);
 }
 
 .wt-header-actions__action {
@@ -181,6 +183,7 @@ export default {
     width: 100%;
     padding: var(--wt-header-actions-action-link-padding);
     cursor: pointer;
+    color: var(--text-main-color);
 
     .wt-icon {
       margin-right: var(--wt-header-actions-action-link-padding);
@@ -188,12 +191,13 @@ export default {
   }
 
   &--logout .wt-header-actions__action__link {
-    color: var(--false-color);
+    color: var(--error-color);
   }
 }
 
 .wt-header-actions__build__version {
   @extend %typo-caption;
   white-space: nowrap;
+  color: var(--text-main-color);
 }
 </style>

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

@@ -1,32 +1,36 @@
 :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) * 7);
-  --avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
-  --avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
-  --avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);
+  --wt-avatar-size--size-xs: calc(var(--_spacing-multiplicator) * 3);
+  --wt-avatar-size--size-sm: calc(var(--_spacing-multiplicator) * 4);
+  --wt-avatar-size--size-md: calc(var(--_spacing-multiplicator) * 5);
+  --wt-avatar-size--size-lg: calc(var(--_spacing-multiplicator) * 7);
+  --wt-avatar-size--size-xl: calc(var(--_spacing-multiplicator) * 9);
+  --wt-avatar-size--size-2xl: calc(var(--_spacing-multiplicator) * 12);
+  --wt-avatar-size--size-3xl: calc(var(--_spacing-multiplicator) * 16);
 
-  --avatar-size: var(--avatar-size--size-md);
+  --wt-avatar-size: var(--wt-avatar-size--size-md);
 
-  --online-color: var(--true-color);
-  --dnd-color: var(--primary-color);
-  --busy-color: var(--false-color);
-  --offline-color: var(--secondary-color);
+  --online-color: var(--success-color);
+  --dnd-color: var(--warning-color);
+  --busy-color: var(--error-color);
+  --offline-color: var(--disabled-color);
 
-  --avatar-font-color: var(--main-color);
+  --wt-avatar-text-color: var(--white);
 
-  --avatar-letters-p1-color: var(--red-lighten-2);
-  --avatar-letters-p2-color: var(--purple-lighten-2);
-  --avatar-letters-p3-color: var(--deep-purple-lighten-2);
-  --avatar-letters-p4-color: var(--indigo-lighten-2);
-  --avatar-letters-p5-color: var(--blue-lighten-1);
-  --avatar-letters-p6-color: var(--cyan-lighten-1);
-  --avatar-letters-p7-color: var(--teal-darken-3);
-  --avatar-letters-p8-color: var(--green-darken-2);
-  --avatar-letters-p9-color: var(--lime-darken-3);
-  --avatar-letters-p10-color: var(--yellow-darken-3);
-  --avatar-letters-p11-color: var(--amber-lighten-2);
-  --avatar-letters-p12-color: var(--orange-darken-1);
-  --avatar-letters-p13-color: var(--deep-purple-lighten-1);
+  --wt-avatar-letters-p1-color: var(--red-lighten-2);
+  --wt-avatar-letters-p2-color: var(--purple-lighten-2);
+  --wt-avatar-letters-p3-color: var(--deep-purple-lighten-2);
+  --wt-avatar-letters-p4-color: var(--indigo-lighten-2);
+  --wt-avatar-letters-p5-color: var(--blue-lighten-1);
+  --wt-avatar-letters-p6-color: var(--cyan-lighten-1);
+  --wt-avatar-letters-p7-color: var(--teal-darken-3);
+  --wt-avatar-letters-p8-color: var(--green-darken-2);
+  --wt-avatar-letters-p9-color: var(--lime-darken-3);
+  --wt-avatar-letters-p10-color: var(--yellow-darken-3);
+  --wt-avatar-letters-p11-color: var(--amber-lighten-2);
+  --wt-avatar-letters-p12-color: var(--orange-darken-1);
+  --wt-avatar-letters-p13-color: var(--deep-purple-lighten-1);
+}
+
+:root.theme--dark {
+  --wt-avatar-text-color: var(--black);
 }

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

@@ -64,22 +64,22 @@ const avatarLetters = computed(() => {
 const avatarLettersBackground = computed(() => {
   // en.concat(uk)
   const letterList = [
-    { letters: 'AB'.concat('АБВ'), color: '--avatar-letters-p1-color' },
-    { letters: 'CD'.concat('ГҐД'), color: '--avatar-letters-p2-color' },
-    { letters: 'EF'.concat('ЕЄЖ'), color: '--avatar-letters-p3-color' },
-    { letters: 'GH'.concat('ЗИІ'), color: '--avatar-letters-p4-color' },
-    { letters: 'IJ'.concat('ЇЙК'), color: '--avatar-letters-p5-color' },
-    { letters: 'KL'.concat('ЛМН'), color: '--avatar-letters-p6-color' },
-    { letters: 'MN'.concat('ОПР'), color: '--avatar-letters-p7-color' },
-    { letters: 'OP'.concat('СТУ'), color: '--avatar-letters-p8-color' },
-    { letters: 'QR'.concat('ФХЦ'), color: '--avatar-letters-p9-color' },
-    { letters: 'ST'.concat('ЧШЩ'), color: '--avatar-letters-p10-color' },
-    { letters: 'UV'.concat('ЬЮЯ'), color: '--avatar-letters-p11-color' },
-    { letters: 'WX'.concat(''), color: '--avatar-letters-p12-color' },
-    { letters: 'YZ'.concat(''), color: '--avatar-letters-p13-color' },
+    { letters: 'AB'.concat('АБВ'), color: '--wt-avatar-letters-p1-color' },
+    { letters: 'CD'.concat('ГҐД'), color: '--wt-avatar-letters-p2-color' },
+    { letters: 'EF'.concat('ЕЄЖ'), color: '--wt-avatar-letters-p3-color' },
+    { letters: 'GH'.concat('ЗИІ'), color: '--wt-avatar-letters-p4-color' },
+    { letters: 'IJ'.concat('ЇЙК'), color: '--wt-avatar-letters-p5-color' },
+    { letters: 'KL'.concat('ЛМН'), color: '--wt-avatar-letters-p6-color' },
+    { letters: 'MN'.concat('ОПР'), color: '--wt-avatar-letters-p7-color' },
+    { letters: 'OP'.concat('СТУ'), color: '--wt-avatar-letters-p8-color' },
+    { letters: 'QR'.concat('ФХЦ'), color: '--wt-avatar-letters-p9-color' },
+    { letters: 'ST'.concat('ЧШЩ'), color: '--wt-avatar-letters-p10-color' },
+    { letters: 'UV'.concat('ЬЮЯ'), color: '--wt-avatar-letters-p11-color' },
+    { letters: 'WX'.concat(''), color: '--wt-avatar-letters-p12-color' },
+    { letters: 'YZ'.concat(''), color: '--wt-avatar-letters-p13-color' },
   ];
   const searchedLetter = letterList.find(({ letters }) => letters.includes(avatarLetters.value.at(0).toUpperCase()));
-  return (searchedLetter && searchedLetter.color) || '--avatar-letters-p1-color';
+  return (searchedLetter && searchedLetter.color) || '--wt-avatar-letters-p1-color';
 });
 
 const imgSrc = computed(() => props.src || defaultAvatar);
@@ -126,8 +126,8 @@ const badgeColorVar = computed(() => {
 
 .wt-avatar {
   position: relative;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
+  width: var(--wt-avatar-size);
+  height: var(--wt-avatar-size);
   user-select: none;
   border-radius: 50%;
 
@@ -136,52 +136,53 @@ const badgeColorVar = computed(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--avatar-font-color);
+    color: var(--wt-avatar-text-color);
     border-radius: 50%;
   }
 
   &__img {
     width: 100%;
     height: 100%;
+    border-radius: 50%;
   }
 
   &--size-xs {
-    width: var(--avatar-size--size-xs);
-    height: var(--avatar-size--size-xs);
+    width: var(--wt-avatar-size--size-xs);
+    height: var(--wt-avatar-size--size-xs);
   }
 
   &--size-sm {
     @extend %wt-avatar-typo-sm;
-    width: var(--avatar-size--size-sm);
-    height: var(--avatar-size--size-sm);
+    width: var(--wt-avatar-size--size-sm);
+    height: var(--wt-avatar-size--size-sm);
   }
 
   &--size-md {
-    width: var(--avatar-size--size-md);
-    height: var(--avatar-size--size-md);
+    width: var(--wt-avatar-size--size-md);
+    height: var(--wt-avatar-size--size-md);
   }
 
   &--size-lg {
     @extend %wt-avatar-typo-lg;
-    width: var(--avatar-size--size-lg);
-    height: var(--avatar-size--size-lg);
+    width: var(--wt-avatar-size--size-lg);
+    height: var(--wt-avatar-size--size-lg);
   }
 
   &--size-xl {
-    width: var(--avatar-size--size-xl);
-    height: var(--avatar-size--size-xl);
+    width: var(--wt-avatar-size--size-xl);
+    height: var(--wt-avatar-size--size-xl);
   }
 
   &--size-2xl {
     @extend %wt-avatar-typo-2xl;
-    width: var(--avatar-size--size-2xl);
-    height: var(--avatar-size--size-2xl);
+    width: var(--wt-avatar-size--size-2xl);
+    height: var(--wt-avatar-size--size-2xl);
   }
 
   &--size-3xl {
     @extend %wt-avatar-typo-3xl;
-    width: var(--avatar-size--size-3xl);
-    height: var(--avatar-size--size-3xl);
+    width: var(--wt-avatar-size--size-3xl);
+    height: var(--wt-avatar-size--size-3xl);
   }
 }
 </style>

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

@@ -14,7 +14,7 @@ export default {
   props: {
     colorVariable: {
       type: String,
-      default: 'false-color',
+      default: 'error-color',
       description: 'see all available colors in webitel-ui docs',
     },
     outside: {

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

@@ -78,8 +78,9 @@ export default {
       return '';
     },
     loaderColor() {
-      if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'main';
-      return 'contrast';
+      return 'main';
+      // if (['success', 'transfer', 'error', 'job'].includes(this.color)) return 'on-dark';
+      // return 'on-light';
     },
   },
 };

package/src/components/wt-context-menu/_variables.scss

@@ -1,9 +1,13 @@
 :root {
-  --context-menu-option-color--hover: var(--secondary-color);
+  --wt-context-menu-option-padding: var(--spacing-xs);
 
-  --context-menu-background-color: var(--main-color);
-
-  --context-menu-option-padding: var(--spacing-xs);
+  --wt-context-menu-background-color: var(--content-wrapper-color);
+  --wt-context-menu-option-text-color: var(--text-main-color);
+  --wt-context-menu-option-background-hover-color: var(--dp-24-surface-color);
+  --wt-context-menu-option-background-disabled-color: var(--dp-14-surface-color);
+  --wt-context-menu-option-text-disabled-color: var(--grey-lighten-3);
+}
 
-  --context-menu-option-color--disabled: var(--text--disabled-color);
+:root.theme--dark {
+  --wt-context-menu-option-text-disabled-color: var(--grey-darken-2);
 }

package/src/components/wt-context-menu/wt-context-menu.vue

@@ -92,7 +92,7 @@ function handleOptionClick({ option, index, hide }) {
 
 .wt-context-menu__menu {
   @extend %typo-body-2;
-  background-color: var(--context-menu-background-color);
+  background-color: var(--wt-context-menu-background-color);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow);
   transition: var(--transition);
@@ -115,17 +115,19 @@ function handleOptionClick({ option, index, hide }) {
 
 .wt-context-menu__option {
   display: block;
-  padding: var(--context-menu-option-padding);
+  padding: var(--wt-context-menu-option-padding);
   cursor: pointer;
+  color: var(--wt-context-menu-option-text-color);
 
   &:hover {
-    background-color: var(--context-menu-option-color--hover);
+    background-color: var(--wt-context-menu-option-hover-color);
     transition: var(--transition);
   }
 
   &--disabled {
     pointer-events: none;
-    color: var(--context-menu-option-color--disabled);
+    color: var(--wt-context-menu-option-text-disabled-color);
+    background-color: var(--wt-context-menu-option-background-disabled-color);
   }
 }
 </style>

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

@@ -34,23 +34,23 @@
 }
 
 .dp__theme_light {
-  --dp-background-color: var(--main-color);
-  --dp-text-color: var(--contrast-color);
-  --dp-hover-color: var(--secondary-color-50);
-  --dp-hover-text-color: var(--contrast-color);
-  --dp-hover-icon-color: var(--icon-color--hover);
+  --dp-background-color: var(--content-wrapper-color);
+  --dp-text-color: var(--text-main-color);
+  //--dp-hover-color: var(--secondary-color-50);
+  //--dp-hover-text-color: var(--contrast-color);
+  --dp-hover-icon-color: var(--icon-btn-hover-color);
   --dp-primary-color: var(--primary-color);
-  --dp-primary-text-color: var(--main-color);
+  --dp-primary-text-color: var(--primary-on-color);
   --dp-secondary-color: var(--secondary-color);
-  --dp-border-color: var(--form-border-color);
+  --dp-border-color: var(--wt-text-field-input-border-color);
   --dp-menu-border-color: transparent;
-  --dp-border-color-hover: var(--form-border--hover-color);
-  --dp-disabled-color: var(--disabled-color);
+  //--dp-border-color-hover: var(--form-border--hover-color);
+  --dp-disabled-color: var(--wt-text-field-input-background-disabled-color);
+  --dp-success-color: var(--success-color);
+  --dp-icon-color: var(--icon-color);
+  --dp-danger-color: var(--error-color);
   //--dp-scroll-bar-background: #f3f3f3;
   //--dp-scroll-bar-color: #959595;
-  --dp-success-color: var(--true-color);
   //--dp-success-color-disabled: #a3d9b1;
-  --dp-icon-color: var(--icon-color);
-  --dp-danger-color: var(--false-color);
   //--dp-highlight-color: rgba(25, 118, 210, 0.1);
 }

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

@@ -1,5 +1,9 @@
 
 :root {
   --divider-border: 1px solid;
-  --divider-border-color: var(--page-bg-color);
-}
+  --divider-border-color: var(--grey-lighten-5);
+}
+
+:root.theme--dark {
+  --divider-border-color: var(--grey-darken-3);
+}

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

@@ -0,0 +1,4 @@
+
+:root {
+  --wt-dummy-text-color: var(--text-main-color);
+}

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

@@ -56,6 +56,10 @@ const emits = defineEmits([
 
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-dummy {
   text-align: center;
@@ -72,6 +76,7 @@ const emits = defineEmits([
 
   &__text {
     @extend %typo-body-1;
+    color: var(--wt-dummy-text-color);
   }
 }
 </style>

package/src/components/wt-error-page/_variables.scss

@@ -0,0 +1,5 @@
+
+:root {
+  --wt-error-page-background-color: var(--content-wrapper-color);
+  --wt-error-page-text-color: var(--text-main-color);
+}

package/src/components/wt-error-page/wt-error-page.vue

@@ -81,11 +81,11 @@ export default {
   min-width: 100vw;
   min-height: 100vh;
   padding: 90px;
-  background: var(--main-color);
+  background: var(--wt-error-page-background-color);
 
   &__wrapper {
     text-align: center;
-    //color: var(--text-contrast-color);
+    color: var(--wt-error-page-text-color);
   }
 
   &__img {

package/src/components/wt-expansion-panel/_variables.scss

@@ -0,0 +1,7 @@
+
+:root {
+  --wt-expansion-panel-header-background-color: var(--dp-16-surface-color);
+  --wt-expansion-panel-header-title-color: var(--text-main-color);
+  --wt-expansion-panel-content-background-color: var(--content-wrapper-color);
+  --wt-expansion-panel-content-text-color: var(--text-main-color);
+}

package/src/components/wt-expansion-panel/wt-expansion-panel.vue

@@ -16,7 +16,10 @@
       />
     </div>
     <wt-expand-transition>
-      <div v-show="open">
+      <div
+        class="wt-expansion-panel-body"
+        v-show="open"
+      >
         <slot />
       </div>
     </wt-expand-transition>
@@ -36,6 +39,10 @@ const props = defineProps({
 const open = ref(true);
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-expansion-panel {
   .wt-expansion-panel-header {
@@ -44,8 +51,14 @@ const open = ref(true);
     align-items: center;
     padding: var(--spacing-2xs) var(--spacing-xs);
     cursor: pointer;
+    color: var(--wt-expansion-panel-header-title-color);
     border-radius: var(--spacing-2xs);
-    background-color: var(--secondary-color-50);
+    background-color: var(--wt-expansion-panel-header-background-color);
+  }
+
+  .wt-expansion-panel-body {
+    color: var(--wt-expansion-panel-content-text-color);
+    background-color: var(--wt-expansion-panel-content-background-color);
   }
 
   .wt-icon {

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

@@ -1,6 +1,6 @@
 
 :root {
-  --headline-min-height: 40px; // button/search-bar height
+  --headline-min-height : 40px; // button/search-bar height
   --headline-title-margin: var(--spacing-sm);
-  --headline-background: var(--main-color);
-}
+  --wt-headline-background-color: var(--content-wrapper-color);
+}

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

@@ -33,7 +33,7 @@ export default {
   flex-wrap: wrap;
   min-height: var(--headline-min-height);
   box-sizing: border-box;
-  background: var(--headline-background);
+  background: var(--wt-headline-background-color);
   border-radius: var(--border-radius);
 }
 

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

@@ -2,6 +2,4 @@
 :root {
   --input-info-min-height: var(--spacing-sm);
   --input-info-margin: 5px;
-  --input-info-color: var(--form-label-color);
-  --input-info--invalid-color: var(--false-color);
 }

package/src/components/wt-input-info/wt-input-info.vue

@@ -30,11 +30,11 @@ export default {
 .wt-input-info {
   @extend %typo-caption;
   margin-top: var(--input-info-margin);
-  color: var(--input-info-color);
+  color: var(--wt-helper-text-color);
   min-height: var(--input-info-min-height);
 
   &--invalid {
-    color: var(--input-info--invalid-color);
+    color: var(--wt-helper-text-invalid-color);
   }
 }
 </style>

package/src/components/wt-item-link/_variables.scss

@@ -0,0 +1,4 @@
+
+:root {
+  --wt-item-link-text-color: var(--text-main-color);
+}

package/src/components/wt-item-link/wt-item-link.vue

@@ -39,11 +39,16 @@ const to = computed(() => props.link || {
   });
 </script>
 
+<style lang="scss">
+@import './variables.scss';
+</style>
+
 <style lang="scss" scoped>
 .wt-item-link {
   display: flex;
   align-items: center;
   cursor: pointer;
+  color: var(--wt-item-link-text-color);
   transition: var(--transition);
 
   &:hover {

package/src/components/wt-load-bar/_variables.scss

@@ -3,4 +3,6 @@
   --load-bar-height: 6px;
   --load-bar-padding: 1px;
   --load-bar-border-radius: 50px;
+
+  --wt-load-bar-progress-color: var(--primary-color);
 }

package/src/components/wt-load-bar/wt-load-bar.vue

@@ -43,7 +43,7 @@ export default {
   width: 100%;
   padding: var(--load-bar-padding);
   line-height: 0;
-  border: 1px solid var(--primary-color);
+  border: 1px solid var(--wt-load-bar-progress-color);
   border-radius: var(--border-radius);
 }
 
@@ -52,7 +52,7 @@ export default {
   height: var(--load-bar-height);
   transition: var(--transition);
   border-radius: var(--load-bar-border-radius);
-  background: var(--primary-color);
+  background: var(--wt-load-bar-progress-color);
   will-change: width;
 }
 </style>

package/src/components/wt-loader/_internals/wt-loader--md.vue

@@ -37,7 +37,7 @@
       top: 37px;
       left: 19px;
       transform: translate(-18px, -18px);
-      background: var(--loader-dot-color);
+      background: var(--wt-loader-md-point-color);
       border-radius: 50%;
       animation: dotRect var(--loader-animation-duration) linear infinite;
     }
@@ -49,7 +49,7 @@
 
       &__rect {
         fill: none;
-        stroke: var(--loader-path-color);
+        stroke: var(--wt-loader-md-path-color);
         stroke-width: 10px;
         stroke-linejoin: round;
         stroke-linecap: round;

package/src/components/wt-loader/_internals/wt-loader--sm.vue

@@ -20,8 +20,8 @@ export default {
   props: {
     color: {
       type: String,
-      default: 'contrast',
-      description: '["main", "contrast", "icon"]',
+      default: 'main',
+      description: '["main", "icon", "on-dark", "on-light"]',
     },
   },
 };
@@ -49,10 +49,16 @@ export default {
     stroke-width: 3;
   }
   &--main circle {
-    stroke: var(--main-color);
+    stroke: var(--wt-loader-sm-path-main-color);
   }
   &--icon circle {
-    stroke: var(--icon-color);
+    stroke: var(--wt-loader-sm-path-icon-color);
+  }
+  &--on-light circle {
+    stroke: var(--wt-loader-sm-path-on-light-color);
+  }
+  &--on-dark circle {
+    stroke: var(--wt-loader-sm-path-on-dark-color);
   }
 }
 

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

@@ -2,7 +2,20 @@
 :root {
   --loader-size: 44px;
   --loader-dot-size: 6px;
-  --loader-path-color: var(--contrast-color);
-  --loader-dot-color: var(--primary-color);
   --loader-animation-duration: 3s;
+
+  --wt-loader-md-path-color: var(--grey-darken-2);
+  --wt-loader-md-point-color: var(--primary-color);
+
+  --wt-loader-sm-path-main-color: var(--grey-darken-2);
+  --wt-loader-sm-path-icon-color: var(--icon-color);
+  --wt-loader-sm-path-on-light-color: var(--icon-on-light-color);
+  --wt-loader-sm-path-on-dark-color: var(--icon-on-dark-color);
+}
+
+:root.theme--dark {
+  --wt-loader-md-path-color: var(--grey-lighten-2);
+
+  --wt-loader-sm-path-main-color: var(--grey-lighten-2);
+
 }

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

@@ -28,8 +28,8 @@ export default {
     },
     color: {
       type: String,
-      default: 'contrast',
-      description: '["main", "contrast"]',
+      default: 'main',
+      description: '["main", "icon", "on-dark", "on-light"]',
     },
   },
 };