@telus-uds/theme-koodo 3.29.0 → 3.31.0

package/theme.json

@@ -1054,8 +1054,27 @@
       }
     },
     "ButtonGroup": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "space": "{system.integer.2}"
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "space": "{system.integer.3}"
+          }
+        }
+      ],
       "tokens": {
         "alignItems": "{system.flexAlign.center}",
         "direction": "{system.direction.row}",
@@ -1063,7 +1082,7 @@
         "flexGrow": "{system.integer.0}",
         "flexShrink": "{system.integer.0}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
-        "space": "{system.integer.3}"
+        "space": "{system.integer.2}"
       }
     },
     "ButtonGroupItem": {
@@ -1081,8 +1100,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosque}",
-            "borderColor": "{palette.color.mosque}",
+            "backgroundColor": "{palette.color.mosqueDark}",
             "color": "{palette.color.white}"
           }
         },
@@ -1099,7 +1117,8 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}"
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "color": "{palette.color.white}"
           }
         },
         {
@@ -1107,49 +1126,38 @@
             "selected": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
-            "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
-          }
-        },
-        {
-          "if": {
-            "focus": true,
-            "pressed": true
-          },
-          "tokens": {
-            "outerBorderColor": "{palette.color.bilbao}"
+            "backgroundColor": "{palette.color.mosque}",
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "inactive": true
+            "hover": true,
+            "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dove}",
-            "borderWidth": "{system.border.zero}",
+            "backgroundColor": "{palette.color.mosqueDark}",
             "color": "{palette.color.white}"
           }
         },
         {
           "if": {
+            "pressed": true,
             "selected": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity8}",
-            "outerBorderColor": "{palette.color.mosque}",
-            "outerBorderGap": "{palette.size.size1}",
-            "outerBorderWidth": "{palette.border.border4}"
+            "backgroundColor": "{palette.color.mosqueDark}",
+            "color": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "selected": true
+            "inactive": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosqueDark}"
+            "backgroundColor": "{palette.color.silver}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.white}"
           }
         },
         {
@@ -1163,24 +1171,24 @@
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
-        "borderColor": "{palette.color.mosqueDark}",
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.mosque}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.none}",
-        "color": "{palette.color.white}",
+        "borderWidth": "{palette.border.border1}",
+        "color": "{palette.color.mosque}",
         "fontName": "{palette.fontName.StagSans}",
-        "fontSize": "{palette.fontSize.size14}",
+        "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight600}",
-        "height": "{palette.size.size36}",
+        "height": "{palette.size.size48}",
         "iconSize": "{palette.size.size20}",
-        "iconSpace": "{system.integer.3}",
-        "lineHeight": "{palette.lineHeight.multiply140}",
+        "iconSpace": "{system.integer.2}",
+        "lineHeight": "{palette.lineHeight.multiply150}",
         "minWidth": "{system.size.zero}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
-        "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderGap": "{palette.size.size3}",
+        "outerBorderWidth": "{palette.border.border1}",
         "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size24}",
         "paddingRight": "{palette.size.size24}",
@@ -2095,6 +2103,37 @@
         "titleFontSize": "{palette.fontSize.size16}"
       }
     },
+    "Fieldset": {
+      "appearances": {
+        "error": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "outlineColor": "{palette.color.amaranth}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "outlineColor": "{palette.color.transparent}",
+        "outlineOffset": "{system.size.none}",
+        "outlineWidth": "{system.border.zero}",
+        "paddingBottom": "{system.size.zero}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}"
+      }
+    },
     "Footnote": {
       "appearances": {},
       "rules": [],
@@ -4354,32 +4393,50 @@
             "hover": true
           },
           "tokens": {
+            "borderColor": "{palette.color.dove}",
             "outerBorderColor": "{palette.color.gallery}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
-          "description": "Pressed state matches hover state plus light grey background",
           "if": {
-            "pressed": true
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "outerBorderColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
           "if": {
-            "focus": true
+            "checked": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.dove}",
-            "outerBorderGap": "{palette.size.size4}",
-            "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "borderColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioInputBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "description": "Pressed state matches hover state plus light grey background",
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size0}",
+            "outerBorderWidth": "{palette.border.border1}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}"
           }
         },
         {
@@ -4390,8 +4447,13 @@
             "backgroundColor": "{palette.color.gallery}",
             "borderColor": "{system.color.transparent}",
             "color": "{palette.color.dove}",
-            "radioInputBackgroundColor": "{palette.color.gallery}",
-            "radioInputBorderColor": "{palette.color.silver}"
+            "radioCheckedBackgroundColor": "{palette.color.silver}",
+            "radioInputBackgroundColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.silver}",
+            "radioInputSize": "{palette.size.size16}",
+            "radioOuterBorderColor": "{palette.color.silver}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
@@ -4407,7 +4469,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.black}",
+        "borderColor": "{palette.color.silver}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
@@ -4422,22 +4484,22 @@
         "fontWeight": "{palette.fontWeight.weight700}",
         "letterSpacing": "{system.letterSpacing.none}",
         "lineHeight": "{palette.lineHeight.multiply140}",
-        "minWidth": "{palette.size.size120}",
+        "minWidth": "{palette.size.size288}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{system.border.zero}",
         "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size10}",
+        "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size12}",
         "radioCheckedBackgroundColor": "{palette.color.mosque}",
-        "radioCheckedSize": "{palette.size.size12}",
+        "radioCheckedSize": "{palette.size.size16}",
         "radioInputBackgroundColor": "{palette.color.white}",
         "radioInputBorderColor": "{palette.color.mosque}",
         "radioInputBorderWidth": "{palette.border.border2}",
         "radioInputOutlineColor": "{palette.color.transparent}",
         "radioInputOutlineWidth": "{palette.border.none}",
-        "radioInputSize": "{palette.size.size20}",
+        "radioInputSize": "{palette.size.size24}",
         "radioOuterBorderColor": "{system.color.transparent}",
         "radioOuterBorderGap": "{system.size.zero}",
         "radioOuterBorderWidth": "{system.border.zero}",
@@ -4448,29 +4510,43 @@
     },
     "RadioCardGroup": {
       "appearances": {
+        "fullWidth": {
+          "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
+          "type": "variant",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
           "if": {
-            "viewport": ["lg", "xl"]
+            "fullWidth": null,
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
-            "direction": "{system.direction.column}"
+            "direction": "{system.direction.row}",
+            "space": "{system.integer.5}"
           }
         }
       ],
       "tokens": {
-        "direction": "{system.direction.row}",
-        "fieldSpace": "{system.integer.2}",
-        "space": "{system.integer.2}"
+        "direction": "{system.direction.column}",
+        "fieldSpace": "{system.integer.3}",
+        "space": "{system.integer.3}"
       }
     },
     "RadioGroup": {
       "appearances": {},
       "rules": [],
       "tokens": {
+        "borderBottomLeftRadius": "{palette.radius.radius1}",
+        "borderBottomRightRadius": "{palette.radius.radius1}",
+        "borderTopLeftRadius": "{palette.radius.radius1}",
+        "borderTopRightRadius": "{palette.radius.radius1}",
         "fieldSpace": "{system.integer.2}",
+        "outlineOffset": "{palette.size.size8}",
+        "outlineWidth": "{palette.border.border1}",
+        "showIcon": "{system.show.true}",
         "space": "{system.integer.2}"
       }
     },
@@ -5563,6 +5639,11 @@
         "focus": "{appearances.TextInput.focus}",
         "hover": "{appearances.TextInput.hover}",
         "inactive": "{appearances.TextInput.inactive}",
+        "numeric": {
+          "description": "capability to only allow numbers",
+          "type": "variant",
+          "values": [true]
+        },
         "password": {
           "description": "capability that helps masking and unmasking text",
           "type": "variant",
@@ -5731,7 +5812,8 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.mosqueDark}"
+            "backgroundColor": "{palette.color.silverDark}",
+            "switchColor": "{palette.color.mortarDark}"
           }
         },
         {
@@ -5739,7 +5821,8 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.onahau}"
+            "backgroundColor": "{palette.color.silverDark}",
+            "switchColor": "{palette.color.mortarDark}"
           }
         },
         {
@@ -5747,7 +5830,11 @@
             "focus": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.mosque}"
+            "backgroundColor": "{palette.color.silverDark}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderGap": "{palette.size.size3}",
+            "outerBorderWidth": "{palette.border.border1}",
+            "switchColor": "{palette.color.mortarDark}"
           }
         },
         {
@@ -5755,7 +5842,11 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.blue}"
+            "backgroundColor": "{palette.color.icicle}",
+            "icon": "{palette.icon.Check}",
+            "iconColor": "{palette.color.white}",
+            "switchBorderColor": "{palette.color.transparent}",
+            "switchColor": "{palette.color.mosque}"
           }
         },
         {
@@ -5764,7 +5855,7 @@
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.darkBlue}"
+            "backgroundColor": "{palette.color.icicleDark}"
           }
         },
         {
@@ -5782,7 +5873,19 @@
             "selected": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.blue}"
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderGap": "{palette.size.size3}",
+            "outerBorderWidth": "{palette.border.border1}"
           }
         },
         {
@@ -5792,7 +5895,7 @@
             "selected": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.onahau}"
+            "outerBorderColor": "{palette.color.chathamsBlue}"
           }
         },
         {
@@ -5800,50 +5903,65 @@
             "inactive": true
           },
           "tokens": {
-            "opacity": "{palette.opacity.opacity5}"
+            "backgroundColor": "{palette.color.gallery}",
+            "iconColor": "{palette.color.silver}",
+            "opacity": "{palette.opacity.opacity5}",
+            "switchBorderColor": "{palette.color.transparent}",
+            "switchColor": "{palette.color.white}"
           }
         }
       ],
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
-        "backgroundColor": "{palette.color.mosque}",
+        "backgroundColor": "{palette.color.silver}",
         "borderColor": "{palette.color.transparent}",
-        "borderRadius": "{palette.radius.radius4}",
+        "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.none}",
         "icon": "{system.icon.none}",
-        "iconColor": "{palette.color.transparent}",
-        "iconSize": "{palette.size.size16}",
+        "iconColor": "{system.color.none}",
+        "iconSize": "{palette.size.size12}",
         "labelColor": "{palette.color.black}",
         "labelFontName": "{palette.fontName.StagSans}",
         "labelFontSize": "{palette.fontSize.size16}",
-        "labelFontWeight": "{palette.fontWeight.weight400}",
+        "labelFontWeight": "{palette.fontWeight.weight600}",
         "labelLineHeight": "{palette.lineHeight.multiply150}",
         "labelMarginLeft": "{palette.size.size8}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
-        "outerBorderGap": "{palette.size.size2}",
-        "outerBorderWidth": "{palette.border.border2}",
-        "paddingBottom": "{palette.size.size4}",
-        "paddingLeft": "{palette.size.size8}",
-        "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size4}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderWidth": "{palette.border.none}",
+        "paddingBottom": "{system.size.zero}",
+        "paddingLeft": "{system.size.zero}",
+        "paddingRight": "{system.size.zero}",
+        "paddingTop": "{system.size.zero}",
         "shadow": "{system.shadow.none}",
         "switchBorderColor": "{palette.color.transparent}",
         "switchBorderRadius": "{palette.radius.pill32}",
         "switchBorderWidth": "{palette.border.none}",
-        "switchColor": "{palette.color.white}",
-        "switchShadow": "{system.shadow.none}",
-        "switchSize": "{palette.size.size24}",
+        "switchColor": "{palette.color.mortar}",
+        "switchShadow": "{palette.shadow.surfaceRaised}",
+        "switchSize": "{palette.size.size18}",
         "trackBorderColor": "{palette.color.transparent}",
-        "trackBorderRadius": "{palette.radius.none}",
-        "trackBorderWidth": "{palette.border.none}",
-        "width": "{palette.size.size64}"
+        "trackBorderRadius": "{palette.radius.radius12}",
+        "trackBorderWidth": "{palette.border.border3}",
+        "width": "{palette.size.size40}"
       }
     },
     "ToggleSwitchGroup": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": "{system.integer.3}"
+          }
+        }
+      ],
       "tokens": {
         "alignItems": "{system.flexAlign.flexStart}",
         "direction": "{system.direction.column}",