@mozaic-ds/vue 0.33.0 → 0.34.1

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

@@ -288,11 +288,12 @@
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f 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],
+[UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
+[UIColor colorWithRed:0.502f green:0.502f blue:0.502f alpha:1.000f],
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:0.459f green:0.537f blue:0.573f alpha:1.000f],
 [UIColor colorWithRed:0.275f green:0.651f blue:0.063f alpha:1.000f],
@@ -356,6 +357,8 @@
 [UIColor colorWithRed:0.200f green:0.200f blue:0.200f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],
 [UIColor colorWithRed:0.851f green:0.941f blue:0.953f alpha:1.000f],
+[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
+[UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:0.031f green:0.141f blue:0.208f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
@@ -443,6 +446,7 @@
 [UIColor colorWithRed:0.098f green:0.098f blue:0.098f alpha:1.000f],
 [UIColor colorWithRed:0.702f green:0.702f blue:0.702f alpha:1.000f],
 [UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
+[UIColor colorWithRed:0.000f green:0.000f blue:0.000f alpha:1.000f],
 [UIColor colorWithRed:0.400f green:0.400f blue:0.400f alpha:1.000f],
 [UIColor colorWithRed:1.000f green:1.000f blue:1.000f alpha:1.000f],
 [UIColor colorWithRed:0.000f green:0.569f blue:0.624f alpha:1.000f],
@@ -450,6 +454,7 @@
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.902f green:0.902f blue:0.902f alpha:1.000f],
 [UIColor colorWithRed:0.702f green:0.702f blue:0.702f alpha:1.000f],
+[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],

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

@@ -194,11 +194,12 @@ public class StyleDictionaryColor {
     public static let colorInputDisabledBackground = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
     public static let colorInputDisabledBorder = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
     public static let colorInputDisabledIcon = UIColor(red: 0.600, green: 0.600, blue: 0.600, alpha: 1)
+    public static let colorInputDisabledLabel = UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1)
     public static let colorInputFocusBorder = UIColor(red: 0.459, green: 0.537, blue: 0.573, alpha: 1)
     public static let colorInputHoverBorder = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
     public static let colorInputInvalidBorder = UIColor(red: 0.776, green: 0.067, blue: 0.071, alpha: 1)
     public static let colorInputInvalidHoverBorder = UIColor(red: 0.325, green: 0.000, blue: 0.000, alpha: 1)
-    public static let colorInputPlaceholder = UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1)
+    public static let colorInputPlaceholder = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
     public static let colorInputText = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
     public static let colorInputValidBorder = UIColor(red: 0.275, green: 0.651, blue: 0.063, alpha: 1)
     public static let colorInputValidHoverBorder = UIColor(red: 0.012, green: 0.314, blue: 0.063, alpha: 1)
@@ -253,6 +254,8 @@ public class StyleDictionaryColor {
     public static let colorOptionButtonLabelShadow = UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1)
     public static let colorOptionCardCheckedLabelBorder = UIColor(red: 0.000, green: 0.569, blue: 0.624, alpha: 1)
     public static let colorOptionCardCheckedLabelShadow = UIColor(red: 0.851, green: 0.941, blue: 0.953, alpha: 1)
+    public static let colorOptionCardDisabledContent = UIColor(red: 0.800, green: 0.800, blue: 0.800, alpha: 1)
+    public static let colorOptionCardDisabledLabel = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
     public static let colorOptionCardHoverLabelShadow = UIColor(red: 0.200, green: 0.200, blue: 0.200, alpha: 1)
     public static let colorOptionCardLabelShadow = UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1)
     public static let colorOverlayBackground = UIColor(red: 0.098, green: 0.098, blue: 0.098, alpha: 1)
@@ -436,7 +439,9 @@ public class StyleDictionaryColor {
     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)
     public static let colorToggleDisabledCircle = UIColor(red: 0.702, green: 0.702, blue: 0.702, alpha: 1)
+    public static let colorToggleDisabledLabel = UIColor(red: 0.502, green: 0.502, blue: 0.502, alpha: 1)
     public static let colorToggleHoverCircle = UIColor(red: 0.902, green: 0.902, blue: 0.902, alpha: 1)
+    public static let colorToggleLabel = UIColor(red: 0.000, green: 0.000, blue: 0.000, alpha: 1)
     public static let colorToggleOffBackground = UIColor(red: 0.400, green: 0.400, blue: 0.400, alpha: 1)
     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)

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

@@ -272,11 +272,12 @@ export const ColorHeadingUnderlineLightest = "#91d5db";
 export const ColorHeroCoverBackground = "#191919";
 export const ColorInputText = "#191919";
 export const ColorInputBorder = "#666666";
-export const ColorInputPlaceholder = "#808080";
+export const ColorInputPlaceholder = "#666666";
 export const ColorInputBackground = "#ffffff";
-export const ColorInputDisabledBorder = "#e6e6e6";
 export const ColorInputDisabledBackground = "#e6e6e6";
+export const ColorInputDisabledBorder = "#e6e6e6";
 export const ColorInputDisabledIcon = "#999999";
+export const ColorInputDisabledLabel = "#808080";
 export const ColorInputHoverBorder = "#191919";
 export const ColorInputFocusBorder = "#758992";
 export const ColorInputValidBorder = "#46a610";
@@ -340,6 +341,8 @@ export const ColorOptionCardLabelShadow = "#b3b3b3";
 export const ColorOptionCardHoverLabelShadow = "#333333";
 export const ColorOptionCardCheckedLabelBorder = "#00919f";
 export const ColorOptionCardCheckedLabelShadow = "#d9f0f3";
+export const ColorOptionCardDisabledContent = "#cccccc";
+export const ColorOptionCardDisabledLabel = "#666666";
 export const ColorOverlayBackground = "#191919";
 export const ColorOverlayLoaderBackground = "#082435";
 export const ColorPasswordInputButtonHoverBackground = "#e6e6e6";
@@ -427,6 +430,7 @@ export const ColorTagRemovableDarkText = "#191919";
 export const ColorTagRemovableDarkIcon = "#191919";
 export const ColorTagRemovableDarkHoverBackground = "#b3b3b3";
 export const ColorTagRemovableDarkActiveBackground = "#999999";
+export const ColorToggleLabel = "#000000";
 export const ColorToggleOffBackground = "#666666";
 export const ColorToggleOffCircle = "#ffffff";
 export const ColorToggleOnBackground = "#00919f";
@@ -434,6 +438,7 @@ export const ColorToggleOnCircle = "#ffffff";
 export const ColorToggleHoverCircle = "#e6e6e6";
 export const ColorToggleDisabledBackground = "#e6e6e6";
 export const ColorToggleDisabledCircle = "#b3b3b3";
+export const ColorToggleDisabledLabel = "#808080";
 export const ColorToggleDisabledCheckedBackground = "#91d5db";
 export const ColorToggleDisabledCheckedCircle = "#ffffff";
 export const ColorTooltipBackground = "#4d4d4d";

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

@@ -5714,11 +5714,11 @@ module.exports = {
         ]
       },
       "placeholder": {
-        "value": "#808080",
+        "value": "#666666",
         "filePath": "node_modules/@mozaic-ds/tokens/properties/color/input.json",
         "isSource": true,
         "original": {
-          "value": "{color.grey.500.value}"
+          "value": "{color.grey.600.value}"
         },
         "name": "ColorInputPlaceholder",
         "attributes": {
@@ -5752,46 +5752,46 @@ module.exports = {
         ]
       },
       "disabled": {
-        "border": {
+        "background": {
           "value": "#e6e6e6",
           "filePath": "node_modules/@mozaic-ds/tokens/properties/color/input.json",
           "isSource": true,
           "original": {
             "value": "{color.grey.100.value}"
           },
-          "name": "ColorInputDisabledBorder",
+          "name": "ColorInputDisabledBackground",
           "attributes": {
             "category": "color",
             "type": "input",
             "item": "disabled",
-            "subitem": "border"
+            "subitem": "background"
           },
           "path": [
             "color",
             "input",
             "disabled",
-            "border"
+            "background"
           ]
         },
-        "background": {
+        "border": {
           "value": "#e6e6e6",
           "filePath": "node_modules/@mozaic-ds/tokens/properties/color/input.json",
           "isSource": true,
           "original": {
             "value": "{color.grey.100.value}"
           },
-          "name": "ColorInputDisabledBackground",
+          "name": "ColorInputDisabledBorder",
           "attributes": {
             "category": "color",
             "type": "input",
             "item": "disabled",
-            "subitem": "background"
+            "subitem": "border"
           },
           "path": [
             "color",
             "input",
             "disabled",
-            "background"
+            "border"
           ]
         },
         "icon": {
@@ -5814,6 +5814,27 @@ module.exports = {
             "disabled",
             "icon"
           ]
+        },
+        "label": {
+          "value": "#808080",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/input.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.500.value}"
+          },
+          "name": "ColorInputDisabledLabel",
+          "attributes": {
+            "category": "color",
+            "type": "input",
+            "item": "disabled",
+            "subitem": "label"
+          },
+          "path": [
+            "color",
+            "input",
+            "disabled",
+            "label"
+          ]
         }
       },
       "hover": {
@@ -7228,6 +7249,50 @@ module.exports = {
             ]
           }
         }
+      },
+      "disabled": {
+        "content": {
+          "value": "#cccccc",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/option-card.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.200.value}"
+          },
+          "name": "ColorOptionCardDisabledContent",
+          "attributes": {
+            "category": "color",
+            "type": "option-card",
+            "item": "disabled",
+            "subitem": "content"
+          },
+          "path": [
+            "color",
+            "option-card",
+            "disabled",
+            "content"
+          ]
+        },
+        "label": {
+          "value": "#666666",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/option-card.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.600.value}"
+          },
+          "name": "ColorOptionCardDisabledLabel",
+          "attributes": {
+            "category": "color",
+            "type": "option-card",
+            "item": "disabled",
+            "subitem": "label"
+          },
+          "path": [
+            "color",
+            "option-card",
+            "disabled",
+            "label"
+          ]
+        }
       }
     },
     "overlay": {
@@ -9287,6 +9352,25 @@ module.exports = {
       }
     },
     "toggle": {
+      "label": {
+        "value": "#000000",
+        "filePath": "node_modules/@mozaic-ds/tokens/properties/color/toggle.json",
+        "isSource": true,
+        "original": {
+          "value": "{color.grey.999.value}"
+        },
+        "name": "ColorToggleLabel",
+        "attributes": {
+          "category": "color",
+          "type": "toggle",
+          "item": "label"
+        },
+        "path": [
+          "color",
+          "toggle",
+          "label"
+        ]
+      },
       "off": {
         "background": {
           "value": "#666666",
@@ -9440,6 +9524,27 @@ module.exports = {
             "disabled",
             "circle"
           ]
+        },
+        "label": {
+          "value": "#808080",
+          "filePath": "node_modules/@mozaic-ds/tokens/properties/color/toggle.json",
+          "isSource": true,
+          "original": {
+            "value": "{color.grey.500.value}"
+          },
+          "name": "ColorToggleDisabledLabel",
+          "attributes": {
+            "category": "color",
+            "type": "toggle",
+            "item": "disabled",
+            "subitem": "label"
+          },
+          "path": [
+            "color",
+            "toggle",
+            "disabled",
+            "label"
+          ]
         }
       },
       "disabled-checked": {

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

@@ -273,11 +273,12 @@ $color-heading-underline-lightest: #91d5db !default;
 $color-hero-cover-background: #191919 !default;
 $color-input-text: #191919 !default;
 $color-input-border: #666666 !default;
-$color-input-placeholder: #808080 !default;
+$color-input-placeholder: #666666 !default;
 $color-input-background: #ffffff !default;
-$color-input-disabled-border: #e6e6e6 !default;
 $color-input-disabled-background: #e6e6e6 !default;
+$color-input-disabled-border: #e6e6e6 !default;
 $color-input-disabled-icon: #999999 !default;
+$color-input-disabled-label: #808080 !default;
 $color-input-hover-border: #191919 !default;
 $color-input-focus-border: #758992 !default;
 $color-input-valid-border: #46a610 !default;
@@ -341,6 +342,8 @@ $color-option-card-label-shadow: #b3b3b3 !default;
 $color-option-card-hover-label-shadow: #333333 !default;
 $color-option-card-checked-label-border: #00919f !default;
 $color-option-card-checked-label-shadow: #d9f0f3 !default;
+$color-option-card-disabled-content: #cccccc !default;
+$color-option-card-disabled-label: #666666 !default;
 $color-overlay-background: #191919 !default;
 $color-overlay-loader-background: #082435 !default;
 $color-password-input-button-hover-background: #e6e6e6 !default;
@@ -428,6 +431,7 @@ $color-tag-removable-dark-text: #191919 !default;
 $color-tag-removable-dark-icon: #191919 !default;
 $color-tag-removable-dark-hover-background: #b3b3b3 !default;
 $color-tag-removable-dark-active-background: #999999 !default;
+$color-toggle-label: #000000 !default;
 $color-toggle-off-background: #666666 !default;
 $color-toggle-off-circle: #ffffff !default;
 $color-toggle-on-background: #00919f !default;
@@ -435,6 +439,7 @@ $color-toggle-on-circle: #ffffff !default;
 $color-toggle-hover-circle: #e6e6e6 !default;
 $color-toggle-disabled-background: #e6e6e6 !default;
 $color-toggle-disabled-circle: #b3b3b3 !default;
+$color-toggle-disabled-label: #808080 !default;
 $color-toggle-disabled-checked-background: #91d5db !default;
 $color-toggle-disabled-checked-circle: #ffffff !default;
 $color-tooltip-background: #4d4d4d !default;
@@ -998,9 +1003,10 @@ $tokens: (
       'placeholder': $color-input-placeholder,
       'background': $color-input-background,
       'disabled': (
-        'border': $color-input-disabled-border,
         'background': $color-input-disabled-background,
-        'icon': $color-input-disabled-icon
+        'border': $color-input-disabled-border,
+        'icon': $color-input-disabled-icon,
+        'label': $color-input-disabled-label
       ),
       'hover': (
         'border': $color-input-hover-border
@@ -1138,6 +1144,10 @@ $tokens: (
           'border': $color-option-card-checked-label-border,
           'shadow': $color-option-card-checked-label-shadow
         )
+      ),
+      'disabled': (
+        'content': $color-option-card-disabled-content,
+        'label': $color-option-card-disabled-label
       )
     ),
     'overlay': (
@@ -1342,6 +1352,7 @@ $tokens: (
       )
     ),
     'toggle': (
+      'label': $color-toggle-label,
       'off': (
         'background': $color-toggle-off-background,
         'circle': $color-toggle-off-circle
@@ -1355,7 +1366,8 @@ $tokens: (
       ),
       'disabled': (
         'background': $color-toggle-disabled-background,
-        'circle': $color-toggle-disabled-circle
+        'circle': $color-toggle-disabled-circle,
+        'label': $color-toggle-disabled-label
       ),
       'disabled-checked': (
         'background': $color-toggle-disabled-checked-background,