@telus-uds/theme-allium 3.27.0 → 3.28.0

package/theme.json

@@ -793,16 +793,21 @@
       "tokens": {
         "alignSelf": "{system.flexAlign.flexStart}",
         "backgroundColor": "{palette.color.white}",
+        "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.greenAccessible}",
+        "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.pill32}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greenAccessible}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight700}",
+        "height": "{system.size.none}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size24}",
-        "iconSpace": "{system.integer.2}",
+        "iconSpace": "{system.integer.1}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "minWidth": "{palette.size.size144}",
         "opacity": "{system.opacity.opaque}",
@@ -1834,25 +1839,29 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "calendarBackgroundColor": "{palette.color.white}",
         "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAlabaster}",
-        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyCharcoal}",
-        "calendarDayDefaultBeforeHeight": "{palette.size.size28}",
-        "calendarDayDefaultBeforeWidth": "{palette.size.size28}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyShuttle}",
+        "calendarDayDefaultBackgroundColor": "{palette.color.white}",
         "calendarDayDefaultBorder": "{palette.border.border1}",
-        "calendarDayDefaultBorderColor": "{palette.color.greyMystic}",
-        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.purpleDeluge}",
+        "calendarDayDefaultBorderColor": "{palette.color.greyCloud}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDayDefaultCalendarDaySelectedHoverBeforeBackground": "{palette.color.purpleDeluge}",
         "calendarDayDefaultCalendarDaySelectedHoverColor": "{palette.color.white}",
         "calendarDayDefaultColor": "{palette.color.greyCharcoal}",
         "calendarDayDefaultFontName": "{palette.fontName.HelveticaNow}",
         "calendarDayDefaultFontSize": "{palette.fontSize.size14}",
-        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight300}",
-        "calendarDaySelectedHoverBeforeBackground": "{palette.color.purpleDeluge}",
-        "calendarDaySelectedHoverBorderColor": "{palette.color.greyMystic}",
-        "calendarDaySelectedHoverColor": "{palette.color.white}",
+        "calendarDayDefaultFontWeight": "{palette.fontWeight.weight400}",
+        "calendarDaySelectedFocusBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBackground": "{palette.color.white}",
+        "calendarDaySelectedHoverBeforeBorderColor": "{palette.color.purpleDeluge}",
+        "calendarDaySelectedHoverBorderColor": "{palette.color.greyCloud}",
+        "calendarDaySelectedHoverColor": "{palette.color.greyCharcoal}",
         "calendarMonthCaptionColor": "{palette.color.greyThunder}",
         "calendarMonthCaptionFontName": "{palette.fontName.HelveticaNow}",
         "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
-        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight400}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight700}",
         "calendarMonthCaptionLineHeight": "{palette.lineHeight.ratio7to5}",
         "calendarMonthCaptionPaddingBottom": "{palette.size.size48}",
         "dateInputBorderColor": "{palette.color.transparent}",
@@ -1862,19 +1871,10 @@
         "dateInputInsideBorderColor": "{palette.color.greyShuttle}",
         "dateInputInsideColor": "{palette.color.greyShuttle}",
         "dateInputStrokeColor": "{palette.color.greyShuttle}",
-        "dayPickerNavigationButtonBackgroundColor": "{palette.color.white}",
-        "dayPickerNavigationButtonBorderColor": "{palette.color.greyCloud}",
-        "dayPickerNavigationButtonChildLeft": "{palette.size.size8}",
-        "dayPickerNavigationButtonChildRight": "{palette.size.size8}",
-        "dayPickerNavigationButtonChildSvgFill": "{palette.color.greyShuttle}",
-        "dayPickerNavigationButtonDefaultHoverBorderColor": "{palette.color.greyMystic}",
-        "dayPickerNavigationButtonMaxHeight": "{palette.size.size32}",
-        "dayPickerNavigationButtonMaxWidth": "{palette.size.size32}",
         "dayPickerNavigationButtonPadding": "{palette.size.size8}",
-        "dayPickerNavigationSVGHorizontalFill": "{palette.color.greyThunder}",
         "dayPickerWeekHeaderColor": "{palette.color.greyCharcoal}",
         "dayPickerWeekHeaderFontName": "{palette.fontName.HelveticaNow}",
-        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight500}",
+        "dayPickerWeekHeaderFontWeight": "{palette.fontWeight.weight700}",
         "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
         "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
         "hiddenInputFieldContainerHeight": "{palette.size.size0}",
@@ -1958,6 +1958,10 @@
     },
     "ExpandCollapseControl": {
       "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        },
         "expanded": "{appearances.ExpandCollapseControl.expanded}"
       },
       "rules": [
@@ -1968,6 +1972,17 @@
           "tokens": {
             "icon": "{palette.icon.CaretUp}"
           }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size8}",
+            "paddingLeft": "{palette.size.size0}",
+            "paddingRight": "{palette.size.size0}",
+            "paddingTop": "{palette.size.size8}"
+          }
         }
       ],
       "tokens": {
@@ -1982,8 +1997,8 @@
         "iconSize": "{palette.size.size16}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size8}",
-        "paddingRight": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
         "paddingTop": "{palette.size.size16}",
         "verticalAlign": "{system.verticalAlign.top}"
       }
@@ -2015,15 +2030,38 @@
       }
     },
     "ExpandCollapsePanel": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "compact": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "contentPaddingBottom": "{palette.size.size16}",
+            "contentPaddingLeft": "{palette.size.size24}",
+            "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.size40}",
-        "contentPaddingRight": "{palette.size.size16}",
+        "contentPaddingLeft": "{palette.size.size24}",
+        "contentPaddingRight": "{palette.size.size0}",
         "contentPaddingTop": "{palette.size.size0}",
-        "expandDuration": "{palette.duration.duration300}"
+        "expandDividerColor": "{palette.color.transparent}",
+        "expandDuration": "{palette.duration.duration300}",
+        "expanddDividerWidth": "{palette.size.size0}",
+        "marginBottom": "{palette.size.size0}"
       }
     },
     "Feedback": {
@@ -3459,9 +3497,18 @@
     "Notification": {
       "appearances": {
         "style": "{appearances.Notification.style}",
-        "system": "{appearances.Notification.system}"
+        "system": "{appearances.Notification.system}",
+        "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "viewport": ["xl"]
+          },
+          "tokens": {
+            "justifyContent": "{system.flexJustifyContent.center}"
+          }
+        },
         {
           "if": {
             "system": true
@@ -3525,8 +3572,7 @@
         "color": "{palette.color.greyCharcoal}",
         "dismissButtonGap": "{palette.size.size16}",
         "dismissIcon": "{palette.icon.Close}",
-        "dismissIconColor": "{palette.color.greyCharcoal}",
-        "dismissIconSize": "{palette.size.size24}",
+        "dismissIconColor": "{palette.color.greyShuttle}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -3534,6 +3580,7 @@
         "iconColor": "{system.color.none}",
         "iconGap": "{palette.size.size16}",
         "iconSize": "{palette.size.size24}",
+        "justifyContent": "{system.flexJustifyContent.flexStart}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "paddingBottom": "{palette.size.size12}",
         "paddingLeft": "{palette.size.size12}",
@@ -3632,7 +3679,18 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": "{palette.border.none}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderLeftWidth": "{palette.border.none}",
+        "borderRightWidth": "{palette.border.none}",
+        "borderTopWidth": "{palette.border.none}",
         "color": "{palette.color.greyShuttle}",
+        "ellipsisBorderBottomWidth": "{palette.border.none}",
+        "ellipsisBorderLeftWidth": "{palette.border.none}",
+        "ellipsisBorderRightWidth": "{palette.border.none}",
+        "ellipsisBorderTopWidth": "{palette.border.none}",
+        "ellipsisHeight": "{system.size.none}",
+        "ellipsisPadding": "{palette.size.size0}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
@@ -3663,8 +3721,11 @@
             "focus": true
           },
           "tokens": {
+            "borderBottomWidth": "{palette.border.border3}",
             "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{palette.border.border3}"
+            "borderLeftWidth": "{palette.border.border3}",
+            "borderRightWidth": "{palette.border.border3}",
+            "borderTopWidth": "{palette.border.border3}"
           }
         },
         {
@@ -3689,13 +3750,17 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.transparent}",
+        "borderBottomWidth": "{palette.border.border1}",
         "borderColor": "{palette.color.transparent}",
+        "borderLeftWidth": "{palette.border.border1}",
         "borderRadius": "{palette.radius.pill32}",
-        "borderWidth": "{palette.border.border1}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.greyShuttle}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
+        "height": "{palette.size.size32}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderGap": "{palette.size.size4}",
@@ -3745,8 +3810,9 @@
             "hover": true
           },
           "tokens": {
-            "borderColor": "{palette.color.greyShuttle}",
             "iconDisplace": "{palette.size.size4}",
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderWidth": "{palette.border.border1}",
             "textLine": "{system.textLine.none}"
           }
         },
@@ -3755,8 +3821,8 @@
             "focus": true
           },
           "tokens": {
-            "borderColor": "{palette.color.greyShuttle}",
-            "borderWidth": "{palette.border.border3}"
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderWidth": "{palette.border.border3}"
           }
         },
         {
@@ -3797,25 +3863,30 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.transparent}",
+        "borderBottomWidth": "{palette.border.none}",
         "borderColor": "{palette.color.transparent}",
+        "borderLeftWidth": "{palette.border.none}",
         "borderRadius": "{palette.radius.radius4}",
-        "borderWidth": "{palette.border.border1}",
+        "borderRightWidth": "{palette.border.none}",
+        "borderTopWidth": "{palette.border.none}",
         "color": "{palette.color.greyShuttle}",
         "displayLabel": "{system.show.true}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
+        "height": "{system.size.none}",
         "icon": "{system.icon.none}",
         "iconDisplace": "{palette.size.size0}",
         "iconSize": "{palette.size.size24}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
         "outerBorderColor": "{palette.color.transparent}",
-        "paddingBottom": "{palette.size.size12}",
+        "outerBorderWidth": "{palette.border.border1}",
+        "paddingBottom": "{palette.size.size4}",
         "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size8}",
-        "paddingTop": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size4}",
         "textAlign": "{system.flexJustifyContent.center}",
-        "textLine": "{system.textLine.underline}",
+        "textLine": "{system.textLine.none}",
         "width": "{system.size.none}"
       }
     },
@@ -3896,6 +3967,7 @@
             "currencySymbolLineHeight": "{palette.lineHeight.ratio5to4}",
             "rateFontSize": "{palette.fontSize.size14}",
             "rateLineHeight": "{palette.lineHeight.ratio8to7}",
+            "strikeThroughPosition": "{palette.size.size15}",
             "topTextFontSize": "{palette.fontSize.size14}",
             "topTextLineHeight": "{palette.lineHeight.ratio10to7}"
           }
@@ -3915,6 +3987,8 @@
             "currencySymbolLineHeight": "{palette.lineHeight.ratio9to8}",
             "rateFontSize": "{palette.fontSize.size20}",
             "rateLineHeight": "{palette.lineHeight.ratio8to5}",
+            "strikeThroughHeight": "{palette.size.size3}",
+            "strikeThroughPosition": "{palette.size.size35}",
             "topTextFontSize": "{palette.fontSize.size20}",
             "topTextLineHeight": "{palette.lineHeight.ratio8to5}"
           }
@@ -3964,6 +4038,7 @@
         "rateLineHeight": "{palette.lineHeight.ratio5to4}",
         "strikeThroughColor": "{palette.color.greyShuttle}",
         "strikeThroughHeight": "{palette.size.size2}",
+        "strikeThroughPosition": "{palette.size.size22}",
         "topTextFontName": "{palette.fontName.HelveticaNow}",
         "topTextFontSize": "{palette.fontSize.size16}",
         "topTextFontWeight": "{palette.fontWeight.weight700}",
@@ -4435,7 +4510,9 @@
         "containerPaddingRight": "{palette.size.size0}",
         "containerPaddingTop": "{palette.size.size0}",
         "containerShadow": "{system.shadow.none}",
+        "descriptionFontName": "{palette.fontName.HelveticaNow}",
         "descriptionFontSize": "{palette.fontSize.size14}",
+        "descriptionFontWeight": "{palette.fontWeight.weight400}",
         "descriptionLineHeight": "{palette.lineHeight.ratio10to7}",
         "descriptionMarginLeft": "{system.size.none}",
         "inputBackgroundColor": "{palette.color.white}",
@@ -4902,6 +4979,7 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greyCharcoal}",
+        "feedbackBackgroundColor": "{palette.color.greenYellow}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",