@lightspeed/design-system-css 1.2.0 → 2.0.0

package/src/vend.ui/styles/global/viewport/_viewport-media-mixins.scss

@@ -23,14 +23,14 @@
 ///     background-color: #FACADE;
 ///   }
 ///
-@mixin vd-viewport-media-only ($_viewport) {
+@mixin vd-viewport-media-only($_viewport) {
   $_viewport-min-width: null;
   $_viewport-max-width: null;
 
   @if (type-of($_viewport) == 'string') {
     // Known viewport range provided, e.g. xsmall
-    $_viewport-min-width: get-viewport-px-width($_viewport, "min");
-    $_viewport-max-width: get-viewport-px-width($_viewport, "max");
+    $_viewport-min-width: get-viewport-px-width($_viewport, 'min');
+    $_viewport-max-width: get-viewport-px-width($_viewport, 'max');
   } @else if (type-of($_viewport) == 'map') {
     // Custom min and max range values provided
     @if (map-has-key($_viewport, 'min') and map-has-key($_viewport, 'max')) {
@@ -48,11 +48,11 @@
 
       // Determine if a named viewport has been provided for the min and max widths
       @if (type-of($_custom-min) == 'string') {
-        $_custom-min: get-viewport-px-width($_custom-min, "min");
+        $_custom-min: get-viewport-px-width($_custom-min, 'min');
       }
 
       @if (type-of($_custom-max) == 'string') {
-        $_custom-max: get-viewport-px-width($_custom-max, "max");
+        $_custom-max: get-viewport-px-width($_custom-max, 'max');
       }
 
       $_viewport-min-width: $_custom-min;
@@ -62,14 +62,14 @@
     }
   }
 
-  $_viewport-media-range: "(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})";
+  $_viewport-media-range: '(min-width: #{$_viewport-min-width}) and (max-width: #{$_viewport-max-width})';
 
   @if ($_viewport-min-width == null) {
-    $_viewport-media-range: "(max-width: #{$_viewport-max-width})";
+    $_viewport-media-range: '(max-width: #{$_viewport-max-width})';
   }
 
   @if ($_viewport-max-width == null) {
-    $_viewport-media-range: "(min-width: #{$_viewport-min-width})";
+    $_viewport-media-range: '(min-width: #{$_viewport-min-width})';
   }
 
   @media #{$vd-viewport-screen} and #{$_viewport-media-range} {
@@ -94,12 +94,12 @@
 ///     background-color: #C0FFEE;
 ///   }
 ///
-@mixin vd-viewport-media-min ($_viewport-range-min) {
+@mixin vd-viewport-media-min($_viewport-range-min) {
   $_media-min-width: null;
   $_viewport-media-range: null;
 
   @if (type-of($_viewport-range-min) == 'string') {
-    $_media-min-width: get-viewport-px-width($_viewport-range-min, "min");
+    $_media-min-width: get-viewport-px-width($_viewport-range-min, 'min');
     @if ($_media-min-width == null) {
       @error '[vd-viewport-media-min] Specified viewport range does not have a min range value. Use vd-viewport-media-max instead.';
     }
@@ -113,8 +113,8 @@
 
   @media #{$vd-viewport-screen} and
     (min-width: $_media-min-width) {
-      @content;
-    }
+    @content;
+  }
 }
 
 /// Descending content control.
@@ -133,12 +133,12 @@
 ///   @include vd-viewport-media-max (250px) {
 ///     background-color: #C0FFEE;
 ///   }
-@mixin vd-viewport-media-max ($_viewport-range-max) {
+@mixin vd-viewport-media-max($_viewport-range-max) {
   $_media-max-width: null;
   $_viewport-media-range: null;
 
   @if (type-of($_viewport-range-max) == 'string') {
-    $_media-max-width: get-viewport-px-width($_viewport-range-max, "max");
+    $_media-max-width: get-viewport-px-width($_viewport-range-max, 'max');
     @if ($_media-max-width == null) {
       @error '[vd-viewport-media-max] Specified viewport range does not have a max range value. Use vd-viewport-media-min instead.';
     }
@@ -152,6 +152,6 @@
 
   @media #{$vd-viewport-screen} and
     (max-width: $_media-max-width) {
-      @content;
-    }
+    @content;
+  }
 }

package/src/vend.ui/styles/global/viewport/_viewport-ranges.scss

@@ -1,15 +1,15 @@
 // Viewport Screen
-$vd-viewport-screen: "only screen";
+$vd-viewport-screen: 'only screen';
 
 // Viewport Breakpoints - @todo Remove these !defaults.
-$vd-breakpoint-xsmall:       get-viewport-px-width('xsmall', 'max') !default;
-$vd-breakpoint-small-min:    get-viewport-px-width('small', 'min') !default;
-$vd-breakpoint-small:        get-viewport-px-width('small', 'max') !default;
-$vd-breakpoint-medium-min:   get-viewport-px-width('medium', 'min') !default;
-$vd-breakpoint-medium:       get-viewport-px-width('medium', 'max') !default;
-$vd-breakpoint-large-min:    get-viewport-px-width('large', 'min') !default;
-$vd-breakpoint-large:        get-viewport-px-width('large', 'max') !default;
-$vd-breakpoint-xlarge-min:   get-viewport-px-width('xlarge', 'min') !default;
+$vd-breakpoint-xsmall: get-viewport-px-width('xsmall', 'max') !default;
+$vd-breakpoint-small-min: get-viewport-px-width('small', 'min') !default;
+$vd-breakpoint-small: get-viewport-px-width('small', 'max') !default;
+$vd-breakpoint-medium-min: get-viewport-px-width('medium', 'min') !default;
+$vd-breakpoint-medium: get-viewport-px-width('medium', 'max') !default;
+$vd-breakpoint-large-min: get-viewport-px-width('large', 'min') !default;
+$vd-breakpoint-large: get-viewport-px-width('large', 'max') !default;
+$vd-breakpoint-xlarge-min: get-viewport-px-width('xlarge', 'min') !default;
 
 // Viewport Identifier
 $vd-viewport-identifier-map: map-get($vd-viewport, 'identifier');

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

@@ -13,7 +13,7 @@
 
 // ========= Responsive Breakpoint Styles ========= //
 
-@include vd-viewport-media-max ($vd-breakpoint-medium) {
+@include vd-viewport-media-max($vd-breakpoint-medium) {
   .nv-topnav-title-shorthand {
     display: inline;
   }

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

@@ -20,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;
   }
 }
@@ -29,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;
     }
@@ -76,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;
   }
 }
@@ -93,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,11 +1,11 @@
 // Modules
-@import "nv-topnav";
-@import "nv-topnav-title";
-@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/CHANGELOG.md

@@ -1,192 +0,0 @@
-# @lightspeed/design-system-css
-
-## 1.2.0
-
-### Minor Changes
-
-- [#4901](https://github.com/vend/monocle/pull/4901) [`86a6a576a`](https://github.com/vend/monocle/commit/86a6a576a63c1a82dd3710004bb962dd520b82cd) Thanks [@rothlis](https://github.com/rothlis)! - Add new sidebar styles under feature flag
-
-## 1.1.2
-
-### Patch Changes
-
-- [#4635](https://github.com/vend/monocle/pull/4635) [`de5cd5a28`](https://github.com/vend/monocle/commit/de5cd5a286e507412c816c5c146a9d6c56862c07) Thanks [@aarr0n](https://github.com/aarr0n)! - Setting a zindex on the `topnav` so that it isn't obscured when the Transifex loader is shown.
-
-## 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