@telus-uds/theme-allium 7.22.0 → 7.23.0

package/theme.json

@@ -3987,6 +3987,7 @@
       "tokens": {
         "borderColor": "{palette.color.greyCloud}",
         "borderStyle": "{system.borderStyle.solid}",
+        "borderTopWidth": "{system.border.none}",
         "borderWidth": "{system.border.zero}"
       }
     },
@@ -4294,6 +4295,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": "{system.border.none}",
         "borderColor": "{palette.color.transparent}",
         "borderRadius": "{palette.radius.none}",
         "borderWidth": "{palette.border.none}",
@@ -5308,6 +5310,10 @@
           "type": "variant",
           "values": ["small", "large"]
         },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
+        },
         "subtle": {
           "description": "For use in less prominent situations",
           "type": "variant",
@@ -5794,6 +5800,372 @@
             "iconSize": "{palette.size.size24}",
             "padding": "{palette.size.size10}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light40}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border2}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light40}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "iconColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.greyShuttle}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.none}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{system.shadow.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCharcoal}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.greyCharcoal}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyMystic}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.greyCloud}",
+            "shadow": "{system.shadow.none}"
+          }
         }
       ],
       "tokens": {
@@ -9687,7 +10059,7 @@
             "color": "{palette.color.purpleTelus}",
             "fontName": "{palette.fontName.HNforTELUSSA}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "paddingLeft": "{palette.size.size12}"
+            "paddingLeft": "{palette.size.size16}"
           }
         },
         {
@@ -9710,7 +10082,7 @@
           },
           "tokens": {
             "color": "{palette.color.purpleTelus}",
-            "paddingLeft": "{palette.size.size12}"
+            "paddingLeft": "{palette.size.size16}"
           }
         },
         {
@@ -9811,6 +10183,8 @@
         "contentPaddingLeft": "{palette.size.size0}",
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
+        "expandDividerColor": "{palette.color.greyCloud}",
+        "expandDividerWidth": "{system.border.none}",
         "expandDuration": "{palette.duration.duration300}",
         "icon": "{palette.icon.CaretDown}",
         "iconColor": "{palette.color.greenAccessible}",