@telus-uds/theme-koodo 3.29.0 → 3.31.0

package/build/ios/theme.json

@@ -1233,8 +1233,31 @@
       }
     },
     "ButtonGroup": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": ["xs", "sm", "md", "lg", "xl"],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "space": 2
+          }
+        },
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "space": 3
+          }
+        }
+      ],
       "tokens": {
         "alignItems": "center",
         "direction": "row",
@@ -1242,7 +1265,7 @@
         "flexGrow": 0,
         "flexShrink": 0,
         "justifyContent": "flex-start",
-        "space": 3
+        "space": 2
       }
     },
     "ButtonGroupItem": {
@@ -1275,15 +1298,9 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
-              "alpha": 1
-            },
-            "borderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+              "red": 0.10588,
+              "green": 0.27843,
+              "blue": 0.27451,
               "alpha": 1
             },
             "color": {
@@ -1299,29 +1316,32 @@
             "selected": true
           },
           "tokens": {
-            "opacity": 0.8,
-            "outerBorderColor": {
+            "backgroundColor": {
               "red": 0.00392,
               "green": 0.41961,
               "blue": 0.41569,
               "alpha": 1
             },
-            "outerBorderGap": 1,
-            "outerBorderWidth": 4
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
           }
         },
         {
           "if": {
-            "inactive": true
+            "pressed": true,
+            "selected": true
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+              "red": 0.10588,
+              "green": 0.27843,
+              "blue": 0.27451,
               "alpha": 1
             },
-            "borderWidth": 0,
             "color": {
               "red": 1,
               "green": 1,
@@ -1332,18 +1352,22 @@
         },
         {
           "if": {
-            "selected": true
+            "inactive": true
           },
           "tokens": {
-            "opacity": 0.8,
-            "outerBorderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+            "backgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
-            "outerBorderGap": 1,
-            "outerBorderWidth": 4
+            "borderWidth": 0,
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
           }
         },
         {
@@ -1358,32 +1382,32 @@
       "tokens": {
         "alignSelf": "flex-start",
         "backgroundColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 1,
+          "green": 1,
+          "blue": 1,
           "alpha": 1
         },
         "borderColor": {
-          "red": 0.10588,
-          "green": 0.27843,
-          "blue": 0.27451,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "borderRadius": 4,
-        "borderWidth": 0,
+        "borderWidth": 1,
         "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "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": {
@@ -1398,8 +1422,8 @@
           "blue": 0,
           "alpha": 0
         },
-        "outerBorderGap": 2,
-        "outerBorderWidth": 2,
+        "outerBorderGap": 3,
+        "outerBorderWidth": 1,
         "paddingBottom": 8,
         "paddingLeft": 24,
         "paddingRight": 24,
@@ -2655,6 +2679,47 @@
         "titleFontSize": 16
       }
     },
+    "Fieldset": {
+      "appearances": {
+        "error": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "error": true
+          },
+          "tokens": {
+            "outlineColor": {
+              "red": 0.93333,
+              "green": 0.17255,
+              "blue": 0.4549,
+              "alpha": 1
+            }
+          }
+        }
+      ],
+      "tokens": {
+        "borderBottomLeftRadius": 0,
+        "borderBottomRightRadius": 0,
+        "borderTopLeftRadius": 0,
+        "borderTopRightRadius": 0,
+        "outlineColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "outlineOffset": null,
+        "outlineWidth": 0,
+        "paddingBottom": 0,
+        "paddingLeft": 0,
+        "paddingRight": 0,
+        "paddingTop": 0
+      }
+    },
     "Footnote": {
       "appearances": {},
       "rules": [],
@@ -5622,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": {
@@ -5635,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
           }
         },
         {
@@ -5672,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": {
@@ -5683,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
           }
         },
         {
@@ -5720,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,
@@ -5744,7 +5846,7 @@
         "fontWeight": 700,
         "letterSpacing": 0,
         "lineHeight": 1.4,
-        "minWidth": 120,
+        "minWidth": 288,
         "outerBorderColor": {
           "red": 0,
           "green": 0,
@@ -5754,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,
@@ -5784,7 +5886,7 @@
           "alpha": 0
         },
         "radioInputOutlineWidth": 0,
-        "radioInputSize": 20,
+        "radioInputSize": 24,
         "radioOuterBorderColor": {
           "red": 0,
           "green": 0,
@@ -5800,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"],
@@ -5809,24 +5916,33 @@
       "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": {
       "appearances": {},
       "rules": [],
       "tokens": {
+        "borderBottomLeftRadius": 1,
+        "borderBottomRightRadius": 1,
+        "borderTopLeftRadius": 1,
+        "borderTopRightRadius": 1,
         "fieldSpace": 2,
+        "outlineOffset": 8,
+        "outlineWidth": 1,
+        "showIcon": true,
         "space": 2
       }
     },
@@ -7515,6 +7631,11 @@
           "values": [true],
           "type": "state"
         },
+        "numeric": {
+          "description": "capability to only allow numbers",
+          "type": "variant",
+          "values": [true]
+        },
         "password": {
           "description": "capability that helps masking and unmasking text",
           "type": "variant",
@@ -7802,9 +7923,15 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.76471,
-              "green": 0.93725,
-              "blue": 1,
+              "red": 0.7098,
+              "green": 0.70588,
+              "blue": 0.70588,
+              "alpha": 1
+            },
+            "switchColor": {
+              "red": 0.31373,
+              "green": 0.31373,
+              "blue": 0.31373,
               "alpha": 1
             }
           }
@@ -7815,9 +7942,28 @@
           },
           "tokens": {
             "backgroundColor": {
+              "red": 0.89804,
+              "green": 0.96863,
+              "blue": 0.98431,
+              "alpha": 1
+            },
+            "icon": "PaletteIconCheck",
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "switchBorderColor": {
               "red": 0,
-              "green": 0.63137,
-              "blue": 0.85882,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "switchColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             }
           }
@@ -7841,16 +7987,40 @@
             "inactive": true
           },
           "tokens": {
-            "opacity": 0.5
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "opacity": 0.5,
+            "switchBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "switchColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
           }
         }
       ],
       "tokens": {
         "alignSelf": "flex-start",
         "backgroundColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
           "alpha": 1
         },
         "borderColor": {
@@ -7859,7 +8029,7 @@
           "blue": 0,
           "alpha": 0
         },
-        "borderRadius": 4,
+        "borderRadius": 32,
         "borderWidth": 0,
         "icon": null,
         "iconColor": {
@@ -7868,7 +8038,7 @@
           "blue": 0,
           "alpha": 0
         },
-        "iconSize": 16,
+        "iconSize": 12,
         "labelColor": {
           "red": 0,
           "green": 0,
@@ -7877,7 +8047,7 @@
         },
         "labelFontName": "StagSans",
         "labelFontSize": 16,
-        "labelFontWeight": 400,
+        "labelFontWeight": 600,
         "labelLineHeight": 1.5,
         "labelMarginLeft": 8,
         "opacity": 1,
@@ -7893,12 +8063,12 @@
           "blue": 0,
           "alpha": 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": {
           "red": 0,
@@ -7909,27 +8079,54 @@
         "switchBorderRadius": 32,
         "switchBorderWidth": 0,
         "switchColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.34902,
+          "green": 0.34902,
+          "blue": 0.34902,
           "alpha": 1
         },
-        "switchShadow": null,
-        "switchSize": 24,
+        "switchShadow": {
+          "inset": false,
+          "offsetX": 0,
+          "offsetY": 2,
+          "blur": 2,
+          "spread": 0,
+          "color": {
+            "red": 0,
+            "green": 0,
+            "blue": 0,
+            "alpha": 0.1
+          }
+        },
+        "switchSize": 18,
         "trackBorderColor": {
           "red": 0,
           "green": 0,
           "blue": 0,
           "alpha": 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",
+          "values": ["xs", "sm", "md", "lg", "xl"],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": 3
+          }
+        }
+      ],
       "tokens": {
         "alignItems": "flex-start",
         "direction": "column",
@@ -8805,7 +9002,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.27.0",
+    "themeTokensVersion": "2.28.0",
     "name": "theme-koodo"
   }
 }