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

package/.vtex/catalog.yaml

@@ -0,0 +1,12 @@
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: organization-account
+  annotations:
+    github.com/project-slug: vtex/faststore-plugin-buyer-portal
+    backstage.io/techdocs-ref: dir:../
+spec:
+  type: frontend-ui
+  lifecycle: stable
+  owner: te-0010
+  dependsOn: []

package/.vtex/deployment.yaml

@@ -0,0 +1,17 @@
+- name: organization-account
+  acronym: organization-account
+  description: Deploy organization-account application
+  build:
+    provider: dkcicd
+    pipelines:
+      - name: techdocs-v1
+        parameters:
+          entityReference: default/component/organization-account
+          indexFile: README.md
+          sourceDir: ./
+        path:
+          - "docs/*"
+        when:
+          - event: push
+            source: branch
+            regex: main

package/CHANGELOG.md

@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.34] - 2025-12-01
+
+### Added
+
+- Add DK Docs
+
+## [1.3.33] - 2025-11-25
+
+### Changed
+
+- Fix BasicDrawer and SidebarDrawer spacing and dimensions using the new CSS tokens
+- Adjustments in Profile page styles
+- Adjustments in Org Unit Details pages paddings inside cards
+- Include new transparent color
+
 ## [1.3.32] - 2025-11-25
 
 ### Changed
@@ -35,10 +50,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Remove faststore tokens from Org Unit Details page to use our tokens and mixins
-
-### Added
-
 - Create tokens file with variables according with design system definition
 - Create typography mixins
 
@@ -69,7 +80,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Added CSS rules to apply max-width of 960px for large-sized drawers
   - Updated existing drawer components to explicitly specify `size="large"`
   - Improved drawer sizing consistency across the application
-  
+
 ## [1.3.24] - 2025-11-25
 
 ### Added
@@ -165,6 +176,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.3.9] - 2025-10-21
 
 ### Added
+
 - Add Changelog entry check on actions
 
 ## [1.3.8] - 2025-10-17
@@ -309,7 +321,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.34...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -324,6 +336,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 # <<<<<<< HEAD
 
+[1.3.34]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.33...v1.3.34
+[1.3.33]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.32...v1.3.33
 [1.3.32]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.31...v1.3.32
 [1.3.31]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.30...v1.3.31
 [1.3.30]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.29...v1.3.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.32",
+  "version": "1.3.34",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss

@@ -30,13 +30,6 @@
   }
 
   [data-fs-bp-header-inside] {
-    margin: var(--fs-bp-margin-4) var(--fs-bp-margin-0)'';
-    height: 4.5rem;
-
-    @include media(">=tablet") {
-      margin: var(--fs-bp-margin-0);
-    }
-
     [data-fs-org-units-details-header-skeleton] {
       max-width: 40rem;
     }
@@ -49,7 +42,7 @@
     grid-auto-rows: auto;
     gap: var(--fs-bp-gap-5);
 
-    @include media(">=tablet") {
+    @include media(">=notebook") {
       grid-template-columns: repeat(2, 1fr);
       grid-auto-rows: 1fr;
     }
@@ -71,10 +64,10 @@
     border-radius: var(fs-bp-border-radius-3);
 
     [data-fs-card-body] {
-      padding: var(--fs-bp-margin-4) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
+      padding: var(--fs-bp-margin-2) var(--fs-bp-margin-0) var(--fs-bp-margin-5);
 
       @include media('>=tablet') {
-        padding: var(--fs-bp-margin-7) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
+        padding: var(--fs-bp-margin-5) var(--fs-bp-margin-3) var(--fs-bp-margin-8);
       }
     }
 
@@ -99,33 +92,27 @@
     &[data-fs-bp-contracts-settings-card] {
       [data-fs-bp-letter-highlight] {
         @include text-style('body');
+        margin-top: var(--fs-bp-margin-3);
         margin-left: var(--fs-bp-margin-5);
-        margin-right: var(--fs-bp-margin-2);
+        margin-bottom: var(--fs-bp-margin-0);
         width: var(--fs-bp-spacing-9);
         height: var(--fs-bp-spacing-9);
 
         @include media('>=tablet') {
           @include text-style('display-6');
-          margin-bottom: var(--fs-bp-margin-3);
+          margin-bottom: var(--fs-bp-margin-1);
           width: var(--fs-bp-spacing-12);
           height: var(--fs-bp-spacing-12);
         }
       }
-
-      [data-fs-card-body] {
-        padding-top: var(--fs-bp-padding-5);
-
-        @include media ('>=tablet') {
-          padding-top: var(--fs-bp-padding-7);
-        }
-      }
     }
   }
 
   [data-fs-vertical-nav-menu] {
     [data-fs-vertical-nav-menu-list] {
+      margin-top: var(--fs-bp-margin-1);
       @include media('>=tablet') {
-        margin-top: var(--fs-bp-margin-7);
+        margin-top: var(--fs-bp-margin-5);
       }
 
       [data-fs-vertical-nav-menu-link] {
@@ -138,9 +125,8 @@
     }
     
     [data-fs-vertical-nav-menu-org-wrapper] {
-      [data-fs-vertical-nav-menu-org-name] {
-        margin-top: var(--fs-bp-margin-0);
-      }
+      min-height: var(--fs-bp-spacing-9);
+      padding: var(--fs-bp-padding-2) 0;
     }
   }
 

package/src/features/profile/layouts/ProfileLayout/profile-layout.scss

@@ -8,44 +8,43 @@
   @import "../../../shared/components/Error/error.scss";
 
   width: 100%;
-  padding: var(--fs-text-size-1) var(--fs-spacing-7);
 
   [data-fs-bp-profile-details-title] {
-    font-weight: var(--fs-text-weight-semibold);
-    size: var(--fs-spacing-3);
-    line-height: var(--fs-spacing-4);
-    color: #000;
+    @include text-style('action');
+    font-size: var(--fs-bp-text-size-base);
+    color: var(--fs-bp-color-black);
     display: flex;
     justify-content: space-between;
-    padding: var(--fs-spacing-4) 0;
+    padding: var(--fs-bp-padding-5) 0;
     align-items: center;
   }
 
   [data-fs-bp-profile-divider] {
-    border: calc(var(--fs-border-width) / 1) solid #e0e0e0;
+    display: block;
+    height: 1px;
+    border: var(--fs-bp-border-radius-0);
+    border-bottom: 1px solid var(--fs-bp-color-neutral-3);
   }
 
   [data-fs-button][data-fs-button-variant="primary"] [data-fs-button-wrapper] {
-    border-radius: var(--fs-border-radius-pill);
+    border-radius: var(--fs-bp-border-radius-full);
   }
 
   [data-fs-bp-profile-details-row] {
     display: flex;
     flex-direction: row;
-    padding: 1.375rem 0;
-    size: var(--fs-text-size-1);
-    line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
-    font-weight: var(--fs-text-weight-regular);
+    padding: var(--fs-bp-padding-5) 0;
+    @include text-style('body');
 
     [data-fs-bp-profile-details-row-label] {
       width: 12.5rem;
-      color: #707070;
-      font-size: var(--fs-text-size-1);
+      color: var(--fs-bp-color-neutral-7);
+      font-size: var(--fs-bp-text-body);
     }
 
     [data-fs-bp-profile-details-row-value] {
-      color: #000;
-      font-size: var(--fs-text-size-1);
+      color: var(--fs-bp-color-black);
+      font-size: var(--fs-bp-text-body);
     }
 
     @include media("<=tablet") {
@@ -54,12 +53,11 @@
   }
 
   a {
-    color: #0366dd;
+    color: var(--fs-bp-color-brand);
     text-decoration: none;
   }
 
   [data-fs-bp-profile-title] {
-    font-size: var(--fs-text-size-4);
-    font-weight: 600;
+    @include text-style('display-5');
   }
 }

package/src/features/shared/components/BasicDrawer/BasicDrawerHeading.tsx

@@ -1,5 +1,7 @@
 import type { ComponentProps } from "react";
 
+import { IconButton } from "@faststore/ui";
+
 import { Icon } from "../Icon";
 
 export type BasicDrawerHeadingProps = {
@@ -15,18 +17,12 @@ export const BasicDrawerHeading = ({
   return (
     <header data-fs-bp-basic-drawer-heading {...props}>
       <h2 data-fs-bp-basic-drawer-heading-title>{title}</h2>
-      <button
-        type="button"
+      <IconButton
         data-fs-bp-basic-drawer-heading-close-button
+        aria-label="close drawer btn"
         onClick={onClose}
-      >
-        <Icon
-          data-fs-bp-basic-drawer-heading-close-icon
-          name="Close"
-          width={14}
-          height={14}
-        />
-      </button>
+        icon={<Icon name="Close" width={14} height={14} />}
+      />
     </header>
   );
 };

package/src/features/shared/components/BasicDrawer/basic-drawer.scss

@@ -2,13 +2,15 @@
 @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
 
 [data-fs-bp-basic-drawer] {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+
   display: flex;
   flex-direction: column;
   width: 100vw;
   height: 90%;
   bottom: 0;
-  border-top-left-radius: 1.25rem;
-  border-top-right-radius: 1.25rem;
+  border-top-left-radius: var(--fs-bp-border-radius-4);
+  border-top-right-radius: var(--fs-bp-border-radius-4);
 
   &[data-fs-slide-over][data-fs-mobile-bottom-sheet][data-fs-slide-over-sidebar] {
     max-height: 100%;
@@ -24,10 +26,6 @@
         width: 100vw;
         max-height: min(85vh, 45rem);
 
-        border-top-left-radius: var(--fs-spacing-3);
-        border-top-right-radius: var(--fs-spacing-3);
-        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2);
-
         will-change: transform;
         backface-visibility: hidden;
         transform: translate3d(0, 100%, 0);
@@ -57,7 +55,7 @@
   @include media(">=tablet") {
     height: 100%;
     bottom: auto;
-    border-radius: 0;
+    border-radius: var(--fs-bp-border-radius-0);
   }
 
   &[data-fs-slide-over-size="partial"] {
@@ -81,34 +79,39 @@
   [data-fs-bp-basic-drawer-heading] {
     width: 100%;
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    border-bottom: var(--fs-border-radius-small) solid #e0e0e0;
-    padding: var(--fs-spacing-2) calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    border-bottom: 1px solid var(--fs-bp-color-neutral-3);
 
-    @include media(">=tablet") {
-      padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+    gap: .625rem;
+    padding: .625rem; 
+    min-height: 4.25rem;
+    padding-left: var(--fs-bp-padding-5);
+
+    @include media('>=tablet') {
+      padding-left: .625rem;
     }
 
     [data-fs-bp-basic-drawer-heading-title] {
-      font-size: var(--fs-text-size-2);
-      font-weight: 600;
-      line-height: 1.75rem;
-
+      @include text-style('body-big');
+      font-weight: var(--fs-bp-weight-semibold);
+      color: var(--fs-bp-color-black);
+      
       @include media(">=tablet") {
-        font-size: var(--fs-text-size-4);
+        @include text-style('display-6');
+      }
+
+      &:first-child {
+        @include media('>=tablet') {
+          padding-left: 3.125rem;
+        }
       }
     }
     [data-fs-bp-basic-drawer-heading-close-button] {
-      width: var(--fs-spacing-4);
-      height: var(--fs-spacing-4);
-      cursor: pointer;
+      --fs-button-height: var(--fs-bp-spacing-9);
+      margin-left: var(--fs-bp-margin-auto);
 
-      [data-fs-bp-basic-drawer-heading-close-icon] {
-        fill: #000000;
+      svg {
+        color: var(--fs-bp-color-black);
       }
     }
   }
@@ -119,41 +122,36 @@
     min-height: auto;
 
     p {
-      font-weight: 400;
-      font-size: var(--fs-text-size-1);
-      line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      @include text-style('body');
     }
+
     a {
-      color: #0366dd;
+      color: var(--fs-bp-color-brand);
       text-decoration: none;
     }
 
     [data-fs-bp-basic-drawer-body-wrapper] {
-      padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      padding: var(--fs-bp-padding-5);
       width: 100%;
 
       @include media(">=tablet") {
-        padding: var(--fs-spacing-8)
-          calc(var(--fs-spacing-8) + var(--fs-spacing-0)) 0
-          calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+        padding: var(--fs-bp-padding-11) var(--fs-bp-padding-12) 0;
       }
     }
   }
 
   [data-fs-bp-basic-drawer-footer] {
-    padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    padding: var(--fs-bp-padding-5);
 
-    border-top: var(--fs-border-radius-small) solid #e0e0e0;
+    border-top: 1px solid var(--fs-bp-color-neutral-3);
     display: flex;
     justify-content: center;
     flex-direction: column;
-    gap: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
+    gap: var(--fs-bp-gap-5);
 
     @include media(">=tablet") {
       flex-direction: row;
-      padding: var(--fs-spacing-4)
-        calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+      padding: var(--fs-bp-padding-6) var(--fs-bp-padding-12);
     }
   }
 
@@ -165,35 +163,33 @@
 
     cursor: pointer;
 
-    padding: var(--fs-spacing-3) calc(var(--fs-spacing-5) + var(--fs-spacing-0));
+    padding: var(--fs-bp-padding-4) var(--fs-bp-padding-8);
     min-width: 10.625rem;
-    border-radius: var(--fs-border-radius-pill);
+    border-radius: var(--fs-bp-border-radius-full);
 
-    font-size: var(--fs-text-size-1);
-    font-weight: 600;
-    line-height: var(--fs-spacing-3);
+    @include text-style('action');
     text-align: center;
 
     &[data-fs-bp-basic-drawer-button-variant="confirm"] {
-      background-color: #0068d7;
-      color: white;
+      background-color: var(--fs-bp-color-brand);
+      color: var(--fs-bp-color-white);
     }
 
     &[data-fs-bp-basic-drawer-button-variant="ghost"] {
-      border: var(--fs-border-width) solid #e0e0e0;
-      background-color: #ffffff;
-      color: #0068d7;
+      border: 1px solid var(--fs-bp-color-neutral-3);
+      background-color: var(--fs-bp-color-white);
+      color: var(--fs-bp-color-brand);
     }
 
     &[data-fs-bp-basic-drawer-button-variant="danger"] {
-      background-color: #d32420;
-      color: white;
+      background-color: var(--fs-bp-color-danger-2);
+      color: var(--fs-bp-color-white);
     }
 
     &:disabled {
       cursor: not-allowed;
-      background-color: #e0e0e0;
-      color: #ffffff;
+      background-color: var(--fs-bp-color-neutral-3);
+      color: var(--fs-bp-color-white);
     }
 
     [data-fs-bp-basic-drawer-button-loading-indicator] {
@@ -206,7 +202,7 @@
         }
       }
 
-      color: #ffffff;
+      color: var(--fs-bp-color-white);
 
       position: absolute;
       right: 0;

package/src/features/shared/components/HeaderInside/header-inside.scss

@@ -3,10 +3,20 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin: var(--fs-spacing-5) 0;
+  padding: var(--fs-bp-padding-4) 0;
+  box-sizing: content-box;
+  min-height: var(--fs-bp-spacing-9);
+
+  @include media('>=tablet') {
+    padding: var(--fs-bp-padding-8) 0;
+  }
+
+  @include media('>=notebook') {
+    padding: var(--fs-bp-padding-9) 0;
+  }
 
   [data-fs-bp-back-link] {
-    margin-right: var(--fs-spacing-3);
+    margin-right: var(--fs-bp-margin-4);
 
     display: flex;
     align-items: center;
@@ -14,11 +24,15 @@
   }
 
   [data-fs-bp-header-inside-title] {
+    @include text-style('body-big');
+    font-weight: var(--fs-bp-weight-semibold);
+    color: var(--fs-bp-color-black);
     text-transform: capitalize;
-    font-size: var(--fs-text-size-4);
-    color: #000;
-    font-weight: 600;
     margin-right: auto;
+
+    @include media('>=tablet') {
+      @include text-style('display-5');
+    }
   }
 
   [data-fs-header-inside-button] {
@@ -28,7 +42,7 @@
     width: var(--fs-bp-spacing-10);
     height: var(--fs-bp-spacing-10);
     border-radius: var(--fs-bp-border-radius-full);
-    color: #ffffff;
+    color: var(--fs-bp-color-white);
     cursor: pointer;
     position: fixed;
     bottom: var(--fs-bp-spacing-5);

package/src/features/shared/layouts/BaseTabsLayout/Navbar.tsx

@@ -69,16 +69,14 @@ export const Navbar = ({
   return (
     <>
       <nav data-fs-bp-nav {...otherProps}>
-        <div data-fs-bp-nav-menu-btn-container>
-          <IconButton
-            data-fs-bp-sidebar-drawer-btn
-            icon={<Icon name="Menu" width={18} height={12} />}
-            aria-label={"open sidebar menu"}
-            onClick={() => {
-              openSidebarMenu();
-            }}
-          />
-        </div>
+        <IconButton
+          data-fs-bp-sidebar-drawer-btn
+          icon={<Icon name="Menu" width={18} height={12} />}
+          aria-label={"open sidebar menu"}
+          onClick={() => {
+            openSidebarMenu();
+          }}
+        />
         {loading ? (
           <Skeleton
             data-fs-bp-nav-breadcrumb-skeleton

package/src/features/shared/layouts/BaseTabsLayout/base-tabs-layout.scss

@@ -26,33 +26,16 @@
       [data-fs-bp-breadcrumb-current],
       [data-fs-bp-breadcrumb-dropdown-trigger] {
         font-size: var(--fs-bp-text-body);
-
+        
         @include media(">=phonemid") {
-          font-size: var(--fs-bp-text-size-base);
+          font-size: var(--fs-bp-text-body-big);
         }
       }
     }
 
-    [data-fs-bp-nav-menu-btn-container] {
-      width: 2.5rem;
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      font-size: var(--fs-text-size-2);
-      line-height: var(--fs-spacing-4);
-      color: #000;
-      text-decoration: none;
-
-      svg {
-        /* margin-right: var(--fs-spacing-1); */
-        color: #0366dd;
-      }
-
-      & > [data-fs-bp-sidebar-drawer-btn] {
-        width: var(--fs-spacing-4);
-        height: var(--fs-spacing-4);
-        /*  margin-right: var(--fs-spacing-3); */
-      }
+    [data-fs-bp-sidebar-drawer-btn] {
+      --fs-button-height: var(--fs-bp-spacing-9);
+      margin-right: var(--fs-bp-margin-2);
     }
 
     [data-fs-bp-nav-breadcrumb-skeleton] {
@@ -64,9 +47,7 @@
       left: 50%;
       transform: translateX(-50%);
 
-      font-weight: 600;
-      font-size: var(--fs-text-size-3);
-      line-height: var(--fs-text-size-5);
+      @include text-style('display-6');
     }
 
     [data-fs-bp-nav-about-trigger] {
@@ -140,52 +121,53 @@
     @import "../../components/LetterHighlight/letter-highlight.scss";
     @import "../../components/VerticalNav/vertical-nav.scss";
 
-    padding: var(--fs-spacing-6);
+    display: none;
+    padding: var(--fs-bp-padding-9);
     overflow-y: auto;
 
-    @include media("<notebook") {
-      display: none;
+    @include media('>=notebook') {
+      display: block;
     }
 
     [data-fs-bp-letter-highlight] {
-      margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      margin-left: var(--fs-bp-margin-5);
     }
 
     [data-fs-vertical-nav-menu] {
-      padding-bottom: var(--fs-spacing-2);
+      margin-bottom: var(--fs-bp-padding-5);
 
       [data-fs-vertical-nav-menu-list] {
         [data-fs-vertical-nav-menu-link] {
-          padding: var(--fs-spacing-2)
-            calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+          height: var(--fs-bp-spacing-9);
+          padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5);
         }
       }
       [data-fs-vertical-nav-menu-org-wrapper] {
         [data-fs-vertical-nav-menu-org-name] {
-          font-weight: var(--fs-text-weight-medium);
-          font-size: var(--fs-text-size-1);
-          color: #858585;
-          margin-left: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
+          @include text-style('emphasis');
+          color: var(--fs-bp-color-neutral-6);
+          padding: var(--fs-bp-padding-3) var(--fs-bp-padding-5);
+          margin-left: var(--fs-bp-margin-0);
         }
       }
       [data-fs-vertical-nav-menu-list] {
-        margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
-        font-size: var(--fs-text-size-1);
-        font-weight: var(--fs-text-weight-medium);
+        margin-top: var(--fs-bp-margin-0);
+        @include text-style('emphasis');
+        color: var(--fs-bp-color-black);
       }
     }
   }
 
   [data-fs-bp-base-tabs-layout-content] {
     overflow-y: auto;
-    padding: 0 calc(var(--fs-spacing-8) + var(--fs-spacing-0));
+    padding: 0 var(--fs-bp-padding-5);
 
-    @include media("<notebook") {
-      padding: 0 var(--fs-spacing-7);
+    @include media('>=tablet') {
+      padding: 0 var(--fs-bp-padding-10);
     }
 
-    @include media("<tablet") {
-      padding: 0 calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+    @include media('>=notebook') {
+      padding: 0 var(--fs-bp-padding-12);
     }
   }
 }

package/src/features/shared/layouts/BaseTabsLayout/sidebar-drawer/sidebar-drawer.scss

@@ -1,74 +1,88 @@
 [data-bp-sidebar-menu] {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "../../../../shared/components/BasicDrawer/basic-drawer.scss";
   @import "../../../components/LetterHighlight/letter-highlight.scss";
   @import "../../../components/VerticalNav/vertical-nav.scss";
 
   [data-fs-bp-org-unit-details-navbar-link] {
-    font-weight: var(--fs-text-weight-bold);
-    font-size: var(--fs-text-size-4);
-    line-height: var(--fs-text-size-6);
-    color: #0366dd;
+    @include text-style('display-5');
+    font-weight: var(--fs-bp-weight-bold);
+    color: var(--fs-bp-color-brand);
     text-decoration: none;
+    margin-left: var(--fs-bp-margin-5);
+
+    @include media('>=tablet') {
+      margin: var(--fs-bp-margin-0);
+    }
+  }
+
+  &[data-fs-bp-basic-drawer] {
+    [data-bp-sidebar-menu-drawer-body] {
+      [data-fs-bp-basic-drawer-body-wrapper] {
+        padding: var(--fs-bp-padding-7) var(--fs-bp-padding-5) 0;
+        
+        @include media('>=tablet') {
+          padding: var(--fs-bp-padding-7) var(--fs-bp-padding-12) 0 var(--fs-bp-padding-9);
+        }        
+      }
+    }
   }
 
   & > [data-bp-sidebar-menu-drawer-body] {
     [data-bp-sidebar-menu-wrapper-info] {
-      padding: var(--fs-spacing-4)
-        calc(var(--fs-spacing-4) + var(--fs-spacing-0)) var(--fs-spacing-4)
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
+      padding: var(--fs-bp-padding-2) var(--fs-bp-padding-5) var(--fs-bp-padding-5);
 
       [data-bp-sidebar-menu-drawer-org-name] {
-        font-weight: var(--fs-text-weight-medium);
-        font-size: var(--fs-text-size-0);
-        color: #858585;
+        @include text-style('caption');
+        font-weight: --fs-bp-weight-medium;
+        color: var(--fs-bp-color-neutral-6);
+        margin-bottom: 6px;
+
+        @include media('>=tablet') {
+          @include text-style('emphasis');
+        }
       }
+
       [data-bp-sidebar-menu-drawer-page-name] {
-        font-weight: var(--fs-text-weight-semibold);
-        font-size: var(--fs-text-size-3);
-      }
-    }
+        @include text-style('body-big');
+        font-weight: var(--fs-bp-weight-semibold);
+        color: var(--fs-bp-color-black);
 
-    & div {
-      padding: var(--fs-spacing-1)
-        calc(var(--fs-spacing-6) + var(--fs-spacing-0)) 0
-        calc(var(--fs-spacing-6) + var(--fs-spacing-0)) !important;
-      width: 100%;
+        @include media('>=tablet') {
+          font-size: var(--fs-bp-text-size-3);
+        }
+      }
     }
   }
 
   [data-fs-vertical-nav-menu] {
-    padding-bottom: var(--fs-spacing-2);
+    margin-bottom: var(--fs-bp-padding-5);
+
     [data-fs-vertical-nav-menu-org-wrapper] {
-      padding: 0rem !important;
+      padding: var(--fs-bp-padding-0);
+
       [data-fs-vertical-nav-menu-org-name] {
-        font-weight: var(--fs-text-weight-medium);
-        font-size: var(--fs-text-size-1);
-        color: #858585;
+        @include text-style('emphasis');
+        color: var(--fs-bp-color-neutral-6);
       }
     }
+
     [data-fs-vertical-nav-menu-list] {
-      margin-top: calc(var(--fs-spacing-1) + var(--fs-spacing-0));
-      font-size: var(--fs-text-size-1);
-      font-weight: var(--fs-text-weight-medium);
+      @include text-style('emphasis');
+      margin-top: var(--fs-bp-margin-3);
     }
   }
 
-  @include media("<=tablet") {
-    height: 100% !important;
-    border-radius: 0 !important;
-    & > [data-fs-bp-basic-drawer-heading] {
-      padding: calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-3) + var(--fs-spacing-0))
-        calc(var(--fs-spacing-5) + var(--fs-spacing-0)) !important;
-    }
-    & > [data-bp-sidebar-menu-drawer-body] {
-      & div {
-        padding: var(--fs-spacing-1)
-          calc(var(--fs-spacing-3) + var(--fs-spacing-0)) 0
-          calc(var(--fs-spacing-3) + var(--fs-spacing-0)) !important;
-        width: 100%;
-      }
+  &[data-fs-bp-basic-drawer][data-fs-slide-over-size] {
+    width: calc(100vw - var(--fs-bp-spacing-5));
+    max-width: 30rem;
+    min-width: unset;
+    height: 100%;
+    border-radius: var(--fs-bp-border-radius-0);
+
+    @include media('>=desktop') {
+      width: 33.333vw;
+      max-width: 40rem;
     }
   }
 }

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.32";
+export const CURRENT_VERSION = "1.3.34";

package/src/themes/index.scss

@@ -110,6 +110,10 @@
         display: none;
       }
     }
+
+    [data-fs-overlay] {
+      background-color: var(--fs-bp-color-transparent-overlay) !important;
+    }
   }
 
   [data-fs-button-signin-link] {

package/src/themes/tokens.scss

@@ -61,10 +61,10 @@
   --fs-bp-color-success-1: #AFF79E;
   --fs-bp-color-success-2: #08A822;
 
-  // Colors - critical
-  --fs-bp-color-critical-0: #FDF6F5;
-  --fs-bp-color-critical-1: #FFDFD9;
-  --fs-bp-color-critical-2: #D31A15;
+  // Colors - danger
+  --fs-bp-color-danger-0: #FDF6F5;
+  --fs-bp-color-danger-1: #FFDFD9;
+  --fs-bp-color-danger-2: #D31A15;
 
   // Colors - warning
   --fs-bp-color-warning-0: #FDF5E9;
@@ -77,6 +77,7 @@
   --fs-bp-color-transparent-0: rgba(0, 0, 0, .06);
   --fs-bp-color-transparent-1: rgba(0, 0, 0, .12);
   --fs-bp-color-transparent-2: rgba(255, 255, 255, .9);
+  --fs-bp-color-transparent-overlay: rgba(0,0,0, .5);
 
   // Border radius
   --fs-bp-border-radius-0: 0;