@lightspeed/design-system-css 1.1.1 → 1.2.1

package/src/vend.ui/styles/navi/_nv-topnav.scss

@@ -9,6 +9,7 @@
 .nv-topnav {
   position: relative;
   width: 100%;
+  z-index: 1;
 
   @media print {
     display: none;
@@ -19,7 +20,7 @@
   justify-content: center;
   flex: 1;
 
-  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+  @include vd-viewport-media-max($vd-breakpoint-xsmall) {
     flex: initial;
   }
 }
@@ -28,7 +29,7 @@
   min-width: 0;
   flex: 1;
 
-  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+  @include vd-viewport-media-max($vd-breakpoint-xsmall) {
     &.nv-topnav-header--mobile {
       flex: initial;
     }
@@ -75,7 +76,7 @@
   margin-left: auto;
   flex: 1;
 
-  @include vd-viewport-media-max ($vd-breakpoint-xsmall) {
+  @include vd-viewport-media-max($vd-breakpoint-xsmall) {
     flex: initial;
   }
 }
@@ -92,7 +93,7 @@
 
 // ========= Responsive Breakpoint Styles ========= //
 
-@include vd-viewport-media-max ($vd-breakpoint-large) {
+@include vd-viewport-media-max($vd-breakpoint-large) {
   .nv-topnav-header {
     display: none;
 

package/src/vend.ui/styles/navi/dialogs/_nv-notifications-dialog.scss

@@ -7,7 +7,7 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  max-height: calc(100vh - #{$vd-topbar-height})
+  max-height: calc(100vh - #{$vd-topbar-height});
 }
 
 .nv-notifications-list-item {
@@ -32,7 +32,7 @@
   word-wrap: break-word;
 
   &:before {
-    content:'';
+    content: '';
     width: 8px;
     height: 8px;
     box-sizing: content-box;

package/src/vend.ui/styles/navi/navi.scss

@@ -1,12 +1,11 @@
 // Modules
-@import "nv-topnav";
-@import "nv-topnav-title";
-@import "nv-sidenav";
-@import "nv-account-banner";
-@import "nv-notifications-item";
-@import "nv-user-sale-data";
+@import 'nv-topnav';
+@import 'nv-topnav-title';
+@import 'nv-account-banner';
+@import 'nv-notifications-item';
+@import 'nv-user-sale-data';
 
 // Dialogs
-@import "dialogs/nv-dialog-drawer";
-@import "dialogs/nv-notifications-dialog";
-@import "dialogs/nv-user-dialog";
+@import 'dialogs/nv-dialog-drawer';
+@import 'dialogs/nv-notifications-dialog';
+@import 'dialogs/nv-user-dialog';

package/src/vend.ui/styles/navi/non-styles/_mixins.scss

@@ -2,15 +2,17 @@
 // Generates a striped background with the stripes slanted at 60 deg and alternating between the given color and a
 // darkened equivalent. Stripes are 15px wide.
 //
-@mixin nv-striped-background ($color) {
-  background: repeating-linear-gradient(-60deg,
+@mixin nv-striped-background($color) {
+  background: repeating-linear-gradient(
+    -60deg,
     darken($color, 3),
     darken($color, 3) 15px,
     $color 15px,
-    $color 30px);
+    $color 30px
+  );
 }
 
-@mixin nv-topnav-status-icon ($_vd-icon-color: vd-colour(do)) {
+@mixin nv-topnav-status-icon($_vd-icon-color: vd-colour(do)) {
   &::after {
     content: '';
     transform: scale(0);

package/src/vend.ui/styles/navi/non-styles/_variables.scss

@@ -4,17 +4,6 @@ $nv-header-font-size: 15px;
 $nv-header-logo-font-size: 42px;
 $nv-header-logo-font-size--mobile: 24px;
 
-// Side Navigation
-
-$nv-sidenav-base-z-index: $vd-z-index-navigation-base;
-$nv-sidenav-modal-z-index: $vd-modals-z-index + 1;
-$nv-sidenav-modal-close-base-offset: 10px;
-$nv-sidenav-modal-close-right-offset: -($vd-dialog-close-width + $nv-sidenav-modal-close-base-offset);
-
-$nv-sidenav-content-box-shadow-offset-x: 1px;
-$nv-sidenav-tabs-mobile-width: 85px;
-$nv-sidenav-drawer-mobile-width: 145px;
-
 // Notifications Side Drawer
 
 $nv-notifications-list-spacing: 20px;

package/src/vend.ui/styles/vend-ui.scss

@@ -58,6 +58,7 @@
 @import '../components/vd-loader/vd-loader';
 @import '../components/vd-main-content/vd-main-content';
 @import '../components/vd-modals-container/vd-modals-container';
+@import '../components/vd-nav-divider/vd-nav-divider';
 @import '../components/vd-nav-item/vd-nav-item';
 @import '../components/vd-overlay/vd-overlay';
 @import '../components/vd-p/vd-p';
@@ -74,6 +75,7 @@
 @import '../components/vd-sidebar/vd-sidebar';
 @import '../components/vd-sidebar-drawer/vd-sidebar-drawer';
 @import '../components/vd-sidebar-tabs/vd-sidebar-tabs';
+@import '../components/vd-sidebar/tmp-overrides'; // @REMOVEME: When flag `sidebar_new` is fully rolled out
 @import '../components/vd-splash/vd-splash';
 @import '../components/vd-status-icon/vd-status-icon';
 @import '../components/vd-suggestion/vd-suggestion-list';

package/CHANGELOG.md

@@ -1,180 +0,0 @@
-# @lightspeed/design-system-css
-
-## 1.1.1
-
-### Patch Changes
-
-- [#4592](https://github.com/vend/monocle/pull/4592) [`697caaf9d`](https://github.com/vend/monocle/commit/697caaf9dea2ee9e11322e04a7ceb6de0dbd1f82) Thanks [@edsrzf](https://github.com/edsrzf)! - Use align-items: flex-start instead of start to avoid an autoprefixer warning.
-
-## 1.1.0
-
-### Minor Changes
-
-- [#4381](https://github.com/vend/monocle/pull/4381) [`291ce4a3d`](https://github.com/vend/monocle/commit/291ce4a3db11882b4e19e10a9865b896643d890b) Thanks [@stephen-boswell](https://github.com/stephen-boswell)! - Adds classes to hide the nav container in single-spa enviroment
-
-## 1.0.3
-
-### Patch Changes
-
-- [#4344](https://github.com/vend/monocle/pull/4344) [`908e57aea`](https://github.com/vend/monocle/commit/908e57aea8abb71d3b4bb26bcae152f87cf2b874) Thanks [@WaiHaiDere](https://github.com/WaiHaiDere)! - Update checkbox styling to match design (Margin + label)
-
-## 1.0.2
-
-### Patch Changes
-
-- Updated dependencies [[`13743872b`](https://github.com/vend/monocle/commit/13743872b0eb04bae4143efd20e24d11ba5cd925)]:
-  - @lightspeed/design-system-tokens@1.0.0
-
-## 1.0.1
-
-### Patch Changes
-
-- [#4275](https://github.com/vend/monocle/pull/4275) [`2eb35a37f`](https://github.com/vend/monocle/commit/2eb35a37fb01bbb451bda857666ae5538969fac5) Thanks [@rothlis](https://github.com/rothlis)! - Fix Inputs height to 44px
-
-  **Why?**
-
-  Specs define buttons and inputs having a height of 44px. However, before this release, inputs (e.g. TextInput, Dropdown) where having a height of 46px.
-
-## 1.0.0
-
-### Major Changes
-
-- [#4264](https://github.com/vend/monocle/pull/4264) [`50352c606`](https://github.com/vend/monocle/commit/50352c6063a4de1e493d6a95c8058cdbbcb29c66) Thanks [@rothlis](https://github.com/rothlis)! - Ability to manually set the dark or light theme.
-
-  - By default, no dark theme is enabled
-  - If your UI supports the dark theme, then either:
-    - Set the SASS variable `$vd-theme-use-dark-mode: true;` before importing the SASS styles
-    - Set the CSS class `vd-theme--use-dark-mode` to the `<body>`
-    - The dark theme will be automatically applied based on the OS preference
-  - If you have a theme swicher, you can add `vd-theme--light` or `vd-theme--dark` to the `<body>`
-    - This will override the OS preference
-
-## 0.6.3
-
-### Patch Changes
-
-- [#4252](https://github.com/vend/monocle/pull/4252) [`b720075e4`](https://github.com/vend/monocle/commit/b720075e419fc9d5671bb448bd987c33119fcd1a) Thanks [@staugaard](https://github.com/staugaard)! - Slightly improved styling of popovers
-
-## 0.6.2
-
-### Patch Changes
-
-- [#4249](https://github.com/vend/monocle/pull/4249) [`3dd1fa50b`](https://github.com/vend/monocle/commit/3dd1fa50bd328ac2b33f00fb66aa53e955a47f78) Thanks [@aarr0n](https://github.com/aarr0n)! - Fix animation for Dott.
-
-## 0.6.1
-
-### Patch Changes
-
-- [#4237](https://github.com/vend/monocle/pull/4237) [`a90d5a43e`](https://github.com/vend/monocle/commit/a90d5a43eea46eb9ddeca8410638ad1730fd9803) Thanks [@aarr0n](https://github.com/aarr0n)! - Navigation: Update the selector which highlights a sidebar drawer item as "active".
-
-## 0.6.0
-
-### Minor Changes
-
-- [#4229](https://github.com/vend/monocle/pull/4229) [`7f70bec24`](https://github.com/vend/monocle/commit/7f70bec24f7cae5938279e0ab567e62196152f5c) Thanks [@haydenwoodhead](https://github.com/haydenwoodhead)! - # Dropdown: add divider and search header margin
-
-  ## What
-
-  - Adds a divider suggestion type to the Dropdown.
-  - Adds 4px of padding to the label that displays the search header inside of a Dropdown.
-
-  ## Why
-
-  IAM is creating a new page and needs a specific design for the dropdown component. That includes a divider. See the [figma](https://www.figma.com/file/n2CJXP9CDaLyUoiz23iEPj/08-Setup?node-id=1065%3A248430).
-
-  It also appears that this search header label should have some margin. See [this slack discussion](https://lightspeedhq.slack.com/archives/C02K5U88KUH/p1646880176830629).
-
-  ## How
-
-  Use the new divider like so:
-
-  ```
-  const items = [
-    { id: 'item7', label: 'item7', name: 'item7' },
-    {
-      id: 'dividerItem',
-      label: 'divider',
-      name: 'Divider',
-      itemType: SuggestionType.Divider,
-    },
-    { id: 'item8', label: 'item8', name: 'item8' },
-    { id: 'item9', label: 'item9', name: 'item9' },
-  ]
-
-  ...
-
-  <Dropdown items={items}>
-  ```
-
-## 0.5.0
-
-### Minor Changes
-
-- [#4200](https://github.com/vend/monocle/pull/4200) [`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f) Thanks [@rothlis](https://github.com/rothlis)! - Theme tokens have been extracted to `@lightspeed/design-system-tokens`
-
-  **Deprecated**: This package does not export anymore the theme tokens. Please use `@lightspeed/design-system-tokens` going forward.
-
-### Patch Changes
-
-- Updated dependencies [[`73d8d0eda`](https://github.com/vend/monocle/commit/73d8d0eda329cd27e99d93275b1ba6324db39a1f)]:
-  - @lightspeed/design-system-tokens@0.1.0
-
-## 0.4.0
-
-### Minor Changes
-
-- 24ea79113: Update styling for Vend to Lightspeed brand replacement
-
-## 0.3.0
-
-### Minor Changes
-
-- 622131d30: Updates `ToastNotification` by adding a check icon to all success toasts and small style changes (padding and bolded font)
-
-## 0.2.0
-
-### Minor Changes
-
-- 495da32fa: Remove Vend's naming from the package's API
-
-  ## New API
-
-  Import CSS styles
-
-  ```tsx
-  import '@lightspeed/design-system-css'
-  ```
-
-  Import SCSS non-styles (variables, mixins, functions)
-
-  ```scss
-  @import '@lightspeed/design-system-css/src/common';
-  ```
-
-  ## Deprecated API
-
-  > Those APIs are deprecated but still available for retro-compatibility.
-
-  Import CSS styles
-
-  ```tsx
-  import '@lightspeed/design-system-css/dist/vend-styles.css'
-  ```
-
-  Import SCSS non-styles (variables, mixins, functions)
-
-  ```scss
-  @import '@lightspeed/design-system-css/src/vend.ui/styles/global/non-styles';
-  ```
-
-## 0.1.0
-
-### Minor Changes
-
-- 094a8faf7: Initial release of `@lightspeed/design-sytem-css`.
-
-  See https://github.com/vend/monocle/pull/3616 for context.
-
-### Patch Changes
-
-- dc309dc98: Remove dependency on @vend packages

package/src/vend.ui/styles/navi/_nv-sidenav.scss

@@ -1,143 +0,0 @@
-@mixin nv-sidenav-faux-column-bg($tabs-width, $drawer-width) {
-  background: linear-gradient(
-    to right,
-    $vd-sidebar-tabs-background-color 0,
-    $vd-sidebar-tabs-background-color $tabs-width,
-    $vd-sidebar-drawer-background-color $tabs-width,
-    $vd-sidebar-drawer-background-color $drawer-width
-  );
-}
-
-// The sidebar contents can be hidden, if so we shouldn't show the sidebar
-.vd-sidebar:empty {
-  display: none;
-}
-
-.nv-sidenav {
-  transform: translateX(0);
-  transition: transform 0.2s ease-in-out;
-  display: block;
-  height: calc(100% - #{$vd-topbar-height});
-  z-index: $nv-sidenav-base-z-index;
-
-  .nv-sidenav-modal-close {
-    display: none;
-    top: $nv-sidenav-modal-close-base-offset;
-    right: $nv-sidenav-modal-close-right-offset;
-  }
-
-  .vd-sidebar-tabs {
-    box-shadow: none;
-    height: auto;
-  }
-
-  .vd-sidebar-drawer {
-    border-right: none;
-    height: auto;
-  }
-
-  @media print {
-    display: none;
-  }
-
-  @supports (height: min-content) {
-    .vd-sidebar-tabs,
-    .vd-sidebar-drawer {
-      height: min-content;
-    }
-  }
-
-  // Required so banner does not appear over the top of the sidenav when its toggled
-  // on smaller devices
-  @include vd-viewport-media-max($vd-breakpoint-large) {
-    z-index: $vd-z-index-popover-base + 2;
-  }
-}
-
-.nv-sidenav-content {
-  @include nv-sidenav-faux-column-bg(
-    $vd-sidebar-tabs-desktop-width,
-    $vd-sidebar-drawer-desktop-width
-  );
-  width: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  display: flex;
-  box-shadow: $nv-sidenav-content-box-shadow-offset-x 0 0 0 vd-colour(framing);
-}
-
-.nv-sidenav--pad-drawer {
-  padding-right: $vd-sidebar-drawer-desktop-width;
-}
-
-// ========= Body Class Sidenav Modal State ========= //
-
-.nv-display-sidenav-modal {
-  .nv-sidenav {
-    z-index: $nv-sidenav-modal-z-index;
-
-    .nv-sidenav-modal-close {
-      display: flex;
-    }
-  }
-}
-
-// ========= Responsive Breakpoint Styles ========= //
-
-@include vd-viewport-media-max($vd-breakpoint-large) {
-  .nv-sidenav {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    transform: translateX(
-      calc(-100% - #{$nv-sidenav-content-box-shadow-offset-x})
-    );
-
-    .nv-sidenav-content {
-      @include nv-sidenav-faux-column-bg(
-        $nv-sidenav-tabs-mobile-width,
-        $nv-sidenav-drawer-mobile-width
-      );
-    }
-
-    .vd-sidebar-tabs {
-      width: $nv-sidenav-tabs-mobile-width;
-    }
-
-    .vd-sidebar-drawer {
-      width: $nv-sidenav-drawer-mobile-width;
-    }
-  }
-
-  .nv-display-sidenav-modal {
-    .nv-sidenav {
-      transform: translateX(0);
-    }
-  }
-
-  .nv-sidenav--pad-drawer {
-    padding-right: 0;
-  }
-}
-
-@include vd-viewport-media-min($vd-breakpoint-xlarge-min) {
-  // The following styles are required to allow the sidenav modal overlay page content when no drawer is displayed
-  // This only applies to the nav at large desktop size
-  .nv-sidenav--no-drawer {
-    width: $vd-sidebar-tabs-desktop-width;
-  }
-
-  .nv-display-sidenav-modal {
-    .nv-sidenav--no-drawer {
-      .nv-sidenav-content {
-        position: absolute;
-      }
-
-      .nv-sidenav-modal-close {
-        right: $nv-sidenav-modal-close-right-offset -
-          $vd-sidebar-drawer-desktop-width;
-      }
-    }
-  }
-}