@telus-uds/theme-koodo 7.13.0 → 7.15.0

package/theme.json

@@ -1165,7 +1165,15 @@
         "inactive": "{appearances.ButtonDropdown.inactive}",
         "open": "{appearances.ButtonDropdown.open}",
         "pressed": "{appearances.ButtonDropdown.pressed}",
-        "selected": "{appearances.ButtonDropdown.selected}"
+        "selected": "{appearances.ButtonDropdown.selected}",
+        "size": {
+          "type": "variant",
+          "values": ["default", "small"]
+        },
+        "width": {
+          "type": "variant",
+          "values": ["full"]
+        }
       },
       "rules": [
         {
@@ -1192,7 +1200,8 @@
             "backgroundColor": "{palette.color.blackLight}",
             "borderColor": "{palette.color.blackLight}",
             "color": "{palette.color.dove}",
-            "iconColor": "{palette.color.dove}"
+            "iconColor": "{palette.color.dove}",
+            "leadIconColor": "{palette.color.dove}"
           }
         },
         {
@@ -1225,7 +1234,8 @@
             "backgroundColor": "{palette.color.silver}",
             "borderColor": "{palette.color.silver}",
             "color": "{palette.color.white}",
-            "iconColor": "{palette.color.white}"
+            "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}"
           }
         },
         {
@@ -1236,6 +1246,7 @@
             "backgroundColor": "{palette.color.black}",
             "color": "{palette.color.white}",
             "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}",
             "outerBorderColor": "{system.color.transparent}"
           }
         },
@@ -1271,7 +1282,8 @@
             "backgroundColor": "{palette.color.blackLight}",
             "borderColor": "{palette.color.transparent}",
             "color": "{palette.color.dove}",
-            "iconColor": "{palette.color.dove}"
+            "iconColor": "{palette.color.dove}",
+            "leadIconColor": "{palette.color.dove}"
           }
         },
         {
@@ -1284,6 +1296,25 @@
             "backgroundColor": "{palette.color.blackLight}",
             "outerBorderColor": "{palette.color.blackLight}"
           }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "leadIconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size4}",
+            "paddingTop": "{palette.size.size4}"
+          }
         }
       ],
       "tokens": {
@@ -1293,6 +1324,10 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
+        "descriptionFontName": "{palette.fontName.StagSans}",
+        "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionFontWeight": "{palette.fontWeight.weight400}",
+        "descriptionTextPaddingBottom": "{palette.size.size0}",
         "dividerColor": "{palette.color.silver}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size14}",
@@ -1302,12 +1337,22 @@
         "iconBackground": "{palette.color.transparent}",
         "iconBorderRadius": "{palette.radius.pill32}",
         "iconColor": "{palette.color.black}",
-        "iconPadding": "{palette.size.size4}",
+        "iconPadding": "{palette.size.size0}",
         "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size20}",
-        "iconSpace": "{system.integer.0}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
+        "leadIcon": "{system.icon.none}",
+        "leadIconBackgroundColor": "{system.color.transparent}",
+        "leadIconBorderRadius": "{palette.radius.none}",
+        "leadIconColor": "{palette.color.black}",
+        "leadIconContainerPaddingBottom": "{palette.size.size0}",
+        "leadIconContainerPaddingLeft": "{palette.size.size0}",
+        "leadIconContainerPaddingRight": "{palette.size.size0}",
+        "leadIconContainerPaddingTop": "{palette.size.size0}",
+        "leadIconPadding": "{palette.size.size0}",
+        "leadIconSize": "{palette.size.size24}",
         "lineHeight": "{palette.lineHeight.multiply150}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
@@ -1315,13 +1360,15 @@
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size2}",
         "outerBorderWidth": "{palette.border.border1}",
-        "paddingBottom": "{palette.size.size8}",
-        "paddingLeft": "{palette.size.size24}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size8}",
+        "paddingTop": "{palette.size.size12}",
         "shadow": "{system.shadow.none}",
         "subtitleColor": "{palette.color.black}",
         "textAlign": "{system.flexJustifyContent.center}",
+        "textPaddingLeft": "{palette.size.size8}",
+        "textPaddingRight": "{palette.size.size8}",
         "width": "{system.size.none}"
       }
     },
@@ -2733,12 +2780,14 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "checkboxOuterBorderColor": "{palette.color.black}",
-            "checkboxOuterBorderGap": "{palette.size.size2}",
-            "checkboxOuterBorderWidth": "{palette.border.border1}",
-            "outerBorderColor": "{palette.color.silver}",
-            "outerBorderWidth": "{palette.border.border2}"
+            "backgroundColor": "{palette.color.dark5}",
+            "borderColor": "{palette.color.silver}",
+            "checkboxOuterBorderColor": "{palette.color.transparent}",
+            "checkboxOuterBorderGap": "{system.size.zero}",
+            "checkboxOuterBorderWidth": "{system.border.zero}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
@@ -2773,13 +2822,14 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.dove}",
-            "checkboxOuterBorderColor": "{palette.color.black}",
-            "checkboxOuterBorderGap": "{palette.size.size2}",
-            "outerBorderColor": "{palette.color.silver}",
-            "outerBorderGap": "{palette.size.size0}",
-            "outerBorderWidth": "{palette.border.border1}"
+            "backgroundColor": "{palette.color.dark10}",
+            "borderColor": "{palette.color.silver}",
+            "checkboxOuterBorderColor": "{palette.color.transparent}",
+            "checkboxOuterBorderGap": "{system.size.zero}",
+            "checkboxOuterBorderWidth": "{system.border.zero}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
@@ -4281,6 +4331,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
+            "iconSize": "{palette.size.size24}",
             "lineHeight": "{palette.lineHeight.ratio7to5}"
           }
         },
@@ -5355,6 +5406,7 @@
             "raised": true
           },
           "tokens": {
+            "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.black}",
             "shadow": "{palette.shadow.surfaceRaised}"
           }
@@ -5364,7 +5416,10 @@
             "hover": true,
             "raised": true
           },
-          "tokens": {}
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "iconColor": "{palette.color.white}"
+          }
         },
         {
           "if": {
@@ -5400,7 +5455,8 @@
             "raised": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}",
+            "backgroundColor": "{palette.color.blackLight}",
+            "borderColor": "{palette.color.blackLight}",
             "iconColor": "{palette.color.dove}"
           }
         },
@@ -6295,7 +6351,7 @@
         "color": "{palette.color.black}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.0}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -6454,10 +6510,10 @@
             "isChild": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.black}",
             "itemBorderLeftWidth": "{palette.border.border4}",
-            "itemBorderTopWidth": "{palette.border.none}"
+            "itemBorderTopWidth": "{palette.border.border1}"
           }
         },
         {
@@ -6466,9 +6522,9 @@
             "pressed": true
           },
           "tokens": {
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.mortar}",
-            "itemBorderTopWidth": "{palette.border.none}",
+            "itemBorderTopWidth": "{palette.border.border1}",
             "itemColor": "{palette.color.mortar}"
           }
         },
@@ -6542,10 +6598,10 @@
           },
           "tokens": {
             "itemBackgroundColor": "{palette.color.gallery}",
-            "itemBorderBottomWidth": "{palette.border.none}",
+            "itemBorderBottomWidth": "{palette.border.border1}",
             "itemBorderLeftColor": "{palette.color.dove}",
-            "itemBorderRightWidth": "{palette.border.none}",
-            "itemBorderTopWidth": "{palette.border.none}",
+            "itemBorderRightWidth": "{palette.border.border1}",
+            "itemBorderTopWidth": "{palette.border.border1}",
             "itemColor": "{palette.color.dove}"
           }
         },
@@ -8384,7 +8440,7 @@
           },
           "tokens": {
             "outerBorderColor": "{palette.color.black}",
-            "outerBorderGap": "{palette.size.size5}",
+            "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border1}"
           }
         },
@@ -8427,7 +8483,7 @@
       ],
       "tokens": {
         "checkedBackgroundColor": "{palette.color.purple}",
-        "checkedSize": "{palette.size.size16}",
+        "checkedSize": "{palette.size.size12}",
         "containerBackgroundColor": "{palette.color.transparent}",
         "containerBorderRadius": "{palette.radius.none}",
         "containerOpacity": "{system.opacity.opaque}",
@@ -8448,7 +8504,7 @@
         "inputBorderColor": "{palette.color.black}",
         "inputBorderWidth": "{palette.border.border1}",
         "inputOutlineColor": "{palette.color.black}",
-        "inputOutlineWidth": "{palette.border.border2}",
+        "inputOutlineWidth": "{palette.border.border1}",
         "inputSize": "{palette.size.size20}",
         "labelColor": "{palette.color.black}",
         "labelFontName": "{palette.fontName.StagSans}",
@@ -8457,7 +8513,7 @@
         "labelLineHeight": "{palette.lineHeight.multiply150}",
         "labelMarginLeft": "{palette.size.size8}",
         "outerBorderColor": "{system.color.transparent}",
-        "outerBorderGap": "{palette.size.size5}",
+        "outerBorderGap": "{palette.size.size1}",
         "outerBorderWidth": "{palette.border.border1}"
       }
     },
@@ -8490,12 +8546,13 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.dove}",
-            "outerBorderColor": "{palette.color.silver}",
-            "outerBorderWidth": "{palette.border.border2}",
-            "radioOuterBorderColor": "{palette.color.black}",
-            "radioOuterBorderGap": "{palette.size.size2}",
-            "radioOuterBorderWidth": "{palette.border.border1}"
+            "backgroundColor": "{palette.color.dark5}",
+            "borderColor": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}",
+            "radioOuterBorderColor": "{palette.color.transparent}",
+            "radioOuterBorderGap": "{system.size.zero}"
           }
         },
         {
@@ -8530,13 +8587,13 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "borderColor": "{palette.color.dove}",
-            "outerBorderColor": "{palette.color.silver}",
-            "outerBorderGap": "{palette.size.size0}",
-            "outerBorderWidth": "{palette.border.border1}",
-            "radioOuterBorderColor": "{palette.color.black}",
-            "radioOuterBorderGap": "{palette.size.size2}"
+            "backgroundColor": "{palette.color.dark10}",
+            "borderColor": "{palette.color.silver}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderGap": "{system.size.zero}",
+            "outerBorderWidth": "{system.border.zero}",
+            "radioOuterBorderColor": "{palette.color.transparent}",
+            "radioOuterBorderGap": "{system.size.zero}"
           }
         },
         {