From b34cd8dd3930d006ec75fbe353cc8eee37334393 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Thu, 19 Oct 2023 17:55:27 +1300
Subject: [PATCH] use css vars

---
 .../image-cropper-focus-setter.element.ts        |  4 ++--
 .../image-cropper-preview.element.ts             | 16 ++++++++++------
 .../input-image-cropper/image-cropper.element.ts |  6 +++---
 .../input-image-cropper.element.ts               |  4 ++--
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
index 3a8d6e2295..ea9b0e42aa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-focus-setter.element.ts
@@ -114,8 +114,8 @@ export class UmbImageCropperFocusSetterElement extends LitElement {
 			height: 100%;
 			position: relative;
 			user-select: none;
-			background-color: white;
-			outline: 1px solid lightgrey;
+			background-color: var(--uui-color-surface);
+			outline: 1px solid var(--uui-color-border);
 		}
 		/* Wrapper is used to make the focal point position responsive to the image size */
 		#wrapper {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts
index 91f7a89ef7..4f9cd39b83 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper-preview.element.ts
@@ -161,10 +161,13 @@ export class UmbImageCropperPreviewElement extends LitElement {
 		:host {
 			display: flex;
 			flex-direction: column;
-			outline: 1px solid lightgrey;
-			padding: 12px;
-			border-radius: 4px;
-			background-color: white;
+			padding: var(--uui-size-space-4);
+			border-radius: var(--uui-border-radius);
+			background-color: var(--uui-color-surface);
+			cursor: pointer;
+		}
+		:host(:hover) {
+			background-color: var(--uui-color-surface-alt);
 		}
 		#container {
 			display: flex;
@@ -180,9 +183,10 @@ export class UmbImageCropperPreviewElement extends LitElement {
 		}
 		#alias {
 			font-weight: bold;
-			margin-top: 8px;
+			margin-top: var(--uui-size-space-3);
 		}
-		#dimensions {
+		#dimensions,
+		#user-defined {
 			font-size: 0.8em;
 		}
 		#image {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
index 2674ec2858..342fc82239 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/image-cropper.element.ts
@@ -342,7 +342,7 @@ export class UmbImageCropperElement extends LitElement {
 		:host {
 			display: grid;
 			grid-template-rows: 1fr auto;
-			gap: 8px;
+			gap: var(--uui-size-space-3);
 			height: 100%;
 			width: 100%;
 		}
@@ -356,8 +356,8 @@ export class UmbImageCropperElement extends LitElement {
 			position: relative;
 			width: 100%;
 			height: 100%;
-			outline: 1px solid lightgrey;
-			border-radius: 4px;
+			outline: 1px solid var(--uui-color-border);
+			border-radius: var(--uui-border-radius);
 		}
 
 		#mask {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
index bf7fa64008..9b2d0bcac2 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-image-cropper/input-image-cropper.element.ts
@@ -127,7 +127,7 @@ export class UmbInputImageCropperElement extends LitElement {
 			display: flex;
 			width: 100%;
 			box-sizing: border-box;
-			gap: 8px;
+			gap: var(--uui-size-space-3);
 			height: 400px;
 		}
 		#main {
@@ -139,7 +139,7 @@ export class UmbInputImageCropperElement extends LitElement {
 		#side {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
-			gap: 8px;
+			gap: var(--uui-size-space-3);
 			flex-grow: 1;
 			overflow-y: auto;
 			height: fit-content;