chore(deps): update devdependencies (non-major)

package.json

@@ -37,7 +37,7 @@
     "uuid": "*"
   },
   "devDependencies": {
-    "@babel/core": "7.20.2",
+    "@babel/core": "7.20.5",
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.20.2",
     "@babel/register": "7.18.9",
@@ -50,14 +50,14 @@
     "@ownclouders/eslint-config": "workspace:*",
     "@ownclouders/prettier-config": "workspace:*",
     "@ownclouders/tsconfig": "workspace:*",
-    "@playwright/test": "1.28.0",
+    "@playwright/test": "1.28.1",
     "@rollup-extras/plugin-copy": "1.5.3",
     "@rollup/plugin-alias": "4.0.2",
-    "@rollup/plugin-babel": "6.0.2",
-    "@rollup/plugin-commonjs": "23.0.2",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "23.0.3",
     "@rollup/plugin-html": "1.0.1",
     "@rollup/plugin-inject": "5.0.2",
-    "@rollup/plugin-json": "5.0.1",
+    "@rollup/plugin-json": "5.0.2",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@rollup/plugin-terser": "0.1.0",
     "@types/jest": "27.5.2",
@@ -76,7 +76,7 @@
     "cucumber-html-reporter": "5.5.0",
     "depcheck": "1.4.3",
     "ejs": "3.1.8",
-    "eslint": "8.27.0",
+    "eslint": "8.28.0",
     "flush-promises": "1.0.2",
     "focus-trap": "6.9.4",
     "focus-trap-vue": "1.1.1",
@@ -94,20 +94,20 @@
     "node-fetch": "2.6.7",
     "pino": "7.11.0",
     "pino-pretty": "7.6.1",
-    "playwright": "1.28.0",
+    "playwright": "1.28.1",
     "postcss": "8.4.19",
     "qs": "6.11.0",
     "react": "17.0.2",
     "requirejs": "2.3.6",
-    "rollup": "3.3.0",
+    "rollup": "3.5.0",
     "rollup-plugin-delete": "2.0.0",
     "rollup-plugin-gzip": "3.1.0",
     "rollup-plugin-livereload": "2.0.5",
     "rollup-plugin-modify": "3.0.0",
     "rollup-plugin-polyfill-node": "0.11.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-progress": "1.1.2",
-    "rollup-plugin-serve": "2.0.1",
+    "rollup-plugin-serve": "2.0.2",
     "rollup-plugin-ts": "3.0.2",
     "rollup-plugin-visualizer": "5.8.3",
     "rollup-plugin-vue": "5.1.9",
@@ -128,7 +128,18 @@
     "node": "16.18.1"
   },
   "pnpm": {
+    "packageExtensions": {
+      "@adobe/leonardo-contrast-colors": {
+        "dependencies": {
+          "d3": "^5.12.0",
+          "d3-cam02": "^0.1.5",
+          "d3-hsluv": "^0.1.2",
+          "d3-hsv": "^0.1.0"
+        }
+      }
+    },
     "patchedDependencies": {
+      "@adobe/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     }
   }

packages/design-system/package.json

@@ -41,7 +41,7 @@
     "not OperaMobile > 0"
   ],
   "devDependencies": {
-    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.8",
+    "@adobe/leonardo-contrast-colors": "1.0.0-alpha.16",
     "@babel/core": "^7.16.5",
     "@babel/plugin-proposal-class-properties": "^7.16.5",
     "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
@@ -93,7 +93,7 @@
     "rimraf": "^3.0.2",
     "sass-loader": "^10.1.0",
     "sass-resources-loader": "^2.0.1",
-    "sass": "1.32.12",
+    "sass": "1.56.1",
     "semver": "^7.1.3",
     "shelljs": "^0.8.3",
     "style-dictionary": "^3.0.0-rc.8",

packages/design-system/src/components/OcButton/OcButton.vue

@@ -179,7 +179,7 @@ export default {
 @import '../../styles/styles';
 
 @mixin oc-button-gap($factor) {
-  gap: round($oc-space-small * $factor / 2) * 2;
+  gap: round(calc($oc-space-small * $factor / 2)) * 2;
 }
 
 @mixin oc-button-line-height($factor) {

packages/design-system/src/components/OcProgressPie/OcProgressPie.vue

@@ -70,7 +70,7 @@ $default-size: 64px;
 
   // Shadow
   &::after {
-    border: $default-size / 10 solid var(--oc-color-swatch-passive-hover);
+    border: calc($default-size / 10) solid var(--oc-color-swatch-passive-hover);
     border-radius: 50%;
     box-sizing: border-box;
     content: '';
@@ -80,7 +80,7 @@ $default-size: 64px;
   }
 
   &-container {
-    clip: rect(0, $default-size, $default-size, $default-size / 2);
+    clip: rect(0, $default-size, $default-size, calc($default-size / 2));
     height: 100%;
     left: 0;
     position: absolute;
@@ -89,10 +89,10 @@ $default-size: 64px;
 
     &::before,
     &::after {
-      border: ($default-size / 10) solid var(--oc-color-swatch-brand-default);
+      border: calc($default-size / 10) solid var(--oc-color-swatch-brand-default);
       border-color: var(--oc-color-swatch-brand-default);
       border-radius: 50%;
-      clip: rect(0, $default-size / 2, $default-size, 0);
+      clip: rect(0, calc($default-size / 2), $default-size, 0);
       content: '';
       display: block;
       height: 100%;

packages/design-system/src/components/OcSpinner/OcSpinner.vue

@@ -55,8 +55,8 @@ export default {
 @import '../../styles/styles';
 
 @mixin oc-spinner-size($factor) {
-  height: round($oc-size-icon-default * $factor / 2) * 2;
-  width: round($oc-size-icon-default * $factor / 2) * 2;
+  height: round(calc($oc-size-icon-default * $factor / 2)) * 2;
+  width: round(calc($oc-size-icon-default * $factor / 2)) * 2;
 }
 
 .oc-spinner {

packages/web-app-skeleton/package.json

@@ -9,7 +9,7 @@
     "serve": "SERVER=true rollup -c -w"
   },
   "devDependencies": {
-    "rollup": "3.3.0",
+    "rollup": "3.5.0",
     "rollup-plugin-serve": "1.1.0",
     "rollup-plugin-vue": "5.1.9",
     "vue": "2.7.14"

patches/@adobe__leonardo-contrast-colors@1.0.0-alpha.16.patch

@@ -0,0 +1,112 @@
+diff --git a/backgroundcolor.mjs b/backgroundcolor.mjs
+index 69acd17a5c35eb436f79b0a56bf26e8f89be4aa2..06790f68156a06de270c5e165baff6e5ace8858e 100644
+--- a/backgroundcolor.mjs
++++ b/backgroundcolor.mjs
+@@ -10,9 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
+ governing permissions and limitations under the License.
+ */
+
+-import { hsluvArray, convertColorValue, createScale, removeDuplicates } from "./utils";
++import { hsluvArray, convertColorValue, createScale, removeDuplicates } from "./utils.mjs";
+
+-import { Color } from "./color";
++import { Color } from "./color.mjs";
+
+ class BackgroundColor extends Color {
+   get backgroundColorScale() {
+diff --git a/color.mjs b/color.mjs
+index 2a60cf4eb6d7be27b780ae074756f5c7e9e75fa3..0555af9945be890b47548897c9571bfcfe3c0820 100644
+--- a/color.mjs
++++ b/color.mjs
+@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
+ */
+
+ import chroma from "chroma-js";
+-import { colorSpaces, createScale } from "./utils";
++import { colorSpaces, createScale } from "./utils.mjs";
+
+ class Color {
+   constructor({ name, colorKeys, colorspace = 'RGB', ratios, smooth = false, output = 'HEX', saturation = 100 }) {
+diff --git a/index.mjs b/index.mjs
+index d2884cd9563c435627ef7213972af578864b1544..09b2b7f8f66f92f984b38970b228a4975518c60f 100644
+--- a/index.mjs
++++ b/index.mjs
+@@ -11,12 +11,12 @@ governing permissions and limitations under the License.
+ */
+
+ import chroma from "chroma-js";
+-import { extendChroma } from "./chroma-plus";
+-import { convertColorValue, createScale, getContrast as contrast, luminance, minPositive, ratioName } from "./utils";
++import { extendChroma } from "./chroma-plus.mjs";
++import { convertColorValue, createScale, getContrast as contrast, luminance, minPositive, ratioName } from "./utils.mjs";
+
+-import { Color } from "./color";
+-import { BackgroundColor } from "./backgroundcolor";
+-import { Theme } from "./theme";
++import { Color } from "./color.mjs";
++import { BackgroundColor } from "./backgroundcolor.mjs";
++import { Theme } from "./theme.mjs";
+
+ extendChroma(chroma);
+
+diff --git a/package.json b/package.json
+index 18f901f655cf21204b5f27a33d5fa38085a7f2a2..6e8beece9d16fc4185d11dd8fc48bc83c54ac080 100644
+--- a/package.json
++++ b/package.json
+@@ -3,11 +3,13 @@
+   "version": "1.0.0-alpha.16",
+   "description": "Generate colors based on a desired contrast ratio",
+   "repository": "[email protected]:adobe/leonardo.git",
+-  "main": "./index.js",
+-  "type": "module",
++  "main": "./dist/index.js",
++  "module": "./index.mjs",
++  "type": "commonjs",
+   "exports": {
+     ".": {
+-      "default": "./index.js"
++      "import": "./index.mjs",
++      "require": "./dist/index.js"
+     }
+   },
+   "jest": {
+@@ -36,6 +38,10 @@
+     "chroma-js": "^2.4.2",
+     "ciebase": "^0.1.1",
+     "ciecam02": "^0.4.6",
++    "d3": "^5.12.0",
++    "d3-cam02": "^0.1.5",
++    "d3-hsluv": "^0.1.2",
++    "d3-hsv": "^0.1.0",
+     "hsluv": "^0.1.0"
+   },
+   "devDependencies": {
+diff --git a/theme.mjs b/theme.mjs
+index 63911e49bda6c20dbcb96e88b6d9f04056d5ca01..3ec32a5a9846b4bcade53f84ef25b9e0ed73f9e9 100644
+--- a/theme.mjs
++++ b/theme.mjs
+@@ -12,9 +12,9 @@ governing permissions and limitations under the License.
+
+ import chroma from "chroma-js";
+
+-import { colorSpaces, convertColorValue, multiplyRatios, ratioName, round, searchColors } from "./utils";
++import { colorSpaces, convertColorValue, multiplyRatios, ratioName, round, searchColors } from "./utils.mjs";
+
+-import { BackgroundColor } from "./backgroundcolor";
++import { BackgroundColor } from "./backgroundcolor.mjs";
+
+ class Theme {
+   constructor({ colors, backgroundColor, lightness, contrast = 1, saturation = 100, output = 'HEX', formula = 'wcag2' }) {
+diff --git a/utils.mjs b/utils.mjs
+index 7724bd2bd4bfaf03817e2854ebc67a461f264448..21a427aae31b752ccdb26fa924c3582f2aeee82f 100644
+--- a/utils.mjs
++++ b/utils.mjs
+@@ -12,7 +12,7 @@ governing permissions and limitations under the License.
+
+ import { APCAcontrast, sRGBtoY } from "apca-w3";
+ import chroma from "chroma-js";
+-import { catmullRom2bezier, prepareCurve } from "./curve";
++import { catmullRom2bezier, prepareCurve } from "./curve.mjs";
+
+ const colorSpaces = {
+   CAM02: 'jab',