@telus-uds/theme-koodo 7.15.0 → 7.16.1

package/theme.json

@@ -4858,6 +4858,10 @@
           "description": "Uses icon colour to communicate meaning to the user",
           "type": "variant",
           "values": ["success", "error"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -4906,6 +4910,17 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
         {
           "if": {
             "background": true,
@@ -4966,6 +4981,266 @@
             "width": "{palette.size.size32}"
           }
         },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.pink}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}"
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -7027,7 +7302,7 @@
         },
         {
           "if": {
-            "viewport": ["xl"]
+            "viewport": ["lg", "xl"]
           },
           "tokens": {
             "borderRadius": "{palette.radius.pill32}"
@@ -8334,6 +8609,15 @@
             "outerBorderColor": "{palette.color.mortar}",
             "textLine": "{system.textLine.underline}"
           }
+        },
+        {
+          "if": {
+            "hover": true,
+            "viewport": "xl"
+          },
+          "tokens": {
+            "imageDimension": "{palette.size.size184}"
+          }
         }
       ],
       "tokens": {
@@ -10043,6 +10327,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -10055,7 +10344,8 @@
           "values": [true]
         },
         "pressed": "{appearances.TabsItem.pressed}",
-        "selected": "{appearances.TabsItem.pressed}"
+        "selected": "{appearances.TabsItem.pressed}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -10217,6 +10507,128 @@
           "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.border1}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.border1}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light40}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -10225,6 +10637,8 @@
         "borderRadius": "{system.radius.zero}",
         "borderWidth": "{system.border.zero}",
         "color": "{palette.color.black}",
+        "dropdownIcon": "{palette.icon.ChevronDown}",
+        "dropdownIconExpanded": "{palette.icon.ChevronUp}",
         "fontName": "{palette.fontName.StagSans}",
         "fontScaleCap": "{palette.fontSize.size64}",
         "fontSize": "{palette.fontSize.size16}",