@telus-uds/theme-allium 4.8.0 → 4.10.0

package/theme.json

@@ -116,6 +116,7 @@
         "borderWidth": "{palette.border.border2}",
         "color": "{palette.color.white}",
         "fontName": "{palette.fontName.HelveticaNow}",
+        "fontSize": "{palette.fontSize.size12}",
         "fontWeight": "{palette.fontWeight.weight700}",
         "gradient": "{system.gradient.none}",
         "paddingBottom": "{palette.size.size2}",
@@ -168,6 +169,7 @@
       "appearances": {
         "background": {
           "description": "Background colour of box. Transparent if not specified.",
+          "type": "variant",
           "values": [
             "lightest",
             "lighter",
@@ -1408,8 +1410,7 @@
           },
           "tokens": {
             "showPanelTabs": "{system.show.false}",
-            "showPreviousNextNavigation": "{system.show.false}",
-            "thumbnailSize": "{palette.size.size48}"
+            "showPreviousNextNavigation": "{system.show.false}"
           }
         }
       ],
@@ -1422,15 +1423,7 @@
         "showPreviousNextNavigation": "{system.show.true}",
         "spaceBetweenSlideAndPanelNavigation": "{palette.size.size32}",
         "spaceBetweenSlideAndPreviousNextNavigation": "{palette.size.size24}",
-        "thumbnailBorderColor": "{palette.color.greyMystic}",
-        "thumbnailBorderRadius": "{palette.radius.radius4}",
-        "thumbnailBorderWidth": "{palette.border.border1}",
-        "thumbnailContainerPaddingTop": "{palette.size.size24}",
-        "thumbnailMargin": "{palette.size.size4}",
-        "thumbnailPadding": "{palette.size.size8}",
-        "thumbnailSelectedBorderColor": "{palette.color.greyShuttle}",
-        "thumbnailSelectedBorderWidth": "{palette.border.border2}",
-        "thumbnailSize": "{palette.size.size56}"
+        "stepTrackerCurrentBackgroundColor": "{system.color.none}"
       }
     },
     "CarouselTabsPanelItem": {
@@ -1568,7 +1561,9 @@
           "tokens": {
             "borderBottomColor": "{palette.color.white}",
             "borderBottomWidth": "{palette.border.border4}",
-            "color": "{palette.color.white}"
+            "color": "{palette.color.white}",
+            "fontName": "{palette.fontName.HelveticaNow}",
+            "fontWeight": "{palette.fontWeight.weight700}"
           }
         }
       ],
@@ -1585,13 +1580,70 @@
         "fontWeight": "{palette.fontWeight.weight400}",
         "justifyContent": "{system.flexJustifyContent.flexStart}",
         "letterSpacing": "{system.letterSpacing.none}",
-        "lineHeight": "{palette.lineHeight.ratio9to8}",
+        "lineHeight": "{palette.lineHeight.ratio14to1}",
         "paddingBottom": "{palette.size.size16}",
         "paddingLeft": "{system.size.zero}",
         "paddingRight": "{system.size.zero}",
         "paddingTop": "{system.size.zero}"
       }
     },
+    "CarouselThumbnail": {
+      "appearances": {
+        "focus": "{appearances.CarouselThumbnail.focus}",
+        "hover": "{appearances.CarouselThumbnail.hover}",
+        "pressed": "{appearances.CarouselThumbnail.pressed}",
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs", "sm"]
+          },
+          "tokens": {
+            "alignItems": "{system.flexAlign.flexStart}",
+            "size": "{palette.size.size48}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenAccessible}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenAccessible}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "borderColor": "{palette.color.greenSanFelix}",
+            "borderWidth": "{palette.border.border2}"
+          }
+        }
+      ],
+      "tokens": {
+        "alignItems": "{system.flexAlign.center}",
+        "borderColor": "{palette.color.greyMystic}",
+        "borderRadius": "{palette.radius.radius4}",
+        "borderWidth": "{palette.border.border1}",
+        "containerPaddingTop": "{palette.size.size24}",
+        "margin": "{palette.size.size4}",
+        "padding": "{palette.size.size8}",
+        "selectedBorderColor": "{palette.color.greyShuttle}",
+        "selectedBorderWidth": "{palette.border.border2}",
+        "size": "{palette.size.size72}"
+      }
+    },
     "Checkbox": {
       "appearances": {
         "checked": "{appearances.Checkbox.checked}",
@@ -1809,6 +1861,34 @@
           "tokens": {
             "outerBorderColor": "{palette.color.greenAccessible}"
           }
+        },
+        {
+          "if": {
+            "focus": true,
+            "pressed": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greenDarkFern}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "inverse": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.white}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "focus": true
+          },
+          "tokens": {
+            "color": "{palette.color.greyCharcoal}",
+            "outerBorderColor": "{palette.color.greyCharcoal}"
+          }
         }
       ],
       "tokens": {
@@ -1942,8 +2022,8 @@
       "rules": [],
       "tokens": {
         "calendarBackgroundColor": "{palette.color.white}",
-        "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAlabaster}",
-        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyShuttle}",
+        "calendarDayBlockedCalendarHoverBackground": "{palette.color.greyAthens}",
+        "calendarDayBlockedCalendarHoverColor": "{palette.color.greyCloud}",
         "calendarDayDefaultBackgroundColor": "{palette.color.white}",
         "calendarDayDefaultBorder": "{palette.border.border1}",
         "calendarDayDefaultBorderColor": "{palette.color.greyCloud}",
@@ -2337,7 +2417,7 @@
         "borderRadius": "{palette.radius.radius4}",
         "borderWidth": "{palette.border.border1}",
         "color": "{palette.color.greyThunder}",
-        "contentFontSize": "{palette.fontSize.size14}",
+        "contentFontSize": "{palette.fontSize.size16}",
         "fontName": "{palette.fontName.HelveticaNow}",
         "fontWeight": "{palette.fontWeight.weight400}",
         "icon": "{system.icon.none}",
@@ -3037,10 +3117,18 @@
       ],
       "tokens": {
         "backgroundColor": "{system.color.transparent}",
+        "borderBottomLeftRadius": "{system.radius.none}",
+        "borderBottomRightRadius": "{system.radius.none}",
+        "borderBottomWidth": "{system.border.none}",
         "borderColor": "{palette.color.greyShuttle}",
+        "borderLeftWidth": "{system.border.none}",
         "borderRadius": "{system.radius.round}",
+        "borderRightWidth": "{system.border.none}",
+        "borderTopLeftRadius": "{system.radius.none}",
+        "borderTopRightRadius": "{system.radius.none}",
+        "borderTopWidth": "{system.border.none}",
         "borderWidth": "{palette.border.border1}",
-        "icon": "{system.icon.none}",
+        "icon": "{palette.icon.Add}",
         "iconColor": "{palette.color.greyShuttle}",
         "iconScale": "{system.iconScale.scale1}",
         "iconSize": "{palette.size.size16}",
@@ -3048,7 +3136,7 @@
         "iconTranslateY": "{system.size.zero}",
         "outerBorderColor": "{system.color.transparent}",
         "outerBorderGap": "{system.size.zero}",
-        "outerBorderWidth": "{system.border.zero}",
+        "outerBorderWidth": "{system.border.none}",
         "padding": "{palette.size.size4}",
         "shadow": "{system.shadow.none}"
       }
@@ -4551,7 +4639,8 @@
             "alternative": true
           },
           "tokens": {
-            "padding": "{palette.size.size0}"
+            "paddingBottom": "{palette.size.size8}",
+            "paddingTop": "{palette.size.size8}"
           }
         },
         {
@@ -4559,7 +4648,6 @@
             "hover": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAthens}",
             "inputBackgroundColor": "{palette.color.greyAthens}"
           }
         },
@@ -4568,8 +4656,8 @@
             "disabled": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyAlabaster}",
-            "iconColor": "{palette.color.greyMystic}"
+            "inputBackgroundColor": "{palette.color.greyAlabaster}",
+            "textColor": "{palette.color.greyCloud}"
           }
         },
         {
@@ -4577,7 +4665,7 @@
             "pressed": true
           },
           "tokens": {
-            "backgroundColor": "{palette.color.greyCloud}"
+            "inputBackgroundColor": "{palette.color.greyCloud}"
           }
         },
         {
@@ -4586,22 +4674,180 @@
           },
           "tokens": {
             "inputBorderColor": "{palette.color.greyShuttle}",
-            "inputBorderWidth": "{palette.size.size3}"
+            "inputBorderWidth": "{palette.border.border3}"
           }
         }
       ],
       "tokens": {
-        "backgroundColor": "{system.color.none}",
-        "borderColor": "{palette.color.greyShuttle}",
-        "iconColor": "{palette.color.greyShuttle}",
-        "iconSize": "{palette.size.size16}",
+        "fontSize": "{palette.fontSize.size16}",
         "inputBackgroundColor": "{palette.color.white}",
         "inputBorderColor": "{palette.color.greyShuttle}",
-        "inputBorderWidth": "{palette.size.size1}",
-        "leftIcon": "{palette.icon.Subtract}",
+        "inputBorderWidth": "{palette.border.border1}",
+        "inputWidth": "{palette.size.size64}",
+        "lineHeight": "{palette.lineHeight.ratio3to2}",
+        "padding": "{palette.size.size12}",
+        "paddingBottom": "{palette.size.size12}",
+        "paddingLeft": "{palette.size.size12}",
+        "paddingRight": "{palette.size.size12}",
+        "paddingTop": "{palette.size.size12}",
+        "textColor": "{palette.color.greyCharcoal}"
+      }
+    },
+    "QuantitySelectorSideButton": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true, false]
+        },
+        "decrease": {
+          "type": "variant",
+          "values": [true]
+        },
+        "disabled": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": {
+          "type": "variant",
+          "values": [true]
+        },
+        "hover": {
+          "type": "variant",
+          "values": [true]
+        },
+        "increase": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}",
+            "iconColor": "{palette.color.greyShuttle}"
+          }
+        },
+        {
+          "if": {
+            "decrease": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius4}",
+            "borderRightWidth": "{system.border.zero}",
+            "borderTopLeftRadius": "{palette.radius.radius4}",
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomRightRadius": "{palette.radius.radius4}",
+            "borderLeftWidth": "{system.border.zero}",
+            "borderTopRightRadius": "{palette.radius.radius4}",
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "focus": true,
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderLeftWidth": "{palette.border.border2}",
+            "borderRightWidth": "{palette.border.border3}",
+            "borderTopWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "decrease": true,
+            "focus": true
+          },
+          "tokens": {
+            "borderBottomWidth": "{palette.border.border3}",
+            "borderLeftWidth": "{palette.border.border3}",
+            "borderRightWidth": "{palette.border.border2}",
+            "borderTopWidth": "{palette.border.border3}"
+          }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAlabaster}",
+            "iconColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "paddingBottom": "{palette.size.size12}",
+            "paddingTop": "{palette.size.size12}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "increase": true
+          },
+          "tokens": {
+            "borderBottomRightRadius": "{palette.radius.radius24}",
+            "borderTopRightRadius": "{palette.radius.radius24}"
+          }
+        },
+        {
+          "if": {
+            "alternative": true,
+            "decrease": true
+          },
+          "tokens": {
+            "borderBottomLeftRadius": "{palette.radius.radius24}",
+            "borderTopLeftRadius": "{palette.radius.radius24}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderBottomLeftRadius": "{system.radius.zero}",
+        "borderBottomRightRadius": "{system.radius.zero}",
+        "borderBottomWidth": "{palette.border.border1}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "borderLeftWidth": "{palette.border.border1}",
+        "borderRadius": "{system.radius.zero}",
+        "borderRightWidth": "{palette.border.border1}",
+        "borderTopLeftRadius": "{system.radius.zero}",
+        "borderTopRightRadius": "{system.radius.zero}",
+        "borderTopWidth": "{palette.border.border1}",
+        "borderWidth": "{palette.border.border1}",
+        "icon": "{system.icon.none}",
+        "iconColor": "{palette.color.greyCharcoal}",
+        "iconSize": "{palette.size.size16}",
         "padding": "{palette.size.size16}",
-        "rightIcon": "{palette.icon.Add}",
-        "textColor": "{palette.color.greyCloud}"
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}"
       }
     },
     "QuickLinks": {
@@ -6466,17 +6712,48 @@
       }
     },
     "Testimonial": {
-      "appearances": {},
-      "rules": [],
+      "appearances": {
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["md", "lg", "xl"]
+          },
+          "tokens": {
+            "testimonialFontNameHeading": "{palette.fontName.HelveticaNow}",
+            "testimonialFontSizeHeading": "{palette.fontSize.size28}",
+            "testimonialFontWeightHeading": "{palette.fontWeight.weight400}",
+            "testimonialLineHeightHeading": "{palette.lineHeight.ratio9to7}"
+          }
+        }
+      ],
       "tokens": {
+        "additionalFontName": "{palette.fontName.HelveticaNow}",
+        "additionalFontSize": "{palette.fontSize.size14}",
+        "additionalFontWeight": "{palette.fontWeight.weight400}",
+        "additionalLineHeight": "{palette.lineHeight.ratio10to7}",
+        "authorFontName": "{palette.fontName.HelveticaNow}",
+        "authorFontSize": "{palette.fontSize.size16}",
+        "authorFontWeight": "{palette.fontWeight.weight700}",
+        "authorLineHeight": "{palette.lineHeight.ratio3to2}",
         "dividerBackgroundColor": "{palette.color.greyCloud}",
         "dividerBorder": "{palette.border.border1}",
         "figcaptionGap": "{palette.size.size12}",
         "icon": "{palette.icon.QuoteLeft}",
         "iconColor": "{palette.color.greyCloud}",
+        "iconFr": "{palette.icon.QuoteLeftArrow}",
         "imageSize": "{palette.size.size48}",
         "quoteContainerGap": "{palette.size.size4}",
         "testimonialContainerGap": "{palette.size.size12}",
+        "testimonialFontNameHeading": "{palette.fontName.HelveticaNow}",
+        "testimonialFontNameLarge": "{palette.fontName.HelveticaNow}",
+        "testimonialFontSizeHeading": "{palette.fontSize.size24}",
+        "testimonialFontSizeLarge": "{palette.fontSize.size20}",
+        "testimonialFontWeightHeading": "{palette.fontWeight.weight400}",
+        "testimonialFontWeightLarge": "{palette.fontWeight.weight400}",
+        "testimonialLineHeightHeading": "{palette.lineHeight.ratio4to3}",
+        "testimonialLineHeightLarge": "{palette.lineHeight.ratio8to5}",
         "textColor": "{palette.color.greyCharcoal}"
       }
     },
@@ -6663,7 +6940,8 @@
         "chevronlinkFontName": "{palette.fontName.HelveticaNow}",
         "chevronlinkFontWeight": "{palette.fontWeight.weight400}",
         "containerBackgroundColor": "{palette.color.purpleTelus}",
-        "containerGap": "{palette.size.size10}"
+        "containerGap": "{palette.size.size10}",
+        "padding": "{palette.size.size16}"
       }
     },
     "ToggleSwitch": {
@@ -6938,6 +7216,7 @@
         }
       ],
       "tokens": {
+        "backgroundColor": "{palette.color.transparent}",
         "borderRadius": "{palette.radius.pill32}",
         "icon": "{palette.icon.Question}",
         "iconColor": "{palette.color.greyThunder}",