@telus-uds/theme-koodo 7.15.0 → 7.16.0

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"
@@ -5585,6 +5860,18 @@
             "iconSpace": "{system.integer.1}"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "focus": true
@@ -5619,7 +5906,7 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.dove}",
+            "color": "{palette.color.mortar}",
             "textLine": "{system.textLine.none}"
           }
         },
@@ -5631,6 +5918,16 @@
             "color": "{palette.color.mortar}"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
+          }
+        },
         {
           "if": {
             "alternative": true,
@@ -5656,7 +5953,7 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blackLight}"
+            "color": "{palette.color.mortar}"
           }
         },
         {
@@ -5666,8 +5963,18 @@
             "pressed": true
           },
           "tokens": {
-            "color": "{palette.color.blackLight}",
-            "outerBorderColor": "{palette.color.blackLight}"
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.mortar}"
           }
         },
         {
@@ -5801,11 +6108,21 @@
         {
           "if": {
             "alternative": true,
-            "hover": true,
             "quiet": true
           },
           "tokens": {
             "color": "{palette.color.mortar}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "hover": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.blackLight}",
             "textLine": "{system.textLine.underline}"
           }
         },
@@ -5820,6 +6137,28 @@
             "textLine": "{system.textLine.underline}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "textLine": "{system.textLine.underline}"
+          }
+        },
         {
           "if": {
             "style": "inline"
@@ -5883,8 +6222,8 @@
             "style": "subtle"
           },
           "tokens": {
-            "color": "{palette.color.black}",
-            "outerBorderColor": "{palette.color.black}",
+            "color": "{palette.color.mortar}",
+            "outerBorderColor": "{palette.color.mortar}",
             "outerBorderOutline": "{system.borderStyle.none}"
           }
         },
@@ -6357,7 +6696,7 @@
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderOutline": "{system.borderStyle.none}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderWidth": "{palette.border.border1}",
         "textLine": "{system.textLine.underline}",
         "textLineStyle": "{system.textLineStyle.solid}"
       }
@@ -7027,7 +7366,7 @@
         },
         {
           "if": {
-            "viewport": ["xl"]
+            "viewport": ["lg", "xl"]
           },
           "tokens": {
             "borderRadius": "{palette.radius.pill32}"
@@ -8334,6 +8673,15 @@
             "outerBorderColor": "{palette.color.mortar}",
             "textLine": "{system.textLine.underline}"
           }
+        },
+        {
+          "if": {
+            "hover": true,
+            "viewport": "xl"
+          },
+          "tokens": {
+            "imageDimension": "{palette.size.size184}"
+          }
         }
       ],
       "tokens": {
@@ -10043,6 +10391,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 +10408,8 @@
           "values": [true]
         },
         "pressed": "{appearances.TabsItem.pressed}",
-        "selected": "{appearances.TabsItem.pressed}"
+        "selected": "{appearances.TabsItem.pressed}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
@@ -10217,6 +10571,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 +10701,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}",