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

package/theme.json

@@ -2602,6 +2602,7 @@
         "containerPaddingTop": "{palette.size.size24}",
         "margin": "{palette.size.size4}",
         "padding": "{palette.size.size8}",
+        "playIcon": "{palette.icon.PlaySolid}",
         "selectedBorderColor": "{palette.color.apricot100}",
         "selectedBorderWidth": "{palette.border.border2}",
         "size": "{palette.size.size56}"
@@ -4009,6 +4010,7 @@
       "tokens": {
         "borderColor": "{palette.color.transparent}",
         "borderStyle": "{system.borderStyle.solid}",
+        "borderTopWidth": "{system.border.none}",
         "borderWidth": "{palette.border.none}"
       }
     },
@@ -4349,6 +4351,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": "{system.border.none}",
         "borderColor": "{palette.color.slate100}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
@@ -5308,6 +5311,10 @@
           "type": "variant",
           "values": ["small", "large"]
         },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
+        },
         "subtle": {
           "description": "For a more subtle appearance",
           "type": "variant",
@@ -5801,6 +5808,385 @@
             "iconSize": "{palette.size.size24}",
             "padding": "{palette.size.size10}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.link100}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link100}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.sand10}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.link100}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.sand100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.apricot50}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.apricot50}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.apricot50}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.apricot50}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.apricot100}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.sand100}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate5}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.light20}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.link100}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link25}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link100}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.sand10}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.link100}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.apricot50}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.apricot50}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.apricot50}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.apricot100}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate100}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.sand100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.sand100}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate5}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate25}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.sand10}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.link100}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.sand10}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.slate100}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.slate100}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.slate100}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link100}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.sand10}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{system.shadow.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.sand10}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.link100}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate5}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate25}",
+            "shadow": "{system.shadow.none}"
+          }
         }
       ],
       "tokens": {
@@ -8262,6 +8648,7 @@
             "size": "mini"
           },
           "tokens": {
+            "barHeight": "{palette.size.size8}",
             "height": "{palette.size.size8}"
           }
         },
@@ -8278,6 +8665,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.slate5}",
+        "barHeight": "{palette.size.size16}",
         "borderColor": "{palette.color.slate50}",
         "borderRadius": "{palette.radius.radius12}",
         "borderWidth": "{palette.border.border1}",
@@ -9255,6 +9643,30 @@
         "paddingTop": "{palette.size.size2}"
       }
     },
+    "Scroll": {
+      "appearances": {
+        "hover": "{appearances.Scroll.hover}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "progressBarHeight": "{palette.size.size16}"
+          }
+        }
+      ],
+      "tokens": {
+        "itemGap": "{palette.size.size16}",
+        "progressBarColor": "{palette.color.apricot100}",
+        "progressBarHeight": "{palette.size.size8}",
+        "progressHitAreaHeight": "{palette.size.size24}",
+        "progressSpacing": "{palette.size.size8}",
+        "progressTrackColor": "{palette.color.dark10}",
+        "progressTrackHeight": "{palette.size.size8}"
+      }
+    },
     "Search": {
       "appearances": {
         "focus": "{appearances.Search.focus}",
@@ -9610,7 +10022,7 @@
       "tokens": {
         "borderColor": "{palette.color.apricot100}",
         "borderStyle": "{system.borderStyle.solid}",
-        "borderWidth": "{palette.border.border1}"
+        "borderWidth": "{system.border.none}"
       }
     },
     "SideNavItem": {
@@ -9722,6 +10134,8 @@
         "contentPaddingLeft": "{palette.size.size0}",
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
+        "expandDividerColor": "{palette.color.apricot100}",
+        "expandDividerWidth": "{palette.border.border1}",
         "expandDuration": "{palette.duration.duration300}",
         "icon": "{palette.icon.ChevronDown}",
         "iconColor": "{palette.color.slate100}",