@telus-uds/theme-allium 3.18.0 → 3.20.0

package/theme.json

@@ -325,6 +325,30 @@
         "gradient": "{system.gradient.none}"
       }
     },
+    "Breadcrumbs": {
+      "appearances": {
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "iconColor": "{palette.color.greyCloud}"
+          }
+        }
+      ],
+      "tokens": {
+        "icon": "{palette.icon.ChevronRight}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconPadding": "{palette.size.size8}",
+        "listItemPadding": "{palette.size.size0}"
+      }
+    },
     "Button": {
       "appearances": {
         "danger": {
@@ -1076,6 +1100,47 @@
         "width": "{system.size.none}"
       }
     },
+    "Callout": {
+      "appearances": {
+        "rounded": {
+          "type": "variant",
+          "values": [true, false]
+        },
+        "size": {
+          "type": "variant",
+          "values": ["small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size4}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "rounded": true
+          },
+          "tokens": {
+            "borderRadius": "{palette.size.size4}"
+          }
+        }
+      ],
+      "tokens": {
+        "background": "{palette.color.greyAthens}",
+        "borderRadius": "{palette.size.size0}",
+        "color": "{palette.color.purpleTelus}",
+        "gap": "{palette.size.size16}",
+        "paddingBottom": "{palette.size.size8}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size8}"
+      }
+    },
     "Card": {
       "appearances": {
         "background": {
@@ -1620,6 +1685,65 @@
         "textLine": "{system.textLine.none}"
       }
     },
+    "DatePicker": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAlabaster}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyCharcoal}",
+        "calendarDayDefaultBeforeHeight": "{palette.size.size28}",
+        "calendarDayDefaultBeforeWidth": "{palette.size.size28}",
+        "calendarDayDefaultBorder": "{palette.border.border1}",
+        "calendarDayDefaultBorderColor": "{palette.color.greyMystic}",
+        "calendarDayDefaultCalendarDaySelectedHoverBackground": "{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}",
+        "calendarMonthCaptionColor": "{palette.color.greyThunder}",
+        "calendarMonthCaptionFontName": "{palette.fontName.HelveticaNow}",
+        "calendarMonthCaptionFontSize": "{palette.fontSize.size20}",
+        "calendarMonthCaptionFontWeight": "{palette.fontWeight.weight400}",
+        "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}",
+        "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}",
+        "dayPickerWeekHeaderLineHeight": "{palette.lineHeight.ratio10to7}",
+        "dayPickerWeekHeaderSmall": "{palette.fontSize.size14}",
+        "hiddenInputFieldContainerHeight": "{palette.size.size0}",
+        "hiddenInputFieldContainerWidth": "{palette.size.size0}",
+        "invalidInputMixin": "{palette.color.red}",
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}",
+        "singleDatePickerBorderColor": "{palette.color.greyShuttle}",
+        "singleDatePickerLeftRight": "{palette.size.size16}",
+        "singleDatePickerPaddingTopBottom": "{palette.size.size8}",
+        "singleDatePickerRadius": "{palette.radius.radius4}",
+        "validInputMixin": "{palette.color.greenAccessible}"
+      }
+    },
     "Divider": {
       "appearances": {
         "decorative": {
@@ -1708,6 +1832,32 @@
         "verticalAlign": "{system.verticalAlign.top}"
       }
     },
+    "ExpandCollapseMini": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderWidth": "{palette.border.none}"
+      }
+    },
+    "ExpandCollapseMiniControl": {
+      "appearances": {
+        "expanded": "{appearances.ExpandCollapseControl.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "icon": "{palette.icon.CaretDown}",
+        "size": "{palette.size.size4}"
+      }
+    },
     "ExpandCollapsePanel": {
       "appearances": {},
       "rules": [],
@@ -1792,6 +1942,46 @@
         "titleFontSize": "{palette.fontSize.size16}"
       }
     },
+    "Footnote": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "closeButtonBorderColor": "{palette.color.greyShuttle}",
+        "closeButtonBorderSize": "{palette.border.border1}",
+        "closeButtonHeight": "{palette.size.size24}",
+        "closeButtonIconSize": "{palette.size.size16}",
+        "closeButtonMarginBottom": "{palette.size.size12}",
+        "closeButtonMarginLeft": "{palette.size.size4}",
+        "closeButtonMarginRight": "{palette.size.size4}",
+        "closeButtonMarginTop": "{palette.size.size12}",
+        "closeButtonWidth": "{palette.size.size24}",
+        "footnoteBackground": "{palette.color.greyAthens}",
+        "footnoteBodyBackground": "{palette.color.greyAthens}",
+        "footnoteBodyPaddingBottom": "{palette.size.size32}",
+        "footnoteBodyPaddingLeft": "{palette.size.size16}",
+        "footnoteBodyPaddingRight": "{palette.size.size16}",
+        "footnoteBodyPaddingTop": "{palette.size.size0}",
+        "footnoteBorderColorMd": "{palette.color.greyCloud}",
+        "footnoteBorderTopSizeMd": "{palette.border.border1}",
+        "headerMargin": "{palette.size.size16}",
+        "listItemColor": "{palette.color.greyCharcoal}",
+        "listItemFontSize": "{palette.size.size14}",
+        "listItemLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listItemMarkerFontSize": "{palette.size.size16}",
+        "listItemMarkerLineHeight": "{palette.lineHeight.ratio3to2}",
+        "listItemPaddingLeft": "{palette.size.size8}",
+        "listPaddingLeft": "{palette.size.size32}"
+      }
+    },
+    "FootnoteLink": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "lineHeight": "{palette.lineHeight.ratio1to1}",
+        "paddingLeft": "{palette.size.size2}",
+        "paddingRight": "{palette.size.size2}"
+      }
+    },
     "HorizontalScrollButton": {
       "appearances": {
         "focus": "{appearances.HorizontalScrollButton.focus}",
@@ -2072,10 +2262,11 @@
             "inverse": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.light60}",
-            "borderColor": "{palette.color.greyCharcoal}",
-            "iconColor": "{palette.color.greyCharcoal}",
-            "outerBorderWidth": "{system.border.zero}"
+            "backgroundColor": "{system.color.transparent}",
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderColor": "{palette.color.white}",
+            "outerBorderWidth": "{palette.border.border1}"
           }
         },
         {
@@ -2108,8 +2299,9 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.light40}",
-            "borderColor": "{palette.color.greyShuttle}",
-            "iconColor": "{palette.color.greyShuttle}"
+            "borderColor": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "outerBorderWidth": "{system.border.zero}"
           }
         },
         {
@@ -2126,6 +2318,7 @@
             "size": "small"
           },
           "tokens": {
+            "iconSize": "{palette.size.size16}",
             "padding": "{palette.size.size4}"
           }
         },
@@ -2138,10 +2331,11 @@
             "backgroundColor": "{palette.color.white}",
             "borderColor": "{palette.color.greyCloud}",
             "borderWidth": "{palette.border.border1}",
+            "iconSize": "{palette.size.size16}",
             "outerBorderColor": "{system.color.transparent}",
             "outerBorderGap": "{system.size.zero}",
             "outerBorderWidth": "{system.border.zero}",
-            "padding": "{palette.size.size12}",
+            "padding": "{palette.size.size8}",
             "shadow": "{palette.shadow.surfaceRaised}"
           }
         },
@@ -2151,7 +2345,8 @@
             "size": "large"
           },
           "tokens": {
-            "padding": "{palette.size.size16}"
+            "iconSize": "{palette.size.size24}",
+            "padding": "{palette.size.size12}"
           }
         },
         {
@@ -2187,33 +2382,35 @@
         },
         {
           "if": {
-            "focus": true,
-            "pressed": true,
+            "hover": true,
             "raised": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.purpleTelus}",
-            "borderWidth": "{system.border.zero}"
+            "borderColor": "{palette.color.greyCloud}",
+            "borderWidth": "{palette.border.border3}"
           }
         },
         {
           "if": {
-            "hover": true,
+            "focus": true,
             "raised": true
           },
           "tokens": {
-            "borderColor": "{palette.color.greyCloud}",
-            "borderWidth": "{palette.border.border3}"
+            "borderColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{palette.border.border3}",
+            "iconColor": "{palette.color.purpleTelus}"
           }
         },
         {
           "if": {
             "focus": true,
+            "pressed": true,
             "raised": true
           },
           "tokens": {
-            "borderColor": "{palette.color.purpleTelus}",
-            "borderWidth": "{palette.border.border3}"
+            "backgroundColor": "{palette.color.purpleTelus}",
+            "borderWidth": "{system.border.zero}",
+            "iconColor": "{palette.color.white}"
           }
         },
         {
@@ -2232,13 +2429,13 @@
         "borderWidth": "{palette.border.border1}",
         "iconColor": "{palette.color.greyShuttle}",
         "iconScale": "{system.iconScale.scale1}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size16}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{system.border.zero}",
-        "padding": "{palette.size.size8}",
+        "padding": "{palette.size.size4}",
         "shadow": "{system.shadow.none}"
       }
     },
@@ -2798,6 +2995,88 @@
         "paddingTop": "{palette.size.size12}"
       }
     },
+    "OrderedList": {
+      "appearances": {
+        "compact": {
+          "description": "When true it will reduce the line height of the list item.",
+          "type": "variant",
+          "values": [true]
+        },
+        "size": {
+          "description": "Indicates list item text size.",
+          "type": "variant",
+          "values": ["large", "medium", "small"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "itemFontSize": "{palette.fontSize.size20}",
+            "itemLineHeight": "{palette.lineHeight.ratio8to5}"
+          }
+        },
+        {
+          "if": {
+            "size": "medium"
+          },
+          "tokens": {}
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "itemFontSize": "{palette.fontSize.size14}",
+            "itemLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio5to4}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "small"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio8to7}"
+          }
+        },
+        {
+          "if": {
+            "compact": true,
+            "size": "large"
+          },
+          "tokens": {
+            "itemLineHeight": "{palette.lineHeight.ratio6to5}"
+          }
+        }
+      ],
+      "tokens": {
+        "headerFontName": "{palette.fontName.HelveticaNow}",
+        "headerFontWeight": "{palette.fontWeight.weight700}",
+        "interItemMargin": "{palette.size.size8}",
+        "itemBulletContainerWidth": "{palette.size.size16}",
+        "itemBulletHeight": "{palette.size.size4}",
+        "itemBulletWidth": "{palette.size.size4}",
+        "itemColor": "{palette.color.greyCharcoal}",
+        "itemFontName": "{palette.fontName.HelveticaNow}",
+        "itemFontSize": "{palette.fontSize.size16}",
+        "itemFontWeight": "{palette.fontWeight.weight400}",
+        "itemLineHeight": "{palette.lineHeight.ratio3to2}",
+        "itemMarginTop": "{palette.size.size0}",
+        "itemPaddingTop": "{palette.size.size0}",
+        "listGutter": "{palette.size.size8}"
+      }
+    },
     "Pagination": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -3000,6 +3279,72 @@
         "width": "{system.size.none}"
       }
     },
+    "PreviewCard": {
+      "appearances": {
+        "focus": "{appearances.Button.focus}",
+        "hover": "{appearances.PreviewCard.hover}",
+        "pressed": "{appearances.PreviewCard.focus}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.size.size2}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyMystic}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "flex": "{system.integer.1}",
+        "outerBorderColor": "{palette.color.black}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderWidth": "{palette.size.size0}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "separatorColor": "{palette.color.greyCloud}"
+      }
+    },
+    "PriceLockup": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "bottomLinksMarginLeft": "{palette.size.size4}",
+        "bottomTextMarginTop": "{palette.size.size4}",
+        "dividerColor": "{palette.color.greyCloud}",
+        "fontColor": "{palette.color.greyCharcoal}",
+        "footnoteGap": "{palette.size.size4}",
+        "footnoteMarginTop": "{palette.size.size4}",
+        "priceMarginBottom": "{palette.size.size8}",
+        "strikeThroughBackground": "{palette.color.greyShuttle}",
+        "strikeThroughHeight": "{palette.size.size2}",
+        "topTextMarginBottom": "{palette.size.size4}"
+      }
+    },
     "Progress": {
       "appearances": {
         "size": {
@@ -3328,9 +3673,7 @@
           "if": {
             "error": true
           },
-          "tokens": {
-            "inputBorderColor": "{palette.color.red}"
-          }
+          "tokens": {}
         },
         {
           "if": {
@@ -3359,6 +3702,18 @@
             "inputBorderColor": "{palette.color.transparent}",
             "labelColor": "{palette.color.greyShuttle}"
           }
+        },
+        {
+          "if": {
+            "checked": true,
+            "inactive": true
+          },
+          "tokens": {
+            "checkedBackgroundColor": "{palette.color.greyCloud}",
+            "inputBackgroundColor": "{palette.color.white}",
+            "inputBorderColor": "{palette.color.greyCloud}",
+            "labelColor": "{palette.color.greyShuttle}"
+          }
         }
       ],
       "tokens": {
@@ -3760,14 +4115,21 @@
       "rules": [
         {
           "if": {
-            "hover": true,
-            "inactive": null
+            "hover": true
           },
           "tokens": {
-            "outerBackgroundColor": "{palette.color.greyMystic}",
             "outerBorderColor": "{palette.color.greyMystic}"
           }
         },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.purpleDeluge}",
+            "borderWidth": "{palette.border.border3}"
+          }
+        },
         {
           "if": {
             "validation": "success"
@@ -3788,23 +4150,13 @@
             "validationIconColor": "{palette.color.red}"
           }
         },
-        {
-          "if": {
-            "focus": true
-          },
-          "tokens": {
-            "borderColor": "{palette.color.purpleDeluge}",
-            "borderWidth": "{palette.border.border3}",
-            "validationIcon": "{system.icon.none}"
-          }
-        },
         {
           "if": {
             "inactive": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
-            "borderColor": "{palette.color.greyAthens}"
+            "borderColor": "{palette.color.greyShuttle}",
+            "icon": "{system.icon.none}"
           }
         }
       ],
@@ -3820,7 +4172,7 @@
         "height": "{palette.size.size48}",
         "icon": "{palette.icon.CaretDown}",
         "iconColor": "{palette.color.greyCharcoal}",
-        "iconSize": "{palette.size.size24}",
+        "iconSize": "{palette.size.size20}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",
         "outerBorderWidth": "{palette.border.border2}",
@@ -3830,7 +4182,7 @@
         "paddingTop": "{palette.size.size12}",
         "validationIcon": "{system.icon.none}",
         "validationIconColor": "{palette.color.transparent}",
-        "validationIconSize": "{palette.size.size24}"
+        "validationIconSize": "{palette.size.size20}"
       }
     },
     "SideNav": {