@telus-uds/theme-public-mobile 2.3.2 → 2.4.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Tue, 12 Sep 2023 15:30:06 GMT
+ * Generated on Mon, 16 Oct 2023 22:46:53 GMT
  *
  */
 
@@ -989,6 +989,7 @@ module.exports = {
           type: 'variant',
           values: [ 'alternative', 'subtle', 'grid', 'image', 'feature' ]
         },
+        borderRadius: { type: 'variant', values: [ 'none', 'small', 'large' ] },
         padding: {
           type: 'variant',
           values: [ 'narrow', 'intermediate', 'compact', 'custom' ]
@@ -1000,6 +1001,9 @@ module.exports = {
         }
       },
       rules: [
+        { if: { borderRadius: 'none' }, tokens: { borderRadius: 0 } },
+        { if: { borderRadius: 'small' }, tokens: { borderRadius: 6 } },
+        { if: { borderRadius: 'large' }, tokens: { borderRadius: 6 } },
         {
           if: { background: 'alternative' },
           tokens: { backgroundColor: '#fcf8ee', borderColor: '#cdcfd5' }
@@ -2270,31 +2274,33 @@ module.exports = {
           }
         },
         {
-          if: { hover: true, inverse: true },
-          tokens: { borderColor: '#f9cebf', iconColor: '#f9cebf' }
+          if: { hover: true, inactive: true },
+          tokens: { iconScale: 1 }
         },
         {
           if: { hover: true, password: true },
-          tokens: { backgroundColor: '#394056', iconColor: '#ffffff' }
+          tokens: {
+            backgroundColor: '#394056',
+            borderColor: '#394056',
+            iconColor: '#ffffff'
+          }
         },
         {
           if: { password: true },
           tokens: { borderColor: 'rgba(0, 0, 0, 0)' }
         },
+        {
+          if: { hover: true, inverse: true },
+          tokens: { borderColor: '#f9cebf', iconColor: '#f9cebf' }
+        },
         {
           if: { focus: true },
           tokens: {
-            borderColor: '#636c8c',
-            iconColor: '#636c8c',
             outerBorderColor: '#636c8c',
             outerBorderGap: 2,
             outerBorderWidth: 2
           }
         },
-        {
-          if: { focus: true, password: true },
-          tokens: { borderColor: '#636c8c', borderWidth: 2 }
-        },
         {
           if: { focus: true, inverse: true },
           tokens: {
@@ -2314,6 +2320,35 @@ module.exports = {
             outerBorderGap: 4
           }
         },
+        {
+          if: { password: true, pressed: true },
+          tokens: {
+            backgroundColor: '#636c8c',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            iconColor: '#ffffff',
+            outerBorderGap: 0,
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { inactive: true, password: true, pressed: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+            outerBorderGap: 0,
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { focus: true, password: true, pressed: false },
+          tokens: {
+            outerBorderColor: '#636c8c',
+            outerBorderGap: 0,
+            outerBorderWidth: 1
+          }
+        },
         {
           if: { inverse: true, pressed: true },
           tokens: {
@@ -2365,6 +2400,16 @@ module.exports = {
             outerBorderColor: '#636c8c'
           }
         },
+        {
+          if: { inactive: true, password: true },
+          tokens: {
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderWidth: 0,
+            iconColor: '#9c9faa',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
+          }
+        },
         {
           if: { focus: true, pressed: true, raised: true },
           tokens: {
@@ -2389,17 +2434,8 @@ module.exports = {
         },
         { if: { compact: true }, tokens: { outerBorderGap: 0 } },
         {
-          if: { inactive: true, password: true },
-          tokens: { iconColor: '#9c9faa', outerBorderWidth: 0 }
-        },
-        {
-          if: { hover: true, inactive: true, password: true },
+          if: { hover: true, password: true },
           tokens: { iconColor: '#9c9faa', outerBorderWidth: 0 }
-        },
-        { if: { password: true }, tokens: { outerBorderWidth: 0 } },
-        {
-          if: { focus: true, pressed: true },
-          tokens: { outerBorderGap: 1 }
         }
       ],
       tokens: {
@@ -2415,6 +2451,7 @@ module.exports = {
         borderTopRightRadius: null,
         borderTopWidth: 1,
         borderWidth: 2,
+        height: null,
         icon: PaletteIconAdd,
         iconColor: '#636c8c',
         iconScale: 1,
@@ -2425,7 +2462,8 @@ module.exports = {
         outerBorderGap: 0,
         outerBorderWidth: 0,
         padding: 4,
-        shadow: null
+        shadow: null,
+        width: null
       }
     },
     Image: { appearances: {}, rules: [], tokens: { borderRadius: 4 } },
@@ -5345,27 +5383,12 @@ module.exports = {
         }
       },
       rules: [
-        {
-          if: { pressed: true },
-          tokens: {
-            backgroundColor: '#2b3145',
-            borderColor: '#636c8c',
-            borderWidth: 1,
-            color: '#ffffff',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#ffffff',
-            outerBorderColor: 'rgba(0, 0, 0, 0)',
-            outerBorderWidth: 0
-          }
-        },
         {
           if: { focus: true },
           tokens: {
-            backgroundColor: '#d8dae2',
+            backgroundColor: '#fcf8ee',
             borderColor: '#636c8c',
             color: '#394056',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#394056',
             outerBorderColor: '#f9cebf',
             outerBorderGap: 0,
             outerBorderWidth: 3
@@ -5374,23 +5397,23 @@ module.exports = {
         {
           if: { hover: true },
           tokens: {
-            backgroundColor: '#636c8c',
-            borderColor: 'rgba(0, 0, 0, 0)',
-            borderWidth: 0,
-            color: '#ffffff',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#ffffff'
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f39d80'
           }
         },
         {
           if: { selected: true },
           tokens: {
-            backgroundColor: '#394056',
+            backgroundColor: '#f9f2dd',
             borderColor: '#636c8c',
-            color: '#ffffff',
+            color: '#394056',
             icon: PaletteIconXMark,
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#ffffff',
+            iconBackground: '#2b3145',
+            iconColor: '#f9f2dd',
             outerBorderColor: 'rgba(0, 0, 0, 0)',
             outerBorderWidth: 0
           }
@@ -5398,27 +5421,53 @@ module.exports = {
         {
           if: { hover: true, selected: true },
           tokens: {
-            backgroundColor: '#636c8c',
-            borderColor: 'rgba(0, 0, 0, 0)',
-            borderWidth: 0,
-            color: '#ffffff',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#ffffff'
+            backgroundColor: 'rgba(0, 0, 0, 0)',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f39d80'
           }
         },
         {
           if: { focus: true, selected: true },
           tokens: {
-            backgroundColor: '#394056',
+            backgroundColor: '#f9f2dd',
             borderColor: '#636c8c',
-            color: '#ffffff',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#ffffff',
+            color: '#394056',
+            iconBackground: '#2b3145',
+            iconColor: '#f9f2dd',
             outerBorderColor: '#f9cebf',
             outerBorderGap: 0,
             outerBorderWidth: 3
           }
         },
+        {
+          if: { pressed: true, selected: true },
+          tokens: {
+            backgroundColor: '#2b3145',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#f9f2dd',
+            iconBackground: '#f9f2dd',
+            iconColor: '#2b3145',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
+          }
+        },
+        {
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#2b3145',
+            borderColor: '#636c8c',
+            borderWidth: 1,
+            color: '#f9f2dd',
+            iconBackground: '#f9f2dd',
+            iconColor: '#2b3145',
+            outerBorderColor: 'rgba(0, 0, 0, 0)',
+            outerBorderWidth: 0
+          }
+        },
         {
           if: { inactive: true },
           tokens: {
@@ -5426,29 +5475,29 @@ module.exports = {
             borderColor: '#9c9faa',
             borderWidth: 1,
             color: '#cdcfd5',
-            iconBackground: 'rgba(0, 0, 0, 0)',
-            iconColor: '#cdcfd5'
+            iconBackground: '#cdcfd5',
+            iconColor: '#ffffff'
           }
         }
       ],
       tokens: {
         alignSelf: 'center',
-        backgroundColor: '#d8dae2',
+        backgroundColor: '#fcf8ee',
         borderColor: '#636c8c',
-        borderRadius: 8,
+        borderRadius: 32,
         borderWidth: 1,
         color: '#394056',
         fontName: 'SofiaPro',
         fontSize: 18,
-        fontWeight: '400',
+        fontWeight: '700',
         icon: PaletteIconAdd,
         iconAlignSelf: 'center',
-        iconBackground: 'rgba(0, 0, 0, 0)',
-        iconBorderRadius: 32,
-        iconColor: '#394056',
+        iconBackground: '#394056',
+        iconBorderRadius: 48,
+        iconColor: '#f9f2dd',
         iconPadding: 2,
         iconPosition: 'right',
-        iconSize: 20,
+        iconSize: 16,
         iconSpace: 1,
         iconTranslateX: 0,
         iconTranslateY: 0,
@@ -5460,8 +5509,8 @@ module.exports = {
         outerBorderGap: 2,
         outerBorderWidth: 0,
         paddingBottom: 10,
-        paddingLeft: 16,
-        paddingRight: 16,
+        paddingLeft: 11,
+        paddingRight: 11,
         paddingTop: 10,
         shadow: null,
         textAlign: 'center'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telus-uds/theme-public-mobile",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "Public Mobile theme",
   "keywords": [
     "public mobile"
@@ -14,11 +14,11 @@
     "theme.json"
   ],
   "devDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.0.0",
+    "@telus-uds/palette-public-mobile": "^1.1.0",
     "@telus-uds/system-theme-tokens": "^2.41.1"
   },
   "peerDependencies": {
-    "@telus-uds/palette-public-mobile": "^1.0.0"
+    "@telus-uds/palette-public-mobile": "^1.1.0"
   },
   "repository": {
     "type": "git",