@telus-uds/theme-koodo 7.22.0 → 7.24.0

package/theme.json

@@ -2271,7 +2271,7 @@
             "style": "dark"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light10}"
+            "backgroundColor": "{palette.color.light20}"
           }
         },
         {
@@ -2281,7 +2281,7 @@
             "style": "darker"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light10}"
+            "backgroundColor": "{palette.color.light20}"
           }
         },
         {
@@ -2291,7 +2291,7 @@
             "style": "darkest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light10}"
+            "backgroundColor": "{palette.color.light20}"
           }
         },
         {
@@ -2301,7 +2301,7 @@
             "style": "dark"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light20}"
+            "backgroundColor": "{palette.color.light40}"
           }
         },
         {
@@ -2311,7 +2311,7 @@
             "style": "darker"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light20}"
+            "backgroundColor": "{palette.color.light40}"
           }
         },
         {
@@ -2321,7 +2321,40 @@
             "style": "darkest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light20}"
+            "backgroundColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "interactive": true,
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.light60}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "interactive": true,
+            "style": "darker"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.light60}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "interactive": true,
+            "style": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.light60}"
           }
         }
       ],
@@ -2724,23 +2757,30 @@
         "icon": "{palette.icon.Check}",
         "iconBackgroundColor": "{palette.color.white}",
         "iconColor": "{palette.color.purple}",
+        "iconContainerHeight": "{system.size.none}",
+        "iconContainerWidth": "{system.size.none}",
         "iconSize": "{palette.size.size14}",
         "inputBackgroundColor": "{palette.color.white}",
         "inputBorderColor": "{palette.color.black}",
         "inputBorderRadius": "{palette.radius.none}",
         "inputBorderWidth": "{palette.border.border2}",
-        "inputHeight": "{palette.size.size20}",
+        "inputHeight": "{palette.size.size24}",
         "inputOutlineColor": "{system.color.none}",
         "inputOutlineOffset": "{palette.size.size1}",
         "inputOutlineWidth": "{palette.border.none}",
         "inputShadow": "{system.shadow.none}",
-        "inputWidth": "{palette.size.size20}",
+        "inputWidth": "{palette.size.size24}",
         "labelColor": "{palette.color.black}",
         "labelFontName": "{palette.fontName.StagSans}",
         "labelFontSize": "{palette.fontSize.size16}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.multiply150}",
-        "labelMarginLeft": "{palette.size.size8}"
+        "labelMarginLeft": "{palette.size.size8}",
+        "padding": "{system.size.none}",
+        "paddingBottom": "{system.size.none}",
+        "paddingLeft": "{system.size.none}",
+        "paddingRight": "{system.size.none}",
+        "paddingTop": "{system.size.none}"
       }
     },
     "CheckboxCard": {
@@ -4082,6 +4122,7 @@
       "tokens": {
         "borderColor": "{palette.color.transparent}",
         "borderStyle": "{system.borderStyle.solid}",
+        "borderTopWidth": "{system.border.none}",
         "borderWidth": "{system.border.zero}"
       }
     },
@@ -4419,6 +4460,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": "{system.border.none}",
         "borderColor": "{palette.color.gallery}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
@@ -5409,6 +5451,10 @@
         "size": {
           "type": "variant",
           "values": ["small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
         }
       },
       "rules": [
@@ -5923,6 +5969,411 @@
             "iconSize": "{palette.size.size24}",
             "padding": "{palette.size.size10}"
           }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border1}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}",
+            "borderColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light40}",
+            "borderColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.dark40}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "borderColor": "{palette.color.black}",
+            "borderWidth": "{system.border.none}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderBottomWidth": "{system.border.zero}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.dove}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border1}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border2}",
+            "borderColor": "{palette.color.white}",
+            "borderWidth": "{system.border.none}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "borderBottomWidth": "{system.border.zero}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.none}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "inverse": true,
+            "pressed": false,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border1}",
+            "borderColor": "{palette.color.white}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "iconColor": "{palette.color.dark40}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.light40}"
+          }
+        },
+        {
+          "if": {
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border1}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.black}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark20}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.dove}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{system.shadow.none}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "hover": false,
+            "pressed": false,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius4}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.black}",
+            "padding": "{palette.size.size8}",
+            "shadow": "{palette.shadow.surfaceRaised}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.dark40}",
+            "shadow": "{system.shadow.none}"
+          }
         }
       ],
       "tokens": {
@@ -8448,6 +8899,10 @@
           "type": "variant",
           "values": [true]
         },
+        "inactive": {
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": {
           "type": "variant",
           "values": [true]
@@ -8471,21 +8926,32 @@
             "inputBackgroundColor": "{palette.color.gallery}"
           }
         },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderWidth": "{palette.border.border3}"
+          }
+        },
         {
           "if": {
             "disabled": true
           },
           "tokens": {
             "inputBackgroundColor": "{palette.color.gallery}",
+            "inputBorderWidth": "{palette.border.border1}",
             "textColor": "{palette.color.silver}"
           }
         },
         {
           "if": {
-            "focus": true
+            "inactive": true
           },
           "tokens": {
-            "inputBorderWidth": "{palette.border.border3}"
+            "inputBackgroundColor": "{palette.color.gallery}",
+            "inputBorderWidth": "{palette.border.border1}",
+            "textColor": "{palette.color.dove}"
           }
         }
       ],
@@ -8501,6 +8967,7 @@
         "paddingLeft": "{palette.size.size12}",
         "paddingRight": "{palette.size.size12}",
         "paddingTop": "{palette.size.size12}",
+        "showTopSpace": "{system.show.true}",
         "textColor": "{palette.color.black}"
       }
     },
@@ -8526,6 +8993,10 @@
           "type": "variant",
           "values": [true]
         },
+        "inactive": {
+          "type": "variant",
+          "values": [true]
+        },
         "increase": {
           "type": "variant",
           "values": [true]
@@ -8599,15 +9070,6 @@
             "borderTopWidth": "{palette.border.border3}"
           }
         },
-        {
-          "if": {
-            "disabled": true
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "iconColor": "{palette.color.silver}"
-          }
-        },
         {
           "if": {
             "alternative": true
@@ -8636,6 +9098,25 @@
             "borderBottomLeftRadius": "{palette.radius.radius24}",
             "borderTopLeftRadius": "{palette.radius.radius24}"
           }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderWidth": "{palette.border.border1}",
+            "iconColor": "{palette.color.silver}"
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "iconColor": "{palette.color.silver}"
+          }
         }
       ],
       "tokens": {
@@ -8716,7 +9197,8 @@
             "focus": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.black}"
+            "outerBorderColor": "{palette.color.black}",
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
@@ -8750,7 +9232,7 @@
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.white}",
         "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderWidth": "{palette.border.none}",
         "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size24}",
@@ -9679,7 +10161,7 @@
       "tokens": {
         "borderColor": "{palette.color.silver}",
         "borderStyle": "{system.borderStyle.solid}",
-        "borderWidth": "{palette.border.border1}"
+        "borderWidth": "{system.border.none}"
       }
     },
     "SideNavItem": {
@@ -9755,7 +10237,7 @@
             "backgroundColor": "{palette.color.transparent}",
             "fontName": "{palette.fontName.StagSans}",
             "fontWeight": "{palette.fontWeight.weight600}",
-            "lineHeight": "{palette.lineHeight.multiply150}",
+            "lineHeight": "{palette.lineHeight.ratio8to5}",
             "paddingBottom": "{palette.size.size13}",
             "paddingTop": "{palette.size.size13}"
           }
@@ -9812,6 +10294,8 @@
         "contentPaddingLeft": "{palette.size.size0}",
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
+        "expandDividerColor": "{palette.color.silver}",
+        "expandDividerWidth": "{palette.border.border1}",
         "expandDuration": "{palette.duration.duration300}",
         "icon": "{palette.icon.ChevronDown}",
         "iconColor": "{palette.color.black}",