@telus-uds/theme-koodo 7.14.0 → 7.16.0

package/build/android/theme.json

@@ -1690,6 +1690,14 @@
           "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
           "values": [true],
           "type": "state"
+        },
+        "size": {
+          "type": "variant",
+          "values": ["default", "small"]
+        },
+        "width": {
+          "type": "variant",
+          "values": ["full"]
         }
       },
       "rules": [
@@ -1729,6 +1737,12 @@
               "green": 0.4,
               "blue": 0.4,
               "alpha": 1
+            },
+            "leadIconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
             }
           }
         },
@@ -1760,6 +1774,12 @@
               "green": 1,
               "blue": 1,
               "alpha": 1
+            },
+            "leadIconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
             }
           }
         },
@@ -1786,6 +1806,12 @@
               "blue": 1,
               "alpha": 1
             },
+            "leadIconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
             "outerBorderColor": {
               "red": 0,
               "green": 0,
@@ -1793,6 +1819,15 @@
               "alpha": 0
             }
           }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": 4,
+            "paddingTop": 4
+          }
         }
       ],
       "tokens": {
@@ -1817,6 +1852,10 @@
           "blue": 0,
           "alpha": 1
         },
+        "descriptionFontName": "StagSans",
+        "descriptionFontSize": 14,
+        "descriptionFontWeight": 400,
+        "descriptionTextPaddingBottom": 0,
         "dividerColor": {
           "red": 0.78824,
           "green": 0.78431,
@@ -1841,12 +1880,32 @@
           "blue": 0,
           "alpha": 1
         },
-        "iconPadding": 4,
+        "iconPadding": 0,
         "iconPosition": "right",
         "iconSize": 20,
-        "iconSpace": 0,
+        "iconSpace": 1,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
+        "leadIcon": null,
+        "leadIconBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "leadIconBorderRadius": 0,
+        "leadIconColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "leadIconContainerPaddingBottom": 0,
+        "leadIconContainerPaddingLeft": 0,
+        "leadIconContainerPaddingRight": 0,
+        "leadIconContainerPaddingTop": 0,
+        "leadIconPadding": 0,
+        "leadIconSize": 24,
         "lineHeight": 1.5,
         "minWidth": 0,
         "opacity": 1,
@@ -1864,10 +1923,10 @@
         },
         "outerBorderGap": 2,
         "outerBorderWidth": 1,
-        "paddingBottom": 8,
-        "paddingLeft": 24,
+        "paddingBottom": 12,
+        "paddingLeft": 16,
         "paddingRight": 16,
-        "paddingTop": 8,
+        "paddingTop": 12,
         "shadow": null,
         "subtitleColor": {
           "red": 0,
@@ -1876,6 +1935,8 @@
           "alpha": 1
         },
         "textAlign": "center",
+        "textPaddingLeft": 8,
+        "textPaddingRight": 8,
         "width": null
       }
     },
@@ -5198,6 +5259,7 @@
           },
           "tokens": {
             "fontSize": 20,
+            "iconSize": 24,
             "lineHeight": 1.4
           }
         },
@@ -5967,6 +6029,10 @@
           "description": "Uses icon colour to communicate meaning to the user",
           "type": "variant",
           "values": ["success", "error"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -6015,6 +6081,22 @@
             "width": 32
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4,
+            "width": 8
+          }
+        },
         {
           "if": {
             "background": true,
@@ -6096,8 +6178,388 @@
               "alpha": 1
             },
             "borderRadius": 45,
-            "padding": 4,
-            "width": 32
+            "padding": 4,
+            "width": 32
+          }
+        },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 0,
+              "blue": 0.46275,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
           }
         },
         {
@@ -6606,6 +7068,12 @@
             "raised": true
           },
           "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
             "borderColor": {
               "red": 0,
               "green": 0,
@@ -6653,9 +7121,15 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
+              "red": 0.25098,
+              "green": 0.25098,
+              "blue": 0.25098,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.25098,
+              "green": 0.25098,
+              "blue": 0.25098,
               "alpha": 1
             },
             "iconColor": {
@@ -6848,9 +7322,9 @@
           },
           "tokens": {
             "color": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
             },
             "textLine": "none"
@@ -6869,6 +7343,21 @@
             }
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "alternative": true,
@@ -6876,9 +7365,24 @@
           },
           "tokens": {
             "color": {
-              "red": 0.25098,
-              "green": 0.25098,
-              "blue": 0.25098,
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
               "alpha": 1
             }
           }
@@ -6965,6 +7469,37 @@
             "textLine": "underline"
           }
         },
+        {
+          "if": {
+            "alternative": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
+        },
+        {
+          "if": {
+            "inverse": true,
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "textLine": "underline"
+          }
+        },
         {
           "if": {
             "style": "inline"
@@ -7271,7 +7806,7 @@
         },
         "icon": null,
         "iconSize": 16,
-        "iconSpace": 0,
+        "iconSpace": 1,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
         "outerBorderColor": {
@@ -7282,7 +7817,7 @@
         },
         "outerBorderGap": 2,
         "outerBorderOutline": "none",
-        "outerBorderWidth": 2,
+        "outerBorderWidth": 1,
         "textLine": "underline",
         "textLineStyle": "solid"
       }
@@ -7478,7 +8013,7 @@
             "isChild": true
           },
           "tokens": {
-            "itemBorderBottomWidth": 0,
+            "itemBorderBottomWidth": 1,
             "itemBorderLeftColor": {
               "red": 0,
               "green": 0,
@@ -7486,7 +8021,7 @@
               "alpha": 1
             },
             "itemBorderLeftWidth": 4,
-            "itemBorderTopWidth": 0
+            "itemBorderTopWidth": 1
           }
         },
         {
@@ -7495,14 +8030,14 @@
             "pressed": true
           },
           "tokens": {
-            "itemBorderBottomWidth": 0,
+            "itemBorderBottomWidth": 1,
             "itemBorderLeftColor": {
               "red": 0.34902,
               "green": 0.34902,
               "blue": 0.34902,
               "alpha": 1
             },
-            "itemBorderTopWidth": 0,
+            "itemBorderTopWidth": 1,
             "itemColor": {
               "red": 0.34902,
               "green": 0.34902,
@@ -8177,7 +8712,7 @@
         },
         {
           "if": {
-            "viewport": ["xl"]
+            "viewport": ["lg", "xl"]
           },
           "tokens": {
             "borderRadius": 32
@@ -10227,7 +10762,7 @@
           "blue": 0.98824,
           "alpha": 1
         },
-        "checkedSize": 16,
+        "checkedSize": 12,
         "containerBackgroundColor": {
           "red": 0,
           "green": 0,
@@ -10278,7 +10813,7 @@
           "blue": 0,
           "alpha": 1
         },
-        "inputOutlineWidth": 2,
+        "inputOutlineWidth": 1,
         "inputSize": 20,
         "labelColor": {
           "red": 0,
@@ -10297,7 +10832,7 @@
           "blue": 0,
           "alpha": 0
         },
-        "outerBorderGap": 5,
+        "outerBorderGap": 1,
         "outerBorderWidth": 1
       }
     },
@@ -12806,6 +13341,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -12824,6 +13364,11 @@
           "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
           "values": [true, false],
           "type": "state"
+        },
+        "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": [
@@ -12941,6 +13486,160 @@
           "tokens": {
             "maxWidth": null
           }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderRadius": 32,
+            "borderWidth": 1,
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.2
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.1
+            },
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.1
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderWidth": 1,
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "color": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.4
+            },
+            "borderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -12964,6 +13663,8 @@
           "blue": 0,
           "alpha": 1
         },
+        "dropdownIcon": "PaletteIconChevronDown",
+        "dropdownIconExpanded": "PaletteIconChevronUp",
         "fontName": "StagSans",
         "fontScaleCap": 64,
         "fontSize": 16,
@@ -15356,7 +16057,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.11.0",
+    "themeTokensVersion": "4.13.0",
     "name": "theme-koodo"
   }
 }