@telus-uds/theme-allium 4.3.0 → 4.4.0

package/build/android/theme.json

@@ -163,6 +163,32 @@
             }
           }
         },
+        {
+          "if": {
+            "outline": true,
+            "purpose": "editorial"
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "borderColor": {
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
+              "alpha": 1
+            },
+            "color": {
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
+              "alpha": 1
+            }
+          }
+        },
         {
           "if": {
             "outline": true,
@@ -1520,45 +1546,6 @@
             "icon": "PaletteIconCaretUp"
           }
         },
-        {
-          "if": {
-            "selected": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.29412,
-              "green": 0.15686,
-              "blue": 0.42745,
-              "alpha": 1
-            },
-            "iconBackground": {
-              "red": 0.48627,
-              "green": 0.32549,
-              "blue": 0.64706,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "pressed": true,
-            "selected": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.24706,
-              "green": 0.16471,
-              "blue": 0.32941,
-              "alpha": 1
-            },
-            "iconBackground": {
-              "red": 0.38039,
-              "green": 0.21961,
-              "blue": 0.53725,
-              "alpha": 1
-            }
-          }
-        },
         {
           "if": {
             "pressed": true
@@ -1570,13 +1557,6 @@
               "blue": 0.45098,
               "alpha": 1
             },
-            "borderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
-            "borderWidth": 0,
             "color": {
               "red": 1,
               "green": 1,
@@ -1594,14 +1574,39 @@
               "green": 1,
               "blue": 1,
               "alpha": 1
+            }
+          }
+        },
+        {
+          "if": {
+            "inactive": true
+          },
+          "tokens": {
+            "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
             },
-            "outerBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+            "borderWidth": 0,
+            "color": {
+              "red": 0.69804,
+              "green": 0.72549,
+              "blue": 0.74902,
+              "alpha": 1
             },
-            "outerBorderWidth": 0
+            "iconBackground": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.69804,
+              "green": 0.72549,
+              "blue": 0.74902,
+              "alpha": 1
+            }
           }
         },
         {
@@ -1649,41 +1654,9 @@
               "alpha": 1
             },
             "iconBackground": {
-              "red": 0.48627,
-              "green": 0.32549,
-              "blue": 0.64706,
-              "alpha": 1
-            }
-          }
-        },
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
-              "alpha": 1
-            },
-            "borderWidth": 0,
-            "color": {
-              "red": 0.69804,
-              "green": 0.72549,
-              "blue": 0.74902,
-              "alpha": 1
-            },
-            "iconBackground": {
-              "red": 0.95686,
-              "green": 0.95686,
-              "blue": 0.96863,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 0.69804,
-              "green": 0.72549,
-              "blue": 0.74902,
+              "red": 0.38039,
+              "green": 0.21961,
+              "blue": 0.53725,
               "alpha": 1
             }
           }
@@ -1730,9 +1703,9 @@
         },
         "iconBorderRadius": 32,
         "iconColor": {
-          "red": 0.17255,
-          "green": 0.18039,
-          "blue": 0.18824,
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
           "alpha": 1
         },
         "iconPadding": 2,
@@ -2726,20 +2699,13 @@
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
-          },
-          "tokens": {
-            "textFontSize": 28
-          }
-        },
-        {
-          "if": {
-            "feature": true,
-            "viewport": ["xs"]
+            "large": true
           },
           "tokens": {
-            "textFontSize": 28
+            "textFontSize": 64,
+            "textLineHeight": 1.125,
+            "textTimerFontName": "HelveticaNow",
+            "textTimerFontWeight": 300
           }
         },
         {
@@ -2761,13 +2727,20 @@
         },
         {
           "if": {
-            "large": true
+            "large": true,
+            "viewport": ["xs"]
           },
           "tokens": {
-            "textFontSize": 64,
-            "textLineHeight": 1.125,
-            "textTimerFontName": "HelveticaNow",
-            "textTimerFontWeight": 300
+            "textFontSize": 40
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": 40
           }
         },
         {
@@ -2782,10 +2755,37 @@
               "alpha": 1
             }
           }
+        },
+        {
+          "if": {
+            "feature": true,
+            "inverse": true
+          },
+          "tokens": {
+            "containerBorderColor": {
+              "red": 0.40392,
+              "green": 0.43137,
+              "blue": 0.45098,
+              "alpha": 1
+            },
+            "labelBorderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            }
+          }
         }
       ],
       "tokens": {
+        "containerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
         "containerBorderRadius": 6,
+        "containerBorderWidth": 2,
         "containerGradient": {
           "type": "linear",
           "angle": 135,
@@ -2831,7 +2831,9 @@
           "blue": 0.27843,
           "alpha": 1
         },
+        "labelFontName": "HelveticaNow",
         "labelFontSize": 16,
+        "labelFontWeight": 400,
         "labelLineHeight": 1.5,
         "textFontSize": 16,
         "textLineHeight": 1.5,
@@ -3464,13 +3466,19 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "closeButtonBackgroundColor": {
+          "red": 0.95686,
+          "green": 0.95686,
+          "blue": 0.96863,
+          "alpha": 1
+        },
         "closeButtonBorderColor": {
           "red": 0.40392,
           "green": 0.43137,
           "blue": 0.45098,
           "alpha": 1
         },
-        "closeButtonBorderSize": 0,
+        "closeButtonBorderSize": 1,
         "closeButtonHeight": 24,
         "closeButtonIconSize": 16,
         "closeButtonMarginBottom": 12,
@@ -3491,7 +3499,7 @@
           "blue": 0.96863,
           "alpha": 1
         },
-        "footnoteBodyPaddingBottom": 40,
+        "footnoteBodyPaddingBottom": 32,
         "footnoteBodyPaddingLeft": 16,
         "footnoteBodyPaddingRight": 16,
         "footnoteBodyPaddingTop": 0,
@@ -3508,8 +3516,8 @@
         "footnoteHeaderPaddingTop": 16,
         "headerFontName": "HelveticaNow",
         "headerFontSize": 16,
-        "headerFontWeight": 700,
-        "headerLineHeight": 20,
+        "headerFontWeight": 500,
+        "headerLineHeight": 1.5,
         "headerMargin": 16,
         "listItemColor": {
           "red": 0.2549,
@@ -3517,8 +3525,8 @@
           "blue": 0.27843,
           "alpha": 1
         },
-        "listItemFontSize": 14,
-        "listItemLineHeight": 1.42857142857,
+        "listItemFontSize": 16,
+        "listItemLineHeight": 1.5,
         "listItemMarkerFontSize": 16,
         "listItemMarkerLineHeight": 1.5,
         "listItemPaddingLeft": 8,
@@ -4948,6 +4956,76 @@
         "subHeadingMarginTop": 8
       }
     },
+    "MultiSelectFilter": {
+      "appearances": {
+        "maxHeight": {
+          "description": "Whether MultiselectFilter modal should expand responsively to content or a set maximu height",
+          "values": [true],
+          "type": "state"
+        },
+        "maxWidth": {
+          "description": "Whether MultiselectFilter modal should expand to content or a set maximuh width",
+          "values": [true],
+          "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": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "buttonDirection": "column",
+            "minHeight": "100%",
+            "minWidth": "100%"
+          }
+        },
+        {
+          "if": {
+            "maxHeight": true,
+            "viewport": ["sm", "md", "lg", "xl"]
+          },
+          "tokens": {
+            "maxHeightSize": 480
+          }
+        },
+        {
+          "if": {
+            "maxWidth": true,
+            "viewport": ["sm", "md", "lg", "xl"]
+          },
+          "tokens": {
+            "maxWidthSize": 544
+          }
+        }
+      ],
+      "tokens": {
+        "buttonDirection": "row",
+        "headerFontColor": {
+          "red": 0.2549,
+          "green": 0.27059,
+          "blue": 0.27843,
+          "alpha": 1
+        },
+        "headerFontName": "HelveticaNow",
+        "headerFontSize": 16,
+        "headerFontWeight": 500,
+        "headerLineHeight": 1.5,
+        "maxHeightSize": 0,
+        "maxWidthSize": 0,
+        "minHeight": 412,
+        "minWidth": 320,
+        "subHeaderFontName": "HelveticaNow",
+        "subHeaderFontSize": 14,
+        "subHeaderFontWeight": 400,
+        "subHeaderLineHeight": 1.4
+      }
+    },
     "NavigationBar": {
       "appearances": {
         "expanded": {
@@ -5676,7 +5754,7 @@
           "red": 0,
           "green": 0,
           "blue": 0,
-          "alpha": 1
+          "alpha": 0
         },
         "outerBorderGap": 0,
         "outerBorderWidth": 0,
@@ -6255,6 +6333,11 @@
     },
     "QuickLinksFeatureItem": {
       "appearances": {
+        "pressed": {
+          "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],
+          "type": "state"
+        },
         "viewport": {
           "description": "The size label for the current screen viewport based on the current screen width",
           "values": ["xs", "sm", "md", "lg", "xl"],
@@ -6270,6 +6353,20 @@
             "contentMaxDimension": 184,
             "imageDimension": 168
           }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.12157,
+              "green": 0.36078,
+              "blue": 0.03529,
+              "alpha": 1
+            },
+            "textLine": "none"
+          }
         }
       ],
       "tokens": {
@@ -6281,8 +6378,12 @@
         },
         "contentAlignItems": "center",
         "contentDirection": "column",
-        "contentMaxDimension": 140,
+        "contentMaxDimension": 168,
         "contentSpace": 3,
+        "fontName": "HelveticaNow",
+        "fontSize": 16,
+        "fontWeight": 700,
+        "gap": 32,
         "imageDimension": 128,
         "outerBorderColor": {
           "red": 0,
@@ -7817,23 +7918,23 @@
               "alpha": 1
             },
             "knobCompletedBackgroundColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "knobCompletedBorderColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
-            "knobCompletedBorderColor": {
+            "knobCurrentBackgroundColor": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
-            "knobCurrentBackgroundColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
             "knobCurrentBorderColor": {
               "red": 1,
               "green": 1,
@@ -7903,25 +8004,25 @@
         },
         "knobBorderWidth": 1,
         "knobCompletedBackgroundColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
+        "knobCompletedBorderColor": {
           "red": 0.48627,
           "green": 0.32549,
           "blue": 0.64706,
           "alpha": 1
         },
-        "knobCompletedBorderColor": {
+        "knobCompletedPaddingLeft": 2,
+        "knobCompletedPaddingTop": 2,
+        "knobCurrentBackgroundColor": {
           "red": 0.48627,
           "green": 0.32549,
           "blue": 0.64706,
           "alpha": 1
         },
-        "knobCompletedPaddingLeft": null,
-        "knobCompletedPaddingTop": null,
-        "knobCurrentBackgroundColor": {
-          "red": 0,
-          "green": 0,
-          "blue": 0,
-          "alpha": 0
-        },
         "knobCurrentBorderColor": {
           "red": 0.48627,
           "green": 0.32549,
@@ -7936,8 +8037,8 @@
           "alpha": 1
         },
         "knobCurrentInnerSize": 8,
-        "knobCurrentPaddingLeft": 2,
-        "knobCurrentPaddingTop": 2,
+        "knobCurrentPaddingLeft": null,
+        "knobCurrentPaddingTop": null,
         "knobSize": 16,
         "labelColor": {
           "red": 0.2549,
@@ -7955,7 +8056,7 @@
         "labelCurrentFontWeight": 700,
         "labelDirection": "column",
         "labelFontName": "HelveticaNow",
-        "labelFontSize": 16,
+        "labelFontSize": 14,
         "labelFontWeight": 400,
         "labelGap": 0,
         "labelLineHeight": 1.42857142857,
@@ -7964,7 +8065,18 @@
         "labelPaddingRight": 16,
         "showStepLabel": false,
         "showStepName": true,
-        "showStepTrackerLabel": true
+        "showStepTrackerLabel": true,
+        "stepLabelColor": {
+          "red": 0.40392,
+          "green": 0.43137,
+          "blue": 0.45098,
+          "alpha": 1
+        },
+        "stepLabelFontName": "HelveticaNow",
+        "stepLabelFontSize": 12,
+        "stepLabelFontWeight": 700,
+        "stepLabelLineHeight": 1.33333333333,
+        "textStepTrackerLabel": 1
       }
     },
     "StoryCard": {
@@ -8574,16 +8686,28 @@
           },
           "tokens": {
             "backgroundColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "borderWidth": 0,
+            "color": {
               "red": 0.69804,
               "green": 0.72549,
               "blue": 0.74902,
               "alpha": 1
             },
-            "borderWidth": 0,
-            "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+            "iconBackground": {
+              "red": 0.95686,
+              "green": 0.95686,
+              "blue": 0.96863,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.69804,
+              "green": 0.72549,
+              "blue": 0.74902,
               "alpha": 1
             }
           }
@@ -8657,8 +8781,7 @@
         "paddingRight": 8,
         "paddingTop": 8,
         "shadow": null,
-        "textAlign": "center",
-        "width": null
+        "textAlign": "center"
       }
     },
     "TermsAndConditions": {
@@ -9000,8 +9123,24 @@
       }
     },
     "Toast": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": {
+          "description": "The size label for the current screen viewport based on the current screen width",
+          "values": ["xs", "sm", "md", "lg", "xl"],
+          "type": "state"
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "animationPaddingBottomAfter": 8,
+            "animationPaddingTopAfter": 8
+          }
+        }
+      ],
       "tokens": {
         "animationBackgroundColorAfter": {
           "red": 0.95686,
@@ -9045,6 +9184,8 @@
         "animationPaddingBottomBefore": 0,
         "animationPaddingTopAfter": 16,
         "animationPaddingTopBefore": 0,
+        "chevronlinkFontName": "HelveticaNow",
+        "chevronlinkFontWeight": 400,
         "containerBackgroundColor": {
           "red": 0.29412,
           "green": 0.15686,
@@ -10564,7 +10705,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.32.0",
+    "themeTokensVersion": "2.33.0",
     "name": "theme-allium"
   }
 }