@mozaic-ds/vue 0.23.0 → 0.24.0

package/src/index.js

@@ -31,6 +31,7 @@ export { MCard } from './components/card/';
 export { MCheckbox, MCheckboxGroup } from './components/checkbox/';
 export { MDataTable, MDataTableHeader } from './components/datatable';
 export { MField } from './components/field';
+export { MDropdown } from './components/dropdown';
 export { MFileUploader } from './components/fileuploader';
 export { MFlag } from './components/flag';
 export { MHero } from './components/hero';

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

@@ -309,6 +309,12 @@
   <color name="color_link_danger_active">#ff8b2226</color>
   <color name="color_link_danger_disabled">#ffe6e6e6</color>
   <color name="color_link_danger_hover">#ff3e1219</color>
+  <color name="color_listbox_background">#ffffffff</color>
+  <color name="color_listbox_border">#ff666666</color>
+  <color name="color_listbox_tile_border">#ffb3b3b3</color>
+  <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_notification_font">#ff000000</color>
   <color name="color_notification_information_background">#ffdaeff7</color>
   <color name="color_notification_information_border">#ff0b96cc</color>

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

@@ -305,6 +305,12 @@ $color-link-danger-visited: var(--color-link-danger-visited, #8b2226);
 $color-link-danger-active: var(--color-link-danger-active, #8b2226);
 $color-link-danger-disabled: var(--color-link-danger-disabled, #e6e6e6);
 $color-link-danger-hover: var(--color-link-danger-hover, #3e1219);
+$color-listbox-background: var(--color-listbox-background, #ffffff);
+$color-listbox-border: var(--color-listbox-border, #666666);
+$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-notification-font: var(--color-notification-font, #000000);
 $color-notification-information-background: var(--color-notification-information-background, #daeff7);
 $color-notification-information-border: var(--color-notification-information-border, #0b96cc);

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

@@ -227,6 +227,12 @@
   --color-notification-information-border: var(--color-info-500);
   --color-notification-information-background: var(--color-info-100);
   --color-notification-font: var(--color-grey-999);
+  --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);
+  --color-listbox-tile-border: var(--color-grey-300);
+  --color-listbox-border: var(--color-grey-600);
+  --color-listbox-background: var(--color-grey-000);
   --color-link-danger-hover: var(--color-secondary-red-900);
   --color-link-danger-disabled: var(--color-grey-100);
   --color-link-danger-active: var(--color-secondary-red-700);

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

@@ -313,6 +313,12 @@ ColorLinkDangerVisited,
 ColorLinkDangerActive,
 ColorLinkDangerDisabled,
 ColorLinkDangerHover,
+ColorListboxBackground,
+ColorListboxBorder,
+ColorListboxTileBorder,
+ColorListboxTileShadow,
+ColorListboxTileHoverBackground,
+ColorListboxDisabledBackground,
 ColorNotificationFont,
 ColorNotificationInformationBackground,
 ColorNotificationInformationBorder,

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

@@ -324,6 +324,12 @@
 [UIColor colorWithRed:0.545f green:0.133f blue:0.149f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.243f green:0.071f blue:0.098f alpha:1.000f],
+[UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
+[UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
+[UIColor colorWithRed:0.702f green:0.702f blue:0.702f alpha:1.000f],
+[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.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],

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

@@ -223,6 +223,12 @@ public class StyleDictionaryColor {
     public static let colorLinkPrimaryDisabled = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
     public static let colorLinkPrimaryHover = UIColor(red: 0.000, green: 0.180, blue: 0.200, alpha: 1)
     public static let colorLinkPrimaryVisited = UIColor(red: 0.000, green: 0.412, blue: 0.455, alpha: 1)
+    public static let colorListboxBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
+    public static let colorListboxBorder = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
+    public static let colorListboxDisabledBackground = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
+    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 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 colorNotificationFont = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)

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

@@ -308,6 +308,12 @@ export const ColorLinkDangerVisited = "#8b2226";
 export const ColorLinkDangerActive = "#8b2226";
 export const ColorLinkDangerDisabled = "#e6e6e6";
 export const ColorLinkDangerHover = "#3e1219";
+export const ColorListboxBackground = "#ffffff";
+export const ColorListboxBorder = "#666666";
+export const ColorListboxTileBorder = "#b3b3b3";
+export const ColorListboxTileShadow = "#191919";
+export const ColorListboxTileHoverBackground = "#e6e6e6";
+export const ColorListboxDisabledBackground = "#cccccc";
 export const ColorNotificationFont = "#000000";
 export const ColorNotificationInformationBackground = "#daeff7";
 export const ColorNotificationInformationBorder = "#0b96cc";

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

@@ -6494,6 +6494,138 @@ module.exports = {
         }
       }
     },
+    "listbox": {
+      "background": {
+        "value": "#ffffff",
+        "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.grey.000.value}"
+        },
+        "name": "ColorListboxBackground",
+        "attributes": {
+          "category": "color",
+          "type": "listbox",
+          "item": "background"
+        },
+        "path": [
+          "color",
+          "listbox",
+          "background"
+        ]
+      },
+      "border": {
+        "value": "#666666",
+        "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.grey.600.value}"
+        },
+        "name": "ColorListboxBorder",
+        "attributes": {
+          "category": "color",
+          "type": "listbox",
+          "item": "border"
+        },
+        "path": [
+          "color",
+          "listbox",
+          "border"
+        ]
+      },
+      "tile": {
+        "border": {
+          "value": "#b3b3b3",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.300.value}"
+          },
+          "name": "ColorListboxTileBorder",
+          "attributes": {
+            "category": "color",
+            "type": "listbox",
+            "item": "tile",
+            "subitem": "border"
+          },
+          "path": [
+            "color",
+            "listbox",
+            "tile",
+            "border"
+          ]
+        },
+        "shadow": {
+          "value": "#191919",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.900.value}"
+          },
+          "name": "ColorListboxTileShadow",
+          "attributes": {
+            "category": "color",
+            "type": "listbox",
+            "item": "tile",
+            "subitem": "shadow"
+          },
+          "path": [
+            "color",
+            "listbox",
+            "tile",
+            "shadow"
+          ]
+        },
+        "hover": {
+          "background": {
+            "value": "#e6e6e6",
+            "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.grey.100.value}"
+            },
+            "name": "ColorListboxTileHoverBackground",
+            "attributes": {
+              "category": "color",
+              "type": "listbox",
+              "item": "tile",
+              "subitem": "hover",
+              "state": "background"
+            },
+            "path": [
+              "color",
+              "listbox",
+              "tile",
+              "hover",
+              "background"
+            ]
+          }
+        }
+      },
+      "disabled": {
+        "background": {
+          "value": "#cccccc",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/listbox.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.200.value}"
+          },
+          "name": "ColorListboxDisabledBackground",
+          "attributes": {
+            "category": "color",
+            "type": "listbox",
+            "item": "disabled",
+            "subitem": "background"
+          },
+          "path": [
+            "color",
+            "listbox",
+            "disabled",
+            "background"
+          ]
+        }
+      }
+    },
     "notification": {
       "font": {
         "value": "#000000",

package/src/tokens/adeo/scss/_tokens.scss

@@ -309,6 +309,12 @@ $color-link-danger-visited: #8b2226 !default;
 $color-link-danger-active: #8b2226 !default;
 $color-link-danger-disabled: #e6e6e6 !default;
 $color-link-danger-hover: #3e1219 !default;
+$color-listbox-background: #ffffff !default;
+$color-listbox-border: #666666 !default;
+$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-notification-font: #000000 !default;
 $color-notification-information-background: #daeff7 !default;
 $color-notification-information-border: #0b96cc !default;
@@ -1044,6 +1050,20 @@ $tokens: (
         'hover': $color-link-danger-hover
       )
     ),
+    'listbox': (
+      'background': $color-listbox-background,
+      'border': $color-listbox-border,
+      'tile': (
+        'border': $color-listbox-tile-border,
+        'shadow': $color-listbox-tile-shadow,
+        'hover': (
+          'background': $color-listbox-tile-hover-background
+        )
+      ),
+      'disabled': (
+        'background': $color-listbox-disabled-background
+      )
+    ),
     'notification': (
       'font': $color-notification-font,
       'information': (

package/types/index.d.ts

@@ -16,6 +16,7 @@ declare module '@mozaic-ds/vue' {
   const MCard: VueConstructor;
   const MCheckbox: VueConstructor;
   const MCheckboxGroup: VueConstructor;
+  const MDropdown: VueConstructor;
   const MField: VueConstructor;
   const MFileUploader: VueConstructor;
   const MFlag: VueConstructor;
@@ -64,6 +65,7 @@ declare module '@mozaic-ds/vue' {
     MCard,
     MCheckbox,
     MCheckboxGroup,
+    MDropdown,
     MField,
     MFileUploader,
     MFlag,