@telus-uds/theme-koodo 4.3.0 → 4.4.0

package/build/android/theme.json

@@ -1207,22 +1207,27 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "borderColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
               "alpha": 1
             },
-            "borderWidth": 0,
             "color": {
-              "red": 1,
-              "green": 1,
-              "blue": 1,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             },
             "iconColor": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
               "alpha": 1
             }
           }
@@ -1257,31 +1262,6 @@
               "alpha": 0
             }
           }
-        },
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.93725,
-              "green": 0.93725,
-              "blue": 0.93725,
-              "alpha": 1
-            },
-            "color": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            },
-            "iconColor": {
-              "red": 0.78824,
-              "green": 0.78431,
-              "blue": 0.78431,
-              "alpha": 1
-            }
-          }
         }
       ],
       "tokens": {
@@ -2164,7 +2144,7 @@
         },
         "fontSize": 16,
         "iconDisplace": 0,
-        "iconSize": 18,
+        "iconSize": 24,
         "iconSpace": 1,
         "leftIcon": "PaletteIconChevronLeft",
         "outerBorderColor": {
@@ -2216,48 +2196,57 @@
         },
         {
           "if": {
-            "large": true,
-            "viewport": ["xs"]
+            "feature": true
           },
           "tokens": {
-            "textFontSize": 28
+            "containerBorderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "labelBorderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
+            "textFontSize": 70,
+            "textLineHeight": 1.2,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 700
           }
         },
         {
           "if": {
-            "feature": true,
-            "viewport": ["xs"]
+            "large": true
           },
           "tokens": {
-            "textFontSize": 28
+            "labelFontName": "StagSans",
+            "labelFontSize": 16,
+            "labelFontWeight": 400,
+            "textFontSize": 70,
+            "textLineHeight": 1.2,
+            "textTimerFontName": "StagSans",
+            "textTimerFontWeight": 700
           }
         },
         {
           "if": {
-            "feature": true
+            "large": true,
+            "viewport": ["xs"]
           },
           "tokens": {
-            "labelBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
-            },
-            "textFontSize": 64,
-            "textLineHeight": 1.14285714286,
-            "textTimerFontName": "StagSans",
-            "textTimerFontWeight": 300
+            "textFontSize": 44
           }
         },
         {
           "if": {
-            "large": true
+            "feature": true,
+            "viewport": ["xs"]
           },
           "tokens": {
-            "textFontSize": 64,
-            "textLineHeight": 1.14285714286,
-            "textTimerFontName": "StagSans",
-            "textTimerFontWeight": 300
+            "textFontSize": 44
           }
         },
         {
@@ -2265,17 +2254,30 @@
             "inverse": true
           },
           "tokens": {
+            "containerBorderColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
             "labelBorderColor": {
-              "red": 0,
-              "green": 0,
-              "blue": 0,
-              "alpha": 0
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
             }
           }
         }
       ],
       "tokens": {
+        "containerBorderColor": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
+        },
         "containerBorderRadius": 6,
+        "containerBorderWidth": 2,
         "containerGradient": null,
         "containerInverseBorder": 2,
         "containerInverseBorderColor": {
@@ -2298,7 +2300,9 @@
           "blue": 0,
           "alpha": 0
         },
+        "labelFontName": "StagSans",
         "labelFontSize": 16,
+        "labelFontWeight": 400,
         "labelLineHeight": 1.5,
         "textFontSize": 16,
         "textLineHeight": 1.14285714286,
@@ -2952,6 +2956,12 @@
       "appearances": {},
       "rules": [],
       "tokens": {
+        "closeButtonBackgroundColor": {
+          "red": 1,
+          "green": 1,
+          "blue": 1,
+          "alpha": 1
+        },
         "closeButtonBorderColor": {
           "red": 0,
           "green": 0,
@@ -2959,13 +2969,13 @@
           "alpha": 1
         },
         "closeButtonBorderSize": 0,
-        "closeButtonHeight": 24,
+        "closeButtonHeight": 16,
         "closeButtonIconSize": 16,
         "closeButtonMarginBottom": 4,
         "closeButtonMarginLeft": 4,
         "closeButtonMarginRight": 12,
         "closeButtonMarginTop": 4,
-        "closeButtonWidth": 24,
+        "closeButtonWidth": 16,
         "closeIcon": "PaletteIconClose",
         "footnoteBackground": {
           "red": 1,
@@ -2982,7 +2992,7 @@
         "footnoteBodyPaddingBottom": 32,
         "footnoteBodyPaddingLeft": 16,
         "footnoteBodyPaddingRight": 16,
-        "footnoteBodyPaddingTop": 16,
+        "footnoteBodyPaddingTop": 0,
         "footnoteBorderColorMd": {
           "red": 0.78824,
           "green": 0.78431,
@@ -2997,7 +3007,7 @@
         "headerFontName": "StagSans",
         "headerFontSize": 16,
         "headerFontWeight": 700,
-        "headerLineHeight": 20,
+        "headerLineHeight": 1.25,
         "headerMargin": 16,
         "listItemColor": {
           "red": 0,
@@ -3006,9 +3016,9 @@
           "alpha": 1
         },
         "listItemFontSize": 14,
-        "listItemLineHeight": 1.42857142857,
+        "listItemLineHeight": 1.45,
         "listItemMarkerFontSize": 14,
-        "listItemMarkerLineHeight": 1.42857142857,
+        "listItemMarkerLineHeight": 1.45,
         "listItemPaddingLeft": 8,
         "listPaddingLeft": 32
       }
@@ -3944,7 +3954,7 @@
         "blockFontName": "StagSans",
         "blockFontSize": 16,
         "blockFontWeight": 600,
-        "blockLineHeight": 1.3,
+        "blockLineHeight": 1.5,
         "borderRadius": 4,
         "color": {
           "red": 0.00392,
@@ -4346,6 +4356,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,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
+        "headerFontName": "StagSans",
+        "headerFontSize": 24,
+        "headerFontWeight": 700,
+        "headerLineHeight": 1.33333333333,
+        "maxHeightSize": 0,
+        "maxWidthSize": 0,
+        "minHeight": 412,
+        "minWidth": 320,
+        "subHeaderFontName": "StagSans",
+        "subHeaderFontSize": 16,
+        "subHeaderFontWeight": 400,
+        "subHeaderLineHeight": 1.5
+      }
+    },
     "NavigationBar": {
       "appearances": {
         "expanded": {
@@ -5076,19 +5156,19 @@
           "alpha": 1
         },
         "borderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.78824,
+          "green": 0.78431,
+          "blue": 0.78431,
           "alpha": 1
         },
-        "borderRadius": 0,
+        "borderRadius": 8,
         "borderWidth": 1,
         "flex": 1,
         "outerBorderColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 0
         },
         "outerBorderGap": 0,
         "outerBorderWidth": 0,
@@ -5559,6 +5639,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"],
@@ -5574,6 +5659,26 @@
             "contentMaxDimension": 184,
             "imageDimension": 168
           }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "color": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "outerBorderColor": {
+              "red": 0.34902,
+              "green": 0.34902,
+              "blue": 0.34902,
+              "alpha": 1
+            },
+            "textLine": "underline"
+          }
         }
       ],
       "tokens": {
@@ -5585,8 +5690,12 @@
         },
         "contentAlignItems": "center",
         "contentDirection": "column",
-        "contentMaxDimension": 140,
+        "contentMaxDimension": 168,
         "contentSpace": 3,
+        "fontName": "StagSans",
+        "fontSize": 16,
+        "fontWeight": 600,
+        "gap": 32,
         "imageDimension": 128,
         "outerBorderColor": {
           "red": 0,
@@ -5595,7 +5704,7 @@
           "alpha": 0
         },
         "textAlign": "center",
-        "textLine": "underline"
+        "textLine": "none"
       }
     },
     "QuickLinksList": {
@@ -7088,6 +7197,12 @@
             "inverse": true
           },
           "tokens": {
+            "completedIconColor": {
+              "red": 0.4,
+              "green": 0.4,
+              "blue": 0.4,
+              "alpha": 1
+            },
             "connectorColor": {
               "red": 1,
               "green": 1,
@@ -7178,7 +7293,7 @@
           "blue": 0.41569,
           "alpha": 1
         },
-        "connectorCompletedHeight": 1,
+        "connectorCompletedHeight": 3,
         "connectorHeight": 1,
         "connectorMinWidth": 16,
         "containerPaddingBottom": null,
@@ -7210,7 +7325,7 @@
           "blue": 0.41569,
           "alpha": 1
         },
-        "knobCompletedPaddingLeft": 2,
+        "knobCompletedPaddingLeft": 1,
         "knobCompletedPaddingTop": 2,
         "knobCurrentBackgroundColor": {
           "red": 0.00392,
@@ -7248,11 +7363,11 @@
           "alpha": 1
         },
         "labelCurrentFontName": "StagSans",
-        "labelCurrentFontWeight": 700,
+        "labelCurrentFontWeight": 600,
         "labelDirection": "row",
         "labelFontName": "StagSans",
         "labelFontSize": 16,
-        "labelFontWeight": 400,
+        "labelFontWeight": 600,
         "labelGap": 4,
         "labelLineHeight": 1.5,
         "labelMarginTop": 10,
@@ -7260,7 +7375,18 @@
         "labelPaddingRight": 16,
         "showStepLabel": false,
         "showStepName": true,
-        "showStepTrackerLabel": true
+        "showStepTrackerLabel": true,
+        "stepLabelColor": {
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
+          "alpha": 1
+        },
+        "stepLabelFontName": "StagSans",
+        "stepLabelFontSize": 16,
+        "stepLabelFontWeight": 600,
+        "stepLabelLineHeight": 1.5,
+        "textStepTrackerLabel": 2
       }
     },
     "StoryCard": {
@@ -7593,15 +7719,30 @@
       }
     },
     "Tags": {
-      "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": ["lg", "xl"]
+          },
+          "tokens": {
+            "space": 3
+          }
+        }
+      ],
       "tokens": {
         "alignItems": "center",
         "direction": "row",
         "flexGrow": 0,
         "flexShrink": 0,
         "justifyContent": "flex-start",
-        "space": 3
+        "space": 1
       }
     },
     "TagsItem": {
@@ -7629,23 +7770,43 @@
           },
           "tokens": {
             "backgroundColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+              "red": 0.10588,
+              "green": 0.27843,
+              "blue": 0.27451,
               "alpha": 1
             },
             "borderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+              "red": 0.10588,
+              "green": 0.27843,
+              "blue": 0.27451,
               "alpha": 1
             },
+            "borderWidth": 0,
             "color": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
-            }
+            },
+            "iconBackground": {
+              "red": 0.10588,
+              "green": 0.27843,
+              "blue": 0.27451,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 1,
+              "green": 1,
+              "blue": 1,
+              "alpha": 1
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "outerBorderWidth": 0
           }
         },
         {
@@ -7653,87 +7814,105 @@
             "selected": true
           },
           "tokens": {
-            "icon": "PaletteIconCheckCircledFilled",
-            "opacity": 0.8,
-            "outerBorderColor": {
+            "backgroundColor": {
               "red": 0.00392,
               "green": 0.41961,
               "blue": 0.41569,
               "alpha": 1
             },
-            "outerBorderGap": 1,
-            "outerBorderWidth": 4
-          }
-        },
-        {
-          "if": {
-            "inactive": true
-          },
-          "tokens": {
-            "backgroundColor": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+            "borderColor": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
               "alpha": 1
             },
-            "borderWidth": 0,
             "color": {
               "red": 1,
               "green": 1,
               "blue": 1,
               "alpha": 1
             },
+            "icon": "PaletteIconClose",
+            "iconBackground": {
+              "red": 0.00392,
+              "green": 0.41961,
+              "blue": 0.41569,
+              "alpha": 1
+            },
             "iconColor": {
-              "red": 0.4,
-              "green": 0.4,
-              "blue": 0.4,
+              "red": 1,
+              "green": 1,
+              "blue": 1,
               "alpha": 1
-            }
+            },
+            "outerBorderColor": {
+              "red": 0,
+              "green": 0,
+              "blue": 0,
+              "alpha": 0
+            },
+            "outerBorderWidth": 0
           }
         },
         {
           "if": {
-            "selected": true
+            "inactive": true
           },
           "tokens": {
-            "opacity": 0.8,
-            "outerBorderColor": {
-              "red": 0.00392,
-              "green": 0.41961,
-              "blue": 0.41569,
+            "backgroundColor": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
               "alpha": 1
             },
-            "outerBorderGap": 1,
-            "outerBorderWidth": 4
+            "borderWidth": 0,
+            "color": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            },
+            "iconBackground": {
+              "red": 0.93725,
+              "green": 0.93725,
+              "blue": 0.93725,
+              "alpha": 1
+            },
+            "iconColor": {
+              "red": 0.78824,
+              "green": 0.78431,
+              "blue": 0.78431,
+              "alpha": 1
+            }
           }
         }
       ],
       "tokens": {
         "alignSelf": "center",
         "backgroundColor": {
-          "red": 0.00392,
-          "green": 0.41961,
-          "blue": 0.41569,
+          "red": 1,
+          "green": 1,
+          "blue": 1,
           "alpha": 1
         },
         "borderColor": {
-          "red": 0.10588,
-          "green": 0.27843,
-          "blue": 0.27451,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "borderRadius": 4,
-        "borderWidth": 0,
+        "borderWidth": 1,
         "color": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "fontName": "StagSans",
-        "fontSize": 14,
+        "fontSize": 16,
         "fontWeight": 600,
-        "icon": "PaletteIconCheckCircledNotFilled",
+        "icon": "PaletteIconAdd",
         "iconAlignSelf": "center",
         "iconBackground": {
           "red": 1,
@@ -7748,10 +7927,10 @@
           "blue": 0.41569,
           "alpha": 1
         },
-        "iconPadding": 4,
+        "iconPadding": 2,
         "iconPosition": "right",
-        "iconSize": 20,
-        "iconSpace": 3,
+        "iconSize": 16,
+        "iconSpace": 2,
         "iconTranslateX": 0,
         "iconTranslateY": 0,
         "lineHeight": 1.5,
@@ -7770,14 +7949,13 @@
           "alpha": 0
         },
         "outerBorderGap": 2,
-        "outerBorderWidth": 2,
+        "outerBorderWidth": 0,
         "paddingBottom": 8,
-        "paddingLeft": 24,
-        "paddingRight": 16,
+        "paddingLeft": 16,
+        "paddingRight": 8,
         "paddingTop": 8,
         "shadow": null,
-        "textAlign": "center",
-        "width": null
+        "textAlign": "center"
       }
     },
     "TermsAndConditions": {
@@ -8120,27 +8298,43 @@
       }
     },
     "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": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.93725,
+          "green": 0.93725,
+          "blue": 0.93725,
           "alpha": 1
         },
         "animationBackgroundColorBefore": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
-          "alpha": 1
-        },
-        "animationColorAfter": {
           "red": 0.00392,
           "green": 0.41961,
           "blue": 0.41569,
           "alpha": 1
         },
+        "animationColorAfter": {
+          "red": 0,
+          "green": 0,
+          "blue": 0,
+          "alpha": 1
+        },
         "animationColorBefore": {
           "red": 1,
           "green": 1,
@@ -8148,9 +8342,9 @@
           "alpha": 1
         },
         "animationDivColorAfter": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "animationDivColorBefore": {
@@ -8165,10 +8359,12 @@
         "animationPaddingBottomBefore": 0,
         "animationPaddingTopAfter": 16,
         "animationPaddingTopBefore": 0,
+        "chevronlinkFontName": "StagSans",
+        "chevronlinkFontWeight": 400,
         "containerBackgroundColor": {
-          "red": 1,
-          "green": 1,
-          "blue": 1,
+          "red": 0.00392,
+          "green": 0.41961,
+          "blue": 0.41569,
           "alpha": 1
         },
         "containerGap": 12
@@ -8528,6 +8724,11 @@
     },
     "Typography": {
       "appearances": {
+        "bold": {
+          "description": "Sets the font weight, to bold on some body text styles. Does not change accessibility properties.",
+          "type": "variant",
+          "values": [true]
+        },
         "colour": {
           "type": "variant",
           "values": [
@@ -8605,6 +8806,16 @@
             "fontWeight": 700
           }
         },
+        {
+          "description": "Please only bold single words while using with headings",
+          "if": {
+            "bold": true
+          },
+          "tokens": {
+            "fontName": "StagSans",
+            "fontWeight": 600
+          }
+        },
         {
           "if": {
             "size": "large"
@@ -9481,7 +9692,7 @@
     }
   },
   "metadata": {
-    "themeTokensVersion": "2.32.0",
+    "themeTokensVersion": "2.33.0",
     "name": "theme-koodo"
   }
 }