@mozaic-ds/vue 0.29.0 → 0.30.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.29.0",
+  "version": "0.30.0-beta.0",
   "description": "Vue.js implementation of Mozaic Design System",
   "author": "Adeo - Mozaic Design System",
   "scripts": {
@@ -23,9 +23,9 @@
     "postinstall.js"
   ],
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "1.44.0",
-    "@mozaic-ds/icons": "1.45.0",
-    "@mozaic-ds/styles": "1.45.1",
+    "@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",

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/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/tabs/MTab.vue

@@ -2,41 +2,24 @@
   <div :class="['mc-tabs', setClasses]">
     <ul
       v-if="type !== 'dropdown'"
-      ref="tablist"
-      class="mc-tabs__nav"
       role="tablist"
+      class="mc-tabs__nav"
       :aria-label="description"
     >
       <li
         v-for="(tab, index) in tabs"
         :key="`tab-${index}`"
-        class="mc-tabs__item"
         role="presentation"
+        class="mc-tabs__item"
       >
         <component
-          :is="`${tab.router}`"
-          v-if="tab.router"
-          v-bind="tab.attrs"
-          :to="tab.to"
-          class="mc-tabs__element"
-          :class="setLinkClass(tab)"
-          active-class="mc-tabs__element--selected"
-        >
-          <span class="mc-tabs__text">{{ tab.text }}</span>
-        </component>
-        <component
-          :is="tab.href ? (tab.disabled ? 'span' : 'a') : 'button'"
-          v-else
+          :is="setTabElement(tab)"
           :id="tab.id"
+          v-bind="setTabAttributes(tab, index)"
           ref="tab"
-          :href="tab.href ? (!tab.disabled ? tab.href : null) : null"
-          :type="!tab.href ? 'button' : null"
-          :disabled="!tab.href && tab.disabled ? true : null"
-          class="mc-tabs__element"
           role="tab"
-          :aria-selected="tab.active ? 'true' : 'false'"
-          :class="setLinkClass(tab)"
-          v-bind="tab.attrs"
+          class="mc-tabs__element"
+          :class="setTabClass(tab, index)"
           @click="onTabClicked($event, tab, index)"
         >
           <span class="mc-tabs__text">{{ tab.text }}</span>
@@ -61,9 +44,6 @@ export default {
     tabs: {
       type: Array,
       required: true,
-      default() {
-        return [];
-      },
     },
     type: {
       type: String,
@@ -79,24 +59,31 @@ export default {
       default: 'auto',
       validator: (value) => ['auto', 'full', 'centered'].includes(value),
     },
+    /**
+     * Remove the tabs shadow
+     * @deprecated Use the nodivider prop instead
+     */
     shadow: {
       type: Boolean,
       default: true,
     },
+    nodivider: {
+      type: Boolean,
+      default: false,
+    },
     selectAttributes: {
       type: Object,
       default: null,
     },
     activeIndex: {
       type: Number,
-      default: null,
+      default: 0,
     },
   },
 
   data() {
     return {
-      tablist: null,
-      localActiveIndex: null,
+      localActiveIndex: this.setLocalActiveIndex(),
     };
   },
 
@@ -106,93 +93,94 @@ export default {
         '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,
+        'mc-tabs--no-shadow': !this.shadow,
+        'mc-tabs--no-divider': this.nodivider,
       };
     },
   },
 
-  watch: {
-    activeIndex(newValue) {
-      this.localActiveIndex = newValue;
-    },
-    localActiveIndex: {
-      handler: function (newValue) {
-        const selectedTab = this.getTabFromIndex(newValue);
-        if (selectedTab) {
-          this.setTabState(selectedTab);
-        }
-      },
-      immediate: true,
-    },
+  mounted() {
+    console.log('activeIndex:', this.activeIndex);
+    console.log('localActiveIndex:', this.localActiveIndex);
   },
 
-  mounted: function () {
-    this.$nextTick(() => {
-      if (this.type === 'tabs') {
-        this.tablist = this.$refs.tablist;
-
-        if (this.activeIndex) {
-          this.localActiveIndex = this.activeIndex;
-        } else {
-          const isActive = this.tabs.some(
-            (tab) =>
-              Object.prototype.hasOwnProperty.call(tab, 'active') &&
-              tab.active === true
-          );
-
-          if (!isActive) {
-            this.localActiveIndex = 0;
-          }
-        }
-      }
-    });
+  updated() {
+    console.log('updated');
   },
 
   methods: {
-    setLinkClass: function (tab) {
+    setTabElement(tab) {
+      const tabElement = tab.href ? (tab.disabled ? 'span' : 'a') : 'button';
+      const routerElement = this.router ?? null;
+
+      return routerElement ?? tabElement;
+    },
+    setTabAttributes(tab, index) {
+      const href = tab.href ? (tab.disabled ? null : tab.href) : null;
+      const type = !tab.href ? 'button' : null;
+      const disabled = !tab.href && tab.disabled ? true : null;
+
       return {
-        'mc-tabs__element--selected': tab.active,
-        'mc-tabs__element--disabled': tab.disabled,
+        ...tab.attrs,
+        href,
+        type,
+        disabled,
+        'aria-selected': this.isTabActive(index).toString(),
       };
     },
-    setTabState(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');
-    },
-    getTabFromIndex: function (index) {
-      if (
-        this.tablist &&
-        this.tablist.children[index] &&
-        this.tablist.children[index].children[0]
-      ) {
-        return this.tablist.children[index].children[0];
-      }
+    setTabClass(tab, index) {
+      return [
+        tab.class,
+        {
+          'mc-tabs__element--selected': this.isTabActive(index),
+          'mc-tabs__element--disabled': tab.disabled,
+        },
+      ];
     },
-    onTabClicked(e, tab, index) {
+    onTabClicked(event, tab, index) {
       if (tab && tab.disabled) {
+        event.preventDefault();
+
         return;
       }
 
-      if (typeof this.activeIndex !== 'number') {
+      if (index !== this.localActiveIndex) {
         this.localActiveIndex = index;
+        this.$emit('update:activeIndex', this.localActiveIndex);
       }
 
-      this.$emit(
-        'tab-clicked',
-        e.currentTarget,
-        Object.assign({ index: index }, tab)
+      if (event) {
+        this.$emit('tab-clicked', event.currentTarget, { index, ...tab });
+      }
+    },
+    isTabActive(index) {
+      return this.localActiveIndex === index;
+    },
+    setLocalActiveIndex() {
+      let defaultActiveIndex;
+      const activeAttrIndex = this.tabs.findIndex(
+        (tab) =>
+          Object.prototype.hasOwnProperty.call(tab, 'active') &&
+          tab.active === true
       );
+
+      if (activeAttrIndex > -1 && !this.activeIndex) {
+        defaultActiveIndex = activeAttrIndex;
+      } else if (this.activeIndex) {
+        defaultActiveIndex = this.activeIndex;
+      } else {
+        defaultActiveIndex = 0;
+      }
+
+      this.$emit('update:activeIndex', defaultActiveIndex);
+
+      return defaultActiveIndex;
     },
   },
 };
 </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/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";