@telus-uds/components-web 2.14.0 → 2.16.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Fri, 14 Jul 2023 19:38:21 GMT and should not be manually modified.
+This log was last generated on Fri, 28 Jul 2023 18:10:45 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.16.0
+
+Fri, 28 Jul 2023 18:10:45 GMT
+
+### Minor changes
+
+- Update Modal story (wlsdud194@hotmail.com)
+- add ability to inherit results color in autocomplete from Search component (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.57.0
+- Bump @telus-uds/system-theme-tokens to v2.40.0
+
+### Patches
+
+- verification in type of typography (mauricio.batresmontejo@telus.com)
+
+## 2.15.0
+
+Fri, 21 Jul 2023 00:51:24 GMT
+
+### Minor changes
+
+- Adjusted CardContent to subtract borderWidth from padding to prevent a shifting issue(border was pushing content) (kyle.king2@telus.com)
+- added padding token to Toast (kyle.king2@telus.com)
+- Adjusted story for Listbox to not have "href" attributes on the children (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.56.0
+- Bump @telus-uds/system-theme-tokens to v2.39.0
+
 ## 2.14.0
 
-Fri, 14 Jul 2023 19:38:21 GMT
+Fri, 14 Jul 2023 19:47:50 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -6445,7 +6445,8 @@
               "labelFontSize": "fontSize",
               "labelFontWeight": "fontWeight",
               "labelLineHeight": "lineHeight",
-              "labelMarginLeft": "size"
+              "labelMarginLeft": "size",
+              "inputOutlineOffset": "size"
             }
           },
           "required": false,
@@ -6541,7 +6542,14 @@
             "name": "custom",
             "raw": {
               "space": "integer",
-              "fieldSpace": "integer"
+              "fieldSpace": "integer",
+              "showIcon": "show",
+              "outlineWidth": "border",
+              "borderBottomLeftRadius": "radius",
+              "borderBottomRightRadius": "radius",
+              "borderTopLeftRadius": "radius",
+              "borderTopRightRadius": "radius",
+              "outlineOffset": "size"
             }
           },
           "required": false,
@@ -6573,7 +6581,8 @@
               "labelFontSize": "fontSize",
               "labelFontWeight": "fontWeight",
               "labelLineHeight": "lineHeight",
-              "labelMarginLeft": "size"
+              "labelMarginLeft": "size",
+              "inputOutlineOffset": "size"
             }
           },
           "required": false,
@@ -9259,6 +9268,7 @@
               "itemIconSize": "size",
               "itemLineHeight": "lineHeight",
               "listGutter": "size",
+              "itemUnderline": "textLine",
               "backgroundColor": "color",
               "paddingLeft": "size",
               "paddingRight": "size",
@@ -9342,6 +9352,7 @@
                 "itemIconSize": "size",
                 "itemLineHeight": "lineHeight",
                 "listGutter": "size",
+                "itemUnderline": "textLine",
                 "backgroundColor": "color",
                 "paddingLeft": "size",
                 "paddingRight": "size",

package/lib/Autocomplete/Autocomplete.js

@@ -40,6 +40,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemP
 const highlightAllMatches = function (str) {
   let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let resultsTextColor = arguments.length > 3 ? arguments[3] : undefined;
   return (
     /*#__PURE__*/
     // Wrapping all in bold
@@ -47,6 +48,9 @@ const highlightAllMatches = function (str) {
       variant: {
         bold: false
       },
+      tokens: {
+        color: resultsTextColor
+      },
       children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
       index === 0 && (str.slice(0, matchIndex) ?? ''),
       /*#__PURE__*/
@@ -55,6 +59,9 @@ const highlightAllMatches = function (str) {
         variant: {
           bold: true
         },
+        tokens: {
+          color: resultsTextColor
+        },
         children: str.slice(matchIndex, matchIndex + substring.length)
       }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
       str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
@@ -65,6 +72,7 @@ const highlightAllMatches = function (str) {
 const highlight = function () {
   let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
     var _Array$from;
 
@@ -77,7 +85,7 @@ const highlight = function () {
 
     if (matches !== null && matches !== void 0 && matches.length) {
       return [...acc, { ...item,
-        label: highlightAllMatches(item.label, text, matches)
+        label: highlightAllMatches(item.label, text, matches, color)
       }];
     }
 
@@ -107,11 +115,16 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     value,
     ...rest
   } = _ref2;
-  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  const {
+    color: resultsTextColor
+  } = (0, _componentsBase.useThemeTokens)('Search', {}, {
+    focus: true
+  }); // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
   // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
   //   prop and the text entered
+
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
   const [currentItems, setCurrentItems] = (0, _react.useState)(initialItems); // We need to store the current value as well to be able to highlight it
@@ -284,7 +297,7 @@ const Autocomplete = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
         }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Suggestions.default, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue)),
+          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)),
           noResults: noResults ?? getCopy('noResults'),
           onClose: handleClose,
           onSelect: handleSelect,

package/lib/Card/CardContent.js

@@ -35,7 +35,8 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent
+    contentJustifyContent: justifyContent,
+    borderWidth
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -44,10 +45,10 @@ const CardContentContainer = /*#__PURE__*/_styledComponents.default.div.withConf
     borderBottomRightRadius: withFooter ? 0 : borderRadius,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,

package/lib/DatePicker/DatePicker.js

@@ -46,29 +46,23 @@ const dateFormatWithoutSpaces = 'DD/MM/YYYY';
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveDaySize;
 
   if (viewport === 'xs') {
-    responsiveDaySize = inline ? undefined : 36;
-  } else {
-    responsiveDaySize = inline ? 60 : 44;
+    return inline ? undefined : 36;
   }
 
-  return responsiveDaySize;
+  return inline ? 60 : 44;
 };
 
 const getResponsiveCircleSize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveCircleSize;
 
   if (viewport === 'xs') {
-    responsiveCircleSize = 26;
-  } else {
-    responsiveCircleSize = inline ? 44 : 26;
+    return 26;
   }
 
-  return responsiveCircleSize;
+  return inline ? 44 : 26;
 };
 
 const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({

package/lib/Ribbon/Ribbon.js

@@ -156,7 +156,11 @@ const Ribbon = _ref18 => {
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, { ...variant,
     wrap: shouldWrap
   });
@@ -187,12 +191,15 @@ const Ribbon = _ref18 => {
       borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
-          size: 'micro',
           bold: true,
           inverse: true
         },
         tokens: {
-          color: fontColor
+          color: fontColor,
+          fontName,
+          fontWeight,
+          fontSize,
+          lineHeight
         },
         children: children
       })

package/lib/Toast/Toast.js

@@ -39,19 +39,29 @@ const animation = props => (0, _styledComponents.css)(["", " 1s ease-in-out 2s f
 const ToastContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
-    containerBackgroundColor
+    padding
   } = _ref;
-  return containerBackgroundColor;
+  return padding;
 }, _ref2 => {
   let {
-    containerGap
+    padding
   } = _ref2;
+  return padding;
+}, _ref3 => {
+  let {
+    containerBackgroundColor
+  } = _ref3;
+  return containerBackgroundColor;
+}, _ref4 => {
+  let {
+    containerGap
+  } = _ref4;
   return containerGap;
 }, animation);
 
-const Toast = _ref3 => {
+const Toast = _ref5 => {
   let {
     toast,
     copy,
@@ -60,7 +70,7 @@ const Toast = _ref3 => {
     tokens,
     variant = {},
     ...rest
-  } = _ref3;
+  } = _ref5;
   // viewport hook added to work adjust the padding to different sizes
   const viewport = (0, _componentsBase.useViewport)();
   const {
@@ -76,7 +86,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = (0, _componentsBase.useThemeTokens)('Toast', tokens, variant, {
     viewport
   }); // inherit ChevronLink tokens for animation colors
@@ -109,6 +120,7 @@ const Toast = _ref3 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
       variant: {

package/lib-module/Autocomplete/Autocomplete.js

@@ -2,7 +2,7 @@
 import React, { forwardRef, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
-import { InputSupports, inputSupportsProps, selectSystemProps, TextInput, textInputProps, textInputHandlerProps, Typography, useCopy, useSafeLayoutEffect } from '@telus-uds/components-base';
+import { InputSupports, inputSupportsProps, selectSystemProps, TextInput, textInputProps, textInputHandlerProps, Typography, useCopy, useSafeLayoutEffect, useThemeTokens } from '@telus-uds/components-base';
 import Listbox from '../Listbox';
 import { htmlAttrs, useOverlaidPosition } from '../utils';
 import Loading from './Loading';
@@ -18,6 +18,7 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, inp
 const highlightAllMatches = function (str) {
   let substring = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
   let matchIndexes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let resultsTextColor = arguments.length > 3 ? arguments[3] : undefined;
   return (
     /*#__PURE__*/
     // Wrapping all in bold
@@ -25,6 +26,9 @@ const highlightAllMatches = function (str) {
       variant: {
         bold: false
       },
+      tokens: {
+        color: resultsTextColor
+      },
       children: matchIndexes.reduce((acc, matchIndex, index) => [...acc, // Add a piece of the string up to the first occurrence of the substring
       index === 0 && (str.slice(0, matchIndex) ?? ''),
       /*#__PURE__*/
@@ -33,6 +37,9 @@ const highlightAllMatches = function (str) {
         variant: {
           bold: true
         },
+        tokens: {
+          color: resultsTextColor
+        },
         children: str.slice(matchIndex, matchIndex + substring.length)
       }, matchIndex), // Add the rest of the string until the next occurrence or the end of it
       str.slice(matchIndex + substring.length, matchIndexes[index + 1] ?? str.length)], [])
@@ -43,6 +50,7 @@ const highlightAllMatches = function (str) {
 const highlight = function () {
   let items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  let color = arguments.length > 2 ? arguments[2] : undefined;
   return items.reduce((acc, item) => {
     var _Array$from;
 
@@ -55,7 +63,7 @@ const highlight = function () {
 
     if (matches !== null && matches !== void 0 && matches.length) {
       return [...acc, { ...item,
-        label: highlightAllMatches(item.label, text, matches)
+        label: highlightAllMatches(item.label, text, matches, color)
       }];
     }
 
@@ -85,11 +93,16 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
     value,
     ...rest
   } = _ref2;
-  // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
+  const {
+    color: resultsTextColor
+  } = useThemeTokens('Search', {}, {
+    focus: true
+  }); // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
   // but we also need to adjust suggestions based on the mode:
   // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
   // - in uncontrolled mode we filter the suggestions ourselves based on the `initialItems`
   //   prop and the text entered
+
   const isControlled = value !== undefined; // We need to store current items for uncontrolled usage
 
   const [currentItems, setCurrentItems] = useState(initialItems); // We need to store the current value as well to be able to highlight it
@@ -262,7 +275,7 @@ const Autocomplete = /*#__PURE__*/forwardRef((_ref2, ref) => {
         }) : /*#__PURE__*/_jsx(Suggestions, {
           hasResults: getCopy('hasResults'),
           id: "autocomplete",
-          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue)),
+          items: itemsToSuggest(highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)),
           noResults: noResults ?? getCopy('noResults'),
           onClose: handleClose,
           onSelect: handleSelect,

package/lib-module/Card/CardContent.js

@@ -19,7 +19,8 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent
+    contentJustifyContent: justifyContent,
+    borderWidth
   } = _ref;
   return {
     // We need to make sure to have sharp corners on the bottom
@@ -28,10 +29,10 @@ const CardContentContainer = /*#__PURE__*/styled.div.withConfig({
     borderBottomRightRadius: withFooter ? 0 : borderRadius,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,

package/lib-module/DatePicker/DatePicker.js

@@ -21,29 +21,23 @@ const dateFormatWithoutSpaces = 'DD/MM/YYYY';
 const getResponsiveDaySize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveDaySize;
 
   if (viewport === 'xs') {
-    responsiveDaySize = inline ? undefined : 36;
-  } else {
-    responsiveDaySize = inline ? 60 : 44;
+    return inline ? undefined : 36;
   }
 
-  return responsiveDaySize;
+  return inline ? 60 : 44;
 };
 
 const getResponsiveCircleSize = function () {
   let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
-  let responsiveCircleSize;
 
   if (viewport === 'xs') {
-    responsiveCircleSize = 26;
-  } else {
-    responsiveCircleSize = inline ? 44 : 26;
+    return 26;
   }
 
-  return responsiveCircleSize;
+  return inline ? 44 : 26;
 };
 
 const MonthCenterContainer = /*#__PURE__*/styled.div.withConfig({

package/lib-module/Ribbon/Ribbon.js

@@ -139,7 +139,11 @@ const Ribbon = _ref18 => {
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = useThemeTokens('Ribbon', tokens, { ...variant,
     wrap: shouldWrap
   });
@@ -170,12 +174,15 @@ const Ribbon = _ref18 => {
       borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
-          size: 'micro',
           bold: true,
           inverse: true
         },
         tokens: {
-          color: fontColor
+          color: fontColor,
+          fontName,
+          fontWeight,
+          fontSize,
+          lineHeight
         },
         children: children
       })

package/lib-module/Toast/Toast.js

@@ -21,19 +21,29 @@ const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
-    containerBackgroundColor
+    padding
   } = _ref;
-  return containerBackgroundColor;
+  return padding;
 }, _ref2 => {
   let {
-    containerGap
+    padding
   } = _ref2;
+  return padding;
+}, _ref3 => {
+  let {
+    containerBackgroundColor
+  } = _ref3;
+  return containerBackgroundColor;
+}, _ref4 => {
+  let {
+    containerGap
+  } = _ref4;
   return containerGap;
 }, animation);
 
-const Toast = _ref3 => {
+const Toast = _ref5 => {
   let {
     toast,
     copy,
@@ -42,7 +52,7 @@ const Toast = _ref3 => {
     tokens,
     variant = {},
     ...rest
-  } = _ref3;
+  } = _ref5;
   // viewport hook added to work adjust the padding to different sizes
   const viewport = useViewport();
   const {
@@ -58,7 +68,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = useThemeTokens('Toast', tokens, variant, {
     viewport
   }); // inherit ChevronLink tokens for animation colors
@@ -91,6 +102,7 @@ const Toast = _ref3 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.55.0",
+    "@telus-uds/components-base": "1.57.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.38.0",
+    "@telus-uds/system-theme-tokens": "^2.40.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.14.0"
+  "version": "2.16.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -11,7 +11,8 @@ import {
   textInputHandlerProps,
   Typography,
   useCopy,
-  useSafeLayoutEffect
+  useSafeLayoutEffect,
+  useThemeTokens
 } from '@telus-uds/components-base'
 import Listbox from '../Listbox'
 import { htmlAttrs, useOverlaidPosition } from '../utils'
@@ -34,16 +35,16 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
 
 // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
-const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
+const highlightAllMatches = (str, substring = '', matchIndexes = [], resultsTextColor) => (
   // Wrapping all in bold
-  <Typography variant={{ bold: false }}>
+  <Typography variant={{ bold: false }} tokens={{ color: resultsTextColor }}>
     {matchIndexes.reduce(
       (acc, matchIndex, index) => [
         ...acc,
         // Add a piece of the string up to the first occurrence of the substring
         index === 0 && (str.slice(0, matchIndex) ?? ''),
         // Unbold the occurrence of the substring (while keeping the original casing)
-        <Typography key={matchIndex} variant={{ bold: true }}>
+        <Typography key={matchIndex} variant={{ bold: true }} tokens={{ color: resultsTextColor }}>
           {str.slice(matchIndex, matchIndex + substring.length)}
         </Typography>,
         // Add the rest of the string until the next occurrence or the end of it
@@ -53,14 +54,14 @@ const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
     )}
   </Typography>
 )
-const highlight = (items = [], text = '') =>
+const highlight = (items = [], text = '', color) =>
   items.reduce((acc, item) => {
     const matches = Array.from(item.label.toLowerCase().matchAll(text.toLowerCase()))?.map(
       ({ index }) => index
     )
 
     if (matches?.length) {
-      return [...acc, { ...item, label: highlightAllMatches(item.label, text, matches) }]
+      return [...acc, { ...item, label: highlightAllMatches(item.label, text, matches, color) }]
     }
 
     return [...acc, item]
@@ -89,6 +90,7 @@ const Autocomplete = forwardRef(
     },
     ref
   ) => {
+    const { color: resultsTextColor } = useThemeTokens('Search', {}, { focus: true })
     // The wrapped input is mostly responsible for controlled vs uncontrolled handling,
     // but we also need to adjust suggestions based on the mode:
     // - in controlled mode we rely entirely on the suggestions passed via the `items` prop,
@@ -254,7 +256,7 @@ const Autocomplete = forwardRef(
                   hasResults={getCopy('hasResults')}
                   id="autocomplete"
                   items={itemsToSuggest(
-                    highlight(isControlled ? items : currentItems, currentValue)
+                    highlight(isControlled ? items : currentItems, currentValue, resultsTextColor)
                   )}
                   noResults={noResults ?? getCopy('noResults')}
                   onClose={handleClose}

package/src/Card/CardContent.jsx

@@ -23,7 +23,8 @@ const CardContentContainer = styled.div(
     contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent
+    contentJustifyContent: justifyContent,
+    borderWidth
   }) => ({
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
@@ -31,10 +32,10 @@ const CardContentContainer = styled.div(
     borderBottomRightRadius: withFooter ? 0 : borderRadius,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,

package/src/DatePicker/DatePicker.jsx

@@ -24,25 +24,17 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 const dateFormat = 'DD / MM / YYYY'
 const dateFormatWithoutSpaces = 'DD/MM/YYYY'
 const getResponsiveDaySize = (inline = false, viewport = 'md') => {
-  let responsiveDaySize
   if (viewport === 'xs') {
-    responsiveDaySize = inline ? undefined : 36
-  } else {
-    responsiveDaySize = inline ? 60 : 44
+    return inline ? undefined : 36
   }
-
-  return responsiveDaySize
+  return inline ? 60 : 44
 }
 
 const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
-  let responsiveCircleSize
   if (viewport === 'xs') {
-    responsiveCircleSize = 26
-  } else {
-    responsiveCircleSize = inline ? 44 : 26
+    return 26
   }
-
-  return responsiveCircleSize
+  return inline ? 44 : 26
 }
 
 const MonthCenterContainer = styled.div({

package/src/Ribbon/Ribbon.jsx

@@ -76,7 +76,11 @@ const Ribbon = ({
     gradient,
     fontColor,
     borderRadiusBottomLeft,
-    borderRadiusBottomRight
+    borderRadiusBottomRight,
+    fontName,
+    fontWeight,
+    fontSize,
+    lineHeight
   } = useThemeTokens('Ribbon', tokens, { ...variant, wrap: shouldWrap })
 
   let background = backgroundColor
@@ -97,8 +101,14 @@ const Ribbon = ({
         borderRadiusBottomRight={`${borderRadiusBottomRight}px`}
       >
         <Typography
-          variant={{ size: 'micro', bold: true, inverse: true }}
-          tokens={{ color: fontColor }}
+          variant={{ bold: true, inverse: true }}
+          tokens={{
+            color: fontColor,
+            fontName,
+            fontWeight,
+            fontSize,
+            lineHeight
+          }}
         >
           {children}
         </Typography>

package/src/Toast/Toast.jsx

@@ -80,6 +80,8 @@ const ToastContainer = styled.div`
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  padding-left: ${({ padding }) => padding}px;
+  padding-right: ${({ padding }) => padding}px;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;
@@ -104,7 +106,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = useThemeTokens('Toast', tokens, variant, { viewport })
 
   // inherit ChevronLink tokens for animation colors
@@ -131,6 +134,7 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       animationColorAfter={animationColorAfter}
       animationFillColorBefore={chevronInverseColor}
       animationFillColorAfter={chevronDefaultColor}
+      {...extraTokens}
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}