@telus-uds/theme-koodo 3.30.0 → 3.31.0

package/build/android/theme.json

@@ -5687,6 +5687,26 @@
             "paddingTop": 16
           }
         },
+        {
+          "if": {
+            "checked": true
+          },
+          "tokens": {
+            "borderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "radioInputBorderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "radioInputBorderWidth": 2
+          }
+        },
         {
           "description": "Pressed state matches hover state plus light grey background",
           "if": {
@@ -5700,18 +5720,20 @@
               "alpha": 1
             },
             "outerBorderColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
-            "outerBorderWidth": 2,
-            "radioInputBorderColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+            "outerBorderGap": 0,
+            "outerBorderWidth": 1,
+            "radioOuterBorderColor": {
+              "red": 0.0902,
+              "green": 0.21176,
+              "blue": 0.4902,
               "alpha": 1
-            }
+            },
+            "radioOuterBorderGap": 2
           }
         },
         {
@@ -5737,10 +5759,16 @@
               "blue": 0.4,
               "alpha": 1
             },
+            "radioCheckedBackgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
             "radioInputBackgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
             "radioInputBorderColor": {
@@ -5748,7 +5776,16 @@
               "green": 0.78431,
               "blue": 0.78431,
               "alpha": 1
-            }
+            },
+            "radioInputSize": 16,
+            "radioOuterBorderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "radioOuterBorderGap": 2,
+            "radioOuterBorderWidth": 1
           }
         },
         {
@@ -5785,9 +5822,9 @@
           "alpha": 1
         },
         "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
           "alpha": 1
         },
         "borderRadius": 4,
@@ -5809,7 +5846,7 @@
         "fontWeight": 700,
         "letterSpacing": 0,
         "lineHeight": 1.4,
-        "minWidth": 120,
+        "minWidth": 288,
         "outerBorderColor": {
           "red": 0,
           "green": 0,
@@ -5819,16 +5856,16 @@
         "outerBorderGap": 0,
         "outerBorderWidth": 0,
         "paddingBottom": 16,
-        "paddingLeft": 10,
+        "paddingLeft": 8,
         "paddingRight": 16,
-        "paddingTop": 16,
+        "paddingTop": 12,
         "radioCheckedBackgroundColor": {
           "red": 0.00392,
           "green": 0.41961,
           "blue": 0.41569,
           "alpha": 1
         },
-        "radioCheckedSize": 12,
+        "radioCheckedSize": 16,
         "radioInputBackgroundColor": {
           "red": 1,
           "green": 1,
@@ -5849,7 +5886,7 @@
           "alpha": 0
         },
         "radioInputOutlineWidth": 0,
-        "radioInputSize": 20,
+        "radioInputSize": 24,
         "radioOuterBorderColor": {
           "red": 0,
           "green": 0,
@@ -5865,6 +5902,11 @@
     },
     "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",
           "values": ["xs", "sm", "md", "lg", "xl"],
@@ -5874,17 +5916,19 @@
       "rules": [
         {
           "if": {
-            "viewport": ["lg", "xl"]
+            "fullWidth": null,
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
-            "direction": "column"
+            "direction": "row",
+            "space": 5
           }
         }
       ],
       "tokens": {
-        "direction": "row",
-        "fieldSpace": 2,
-        "space": 2
+        "direction": "column",
+        "fieldSpace": 3,
+        "space": 3
       }
     },
     "RadioGroup": {

package/build/ios/theme.json

@@ -5687,6 +5687,26 @@
             "paddingTop": 16
           }
         },
+        {
+          "if": {
+            "checked": true
+          },
+          "tokens": {
+            "borderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "radioInputBorderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "radioInputBorderWidth": 2
+          }
+        },
         {
           "description": "Pressed state matches hover state plus light grey background",
           "if": {
@@ -5700,18 +5720,20 @@
               "alpha": 1
             },
             "outerBorderColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
-            "outerBorderWidth": 2,
-            "radioInputBorderColor": {
-              "red": 0.10588,
-              "green": 0.27843,
-              "blue": 0.27451,
+            "outerBorderGap": 0,
+            "outerBorderWidth": 1,
+            "radioOuterBorderColor": {
+              "red": 0.0902,
+              "green": 0.21176,
+              "blue": 0.4902,
               "alpha": 1
-            }
+            },
+            "radioOuterBorderGap": 2
           }
         },
         {
@@ -5737,10 +5759,16 @@
               "blue": 0.4,
               "alpha": 1
             },
+            "radioCheckedBackgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
             "radioInputBackgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
             "radioInputBorderColor": {
@@ -5748,7 +5776,16 @@
               "green": 0.78431,
               "blue": 0.78431,
               "alpha": 1
-            }
+            },
+            "radioInputSize": 16,
+            "radioOuterBorderColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "radioOuterBorderGap": 2,
+            "radioOuterBorderWidth": 1
           }
         },
         {
@@ -5785,9 +5822,9 @@
           "alpha": 1
         },
         "borderColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
           "alpha": 1
         },
         "borderRadius": 4,
@@ -5809,7 +5846,7 @@
         "fontWeight": 700,
         "letterSpacing": 0,
         "lineHeight": 1.4,
-        "minWidth": 120,
+        "minWidth": 288,
         "outerBorderColor": {
           "red": 0,
           "green": 0,
@@ -5819,16 +5856,16 @@
         "outerBorderGap": 0,
         "outerBorderWidth": 0,
         "paddingBottom": 16,
-        "paddingLeft": 10,
+        "paddingLeft": 8,
         "paddingRight": 16,
-        "paddingTop": 16,
+        "paddingTop": 12,
         "radioCheckedBackgroundColor": {
           "red": 0.00392,
           "green": 0.41961,
           "blue": 0.41569,
           "alpha": 1
         },
-        "radioCheckedSize": 12,
+        "radioCheckedSize": 16,
         "radioInputBackgroundColor": {
           "red": 1,
           "green": 1,
@@ -5849,7 +5886,7 @@
           "alpha": 0
         },
         "radioInputOutlineWidth": 0,
-        "radioInputSize": 20,
+        "radioInputSize": 24,
         "radioOuterBorderColor": {
           "red": 0,
           "green": 0,
@@ -5865,6 +5902,11 @@
     },
     "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",
           "values": ["xs", "sm", "md", "lg", "xl"],
@@ -5874,17 +5916,19 @@
       "rules": [
         {
           "if": {
-            "viewport": ["lg", "xl"]
+            "fullWidth": null,
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
-            "direction": "column"
+            "direction": "row",
+            "space": 5
           }
         }
       ],
       "tokens": {
-        "direction": "row",
-        "fieldSpace": 2,
-        "space": 2
+        "direction": "column",
+        "fieldSpace": 3,
+        "space": 3
       }
     },
     "RadioGroup": {

package/build/rn/theme.js

@@ -1,7 +1,7 @@
 /*
  *
  * Do not edit directly
- * Generated on Sat, 27 May 2023 00:36:19 GMT
+ * Generated on Tue, 30 May 2023 02:40:56 GMT
  *
  */
 
@@ -3425,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
           }
         },
         {
@@ -3455,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
           }
         },
         {
@@ -3470,7 +3491,7 @@ module.exports = {
       ],
       tokens: {
         backgroundColor: '#ffffff',
-        borderColor: '#000000',
+        borderColor: '#c9c8c8',
         borderRadius: 4,
         borderWidth: 1,
         color: '#000000',
@@ -3485,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,
@@ -3511,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',
@@ -3519,11 +3545,11 @@ 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: {},

package/package.json

@@ -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.30.0"
+  "version": "3.31.0"
 }

package/theme.json

@@ -4393,32 +4393,50 @@
             "hover": true
           },
           "tokens": {
+            "borderColor": "{palette.color.dove}",
             "outerBorderColor": "{palette.color.gallery}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
-          "description": "Pressed state matches hover state plus light grey background",
           "if": {
-            "pressed": true
+            "focus": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.gallery}",
-            "outerBorderColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.chathamsBlue}",
+            "outerBorderGap": "{palette.size.size2}",
             "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
           "if": {
-            "focus": true
+            "checked": true
           },
           "tokens": {
-            "outerBorderColor": "{palette.color.dove}",
-            "outerBorderGap": "{palette.size.size4}",
-            "outerBorderWidth": "{palette.border.border2}",
-            "radioInputBorderColor": "{palette.color.mosqueDark}"
+            "borderColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.mosque}",
+            "radioInputBorderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "description": "Pressed state matches hover state plus light grey background",
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.gallery}",
+            "outerBorderColor": "{palette.color.silver}",
+            "outerBorderGap": "{palette.size.size0}",
+            "outerBorderWidth": "{palette.border.border1}",
+            "radioOuterBorderColor": "{palette.color.chathamsBlue}",
+            "radioOuterBorderGap": "{palette.size.size2}"
           }
         },
         {
@@ -4429,8 +4447,13 @@
             "backgroundColor": "{palette.color.gallery}",
             "borderColor": "{system.color.transparent}",
             "color": "{palette.color.dove}",
-            "radioInputBackgroundColor": "{palette.color.gallery}",
-            "radioInputBorderColor": "{palette.color.silver}"
+            "radioCheckedBackgroundColor": "{palette.color.silver}",
+            "radioInputBackgroundColor": "{palette.color.silver}",
+            "radioInputBorderColor": "{palette.color.silver}",
+            "radioInputSize": "{palette.size.size16}",
+            "radioOuterBorderColor": "{palette.color.silver}",
+            "radioOuterBorderGap": "{palette.size.size2}",
+            "radioOuterBorderWidth": "{palette.border.border1}"
           }
         },
         {
@@ -4446,7 +4469,7 @@
       ],
       "tokens": {
         "backgroundColor": "{palette.color.white}",
-        "borderColor": "{palette.color.black}",
+        "borderColor": "{palette.color.silver}",
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.black}",
@@ -4461,22 +4484,22 @@
         "fontWeight": "{palette.fontWeight.weight700}",
         "letterSpacing": "{system.letterSpacing.none}",
         "lineHeight": "{palette.lineHeight.multiply140}",
-        "minWidth": "{palette.size.size120}",
+        "minWidth": "{palette.size.size288}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
         "outerBorderWidth": "{system.border.zero}",
         "paddingBottom": "{palette.size.size16}",
-        "paddingLeft": "{palette.size.size10}",
+        "paddingLeft": "{palette.size.size8}",
         "paddingRight": "{palette.size.size16}",
-        "paddingTop": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size12}",
         "radioCheckedBackgroundColor": "{palette.color.mosque}",
-        "radioCheckedSize": "{palette.size.size12}",
+        "radioCheckedSize": "{palette.size.size16}",
         "radioInputBackgroundColor": "{palette.color.white}",
         "radioInputBorderColor": "{palette.color.mosque}",
         "radioInputBorderWidth": "{palette.border.border2}",
         "radioInputOutlineColor": "{palette.color.transparent}",
         "radioInputOutlineWidth": "{palette.border.none}",
-        "radioInputSize": "{palette.size.size20}",
+        "radioInputSize": "{palette.size.size24}",
         "radioOuterBorderColor": "{system.color.transparent}",
         "radioOuterBorderGap": "{system.size.zero}",
         "radioOuterBorderWidth": "{system.border.zero}",
@@ -4487,22 +4510,29 @@
     },
     "RadioCardGroup": {
       "appearances": {
+        "fullWidth": {
+          "description": "Makes cards always occupy the full width of the parent, regardless of viewport",
+          "type": "variant",
+          "values": [true]
+        },
         "viewport": "{appearances.system.viewport}"
       },
       "rules": [
         {
           "if": {
-            "viewport": ["lg", "xl"]
+            "fullWidth": null,
+            "viewport": ["md", "lg", "xl"]
           },
           "tokens": {
-            "direction": "{system.direction.column}"
+            "direction": "{system.direction.row}",
+            "space": "{system.integer.5}"
           }
         }
       ],
       "tokens": {
-        "direction": "{system.direction.row}",
-        "fieldSpace": "{system.integer.2}",
-        "space": "{system.integer.2}"
+        "direction": "{system.direction.column}",
+        "fieldSpace": "{system.integer.3}",
+        "space": "{system.integer.3}"
       }
     },
     "RadioGroup": {