@telus-uds/theme-koodo 5.2.0 → 5.4.0

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^1.1.0",
-    "@telus-uds/system-theme-tokens": "^2.47.0"
+    "@telus-uds/palette-koodo": "^1.1.1",
+    "@telus-uds/system-theme-tokens": "^2.49.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^1.1.0"
+    "@telus-uds/palette-koodo": "^1.1.1"
   },
   "repository": {
     "type": "git",
@@ -31,5 +31,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "5.2.0"
+  "version": "5.4.0"
 }

package/theme.json

@@ -41,7 +41,7 @@
         },
         "purpose": {
           "type": "variant",
-          "values": ["offer", "editorial"]
+          "values": ["offer", "editorial", "subtle"]
         }
       },
       "rules": [
@@ -99,6 +99,26 @@
             "fontSize": "{palette.fontSize.size16}"
           }
         },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.green}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "borderColor": "{palette.color.green}"
+          }
+        },
         {
           "if": {
             "outline": true,
@@ -2294,6 +2314,73 @@
         "textLine": "{system.textLine.none}"
       }
     },
+    "ColourToggle": {
+      "appearances": {
+        "focus": "{appearances.ColourToggle.focus}",
+        "hover": "{appearances.ColourToggle.hover}",
+        "pressed": "{appearances.ColourToggle.pressed}",
+        "selected": "{appearances.ColourToggle.selected}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.silver}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.purple}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.mortar}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        },
+        {
+          "if": {
+            "selected": true
+          },
+          "tokens": {
+            "bubbleBorderColor": "{palette.color.black}",
+            "bubbleBorderRadius": "{palette.radius.radius45}",
+            "bubbleBorderWidth": "{palette.border.border1}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.silver}",
+        "borderRadius": "{palette.radius.radius45}",
+        "borderWidth": "{palette.border.border1}",
+        "bubbleBorderColor": "{palette.color.transparent}",
+        "bubbleBorderRadius": "{palette.radius.none}",
+        "bubbleBorderWidth": "{palette.border.none}",
+        "innerBubbleBorderRadius": "{palette.radius.radius45}",
+        "innerBubbleHeight": "{palette.size.size40}",
+        "innerBubbleWidth": "{palette.size.size40}",
+        "outerBubbleContentAlignItems": "{system.flexAlign.center}",
+        "outerBubbleHeight": "{palette.size.size48}",
+        "outerBubbleJustifyContent": "{system.flexJustifyContent.center}",
+        "outerBubbleWidth": "{palette.size.size48}",
+        "shadow": "{palette.shadow.surfaceInset}",
+        "space": "{system.integer.2}"
+      }
+    },
     "Countdown": {
       "appearances": {
         "feature": {
@@ -4539,9 +4626,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": [
@@ -4555,23 +4642,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": "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": {
-            "style": "success"
+            "validation": "success"
           },
           "tokens": {
             "backgroundColor": "{palette.color.successLight}",
@@ -4583,7 +4687,7 @@
         },
         {
           "if": {
-            "style": "warning"
+            "validation": "warning"
           },
           "tokens": {
             "backgroundColor": "{palette.color.cautionLight}",
@@ -4596,7 +4700,7 @@
         },
         {
           "if": {
-            "style": "error"
+            "validation": "error"
           },
           "tokens": {
             "backgroundColor": "{palette.color.dangerLight}",
@@ -4617,7 +4721,7 @@
         "borderRightWidth": "{palette.border.border1}",
         "borderTopWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
-        "dismissButtonGap": "{palette.size.size16}",
+        "dismissButtonGap": "{palette.size.size24}",
         "dismissIcon": "{palette.icon.Close}",
         "dismissIconColor": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
@@ -6860,6 +6964,7 @@
         "cellPaddingRight": "{palette.size.size16}",
         "cellPaddingTop": "{palette.size.size16}",
         "cellStickyShadow": "{palette.shadow.elevation1}",
+        "display": "{system.display.none}",
         "fontColor": "{palette.color.black}",
         "fontName": "{palette.fontName.StagSans}",
         "fontSize": "{palette.fontSize.size16}",