@telus-uds/theme-koodo 7.22.0 → 7.24.0

package/build/ios/theme.json

@@ -3017,7 +3017,7 @@
               "red": 1,
               "green": 1,
               "blue": 1,
-              "alpha": 0.2
+              "alpha": 0.4
             }
           }
         },
@@ -3032,7 +3032,7 @@
               "red": 1,
               "green": 1,
               "blue": 1,
-              "alpha": 0.2
+              "alpha": 0.4
             }
           }
         },
@@ -3047,7 +3047,7 @@
               "red": 1,
               "green": 1,
               "blue": 1,
-              "alpha": 0.2
+              "alpha": 0.4
             }
           }
         }
@@ -3591,6 +3591,8 @@
           "blue": 0.98824,
           "alpha": 1
         },
+        "iconContainerHeight": null,
+        "iconContainerWidth": null,
         "iconSize": 14,
         "inputBackgroundColor": {
           "red": 1,
@@ -3606,7 +3608,7 @@
         },
         "inputBorderRadius": 0,
         "inputBorderWidth": 2,
-        "inputHeight": 20,
+        "inputHeight": 24,
         "inputOutlineColor": {
           "red": 0,
           "green": 0,
@@ -3616,7 +3618,7 @@
         "inputOutlineOffset": 1,
         "inputOutlineWidth": 0,
         "inputShadow": null,
-        "inputWidth": 20,
+        "inputWidth": 24,
         "labelColor": {
           "red": 0,
           "green": 0,
@@ -3627,7 +3629,12 @@
         "labelFontSize": 16,
         "labelFontWeight": 400,
         "labelLineHeight": 1.5,
-        "labelMarginLeft": 8
+        "labelMarginLeft": 8,
+        "padding": null,
+        "paddingBottom": null,
+        "paddingLeft": null,
+        "paddingRight": null,
+        "paddingTop": null
       }
     },
     "CheckboxCard": {
@@ -5008,6 +5015,7 @@
           "alpha": 0
         },
         "borderStyle": "solid",
+        "borderTopWidth": null,
         "borderWidth": 0
       }
     },
@@ -5363,6 +5371,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": null,
         "borderColor": {
           "red": 0.93725,
           "green": 0.93725,
@@ -6771,6 +6780,10 @@
         "size": {
           "type": "variant",
           "values": ["small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
         }
       },
       "rules": [
@@ -7219,18 +7232,532 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "raised": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "raised": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderBottomWidth": null,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
+                "red": 0,
+                "green": 0,
+                "blue": 0,
+                "alpha": 0.2
+              }
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inactive": true,
+            "inverse": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.2
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            }
+          }
+        },
+        {
+          "if": {
+            "size": "large"
+          },
+          "tokens": {
+            "iconSize": 24,
+            "padding": 10
+          }
+        },
+        {
+          "if": {
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderBottomWidth": 1,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true,
+            "inverse": true,
+            "style": "contained"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.2
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "if": {
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderBottomWidth": 2,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "pressed": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderRadius": 4,
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true,
+            "style": "subtle"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
+            "borderBottomWidth": 2,
             "borderColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
-            "borderWidth": 1,
+            "borderWidth": null,
             "iconColor": {
               "red": 1,
               "green": 1,
@@ -7241,18 +7768,19 @@
         },
         {
           "if": {
-            "contained": true,
             "inverse": true,
-            "selected": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
-            "borderWidth": null,
+            "borderRadius": 4,
+            "borderWidth": 0,
             "iconColor": {
               "red": 0,
               "green": 0,
@@ -7263,44 +7791,56 @@
         },
         {
           "if": {
-            "pressed": true,
-            "raised": true
+            "inactive": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0.1
             },
-            "borderWidth": 1,
             "iconColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0.4
             }
           }
         },
         {
           "if": {
-            "raised": true,
-            "selected": true
+            "inactive": true,
+            "inverse": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "iconColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
-              "alpha": 1
+              "alpha": 0.4
+            }
+          }
+        },
+        {
+          "if": {
+            "style": "raised"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
-            "borderBottomWidth": null,
             "borderColor": {
               "red": 0,
               "green": 0,
@@ -7315,6 +7855,7 @@
               "blue": 0,
               "alpha": 1
             },
+            "padding": 8,
             "shadow": {
               "inset": false,
               "offsetX": 0,
@@ -7332,92 +7873,91 @@
         },
         {
           "if": {
-            "inactive": true
+            "selected": true,
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
-              "alpha": 1
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
             },
-            "borderWidth": 0,
-            "iconColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
+            "borderBottomWidth": 1,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             },
-            "outerBorderColor": {
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "iconColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
+              "alpha": 1
+            },
+            "padding": 8,
+            "shadow": {
+              "inset": false,
+              "offsetX": 0,
+              "offsetY": 2,
+              "blur": 2,
+              "spread": 0,
+              "color": {
+                "red": 0,
+                "green": 0,
+                "blue": 0,
+                "alpha": 0.2
+              }
             }
           }
         },
         {
           "if": {
-            "inactive": true,
-            "inverse": true
+            "pressed": true,
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
+              "alpha": 0.2
             },
-            "borderWidth": 0,
+            "borderRadius": 4,
+            "borderWidth": 1,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
             },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            }
+            "padding": 8,
+            "shadow": null
           }
         },
         {
           "if": {
-            "contained": true,
             "inactive": true,
-            "inverse": true
+            "style": "raised"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.2
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
             },
             "borderWidth": 0,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
-            },
-            "outerBorderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 0
-            }
-          }
-        },
-        {
-          "if": {
-            "size": "large"
-          },
-          "tokens": {
-            "iconSize": 24,
-            "padding": 10
+              "alpha": 0.4
+            },
+            "shadow": null
           }
         }
       ],
@@ -10317,6 +10857,10 @@
           "type": "variant",
           "values": [true]
         },
+        "inactive": {
+          "type": "variant",
+          "values": [true]
+        },
         "pressed": {
           "type": "variant",
           "values": [true]
@@ -10345,6 +10889,14 @@
             }
           }
         },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderWidth": 3
+          }
+        },
         {
           "if": {
             "disabled": true
@@ -10356,6 +10908,7 @@
               "blue": 0.93725,
               "alpha": 1
             },
+            "inputBorderWidth": 1,
             "textColor": {
               "red": 0.78824,
               "green": 0.78431,
@@ -10366,10 +10919,22 @@
         },
         {
           "if": {
-            "focus": true
+            "inactive": true
           },
           "tokens": {
-            "inputBorderWidth": 3
+            "inputBackgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "inputBorderWidth": 1,
+            "textColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
           }
         }
       ],
@@ -10395,6 +10960,7 @@
         "paddingLeft": 12,
         "paddingRight": 12,
         "paddingTop": 12,
+        "showTopSpace": true,
         "textColor": {
           "red": 0,
           "green": 0,
@@ -10425,6 +10991,10 @@
           "type": "variant",
           "values": [true]
         },
+        "inactive": {
+          "type": "variant",
+          "values": [true]
+        },
         "increase": {
           "type": "variant",
           "values": [true]
@@ -10508,25 +11078,6 @@
             "borderTopWidth": 3
           }
         },
-        {
-          "if": {
-            "disabled": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "alternative": true
@@ -10555,6 +11106,45 @@
             "borderBottomLeftRadius": 24,
             "borderTopLeftRadius": 24
           }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -10709,7 +11299,7 @@
           "alpha": 1
         },
         "outerBorderGap": 2,
-        "outerBorderWidth": 2,
+        "outerBorderWidth": 0,
         "paddingBottom": 12,
         "paddingLeft": 24,
         "paddingRight": 24,
@@ -12152,7 +12742,7 @@
           "alpha": 1
         },
         "borderStyle": "solid",
-        "borderWidth": 1
+        "borderWidth": null
       }
     },
     "SideNavItem": {
@@ -12257,7 +12847,7 @@
             },
             "fontName": "StagSans",
             "fontWeight": 600,
-            "lineHeight": 1.5,
+            "lineHeight": 1.45,
             "paddingBottom": 13,
             "paddingTop": 13
           }
@@ -12328,6 +12918,13 @@
         "contentPaddingLeft": 0,
         "contentPaddingRight": 0,
         "contentPaddingTop": 0,
+        "expandDividerColor": {
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
+          "alpha": 1
+        },
+        "expandDividerWidth": 1,
         "expandDuration": 300,
         "icon": "PaletteIconChevronDown",
         "iconColor": {
@@ -16515,7 +17112,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.18.0",
+    "themeTokensVersion": "4.20.0",
     "name": "theme-koodo"
   }
 }