@telus-uds/theme-public-mobile 2.26.0 → 2.28.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 26 Jul 2024 21:16:10 GMT
+ * Generated on Thu, 22 Aug 2024 18:15:53 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Fri, 26 Jul 2024 21:16:10 GMT
+ * Generated on Thu, 22 Aug 2024 18:15:53 GMT
  *
  */
 
@@ -1114,7 +1114,14 @@ const theme = {
       appearances: {
         background: {
           type: 'variant',
-          values: [ 'alternative', 'subtle', 'grid', 'image', 'feature' ]
+          values: [
+            'alternative',
+            'subtle',
+            'grid',
+            'image',
+            'feature',
+            'plain'
+          ]
         },
         borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         focus: {
@@ -1216,6 +1223,10 @@ const theme = {
           if: { background: 'feature' },
           tokens: { backgroundColor: '#ffffff', borderColor: '#f39d80' }
         },
+        {
+          if: { background: 'plain' },
+          tokens: { backgroundColor: '#fdfcf6', borderWidth: 0 }
+        },
         {
           if: { viewport: [ 'md', 'lg', 'xl' ] },
           tokens: {
@@ -3221,7 +3232,7 @@ const theme = {
         width: null
       }
     },
-    Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
+    Image: { appearances: {}, rules: [], tokens: { borderRadius: null } },
     InputLabel: {
       appearances: {},
       rules: [],
@@ -3773,7 +3784,7 @@ const theme = {
         }
       ],
       tokens: {
-        backdropColor: '#fefefc',
+        backdropColor: 'rgba(0, 0, 0, 0.8)',
         backdropOpacity: 1,
         backgroundColor: '#ffffff',
         borderColor: '#ffffff',
@@ -4184,13 +4195,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
       }
     },
@@ -4528,10 +4540,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,
@@ -4542,8 +4555,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
           }
         },
         {
@@ -4551,6 +4573,7 @@ const theme = {
           tokens: {
             amountFontSize: 36,
             bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 18,
             centsLineHeight: 0.975,
             currencySymbolFontSize: 18,
@@ -4569,6 +4592,7 @@ const theme = {
           tokens: {
             amountFontSize: 36,
             bottomTextFontSize: 16,
+            bottomTextLineHeight: 1.5,
             centsFontSize: 18,
             centsLineHeight: 0.975,
             currencySymbolFontSize: 18,
@@ -4591,7 +4615,7 @@ const theme = {
         amountLineHeight: 0.75,
         bottomLinksMarginLeft: 4,
         bottomTextFontSize: 18,
-        bottomTextLineHeight: 1.6,
+        bottomTextLineHeight: 1.55555555,
         bottomTextMarginTop: 0,
         centsFontName: 'BystanderSans',
         centsFontSize: 20,
@@ -4623,7 +4647,7 @@ const theme = {
         topTextFontName: 'SofiaPro',
         topTextFontSize: 18,
         topTextFontWeight: '700',
-        topTextLineHeight: 1.5,
+        topTextLineHeight: 1.55555555,
         topTextMarginBottom: 4
       }
     },
@@ -5569,6 +5593,7 @@ const theme = {
     },
     Select: {
       appearances: {
+        active: { type: 'state', values: [ true ] },
         focus: {
           description: 'Focus states for some input elements are well supported across web, RN, ios and android',
           type: 'state',
@@ -5624,6 +5649,10 @@ const theme = {
             color: '#9c9faa',
             icon: null
           }
+        },
+        {
+          if: { active: true },
+          tokens: { icon: PaletteIconChevronUp }
         }
       ],
       tokens: {
@@ -7746,6 +7775,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.60.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '2.62.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -14,11 +14,11 @@
     "theme.json"
   ],
   "devDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.11.0",
-    "@telus-uds/system-theme-tokens": "^2.60.0"
+    "@telus-uds/palette-public-mobile": "^1.12.0",
+    "@telus-uds/system-theme-tokens": "^2.62.0"
   },
   "peerDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.11.0"
+    "@telus-uds/palette-public-mobile": "^1.12.0"
   },
   "repository": {
     "type": "git",

package/theme.json

@@ -1420,7 +1420,7 @@
       "appearances": {
         "background": {
           "type": "variant",
-          "values": ["alternative", "subtle", "grid", "image", "feature"]
+          "values": ["alternative", "subtle", "grid", "image", "feature", "plain"]
         },
         "borderRadius": {
           "type": "variant",
@@ -1574,6 +1574,15 @@
             "borderColor": "{palette.color.apricot100}"
           }
         },
+        {
+          "if": {
+            "background": "plain"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.sand25}",
+            "borderWidth": "{palette.border.none}"
+          }
+        },
         {
           "if": {
             "viewport": ["md", "lg", "xl"]
@@ -4205,7 +4214,7 @@
       "appearances": {},
       "rules": [],
       "tokens": {
-        "borderRadius": "{palette.radius.radius4}"
+        "borderRadius": "{system.radius.none}"
       }
     },
     "InputLabel": {
@@ -4947,7 +4956,7 @@
         }
       ],
       "tokens": {
-        "backdropColor": "{palette.color.sand10}",
+        "backdropColor": "{palette.color.overlay}",
         "backdropOpacity": "{system.opacity.opaque}",
         "backgroundColor": "{palette.color.white}",
         "borderColor": "{palette.color.white}",
@@ -5382,13 +5391,14 @@
         "itemBulletHeight": "{palette.size.size4}",
         "itemBulletTextAlign": "{system.textAlign.right}",
         "itemBulletWidth": "{palette.size.size4}",
-        "itemColor": "{palette.color.slate100}",
+        "itemColor": "{system.color.none}",
         "itemFontName": "{palette.fontName.SofiaPro}",
         "itemFontSize": "{palette.fontSize.size18}",
         "itemFontWeight": "{palette.fontWeight.weight400}",
         "itemLineHeight": "{palette.lineHeight.ratio14to9}",
         "itemMarginTop": "{palette.size.size0}",
         "itemPaddingTop": "{palette.size.size0}",
+        "itemTextColor": "{palette.color.slate100}",
         "listGutter": "{palette.size.size8}"
       }
     },
@@ -5736,12 +5746,12 @@
       "rules": [
         {
           "if": {
-            "size": "large",
-            "viewport": ["lg", "xl"]
+            "size": "large"
           },
           "tokens": {
             "amountFontSize": "{palette.fontSize.size72}",
-            "bottomTextFontSize": "{palette.fontSize.size20}",
+            "bottomTextFontSize": "{palette.fontSize.size18}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio14to9}",
             "centsFontSize": "{palette.fontSize.size48}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size48}",
@@ -5752,8 +5762,20 @@
             "rateLineHeight": "{palette.lineHeight.ratio5to4}",
             "strikeThroughHeight": "{palette.size.size3}",
             "strikeThroughPosition": "{palette.size.size33}",
+            "topTextFontSize": "{palette.fontSize.size18}",
+            "topTextLineHeight": "{palette.lineHeight.ratio14to9}"
+          }
+        },
+        {
+          "if": {
+            "size": "large",
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "bottomTextFontSize": "{palette.fontSize.size20}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio7to5}",
             "topTextFontSize": "{palette.fontSize.size20}",
-            "topTextLineHeight": "{palette.lineHeight.ratio3to2}"
+            "topTextLineHeight": "{palette.lineHeight.ratio7to5}"
           }
         },
         {
@@ -5763,6 +5785,7 @@
           "tokens": {
             "amountFontSize": "{palette.fontSize.size36}",
             "bottomTextFontSize": "{palette.fontSize.size16}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
             "centsFontSize": "{palette.fontSize.size18}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size18}",
@@ -5783,6 +5806,7 @@
           "tokens": {
             "amountFontSize": "{palette.fontSize.size36}",
             "bottomTextFontSize": "{palette.fontSize.size16}",
+            "bottomTextLineHeight": "{palette.lineHeight.ratio3to2}",
             "centsFontSize": "{palette.fontSize.size18}",
             "centsLineHeight": "{palette.lineHeight.multiply14}",
             "currencySymbolFontSize": "{palette.fontSize.size18}",
@@ -5805,7 +5829,7 @@
         "amountLineHeight": "{palette.lineHeight.multiply19}",
         "bottomLinksMarginLeft": "{palette.size.size4}",
         "bottomTextFontSize": "{palette.fontSize.size18}",
-        "bottomTextLineHeight": "{palette.lineHeight.ratio8to5}",
+        "bottomTextLineHeight": "{palette.lineHeight.ratio14to9}",
         "bottomTextMarginTop": "{palette.size.size0}",
         "centsFontName": "{palette.fontName.BystanderSans}",
         "centsFontSize": "{palette.fontSize.size20}",
@@ -5837,7 +5861,7 @@
         "topTextFontName": "{palette.fontName.SofiaPro}",
         "topTextFontSize": "{palette.fontSize.size18}",
         "topTextFontWeight": "{palette.fontWeight.weight700}",
-        "topTextLineHeight": "{palette.lineHeight.ratio3to2}",
+        "topTextLineHeight": "{palette.lineHeight.ratio14to9}",
         "topTextMarginBottom": "{palette.size.size4}"
       }
     },
@@ -6927,6 +6951,7 @@
     },
     "Select": {
       "appearances": {
+        "active": "{appearances.Select.active}",
         "focus": "{appearances.Select.focus}",
         "hover": "{appearances.Select.hover}",
         "inactive": "{appearances.Select.inactive}",
@@ -6980,6 +7005,14 @@
             "color": "{palette.color.slate50}",
             "icon": "{system.icon.none}"
           }
+        },
+        {
+          "if": {
+            "active": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
         }
       ],
       "tokens": {