@lightspeed/design-system-css 0.2.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/design-system-css",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "description": "Lightspeed's Design System in CSS",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -13,20 +13,20 @@
     "dist"
   ],
   "scripts": {
-    "build": "rm -rf dist && yarn lint && yarn build:minimal && yarn build:retrocompatibility",
-    "build:themes": "yarn ts-node ./src/themes/themeToScss",
-    "build:minimal": "yarn tsc && node-sass -q src/index.scss -o dist/",
+    "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",
-    "build-watch": "yarn lint && yarn build:themes && node-sass -rw src/ -o dist/",
+    "build-watch": "yarn lint && sass -rw src/:dist/",
     "test": "true",
     "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
   },
   "dependencies": {
-    "react-datepicker": "^4.1.0"
+    "@lightspeed/design-system-tokens": "0.1.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.2",
-    "node-sass": "^4.9.3",
+    "sass": "~1.45.2",
     "stylelint": "^13.5.0",
     "stylelint-scss": "^3.17.2",
     "ts-node": "^10.3.1"

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import '../../../vend.ui/styles/global/non-styles';
 @import './DatePicker-ns';
 
@@ -42,11 +44,11 @@
 }
 
 .vd-datepicker-group-footer {
-  padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
+  padding: math.div($vd-datepicker-padding, 3) $vd-datepicker-padding;
 }
 
 .vd-datepicker-group-summary {
-  margin: ($vd-datepicker-padding / 3);
+  margin: math.div($vd-datepicker-padding, 3);
   margin-left: 0;
 }
 
@@ -138,7 +140,7 @@
   display: inline-block;
   text-align: center;
   width: $vd-datepicker-button-size;
-  padding-right: $vd-datepicker-day-spacing / 2;
+  padding-right: $vd-datepicker-day-spacing * 0.5;
   text-decoration: underline dotted;
   font-weight: $vd-font-weight--bold;
 }
@@ -159,7 +161,7 @@
 .react-datepicker__day {
   display: inline-block;
   font-size: $vd-datepicker-font-size;
-  padding-right: $vd-datepicker-day-spacing / 2;
+  padding-right: $vd-datepicker-day-spacing * 0.5;
   cursor: pointer;
 }
 

package/src/vend.ui/components/vd-autocomplete-filter/vd-autocomplete-filter.scss

@@ -26,13 +26,13 @@ $vd-autocomplete-filter-icon-margin: 14px;
     // right of the select in this component would need to be half that so it would look like it shares a border with
     // its neighbour.  For now this has no affect as the min measure is 1px. This goes for all of the following border
     // overrides
-    border-right: vd-border(framing, $vd-input-border-width / 2);
+    border-right: vd-border(framing, $vd-input-border-width * 0.5);
     transition: none;
   }
 
   .vd-lozenge-group {
     border-radius: $vd-autocomplete-filter-input-border-radius;
-    border-left: vd-border(framing, $vd-input-border-width / 2);
+    border-left: vd-border(framing, $vd-input-border-width * 0.5);
   }
 
   vd-autocomplete-multi { // stylelint-disable-line selector-type-no-unknown
@@ -48,7 +48,7 @@ $vd-autocomplete-filter-icon-margin: 14px;
 
 .vd-autocomplete-select-placeholder {
   @include vd-input-states();
-  border-right: vd-border(framing, $vd-input-border-width / 2);
+  border-right: vd-border(framing, $vd-input-border-width * 0.5);
   border-radius: $vd-autocomplete-filter-select-border-radius;
   padding: $vd-autocomplete-filter-select-padding;
   padding-left: $vd-autocomplete-filter-select-padding-left;

package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi-ns.scss

@@ -1,4 +1,4 @@
 $vd-avatar-multi-size: 76px;
 $vd-avatar-multi-size-gap: 4px;
-$vd-avatar-multi-tile-size: ($vd-avatar-multi-size / 2) - ($vd-avatar-multi-size-gap / 2);
+$vd-avatar-multi-tile-size: ($vd-avatar-multi-size * 0.5) - ($vd-avatar-multi-size-gap * 0.5);
 $vd-avatar-multi-tile-placeholder-size: 60px;

package/src/vend.ui/components/vd-avatar-multi/vd-avatar-multi.scss

@@ -64,7 +64,7 @@
 
   .vd-avatar-multi-tile {
     flex: 1 1 50%;
-    border: ($vd-avatar-multi-size-gap / 2) solid vd-colour(box);
+    border: ($vd-avatar-multi-size-gap * 0.5) solid vd-colour(box);
     border-radius: 5px;
   }
 }

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 .vd-datepicker-ui {
   display: block;
 }
@@ -80,11 +82,11 @@
 }
 
 .vd-datepicker-group-footer {
-  padding: ($vd-datepicker-padding / 3) $vd-datepicker-padding;
+  padding: math.div($vd-datepicker-padding, 3) $vd-datepicker-padding;
 }
 
 .vd-datepicker-group-summary {
-  margin: ($vd-datepicker-padding / 3);
+  margin: math.div($vd-datepicker-padding, 3);
   margin-left: 0;
 }
 
@@ -116,7 +118,7 @@
     }
 
     td {
-      padding-right: $vd-datepicker-table-spacing / 2;
+      padding-right: $vd-datepicker-table-spacing * 0.5;
 
       &:last-child {
         padding-right: 0;
@@ -124,7 +126,7 @@
     }
 
     th {
-      padding-right: $vd-datepicker-table-spacing / 2;
+      padding-right: $vd-datepicker-table-spacing * 0.5;
 
       &:last-child {
         padding-right: 0;

package/src/vend.ui/components/vd-dialog-close/vd-dialog-close.scss

@@ -61,8 +61,8 @@
   }
 
   @include vd-viewport-media-max ($vd-breakpoint-small) {
-    top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding / 2));
-    right: $vd-dialog-close-button-anchor-padding / 2;
+    top: -($vd-dialog-close-width + ($vd-dialog-close-button-anchor-padding * 0.5));
+    right: $vd-dialog-close-button-anchor-padding * 0.5;
   }
 }
 

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $vd-dott-diameter: 32px;
 $vd-dott-aperture-diameter: 12px;
 $vd-dot-border-width: 2px;
@@ -14,7 +16,7 @@ vd-dott, .vd-dott { // stylelint-disable-line selector-type-no-unknown
 .vd-dott-mask {
   stroke: $vd-colour-white;
   // Define stroke width as the difference between aperture diameter and full diameter, expressed as % of full diameter
-  stroke-width: ($vd-dott-diameter - $vd-dott-aperture-diameter) / $vd-dott-diameter * 100%;
+  stroke-width: math.div($vd-dott-diameter - $vd-dott-aperture-diameter, $vd-dott-diameter) * 100%;
 }
 
 .vd-dott-gradient-start {

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

@@ -2,25 +2,25 @@
 
 // Large gutter; @todo deprecate since it has inconsistent vertical spacing
 .vd-g-row--gutter-l {
-  margin: -($vd-grid-row-gutter-large / 2);
+  margin: -($vd-grid-row-gutter-large * 0.5);
   max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
 
   > .vd-g-col {
-    padding: $vd-grid-row-gutter-large / 2;
+    padding: $vd-grid-row-gutter-large * 0.5;
   }
 }
 
 .vd-g-row--gutter {
-  margin-left: -($vd-grid-row-gutter-large / 2);
-  margin-right: -($vd-grid-row-gutter-large / 2);
-  margin-bottom: -($vd-grid-row-gutter-large / 2);
+  margin-left: -($vd-grid-row-gutter-large * 0.5);
+  margin-right: -($vd-grid-row-gutter-large * 0.5);
+  margin-bottom: -($vd-grid-row-gutter-large * 0.5);
   max-width: $vd-section-wrap-max-width + $vd-grid-row-gutter-large;
 
   + .vd-g-row--gutter {
-    margin-top: ($vd-grid-row-gutter-large / 2);
+    margin-top: ($vd-grid-row-gutter-large * 0.5);
   }
 
   > .vd-g-col {
-    padding: 0 ($vd-grid-row-gutter-large / 2) ($vd-grid-row-gutter-large / 2);
+    padding: 0 ($vd-grid-row-gutter-large * 0.5) ($vd-grid-row-gutter-large * 0.5);
   }
 }

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

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 $vd-input-padding: vd-grid-unit(3) !default;
 $vd-input-icon-padding: 35px;
 $vd-input-icon-position-h: vd-grid-unit(3);
@@ -9,7 +11,7 @@ $vd-input-message-margin: 8px;
 // requested number of lines. Specify the exact pixel value to ensure there is not rounding issues between browsers.
 $vd-textarea-leading: 20;
 $vd-textarea-unitless-font-size: map-deep-get($_vd-text-definitions, body, size);
-$vd-textarea-unitless-line-height: to-fixed(($vd-textarea-leading / $vd-textarea-unitless-font-size), $digits: 5);
+$vd-textarea-unitless-line-height: to-fixed(math.div($vd-textarea-leading, $vd-textarea-unitless-font-size), $digits: 5);
 $vd-textarea-line-height: vd-px-unit($vd-textarea-unitless-font-size * $vd-textarea-unitless-line-height);
 
 @mixin vd-input-text() {

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

@@ -9,7 +9,7 @@
   font-size: vd-text-size(supplementary);
 
   .vd-input-error-message-text {
-    margin-left: $vd-input-message-margin / 2;
+    margin-left: $vd-input-message-margin * 0.5;
   }
 }
 

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

@@ -38,10 +38,10 @@ $vd-i-bg-margin: vd-grid-unit(2);
   top: 50%;
   right: $vd-i-bg-margin;
   z-index: 0;
-  margin-top: -(($vd-loader-m / 2) + $vd-loader-border);
+  margin-top: -(($vd-loader-m * 0.5) + $vd-loader-border);
 
   &.vd-loader--small {
-    margin-top: -(($vd-loader-s / 2) + $vd-loader-border);
+    margin-top: -(($vd-loader-s * 0.5) + $vd-loader-border);
   }
 }
 

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

@@ -8,8 +8,8 @@
   .vd-popover-beak {
     #{$edge}: 0;
     #{$direction}: $offset;
-    margin-#{$edge}: -$vd-popover-beak-size / 2;
-    margin-#{$direction}: -$vd-popover-beak-size / 2;
+    margin-#{$edge}: -$vd-popover-beak-size * 0.5;
+    margin-#{$direction}: -$vd-popover-beak-size * 0.5;
     border-#{$next-edge}-color: transparent;
     border-#{$opposite-edge}-color: transparent;
     box-shadow: $box-shadow;

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

@@ -19,7 +19,7 @@
   position: absolute;
   height: $vd-scrollable-indicator-height;
   width: $vd-scrollable-indicator-width;
-  margin: 0 (-$vd-scrollable-indicator-width / 2);
+  margin: 0 (-$vd-scrollable-indicator-width * 0.5);
   left: 50%;
   z-index: $vd-z-index-content-base;
   user-select: none;

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

@@ -1,5 +1,5 @@
 .vd-section-back {
-  border-radius: $vd-section-back-height / 2;
+  border-radius: $vd-section-back-height * 0.5;
   background-color: transparent;
   cursor: pointer;
   position: absolute;

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

@@ -213,13 +213,6 @@ table { border-collapse: collapse; }
     padding: vd-grid-unit(4);
   }
 
-  // Report table with expandable content
-  &.vd-table--expandable > tbody > tr {
-    &:nth-child(4n+3) {
-      background-color: vd-colour(box);
-    }
-  }
-
   &.vd-table--report--nested {
     &.vd-table {
       margin-bottom: 0;

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification-ns.scss

@@ -1,3 +1,5 @@
 $vd-toast-notification-padding-v: vd-grid-unit(6);
-$vd-toast-notification-padding-h: vd-grid-unit(10);
+$vd-toast-notification-padding-r: vd-grid-unit(19);
+$vd-toast-notification-padding-l: vd-grid-unit(10);
+$vd-toast-notification-dismiss-padding: vd-grid-unit(8);
 $vd-toast-notification-offset: vd-grid-unit(5);

package/src/vend.ui/components/vd-toast-notification/vd-toast-notification.scss

@@ -15,7 +15,7 @@
   pointer-events: none;
 
   &.vd-visible {
-    transform: translateY($vd-toast-notification-offset / 2);
+    transform: translateY($vd-toast-notification-offset * 0.5);
     opacity: 1;
   }
 }
@@ -24,18 +24,19 @@
   position: relative;
 
   display: flex;
-  align-items: center;
+  align-items: start;
   justify-content: center;
 
   width: calc(100% - #{$vd-toast-notification-offset});
   max-width: vd-grid-unit(170);
   margin: 0 auto;
-  padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-h;
+  padding: $vd-toast-notification-padding-v $vd-toast-notification-padding-r $vd-toast-notification-padding-v $vd-toast-notification-padding-l;
 
   border-radius: $vd-border-radius;
   box-sizing: border-box;
   color: vd-colour(text-action);
   text-align: center;
+  font-weight: $vd-font-weight--bold;
 
   transition: opacity ease-in-out $vd-time-m;
   pointer-events: auto;
@@ -45,7 +46,7 @@
   position: absolute;
   right: 0;
   top: 0;
-  width: $vd-toast-notification-padding-h;
+  padding: 0 $vd-toast-notification-dismiss-padding;
   height: 100%;
   display: flex;
   align-items: center;

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

@@ -10,7 +10,7 @@
   background-color: $vd-topbar-background-color;
 
   font-family: $vd-font-primary;
-  font-size: $vd-topbar-font-size;
+  font-size: 15px;
   line-height: normal;
   color: $vd-topbar-font-color;
 
@@ -20,7 +20,7 @@
 
     &:hover {
       opacity: 1;
-    }
+    }  
   }
 
   .vd-nav-item-icon + .vd-nav-item-label {
@@ -33,4 +33,13 @@
     text-overflow: ellipsis;
     overflow: hidden;
   }
+
+  .vd-logo-container {
+    display: flex;
+    height: 100%;
+  }
+
+  .vd-logo {
+    padding-left: 34px;
+  }
 }

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

@@ -1,6 +1,8 @@
 // =================================== Responsive Grid =================================== //
 
 // Grid Settings
+@use "sass:math";
+
 $vd-grid-columns: 12 !default;
 $vd-grid-block-max: 8 !default;
 
@@ -15,7 +17,7 @@ $vd-grid-row-gutter-large: 24px;
 //
 @mixin vd-grid-columns ($breakpoint) {
   @for $i from 1 through $vd-grid-columns {
-    $_vd-column-width: percentage($i / $vd-grid-columns);
+    $_vd-column-width: percentage(math.div($i, $vd-grid-columns));
 
     .vd-g-#{$breakpoint}-#{$i} {
       flex: 0 0 $_vd-column-width;
@@ -37,7 +39,7 @@ $vd-grid-row-gutter-large: 24px;
       flex-wrap: wrap;
 
       > .vd-g-col {
-        $_vd-block-column-width: percentage(1 / $i);
+        $_vd-block-column-width: percentage(math.div(1, $i));
 
         flex: 0 0 $_vd-block-column-width;
         max-width: $_vd-block-column-width;

package/src/vend.ui/styles/global/colour/_colour-functions.scss

@@ -8,7 +8,7 @@
   @if ($_vd-colour-theme != _no_arg_provided_) {
     @warn "[colour-functions] Passing a theme as a second argument to vd-colour is deprecated. You should remove it.";
   }
-  @if (index($vd-theme-available-keys, $_vd-colour-element) != null) {
+  @if (index($helios-theme-available-keys, $_vd-colour-element) != null) {
     @return var(--vd-colour--#{$_vd-colour-element});
   } @else {
     @error "[colour-functions] The specified element (#{$_vd-colour-element}) does not exist.";
@@ -28,7 +28,11 @@
 /// @param {String} $_vd-secondary-element - The vd colour element; e.g. `box`.
 /// @return {Colour<String>} - The highlighted colour
 @function vd-colour-highlight($_vd-primary-element, $_vd-secondary-element) {
-  @return mix(vd-colour($_vd-primary-element), vd-colour($_vd-secondary-element), 10);
+  @return mix(
+    vd-colour($_vd-primary-element),
+    vd-colour($_vd-secondary-element),
+    10
+  );
 }
 
 /// Generating a solid border for permitted border types (currently either keyline or framing)
@@ -37,7 +41,11 @@
 /// @param {String} $_vd-border-type - The border type, either keyline or framing
 /// @param {Unit} [$_vd-border-width=1px] - The width of the border
 /// @param {String} [$_vd-border-style=solid] - The style of the border
-@function vd-border($_vd-border-type, $_vd-border-width: 1px, $_vd-border-style: solid) {
+@function vd-border(
+  $_vd-border-type,
+  $_vd-border-width: 1px,
+  $_vd-border-style: solid
+) {
   @if (null != index($vd-border-types, $_vd-border-type)) {
     @return $_vd-border-width $_vd-border-style vd-colour($_vd-border-type);
   } @else {
@@ -50,7 +58,7 @@
 /// @function vd-hex-to-rgb
 /// @return {String} The RGB values
 @function vd-hex-to-rgb($hexColour) {
-  @return red($hexColour),green($hexColour),blue($hexColour);
+  @return red($hexColour), green($hexColour), blue($hexColour);
 }
 
 /// Ensures that the browsers RGBA colour function is used. This means we can use string values (which is not allowed
@@ -59,7 +67,7 @@
 /// @function vd-rgba
 /// @return {String} RGBA value
 @function vd-rgba($string, $opacity) {
-  @return #{"rgba(#{$string}, #{$opacity})"};
+  @return #{'rgba(#{$string}, #{$opacity})'};
 }
 
 /// Encodes a hex value.
@@ -67,10 +75,10 @@
 /// @function vd-encode-colour
 /// @return {String} The encoded hex value.
 @function vd-encode-colour($string) {
-	@if type-of($string) == 'color' {
+  @if type-of($string) == 'color' {
     $hex: str-slice(ie-hex-str($string), 4);
-    $string:unquote("#{$hex}");
+    $string: unquote('#{$hex}');
   }
   $string: '%23' + $string;
-	@return $string;
+  @return $string;
 }

package/src/vend.ui/styles/global/colour/themes/_colour-themes.scss

@@ -1,11 +1,12 @@
-@import './theme-keys';
-@import './xseries/theme-dark';
-@import './xseries/theme-light';
+@import '@lightspeed/design-system-tokens/scss/theme-keys';
+@import '@lightspeed/design-system-tokens/scss/theme-dark';
+@import '@lightspeed/design-system-tokens/scss/theme-light';
+
 @import './theme-functions';
 
 $vd-colour-themes: (
-  xseries-dark: vd-add-theme($vd-xseries-theme-dark),
-  xseries-light: vd-add-theme($vd-xseries-theme-light)
+  dark: vd-add-theme($helios-theme-dark),
+  light: vd-add-theme($helios-theme-light),
 );
 
 // Only generate dark mode css variables for apps that request it

package/src/vend.ui/styles/global/colour/themes/_theme-functions.scss

@@ -6,7 +6,7 @@
 @function vd-add-theme($theme) {
   $_vend-theme: ();
 
-  @each $key in ($vd-theme-required-base-keys) {
+  @each $key in ($helios-theme-required-base-keys) {
     @if (map-has-key($theme, $key) == false) {
       @error '[colour-themes] Missing required theme property "#{$key}"';
     }
@@ -19,27 +19,31 @@
     }
 
     // Some swatches require rgb values
-    @if (index($vd-theme-available-rgb-keys, $key) != null) {
+    @if (index($helios-theme-available-rgb-keys, $key) != null) {
       // Add original HEX values and generated RGB value to theme
       $combined: (
         $key: $value,
-        #{$key}-rgb: vd-hex-to-rgb($value)
+        #{$key}-rgb: vd-hex-to-rgb($value),
       );
       $_vend-theme: map-merge($_vend-theme, $combined);
     } @else {
       // RGB value not required, just append the original value
-      $_vend-theme: map-merge($_vend-theme, ($key: $value));
+      $_vend-theme: map-merge(
+        $_vend-theme,
+        (
+          $key: $value,
+        )
+      );
     }
   }
 
   @return $_vend-theme;
 }
 
-
 @mixin vd-generate-themes() {
   :root {
     color-scheme: light;
-    @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-light));
+    @include vd-generate-theme-values(map-get($vd-colour-themes, light));
   }
 
   // Dark themes
@@ -47,7 +51,7 @@
     @media (prefers-color-scheme: dark) {
       :root {
         color-scheme: dark;
-        @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
+        @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
       }
     }
   } @else {
@@ -55,7 +59,7 @@
     @media (prefers-color-scheme: dark) {
       .vd-theme--dark {
         color-scheme: dark;
-        @include vd-generate-theme-values(map-get($vd-colour-themes, xseries-dark));
+        @include vd-generate-theme-values(map-get($vd-colour-themes, dark));
       }
     }
   }

package/src/vend.ui/styles/global/text/_text-mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import "text-definitions";
 
 @mixin font-smoothing {
@@ -18,7 +20,7 @@
 // Line Heights - Determine a proportionate line height calculated from a design based 'leading' value and the
 // required font size.
 @mixin vd-line-height ($leading, $font-size) {
-  line-height: ($leading / $font-size)
+  line-height: math.div($leading, $font-size)
 }
 
 // Intro
@@ -82,7 +84,7 @@
       }
 
       @else if ($property == 'tracking') {
-        letter-spacing: $value / 10 * 1em;
+        letter-spacing: $value * 0.1 * 1em;
       }
 
       @else if ($property == 'size') {

package/src/vend.ui/styles/global/utils/_functions.scss

@@ -3,6 +3,8 @@
 /// @function vd-px-unit
 /// @param {Number} $_value - Number to add 'px'
 /// @return {Number} - Number with px unit
+@use "sass:math";
+
 @function vd-px-unit ($_value) {
   @return $_value * 1px;
 }
@@ -13,7 +15,7 @@
 /// @return {Number} - Unitless number
 @function strip-unit($number) {
   @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / ($number * 0 + 1);
+    @return math.div($number, $number * 0 + 1);
   }
 
   @return $number;
@@ -29,7 +31,7 @@
   $sass-precision: 5;
 
   $pow: pow(10, $digits);
-  @return round($float * $pow) / $pow;
+  @return math.div(round($float * $pow), $pow);
 }
 
 /// Power function
@@ -47,7 +49,7 @@
     }
   } @else {
     @for $i from $n to 0 {
-      $ret: $ret / $x;
+      $ret: math.div($ret, $x);
     }
   }
 

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

@@ -46,7 +46,7 @@
     display: block;
 
     position: absolute;
-    top: $nv-notifications-list-spacing / 2;
+    top: $nv-notifications-list-spacing * 0.5;
     left: -$nv-notifications-list-spacing;
 
     .nv-notifications-list-item--read & {

package/dist/themes/index.d.ts

@@ -1,2 +0,0 @@
-export { xSeriesDarkTheme, xSeriesDarkThemeByCategory } from './xseries/dark';
-export { xSeriesLightTheme, xSeriesLightThemeByCategory } from './xseries/light';

package/dist/themes/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var dark_1 = require("./xseries/dark");
-exports.xSeriesDarkTheme = dark_1.xSeriesDarkTheme;
-exports.xSeriesDarkThemeByCategory = dark_1.xSeriesDarkThemeByCategory;
-var light_1 = require("./xseries/light");
-exports.xSeriesLightTheme = light_1.xSeriesLightTheme;
-exports.xSeriesLightThemeByCategory = light_1.xSeriesLightThemeByCategory;
-//# sourceMappingURL=index.js.map

package/dist/themes/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/themes/index.ts"],"names":[],"mappings":";;AAAA,uCAA6E;AAApE,kCAAA,gBAAgB,CAAA;AAAE,4CAAA,0BAA0B,CAAA;AACrD,yCAAgF;AAAvE,oCAAA,iBAAiB,CAAA;AAAE,8CAAA,2BAA2B,CAAA"}

package/dist/themes/themeToScss.d.ts

@@ -1,2 +0,0 @@
-import { ThemeConfig } from './types';
-export declare const themeToScss: ({ theme, mapName, filename }: ThemeConfig) => void;