@telus-uds/theme-koodo 5.10.0 → 5.12.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 22:20:47 GMT
+ * Generated on Wed, 24 Apr 2024 16:27:06 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 12 Mar 2024 22:20:47 GMT
+ * Generated on Wed, 24 Apr 2024 16:27:07 GMT
  *
  */
 
@@ -11,7 +11,7 @@ import PaletteIconChevronUp from '@telus-uds/palette-koodo/build/rn/icons/Chevro
 import PaletteIconChevronLeft from '@telus-uds/palette-koodo/build/rn/icons/ChevronLeft'
 import PaletteIconCheck from '@telus-uds/palette-koodo/build/rn/icons/Check'
 import PaletteIconCheckCircleFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircleFilled'
-import PaletteIconCaution from '@telus-uds/palette-koodo/build/rn/icons/Caution'
+import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
 import PaletteIconClose from '@telus-uds/palette-koodo/build/rn/icons/Close'
 import PaletteIconAdd from '@telus-uds/palette-koodo/build/rn/icons/Add'
 import PaletteIconSubtract from '@telus-uds/palette-koodo/build/rn/icons/Subtract'
@@ -21,7 +21,6 @@ import PaletteIconBulletFill from '@telus-uds/palette-koodo/build/rn/icons/Bulle
 import PaletteIconTimes from '@telus-uds/palette-koodo/build/rn/icons/Times'
 import PaletteIconExclamationTriangle from '@telus-uds/palette-koodo/build/rn/icons/ExclamationTriangle'
 import PaletteIconSpyglass from '@telus-uds/palette-koodo/build/rn/icons/Spyglass'
-import PaletteIconExclamationOctagon from '@telus-uds/palette-koodo/build/rn/icons/ExclamationOctagon'
 import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
 import PaletteIconQuoteLeft from '@telus-uds/palette-koodo/build/rn/icons/QuoteLeft'
 import PaletteIconQuoteRightArrow from '@telus-uds/palette-koodo/build/rn/icons/QuoteRightArrow'
@@ -2406,7 +2405,7 @@ const theme = {
           if: { icon: true, validation: 'error' },
           tokens: {
             backgroundColor: '#fcd3c6',
-            icon: PaletteIconCaution,
+            icon: PaletteIconExclamationOctagon,
             iconColor: '#c9370b'
           }
         }
@@ -2645,6 +2644,7 @@ const theme = {
     },
     Icon: {
       appearances: {
+        background: { type: 'variant', values: [ true ] },
         color: {
           type: 'variant',
           values: [
@@ -2654,6 +2654,10 @@ const theme = {
             'inverse'
           ]
         },
+        padding: {
+          type: 'variant',
+          values: [ 'micro', 'small', 'medium', 'large', 'extraLarge' ]
+        },
         size: {
           type: 'variant',
           values: [ 'micro', 'small', 'large', 'extraLarge' ]
@@ -2665,6 +2669,62 @@ const theme = {
         }
       },
       rules: [
+        { if: { padding: 'micro' }, tokens: { padding: 4, width: 4 } },
+        { if: { padding: 'small' }, tokens: { padding: 4, width: 8 } },
+        {
+          if: { padding: 'medium' },
+          tokens: { padding: 4, width: 16 }
+        },
+        { if: { padding: 'large' }, tokens: { padding: 4, width: 24 } },
+        {
+          if: { padding: 'extraLarge' },
+          tokens: { padding: 4, width: 32 }
+        },
+        {
+          if: { background: true, padding: 'micro' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderRadius: 45,
+            padding: 4,
+            width: 4
+          }
+        },
+        {
+          if: { background: true, padding: 'small' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderRadius: 45,
+            padding: 4,
+            width: 8
+          }
+        },
+        {
+          if: { background: true, padding: 'medium' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderRadius: 45,
+            padding: 4,
+            width: 16
+          }
+        },
+        {
+          if: { background: true, padding: 'large' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderRadius: 45,
+            padding: 4,
+            width: 24
+          }
+        },
+        {
+          if: { background: true, padding: 'extraLarge' },
+          tokens: {
+            backgroundColor: '#efefef',
+            borderRadius: 45,
+            padding: 4,
+            width: 32
+          }
+        },
         { if: { size: 'micro' }, tokens: { size: 16 } },
         { if: { size: 'small' }, tokens: { size: 20 } },
         { if: { size: 'large' }, tokens: { size: 32 } },
@@ -2680,11 +2740,15 @@ const theme = {
         { if: { status: 'error' }, tokens: { color: '#c9370b' } }
       ],
       tokens: {
+        backgroundColor: 'transparent',
+        borderRadius: 0,
         color: '#000000',
+        padding: 0,
         scale: 1,
         size: 24,
         translateX: 0,
-        translateY: 0
+        translateY: 0,
+        width: 0
       }
     },
     IconButton: {
@@ -3014,6 +3078,7 @@ const theme = {
       },
       rules: [
         { if: { iconPosition: 'left' }, tokens: { iconSpace: 2 } },
+        { if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } },
         {
           if: { focus: true },
           tokens: {
@@ -3114,7 +3179,7 @@ const theme = {
         color: '#000000',
         icon: null,
         iconSize: 16,
-        iconSpace: 1,
+        iconSpace: 0,
         iconTranslateX: 0,
         iconTranslateY: 0,
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -3869,7 +3934,7 @@ const theme = {
             borderColor: '#c9370b',
             color: '#000000',
             dismissIcon: null,
-            icon: PaletteIconCaution,
+            icon: PaletteIconExclamationOctagon,
             iconColor: '#c9370b'
           }
         },
@@ -3880,7 +3945,7 @@ const theme = {
             borderColor: '#c9370b',
             color: '#000000',
             dismissIcon: null,
-            icon: PaletteIconCaution,
+            icon: PaletteIconExclamationOctagon,
             iconColor: '#c9370b'
           }
         }
@@ -4349,6 +4414,30 @@ const theme = {
         topTextMarginBottom: 4
       }
     },
+    ProductCard: {
+      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', 'md' ] },
+          tokens: { borderWidth: 0, paddingHorizontal: 24, paddingVertical: 0 }
+        }
+      ],
+      tokens: {
+        borderColor: '#efefef',
+        borderRadius: 6,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        paddingHorizontal: 24,
+        paddingVertical: 24,
+        selectedButtonIcon: PaletteIconCheck
+      }
+    },
     Progress: {
       appearances: { size: { type: 'variant', values: [ 'mini' ] } },
       rules: [ { if: { size: 'mini' }, tokens: { height: 8 } } ],
@@ -7424,6 +7513,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.53.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.54.0' }
 }
 export default theme

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^1.1.3",
-    "@telus-uds/system-theme-tokens": "^2.53.0"
+    "@telus-uds/palette-koodo": "^1.1.4",
+    "@telus-uds/system-theme-tokens": "^2.54.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^1.1.3"
+    "@telus-uds/palette-koodo": "^1.1.4"
   },
   "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.10.0"
+  "version": "5.12.0"
 }

package/theme.json

@@ -3026,7 +3026,7 @@
           },
           "tokens": {
             "backgroundColor": "{palette.color.dangerLight}",
-            "icon": "{palette.icon.Caution}",
+            "icon": "{palette.icon.ExclamationOctagon}",
             "iconColor": "{palette.color.danger}"
           }
         }
@@ -3347,10 +3347,18 @@
     },
     "Icon": {
       "appearances": {
+        "background": {
+          "type": "variant",
+          "values": [true]
+        },
         "color": {
           "type": "variant",
           "values": ["brand", "subtle", "offer", "success", "danger", "warning", "inverse"]
         },
+        "padding": {
+          "type": "variant",
+          "values": ["micro", "small", "medium", "large", "extraLarge"]
+        },
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large", "extraLarge"]
@@ -3362,6 +3370,111 @@
         }
       },
       "rules": [
+        {
+          "if": {
+            "padding": "micro"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "padding": "small"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "padding": "medium"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "padding": "large"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "micro"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "small"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "medium"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size16}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "large"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size24}"
+          }
+        },
+        {
+          "if": {
+            "background": true,
+            "padding": "extraLarge"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "borderRadius": "{palette.radius.radius45}",
+            "padding": "{palette.size.size4}",
+            "width": "{palette.size.size32}"
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -3468,11 +3581,15 @@
         }
       ],
       "tokens": {
+        "backgroundColor": "{system.color.transparent}",
+        "borderRadius": "{palette.radius.none}",
         "color": "{palette.color.black}",
+        "padding": "{palette.size.size0}",
         "scale": "{system.integer.1}",
         "size": "{palette.size.size24}",
         "translateX": "{system.size.zero}",
-        "translateY": "{system.size.zero}"
+        "translateY": "{system.size.zero}",
+        "width": "{palette.size.size0}"
       }
     },
     "IconButton": {
@@ -3958,6 +4075,14 @@
             "iconSpace": "{system.integer.2}"
           }
         },
+        {
+          "if": {
+            "iconPosition": "right"
+          },
+          "tokens": {
+            "iconSpace": "{system.integer.1}"
+          }
+        },
         {
           "if": {
             "focus": true
@@ -4173,7 +4298,7 @@
         "color": "{palette.color.black}",
         "icon": "{system.icon.none}",
         "iconSize": "{palette.size.size16}",
-        "iconSpace": "{system.integer.1}",
+        "iconSpace": "{system.integer.0}",
         "iconTranslateX": "{system.size.zero}",
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{palette.color.transparent}",
@@ -4986,7 +5111,7 @@
             "borderColor": "{palette.color.danger}",
             "color": "{palette.color.black}",
             "dismissIcon": "{system.icon.none}",
-            "icon": "{palette.icon.Caution}",
+            "icon": "{palette.icon.ExclamationOctagon}",
             "iconColor": "{palette.color.danger}"
           }
         },
@@ -4999,7 +5124,7 @@
             "borderColor": "{palette.color.danger}",
             "color": "{palette.color.black}",
             "dismissIcon": "{system.icon.none}",
-            "icon": "{palette.icon.Caution}",
+            "icon": "{palette.icon.ExclamationOctagon}",
             "iconColor": "{palette.color.danger}"
           }
         }
@@ -5500,6 +5625,32 @@
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
+    "ProductCard": {
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm", "md"]
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.none}",
+            "paddingHorizontal": "{palette.size.size24}",
+            "paddingVertical": "{palette.size.size0}"
+          }
+        }
+      ],
+      "tokens": {
+        "borderColor": "{palette.color.gallery}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderStyle": "{system.borderStyle.solid}",
+        "borderWidth": "{palette.border.border1}",
+        "paddingHorizontal": "{palette.size.size24}",
+        "paddingVertical": "{palette.size.size24}",
+        "selectedButtonIcon": "{palette.icon.Check}"
+      }
+    },
     "Progress": {
       "appearances": {
         "size": {