@telus-uds/theme-allium 3.24.0 → 3.25.0

package/theme.json

@@ -393,10 +393,11 @@
           "type": "variant",
           "values": [true]
         },
+        "viewport": "{appearances.system.viewport}",
         "width": {
-          "description": "Available in default or full-width. Default-width expands based on content Full-width expands to width of the container.",
+          "description": "Available in default, full-width or responsive. Default-width expands based on content. Full-width expands to width of the container. Responsive automatically applies full-width when is displayed on the XS viewport.",
           "type": "variant",
-          "values": ["full"]
+          "values": ["full", "responsive"]
         }
       },
       "rules": [
@@ -563,6 +564,15 @@
             "width": "{system.size.full}"
           }
         },
+        {
+          "if": {
+            "viewport": ["xs"],
+            "width": "responsive"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1712,6 +1722,106 @@
         "textLineHeight": "{palette.lineHeight.ratio9to4}"
       }
     },
+    "Countdown": {
+      "appearances": {
+        "feature": {
+          "type": "variant",
+          "values": [true]
+        },
+        "inverse": {
+          "type": "variant",
+          "values": [true]
+        },
+        "label": {
+          "type": "variant",
+          "values": [true]
+        },
+        "large": {
+          "type": "variant",
+          "values": [true]
+        },
+        "viewport": "{appearances.system.viewport}"
+      },
+      "rules": [
+        {
+          "if": {
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "containerPaddingBottomTop": "{palette.size.size16}",
+            "containerPaddingLeftRight": "{palette.size.size24}",
+            "labelFontSize": "{palette.fontSize.size14}",
+            "labelLineHeight": "{palette.lineHeight.ratio10to7}",
+            "textLineHeight": "{palette.lineHeight.ratio10to7}"
+          }
+        },
+        {
+          "if": {
+            "large": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size28}"
+          }
+        },
+        {
+          "if": {
+            "feature": true,
+            "viewport": ["xs"]
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size28}"
+          }
+        },
+        {
+          "if": {
+            "feature": true
+          },
+          "tokens": {
+            "labelBorderColor": "{palette.color.purpleTelus}",
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HelveticaNow}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio9to8}",
+            "textTimerFontName": "{palette.fontName.HelveticaNow}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "labelBorderColor": "{palette.color.white}"
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderRadius": "{palette.radius.radius6}",
+        "containerGradient": "{palette.gradient.purple}",
+        "containerInverseBorder": "{palette.border.border2}",
+        "containerInverseBorderColor": "{palette.color.white}",
+        "containerPaddingBottomTop": "{palette.size.size48}",
+        "containerPaddingLeftRight": "{palette.size.size64}",
+        "inverseBorderColor": "{palette.color.greyShuttle}",
+        "labelBorderColor": "{palette.color.greyCharcoal}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textFontSize": "{palette.fontSize.size16}",
+        "textLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textTimerFontName": "{palette.fontName.HelveticaNow}",
+        "textTimerFontWeight": "{palette.fontWeight.weight400}"
+      }
+    },
     "DatePicker": {
       "appearances": {},
       "rules": [],
@@ -2291,6 +2401,78 @@
             "icon": "{palette.icon.PlayVideo}"
           }
         },
+        {
+          "if": {
+            "action": "add"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Add}"
+          }
+        },
+        {
+          "if": {
+            "action": "subtract"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Subtract}"
+          }
+        },
+        {
+          "if": {
+            "action": "close"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Close}"
+          }
+        },
+        {
+          "if": {
+            "action": "expand"
+          },
+          "tokens": {
+            "icon": "{palette.icon.Expand}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveDown"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretDown}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveLeft"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronLeft}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveRight"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronRight}"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "{palette.icon.PlayVideo}"
+          }
+        },
         {
           "if": {
             "inverse": true
@@ -3639,6 +3821,88 @@
         "outlineWidth": "{palette.border.border1}"
       }
     },
+    "QuantitySelector": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        },
+        "disabled": {
+          "type": "variant",
+          "values": [true]
+        },
+        "focus": {
+          "type": "variant",
+          "values": [true]
+        },
+        "hover": {
+          "type": "variant",
+          "values": [true]
+        },
+        "pressed": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "padding": "{palette.size.size0}"
+          }
+        },
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}",
+            "inputBackgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "disabled": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAlabaster}",
+            "iconColor": "{palette.color.greyMystic}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyCloud}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "inputBorderColor": "{palette.color.greyShuttle}",
+            "inputBorderWidth": "{palette.size.size3}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "borderColor": "{palette.color.greyShuttle}",
+        "iconColor": "{palette.color.greyShuttle}",
+        "iconSize": "{palette.size.size16}",
+        "inputBackgroundColor": "{palette.color.white}",
+        "inputBorderColor": "{palette.color.greyShuttle}",
+        "inputBorderWidth": "{palette.size.size1}",
+        "leftIcon": "{palette.icon.Subtract}",
+        "padding": "{palette.size.size16}",
+        "rightIcon": "{palette.icon.Add}",
+        "textColor": "{palette.color.greyCloud}"
+      }
+    },
     "QuickLinks": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -4621,6 +4885,58 @@
         "thickness": "{palette.border.border4}"
       }
     },
+    "SplashButton": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "buttonContentChildrenBackground": "{palette.color.dark80}"
+          }
+        }
+      ],
+      "tokens": {
+        "buttonContentBackground": "{palette.color.dark60}",
+        "buttonContentChildrenBackground": "{system.color.none}",
+        "playIcon": "{palette.icon.PlaySolid}",
+        "playIconColor": "{palette.color.white}"
+      }
+    },
+    "SplashButtonWithDetails": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "buttonContentChildrenBackground": "{palette.color.light80}"
+          }
+        }
+      ],
+      "tokens": {
+        "buttonBackground": "{palette.color.white}",
+        "buttonBorderColor": "{palette.color.greyMystic}",
+        "buttonBottomPosition": "{palette.size.size24}",
+        "buttonContentBackground": "{palette.color.dark60}",
+        "buttonContentChildrenBackground": "{system.color.none}",
+        "buttonLeftPosition": "{palette.size.size24}",
+        "buttonMinHeight": "{palette.size.size64}",
+        "buttonPaddingLeft": "{palette.size.size16}",
+        "buttonPaddingRight": "{palette.size.size16}",
+        "buttonRadius": "{palette.radius.pill32}",
+        "detailsContainerPadding": "{palette.size.size8}",
+        "playIcon": "{palette.icon.PlaySolid}",
+        "playIconColor": "{palette.color.white}",
+        "playIconContainerBackground": "{palette.color.greenAccessible}"
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],
@@ -4715,6 +5031,61 @@
         "showStepTrackerLabel": "{system.show.true}"
       }
     },
+    "StoryCard": {
+      "appearances": {
+        "focus": "{appearances.StoryCard.focus}",
+        "hover": "{appearances.StoryCard.hover}",
+        "pressed": "{appearances.StoryCard.pressed}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "borderWidth": "{palette.border.border2}"
+          }
+        },
+        {
+          "if": {
+            "pressed": true
+          },
+          "tokens": {
+            "backgroundColor": "{palette.color.greyAthens}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.greyShuttle}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.greyMystic}",
+        "borderRadius": "{palette.radius.radius6}",
+        "borderWidth": "{palette.border.border1}",
+        "contentAlignItems": "{system.flexAlign.stretch}",
+        "contentFlexGrow": "{system.integer.0}",
+        "contentFlexShrink": "{system.integer.0}",
+        "contentJustifyContent": "{system.flexJustifyContent.flexStart}",
+        "flex": "{system.integer.1}",
+        "minWidth": "{palette.size.size0}",
+        "outerBorderColor": "{palette.color.transparent}",
+        "outerBorderGap": "{palette.size.size0}",
+        "outerBorderWidth": "{palette.border.none}",
+        "paddingBottom": "{palette.size.size0}",
+        "paddingLeft": "{palette.size.size0}",
+        "paddingRight": "{palette.size.size0}",
+        "paddingTop": "{palette.size.size0}",
+        "shadow": "{system.shadow.none}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {
@@ -5083,6 +5454,74 @@
         "width": "{system.size.none}"
       }
     },
+    "TermsAndConditions": {
+      "appearances": {
+        "expanded": "{appearances.TermsAndConditions.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.CaretUp}"
+          }
+        }
+      ],
+      "tokens": {
+        "contentPaddingBottom": "{palette.size.size8}",
+        "contentPaddingLeft": "{palette.size.size16}",
+        "expandBaseBorderWidth": "{palette.border.none}",
+        "expandContentPaddingBottom": "{palette.size.size16}",
+        "expandContentPaddingLeft": "{palette.size.size16}",
+        "expandContentPaddingRight": "{palette.size.size16}",
+        "expandContentPaddingTop": "{palette.size.size16}",
+        "expandIconContainerAlignItems": "{system.flexAlign.center}",
+        "expandIconContainerBorder": "{palette.border.border1}",
+        "expandIconContainerBorderColor": "{palette.color.greyShuttle}",
+        "expandIconContainerHeight": "{palette.size.size32}",
+        "expandIconContainerJustifyContent": "{system.flexJustifyContent.center}",
+        "expandIconContainerMarginX": "{palette.size.size0}",
+        "expandIconContainerMarginY": "{palette.size.size12}",
+        "expandIconContainerWidth": "{palette.size.size32}",
+        "expandTitleColor": "{palette.color.greyThunder}",
+        "expandTitleFontSize": "{palette.size.size16}",
+        "expandTitleLineHeight": "{palette.lineHeight.ratio3to2}",
+        "expandTitleMarginX": "{palette.size.size4}",
+        "expandTitleMarginY": "{palette.size.size0}",
+        "icon": "{palette.icon.CaretDown}",
+        "listColor": "{palette.color.greyCharcoal}",
+        "listFontName": "{palette.fontName.HelveticaNow}",
+        "listFontSize": "{palette.fontSize.size14}",
+        "listFontWeight": "{palette.fontWeight.weight400}",
+        "listLineHeight": "{palette.lineHeight.ratio10to7}",
+        "listMarginBottom": "{palette.size.size16}",
+        "listMarginLeft": "{palette.size.size32}",
+        "mdContentPaddingBottom": "{palette.size.size16}",
+        "mdContentPaddingLeft": "{palette.size.size48}",
+        "orderedPadding": "{palette.size.size0}",
+        "titleColor": "{palette.color.greyCharcoal}",
+        "titleFontSize": "{palette.fontSize.size14}",
+        "titleLineHeight": "{palette.lineHeight.ratio10to7}",
+        "titlePaddingLeft": "{palette.size.size8}",
+        "unorderedPadding": "{palette.size.size0}"
+      }
+    },
+    "Testimonial": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "dividerBackgroundColor": "{palette.color.greyCloud}",
+        "dividerBorder": "{palette.border.border1}",
+        "figcaptionGap": "{palette.size.size12}",
+        "icon": "{palette.icon.QuoteLeft}",
+        "iconColor": "{palette.color.greyCloud}",
+        "imageSize": "{palette.size.size48}",
+        "quoteContainerGap": "{palette.size.size4}",
+        "testimonialContainerGap": "{palette.size.size12}",
+        "textColor": "{palette.color.greyCharcoal}"
+      }
+    },
     "TextArea": {
       "appearances": {},
       "rules": [],
@@ -5985,6 +6424,97 @@
         "textTransform": "{system.textTransform.none}"
       }
     },
+    "Video": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.greyCloud}",
+        "pauseIcon": "{palette.icon.Pause}",
+        "playIcon": "{palette.icon.PlaySolid}",
+        "replayIcon": "{palette.icon.Replay}"
+      }
+    },
+    "VideoButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{palette.color.white}"
+      }
+    },
+    "VideoControlBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "captionsIcon": "{palette.icon.ClosedCaptions}",
+        "maximizeIcon": "{palette.icon.FullscreenExpand}",
+        "menuBottom": "{palette.size.size64}",
+        "menuMarginLeft": "{palette.size.size16}",
+        "menuRight": "{palette.size.size32}",
+        "minimizeIcon": "{palette.icon.FullscreenMinimize}",
+        "paddingBottom": "{palette.size.size16}",
+        "paddingLeft": "{palette.size.size48}",
+        "paddingLeftCompactMode": "{palette.size.size16}",
+        "paddingRight": "{palette.size.size48}",
+        "paddingRightCompactMode": "{palette.size.size16}",
+        "paddingTop": "{palette.size.size16}",
+        "settingsIcon": "{palette.icon.SettingsSolid}"
+      }
+    },
+    "VideoMenu": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.greyThunder}",
+        "checkMarkFocusColor": "{palette.color.greyShuttle}",
+        "checkMarkHeight": "{palette.size.size24}",
+        "checkMarkHoverColor": "{palette.color.greyShuttle}",
+        "checkMarkIcon": "{palette.icon.Checkmark}",
+        "checkMarkSelectedColor": "{palette.color.white}",
+        "checkMarkUnselectedColor": "{palette.color.transparent}",
+        "checkMarkWidth": "{palette.size.size24}",
+        "padding": "{palette.size.size16}"
+      }
+    },
+    "VideoMiddleControlButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.greyThunder}",
+        "height": "{palette.size.size64}",
+        "iconColor": "{palette.color.white}",
+        "width": "{palette.size.size64}"
+      }
+    },
+    "VideoProgressBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "rangeBackground": "{palette.color.transparent}",
+        "thumbBackground": "{palette.color.white}",
+        "thumbHeight": "{palette.size.size8}",
+        "thumbWidth": "{palette.size.size8}",
+        "timestampMarginLeft": "{palette.size.size8}",
+        "timestampMarginRight": "{palette.size.size8}",
+        "trackGradientEnd": "{palette.color.greenTelus}",
+        "trackGradientStart": "{palette.color.greenTelus}"
+      }
+    },
+    "VideoVolumeSlider": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "marginLeft": "{palette.size.size16}",
+        "marginRight": "{palette.size.size16}",
+        "mutedIcon": "{palette.icon.Muted}",
+        "rangeBackground": "{palette.color.transparent}",
+        "thumbBackground": "{palette.color.white}",
+        "thumbHeight": "{palette.size.size8}",
+        "thumbWidth": "{palette.size.size8}",
+        "trackGradientEnd": "{palette.color.white}",
+        "trackGradientStart": "{palette.color.white}",
+        "unmutedIcon": "{palette.icon.Unmuted}"
+      }
+    },
     "WaffleGrid": {
       "appearances": {},
       "rules": [],