@telus-uds/theme-koodo 5.16.2 → 5.18.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 19 Jul 2024 18:12:19 GMT
+ * Generated on Mon, 12 Aug 2024 06:25:09 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 19 Jul 2024 18:12:20 GMT
+ * Generated on Mon, 12 Aug 2024 06:25:09 GMT
  *
  */
 
@@ -25,6 +25,10 @@ import PaletteIconBulletFill from '@telus-uds/palette-koodo/build/rn/icons/Bulle
 import PaletteIconTimes from '@telus-uds/palette-koodo/build/rn/icons/Times'
 import PaletteIconSpyglass from '@telus-uds/palette-koodo/build/rn/icons/Spyglass'
 import PaletteIconPlaySolid from '@telus-uds/palette-koodo/build/rn/icons/PlaySolid'
+import PaletteIconToolTipFilled from '@telus-uds/palette-koodo/build/rn/icons/ToolTipFilled'
+import PaletteIconTooltip from '@telus-uds/palette-koodo/build/rn/icons/Tooltip'
+import PaletteIconCheckCircledFilled from '@telus-uds/palette-koodo/build/rn/icons/CheckCircledFilled'
+import PaletteIconTagFilled from '@telus-uds/palette-koodo/build/rn/icons/TagFilled'
 import PaletteIconQuoteLeft from '@telus-uds/palette-koodo/build/rn/icons/QuoteLeft'
 import PaletteIconQuoteRightArrow from '@telus-uds/palette-koodo/build/rn/icons/QuoteRightArrow'
 import PaletteIconAmex from '@telus-uds/palette-koodo/build/rn/icons/Amex'
@@ -33,7 +37,6 @@ import PaletteIconMasterCard from '@telus-uds/palette-koodo/build/rn/icons/Maste
 import PaletteIconEyeMasked from '@telus-uds/palette-koodo/build/rn/icons/EyeMasked'
 import PaletteIconEyeUnmasked from '@telus-uds/palette-koodo/build/rn/icons/EyeUnmasked'
 import PaletteIconVisa from '@telus-uds/palette-koodo/build/rn/icons/Visa'
-import PaletteIconTooltip from '@telus-uds/palette-koodo/build/rn/icons/Tooltip'
 import PaletteIconTooltipSymbol from '@telus-uds/palette-koodo/build/rn/icons/TooltipSymbol'
 import PaletteIconReplay from '@telus-uds/palette-koodo/build/rn/icons/Replay'
 import PaletteIconClosedCaptions from '@telus-uds/palette-koodo/build/rn/icons/ClosedCaptions'
@@ -2451,7 +2454,11 @@ const theme = {
         },
         {
           if: { hover: true },
-          tokens: { backgroundColor: 'rgba(0, 0, 0, 0.1)' }
+          tokens: { backgroundColor: 'rgba(0, 0, 0, 0.1)', iconPaddingTop: 8 }
+        },
+        {
+          if: { expanded: true, hover: true },
+          tokens: { backgroundColor: 'rgba(0, 0, 0, 0.1)', iconPaddingTop: 0 }
         },
         {
           if: { pressed: true },
@@ -4269,13 +4276,14 @@ const theme = {
         itemBulletHeight: 4,
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
-        itemColor: '#000000',
+        itemColor: null,
         itemFontName: 'StagSans',
         itemFontSize: 16,
         itemFontWeight: '400',
         itemLineHeight: 1.5,
         itemMarginTop: 0,
         itemPaddingTop: 0,
+        itemTextColor: '#000000',
         listGutter: 8
       }
     },
@@ -6007,6 +6015,179 @@ const theme = {
         width: null
       }
     },
+    Status: {
+      appearances: {
+        inverse: {
+          description: 'Inverts the status colors',
+          type: 'variant',
+          values: [ true ]
+        },
+        priority: { type: 'variant', values: [ 'default', 'low', 'high' ] },
+        purpose: {
+          type: 'variant',
+          values: [
+            'default', 'brand',
+            'subtle',  'success',
+            'warning', 'error',
+            'offer'
+          ]
+        }
+      },
+      rules: [
+        { if: { purpose: 'brand' }, tokens: { iconColor: '#000000' } },
+        {
+          if: { purpose: 'subtle' },
+          tokens: { icon: PaletteIconTooltip }
+        },
+        {
+          if: { purpose: 'success' },
+          tokens: {
+            icon: PaletteIconCheckCircledFilled,
+            iconColor: '#1c7b2b'
+          }
+        },
+        {
+          if: { purpose: 'warning' },
+          tokens: {
+            icon: PaletteIconExclamationTriangle,
+            iconColor: '#c9370b'
+          }
+        },
+        {
+          if: { purpose: 'error' },
+          tokens: {
+            icon: PaletteIconExclamationOctagon,
+            iconColor: '#c9370b'
+          }
+        },
+        {
+          if: { purpose: 'offer' },
+          tokens: { icon: PaletteIconTagFilled, iconColor: '#7a3dfc' }
+        },
+        {
+          if: { priority: 'low' },
+          tokens: {
+            borderRadius: 99,
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4
+          }
+        },
+        {
+          if: { priority: 'high' },
+          tokens: {
+            backgroundColor: '#000000',
+            borderRadius: 99,
+            iconColor: '#ffffff',
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4,
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'default' },
+          tokens: { backgroundColor: '#efefef' }
+        },
+        {
+          if: { priority: 'high', purpose: 'default' },
+          tokens: { backgroundColor: '#000000' }
+        },
+        {
+          if: { priority: 'low', purpose: 'brand' },
+          tokens: { backgroundColor: '#efefef' }
+        },
+        {
+          if: { priority: 'high', purpose: 'brand' },
+          tokens: { backgroundColor: '#000000' }
+        },
+        {
+          if: { priority: 'low', purpose: 'subtle' },
+          tokens: { backgroundColor: '#efefef' }
+        },
+        {
+          if: { priority: 'high', purpose: 'subtle' },
+          tokens: {
+            backgroundColor: '#c9c8c8',
+            iconColor: '#000000',
+            textColor: '#000000'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'success' },
+          tokens: { backgroundColor: '#c5f2cc' }
+        },
+        {
+          if: { priority: 'high', purpose: 'success' },
+          tokens: { backgroundColor: '#1c7b2b' }
+        },
+        {
+          if: { priority: 'low', purpose: 'warning' },
+          tokens: { backgroundColor: '#fff5d2' }
+        },
+        {
+          if: { priority: 'high', purpose: 'warning' },
+          tokens: { backgroundColor: '#c9370b' }
+        },
+        {
+          if: { priority: 'low', purpose: 'error' },
+          tokens: { backgroundColor: '#fcd3c6' }
+        },
+        {
+          if: { priority: 'high', purpose: 'error' },
+          tokens: { backgroundColor: '#c9370b' }
+        },
+        {
+          if: { priority: 'low', purpose: 'offer' },
+          tokens: { backgroundColor: '#e0d8fc' }
+        },
+        {
+          if: { priority: 'high', purpose: 'offer' },
+          tokens: { backgroundColor: '#7a3dfc' }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: '#ffffff',
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, priority: 'low' },
+          tokens: { backgroundColor: 'rgba(0, 0, 0, 0)' }
+        },
+        {
+          if: { inverse: true, priority: 'high' },
+          tokens: {
+            backgroundColor: '#ffffff',
+            iconColor: '#000000',
+            textColor: '#000000'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: null,
+        backgroundGradient: null,
+        borderColor: null,
+        borderRadius: null,
+        borderWidth: null,
+        fontName: 'StagSans',
+        fontSize: 16,
+        fontWeight: '400',
+        icon: PaletteIconToolTipFilled,
+        iconColor: '#000000',
+        iconGradient: null,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        textColor: '#000000',
+        textLineHeight: 1.14285714286
+      }
+    },
     StepTracker: {
       appearances: {
         inverse: {
@@ -7806,6 +7987,6 @@ const theme = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.59.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.61.0' }
 }
 export default theme

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^1.5.0",
-    "@telus-uds/system-theme-tokens": "^2.59.0"
+    "@telus-uds/palette-koodo": "^1.6.0",
+    "@telus-uds/system-theme-tokens": "^2.61.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^1.5.0"
+    "@telus-uds/palette-koodo": "^1.6.0"
   },
   "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.16.2"
+  "version": "5.18.0"
 }

package/theme.json

@@ -3006,7 +3006,18 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.dark10}"
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size8}"
+          }
+        },
+        {
+          "if": {
+            "expanded": true,
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dark10}",
+            "iconPaddingTop": "{palette.size.size0}"
           }
         },
         {
@@ -5489,13 +5500,14 @@
         "itemBulletHeight": "{palette.size.size4}",
         "itemBulletTextAlign": "{system.textAlign.right}",
         "itemBulletWidth": "{palette.size.size4}",
-        "itemColor": "{palette.color.black}",
+        "itemColor": "{system.color.none}",
         "itemFontName": "{palette.fontName.StagSans}",
         "itemFontSize": "{palette.fontSize.size16}",
         "itemFontWeight": "{palette.fontWeight.weight400}",
         "itemLineHeight": "{palette.lineHeight.ratio3to2}",
         "itemMarginTop": "{palette.size.size0}",
         "itemPaddingTop": "{palette.size.size0}",
+        "itemTextColor": "{palette.color.black}",
         "listGutter": "{palette.size.size8}"
       }
     },
@@ -7397,6 +7409,281 @@
         "width": "{system.size.none}"
       }
     },
+    "Status": {
+      "appearances": {
+        "inverse": {
+          "description": "Inverts the status colors",
+          "type": "variant",
+          "values": [true]
+        },
+        "priority": {
+          "type": "variant",
+          "values": ["default", "low", "high"]
+        },
+        "purpose": {
+          "type": "variant",
+          "values": ["default", "brand", "subtle", "success", "warning", "error", "offer"]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "purpose": "brand"
+          },
+          "tokens": {
+            "iconColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Tooltip}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "success"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CheckCircledFilled}",
+            "iconColor": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "warning"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ExclamationTriangle}",
+            "iconColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "error"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ExclamationOctagon}",
+            "iconColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "purpose": "offer"
+          },
+          "tokens": {
+            "icon": "{palette.icon.TagFilled}",
+            "iconColor": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low"
+          },
+          "tokens": {
+            "borderRadius": "{palette.radius.radius99}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}",
+            "borderRadius": "{palette.radius.radius99}",
+            "iconColor": "{palette.color.white}",
+            "paddingBottom": "{palette.size.size4}",
+            "paddingLeft": "{palette.size.size12}",
+            "paddingRight": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size4}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "default"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "brand"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.silver}",
+            "iconColor": "{palette.color.black}",
+            "textColor": "{palette.color.black}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.successLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "success"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.success}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.cautionLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "warning"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.dangerLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "error"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.danger}"
+          }
+        },
+        {
+          "if": {
+            "priority": "low",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purpleLight}"
+          }
+        },
+        {
+          "if": {
+            "priority": "high",
+            "purpose": "offer"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.purple}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}",
+            "iconColor": "{palette.color.white}",
+            "textColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "low"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.transparent}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "priority": "high"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.white}",
+            "iconColor": "{palette.color.black}",
+            "textColor": "{palette.color.black}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "backgroundGradient": "{system.gradient.none}",
+        "borderColor": "{system.color.none}",
+        "borderRadius": "{system.radius.none}",
+        "borderWidth": "{system.border.none}",
+        "fontName": "{palette.fontName.StagSans}",
+        "fontSize": "{palette.fontSize.size16}",
+        "fontWeight": "{palette.fontWeight.weight400}",
+        "icon": "{palette.icon.ToolTipFilled}",
+        "iconColor": "{palette.color.black}",
+        "iconGradient": "{system.gradient.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "textColor": "{palette.color.black}",
+        "textLineHeight": "{palette.lineHeight.ratio8to7}"
+      }
+    },
     "StepTracker": {
       "appearances": {
         "inverse": {