@telus-uds/system-theme-tokens 2.47.0 → 2.49.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @telus-uds/system-theme-tokens
 
-This log was last generated on Fri, 01 Dec 2023 20:57:37 GMT and should not be manually modified.
+This log was last generated on Mon, 08 Jan 2024 20:08:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.49.0
+
+Mon, 08 Jan 2024 20:08:06 GMT
+
+### Minor changes
+
+- Tokens changed for Telus theme to be aligned with desgin intentions (35577399+JoshHC@users.noreply.github.com)
+- add the display token to the table component (guillermo.peitzner@telus.com)
+
+## 2.48.0
+
+Wed, 13 Dec 2023 21:24:24 GMT
+
+### Minor changes
+
+- new ColourToggle component tokens (mauricio.batresmontejo@telus.com)
+
+### Patches
+
+- add row reverse property for direction token (mauricio.batresmontejo@telus.com)
+
 ## 2.47.0
 
-Fri, 01 Dec 2023 20:57:37 GMT
+Fri, 01 Dec 2023 21:08:37 GMT
 
 ### Minor changes
 

package/appearances.js

@@ -55,7 +55,7 @@ const expanded = {
 
 const validation = {
   description: 'Validation states for form inputs',
-  values: ['error', 'success'],
+  values: ['error', 'success', 'warning'],
   type: 'state'
 }
 
@@ -97,6 +97,7 @@ module.exports = {
   Checkbox: { checked, error, focus, hover, inactive },
   CheckboxCard: { pressed, checked, error, focus, hover, inactive },
   ChevronLink: { focus, hover, pressed },
+  ColourToggle: { focus, hover, pressed, selected },
   DatePicker: { pressed, selected, focus },
   ExpandCollapseControl: { pressed, hover, focus, expanded },
   ExpandCollapseMiniControl: { focus },
@@ -180,12 +181,7 @@ module.exports = {
       type: 'state'
     }
   },
-  Notification: {
-    system: {
-      values: [true],
-      type: 'state'
-    }
-  },
+  Notification: { validation },
   PaginationPageButton: { focus, hover, pressed, selected },
   PaginationSideButton: {
     focus,

package/components.js

@@ -67,6 +67,7 @@ module.exports = {
     tablePaddingBottom: 'size',
     cellBoxShadowColor: 'color', // sharedStyles, box-shadow
     cellBackground: 'color',
+    display: 'display',
     cellStickyShadow: 'shadow',
     cellPaddingTop: 'size', // sharedStyles padding.
     cellPaddingRight: 'size',
@@ -645,6 +646,31 @@ module.exports = {
     borderTopRightRadius: 'radius',
     outlineOffset: 'size'
   },
+  ColourToggle: {
+    space: 'integer',
+    shadow: 'shadow',
+
+    // general Border Bubble
+    borderColor: 'color',
+    borderWidth: 'border',
+    borderRadius: 'radius',
+
+    // Border Bubble
+    bubbleBorderColor: 'color',
+    bubbleBorderWidth: 'border',
+    bubbleBorderRadius: 'radius',
+
+    // Outer Colour Bubble
+    outerBubbleContentAlignItems: 'flexAlign',
+    outerBubbleJustifyContent: 'flexJustifyContent',
+    outerBubbleHeight: 'size',
+    outerBubbleWidth: 'size',
+
+    // Inner Colour Bubble
+    innerBubbleHeight: 'size',
+    innerBubbleWidth: 'size',
+    innerBubbleBorderRadius: 'radius'
+  },
   Divider: { width: 'size', color: 'color' },
   DatePicker: {
     calendarBackgroundColor: 'color',

package/package.json

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

package/tokens.js

@@ -33,6 +33,7 @@ const types = {
   integer: 'Number',
   float: 'Number',
   color: 'String',
+  display: 'String',
   string: 'String',
   enum: ({ values }) =>
     `'${Object.entries(values)
@@ -105,6 +106,18 @@ const tokenTypes = applyDynamicTypes({
       none: null
     }
   },
+  display: {
+    // The display CSS property sets whether an element is treated as a block or inline box and
+    // the layout used for its children, such as flow layout, grid or flex.
+    default: 'inline',
+    nullable: true,
+    type: types.display,
+    values: {
+      inline: 'inline',
+      inlineBlock: 'inline-block',
+      none: null
+    }
+  },
   radius: {
     default: 0,
     nullable: true,
@@ -264,7 +277,8 @@ const tokenTypes = applyDynamicTypes({
     type: types.enum,
     values: {
       column: 'column', // Stacks children vertically
-      row: 'row' // Stacks children horizontally
+      row: 'row', // Stacks children horizontally
+      rowReverse: 'row-reverse' // Stacks children horizontally, but reversed
     }
   },
   show: {