@telus-uds/theme-koodo 3.23.0 → 3.24.0

package/theme.json

@@ -21,8 +21,8 @@
       ],
       "tokens": {
         "color": "{palette.color.mosque}",
-        "size": "{palette.size.size40}",
-        "thickness": "{palette.border.border4}"
+        "size": "{palette.size.size24}",
+        "thickness": "{palette.border.border2}"
       }
     },
     "Badge": {
@@ -356,10 +356,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": [
@@ -597,6 +598,15 @@
             "width": "{system.size.full}"
           }
         },
+        {
+          "if": {
+            "viewport": ["xs"],
+            "width": "responsive"
+          },
+          "tokens": {
+            "width": "{system.size.full}"
+          }
+        },
         {
           "if": {
             "size": "small"
@@ -1169,6 +1179,10 @@
     },
     "Callout": {
       "appearances": {
+        "rounded": {
+          "type": "variant",
+          "values": [true]
+        },
         "size": {
           "type": "variant",
           "values": ["small"]
@@ -1183,12 +1197,20 @@
             "paddingBottom": "{palette.size.size4}",
             "paddingTop": "{palette.size.size4}"
           }
+        },
+        {
+          "if": {
+            "rounded": true
+          },
+          "tokens": {
+            "borderRadius": "{palette.size.size4}"
+          }
         }
       ],
       "tokens": {
-        "background": "{palette.color.gallery}",
-        "borderRadius": "{palette.size.size4}",
-        "color": "{palette.color.black}",
+        "background": "{palette.color.carouselPink}",
+        "borderRadius": "{palette.size.size0}",
+        "color": "{palette.color.flirt}",
         "gap": "{palette.size.size16}",
         "paddingBottom": "{palette.size.size8}",
         "paddingLeft": "{palette.size.size16}",
@@ -1661,6 +1683,106 @@
         "textLineHeight": "{palette.lineHeight.ratio17to8}"
       }
     },
+    "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.ratio8to7}"
+          }
+        },
+        {
+          "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": "{system.color.none}",
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio8to7}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "large": true
+          },
+          "tokens": {
+            "textFontSize": "{palette.fontSize.size64}",
+            "textLineHeight": "{palette.lineHeight.ratio8to7}",
+            "textTimerFontName": "{palette.fontName.StagSans}",
+            "textTimerFontWeight": "{palette.fontWeight.weight300}"
+          }
+        },
+        {
+          "if": {
+            "inverse": true
+          },
+          "tokens": {
+            "labelBorderColor": "{system.color.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "containerBorderRadius": "{palette.radius.radius6}",
+        "containerGradient": "{system.gradient.none}",
+        "containerInverseBorder": "{palette.border.border2}",
+        "containerInverseBorderColor": "{palette.color.white}",
+        "containerPaddingBottomTop": "{palette.size.size48}",
+        "containerPaddingLeftRight": "{palette.size.size64}",
+        "inverseBorderColor": "{system.color.none}",
+        "labelBorderColor": "{system.color.none}",
+        "labelFontSize": "{palette.fontSize.size16}",
+        "labelLineHeight": "{palette.lineHeight.ratio3to2}",
+        "textFontSize": "{palette.fontSize.size16}",
+        "textLineHeight": "{palette.lineHeight.ratio8to7}",
+        "textTimerFontName": "{palette.fontName.StagSans}",
+        "textTimerFontWeight": "{palette.fontWeight.weight400}"
+      }
+    },
     "DatePicker": {
       "appearances": {},
       "rules": [],
@@ -2259,6 +2381,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.ChevronDown}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveLeft"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronLeft}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveRight"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronRight}"
+          }
+        },
+        {
+          "if": {
+            "action": "moveUp"
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        },
+        {
+          "if": {
+            "action": "play"
+          },
+          "tokens": {
+            "icon": "{palette.icon.PlayVideo}"
+          }
+        },
         {
           "if": {
             "inverse": true
@@ -3481,6 +3675,37 @@
         "outlineWidth": "{palette.border.border1}"
       }
     },
+    "QuantitySelector": {
+      "appearances": {
+        "alternative": {
+          "type": "variant",
+          "values": [true]
+        }
+      },
+      "rules": [
+        {
+          "if": {
+            "alternative": true
+          },
+          "tokens": {
+            "padding": "{palette.size.size0}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{system.color.none}",
+        "borderColor": "{system.color.none}",
+        "iconColor": "{system.color.none}",
+        "iconSize": "{palette.size.size16}",
+        "inputBackgroundColor": "{system.color.none}",
+        "inputBorderColor": "{system.color.none}",
+        "inputBorderWidth": "{palette.size.size1}",
+        "leftIcon": "{palette.icon.Subtract}",
+        "padding": "{palette.size.size16}",
+        "rightIcon": "{palette.icon.Add}",
+        "textColor": "{system.color.none}"
+      }
+    },
     "QuickLinks": {
       "appearances": {
         "viewport": "{appearances.system.viewport}"
@@ -4402,6 +4627,49 @@
         "thickness": "{palette.border.border4}"
       }
     },
+    "SplashButton": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [],
+      "tokens": {
+        "buttonContentBackground": "{system.color.none}",
+        "buttonContentChildrenBackground": "{system.color.none}",
+        "playIcon": "{palette.icon.PlayVideo}",
+        "playIconColor": "{palette.color.white}"
+      }
+    },
+    "SplashButtonWithDetails": {
+      "appearances": {
+        "hover": "{appearances.SplashButton.hover}"
+      },
+      "rules": [
+        {
+          "if": {
+            "hover": true
+          },
+          "tokens": {
+            "buttonContentChildrenBackground": "{system.color.none}"
+          }
+        }
+      ],
+      "tokens": {
+        "buttonBackground": "{palette.color.white}",
+        "buttonBorderColor": "{system.color.none}",
+        "buttonBottomPosition": "{palette.size.size24}",
+        "buttonContentBackground": "{system.color.none}",
+        "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.PlayVideo}",
+        "playIconColor": "{palette.color.white}",
+        "playIconContainerBackground": "{system.color.none}"
+      }
+    },
     "StackView": {
       "appearances": {},
       "rules": [],
@@ -4496,6 +4764,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.whiteDark}"
+          }
+        },
+        {
+          "if": {
+            "focus": true
+          },
+          "tokens": {
+            "outerBorderColor": "{palette.color.mosque}",
+            "outerBorderGap": "{palette.size.size2}",
+            "outerBorderWidth": "{palette.border.border2}"
+          }
+        }
+      ],
+      "tokens": {
+        "backgroundColor": "{palette.color.white}",
+        "borderColor": "{palette.color.gallery}",
+        "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": "{palette.shadow.none}"
+      }
+    },
     "Table": {
       "appearances": {
         "spacing": {
@@ -4833,6 +5156,74 @@
         "width": "{system.size.none}"
       }
     },
+    "TermsAndConditions": {
+      "appearances": {
+        "expanded": "{appearances.TermsAndConditions.expanded}"
+      },
+      "rules": [
+        {
+          "if": {
+            "expanded": true
+          },
+          "tokens": {
+            "icon": "{palette.icon.ChevronUp}"
+          }
+        }
+      ],
+      "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.gallery}",
+        "expandIconContainerHeight": "{palette.size.size32}",
+        "expandIconContainerJustifyContent": "{system.flexJustifyContent.center}",
+        "expandIconContainerMarginX": "{palette.size.size0}",
+        "expandIconContainerMarginY": "{palette.size.size12}",
+        "expandIconContainerWidth": "{palette.size.size32}",
+        "expandTitleColor": "{palette.color.gallery}",
+        "expandTitleFontSize": "{palette.size.size16}",
+        "expandTitleLineHeight": "{palette.lineHeight.multiply150}",
+        "expandTitleMarginX": "{palette.size.size4}",
+        "expandTitleMarginY": "{palette.size.size0}",
+        "icon": "{palette.icon.ChevronDown}",
+        "listColor": "{palette.color.mosque}",
+        "listFontName": "{palette.fontName.StagSans}",
+        "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.mosque}",
+        "titleFontSize": "{palette.fontSize.size14}",
+        "titleLineHeight": "{palette.lineHeight.ratio10to7}",
+        "titlePaddingLeft": "{palette.size.size8}",
+        "unorderedPadding": "{palette.size.size0}"
+      }
+    },
+    "Testimonial": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "dividerBackgroundColor": "{palette.color.white}",
+        "dividerBorder": "{palette.border.border1}",
+        "figcaptionGap": "{palette.size.size12}",
+        "icon": "{palette.icon.ArrowLeft}",
+        "iconColor": "{palette.color.white}",
+        "imageSize": "{palette.size.size48}",
+        "quoteContainerGap": "{palette.size.size4}",
+        "testimonialContainerGap": "{palette.size.size12}",
+        "textColor": "{palette.color.white}"
+      }
+    },
     "TextArea": {
       "appearances": {},
       "rules": [],
@@ -5497,6 +5888,97 @@
         "textTransform": "{system.textTransform.none}"
       }
     },
+    "Video": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "borderColor": "{palette.color.black}",
+        "pauseIcon": "{palette.icon.Add}",
+        "playIcon": "{palette.icon.Add}",
+        "replayIcon": "{palette.icon.Add}"
+      }
+    },
+    "VideoButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "color": "{palette.color.white}"
+      }
+    },
+    "VideoControlBar": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "captionsIcon": "{palette.icon.Add}",
+        "maximizeIcon": "{palette.icon.Add}",
+        "menuBottom": "{palette.size.size64}",
+        "menuMarginLeft": "{palette.size.size16}",
+        "menuRight": "{palette.size.size32}",
+        "minimizeIcon": "{palette.icon.Add}",
+        "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.Settings}"
+      }
+    },
+    "VideoMenu": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.black}",
+        "checkMarkFocusColor": "{palette.color.mosque}",
+        "checkMarkHeight": "{palette.size.size24}",
+        "checkMarkHoverColor": "{palette.color.mosque}",
+        "checkMarkIcon": "{palette.icon.Check}",
+        "checkMarkSelectedColor": "{palette.color.black}",
+        "checkMarkUnselectedColor": "{palette.color.transparent}",
+        "checkMarkWidth": "{palette.size.size24}",
+        "padding": "{palette.size.size16}"
+      }
+    },
+    "VideoMiddleControlButton": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "background": "{palette.color.black}",
+        "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.mosque}",
+        "trackGradientStart": "{palette.color.mosque}"
+      }
+    },
+    "VideoVolumeSlider": {
+      "appearances": {},
+      "rules": [],
+      "tokens": {
+        "marginLeft": "{palette.size.size16}",
+        "marginRight": "{palette.size.size16}",
+        "mutedIcon": "{palette.icon.Add}",
+        "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.Add}"
+      }
+    },
     "WaffleGrid": {
       "appearances": {},
       "rules": [],