@telus-uds/theme-koodo 3.12.0 → 3.14.0

package/theme.json

@@ -29,6 +29,7 @@
       "appearances": {
         "background": {
           "description": "Background colour of box. White if not specified.",
+          "type": "variant",
           "values": [
             "lightest",
             "lighter",
@@ -670,10 +671,52 @@
       }
     },
     "Card": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "background": {
+          "description": "Defines background related attributes of Card",
+          "type": "variant",
+          "values": ["alternative", "subtle", "grid", "feature"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "background": "alternative"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.icicle}"
+          }
+        },
+        {
+          "if": {
+            "background": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.carouselPink}",
+            "borderRadius": "{palette.radius.radius8}"
+          }
+        },
+        {
+          "if": {
+            "background": "grid"
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}",
+            "borderRadius": "{palette.radius.radius8}",
+            "borderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "background": "feature"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.texas}"
+          }
+        }
+      ],
       "tokens": {
-        "backgroundColor": "{palette.color.texas}",
+        "backgroundColor": "{palette.color.white}",
         "borderColor": "{system.color.none}",
         "borderRadius": "{palette.radius.none}",
         "borderWidth": "{palette.border.none}",
@@ -827,8 +870,36 @@
             "focus": true
           },
           "tokens": {
-            "inputOutlineColor": "{palette.color.silver}",
-            "inputOutlineWidth": "{palette.border.border2}"
+            "inputOutlineColor": "{palette.color.chathamsBlue}",
+            "inputOutlineWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "inputOutlineColor": "{palette.color.chathamsBlue}",
+            "inputOutlineWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "inputBackgroundColor": "{palette.color.silver}",
+            "inputBorderColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "checked": true,
+            "inactive": true
+          },
+          "tokens": {
+            "iconBackgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.white}"
           }
         }
       ],
@@ -1408,6 +1479,11 @@
         "focus": "{appearances.Button.focus}",
         "hover": "{appearances.Button.hover}",
         "inactive": "{appearances.Button.inactive}",
+        "password": {
+          "description": "Password masked or not",
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.Button.pressed}"
       },
       "rules": [
@@ -1418,6 +1494,62 @@
           "tokens": {
             "outerBorderGap": "{system.size.zero}"
           }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.mosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "password": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "password": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.darkMosque}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "password": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.mosque}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "password": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.silver}"
+          }
         }
       ],
       "tokens": {
@@ -3129,6 +3261,11 @@
         "focus": "{appearances.TextInput.focus}",
         "hover": "{appearances.TextInput.hover}",
         "inactive": "{appearances.TextInput.inactive}",
+        "password": {
+          "description": "capability that helps masking and unmasking text",
+          "type": "variant",
+          "values": [true]
+        },
         "validation": "{appearances.TextInput.validation}"
       },
       "rules": [
@@ -3206,7 +3343,9 @@
         "paddingBottom": "{palette.size.size10}",
         "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size10}"
+        "paddingTop": "{palette.size.size10}",
+        "passwordHideButtonIcon": "{palette.icon.EyeMasked}",
+        "passwordShowButtonIcon": "{palette.icon.EyeUnmasked}"
       }
     },
     "Timeline": {
@@ -3479,6 +3618,11 @@
           "type": "variant",
           "values": ["red"]
         },
+        "compact": {
+          "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
+          "type": "variant",
+          "values": [true]
+        },
         "inverse": {
           "description": "Styles the link white for use on dark backgrounds.",
           "type": "variant",
@@ -3486,7 +3630,20 @@
         },
         "size": {
           "type": "variant",
-          "values": ["small", "large", "h1", "h2", "h3", "h4", "display"]
+          "values": [
+            "micro",
+            "small",
+            "medium",
+            "large",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "display1",
+            "display2"
+          ]
         },
         "viewport": "{appearances.system.viewport}",
         "weight": {
@@ -3520,7 +3677,34 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "lineHeight": "{palette.lineHeight.multiply160}"
+            "lineHeight": "{palette.lineHeight.ratio7to5}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "medium"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size16}",
+            "lineHeight": "{palette.lineHeight.ratio3to2}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "medium"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
@@ -3529,28 +3713,76 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "lineHeight": "{palette.lineHeight.multiply140}"
+            "lineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "size": "micro"
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size12}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "micro"
+          },
+          "tokens": {
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
+          }
+        },
+        {
+          "if": {
+            "size": "display1"
+          },
+          "tokens": {
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size44}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
           "if": {
-            "size": "display"
+            "size": "display1",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "fontSize": "{palette.fontSize.size70}",
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "display2"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size48}",
+            "fontSize": "{palette.fontSize.size36}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply120}"
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
           "if": {
-            "size": "display",
+            "size": "display2",
             "viewport": ["lg", "xl"]
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size64}",
-            "lineHeight": "{palette.lineHeight.multiply110}"
+            "fontSize": "{palette.fontSize.size54}",
+            "lineHeight": "{palette.lineHeight.ratio8to7}"
           }
         },
         {
@@ -3559,9 +3791,9 @@
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size44}",
+            "fontSize": "{palette.fontSize.size34}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply120}"
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
@@ -3570,8 +3802,8 @@
             "viewport": ["lg", "xl"]
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size40}",
-            "lineHeight": "{palette.lineHeight.multiply110}"
+            "fontSize": "{palette.fontSize.size44}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
@@ -3581,50 +3813,53 @@
           "tokens": {
             "color": "{palette.color.black}",
             "fontName": "{palette.fontName.StagSans}",
-            "fontSize": "{palette.fontSize.size28}",
+            "fontSize": "{palette.fontSize.size32}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply130}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {
           "if": {
-            "size": "h2",
-            "viewport": ["lg", "xl"]
+            "size": "h3"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size28}"
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size24}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio4to3}"
           }
         },
         {
           "if": {
-            "size": "h3"
+            "size": "h4"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
             "fontSize": "{palette.fontSize.size20}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply140}"
+            "lineHeight": "{palette.lineHeight.ratio6to5}"
           }
         },
         {
           "if": {
-            "size": "h3",
-            "viewport": ["lg", "xl"]
+            "size": "h5"
           },
           "tokens": {
-            "fontSize": "{palette.fontSize.size24}",
-            "lineHeight": "{palette.lineHeight.multiply130}"
+            "fontName": "{palette.fontName.StagSans}",
+            "fontSize": "{palette.fontSize.size18}",
+            "fontWeight": "{palette.fontWeight.weight700}",
+            "lineHeight": "{palette.lineHeight.ratio11to9}"
           }
         },
         {
           "if": {
-            "size": "h4"
+            "size": "h6"
           },
           "tokens": {
             "fontName": "{palette.fontName.StagSans}",
             "fontSize": "{palette.fontSize.size16}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.multiply150}"
+            "lineHeight": "{palette.lineHeight.ratio5to4}"
           }
         },
         {