@telus-uds/theme-public-mobile 2.3.1 → 2.4.0

package/build/android/theme.json

@@ -1798,6 +1798,10 @@
           "type": "variant",
           "values": ["alternative", "subtle", "grid", "image", "feature"]
         },
+        "borderRadius": {
+          "type": "variant",
+          "values": ["none", "small", "large"]
+        },
         "padding": {
           "type": "variant",
           "values": ["narrow", "intermediate", "compact", "custom"]
@@ -1809,6 +1813,30 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "borderRadius": "none"
+          },
+          "tokens": {
+            "borderRadius": 0
+          }
+        },
+        {
+          "if": {
+            "borderRadius": "small"
+          },
+          "tokens": {
+            "borderRadius": 6
+          }
+        },
+        {
+          "if": {
+            "borderRadius": "large"
+          },
+          "tokens": {
+            "borderRadius": 6
+          }
+        },
         {
           "if": {
             "background": "alternative"
@@ -4048,6 +4076,59 @@
             "outerBorderGap": 4
           }
         },
+        {
+          "if": {
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "outerBorderGap": 0,
+            "outerBorderWidth": 0
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "outerBorderGap": 0,
+            "outerBorderWidth": 0
+          }
+        },
         {
           "if": {
             "inverse": true,
@@ -4192,35 +4273,40 @@
             }
           }
         },
-        {
-          "if": {
-            "compact": true
-          },
-          "tokens": {
-            "outerBorderGap": 0
-          }
-        },
         {
           "if": {
             "inactive": true,
             "password": true
           },
           "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
             "iconColor": {
               "red": 0.61176,
               "green": 0.62353,
               "blue": 0.66667,
               "alpha": 1
             },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
             "outerBorderWidth": 0
           }
         },
         {
           "if": {
-            "password": true
+            "compact": true
           },
           "tokens": {
-            "outerBorderWidth": 0
+            "outerBorderGap": 0
           }
         }
       ],
@@ -4247,6 +4333,7 @@
         "borderTopRightRadius": null,
         "borderTopWidth": 1,
         "borderWidth": 2,
+        "height": null,
         "icon": "PaletteIconAdd",
         "iconColor": {
           "red": 0.38824,
@@ -4267,7 +4354,8 @@
         "outerBorderGap": 0,
         "outerBorderWidth": 0,
         "padding": 4,
-        "shadow": null
+        "shadow": null,
+        "width": null
       }
     },
     "Image": {
@@ -8707,13 +8795,13 @@
       "rules": [
         {
           "if": {
-            "pressed": true
+            "selected": true
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.16863,
-              "green": 0.19216,
-              "blue": 0.27059,
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
               "alpha": 1
             },
             "borderColor": {
@@ -8722,23 +8810,23 @@
               "blue": 0.54902,
               "alpha": 1
             },
-            "borderWidth": 1,
             "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
               "alpha": 1
             },
+            "icon": "PaletteIconXMark",
             "iconBackground": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
+              "alpha": 1
             },
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
               "alpha": 1
             },
             "outerBorderColor": {
@@ -8752,13 +8840,14 @@
         },
         {
           "if": {
+            "pressed": true,
             "selected": true
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.22353,
-              "green": 0.25098,
-              "blue": 0.33725,
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
               "alpha": 1
             },
             "borderColor": {
@@ -8767,23 +8856,68 @@
               "blue": 0.54902,
               "alpha": 1
             },
+            "borderWidth": 1,
             "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
               "alpha": 1
             },
-            "icon": "PaletteIconXMark",
             "iconBackground": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
+              "alpha": 1
+            },
+            "outerBorderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
               "alpha": 0
             },
+            "outerBorderWidth": 0
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "color": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            },
+            "iconBackground": {
+              "red": 0.97647,
+              "green": 0.94902,
+              "blue": 0.86667,
+              "alpha": 1
+            },
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.16863,
+              "green": 0.19216,
+              "blue": 0.27059,
               "alpha": 1
             },
             "outerBorderColor": {
@@ -8820,16 +8954,16 @@
               "alpha": 1
             },
             "iconBackground": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
-            "iconColor": {
               "red": 0.80392,
               "green": 0.81176,
               "blue": 0.83529,
               "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
             }
           }
         }
@@ -8837,9 +8971,9 @@
       "tokens": {
         "alignSelf": "center",
         "backgroundColor": {
-          "red": 0.84706,
-          "green": 0.8549,
-          "blue": 0.88627,
+          "red": 0.98824,
+          "green": 0.97255,
+          "blue": 0.93333,
           "alpha": 1
         },
         "borderColor": {
@@ -8848,7 +8982,7 @@
           "blue": 0.54902,
           "alpha": 1
         },
-        "borderRadius": 8,
+        "borderRadius": 32,
         "borderWidth": 1,
         "color": {
           "red": 0.22353,
@@ -8858,25 +8992,25 @@
         },
         "fontName": "SofiaPro",
         "fontSize": 18,
-        "fontWeight": 400,
+        "fontWeight": 700,
         "icon": "PaletteIconAdd",
         "iconAlignSelf": "center",
         "iconBackground": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
-        "iconBorderRadius": 32,
-        "iconColor": {
           "red": 0.22353,
           "green": 0.25098,
           "blue": 0.33725,
           "alpha": 1
         },
+        "iconBorderRadius": 48,
+        "iconColor": {
+          "red": 0.97647,
+          "green": 0.94902,
+          "blue": 0.86667,
+          "alpha": 1
+        },
         "iconPadding": 2,
         "iconPosition": "right",
-        "iconSize": 20,
+        "iconSize": 16,
         "iconSpace": 1,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
@@ -8898,8 +9032,8 @@
         "outerBorderGap": 2,
         "outerBorderWidth": 0,
         "paddingBottom": 10,
-        "paddingLeft": 16,
-        "paddingRight": 16,
+        "paddingLeft": 11,
+        "paddingRight": 11,
         "paddingTop": 10,
         "shadow": null,
         "textAlign": "center"
@@ -10630,8 +10764,39 @@
       }
     },
     "WaffleGrid": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": ["xs", "sm", "md", "lg", "xl"],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "rowSize": 2
+          }
+        },
+        {
+          "if": {
+            "viewport": ["sm", "md"]
+          },
+          "tokens": {
+            "rowSize": 3
+          }
+        },
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "rowSize": 6
+          }
+        }
+      ],
       "tokens": {
         "itemBorderColor": {
           "red": 0,
@@ -10640,7 +10805,8 @@
           "alpha": 0
         },
         "itemPadding": 16,
-        "rowBorderWidth": 1
+        "rowBorderWidth": 1,
+        "rowSize": 6
       }
     },
     "spacingScale": {
@@ -10776,7 +10942,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.41.0",
+    "themeTokensVersion": "2.41.1",
     "name": "theme-public-mobile"
   }
 }