@telus-uds/system-theme-tokens 2.24.0 → 2.26.0

package/CHANGELOG.md

@@ -1,12 +1,45 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Mon, 01 May 2023 22:02:12 GMT and should not be manually modified.
+This log was last generated on Wed, 17 May 2023 00:13:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.26.0
+
+Wed, 17 May 2023 00:13:27 GMT
+
+### Minor changes
+
+- add 'strikeThroughPosition' token to schema (kyle.king2@telus.com)
+- standardize expand collapse accross all brands (akshay.pandey1@telus.com)
+- Add `feedbackBackgroundColor` in `Select` to override background color of `Feedback` (shahzaibkhalidmalik@outlook.com)
+- Added individual border tokens to Pagination button components (wlsdud194@hotmail.com)
+- update public mobile and description fontFamily bug (samuraix221@hotmail.com)
+- padding added for the iconsize of the notification component (35577399+JoshHC@users.noreply.github.com)
+- Standardize DatePicker for TELUS, Public Mobile, and Koodo (samuraix221@hotmail.com)
+
+### Patches
+
+- Fix an issue where `Toast` doesn't render as expected on smaller screens (shahzaibkhalidmalik@outlook.com)
+
+## 2.25.0
+
+Tue, 09 May 2023 00:29:54 GMT
+
+### Minor changes
+
+- added 'Disclaimer' schema to components (kyle.king2@telus.com)
+- add fontWeight, fontName, color, currentColor tokens to 'Breadcrumbs' schema (kyle.king2@telus.com)
+- Add icon token to Footnote (wlsdud194@hotmail.com)
+- add theme tokens to Navigation bar component (mauricio.batresmontejo@telus.com)
+- add 'VideoPicker' to components schema (kyle.king2@telus.com)
+- font color added as a property to follow the standarization guidelines in the brands for the ribbon components (35577399+JoshHC@users.noreply.github.com)
+- add additional tokens to 'FootnoteLink' & 'PriceLockup' schema (kyle.king2@telus.com)
+- added font props to Table component (ignacio.cuyun@telus.com)
+
 ## 2.24.0
 
-Mon, 01 May 2023 22:02:12 GMT
+Mon, 01 May 2023 22:09:07 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -94,6 +94,7 @@ module.exports = {
   CarouselTabsPanelItem: { focus, hover, pressed, inactive, selected },
   Checkbox: { checked, error, focus, hover, inactive },
   ChevronLink: { focus, hover, pressed },
+  DatePicker: { pressed, selected, focus },
   ExpandCollapseControl: { pressed, hover, focus, expanded },
   ExpandCollapsePanel: { expanded },
   Feedback: { validation },
@@ -143,6 +144,19 @@ module.exports = {
       type: 'state'
     }
   },
+  NavigationBar: {
+    focus,
+    pressed,
+    hover,
+    selected,
+    expanded,
+    viewport: {
+      description:
+        'The size label for the current screen viewport based on the current screen width',
+      values: viewports.keys,
+      type: 'state'
+    }
+  },
   Notification: {
     system: {
       values: [true],

package/components.js

@@ -22,6 +22,39 @@ module.exports = {
     detailsContainerPadding: 'size',
     playIconContainerBackground: 'color'
   },
+  VideoPickerThumbnail: {
+    splashButtonRadius: 'radius',
+    borderWidth: 'border',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    pressablePaddingVertical: 'size',
+    pressablePaddingHorizontal: 'size',
+    pressableBorderTopWidth: 'border',
+    pressableBorderTopColor: 'color',
+    pressablePaddingBottom: 'size',
+    titleColor: 'color',
+    subTitleColor: 'color'
+  },
+  VideoPickerSlider: {
+    previousIcon: 'icon',
+    nextIcon: 'icon'
+  },
+  VideoPicker: {
+    framedMaxHeight: 'size',
+    framedContainerBackgroundColor: 'color',
+    framedContainerBorderWidth: 'border',
+    framedContainerBorderColor: 'color',
+    framedContainerBorderRadius: 'radius',
+    framedContainerPadding: 'size',
+    stackViewDividerColor: 'color'
+  },
+  Disclaimer: {
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
+    lineHeight: 'lineHeight'
+  },
   Table: {
     // variant: compact
     tablePaddingBottom: 'size',
@@ -35,7 +68,10 @@ module.exports = {
     cellPaddingTop: 'size', // sharedStyles padding.
     cellPaddingRight: 'size',
     cellPaddingLeft: 'size',
-    cellPaddingBottom: 'size'
+    cellPaddingBottom: 'size',
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize'
   },
   Image: { borderRadius: 'radius' },
   Spinner: {
@@ -119,7 +155,10 @@ module.exports = {
   FootnoteLink: {
     lineHeight: 'lineHeight',
     paddingLeft: 'size',
-    paddingRight: 'size'
+    paddingRight: 'size',
+    color: 'color',
+    fontName: 'fontName',
+    fontWeight: 'fontWeight'
   },
   WaffleGrid: {
     rowBorderWidth: 'border',
@@ -164,9 +203,13 @@ module.exports = {
     closeButtonMarginRight: 'size',
     closeButtonMarginBottom: 'size',
     closeButtonWidth: 'size',
-    closeButtonIconSize: 'size'
+    closeButtonIconSize: 'size',
+    closeIcon: 'icon'
   },
+  // Speical note: The reasoning behind having duplicate fontName/fontWeight tokens is due to the validation of themes, You'll recieve an error when trying to adjust 'fontWeight' without a paired 'fontName' token.
   PriceLockup: {
+    fontName: 'fontName',
+    fontWeight: 'fontWeight',
     footnoteMarginTop: 'size',
     footnoteGap: 'size',
     bottomTextMarginTop: 'size',
@@ -174,9 +217,37 @@ module.exports = {
     bottomLinksMarginLeft: 'size',
     topTextMarginBottom: 'size',
     strikeThroughHeight: 'size',
-    strikeThroughBackground: 'color',
+    strikeThroughColor: 'color',
     fontColor: 'color',
-    dividerColor: 'color'
+    dividerColor: 'color',
+    topTextFontSize: 'fontSize',
+    strikeThroughPosition: 'size',
+    topTextLineHeight: 'lineHeight',
+    currencySymbolFontSize: 'fontSize',
+    currencySymbolLineHeight: 'lineHeight',
+    currencySymbolFontName: 'fontName',
+    currencySymbolFontWeight: 'fontWeight',
+    amountFontSize: 'fontSize',
+    amountLineHeight: 'lineHeight',
+    amountLetterSpacing: 'letterSpacing',
+    amountFontWeight: 'fontWeight',
+    amountFontName: 'fontName',
+    centsFontSize: 'fontSize',
+    centsLineHeight: 'lineHeight',
+    centsFontName: 'fontName',
+    centsFontWeight: 'fontWeight',
+    topTextFontName: 'fontName',
+    topTextFontWeight: 'fontWeight',
+    rateFontSize: 'fontSize',
+    rateLineHeight: 'lineHeight',
+    rateFontName: 'fontName',
+    rateFontWeight: 'fontWeight',
+    bottomTextFontSize: 'fontSize',
+    bottomTextLineHeight: 'lineHeight',
+    footnoteLinkColor: 'color',
+    footnoteLinkFontName: 'fontName',
+    footnoteLinkFontWeight: 'fontWeight',
+    footnoteLinkFontSize: 'fontSize'
   },
   ActivityIndicator: { size: 'size', thickness: 'border', color: 'color' },
   Badge: {
@@ -226,11 +297,16 @@ module.exports = {
     paddingTop: 'size',
     paddingBottom: 'size',
     width: 'size',
+    height: 'size',
     minWidth: 'size',
     iconSize: 'size',
     iconSpace: 'integer',
     icon: 'icon',
 
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
     outerBorderColor: 'color',
     outerBorderWidth: 'border',
     outerBorderGap: 'size',
@@ -427,59 +503,54 @@ module.exports = {
   CheckboxGroup: { space: 'integer', fieldSpace: 'integer' },
   Divider: { width: 'size', color: 'color' },
   DatePicker: {
-    hiddenInputFieldContainerHeight: 'size',
-    hiddenInputFieldContainerWidth: 'size',
-    previousIcon: 'icon',
-    nextIcon: 'icon',
-    singleDatePickerBorderColor: 'color',
-    singleDatePickerRadius: 'radius',
-    singleDatePickerPaddingTopBottom: 'size',
-    singleDatePickerLeftRight: 'size',
+    calendarBackgroundColor: 'color',
+    calendarDayBlockedCalendarHoverBackground: 'color',
+    calendarDayBlockedCalendarHoverColor: 'color',
+    calendarDayDefaultBackgroundColor: 'color',
+    calendarDayDefaultBorder: 'border',
+    calendarDayDefaultBorderColor: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverBackground: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverBeforeBackground: 'color',
+    calendarDayDefaultCalendarDaySelectedHoverColor: 'color',
+    calendarDayDefaultColor: 'color',
+    calendarDayDefaultFontName: 'fontName',
+    calendarDayDefaultFontSize: 'fontSize',
+    calendarDayDefaultFontWeight: 'fontWeight',
+    calendarDaySelectedFocusBeforeBackground: 'color',
+    calendarDaySelectedHoverBackground: 'color',
+    calendarDaySelectedHoverBeforeBackground: 'color',
+    calendarDaySelectedHoverBeforeBorderColor: 'color',
+    calendarDaySelectedHoverBorderColor: 'color',
+    calendarDaySelectedHoverColor: 'color',
+    calendarMonthCaptionColor: 'color',
+    calendarMonthCaptionFontName: 'fontName',
+    calendarMonthCaptionFontSize: 'fontSize',
+    calendarMonthCaptionFontWeight: 'fontWeight',
+    calendarMonthCaptionLineHeight: 'lineHeight',
+    calendarMonthCaptionPaddingBottom: 'size',
     dateInputBorderColor: 'color',
     dateInputBorderRadius: 'radius',
-    invalidInputMixin: 'color',
-    validInputMixin: 'color',
-    dateInputHoverBorderColor: 'color',
     dateInputFocusBorderColor: 'color',
+    dateInputHoverBorderColor: 'color',
     dateInputInsideBorderColor: 'color',
     dateInputInsideColor: 'color',
     dateInputStrokeColor: 'color',
-    calendarMonthCaptionColor: 'color',
-    calendarMonthCaptionFontSize: 'fontSize',
-    calendarMonthCaptionLineHeight: 'lineHeight',
-    calendarMonthCaptionPaddingBottom: 'size',
-    dayPickerNavigationButtonBorderColor: 'color',
-    dayPickerNavigationButtonBackgroundColor: 'color',
-    dayPickerNavigationButtonMaxHeight: 'size',
-    dayPickerNavigationButtonMaxWidth: 'size',
-    dayPickerNavigationButtonPadding: 'size',
-    dayPickerNavigationButtonChildLeft: 'size',
-    dayPickerNavigationButtonChildRight: 'size',
-    dayPickerNavigationButtonChildSvgFill: 'color',
-    dayPickerNavigationButtonDefaultHoverBorderColor: 'color',
-    dayPickerNavigationSVGHorizontalFill: 'color',
     dayPickerWeekHeaderColor: 'color',
-    dayPickerWeekHeaderLineHeight: 'lineHeight',
-    dayPickerWeekHeaderSmall: 'fontSize',
-    calendarDayDefaultBorder: 'border',
-    calendarDayDefaultBorderColor: 'color',
-    calendarDayDefaultFontSize: 'fontSize',
-    calendarDayDefaultColor: 'color',
-    calendarDayDefaultBeforeHeight: 'size',
-    calendarDayDefaultBeforeWidth: 'size',
-    calendarDaySelectedHoverBorderColor: 'color',
-    calendarDaySelectedHoverColor: 'color',
-    calendarDaySelectedHoverBeforeBackground: 'color',
-    calendarDayDefaultCalendarDaySelectedHoverColor: 'color',
-    calendarDayDefaultCalendarDaySelectedHoverBackground: 'color',
-    calendarDayBlockedCalendarHoverBackground: 'color',
-    calendarDayBlockedCalendarHoverColor: 'color',
-    calendarMonthCaptionFontName: 'fontName',
     dayPickerWeekHeaderFontName: 'fontName',
-    calendarDayDefaultFontName: 'fontName',
-    calendarMonthCaptionFontWeight: 'fontWeight',
     dayPickerWeekHeaderFontWeight: 'fontWeight',
-    calendarDayDefaultFontWeight: 'fontWeight'
+    dayPickerWeekHeaderLineHeight: 'lineHeight',
+    dayPickerWeekHeaderSmall: 'fontSize',
+    hiddenInputFieldContainerHeight: 'size',
+    hiddenInputFieldContainerWidth: 'size',
+    dayPickerNavigationButtonPadding: 'size',
+    invalidInputMixin: 'color',
+    nextIcon: 'icon',
+    previousIcon: 'icon',
+    singleDatePickerBorderColor: 'color',
+    singleDatePickerLeftRight: 'size',
+    singleDatePickerPaddingTopBottom: 'size',
+    singleDatePickerRadius: 'radius',
+    validInputMixin: 'color'
   },
   ExpandCollapse: { borderColor: 'color', borderWidth: 'border', borderStyle: 'borderStyle' },
   ExpandCollapseMini: { borderWidth: 'border' },
@@ -510,7 +581,13 @@ module.exports = {
     contentPaddingLeft: 'size',
     contentPaddingRight: 'size',
     contentPaddingTop: 'size',
-    contentPaddingBottom: 'size'
+    contentPaddingBottom: 'size',
+    marginBottom: 'size',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    expandDividerColor: 'color',
+    expanddDividerWidth: 'size'
   },
   Feedback: {
     backgroundColor: 'color',
@@ -697,6 +774,32 @@ module.exports = {
     closeIconSize: 'size',
     closePadding: 'size'
   },
+  NavigationBar: {
+    alignSelf: 'flexAlign',
+    backgroundColor: 'color',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    color: 'color',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    fontWeight: 'fontWeight',
+    lineHeight: 'lineHeight',
+    minWidth: 'size',
+    opacity: 'opacity',
+    outerBackgroundColor: 'color',
+    outerBorderColor: 'color',
+    outerBorderGap: 'size',
+    outerBorderWidth: 'border',
+    paddingBottom: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    shadow: 'shadow',
+    textAlign: 'flexJustifyContent',
+    width: 'size',
+    icoMenu: 'icon'
+  },
   Notification: {
     backgroundColor: 'color',
     borderBottomWidth: 'border',
@@ -720,8 +823,8 @@ module.exports = {
     iconGap: 'size',
     dismissIcon: 'icon',
     dismissIconColor: 'color',
-    dismissIconSize: 'size',
-    dismissButtonGap: 'size'
+    dismissButtonGap: 'size',
+    justifyContent: 'flexJustifyContent'
   },
   Pagination: {
     gap: 'size',
@@ -730,13 +833,28 @@ module.exports = {
     fontName: 'fontName',
     fontWeight: 'fontWeight',
     fontSize: 'fontSize',
-    lineHeight: 'lineHeight'
+    lineHeight: 'lineHeight',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderColor: 'color',
+    ellipsisPadding: 'size',
+    ellipsisBorderRightWidth: 'border',
+    ellipsisBorderLeftWidth: 'border',
+    ellipsisBorderTopWidth: 'border',
+    ellipsisBorderBottomWidth: 'border',
+    ellipsisHeight: 'size'
   },
   PaginationPageButton: {
     borderColor: 'color',
-    borderWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
     borderRadius: 'radius',
     backgroundColor: 'color',
+    height: 'size',
     paddingLeft: 'size',
     paddingRight: 'size',
     paddingTop: 'size',
@@ -755,7 +873,10 @@ module.exports = {
   },
   PaginationSideButton: {
     borderColor: 'color',
-    borderWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
     borderRadius: 'radius',
     backgroundColor: 'color',
     paddingLeft: 'size',
@@ -763,6 +884,7 @@ module.exports = {
     paddingTop: 'size',
     paddingBottom: 'size',
     outerBorderColor: 'color',
+    outerBorderWidth: 'border',
     color: 'color',
     fontName: 'fontName',
     fontWeight: 'fontWeight',
@@ -774,7 +896,8 @@ module.exports = {
     iconDisplace: 'size',
     width: 'size',
     textAlign: 'flexJustifyContent',
-    displayLabel: 'show'
+    displayLabel: 'show',
+    height: 'size'
   },
   Progress: {
     backgroundColor: 'color',
@@ -903,6 +1026,8 @@ module.exports = {
     descriptionFontSize: 'fontSize',
     descriptionLineHeight: 'lineHeight',
     descriptionMarginLeft: 'size',
+    descriptionFontName: 'fontName',
+    descriptionFontWeight: 'fontWeight',
     inputBackgroundColor: 'color',
     inputBorderColor: 'color',
     inputBorderWidth: 'border',
@@ -997,7 +1122,10 @@ module.exports = {
     curveWidth: 'size',
     curveAfterBackgroundColor: 'color',
     curveAfterHeight: 'size',
-    gradient: 'gradient'
+    gradient: 'gradient',
+    fontColor: 'color',
+    borderRadiusBottomLeft: 'size',
+    borderRadiusBottomRight: 'size'
   },
   Search: {
     backgroundColor: 'color',
@@ -1058,7 +1186,8 @@ module.exports = {
     iconColor: 'color',
     validationIcon: 'icon',
     validationIconSize: 'size',
-    validationIconColor: 'color'
+    validationIconColor: 'color',
+    feedbackBackgroundColor: 'color'
   },
   SideNav: { borderColor: 'color', borderWidth: 'border', borderStyle: 'borderStyle' },
   SideNavItem: {
@@ -1400,8 +1529,14 @@ module.exports = {
     flexShrink: 'integer'
   },
   Breadcrumbs: {
+    fontWeight: 'fontWeight',
+    fontName: 'fontName',
+    fontSize: 'fontSize',
+    color: 'color',
+    currentColor: 'color',
     icon: 'icon',
     iconColor: 'color',
+    iconSize: 'size',
     iconPadding: 'size',
     listItemPadding: 'size'
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.24.0",
+  "version": "2.26.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"