@ilo-org/styles 1.2.2 → 1.2.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -43,10 +43,10 @@
     "@ilo-org/themes": "0.9.1"
   },
   "devDependencies": {
+    "cssnano": "^7.0.6",
     "del": "^7.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
-    "gulp-cssnano": "^2.1.3",
     "gulp-postcss": "^9.0.1",
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
@@ -59,7 +59,7 @@
     "build:docs": "pnpm build",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
-    "lint": "eslint --ext .js,.ts,.tsx",
-    "lint:fix": "eslint --ext .js,.ts,.tsx --fix"
+    "lint": "eslint",
+    "lint:fix": "eslint --fix"
   }
 }

package/scss/_normalize.scss

@@ -1,3 +1,8 @@
+/**
+* In order to have consistent reset first we normalize the styles for all browsers using normalize.css
+* This allows us to have a consistent base to build upon
+**/
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Sections

package/scss/_reset.scss

@@ -1,3 +1,9 @@
+/**
+* This file is an opinionated reset that is based on https://nicolas-cusan.github.io/destyle.css/
+* it aims to provide a clean layer for styling, the reset should be used with normalize.css in order to create
+* a normalized base
+**/
+
 *,
 ::before,
 ::after {

package/scss/components/_button.scss

@@ -236,14 +236,16 @@
   &:focus {
     background-color: var(--ilo-color-background-focus);
     border: var(--ilo-border-md) var(--ilo-color-borders-focus) solid;
-    box-shadow: 4px 4px 0 1px var(--ilo-color-borders-focus) inset,
+    box-shadow:
+      4px 4px 0 1px var(--ilo-color-borders-focus) inset,
       -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
     color: var(--ilo-button-labels-focus-color);
     outline: none;
     @include globaltransition("color, background-color, border-color");
 
     &.#{$prefix}--small {
-      box-shadow: 3px 3px 0 1px var(--ilo-color-borders-focus) inset,
+      box-shadow:
+        3px 3px 0 1px var(--ilo-color-borders-focus) inset,
         -3px -3px 0 1px var(--ilo-color-borders-focus) inset;
     }
   }

package/scss/components/_dropdown.scss

@@ -28,9 +28,13 @@
   white-space: nowrap;
   width: calc(100% - 78px);
 
-  background-position: calc(100% - 14px) center, 100% center;
+  background-position:
+    calc(100% - 14px) center,
+    100% center;
   background-repeat: no-repeat;
-  background-size: 24px 24px, 102px 100%;
+  background-size:
+    24px 24px,
+    102px 100%;
   background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
     linear-gradient(
       to right,
@@ -94,9 +98,13 @@
   }
 
   &:active {
-    background-position: calc(100% - 14px) center, 100% center;
+    background-position:
+      calc(100% - 14px) center,
+      100% center;
     background-repeat: no-repeat;
-    background-size: 24px 24px, 102px 100%;
+    background-size:
+      24px 24px,
+      102px 100%;
     background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
       linear-gradient(
         to right,
@@ -129,7 +137,9 @@
   }
   [dir="rtl"] & {
     padding: 0 spacing(4) 0 spacing(14);
-    background-position: calc(0% + 14px) center, 0% center;
+    background-position:
+      calc(0% + 14px) center,
+      0% center;
     background-image: url("#{colortodataurlicon('arrow', $color-ux-labels-actionable)}"),
       linear-gradient(
         to left,

package/scss/components/_formcontrol.scss

@@ -185,6 +185,6 @@
   }
 
   .ilo--tooltip--wrapper {
-    bottom: calc(#{spacing(1)}, 2);
+    bottom: calc(#{spacing(1)} / 2);
   }
 }

package/scss/components/_navigation.scss

@@ -225,7 +225,9 @@
     position: absolute;
     top: 0;
     transform: translateX(100%);
-    transition: transform 225ms ease-out, visibility 225ms 0ms;
+    transition:
+      transform 225ms ease-out,
+      visibility 225ms 0ms;
     width: 100%;
     visibility: hidden;
 
@@ -317,7 +319,9 @@
     display: block;
     padding: spacing(4) spacing(9) spacing(4) spacing(2);
     text-decoration: none;
-    transition: color 150ms ease-out, background 150ms ease-out;
+    transition:
+      color 150ms ease-out,
+      background 150ms ease-out;
 
     &:hover,
     &:focus {

package/scss/components/_notification.scss

@@ -5,8 +5,10 @@
 
 .ilo--notification {
   background-color: $color-ux-notification-background;
-  box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
-    0px 4px 8px rgba(30, 45, 190, 0.054), 0px 10px 20px rgba(30, 45, 190, 0.08),
+  box-shadow:
+    0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
+    0px 4px 8px rgba(30, 45, 190, 0.054),
+    0px 10px 20px rgba(30, 45, 190, 0.08),
     0px -4px 16px rgba(30, 45, 190, 0.054);
   border-radius: 2px;
   color: $color-ux-notification-text;

package/scss/components/_table.scss

@@ -27,7 +27,8 @@
 
   &--head {
     background-color: $color-ux-table-content-background;
-    box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
+    box-shadow:
+      0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
       0px 10px 20px rgba(30, 45, 190, 0.08),
       0px -4px 16px rgba(30, 45, 190, 0.054);