@telus-uds/theme-public-mobile 4.7.0 → 4.9.0

package/build/web/spacingScale.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 01 May 2025 20:06:01 GMT
+ * Generated on Tue, 10 Jun 2025 20:16:24 GMT
  *
  */
 

package/build/web/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Thu, 01 May 2025 20:06:01 GMT
+ * Generated on Tue, 10 Jun 2025 20:16:24 GMT
  *
  */
 
@@ -31,8 +31,8 @@ import PaletteIconExpand from '@telus-uds/palette-public-mobile/build/rn/icons/E
 import PaletteIconPlayVideo from '@telus-uds/palette-public-mobile/build/rn/icons/PlayVideo'
 import PaletteIconBulletFill from '@telus-uds/palette-public-mobile/build/rn/icons/BulletFill'
 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 PaletteIconSearch from '@telus-uds/palette-public-mobile/build/rn/icons/Search'
 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'
@@ -66,7 +66,7 @@ const theme = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success', 'warning' ]
+          values: [ 'error', 'success', 'warning', 'feature' ]
         }
       },
       rules: [
@@ -144,16 +144,27 @@ const theme = {
         size: {
           description: 'used for full-screen spinners',
           type: 'variant',
-          values: [ 'large' ]
-        }
+          values: [ 'large', 'small' ]
+        },
+        style: { type: 'variant', values: [ 'dots' ] }
       },
-      rules: [ { if: { size: 'large' }, tokens: { size: 48, thickness: 4 } } ],
+      rules: [
+        {
+          if: { size: 'large' },
+          tokens: { dotSize: 12, size: 48, thickness: 4 }
+        },
+        {
+          if: { size: 'small' },
+          tokens: { dotSize: 6, size: 24, thickness: 3 }
+        }
+      ],
       tokens: {
         color: '#394056',
-        dotSize: 6,
+        dotSize: 12,
+        fullScreenOverlayBackground: '#9c9faa',
         indicatorBackgroundColor: '#cdcfd5',
-        size: 24,
-        thickness: 3
+        size: 48,
+        thickness: 4
       }
     },
     Autocomplete: {
@@ -3056,7 +3067,7 @@ const theme = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success', 'warning' ]
+          values: [ 'error', 'success', 'warning', 'feature' ]
         }
       },
       rules: [
@@ -4564,7 +4575,7 @@ const theme = {
       tokens: {
         backdropColor: 'rgba(0, 0, 0, 0.8)',
         backdropOpacity: 1,
-        backgroundColor: '#ffffff',
+        backgroundColor: '#fefefc',
         borderColor: '#ffffff',
         borderRadius: 4,
         borderWidth: 0,
@@ -4657,12 +4668,14 @@ const theme = {
         buttonIconBackgroundColor: 'rgba(0, 0, 0, 0)',
         buttonIconPadding: 4,
         buttonIconSize: 20,
+        containerBorderColor: '#cdcfd5',
         contentMarginBottom: 32,
         contentMarginLeft: 16,
         contentMarginRight: 16,
         contentMarginTop: 24,
         contentPaddingLeft: 16,
         contentPaddingRight: 16,
+        dividerColor: '#cdcfd5',
         headerFontColor: '#394056',
         headerFontName: 'SofiaPro',
         headerFontSize: 24,
@@ -4819,7 +4832,7 @@ const theme = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success', 'warning' ]
+          values: [ 'error', 'success', 'warning', 'feature' ]
         },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
@@ -4916,6 +4929,17 @@ const theme = {
             icon: PaletteIconWarningError,
             iconColor: '#ffffff'
           }
+        },
+        {
+          if: { validation: 'feature' },
+          tokens: {
+            backgroundColor: '#fcf8ee',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            color: '#394056',
+            dismissIcon: null,
+            icon: PaletteIconInfo,
+            iconColor: '#394056'
+          }
         }
       ],
       tokens: {
@@ -6482,7 +6506,7 @@ const theme = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success', 'warning' ]
+          values: [ 'error', 'success', 'warning', 'feature' ]
         }
       },
       rules: [
@@ -7828,7 +7852,7 @@ const theme = {
         validation: {
           description: 'Validation states for form inputs',
           type: 'state',
-          values: [ 'error', 'success', 'warning' ]
+          values: [ 'error', 'success', 'warning', 'feature' ]
         }
       },
       rules: [
@@ -8114,6 +8138,10 @@ const theme = {
         labelFontWeight: '400',
         labelLineHeight: 1.55555555,
         labelMarginLeft: 0,
+        mobileSwitchSize: 24,
+        mobileTrackBorderWidth: 4,
+        mobileTrackHeight: 32,
+        mobileWidth: 48,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
@@ -8753,6 +8781,6 @@ const theme = {
       tokens: { size: 80 }
     }
   },
-  metadata: { name: 'theme-public-mobile', themeTokensVersion: '4.5.0' }
+  metadata: { name: 'theme-public-mobile', themeTokensVersion: '4.7.0' }
 }
 export default theme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "4.7.0",
+  "version": "4.9.0",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -16,7 +16,7 @@
   ],
   "devDependencies": {
     "@telus-uds/palette-public-mobile": "^3.0.0",
-    "@telus-uds/system-theme-tokens": "^4.5.0"
+    "@telus-uds/system-theme-tokens": "^4.7.0"
   },
   "peerDependencies": {
     "@telus-uds/palette-public-mobile": "^3.0.0"

package/theme.json

@@ -94,7 +94,11 @@
         "size": {
           "description": "used for full-screen spinners",
           "type": "variant",
-          "values": ["large"]
+          "values": ["large", "small"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["dots"]
         }
       },
       "rules": [
@@ -103,17 +107,29 @@
             "size": "large"
           },
           "tokens": {
+            "dotSize": "{palette.size.size12}",
             "size": "{palette.size.size48}",
             "thickness": "{palette.border.border4}"
           }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "dotSize": "{palette.size.size6}",
+            "size": "{palette.size.size24}",
+            "thickness": "{palette.border.border3}"
+          }
         }
       ],
       "tokens": {
         "color": "{palette.color.slate100}",
-        "dotSize": "{palette.size.size6}",
+        "dotSize": "{palette.size.size12}",
+        "fullScreenOverlayBackground": "{palette.color.slate50}",
         "indicatorBackgroundColor": "{palette.color.slate25}",
-        "size": "{palette.size.size24}",
-        "thickness": "{palette.border.border3}"
+        "size": "{palette.size.size48}",
+        "thickness": "{palette.border.border4}"
       }
     },
     "Autocomplete": {
@@ -6569,7 +6585,7 @@
       "tokens": {
         "backdropColor": "{palette.color.overlay}",
         "backdropOpacity": "{system.opacity.opaque}",
-        "backgroundColor": "{palette.color.white}",
+        "backgroundColor": "{palette.color.sand10}",
         "borderColor": "{palette.color.white}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.size.size0}",
@@ -6660,12 +6676,14 @@
         "buttonIconBackgroundColor": "{palette.color.transparent}",
         "buttonIconPadding": "{palette.size.size4}",
         "buttonIconSize": "{palette.size.size20}",
+        "containerBorderColor": "{palette.color.slate25}",
         "contentMarginBottom": "{palette.size.size32}",
         "contentMarginLeft": "{palette.size.size16}",
         "contentMarginRight": "{palette.size.size16}",
         "contentMarginTop": "{palette.size.size24}",
         "contentPaddingLeft": "{palette.size.size16}",
         "contentPaddingRight": "{palette.size.size16}",
+        "dividerColor": "{palette.color.slate25}",
         "headerFontColor": "{palette.color.slate100}",
         "headerFontName": "{palette.fontName.SofiaPro}",
         "headerFontSize": "{palette.fontSize.size24}",
@@ -6923,6 +6941,19 @@
             "icon": "{palette.icon.WarningError}",
             "iconColor": "{palette.color.white}"
           }
+        },
+        {
+          "if": {
+            "validation": "feature"
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.sand50}",
+            "borderColor": "{palette.color.transparent}",
+            "color": "{palette.color.slate100}",
+            "dismissIcon": "{system.icon.none}",
+            "icon": "{palette.icon.Info}",
+            "iconColor": "{palette.color.slate100}"
+          }
         }
       ],
       "tokens": {
@@ -10496,6 +10527,10 @@
         "labelFontWeight": "{palette.fontWeight.weight400}",
         "labelLineHeight": "{palette.lineHeight.ratio14to9}",
         "labelMarginLeft": "{palette.size.size0}",
+        "mobileSwitchSize": "{palette.size.size24}",
+        "mobileTrackBorderWidth": "{palette.border.border4}",
+        "mobileTrackHeight": "{palette.size.size32}",
+        "mobileWidth": "{palette.size.size48}",
         "opacity": "{system.opacity.opaque}",
         "outerBackgroundColor": "{palette.color.transparent}",
         "outerBorderColor": "{palette.color.transparent}",