@telus-uds/theme-koodo 4.0.0 → 4.2.0

package/theme.json

@@ -905,7 +905,6 @@
         }
       ],
       "tokens": {
-        "alignSelf": "{system.flexAlign.flexStart}",
         "backgroundColor": "{palette.color.white}",
         "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.mosque}",
@@ -1908,11 +1907,11 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "color": "{system.color.none}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
-        "fontSize": "{palette.fontSize.size14}",
-        "fontWeight": "{palette.fontWeight.weight300}",
-        "lineHeight": "{palette.lineHeight.ratio10to7}"
+        "fontSize": "{palette.fontSize.size12}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "lineHeight": "{palette.lineHeight.ratio4to3}"
       }
     },
     "Divider": {
@@ -1997,7 +1996,11 @@
           "type": "variant",
           "values": [true]
         },
-        "expanded": "{appearances.ExpandCollapseControl.expanded}"
+        "expanded": "{appearances.ExpandCollapseControl.expanded}",
+        "mini": {
+          "type": "variant",
+          "values": [true]
+        }
       },
       "rules": [
         {
@@ -2006,6 +2009,28 @@
           },
           "tokens": {}
         },
+        {
+          "if": {
+            "mini": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "icon": "{palette.icon.ChevronDown}",
+            "iconColor": "{palette.color.black}",
+            "iconGap": "{palette.size.size8}",
+            "iconPaddingTop": "{palette.size.size4}",
+            "iconPosition": "{system.position.left}",
+            "iconSize": "{palette.size.size16}",
+            "justifyContent": "{system.flexJustifyContent.flexStart}",
+            "paddingBottom": "{palette.size.size0}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size0}",
+            "verticalAlign": "{system.verticalAlign.middle}"
+          }
+        },
         {
           "if": {
             "expanded": true
@@ -2017,7 +2042,11 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.gallery}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
         "borderColor": "{palette.color.transparent}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
         "borderWidth": "{system.border.zero}",
         "icon": "{palette.icon.ChevronDown}",
         "iconColor": "{palette.color.black}",
@@ -2030,6 +2059,7 @@
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size24}",
         "paddingTop": "{palette.size.size16}",
+        "textLine": "{system.textLine.none}",
         "verticalAlign": "{system.verticalAlign.middle}"
       }
     },
@@ -2073,11 +2103,15 @@
         "verticalAlign": "{system.verticalAlign.middle}"
       }
     },
-    "ExpandCollapseMiniPanel": {
+    "ExpandCollapsePanel": {
       "appearances": {
         "compact": {
           "type": "variant",
           "values": [true]
+        },
+        "mini": {
+          "type": "variant",
+          "values": [true]
         }
       },
       "rules": [
@@ -2086,36 +2120,18 @@
             "compact": true
           },
           "tokens": {}
-        }
-      ],
-      "tokens": {
-        "borderColor": "{palette.color.transparent}",
-        "borderRadius": "{palette.radius.none}",
-        "borderWidth": "{palette.border.none}",
-        "collapseDuration": "{palette.duration.duration250}",
-        "contentPaddingBottom": "{palette.size.size16}",
-        "contentPaddingLeft": "{palette.size.size0}",
-        "contentPaddingRight": "{palette.size.size0}",
-        "contentPaddingTop": "{palette.size.size0}",
-        "expandDividerColor": "{palette.color.transparent}",
-        "expandDividerWidth": "{palette.size.size0}",
-        "expandDuration": "{palette.duration.duration300}",
-        "marginBottom": "{palette.size.size0}"
-      }
-    },
-    "ExpandCollapsePanel": {
-      "appearances": {
-        "compact": {
-          "type": "variant",
-          "values": [true]
-        }
-      },
-      "rules": [
+        },
         {
           "if": {
-            "compact": true
+            "mini": true
           },
-          "tokens": {}
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "contentPaddingBottom": "{palette.size.size0}",
+            "contentPaddingLeft": "{palette.size.size0}",
+            "contentPaddingRight": "{palette.size.size0}",
+            "contentPaddingTop": "{palette.size.size0}"
+          }
         }
       ],
       "tokens": {
@@ -2268,7 +2284,7 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "color": "{palette.color.black}",
+        "color": "{system.color.none}",
         "fontName": "{palette.fontName.StagSans}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "lineHeight": "{palette.lineHeight.ratio1to1}",
@@ -3181,7 +3197,7 @@
             "size": "small"
           },
           "tokens": {
-            "iconMarginTop": "{palette.size.size1}",
+            "iconMarginTop": "{palette.size.size2}",
             "itemFontSize": "{palette.fontSize.size14}",
             "itemIconSize": "{palette.size.size14}",
             "listGutter": "{palette.size.size10}"
@@ -3192,6 +3208,7 @@
             "compact": true
           },
           "tokens": {
+            "iconMarginTop": "{palette.size.size1}",
             "itemLineHeight": "{palette.lineHeight.multiply120}"
           }
         },
@@ -4976,6 +4993,7 @@
       "appearances": {
         "active": "{appearances.SideNavItem.active}",
         "expanded": "{appearances.SideNavItem.expanded}",
+        "focus": "{appearances.SideNavItem.focus}",
         "hover": "{appearances.SideNavItem.hover}",
         "type": "{appearances.SideNavItem.type}"
       },
@@ -4986,9 +5004,7 @@
           },
           "tokens": {
             "accentBackgroundColor": "{palette.color.mosque}",
-            "backgroundColor": "{palette.color.mintTulip}",
-            "color": "{palette.color.mosque}",
-            "paddingLeft": "{palette.size.size10}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -4996,41 +5012,42 @@
             "type": "child"
           },
           "tokens": {
-            "accentBackgroundColor": "{palette.color.mintTulip}",
-            "accentOffset": "{palette.size.size16}",
-            "borderWidth": "{palette.border.none}",
-            "paddingLeft": "{palette.size.size36}"
+            "accentBackgroundColor": "{palette.color.transparent}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size14}",
+            "fontWeight": "{palette.fontWeight.weight400}",
+            "lineHeight": "{palette.lineHeight.ratio14to1}",
+            "paddingBottom": "{palette.size.size12}",
+            "paddingLeft": "{palette.size.size32}",
+            "paddingRight": "{palette.size.size16}",
+            "paddingTop": "{palette.size.size12}"
           }
         },
         {
           "if": {
             "active": true,
+            "expanded": true,
             "type": "parent"
           },
           "tokens": {
-            "paddingLeft": "{palette.size.size10}"
+            "accentBackgroundColor": "{palette.color.transparent}",
+            "backgroundColor": "{palette.color.transparent}"
           }
         },
         {
           "if": {
-            "active": true,
-            "expanded": true,
-            "type": "parent"
+            "hover": true
           },
           "tokens": {
-            "accentBackgroundColor": "{palette.color.transparent}",
-            "backgroundColor": "{palette.color.transparent}",
-            "color": "{palette.color.dove}",
-            "paddingLeft": "{palette.size.size16}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
           "if": {
-            "hover": true
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mintTulip}",
-            "color": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.gallery}"
           }
         },
         {
@@ -5040,9 +5057,14 @@
           },
           "tokens": {
             "accentBackgroundColor": "{palette.color.mosque}",
+            "accentOffset": "{palette.size.size24}",
             "accentPadding": "{palette.size.size16}",
-            "backgroundColor": "{palette.color.mintTulip}",
-            "color": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.transparent}",
+            "fontName": "{palette.fontName.StagSans}",
+            "fontWeight": "{palette.fontWeight.weight600}",
+            "lineHeight": "{palette.lineHeight.multiply150}",
+            "paddingBottom": "{palette.size.size13}",
+            "paddingTop": "{palette.size.size13}"
           }
         },
         {
@@ -5052,10 +5074,7 @@
             "type": "child"
           },
           "tokens": {
-            "accentBackgroundColor": "{palette.color.white}",
-            "accentOffset": "{system.size.zero}",
-            "accentWidth": "{palette.size.size16}",
-            "color": "{palette.color.dove}"
+            "accentBackgroundColor": "{palette.color.transparent}"
           }
         }
       ],
@@ -5068,21 +5087,32 @@
         "borderColor": "{palette.color.silver}",
         "borderStyle": "{system.borderStyle.solid}",
         "borderWidth": "{palette.border.border1}",
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
-        "fontWeight": "{palette.fontWeight.weight400}",
+        "fontWeight": "{palette.fontWeight.weight600}",
         "justifyContent": "{system.flexJustifyContent.spaceBetween}",
         "lineHeight": "{palette.lineHeight.multiply150}",
-        "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size16}",
-        "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}"
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size24}",
+        "paddingRight": "{palette.size.size20}",
+        "paddingTop": "{palette.size.size12}"
       }
     },
     "SideNavItemsGroup": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "expanded": "{appearances.SideNavItemGroup.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
       "tokens": {
         "collapseDuration": "{palette.duration.duration250}",
         "contentPaddingBottom": "{palette.size.size0}",
@@ -5090,11 +5120,11 @@
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
         "expandDuration": "{palette.duration.duration300}",
-        "icon": "{system.icon.none}",
-        "iconColor": "{system.color.none}",
+        "icon": "{palette.icon.ChevronDown}",
+        "iconColor": "{palette.color.black}",
         "iconGap": "{palette.size.size8}",
         "iconPosition": "{system.position.right}",
-        "iconSize": "{palette.size.size10}",
+        "iconSize": "{palette.size.size16}",
         "justifyContent": "{system.flexJustifyContent.spaceBetween}",
         "verticalAlign": "{system.verticalAlign.middle}"
       }
@@ -5103,12 +5133,14 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "animationDuration": "{system.integer.2000}",
         "baseWidth": "{palette.size.size40}",
         "characters": "{palette.size.size10}",
-        "color": "{palette.color.dove}",
+        "color": "{palette.color.silver}",
         "radius": "{system.radius.round}",
-        "size": "{palette.size.size2}",
-        "spaceBetweenLines": "{palette.size.size4}",
+        "secondColor": "{palette.color.gallery}",
+        "size": "{palette.size.size3}",
+        "spaceBetweenLines": "{palette.size.size2}",
         "squareRadius": "{palette.radius.radius4}"
       }
     },