@telus-uds/theme-public-mobile 2.25.0 → 2.27.0

package/build/web/spacingScale.js

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

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 19 Jul 2024 18:12:23 GMT
+ * Generated on Mon, 12 Aug 2024 06:25:13 GMT
  *
  */
 
@@ -29,6 +29,7 @@ import PaletteIconBulletFill from '@telus-uds/palette-public-mobile/build/rn/ico
 import PaletteIconMobileXClose from '@telus-uds/palette-public-mobile/build/rn/icons/MobileXClose'
 import PaletteIconSearch from '@telus-uds/palette-public-mobile/build/rn/icons/Search'
 import PaletteIconInfo from '@telus-uds/palette-public-mobile/build/rn/icons/Info'
+import PaletteIconMobileRewards from '@telus-uds/palette-public-mobile/build/rn/icons/MobileRewards'
 import PaletteIconXMark from '@telus-uds/palette-public-mobile/build/rn/icons/XMark'
 import PaletteIconQuoteLeft from '@telus-uds/palette-public-mobile/build/rn/icons/QuoteLeft'
 import PaletteIconQuoteLeftArrow from '@telus-uds/palette-public-mobile/build/rn/icons/QuoteLeftArrow'
@@ -3772,7 +3773,7 @@ const theme = {
         }
       ],
       tokens: {
-        backdropColor: '#fefefc',
+        backdropColor: 'rgba(0, 0, 0, 0.8)',
         backdropOpacity: 1,
         backgroundColor: '#ffffff',
         borderColor: '#ffffff',
@@ -4183,13 +4184,14 @@ const theme = {
         itemBulletHeight: 4,
         itemBulletTextAlign: 'right',
         itemBulletWidth: 4,
-        itemColor: '#394056',
+        itemColor: null,
         itemFontName: 'SofiaPro',
         itemFontSize: 18,
         itemFontWeight: '400',
         itemLineHeight: 1.55555555,
         itemMarginTop: 0,
         itemPaddingTop: 0,
+        itemTextColor: '#394056',
         listGutter: 8
       }
     },
@@ -4527,10 +4529,11 @@ const theme = {
       },
       rules: [
         {
-          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          if: { size: 'large' },
           tokens: {
             amountFontSize: 72,
-            bottomTextFontSize: 20,
+            bottomTextFontSize: 18,
+            bottomTextLineHeight: 1.55555555,
             centsFontSize: 48,
             centsLineHeight: 0.975,
             currencySymbolFontSize: 48,
@@ -4541,8 +4544,17 @@ const theme = {
             rateLineHeight: 1.25,
             strikeThroughHeight: 3,
             strikeThroughPosition: 33,
+            topTextFontSize: 18,
+            topTextLineHeight: 1.55555555
+          }
+        },
+        {
+          if: { size: 'large', viewport: [ 'lg', 'xl' ] },
+          tokens: {
+            bottomTextFontSize: 20,
+            bottomTextLineHeight: 1.4,
             topTextFontSize: 20,
-            topTextLineHeight: 1.5
+            topTextLineHeight: 1.4
           }
         },
         {
@@ -4550,6 +4562,7 @@ const theme = {
           tokens: {
             amountFontSize: 36,
             bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 18,
             centsLineHeight: 0.975,
             currencySymbolFontSize: 18,
@@ -4568,6 +4581,7 @@ const theme = {
           tokens: {
             amountFontSize: 36,
             bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 18,
             centsLineHeight: 0.975,
             currencySymbolFontSize: 18,
@@ -4590,7 +4604,7 @@ const theme = {
         amountLineHeight: 0.75,
         bottomLinksMarginLeft: 4,
         bottomTextFontSize: 18,
-        bottomTextLineHeight: 1.6,
+        bottomTextLineHeight: 1.55555555,
         bottomTextMarginTop: 0,
         centsFontName: 'BystanderSans',
         centsFontSize: 20,
@@ -4622,7 +4636,7 @@ const theme = {
         topTextFontName: 'SofiaPro',
         topTextFontSize: 18,
         topTextFontWeight: '700',
-        topTextLineHeight: 1.5,
+        topTextLineHeight: 1.55555555,
         topTextMarginBottom: 4
       }
     },
@@ -5897,6 +5911,187 @@ 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: '#394056' } },
+        { if: { purpose: 'subtle' }, tokens: { iconColor: '#6a7080' } },
+        {
+          if: { purpose: 'success' },
+          tokens: { icon: PaletteIconCheckMark, iconColor: '#2b826e' }
+        },
+        {
+          if: { purpose: 'warning' },
+          tokens: { icon: PaletteIconWarningError, iconColor: '#bf1722' }
+        },
+        {
+          if: { purpose: 'error' },
+          tokens: { icon: PaletteIconWarningError, iconColor: '#bf1722' }
+        },
+        {
+          if: { purpose: 'offer' },
+          tokens: { icon: PaletteIconMobileRewards, iconColor: '#f39d80' }
+        },
+        {
+          if: { priority: 'low' },
+          tokens: {
+            borderRadius: 99,
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4
+          }
+        },
+        {
+          if: { priority: 'high' },
+          tokens: {
+            backgroundColor: '#394056',
+            borderRadius: 99,
+            iconColor: '#cdcfd5',
+            paddingBottom: 4,
+            paddingLeft: 12,
+            paddingRight: 12,
+            paddingTop: 4,
+            textColor: '#cdcfd5'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'default' },
+          tokens: { backgroundColor: '#cdcfd5' }
+        },
+        {
+          if: { priority: 'high', purpose: 'default' },
+          tokens: { backgroundColor: '#394056' }
+        },
+        {
+          if: { priority: 'low', purpose: 'brand' },
+          tokens: { backgroundColor: '#cdcfd5' }
+        },
+        {
+          if: { priority: 'high', purpose: 'brand' },
+          tokens: { backgroundColor: '#394056' }
+        },
+        {
+          if: { priority: 'low', purpose: 'subtle' },
+          tokens: { backgroundColor: '#cdcfd5' }
+        },
+        {
+          if: { priority: 'high', purpose: 'subtle' },
+          tokens: {
+            backgroundColor: '#cdcfd5',
+            iconColor: '#f5f5f7',
+            textColor: '#f5f5f7'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'success' },
+          tokens: { backgroundColor: '#eaf3f1', iconColor: '#2b826e' }
+        },
+        {
+          if: { priority: 'high', purpose: 'success' },
+          tokens: {
+            backgroundColor: '#2b826e',
+            iconColor: '#eaf3f1',
+            textColor: '#eaf3f1'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'warning' },
+          tokens: { backgroundColor: '#f9e8e9', iconColor: '#bf1722' }
+        },
+        {
+          if: { priority: 'high', purpose: 'warning' },
+          tokens: {
+            backgroundColor: '#bf1722',
+            iconColor: '#f9e8e9',
+            textColor: '#f9e8e9'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'error' },
+          tokens: { backgroundColor: '#f9e8e9', iconColor: '#bf1722' }
+        },
+        {
+          if: { priority: 'high', purpose: 'error' },
+          tokens: {
+            backgroundColor: '#bf1722',
+            iconColor: '#f9e8e9',
+            textColor: '#f9e8e9'
+          }
+        },
+        {
+          if: { priority: 'low', purpose: 'offer' },
+          tokens: { backgroundColor: '#cdcfd5', iconColor: '#f39d80' }
+        },
+        {
+          if: { priority: 'high', purpose: 'offer' },
+          tokens: {
+            backgroundColor: '#f39d80',
+            iconColor: '#394056',
+            textColor: '#394056'
+          }
+        },
+        {
+          if: { inverse: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            iconColor: '#ffffff',
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, priority: 'low' },
+          tokens: {
+            backgroundColor: '#394056',
+            iconColor: '#ffffff',
+            textColor: '#ffffff'
+          }
+        },
+        {
+          if: { inverse: true, priority: 'high' },
+          tokens: {
+            backgroundColor: '#6a7080',
+            iconColor: '#ffffff',
+            textColor: '#ffffff'
+          }
+        }
+      ],
+      tokens: {
+        backgroundColor: null,
+        backgroundGradient: null,
+        borderColor: null,
+        borderRadius: null,
+        borderWidth: null,
+        fontName: 'SofiaPro',
+        fontSize: 18,
+        fontWeight: '400',
+        icon: PaletteIconWarningError,
+        iconColor: '#394056',
+        iconGradient: null,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
+        textColor: '#394056',
+        textLineHeight: 1.153
+      }
+    },
     StepTracker: {
       appearances: {
         inverse: {
@@ -7564,6 +7759,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.59.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.61.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -14,11 +14,11 @@
     "theme.json"
   ],
   "devDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.10.0",
-    "@telus-uds/system-theme-tokens": "^2.59.0"
+    "@telus-uds/palette-public-mobile": "^1.11.0",
+    "@telus-uds/system-theme-tokens": "^2.61.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.10.0"
+    "@telus-uds/palette-public-mobile": "^1.11.0"
   },
   "repository": {
     "type": "git",