@skyscanner/backpack-web 9.2.0 → 11.0.0

package/bpk-animate-height/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-animate-height",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Animate height using CSS transitions.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,7 +20,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-button": "^7.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-button": "^7.0.4"
   }
 }

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "6.1.1",
+  "version": "6.1.3",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^5.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-animate-height": "^5.0.4",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-text": "^8.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -25,7 +25,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-checkbox": "^5.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-checkbox": "^5.0.4"
   }
 }

package/bpk-component-aria-live/README.md

@@ -10,7 +10,7 @@ npm install bpk-component-aria-live --save-dev
 
 ## Usage
 
-```js
+```tsx
 import React from 'react';
 import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
 
@@ -37,6 +37,6 @@ export default () => (
 
 `aria-relevant` and `aria-atomic` props can also be set.
 
-`aria-relevant` determines what sort of changes should be read out. By default it is `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).
+`aria-relevant` determines what sort of changes should be read out. By default it is `text` but can be `additions`, `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant).
 
 `aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).

package/bpk-component-aria-live/index.js

@@ -15,7 +15,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
 import BpkAriaLive, {
   POLITENESS_SETTINGS as ARIA_LIVE_POLITENESS_SETTINGS,

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,16 +13,15 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.5.8"
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.0"
   },
   "devDependencies": {
-    "bpk-component-chip": "^6.0.2",
-    "bpk-component-code": "^4.0.2",
-    "bpk-component-fieldset": "^5.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-component-switch": "^3.0.2"
+    "bpk-component-chip": "^6.0.4",
+    "bpk-component-code": "^4.0.4",
+    "bpk-component-fieldset": "^5.0.4",
+    "bpk-component-select": "^6.0.4",
+    "bpk-component-switch": "^3.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-aria-live/src/BpkAriaLive.js

@@ -15,11 +15,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
 
-import PropTypes from 'prop-types';
-import React, { type Node } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from '../../bpk-react-utils';
 
 import STYLES from './BpkAriaLive.module.scss';
@@ -30,32 +30,33 @@ export const POLITENESS_SETTINGS = {
   off: 'off',
   polite: 'polite',
   assertive: 'assertive',
-};
+}; // as const; // Temp disabling TS types due to non TS projects compatibility.
+
+// Temp disabling TS types due to non TS projects compatibility.
+// export type PolitenessSetting =
+//   typeof POLITENESS_SETTINGS[keyof typeof POLITENESS_SETTINGS];
 
 export type Props = {
-  children: Node,
-  politenessSetting: $Keys<typeof POLITENESS_SETTINGS>,
-  visible: boolean,
-  className: ?string,
+  children: ReactElement | string,
+  politenessSetting?: $Keys<typeof POLITENESS_SETTINGS>, // PolitenessSetting,
+  visible?: boolean,
+  className?: string | null,
+  [rest: string]: any, // Inexact rest. See decisions/inexact-rest.md
 };
-const BpkAriaLive = (props: Props) => {
-  const { className, politenessSetting, visible, ...rest } = props;
+
+const BpkAriaLive = ({
+  className = null,
+  politenessSetting = POLITENESS_SETTINGS.polite,
+  visible = false,
+  ...rest
+}: Props) => {
   const classNames = getClassName(
     'bpk-aria-live',
     !visible && 'bpk-aria-live--invisible',
     className,
   );
 
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div aria-live={politenessSetting} className={classNames} {...rest} />
-  );
-};
-
-BpkAriaLive.propTypes = {
-  className: PropTypes.string,
-  politenessSetting: PropTypes.oneOf(Object.keys(POLITENESS_SETTINGS)),
-  visible: PropTypes.bool,
+  return <div aria-live={politenessSetting} className={classNames} {...rest} />;
 };
 
 BpkAriaLive.defaultProps = {

package/bpk-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^7.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-input": "^7.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-autosuggest": "^9.4.3"
@@ -24,6 +24,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.2"
+    "bpk-component-icon": "^10.0.4"
   }
 }

package/bpk-component-badge/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-badge",
-  "version": "5.1.1",
+  "version": "5.1.3",
   "description": "Backpack badge component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -22,8 +22,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,19 +14,19 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-animate-height": "^5.0.2",
-    "bpk-component-close-button": "^4.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-animate-height": "^5.0.4",
+    "bpk-component-close-button": "^4.0.4",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-button": "^7.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-aria-live": "^3.1.1",
+    "bpk-component-button": "^7.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-barchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-mobile-scroll-container": "^4.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-mobile-scroll-container": "^4.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
@@ -27,9 +27,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-breakpoint": "^5.0.2",
-    "bpk-component-content-container": "^6.0.2",
-    "bpk-component-rtl-toggle": "^4.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-breakpoint": "^5.0.4",
+    "bpk-component-content-container": "^6.0.4",
+    "bpk-component-rtl-toggle": "^4.0.4",
+    "bpk-component-text": "^8.0.4"
   }
 }

package/bpk-component-blockquote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-blockquote",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "Backpack blockquote component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-breadcrumb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breadcrumb",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Backpack breadcrumb component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-link": "^4.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-mixins": "^31.5.0",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-link": "^4.0.4",
+    "bpk-component-text": "^8.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-breakpoint/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-breakpoint",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "description": "Backpack breakpoint component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-responsive": "^8.2.0"
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0"
+    "@skyscanner/bpk-foundations-web": "^9.3.0"
   }
 }

package/bpk-component-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-button",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "Backpack button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
+    "bpk-mixins": "^31.6.3",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.4"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-calendar/DOCS.md

@@ -20,10 +20,4 @@ Calendar components -
 
     - `Week` - This is a container that will take the `DateComponent` to display each of the dates in the calendar
 
-  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
-
-  It has a `cellType` prop which can be used to set a custom colour. An exported `CELL_TYPES` object offers the following cell types:
-    - `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-    - `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-    - `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-    - `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
+  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.

package/bpk-component-calendar/README.md

@@ -248,7 +248,6 @@ The BpkCalendarDate component is used to render the content of a cell
 | Property              | PropType             | Required | Default Value    |
 | --------------------- | -------------------- | -------- | ---------------- |
 | date                  | Date                 | true     | -                |
-| cellType              | oneOf(CELL_TYPES.default, CELL_TYPES.positive, CELL_TYPES.neutral, CELL_TYPES.negative)                     | false    | null             |
 | isBlocked             | bool                 | false    | false            |
 | isFocused             | bool                 | false    | false            |
 | isKeyboardFocusable   | bool                 | false    | true             |
@@ -261,15 +260,6 @@ The BpkCalendarDate component is used to render the content of a cell
 | selectionType         | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end)      | false    | SELECTION_TYPES.single             |
 | style                 | object               | false    | null             |
 
-#### `cellType` prop
-
-This prop determines what the colour date cell is to be displayed.
-
-- `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-- `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-- `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-- `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
-
 #### `selectionType` prop
 
 This property determines which selected styles will be applied to the date cell. If using ranges use `start`, `middle` and `end` to apply the correct range styles.

package/bpk-component-calendar/index.js

@@ -26,7 +26,6 @@ import BpkCalendarGrid, {
 import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
 import BpkCalendarNav from './src/BpkCalendarNav';
 import BpkCalendarDate, {
-  CELL_TYPES,
   ROW_TYPES,
   SELECTION_TYPES,
   propTypes as BpkCalendarDatePropTypes,
@@ -47,7 +46,6 @@ export {
   BpkCalendarDate,
   CustomPropTypes,
   DateUtils,
-  CELL_TYPES,
   CALENDAR_SELECTION_TYPE,
   ROW_TYPES,
   SELECTION_TYPES,

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "12.0.2",
+  "version": "13.0.1",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-aria-live": "^3.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-select": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-aria-live": "^3.1.1",
+    "bpk-component-icon": "^10.0.4",
+    "bpk-component-select": "^6.0.4",
+    "bpk-mixins": "^31.6.3",
     "bpk-react-utils": "^7.0.0",
     "date-fns": "^2.21.1",
     "prop-types": "^15.7.2"
@@ -27,8 +27,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-button": "^7.0.4",
+    "bpk-component-text": "^8.0.4",
+    "bpk-storybook-utils": "^2.0.4"
   }
 }

package/bpk-component-calendar/src/BpkCalendarDate.js

@@ -26,13 +26,6 @@ import STYLES from './BpkCalendarDate.module.scss';
 
 const getClassName = cssModules(STYLES);
 
-export const CELL_TYPES = {
-  default: 'default',
-  negative: 'negative',
-  neutral: 'neutral',
-  positive: 'positive',
-};
-
 export const SELECTION_TYPES = {
   none: 'none',
   single: 'single',
@@ -99,7 +92,6 @@ class BpkCalendarDate extends PureComponent {
 
   render() {
     const {
-      cellType,
       className,
       date,
       isBlocked,
@@ -126,11 +118,6 @@ class BpkCalendarDate extends PureComponent {
       }
     });
 
-    if (cellType) {
-      classNames.push(getClassName(`bpk-calendar-date--colored`));
-      classNames.push(getClassName(`bpk-calendar-date--colored-${cellType}`));
-    }
-
     if (isFocused) {
       classNames.push(getClassName('bpk-calendar-date--focused'));
     }
@@ -183,7 +170,6 @@ export const propTypes = {
   // Required
   date: PropTypes.instanceOf(Date).isRequired,
   // Optional
-  cellType: PropTypes.oneOf(Object.keys(CELL_TYPES)),
   className: PropTypes.string,
   isBlocked: PropTypes.bool,
   isFocused: PropTypes.bool,
@@ -203,7 +189,6 @@ BpkCalendarDate.propTypes = { ...propTypes };
 
 export const defaultProps = {
   className: null,
-  cellType: null,
   isBlocked: false,
   isFocused: false,
   isKeyboardFocusable: true,

package/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -51,26 +51,6 @@ $bpk-spacing-v2: true;
     }
   }
 
-  &--colored {
-    color: $bpk-color-white;
-
-    &-default {
-      background-color: $bpk-color-sky-gray-tint-02;
-    }
-
-    &-positive {
-      background-color: $bpk-color-monteverde;
-    }
-
-    &-neutral {
-      background-color: $bpk-color-erfoud;
-    }
-
-    &-negative {
-      background-color: $bpk-color-panjin;
-    }
-  }
-
   &:not(.bpk-calendar-date--selected):active {
     background-color: $bpk-calendar-day-active-background-color;
 
@@ -89,11 +69,6 @@ $bpk-spacing-v2: true;
   &--selected {
     cursor: default;
 
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-calendar-date-selected-background-color,
-      $bpk-calendar-day-selected-background-color
-    );
     @include bpk-themeable-property(
       color,
       --bpk-calendar-date-text-selected-color,
@@ -102,44 +77,36 @@ $bpk-spacing-v2: true;
   }
 
   &--middle {
-    background-color: $bpk-color-sky-blue-tint-03;
-    color: $bpk-color-sky-gray;
+    background-color: $bpk-surface-highlight-day;
+    color: $bpk-text-primary-day;
   }
 
   &--single {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--start {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--end {
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
   }
 
   &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    &:not(.bpk-calendar-date--colored) {
-      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
-      box-shadow: 0 0 0 2px
-        var(
-          --bpk-calendar-date-focused-border-color,
-          $bpk-calendar-day-focused-border-color
-        )
-        inset;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-focus-color,
-        $bpk-calendar-day-focused-color
-      );
-    }
+    box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+    box-shadow: 0 0 0 2px
+      var(
+        --bpk-calendar-date-focused-border-color,
+        $bpk-calendar-day-focused-border-color
+      )
+      inset;
 
-    &.bpk-calendar-date--colored {
-      border: (bpk-spacing-sm() / 2) solid
-        $bpk-calendar-day-focused-border-color;
-      box-shadow: 0 0 0 1px $bpk-color-white inset;
-    }
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-focus-color,
+      $bpk-calendar-day-focused-color
+    );
   }
 
   &:disabled,

package/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -40,20 +40,20 @@
     &--start {
       background-image: linear-gradient(
         to right,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
 
     &--middle {
-      background-color: $bpk-color-sky-blue-tint-03;
+      background-color: $bpk-surface-highlight-day;
     }
 
     &--end {
       background-image: linear-gradient(
         to left,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
       );
     }
   }