@lightspeed/design-system-css 1.1.0 → 1.2.0

package/dist/vend-styles.css

@@ -417,6 +417,29 @@ a, button, input, textarea, select, details, [ng-click], .vd-fast-tap {
   animation-fill-mode: forwards;
 }
 
+@keyframes vd-blink-highlight {
+  20%, 70% {
+    background-color: var(--vd-colour--go-highlight);
+  }
+}
+@keyframes vd-shake {
+  10%, 90% {
+    transform: translate3d(-1px, 0, 0);
+  }
+  20%, 80% {
+    transform: translate3d(2px, 0, 0);
+  }
+  30%, 50%, 70% {
+    transform: translate3d(-4px, 0, 0);
+  }
+  40%, 60% {
+    transform: translate3d(4px, 0, 0);
+  }
+}
+.vd-shake-highlight {
+  animation: vd-shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, vd-blink-highlight 1.2s;
+}
+
 #vd-viewport-identifier {
   position: absolute;
   z-index: -1;
@@ -4096,6 +4119,20 @@ vd-dott, .vd-dott {
   z-index: 410;
 }
 
+.vd-nav-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 25px;
+}
+.vd-nav-divider::before {
+  content: "";
+  display: block;
+  height: 1px;
+  width: 20px;
+  background-color: var(--vd-colour--keyline);
+}
+
 .vd-nav-item {
   box-sizing: border-box;
   height: 100%;
@@ -5064,6 +5101,10 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   margin-left: 0;
 }
 
+.vd-sidebar:empty {
+  display: none;
+}
+
 .vd-sidebar {
   display: flex;
   position: relative;
@@ -5072,29 +5113,116 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   box-sizing: border-box;
   font-family: lato, "Helvetica Neue", helvetica, roboto, arial, sans-serif;
   line-height: normal;
+  max-width: 240px;
+  transform: translateX(0);
+  transition: transform 0.2s ease-in-out;
+  z-index: 200;
+}
+.vd-sidebar .vd-sidebar-modal-close {
+  display: none;
+  top: 10px;
+  right: -60px;
+}
+.vd-sidebar .vd-sidebar-tabs {
+  height: auto;
+}
+.vd-sidebar .vd-sidebar-drawer {
+  height: auto;
+}
+@media print {
+  .vd-sidebar {
+    display: none;
+  }
+}
+@media only screen and (max-width: 1200px) {
+  .vd-sidebar {
+    z-index: 302;
+  }
+}
+
+.vd-sidebar-content {
+  background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 64px, var(--vd-colour--nav-side-drawer) 64px, var(--vd-colour--nav-side-drawer) 176px);
+  width: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100%;
+  display: flex;
+}
+
+.vd-sidebar--pad-drawer {
+  padding-right: 176px;
+}
+
+.nv-display-sidenav-modal .vd-sidebar {
+  z-index: 411;
+}
+.nv-display-sidenav-modal .vd-sidebar .vd-sidebar-modal-close {
+  display: flex;
+}
+
+@media only screen and (max-width: 1200px) {
+  .vd-sidebar {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    transform: translateX(calc(-100% - 1px));
+  }
+
+  .nv-display-sidenav-modal .vd-sidebar {
+    transform: translateX(0);
+  }
+
+  .vd-sidebar--pad-drawer {
+    padding-right: 0;
+  }
 }
+@media only screen and (min-width: 1201px) {
+  .vd-sidebar--no-drawer {
+    width: 64px;
+  }
 
+  .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-content {
+    position: absolute;
+  }
+  .nv-display-sidenav-modal .vd-sidebar--no-drawer .vd-sidebar-modal-close {
+    right: -236px;
+  }
+}
 .vd-sidebar-drawer {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
-  width: 145px;
+  width: 176px;
   height: 100%;
   background-color: var(--vd-colour--nav-side-drawer);
-  border-right: 1px solid var(--vd-colour--framing);
+  border-right: 1px solid var(--vd-colour--background);
   box-sizing: border-box;
+  padding-top: 15px;
+  padding-bottom: 15px;
 }
 .vd-sidebar-drawer .vd-nav-item {
   width: 100%;
   height: auto;
   color: var(--vd-colour--text);
-  font-weight: 700;
+  font-weight: 400;
 }
 .vd-sidebar-drawer .vd-nav-item:hover {
   background: var(--vd-colour--go-highlight);
 }
 .vd-sidebar-drawer .vd-nav-item-action {
-  padding: 20px 10px;
+  padding: 13px 22px;
+}
+.vd-sidebar-drawer .vd-nav-item--active {
+  position: relative;
+}
+.vd-sidebar-drawer .vd-nav-item--active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  background-color: var(--vd-colour--go);
 }
 .vd-sidebar-drawer .vd-nav-item--active .vd-nav-item-action {
   color: var(--vd-colour--go);
@@ -5110,7 +5238,7 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   background-color: inherit;
 }
 .vd-sidebar-drawer .vd-nav-item-label {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 .vd-sidebar-tabs {
@@ -5119,32 +5247,30 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
   flex-shrink: 0;
   z-index: 101;
   box-sizing: border-box;
-  width: 85px;
+  width: 64px;
   height: 100%;
   background-color: var(--vd-colour--nav-side-tabs);
-  font-size: 12px;
+  font-size: 15px;
   color: var(--vd-colour--text);
+  padding-top: 15px;
+  padding-bottom: 15px;
+  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+}
+.vd-sidebar-tabs.vd-sidebar-tabs--expanded {
+  width: 240px;
+}
+.vd-sidebar-tabs.vd-sidebar-tabs--expanded .vd-nav-item-action {
+  justify-content: start;
 }
 .vd-sidebar-tabs .vd-nav-item {
   flex-shrink: 0;
-  height: 75px;
-  width: 100%;
-}
-.vd-sidebar-tabs .vd-nav-item .vd-nav-item-icon.vd-nav-item-icon {
-  color: inherit;
+  height: 44px;
+  transition: width 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .vd-sidebar-tabs .vd-nav-item:hover {
   background: var(--vd-colour--background);
 }
-.vd-sidebar-tabs .vd-nav-item-action {
-  flex-direction: column;
-  justify-content: center;
-  position: relative;
-}
-.vd-sidebar-tabs .vd-nav-item--active {
-  color: var(--vd-colour--do);
-  background: var(--vd-colour--box);
-}
 .vd-sidebar-tabs .vd-nav-item--pending {
   background: var(--vd-colour--background);
 }
@@ -5155,71 +5281,109 @@ vd-section vd-section, vd-section .vd-section, .vd-section vd-section, .vd-secti
 .vd-sidebar-tabs .vd-nav-item--disabled:hover {
   background-color: inherit;
 }
-.vd-sidebar-tabs .vd-nav-item-label {
-  font-weight: 700;
+.vd-sidebar-tabs .vd-nav-item--active {
+  color: var(--vd-colour--do);
+  background: var(--vd-colour--box);
 }
-.vd-sidebar-tabs .vd-nav-item-icon {
-  font-size: 20px;
+.vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children {
+  position: relative;
 }
-.vd-sidebar-tabs .vd-nav-item--carnation .vd-nav-item-icon {
-  color: #f5765f;
+.vd-sidebar-tabs .vd-nav-item--active.vd-nav-item--no-children::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 4px;
+  background-color: var(--vd-colour--go);
 }
-.vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--carnation.vd-nav-item--pending {
-  border-color: #f5765f;
+.vd-sidebar-tabs .vd-nav-item-action {
+  flex-direction: row;
+  position: relative;
+  justify-content: start;
 }
-.vd-sidebar-tabs .vd-nav-item--ocean-green .vd-nav-item-icon {
-  color: #44b773;
+.vd-sidebar-tabs .vd-nav-item-label {
+  white-space: nowrap;
 }
-.vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--ocean-green.vd-nav-item--pending {
-  border-color: #44b773;
+.vd-sidebar-tabs .vd-nav-item-icon {
+  flex-shrink: 0;
+  text-align: center;
+  font-size: 20px;
+  min-width: 20px;
+  padding-left: 22px;
+  padding-right: 22px;
+  transition: padding-right 200ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.vd-sidebar-tabs .vd-nav-item--rajah .vd-nav-item-icon {
-  color: #f3c276;
+.vd-sidebar-tabs .vd-nav-divider {
+  padding-left: 22px;
+  justify-content: flex-start;
 }
-.vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rajah.vd-nav-item--pending {
-  border-color: #f3c276;
+
+/**
+  Temporary overrides for feature flag `sidebar_new`.
+
+  Those overrides bring back the old sidebar styles unless
+  the class `vd-sidebar--new` is set.
+
+  @REMOVEME: When flag `sidebar_new` is fully rolled out
+*/
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs {
+  width: 85px;
+  font-size: 12px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--shakespeare .vd-nav-item-icon {
-  color: #56bad6;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item {
+  width: 100%;
+  height: 75px;
 }
-.vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--shakespeare.vd-nav-item--pending {
-  border-color: #56bad6;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item--active::before {
+  content: none;
 }
-.vd-sidebar-tabs .vd-nav-item--downy .vd-nav-item-icon {
-  color: #70b8d3;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-action {
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
 }
-.vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--downy.vd-nav-item--pending {
-  border-color: #70b8d3;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon {
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--fern .vd-nav-item-icon {
-  color: #65b479;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-label {
+  font-size: 12px;
+  font-weight: 700;
 }
-.vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fern.vd-nav-item--pending {
-  border-color: #65b479;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-divider, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-sidebar-expander, .vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-tabs .vd-nav-item-icon--new {
+  display: none;
 }
-.vd-sidebar-tabs .vd-nav-item--fiord .vd-nav-item-icon {
-  color: #4b576e;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer {
+  width: 155px;
+  padding-top: 0;
+  padding-bottom: 0;
 }
-.vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--fiord.vd-nav-item--pending {
-  border-color: #4b576e;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item {
+  font-weight: 700;
 }
-.vd-sidebar-tabs .vd-nav-item--rob-roy .vd-nav-item-icon {
-  color: #ebc381;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item--active::before {
+  content: none;
 }
-.vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--rob-roy.vd-nav-item--pending {
-  border-color: #ebc381;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-action {
+  padding: 20px 10px;
 }
-.vd-sidebar-tabs .vd-nav-item--terracotta .vd-nav-item-icon {
-  color: #e57d66;
+.vd-sidebar:not(.vd-sidebar--new) .vd-sidebar-drawer .vd-nav-item-label {
+  font-size: 14px;
 }
-.vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--terracotta.vd-nav-item--pending {
-  border-color: #e57d66;
+
+.nv-topnav-container:not(.vd-sidebar--new) .vd-logo {
+  padding-left: 34px;
 }
-.vd-sidebar-tabs .vd-nav-item--wistera .vd-nav-item-icon {
-  color: #965fb0;
+
+.vd-sidebar.vd-sidebar--new .vd-sidebar-tabs .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
+  display: none;
 }
-.vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--active, .vd-sidebar-tabs .vd-nav-item--wistera.vd-nav-item--pending {
-  border-color: #965fb0;
+.vd-sidebar.vd-sidebar--new .vd-sidebar-expander, .vd-sidebar.vd-sidebar--new .vd-nav-item-icon--new {
+  display: block !important;
 }
 
 .vd-splash-fullscreen-container {
@@ -5815,7 +5979,7 @@ table {
 .vd-toast-notification {
   position: relative;
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: center;
   width: calc(100% - 20px);
   max-width: 680px;
@@ -5900,7 +6064,7 @@ table {
   height: 100%;
 }
 .vd-topbar .vd-logo {
-  padding-left: 34px;
+  padding-left: 23px;
 }
 
 @media only screen and (max-width: 480px) {
@@ -6750,6 +6914,7 @@ td.vd-hide-print {
 .nv-topnav {
   position: relative;
   width: 100%;
+  z-index: 1;
 }
 @media print {
   .nv-topnav {
@@ -6881,105 +7046,6 @@ td.vd-hide-print {
     display: none;
   }
 }
-.vd-sidebar:empty {
-  display: none;
-}
-
-.nv-sidenav {
-  transform: translateX(0);
-  transition: transform 0.2s ease-in-out;
-  display: block;
-  height: calc(100% - 50px);
-  z-index: 200;
-}
-.nv-sidenav .nv-sidenav-modal-close {
-  display: none;
-  top: 10px;
-  right: -60px;
-}
-.nv-sidenav .vd-sidebar-tabs {
-  box-shadow: none;
-  height: auto;
-}
-.nv-sidenav .vd-sidebar-drawer {
-  border-right: none;
-  height: auto;
-}
-@media print {
-  .nv-sidenav {
-    display: none;
-  }
-}
-@supports (height: min-content) {
-  .nv-sidenav .vd-sidebar-tabs,
-.nv-sidenav .vd-sidebar-drawer {
-    height: min-content;
-  }
-}
-@media only screen and (max-width: 1200px) {
-  .nv-sidenav {
-    z-index: 302;
-  }
-}
-
-.nv-sidenav-content {
-  background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
-  width: auto;
-  overflow-y: auto;
-  overflow-x: hidden;
-  height: 100%;
-  display: flex;
-  box-shadow: 1px 0 0 0 var(--vd-colour--framing);
-}
-
-.nv-sidenav--pad-drawer {
-  padding-right: 145px;
-}
-
-.nv-display-sidenav-modal .nv-sidenav {
-  z-index: 411;
-}
-.nv-display-sidenav-modal .nv-sidenav .nv-sidenav-modal-close {
-  display: flex;
-}
-
-@media only screen and (max-width: 1200px) {
-  .nv-sidenav {
-    position: absolute;
-    left: 0;
-    height: 100%;
-    transform: translateX(calc(-100% - 1px));
-  }
-  .nv-sidenav .nv-sidenav-content {
-    background: linear-gradient(to right, var(--vd-colour--nav-side-tabs) 0, var(--vd-colour--nav-side-tabs) 85px, var(--vd-colour--nav-side-drawer) 85px, var(--vd-colour--nav-side-drawer) 145px);
-  }
-  .nv-sidenav .vd-sidebar-tabs {
-    width: 85px;
-  }
-  .nv-sidenav .vd-sidebar-drawer {
-    width: 145px;
-  }
-
-  .nv-display-sidenav-modal .nv-sidenav {
-    transform: translateX(0);
-  }
-
-  .nv-sidenav--pad-drawer {
-    padding-right: 0;
-  }
-}
-@media only screen and (min-width: 1201px) {
-  .nv-sidenav--no-drawer {
-    width: 85px;
-  }
-
-  .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-content {
-    position: absolute;
-  }
-  .nv-display-sidenav-modal .nv-sidenav--no-drawer .nv-sidenav-modal-close {
-    right: -205px;
-  }
-}
 .nv-account-banner {
   display: block;
 }
@@ -7988,6 +8054,9 @@ td.vd-hide-print {
 .vd-table-list-row {
   border-bottom: 1px solid var(--vd-colour--framing);
 }
+.vd-table-list-row.vd-table-list-row--active {
+  background-color: var(--vd-colour--go-highlight);
+}
 
 .vd-table-list-row--expandable:hover {
   cursor: pointer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/design-system-css",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Lightspeed's Design System in CSS",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -17,12 +17,12 @@
     "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",
-    "build:watch": "yarn lint && yarn build:css --watch",
+    "watch": "yarn lint && yarn build:css --watch",
     "test": "true",
     "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
   },
   "dependencies": {
-    "@lightspeed/design-system-tokens": "1.0.0"
+    "@lightspeed/design-system-tokens": "^1.0.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.2",

package/src/vend-styles/components/TableList/TableList.scss

@@ -164,6 +164,9 @@
 // -----------------------------------------------------------------
 .vd-table-list-row {
   border-bottom: vd-border(framing);
+  &.vd-table-list-row--active {
+    background-color: vd-colour(go-highlight);
+  }
 }
 
 // TABLE ROWS - EXPANDABLE ROW

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

@@ -0,0 +1,14 @@
+.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-sidebar/tmp-overrides.scss

@@ -0,0 +1,92 @@
+/**
+  Temporary overrides for feature flag `sidebar_new`.
+
+  Those overrides bring back the old sidebar styles unless
+  the class `vd-sidebar--new` is set.
+
+  @REMOVEME: When flag `sidebar_new` is fully rolled out
+*/
+.vd-sidebar:not(.vd-sidebar--new) {
+  .vd-sidebar-tabs {
+    width: 85px;
+    font-size: 12px;
+
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .vd-nav-item {
+      width: 100%;
+      height: 75px;
+    }
+
+    .vd-nav-item--active {
+      &::before {
+        content: none;
+      }
+    }
+
+    .vd-nav-item-action {
+      flex-direction: column;
+      justify-content: center;
+      position: relative;
+    }
+
+    .vd-nav-item-icon {
+      width: auto;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .vd-nav-item-label {
+      font-size: 12px;
+      font-weight: $vd-font-weight--bold;
+    }
+
+    .vd-nav-divider, .vd-sidebar-expander, .vd-nav-item-icon--new {
+      display: none;
+    }
+  }
+
+  .vd-sidebar-drawer {
+    width: 155px;
+
+    padding-top: 0;
+    padding-bottom: 0;
+
+    .vd-nav-item {
+      font-weight: $vd-font-weight--bold;
+    }
+
+    .vd-nav-item--active {
+      &::before {
+        content: none;
+      }
+    }
+
+    .vd-nav-item-action {
+      padding: 20px 10px;
+    }
+
+    .vd-nav-item-label {
+      font-size: 14px;
+    }
+  }
+}
+
+.nv-topnav-container:not(.vd-sidebar--new) {
+  .vd-logo {
+    padding-left: 34px;
+  }
+}
+
+.vd-sidebar.vd-sidebar--new {
+  .vd-sidebar-tabs {
+    .vd-nav-item-icon:not(.vd-nav-item-icon--new) {
+      display: none;
+    }
+  }
+
+  .vd-sidebar-expander, .vd-nav-item-icon--new {
+    display: block !important;
+  }
+}

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

@@ -0,0 +1,23 @@
+$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);
+  }
+}