@yahoo/uds-mobile 1.6.4 → 1.7.0

package/generated/styles.d.ts

@@ -30,6 +30,7 @@ export declare const styles: {
     borderTopStartRadius?: number;
     borderTopWidth?: number;
     borderWidth?: number;
+    boxShadow?: string;
     color?: string;
     columnGap?: number;
     display?: 'flex' | 'none' | 'contents';
@@ -1201,6 +1202,36 @@ export declare const styles: {
       | undefined;
     textAlign?: 'center' | 'justify' | undefined;
     textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+    dropShadow?:
+      | 'none'
+      | 'elevation-0'
+      | 'elevation-1'
+      | 'elevation-2'
+      | 'elevation-3'
+      | 'elevation-4'
+      | 'elevation-5'
+      | 'xs'
+      | 'sm'
+      | 'md'
+      | 'lg'
+      | 'xl'
+      | '2xl'
+      | undefined;
+    insetShadow?:
+      | 'none'
+      | 'xs'
+      | 'sm'
+      | 'md'
+      | 'lg'
+      | 'xl'
+      | '2xl'
+      | 'xs-invert'
+      | 'sm-invert'
+      | 'md-invert'
+      | 'lg-invert'
+      | 'xl-invert'
+      | '2xl-invert'
+      | undefined;
     iconSize?: 'xs' | 'sm' | 'md' | 'lg' | undefined;
     avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
   }) => void;
@@ -1223,10 +1254,10 @@ export declare const avatarStyles: {
     lineHeight: number;
   };
   icon: {
+    color: string;
     backgroundColor: string;
     borderColor: string;
     borderRadius: number;
-    color: string;
     fontSize: number;
     iconSizeToken: 'lg' | 'md' | 'sm';
     lineHeight: number;
@@ -1245,7 +1276,10 @@ export declare const avatarStyles: {
           icon?: 'primary' | 'secondary' | undefined;
           text?: 'primary' | 'secondary' | undefined;
         }
-      | { size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined },
+      | {
+          size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
+          icon?: 'primary' | 'secondary' | undefined;
+        },
   ) => void;
 };
 
@@ -1365,6 +1399,9 @@ export declare const buttonStyles: {
             | 'tertiary'
             | 'alert-tertiary'
             | 'brand-tertiary'
+            | 'contrast-high'
+            | 'contrast-low'
+            | 'contrast-medium'
             | 'info-tertiary'
             | 'positive-tertiary'
             | 'warning-tertiary'
@@ -1390,6 +1427,9 @@ export declare const buttonStyles: {
             | 'tertiary'
             | 'alert-tertiary'
             | 'brand-tertiary'
+            | 'contrast-high'
+            | 'contrast-low'
+            | 'contrast-medium'
             | 'info-tertiary'
             | 'positive-tertiary'
             | 'warning-tertiary'
@@ -1415,6 +1455,9 @@ export declare const buttonStyles: {
             | 'tertiary'
             | 'alert-tertiary'
             | 'brand-tertiary'
+            | 'contrast-high'
+            | 'contrast-low'
+            | 'contrast-medium'
             | 'info-tertiary'
             | 'positive-tertiary'
             | 'warning-tertiary'
@@ -1851,7 +1894,16 @@ export declare const switchStyles: {
 };
 
 export declare const toastStyles: {
-  root: { borderRadius: number; gap: number; paddingHorizontal: number; paddingVertical: number };
+  root: {
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+    gap: number;
+    paddingHorizontal: number;
+    paddingVertical: number;
+    backgroundColor: string;
+    borderColor: string;
+  };
   text: { color: string };
   icon: { fontSize: number; iconSizeToken: 'md'; lineHeight: number; color: string };
   closeIcon: { fontSize: number; iconSizeToken: 'sm'; lineHeight: number; color: string };
@@ -3024,6 +3076,36 @@ export type StyleProps = {
     | undefined;
   textAlign?: 'center' | 'justify' | undefined;
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase' | undefined;
+  dropShadow?:
+    | 'none'
+    | 'elevation-0'
+    | 'elevation-1'
+    | 'elevation-2'
+    | 'elevation-3'
+    | 'elevation-4'
+    | 'elevation-5'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | undefined;
+  insetShadow?:
+    | 'none'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | 'xs-invert'
+    | 'sm-invert'
+    | 'md-invert'
+    | 'lg-invert'
+    | 'xl-invert'
+    | '2xl-invert'
+    | undefined;
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | undefined;
   avatarSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined;
 };

package/generated/styles.mjs

@@ -1287,6 +1287,36 @@ const styles = StyleSheet.create((theme) => ({
         uppercase: { textTransform: 'uppercase' },
         lowercase: { textTransform: 'lowercase' },
       },
+      dropShadow: {
+        none: { boxShadow: theme.boxShadow.drop['none'] },
+        'elevation-0': { boxShadow: theme.boxShadow.drop['elevation-0'] },
+        'elevation-1': { boxShadow: theme.boxShadow.drop['elevation-1'] },
+        'elevation-2': { boxShadow: theme.boxShadow.drop['elevation-2'] },
+        'elevation-3': { boxShadow: theme.boxShadow.drop['elevation-3'] },
+        'elevation-4': { boxShadow: theme.boxShadow.drop['elevation-4'] },
+        'elevation-5': { boxShadow: theme.boxShadow.drop['elevation-5'] },
+        xs: { boxShadow: theme.boxShadow.drop['xs'] },
+        sm: { boxShadow: theme.boxShadow.drop['sm'] },
+        md: { boxShadow: theme.boxShadow.drop['md'] },
+        lg: { boxShadow: theme.boxShadow.drop['lg'] },
+        xl: { boxShadow: theme.boxShadow.drop['xl'] },
+        '2xl': { boxShadow: theme.boxShadow.drop['2xl'] },
+      },
+      insetShadow: {
+        none: { boxShadow: theme.boxShadow.inset['none'] },
+        xs: { boxShadow: theme.boxShadow.inset['xs'] },
+        sm: { boxShadow: theme.boxShadow.inset['sm'] },
+        md: { boxShadow: theme.boxShadow.inset['md'] },
+        lg: { boxShadow: theme.boxShadow.inset['lg'] },
+        xl: { boxShadow: theme.boxShadow.inset['xl'] },
+        '2xl': { boxShadow: theme.boxShadow.inset['2xl'] },
+        'xs-invert': { boxShadow: theme.boxShadow.inset['xs-invert'] },
+        'sm-invert': { boxShadow: theme.boxShadow.inset['sm-invert'] },
+        'md-invert': { boxShadow: theme.boxShadow.inset['md-invert'] },
+        'lg-invert': { boxShadow: theme.boxShadow.inset['lg-invert'] },
+        'xl-invert': { boxShadow: theme.boxShadow.inset['xl-invert'] },
+        '2xl-invert': { boxShadow: theme.boxShadow.inset['2xl-invert'] },
+      },
       iconSize: {
         xs: { width: theme.iconSize['xs'], height: theme.iconSize['xs'] },
         sm: { width: theme.iconSize['sm'], height: theme.iconSize['sm'] },
@@ -1372,6 +1402,10 @@ const avatarStyles = StyleSheet.create((theme) => ({
         xl: theme.components['avatar/size/xl/icon/rest'],
         xs: theme.components['avatar/size/xs/icon/rest'],
       },
+      icon: {
+        primary: theme.components['avatar/icon/variant/primary/icon/rest'],
+        secondary: theme.components['avatar/icon/variant/secondary/icon/rest'],
+      },
     },
   },
 }));
@@ -1497,6 +1531,9 @@ const buttonStyles = StyleSheet.create((theme) => ({
         brand: theme.components['button/variant/brand/root/rest'],
         'brand-secondary': theme.components['button/variant/brand-secondary/root/rest'],
         'brand-tertiary': theme.components['button/variant/brand-tertiary/root/rest'],
+        'contrast-high': theme.components['button/variant/contrast-high/root/rest'],
+        'contrast-low': theme.components['button/variant/contrast-low/root/rest'],
+        'contrast-medium': theme.components['button/variant/contrast-medium/root/rest'],
         info: theme.components['button/variant/info/root/rest'],
         'info-secondary': theme.components['button/variant/info-secondary/root/rest'],
         'info-tertiary': theme.components['button/variant/info-tertiary/root/rest'],
@@ -1574,6 +1611,36 @@ const buttonStyles = StyleSheet.create((theme) => ({
         pressed: true,
         styles: theme.components['button/variant/brand/root/pressed'],
       },
+      {
+        variant: 'contrast-high',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-high/root/disabled'],
+      },
+      {
+        variant: 'contrast-high',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-high/root/pressed'],
+      },
+      {
+        variant: 'contrast-low',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-low/root/disabled'],
+      },
+      {
+        variant: 'contrast-low',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-low/root/pressed'],
+      },
+      {
+        variant: 'contrast-medium',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-medium/root/disabled'],
+      },
+      {
+        variant: 'contrast-medium',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-medium/root/pressed'],
+      },
       {
         variant: 'info-secondary',
         disabled: true,
@@ -1711,6 +1778,9 @@ const buttonStyles = StyleSheet.create((theme) => ({
         brand: theme.components['button/variant/brand/rootText/rest'],
         'brand-secondary': theme.components['button/variant/brand-secondary/rootText/rest'],
         'brand-tertiary': theme.components['button/variant/brand-tertiary/rootText/rest'],
+        'contrast-high': theme.components['button/variant/contrast-high/rootText/rest'],
+        'contrast-low': theme.components['button/variant/contrast-low/rootText/rest'],
+        'contrast-medium': theme.components['button/variant/contrast-medium/rootText/rest'],
         info: theme.components['button/variant/info/rootText/rest'],
         'info-secondary': theme.components['button/variant/info-secondary/rootText/rest'],
         'info-tertiary': theme.components['button/variant/info-tertiary/rootText/rest'],
@@ -1788,6 +1858,36 @@ const buttonStyles = StyleSheet.create((theme) => ({
         pressed: true,
         styles: theme.components['button/variant/brand/rootText/pressed'],
       },
+      {
+        variant: 'contrast-high',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-high/rootText/disabled'],
+      },
+      {
+        variant: 'contrast-high',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-high/rootText/pressed'],
+      },
+      {
+        variant: 'contrast-low',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-low/rootText/disabled'],
+      },
+      {
+        variant: 'contrast-low',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-low/rootText/pressed'],
+      },
+      {
+        variant: 'contrast-medium',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-medium/rootText/disabled'],
+      },
+      {
+        variant: 'contrast-medium',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-medium/rootText/pressed'],
+      },
       {
         variant: 'info-secondary',
         disabled: true,
@@ -1925,6 +2025,9 @@ const buttonStyles = StyleSheet.create((theme) => ({
         brand: theme.components['button/variant/brand/icon/rest'],
         'brand-secondary': theme.components['button/variant/brand-secondary/icon/rest'],
         'brand-tertiary': theme.components['button/variant/brand-tertiary/icon/rest'],
+        'contrast-high': theme.components['button/variant/contrast-high/icon/rest'],
+        'contrast-low': theme.components['button/variant/contrast-low/icon/rest'],
+        'contrast-medium': theme.components['button/variant/contrast-medium/icon/rest'],
         info: theme.components['button/variant/info/icon/rest'],
         'info-secondary': theme.components['button/variant/info-secondary/icon/rest'],
         'info-tertiary': theme.components['button/variant/info-tertiary/icon/rest'],
@@ -2002,6 +2105,36 @@ const buttonStyles = StyleSheet.create((theme) => ({
         pressed: true,
         styles: theme.components['button/variant/brand/icon/pressed'],
       },
+      {
+        variant: 'contrast-high',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-high/icon/disabled'],
+      },
+      {
+        variant: 'contrast-high',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-high/icon/pressed'],
+      },
+      {
+        variant: 'contrast-low',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-low/icon/disabled'],
+      },
+      {
+        variant: 'contrast-low',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-low/icon/pressed'],
+      },
+      {
+        variant: 'contrast-medium',
+        disabled: true,
+        styles: theme.components['button/variant/contrast-medium/icon/disabled'],
+      },
+      {
+        variant: 'contrast-medium',
+        pressed: true,
+        styles: theme.components['button/variant/contrast-medium/icon/pressed'],
+      },
       {
         variant: 'info-secondary',
         disabled: true,

package/generated/unistyles.d.ts

@@ -10,6 +10,9 @@ interface TypographyVariant {
 }
 
 interface ComponentTheme {
+  'avatar/icon/variant/primary/icon/rest': {
+    color: string;
+  };
   'avatar/icon/variant/primary/root/rest': {
     backgroundColor: string;
     borderColor: string;
@@ -18,6 +21,9 @@ interface ComponentTheme {
   'avatar/icon/variant/primary/rootText/rest': {
     color: string;
   };
+  'avatar/icon/variant/secondary/icon/rest': {
+    color: string;
+  };
   'avatar/icon/variant/secondary/root/rest': {
     backgroundColor: string;
     borderColor: string;
@@ -630,6 +636,120 @@ interface ComponentTheme {
   'button/variant/brand/rootText/rest': {
     color: string;
   };
+  'button/variant/contrast-high/icon/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-high/icon/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-high/icon/rest': {
+    color: string;
+  };
+  'button/variant/contrast-high/root/disabled': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    opacity: number;
+  };
+  'button/variant/contrast-high/root/pressed': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+  };
+  'button/variant/contrast-high/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+  };
+  'button/variant/contrast-high/rootText/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-high/rootText/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-high/rootText/rest': {
+    color: string;
+  };
+  'button/variant/contrast-low/icon/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-low/icon/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-low/icon/rest': {
+    color: string;
+  };
+  'button/variant/contrast-low/root/disabled': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    opacity: number;
+  };
+  'button/variant/contrast-low/root/pressed': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+  };
+  'button/variant/contrast-low/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+  };
+  'button/variant/contrast-low/rootText/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-low/rootText/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-low/rootText/rest': {
+    color: string;
+  };
+  'button/variant/contrast-medium/icon/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-medium/icon/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-medium/icon/rest': {
+    color: string;
+  };
+  'button/variant/contrast-medium/root/disabled': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    opacity: number;
+  };
+  'button/variant/contrast-medium/root/pressed': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
+  };
+  'button/variant/contrast-medium/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    borderWidth: number;
+  };
+  'button/variant/contrast-medium/rootText/disabled': {
+    color: string;
+  };
+  'button/variant/contrast-medium/rootText/pressed': {
+    color: string;
+  };
+  'button/variant/contrast-medium/rootText/rest': {
+    color: string;
+  };
   'button/variant/info-secondary/icon/disabled': {
     color: string;
   };
@@ -3848,6 +3968,8 @@ interface ComponentTheme {
   };
   'toast/size/default/root/rest': {
     borderRadius: number;
+    borderWidth: number;
+    boxShadow: string;
     gap: number;
     paddingHorizontal: number;
     paddingVertical: number;
@@ -3858,6 +3980,10 @@ interface ComponentTheme {
   'toast/variant/error/icon/rest': {
     color: string;
   };
+  'toast/variant/error/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+  };
   'toast/variant/error/rootText/rest': {
     color: string;
   };
@@ -3867,6 +3993,10 @@ interface ComponentTheme {
   'toast/variant/info/icon/rest': {
     color: string;
   };
+  'toast/variant/info/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+  };
   'toast/variant/info/rootText/rest': {
     color: string;
   };
@@ -3876,6 +4006,10 @@ interface ComponentTheme {
   'toast/variant/loading/icon/rest': {
     color: string;
   };
+  'toast/variant/loading/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+  };
   'toast/variant/loading/rootText/rest': {
     color: string;
   };
@@ -3885,6 +4019,10 @@ interface ComponentTheme {
   'toast/variant/success/icon/rest': {
     color: string;
   };
+  'toast/variant/success/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+  };
   'toast/variant/success/rootText/rest': {
     color: string;
   };
@@ -3894,6 +4032,10 @@ interface ComponentTheme {
   'toast/variant/warning/icon/rest': {
     color: string;
   };
+  'toast/variant/warning/root/rest': {
+    backgroundColor: string;
+    borderColor: string;
+  };
   'toast/variant/warning/rootText/rest': {
     color: string;
   };
@@ -4468,20 +4610,38 @@ export interface AppTheme {
     'ui5/emphasized': TypographyVariant;
     'ui6/emphasized': TypographyVariant;
   };
-  shadow: {
-    'elevation-0': number;
-    'elevation-1': number;
-    'elevation-2': number;
-    'elevation-3': number;
-    'elevation-4': number;
-    'elevation-5': number;
-    none: number;
-    xs: number;
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-    '2xl': number;
+  shadow: Record<string, number>;
+  boxShadow: {
+    drop: {
+      'elevation-0': string;
+      'elevation-1': string;
+      'elevation-2': string;
+      'elevation-3': string;
+      'elevation-4': string;
+      'elevation-5': string;
+      none: string;
+      xs: string;
+      sm: string;
+      md: string;
+      lg: string;
+      xl: string;
+      '2xl': string;
+    };
+    inset: {
+      none: string;
+      xs: string;
+      sm: string;
+      md: string;
+      lg: string;
+      xl: string;
+      '2xl': string;
+      'xs-invert': string;
+      'sm-invert': string;
+      'md-invert': string;
+      'lg-invert': string;
+      'xl-invert': string;
+      '2xl-invert': string;
+    };
   };
   components: ComponentTheme;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yahoo/uds-mobile",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "type": "module",
   "bin": {
     "uds-mobile": "./cli/uds-mobile.js"