@vtex/faststore-plugin-buyer-portal 1.3.32 → 1.3.33

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 (13) hide show
  1. package/CHANGELOG.md +11 -5
  2. package/package.json +1 -1
  3. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +10 -24
  4. package/src/features/profile/layouts/ProfileLayout/profile-layout.scss +17 -19
  5. package/src/features/shared/components/BasicDrawer/BasicDrawerHeading.tsx +6 -10
  6. package/src/features/shared/components/BasicDrawer/basic-drawer.scss +50 -54
  7. package/src/features/shared/components/HeaderInside/header-inside.scss +20 -6
  8. package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +8 -10
  9. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +26 -44
  10. package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss +57 -43
  11. package/src/features/shared/utils/constants.ts +1 -1
  12. package/src/themes/index.scss +4 -0
  13. package/src/themes/tokens.scss +5 -4
package/CHANGELOG.md CHANGED
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
+ ## [1.3.33] - 2025-11-25
11
+
12
+ ### Changed
13
+
14
+ - Fix BasicDrawer and SidebarDrawer spacing and dimensions using the new CSS tokens
15
+ - Adjustments in Profile page styles
16
+ - Adjustments in Org Unit Details pages paddings inside cards
17
+ - Include new transparent color
18
+
10
19
  ## [1.3.32] - 2025-11-25
11
20
 
12
21
  ### Changed
@@ -35,10 +44,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
35
44
 
36
45
  ### Added
37
46
 
38
- - Remove faststore tokens from Org Unit Details page to use our tokens and mixins
39
-
40
- ### Added
41
-
42
47
  - Create tokens file with variables according with design system definition
43
48
  - Create typography mixins
44
49
 
@@ -309,7 +314,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
309
314
  - Add CHANGELOG file
310
315
  - Add README file
311
316
 
312
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...HEAD
317
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.33...HEAD
313
318
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
314
319
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
315
320
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -324,6 +329,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
324
329
 
325
330
  # <<<<<<< HEAD
326
331
 
332
+ [1.3.33]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...v1.3.33
327
333
  [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
328
334
  [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
329
335
  [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.32",
3
+ "version": "1.3.33",
4
4
  "description": "A plugin for faststore with buyer portal",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss CHANGED
@@ -30,13 +30,6 @@
30
30
  }
31
31
 
32
32
  [data-fs-bp-header-inside] {
33
- margin: var(--fs-bp-margin-4) var(--fs-bp-margin-0)'';
34
- height: 4.5rem;
35
-
36
- @include media(">=tablet") {
37
- margin: var(--fs-bp-margin-0);
38
- }
39
-
40
33
  [data-fs-org-units-details-header-skeleton] {
41
34
  max-width: 40rem;
42
35
  }
@@ -49,7 +42,7 @@
49
42
  grid-auto-rows: auto;
50
43
  gap: var(--fs-bp-gap-5);
51
44
 
52
- @include media(">=tablet") {
45
+ @include media(">=notebook") {
53
46
  grid-template-columns: repeat(2, 1fr);
54
47
  grid-auto-rows: 1fr;
55
48
  }
@@ -71,10 +64,10 @@
71
64
  border-radius: var(fs-bp-border-radius-3);
72
65
 
73
66
  [data-fs-card-body] {
74
- padding: var(--fs-bp-margin-4) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
67
+ padding: var(--fs-bp-margin-2) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
75
68
 
76
69
  @include media('>=tablet') {
77
- padding: var(--fs-bp-margin-7) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
70
+ padding: var(--fs-bp-margin-5) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
78
71
  }
79
72
  }
80
73
 
@@ -99,33 +92,27 @@
99
92
  &[data-fs-bp-contracts-settings-card] {
100
93
  [data-fs-bp-letter-highlight] {
101
94
  @include text-style('body');
95
+ margin-top: var(--fs-bp-margin-3);
102
96
  margin-left: var(--fs-bp-margin-5);
103
- margin-right: var(--fs-bp-margin-2);
97
+ margin-bottom: var(--fs-bp-margin-0);
104
98
  width: var(--fs-bp-spacing-9);
105
99
  height: var(--fs-bp-spacing-9);
106
100
 
107
101
  @include media('>=tablet') {
108
102
  @include text-style('display-6');
109
- margin-bottom: var(--fs-bp-margin-3);
103
+ margin-bottom: var(--fs-bp-margin-1);
110
104
  width: var(--fs-bp-spacing-12);
111
105
  height: var(--fs-bp-spacing-12);
112
106
  }
113
107
  }
114
-
115
- [data-fs-card-body] {
116
- padding-top: var(--fs-bp-padding-5);
117
-
118
- @include media ('>=tablet') {
119
- padding-top: var(--fs-bp-padding-7);
120
- }
121
- }
122
108
  }
123
109
  }
124
110
 
125
111
  [data-fs-vertical-nav-menu] {
126
112
  [data-fs-vertical-nav-menu-list] {
113
+ margin-top: var(--fs-bp-margin-1);
127
114
  @include media('>=tablet') {
128
- margin-top: var(--fs-bp-margin-7);
115
+ margin-top: var(--fs-bp-margin-5);
129
116
  }
130
117
 
131
118
  [data-fs-vertical-nav-menu-link] {
@@ -138,9 +125,8 @@
138
125
  }
139
126
 
140
127
  [data-fs-vertical-nav-menu-org-wrapper] {
141
- [data-fs-vertical-nav-menu-org-name] {
142
- margin-top: var(--fs-bp-margin-0);
143
- }
128
+ min-height: var(--fs-bp-spacing-9);
129
+ padding: var(--fs-bp-padding-2) 0;
144
130
  }
145
131
  }
146
132
 
package/src/features/profile/layouts/ProfileLayout/profile-layout.scss CHANGED
@@ -8,44 +8,43 @@
8
8
  @import "../../../shared/components/Error/error.scss";
9
9
 
10
10
  width: 100%;
11
- padding: var(--fs-text-size-1) var(--fs-spacing-7);
12
11
 
13
12
  [data-fs-bp-profile-details-title] {
14
- font-weight: var(--fs-text-weight-semibold);
15
- size: var(--fs-spacing-3);
16
- line-height: var(--fs-spacing-4);
17
- color: #000;
13
+ @include text-style('action');
14
+ font-size: var(--fs-bp-text-size-base);
15
+ color: var(--fs-bp-color-black);
18
16
  display: flex;
19
17
  justify-content: space-between;
20
- padding: var(--fs-spacing-4) 0;
18
+ padding: var(--fs-bp-padding-5) 0;
21
19
  align-items: center;
22
20
  }
23
21
 
24
22
  [data-fs-bp-profile-divider] {
25
- border: calc(var(--fs-border-width) / 1) solid #e0e0e0;
23
+ display: block;
24
+ height: 1px;
25
+ border: var(--fs-bp-border-radius-0);
26
+ border-bottom: 1px solid var(--fs-bp-color-neutral-3);
26
27
  }
27
28
 
28
29
  [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
29
- border-radius: var(--fs-border-radius-pill);
30
+ border-radius: var(--fs-bp-border-radius-full);
30
31
  }
31
32
 
32
33
  [data-fs-bp-profile-details-row] {
33
34
  display: flex;
34
35
  flex-direction: row;
35
- padding: 1.375rem 0;
36
- size: var(--fs-text-size-1);
37
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
38
- font-weight: var(--fs-text-weight-regular);
36
+ padding: var(--fs-bp-padding-5) 0;
37
+ @include text-style('body');
39
38
 
40
39
  [data-fs-bp-profile-details-row-label] {
41
40
  width: 12.5rem;
42
- color: #707070;
43
- font-size: var(--fs-text-size-1);
41
+ color: var(--fs-bp-color-neutral-7);
42
+ font-size: var(--fs-bp-text-body);
44
43
  }
45
44
 
46
45
  [data-fs-bp-profile-details-row-value] {
47
- color: #000;
48
- font-size: var(--fs-text-size-1);
46
+ color: var(--fs-bp-color-black);
47
+ font-size: var(--fs-bp-text-body);
49
48
  }
50
49
 
51
50
  @include media("<=tablet") {
@@ -54,12 +53,11 @@
54
53
  }
55
54
 
56
55
  a {
57
- color: #0366dd;
56
+ color: var(--fs-bp-color-brand);
58
57
  text-decoration: none;
59
58
  }
60
59
 
61
60
  [data-fs-bp-profile-title] {
62
- font-size: var(--fs-text-size-4);
63
- font-weight: 600;
61
+ @include text-style('display-5');
64
62
  }
65
63
  }
package/src/features/shared/components/BasicDrawer/BasicDrawerHeading.tsx CHANGED
@@ -1,5 +1,7 @@
1
1
  import type { ComponentProps } from "react";
2
2
 
3
+ import { IconButton } from "@faststore/ui";
4
+
3
5
  import { Icon } from "../Icon";
4
6
 
5
7
  export type BasicDrawerHeadingProps = {
@@ -15,18 +17,12 @@ export const BasicDrawerHeading = ({
15
17
  return (
16
18
  <header data-fs-bp-basic-drawer-heading {...props}>
17
19
  <h2 data-fs-bp-basic-drawer-heading-title>{title}</h2>
18
- <button
19
- type="button"
20
+ <IconButton
20
21
  data-fs-bp-basic-drawer-heading-close-button
22
+ aria-label="close drawer btn"
21
23
  onClick={onClose}
22
- >
23
- <Icon
24
- data-fs-bp-basic-drawer-heading-close-icon
25
- name="Close"
26
- width={14}
27
- height={14}
28
- />
29
- </button>
24
+ icon={<Icon name="Close" width={14} height={14} />}
25
+ />
30
26
  </header>
31
27
  );
32
28
  };
package/src/features/shared/components/BasicDrawer/basic-drawer.scss CHANGED
@@ -2,13 +2,15 @@
2
2
  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
3
3
 
4
4
  [data-fs-bp-basic-drawer] {
5
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
6
+
5
7
  display: flex;
6
8
  flex-direction: column;
7
9
  width: 100vw;
8
10
  height: 90%;
9
11
  bottom: 0;
10
- border-top-left-radius: 1.25rem;
11
- border-top-right-radius: 1.25rem;
12
+ border-top-left-radius: var(--fs-bp-border-radius-4);
13
+ border-top-right-radius: var(--fs-bp-border-radius-4);
12
14
 
13
15
  &[data-fs-slide-over][data-fs-mobile-bottom-sheet][data-fs-slide-over-sidebar] {
14
16
  max-height: 100%;
@@ -24,10 +26,6 @@
24
26
  width: 100vw;
25
27
  max-height: min(85vh, 45rem);
26
28
 
27
- border-top-left-radius: var(--fs-spacing-3);
28
- border-top-right-radius: var(--fs-spacing-3);
29
- box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
30
-
31
29
  will-change: transform;
32
30
  backface-visibility: hidden;
33
31
  transform: translate3d(0, 100%, 0);
@@ -57,7 +55,7 @@
57
55
  @include media(">=tablet") {
58
56
  height: 100%;
59
57
  bottom: auto;
60
- border-radius: 0;
58
+ border-radius: var(--fs-bp-border-radius-0);
61
59
  }
62
60
 
63
61
  &[data-fs-slide-over-size="partial"] {
@@ -81,34 +79,39 @@
81
79
  [data-fs-bp-basic-drawer-heading] {
82
80
  width: 100%;
83
81
  display: flex;
84
- justify-content: space-between;
85
82
  align-items: center;
86
- border-bottom: var(--fs-border-radius-small) solid #e0e0e0;
87
- padding: var(--fs-spacing-2) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
83
+ border-bottom: 1px solid var(--fs-bp-color-neutral-3);
88
84
 
89
- @include media(">=tablet") {
90
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
91
- calc(var(--fs-spacing-3) + var(--fs-spacing-0))
92
- calc(var(--fs-spacing-3) + var(--fs-spacing-0))
93
- calc(var(--fs-spacing-8) + var(--fs-spacing-0));
85
+ gap: .625rem;
86
+ padding: .625rem;
87
+ min-height: 4.25rem;
88
+ padding-left: var(--fs-bp-padding-5);
89
+
90
+ @include media('>=tablet') {
91
+ padding-left: .625rem;
94
92
  }
95
93
 
96
94
  [data-fs-bp-basic-drawer-heading-title] {
97
- font-size: var(--fs-text-size-2);
98
- font-weight: 600;
99
- line-height: 1.75rem;
100
-
95
+ @include text-style('body-big');
96
+ font-weight: var(--fs-bp-weight-semibold);
97
+ color: var(--fs-bp-color-black);
98
+
101
99
  @include media(">=tablet") {
102
- font-size: var(--fs-text-size-4);
100
+ @include text-style('display-6');
101
+ }
102
+
103
+ &:first-child {
104
+ @include media('>=tablet') {
105
+ padding-left: 3.125rem;
106
+ }
103
107
  }
104
108
  }
105
109
  [data-fs-bp-basic-drawer-heading-close-button] {
106
- width: var(--fs-spacing-4);
107
- height: var(--fs-spacing-4);
108
- cursor: pointer;
110
+ --fs-button-height: var(--fs-bp-spacing-9);
111
+ margin-left: var(--fs-bp-margin-auto);
109
112
 
110
- [data-fs-bp-basic-drawer-heading-close-icon] {
111
- fill: #000000;
113
+ svg {
114
+ color: var(--fs-bp-color-black);
112
115
  }
113
116
  }
114
117
  }
@@ -119,41 +122,36 @@
119
122
  min-height: auto;
120
123
 
121
124
  p {
122
- font-weight: 400;
123
- font-size: var(--fs-text-size-1);
124
- line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
125
+ @include text-style('body');
125
126
  }
127
+
126
128
  a {
127
- color: #0366dd;
129
+ color: var(--fs-bp-color-brand);
128
130
  text-decoration: none;
129
131
  }
130
132
 
131
133
  [data-fs-bp-basic-drawer-body-wrapper] {
132
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
133
- calc(var(--fs-spacing-3) + var(--fs-spacing-0));
134
+ padding: var(--fs-bp-padding-5);
134
135
  width: 100%;
135
136
 
136
137
  @include media(">=tablet") {
137
- padding: var(--fs-spacing-8)
138
- calc(var(--fs-spacing-8) + var(--fs-spacing-0)) 0
139
- calc(var(--fs-spacing-8) + var(--fs-spacing-0));
138
+ padding: var(--fs-bp-padding-11) var(--fs-bp-padding-12) 0;
140
139
  }
141
140
  }
142
141
  }
143
142
 
144
143
  [data-fs-bp-basic-drawer-footer] {
145
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
144
+ padding: var(--fs-bp-padding-5);
146
145
 
147
- border-top: var(--fs-border-radius-small) solid #e0e0e0;
146
+ border-top: 1px solid var(--fs-bp-color-neutral-3);
148
147
  display: flex;
149
148
  justify-content: center;
150
149
  flex-direction: column;
151
- gap: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
150
+ gap: var(--fs-bp-gap-5);
152
151
 
153
152
  @include media(">=tablet") {
154
153
  flex-direction: row;
155
- padding: var(--fs-spacing-4)
156
- calc(var(--fs-spacing-8) + var(--fs-spacing-0));
154
+ padding: var(--fs-bp-padding-6) var(--fs-bp-padding-12);
157
155
  }
158
156
  }
159
157
 
@@ -165,35 +163,33 @@
165
163
 
166
164
  cursor: pointer;
167
165
 
168
- padding: var(--fs-spacing-3) calc(var(--fs-spacing-5) + var(--fs-spacing-0));
166
+ padding: var(--fs-bp-padding-4) var(--fs-bp-padding-8);
169
167
  min-width: 10.625rem;
170
- border-radius: var(--fs-border-radius-pill);
168
+ border-radius: var(--fs-bp-border-radius-full);
171
169
 
172
- font-size: var(--fs-text-size-1);
173
- font-weight: 600;
174
- line-height: var(--fs-spacing-3);
170
+ @include text-style('action');
175
171
  text-align: center;
176
172
 
177
173
  &[data-fs-bp-basic-drawer-button-variant="confirm"] {
178
- background-color: #0068d7;
179
- color: white;
174
+ background-color: var(--fs-bp-color-brand);
175
+ color: var(--fs-bp-color-white);
180
176
  }
181
177
 
182
178
  &[data-fs-bp-basic-drawer-button-variant="ghost"] {
183
- border: var(--fs-border-width) solid #e0e0e0;
184
- background-color: #ffffff;
185
- color: #0068d7;
179
+ border: 1px solid var(--fs-bp-color-neutral-3);
180
+ background-color: var(--fs-bp-color-white);
181
+ color: var(--fs-bp-color-brand);
186
182
  }
187
183
 
188
184
  &[data-fs-bp-basic-drawer-button-variant="danger"] {
189
- background-color: #d32420;
190
- color: white;
185
+ background-color: var(--fs-bp-color-danger-2);
186
+ color: var(--fs-bp-color-white);
191
187
  }
192
188
 
193
189
  &:disabled {
194
190
  cursor: not-allowed;
195
- background-color: #e0e0e0;
196
- color: #ffffff;
191
+ background-color: var(--fs-bp-color-neutral-3);
192
+ color: var(--fs-bp-color-white);
197
193
  }
198
194
 
199
195
  [data-fs-bp-basic-drawer-button-loading-indicator] {
@@ -206,7 +202,7 @@
206
202
  }
207
203
  }
208
204
 
209
- color: #ffffff;
205
+ color: var(--fs-bp-color-white);
210
206
 
211
207
  position: absolute;
212
208
  right: 0;
package/src/features/shared/components/HeaderInside/header-inside.scss CHANGED
@@ -3,10 +3,20 @@
3
3
  display: flex;
4
4
  justify-content: space-between;
5
5
  align-items: center;
6
- margin: var(--fs-spacing-5) 0;
6
+ padding: var(--fs-bp-padding-4) 0;
7
+ box-sizing: content-box;
8
+ min-height: var(--fs-bp-spacing-9);
9
+
10
+ @include media('>=tablet') {
11
+ padding: var(--fs-bp-padding-8) 0;
12
+ }
13
+
14
+ @include media('>=notebook') {
15
+ padding: var(--fs-bp-padding-9) 0;
16
+ }
7
17
 
8
18
  [data-fs-bp-back-link] {
9
- margin-right: var(--fs-spacing-3);
19
+ margin-right: var(--fs-bp-margin-4);
10
20
 
11
21
  display: flex;
12
22
  align-items: center;
@@ -14,11 +24,15 @@
14
24
  }
15
25
 
16
26
  [data-fs-bp-header-inside-title] {
27
+ @include text-style('body-big');
28
+ font-weight: var(--fs-bp-weight-semibold);
29
+ color: var(--fs-bp-color-black);
17
30
  text-transform: capitalize;
18
- font-size: var(--fs-text-size-4);
19
- color: #000;
20
- font-weight: 600;
21
31
  margin-right: auto;
32
+
33
+ @include media('>=tablet') {
34
+ @include text-style('display-5');
35
+ }
22
36
  }
23
37
 
24
38
  [data-fs-header-inside-button] {
@@ -28,7 +42,7 @@
28
42
  width: var(--fs-bp-spacing-10);
29
43
  height: var(--fs-bp-spacing-10);
30
44
  border-radius: var(--fs-bp-border-radius-full);
31
- color: #ffffff;
45
+ color: var(--fs-bp-color-white);
32
46
  cursor: pointer;
33
47
  position: fixed;
34
48
  bottom: var(--fs-bp-spacing-5);
package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx CHANGED
@@ -69,16 +69,14 @@ export const Navbar = ({
69
69
  return (
70
70
  <>
71
71
  <nav data-fs-bp-nav {...otherProps}>
72
- <div data-fs-bp-nav-menu-btn-container>
73
- <IconButton
74
- data-fs-bp-sidebar-drawer-btn
75
- icon={<Icon name="Menu" width={18} height={12} />}
76
- aria-label={"open sidebar menu"}
77
- onClick={() => {
78
- openSidebarMenu();
79
- }}
80
- />
81
- </div>
72
+ <IconButton
73
+ data-fs-bp-sidebar-drawer-btn
74
+ icon={<Icon name="Menu" width={18} height={12} />}
75
+ aria-label={"open sidebar menu"}
76
+ onClick={() => {
77
+ openSidebarMenu();
78
+ }}
79
+ />
82
80
  {loading ? (
83
81
  <Skeleton
84
82
  data-fs-bp-nav-breadcrumb-skeleton
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -26,33 +26,16 @@
26
26
  [data-fs-bp-breadcrumb-current],
27
27
  [data-fs-bp-breadcrumb-dropdown-trigger] {
28
28
  font-size: var(--fs-bp-text-body);
29
-
29
+
30
30
  @include media(">=phonemid") {
31
- font-size: var(--fs-bp-text-size-base);
31
+ font-size: var(--fs-bp-text-body-big);
32
32
  }
33
33
  }
34
34
  }
35
35
 
36
- [data-fs-bp-nav-menu-btn-container] {
37
- width: 2.5rem;
38
- display: flex;
39
- align-items: center;
40
- font-weight: 600;
41
- font-size: var(--fs-text-size-2);
42
- line-height: var(--fs-spacing-4);
43
- color: #000;
44
- text-decoration: none;
45
-
46
- svg {
47
- /* margin-right: var(--fs-spacing-1); */
48
- color: #0366dd;
49
- }
50
-
51
- & > [data-fs-bp-sidebar-drawer-btn] {
52
- width: var(--fs-spacing-4);
53
- height: var(--fs-spacing-4);
54
- /* margin-right: var(--fs-spacing-3); */
55
- }
36
+ [data-fs-bp-sidebar-drawer-btn] {
37
+ --fs-button-height: var(--fs-bp-spacing-9);
38
+ margin-right: var(--fs-bp-margin-2);
56
39
  }
57
40
 
58
41
  [data-fs-bp-nav-breadcrumb-skeleton] {
@@ -64,9 +47,7 @@
64
47
  left: 50%;
65
48
  transform: translateX(-50%);
66
49
 
67
- font-weight: 600;
68
- font-size: var(--fs-text-size-3);
69
- line-height: var(--fs-text-size-5);
50
+ @include text-style('display-6');
70
51
  }
71
52
 
72
53
  [data-fs-bp-nav-about-trigger] {
@@ -140,52 +121,53 @@
140
121
  @import "../../components/LetterHighlight/letter-highlight.scss";
141
122
  @import "../../components/VerticalNav/vertical-nav.scss";
142
123
 
143
- padding: var(--fs-spacing-6);
124
+ display: none;
125
+ padding: var(--fs-bp-padding-9);
144
126
  overflow-y: auto;
145
127
 
146
- @include media("<notebook") {
147
- display: none;
128
+ @include media('>=notebook') {
129
+ display: block;
148
130
  }
149
131
 
150
132
  [data-fs-bp-letter-highlight] {
151
- margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
133
+ margin-left: var(--fs-bp-margin-5);
152
134
  }
153
135
 
154
136
  [data-fs-vertical-nav-menu] {
155
- padding-bottom: var(--fs-spacing-2);
137
+ margin-bottom: var(--fs-bp-padding-5);
156
138
 
157
139
  [data-fs-vertical-nav-menu-list] {
158
140
  [data-fs-vertical-nav-menu-link] {
159
- padding: var(--fs-spacing-2)
160
- calc(var(--fs-spacing-1) + var(--fs-spacing-0));
141
+ height: var(--fs-bp-spacing-9);
142
+ padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5);
161
143
  }
162
144
  }
163
145
  [data-fs-vertical-nav-menu-org-wrapper] {
164
146
  [data-fs-vertical-nav-menu-org-name] {
165
- font-weight: var(--fs-text-weight-medium);
166
- font-size: var(--fs-text-size-1);
167
- color: #858585;
168
- margin-left: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
147
+ @include text-style('emphasis');
148
+ color: var(--fs-bp-color-neutral-6);
149
+ padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
150
+ margin-left: var(--fs-bp-margin-0);
169
151
  }
170
152
  }
171
153
  [data-fs-vertical-nav-menu-list] {
172
- margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
173
- font-size: var(--fs-text-size-1);
174
- font-weight: var(--fs-text-weight-medium);
154
+ margin-top: var(--fs-bp-margin-0);
155
+ @include text-style('emphasis');
156
+ color: var(--fs-bp-color-black);
175
157
  }
176
158
  }
177
159
  }
178
160
 
179
161
  [data-fs-bp-base-tabs-layout-content] {
180
162
  overflow-y: auto;
181
- padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0));
163
+ padding: 0 var(--fs-bp-padding-5);
182
164
 
183
- @include media("<notebook") {
184
- padding: 0 var(--fs-spacing-7);
165
+ @include media('>=tablet') {
166
+ padding: 0 var(--fs-bp-padding-10);
185
167
  }
186
168
 
187
- @include media("<tablet") {
188
- padding: 0 calc(var(--fs-spacing-3) + var(--fs-spacing-0));
169
+ @include media('>=notebook') {
170
+ padding: 0 var(--fs-bp-padding-12);
189
171
  }
190
172
  }
191
173
  }
package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss CHANGED
@@ -1,74 +1,88 @@
1
1
  [data-bp-sidebar-menu] {
2
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
2
3
  @import "../../../../shared/components/BasicDrawer/basic-drawer.scss";
3
4
  @import "../../../components/LetterHighlight/letter-highlight.scss";
4
5
  @import "../../../components/VerticalNav/vertical-nav.scss";
5
6
 
6
7
  [data-fs-bp-org-unit-details-navbar-link] {
7
- font-weight: var(--fs-text-weight-bold);
8
- font-size: var(--fs-text-size-4);
9
- line-height: var(--fs-text-size-6);
10
- color: #0366dd;
8
+ @include text-style('display-5');
9
+ font-weight: var(--fs-bp-weight-bold);
10
+ color: var(--fs-bp-color-brand);
11
11
  text-decoration: none;
12
+ margin-left: var(--fs-bp-margin-5);
13
+
14
+ @include media('>=tablet') {
15
+ margin: var(--fs-bp-margin-0);
16
+ }
17
+ }
18
+
19
+ &[data-fs-bp-basic-drawer] {
20
+ [data-bp-sidebar-menu-drawer-body] {
21
+ [data-fs-bp-basic-drawer-body-wrapper] {
22
+ padding: var(--fs-bp-padding-7) var(--fs-bp-padding-5) 0;
23
+
24
+ @include media('>=tablet') {
25
+ padding: var(--fs-bp-padding-7) var(--fs-bp-padding-12) 0 var(--fs-bp-padding-9);
26
+ }
27
+ }
28
+ }
12
29
  }
13
30
 
14
31
  & > [data-bp-sidebar-menu-drawer-body] {
15
32
  [data-bp-sidebar-menu-wrapper-info] {
16
- padding: var(--fs-spacing-4)
17
- calc(var(--fs-spacing-4) + var(--fs-spacing-0)) var(--fs-spacing-4)
18
- calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
33
+ padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5) var(--fs-bp-padding-5);
19
34
 
20
35
  [data-bp-sidebar-menu-drawer-org-name] {
21
- font-weight: var(--fs-text-weight-medium);
22
- font-size: var(--fs-text-size-0);
23
- color: #858585;
36
+ @include text-style('caption');
37
+ font-weight: --fs-bp-weight-medium;
38
+ color: var(--fs-bp-color-neutral-6);
39
+ margin-bottom: 6px;
40
+
41
+ @include media('>=tablet') {
42
+ @include text-style('emphasis');
43
+ }
24
44
  }
45
+
25
46
  [data-bp-sidebar-menu-drawer-page-name] {
26
- font-weight: var(--fs-text-weight-semibold);
27
- font-size: var(--fs-text-size-3);
28
- }
29
- }
47
+ @include text-style('body-big');
48
+ font-weight: var(--fs-bp-weight-semibold);
49
+ color: var(--fs-bp-color-black);
30
50
 
31
- & div {
32
- padding: var(--fs-spacing-1)
33
- calc(var(--fs-spacing-6) + var(--fs-spacing-0)) 0
34
- calc(var(--fs-spacing-6) + var(--fs-spacing-0)) !important;
35
- width: 100%;
51
+ @include media('>=tablet') {
52
+ font-size: var(--fs-bp-text-size-3);
53
+ }
54
+ }
36
55
  }
37
56
  }
38
57
 
39
58
  [data-fs-vertical-nav-menu] {
40
- padding-bottom: var(--fs-spacing-2);
59
+ margin-bottom: var(--fs-bp-padding-5);
60
+
41
61
  [data-fs-vertical-nav-menu-org-wrapper] {
42
- padding: 0rem !important;
62
+ padding: var(--fs-bp-padding-0);
63
+
43
64
  [data-fs-vertical-nav-menu-org-name] {
44
- font-weight: var(--fs-text-weight-medium);
45
- font-size: var(--fs-text-size-1);
46
- color: #858585;
65
+ @include text-style('emphasis');
66
+ color: var(--fs-bp-color-neutral-6);
47
67
  }
48
68
  }
69
+
49
70
  [data-fs-vertical-nav-menu-list] {
50
- margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
51
- font-size: var(--fs-text-size-1);
52
- font-weight: var(--fs-text-weight-medium);
71
+ @include text-style('emphasis');
72
+ margin-top: var(--fs-bp-margin-3);
53
73
  }
54
74
  }
55
75
 
56
- @include media("<=tablet") {
57
- height: 100% !important;
58
- border-radius: 0 !important;
59
- & > [data-fs-bp-basic-drawer-heading] {
60
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
61
- calc(var(--fs-spacing-3) + var(--fs-spacing-0))
62
- calc(var(--fs-spacing-3) + var(--fs-spacing-0))
63
- calc(var(--fs-spacing-5) + var(--fs-spacing-0)) !important;
64
- }
65
- & > [data-bp-sidebar-menu-drawer-body] {
66
- & div {
67
- padding: var(--fs-spacing-1)
68
- calc(var(--fs-spacing-3) + var(--fs-spacing-0)) 0
69
- calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
70
- width: 100%;
71
- }
76
+ &[data-fs-bp-basic-drawer][data-fs-slide-over-size] {
77
+ width: calc(100vw - var(--fs-bp-spacing-5));
78
+ max-width: 30rem;
79
+ min-width: unset;
80
+ height: 100%;
81
+ border-radius: var(--fs-bp-border-radius-0);
82
+
83
+ @include media('>=desktop') {
84
+ width: 33.333vw;
85
+ max-width: 40rem;
72
86
  }
73
87
  }
74
88
  }
package/src/features/shared/utils/constants.ts CHANGED
@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
13
13
  export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
14
14
  "bp_hide_edit_recipient_confirm";
15
15
 
16
- export const CURRENT_VERSION = "1.3.32";
16
+ export const CURRENT_VERSION = "1.3.33";
package/src/themes/index.scss CHANGED
@@ -110,6 +110,10 @@
110
110
  display: none;
111
111
  }
112
112
  }
113
+
114
+ [data-fs-overlay] {
115
+ background-color: var(--fs-bp-color-transparent-overlay) !important;
116
+ }
113
117
  }
114
118
 
115
119
  [data-fs-button-signin-link] {
package/src/themes/tokens.scss CHANGED
@@ -61,10 +61,10 @@
61
61
  --fs-bp-color-success-1: #AFF79E;
62
62
  --fs-bp-color-success-2: #08A822;
63
63
 
64
- // Colors - critical
65
- --fs-bp-color-critical-0: #FDF6F5;
66
- --fs-bp-color-critical-1: #FFDFD9;
67
- --fs-bp-color-critical-2: #D31A15;
64
+ // Colors - danger
65
+ --fs-bp-color-danger-0: #FDF6F5;
66
+ --fs-bp-color-danger-1: #FFDFD9;
67
+ --fs-bp-color-danger-2: #D31A15;
68
68
 
69
69
  // Colors - warning
70
70
  --fs-bp-color-warning-0: #FDF5E9;
@@ -77,6 +77,7 @@
77
77
  --fs-bp-color-transparent-0: rgba(0, 0, 0, .06);
78
78
  --fs-bp-color-transparent-1: rgba(0, 0, 0, .12);
79
79
  --fs-bp-color-transparent-2: rgba(255, 255, 255, .9);
80
+ --fs-bp-color-transparent-overlay: rgba(0,0,0, .5);
80
81
 
81
82
  // Border radius
82
83
  --fs-bp-border-radius-0: 0;