@telus-uds/theme-koodo 4.5.0 → 4.7.0

package/build/android/theme.json

@@ -734,7 +734,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "priority": {
@@ -1211,7 +1211,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -1451,7 +1451,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -1662,7 +1662,7 @@
         },
         "padding": {
           "type": "variant",
-          "values": ["custom"]
+          "values": ["narrow", "intermediate", "compact", "custom"]
         },
         "viewport": {
           "description": "The size label for the current screen viewport based on the current screen width",
@@ -1681,7 +1681,9 @@
               "green": 0.96863,
               "blue": 0.98431,
               "alpha": 1
-            }
+            },
+            "borderRadius": 0,
+            "borderWidth": 0
           }
         },
         {
@@ -1695,7 +1697,7 @@
               "blue": 0.95686,
               "alpha": 1
             },
-            "borderRadius": 8
+            "borderWidth": 0
           }
         },
         {
@@ -1709,7 +1711,6 @@
               "blue": 0.41569,
               "alpha": 1
             },
-            "borderRadius": 8,
             "borderWidth": 1
           }
         },
@@ -1723,7 +1724,9 @@
               "green": 0.96471,
               "blue": 0.64706,
               "alpha": 1
-            }
+            },
+            "borderRadius": 0,
+            "borderWidth": 0
           }
         },
         {
@@ -1737,6 +1740,63 @@
             "paddingTop": 48
           }
         },
+        {
+          "if": {
+            "padding": "narrow"
+          },
+          "tokens": {
+            "paddingBottom": 24,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 24
+          }
+        },
+        {
+          "if": {
+            "padding": "narrow",
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": 32,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 32
+          }
+        },
+        {
+          "if": {
+            "padding": "intermediate"
+          },
+          "tokens": {
+            "paddingBottom": 24,
+            "paddingLeft": 24,
+            "paddingRight": 24,
+            "paddingTop": 24
+          }
+        },
+        {
+          "if": {
+            "padding": "intermediate",
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "paddingBottom": 32,
+            "paddingLeft": 32,
+            "paddingRight": 32,
+            "paddingTop": 32
+          }
+        },
+        {
+          "if": {
+            "padding": "compact"
+          },
+          "tokens": {
+            "paddingBottom": 16,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 16
+          }
+        },
         {
           "if": {
             "padding": "custom"
@@ -1769,6 +1829,7 @@
         "contentFlexShrink": 1,
         "contentJustifyContent": "flex-start",
         "flex": 1,
+        "gradient": null,
         "minWidth": null,
         "paddingBottom": 32,
         "paddingLeft": 24,
@@ -1841,7 +1902,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -2083,7 +2144,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "size": {
@@ -2684,12 +2745,6 @@
             "mini": true
           },
           "tokens": {
-            "backgroundColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
             "borderColor": {
               "red": 0,
               "green": 0,
@@ -2772,10 +2827,24 @@
     },
     "ExpandCollapseMiniControl": {
       "appearances": {
+        "alternative": {
+          "description": "Replaces the default green colour with black",
+          "type": "variant",
+          "values": [true]
+        },
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [true],
           "type": "state"
+        },
+        "inverse": {
+          "description": "Replaces the default green colour with white. Useful for dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["micro", "small", "large"]
         }
       },
       "rules": [
@@ -2786,15 +2855,70 @@
           "tokens": {
             "icon": "PaletteIconChevronUp"
           }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": 12,
+            "iconSize": 16,
+            "lineHeight": 1.33333333333
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "fontSize": 14,
+            "iconSize": 20,
+            "lineHeight": 1.45
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "fontSize": 20,
+            "lineHeight": 1.45
+          }
         }
       ],
       "tokens": {
-        "backgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
         "borderColor": {
           "red": 0,
           "green": 0,
@@ -2802,6 +2926,13 @@
           "alpha": 0
         },
         "borderWidth": 0,
+        "color": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "fontSize": 16,
         "icon": "PaletteIconChevronDown",
         "iconColor": {
           "red": 0,
@@ -2812,13 +2943,15 @@
         "iconGap": 8,
         "iconPaddingTop": 4,
         "iconPosition": "left",
-        "iconSize": 16,
+        "iconSize": 24,
         "justifyContent": "flex-start",
+        "lineHeight": 1.45,
         "paddingBottom": 0,
         "paddingLeft": 0,
         "paddingRight": 0,
         "paddingTop": 0,
         "size": 4,
+        "textLine": "none",
         "verticalAlign": "middle"
       }
     },
@@ -3115,7 +3248,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -3409,7 +3542,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "raised": {
@@ -3901,7 +4034,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "size": {
@@ -4151,11 +4284,11 @@
         "listGutter": 10
       }
     },
-    "ListBox": {
+    "Listbox": {
       "appearances": {
         "current": {
           "description": "When the current item is selected",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "expanded": {
@@ -4165,57 +4298,123 @@
         },
         "isChild": {
           "description": "when the item is child of another child",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
       "rules": [
         {
           "if": {
-            "pressed": true
+            "current": true
           },
           "tokens": {
             "groupBackgroundColor": {
-              "red": 0.73333,
-              "green": 0.91765,
-              "blue": 0.96078,
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "groupBorderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             },
             "groupColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "itemBackgroundColor": {
               "red": 0.00392,
               "green": 0.41961,
               "blue": 0.41569,
               "alpha": 1
+            },
+            "itemColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
             }
           }
         },
         {
           "if": {
-            "current": true
+            "current": true,
+            "pressed": true
           },
           "tokens": {
-            "groupColor": {
+            "itemBackgroundColor": {
+              "red": 0.7098,
+              "green": 0.70588,
+              "blue": 0.70588,
+              "alpha": 1
+            },
+            "itemColor": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderBottomWidth": 0,
+            "itemBorderLeftColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "itemBorderLeftWidth": 4,
+            "itemBorderTopWidth": 0
+          }
+        },
+        {
+          "if": {
+            "current": true,
+            "isChild": true
+          },
+          "tokens": {
+            "itemBorderLeftColor": {
               "red": 0.00392,
               "green": 0.41961,
               "blue": 0.41569,
               "alpha": 1
-            },
-            "groupFontName": "StagSans",
-            "groupFontWeight": 700
+            }
           }
         },
         {
           "if": {
-            "isChild": true
+            "isChild": true,
+            "pressed": true
           },
           "tokens": {
-            "itemBorderWidth": 4,
-            "itemPaddingLeft": 12
+            "itemBorderBottomWidth": 0,
+            "itemBorderLeftColor": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "itemBorderTopWidth": 0,
+            "itemColor": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
           }
         },
         {
@@ -4235,22 +4434,23 @@
           "alpha": 0
         },
         "groupBorderColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
-          "alpha": 1
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
-        "groupBorderRadius": 6,
+        "groupBorderRadius": 0,
         "groupBorderWidth": 1,
         "groupColor": {
-          "red": 0.89804,
-          "green": 0.96863,
-          "blue": 0.98431,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "groupFontName": "StagSans",
-        "groupFontSize": 14,
+        "groupFontSize": 16,
         "groupFontWeight": 400,
+        "groupHeight": 32,
         "groupIcon": "PaletteIconChevronDown",
         "groupPaddingBottom": 12,
         "groupPaddingLeft": 16,
@@ -4262,36 +4462,56 @@
           "blue": 0,
           "alpha": 0
         },
-        "itemBorderBackgroundColor": {
-          "red": 0.73333,
-          "green": 0.91765,
-          "blue": 0.96078,
-          "alpha": 1
+        "itemBorderBottomColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
+        "itemBorderBottomWidth": 1,
         "itemBorderLeftColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
-          "alpha": 1
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
-        "itemBorderLeftWidth": 4,
+        "itemBorderLeftWidth": 1,
+        "itemBorderRadius": 0,
+        "itemBorderRightColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "itemBorderRightWidth": 1,
+        "itemBorderTopColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "itemBorderTopWidth": 1,
         "itemBorderWidth": 0,
         "itemColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0,
+          "green": 0,
+          "blue": 0,
           "alpha": 1
         },
         "itemDisplay": false,
         "itemFontName": "StagSans",
-        "itemFontSize": 14,
-        "itemFontWeight": 700,
+        "itemFontSize": 16,
+        "itemFontWeight": 400,
+        "itemHeight": 32,
         "itemOutline": 0,
         "itemPaddingBottom": 12,
         "itemPaddingLeft": 16,
         "itemPaddingRight": 16,
         "itemPaddingTop": 12,
         "itemTextDecoration": "none",
+        "lineHeight": 1.5,
+        "minHeight": "100%",
+        "minWidth": "100%",
         "shadow": {
           "inset": false,
           "offsetX": 0,
@@ -4506,7 +4726,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -4965,7 +5185,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -5075,7 +5295,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -5581,7 +5801,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -5712,7 +5932,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "viewport": {
@@ -5782,7 +6002,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -6073,7 +6293,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "viewport": {
@@ -6583,7 +6803,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "priority": {
@@ -7171,7 +7391,7 @@
           "blue": 0,
           "alpha": 0
         },
-        "playIcon": "PaletteIconPlayVideo",
+        "playIcon": "PaletteIconPlaySolid",
         "playIconColor": {
           "red": 1,
           "green": 1,
@@ -7215,7 +7435,9 @@
         "buttonPaddingRight": 16,
         "buttonRadius": 32,
         "detailsContainerPadding": 8,
-        "playIcon": "PaletteIconPlayVideo",
+        "labelFontName": "StagSans",
+        "labelFontWeight": 600,
+        "playIcon": "PaletteIconPlaySolid",
         "playIconColor": {
           "red": 1,
           "green": 1,
@@ -7223,10 +7445,10 @@
           "alpha": 1
         },
         "playIconContainerBackground": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
         }
       }
     },
@@ -7464,7 +7686,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -7636,12 +7858,12 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -7825,7 +8047,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -8327,7 +8549,7 @@
             "viewport": ["lg", "xl"]
           },
           "tokens": {
-            "connectorHeight": 2,
+            "connectorHeight": 1,
             "connectorWidth": "100%",
             "itemContentMarginBottom": 0,
             "itemContentMarginRight": 32,
@@ -8341,15 +8563,15 @@
       ],
       "tokens": {
         "connectorHeight": "100%",
-        "connectorWidth": 2,
-        "dotBorderWidth": 3,
+        "connectorWidth": 1,
+        "dotBorderWidth": 2,
         "dotColor": {
           "red": 1,
           "green": 1,
           "blue": 1,
           "alpha": 1
         },
-        "dotWidth": 16,
+        "dotWidth": 12,
         "itemContentFlexSize": 1,
         "itemContentMarginBottom": 32,
         "itemContentMarginRight": 0,
@@ -8365,6 +8587,12 @@
           "blue": 0.41569,
           "alpha": 1
         },
+        "timelineConnectorColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
         "timelineContainerDirection": "column"
       }
     },
@@ -8450,7 +8678,7 @@
         },
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         },
         "selected": {
@@ -8518,9 +8746,15 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.76471,
-              "green": 0.93725,
-              "blue": 1,
+              "red": 0.7098,
+              "green": 0.70588,
+              "blue": 0.70588,
+              "alpha": 1
+            },
+            "switchColor": {
+              "red": 0.31373,
+              "green": 0.31373,
+              "blue": 0.31373,
               "alpha": 1
             }
           }
@@ -8592,7 +8826,7 @@
         "labelFontSize": 16,
         "labelFontWeight": 600,
         "labelLineHeight": 1.5,
-        "labelMarginLeft": 8,
+        "labelMarginLeft": 0,
         "opacity": 1,
         "outerBackgroundColor": {
           "red": 0,
@@ -8607,12 +8841,14 @@
           "alpha": 0
         },
         "outerBorderGap": 0,
+        "outerBorderGapButton": 4,
         "outerBorderWidth": 0,
         "paddingBottom": 0,
         "paddingLeft": 0,
         "paddingRight": 0,
         "paddingTop": 0,
         "shadow": null,
+        "space": 2,
         "switchBorderColor": {
           "red": 0,
           "green": 0,
@@ -8640,7 +8876,7 @@
             "alpha": 0.1
           }
         },
-        "switchSize": 18,
+        "switchSize": 24,
         "trackBorderColor": {
           "red": 0,
           "green": 0,
@@ -8649,6 +8885,7 @@
         },
         "trackBorderRadius": 12,
         "trackBorderWidth": 3,
+        "trackHeight": 20,
         "width": 40
       }
     },
@@ -8752,7 +8989,7 @@
       "appearances": {
         "pressed": {
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
-          "values": [true],
+          "values": [true, false],
           "type": "state"
         }
       },
@@ -9323,9 +9560,9 @@
           "blue": 0,
           "alpha": 1
         },
-        "pauseIcon": "PaletteIconAdd",
-        "playIcon": "PaletteIconAdd",
-        "replayIcon": "PaletteIconAdd"
+        "pauseIcon": "PaletteIconPause",
+        "playIcon": "PaletteIconPlaySolid",
+        "replayIcon": "PaletteIconReplay"
       }
     },
     "VideoButton": {
@@ -9341,22 +9578,40 @@
       }
     },
     "VideoControlBar": {
-      "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", "sm"]
+          },
+          "tokens": {
+            "height": 40,
+            "paddingBottom": 8,
+            "paddingLeft": 16,
+            "paddingRight": 16,
+            "paddingTop": 8
+          }
+        }
+      ],
       "tokens": {
-        "captionsIcon": "PaletteIconAdd",
-        "maximizeIcon": "PaletteIconAdd",
+        "captionsIcon": "PaletteIconClosedCaptions",
+        "height": 56,
+        "maximizeIcon": "PaletteIconFullscreenExpand",
         "menuBottom": 64,
         "menuMarginLeft": 16,
         "menuRight": 32,
-        "minimizeIcon": "PaletteIconAdd",
+        "minimizeIcon": "PaletteIconFullscreenMinimize",
         "paddingBottom": 16,
         "paddingLeft": 48,
-        "paddingLeftCompactMode": 16,
         "paddingRight": 48,
-        "paddingRightCompactMode": 16,
         "paddingTop": 16,
-        "settingsIcon": "PaletteIconSettings"
+        "settingsIcon": "PaletteIconSettingsSolid"
       }
     },
     "VideoMenu": {
@@ -9513,15 +9768,15 @@
         "timestampMarginLeft": 8,
         "timestampMarginRight": 8,
         "trackGradientEnd": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0.22353,
+          "green": 0.80392,
+          "blue": 0.78824,
           "alpha": 1
         },
         "trackGradientStart": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0.22353,
+          "green": 0.80392,
+          "blue": 0.78824,
           "alpha": 1
         }
       }
@@ -9532,7 +9787,7 @@
       "tokens": {
         "marginLeft": 16,
         "marginRight": 16,
-        "mutedIcon": "PaletteIconAdd",
+        "mutedIcon": "PaletteIconMuted",
         "rangeBackground": {
           "red": 0,
           "green": 0,
@@ -9559,7 +9814,7 @@
           "blue": 1,
           "alpha": 1
         },
-        "unmutedIcon": "PaletteIconAdd"
+        "unmutedIcon": "PaletteIconUnmuted"
       }
     },
     "WaffleGrid": {
@@ -9763,7 +10018,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.34.0",
+    "themeTokensVersion": "2.36.0",
     "name": "theme-koodo"
   }
 }