@telus-uds/theme-allium 4.2.0 → 4.4.0

package/theme.json

@@ -82,6 +82,17 @@
             "color": "{palette.color.white}"
           }
         },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.greyShuttle}"
+          }
+        },
         {
           "if": {
             "outline": true,
@@ -877,76 +888,45 @@
         },
         {
           "if": {
-            "hover": true
-          },
-          "tokens": {
-            "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
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleDark}",
-            "iconBackground": "{palette.color.purpleEminence}"
+            "borderColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
           }
         },
         {
           "if": {
-            "focus": true,
-            "selected": true
+            "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleTelus}",
-            "iconBackground": "{palette.color.purpleDeluge}",
-            "outerBorderColor": "{palette.color.purpleTelus}"
+            "backgroundColor": "{palette.color.greyShuttle}",
+            "color": "{palette.color.white}",
+            "iconBackground": "{palette.color.greyCharcoal}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
           "if": {
-            "focus": true
+            "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.greyShuttle}",
-            "outerBorderColor": "{palette.color.greyShuttle}",
-            "outerBorderGap": "{palette.size.size2}",
-            "outerBorderWidth": "{palette.border.border2}"
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
           "if": {
-            "pressed": true
+            "inactive": true
           },
           "tokens": {
-            "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}"
+            "backgroundColor": "{palette.color.white}",
+            "borderWidth": "{system.border.zero}",
+            "color": "{palette.color.greyCloud}",
+            "iconBackground": "{palette.color.greyAthens}",
+            "iconColor": "{palette.color.greyCloud}"
           }
         },
         {
@@ -968,26 +948,26 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.purpleDeluge}",
-            "iconBackground": "{palette.color.purpleTelus}"
+            "iconBackground": "{palette.color.purpleEminence}"
           }
         },
         {
           "if": {
-            "pressed": true,
+            "focus": true,
             "selected": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleDark}",
-            "iconBackground": "{palette.color.purpleDeluge}"
+            "outerBorderColor": "{palette.color.purpleTelus}"
           }
         },
         {
           "if": {
-            "focus": true,
+            "pressed": true,
             "selected": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.purpleTelus}"
+            "backgroundColor": "{palette.color.purpleDark}",
+            "iconBackground": "{palette.color.purpleEminence}"
           }
         },
         {
@@ -997,23 +977,9 @@
             "selected": true
           },
           "tokens": {
-            "iconBackground": "{palette.color.purpleDeluge}",
-            "outerBorderColor": "{palette.color.purpleDark}",
             "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border2}"
           }
-        },
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": "{palette.color.white}",
-            "borderWidth": "{system.border.zero}",
-            "color": "{palette.color.greyCloud}",
-            "iconBackground": "{palette.color.greyAthens}",
-            "iconColor": "{palette.color.greyCloud}"
-          }
         }
       ],
       "tokens": {
@@ -1031,7 +997,7 @@
         "iconAlignSelf": "{system.flexAlign.center}",
         "iconBackground": "{palette.color.greyAthens}",
         "iconBorderRadius": "{palette.radius.pill32}",
-        "iconColor": "{palette.color.greyThunder}",
+        "iconColor": "{palette.color.greyCharcoal}",
         "iconPadding": "{palette.size.size2}",
         "iconPosition": "{system.position.right}",
         "iconSize": "{palette.size.size16}",
@@ -1843,56 +1809,68 @@
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
+            "large": true
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size28}"
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HelveticaNow}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
           }
         },
         {
           "if": {
-            "feature": true,
+            "feature": true
+          },
+          "tokens": {
+            "labelBorderColor": "{palette.color.purpleTelus}",
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HelveticaNow}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "large": true,
             "viewport": ["xs"]
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size28}"
+            "textFontSize": "{palette.fontSize.size40}"
           }
         },
         {
           "if": {
-            "feature": true
+            "feature": true,
+            "viewport": ["xs"]
           },
           "tokens": {
-            "labelBorderColor": "{palette.color.purpleTelus}",
-            "textFontSize": "{palette.fontSize.size64}",
-            "textLineHeight": "{palette.lineHeight.ratio9to8}",
-            "textTimerFontName": "{palette.fontName.HelveticaNow}",
-            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+            "textFontSize": "{palette.fontSize.size40}"
           }
         },
         {
           "if": {
-            "large": true
+            "inverse": true
           },
           "tokens": {
-            "textFontSize": "{palette.fontSize.size64}",
-            "textLineHeight": "{palette.lineHeight.ratio9to8}",
-            "textTimerFontName": "{palette.fontName.HelveticaNow}",
-            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+            "labelBorderColor": "{palette.color.white}"
           }
         },
         {
           "if": {
+            "feature": true,
             "inverse": true
           },
           "tokens": {
+            "containerBorderColor": "{palette.color.greyShuttle}",
             "labelBorderColor": "{palette.color.white}"
           }
         }
       ],
       "tokens": {
+        "containerBorderColor": "{palette.color.transparent}",
         "containerBorderRadius": "{palette.radius.radius6}",
+        "containerBorderWidth": "{palette.border.border2}",
         "containerGradient": "{palette.gradient.purple}",
         "containerInverseBorder": "{palette.border.border2}",
         "containerInverseBorderColor": "{palette.color.white}",
@@ -1900,7 +1878,9 @@
         "containerPaddingLeftRight": "{palette.size.size64}",
         "inverseBorderColor": "{palette.color.greyShuttle}",
         "labelBorderColor": "{palette.color.greyCharcoal}",
+        "labelFontName": "{palette.fontName.HelveticaNow}",
         "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.ratio3to2}",
         "textFontSize": "{palette.fontSize.size16}",
         "textLineHeight": "{palette.lineHeight.ratio3to2}",
@@ -1937,12 +1917,6 @@
         "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
         "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
         "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
-        "dateInputBorderColor": "{palette.color.transparent}",
-        "dateInputBorderRadius": "{palette.radius.radius6}",
-        "dateInputFocusBorderColor": "{palette.color.purpleDeluge}",
-        "dateInputHoverBorderColor": "{palette.color.greyMystic}",
-        "dateInputInsideBorderColor": "{palette.color.greyShuttle}",
-        "dateInputInsideColor": "{palette.color.greyShuttle}",
         "dateInputStrokeColor": "{palette.color.greyShuttle}",
         "dayPickerNavigationButtonPadding": "{palette.size.size8}",
         "dayPickerWeekHeaderColor": "{palette.color.greyCharcoal}",
@@ -2287,8 +2261,9 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "closeButtonBackgroundColor": "{palette.color.greyAthens}",
         "closeButtonBorderColor": "{palette.color.greyShuttle}",
-        "closeButtonBorderSize": "{palette.border.none}",
+        "closeButtonBorderSize": "{palette.border.border1}",
         "closeButtonHeight": "{palette.size.size24}",
         "closeButtonIconSize": "{palette.size.size16}",
         "closeButtonMarginBottom": "{palette.size.size12}",
@@ -2299,7 +2274,7 @@
         "closeIcon": "{palette.icon.Close}",
         "footnoteBackground": "{palette.color.greyAthens}",
         "footnoteBodyBackground": "{palette.color.greyAthens}",
-        "footnoteBodyPaddingBottom": "{palette.size.size40}",
+        "footnoteBodyPaddingBottom": "{palette.size.size32}",
         "footnoteBodyPaddingLeft": "{palette.size.size16}",
         "footnoteBodyPaddingRight": "{palette.size.size16}",
         "footnoteBodyPaddingTop": "{palette.size.size0}",
@@ -2311,12 +2286,12 @@
         "footnoteHeaderPaddingTop": "{palette.size.size16}",
         "headerFontName": "{palette.fontName.HelveticaNow}",
         "headerFontSize": "{palette.size.size16}",
-        "headerFontWeight": "{palette.fontWeight.weight700}",
-        "headerLineHeight": "{palette.size.size20}",
+        "headerFontWeight": "{palette.fontWeight.weight500}",
+        "headerLineHeight": "{palette.lineHeight.ratio3to2}",
         "headerMargin": "{palette.size.size16}",
         "listItemColor": "{palette.color.greyCharcoal}",
-        "listItemFontSize": "{palette.size.size14}",
-        "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listItemFontSize": "{palette.size.size16}",
+        "listItemLineHeight": "{palette.lineHeight.ratio3to2}",
         "listItemMarkerFontSize": "{palette.size.size16}",
         "listItemMarkerLineHeight": "{palette.lineHeight.ratio3to2}",
         "listItemPaddingLeft": "{palette.size.size8}",
@@ -3540,6 +3515,59 @@
         "subHeadingMarginTop": "{palette.size.size8}"
       }
     },
+    "MultiSelectFilter": {
+      "appearances": {
+        "maxHeight": "{appearances.MultiSelectFilter.maxHeight}",
+        "maxWidth": "{appearances.MultiSelectFilter.maxWidth}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "buttonDirection": "{system.direction.column}",
+            "minHeight": "{system.size.full}",
+            "minWidth": "{system.size.full}"
+          }
+        },
+        {
+          "if": {
+            "maxHeight": true,
+            "viewport": ["sm", "md", "lg", "xl"]
+          },
+          "tokens": {
+            "maxHeightSize": "{palette.size.size480}"
+          }
+        },
+        {
+          "if": {
+            "maxWidth": true,
+            "viewport": ["sm", "md", "lg", "xl"]
+          },
+          "tokens": {
+            "maxWidthSize": "{palette.size.size544}"
+          }
+        }
+      ],
+      "tokens": {
+        "buttonDirection": "{system.direction.row}",
+        "headerFontColor": "{palette.color.greyCharcoal}",
+        "headerFontName": "{palette.fontName.HelveticaNow}",
+        "headerFontSize": "{palette.fontSize.size16}",
+        "headerFontWeight": "{palette.fontWeight.weight500}",
+        "headerLineHeight": "{palette.lineHeight.ratio3to2}",
+        "maxHeightSize": "{system.size.zero}",
+        "maxWidthSize": "{system.size.zero}",
+        "minHeight": "{palette.size.size412}",
+        "minWidth": "{palette.size.size320}",
+        "subHeaderFontName": "{palette.fontName.HelveticaNow}",
+        "subHeaderFontSize": "{palette.fontSize.size14}",
+        "subHeaderFontWeight": "{palette.fontWeight.weight400}",
+        "subHeaderLineHeight": "{palette.lineHeight.ratio7to5}"
+      }
+    },
     "NavigationBar": {
       "appearances": {
         "expanded": "{appearances.NavigationBar.expanded}",
@@ -4086,7 +4114,7 @@
         "borderRadius": "{palette.radius.radius6}",
         "borderWidth": "{palette.border.border1}",
         "flex": "{system.integer.1}",
-        "outerBorderColor": "{palette.color.black}",
+        "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size0}",
         "outerBorderWidth": "{palette.size.size0}",
         "paddingBottom": "{palette.size.size0}",
@@ -4472,17 +4500,19 @@
     },
     "QuickLinksFeatureItem": {
       "appearances": {
-        "focus": "{appearances.Link.focus}",
-        "hover": "{appearances.Link.hover}",
+        "focus": "{appearances.QuickLinksFeatureItem.focus}",
+        "hover": "{appearances.QuickLinksFeatureItem.hover}",
+        "pressed": "{appearances.QuickLinksFeatureItem.pressed}",
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
           "if": {
-            "hover": true
+            "viewport": "xl"
           },
           "tokens": {
-            "color": "{palette.color.greenSanFelix}"
+            "contentMaxDimension": "{palette.size.size184}",
+            "imageDimension": "{palette.size.size168}"
           }
         },
         {
@@ -4490,40 +4520,45 @@
             "focus": true
           },
           "tokens": {
-            "color": "{palette.color.greenSanFelix}"
+            "outerBorderColor": "{palette.color.greenAccessible}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "viewport": "xl"
+            "hover": true
           },
           "tokens": {
-            "contentMaxDimension": "{palette.size.size184}",
-            "imageDimension": "{palette.size.size168}"
+            "color": "{palette.color.greenAccessible}",
+            "imageDimension": "{palette.size.size140}",
+            "textLine": "{system.textLine.underline}"
           }
         },
         {
           "if": {
-            "hover": true
+            "hover": true,
+            "viewport": "xl"
           },
           "tokens": {
-            "imageDimension": "{palette.size.size140}"
+            "imageDimension": "{palette.size.size184}"
           }
         },
         {
           "if": {
-            "hover": true,
-            "viewport": "xl"
+            "pressed": true
           },
           "tokens": {
-            "imageDimension": "{palette.size.size184}"
+            "color": "{palette.color.greenSanFelix}",
+            "textLine": "{system.textLine.none}"
           }
         },
         {
           "if": {
-            "focus": true
+            "focus": true,
+            "pressed": true
           },
           "tokens": {
+            "color": "{palette.color.greenSanFelix}",
             "outerBorderColor": "{palette.color.greenSanFelix}"
           }
         }
@@ -4532,8 +4567,12 @@
         "color": "{palette.color.greyThunder}",
         "contentAlignItems": "{system.flexAlign.center}",
         "contentDirection": "{system.direction.column}",
-        "contentMaxDimension": "{palette.size.size140}",
+        "contentMaxDimension": "{palette.size.size168}",
         "contentSpace": "{system.integer.3}",
+        "fontName": "{palette.fontName.HelveticaNow}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight700}",
+        "gap": "{palette.size.size32}",
         "imageDimension": "{palette.size.size128}",
         "outerBorderColor": "{palette.color.transparent}",
         "textAlign": "{system.textAlign.center}",
@@ -5485,9 +5524,9 @@
             "connectorCompletedColor": "{palette.color.white}",
             "knobBackgroundColor": "{palette.color.transparent}",
             "knobBorderColor": "{palette.color.white}",
-            "knobCompletedBackgroundColor": "{palette.color.white}",
+            "knobCompletedBackgroundColor": "{palette.color.transparent}",
             "knobCompletedBorderColor": "{palette.color.white}",
-            "knobCurrentBackgroundColor": "{palette.color.transparent}",
+            "knobCurrentBackgroundColor": "{palette.color.white}",
             "knobCurrentBorderColor": "{palette.color.white}",
             "knobCurrentInnerColor": "{palette.color.white}",
             "labelColor": "{palette.color.white}",
@@ -5511,17 +5550,17 @@
         "knobBackgroundColor": "{palette.color.transparent}",
         "knobBorderColor": "{palette.color.greyShuttle}",
         "knobBorderWidth": "{palette.border.border1}",
-        "knobCompletedBackgroundColor": "{palette.color.purpleDeluge}",
+        "knobCompletedBackgroundColor": "{palette.color.transparent}",
         "knobCompletedBorderColor": "{palette.color.purpleDeluge}",
-        "knobCompletedPaddingLeft": "{system.size.none}",
-        "knobCompletedPaddingTop": "{system.size.none}",
-        "knobCurrentBackgroundColor": "{palette.color.transparent}",
+        "knobCompletedPaddingLeft": "{palette.size.size2}",
+        "knobCompletedPaddingTop": "{palette.size.size2}",
+        "knobCurrentBackgroundColor": "{palette.color.purpleDeluge}",
         "knobCurrentBorderColor": "{palette.color.purpleDeluge}",
         "knobCurrentBorderWidth": "{palette.border.border2}",
         "knobCurrentInnerColor": "{palette.color.purpleDeluge}",
         "knobCurrentInnerSize": "{palette.size.size8}",
-        "knobCurrentPaddingLeft": "{palette.size.size2}",
-        "knobCurrentPaddingTop": "{palette.size.size2}",
+        "knobCurrentPaddingLeft": "{system.size.none}",
+        "knobCurrentPaddingTop": "{system.size.none}",
         "knobSize": "{palette.size.size16}",
         "labelColor": "{palette.color.greyCharcoal}",
         "labelCurrentColor": "{palette.color.purpleDeluge}",
@@ -5529,7 +5568,7 @@
         "labelCurrentFontWeight": "{palette.fontWeight.weight700}",
         "labelDirection": "{system.direction.column}",
         "labelFontName": "{palette.fontName.HelveticaNow}",
-        "labelFontSize": "{palette.fontSize.size16}",
+        "labelFontSize": "{palette.fontSize.size14}",
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelGap": "{palette.size.size0}",
         "labelLineHeight": "{palette.lineHeight.ratio10to7}",
@@ -5538,7 +5577,13 @@
         "labelPaddingRight": "{palette.size.size16}",
         "showStepLabel": "{system.show.false}",
         "showStepName": "{system.show.true}",
-        "showStepTrackerLabel": "{system.show.true}"
+        "showStepTrackerLabel": "{system.show.true}",
+        "stepLabelColor": "{palette.color.greyShuttle}",
+        "stepLabelFontName": "{palette.fontName.HelveticaNow}",
+        "stepLabelFontSize": "{palette.fontSize.size12}",
+        "stepLabelFontWeight": "{palette.fontWeight.weight700}",
+        "stepLabelLineHeight": "{palette.lineHeight.ratio4to3}",
+        "textStepTrackerLabel": "{system.integer.1}"
       }
     },
     "StoryCard": {
@@ -5925,9 +5970,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}"
           }
         }
       ],
@@ -5964,8 +6011,7 @@
         "paddingRight": "{palette.size.size8}",
         "paddingTop": "{palette.size.size8}",
         "shadow": "{system.shadow.none}",
-        "textAlign": "{system.flexJustifyContent.center}",
-        "width": "{system.size.none}"
+        "textAlign": "{system.flexJustifyContent.center}"
       }
     },
     "TermsAndConditions": {
@@ -6188,8 +6234,20 @@
       }
     },
     "Toast": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "animationPaddingBottomAfter": "{palette.size.size8}",
+            "animationPaddingTopAfter": "{palette.size.size8}"
+          }
+        }
+      ],
       "tokens": {
         "animationBackgroundColorAfter": "{palette.color.greyAthens}",
         "animationBackgroundColorBefore": "{palette.color.purpleTelus}",
@@ -6203,6 +6261,8 @@
         "animationPaddingBottomBefore": "{palette.size.size0}",
         "animationPaddingTopAfter": "{palette.size.size16}",
         "animationPaddingTopBefore": "{palette.size.size0}",
+        "chevronlinkFontName": "{palette.fontName.HelveticaNow}",
+        "chevronlinkFontWeight": "{palette.fontWeight.weight400}",
         "containerBackgroundColor": "{palette.color.purpleTelus}",
         "containerGap": "{palette.size.size10}"
       }
@@ -6576,14 +6636,6 @@
             "color": "{palette.color.greyShuttle}"
           }
         },
-        {
-          "if": {
-            "size": "eyebrow"
-          },
-          "tokens": {
-            "color": "{palette.color.greyCharcoal}"
-          }
-        },
         {
           "if": {
             "colour": "dark",
@@ -6809,10 +6861,11 @@
             "size": "eyebrow"
           },
           "tokens": {
+            "color": "{palette.color.purpleDeluge}",
             "fontName": "{palette.fontName.HelveticaNow}",
             "fontSize": "{palette.fontSize.size14}",
             "fontWeight": "{palette.fontWeight.weight700}",
-            "lineHeight": "{palette.lineHeight.ratio9to7}",
+            "lineHeight": "{palette.lineHeight.ratio10to7}",
             "textTransform": "{system.textTransform.uppercase}"
           }
         },