*chore bump css and scss deps

package.json

@@ -15,7 +15,7 @@
  "@typescript-eslint/parser": "^5.7.0",
  "babel-jest": "^29.7.0",
  "chromatic": "^6.2.3",
- "css-loader": "^6.5.1",
+ "css-loader": "^6.11.0",
  "doctoc": "^2.1.0",
  "eslint": "^8.5.0",
  "eslint-config-prettier": "^8.8.0",
@@ -31,10 +31,10 @@
  "patch-package": "^6.5.1",
  "prettier": "^2.8.8",
  "regenerator-runtime": "^0.13.11",
- "sass": "^1.58.3",
- "sass-loader": "^13.2.0",
+ "sass": "^1.79.4",
+ "sass-loader": "^16.0.2",
  "shx": "^0.3.3",
- "style-loader": "^3.3.1",
+ "style-loader": "^4.0.0",
  "typescript": "^4.8.4"
  },
  "scripts": {

packages/icons/package.json

@@ -52,6 +52,6 @@
  "loki": "^0.31.1",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
- "webpack": "^5.81.0"
+ "webpack": "^5.95.0"
  }
 }

packages/ui/.postcss-lint/postcss.config.js → packages/ui/.postcss-lint/postcss.config.mjs

@@ -1,5 +1,6 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-const doiuse = require('doiuse')
+import doiuse from 'doiuse'
+import stylelint from 'stylelint'
+import postcssReporter from 'postcss-reporter'
 
 const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Safari version', 'last 1 Edge version']
 
@@ -10,25 +11,25 @@ const browsers = ['last 2 Chrome version', 'last 2 Firefox version', 'last 1 Saf
  * Postcss-cli does not allow config argument override, what it does
  * allow is specifying an alternate config path, hence this location
  */
-module.exports = {
+export default {
  syntax: 'postcss-scss',
  plugins: [
- // eslint-disable-next-line
- require('stylelint'),
+ stylelint,
  doiuse({
  browsers,
- //These problems are taken case of by 'autoprefixer'
  ignore: [
  // Autoprefixer takes care of flex
  'flexbox',
  // The problem is "outline-offset", which doiuse can't detect
  'outline',
  // The problem is "vmax", which doiuse can' detect
  'viewport-units',
+ // Rules are not compatible with scss
+ 'css-nesting',
+ 'css-when-else',
  ],
- ignoreFiles: ['**/node_modules/**/*.css', '**/node_modules/**/*.scss', '**/coverage/**/*', '**/lib/**/*'],
+ ignoreFiles: ['**/lib/**', '**/storybook-static/**', '**/node_modules/**/*.css', '**/node_modules/**/*.scss'],
  }),
- // eslint-disable-next-line
- require('postcss-reporter')({ throwError: true }),
+ postcssReporter({ throwError: true }),
  ],
 }

packages/ui/.stylelintignore

@@ -1,3 +1,4 @@
 node_modules/
 coverage
-lib
+lib
+storybook-static

packages/ui/package.json

@@ -96,23 +96,23 @@
  "@types/use-persisted-state": "^0.3.4",
  "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
  "babel-loader": "^9.1.2",
- "doiuse": "^4.4.1",
+ "doiuse": "^6.0.3",
  "enzyme": "^3.11.0",
  "jest-axe": "^8.0.0",
- "loki": "^0.34.0",
- "postcss": "^8.4.23",
- "postcss-cli": "^9.1.0",
- "postcss-reporter": "^7.0.5",
- "postcss-scss": "^4.0.6",
+ "loki": "^0.35.1",
+ "postcss": "^8.4.47",
+ "postcss-cli": "^11.0.0",
+ "postcss-reporter": "^7.1.0",
+ "postcss-scss": "^4.0.9",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "storybook-addon-designs": "^6.3.1",
- "stylelint": "^15.6.0",
- "stylelint-config-standard": "^33.0.0",
- "stylelint-config-standard-scss": "^9.0.0",
- "stylelint-prettier": "^3.0.0",
- "stylelint-scss": "^4.6.0",
- "webpack": "^5.81.0",
+ "stylelint": "^16.9.0",
+ "stylelint-config-standard": "^36.0.1",
+ "stylelint-config-standard-scss": "^13.1.0",
+ "stylelint-prettier": "^5.0.2",
+ "stylelint-scss": "^6.7.0",
+ "webpack": "^5.95.0",
  "yup": "^0.32.11"
  },
  "peerDependencies": {

packages/ui/src/Alert.module.scss

@@ -124,6 +124,7 @@
 
  &:hover,
  &.hover {
+ /* doiuse-disable text-decoration */
  text-decoration: underline solid;
  }
 

packages/ui/src/AppSidebar/AppSidebar.module.scss

@@ -33,7 +33,7 @@ $offset: c.$grid * 4;
  .wrapper {
  width: 100%;
  height: 100%;
- overflow-y: auto;
+ overflow: auto;
  overflow-x: hidden;
  }
 

packages/ui/src/Button.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use '../styles/constants' as c;
 @use '../styles/helpers' as h;
 
@@ -174,12 +175,12 @@
  &.hover,
  &:focus-visible,
  &.focus {
- @include buttonColor(lighten(c.$colorBrand, 20%));
+ @include buttonColor(color.adjust(c.$colorBrand, $lightness: 20%));
  }
 
  &:active,
  &.active {
- @include buttonColor(darken(c.$colorBrand, 10%));
+ @include buttonColor(color.adjust(c.$colorBrand, $lightness: -10%));
  }
 
  &.variantContained {
@@ -198,12 +199,12 @@
  &.hover,
  &:focus-visible,
  &.focus {
- @include buttonColor(lighten(c.$authPrimary, 10%));
+ @include buttonColor(color.adjust(c.$authPrimary, $lightness: 10%));
  }
 
  &:active,
  &.active {
- @include buttonColor(darken(c.$authPrimary, 10%));
+ @include buttonColor(color.adjust(c.$authPrimary, $lightness: -10%));
  }
 
  &.variantContained {
@@ -224,12 +225,12 @@
  &.hover,
  &:focus-visible,
  &.focus {
- @include buttonColor(lighten(c.$authSecondary, 10%));
+ @include buttonColor(color.adjust(c.$authSecondary, $lightness: 10%));
  }
 
  &:active,
  &.active {
- @include buttonColor(darken(c.$authSecondary, 10%));
+ @include buttonColor(color.adjust(c.$authSecondary, $lightness: -10%));
  }
 
  &.variantContained {

packages/ui/src/Card.module.scss

@@ -50,7 +50,7 @@
 
  .caption {
  display: flex;
- margin: (-$padding) (-$padding) $padding (-$padding);
+ margin: (-$padding) (-$padding) $padding;
 
  & > * {
  flex: 1;

packages/ui/src/Link.module.scss

@@ -16,6 +16,7 @@
  &.focus,
  &:active,
  &.active {
+ /* doiuse-disable text-decoration */
  text-decoration: underline solid;
  outline: transparent solid c.$outlineWidth;
  }

packages/ui/stylelint.config.js

@@ -1,12 +1,10 @@
 module.exports = {
- extends: ['stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-prettier/recommended'],
+ extends: ['stylelint-config-standard'],
  plugins: [
  // SCSS rules set, need to be explicitly set in "rules"
  'stylelint-scss',
- 'stylelint-prettier',
  ],
  rules: {
- 'prettier/prettier': true,
  /*
  * CSS-modules rules (from stylelint-config-css-module)
  * Overrides of stylelint-config-standard for CSS modules
@@ -33,7 +31,7 @@ module.exports = {
  'at-rule-no-unknown': [
  true,
  {
- ignoreAtRules: ['value', 'extend', 'mixin', 'include', 'use', 'forward', 'each', 'if', 'function', 'return', 'for', 'else'],
+ ignoreAtRules: ['value', 'extend', 'mixin', 'include', 'use', 'forward', 'each', 'for', 'if', 'else', 'function', 'return'],
  },
  ],
  'comment-empty-line-before': null,
@@ -46,6 +44,17 @@ module.exports = {
  'keyframes-name-pattern': /[a-z][a-zA-Z]+/,
  'scss/no-global-function-names': null,
  'font-family-name-quotes': null,
+ // todo: after upgrading stylelint packages, we disable these rules to move on with less changes in the PR.
+ // in time we better remove these suppression and change to code to comply.
  'selector-class-pattern': null,
+ 'declaration-block-no-redundant-longhand-properties': null,
+ 'at-rule-empty-line-before': null,
+ 'function-no-unknown': null,
+ 'color-function-notation': null,
+ 'alpha-value-notation': null,
+ 'media-feature-range-notation': null,
+ 'shorthand-property-no-redundant-values': null,
+ 'annotation-no-unknown': null,
+ 'media-query-no-invalid': null,
  },
 }

packages/ui/styles/constants/_colors.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // https://zeroheight.com/11d0e6dac/p/594529--colors
 $colorPrimaryLight: #2d7de4 !default;
 $colorPrimary: #2160c0 !default;
@@ -8,16 +10,16 @@ $colorNeutralLight: #b7c1cb !default;
 $colorNeutral: #dbdbdb !default;
 $colorSuccess: #85da66 !default;
 $colorSuccessLight: #d5f0d1 !default;
-$colorSuccessDark: darken($colorSuccess, 10%) !default;
+$colorSuccessDark: color.adjust($colorSuccess, $lightness: -10%) !default;
 $colorInfo: #76e7e7 !default;
 $colorInfoLight: #d0f4f8 !default;
-$colorInfoDark: darken($colorInfo, 10%) !default;
+$colorInfoDark: color.adjust($colorInfo, $lightness: -10%) !default;
 $colorWarning: #ffec44 !default;
 $colorWarningLight: #f9f6c7 !default;
-$colorWarningDark: darken($colorWarning, 15%) !default;
+$colorWarningDark: color.adjust($colorWarning, $lightness: -15%) !default;
 $colorError: #dc084b !default;
 $colorErrorLight: #efb1c9 !default;
-$colorErrorDark: darken($colorError, 10%) !default;
+$colorErrorDark: color.adjust($colorError, $lightness: -10%) !default;
 $colorText: #061827 !default;
 $colorTextSecondary: #707482 !default;
 $colorTextSubdued: #69707d !default;

packages/ui/styles/constants/_typography.scss

@@ -44,13 +44,6 @@ $lineHeightBodyTiny: normal !default;
  @return '';
 }
 
-@mixin typographyH1Hero($override: false) {
- font-weight: $fontWeightHeadingRegular #{override($override)};
- font-size: $fontSizeH4 #{override($override)};
- letter-spacing: $letterSpacingH4 #{override($override)};
- line-height: $lineHeightH4 #{override($override)};
-}
-
 @mixin typographyH1($override: false) {
  font-weight: $fontWeightHeadingRegular #{override($override)};
  font-size: $fontSizeH1 #{override($override)};