@telus-uds/theme-koodo 3.29.0 → 3.31.0

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Wed, 24 May 2023 23:38:59 GMT
+ * Generated on Tue, 30 May 2023 02:40:56 GMT
  *
  */
 
@@ -761,8 +761,20 @@ module.exports = {
       }
     },
     ButtonGroup: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [
+        { if: { viewport: [ 'xs', 'sm' ] }, tokens: { space: 2 } },
+        {
+          if: { viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: { space: 3 }
+        }
+      ],
       tokens: {
         alignItems: 'center',
         direction: 'row',
@@ -770,7 +782,7 @@ module.exports = {
         flexGrow: 0,
         flexShrink: 0,
         justifyContent: 'flex-start',
-        space: 3
+        space: 2
       }
     },
     ButtonGroupItem: {
@@ -811,73 +823,58 @@ module.exports = {
       rules: [
         {
           if: { pressed: true },
-          tokens: {
-            backgroundColor: '#016b6a',
-            borderColor: '#016b6a',
-            color: '#ffffff'
-          }
+          tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
         },
         {
           if: { focus: true },
           tokens: { outerBorderColor: '#016b6a' }
         },
-        { if: { hover: true }, tokens: { backgroundColor: '#1b4746' } },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
+        },
         {
           if: { selected: true },
-          tokens: {
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
-          }
+          tokens: { backgroundColor: '#016b6a', color: '#ffffff' }
         },
         {
-          if: { focus: true, pressed: true },
-          tokens: { outerBorderColor: '#258b0b' }
+          if: { hover: true, selected: true },
+          tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
+        },
+        {
+          if: { pressed: true, selected: true },
+          tokens: { backgroundColor: '#1b4746', color: '#ffffff' }
         },
         {
           if: { inactive: true },
           tokens: {
-            backgroundColor: '#666666',
+            backgroundColor: '#c9c8c8',
             borderWidth: 0,
             color: '#ffffff'
           }
         },
-        {
-          if: { selected: true },
-          tokens: {
-            opacity: 0.8,
-            outerBorderColor: '#016b6a',
-            outerBorderGap: 1,
-            outerBorderWidth: 4
-          }
-        },
-        {
-          if: { focus: true, selected: true },
-          tokens: { outerBorderColor: '#1b4746' }
-        },
         { if: { iconPosition: 'right' }, tokens: { iconSpace: 1 } }
       ],
       tokens: {
         alignSelf: 'flex-start',
-        backgroundColor: '#016b6a',
-        borderColor: '#1b4746',
+        backgroundColor: '#ffffff',
+        borderColor: '#016b6a',
         borderRadius: 4,
-        borderWidth: 0,
-        color: '#ffffff',
+        borderWidth: 1,
+        color: '#016b6a',
         fontName: 'StagSans',
-        fontSize: 14,
+        fontSize: 16,
         fontWeight: '600',
-        height: 36,
+        height: 48,
         iconSize: 20,
-        iconSpace: 3,
-        lineHeight: 1.4,
+        iconSpace: 2,
+        lineHeight: 1.5,
         minWidth: 0,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
-        outerBorderGap: 2,
-        outerBorderWidth: 2,
+        outerBorderGap: 3,
+        outerBorderWidth: 1,
         paddingBottom: 8,
         paddingLeft: 24,
         paddingRight: 24,
@@ -1550,6 +1547,23 @@ module.exports = {
         titleFontSize: 16
       }
     },
+    Fieldset: {
+      appearances: { error: { type: 'variant', values: [ true ] } },
+      rules: [ { if: { error: true }, tokens: { outlineColor: '#ee2c74' } } ],
+      tokens: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        outlineColor: 'rgba(0, 0, 0, 0)',
+        outlineOffset: null,
+        outlineWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0
+      }
+    },
     Footnote: {
       appearances: {},
       rules: [],
@@ -3411,28 +3425,44 @@ module.exports = {
         {
           if: { hover: true },
           tokens: {
+            borderColor: '#666666',
             outerBorderColor: '#efefef',
             outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
-          description: 'Pressed state matches hover state plus light grey background',
-          if: { pressed: true },
+          if: { focus: true },
           tokens: {
-            backgroundColor: '#efefef',
-            outerBorderColor: '#efefef',
+            outerBorderColor: '#17367d',
+            outerBorderGap: 2,
             outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            radioInputBorderColor: '#016b6a',
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
-          if: { focus: true },
+          if: { checked: true },
           tokens: {
-            outerBorderColor: '#666666',
-            outerBorderGap: 4,
-            outerBorderWidth: 2,
-            radioInputBorderColor: '#1b4746'
+            borderColor: '#c9c8c8',
+            radioInputBorderColor: '#016b6a',
+            radioInputBorderWidth: 2
+          }
+        },
+        {
+          description: 'Pressed state matches hover state plus light grey background',
+          if: { pressed: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            outerBorderColor: '#c9c8c8',
+            outerBorderGap: 0,
+            outerBorderWidth: 1,
+            radioOuterBorderColor: '#17367d',
+            radioOuterBorderGap: 2
           }
         },
         {
@@ -3441,8 +3471,13 @@ module.exports = {
             backgroundColor: '#efefef',
             borderColor: 'transparent',
             color: '#666666',
-            radioInputBackgroundColor: '#efefef',
-            radioInputBorderColor: '#c9c8c8'
+            radioCheckedBackgroundColor: '#c9c8c8',
+            radioInputBackgroundColor: '#c9c8c8',
+            radioInputBorderColor: '#c9c8c8',
+            radioInputSize: 16,
+            radioOuterBorderColor: '#c9c8c8',
+            radioOuterBorderGap: 2,
+            radioOuterBorderWidth: 1
           }
         },
         {
@@ -3456,7 +3491,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#000000',
+        borderColor: '#c9c8c8',
         borderRadius: 4,
         borderWidth: 1,
         color: '#000000',
@@ -3471,22 +3506,22 @@ module.exports = {
         fontWeight: '700',
         letterSpacing: 0,
         lineHeight: 1.4,
-        minWidth: 120,
+        minWidth: 288,
         outerBorderColor: 'transparent',
         outerBorderGap: 0,
         outerBorderWidth: 0,
         paddingBottom: 16,
-        paddingLeft: 10,
+        paddingLeft: 8,
         paddingRight: 16,
-        paddingTop: 16,
+        paddingTop: 12,
         radioCheckedBackgroundColor: '#016b6a',
-        radioCheckedSize: 12,
+        radioCheckedSize: 16,
         radioInputBackgroundColor: '#ffffff',
         radioInputBorderColor: '#016b6a',
         radioInputBorderWidth: 2,
         radioInputOutlineColor: 'rgba(0, 0, 0, 0)',
         radioInputOutlineWidth: 0,
-        radioInputSize: 20,
+        radioInputSize: 24,
         radioOuterBorderColor: 'transparent',
         radioOuterBorderGap: 0,
         radioOuterBorderWidth: 0,
@@ -3497,6 +3532,11 @@ module.exports = {
     },
     RadioCardGroup: {
       appearances: {
+        fullWidth: {
+          description: 'Makes cards always occupy the full width of the parent, regardless of viewport',
+          type: 'variant',
+          values: [ true ]
+        },
         viewport: {
           description: 'The size label for the current screen viewport based on the current screen width',
           type: 'state',
@@ -3505,13 +3545,27 @@ module.exports = {
       },
       rules: [
         {
-          if: { viewport: [ 'lg', 'xl' ] },
-          tokens: { direction: 'column' }
+          if: { fullWidth: null, viewport: [ 'md', 'lg', 'xl' ] },
+          tokens: { direction: 'row', space: 5 }
         }
       ],
-      tokens: { direction: 'row', fieldSpace: 2, space: 2 }
+      tokens: { direction: 'column', fieldSpace: 3, space: 3 }
+    },
+    RadioGroup: {
+      appearances: {},
+      rules: [],
+      tokens: {
+        borderBottomLeftRadius: 1,
+        borderBottomRightRadius: 1,
+        borderTopLeftRadius: 1,
+        borderTopRightRadius: 1,
+        fieldSpace: 2,
+        outlineOffset: 8,
+        outlineWidth: 1,
+        showIcon: true,
+        space: 2
+      }
     },
-    RadioGroup: { appearances: {}, rules: [], tokens: { fieldSpace: 2, space: 2 } },
     Ribbon: {
       appearances: {
         purpose: {
@@ -4536,6 +4590,11 @@ module.exports = {
           type: 'state',
           values: [ true ]
         },
+        numeric: {
+          description: 'capability to only allow numbers',
+          type: 'variant',
+          values: [ true ]
+        },
         password: {
           description: 'capability that helps masking and unmasking text',
           type: 'variant',
@@ -4707,22 +4766,37 @@ module.exports = {
         }
       },
       rules: [
-        { if: { hover: true }, tokens: { backgroundColor: '#1b4746' } },
+        {
+          if: { hover: true },
+          tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
+        },
         {
           if: { pressed: true },
-          tokens: { backgroundColor: '#c3efff' }
+          tokens: { backgroundColor: '#b5b4b4', switchColor: '#505050' }
         },
         {
           if: { focus: true },
-          tokens: { outerBorderColor: '#016b6a' }
+          tokens: {
+            backgroundColor: '#b5b4b4',
+            outerBorderColor: '#17367d',
+            outerBorderGap: 3,
+            outerBorderWidth: 1,
+            switchColor: '#505050'
+          }
         },
         {
           if: { selected: true },
-          tokens: { backgroundColor: '#00a1db' }
+          tokens: {
+            backgroundColor: '#e5f7fb',
+            icon: PaletteIconCheck,
+            iconColor: '#ffffff',
+            switchBorderColor: 'rgba(0, 0, 0, 0)',
+            switchColor: '#016b6a'
+          }
         },
         {
           if: { hover: true, selected: true },
-          tokens: { backgroundColor: '#0083b3' }
+          tokens: { backgroundColor: '#bbeaf5' }
         },
         {
           if: { pressed: true, selected: true },
@@ -4730,54 +4804,84 @@ module.exports = {
         },
         {
           if: { focus: true, selected: true },
-          tokens: { outerBorderColor: '#00a1db' }
+          tokens: { outerBorderColor: '#17367d', outerBorderWidth: 1 }
+        },
+        {
+          if: { focus: true, pressed: true },
+          tokens: {
+            outerBorderColor: '#17367d',
+            outerBorderGap: 3,
+            outerBorderWidth: 1
+          }
         },
         {
           if: { focus: true, pressed: true, selected: true },
-          tokens: { outerBorderColor: '#c3efff' }
+          tokens: { outerBorderColor: '#17367d' }
         },
-        { if: { inactive: true }, tokens: { opacity: 0.5 } }
+        {
+          if: { inactive: true },
+          tokens: {
+            backgroundColor: '#efefef',
+            iconColor: '#c9c8c8',
+            opacity: 0.5,
+            switchBorderColor: 'rgba(0, 0, 0, 0)',
+            switchColor: '#ffffff'
+          }
+        }
       ],
       tokens: {
         alignSelf: 'flex-start',
-        backgroundColor: '#016b6a',
+        backgroundColor: '#c9c8c8',
         borderColor: 'rgba(0, 0, 0, 0)',
-        borderRadius: 4,
+        borderRadius: 32,
         borderWidth: 0,
         icon: null,
-        iconColor: 'rgba(0, 0, 0, 0)',
-        iconSize: 16,
+        iconColor: null,
+        iconSize: 12,
         labelColor: '#000000',
         labelFontName: 'StagSans',
         labelFontSize: 16,
-        labelFontWeight: '400',
+        labelFontWeight: '600',
         labelLineHeight: 1.5,
         labelMarginLeft: 8,
         opacity: 1,
         outerBackgroundColor: 'rgba(0, 0, 0, 0)',
         outerBorderColor: 'rgba(0, 0, 0, 0)',
-        outerBorderGap: 2,
-        outerBorderWidth: 2,
-        paddingBottom: 4,
-        paddingLeft: 8,
-        paddingRight: 8,
-        paddingTop: 4,
+        outerBorderGap: 0,
+        outerBorderWidth: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        paddingTop: 0,
         shadow: null,
         switchBorderColor: 'rgba(0, 0, 0, 0)',
         switchBorderRadius: 32,
         switchBorderWidth: 0,
-        switchColor: '#ffffff',
-        switchShadow: null,
-        switchSize: 24,
+        switchColor: '#595959',
+        switchShadow: {
+          blur: 2,
+          color: 'rgba(0, 0, 0, 0.1)',
+          inset: false,
+          offsetX: 0,
+          offsetY: 2,
+          spread: 0
+        },
+        switchSize: 18,
         trackBorderColor: 'rgba(0, 0, 0, 0)',
-        trackBorderRadius: 0,
-        trackBorderWidth: 0,
-        width: 64
+        trackBorderRadius: 12,
+        trackBorderWidth: 3,
+        width: 40
       }
     },
     ToggleSwitchGroup: {
-      appearances: {},
-      rules: [],
+      appearances: {
+        viewport: {
+          description: 'The size label for the current screen viewport based on the current screen width',
+          type: 'state',
+          values: [ 'xs', 'sm', 'md', 'lg', 'xl' ]
+        }
+      },
+      rules: [ { if: { viewport: [ 'lg', 'xl' ] }, tokens: { space: 3 } } ],
       tokens: {
         alignItems: 'flex-start',
         direction: 'column',
@@ -5228,5 +5332,5 @@ module.exports = {
       tokens: { size: 96 }
     }
   },
-  metadata: { name: 'theme-koodo', themeTokensVersion: '2.27.0' }
+  metadata: { name: 'theme-koodo', themeTokensVersion: '2.28.0' }
 }

package/package.json

@@ -5,8 +5,8 @@
   },
   "description": "Koodo theme",
   "devDependencies": {
-    "@telus-uds/palette-koodo": "^0.16.1",
-    "@telus-uds/system-theme-tokens": "^2.27.0"
+    "@telus-uds/palette-koodo": "^0.17.0",
+    "@telus-uds/system-theme-tokens": "^2.28.0"
   },
   "files": [
     "build",
@@ -20,7 +20,7 @@
   "main": "build/rn/theme.js",
   "name": "@telus-uds/theme-koodo",
   "peerDependencies": {
-    "@telus-uds/palette-koodo": "^0.16.1"
+    "@telus-uds/palette-koodo": "^0.17.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": "3.29.0"
+  "version": "3.31.0"
 }