@telus-uds/theme-allium 7.12.1 → 7.14.0

package/build/android/theme.json

@@ -1908,6 +1908,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": [
@@ -2033,6 +2041,15 @@
               "alpha": 1
             }
           }
+        },
+        {
+          "if": {
+            "size": "small"
+          },
+          "tokens": {
+            "paddingBottom": 4,
+            "paddingTop": 4
+          }
         }
       ],
       "tokens": {
@@ -2057,6 +2074,10 @@
           "blue": 0.45098,
           "alpha": 1
         },
+        "descriptionFontName": "HNforTELUSSA",
+        "descriptionFontSize": 14,
+        "descriptionFontWeight": 400,
+        "descriptionTextPaddingBottom": 4,
         "dividerColor": {
           "red": 0.8902,
           "green": 0.90196,
@@ -2069,10 +2090,10 @@
         "icon": "PaletteIconCaretDown",
         "iconAlignSelf": "center",
         "iconBackground": {
-          "red": 0.95686,
-          "green": 0.95686,
-          "blue": 0.96863,
-          "alpha": 1
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
         "iconBorderRadius": 32,
         "iconColor": {
@@ -2087,6 +2108,26 @@
         "iconSpace": 1,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
+        "leadIcon": null,
+        "leadIconBackgroundColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
+        "leadIconBorderRadius": 45,
+        "leadIconColor": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        },
+        "leadIconContainerPaddingBottom": 0,
+        "leadIconContainerPaddingLeft": 0,
+        "leadIconContainerPaddingRight": 0,
+        "leadIconContainerPaddingTop": 0,
+        "leadIconPadding": 4,
+        "leadIconSize": 24,
         "lineHeight": 1.42857142857,
         "minWidth": 0,
         "opacity": 1,
@@ -2104,10 +2145,10 @@
         },
         "outerBorderGap": 2,
         "outerBorderWidth": 2,
-        "paddingBottom": 8,
-        "paddingLeft": 16,
-        "paddingRight": 8,
-        "paddingTop": 8,
+        "paddingBottom": 12,
+        "paddingLeft": 12,
+        "paddingRight": 12,
+        "paddingTop": 12,
         "shadow": null,
         "subtitleColor": {
           "red": 0.40392,
@@ -2116,6 +2157,8 @@
           "alpha": 1
         },
         "textAlign": "center",
+        "textPaddingLeft": 8,
+        "textPaddingRight": 8,
         "width": null
       }
     },
@@ -3931,7 +3974,7 @@
         "labelFontSize": 16,
         "labelFontWeight": 400,
         "labelLineHeight": 1.5,
-        "labelMarginLeft": 10
+        "labelMarginLeft": 8
       }
     },
     "CheckboxCard": {
@@ -5490,8 +5533,8 @@
           },
           "tokens": {
             "fontSize": 14,
-            "iconSize": 20,
-            "lineHeight": 1.45
+            "iconSize": 16,
+            "lineHeight": 1.42857142857
           }
         },
         {
@@ -5500,7 +5543,8 @@
           },
           "tokens": {
             "fontSize": 20,
-            "lineHeight": 1.28571428571
+            "iconSize": 20,
+            "lineHeight": 1.6
           }
         },
         {
@@ -5573,7 +5617,7 @@
         "iconGap": 8,
         "iconPaddingTop": 4,
         "iconPosition": "left",
-        "iconSize": 24,
+        "iconSize": 16,
         "justifyContent": "flex-start",
         "lineHeight": 1.5,
         "paddingBottom": 0,
@@ -6292,6 +6336,10 @@
         "size": {
           "type": "variant",
           "values": ["micro", "small", "large", "extraLarge"]
+        },
+        "style": {
+          "type": "variant",
+          "values": ["default", "brand", "dark", "light"]
         }
       },
       "rules": [
@@ -6340,6 +6388,22 @@
             "width": 32
           }
         },
+        {
+          "if": {
+            "background": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4,
+            "width": 8
+          }
+        },
         {
           "if": {
             "background": true,
@@ -6425,6 +6489,386 @@
             "width": 32
           }
         },
+        {
+          "if": {
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "default"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "brand"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "dark"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "micro",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "small",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "medium",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "large",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
+        {
+          "if": {
+            "padding": "extraLarge",
+            "style": "light"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.8
+            },
+            "borderRadius": 45,
+            "padding": 4
+          }
+        },
         {
           "if": {
             "size": "micro"
@@ -6449,6 +6893,14 @@
             "size": 32
           }
         },
+        {
+          "if": {
+            "size": "extraLarge"
+          },
+          "tokens": {
+            "size": 48
+          }
+        },
         {
           "if": {
             "color": "brand"
@@ -6540,27 +6992,6 @@
             }
           }
         },
-        {
-          "if": {
-            "size": "extraLarge"
-          },
-          "tokens": {
-            "size": 48
-          }
-        },
-        {
-          "if": {
-            "rank": "primary"
-          },
-          "tokens": {
-            "color": {
-              "red": 0.29412,
-              "green": 0.15686,
-              "blue": 0.42745,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "color": "offer"
@@ -6592,6 +7023,19 @@
               ]
             }
           }
+        },
+        {
+          "if": {
+            "rank": "primary"
+          },
+          "tokens": {
+            "color": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -7228,6 +7672,20 @@
             "textLine": "none"
           }
         },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.08627,
+              "green": 0.24314,
+              "blue": 0.02353,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "size": "large"
@@ -7262,13 +7720,28 @@
         },
         {
           "if": {
-            "alternative": true
+            "alternative": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "pressed": true,
+            "quiet": true
           },
           "tokens": {
             "color": {
-              "red": 0.17255,
-              "green": 0.18039,
-              "blue": 0.18824,
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
               "alpha": 1
             }
           }
@@ -7335,6 +7808,20 @@
             "textLine": "none"
           }
         },
+        {
+          "if": {
+            "pressed": true,
+            "quiet": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.08627,
+              "green": 0.24314,
+              "blue": 0.02353,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "style": "inline"
@@ -7641,7 +8128,7 @@
         },
         "icon": null,
         "iconSize": 24,
-        "iconSpace": 0,
+        "iconSpace": 1,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
         "outerBorderColor": {
@@ -7813,11 +8300,7 @@
               "green": 0.15686,
               "blue": 0.42745,
               "alpha": 1
-            },
-            "itemPaddingBottom": 12,
-            "itemPaddingLeft": 16,
-            "itemPaddingRight": 16,
-            "itemPaddingTop": 12
+            }
           }
         },
         {
@@ -7832,7 +8315,7 @@
               "blue": 0.9098,
               "alpha": 1
             },
-            "groupBorderWidth": 0,
+            "groupBorderWidth": 1,
             "groupColor": {
               "red": 0.40392,
               "green": 0.43137,
@@ -7848,7 +8331,7 @@
             "isChild": true
           },
           "tokens": {
-            "itemBorderBottomWidth": 0,
+            "itemBorderBottomWidth": 1,
             "itemBorderLeftColor": {
               "red": 0.8902,
               "green": 0.90196,
@@ -7856,7 +8339,7 @@
               "alpha": 1
             },
             "itemBorderLeftWidth": 4,
-            "itemBorderTopWidth": 0
+            "itemBorderTopWidth": 1
           }
         },
         {
@@ -7893,14 +8376,14 @@
             "pressed": true
           },
           "tokens": {
-            "itemBorderBottomWidth": 0,
+            "itemBorderBottomWidth": 1,
             "itemBorderLeftColor": {
               "red": 0.40392,
               "green": 0.43137,
               "blue": 0.45098,
               "alpha": 1
             },
-            "itemBorderTopWidth": 0
+            "itemBorderTopWidth": 1
           }
         }
       ],
@@ -7982,10 +8465,10 @@
         "itemFontWeight": 700,
         "itemHeight": 40,
         "itemOutline": 0,
-        "itemPaddingBottom": 8,
+        "itemPaddingBottom": 12,
         "itemPaddingLeft": 16,
         "itemPaddingRight": 16,
-        "itemPaddingTop": 8,
+        "itemPaddingTop": 12,
         "itemTextDecoration": "none",
         "lineHeight": 1.14285714286,
         "minHeight": "100%",
@@ -10487,7 +10970,7 @@
         "containerBorderRadius": 0,
         "containerOpacity": 1,
         "containerPaddingBottom": 0,
-        "containerPaddingLeft": 2,
+        "containerPaddingLeft": 0,
         "containerPaddingRight": 0,
         "containerPaddingTop": 0,
         "containerShadow": null,
@@ -10540,7 +11023,7 @@
         "labelFontSize": 16,
         "labelFontWeight": 400,
         "labelLineHeight": 1.5,
-        "labelMarginLeft": 10,
+        "labelMarginLeft": 8,
         "outerBorderColor": {
           "red": 0,
           "green": 0,
@@ -13060,7 +13543,7 @@
           "alpha": 1
         },
         "borderBottomWidth": 1,
-        "buttonClearance": 16,
+        "buttonClearance": 24,
         "gutter": 4,
         "nextIcon": "PaletteIconArrowRight",
         "previousIcon": "PaletteIconArrowLeft",
@@ -13069,6 +13552,11 @@
     },
     "TabsItem": {
       "appearances": {
+        "dropdown": {
+          "description": "activate the dropdown menu",
+          "type": "variant",
+          "values": [true]
+        },
         "equalWidth": {
           "description": "Divide the available width equally among `TabsItem`",
           "type": "variant",
@@ -13097,6 +13585,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": [
@@ -13321,6 +13814,232 @@
           "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": 3,
+            "color": {
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
+              "alpha": 1
+            },
+            "paddingHorizontal": 21,
+            "paddingVertical": 5
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.69804,
+              "green": 0.72549,
+              "blue": 0.74902,
+              "alpha": 1
+            },
+            "borderWidth": 3
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderWidth": 2,
+            "color": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "paddingHorizontal": 22,
+            "paddingVertical": 6
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "paddingHorizontal": 24,
+            "paddingVertical": 8
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "selected": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0.05
+            },
+            "borderWidth": 0,
+            "color": {
+              "red": 0.29412,
+              "green": 0.15686,
+              "blue": 0.42745,
+              "alpha": 1
+            },
+            "paddingHorizontal": 24,
+            "paddingVertical": 8
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 0.1
+            },
+            "color": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "hover": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": {
+              "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.2549,
+              "green": 0.27059,
+              "blue": 0.27843,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "inverse": true,
+            "pressed": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "color": {
+              "red": 0.2549,
+              "green": 0.27059,
+              "blue": 0.27843,
+              "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "dropdown": true,
+            "focus": true,
+            "inverse": true,
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "borderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
@@ -13344,6 +14063,8 @@
           "blue": 0.45098,
           "alpha": 1
         },
+        "dropdownIcon": "PaletteIconCaretDown",
+        "dropdownIconExpanded": "PaletteIconCaretUp",
         "fontName": "HNforTELUSSA",
         "fontScaleCap": 64,
         "fontSize": 14,
@@ -15830,7 +16551,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "4.11.0",
+    "themeTokensVersion": "4.13.0",
     "name": "theme-allium"
   }
 }