@lightspeed/design-system-css 4.0.0 → 5.0.0

package/package.json

@@ -1 +1 @@
-{"name":"@lightspeed/design-system-css","version":"4.0.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}
+{"name":"@lightspeed/design-system-css","version":"5.0.0","description":"Lightspeed's Design System in CSS","repository":"https://github.com/lightspeed/helios.git","author":"Lightspeed Commerce Inc.","license":"SEE LICENSE IN LICENSE.md","main":"dist/index.css","publishConfig":{"access":"public"},"files":["src","dist"],"scripts":{"prebuild":"rm -rf dist","build":"yarn lint && yarn build:css && yarn build:retrocompatibility","build:css":"sass --load-path=../../node_modules -q src/index.scss:dist/index.css","build:retrocompatibility":"cp dist/index.css dist/vend-styles.css","watch":"yarn lint && yarn build:css --watch","lint":"yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"},"dependencies":{"@lightspeed/design-system-tokens":"^1.1.0"},"devDependencies":{"@types/node":"^16.11.2","sass":"~1.45.2","stylelint":"^13.5.0","stylelint-scss":"^3.17.2","ts-node":"^10.3.1"}}

package/src/vend.ui/components/vd-section/vd-section.scss

@@ -95,7 +95,7 @@ vd-section,
   }
 
   position: fixed;
-  top: $vd-top-nav-height;
+  top: $vd-topbar-height;
   right: 0;
   z-index: $vd-z-index-navigation-base;
   box-sizing: border-box;

package/src/vend.ui/styles/global/_misc.scss

@@ -9,6 +9,9 @@ $vd-shadow-blur: 3px !default;
 $vd-shadow-spread: 2px !default;
 $vd-box-shadow: 0 4px 10px vd-colour(shadow);
 
-// TODO: These shouldn't be in here... They should be declared in vend-nav.
-$vd-top-nav-height: 50px;
+// Shared navi non-styles
+$vd-topbar-height: 50px;
 $vd-nav-width: 230px;
+$vd-sidebar-drawer-desktop-width: 176px;
+$vd-sidebar-drawer-item-font-size: 15px;
+$vd-sidebar-drawer-item-padding-x: 22px;

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

@@ -53,9 +53,6 @@
 @import '../../components/vd-section/vd-section-ns';
 @import '../../components/vd-select/vd-select-ns';
 @import '../../components/vd-section-back/vd-section-back-ns';
-@import '../../components/vd-sidebar/vd-sidebar-ns';
-@import '../../components/vd-sidebar-drawer/vd-sidebar-drawer-ns';
-@import '../../components/vd-sidebar-tabs/vd-sidebar-tabs-ns';
 @import '../../components/vd-status-icon/vd-status-icon-ns';
 @import '../../components/vd-suggestion/vd-suggestion-list-ns';
 @import '../../components/vd-switch/vd-switch-ns';
@@ -63,10 +60,6 @@
 @import '../../components/vd-tabs/vd-tabs-ns';
 @import '../../components/vd-toast-notification/vd-toast-notification-ns';
 @import '../../components/vd-tooltip/vd-tooltip-ns';
-@import '../../components/vd-topbar/vd-topbar-ns';
 @import '../../components/vd-hero/vd-hero-ns';
 @import '../../components/vd-promo/vd-promo-ns';
 @import '../../components/vd-settings/vd-settings-ns';
-
-// Navi non-style variables and mixins
-@import '../navi/non-styles';

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

@@ -57,8 +57,6 @@
 @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';
 @import '../components/vd-panel/vd-panel';
@@ -71,9 +69,6 @@
 @import '../components/vd-section/vd-section';
 @import '../components/vd-section-back/vd-section-back';
 @import '../components/vd-segcontrol/vd-segcontrol';
-@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-splash/vd-splash';
 @import '../components/vd-status-icon/vd-status-icon';
 @import '../components/vd-suggestion/vd-suggestion-list';
@@ -83,7 +78,6 @@
 @import '../components/vd-text/vd-text';
 @import '../components/vd-toast-notification/vd-toast-notification';
 @import '../components/vd-tooltip/vd-tooltip';
-@import '../components/vd-topbar/vd-topbar';
 @import '../components/vd-visibility/vd-visibility';
 @import '../components/vd-next-stepper/vd-next-stepper';
 @import '../components/vd-settings/vd-settings';
@@ -93,7 +87,3 @@
 
 // Must be last items in the style sheet
 @import 'global/spacing/spacing-helpers';
-
-// Navi styles
-// !! NOTE: Please keep @import navi styles AT THE BOTTOM to avoid nav UI issue
-@import 'navi/navi';

package/src/vend.ui/components/vd-nav-divider/vd-nav-divider.scss

@@ -1,14 +0,0 @@
-.vd-nav-divider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 25px;
-
-  &::before {
-    content: '';
-    display: block;
-    height: 1px;
-    width: 20px;
-    background-color: vd-colour(keyline);
-  }
-}

package/src/vend.ui/components/vd-nav-item/vd-nav-item.scss

@@ -1,30 +0,0 @@
-.vd-nav-item {
-  box-sizing: border-box;
-  height: 100%;
-}
-
-.vd-nav-item-action {
-  display: flex;
-  align-items: center;
-
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-
-  color: inherit;
-
-  // Overrides any base anchor styles
-  &:active,
-  &:focus,
-  &:hover {
-    color: inherit;
-  }
-}
-
-.vd-nav-item--disabled {
-  cursor: not-allowed;
-
-  .vd-nav-item-action {
-    pointer-events: none;
-  }
-}

package/src/vend.ui/components/vd-sidebar/vd-sidebar-ns.scss

@@ -1,23 +0,0 @@
-$vd-sidebar-base-z-index: $vd-z-index-navigation-base;
-$vd-sidebar-modal-z-index: $vd-modals-z-index + 1;
-$vd-sidebar-modal-close-base-offset: 10px;
-$vd-sidebar-modal-close-right-offset: -($vd-dialog-close-width + $vd-sidebar-modal-close-base-offset);
-
-$vd-sidebar-content-box-shadow-offset-x: 1px;
-$vd-sidebar-tabs-mobile-width: 85px;
-$vd-sidebar-drawer-mobile-width: 145px;
-
-$vd-sidebar-width: 240px;
-
-@mixin vd-sidebar-active-indicator() {
-  position: relative;
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    width: 4px;
-    background-color: vd-colour(go);
-  }
-}

package/src/vend.ui/components/vd-sidebar/vd-sidebar.scss

@@ -1,123 +0,0 @@
-@mixin vd-sidebar-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;
-}
-
-.vd-sidebar {
-  display: flex;
-  position: relative;
-
-  flex-shrink: 0;
-  height: calc(100% - #{$vd-topbar-height});
-  box-sizing: border-box;
-  font-family: $vd-font-primary;
-  line-height: normal;
-  max-width: $vd-sidebar-width;
-
-  transform: translateX(0);
-  transition: transform 0.2s ease-in-out;
-  z-index: $vd-sidebar-base-z-index;
-
-  .vd-sidebar-modal-close {
-    display: none;
-    top: $vd-sidebar-modal-close-base-offset;
-    right: $vd-sidebar-modal-close-right-offset;
-  }
-
-  .vd-sidebar-tabs {
-    height: auto;
-  }
-
-  .vd-sidebar-drawer {
-    height: auto;
-  }
-
-  @media print {
-    display: none;
-  }
-
-  // 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;
-  }
-}
-
-.vd-sidebar-content {
-  @include vd-sidebar-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;
-}
-
-.vd-sidebar--pad-drawer {
-  padding-right: $vd-sidebar-drawer-desktop-width;
-}
-
-// ========= Body Class Sidenav Modal State ========= //
-
-.nv-display-sidenav-modal {
-  .vd-sidebar {
-    z-index: $vd-sidebar-modal-z-index;
-
-    .vd-sidebar-modal-close {
-      display: flex;
-    }
-  }
-}
-
-// ========= Responsive Breakpoint Styles ========= //
-
-@include vd-viewport-media-max($vd-breakpoint-large) {
-  .vd-sidebar {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    transform: translateX(calc(-100% - #{$vd-sidebar-content-box-shadow-offset-x}));
-  }
-
-  .nv-display-sidenav-modal {
-    .vd-sidebar {
-      transform: translateX(0);
-    }
-  }
-
-  .vd-sidebar--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
-  .vd-sidebar--no-drawer {
-    width: $vd-sidebar-tabs-desktop-width;
-  }
-
-  .nv-display-sidenav-modal {
-    .vd-sidebar--no-drawer {
-      .vd-sidebar-content {
-        position: absolute;
-      }
-
-      .vd-sidebar-modal-close {
-        right: $vd-sidebar-modal-close-right-offset - $vd-sidebar-drawer-desktop-width;
-      }
-    }
-  }
-}

package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer-ns.scss

@@ -1,6 +0,0 @@
-$vd-sidebar-drawer-background-color: vd-colour(nav-side-drawer);
-$vd-sidebar-drawer-desktop-width: 176px;
-
-$vd-sidebar-drawer-item-font-size: 15px;
-$vd-sidebar-drawer-item-padding-x: 22px;
-$vd-sidebar-drawer-item-padding-y: 13px;

package/src/vend.ui/components/vd-sidebar-drawer/vd-sidebar-drawer.scss

@@ -1,92 +0,0 @@
-@keyframes nv-sidebar-drawer-loader {
-  0% {
-    background-color: vd-rgba(vd-colour(nav-side-tabs-rgb), 0.1);
-  }
-  100% {
-    background-color: vd-rgba(vd-colour(nav-side-tabs-rgb), 1);
-  }
-}
-
-.vd-sidebar-drawer {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  width: $vd-sidebar-drawer-desktop-width;
-  height: 100%;
-  background-color: $vd-sidebar-drawer-background-color;
-  border-right: 1px solid vd-colour(background);
-  box-sizing: border-box;
-  padding-top: $vd-sidebar-drawer-item-font-size;
-  padding-bottom: $vd-sidebar-drawer-item-font-size;
-
-  .vd-nav-item {
-    width: 100%;
-    height: auto;
-    color: vd-colour(text);
-    font-weight: $vd-font-weight--regular;
-
-    &:hover {
-      background: vd-colour(go-highlight);
-    }
-  }
-
-  .vd-nav-item-action {
-    padding: $vd-sidebar-drawer-item-padding-y $vd-sidebar-drawer-item-padding-x;
-  }
-
-  .vd-nav-item--active {
-    @include vd-sidebar-active-indicator();
-    .vd-nav-item-action {
-      color: vd-colour(go);
-    }
-  }
-
-  .vd-nav-item--pending {
-    color: vd-colour(supplementary--text);
-  }
-
-  // @todo Make this a mixin for all disabled things.
-  .vd-nav-item--disabled {
-    opacity: 0.35;
-    filter: grayscale(100%);
-
-    &:hover {
-      background-color: inherit;
-    }
-  }
-
-  .vd-nav-item-label {
-    font-size: $vd-sidebar-drawer-item-font-size;
-  }
-
-  .nv-tx-loading & {
-    .vd-nav-item {
-      pointer-events: none;
-    }
-
-    .vd-nav-item--active::before {
-      display: none;
-    }
-
-    .vd-nav-item-label {
-      animation: nv-sidebar-drawer-loader 1s linear infinite alternate;
-      color: transparent;
-      display: block;
-      width: 100%;
-      height: 18px;
-    }
-
-    .register-info {
-      margin: 0 auto;
-      animation: nv-sidebar-drawer-loader 1s linear infinite alternate;
-
-      &::before {
-        display: none;
-      }
-
-      > * {
-        visibility: hidden;
-      }
-    }
-  }
-}

package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs-ns.scss

@@ -1,24 +0,0 @@
-@use 'sass:math';
-
-$vd-sidebar-tabs-animation-duration: 200ms;
-
-$vd-sidebar-tabs-background-color: vd-colour(nav-side-tabs);
-
-$vd-sidebar-tabs-desktop-width: 64px;
-$vd-sidebar-tabs-expanded-width: 240px;
-
-$vd-sidebar-tab-height: 44px !default;
-$vd-sidebar-tab-font-colour: vd-colour(text) !default;
-$vd-sidebar-tab-font-size: 15px !default;
-$vd-sidebar-tab-icon-font-size: 20px !default;
-$vd-sidebar-tab-padding-x: math.div(
-  $vd-sidebar-tabs-desktop-width - $vd-sidebar-tab-icon-font-size,
-  2
-);
-
-$vd-sidebar-tab-active-bg-colour: vd-colour(text) !default;
-$vd-sidebar-tab-active-border-width: 6px !default;
-
-$vd-sidebar-tab-chevron-position-top: 25px;
-$vd-sidebar-tab-chevron-position-right: 8px;
-$vd-sidebar-tab-chevron-opacity: 0.4;

package/src/vend.ui/components/vd-sidebar-tabs/vd-sidebar-tabs.scss

@@ -1,123 +0,0 @@
-@keyframes nv-sidebar-tabs-loader {
-  0% {
-    background-color: vd-rgba(vd-colour(background-rgb), 0.1);
-  }
-  100% {
-    background-color: vd-rgba(vd-colour(background-rgb), 1);
-  }
-}
-
-.vd-sidebar-tabs {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  z-index: $vd-z-index-content-base + 1;
-
-  box-sizing: border-box;
-  width: $vd-sidebar-tabs-desktop-width;
-  height: 100%;
-
-  background-color: $vd-sidebar-tabs-background-color;
-
-  font-size: $vd-sidebar-tab-font-size;
-  color: vd-colour(text);
-
-  padding-top: $vd-sidebar-drawer-item-font-size;
-  padding-bottom: $vd-sidebar-drawer-item-font-size;
-
-  transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
-
-  overflow: hidden;
-
-  &.vd-sidebar-tabs--expanded {
-    width: $vd-sidebar-tabs-expanded-width;
-
-    .vd-nav-item-action {
-      justify-content: start;
-    }
-  }
-
-  .vd-nav-item {
-    flex-shrink: 0;
-    height: $vd-sidebar-tab-height;
-    transition: width $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
-
-    &:hover {
-      background: vd-colour(background);
-    }
-  }
-
-  .vd-nav-item--pending {
-    background: vd-colour(background);
-  }
-
-  .vd-nav-item--disabled {
-    opacity: 0.35;
-    filter: grayscale(100%);
-
-    &:hover {
-      background-color: inherit;
-    }
-  }
-
-  .vd-nav-item--active {
-    color: vd-colour(do);
-    background: vd-colour(box);
-
-    &.vd-nav-item--no-children {
-      @include vd-sidebar-active-indicator();
-    }
-  }
-
-  .vd-nav-item-action {
-    flex-direction: row;
-    position: relative;
-    justify-content: start;
-  }
-
-  .vd-nav-item-label {
-    white-space: nowrap;
-  }
-
-  .vd-nav-item-icon {
-    flex-shrink: 0;
-    text-align: center;
-    font-size: $vd-sidebar-tab-icon-font-size;
-    min-width: $vd-sidebar-tab-icon-font-size;
-    padding-left: $vd-sidebar-tab-padding-x;
-    padding-right: $vd-sidebar-tab-padding-x;
-
-    transition: padding-right $vd-sidebar-tabs-animation-duration cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .vd-nav-divider {
-    padding-left: $vd-sidebar-tab-padding-x;
-    justify-content: flex-start;
-  }
-
-  .nv-tx-loading & {
-    .vd-nav-item {
-      pointer-events: none;
-    }
-
-    .vd-nav-item--active {
-      color: vd-colour(text);
-
-      &::before {
-        display: none;
-      }
-    }
-
-    .vd-nav-item-label {
-      animation: nv-sidebar-tabs-loader 1s linear infinite alternate;
-      width: 50%;
-      height: 18px;
-      color: transparent;
-    }
-
-    // Hide the expander button until translations are loaded
-    .vd-sidebar-expander {
-      display: none;
-    }
-  }
-}

package/src/vend.ui/components/vd-topbar/vd-topbar-ns.scss

@@ -1,10 +0,0 @@
-$vd-topbar-height: 50px;
-$vd-topbar-background-color: vd-colour(nav-top);
-
-$vd-topbar-font-size: 14px;
-$vd-topbar-font-color: vd-colour(text-nav);
-
-$vd-topbar-item-side-padding: vd-grid-unit(5);
-$vd-topbar-item-label-margin-left: 10px;
-$vd-topbar-item-default-opactiy: 0.5 !default;
-$vd-topbar-item-label-max-width: 150px;

package/src/vend.ui/components/vd-topbar/vd-topbar.scss

@@ -1,53 +0,0 @@
-.vd-topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  flex: 1 100%;
-  height: $vd-topbar-height;
-
-  box-sizing: border-box;
-  background-color: $vd-topbar-background-color;
-
-  font-family: $vd-font-primary;
-  font-size: 15px;
-  line-height: normal;
-  color: $vd-topbar-font-color;
-
-  .vd-nav-item-action {
-    padding: 0 $vd-topbar-item-side-padding;
-    opacity: $vd-topbar-item-default-opactiy;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .vd-nav-item-icon + .vd-nav-item-label {
-    margin-left: $vd-topbar-item-label-margin-left;
-  }
-
-  .vd-nav-item-label {
-    max-width: $vd-topbar-item-label-max-width;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  .vd-logo-container {
-    display: flex;
-    height: 100%;
-  }
-
-  .vd-logo {
-    padding-left: 23px;
-  }
-
-  // Hide content when Transifex translations are being fetched
-  .nv-tx-loading & {
-    .nv-topnav-header--mobile,
-    .nv-topnav-content {
-      visibility: hidden;
-    }
-  }
-}

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

@@ -1,2 +0,0 @@
-@import 'non-styles/variables';
-@import 'non-styles/mixins';

package/src/vend.ui/styles/navi/_nv-account-banner.scss

@@ -1,17 +0,0 @@
-.nv-account-banner {
-  display: block;
-
-  .vd-banner-content {
-    display: inline-flex;
-  }
-
-  // Hide account banners when navigation translations are being fetched
-  .nv-tx-loading & {
-    display: none;
-  }
-}
-
-.nv-account-banner-action {
-  flex-shrink: 0;
-  margin-left: vd-grid-unit(6);
-}

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

@@ -1,15 +0,0 @@
-.nv-notifications-item {
-  position: relative;
-
-  @include nv-topnav-status-icon() {
-    top: 15px;
-    right: 12px;
-    transform: scale(0);
-  }
-}
-
-.nv-notifications-item--active {
-  &::after {
-    transform: scale(1);
-  }
-}

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

@@ -1,29 +0,0 @@
-.nv-topnav-title {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  flex-shrink: 0;
-  font-size: vd-text-size(body);
-  font-weight: $vd-font-weight--bold;
-
-  // Hide custom nav titles when navigation translations are being fetched
-  .nv-tx-loading & {
-    display: none;
-  }
-}
-
-.nv-topnav-title-shorthand {
-  display: none;
-}
-
-// ========= Responsive Breakpoint Styles ========= //
-
-@include vd-viewport-media-max($vd-breakpoint-medium) {
-  .nv-topnav-title-shorthand {
-    display: inline;
-  }
-
-  .nv-topnav-title-full {
-    display: none;
-  }
-}