@telus-uds/theme-koodo 7.2.0 → 7.3.1

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 14 Feb 2025 18:58:08 GMT
+ * Generated on Tue, 11 Mar 2025 21:12:20 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 14 Feb 2025 18:58:08 GMT
+ * Generated on Tue, 11 Mar 2025 21:12:20 GMT
  *
  */
 
@@ -1327,6 +1327,10 @@ const theme = {
         }
       },
       rules: [
+        {
+          if: { interactive: true },
+          tokens: { backgroundColor: 'transparent' }
+        },
         {
           if: { interactive: true, isControl: true },
           tokens: { borderColor: '#c9c8c8', borderWidth: 1 }
@@ -1558,7 +1562,7 @@ const theme = {
         {
           if: { hover: true, interactive: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0.1)',
+            backgroundColor: 'rgba(0, 0, 0, 0.05)',
             borderColor: 'transparent'
           }
         },
@@ -1569,7 +1573,7 @@ const theme = {
         {
           if: { interactive: true, pressed: true },
           tokens: {
-            backgroundColor: 'rgba(0, 0, 0, 0.2)',
+            backgroundColor: 'rgba(0, 0, 0, 0.1)',
             borderColor: '#c9c8c8',
             borderWidth: 2
           }
@@ -1581,6 +1585,30 @@ const theme = {
             borderColor: '#000000',
             borderWidth: 1
           }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'dark' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'darker' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { hover: true, interactive: true, style: 'darkest' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.1)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'dark' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'darker' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
+        },
+        {
+          if: { interactive: true, pressed: true, style: 'darkest' },
+          tokens: { backgroundColor: 'rgba(255, 255, 255, 0.2)' }
         }
       ],
       tokens: {
@@ -2779,6 +2807,11 @@ const theme = {
           type: 'variant',
           values: [ true ]
         },
+        quiet: {
+          description: 'When it is true, it does not show the decoration',
+          type: 'state',
+          values: [ true, false ]
+        },
         size: { type: 'variant', values: [ 'micro', 'small', 'large' ] }
       },
       rules: [
@@ -2802,6 +2835,15 @@ const theme = {
         {
           if: { size: 'large' },
           tokens: { fontSize: 20, lineHeight: 1.4 }
+        },
+        { if: { quiet: true }, tokens: { textLine: 'none' } },
+        {
+          if: { alternative: true, quiet: true },
+          tokens: { color: '#666666', textLine: 'none' }
+        },
+        {
+          if: { inverse: true, quiet: true },
+          tokens: { color: '#ffffff', iconColor: '#ffffff', textLine: 'none' }
         }
       ],
       tokens: {

package/package.json

@@ -5,7 +5,7 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^3.1.0",
+    "@telus-uds/palette-koodo": "^3.2.0",
     "@telus-uds/system-theme-tokens": "^4.2.0"
   },
   "files": [
@@ -21,7 +21,7 @@
   "module": "build/web/index.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^3.1.0"
+    "@telus-uds/palette-koodo": "^3.2.0"
   },
   "repository": {
     "type": "git",
@@ -32,5 +32,5 @@
     "build": "UDS_PALETTE=@telus-uds/palette-koodo system-tokens-build-theme",
     "dev": "nodemon -w src -x 'npm run build'"
   },
-  "version": "7.2.0"
+  "version": "7.3.1"
 }

package/theme.json

@@ -1680,6 +1680,14 @@
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
+        {
+          "if": {
+            "interactive": true
+          },
+          "tokens": {
+            "backgroundColor": "{system.color.transparent}"
+          }
+        },
         {
           "if": {
             "interactive": true,
@@ -2051,7 +2059,7 @@
             "interactive": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}",
+            "backgroundColor": "{palette.color.dark5}",
             "borderColor": "{system.color.transparent}"
           }
         },
@@ -2071,7 +2079,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark20}",
+            "backgroundColor": "{palette.color.dark10}",
             "borderColor": "{palette.color.silver}",
             "borderWidth": "{palette.border.border2}"
           }
@@ -2087,6 +2095,66 @@
             "borderColor": "{palette.color.black}",
             "borderWidth": "{palette.border.border1}"
           }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "darker"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "hover": true,
+            "interactive": true,
+            "style": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light10}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "darker"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
+        },
+        {
+          "if": {
+            "interactive": true,
+            "pressed": true,
+            "style": "darkest"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.light20}"
+          }
         }
       ],
       "tokens": {
@@ -3461,6 +3529,11 @@
           "type": "variant",
           "values": [true]
         },
+        "quiet": {
+          "description": "When it is true, it does not show the decoration",
+          "type": "state",
+          "values": [true, false]
+        },
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large"]
@@ -3520,6 +3593,35 @@
             "fontSize": "{palette.fontSize.size20}",
             "lineHeight": "{palette.lineHeight.ratio7to5}"
           }
+        },
+        {
+          "if": {
+            "quiet": true
+          },
+          "tokens": {
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.dove}",
+            "textLine": "{system.textLine.none}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": "{palette.color.white}",
+            "iconColor": "{palette.color.white}",
+            "textLine": "{system.textLine.none}"
+          }
         }
       ],
       "tokens": {