@mozaic-ds/vue 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mozaic-ds/vue",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build ./src/index.js",
@@ -13,10 +13,10 @@
     "postinstall": "node postinstall.js"
   },
   "dependencies": {
-    "@mozaic-ds/css-dev-tools": "^1.29.1",
-    "@mozaic-ds/icons": "^1.30.0",
-    "@mozaic-ds/styles": "^1.30.0",
-    "@mozaic-ds/web-fonts": "^1.22.0",
+    "@mozaic-ds/css-dev-tools": "1.29.1",
+    "@mozaic-ds/icons": "^1.32.0",
+    "@mozaic-ds/styles": "1.31.0",
+    "@mozaic-ds/web-fonts": "1.22.0",
     "core-js": "^3.18.3",
     "libphonenumber-js": "1.9.50",
     "postcss-scss": "^4.0.1",

package/src/components/layer/MLayer.vue

@@ -3,6 +3,7 @@
     <div
       ref="layer"
       class="mc-layer"
+      :class="{ 'mc-layer--ltr': position === 'left' }"
       role="dialog"
       aria-labelledby="layerTitle"
       :aria-modal="open"
@@ -99,6 +100,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    position: {
+      type: String,
+      default: 'right',
+      validator: (value) => ['right', 'left'].includes(value),
+    },
   },
 
   watch: {

package/src/components/tabs/MTab.vue

@@ -50,8 +50,6 @@ export default {
     MSelect,
   },
 
-  inheritAttrs: false,
-
   props: {
     tabs: {
       type: Array,

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

@@ -324,45 +324,56 @@
   <color name="color_tabs_active">#ff00919f</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">#ff555550</color>
-  <color name="color_tag_text_light_text">#ff555550</color>
-  <color name="color_tag_text_dark_background">#ff000000</color>
+  <color name="color_tag_text_light_border">#ff8c8b85</color>
+  <color name="color_tag_text_light_text">#ff1e1e1c</color>
+  <color name="color_tag_text_dark_background">#ff1e1e1c</color>
   <color name="color_tag_text_dark_border">#ffffffff</color>
   <color name="color_tag_text_dark_text">#ffffffff</color>
   <color name="color_tag_link_light_background">#ffffffff</color>
-  <color name="color_tag_link_light_border">#ff555550</color>
-  <color name="color_tag_link_light_text">#ff555550</color>
+  <color name="color_tag_link_light_border">#ff8c8b85</color>
+  <color name="color_tag_link_light_text">#ff1e1e1c</color>
   <color name="color_tag_link_light_hover_background">#ffeeedea</color>
   <color name="color_tag_link_light_active_background">#ffdddcd5</color>
-  <color name="color_tag_link_dark_background">#ff000000</color>
+  <color name="color_tag_link_dark_background">#ff1e1e1c</color>
   <color name="color_tag_link_dark_border">#ffffffff</color>
   <color name="color_tag_link_dark_text">#ffffffff</color>
   <color name="color_tag_link_dark_hover_background">#ff3a3936</color>
   <color name="color_tag_link_dark_active_background">#ff555550</color>
-  <color name="color_tag_selectable_light_background">#ffdddcd5</color>
+  <color name="color_tag_selectable_light_background">#ffffffff</color>
+  <color name="color_tag_selectable_light_border">#ff8c8b85</color>
   <color name="color_tag_selectable_light_text">#ff1e1e1c</color>
   <color name="color_tag_selectable_light_hover_background">#ff48bac4</color>
-  <color name="color_tag_selectable_light_active_background">#ff007f8c</color>
+  <color name="color_tag_selectable_light_active_background">#ff004e57</color>
+  <color name="color_tag_selectable_light_active_border">#ff004e57</color>
+  <color name="color_tag_selectable_light_active_text">#ffffffff</color>
   <color name="color_tag_selectable_light_disabled_background">#ffeeedea</color>
   <color name="color_tag_selectable_light_disabled_text">#ff8c8b85</color>
-  <color name="color_tag_selectable_light_selected_background">#ff00919f</color>
-  <color name="color_tag_selectable_dark_background">#ff3a3936</color>
+  <color name="color_tag_selectable_light_selected_background">#ff007f8c</color>
+  <color name="color_tag_selectable_light_selected_text">#ffffffff</color>
+  <color name="color_tag_selectable_light_selected_hover_background">#ff006974</color>
+  <color name="color_tag_selectable_dark_background">#ff1e1e1c</color>
+  <color name="color_tag_selectable_dark_border">#ffffffff</color>
   <color name="color_tag_selectable_dark_text">#ffffffff</color>
-  <color name="color_tag_selectable_dark_hover_background">#ff00919f</color>
-  <color name="color_tag_selectable_dark_active_background">#ff004e57</color>
-  <color name="color_tag_selectable_dark_selected_background">#ff006974</color>
+  <color name="color_tag_selectable_dark_hover_background">#ff006974</color>
+  <color name="color_tag_selectable_dark_active_background">#ff91d5db</color>
+  <color name="color_tag_selectable_dark_active_border">#ff91d5db</color>
+  <color name="color_tag_selectable_dark_active_text">#ff1e1e1c</color>
+  <color name="color_tag_selectable_dark_selected_background">#ff009eac</color>
+  <color name="color_tag_selectable_dark_selected_border">#ff009eac</color>
+  <color name="color_tag_selectable_dark_selected_text">#ff1e1e1c</color>
+  <color name="color_tag_selectable_dark_selected_hover_background">#ff48bac4</color>
   <color name="color_tag_selectable_dark_disabled_background">#ff555550</color>
   <color name="color_tag_selectable_dark_disabled_text">#ff8c8b85</color>
-  <color name="color_tag_removable_light_background">#ffdddcd5</color>
-  <color name="color_tag_removable_light_text">#ff1e1e1c</color>
-  <color name="color_tag_removable_light_icon">#ff3a3936</color>
-  <color name="color_tag_removable_light_hover_background">#ffc2c1ba</color>
-  <color name="color_tag_removable_light_active_background">#ffa7a6a0</color>
-  <color name="color_tag_removable_dark_background">#ff3a3936</color>
-  <color name="color_tag_removable_dark_text">#ffffffff</color>
-  <color name="color_tag_removable_dark_icon">#ffdddcd5</color>
-  <color name="color_tag_removable_dark_hover_background">#ff555550</color>
-  <color name="color_tag_removable_dark_active_background">#ff71706b</color>
+  <color name="color_tag_removable_light_background">#ff3a3936</color>
+  <color name="color_tag_removable_light_text">#ffffffff</color>
+  <color name="color_tag_removable_light_icon">#ffdddcd5</color>
+  <color name="color_tag_removable_light_hover_background">#ff555550</color>
+  <color name="color_tag_removable_light_active_background">#ff71706b</color>
+  <color name="color_tag_removable_dark_background">#ffdddcd5</color>
+  <color name="color_tag_removable_dark_text">#ff1e1e1c</color>
+  <color name="color_tag_removable_dark_icon">#ff1e1e1c</color>
+  <color name="color_tag_removable_dark_hover_background">#ffc2c1ba</color>
+  <color name="color_tag_removable_dark_active_background">#ffa7a6a0</color>
   <color name="color_toggle_off_background">#ff71706b</color>
   <color name="color_toggle_off_circle">#ffffffff</color>
   <color name="color_toggle_on_background">#ff00919f</color>

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

@@ -320,45 +320,56 @@ $color-tabs-disabled: var(--color-tabs-disabled, #71706b);
 $color-tabs-active: var(--color-tabs-active, #00919f);
 $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, #555550);
-$color-tag-text-light-text: var(--color-tag-text-light-text, #555550);
-$color-tag-text-dark-background: var(--color-tag-text-dark-background, #000000);
+$color-tag-text-light-border: var(--color-tag-text-light-border, #8c8b85);
+$color-tag-text-light-text: var(--color-tag-text-light-text, #1e1e1c);
+$color-tag-text-dark-background: var(--color-tag-text-dark-background, #1e1e1c);
 $color-tag-text-dark-border: var(--color-tag-text-dark-border, #ffffff);
 $color-tag-text-dark-text: var(--color-tag-text-dark-text, #ffffff);
 $color-tag-link-light-background: var(--color-tag-link-light-background, #ffffff);
-$color-tag-link-light-border: var(--color-tag-link-light-border, #555550);
-$color-tag-link-light-text: var(--color-tag-link-light-text, #555550);
+$color-tag-link-light-border: var(--color-tag-link-light-border, #8c8b85);
+$color-tag-link-light-text: var(--color-tag-link-light-text, #1e1e1c);
 $color-tag-link-light-hover-background: var(--color-tag-link-light-hover-background, #eeedea);
 $color-tag-link-light-active-background: var(--color-tag-link-light-active-background, #dddcd5);
-$color-tag-link-dark-background: var(--color-tag-link-dark-background, #000000);
+$color-tag-link-dark-background: var(--color-tag-link-dark-background, #1e1e1c);
 $color-tag-link-dark-border: var(--color-tag-link-dark-border, #ffffff);
 $color-tag-link-dark-text: var(--color-tag-link-dark-text, #ffffff);
 $color-tag-link-dark-hover-background: var(--color-tag-link-dark-hover-background, #3a3936);
 $color-tag-link-dark-active-background: var(--color-tag-link-dark-active-background, #555550);
-$color-tag-selectable-light-background: var(--color-tag-selectable-light-background, #dddcd5);
+$color-tag-selectable-light-background: var(--color-tag-selectable-light-background, #ffffff);
+$color-tag-selectable-light-border: var(--color-tag-selectable-light-border, #8c8b85);
 $color-tag-selectable-light-text: var(--color-tag-selectable-light-text, #1e1e1c);
 $color-tag-selectable-light-hover-background: var(--color-tag-selectable-light-hover-background, #48bac4);
-$color-tag-selectable-light-active-background: var(--color-tag-selectable-light-active-background, #007f8c);
+$color-tag-selectable-light-active-background: var(--color-tag-selectable-light-active-background, #004e57);
+$color-tag-selectable-light-active-border: var(--color-tag-selectable-light-active-border, #004e57);
+$color-tag-selectable-light-active-text: var(--color-tag-selectable-light-active-text, #ffffff);
 $color-tag-selectable-light-disabled-background: var(--color-tag-selectable-light-disabled-background, #eeedea);
 $color-tag-selectable-light-disabled-text: var(--color-tag-selectable-light-disabled-text, #8c8b85);
-$color-tag-selectable-light-selected-background: var(--color-tag-selectable-light-selected-background, #00919f);
-$color-tag-selectable-dark-background: var(--color-tag-selectable-dark-background, #3a3936);
+$color-tag-selectable-light-selected-background: var(--color-tag-selectable-light-selected-background, #007f8c);
+$color-tag-selectable-light-selected-text: var(--color-tag-selectable-light-selected-text, #ffffff);
+$color-tag-selectable-light-selected-hover-background: var(--color-tag-selectable-light-selected-hover-background, #006974);
+$color-tag-selectable-dark-background: var(--color-tag-selectable-dark-background, #1e1e1c);
+$color-tag-selectable-dark-border: var(--color-tag-selectable-dark-border, #ffffff);
 $color-tag-selectable-dark-text: var(--color-tag-selectable-dark-text, #ffffff);
-$color-tag-selectable-dark-hover-background: var(--color-tag-selectable-dark-hover-background, #00919f);
-$color-tag-selectable-dark-active-background: var(--color-tag-selectable-dark-active-background, #004e57);
-$color-tag-selectable-dark-selected-background: var(--color-tag-selectable-dark-selected-background, #006974);
+$color-tag-selectable-dark-hover-background: var(--color-tag-selectable-dark-hover-background, #006974);
+$color-tag-selectable-dark-active-background: var(--color-tag-selectable-dark-active-background, #91d5db);
+$color-tag-selectable-dark-active-border: var(--color-tag-selectable-dark-active-border, #91d5db);
+$color-tag-selectable-dark-active-text: var(--color-tag-selectable-dark-active-text, #1e1e1c);
+$color-tag-selectable-dark-selected-background: var(--color-tag-selectable-dark-selected-background, #009eac);
+$color-tag-selectable-dark-selected-border: var(--color-tag-selectable-dark-selected-border, #009eac);
+$color-tag-selectable-dark-selected-text: var(--color-tag-selectable-dark-selected-text, #1e1e1c);
+$color-tag-selectable-dark-selected-hover-background: var(--color-tag-selectable-dark-selected-hover-background, #48bac4);
 $color-tag-selectable-dark-disabled-background: var(--color-tag-selectable-dark-disabled-background, #555550);
 $color-tag-selectable-dark-disabled-text: var(--color-tag-selectable-dark-disabled-text, #8c8b85);
-$color-tag-removable-light-background: var(--color-tag-removable-light-background, #dddcd5);
-$color-tag-removable-light-text: var(--color-tag-removable-light-text, #1e1e1c);
-$color-tag-removable-light-icon: var(--color-tag-removable-light-icon, #3a3936);
-$color-tag-removable-light-hover-background: var(--color-tag-removable-light-hover-background, #c2c1ba);
-$color-tag-removable-light-active-background: var(--color-tag-removable-light-active-background, #a7a6a0);
-$color-tag-removable-dark-background: var(--color-tag-removable-dark-background, #3a3936);
-$color-tag-removable-dark-text: var(--color-tag-removable-dark-text, #ffffff);
-$color-tag-removable-dark-icon: var(--color-tag-removable-dark-icon, #dddcd5);
-$color-tag-removable-dark-hover-background: var(--color-tag-removable-dark-hover-background, #555550);
-$color-tag-removable-dark-active-background: var(--color-tag-removable-dark-active-background, #71706b);
+$color-tag-removable-light-background: var(--color-tag-removable-light-background, #3a3936);
+$color-tag-removable-light-text: var(--color-tag-removable-light-text, #ffffff);
+$color-tag-removable-light-icon: var(--color-tag-removable-light-icon, #dddcd5);
+$color-tag-removable-light-hover-background: var(--color-tag-removable-light-hover-background, #555550);
+$color-tag-removable-light-active-background: var(--color-tag-removable-light-active-background, #71706b);
+$color-tag-removable-dark-background: var(--color-tag-removable-dark-background, #dddcd5);
+$color-tag-removable-dark-text: var(--color-tag-removable-dark-text, #1e1e1c);
+$color-tag-removable-dark-icon: var(--color-tag-removable-dark-icon, #1e1e1c);
+$color-tag-removable-dark-hover-background: var(--color-tag-removable-dark-hover-background, #c2c1ba);
+$color-tag-removable-dark-active-background: var(--color-tag-removable-dark-active-background, #a7a6a0);
 $color-toggle-off-background: var(--color-toggle-off-background, #71706b);
 $color-toggle-off-circle: var(--color-toggle-off-circle, #ffffff);
 $color-toggle-on-background: var(--color-toggle-on-background, #00919f);

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

@@ -118,45 +118,56 @@
   --color-toggle-on-background: var(--color-primary-01-500);
   --color-toggle-off-circle: var(--color-grey-000);
   --color-toggle-off-background: var(--color-grey-600);
-  --color-tag-removable-dark-active-background: var(--color-grey-600);
-  --color-tag-removable-dark-hover-background: var(--color-grey-700);
-  --color-tag-removable-dark-icon: var(--color-grey-200);
-  --color-tag-removable-dark-text: var(--color-grey-000);
-  --color-tag-removable-dark-background: var(--color-grey-800);
-  --color-tag-removable-light-active-background: var(--color-grey-400);
-  --color-tag-removable-light-hover-background: var(--color-grey-300);
-  --color-tag-removable-light-icon: var(--color-grey-800);
-  --color-tag-removable-light-text: var(--color-grey-900);
-  --color-tag-removable-light-background: var(--color-grey-200);
+  --color-tag-removable-dark-active-background: var(--color-grey-400);
+  --color-tag-removable-dark-hover-background: var(--color-grey-300);
+  --color-tag-removable-dark-icon: var(--color-grey-900);
+  --color-tag-removable-dark-text: var(--color-grey-900);
+  --color-tag-removable-dark-background: var(--color-grey-200);
+  --color-tag-removable-light-active-background: var(--color-grey-600);
+  --color-tag-removable-light-hover-background: var(--color-grey-700);
+  --color-tag-removable-light-icon: var(--color-grey-200);
+  --color-tag-removable-light-text: var(--color-grey-000);
+  --color-tag-removable-light-background: var(--color-grey-800);
   --color-tag-selectable-dark-disabled-text: var(--color-grey-500);
   --color-tag-selectable-dark-disabled-background: var(--color-grey-700);
-  --color-tag-selectable-dark-selected-background: var(--color-primary-01-700);
-  --color-tag-selectable-dark-active-background: var(--color-primary-01-800);
-  --color-tag-selectable-dark-hover-background: var(--color-primary-01-500);
+  --color-tag-selectable-dark-selected-hover-background: var(--color-primary-01-300);
+  --color-tag-selectable-dark-selected-text: var(--color-grey-900);
+  --color-tag-selectable-dark-selected-border: var(--color-primary-01-400);
+  --color-tag-selectable-dark-selected-background: var(--color-primary-01-400);
+  --color-tag-selectable-dark-active-text: var(--color-grey-900);
+  --color-tag-selectable-dark-active-border: var(--color-primary-01-200);
+  --color-tag-selectable-dark-active-background: var(--color-primary-01-200);
+  --color-tag-selectable-dark-hover-background: var(--color-primary-01-700);
   --color-tag-selectable-dark-text: var(--color-grey-000);
-  --color-tag-selectable-dark-background: var(--color-grey-800);
-  --color-tag-selectable-light-selected-background: var(--color-primary-01-500);
+  --color-tag-selectable-dark-border: var(--color-grey-000);
+  --color-tag-selectable-dark-background: var(--color-grey-900);
+  --color-tag-selectable-light-selected-hover-background: var(--color-primary-01-700);
+  --color-tag-selectable-light-selected-text: var(--color-grey-000);
+  --color-tag-selectable-light-selected-background: var(--color-primary-01-600);
   --color-tag-selectable-light-disabled-text: var(--color-grey-500);
   --color-tag-selectable-light-disabled-background: var(--color-grey-100);
-  --color-tag-selectable-light-active-background: var(--color-primary-01-600);
+  --color-tag-selectable-light-active-text: var(--color-grey-000);
+  --color-tag-selectable-light-active-border: var(--color-primary-01-800);
+  --color-tag-selectable-light-active-background: var(--color-primary-01-800);
   --color-tag-selectable-light-hover-background: var(--color-primary-01-300);
   --color-tag-selectable-light-text: var(--color-grey-900);
-  --color-tag-selectable-light-background: var(--color-grey-200);
+  --color-tag-selectable-light-border: var(--color-grey-500);
+  --color-tag-selectable-light-background: var(--color-grey-000);
   --color-tag-link-dark-active-background: var(--color-grey-700);
   --color-tag-link-dark-hover-background: var(--color-grey-800);
   --color-tag-link-dark-text: var(--color-grey-000);
   --color-tag-link-dark-border: var(--color-grey-000);
-  --color-tag-link-dark-background: var(--color-grey-999);
+  --color-tag-link-dark-background: var(--color-grey-900);
   --color-tag-link-light-active-background: var(--color-grey-200);
   --color-tag-link-light-hover-background: var(--color-grey-100);
-  --color-tag-link-light-text: var(--color-grey-700);
-  --color-tag-link-light-border: var(--color-grey-700);
+  --color-tag-link-light-text: var(--color-grey-900);
+  --color-tag-link-light-border: var(--color-grey-500);
   --color-tag-link-light-background: var(--color-grey-000);
   --color-tag-text-dark-text: var(--color-grey-000);
   --color-tag-text-dark-border: var(--color-grey-000);
-  --color-tag-text-dark-background: var(--color-grey-999);
-  --color-tag-text-light-text: var(--color-grey-700);
-  --color-tag-text-light-border: var(--color-grey-700);
+  --color-tag-text-dark-background: var(--color-grey-900);
+  --color-tag-text-light-text: var(--color-grey-900);
+  --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-hover: var(--color-primary-01-600);

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

@@ -344,17 +344,28 @@ ColorTagLinkDarkText,
 ColorTagLinkDarkHoverBackground,
 ColorTagLinkDarkActiveBackground,
 ColorTagSelectableLightBackground,
+ColorTagSelectableLightBorder,
 ColorTagSelectableLightText,
 ColorTagSelectableLightHoverBackground,
 ColorTagSelectableLightActiveBackground,
+ColorTagSelectableLightActiveBorder,
+ColorTagSelectableLightActiveText,
 ColorTagSelectableLightDisabledBackground,
 ColorTagSelectableLightDisabledText,
 ColorTagSelectableLightSelectedBackground,
+ColorTagSelectableLightSelectedText,
+ColorTagSelectableLightSelectedHoverBackground,
 ColorTagSelectableDarkBackground,
+ColorTagSelectableDarkBorder,
 ColorTagSelectableDarkText,
 ColorTagSelectableDarkHoverBackground,
 ColorTagSelectableDarkActiveBackground,
+ColorTagSelectableDarkActiveBorder,
+ColorTagSelectableDarkActiveText,
 ColorTagSelectableDarkSelectedBackground,
+ColorTagSelectableDarkSelectedBorder,
+ColorTagSelectableDarkSelectedText,
+ColorTagSelectableDarkSelectedHoverBackground,
 ColorTagSelectableDarkDisabledBackground,
 ColorTagSelectableDarkDisabledText,
 ColorTagRemovableLightBackground,

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

@@ -339,45 +339,56 @@
 [UIColor colorWithRed:0.000f green:0.569f blue:0.624f 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.333f green:0.333f blue:0.314f alpha:1.000f],
-[UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.549f green:0.545f blue:0.522f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
-[UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
-[UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
+[UIColor colorWithRed:0.549f green:0.545f blue:0.522f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
 [UIColor colorWithRed:0.933f green:0.929f blue:0.918f alpha:1.000f],
 [UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.227f green:0.224f blue:0.212f alpha:1.000f],
 [UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
-[UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
+[UIColor colorWithRed:0.549f green:0.545f blue:0.522f alpha:1.000f],
 [UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
 [UIColor colorWithRed:0.282f green:0.729f blue:0.769f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.933f green:0.929f blue:0.918f alpha:1.000f],
 [UIColor colorWithRed:0.549f green:0.545f blue:0.522f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],
-[UIColor colorWithRed:0.227f green:0.224f blue:0.212f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.412f blue:0.455f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.412f blue:0.455f alpha:1.000f],
+[UIColor colorWithRed:0.569f green:0.835f blue:0.859f alpha:1.000f],
+[UIColor colorWithRed:0.569f green:0.835f blue:0.859f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.620f blue:0.675f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.620f blue:0.675f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:0.282f green:0.729f blue:0.769f alpha:1.000f],
 [UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
 [UIColor colorWithRed:0.549f green:0.545f blue:0.522f alpha:1.000f],
-[UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
-[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
-[UIColor colorWithRed:0.227f green:0.224f blue:0.212f alpha:1.000f],
-[UIColor colorWithRed:0.761f green:0.757f blue:0.729f alpha:1.000f],
-[UIColor colorWithRed:0.655f green:0.651f blue:0.627f alpha:1.000f],
 [UIColor colorWithRed:0.227f green:0.224f blue:0.212f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
 [UIColor colorWithRed:0.333f green:0.333f blue:0.314f alpha:1.000f],
 [UIColor colorWithRed:0.443f green:0.439f blue:0.420f alpha:1.000f],
+[UIColor colorWithRed:0.867f green:0.863f blue:0.835f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:0.118f green:0.118f blue:0.110f alpha:1.000f],
+[UIColor colorWithRed:0.761f green:0.757f blue:0.729f alpha:1.000f],
+[UIColor colorWithRed:0.655f green:0.651f blue:0.627f alpha:1.000f],
 [UIColor colorWithRed:0.443f green:0.439f blue:0.420f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],

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

@@ -319,45 +319,56 @@ public class StyleDictionaryColor {
     public static let colorTabsHover = 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.333, green: 0.333, blue: 0.314, alpha: 1)
-    public static let colorTagLinkDarkBackground = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
+    public static let colorTagLinkDarkBackground = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
     public static let colorTagLinkDarkBorder = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagLinkDarkHoverBackground = UIColor(red: 0.227, green: 0.224, blue: 0.212, alpha: 1)
     public static let colorTagLinkDarkText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagLinkLightActiveBackground = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
     public static let colorTagLinkLightBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTagLinkLightBorder = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
+    public static let colorTagLinkLightBorder = UIColor(red: 0.549, green: 0.545, blue: 0.522, alpha: 1)
     public static let colorTagLinkLightHoverBackground = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
-    public static let colorTagLinkLightText = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
-    public static let colorTagRemovableDarkActiveBackground = UIColor(red: 0.443, green: 0.439, blue: 0.420, alpha: 1)
-    public static let colorTagRemovableDarkBackground = UIColor(red: 0.227, green: 0.224, blue: 0.212, alpha: 1)
-    public static let colorTagRemovableDarkHoverBackground = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
-    public static let colorTagRemovableDarkIcon = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
-    public static let colorTagRemovableDarkText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTagRemovableLightActiveBackground = UIColor(red: 0.655, green: 0.651, blue: 0.627, alpha: 1)
-    public static let colorTagRemovableLightBackground = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
-    public static let colorTagRemovableLightHoverBackground = UIColor(red: 0.761, green: 0.757, blue: 0.729, alpha: 1)
-    public static let colorTagRemovableLightIcon = UIColor(red: 0.227, green: 0.224, blue: 0.212, alpha: 1)
-    public static let colorTagRemovableLightText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
-    public static let colorTagSelectableDarkActiveBackground = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
-    public static let colorTagSelectableDarkBackground = UIColor(red: 0.227, green: 0.224, blue: 0.212, alpha: 1)
+    public static let colorTagLinkLightText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
+    public static let colorTagRemovableDarkActiveBackground = UIColor(red: 0.655, green: 0.651, blue: 0.627, alpha: 1)
+    public static let colorTagRemovableDarkBackground = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
+    public static let colorTagRemovableDarkHoverBackground = UIColor(red: 0.761, green: 0.757, blue: 0.729, alpha: 1)
+    public static let colorTagRemovableDarkIcon = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
+    public static let colorTagRemovableDarkText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
+    public static let colorTagRemovableLightActiveBackground = UIColor(red: 0.443, green: 0.439, blue: 0.420, alpha: 1)
+    public static let colorTagRemovableLightBackground = UIColor(red: 0.227, green: 0.224, blue: 0.212, alpha: 1)
+    public static let colorTagRemovableLightHoverBackground = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
+    public static let colorTagRemovableLightIcon = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
+    public static let colorTagRemovableLightText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorTagSelectableDarkActiveBackground = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
+    public static let colorTagSelectableDarkActiveBorder = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
+    public static let colorTagSelectableDarkActiveText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
+    public static let colorTagSelectableDarkBackground = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
+    public static let colorTagSelectableDarkBorder = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagSelectableDarkDisabledBackground = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
     public static let colorTagSelectableDarkDisabledText = UIColor(red: 0.549, green: 0.545, blue: 0.522, alpha: 1)
-    public static let colorTagSelectableDarkHoverBackground = UIColor(red: 0.000, green: 0.569, blue: 0.624, alpha: 1)
-    public static let colorTagSelectableDarkSelectedBackground = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
+    public static let colorTagSelectableDarkHoverBackground = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
+    public static let colorTagSelectableDarkSelectedBackground = UIColor(red: 0.000, green: 0.620, blue: 0.675, alpha: 1)
+    public static let colorTagSelectableDarkSelectedBorder = UIColor(red: 0.000, green: 0.620, blue: 0.675, alpha: 1)
+    public static let colorTagSelectableDarkSelectedHoverBackground = UIColor(red: 0.282, green: 0.729, blue: 0.769, alpha: 1)
+    public static let colorTagSelectableDarkSelectedText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
     public static let colorTagSelectableDarkText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTagSelectableLightActiveBackground = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
-    public static let colorTagSelectableLightBackground = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
+    public static let colorTagSelectableLightActiveBackground = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
+    public static let colorTagSelectableLightActiveBorder = UIColor(red: 0.000, green: 0.306, blue: 0.341, alpha: 1)
+    public static let colorTagSelectableLightActiveText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorTagSelectableLightBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorTagSelectableLightBorder = UIColor(red: 0.549, green: 0.545, blue: 0.522, alpha: 1)
     public static let colorTagSelectableLightDisabledBackground = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
     public static let colorTagSelectableLightDisabledText = UIColor(red: 0.549, green: 0.545, blue: 0.522, alpha: 1)
     public static let colorTagSelectableLightHoverBackground = UIColor(red: 0.282, green: 0.729, blue: 0.769, alpha: 1)
-    public static let colorTagSelectableLightSelectedBackground = UIColor(red: 0.000, green: 0.569, blue: 0.624, alpha: 1)
+    public static let colorTagSelectableLightSelectedBackground = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorTagSelectableLightSelectedHoverBackground = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
+    public static let colorTagSelectableLightSelectedText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagSelectableLightText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
-    public static let colorTagTextDarkBackground = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
+    public static let colorTagTextDarkBackground = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
     public static let colorTagTextDarkBorder = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagTextDarkText = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorTagTextLightBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTagTextLightBorder = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
-    public static let colorTagTextLightText = UIColor(red: 0.333, green: 0.333, blue: 0.314, alpha: 1)
+    public static let colorTagTextLightBorder = UIColor(red: 0.549, green: 0.545, blue: 0.522, alpha: 1)
+    public static let colorTagTextLightText = UIColor(red: 0.118, green: 0.118, blue: 0.110, alpha: 1)
     public static let colorToggleDisabledBackground = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
     public static let colorToggleDisabledCheckedBackground = UIColor(red: 0.569, green: 0.835, blue: 0.859, alpha: 1)
     public static let colorToggleDisabledCheckedCircle = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)

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

@@ -323,45 +323,56 @@ export const ColorTabsDisabled = "#71706b";
 export const ColorTabsActive = "#00919f";
 export const ColorTabsActiveDisabled = "#91d5db";
 export const ColorTagTextLightBackground = "#ffffff";
-export const ColorTagTextLightBorder = "#555550";
-export const ColorTagTextLightText = "#555550";
-export const ColorTagTextDarkBackground = "#000000";
+export const ColorTagTextLightBorder = "#8c8b85";
+export const ColorTagTextLightText = "#1e1e1c";
+export const ColorTagTextDarkBackground = "#1e1e1c";
 export const ColorTagTextDarkBorder = "#ffffff";
 export const ColorTagTextDarkText = "#ffffff";
 export const ColorTagLinkLightBackground = "#ffffff";
-export const ColorTagLinkLightBorder = "#555550";
-export const ColorTagLinkLightText = "#555550";
+export const ColorTagLinkLightBorder = "#8c8b85";
+export const ColorTagLinkLightText = "#1e1e1c";
 export const ColorTagLinkLightHoverBackground = "#eeedea";
 export const ColorTagLinkLightActiveBackground = "#dddcd5";
-export const ColorTagLinkDarkBackground = "#000000";
+export const ColorTagLinkDarkBackground = "#1e1e1c";
 export const ColorTagLinkDarkBorder = "#ffffff";
 export const ColorTagLinkDarkText = "#ffffff";
 export const ColorTagLinkDarkHoverBackground = "#3a3936";
 export const ColorTagLinkDarkActiveBackground = "#555550";
-export const ColorTagSelectableLightBackground = "#dddcd5";
+export const ColorTagSelectableLightBackground = "#ffffff";
+export const ColorTagSelectableLightBorder = "#8c8b85";
 export const ColorTagSelectableLightText = "#1e1e1c";
 export const ColorTagSelectableLightHoverBackground = "#48bac4";
-export const ColorTagSelectableLightActiveBackground = "#007f8c";
+export const ColorTagSelectableLightActiveBackground = "#004e57";
+export const ColorTagSelectableLightActiveBorder = "#004e57";
+export const ColorTagSelectableLightActiveText = "#ffffff";
 export const ColorTagSelectableLightDisabledBackground = "#eeedea";
 export const ColorTagSelectableLightDisabledText = "#8c8b85";
-export const ColorTagSelectableLightSelectedBackground = "#00919f";
-export const ColorTagSelectableDarkBackground = "#3a3936";
+export const ColorTagSelectableLightSelectedBackground = "#007f8c";
+export const ColorTagSelectableLightSelectedText = "#ffffff";
+export const ColorTagSelectableLightSelectedHoverBackground = "#006974";
+export const ColorTagSelectableDarkBackground = "#1e1e1c";
+export const ColorTagSelectableDarkBorder = "#ffffff";
 export const ColorTagSelectableDarkText = "#ffffff";
-export const ColorTagSelectableDarkHoverBackground = "#00919f";
-export const ColorTagSelectableDarkActiveBackground = "#004e57";
-export const ColorTagSelectableDarkSelectedBackground = "#006974";
+export const ColorTagSelectableDarkHoverBackground = "#006974";
+export const ColorTagSelectableDarkActiveBackground = "#91d5db";
+export const ColorTagSelectableDarkActiveBorder = "#91d5db";
+export const ColorTagSelectableDarkActiveText = "#1e1e1c";
+export const ColorTagSelectableDarkSelectedBackground = "#009eac";
+export const ColorTagSelectableDarkSelectedBorder = "#009eac";
+export const ColorTagSelectableDarkSelectedText = "#1e1e1c";
+export const ColorTagSelectableDarkSelectedHoverBackground = "#48bac4";
 export const ColorTagSelectableDarkDisabledBackground = "#555550";
 export const ColorTagSelectableDarkDisabledText = "#8c8b85";
-export const ColorTagRemovableLightBackground = "#dddcd5";
-export const ColorTagRemovableLightText = "#1e1e1c";
-export const ColorTagRemovableLightIcon = "#3a3936";
-export const ColorTagRemovableLightHoverBackground = "#c2c1ba";
-export const ColorTagRemovableLightActiveBackground = "#a7a6a0";
-export const ColorTagRemovableDarkBackground = "#3a3936";
-export const ColorTagRemovableDarkText = "#ffffff";
-export const ColorTagRemovableDarkIcon = "#dddcd5";
-export const ColorTagRemovableDarkHoverBackground = "#555550";
-export const ColorTagRemovableDarkActiveBackground = "#71706b";
+export const ColorTagRemovableLightBackground = "#3a3936";
+export const ColorTagRemovableLightText = "#ffffff";
+export const ColorTagRemovableLightIcon = "#dddcd5";
+export const ColorTagRemovableLightHoverBackground = "#555550";
+export const ColorTagRemovableLightActiveBackground = "#71706b";
+export const ColorTagRemovableDarkBackground = "#dddcd5";
+export const ColorTagRemovableDarkText = "#1e1e1c";
+export const ColorTagRemovableDarkIcon = "#1e1e1c";
+export const ColorTagRemovableDarkHoverBackground = "#c2c1ba";
+export const ColorTagRemovableDarkActiveBackground = "#a7a6a0";
 export const ColorToggleOffBackground = "#71706b";
 export const ColorToggleOffCircle = "#ffffff";
 export const ColorToggleOnBackground = "#00919f";