@mozaic-ds/vue 1.0.0-rc.1 → 1.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.3",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,10 +23,10 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.44.0",
-    "@mozaic-ds/icons": "^1.44.0",
-    "@mozaic-ds/styles": "^1.44.0",
-    "@mozaic-ds/web-fonts": "^1.22.0",
+    "@mozaic-ds/css-dev-tools": "1.47.0",
+    "@mozaic-ds/icons": "1.47.1",
+    "@mozaic-ds/styles": "1.47.0",
+    "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.25.5",
     "libphonenumber-js": "^1.10.14",
     "vue": "^2.6.14",

package/src/components/autocomplete/MAutocomplete.vue

@@ -221,15 +221,14 @@ export default {
     },
 
     listboxValue: function (val) {
-      const selectedItems = this.getSelectedItems(val);
-
-      const seletedLabels = selectedItems.map(
-        (item) => item[this.dataTextExpr]
-      );
-
-      this.inputValue = seletedLabels.join(', ');
+      if (!this.multiple) {
+        const selectedItems = this.getSelectedItems(val);
+        const seletedLabels = selectedItems.map(
+          (item) => item[this.dataTextExpr]
+        );
 
-      if (this.multiple) {
+        this.inputValue = seletedLabels.join(', ');
+      } else {
         this.tagValue = val;
       }
     },

package/src/components/dropdown/MDropdown.vue

@@ -21,6 +21,7 @@
       type="button"
       class="mc-select mc-dropdown__trigger"
       :class="{ 'is-open': openState }"
+      :disabled="disabled"
       @click="openState = !openState"
     >
       {{ buttonValue }}

package/src/components/modal/MModal.vue

@@ -14,7 +14,7 @@
         :class="{ 'is-open': open }"
         role="document"
       >
-        <header class="mc-modal__header">
+        <div class="mc-modal__header">
           <component
             :is="modalTitleTag"
             id="modal_title"
@@ -33,8 +33,8 @@
               {{ closeButtonText }}
             </span>
           </button>
-        </header>
-        <main ref="body" class="mc-modal__body">
+        </div>
+        <div ref="body" class="mc-modal__body">
           <article ref="content" class="mc-modal__content">
             <component :is="titleTag" v-if="title" class="mc-modal__heading">
               {{ title }}
@@ -43,10 +43,10 @@
               <slot />
             </div>
           </article>
-        </main>
-        <footer v-if="$slots.footer" class="mc-modal__footer">
+        </div>
+        <div v-if="$slots.footer" class="mc-modal__footer">
           <slot name="footer" />
-        </footer>
+        </div>
       </div>
     </div>
     <keep-alive>

package/src/components/passwordinput/MPasswordInput.vue

@@ -6,6 +6,7 @@
       class="mc-text-input mc-password-input__control"
       :class="setInputClasses"
       :aria-invalid="isInvalid"
+      spellcheck="false"
     />
 
     <button

package/src/components/phonenumber/MPhoneNumber.vue

@@ -74,6 +74,7 @@
       :value="phoneNumber"
       :placeholder="placeholder"
       :maxlength="maxlength"
+      spellcheck="false"
       @blur="onChangePhoneNumber"
       @focus="(event) => (formatOnBlur ? cleanFormat(event) : null)"
       @keyup="onKeyPressPhoneNumber"

package/src/components/quantityselector/MQuantitySelector.vue

@@ -29,7 +29,7 @@
       :size="small ? 's' : null"
       :disabled="disabled"
       role="spinbutton"
-      @input="handle"
+      @change="handle"
       @focus="onFocus"
       @keypress="integerOnly && formatValue($event)"
       v-on="$listeners"
@@ -130,7 +130,7 @@ export default {
       if (this.currentValue > this.valuemax) {
         this.currentValue = this.valuemax;
       }
-      if (this.currentValue < this.valuemin) {
+      if (this.currentValue <= this.valuemin) {
         this.currentValue = this.valuemin;
       }
       this.$emit('input', this.currentValue);

package/src/components/tabs/MTab.vue

@@ -19,7 +19,7 @@
           v-bind="tab.attrs"
           :to="tab.to"
           class="mc-tabs__element"
-          :class="setLinkClass(tab)"
+          :class="setActiveClass(tab)"
           active-class="mc-tabs__element--selected"
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
@@ -35,9 +35,14 @@
           class="mc-tabs__element"
           role="tab"
           :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setLinkClass(tab)"
-          v-bind="tab.attrs"
-          @click="onTabClicked($event, tab, index)"
+          :class="setActiveClass(tab)"
+          @click="
+            manageTabs(
+              $event.target,
+              $event,
+              Object.assign({ index: index }, tab)
+            )
+          "
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
         </component>
@@ -89,40 +94,41 @@ export default {
     },
     activeIndex: {
       type: Number,
-      default: null,
+      default: 0,
     },
   },
 
   data() {
     return {
       tablist: null,
-      localActiveIndex: null,
     };
   },
 
   computed: {
     setClasses() {
-      return {
-        'mc-tabs--full': this.align === 'full',
-        'mc-tabs--full-centered': this.align === 'centered',
-        'mc-tabs--dropdown': this.type === 'dropdown',
-        'mc-tabs--no-divider': !this.shadow,
-      };
+      const classes = [
+        {
+          'mc-tabs--full': this.align === 'full',
+          'mc-tabs--full-centered': this.align === 'centered',
+          'mc-tabs--dropdown': this.type === 'dropdown',
+          'mc-tabs--no-shadow': !this.shadow,
+        },
+      ];
+
+      return classes;
     },
   },
 
   watch: {
     activeIndex(newValue) {
-      this.localActiveIndex = newValue;
-    },
-    localActiveIndex: {
-      handler: function (newValue) {
-        const selectedTab = this.getTabFromIndex(newValue);
-        if (selectedTab) {
-          this.setTabState(selectedTab);
-        }
-      },
-      immediate: true,
+      const tab = this.getTabFromIndex(newValue);
+      if (tab && this.tabs[newValue]) {
+        this.manageTabs(
+          tab,
+          null,
+          Object.assign({ index: newValue }, this.tabs[newValue])
+        );
+      }
     },
   },
 
@@ -132,16 +138,17 @@ export default {
         this.tablist = this.$refs.tablist;
 
         if (this.activeIndex) {
-          this.localActiveIndex = this.activeIndex;
+          const tab = this.getTabFromIndex(this.activeIndex);
+          if (tab) {
+            this.manageTabs(tab);
+          }
         } else {
-          const isActive = this.tabs.some(
-            (tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active') &&
-              tab.active === true
+          const isActive = this.tabs.some((tab) =>
+            Object.prototype.hasOwnProperty.call(tab, 'active')
           );
-
           if (!isActive) {
-            this.localActiveIndex = 0;
+            const firstTab = this.tablist.querySelector('.mc-tabs__element');
+            this.manageTabs(firstTab);
           }
         }
       }
@@ -149,20 +156,34 @@ export default {
   },
 
   methods: {
-    setLinkClass: function (tab) {
-      return {
-        'mc-tabs__element--selected': tab.active,
-        'mc-tabs__element--disabled': tab.disabled,
-      };
+    setActiveClass: function (tab) {
+      const tabClasses = [];
+
+      if (tab.active) {
+        tabClasses.push('mc-tabs__element--selected');
+      }
+
+      if (tab.disabled) {
+        tabClasses.push('mc-tabs__element--disabled');
+      }
+
+      return tabClasses;
     },
-    setTabState(tab) {
+    manageTabs: function (el, e, tab) {
+      if (tab && tab.disabled) {
+        return;
+      }
+      if (e) {
+        this.$emit('tab-clicked', e.currentTarget, tab);
+      }
+
       this.tablist.querySelectorAll('.mc-tabs__element').forEach((el) => {
         el.classList.remove('mc-tabs__element--selected');
         el.setAttribute('aria-selected', 'false');
       });
 
-      tab.classList.add('mc-tabs__element--selected');
-      tab.setAttribute('aria-selected', 'true');
+      el.classList.add('mc-tabs__element--selected');
+      el.setAttribute('aria-selected', 'true');
     },
     getTabFromIndex: function (index) {
       if (
@@ -173,22 +194,11 @@ export default {
         return this.tablist.children[index].children[0];
       }
     },
-    onTabClicked(e, tab, index) {
-      if (tab && tab.disabled) {
-        return;
-      }
-
-      if (typeof this.activeIndex !== 'number') {
-        this.localActiveIndex = index;
-      }
-
-      this.$emit('tab-clicked', e.target, Object.assign({ index: index }, tab));
-    },
   },
 };
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tabs';
+@import 'settings-tools/all-settings';
+@import 'components/c.tabs';
 </style>

package/src/components/tags/MTag.vue

@@ -38,6 +38,7 @@
   </span>
   <span
     v-else-if="type === 'removable'"
+    :id="id"
     class="mc-tag-removable"
     :class="setClasses"
   >
@@ -47,7 +48,8 @@
     <button
       type="button"
       class="mc-tag-removable__remove"
-      @click="$emit('remove-tag')"
+      :disabled="disabled"
+      @click="$emit('remove-tag', id)"
     />
   </span>
 </template>

package/src/components/textarea/MTextArea.vue

@@ -7,6 +7,7 @@
     ]"
     :aria-invalid="isInvalid"
     :value="value"
+    spellcheck="false"
     v-on="inputListeners"
   />
 </template>

package/src/components/textinput/MTextInputField.vue

@@ -6,6 +6,7 @@
     :class="setClasses"
     :aria-invalid="isInvalid"
     :value="value"
+    spellcheck="false"
     v-on="inputListeners"
   />
 </template>

package/src/tokens/adeo/android/colors.xml

@@ -177,7 +177,9 @@
   <color name="color_button_bordered_disabled_background">#ffcccccc</color>
   <color name="color_button_bordered_disabled_font">#ff666666</color>
   <color name="color_button_bordered_active_background">#ff91d5db</color>
+  <color name="color_button_bordered_active_font">#ff004e57</color>
   <color name="color_button_bordered_hover_background">#ffd9f0f3</color>
+  <color name="color_button_bordered_hover_font">#ff006974</color>
   <color name="color_button_bordered_primary_02_background">#ffffffff</color>
   <color name="color_button_bordered_primary_02_border">#ff6a7081</color>
   <color name="color_button_bordered_primary_02_font">#ff6a7081</color>
@@ -201,7 +203,9 @@
   <color name="color_button_bordered_danger_disabled_background">#ffcccccc</color>
   <color name="color_button_bordered_danger_disabled_font">#ff666666</color>
   <color name="color_button_bordered_danger_active_background">#fff8bcbb</color>
+  <color name="color_button_bordered_danger_active_font">#ff530000</color>
   <color name="color_button_bordered_danger_hover_background">#fffdeaea</color>
+  <color name="color_button_bordered_danger_hover_font">#ff8c0003</color>
   <color name="color_card_bordered_background">#ffffffff</color>
   <color name="color_card_bordered_border">#ff808080</color>
   <color name="color_dialog_background">#ffffffff</color>
@@ -365,13 +369,13 @@
   <color name="color_tabs_background">#ffffffff</color>
   <color name="color_tabs_shadow">#ff000000</color>
   <color name="color_tabs_default">#ff666666</color>
-  <color name="color_tabs_element_background">#ffeeeff1</color>
+  <color name="color_tabs_element_background">#ffeeedea</color>
   <color name="color_tabs_hover">#ff004e57</color>
   <color name="color_tabs_disabled_background">#ffcccccc</color>
-  <color name="color_tabs_active_background">#ffcfd2d8</color>
-  <color name="color_tabs_active_text">#ff333333</color>
-  <color name="color_tabs_selected_border">#ff000000</color>
-  <color name="color_tabs_selected_text">#ff000000</color>
+  <color name="color_tabs_active_background">#ffdddcd5</color>
+  <color name="color_tabs_active_text">#ff004e57</color>
+  <color name="color_tabs_selected_border">#ff007f8c</color>
+  <color name="color_tabs_selected_text">#ff007f8c</color>
   <color name="color_tabs_active_disabled">#ff91d5db</color>
   <color name="color_tag_text_light_background">#ffffffff</color>
   <color name="color_tag_text_light_border">#ff808080</color>

package/src/tokens/adeo/css/_variables.scss

@@ -173,7 +173,9 @@ $color-button-bordered-focus-border: var(--color-button-bordered-focus-border, #
 $color-button-bordered-disabled-background: var(--color-button-bordered-disabled-background, #cccccc);
 $color-button-bordered-disabled-font: var(--color-button-bordered-disabled-font, #666666);
 $color-button-bordered-active-background: var(--color-button-bordered-active-background, #91d5db);
+$color-button-bordered-active-font: var(--color-button-bordered-active-font, #004e57);
 $color-button-bordered-hover-background: var(--color-button-bordered-hover-background, #d9f0f3);
+$color-button-bordered-hover-font: var(--color-button-bordered-hover-font, #006974);
 $color-button-bordered-primary-02-background: var(--color-button-bordered-primary-02-background, #ffffff);
 $color-button-bordered-primary-02-border: var(--color-button-bordered-primary-02-border, #6a7081);
 $color-button-bordered-primary-02-font: var(--color-button-bordered-primary-02-font, #6a7081);
@@ -197,7 +199,9 @@ $color-button-bordered-danger-focus-border: var(--color-button-bordered-danger-f
 $color-button-bordered-danger-disabled-background: var(--color-button-bordered-danger-disabled-background, #cccccc);
 $color-button-bordered-danger-disabled-font: var(--color-button-bordered-danger-disabled-font, #666666);
 $color-button-bordered-danger-active-background: var(--color-button-bordered-danger-active-background, #f8bcbb);
+$color-button-bordered-danger-active-font: var(--color-button-bordered-danger-active-font, #530000);
 $color-button-bordered-danger-hover-background: var(--color-button-bordered-danger-hover-background, #fdeaea);
+$color-button-bordered-danger-hover-font: var(--color-button-bordered-danger-hover-font, #8c0003);
 $color-card-bordered-background: var(--color-card-bordered-background, #ffffff);
 $color-card-bordered-border: var(--color-card-bordered-border, #808080);
 $color-dialog-background: var(--color-dialog-background, #ffffff);
@@ -361,13 +365,13 @@ $color-stepper-title: var(--color-stepper-title, #00919f);
 $color-tabs-background: var(--color-tabs-background, #ffffff);
 $color-tabs-shadow: var(--color-tabs-shadow, #000000);
 $color-tabs-default: var(--color-tabs-default, #666666);
-$color-tabs-element-background: var(--color-tabs-element-background, #eeeff1);
+$color-tabs-element-background: var(--color-tabs-element-background, #eeedea);
 $color-tabs-hover: var(--color-tabs-hover, #004e57);
 $color-tabs-disabled-background: var(--color-tabs-disabled-background, #cccccc);
-$color-tabs-active-background: var(--color-tabs-active-background, #cfd2d8);
-$color-tabs-active-text: var(--color-tabs-active-text, #333333);
-$color-tabs-selected-border: var(--color-tabs-selected-border, #000000);
-$color-tabs-selected-text: var(--color-tabs-selected-text, #000000);
+$color-tabs-active-background: var(--color-tabs-active-background, #dddcd5);
+$color-tabs-active-text: var(--color-tabs-active-text, #004e57);
+$color-tabs-selected-border: var(--color-tabs-selected-border, #007f8c);
+$color-tabs-selected-text: var(--color-tabs-selected-text, #007f8c);
 $color-tabs-active-disabled: var(--color-tabs-active-disabled, #91d5db);
 $color-tag-text-light-background: var(--color-tag-text-light-background, #ffffff);
 $color-tag-text-light-border: var(--color-tag-text-light-border, #808080);

package/src/tokens/adeo/css/root.scss

@@ -182,11 +182,13 @@
   --color-tag-text-light-border: var(--color-grey-500);
   --color-tag-text-light-background: var(--color-grey-000);
   --color-tabs-active-disabled: var(--color-primary-01-200);
-  --color-tabs-selected-border: var(--color-grey-999);
-  --color-tabs-active-background: var(--color-primary-02-200);
+  --color-tabs-selected-text: var(--color-primary-01-600);
+  --color-tabs-selected-border: var(--color-primary-01-600);
+  --color-tabs-active-text: var(--color-primary-01-800);
+  --color-tabs-active-background: var(--color-secondary-sandgrey-200);
   --color-tabs-disabled-background: var(--color-grey-200);
   --color-tabs-hover: var(--color-primary-01-800);
-  --color-tabs-element-background: var(--color-primary-02-100);
+  --color-tabs-element-background: var(--color-secondary-sandgrey-100);
   --color-tabs-shadow: var(--color-grey-999);
   --color-tabs-background: var(--color-grey-000);
   --color-stepper-title: var(--color-primary-01-500);
@@ -344,7 +346,9 @@
   --color-dialog-background: var(--color-grey-000);
   --color-card-bordered-border: var(--color-grey-500);
   --color-card-bordered-background: var(--color-grey-000);
+  --color-button-bordered-danger-hover-font: var(--color-danger-700);
   --color-button-bordered-danger-hover-background: var(--color-secondary-red-100);
+  --color-button-bordered-danger-active-font: var(--color-danger-800);
   --color-button-bordered-danger-active-background: var(--color-secondary-red-200);
   --color-button-bordered-danger-disabled-font: var(--color-grey-600);
   --color-button-bordered-danger-disabled-background: var(--color-grey-200);
@@ -368,7 +372,9 @@
   --color-button-bordered-primary-02-font: var(--color-primary-02-500);
   --color-button-bordered-primary-02-border: var(--color-primary-02-500);
   --color-button-bordered-primary-02-background: var(--color-grey-000);
+  --color-button-bordered-hover-font: var(--color-primary-01-700);
   --color-button-bordered-hover-background: var(--color-primary-01-100);
+  --color-button-bordered-active-font: var(--color-primary-01-800);
   --color-button-bordered-active-background: var(--color-primary-01-200);
   --color-button-bordered-disabled-font: var(--color-grey-600);
   --color-button-bordered-disabled-background: var(--color-grey-200);
@@ -434,8 +440,6 @@
   --color-badge-info-text: var(--color-info-700);
   --color-badge-info-border: var(--color-info-500);
   --color-badge-info-background: var(--color-info-100);
-  --color-tabs-selected-text: var(--color-font-darkest);
-  --color-tabs-active-text: var(--color-font-dark);
   --color-tabs-default: var(--color-font-light);
   --color-fields-help: var(--color-font-light);
   --color-fields-requirement: var(--color-font-light);

package/src/tokens/adeo/ios/StyleDictionaryColor.h

@@ -181,7 +181,9 @@ ColorButtonBorderedFocusBorder,
 ColorButtonBorderedDisabledBackground,
 ColorButtonBorderedDisabledFont,
 ColorButtonBorderedActiveBackground,
+ColorButtonBorderedActiveFont,
 ColorButtonBorderedHoverBackground,
+ColorButtonBorderedHoverFont,
 ColorButtonBorderedPrimary02Background,
 ColorButtonBorderedPrimary02Border,
 ColorButtonBorderedPrimary02Font,
@@ -205,7 +207,9 @@ ColorButtonBorderedDangerFocusBorder,
 ColorButtonBorderedDangerDisabledBackground,
 ColorButtonBorderedDangerDisabledFont,
 ColorButtonBorderedDangerActiveBackground,
+ColorButtonBorderedDangerActiveFont,
 ColorButtonBorderedDangerHoverBackground,
+ColorButtonBorderedDangerHoverFont,
 ColorCardBorderedBackground,
 ColorCardBorderedBorder,
 ColorDialogBackground,

package/src/tokens/adeo/ios/StyleDictionaryColor.m

@@ -192,7 +192,9 @@
 [UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
 [UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:0.569f green:0.835f blue:0.859f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
 [UIColor colorWithRed:0.851f green:0.941f blue:0.953f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.412f blue:0.455f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.416f green:0.439f blue:0.506f alpha:1.000f],
 [UIColor colorWithRed:0.416f green:0.439f blue:0.506f alpha:1.000f],
@@ -216,7 +218,9 @@
 [UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
 [UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:0.973f green:0.737f blue:0.733f alpha:1.000f],
+[UIColor colorWithRed:0.325f green:0.000f blue:0.000f alpha:1.000f],
 [UIColor colorWithRed:0.992f green:0.918f blue:0.918f alpha:1.000f],
+[UIColor colorWithRed:0.549f green:0.000f blue:0.012f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.502f green:0.502f blue:0.502f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
@@ -380,13 +384,13 @@
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
 [UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
-[UIColor colorWithRed:0.933f green:0.937f blue:0.945f alpha:1.000f],
+[UIColor colorWithRed:0.933f green:0.929f blue:0.918f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
 [UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
-[UIColor colorWithRed:0.812f green:0.824f blue:0.847f alpha:1.000f],
-[UIColor colorWithRed:0.200f green:0.200f blue:0.200f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
 [UIColor colorWithRed:0.569f green:0.835f blue:0.859f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.502f green:0.502f blue:0.502f alpha:1.000f],

package/src/tokens/adeo/ios/StyleDictionaryColor.swift

@@ -24,9 +24,11 @@ public class StyleDictionaryColor {
     public static let colorBreadcrumbArrow = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1)
     public static let colorBreadcrumbArrowInvert = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorButtonBorderedActiveBackground = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
+    public static let colorButtonBorderedActiveFont = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
     public static let colorButtonBorderedBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorButtonBorderedBorder = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
     public static let colorButtonBorderedDangerActiveBackground = UIColor(red: 0.973, green: 0.737, blue: 0.733, alpha: 1)
+    public static let colorButtonBorderedDangerActiveFont = UIColor(red: 0.325, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorButtonBorderedDangerBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorButtonBorderedDangerBorder = UIColor(red: 0.776, green: 0.067, blue: 0.071, alpha: 1)
     public static let colorButtonBorderedDangerDisabledBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
@@ -34,11 +36,13 @@ public class StyleDictionaryColor {
     public static let colorButtonBorderedDangerFocusBorder = UIColor(red: 0.549, green: 0.000, blue: 0.012, alpha: 1)
     public static let colorButtonBorderedDangerFont = UIColor(red: 0.776, green: 0.067, blue: 0.071, alpha: 1)
     public static let colorButtonBorderedDangerHoverBackground = UIColor(red: 0.992, green: 0.918, blue: 0.918, alpha: 1)
+    public static let colorButtonBorderedDangerHoverFont = UIColor(red: 0.549, green: 0.000, blue: 0.012, alpha: 1)
     public static let colorButtonBorderedDisabledBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
     public static let colorButtonBorderedDisabledFont = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
     public static let colorButtonBorderedFocusBorder = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
     public static let colorButtonBorderedFont = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
     public static let colorButtonBorderedHoverBackground = UIColor(red: 0.851, green: 0.941, blue: 0.953, alpha: 1)
+    public static let colorButtonBorderedHoverFont = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
     public static let colorButtonBorderedNeutralActiveBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
     public static let colorButtonBorderedNeutralBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorButtonBorderedNeutralBorder = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1)
@@ -366,16 +370,16 @@ public class StyleDictionaryColor {
     public static let colorSuccess700 = UIColor(red: 0.000, green: 0.412, blue: 0.008, alpha: 1)
     public static let colorSuccess800 = UIColor(red: 0.012, green: 0.314, blue: 0.063, alpha: 1)
     public static let colorSuccess900 = UIColor(red: 0.008, green: 0.212, blue: 0.094, alpha: 1)
-    public static let colorTabsActiveBackground = UIColor(red: 0.812, green: 0.824, blue: 0.847, alpha: 1)
+    public static let colorTabsActiveBackground = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
     public static let colorTabsActiveDisabled = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
-    public static let colorTabsActiveText = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1)
+    public static let colorTabsActiveText = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
     public static let colorTabsBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTabsDefault = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
     public static let colorTabsDisabledBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
-    public static let colorTabsElementBackground = UIColor(red: 0.933, green: 0.937, blue: 0.945, alpha: 1)
+    public static let colorTabsElementBackground = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
     public static let colorTabsHover = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
-    public static let colorTabsSelectedBorder = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
-    public static let colorTabsSelectedText = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
+    public static let colorTabsSelectedBorder = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorTabsSelectedText = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
     public static let colorTabsShadow = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorTagLinkDarkActiveBackground = UIColor(red: 0.302, green: 0.302, blue: 0.302, alpha: 1)
     public static let colorTagLinkDarkBackground = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)

package/src/tokens/adeo/js/tokens.js

@@ -176,7 +176,9 @@ export const ColorButtonBorderedFocusBorder = "#006974";
 export const ColorButtonBorderedDisabledBackground = "#cccccc";
 export const ColorButtonBorderedDisabledFont = "#666666";
 export const ColorButtonBorderedActiveBackground = "#91d5db";
+export const ColorButtonBorderedActiveFont = "#004e57";
 export const ColorButtonBorderedHoverBackground = "#d9f0f3";
+export const ColorButtonBorderedHoverFont = "#006974";
 export const ColorButtonBorderedPrimary02Background = "#ffffff";
 export const ColorButtonBorderedPrimary02Border = "#6a7081";
 export const ColorButtonBorderedPrimary02Font = "#6a7081";
@@ -200,7 +202,9 @@ export const ColorButtonBorderedDangerFocusBorder = "#8c0003";
 export const ColorButtonBorderedDangerDisabledBackground = "#cccccc";
 export const ColorButtonBorderedDangerDisabledFont = "#666666";
 export const ColorButtonBorderedDangerActiveBackground = "#f8bcbb";
+export const ColorButtonBorderedDangerActiveFont = "#530000";
 export const ColorButtonBorderedDangerHoverBackground = "#fdeaea";
+export const ColorButtonBorderedDangerHoverFont = "#8c0003";
 export const ColorCardBorderedBackground = "#ffffff";
 export const ColorCardBorderedBorder = "#808080";
 export const ColorDialogBackground = "#ffffff";
@@ -364,13 +368,13 @@ export const ColorStepperTitle = "#00919f";
 export const ColorTabsBackground = "#ffffff";
 export const ColorTabsShadow = "#000000";
 export const ColorTabsDefault = "#666666";
-export const ColorTabsElementBackground = "#eeeff1";
+export const ColorTabsElementBackground = "#eeedea";
 export const ColorTabsHover = "#004e57";
 export const ColorTabsDisabledBackground = "#cccccc";
-export const ColorTabsActiveBackground = "#cfd2d8";
-export const ColorTabsActiveText = "#333333";
-export const ColorTabsSelectedBorder = "#000000";
-export const ColorTabsSelectedText = "#000000";
+export const ColorTabsActiveBackground = "#dddcd5";
+export const ColorTabsActiveText = "#004e57";
+export const ColorTabsSelectedBorder = "#007f8c";
+export const ColorTabsSelectedText = "#007f8c";
 export const ColorTabsActiveDisabled = "#91d5db";
 export const ColorTagTextLightBackground = "#ffffff";
 export const ColorTagTextLightBorder = "#808080";