@vtex/faststore-plugin-buyer-portal 1.3.31 → 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 (23) hide show
  1. package/CHANGELOG.md +20 -1
  2. package/package.json +1 -1
  3. package/src/features/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx +1 -1
  4. package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss +12 -0
  5. package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss +18 -18
  6. package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx +1 -1
  7. package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss +4 -8
  8. package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx +1 -1
  9. package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss +10 -24
  10. package/src/features/profile/components/ProfileSummary/ProfileSummary.tsx +4 -7
  11. package/src/features/profile/components/ProfileSummary/profile-summary.scss +26 -54
  12. package/src/features/profile/layouts/ProfileLayout/profile-layout.scss +17 -19
  13. package/src/features/shared/components/BasicDrawer/BasicDrawerHeading.tsx +6 -10
  14. package/src/features/shared/components/BasicDrawer/basic-drawer.scss +50 -54
  15. package/src/features/shared/components/BasicDropdownMenu/basic-dropdown-menu.scss +9 -4
  16. package/src/features/shared/components/HeaderInside/header-inside.scss +30 -8
  17. package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx +9 -10
  18. package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss +28 -46
  19. package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss +57 -43
  20. package/src/features/shared/utils/constants.ts +1 -1
  21. package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss +1 -0
  22. package/src/themes/index.scss +7 -1
  23. package/src/themes/tokens.scss +15 -4
package/CHANGELOG.md CHANGED
@@ -7,6 +7,23 @@ 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
+
19
+ ## [1.3.32] - 2025-11-25
20
+
21
+ ### Changed
22
+
23
+ - Fix dropdown shadow and apply pressed status when content is visible
24
+ - Remove avatar and replace User Role with user e-mail in ProfileSummary
25
+ - Fix ProfileSummary sizing and fonts using Org Account CSS tokens
26
+
10
27
  ## [1.3.31] - 2025-11-25
11
28
 
12
29
  ### Changed
@@ -297,7 +314,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
297
314
  - Add CHANGELOG file
298
315
  - Add README file
299
316
 
300
- [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...HEAD
317
+ [unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.33...HEAD
301
318
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
302
319
  [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
303
320
  [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -312,6 +329,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
312
329
 
313
330
  # <<<<<<< HEAD
314
331
 
332
+ [1.3.33]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...v1.3.33
333
+ [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
315
334
  [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
316
335
  [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30
317
336
  [1.3.29]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.28...v1.3.29
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vtex/faststore-plugin-buyer-portal",
3
- "version": "1.3.31",
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/budgets/components/BudgetAllocationsSelection/BudgetAllocationsSelection.tsx CHANGED
@@ -177,7 +177,7 @@ export const BudgetAllocationsSelection = ({
177
177
  />
178
178
  </DropdownButton>
179
179
  <DropdownMenu align="left">
180
- <div ref={dropdownRef}>
180
+ <div ref={dropdownRef} data-fs-bp-budget-allocation-select-list>
181
181
  {options.map((option) => (
182
182
  <DropdownItem
183
183
  key={option}
package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss CHANGED
@@ -76,6 +76,12 @@
76
76
  }
77
77
  }
78
78
 
79
+ &[data-fs-bp-budget-allocation-select-current] {
80
+ &:active, &[aria-expanded="true"] {
81
+ background-color: var(--fs-bp-color-transparent-1);
82
+ }
83
+ }
84
+
79
85
  [data-fs-bp-budget-allocation-select-current-icon] {
80
86
  color: #000000;
81
87
  transform: rotate(90deg);
@@ -110,6 +116,7 @@
110
116
  }
111
117
 
112
118
  [data-fs-dropdown-menu] {
119
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
113
120
  width: auto;
114
121
  background-color: #ffffff !important;
115
122
  padding: var(--fs-spacing-1) 0;
@@ -125,8 +132,13 @@
125
132
  color: #1f1f1f;
126
133
  }
127
134
  }
135
+ [data-fs-bp-budget-allocation-select-list] {
136
+ width: 100%;
137
+ }
138
+
128
139
  [data-fs-bp-budget-allocation-select-item] {
129
140
  padding: var(--fs-spacing-3);
141
+ --fs-dropdown-item-bkg-color-hover: var(--fs-bp-color-transparent-0);
130
142
 
131
143
  &[data-fs-bp-budget-allocation-selected="true"] {
132
144
  color: #0366dd !important;
package/src/features/org-units/components/OrgUnitBreadcrumb/org-unit-breadcrumb.scss CHANGED
@@ -2,15 +2,15 @@
2
2
  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
3
3
  @import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
4
4
 
5
- --fs-dropdown-item-icon-margin-top: var(--fs-spacing-0);
5
+ --fs-dropdown-item-icon-margin-top: var(--fs-bp-margin-1);
6
6
  flex: 1;
7
7
  display: flex;
8
8
  align-items: center;
9
- gap: var(--fs-spacing-1);
9
+ gap: var(--fs-bp-gap-2);
10
10
 
11
11
  [data-fs-tooltip] {
12
- --fs-tooltip-background: #1f1f1f;
13
- --fs-tooltip-border-radius: 0.25rem;
12
+ --fs-tooltip-background: var(--fs-bp-color-neutral-8);
13
+ --fs-tooltip-border-radius: var(--fs-bp-border-radius-1);
14
14
  }
15
15
  @include media(">=tablet") {
16
16
  flex-wrap: wrap;
@@ -22,10 +22,8 @@
22
22
 
23
23
  p,
24
24
  a {
25
- font-size: var(--fs-text-size-4);
26
- line-height: var(--fs-text-size-6);
27
- font-weight: var(--fs-text-weight-semibold);
28
- color: #5c5c5c;
25
+ @include text-style('display-5');
26
+ color: var(--fs-bp-color-neutral-7);
29
27
  text-decoration: none;
30
28
  cursor: pointer;
31
29
  transition: all 0.2s;
@@ -41,7 +39,7 @@
41
39
  cursor: inherit;
42
40
 
43
41
  &:not(.disable-link) {
44
- color: #000;
42
+ color: var(--fs-bp-color-black);
45
43
  }
46
44
  }
47
45
 
@@ -51,24 +49,26 @@
51
49
  }
52
50
 
53
51
  [data-fs-bp-breadcrumb-divider] {
54
- color: #858585;
52
+ color: var(--fs-bp-color-neutral-6);
55
53
  flex: 0 0 auto;
56
54
  }
57
55
 
58
56
  [data-fs-bp-breadcrumb-dropdown-trigger] {
59
57
  display: inline-flex;
60
58
  align-items: center;
61
- font-size: var(--fs-text-size-4);
62
- line-height: var(--fs-text-size-6);
63
- font-weight: var(--fs-text-weight-semibold);
64
- color: #000;
59
+ @include text-style('display-5');
60
+ color: var(--fs-bp-color-black);
65
61
  cursor: pointer;
66
- padding: 0 var(--fs-spacing-0) 0 var(--fs-spacing-1);
67
- margin-left: calc(var(--fs-spacing-1) * -1);
68
- border-radius: var(--fs-border-radius-pill);
62
+ padding: 0 var(--fs-bp-padding-1) 0 var(--fs-bp-padding-2);
63
+ margin-left: calc(var(--fs-bp-margin-2) * -1);
64
+ border-radius: var(--fs-bp-border-radius-full);
69
65
 
70
66
  &:hover {
71
- background-color: #f5f5f5;
67
+ background-color: var(--fs-bp-color-transparent-0);
68
+ }
69
+
70
+ &:active, &[aria-expanded="true"] {
71
+ background-color: var(--fs-bp-color-transparent-1);
72
72
  }
73
73
  }
74
74
  }
package/src/features/org-units/components/OrgUnitDetailsNavbar/OrgUnitDetailsNavbar.tsx CHANGED
@@ -17,6 +17,7 @@ export type OrgUnitDetailsNavbarProps = {
17
17
  image?: string;
18
18
  name: string;
19
19
  role?: string;
20
+ email?: string;
20
21
  };
21
22
  loading?: boolean;
22
23
  };
@@ -63,7 +64,6 @@ export const OrgUnitDetailsNavbar = ({
63
64
  <BasicDropdownMenu.Trigger iconSize={20} iconName="AccountCircle" />
64
65
  <DropdownMenu align="right" data-fs-bp-org-unit-details-navbar-menu>
65
66
  <ProfileSummary
66
- data-fs-bp-org-unit-details-navbar-menu-profile-summary
67
67
  onLogoutClick={doLogout}
68
68
  orgName={orgName}
69
69
  person={person}
package/src/features/org-units/components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss CHANGED
@@ -60,13 +60,9 @@
60
60
  }
61
61
  }
62
62
 
63
- [data-fs-bp-org-unit-details-navbar-menu] {
64
- --fs-profile-dropdown-menu-width: 22.5rem;
65
- width: auto;
66
-
63
+ [data-fs-bp-org-unit-details-navbar-menu][data-fs-dropdown-menu] {
64
+ width: calc(100vw - (var(--fs-bp-spacing-5) * 2));
65
+ max-width: 22.5rem;
66
+ min-width: unset;
67
67
  background-color: var(--fs-bp-color-white);
68
-
69
- [data-fs-bp-org-unit-details-navbar-menu-profile-summary] {
70
- min-width: var(--fs-profile-dropdown-menu-width);
71
- }
72
68
  }
package/src/features/org-units/layouts/OrgUnitDetailsLayout/OrgUnitDetailsLayout.tsx CHANGED
@@ -79,7 +79,7 @@ export const OrgUnitsDetailsLayout = ({
79
79
  orgName={orgUnit.name}
80
80
  person={{
81
81
  name: user?.name ?? "",
82
- role: user?.roles?.[0] ?? "",
82
+ email: user?.email ?? "",
83
83
  }}
84
84
  loading={loading}
85
85
  />
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/components/ProfileSummary/ProfileSummary.tsx CHANGED
@@ -15,12 +15,13 @@ export type ProfileSummaryProps = {
15
15
  image?: ReactNode;
16
16
  name: string;
17
17
  role?: string;
18
+ email?: string;
18
19
  };
19
20
  };
20
21
 
21
22
  export const ProfileSummary = ({
22
23
  onLogoutClick,
23
- person: { image, name, role },
24
+ person: { name, email },
24
25
  orgName,
25
26
  bordered = false,
26
27
  showManageLink = false,
@@ -41,18 +42,14 @@ export const ProfileSummary = ({
41
42
  )}
42
43
  </div>
43
44
  <div data-fs-self-profile-summary-person-actions>
44
- <div data-fs-self-profile-summary-person-image>
45
- {image ?? <Icon name="Profile" width={14} height={14} />}
46
- </div>
47
45
  <div data-fs-self-profile-summary-person-data>
48
46
  <h2>{name}</h2>
49
- {role && <h3>{role}</h3>}
47
+ <p>{email}</p>
50
48
  </div>
51
49
  <Button
52
50
  data-fs-self-profile-summary-logout-button
53
51
  onClick={onLogoutClick}
54
- variant="secondary"
55
- size="small"
52
+ variant="tertiary"
56
53
  >
57
54
  Logout
58
55
  </Button>
package/src/features/profile/components/ProfileSummary/profile-summary.scss CHANGED
@@ -14,15 +14,14 @@
14
14
  display: flex;
15
15
  align-items: center;
16
16
  justify-content: space-between;
17
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
18
- border-bottom: var(--fs-border-width) solid #e0e0e0;
19
- font-size: var(--fs-text-size-legend);
20
- font-weight: var(--fs-text-weight-semibold);
17
+ padding: var(--fs-bp-padding-5);
18
+ padding-top: var(--fs-bp-padding-3);
19
+ border-bottom: 1px solid var(--fs-bp-color-neutral-3);
21
20
 
22
21
  [data-fs-self-profile-summary-org-name] {
23
- color: #000000;
24
- font-size: var(--fs-text-size-1);
25
- font-weight: 600;
22
+ @include text-style('action');
23
+ line-height: var(--fs-bp-spacing-5);
24
+ color: var(--fs-bp-color-black);
26
25
  }
27
26
 
28
27
  [data-fs-self-profile-summary-org-link] {
@@ -45,63 +44,36 @@
45
44
  }
46
45
 
47
46
  [data-fs-self-profile-summary-person-actions] {
48
- display: flex;
49
- justify-content: space-between;
50
- padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
47
+ @import "@faststore/ui/src/components/atoms/Button/styles.scss";
51
48
 
52
- [data-fs-self-profile-summary-person-image] {
53
- width: var(--fs-spacing-6);
54
- height: var(--fs-spacing-6);
55
- border-radius: var(--fs-border-radius-pill);
56
- background-color: #cbe9ff;
57
- display: flex;
58
- align-items: center;
59
- justify-content: center;
60
- overflow: hidden;
61
- color: var(--fs-border-color-active);
62
- margin-right: var(--fs-spacing-3);
63
- }
49
+ display: grid;
50
+ align-items: center;
51
+ grid-template-columns: minmax(15.25rem, 1fr) auto;
52
+ gap: var(--fs-bp-gap-2);
53
+ padding: var(--fs-bp-padding-5) var(--fs-bp-padding-2) var(--fs-bp-padding-3) var(--fs-bp-padding-5);
64
54
 
65
55
  [data-fs-self-profile-summary-person-data] {
66
- display: flex;
67
- align-items: flex-start;
68
- flex-direction: column;
69
- justify-content: center;
70
- gap: var(--fs-spacing-0);
71
- flex: 1;
72
- font-size: var(--fs-text-size-legend);
73
- margin-right: var(--fs-spacing-0);
56
+ h2, p {
57
+ overflow: hidden;
58
+ white-space: nowrap;
59
+ text-overflow: ellipsis;
60
+ display: block;
61
+ }
74
62
 
75
63
  h2 {
76
- color: var(--fs-color-text);
77
- font-weight: 600;
64
+ @include text-style('emphasis');
65
+ color: var(--fs-bp-color-black);
78
66
  }
79
67
 
80
- h3 {
81
- color: var(--fs-color-text-light);
82
- font-weight: 500;
68
+ p {
69
+ @include text-style('body');
70
+ color: var(--fs-bp-color-neutral-7)
83
71
  }
84
72
  }
85
73
 
86
74
  [data-fs-self-profile-summary-logout-button] {
87
- cursor: pointer;
88
- color: #d31a15;
89
- font-weight: var(--fs-text-weight-semibold);
90
- font-size: var(--fs-text-size-1);
91
-
92
- [data-fs-button-wrapper] {
93
- border-radius: var(--fs-border-radius-pill);
94
- color: var(--fs-color-danger-text);
95
- border: var(--fs-border-width) solid var(--fs-border-color-light);
96
- padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0)) 1.375rem;
97
- }
98
-
99
- [data-fs-button-wrapper]:hover {
100
- background-color: #f5f5f5;
101
- }
102
-
103
- [data-fs-icon] {
104
- color: var(--fs-color-danger-text);
105
- }
75
+ --fs-button-text-size: var(--fs-bp-text-body);
76
+ --fs-control-tap-size: var(--fs-bp-spacing-9);
77
+ flex: 0 0 auto;
106
78
  }
107
79
  }
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/BasicDropdownMenu/basic-dropdown-menu.scss CHANGED
@@ -2,19 +2,24 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  justify-content: center;
5
- width: var(--fs-spacing-6);
6
- height: var(--fs-spacing-6);
5
+ width: var(--fs-bp-spacing-9);
6
+ height: var(--fs-bp-spacing-9);
7
7
  color: #1f1f1f;
8
8
  cursor: pointer;
9
- border-radius: var(--fs-border-radius-pill);
9
+ border-radius: var(--fs-bp-border-radius-full);
10
10
 
11
11
  &:hover {
12
- background-color: #f5f5f5;
12
+ background-color: var(--fs-bp-color-transparent-0);
13
+ }
14
+
15
+ &:active, &[aria-expanded="true"] {
16
+ background-color: var(--fs-bp-color-transparent-1);
13
17
  }
14
18
  }
15
19
 
16
20
  [data-fs-dropdown-menu] {
17
21
  &[data-fs-bp-basic-dropdown-menu] {
22
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
18
23
  width: auto;
19
24
  background-color: #fff;
20
25
  padding: var(--fs-spacing-1) 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);
@@ -43,9 +57,17 @@
43
57
  height: var(--fs-bp-spacing-9);
44
58
  }
45
59
 
60
+ &:hover {
61
+ background-color: #0561D0;
62
+ }
63
+
64
+ &:active, &[aria-expanded="true"] {
65
+ background-color: #035AC2;
66
+ }
67
+
46
68
  &:disabled {
47
- background-color: #f5f5f5;
48
- color: #adadad;
69
+ background-color: var(--fs-bp-color-neutral-1);
70
+ color: var(--fs-bp-color-neutral-5);
49
71
  cursor: not-allowed;
50
72
  }
51
73
  }
package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx CHANGED
@@ -26,6 +26,7 @@ export type NavbarProps = {
26
26
  name: string;
27
27
  role?: string;
28
28
  id: string;
29
+ email?: string;
29
30
  };
30
31
  loading?: boolean;
31
32
  };
@@ -68,16 +69,14 @@ export const Navbar = ({
68
69
  return (
69
70
  <>
70
71
  <nav data-fs-bp-nav {...otherProps}>
71
- <div data-fs-bp-nav-menu-btn-container>
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
- />
80
- </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
+ />
81
80
  {loading ? (
82
81
  <Skeleton
83
82
  data-fs-bp-nav-breadcrumb-skeleton
package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss CHANGED
@@ -25,34 +25,17 @@
25
25
  [data-fs-bp-breadcrumb-nav] {
26
26
  [data-fs-bp-breadcrumb-current],
27
27
  [data-fs-bp-breadcrumb-dropdown-trigger] {
28
- font-size: var(--fs-text-size-2);
29
-
30
- @include media("<=phonemid") {
31
- font-size: var(--fs-text-size-1);
28
+ font-size: var(--fs-bp-text-body);
29
+
30
+ @include media(">=phonemid") {
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.31";
16
+ export const CURRENT_VERSION = "1.3.33";
package/src/features/users/layouts/UserDetailsLayout/user-details-layout.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  @import "../../components/UserDropdownMenu/user-dropdown-menu.scss";
6
6
 
7
7
  [data-fs-dropdown-menu][data-fs-users-dropdown-menu] {
8
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
8
9
  max-height: 21.25rem;
9
10
  overflow-y: scroll;
10
11
  width: 15rem;
package/src/themes/index.scss CHANGED
@@ -1,5 +1,5 @@
1
- @import "../features/profile/components/ProfileSummary/profile-summary.scss";
2
1
  @import "./layouts";
2
+ @import "../features/profile/components/ProfileSummary/profile-summary.scss";
3
3
 
4
4
  // ----------------------------------------------------------
5
5
  // GLOBAL TOKENS
@@ -50,8 +50,10 @@
50
50
  }
51
51
 
52
52
  [data-fs-dropdown-menu] {
53
+ --fs-dropdown-menu-box-shadow: var(--fs-bp-elevation-dropdown);
53
54
  z-index: 99999;
54
55
  width: 12.5rem;
56
+
55
57
  [data-fs-dropdown-item] {
56
58
  --fs-dropdown-item-color: black !important;
57
59
 
@@ -108,6 +110,10 @@
108
110
  display: none;
109
111
  }
110
112
  }
113
+
114
+ [data-fs-overlay] {
115
+ background-color: var(--fs-bp-color-transparent-overlay) !important;
116
+ }
111
117
  }
112
118
 
113
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;
@@ -162,4 +163,14 @@
162
163
  --fs-bp-gap-14: var(--fs-bp-spacing-14);
163
164
  --fs-bp-gap-15: var(--fs-bp-spacing-15);
164
165
  --fs-bp-gap-16: var(--fs-bp-spacing-16);
166
+
167
+ // Elevation (dropshadow)
168
+ --fs-bp-elevation-0: 0px 0px 0px 0px rgba(0, 0, 0, 0);;
169
+ --fs-bp-elevation-1: 0px 4px 5px -1px rgba(0, 0, 0, 0.1);
170
+ --fs-bp-elevation-2: 0px 8px 8px -3px rgba(0, 0, 0, 0.1);
171
+ --fs-bp-elevation-3: 0px 9px 17px 2px rgba(0, 0, 0, 0.1);
172
+ --fs-bp-elevation-4: 0px 9px 26px 1px rgba(0, 0, 0, 0.1);
173
+
174
+ // Elevation - semantic
175
+ --fs-bp-elevation-dropdown: var(--fs-bp-elevation-3);
165
176
  }