@telus-uds/theme-koodo 7.23.0 → 7.25.0

package/build/ios/theme.json

@@ -3477,6 +3477,7 @@
         "containerPaddingTop": 24,
         "margin": 4,
         "padding": 8,
+        "playIcon": "PaletteIconPlaySolid",
         "selectedBorderColor": {
           "red": 0,
           "green": 0,
@@ -5015,6 +5016,7 @@
           "alpha": 0
         },
         "borderStyle": "solid",
+        "borderTopWidth": null,
         "borderWidth": 0
       }
     },
@@ -5370,6 +5372,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": null,
         "borderColor": {
           "red": 0.93725,
           "green": 0.93725,
@@ -6778,6 +6781,10 @@
         "size": {
           "type": "variant",
           "values": ["small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
         }
       },
       "rules": [
@@ -7121,7 +7128,531 @@
               "blue": 0.78431,
               "alpha": 1
             },
-            "borderWidth": null,
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderBottomWidth": 2,
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderLeftWidth": null,
+            "borderRadius": 0,
+            "borderRightWidth": null,
+            "borderTopWidth": null,
+            "borderWidth": null,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderBottomWidth": null,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderBottomWidth": null,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
+                "red": 0,
+                "green": 0,
+                "blue": 0,
+                "alpha": 0.2
+              }
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "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
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inactive": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.2
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "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,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderBottomWidth": 1,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.2
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "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,
               "green": 0,
@@ -7132,8 +7663,8 @@
         },
         {
           "if": {
-            "inverse": true,
-            "selected": true
+            "selected": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7144,28 +7675,24 @@
             },
             "borderBottomWidth": 2,
             "borderColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             },
-            "borderLeftWidth": null,
-            "borderRadius": 0,
-            "borderRightWidth": null,
-            "borderTopWidth": null,
             "borderWidth": null,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "contained": true,
-            "pressed": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7174,13 +7701,8 @@
               "blue": 0,
               "alpha": 0.2
             },
-            "borderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 1
-            },
-            "borderWidth": 1,
+            "borderRadius": 4,
+            "borderWidth": 0,
             "iconColor": {
               "red": 0.4,
               "green": 0.4,
@@ -7191,53 +7713,52 @@
         },
         {
           "if": {
-            "contained": true,
-            "selected": true
+            "inverse": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderBottomWidth": null,
-            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0
             },
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "iconColor": {
+            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "contained": true,
             "inverse": true,
-            "pressed": true
+            "selected": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
+            "borderBottomWidth": 2,
             "borderColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
-            "borderWidth": 1,
+            "borderWidth": null,
             "iconColor": {
               "red": 1,
               "green": 1,
@@ -7248,18 +7769,19 @@
         },
         {
           "if": {
-            "contained": true,
             "inverse": true,
-            "selected": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
-            "borderWidth": null,
+            "borderRadius": 4,
+            "borderWidth": 0,
             "iconColor": {
               "red": 0,
               "green": 0,
@@ -7270,44 +7792,56 @@
         },
         {
           "if": {
-            "pressed": true,
-            "raised": true
+            "inactive": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0.1
             },
-            "borderWidth": 1,
             "iconColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0.4
             }
           }
         },
         {
           "if": {
-            "raised": true,
-            "selected": true
+            "inactive": true,
+            "inverse": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "iconColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
-              "alpha": 1
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "if": {
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
-            "borderBottomWidth": null,
             "borderColor": {
               "red": 0,
               "green": 0,
@@ -7322,6 +7856,7 @@
               "blue": 0,
               "alpha": 1
             },
+            "padding": 8,
             "shadow": {
               "inset": false,
               "offsetX": 0,
@@ -7339,92 +7874,91 @@
         },
         {
           "if": {
-            "inactive": true
+            "selected": true,
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
-              "alpha": 1
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
-            "borderWidth": 0,
-            "iconColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+            "borderBottomWidth": 1,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             },
-            "outerBorderColor": {
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
+              "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": {
-            "inactive": true,
-            "inverse": true
+            "pressed": true,
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
+              "alpha": 0.2
             },
-            "borderWidth": 0,
+            "borderRadius": 4,
+            "borderWidth": 1,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
             },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            }
+            "padding": 8,
+            "shadow": null
           }
         },
         {
           "if": {
-            "contained": true,
             "inactive": true,
-            "inverse": true
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.2
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
             },
             "borderWidth": 0,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
-            },
-            "outerBorderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
-            }
-          }
-        },
-        {
-          "if": {
-            "size": "large"
-          },
-          "tokens": {
-            "iconSize": 24,
-            "padding": 10
+              "alpha": 0.4
+            },
+            "shadow": null
           }
         }
       ],
@@ -10085,6 +10619,7 @@
             "size": "mini"
           },
           "tokens": {
+            "barHeight": 8,
             "height": 8
           }
         },
@@ -10128,6 +10663,7 @@
           "blue": 0.98039,
           "alpha": 1
         },
+        "barHeight": 16,
         "borderColor": {
           "red": 0.4,
           "green": 0.4,
@@ -11634,6 +12170,29 @@
         "paddingTop": 2
       }
     },
+    "Scroll": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "itemGap": 16,
+        "progressBarColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "progressBarHeight": 8,
+        "progressHitAreaHeight": 24,
+        "progressSpacing": 8,
+        "progressTrackColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0.1
+        },
+        "progressTrackHeight": 8
+      }
+    },
     "Search": {
       "appearances": {
         "focus": {
@@ -12209,7 +12768,7 @@
           "alpha": 1
         },
         "borderStyle": "solid",
-        "borderWidth": 1
+        "borderWidth": null
       }
     },
     "SideNavItem": {
@@ -12314,7 +12873,7 @@
             },
             "fontName": "StagSans",
             "fontWeight": 600,
-            "lineHeight": 1.5,
+            "lineHeight": 1.45,
             "paddingBottom": 13,
             "paddingTop": 13
           }
@@ -12385,6 +12944,13 @@
         "contentPaddingLeft": 0,
         "contentPaddingRight": 0,
         "contentPaddingTop": 0,
+        "expandDividerColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "expandDividerWidth": 1,
         "expandDuration": 300,
         "icon": "PaletteIconChevronDown",
         "iconColor": {
@@ -16572,7 +17138,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.19.0",
+    "themeTokensVersion": "4.21.0",
     "name": "theme-koodo"
   }
 }