@telus-uds/theme-public-mobile 4.21.0 → 5.0.0-alpha.0

package/build/android/ExpandCollapse.json

@@ -9,6 +9,7 @@
       "alpha": 0
     },
     "borderStyle": "solid",
+    "borderTopWidth": null,
     "borderWidth": 0
   }
 }

package/build/android/ExpandCollapsePanel.json

@@ -49,6 +49,7 @@
     }
   ],
   "tokens": {
+    "borderBottomWidth": null,
     "borderColor": {
       "red": 0.22353,
       "green": 0.25098,

package/build/android/IconButton.json

@@ -57,6 +57,10 @@
       "type": "variant",
       "values": ["small", "large"]
     },
+    "style": {
+      "type": "variant",
+      "values": ["default", "contained", "subtle", "raised"]
+    },
     "subtle": {
       "description": "For a more subtle appearance",
       "type": "variant",
@@ -650,6 +654,526 @@
         "iconSize": 24,
         "padding": 10
       }
+    },
+    {
+      "if": {
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "selected": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.99608,
+          "green": 0.99608,
+          "blue": 0.98824,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "selected": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.97647,
+          "green": 0.80784,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.80784,
+          "blue": 0.74902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "pressed": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.96078,
+          "green": 0.96078,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "inverse": true,
+        "style": "contained"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 0.2
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 0.2
+        }
+      }
+    },
+    {
+      "if": {
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "selected": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.99608,
+          "green": 0.99608,
+          "blue": 0.98824,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "selected": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderColor": {
+          "red": 0.97647,
+          "green": 0.80784,
+          "blue": 0.74902,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.80784,
+          "blue": 0.74902,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inverse": true,
+        "pressed": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.96078,
+          "green": 0.96078,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        }
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "inverse": true,
+        "style": "subtle"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 0.2
+        }
+      }
+    },
+    {
+      "if": {
+        "style": "raised"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.99608,
+          "green": 0.99608,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 2,
+        "iconColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "padding": 8,
+        "shadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.2
+          }
+        }
+      }
+    },
+    {
+      "if": {
+        "selected": true,
+        "style": "raised"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.99608,
+          "green": 0.99608,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "borderColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "borderWidth": 3,
+        "iconColor": {
+          "red": 0.22353,
+          "green": 0.25098,
+          "blue": 0.33725,
+          "alpha": 1
+        },
+        "padding": 8,
+        "shadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.2
+          }
+        }
+      }
+    },
+    {
+      "if": {
+        "pressed": true,
+        "style": "raised"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.38824,
+          "green": 0.42353,
+          "blue": 0.54902,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.99608,
+          "green": 0.99608,
+          "blue": 0.98824,
+          "alpha": 1
+        },
+        "padding": 8,
+        "shadow": null
+      }
+    },
+    {
+      "if": {
+        "inactive": true,
+        "style": "raised"
+      },
+      "tokens": {
+        "backgroundColor": {
+          "red": 0.96078,
+          "green": 0.96078,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "borderWidth": 0,
+        "iconColor": {
+          "red": 0.80392,
+          "green": 0.81176,
+          "blue": 0.83529,
+          "alpha": 1
+        },
+        "shadow": null
+      }
     }
   ],
   "tokens": {

package/build/android/Ribbon.json

@@ -3,10 +3,6 @@
     "purpose": {
       "type": "variant",
       "values": ["offer", "default", "editorial", "subtle"]
-    },
-    "wrap": {
-      "type": "variant",
-      "values": [true]
     }
   },
   "rules": [
@@ -54,18 +50,6 @@
           "alpha": 1
         }
       }
-    },
-    {
-      "if": {
-        "wrap": true
-      },
-      "tokens": {
-        "borderRadius": null,
-        "borderRadiusBottomLeft": 8,
-        "borderRadiusBottomRight": 8,
-        "paddingBottom": 6,
-        "paddingTop": 6
-      }
     }
   ],
   "tokens": {
@@ -75,9 +59,9 @@
       "blue": 0.33725,
       "alpha": 1
     },
-    "borderRadius": 50,
-    "borderRadiusBottomLeft": null,
-    "borderRadiusBottomRight": null,
+    "borderRadius": null,
+    "borderRadiusBottomLeft": 8,
+    "borderRadiusBottomRight": 8,
     "boxShadowColor": {
       "red": 0,
       "green": 0,
@@ -117,9 +101,9 @@
     "fontWeight": 700,
     "gradient": null,
     "lineHeight": 1.4285714285714286,
-    "paddingBottom": 2,
+    "paddingBottom": 6,
     "paddingLeft": 12,
     "paddingRight": 12,
-    "paddingTop": 2
+    "paddingTop": 6
   }
 }

package/build/android/SideNav.json

@@ -9,6 +9,6 @@
       "alpha": 1
     },
     "borderStyle": "solid",
-    "borderWidth": 1
+    "borderWidth": null
   }
 }

package/build/android/SideNavItemsGroup.json

@@ -22,6 +22,13 @@
     "contentPaddingLeft": 0,
     "contentPaddingRight": 0,
     "contentPaddingTop": 0,
+    "expandDividerColor": {
+      "red": 0.95294,
+      "green": 0.61569,
+      "blue": 0.50196,
+      "alpha": 1
+    },
+    "expandDividerWidth": 1,
     "expandDuration": 300,
     "icon": "PaletteIconChevronDown",
     "iconColor": {