@telus-uds/theme-allium 3.2.2 → 3.4.1

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@telus-uds/theme-allium",
   "entries": [
     {
-      "date": "Wed, 22 Jun 2022 16:28:29 GMT",
+      "date": "Mon, 25 Jul 2022 22:34:31 GMT",
+      "tag": "@telus-uds/theme-allium_v3.4.1",
+      "version": "3.4.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@telus-uds/theme-allium",
+            "comment": "Bump @telus-uds/palette-allium to v2.2.0",
+            "commit": "88c003c8b0e7ee7fdf42001fb47b669f3a616df9"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 21 Jul 2022 18:04:09 GMT",
+      "tag": "@telus-uds/theme-allium_v3.4.0",
+      "version": "3.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "shahzaibkhalidmalik@outlook.com",
+            "package": "@telus-uds/theme-allium",
+            "commit": "cd6f5d967d3ad4f98f62258b043031e7c9d664d7",
+            "comment": "Add Allium theme for `Carousel`"
+          },
+          {
+            "author": "bill.somen@telus.com",
+            "package": "@telus-uds/theme-allium",
+            "commit": "cd6f5d967d3ad4f98f62258b043031e7c9d664d7",
+            "comment": "Auto-generated change summary (does not include documentation changes) **added:** `components.Typography.rules.27.if.size.4`, `components.Typography.rules.27.if.size.5`, `components.Typography.rules.27.if.size.6`, `components.Typography.rules.27.if.size.7`, `components.Typography.rules.27.if.size.8`, **deleted:** _none_, **updated:** _none_"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 24 Jun 2022 16:43:34 GMT",
+      "tag": "@telus-uds/theme-allium_v3.3.0",
+      "version": "3.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "natasha.colusso@telus.com",
+            "package": "@telus-uds/theme-allium",
+            "commit": "cc2dce109b3b25240ddfc8c50a5db5a446447fcc",
+            "comment": "Auto-generated change summary (does not include documentation changes) **added:** `components.Tabs.appearances.inverse.type`, `components.Tabs.appearances.inverse.values.0`, `components.Tabs.rules.0.if.inverse`, `components.Tabs.rules.0.tokens.borderBottomColor`, `components.TabsItem.appearances.inverse.type`, `components.TabsItem.appearances.inverse.values.0`, `components.TabsItem.rules.5.if.inverse`, `components.TabsItem.rules.5.tokens.backgroundColor`, `components.TabsItem.rules.5.tokens.color`, `components.TabsItem.rules.6.if.hover`, `components.TabsItem.rules.6.if.inverse`, `components.TabsItem.rules.6.tokens.borderColor`, `components.TabsItem.rules.6.tokens.highlightColor`, `components.TabsItem.rules.7.if.inverse`, `components.TabsItem.rules.7.if.selected`, `components.TabsItem.rules.7.tokens.backgroundColor`, `components.TabsItem.rules.7.tokens.color`, `components.TabsItem.rules.7.tokens.highlightColor`, `components.TabsItem.rules.8.if.inverse`, `components.TabsItem.rules.8.if.pressed`, `components.TabsItem.rules.8.tokens.backgroundColor`, `components.TabsItem.rules.8.tokens.color`, `components.TabsItem.rules.8.tokens.highlightColor`, `components.TabsItem.rules.9.if.focus`, `components.TabsItem.rules.9.if.inverse`, `components.TabsItem.rules.9.tokens.borderColor`, `components.TabsItem.rules.9.tokens.highlightColor`, **deleted:** _none_, **updated:** `components.Select.tokens.iconColor`"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Jun 2022 16:28:40 GMT",
       "tag": "@telus-uds/theme-allium_v3.2.2",
       "version": "3.2.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/theme-allium
 
-This log was last generated on Wed, 22 Jun 2022 16:28:29 GMT and should not be manually modified.
+This log was last generated on Mon, 25 Jul 2022 22:34:31 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.4.1
+
+Mon, 25 Jul 2022 22:34:31 GMT
+
+### Patches
+
+- Bump @telus-uds/palette-allium to v2.2.0
+
+## 3.4.0
+
+Thu, 21 Jul 2022 18:04:09 GMT
+
+### Minor changes
+
+- Add Allium theme for `Carousel` (shahzaibkhalidmalik@outlook.com)
+- Auto-generated change summary (does not include documentation changes) **added:** `components.Typography.rules.27.if.size.4`, `components.Typography.rules.27.if.size.5`, `components.Typography.rules.27.if.size.6`, `components.Typography.rules.27.if.size.7`, `components.Typography.rules.27.if.size.8`, **deleted:** _none_, **updated:** _none_ (bill.somen@telus.com)
+
+## 3.3.0
+
+Fri, 24 Jun 2022 16:43:34 GMT
+
+### Minor changes
+
+- Auto-generated change summary (does not include documentation changes) **added:** `components.Tabs.appearances.inverse.type`, `components.Tabs.appearances.inverse.values.0`, `components.Tabs.rules.0.if.inverse`, `components.Tabs.rules.0.tokens.borderBottomColor`, `components.TabsItem.appearances.inverse.type`, `components.TabsItem.appearances.inverse.values.0`, `components.TabsItem.rules.5.if.inverse`, `components.TabsItem.rules.5.tokens.backgroundColor`, `components.TabsItem.rules.5.tokens.color`, `components.TabsItem.rules.6.if.hover`, `components.TabsItem.rules.6.if.inverse`, `components.TabsItem.rules.6.tokens.borderColor`, `components.TabsItem.rules.6.tokens.highlightColor`, `components.TabsItem.rules.7.if.inverse`, `components.TabsItem.rules.7.if.selected`, `components.TabsItem.rules.7.tokens.backgroundColor`, `components.TabsItem.rules.7.tokens.color`, `components.TabsItem.rules.7.tokens.highlightColor`, `components.TabsItem.rules.8.if.inverse`, `components.TabsItem.rules.8.if.pressed`, `components.TabsItem.rules.8.tokens.backgroundColor`, `components.TabsItem.rules.8.tokens.color`, `components.TabsItem.rules.8.tokens.highlightColor`, `components.TabsItem.rules.9.if.focus`, `components.TabsItem.rules.9.if.inverse`, `components.TabsItem.rules.9.tokens.borderColor`, `components.TabsItem.rules.9.tokens.highlightColor`, **deleted:** _none_, **updated:** `components.Select.tokens.iconColor` (natasha.colusso@telus.com)
+
 ## 3.2.2
 
-Wed, 22 Jun 2022 16:28:29 GMT
+Wed, 22 Jun 2022 16:28:40 GMT
 
 ### Patches
 

package/build/schema.json

@@ -3057,6 +3057,101 @@
             "rules"
           ]
         },
+        "Carousel": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "appearances": {
+              "type": "object",
+              "additionalProperties": false,
+              "patternProperties": {
+                "^[a-z]+([A-Z0-9][a-z0-9]*)*$": {
+                  "$ref": "#appearance"
+                }
+              }
+            },
+            "tokens": {
+              "type": "object",
+              "additionalProperties": false,
+              "properties": {
+                "nextIcon": {
+                  "$ref": "#icon"
+                },
+                "previousIcon": {
+                  "$ref": "#icon"
+                },
+                "showPreviousNextNavigation": {
+                  "$ref": "#show"
+                },
+                "showPanelNavigation": {
+                  "$ref": "#show"
+                },
+                "spaceBetweenSlideAndPreviousNextNavigation": {
+                  "$ref": "#size"
+                },
+                "spaceBetweenSlideAndPanelNavigation": {
+                  "$ref": "#size"
+                }
+              },
+              "required": [
+                "nextIcon",
+                "previousIcon",
+                "showPreviousNextNavigation",
+                "showPanelNavigation",
+                "spaceBetweenSlideAndPreviousNextNavigation",
+                "spaceBetweenSlideAndPanelNavigation"
+              ]
+            },
+            "rules": {
+              "type": "array",
+              "items": {
+                "type": "object",
+                "additionalProperties": false,
+                "properties": {
+                  "if": {
+                    "type": "object",
+                    "minProperties": 1
+                  },
+                  "tokens": {
+                    "type": "object",
+                    "additionalProperties": false,
+                    "properties": {
+                      "nextIcon": {
+                        "$ref": "#icon"
+                      },
+                      "previousIcon": {
+                        "$ref": "#icon"
+                      },
+                      "showPreviousNextNavigation": {
+                        "$ref": "#show"
+                      },
+                      "showPanelNavigation": {
+                        "$ref": "#show"
+                      },
+                      "spaceBetweenSlideAndPreviousNextNavigation": {
+                        "$ref": "#size"
+                      },
+                      "spaceBetweenSlideAndPanelNavigation": {
+                        "$ref": "#size"
+                      }
+                    }
+                  },
+                  "description": {
+                    "type": "string"
+                  }
+                },
+                "required": [
+                  "if",
+                  "tokens"
+                ]
+              }
+            }
+          },
+          "required": [
+            "tokens",
+            "rules"
+          ]
+        },
         "Checkbox": {
           "type": "object",
           "additionalProperties": false,
@@ -9952,6 +10047,7 @@
         "ButtonGroup",
         "ButtonGroupItem",
         "Card",
+        "Carousel",
         "Checkbox",
         "ChevronLink",
         "CheckboxGroup",

package/build/theme.js

@@ -1,13 +1,13 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jun 2022 16:26:52 GMT
+ * Generated on Mon, 25 Jul 2022 22:32:41 GMT
  *
  */
 
-const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
-const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
 const PaletteIconArrowRight = require('@telus-uds/palette-allium/build/rn/icons/ArrowRight')
+const PaletteIconArrowLeft = require('@telus-uds/palette-allium/build/rn/icons/ArrowLeft')
+const PaletteIconCheckmark = require('@telus-uds/palette-allium/build/rn/icons/Checkmark')
 const PaletteIconCaretDown = require('@telus-uds/palette-allium/build/rn/icons/CaretDown')
 const PaletteIconCaretUp = require('@telus-uds/palette-allium/build/rn/icons/CaretUp')
 const PaletteIconStatusSuccess = require('@telus-uds/palette-allium/build/rn/icons/StatusSuccess')
@@ -476,6 +476,29 @@ module.exports = {
         shadow: null
       }
     },
+    Carousel: {
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        {
+          if: { viewport: [ 'xs', 'sm' ] },
+          tokens: { showPreviousNextNavigation: false }
+        }
+      ],
+      tokens: {
+        nextIcon: PaletteIconArrowRight,
+        previousIcon: PaletteIconArrowLeft,
+        showPanelNavigation: true,
+        showPreviousNextNavigation: true,
+        spaceBetweenSlideAndPanelNavigation: 32,
+        spaceBetweenSlideAndPreviousNextNavigation: 24
+      }
+    },
     Checkbox: {
       appearances: {
         checked: {
@@ -2201,8 +2224,19 @@ module.exports = {
       }
     },
     Tabs: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        inverse: {
+          description: 'Styles the link white for use on dark backgrounds.',
+          type: 'variant',
+          values: [ true ]
+        }
+      },
+      rules: [
+        {
+          if: { inverse: true },
+          tokens: { borderBottomColor: '#ffffff' }
+        }
+      ],
       tokens: {
         borderBottomColor: '#676e73',
         borderBottomWidth: 1,
@@ -2225,6 +2259,7 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        inverse: { type: 'variant', values: [ true ] },
         pressed: {
           description: 'Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.',
           type: 'state',
@@ -2269,6 +2304,34 @@ module.exports = {
         {
           if: { focus: true, pressed: true },
           tokens: { backgroundColor: '#4b286d' }
+        },
+        {
+          if: { inverse: true },
+          tokens: { backgroundColor: 'rgba(0, 0, 0, 0)', color: '#ffffff' }
+        },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { borderColor: '#ffffff', highlightColor: '#ffffff' }
+        },
+        {
+          if: { inverse: true, selected: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            color: '#414547',
+            highlightColor: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, pressed: true },
+          tokens: {
+            backgroundColor: '#ffffff',
+            color: '#414547',
+            highlightColor: '#ffffff'
+          }
+        },
+        {
+          if: { focus: true, inverse: true },
+          tokens: { borderColor: '#ffffff', highlightColor: '#ffffff' }
         }
       ],
       tokens: {
@@ -2968,8 +3031,8 @@ module.exports = {
           }
         },
         {
-          description: 'Bold is only available on body text styles, not headings',
-          if: { bold: true, size: [ 'large', null, 'small', 'micro' ] },
+          description: 'Please only bold single words while using with headings',
+          if: { bold: true },
           tokens: { fontName: 'HelveticaNow', fontWeight: '700' }
         }
       ],
@@ -3043,5 +3106,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-allium', themeTokensVersion: '2.0.2' }
+  metadata: { name: 'theme-allium', themeTokensVersion: '2.1.0' }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.2.2",
+  "version": "3.4.1",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
@@ -8,12 +8,12 @@
   "main": "build/theme.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.1.0",
-    "@telus-uds/system-theme-tokens": "^2.0.2",
+    "@telus-uds/palette-allium": "^2.2.0",
+    "@telus-uds/system-theme-tokens": "^2.1.0",
     "@telus-uds/system-tokens": "^0.1.5"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.1.0"
+    "@telus-uds/palette-allium": "^2.2.0"
   },
   "files": [
     "build",

package/theme.json

@@ -635,6 +635,29 @@
         "shadow": "{system.shadow.none}"
       }
     },
+    "Carousel": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "showPreviousNextNavigation": "{system.show.false}"
+          }
+        }
+      ],
+      "tokens": {
+        "nextIcon": "{palette.icon.ArrowRight}",
+        "previousIcon": "{palette.icon.ArrowLeft}",
+        "showPanelNavigation": "{system.show.true}",
+        "showPreviousNextNavigation": "{system.show.true}",
+        "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
+        "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}"
+      }
+    },
     "Checkbox": {
       "appearances": {
         "checked": "{appearances.Checkbox.checked}",
@@ -2678,8 +2701,23 @@
       }
     },
     "Tabs": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "inverse": {
+          "description": "Styles the link white for use on dark backgrounds.",
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "borderBottomColor": "{palette.color.white}"
+          }
+        }
+      ],
       "tokens": {
         "borderBottomColor": "{palette.color.greyShuttle}",
         "borderBottomWidth": "{palette.border.border1}",
@@ -2694,6 +2732,10 @@
       "appearances": {
         "focus": "{appearances.TabsItem.pressed}",
         "hover": "{appearances.TabsItem.pressed}",
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": "{appearances.TabsItem.pressed}",
         "selected": "{appearances.TabsItem.pressed}"
       },
@@ -2750,6 +2792,57 @@
           "tokens": {
             "backgroundColor": "{palette.color.purpleTelus}"
           }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "color": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "highlightColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}",
+            "highlightColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "color": "{palette.color.greyCharcoal}",
+            "highlightColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.white}",
+            "highlightColor": "{palette.color.white}"
+          }
         }
       ],
       "tokens": {
@@ -3625,10 +3718,9 @@
           }
         },
         {
-          "description": "Bold is only available on body text styles, not headings",
+          "description": "Please only bold single words while using with headings",
           "if": {
-            "bold": true,
-            "size": ["large", null, "small", "micro"]
+            "bold": true
           },
           "tokens": {
             "fontName": "{palette.fontName.HelveticaNow}",