@telus-uds/theme-allium 3.31.0 → 4.0.0

package/theme.json

@@ -162,7 +162,8 @@
             "background": "lightest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
           }
         },
         {
@@ -170,7 +171,8 @@
             "background": "lighter"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
           }
         },
         {
@@ -178,7 +180,8 @@
             "background": "light"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}"
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.greyAthens}"
           }
         },
         {
@@ -186,7 +189,8 @@
             "background": "dark"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyCharcoal}"
+            "backgroundColor": "{palette.color.greyCharcoal}",
+            "borderColor": "{palette.color.greyCharcoal}"
           }
         },
         {
@@ -194,7 +198,8 @@
             "background": "darker"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyThunder}"
+            "backgroundColor": "{palette.color.greyThunder}",
+            "borderColor": "{palette.color.greyThunder}"
           }
         },
         {
@@ -202,7 +207,8 @@
             "background": "darkest"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}"
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}"
           }
         },
         {
@@ -210,7 +216,8 @@
             "background": "critical"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.redDark}"
+            "backgroundColor": "{palette.color.redDark}",
+            "borderColor": "{palette.color.redDark}"
           }
         },
         {
@@ -218,7 +225,8 @@
             "background": "danger"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.redLight}"
+            "backgroundColor": "{palette.color.redLight}",
+            "borderColor": "{palette.color.redLight}"
           }
         },
         {
@@ -226,7 +234,8 @@
             "background": "warning"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.amberLight}"
+            "backgroundColor": "{palette.color.amberLight}",
+            "borderColor": "{palette.color.amberLight}"
           }
         },
         {
@@ -234,7 +243,8 @@
             "background": "positive"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greenPanache}"
+            "backgroundColor": "{palette.color.greenPanache}",
+            "borderColor": "{palette.color.greenPanache}"
           }
         },
         {
@@ -242,7 +252,8 @@
             "background": "brand"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleTelus}"
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderColor": "{palette.color.purpleTelus}"
           }
         },
         {
@@ -250,7 +261,8 @@
             "background": "white"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.white}"
+            "backgroundColor": "{palette.color.white}",
+            "borderColor": "{palette.color.white}"
           }
         },
         {
@@ -258,7 +270,8 @@
             "background": "black"
           },
           "tokens": {
-            "backgroundColor": "{palette.color.black}"
+            "backgroundColor": "{palette.color.black}",
+            "borderColor": "{palette.color.black}"
           }
         },
         {
@@ -267,6 +280,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.brand}"
           }
         },
@@ -276,6 +290,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.green}"
           }
         },
@@ -285,6 +300,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.neutral}"
           }
         },
@@ -294,6 +310,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.purple}"
           }
         },
@@ -303,6 +320,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.purple}"
           }
         },
@@ -312,6 +330,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.green}"
           }
         },
@@ -321,6 +340,7 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.neutral}"
           }
         },
@@ -330,12 +350,19 @@
           },
           "tokens": {
             "backgroundColor": "{system.color.none}",
+            "borderColor": "{system.color.none}",
             "gradient": "{palette.gradient.brand}"
           }
         }
       ],
       "tokens": {
         "backgroundColor": "{system.color.none}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderColor": "{system.color.none}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderWidth": "{palette.border.none}",
         "gradient": "{system.gradient.none}"
       }
     },
@@ -851,15 +878,50 @@
         },
         {
           "if": {
-            "pressed": true
+            "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyShuttle}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{palette.border.none}",
-            "color": "{palette.color.white}",
-            "iconBackground": "{palette.color.greyCharcoal}",
-            "iconColor": "{palette.color.white}"
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "iconBackground": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "iconBackground": "{palette.color.purpleEminence}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDark}",
+            "iconBackground": "{palette.color.purpleEminence}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "iconBackground": "{palette.color.purpleDeluge}",
+            "outerBorderColor": "{palette.color.purpleTelus}"
           }
         },
         {
@@ -875,10 +937,17 @@
         },
         {
           "if": {
-            "hover": true
+            "pressed": true
           },
           "tokens": {
-            "borderWidth": "{palette.border.border3}"
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "borderColor": "{palette.color.transparent}",
+            "borderWidth": "{palette.border.none}",
+            "color": "{palette.color.white}",
+            "iconBackground": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.transparent}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         },
         {
@@ -930,7 +999,9 @@
           },
           "tokens": {
             "iconBackground": "{palette.color.purpleDeluge}",
-            "outerBorderColor": "{palette.color.purpleDark}"
+            "outerBorderColor": "{palette.color.purpleDark}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
@@ -938,9 +1009,11 @@
             "inactive": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyCloud}",
+            "backgroundColor": "{palette.color.white}",
             "borderWidth": "{system.border.zero}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.greyCloud}",
+            "iconBackground": "{palette.color.greyAthens}",
+            "iconColor": "{palette.color.greyCloud}"
           }
         }
       ],
@@ -963,7 +1036,7 @@
         "iconPadding": "{palette.size.size2}",
         "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.2}",
+        "iconSpace": "{system.integer.1}",
         "iconTranslateX": "{palette.size.size0}",
         "iconTranslateY": "{palette.size.size0}",
         "lineHeight": "{palette.lineHeight.ratio10to7}",
@@ -1702,8 +1775,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size20}",
-            "iconSize": "{palette.size.size24}",
-            "textLineHeight": "{palette.lineHeight.ratio10to5}"
+            "iconSize": "{palette.size.size24}"
           }
         },
         {
@@ -1712,8 +1784,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size14}",
-            "iconSize": "{palette.size.size14}",
-            "textLineHeight": "{palette.lineHeight.ratio15to7}"
+            "iconSize": "{palette.size.size14}"
           }
         },
         {
@@ -1722,8 +1793,7 @@
           },
           "tokens": {
             "fontSize": "{palette.fontSize.size12}",
-            "iconSize": "{palette.size.size12}",
-            "textLineHeight": "{palette.lineHeight.ratio2to1}"
+            "iconSize": "{palette.size.size12}"
           }
         }
       ],
@@ -1736,8 +1806,7 @@
         "leftIcon": "{palette.icon.ArrowLeft}",
         "outerBorderColor": "{palette.color.transparent}",
         "rightIcon": "{palette.icon.ArrowRight}",
-        "textLine": "{system.textLine.none}",
-        "textLineHeight": "{palette.lineHeight.ratio9to4}"
+        "textLine": "{system.textLine.none}"
       }
     },
     "Countdown": {
@@ -2030,8 +2099,56 @@
         }
       ],
       "tokens": {
+        "backgroundColor": "{palette.color.transparent}",
+        "borderColor": "{palette.color.transparent}",
+        "borderWidth": "{system.border.zero}",
         "icon": "{palette.icon.CaretDown}",
-        "size": "{palette.size.size4}"
+        "iconColor": "{palette.color.greenAccessible}",
+        "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}",
+        "size": "{palette.size.size4}",
+        "verticalAlign": "{system.verticalAlign.top}"
+      }
+    },
+    "ExpandCollapseMiniPanel": {
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "contentPaddingBottom": "{palette.size.size16}",
+            "contentPaddingRight": "{palette.size.size0}",
+            "contentPaddingTop": "{palette.size.size8}"
+          }
+        }
+      ],
+      "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": {
@@ -2064,8 +2181,8 @@
         "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
         "expandDividerColor": "{palette.color.transparent}",
+        "expandDividerWidth": "{palette.size.size0}",
         "expandDuration": "{palette.duration.duration300}",
-        "expanddDividerWidth": "{palette.size.size0}",
         "marginBottom": "{palette.size.size0}"
       }
     },
@@ -2949,7 +3066,7 @@
           },
           "tokens": {
             "blockFontSize": "{palette.fontSize.size20}",
-            "blockLineHeight": "{palette.lineHeight.ratio8to5}",
+            "blockLineHeight": "{palette.lineHeight.ratio5to4}",
             "iconSize": "{palette.size.size24}"
           }
         },
@@ -2959,7 +3076,7 @@
           },
           "tokens": {
             "blockFontSize": "{palette.fontSize.size14}",
-            "blockLineHeight": "{palette.lineHeight.ratio10to7}",
+            "blockLineHeight": "{palette.lineHeight.ratio1to1}",
             "iconSize": "{palette.size.size20}"
           }
         },
@@ -2971,7 +3088,7 @@
             "blockFontName": "{palette.fontName.HelveticaNow}",
             "blockFontSize": "{palette.fontSize.size12}",
             "blockFontWeight": "{palette.fontWeight.weight500}",
-            "blockLineHeight": "{palette.lineHeight.ratio4to3}",
+            "blockLineHeight": "{palette.lineHeight.ratio9to8}",
             "iconSize": "{palette.size.size16}"
           }
         },
@@ -4610,17 +4727,6 @@
             "radioOuterBorderWidth": "{palette.border.border2}"
           }
         },
-        {
-          "description": "Pressed state matches hover state plus light grey background",
-          "if": {
-            "pressed": true
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "outerBorderColor": "{palette.color.greyMystic}"
-          }
-        },
         {
           "if": {
             "focus": true
@@ -4633,15 +4739,19 @@
           }
         },
         {
+          "description": "Pressed state matches hover state plus light grey background",
           "if": {
-            "inactive": true
+            "pressed": true
           },
           "tokens": {
             "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{system.color.transparent}",
-            "color": "{palette.color.greyShuttle}",
-            "radioInputBackgroundColor": "{palette.color.greyMystic}",
-            "radioInputBorderColor": "{palette.color.transparent}"
+            "borderColor": "{palette.color.greyShuttle}",
+            "outerBorderColor": "{palette.color.greyMystic}",
+            "outerBorderGap": "{palette.size.size0}",
+            "radioInputBorderColor": "{palette.color.greyShuttle}",
+            "radioInputBorderWidth": "{palette.border.border1}",
+            "radioOuterBorderColor": "{palette.color.greyMystic}",
+            "radioOuterBorderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -4655,7 +4765,7 @@
         {
           "if": {
             "checked": true,
-            "pressed": true
+            "hover": true
           },
           "tokens": {
             "borderColor": "{palette.color.purpleTelus}"
@@ -4663,21 +4773,29 @@
         },
         {
           "if": {
-            "checked": true,
-            "hover": true
+            "error": true
           },
           "tokens": {
-            "borderColor": "{palette.color.purpleTelus}"
+            "borderColor": "{palette.color.red}",
+            "color": "{palette.color.red}",
+            "radioInputBorderColor": "{palette.color.red}"
           }
         },
         {
           "if": {
-            "error": true
+            "inactive": true
           },
           "tokens": {
-            "borderColor": "{palette.color.red}",
-            "color": "{palette.color.red}",
-            "radioInputBorderColor": "{palette.color.red}"
+            "backgroundColor": "{palette.color.greyAthens}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.greyShuttle}",
+            "radioCheckedBackgroundColor": "{palette.color.greyShuttle}",
+            "radioInputBackgroundColor": "{palette.color.greyCloud}",
+            "radioInputBorderColor": "{system.color.transparent}",
+            "radioInputSize": "{palette.size.size12}",
+            "radioOuterBorderColor": "{palette.color.greyCloud}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         }
       ],
@@ -4735,11 +4853,11 @@
         {
           "if": {
             "fullWidth": null,
-            "viewport": ["lg", "xl"]
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
             "direction": "{system.direction.row}",
-            "space": "{system.integer.4}"
+            "space": "{system.integer.5}"
           }
         }
       ],
@@ -4842,8 +4960,7 @@
             "inactive": null
           },
           "tokens": {
-            "outerBackgroundColor": "{palette.color.greyMystic}",
-            "outerBorderColor": "{palette.color.greyMystic}"
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
@@ -4852,7 +4969,8 @@
           },
           "tokens": {
             "borderColor": "{palette.color.purpleDeluge}",
-            "borderWidth": "{palette.border.border3}"
+            "borderWidth": "{palette.border.border3}",
+            "outerBorderWidth": "{palette.border.none}"
           }
         },
         {
@@ -4861,7 +4979,9 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{palette.color.greyAthens}"
+            "borderColor": "{palette.color.greyAthens}",
+            "color": "{palette.color.greyShuttle}",
+            "placeholderColor": "{palette.color.greyShuttle}"
           }
         }
       ],
@@ -4870,19 +4990,19 @@
         "borderColor": "{palette.color.greyShuttle}",
         "borderRadius": "{palette.radius.pill32}",
         "borderWidth": "{palette.border.border1}",
-        "buttonsGap": "{palette.size.size1}",
+        "buttonsGap": "{palette.size.size2}",
         "clearButtonIcon": "{palette.icon.Times}",
         "color": "{palette.color.greyCharcoal}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
-        "outerBackgroundColor": "{palette.color.transparent}",
-        "outerBorderColor": "{palette.color.transparent}",
+        "outerBackgroundColor": "{palette.color.greyMystic}",
+        "outerBorderColor": "{palette.color.greyMystic}",
         "outerBorderRadius": "{palette.radius.pill32}",
-        "outerBorderWidth": "{palette.border.border2}",
+        "outerBorderWidth": "{palette.border.none}",
         "paddingBottom": "{palette.size.size12}",
-        "paddingLeft": "{palette.size.size24}",
+        "paddingLeft": "{palette.size.size16}",
         "paddingRight": "{palette.size.size8}",
         "paddingTop": "{palette.size.size12}",
         "placeholderColor": "{palette.color.greyCharcoal}",
@@ -4944,13 +5064,24 @@
         },
         {
           "if": {
-            "inactive": true
+            "inactive": true,
+            "priority": "high"
           },
           "tokens": {
             "backgroundColor": "{palette.color.greyMystic}",
             "borderWidth": "{palette.border.none}",
             "iconColor": "{palette.color.greyShuttle}"
           }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "priority": null
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.transparent}"
+          }
         }
       ],
       "tokens": {
@@ -6356,7 +6487,22 @@
         "colour": {
           "description": "Each typography variant has a default color, and at least a secondary color variant. In exceptional cases where a different colour is needed,\n  use the tokens prop.",
           "type": "variant",
-          "values": ["secondary", "tertiary"]
+          "values": [
+            "default",
+            "brand",
+            "dark",
+            "light",
+            "positive",
+            "warning",
+            "danger",
+            "black",
+            "white",
+            "brand2",
+            "brand3",
+            "alternative1",
+            "alternative2",
+            "alternative3"
+          ]
         },
         "compact": {
           "description": "Reduces line height on some body text styles. For data-rich content, not for flow content",
@@ -6394,14 +6540,6 @@
         }
       },
       "rules": [
-        {
-          "if": {
-            "colour": "secondary"
-          },
-          "tokens": {
-            "color": "{palette.color.greyCharcoal}"
-          }
-        },
         {
           "if": {
             "size": ["display1", "display2", "h1", "h2", "h3"]
@@ -6412,7 +6550,7 @@
         },
         {
           "if": {
-            "colour": "secondary",
+            "colour": "dark",
             "size": ["display1", "display2", "h1", "h2", "h3"]
           },
           "tokens": {
@@ -6421,7 +6559,7 @@
         },
         {
           "if": {
-            "colour": "tertiary",
+            "colour": "light",
             "size": "h6"
           },
           "tokens": {
@@ -6438,7 +6576,7 @@
         },
         {
           "if": {
-            "colour": "secondary",
+            "colour": "dark",
             "size": "eyebrow"
           },
           "tokens": {
@@ -6790,6 +6928,118 @@
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontWeight": "{palette.fontWeight.weight700}"
           }
+        },
+        {
+          "if": {
+            "colour": "default"
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "colour": "dark"
+          },
+          "tokens": {
+            "color": "{palette.color.greyThunder}"
+          }
+        },
+        {
+          "if": {
+            "colour": "light"
+          },
+          "tokens": {
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "colour": "positive"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "colour": "warning"
+          },
+          "tokens": {
+            "color": "{palette.color.amberDark}"
+          }
+        },
+        {
+          "if": {
+            "colour": "danger"
+          },
+          "tokens": {
+            "color": "{palette.color.redDark}"
+          }
+        },
+        {
+          "if": {
+            "colour": "black"
+          },
+          "tokens": {
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "colour": "white"
+          },
+          "tokens": {
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand2"
+          },
+          "tokens": {
+            "color": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "colour": "brand3"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleDeluge}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative1"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative2"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
+        },
+        {
+          "if": {
+            "colour": "alternative3"
+          },
+          "tokens": {
+            "color": "{palette.color.purpleTelus}"
+          }
         }
       ],
       "tokens": {