@telus-uds/theme-koodo 5.13.0 → 5.15.0

package/theme.json

@@ -1437,14 +1437,79 @@
           "type": "variant",
           "values": [true]
         },
+        "isControl": {
+          "type": "variant",
+          "values": [true, false]
+        },
         "padding": {
           "type": "variant",
           "values": ["narrow", "intermediate", "compact", "custom"]
         },
         "pressed": "{appearances.Card.pressed}",
+        "selected": "{appearances.Card.selected}",
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "interactive": true,
+            "isControl": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.silver}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "isControl": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border1}",
+            "iconBackgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "inputBackgroundColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "isControl": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "focus": false,
+            "interactive": true,
+            "isControl": true,
+            "pressed": false
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "isControl": true,
+            "selected": true
+          },
+          "tokens": {
+            "iconBackgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "inputBackgroundColor": "{palette.color.silver}"
+          }
+        },
         {
           "if": {
             "borderRadius": "none"
@@ -1590,6 +1655,7 @@
           "if": {
             "focus": false,
             "interactive": true,
+            "isControl": false,
             "pressed": false
           },
           "tokens": {
@@ -1597,6 +1663,17 @@
             "borderWidth": "{palette.border.border2}"
           }
         },
+        {
+          "if": {
+            "focus": false,
+            "interactive": true,
+            "pressed": false
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
         {
           "if": {
             "hover": true,
@@ -1627,6 +1704,18 @@
             "borderColor": "{palette.color.silver}",
             "borderWidth": "{palette.border.border2}"
           }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "isControl": false,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{palette.border.border1}"
+          }
         }
       ],
       "tokens": {
@@ -1640,6 +1729,17 @@
         "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
         "flex": "{system.integer.1}",
         "gradient": "{system.gradient.none}",
+        "icon": "{palette.icon.Check}",
+        "iconBackgroundColor": "{palette.color.gallery}",
+        "iconColor": "{palette.color.black}",
+        "iconSize": "{palette.size.size20}",
+        "inputBackgroundColor": "{palette.color.gallery}",
+        "inputBorderColor": "{palette.color.transparent}",
+        "inputBorderRadius": "{palette.radius.radius4}",
+        "inputBorderWidth": "{palette.border.none}",
+        "inputHeight": "{palette.size.size32}",
+        "inputShadow": "{palette.shadow.surfaceInset}",
+        "inputWidth": "{palette.size.size32}",
         "minWidth": "{system.size.none}",
         "paddingBottom": "{palette.size.size32}",
         "paddingLeft": "{palette.size.size24}",
@@ -1648,6 +1748,48 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "CardGroup": {
+      "appearances": {
+        "focus": "{appearances.CardGroup.focus}",
+        "hover": "{appearances.CardGroup.hover}",
+        "pressed": "{appearances.CardGroup.pressed}",
+        "selected": "{appearances.CardGroup.selected}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "direction": "{system.direction.row}",
+            "space": "{system.integer.5}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["xs", "sm", "md"]
+          },
+          "tokens": {
+            "direction": "{system.direction.column}",
+            "fieldSpace": "{system.integer.3}",
+            "space": "{system.integer.3}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderBottomLeftRadius": "{palette.radius.radius1}",
+        "borderBottomRightRadius": "{palette.radius.radius1}",
+        "borderTopLeftRadius": "{palette.radius.radius1}",
+        "borderTopRightRadius": "{palette.radius.radius1}",
+        "direction": "{system.direction.column}",
+        "fieldSpace": "{system.integer.3}",
+        "outlineOffset": "{palette.size.size8}",
+        "outlineWidth": "{palette.border.border1}",
+        "showIcon": "{system.show.true}",
+        "space": "{system.integer.3}"
+      }
+    },
     "Carousel": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -2726,7 +2868,7 @@
           },
           "tokens": {
             "borderColor": "{palette.color.transparent}",
-            "borderWidth": "{system.border.zero}",
+            "borderWidth": "{system.border.none}",
             "icon": "{palette.icon.ChevronDown}",
             "iconColor": "{palette.color.black}",
             "iconGap": "{palette.size.size8}",
@@ -2762,6 +2904,20 @@
             "borderWidth": "{palette.border.border2}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "mini": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
         {
           "if": {
             "hover": true
@@ -2793,6 +2949,22 @@
             "borderWidth": "{palette.border.border2}"
           }
         },
+        {
+          "if": {
+            "focus": true,
+            "mini": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderColor": "{palette.color.black}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}"
+          }
+        },
         {
           "if": {
             "compact": true
@@ -2954,7 +3126,10 @@
             "contentPaddingLeft": "{palette.size.size0}",
             "contentPaddingRight": "{palette.size.size0}",
             "contentPaddingTop": "{palette.size.size0}",
-            "contentPanelBackgroundColor": "{palette.color.transparent}"
+            "contentPanelBackgroundColor": "{palette.color.transparent}",
+            "contentPanelPaddingBottom": "{palette.size.size0}",
+            "contentPanelPaddingTop": "{palette.size.size0}",
+            "marginBottom": "{palette.size.size0}"
           }
         }
       ],
@@ -4392,6 +4567,7 @@
         "itemIconColor": "{palette.color.pink}",
         "itemIconSize": "{palette.size.size16}",
         "itemLineHeight": "{palette.lineHeight.multiply130}",
+        "itemTextColor": "{palette.color.black}",
         "listGutter": "{palette.size.size10}"
       }
     },
@@ -6062,8 +6238,19 @@
       }
     },
     "QuickLinksFeature": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": "xs"
+          },
+          "tokens": {
+            "stackSpace": "{system.integer.4}"
+          }
+        }
+      ],
       "tokens": {
         "stackGap": "{system.integer.5}",
         "stackJustify": "{system.flexJustifyContent.center}",
@@ -6137,7 +6324,7 @@
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
-        "gap": "{palette.size.size32}",
+        "gap": "{palette.size.size5}",
         "imageDimension": "{palette.size.size128}",
         "outerBorderColor": "{palette.color.transparent}",
         "textAlign": "{system.textAlign.center}",
@@ -6289,6 +6476,9 @@
         "descriptionFontWeight": "{palette.fontWeight.weight400}",
         "descriptionLineHeight": "{palette.lineHeight.multiply140}",
         "descriptionMarginLeft": "{system.size.none}",
+        "icon": "{system.icon.none}",
+        "iconBackgroundColor": "{palette.color.transparent}",
+        "iconColor": "{palette.color.transparent}",
         "inputBackgroundColor": "{palette.color.white}",
         "inputBorderColor": "{palette.color.white}",
         "inputBorderWidth": "{palette.border.border2}",
@@ -8621,29 +8811,38 @@
         },
         {
           "if": {
-            "compact": true,
-            "size": "large"
+            "size": "medium"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio6to5}"
+            "fontSize": "{palette.fontSize.size16}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
           }
         },
         {
           "if": {
-            "size": "medium"
+            "compact": true
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size16}",
-            "lineHeight": "{palette.lineHeight.ratio3to2}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
           "if": {
             "compact": true,
-            "size": "medium"
+            "size": "large"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio5to4}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "bold": true,
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
@@ -8679,7 +8878,17 @@
             "size": "micro"
           },
           "tokens": {
-            "lineHeight": "{palette.lineHeight.ratio4to3}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "bold": true,
+            "compact": true,
+            "size": "micro"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {