@mozaic-ds/vue 0.39.1-beta.0 → 0.40.0

package/src/components/optionbutton/MOptionButton.vue

@@ -62,6 +62,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
+@import 'settings-tools/all-settings';
 @import 'components/c.option-button';
 </style>

package/src/components/optioncard/MOptionCard.vue

@@ -103,32 +103,4 @@ export default {
 @import 'components/c.checkbox';
 @import 'components/c.radio';
 @import 'components/c.option-card';
-
-/* stylelint-disable */
-// temporary fix
-.mc-option-card {
-  $parent: get-parent-selector(&);
-
-  border-radius: get-border-radius('m');
-  cursor: pointer;
-  position: relative;
-
-  &__input {
-    @at-root input#{&} {
-      &:checked ~ #{$parent}__content {
-        button,
-        [href],
-        input,
-        select,
-        textarea,
-        label,
-        .mc-option-card__focusable,
-        [tabindex]:not([tabindex='-1']) {
-          position: relative;
-        }
-      }
-    }
-  }
-}
-/* stylelint-enable */
 </style>

package/src/components/passwordinput/MPasswordInput.vue

@@ -91,7 +91,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-@import 'components/_c.password-input';
+@import 'settings-tools/all-settings';
+@import 'components/c.text-input';
+@import 'components/c.password-input';
 </style>

package/src/components/phonenumber/MPhoneNumber.vue

@@ -360,9 +360,9 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
-@import 'components/_c.phone-number';
+@import 'settings-tools/all-settings';
+@import 'components/c.text-input';
+@import 'components/c.phone-number';
 
 .mc-phone-number {
   span.flag {

package/src/components/progressbar/MProgress.vue

@@ -97,6 +97,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.progressbar';
+@import 'settings-tools/all-settings';
+@import 'components/c.progressbar';
 </style>

package/src/components/quantityselector/MQuantitySelector.vue

@@ -161,6 +161,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.quantity-selector';
+@import 'settings-tools/all-settings';
+@import 'components/c.quantity-selector';
 </style>

package/src/components/radio/MRadio.vue

@@ -50,6 +50,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.radio';
+@import 'settings-tools/all-settings';
+@import 'components/c.radio';
 </style>

package/src/components/ratingstars/MStarsInput.vue

@@ -114,6 +114,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stars-input';
+@import 'settings-tools/all-settings';
+@import 'components/c.stars-input';
 </style>

package/src/components/ratingstars/MStarsResult.vue

@@ -84,6 +84,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stars-result';
+@import 'settings-tools/all-settings';
+@import 'components/c.stars-result';
 </style>

package/src/components/select/MSelect.vue

@@ -140,6 +140,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.select';
+@import 'settings-tools/all-settings';
+@import 'components/c.select';
 </style>

package/src/components/stepper/MStepper.vue

@@ -21,7 +21,11 @@
         :style="`--steps: ${steps.length}; --current: ${idx + 1};`"
         @click="isStepValidated(idx) && $emit('step-changed', step)"
       >
-        <a v-if="step.href && isStepValidated(idx)" :href="step.href" class="mc-stepper__link">
+        <a
+          v-if="step.href && isStepValidated(idx)"
+          :href="step.href"
+          class="mc-stepper__link"
+        >
           <div class="mc-stepper__indicator" aria-hidden="true">
             <m-icon
               v-if="isStepValidated(idx)"
@@ -106,6 +110,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import 'settings-tools/_all-settings';
-@import 'components/_c.stepper';
+@import 'settings-tools/all-settings';
+@import 'components/c.stepper';
 </style>

package/src/components/tags/MTag.vue

@@ -170,6 +170,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tag';
+@import 'settings-tools/all-settings';
+@import 'components/c.tag';
 </style>

package/src/components/textarea/MTextArea.vue

@@ -49,6 +49,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.textarea';
+@import 'settings-tools/all-settings';
+@import 'components/c.textarea';
 </style>

package/src/components/textinput/MTextInputField.vue

@@ -103,6 +103,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.text-input';
+@import 'settings-tools/all-settings';
+@import 'components/c.text-input';
 </style>

package/src/components/textinput/MTextInputIcon.vue

@@ -37,6 +37,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.left-icon-input';
+@import 'settings-tools/all-settings';
+@import 'components/c.left-icon-input';
 </style>

package/src/components/toggle/MToggle.vue

@@ -112,6 +112,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
+@import 'settings-tools/all-settings';
 @import 'components/c.toggle';
 </style>

package/src/components/tooltip/MTooltip.vue

@@ -37,6 +37,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import 'settings-tools/_all-settings';
-@import 'components/_c.tooltip';
+@import 'settings-tools/all-settings';
+@import 'components/c.tooltip';
 </style>

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

@@ -208,6 +208,18 @@
   <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_datatable_filters_border">#ffb0bbc0</color>
+  <color name="color_datatable_container_background">#ffe7e7f0</color>
+  <color name="color_datatable_thead_font">#ff393879</color>
+  <color name="color_datatable_sort_arrow_default">#ffcdd4d8</color>
+  <color name="color_datatable_sort_arrow_active">#ff605f9d</color>
+  <color name="color_datatable_cell_font">#ff191919</color>
+  <color name="color_datatable_cell_background_hover">#ffeaedef</color>
+  <color name="color_datatable_cell_background_selected">#ffd9f0f3</color>
+  <color name="color_datatable_subtable_background">#ffe7e7f0</color>
+  <color name="color_datatable_subtable_border">#ffa4a3c7</color>
+  <color name="color_datatable_subtable_font">#ff1a1a4b</color>
+  <color name="color_datatable_icon">#ff007f8c</color>
   <color name="color_dialog_background">#ffffffff</color>
   <color name="color_dialog_icon">#ff666666</color>
   <color name="color_dialog_close">#ff808080</color>
@@ -442,7 +454,7 @@
   <color name="color_toggle_disabled_label">#ff808080</color>
   <color name="color_toggle_disabled_checked_background">#ff91d5db</color>
   <color name="color_toggle_disabled_checked_circle">#ffffffff</color>
-  <color name="color_tooltip_background">#ff4d4d4d</color>
+  <color name="color_tooltip_background">#ff5b737d</color>
   <color name="color_tooltip_border">#ffffffff</color>
   <color name="color_secondary_sandgrey_100">#ffeeedea</color>
   <color name="color_secondary_sandgrey_200">#ffdddcd5</color>

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

@@ -204,6 +204,18 @@ $color-button-bordered-danger-hover-background: var(--color-button-bordered-dang
 $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-datatable-filters-border: var(--color-datatable-filters-border, #b0bbc0);
+$color-datatable-container-background: var(--color-datatable-container-background, #e7e7f0);
+$color-datatable-thead-font: var(--color-datatable-thead-font, #393879);
+$color-datatable-sort-arrow-default: var(--color-datatable-sort-arrow-default, #cdd4d8);
+$color-datatable-sort-arrow-active: var(--color-datatable-sort-arrow-active, #605f9d);
+$color-datatable-cell-font: var(--color-datatable-cell-font, #191919);
+$color-datatable-cell-background-hover: var(--color-datatable-cell-background-hover, #eaedef);
+$color-datatable-cell-background-selected: var(--color-datatable-cell-background-selected, #d9f0f3);
+$color-datatable-subtable-background: var(--color-datatable-subtable-background, #e7e7f0);
+$color-datatable-subtable-border: var(--color-datatable-subtable-border, #a4a3c7);
+$color-datatable-subtable-font: var(--color-datatable-subtable-font, #1a1a4b);
+$color-datatable-icon: var(--color-datatable-icon, #007f8c);
 $color-dialog-background: var(--color-dialog-background, #ffffff);
 $color-dialog-icon: var(--color-dialog-icon, #666666);
 $color-dialog-close: var(--color-dialog-close, #808080);
@@ -438,7 +450,7 @@ $color-toggle-disabled-circle: var(--color-toggle-disabled-circle, #b3b3b3);
 $color-toggle-disabled-label: var(--color-toggle-disabled-label, #808080);
 $color-toggle-disabled-checked-background: var(--color-toggle-disabled-checked-background, #91d5db);
 $color-toggle-disabled-checked-circle: var(--color-toggle-disabled-checked-circle, #ffffff);
-$color-tooltip-background: var(--color-tooltip-background, #4d4d4d);
+$color-tooltip-background: var(--color-tooltip-background, #5b737d);
 $color-tooltip-border: var(--color-tooltip-border, #ffffff);
 $color-secondary-sandgrey-100: var(--color-secondary-sandgrey-100, #eeedea);
 $color-secondary-sandgrey-200: var(--color-secondary-sandgrey-200, #dddcd5);

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

@@ -120,7 +120,7 @@
   --color-primary-01-200: #91d5db;
   --color-primary-01-100: #d9f0f3;
   --color-tooltip-border: var(--color-grey-000);
-  --color-tooltip-background: var(--color-grey-700);
+  --color-tooltip-background: var(--color-secondary-blue-600);
   --color-toggle-disabled-checked-circle: var(--color-grey-000);
   --color-toggle-disabled-checked-background: var(--color-primary-01-200);
   --color-toggle-disabled-label: var(--color-grey-500);
@@ -349,6 +349,18 @@
   --color-dialog-close: var(--color-grey-500);
   --color-dialog-icon: var(--color-grey-600);
   --color-dialog-background: var(--color-grey-000);
+  --color-datatable-icon: var(--color-primary-01-600);
+  --color-datatable-subtable-font: var(--color-secondary-purple-900);
+  --color-datatable-subtable-border: var(--color-secondary-purple-300);
+  --color-datatable-subtable-background: var(--color-secondary-purple-100);
+  --color-datatable-cell-background-selected: var(--color-primary-01-100);
+  --color-datatable-cell-background-hover: var(--color-secondary-blue-100);
+  --color-datatable-cell-font: var(--color-grey-900);
+  --color-datatable-sort-arrow-active: var(--color-secondary-purple-500);
+  --color-datatable-sort-arrow-default: var(--color-secondary-blue-200);
+  --color-datatable-thead-font: var(--color-secondary-purple-700);
+  --color-datatable-container-background: var(--color-secondary-purple-100);
+  --color-datatable-filters-border: var(--color-secondary-blue-300);
   --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);

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

@@ -212,6 +212,18 @@ ColorButtonBorderedDangerHoverBackground,
 ColorButtonBorderedDangerHoverFont,
 ColorCardBorderedBackground,
 ColorCardBorderedBorder,
+ColorDatatableFiltersBorder,
+ColorDatatableContainerBackground,
+ColorDatatableTheadFont,
+ColorDatatableSortArrowDefault,
+ColorDatatableSortArrowActive,
+ColorDatatableCellFont,
+ColorDatatableCellBackgroundHover,
+ColorDatatableCellBackgroundSelected,
+ColorDatatableSubtableBackground,
+ColorDatatableSubtableBorder,
+ColorDatatableSubtableFont,
+ColorDatatableIcon,
 ColorDialogBackground,
 ColorDialogIcon,
 ColorDialogClose,

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

@@ -223,6 +223,18 @@
 [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:0.690f green:0.733f blue:0.753f alpha:1.000f],
+[UIColor colorWithRed:0.906f green:0.906f blue:0.941f alpha:1.000f],
+[UIColor colorWithRed:0.224f green:0.220f blue:0.475f alpha:1.000f],
+[UIColor colorWithRed:0.804f green:0.831f blue:0.847f alpha:1.000f],
+[UIColor colorWithRed:0.376f green:0.373f blue:0.616f alpha:1.000f],
+[UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
+[UIColor colorWithRed:0.918f green:0.929f blue:0.937f alpha:1.000f],
+[UIColor colorWithRed:0.851f green:0.941f blue:0.953f alpha:1.000f],
+[UIColor colorWithRed:0.906f green:0.906f blue:0.941f alpha:1.000f],
+[UIColor colorWithRed:0.643f green:0.639f blue:0.780f alpha:1.000f],
+[UIColor colorWithRed:0.102f green:0.102f blue:0.294f 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.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:0.502f green:0.502f blue:0.502f alpha:1.000f],
@@ -457,7 +469,7 @@
 [UIColor colorWithRed:0.502f green:0.502f blue:0.502f 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.302f green:0.302f blue:0.302f alpha:1.000f],
+[UIColor colorWithRed:0.357f green:0.451f blue:0.490f 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.867f green:0.863f blue:0.835f alpha:1.000f],

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

@@ -102,6 +102,18 @@ public class StyleDictionaryColor {
     public static let colorDanger700 = UIColor(red: 0.549, green: 0.000, blue: 0.012, alpha: 1)
     public static let colorDanger800 = UIColor(red: 0.325, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorDanger900 = UIColor(red: 0.176, green: 0.000, blue: 0.000, alpha: 1)
+    public static let colorDatatableCellBackgroundHover = UIColor(red: 0.918, green: 0.929, blue: 0.937, alpha: 1)
+    public static let colorDatatableCellBackgroundSelected = UIColor(red: 0.851, green: 0.941, blue: 0.953, alpha: 1)
+    public static let colorDatatableCellFont = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
+    public static let colorDatatableContainerBackground = UIColor(red: 0.906, green: 0.906, blue: 0.941, alpha: 1)
+    public static let colorDatatableFiltersBorder = UIColor(red: 0.690, green: 0.733, blue: 0.753, alpha: 1)
+    public static let colorDatatableIcon = UIColor(red: 0.000, green: 0.498, blue: 0.549, alpha: 1)
+    public static let colorDatatableSortArrowActive = UIColor(red: 0.376, green: 0.373, blue: 0.616, alpha: 1)
+    public static let colorDatatableSortArrowDefault = UIColor(red: 0.804, green: 0.831, blue: 0.847, alpha: 1)
+    public static let colorDatatableSubtableBackground = UIColor(red: 0.906, green: 0.906, blue: 0.941, alpha: 1)
+    public static let colorDatatableSubtableBorder = UIColor(red: 0.643, green: 0.639, blue: 0.780, alpha: 1)
+    public static let colorDatatableSubtableFont = UIColor(red: 0.102, green: 0.102, blue: 0.294, alpha: 1)
+    public static let colorDatatableTheadFont = UIColor(red: 0.224, green: 0.220, blue: 0.475, alpha: 1)
     public static let colorDialogBackground = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorDialogClose = UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1)
     public static let colorDialogFooterShadow = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
@@ -446,7 +458,7 @@ public class StyleDictionaryColor {
     public static let colorToggleOffCircle = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorToggleOnBackground = UIColor(red: 0.000, green: 0.569, blue: 0.624, alpha: 1)
     public static let colorToggleOnCircle = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
-    public static let colorTooltipBackground = UIColor(red: 0.302, green: 0.302, blue: 0.302, alpha: 1)
+    public static let colorTooltipBackground = UIColor(red: 0.357, green: 0.451, blue: 0.490, alpha: 1)
     public static let colorTooltipBorder = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1)
     public static let colorWarning100 = UIColor(red: 0.992, green: 0.945, blue: 0.910, alpha: 1)
     public static let colorWarning200 = UIColor(red: 0.973, green: 0.824, blue: 0.702, alpha: 1)

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

@@ -207,6 +207,18 @@ export const ColorButtonBorderedDangerHoverBackground = "#fdeaea";
 export const ColorButtonBorderedDangerHoverFont = "#8c0003";
 export const ColorCardBorderedBackground = "#ffffff";
 export const ColorCardBorderedBorder = "#808080";
+export const ColorDatatableFiltersBorder = "#b0bbc0";
+export const ColorDatatableContainerBackground = "#e7e7f0";
+export const ColorDatatableTheadFont = "#393879";
+export const ColorDatatableSortArrowDefault = "#cdd4d8";
+export const ColorDatatableSortArrowActive = "#605f9d";
+export const ColorDatatableCellFont = "#191919";
+export const ColorDatatableCellBackgroundHover = "#eaedef";
+export const ColorDatatableCellBackgroundSelected = "#d9f0f3";
+export const ColorDatatableSubtableBackground = "#e7e7f0";
+export const ColorDatatableSubtableBorder = "#a4a3c7";
+export const ColorDatatableSubtableFont = "#1a1a4b";
+export const ColorDatatableIcon = "#007f8c";
 export const ColorDialogBackground = "#ffffff";
 export const ColorDialogIcon = "#666666";
 export const ColorDialogClose = "#808080";
@@ -441,7 +453,7 @@ export const ColorToggleDisabledCircle = "#b3b3b3";
 export const ColorToggleDisabledLabel = "#808080";
 export const ColorToggleDisabledCheckedBackground = "#91d5db";
 export const ColorToggleDisabledCheckedCircle = "#ffffff";
-export const ColorTooltipBackground = "#4d4d4d";
+export const ColorTooltipBackground = "#5b737d";
 export const ColorTooltipBorder = "#ffffff";
 export const ColorSecondarySandgrey100 = "#eeedea";
 export const ColorSecondarySandgrey200 = "#dddcd5";