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

package/theme.json

@@ -1274,6 +1274,10 @@
           "type": "variant",
           "values": ["alternative", "subtle", "grid", "image", "feature"]
         },
+        "borderRadius": {
+          "type": "variant",
+          "values": ["none", "small", "large"]
+        },
         "padding": {
           "type": "variant",
           "values": ["narrow", "intermediate", "compact", "custom"]
@@ -1281,6 +1285,30 @@
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "borderRadius": "none"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.none}"
+          }
+        },
+        {
+          "if": {
+            "borderRadius": "small"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius6}"
+          }
+        },
+        {
+          "if": {
+            "borderRadius": "large"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius6}"
+          }
+        },
         {
           "if": {
             "background": "alternative"
@@ -2987,11 +3015,10 @@
         {
           "if": {
             "hover": true,
-            "inverse": true
+            "inactive": true
           },
           "tokens": {
-            "borderColor": "{palette.color.apricot50}",
-            "iconColor": "{palette.color.apricot50}"
+            "iconScale": "{system.iconScale.scale1}"
           }
         },
         {
@@ -3001,6 +3028,7 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.slate100}",
+            "borderColor": "{palette.color.slate100}",
             "iconColor": "{palette.color.white}"
           }
         },
@@ -3014,24 +3042,22 @@
         },
         {
           "if": {
-            "focus": true
+            "hover": true,
+            "inverse": true
           },
           "tokens": {
-            "borderColor": "{palette.color.link100}",
-            "iconColor": "{palette.color.link100}",
-            "outerBorderColor": "{palette.color.link100}",
-            "outerBorderGap": "{palette.size.size2}",
-            "outerBorderWidth": "{palette.border.border2}"
+            "borderColor": "{palette.color.apricot50}",
+            "iconColor": "{palette.color.apricot50}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "password": true
+            "focus": true
           },
           "tokens": {
-            "borderColor": "{palette.color.link100}",
-            "borderWidth": "{palette.border.border2}"
+            "outerBorderColor": "{palette.color.link100}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
@@ -3058,6 +3084,46 @@
             "outerBorderGap": "{palette.size.size4}"
           }
         },
+        {
+          "if": {
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.link100}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.none}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "password": true,
+            "pressed": false
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.link100}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
         {
           "if": {
             "inverse": true,
@@ -3135,6 +3201,19 @@
             "outerBorderColor": "{palette.color.link100}"
           }
         },
+        {
+          "if": {
+            "inactive": true,
+            "password": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.slate50}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{system.border.zero}"
+          }
+        },
         {
           "if": {
             "focus": true,
@@ -3180,43 +3259,15 @@
             "outerBorderGap": "{system.size.zero}"
           }
         },
-        {
-          "if": {
-            "inactive": true,
-            "password": true
-          },
-          "tokens": {
-            "iconColor": "{palette.color.slate50}",
-            "outerBorderWidth": "{system.border.zero}"
-          }
-        },
         {
           "if": {
             "hover": true,
-            "inactive": true,
             "password": true
           },
           "tokens": {
             "iconColor": "{palette.color.slate50}",
             "outerBorderWidth": "{system.border.zero}"
           }
-        },
-        {
-          "if": {
-            "password": true
-          },
-          "tokens": {
-            "outerBorderWidth": "{system.border.zero}"
-          }
-        },
-        {
-          "if": {
-            "focus": true,
-            "pressed": true
-          },
-          "tokens": {
-            "outerBorderGap": "{palette.size.size1}"
-          }
         }
       ],
       "tokens": {
@@ -3232,6 +3283,7 @@
         "borderTopRightRadius": "{system.radius.none}",
         "borderTopWidth": "{palette.border.border1}",
         "borderWidth": "{palette.border.border2}",
+        "height": "{system.size.none}",
         "icon": "{palette.icon.Add}",
         "iconColor": "{palette.color.link100}",
         "iconScale": "{system.iconScale.scale1}",
@@ -3242,7 +3294,8 @@
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{system.border.zero}",
         "padding": "{palette.size.size4}",
-        "shadow": "{system.shadow.none}"
+        "shadow": "{system.shadow.none}",
+        "width": "{system.size.none}"
       }
     },
     "Image": {
@@ -6546,31 +6599,14 @@
         "selected": "{appearances.TagsItem.selected}"
       },
       "rules": [
-        {
-          "if": {
-            "pressed": true
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.slate120}",
-            "borderColor": "{palette.color.link100}",
-            "borderWidth": "{palette.border.border1}",
-            "color": "{palette.color.white}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}",
-            "outerBorderColor": "{palette.color.transparent}",
-            "outerBorderWidth": "{palette.border.none}"
-          }
-        },
         {
           "if": {
             "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.link25}",
+            "backgroundColor": "{palette.color.sand50}",
             "borderColor": "{palette.color.link100}",
             "color": "{palette.color.slate100}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.slate100}",
             "outerBorderColor": "{palette.color.apricot50}",
             "outerBorderGap": "{palette.size.size0}",
             "outerBorderWidth": "{palette.border.border3}"
@@ -6581,12 +6617,12 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.link100}",
-            "borderColor": "{palette.color.transparent}",
-            "borderWidth": "{palette.border.none}",
-            "color": "{palette.color.white}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.slate100}",
+            "iconBackground": "{palette.color.slate120}",
+            "iconColor": "{palette.color.apricot100}"
           }
         },
         {
@@ -6594,12 +6630,12 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.slate100}",
+            "backgroundColor": "{palette.color.sand100}",
             "borderColor": "{palette.color.link100}",
-            "color": "{palette.color.white}",
+            "color": "{palette.color.slate100}",
             "icon": "{palette.icon.XMark}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}",
+            "iconBackground": "{palette.color.slate120}",
+            "iconColor": "{palette.color.sand100}",
             "outerBorderColor": "{palette.color.transparent}",
             "outerBorderWidth": "{palette.border.none}"
           }
@@ -6610,12 +6646,12 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.link100}",
-            "borderColor": "{palette.color.transparent}",
-            "borderWidth": "{palette.border.none}",
-            "color": "{palette.color.white}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.slate100}",
+            "iconBackground": "{palette.color.slate120}",
+            "iconColor": "{palette.color.apricot100}"
           }
         },
         {
@@ -6624,16 +6660,47 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.slate100}",
+            "backgroundColor": "{palette.color.sand100}",
             "borderColor": "{palette.color.link100}",
-            "color": "{palette.color.white}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.white}",
+            "color": "{palette.color.slate100}",
+            "iconBackground": "{palette.color.slate120}",
+            "iconColor": "{palette.color.sand100}",
             "outerBorderColor": "{palette.color.apricot50}",
             "outerBorderGap": "{palette.size.size0}",
             "outerBorderWidth": "{palette.border.border3}"
           }
         },
+        {
+          "if": {
+            "pressed": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate120}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.sand100}",
+            "iconBackground": "{palette.color.sand100}",
+            "iconColor": "{palette.color.slate120}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.slate120}",
+            "borderColor": "{palette.color.link100}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.sand100}",
+            "iconBackground": "{palette.color.sand100}",
+            "iconColor": "{palette.color.slate120}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
+          }
+        },
         {
           "if": {
             "inactive": true
@@ -6643,29 +6710,29 @@
             "borderColor": "{palette.color.slate50}",
             "borderWidth": "{palette.border.border1}",
             "color": "{palette.color.slate25}",
-            "iconBackground": "{palette.color.transparent}",
-            "iconColor": "{palette.color.slate25}"
+            "iconBackground": "{palette.color.slate25}",
+            "iconColor": "{palette.color.white}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.center}",
-        "backgroundColor": "{palette.color.link25}",
+        "backgroundColor": "{palette.color.sand50}",
         "borderColor": "{palette.color.link100}",
-        "borderRadius": "{palette.radius.radius8}",
+        "borderRadius": "{palette.radius.radius32}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.slate100}",
         "fontName": "{palette.fontName.SofiaPro}",
         "fontSize": "{palette.fontSize.size18}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight700}",
         "icon": "{palette.icon.Add}",
         "iconAlignSelf": "{system.flexAlign.center}",
-        "iconBackground": "{palette.color.transparent}",
-        "iconBorderRadius": "{palette.radius.pill32}",
-        "iconColor": "{palette.color.slate100}",
+        "iconBackground": "{palette.color.slate100}",
+        "iconBorderRadius": "{palette.radius.radius48}",
+        "iconColor": "{palette.color.sand100}",
         "iconPadding": "{palette.size.size2}",
         "iconPosition": "{system.position.right}",
-        "iconSize": "{palette.size.size20}",
+        "iconSize": "{palette.size.size16}",
         "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
@@ -6677,8 +6744,8 @@
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.none}",
         "paddingBottom": "{palette.size.size10}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size11}",
+        "paddingRight": "{palette.size.size11}",
         "paddingTop": "{palette.size.size10}",
         "shadow": "{system.shadow.none}",
         "textAlign": "{system.flexJustifyContent.center}"