@telus-uds/theme-allium 7.13.0 → 7.14.1

package/theme.json

@@ -4701,6 +4701,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large", "extraLarge"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -4749,6 +4753,17 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "background": true,
@@ -4809,6 +4824,266 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light80}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -4833,6 +5108,14 @@
             "size": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": "{palette.size.size48}"
+          }
+        },
         {
           "if": {
             "color": "brand"
@@ -4891,10 +5174,10 @@
         },
         {
           "if": {
-            "size": "extraLarge"
+            "color": "offer"
           },
           "tokens": {
-            "size": "{palette.size.size48}"
+            "gradient": "{palette.gradient.purple}"
           }
         },
         {
@@ -4904,14 +5187,6 @@
           "tokens": {
             "color": "{palette.color.purpleTelus}"
           }
-        },
-        {
-          "if": {
-            "color": "offer"
-          },
-          "tokens": {
-            "gradient": "{palette.gradient.purple}"
-          }
         }
       ],
       "tokens": {
@@ -9873,7 +10148,7 @@
       "tokens": {
         "borderBottomColor": "{palette.color.greyShuttle}",
         "borderBottomWidth": "{palette.border.border1}",
-        "buttonClearance": "{palette.size.size16}",
+        "buttonClearance": "{palette.size.size24}",
         "gutter": "{palette.size.size4}",
         "nextIcon": "{palette.icon.ArrowRight}",
         "previousIcon": "{palette.icon.ArrowLeft}",
@@ -9882,6 +10157,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -9894,7 +10174,8 @@
           "values": [true]
         },
         "pressed": "{appearances.TabsItem.pressed}",
-        "selected": "{appearances.TabsItem.pressed}"
+        "selected": "{appearances.TabsItem.pressed}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -10008,6 +10289,132 @@
           "tokens": {
             "maxWidth": "{system.size.none}"
           }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderColor": "{palette.color.transparent}",
+            "borderRadius": "{palette.radius.pill32}",
+            "borderWidth": "{palette.border.border3}",
+            "color": "{palette.color.greyShuttle}",
+            "paddingHorizontal": "{palette.size.size21}",
+            "paddingVertical": "{palette.size.size5}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border2}",
+            "color": "{palette.color.purpleTelus}",
+            "paddingHorizontal": "{palette.size.size22}",
+            "paddingVertical": "{palette.size.size6}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderColor": "{palette.color.purpleTelus}",
+            "color": "{palette.color.white}",
+            "paddingHorizontal": "{palette.size.size24}",
+            "paddingVertical": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark5}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.purpleTelus}",
+            "paddingHorizontal": "{palette.size.size24}",
+            "paddingVertical": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -10016,6 +10423,8 @@
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{system.border.zero}",
         "color": "{palette.color.greyShuttle}",
+        "dropdownIcon": "{palette.icon.CaretDown}",
+        "dropdownIconExpanded": "{palette.icon.CaretUp}",
         "fontName": "{palette.fontName.HNforTELUSSA}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size14}",