@lightspeed/design-system-css 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightspeed/design-system-css",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Lightspeed's Design System in CSS",
   "author": "Lightspeed Commerce Inc.",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -15,9 +15,9 @@
   "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/",
+    "build:minimal": "yarn tsc && sass -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 && yarn build:themes && sass -rw src/:dist/",
     "test": "true",
     "lint": "yarn stylelint './src/**/*.scss' --config ./stylelint.config.json"
   },
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@types/node": "^16.11.2",
-    "node-sass": "^4.9.3",
+    "sass": "~1.32.0",
     "stylelint": "^13.5.0",
     "stylelint-scss": "^3.17.2",
     "ts-node": "^10.3.1"

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

@@ -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;