@skyscanner/backpack-web 38.22.0 → 40.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +15 -0
  2. package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +44 -2
  3. package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
  4. package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css +1 -1
  5. package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.module.css +1 -1
  6. package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js +6 -0
  7. package/bpk-mixins/_badges-v2.scss +37 -36
  8. package/bpk-mixins/_badges.scss +37 -36
  9. package/bpk-mixins/_borders.scss +16 -16
  10. package/bpk-mixins/_breakpoints.scss +11 -11
  11. package/bpk-mixins/_buttons.scss +141 -137
  12. package/bpk-mixins/_cards.scss +13 -13
  13. package/bpk-mixins/_chips.scss +66 -66
  14. package/bpk-mixins/_forms.scss +214 -202
  15. package/bpk-mixins/_icons.scss +7 -4
  16. package/bpk-mixins/_index.scss +19 -19
  17. package/bpk-mixins/_layers.scss +34 -34
  18. package/bpk-mixins/_margins.scss +3 -3
  19. package/bpk-mixins/_panels.scss +9 -9
  20. package/bpk-mixins/_radii.scss +6 -6
  21. package/bpk-mixins/_scroll-indicators.scss +2 -2
  22. package/bpk-mixins/_shadows.scss +4 -4
  23. package/bpk-mixins/_spinners.scss +10 -10
  24. package/bpk-mixins/_tokens.scss +1 -3
  25. package/bpk-mixins/_typography.scss +204 -195
  26. package/bpk-mixins/_utils.scss +17 -12
  27. package/bpk-stylesheets/index.scss +13 -14
  28. package/bpk-stylesheets/normalize.css +18 -422
  29. package/bpk-stylesheets/normalize.scss +422 -0
  30. package/package.json +1 -5
  31. package/unstable__bpk-mixins/_badges-v2.scss +0 -240
  32. package/unstable__bpk-mixins/_badges.scss +0 -240
  33. package/unstable__bpk-mixins/_borders.scss +0 -268
  34. package/unstable__bpk-mixins/_breakpoints.scss +0 -221
  35. package/unstable__bpk-mixins/_buttons.scss +0 -587
  36. package/unstable__bpk-mixins/_cards.scss +0 -94
  37. package/unstable__bpk-mixins/_chips.scss +0 -249
  38. package/unstable__bpk-mixins/_forms.scss +0 -1045
  39. package/unstable__bpk-mixins/_icons.scss +0 -88
  40. package/unstable__bpk-mixins/_index.scss +0 -38
  41. package/unstable__bpk-mixins/_layers.scss +0 -199
  42. package/unstable__bpk-mixins/_margins.scss +0 -75
  43. package/unstable__bpk-mixins/_panels.scss +0 -96
  44. package/unstable__bpk-mixins/_radii.scss +0 -80
  45. package/unstable__bpk-mixins/_scroll-indicators.scss +0 -79
  46. package/unstable__bpk-mixins/_shadows.scss +0 -58
  47. package/unstable__bpk-mixins/_spinners.scss +0 -102
  48. package/unstable__bpk-mixins/_tokens.scss +0 -19
  49. package/unstable__bpk-mixins/_typography.scss +0 -1225
  50. package/unstable__bpk-mixins/_utils.scss +0 -267
package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts CHANGED
@@ -1,4 +1,18 @@
1
1
  import type { SyntheticEvent, ReactNode } from 'react';
2
+ export declare const PADDING_TYPE: {
3
+ none: string;
4
+ base: string;
5
+ lg: string;
6
+ xxl: string;
7
+ xxxl: string;
8
+ };
9
+ export type PaddingType = (typeof PADDING_TYPE)[keyof typeof PADDING_TYPE];
10
+ export type PaddingStyles = {
11
+ top?: PaddingType;
12
+ start?: PaddingType;
13
+ end?: PaddingType;
14
+ bottom?: PaddingType;
15
+ };
2
16
  interface CommonProps {
3
17
  actionText?: string;
4
18
  children: ReactNode;
@@ -13,6 +27,7 @@ interface CommonProps {
13
27
  title?: string;
14
28
  wide?: boolean;
15
29
  isOpen: boolean;
30
+ paddingStyles?: PaddingStyles;
16
31
  }
17
32
  export type Props = CommonProps & ({
18
33
  ariaLabelledby: string;
package/bpk-component-bottom-sheet/src/BpkBottomSheet.js CHANGED
@@ -28,6 +28,40 @@ import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
28
28
  import STYLES from "./BpkBottomSheet.module.css";
29
29
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
30
30
  const getClassName = cssModules(STYLES);
31
+ export const PADDING_TYPE = {
32
+ none: 'none',
33
+ base: 'base',
34
+ lg: 'lg',
35
+ xxl: 'xxl',
36
+ xxxl: 'xxxl'
37
+ };
38
+ const getContentStyles = paddingStyles => {
39
+ const {
40
+ bottom = PADDING_TYPE.lg,
41
+ end,
42
+ start = PADDING_TYPE.lg,
43
+ top = PADDING_TYPE.none
44
+ } = paddingStyles;
45
+ const classNames = ['bpk-bottom-sheet--content'];
46
+
47
+ // Add padding classes for each side if not 'none'
48
+ if (top !== PADDING_TYPE.none) {
49
+ classNames.push(`bpk-bottom-sheet--padding-${top}-top`);
50
+ }
51
+ if (bottom !== PADDING_TYPE.none) {
52
+ classNames.push(`bpk-bottom-sheet--padding-${bottom}-bottom`);
53
+ }
54
+ if (start !== PADDING_TYPE.none) {
55
+ classNames.push(`bpk-bottom-sheet--padding-${start}-start`);
56
+ }
57
+
58
+ // Handle end padding: use explicit 'end' value or fallback to 'start' value
59
+ const endPadding = end || start;
60
+ if (endPadding && endPadding !== PADDING_TYPE.none) {
61
+ classNames.push(`bpk-bottom-sheet--padding-${endPadding}-end`);
62
+ }
63
+ return getClassName(...classNames);
64
+ };
31
65
  const BpkBottomSheet = ({
32
66
  actionText = '',
33
67
  children,
@@ -39,6 +73,12 @@ const BpkBottomSheet = ({
39
73
  isOpen,
40
74
  onAction = () => null,
41
75
  onClose,
76
+ paddingStyles = {
77
+ top: PADDING_TYPE.none,
78
+ start: PADDING_TYPE.lg,
79
+ end: PADDING_TYPE.lg,
80
+ bottom: PADDING_TYPE.lg
81
+ },
42
82
  title = '',
43
83
  wide = false,
44
84
  ...ariaProps
@@ -55,6 +95,7 @@ const BpkBottomSheet = ({
55
95
  }, [isAboveMobile, onClose]);
56
96
  const headingId = `bpk-bottom-sheet-heading-${id}`;
57
97
  const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
98
+ const contentStyle = getContentStyles(paddingStyles);
58
99
  return /*#__PURE__*/_jsx(BpkDialogWrapper, {
59
100
  ...ariaProps,
60
101
  dialogClassName: dialogClassName,
@@ -75,12 +116,13 @@ const BpkBottomSheet = ({
75
116
  },
76
117
  children: /*#__PURE__*/_jsxs(_Fragment, {
77
118
  children: [/*#__PURE__*/_jsx("header", {
78
- className: getClassName('bpk-bottom-sheet--header'),
119
+ className: getClassName('bpk-bottom-sheet--header-wrapper'),
79
120
  children: /*#__PURE__*/_jsx(BpkNavigationBar, {
80
121
  id: headingId,
81
122
  title: title,
82
123
  titleTextStyle: TEXT_STYLES.label1,
83
124
  titleTagName: title ? 'h2' : 'span',
125
+ className: getClassName('bpk-bottom-sheet--header'),
84
126
  leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
85
127
  label: closeLabel,
86
128
  onClick: handleClose
@@ -91,7 +133,7 @@ const BpkBottomSheet = ({
91
133
  }) : null
92
134
  })
93
135
  }), /*#__PURE__*/_jsx("div", {
94
- className: getClassName('bpk-bottom-sheet--content'),
136
+ className: contentStyle,
95
137
  children: children
96
138
  })]
97
139
  })
package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;padding:.25rem 0;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(100%)}}
18
+ .bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-fill-mode:forwards;animation-duration:200ms;animation-name:slide-down;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:0;flex:1;overflow-y:auto}.bpk-bottom-sheet--padding-base-top{padding-top:1rem}.bpk-bottom-sheet--padding-base-bottom{padding-bottom:1rem}.bpk-bottom-sheet--padding-base-start{padding-inline-start:1rem}.bpk-bottom-sheet--padding-base-end{padding-inline-end:1rem}.bpk-bottom-sheet--padding-lg-top{padding-top:1.5rem}.bpk-bottom-sheet--padding-lg-bottom{padding-bottom:1.5rem}.bpk-bottom-sheet--padding-lg-start{padding-inline-start:1.5rem}.bpk-bottom-sheet--padding-lg-end{padding-inline-end:1.5rem}.bpk-bottom-sheet--padding-xxl-top{padding-top:2.5rem}.bpk-bottom-sheet--padding-xxl-bottom{padding-bottom:2.5rem}.bpk-bottom-sheet--padding-xxl-start{padding-inline-start:2.5rem}.bpk-bottom-sheet--padding-xxl-end{padding-inline-end:2.5rem}.bpk-bottom-sheet--padding-xxxl-top{padding-top:4rem}.bpk-bottom-sheet--padding-xxxl-bottom{padding-bottom:4rem}.bpk-bottom-sheet--padding-xxxl-start{padding-inline-start:4rem}.bpk-bottom-sheet--padding-xxxl-end{padding-inline-end:4rem}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header-wrapper{position:sticky;top:0;z-index:899;background-color:#fff;background-color:var(--bpk-navigation-bar-background-color, rgb(255, 255, 255))}.bpk-bottom-sheet--header{min-height:fit-content;padding:1.5rem}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}@keyframes slide-down{0%{transform:translateY(0%)}100%{transform:translateY(100%)}}
package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;padding-top:.25rem;padding-bottom:1.5rem;overflow-x:hidden;box-sizing:border-box;gap:.25rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{padding-bottom:1rem;overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
18
+ .bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-block:-1.5rem;padding-block:1.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListRowRailContainer.module.css CHANGED
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100%}
18
+ .bpk-card-list-row-rail{display:flex;flex-direction:column}.bpk-card-list-row-rail__accessory{width:100%;margin-block-start:1.5rem}
package/bpk-component-inset-banner/src/BpkInsetBannerV2/BpkInsetBannerSponsored.js CHANGED
@@ -18,6 +18,7 @@
18
18
  import { useState } from 'react';
19
19
  import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
20
20
  import BpkBottomSheet from "../../../bpk-component-bottom-sheet";
21
+ import { PADDING_TYPE } from "../../../bpk-component-bottom-sheet/src/BpkBottomSheet";
21
22
  import ViewIcon from "../../../bpk-component-icon/lg/view";
22
23
  import InfoIcon from "../../../bpk-component-icon/sm/information-circle";
23
24
  import BpkImage from "../../../bpk-component-image";
@@ -98,6 +99,11 @@ const BpkInsetBannerSponsored = ({
98
99
  ariaLabel: callToAction?.bottomSheetA11yLabel || '',
99
100
  closeOnScrimClick: true,
100
101
  closeOnEscPressed: true,
102
+ paddingStyles: {
103
+ top: PADDING_TYPE.base,
104
+ start: PADDING_TYPE.lg,
105
+ bottom: PADDING_TYPE.base
106
+ },
101
107
  children: callToAction.bottomSheetContent.map((item, index) => /*#__PURE__*/_jsxs("div", {
102
108
  className: getClassName('bpk-inset-banner--bottom-sheet-content'),
103
109
  children: [/*#__PURE__*/_jsx("div", {
package/bpk-mixins/_badges-v2.scss CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
22
- @import 'typography.scss';
23
- @import 'radii.scss';
24
- @import 'utils.scss';
21
+ @use 'tokens';
22
+ @use 'typography';
23
+ @use 'radii';
24
+ @use 'utils';
25
25
 
26
26
  ////
27
27
  /// @group badges
@@ -36,12 +36,12 @@
36
36
 
37
37
  @mixin bpk-badge {
38
38
  display: inline-flex;
39
- padding: bpk-spacing-sm() bpk-spacing-md();
39
+ padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
40
40
  align-items: center;
41
41
 
42
- @include bpk-border-radius-xs;
43
- @include bpk-text;
44
- @include bpk-footnote;
42
+ @include radii.bpk-border-radius-xs;
43
+ @include typography.bpk-text;
44
+ @include typography.bpk-footnote;
45
45
  }
46
46
 
47
47
  /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
76
76
  border-top-right-radius: 0;
77
77
  border-bottom-right-radius: 0;
78
78
 
79
- @include bpk-rtl {
79
+ @include utils.bpk-rtl {
80
80
  right: inherit;
81
81
  left: 0;
82
82
  border-bottom-left-radius: 0;
83
- border-bottom-right-radius: $bpk-border-radius-xs;
83
+ border-bottom-right-radius: tokens.$bpk-border-radius-xs;
84
84
  }
85
85
  }
86
86
 
@@ -102,10 +102,10 @@
102
102
  border-top-right-radius: 0;
103
103
  border-bottom-left-radius: 0;
104
104
 
105
- @include bpk-rtl {
105
+ @include utils.bpk-rtl {
106
106
  right: 0;
107
107
  left: inherit;
108
- border-bottom-left-radius: $bpk-border-radius-xs;
108
+ border-bottom-left-radius: tokens.$bpk-border-radius-xs;
109
109
  border-bottom-right-radius: 0;
110
110
  }
111
111
  }
@@ -121,9 +121,9 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-badge--normal {
124
- background-color: $bpk-private-badge-background-normal-day;
125
- color: $bpk-text-primary-day;
126
- fill: $bpk-text-primary-day;
124
+ background-color: tokens.$bpk-private-badge-background-normal-day;
125
+ color: tokens.$bpk-text-primary-day;
126
+ fill: tokens.$bpk-text-primary-day;
127
127
  }
128
128
 
129
129
  /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
137
137
  /// }
138
138
 
139
139
  @mixin bpk-badge--warning {
140
- background-color: $bpk-private-badge-background-normal-day;
141
- color: $bpk-text-on-light-day;
142
- fill: $bpk-status-warning-spot-day;
140
+ background-color: tokens.$bpk-private-badge-background-normal-day;
141
+ color: tokens.$bpk-text-on-light-day;
142
+ fill: tokens.$bpk-status-warning-spot-day;
143
143
  }
144
144
 
145
145
  /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
153
153
  /// }
154
154
 
155
155
  @mixin bpk-badge--success {
156
- background-color: $bpk-private-badge-background-normal-day;
157
- color: $bpk-text-on-light-day;
158
- fill: $bpk-status-success-spot-day;
156
+ background-color: tokens.$bpk-private-badge-background-normal-day;
157
+ color: tokens.$bpk-text-on-light-day;
158
+ fill: tokens.$bpk-status-success-spot-day;
159
159
  }
160
160
 
161
161
  /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
169
169
  /// }
170
170
 
171
171
  @mixin bpk-badge--critical {
172
- background-color: $bpk-private-badge-background-normal-day;
173
- color: $bpk-text-on-light-day;
174
- fill: $bpk-status-danger-spot-day;
172
+ background-color: tokens.$bpk-private-badge-background-normal-day;
173
+ color: tokens.$bpk-text-on-light-day;
174
+ fill: tokens.$bpk-status-danger-spot-day;
175
175
  }
176
176
 
177
177
  /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
185
185
  /// }
186
186
 
187
187
  @mixin bpk-badge--inverse {
188
- background-color: $bpk-surface-default-day;
189
- color: $bpk-text-primary-day;
190
- fill: $bpk-text-primary-day;
188
+ background-color: tokens.$bpk-surface-default-day;
189
+ color: tokens.$bpk-text-primary-day;
190
+ fill: tokens.$bpk-text-primary-day;
191
191
  }
192
192
 
193
193
  /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
202
202
 
203
203
  @mixin bpk-badge--outline {
204
204
  background-color: transparent;
205
- color: $bpk-text-on-dark-day;
206
- box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
207
- fill: $bpk-text-on-dark-day;
205
+ color: tokens.$bpk-text-on-dark-day;
206
+ box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
207
+ tokens.$bpk-text-on-dark-day;
208
+ fill: tokens.$bpk-text-on-dark-day;
208
209
  }
209
210
 
210
211
  /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
218
219
  /// }
219
220
 
220
221
  @mixin bpk-badge--strong {
221
- background-color: $bpk-core-primary-day;
222
- color: $bpk-text-on-dark-day;
223
- fill: $bpk-text-on-dark-day;
222
+ background-color: tokens.$bpk-core-primary-day;
223
+ color: tokens.$bpk-text-on-dark-day;
224
+ fill: tokens.$bpk-text-on-dark-day;
224
225
  }
225
226
 
226
227
  /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
234
235
  /// }
235
236
 
236
237
  @mixin bpk-badge--brand {
237
- background-color: $bpk-core-accent-day;
238
- color: $bpk-text-primary-inverse-day;
239
- fill: $bpk-text-primary-inverse-day;
238
+ background-color: tokens.$bpk-core-accent-day;
239
+ color: tokens.$bpk-text-primary-inverse-day;
240
+ fill: tokens.$bpk-text-primary-inverse-day;
240
241
  }
package/bpk-mixins/_badges.scss CHANGED
@@ -18,10 +18,10 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
22
- @import 'radii.scss';
23
- @import 'typography.scss';
24
- @import 'utils.scss';
21
+ @use 'tokens';
22
+ @use 'radii';
23
+ @use 'typography';
24
+ @use 'utils';
25
25
 
26
26
  ////
27
27
  /// @group badges
@@ -36,12 +36,12 @@
36
36
 
37
37
  @mixin bpk-badge {
38
38
  display: inline-flex;
39
- padding: bpk-spacing-sm() bpk-spacing-md();
39
+ padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
40
40
  align-items: center;
41
41
 
42
- @include bpk-border-radius-xs;
43
- @include bpk-text;
44
- @include bpk-footnote;
42
+ @include radii.bpk-border-radius-xs;
43
+ @include typography.bpk-text;
44
+ @include typography.bpk-footnote;
45
45
  }
46
46
 
47
47
  /// Centered badge. Modifies the bpk-badge mixin.
@@ -76,11 +76,11 @@
76
76
  border-top-right-radius: 0;
77
77
  border-bottom-right-radius: 0;
78
78
 
79
- @include bpk-rtl {
79
+ @include utils.bpk-rtl {
80
80
  right: inherit;
81
81
  left: 0;
82
82
  border-bottom-left-radius: 0;
83
- border-bottom-right-radius: $bpk-border-radius-xs;
83
+ border-bottom-right-radius: tokens.$bpk-border-radius-xs;
84
84
  }
85
85
  }
86
86
 
@@ -102,10 +102,10 @@
102
102
  border-top-right-radius: 0;
103
103
  border-bottom-left-radius: 0;
104
104
 
105
- @include bpk-rtl {
105
+ @include utils.bpk-rtl {
106
106
  right: 0;
107
107
  left: inherit;
108
- border-bottom-left-radius: $bpk-border-radius-xs;
108
+ border-bottom-left-radius: tokens.$bpk-border-radius-xs;
109
109
  border-bottom-right-radius: 0;
110
110
  }
111
111
  }
@@ -121,9 +121,9 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-badge--normal {
124
- background-color: $bpk-private-badge-background-normal-day;
125
- color: $bpk-text-primary-day;
126
- fill: $bpk-text-primary-day;
124
+ background-color: tokens.$bpk-private-badge-background-normal-day;
125
+ color: tokens.$bpk-text-primary-day;
126
+ fill: tokens.$bpk-text-primary-day;
127
127
  }
128
128
 
129
129
  /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +137,9 @@
137
137
  /// }
138
138
 
139
139
  @mixin bpk-badge--warning {
140
- background-color: $bpk-private-badge-background-normal-day;
141
- color: $bpk-text-on-light-day;
142
- fill: $bpk-status-warning-spot-day;
140
+ background-color: tokens.$bpk-private-badge-background-normal-day;
141
+ color: tokens.$bpk-text-on-light-day;
142
+ fill: tokens.$bpk-status-warning-spot-day;
143
143
  }
144
144
 
145
145
  /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +153,9 @@
153
153
  /// }
154
154
 
155
155
  @mixin bpk-badge--success {
156
- background-color: $bpk-private-badge-background-normal-day;
157
- color: $bpk-text-on-light-day;
158
- fill: $bpk-status-success-spot-day;
156
+ background-color: tokens.$bpk-private-badge-background-normal-day;
157
+ color: tokens.$bpk-text-on-light-day;
158
+ fill: tokens.$bpk-status-success-spot-day;
159
159
  }
160
160
 
161
161
  /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +169,9 @@
169
169
  /// }
170
170
 
171
171
  @mixin bpk-badge--critical {
172
- background-color: $bpk-private-badge-background-normal-day;
173
- color: $bpk-text-on-light-day;
174
- fill: $bpk-status-danger-spot-day;
172
+ background-color: tokens.$bpk-private-badge-background-normal-day;
173
+ color: tokens.$bpk-text-on-light-day;
174
+ fill: tokens.$bpk-status-danger-spot-day;
175
175
  }
176
176
 
177
177
  /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +185,9 @@
185
185
  /// }
186
186
 
187
187
  @mixin bpk-badge--inverse {
188
- background-color: $bpk-surface-default-day;
189
- color: $bpk-text-primary-day;
190
- fill: $bpk-text-primary-day;
188
+ background-color: tokens.$bpk-surface-default-day;
189
+ color: tokens.$bpk-text-primary-day;
190
+ fill: tokens.$bpk-text-primary-day;
191
191
  }
192
192
 
193
193
  /// Outline badge. Modifies the bpk-badge mixin.
@@ -202,9 +202,10 @@
202
202
 
203
203
  @mixin bpk-badge--outline {
204
204
  background-color: transparent;
205
- color: $bpk-text-on-dark-day;
206
- box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-text-on-dark-day;
207
- fill: $bpk-text-on-dark-day;
205
+ color: tokens.$bpk-text-on-dark-day;
206
+ box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
207
+ tokens.$bpk-text-on-dark-day;
208
+ fill: tokens.$bpk-text-on-dark-day;
208
209
  }
209
210
 
210
211
  /// Strong badge. Modifies the bpk-badge mixin.
@@ -218,9 +219,9 @@
218
219
  /// }
219
220
 
220
221
  @mixin bpk-badge--strong {
221
- background-color: $bpk-core-primary-day;
222
- color: $bpk-text-on-dark-day;
223
- fill: $bpk-text-on-dark-day;
222
+ background-color: tokens.$bpk-core-primary-day;
223
+ color: tokens.$bpk-text-on-dark-day;
224
+ fill: tokens.$bpk-text-on-dark-day;
224
225
  }
225
226
 
226
227
  /// Brand badge. Modifies the bpk-badge mixin.
@@ -234,7 +235,7 @@
234
235
  /// }
235
236
 
236
237
  @mixin bpk-badge--brand {
237
- background-color: $bpk-core-accent-day;
238
- color: $bpk-text-primary-inverse-day;
239
- fill: $bpk-text-primary-inverse-day;
238
+ background-color: tokens.$bpk-core-accent-day;
239
+ color: tokens.$bpk-text-primary-inverse-day;
240
+ fill: tokens.$bpk-text-primary-inverse-day;
240
241
  }
package/bpk-mixins/_borders.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* stylelint-disable at-rule-disallowed-list */
20
20
 
21
- @import 'tokens.scss';
21
+ @use 'tokens';
22
22
 
23
23
  ////
24
24
  /// @group borders
@@ -82,7 +82,7 @@
82
82
  /// }
83
83
 
84
84
  @mixin bpk-border-sm($color, $inset: inset) {
85
- @include _bpk-border($bpk-border-size-sm, $color, $inset);
85
+ @include _bpk-border(tokens.$bpk-border-size-sm, $color, $inset);
86
86
  }
87
87
 
88
88
  /// Small "1px" top border.
@@ -95,7 +95,7 @@
95
95
  /// }
96
96
 
97
97
  @mixin bpk-border-top-sm($color, $inset: inset) {
98
- @include _bpk-border-top($bpk-border-size-sm, $color, $inset);
98
+ @include _bpk-border-top(tokens.$bpk-border-size-sm, $color, $inset);
99
99
  }
100
100
 
101
101
  /// Small "1px" right border.
@@ -108,7 +108,7 @@
108
108
  /// }
109
109
 
110
110
  @mixin bpk-border-right-sm($color, $inset: inset) {
111
- @include bpk-border-right($bpk-border-size-sm, $color, $inset);
111
+ @include bpk-border-right(tokens.$bpk-border-size-sm, $color, $inset);
112
112
  }
113
113
 
114
114
  /// Small "1px" bottom border.
@@ -121,7 +121,7 @@
121
121
  /// }
122
122
 
123
123
  @mixin bpk-border-bottom-sm($color, $inset: inset) {
124
- @include _bpk-border-bottom($bpk-border-size-sm, $color, $inset);
124
+ @include _bpk-border-bottom(tokens.$bpk-border-size-sm, $color, $inset);
125
125
  }
126
126
 
127
127
  /// Small "1px" left border.
@@ -134,7 +134,7 @@
134
134
  /// }
135
135
 
136
136
  @mixin bpk-border-left-sm($color, $inset: inset) {
137
- @include bpk-border-left($bpk-border-size-sm, $color, $inset);
137
+ @include bpk-border-left(tokens.$bpk-border-size-sm, $color, $inset);
138
138
  }
139
139
 
140
140
  /// Large "2px" border.
@@ -147,7 +147,7 @@
147
147
  /// }
148
148
 
149
149
  @mixin bpk-border-lg($color, $inset: inset) {
150
- @include _bpk-border($bpk-border-size-lg, $color, $inset);
150
+ @include _bpk-border(tokens.$bpk-border-size-lg, $color, $inset);
151
151
  }
152
152
 
153
153
  /// Large "2px" top border.
@@ -160,7 +160,7 @@
160
160
  /// }
161
161
 
162
162
  @mixin bpk-border-top-lg($color, $inset: inset) {
163
- @include _bpk-border-top($bpk-border-size-lg, $color, $inset);
163
+ @include _bpk-border-top(tokens.$bpk-border-size-lg, $color, $inset);
164
164
  }
165
165
 
166
166
  /// Large "2px" right border.
@@ -173,7 +173,7 @@
173
173
  /// }
174
174
 
175
175
  @mixin bpk-border-right-lg($color, $inset: inset) {
176
- @include bpk-border-right($bpk-border-size-lg, $color, $inset);
176
+ @include bpk-border-right(tokens.$bpk-border-size-lg, $color, $inset);
177
177
  }
178
178
 
179
179
  /// Large "2px" bottom border.
@@ -186,7 +186,7 @@
186
186
  /// }
187
187
 
188
188
  @mixin bpk-border-bottom-lg($color, $inset: inset) {
189
- @include _bpk-border-bottom($bpk-border-size-lg, $color, $inset);
189
+ @include _bpk-border-bottom(tokens.$bpk-border-size-lg, $color, $inset);
190
190
  }
191
191
 
192
192
  /// Large "2px" left border.
@@ -199,7 +199,7 @@
199
199
  /// }
200
200
 
201
201
  @mixin bpk-border-left-lg($color, $inset: inset) {
202
- @include bpk-border-left($bpk-border-size-lg, $color, $inset);
202
+ @include bpk-border-left(tokens.$bpk-border-size-lg, $color, $inset);
203
203
  }
204
204
 
205
205
  /// Extra large "3px" border.
@@ -212,7 +212,7 @@
212
212
  /// }
213
213
 
214
214
  @mixin bpk-border-xl($color, $inset: inset) {
215
- @include _bpk-border($bpk-border-size-xl, $color, $inset);
215
+ @include _bpk-border(tokens.$bpk-border-size-xl, $color, $inset);
216
216
  }
217
217
 
218
218
  /// Extra large "3px" top border.
@@ -225,7 +225,7 @@
225
225
  /// }
226
226
 
227
227
  @mixin bpk-border-top-xl($color, $inset: inset) {
228
- @include _bpk-border-top($bpk-border-size-xl, $color, $inset);
228
+ @include _bpk-border-top(tokens.$bpk-border-size-xl, $color, $inset);
229
229
  }
230
230
 
231
231
  /// Extra large "3px" right border.
@@ -238,7 +238,7 @@
238
238
  /// }
239
239
 
240
240
  @mixin bpk-border-right-xl($color, $inset: inset) {
241
- @include bpk-border-right($bpk-border-size-xl, $color, $inset);
241
+ @include bpk-border-right(tokens.$bpk-border-size-xl, $color, $inset);
242
242
  }
243
243
 
244
244
  /// Extra large "3px" bottom border.
@@ -251,7 +251,7 @@
251
251
  /// }
252
252
 
253
253
  @mixin bpk-border-bottom-xl($color, $inset: inset) {
254
- @include _bpk-border-bottom($bpk-border-size-xl, $color, $inset);
254
+ @include _bpk-border-bottom(tokens.$bpk-border-size-xl, $color, $inset);
255
255
  }
256
256
 
257
257
  /// Extra large "3px" left border.
@@ -264,5 +264,5 @@
264
264
  /// }
265
265
 
266
266
  @mixin bpk-border-left-xl($color, $inset: inset) {
267
- @include bpk-border-left($bpk-border-size-xl, $color, $inset);
267
+ @include bpk-border-left(tokens.$bpk-border-size-xl, $color, $inset);
268
268
  }