Merge pull request #1160 from cloudinary/node-upgrade-improvements

Fix CSS & JS deprecation warnings following node upgrade

Author: gabrielcld2

.gitignore

@@ -52,3 +52,6 @@ cloudinary-image-management-and-manipulation-in-the-cloud-cdn.zip
 cloudinary-wordpress-v2.zip
 cloudinary-wordpress-v3.zip
 package/dist
+
+# AI generated files
+.claude/

css/cloudinary.css

@@ -1 +1 @@
-<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '6da83dfb91692f575603');
+<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-components/build-style/style.css', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '9cc411f20e1aa5754b7f');

js/gallery.asset.php

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 @font-face {
 	font-family: cloudinary;
 	src: url(fonts/cloudinary.eot);

js/gallery.js

@@ -1,4 +1,5 @@
-@import '../variables';
+@use "sass:color";
+@use "../variables" as *;
 
 .edit-overlay {
 	&-grid {
@@ -79,7 +80,7 @@
 				border: 2px solid $color-red;
 
 				&:hover {
-					background-color: darken($color-red, 5%);
+					background-color: color.adjust($color-red, $lightness: -5%);
 					color: $color-white;
 				}
 			}

src/css/components/_brand.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .settings {
 
 	&-image {

src/css/components/_edit_overlay.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .sync {
 
 	.spinner {

src/css/components/_settings.scss

@@ -1,3 +1,5 @@
+@use "../variables" as *;
+
 .cld {
 
 	&-tax {

src/css/components/_sync.scss

@@ -1,30 +1,45 @@
-.cld {
-	@import "ui/ui-components";
-	@import "ui/grid";
-	@import "ui/page";
-	@import "ui/panel";
-	@import "ui/loading";
-	@import "ui/sidebar";
-	@import "ui/charts";
-	@import "ui/asset-table";
-	@import "ui/links";
-	@import "ui/tooltips";
-	@import "ui/notice";
-	@import "ui/grid";
-	@import "ui/media";
-	@import "ui/group";
-	@import "ui/input";
-	@import "ui/gallery";
-	@import "ui/tables";
-	@import "ui/modal";
-	@import "ui/sidebar";
-	@import "ui/plan";
-	@import "ui/wizard";
-	@import "ui/import";
-	@import "ui/sizes-preview";
-	@import "ui/cron";
-}
+@use "../variables" as *;
 
+// UI Components - using @forward to re-export all UI modules.
+@forward "ui/ui-components";
+@forward "ui/grid";
+@forward "ui/page";
+@forward "ui/tabs";
+@forward "ui/panel";
+@forward "ui/panels/legacy";
+@forward "ui/panels/panel-short";
+@forward "ui/panels/infobox";
+@forward "ui/panels/submit-switch-cloud";
+@forward "ui/panels/optimize";
+@forward "ui/loading";
+@forward "ui/sidebar";
+@forward "ui/charts";
+@forward "ui/asset-table";
+@forward "ui/links";
+@forward "ui/tooltips";
+@forward "ui/notice";
+@forward "ui/media";
+@forward "ui/group";
+@forward "ui/input";
+@forward "ui/controls/text";
+@forward "ui/controls/select";
+@forward "ui/controls/on-off";
+@forward "ui/controls/icon-toggle";
+@forward "ui/controls/excluded_types";
+@forward "ui/controls/input-tags";
+@forward "ui/gallery";
+@forward "ui/tables";
+@forward "ui/modal";
+@forward "ui/plan";
+@forward "ui/wizard";
+@forward "ui/wizard/tabs";
+@forward "ui/wizard/intro";
+@forward "ui/wizard/connect";
+@forward "ui/wizard/optimize";
+@forward "ui/wizard/complete";
+@forward "ui/import";
+@forward "ui/sizes-preview";
+@forward "ui/cron";
 
 // Extras.
 .tippy-box[data-theme~="cloudinary"] {