@telus-uds/theme-allium 4.21.0 → 4.22.0

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "@telus-uds/theme-allium",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Allium theme",
   "author": "TELUS Digital",
   "homepage": "https://github.com/telus/allium-design-system#readme",
   "license": "MIT",
   "main": "build/rn/theme.js",
+  "module": "build/web/index.js",
   "dependencies": {},
   "devDependencies": {
-    "@telus-uds/palette-allium": "^2.28.3",
-    "@telus-uds/system-theme-tokens": "^2.48.0",
-    "@telus-uds/system-tokens": "^0.7.30"
+    "@telus-uds/palette-allium": "^2.29.0",
+    "@telus-uds/system-theme-tokens": "^2.49.0",
+    "@telus-uds/system-tokens": "^0.7.31"
   },
   "peerDependencies": {
-    "@telus-uds/palette-allium": "^2.28.3"
+    "@telus-uds/palette-allium": "^2.29.0"
   },
   "files": [
     "build",

package/theme.json

@@ -41,7 +41,7 @@
         },
         "purpose": {
           "type": "variant",
-          "values": ["offer", "editorial"]
+          "values": ["offer", "editorial", "subtle"]
         }
       },
       "rules": [
@@ -73,6 +73,16 @@
             "gradient": "{palette.gradient.green}"
           }
         },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}",
+            "borderColor": "{palette.color.purpleDeluge}",
+            "color": "{palette.color.white}"
+          }
+        },
         {
           "if": {
             "purpose": "offer"
@@ -96,6 +106,17 @@
             "color": "{palette.color.white}"
           }
         },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.purpleDeluge}",
+            "color": "{palette.color.purpleDeluge}"
+          }
+        },
         {
           "if": {
             "outline": true,
@@ -4504,9 +4525,9 @@
       "appearances": {
         "style": {
           "type": "variant",
-          "values": ["success", "warning", "error"]
+          "values": ["system", "subtle"]
         },
-        "system": "{appearances.Notification.system}",
+        "validation": "{appearances.Notification.validation}",
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
@@ -4520,23 +4541,40 @@
         },
         {
           "if": {
-            "system": true
+            "style": "system"
           },
           "tokens": {
             "borderLeftWidth": "{system.border.zero}",
             "borderRadius": "{system.radius.zero}",
             "borderRightWidth": "{system.border.zero}",
             "borderTopWidth": "{system.border.zero}",
-            "iconGap": "{palette.size.size12}",
-            "paddingBottom": "{palette.size.size16}",
-            "paddingLeft": "{palette.size.size16}",
-            "paddingRight": "{palette.size.size16}",
-            "paddingTop": "{palette.size.size16}"
+            "iconGap": "{palette.size.size8}",
+            "paddingBottom": "{palette.size.size12}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size12}"
           }
         },
         {
           "if": {
-            "style": "success"
+            "style": "subtle"
+          },
+          "tokens": {
+            "borderBottomWidth": "{system.border.zero}",
+            "borderLeftWidth": "{system.border.zero}",
+            "borderRadius": "{system.radius.zero}",
+            "borderRightWidth": "{system.border.zero}",
+            "borderTopWidth": "{system.border.zero}",
+            "iconGap": "{palette.size.size8}",
+            "paddingBottom": "{palette.size.size12}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "validation": "success"
           },
           "tokens": {
             "backgroundColor": "{palette.color.greenPanache}",
@@ -4547,7 +4585,7 @@
         },
         {
           "if": {
-            "style": "warning"
+            "validation": "warning"
           },
           "tokens": {
             "backgroundColor": "{palette.color.amberLight}",
@@ -4559,7 +4597,7 @@
         },
         {
           "if": {
-            "style": "error"
+            "validation": "error"
           },
           "tokens": {
             "backgroundColor": "{palette.color.redLight}",
@@ -4579,15 +4617,15 @@
         "borderRightWidth": "{palette.border.border1}",
         "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.greyCharcoal}",
-        "dismissButtonGap": "{palette.size.size16}",
+        "dismissButtonGap": "{palette.size.size24}",
         "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.greyShuttle}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",
         "fontWeight": "{palette.fontWeight.weight400}",
-        "icon": "{system.icon.none}",
-        "iconColor": "{system.color.none}",
-        "iconGap": "{palette.size.size16}",
+        "icon": "{palette.icon.StatusInfo}",
+        "iconColor": "{palette.color.purpleTelus}",
+        "iconGap": "{palette.size.size8}",
         "iconSize": "{palette.size.size24}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "lineHeight": "{palette.lineHeight.ratio3to2}",
@@ -5919,7 +5957,7 @@
       "appearances": {
         "purpose": {
           "type": "variant",
-          "values": ["offer", "default", "editorial"]
+          "values": ["offer", "default", "editorial", "subtle"]
         },
         "wrap": {
           "type": "variant",
@@ -5952,6 +5990,14 @@
             "paddingLeft": "{palette.size.size24}",
             "paddingRight": "{palette.size.size24}"
           }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleDeluge}"
+          }
         }
       ],
       "tokens": {
@@ -6825,6 +6871,7 @@
         "cellPaddingRight": "{palette.size.size16}",
         "cellPaddingTop": "{palette.size.size16}",
         "cellStickyShadow": "{palette.shadow.elevation1}",
+        "display": "{system.display.none}",
         "fontColor": "{palette.color.black}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontSize": "{palette.fontSize.size16}",