@mozaic-ds/angular 0.23.2-beta.4 → 0.24.0-beta.1

package/adeo/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@mozaic-ds/angular" />
+export * from './public-api';

package/adeo/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@mozaic-ds/angular",
+  "version": "0.24.0-beta.1",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss",
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/mozaic-ds-angular.mjs",
+      "es2020": "./fesm2020/mozaic-ds-angular.mjs",
+      "es2015": "./fesm2015/mozaic-ds-angular.mjs",
+      "node": "./fesm2015/mozaic-ds-angular.mjs",
+      "default": "./fesm2020/mozaic-ds-angular.mjs"
+    },
+    "./adeo": {
+      "types": "./adeo/index.d.ts",
+      "esm2020": "./adeo/esm2020/mozaic-ds-angular.mjs",
+      "es2020": "./adeo/fesm2020/mozaic-ds-angular.mjs",
+      "es2015": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "node": "./adeo/fesm2015/mozaic-ds-angular.mjs",
+      "default": "./adeo/fesm2020/mozaic-ds-angular.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    }
+  },
+  "peerDependencies": {
+    "@angular/common": ">=15.1.3",
+    "@angular/core": ">=15.1.3"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "module": "fesm2015/mozaic-ds-angular.mjs",
+  "es2020": "fesm2020/mozaic-ds-angular.mjs",
+  "esm2020": "esm2020/mozaic-ds-angular.mjs",
+  "fesm2020": "fesm2020/mozaic-ds-angular.mjs",
+  "fesm2015": "fesm2015/mozaic-ds-angular.mjs",
+  "typings": "index.d.ts",
+  "sideEffects": false
+}

package/adeo/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './common/utils/public-api';
+export * from './components/public-api';

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

@@ -334,6 +334,9 @@
   <color name="color_listbox_tile_shadow">#ff191919</color>
   <color name="color_listbox_tile_hover_background">#ffe6e6e6</color>
   <color name="color_listbox_disabled_background">#ffcccccc</color>
+  <color name="color_menu_is_active">#ff007f8c</color>
+  <color name="color_menu_hover">#ffeeedea</color>
+  <color name="color_menu_active">#ffdddcd5</color>
   <color name="color_notification_font">#ff000000</color>
   <color name="color_notification_information_background">#ffdaeff7</color>
   <color name="color_notification_information_border">#ff0b96cc</color>
@@ -369,6 +372,10 @@
   <color name="color_progress_indicator">#ff007f8c</color>
   <color name="color_progress_percentage_default">#ff191919</color>
   <color name="color_progress_percentage_half">#ffffffff</color>
+  <color name="color_segmented_control_is_active">#ff007f8c</color>
+  <color name="color_segmented_control_hover">#ffeeedea</color>
+  <color name="color_segmented_control_active">#ffdddcd5</color>
+  <color name="color_segmented_control_background">#ff007f8c</color>
   <color name="color_sidebar_background">#ff082435</color>
   <color name="color_sidebar_feature_background">#ff082435</color>
   <color name="color_sidebar_feature_hover_background">#ff405d68</color>
@@ -398,12 +405,14 @@
   <color name="color_tabs_shadow">#ff000000</color>
   <color name="color_tabs_default">#ff666666</color>
   <color name="color_tabs_element_background">#ffeeedea</color>
-  <color name="color_tabs_hover">#ff004e57</color>
+  <color name="color_tabs_hover_background">#ffeeedea</color>
   <color name="color_tabs_disabled_background">#ffcccccc</color>
   <color name="color_tabs_active_background">#ffdddcd5</color>
-  <color name="color_tabs_active_text">#ff004e57</color>
+  <color name="color_tabs_active_text">#ff4d4d4d</color>
   <color name="color_tabs_selected_border">#ff007f8c</color>
   <color name="color_tabs_selected_text">#ff007f8c</color>
+  <color name="color_tabs_selected_active_text">#ff006974</color>
+  <color name="color_tabs_selected_hover_text">#ff006974</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/assets/tokens/adeo/css/_variables.scss

@@ -417,6 +417,9 @@ $color-listbox-tile-border: var(--color-listbox-tile-border, #b3b3b3);
 $color-listbox-tile-shadow: var(--color-listbox-tile-shadow, #191919);
 $color-listbox-tile-hover-background: var(--color-listbox-tile-hover-background, #e6e6e6);
 $color-listbox-disabled-background: var(--color-listbox-disabled-background, #cccccc);
+$color-menu-is-active: var(--color-menu-is-active, #007f8c);
+$color-menu-hover: var(--color-menu-hover, #eeedea);
+$color-menu-active: var(--color-menu-active, #dddcd5);
 $color-notification-font: var(--color-notification-font, #000000);
 $color-notification-information-background: var(
   --color-notification-information-background,
@@ -461,6 +464,10 @@ $color-progress-background: var(--color-progress-background, #cdd4d8);
 $color-progress-indicator: var(--color-progress-indicator, #007f8c);
 $color-progress-percentage-default: var(--color-progress-percentage-default, #191919);
 $color-progress-percentage-half: var(--color-progress-percentage-half, #ffffff);
+$color-segmented-control-is-active: var(--color-segmented-control-is-active, #007f8c);
+$color-segmented-control-hover: var(--color-segmented-control-hover, #eeedea);
+$color-segmented-control-active: var(--color-segmented-control-active, #dddcd5);
+$color-segmented-control-background: var(--color-segmented-control-background, #007f8c);
 $color-sidebar-background: var(--color-sidebar-background, #082435);
 $color-sidebar-feature-background: var(--color-sidebar-feature-background, #082435);
 $color-sidebar-feature-hover-background: var(--color-sidebar-feature-hover-background, #405d68);
@@ -499,12 +506,14 @@ $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, #eeedea);
-$color-tabs-hover: var(--color-tabs-hover, #004e57);
+$color-tabs-hover-background: var(--color-tabs-hover-background, #eeedea);
 $color-tabs-disabled-background: var(--color-tabs-disabled-background, #cccccc);
 $color-tabs-active-background: var(--color-tabs-active-background, #dddcd5);
-$color-tabs-active-text: var(--color-tabs-active-text, #004e57);
+$color-tabs-active-text: var(--color-tabs-active-text, #4d4d4d);
 $color-tabs-selected-border: var(--color-tabs-selected-border, #007f8c);
 $color-tabs-selected-text: var(--color-tabs-selected-text, #007f8c);
+$color-tabs-selected-active-text: var(--color-tabs-selected-active-text, #006974);
+$color-tabs-selected-hover-text: var(--color-tabs-selected-hover-text, #006974);
 $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/assets/tokens/adeo/css/root.scss

@@ -184,13 +184,16 @@
   --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-hover-text: var(--color-primary-01-700);
+  --color-tabs-selected-active-text: var(--color-primary-01-700);
   --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-text: var(--color-grey-700);
   --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-hover-background: var(--color-secondary-sandgrey-100);
   --color-tabs-element-background: var(--color-secondary-sandgrey-100);
+  --color-tabs-default: var(--color-grey-600);
   --color-tabs-shadow: var(--color-grey-999);
   --color-tabs-background: var(--color-grey-000);
   --color-stepper-title: var(--color-primary-01-500);
@@ -217,6 +220,10 @@
   --color-sidebar-feature-hover-background: var(--color-secondary-blue-700);
   --color-sidebar-feature-background: var(--color-secondary-blue-900);
   --color-sidebar-background: var(--color-secondary-blue-900);
+  --color-segmented-control-background: var(--color-primary-01-600);
+  --color-segmented-control-active: var(--color-secondary-sandgrey-200);
+  --color-segmented-control-hover: var(--color-secondary-sandgrey-100);
+  --color-segmented-control-is-active: var(--color-primary-01-600);
   --color-progress-percentage-half: var(--color-grey-000);
   --color-progress-percentage-default: var(--color-grey-900);
   --color-progress-indicator: var(--color-primary-01-600);
@@ -252,6 +259,9 @@
   --color-notification-information-border: var(--color-info-500);
   --color-notification-information-background: var(--color-info-100);
   --color-notification-font: var(--color-grey-999);
+  --color-menu-active: var(--color-secondary-sandgrey-200);
+  --color-menu-hover: var(--color-secondary-sandgrey-100);
+  --color-menu-is-active: var(--color-primary-01-600);
   --color-listbox-disabled-background: var(--color-grey-200);
   --color-listbox-tile-hover-background: var(--color-grey-100);
   --color-listbox-tile-shadow: var(--color-grey-900);
@@ -470,7 +480,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-default: var(--color-font-light);
   --color-fields-help: var(--color-font-light);
   --color-fields-requirement: var(--color-font-light);
   --color-fields-label: var(--color-font-dark);

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

@@ -338,6 +338,9 @@ ColorListboxTileBorder,
 ColorListboxTileShadow,
 ColorListboxTileHoverBackground,
 ColorListboxDisabledBackground,
+ColorMenuIsActive,
+ColorMenuHover,
+ColorMenuActive,
 ColorNotificationFont,
 ColorNotificationInformationBackground,
 ColorNotificationInformationBorder,
@@ -373,6 +376,10 @@ ColorProgressBackground,
 ColorProgressIndicator,
 ColorProgressPercentageDefault,
 ColorProgressPercentageHalf,
+ColorSegmentedControlIsActive,
+ColorSegmentedControlHover,
+ColorSegmentedControlActive,
+ColorSegmentedControlBackground,
 ColorSidebarBackground,
 ColorSidebarFeatureBackground,
 ColorSidebarFeatureHoverBackground,
@@ -402,12 +409,14 @@ ColorTabsBackground,
 ColorTabsShadow,
 ColorTabsDefault,
 ColorTabsElementBackground,
-ColorTabsHover,
+ColorTabsHoverBackground,
 ColorTabsDisabledBackground,
 ColorTabsActiveBackground,
 ColorTabsActiveText,
 ColorTabsSelectedBorder,
 ColorTabsSelectedText,
+ColorTabsSelectedActiveText,
+ColorTabsSelectedHoverText,
 ColorTabsActiveDisabled,
 ColorTagTextLightBackground,
 ColorTagTextLightBorder,

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

@@ -349,6 +349,9 @@
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.498f blue:0.549f 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.855f green:0.937f blue:0.969f alpha:1.000f],
 [UIColor colorWithRed:0.043f green:0.588f blue:0.800f alpha:1.000f],
@@ -384,6 +387,10 @@
 [UIColor colorWithRed:0.000f green:0.498f blue:0.549f alpha:1.000f],
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.498f blue:0.549f 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.498f blue:0.549f alpha:1.000f],
 [UIColor colorWithRed:0.031f green:0.141f blue:0.208f alpha:1.000f],
 [UIColor colorWithRed:0.031f green:0.141f blue:0.208f alpha:1.000f],
 [UIColor colorWithRed:0.251f green:0.365f blue:0.408f alpha:1.000f],
@@ -413,12 +420,14 @@
 [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.929f blue:0.918f alpha:1.000f],
-[UIColor colorWithRed:0.000f green:0.306f blue:0.341f alpha:1.000f],
+[UIColor colorWithRed:0.933f green:0.929f blue:0.918f alpha:1.000f],
 [UIColor colorWithRed:0.800f green:0.800f blue:0.800f 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.302f green:0.302f blue:0.302f 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.000f green:0.412f blue:0.455f 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: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/assets/tokens/adeo/ios/StyleDictionaryColor.swift

@@ -248,6 +248,9 @@ public class StyleDictionaryColor {
     public static let colorListboxTileBorder = UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1)
     public static let colorListboxTileHoverBackground = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
     public static let colorListboxTileShadow = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
+    public static let colorMenuActive = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
+    public static let colorMenuHover = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
+    public static let colorMenuIsActive = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
     public static let colorNotificationDangerBackground = UIColor(red: 0.992, green: 0.918, blue: 0.918, alpha: 1)
     public static let colorNotificationDangerBorder = UIColor(red: 0.918, green: 0.188, blue: 0.176, alpha: 1)
     public static let colorNotificationDangerIcon = UIColor(red: 0.776, green: 0.067, blue: 0.071, alpha: 1)
@@ -364,6 +367,10 @@ public class StyleDictionaryColor {
     public static let colorSecondaryYellow700 = UIColor(red: 0.612, green: 0.482, blue: 0.094, alpha: 1)
     public static let colorSecondaryYellow800 = UIColor(red: 0.439, green: 0.337, blue: 0.075, alpha: 1)
     public static let colorSecondaryYellow900 = UIColor(red: 0.275, green: 0.208, blue: 0.051, alpha: 1)
+    public static let colorSegmentedControlActive = UIColor(red: 0.867, green: 0.863, blue: 0.835, alpha: 1)
+    public static let colorSegmentedControlBackground = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorSegmentedControlHover = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
+    public static let colorSegmentedControlIsActive = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
     public static let colorSidebarBackground = UIColor(red: 0.031, green: 0.141, blue: 0.208, alpha: 1)
     public static let colorSidebarDividerBackground = UIColor(red: 0.357, green: 0.451, blue: 0.490, alpha: 1)
     public static let colorSidebarFeatureBackground = UIColor(red: 0.031, green: 0.141, blue: 0.208, alpha: 1)
@@ -400,13 +407,15 @@ public class StyleDictionaryColor {
     public static let colorSuccess900 = UIColor(red: 0.008, green: 0.212, blue: 0.094, 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.000, green: 0.306, blue: 0.341, alpha: 1)
+    public static let colorTabsActiveText = UIColor(red: 0.302, green: 0.302, blue: 0.302, 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.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 colorTabsHoverBackground = UIColor(red: 0.933, green: 0.929, blue: 0.918, alpha: 1)
+    public static let colorTabsSelectedActiveText = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
     public static let colorTabsSelectedBorder = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorTabsSelectedHoverText = UIColor(red: 0.000, green: 0.412, blue: 0.455, 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)

package/assets/tokens/adeo/js/tokens.js

@@ -333,6 +333,9 @@ export const ColorListboxTileBorder = '#b3b3b3';
 export const ColorListboxTileShadow = '#191919';
 export const ColorListboxTileHoverBackground = '#e6e6e6';
 export const ColorListboxDisabledBackground = '#cccccc';
+export const ColorMenuIsActive = '#007f8c';
+export const ColorMenuHover = '#eeedea';
+export const ColorMenuActive = '#dddcd5';
 export const ColorNotificationFont = '#000000';
 export const ColorNotificationInformationBackground = '#daeff7';
 export const ColorNotificationInformationBorder = '#0b96cc';
@@ -368,6 +371,10 @@ export const ColorProgressBackground = '#cdd4d8';
 export const ColorProgressIndicator = '#007f8c';
 export const ColorProgressPercentageDefault = '#191919';
 export const ColorProgressPercentageHalf = '#ffffff';
+export const ColorSegmentedControlIsActive = '#007f8c';
+export const ColorSegmentedControlHover = '#eeedea';
+export const ColorSegmentedControlActive = '#dddcd5';
+export const ColorSegmentedControlBackground = '#007f8c';
 export const ColorSidebarBackground = '#082435';
 export const ColorSidebarFeatureBackground = '#082435';
 export const ColorSidebarFeatureHoverBackground = '#405d68';
@@ -397,12 +404,14 @@ export const ColorTabsBackground = '#ffffff';
 export const ColorTabsShadow = '#000000';
 export const ColorTabsDefault = '#666666';
 export const ColorTabsElementBackground = '#eeedea';
-export const ColorTabsHover = '#004e57';
+export const ColorTabsHoverBackground = '#eeedea';
 export const ColorTabsDisabledBackground = '#cccccc';
 export const ColorTabsActiveBackground = '#dddcd5';
-export const ColorTabsActiveText = '#004e57';
+export const ColorTabsActiveText = '#4d4d4d';
 export const ColorTabsSelectedBorder = '#007f8c';
 export const ColorTabsSelectedText = '#007f8c';
+export const ColorTabsSelectedActiveText = '#006974';
+export const ColorTabsSelectedHoverText = '#006974';
 export const ColorTabsActiveDisabled = '#91d5db';
 export const ColorTagTextLightBackground = '#ffffff';
 export const ColorTagTextLightBorder = '#808080';

package/assets/tokens/adeo/js/tokensObject.js

@@ -5485,6 +5485,53 @@ module.exports = {
         },
       },
     },
+    menu: {
+      'is-active': {
+        value: '#007f8c',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/menu.json',
+        isSource: true,
+        original: {
+          value: '{color.primary-01.600.value}',
+        },
+        name: 'ColorMenuIsActive',
+        attributes: {
+          category: 'color',
+          type: 'menu',
+          item: 'is-active',
+        },
+        path: ['color', 'menu', 'is-active'],
+      },
+      hover: {
+        value: '#eeedea',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/menu.json',
+        isSource: true,
+        original: {
+          value: '{color.secondary-sandgrey.100.value}',
+        },
+        name: 'ColorMenuHover',
+        attributes: {
+          category: 'color',
+          type: 'menu',
+          item: 'hover',
+        },
+        path: ['color', 'menu', 'hover'],
+      },
+      active: {
+        value: '#dddcd5',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/menu.json',
+        isSource: true,
+        original: {
+          value: '{color.secondary-sandgrey.200.value}',
+        },
+        name: 'ColorMenuActive',
+        attributes: {
+          category: 'color',
+          type: 'menu',
+          item: 'active',
+        },
+        path: ['color', 'menu', 'active'],
+      },
+    },
     notification: {
       font: {
         value: '#000000',
@@ -6114,6 +6161,68 @@ module.exports = {
         },
       },
     },
+    'segmented-control': {
+      'is-active': {
+        value: '#007f8c',
+        filePath: 'node_modules/@mozaic-ds/tokens/properties/color/segmented-control.json',
+        isSource: true,
+        original: {
+          value: '{color.primary-01.600.value}',
+        },
+        name: 'ColorSegmentedControlIsActive',
+        attributes: {
+          category: 'color',
+          type: 'segmented-control',
+          item: 'is-active',
+        },
+        path: ['color', 'segmented-control', 'is-active'],
+      },
+      hover: {
+        value: '#eeedea',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/segmented-control.json',
+        isSource: true,
+        original: {
+          value: '{color.secondary-sandgrey.100.value}',
+        },
+        name: 'ColorSegmentedControlHover',
+        attributes: {
+          category: 'color',
+          type: 'segmented-control',
+          item: 'hover',
+        },
+        path: ['color', 'segmented-control', 'hover'],
+      },
+      active: {
+        value: '#dddcd5',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/segmented-control.json',
+        isSource: true,
+        original: {
+          value: '{color.secondary-sandgrey.200.value}',
+        },
+        name: 'ColorSegmentedControlActive',
+        attributes: {
+          category: 'color',
+          type: 'segmented-control',
+          item: 'active',
+        },
+        path: ['color', 'segmented-control', 'active'],
+      },
+      background: {
+        value: '#007f8c',
+        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/segmented-control.json',
+        isSource: true,
+        original: {
+          value: '{color.primary-01.600.value}',
+        },
+        name: 'ColorSegmentedControlBackground',
+        attributes: {
+          category: 'color',
+          type: 'segmented-control',
+          item: 'background',
+        },
+        path: ['color', 'segmented-control', 'background'],
+      },
+    },
     sidebar: {
       background: {
         value: '#082435',
@@ -6583,7 +6692,7 @@ module.exports = {
         filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
         isSource: true,
         original: {
-          value: '{color.font.light.value}',
+          value: '{color.grey.600.value}',
         },
         name: 'ColorTabsDefault',
         attributes: {
@@ -6612,19 +6721,22 @@ module.exports = {
         },
       },
       hover: {
-        value: '#004e57',
-        filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
-        isSource: true,
-        original: {
-          value: '{color.primary-01.800.value}',
-        },
-        name: 'ColorTabsHover',
-        attributes: {
-          category: 'color',
-          type: 'tabs',
-          item: 'hover',
+        background: {
+          value: '#eeedea',
+          filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
+          isSource: true,
+          original: {
+            value: '{color.secondary-sandgrey.100.value}',
+          },
+          name: 'ColorTabsHoverBackground',
+          attributes: {
+            category: 'color',
+            type: 'tabs',
+            item: 'hover',
+            subitem: 'background',
+          },
+          path: ['color', 'tabs', 'hover', 'background'],
         },
-        path: ['color', 'tabs', 'hover'],
       },
       disabled: {
         background: {
@@ -6662,11 +6774,11 @@ module.exports = {
           path: ['color', 'tabs', 'active', 'background'],
         },
         text: {
-          value: '#004e57',
+          value: '#4d4d4d',
           filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
           isSource: true,
           original: {
-            value: '{color.primary-01.800.value}',
+            value: '{color.grey.700.value}',
           },
           name: 'ColorTabsActiveText',
           attributes: {
@@ -6711,6 +6823,44 @@ module.exports = {
           },
           path: ['color', 'tabs', 'selected', 'text'],
         },
+        active: {
+          text: {
+            value: '#006974',
+            filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
+            isSource: true,
+            original: {
+              value: '{color.primary-01.700.value}',
+            },
+            name: 'ColorTabsSelectedActiveText',
+            attributes: {
+              category: 'color',
+              type: 'tabs',
+              item: 'selected',
+              subitem: 'active',
+              state: 'text',
+            },
+            path: ['color', 'tabs', 'selected', 'active', 'text'],
+          },
+        },
+        hover: {
+          text: {
+            value: '#006974',
+            filePath: 'node_modules/@mozaic-ds/tokens/AdeoProperties/color/tabs.json',
+            isSource: true,
+            original: {
+              value: '{color.primary-01.700.value}',
+            },
+            name: 'ColorTabsSelectedHoverText',
+            attributes: {
+              category: 'color',
+              type: 'tabs',
+              item: 'selected',
+              subitem: 'hover',
+              state: 'text',
+            },
+            path: ['color', 'tabs', 'selected', 'hover', 'text'],
+          },
+        },
       },
       'active-disabled': {
         value: '#91d5db',

package/assets/tokens/adeo/scss/_tokens.scss

@@ -333,6 +333,9 @@ $color-listbox-tile-border: #b3b3b3 !default;
 $color-listbox-tile-shadow: #191919 !default;
 $color-listbox-tile-hover-background: #e6e6e6 !default;
 $color-listbox-disabled-background: #cccccc !default;
+$color-menu-is-active: #007f8c !default;
+$color-menu-hover: #eeedea !default;
+$color-menu-active: #dddcd5 !default;
 $color-notification-font: #000000 !default;
 $color-notification-information-background: #daeff7 !default;
 $color-notification-information-border: #0b96cc !default;
@@ -368,6 +371,10 @@ $color-progress-background: #cdd4d8 !default;
 $color-progress-indicator: #007f8c !default;
 $color-progress-percentage-default: #191919 !default;
 $color-progress-percentage-half: #ffffff !default;
+$color-segmented-control-is-active: #007f8c !default;
+$color-segmented-control-hover: #eeedea !default;
+$color-segmented-control-active: #dddcd5 !default;
+$color-segmented-control-background: #007f8c !default;
 $color-sidebar-background: #082435 !default;
 $color-sidebar-feature-background: #082435 !default;
 $color-sidebar-feature-hover-background: #405d68 !default;
@@ -397,12 +404,14 @@ $color-tabs-background: #ffffff !default;
 $color-tabs-shadow: #000000 !default;
 $color-tabs-default: #666666 !default;
 $color-tabs-element-background: #eeedea !default;
-$color-tabs-hover: #004e57 !default;
+$color-tabs-hover-background: #eeedea !default;
 $color-tabs-disabled-background: #cccccc !default;
 $color-tabs-active-background: #dddcd5 !default;
-$color-tabs-active-text: #004e57 !default;
+$color-tabs-active-text: #4d4d4d !default;
 $color-tabs-selected-border: #007f8c !default;
 $color-tabs-selected-text: #007f8c !default;
+$color-tabs-selected-active-text: #006974 !default;
+$color-tabs-selected-hover-text: #006974 !default;
 $color-tabs-active-disabled: #91d5db !default;
 $color-tag-text-light-background: #ffffff !default;
 $color-tag-text-light-border: #808080 !default;
@@ -1142,6 +1151,11 @@ $tokens: (
         'background': $color-listbox-disabled-background,
       ),
     ),
+    'menu': (
+      'is-active': $color-menu-is-active,
+      'hover': $color-menu-hover,
+      'active': $color-menu-active,
+    ),
     'notification': (
       'font': $color-notification-font,
       'information': (
@@ -1241,6 +1255,12 @@ $tokens: (
         'half': $color-progress-percentage-half,
       ),
     ),
+    'segmented-control': (
+      'is-active': $color-segmented-control-is-active,
+      'hover': $color-segmented-control-hover,
+      'active': $color-segmented-control-active,
+      'background': $color-segmented-control-background,
+    ),
     'sidebar': (
       'background': $color-sidebar-background,
       'feature': (
@@ -1307,7 +1327,9 @@ $tokens: (
       'element': (
         'background': $color-tabs-element-background,
       ),
-      'hover': $color-tabs-hover,
+      'hover': (
+        'background': $color-tabs-hover-background,
+      ),
       'disabled': (
         'background': $color-tabs-disabled-background,
       ),
@@ -1318,6 +1340,12 @@ $tokens: (
       'selected': (
         'border': $color-tabs-selected-border,
         'text': $color-tabs-selected-text,
+        'active': (
+          'text': $color-tabs-selected-active-text,
+        ),
+        'hover': (
+          'text': $color-tabs-selected-hover-text,
+        ),
       ),
       'active-disabled': $color-tabs-active-disabled,
     ),