@telus-uds/system-theme-tokens 2.37.0 → 2.39.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
+This log was last generated on Fri, 21 Jul 2023 00:42:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.39.0
+
+Fri, 21 Jul 2023 00:42:38 GMT
+
+### Minor changes
+
+- added padding token to Toast (kyle.king2@telus.com)
+
+## 2.38.0
+
+Fri, 14 Jul 2023 19:47:50 GMT
+
+### Minor changes
+
+- background color token introduced for tooltip button. (akshay.pandey1@telus.com)
+- added CarouselThumbnail and appearances (kyle.king2@telus.com)
+- update to expanded appearance schema (srikanthkhari@gmail.com)
+- New token fontSize added to use the correct text style for badge component (35577399+JoshHC@users.noreply.github.com)
+- Standardized QuantitySelector (wlsdud194@hotmail.com)
+- Bump @telus-uds/system-constants to v1.3.0
+
 ## 2.37.0
 
-Fri, 07 Jul 2023 19:17:02 GMT
+Fri, 07 Jul 2023 19:26:41 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -49,7 +49,7 @@ const selected = {
 
 const expanded = {
   description: 'Applies when an ExpandCollapse panel is open and the content inside is visible',
-  values: [true],
+  values: [true, false],
   type: 'state'
 }
 
@@ -92,6 +92,7 @@ module.exports = {
   ButtonDropdown: { focus, hover, pressed, inactive, selected, open },
   ButtonGroupItem: { focus, hover, pressed, inactive, selected },
   CarouselTabsPanelItem: { focus, hover, pressed, inactive, selected },
+  CarouselThumbnail: { focus, hover, pressed },
   Checkbox: { checked, error, focus, hover, inactive },
   ChevronLink: { focus, hover, pressed },
   DatePicker: { pressed, selected, focus },

package/components.js

@@ -170,17 +170,40 @@ module.exports = {
     itemPadding: 'size'
   },
   QuantitySelector: {
-    leftIcon: 'icon',
-    rightIcon: 'icon',
-    iconSize: 'size',
-    borderColor: 'color',
     inputBorderColor: 'color',
     inputBackgroundColor: 'color',
-    inputBorderWidth: 'size',
+    inputBorderWidth: 'border',
     padding: 'size',
-    backgroundColor: 'color',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
     textColor: 'color',
-    iconColor: 'color'
+    inputWidth: 'size',
+    lineHeight: 'lineHeight',
+    fontSize: 'fontSize'
+  },
+  QuantitySelectorSideButton: {
+    borderRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    padding: 'size',
+    paddingLeft: 'size',
+    paddingRight: 'size',
+    paddingTop: 'size',
+    paddingBottom: 'size',
+    iconColor: 'color',
+    iconSize: 'size',
+    icon: 'icon',
+    backgroundColor: 'color'
   },
   Footnote: {
     footnoteBackground: 'color',
@@ -265,6 +288,7 @@ module.exports = {
   ActivityIndicator: { size: 'size', thickness: 'border', color: 'color' },
   Badge: {
     fontWeight: 'fontWeight',
+    fontSize: 'fontSize',
     fontName: 'fontName',
     backgroundColor: 'color',
     borderColor: 'color',
@@ -468,15 +492,19 @@ module.exports = {
     showPanelTabs: 'show',
     spaceBetweenSlideAndPreviousNextNavigation: 'size',
     spaceBetweenSlideAndPanelNavigation: 'size',
-    thumbnailBorderColor: 'color',
-    thumbnailBorderRadius: 'radius',
-    thumbnailBorderWidth: 'border',
-    thumbnailContainerPaddingTop: 'size',
-    thumbnailMargin: 'size',
-    thumbnailPadding: 'size',
-    thumbnailSelectedBorderColor: 'color',
-    thumbnailSelectedBorderWidth: 'border',
-    thumbnailSize: 'size'
+    stepTrackerCurrentBackgroundColor: 'color'
+  },
+  CarouselThumbnail: {
+    alignItems: 'flexAlign',
+    borderColor: 'color',
+    borderRadius: 'radius',
+    borderWidth: 'border',
+    containerPaddingTop: 'size',
+    margin: 'size',
+    padding: 'size',
+    selectedBorderColor: 'color',
+    selectedBorderWidth: 'border',
+    size: 'size'
   },
   CarouselTabsPanelItem: {
     paddingLeft: 'size',
@@ -726,6 +754,14 @@ module.exports = {
     icon: 'icon',
     backgroundColor: 'color',
     borderRadius: 'radius',
+    borderTopLeftRadius: 'radius',
+    borderTopRightRadius: 'radius',
+    borderBottomLeftRadius: 'radius',
+    borderBottomRightRadius: 'radius',
+    borderTopWidth: 'border',
+    borderBottomWidth: 'border',
+    borderLeftWidth: 'border',
+    borderRightWidth: 'border',
     borderColor: 'color',
     borderWidth: 'border',
     outerBorderWidth: 'border',
@@ -1531,7 +1567,24 @@ module.exports = {
     figcaptionGap: 'size',
     textColor: 'color',
     imageSize: 'size',
-    icon: 'icon'
+    icon: 'icon',
+    iconFr: 'icon',
+    testimonialFontSizeLarge: 'fontSize',
+    testimonialLineHeightLarge: 'lineHeight',
+    testimonialFontNameLarge: 'fontName',
+    testimonialFontWeightLarge: 'fontWeight',
+    testimonialFontSizeHeading: 'fontSize',
+    testimonialLineHeightHeading: 'lineHeight',
+    testimonialFontNameHeading: 'fontName',
+    testimonialFontWeightHeading: 'fontWeight',
+    authorFontSize: 'fontSize',
+    authorLineHeight: 'lineHeight',
+    authorFontName: 'fontName',
+    authorFontWeight: 'fontWeight',
+    additionalFontSize: 'fontSize',
+    additionalLineHeight: 'lineHeight',
+    additionalFontName: 'fontName',
+    additionalFontWeight: 'fontWeight'
   },
   TermsAndConditions: {
     contentPaddingBottom: 'size',
@@ -1616,6 +1669,7 @@ module.exports = {
     animationPaddingBottomBefore: 'size',
     animationPaddingBottomAfter: 'size',
     animationPaddingTopBefore: 'size',
+    padding: 'size',
     animationPaddingTopAfter: 'size',
     animationBackgroundColorBefore: 'color',
     animationBackgroundColorAfter: 'color',
@@ -1724,6 +1778,7 @@ module.exports = {
   },
   TooltipButton: {
     outerBorderColor: 'color',
+    backgroundColor: 'color',
     outerBorderWidth: 'border',
     outerBorderGap: 'size',
     borderRadius: 'radius',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/system-theme-tokens",
-  "version": "2.37.0",
+  "version": "2.39.0",
   "description": "Theme token schema for UDS",
   "keywords": [
     "system"
@@ -28,7 +28,7 @@
     "skip": true
   },
   "dependencies": {
-    "@telus-uds/system-constants": "^1.2.1"
+    "@telus-uds/system-constants": "^1.3.0"
   },
   "devDependencies": {
     "chalk": "^4.1.2",

package/tokens.js

@@ -87,10 +87,11 @@ const tokenTypes = applyDynamicTypes({
     // Width of a border line. To avoid layout shifts where border tokens change, implementations
     // should consider if they need to also subtract this from an internal padding size.
     default: 0,
-    nullable: false,
+    nullable: true,
     type: types.number,
     values: {
-      zero: 0
+      zero: 0,
+      none: null
     }
   },
   color: {
@@ -109,6 +110,7 @@ const tokenTypes = applyDynamicTypes({
     nullable: true,
     type: types.number,
     values: {
+      none: null,
       zero: 0,
       // On both React Native and Web, a border radius greater than width/height
       // creates a circle or pill effect. Use this to create circles or near-circles;