@telus-uds/theme-allium 3.2.2 → 3.3.0

package/CHANGELOG.json

@@ -2,7 +2,22 @@
   "name": "@telus-uds/theme-allium",
   "entries": [
     {
-      "date": "Wed, 22 Jun 2022 16:28:29 GMT",
+      "date": "Fri, 24 Jun 2022 16:43:27 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,20 @@
 # 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 Fri, 24 Jun 2022 16:43:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.3.0
+
+Fri, 24 Jun 2022 16:43:27 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/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 22 Jun 2022 16:26:52 GMT
+ * Generated on Fri, 24 Jun 2022 16:42:21 GMT
  *
  */
 
@@ -2201,8 +2201,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 +2236,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 +2281,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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",

package/theme.json

@@ -2678,8 +2678,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 +2709,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 +2769,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": {