@telus-uds/theme-public-mobile 4.21.0 → 4.23.0

package/build/ios/theme.json

@@ -3526,6 +3526,7 @@
         "containerPaddingTop": 24,
         "margin": 4,
         "padding": 8,
+        "playIcon": "PaletteIconPlaySolid",
         "selectedBorderColor": {
           "red": 0.95294,
           "green": 0.61569,
@@ -4988,6 +4989,7 @@
           "alpha": 0
         },
         "borderStyle": "solid",
+        "borderTopWidth": null,
         "borderWidth": 0
       }
     },
@@ -5353,6 +5355,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": null,
         "borderColor": {
           "red": 0.22353,
           "green": 0.25098,
@@ -6705,6 +6708,10 @@
           "type": "variant",
           "values": ["small", "large"]
         },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
+        },
         "subtle": {
           "description": "For a more subtle appearance",
           "type": "variant",
@@ -7068,20 +7075,467 @@
               "green": 0.42353,
               "blue": 0.54902,
               "alpha": 1
-            },
-            "borderWidth": null,
-            "iconColor": {
-              "red": 0.99608,
-              "green": 0.99608,
-              "blue": 0.98824,
-              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0.99608,
+              "green": 0.99608,
+              "blue": 0.98824,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "subtle": true
+          },
+          "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": {
+            "inverse": true,
+            "pressed": true,
+            "subtle": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95294,
+              "green": 0.61569,
+              "blue": 0.50196,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "subtle": true
+          },
+          "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": {
+            "pressed": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0.99608,
+              "green": 0.99608,
+              "blue": 0.98824,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "borderWidth": 3,
+            "iconColor": {
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "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
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true
+          },
+          "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
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "subtle": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.2
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "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,
-            "subtle": true
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7107,22 +7561,21 @@
         },
         {
           "if": {
-            "inverse": true,
             "pressed": true,
-            "subtle": true
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.95294,
-              "green": 0.61569,
-              "blue": 0.50196,
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
               "alpha": 1
             },
-            "borderWidth": null,
+            "borderWidth": 0,
             "iconColor": {
-              "red": 0.22353,
-              "green": 0.25098,
-              "blue": 0.33725,
+              "red": 0.99608,
+              "green": 0.99608,
+              "blue": 0.98824,
               "alpha": 1
             }
           }
@@ -7130,8 +7583,7 @@
         {
           "if": {
             "inverse": true,
-            "selected": true,
-            "subtle": true
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7141,71 +7593,74 @@
               "alpha": 0
             },
             "borderColor": {
-              "red": 0.97647,
-              "green": 0.80784,
-              "blue": 0.74902,
-              "alpha": 1
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
-            "borderWidth": 2,
+            "borderWidth": 0,
             "iconColor": {
               "red": 0.97647,
-              "green": 0.80784,
-              "blue": 0.74902,
+              "green": 0.94902,
+              "blue": 0.86667,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "pressed": true,
-            "raised": true
+            "inverse": true,
+            "selected": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.38824,
-              "green": 0.42353,
-              "blue": 0.54902,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0.97647,
+              "green": 0.80784,
+              "blue": 0.74902,
               "alpha": 1
             },
-            "borderWidth": null,
+            "borderWidth": 2,
             "iconColor": {
-              "red": 0.99608,
-              "green": 0.99608,
-              "blue": 0.98824,
+              "red": 0.97647,
+              "green": 0.80784,
+              "blue": 0.74902,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "raised": true,
-            "selected": true
+            "inverse": true,
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.95294,
+              "green": 0.61569,
+              "blue": 0.50196,
               "alpha": 1
             },
-            "borderColor": {
+            "borderWidth": 0,
+            "iconColor": {
               "red": 0.22353,
               "green": 0.25098,
               "blue": 0.33725,
               "alpha": 1
-            },
-            "borderWidth": 3,
-            "iconColor": {
-              "red": 0.38824,
-              "green": 0.42353,
-              "blue": 0.54902,
-              "alpha": 1
             }
           }
         },
         {
           "if": {
-            "inactive": true
+            "inactive": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7220,19 +7675,14 @@
               "green": 0.81176,
               "blue": 0.83529,
               "alpha": 1
-            },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
             }
           }
         },
         {
           "if": {
             "inactive": true,
-            "inverse": true
+            "inverse": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7241,62 +7691,139 @@
               "blue": 0,
               "alpha": 0
             },
-            "borderColor": {
+            "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": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.2
+              "red": 0.38824,
+              "green": 0.42353,
+              "blue": 0.54902,
+              "alpha": 1
             },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+            "padding": 8,
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
+                "red": 0,
+                "green": 0,
+                "blue": 0,
+                "alpha": 0.2
+              }
             }
           }
         },
         {
           "if": {
-            "inactive": true,
-            "inverse": true,
-            "subtle": true
+            "selected": true,
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+              "red": 0.99608,
+              "green": 0.99608,
+              "blue": 0.98824,
+              "alpha": 1
             },
-            "borderWidth": 0,
+            "borderColor": {
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
+            },
+            "borderWidth": 3,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.2
+              "red": 0.22353,
+              "green": 0.25098,
+              "blue": 0.33725,
+              "alpha": 1
             },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+            "padding": 8,
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
+                "red": 0,
+                "green": 0,
+                "blue": 0,
+                "alpha": 0.2
+              }
             }
           }
         },
         {
           "if": {
-            "size": "large"
+            "pressed": true,
+            "style": "raised"
           },
           "tokens": {
-            "iconSize": 24,
-            "padding": 10
+            "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
           }
         }
       ],
@@ -9942,6 +10469,7 @@
             "size": "mini"
           },
           "tokens": {
+            "barHeight": 8,
             "height": 8
           }
         },
@@ -9985,6 +10513,7 @@
           "blue": 0.96863,
           "alpha": 1
         },
+        "barHeight": 16,
         "borderColor": {
           "red": 0.61176,
           "green": 0.62353,
@@ -11405,6 +11934,29 @@
         "paddingTop": 2
       }
     },
+    "Scroll": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemGap": 16,
+        "progressBarColor": {
+          "red": 0.95294,
+          "green": 0.61569,
+          "blue": 0.50196,
+          "alpha": 1
+        },
+        "progressBarHeight": 8,
+        "progressHitAreaHeight": 24,
+        "progressSpacing": 8,
+        "progressTrackColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0.1
+        },
+        "progressTrackHeight": 8
+      }
+    },
     "Search": {
       "appearances": {
         "focus": {
@@ -11973,7 +12525,7 @@
           "alpha": 1
         },
         "borderStyle": "solid",
-        "borderWidth": 1
+        "borderWidth": null
       }
     },
     "SideNavItem": {
@@ -12138,6 +12690,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": {
@@ -16210,7 +16769,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.19.0",
+    "themeTokensVersion": "4.21.0",
     "name": "theme-public-mobile"
   }
 }