@telus-uds/theme-koodo 7.23.0 → 8.0.0-alpha.0

package/build/android/theme.json

@@ -5015,6 +5015,7 @@
           "alpha": 0
         },
         "borderStyle": "solid",
+        "borderTopWidth": null,
         "borderWidth": 0
       }
     },
@@ -5370,6 +5371,7 @@
         }
       ],
       "tokens": {
+        "borderBottomWidth": null,
         "borderColor": {
           "red": 0.93725,
           "green": 0.93725,
@@ -6778,6 +6780,10 @@
         "size": {
           "type": "variant",
           "values": ["small", "large"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "contained", "subtle", "raised"]
         }
       },
       "rules": [
@@ -7116,12 +7122,536 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "borderWidth": null,
+            "iconColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "selected": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderBottomWidth": 2,
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderLeftWidth": null,
+            "borderRadius": 0,
+            "borderRightWidth": null,
+            "borderTopWidth": null,
+            "borderWidth": null,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            },
+            "borderWidth": 1,
+            "iconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": 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
+            }
+          }
+        },
+        {
+          "if": {
+            "contained": true,
+            "inverse": true,
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "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
             },
-            "borderWidth": null,
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
             "iconColor": {
               "red": 0,
               "green": 0,
@@ -7132,8 +7662,8 @@
         },
         {
           "if": {
-            "inverse": true,
-            "selected": true
+            "selected": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7144,28 +7674,24 @@
             },
             "borderBottomWidth": 2,
             "borderColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             },
-            "borderLeftWidth": null,
-            "borderRadius": 0,
-            "borderRightWidth": null,
-            "borderTopWidth": null,
             "borderWidth": null,
             "iconColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0,
+              "green": 0,
+              "blue": 0,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "contained": true,
-            "pressed": true
+            "pressed": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
@@ -7174,13 +7700,8 @@
               "blue": 0,
               "alpha": 0.2
             },
-            "borderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 1
-            },
-            "borderWidth": 1,
+            "borderRadius": 4,
+            "borderWidth": 0,
             "iconColor": {
               "red": 0.4,
               "green": 0.4,
@@ -7191,53 +7712,52 @@
         },
         {
           "if": {
-            "contained": true,
-            "selected": true
+            "inverse": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderBottomWidth": null,
-            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
-              "alpha": 1
+              "alpha": 0
             },
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "iconColor": {
+            "borderColor": {
               "red": 0,
               "green": 0,
               "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 0,
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
               "alpha": 1
             }
           }
         },
         {
           "if": {
-            "contained": true,
             "inverse": true,
-            "pressed": true
+            "selected": true,
+            "style": "subtle"
           },
           "tokens": {
             "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 0.4
+              "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,
@@ -7248,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,
@@ -7270,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,
@@ -7322,6 +7855,7 @@
               "blue": 0,
               "alpha": 1
             },
+            "padding": 8,
             "shadow": {
               "inset": false,
               "offsetX": 0,
@@ -7339,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
           }
         }
       ],
@@ -11517,10 +12050,6 @@
         "purpose": {
           "type": "variant",
           "values": ["offer", "default", "editorial", "subtle"]
-        },
-        "wrap": {
-          "type": "variant",
-          "values": [true]
         }
       },
       "rules": [
@@ -11568,15 +12097,6 @@
               "alpha": 1
             }
           }
-        },
-        {
-          "if": {
-            "wrap": true
-          },
-          "tokens": {
-            "paddingBottom": 6,
-            "paddingTop": 6
-          }
         }
       ],
       "tokens": {
@@ -11628,10 +12148,10 @@
         "fontWeight": 600,
         "gradient": null,
         "lineHeight": 1.42857142857,
-        "paddingBottom": 2,
+        "paddingBottom": 6,
         "paddingLeft": 12,
         "paddingRight": 12,
-        "paddingTop": 2
+        "paddingTop": 6
       }
     },
     "Search": {
@@ -12209,7 +12729,7 @@
           "alpha": 1
         },
         "borderStyle": "solid",
-        "borderWidth": 1
+        "borderWidth": null
       }
     },
     "SideNavItem": {
@@ -12314,7 +12834,7 @@
             },
             "fontName": "StagSans",
             "fontWeight": 600,
-            "lineHeight": 1.5,
+            "lineHeight": 1.45,
             "paddingBottom": 13,
             "paddingTop": 13
           }
@@ -12385,6 +12905,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": {
@@ -16572,7 +17099,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.19.0",
+    "themeTokensVersion": "5.0.0-alpha.0",
     "name": "theme-koodo"
   }
 }