@wral/profile-image-editor 0.0.8 → 0.0.10

package/dist/index.mjs

@@ -520,6 +520,17 @@ const Un = wn`
 		display: flex;
 		flex-direction: column;
 		gap: 1rem;
+
+		--color-primary: #001D68;
+		--color-secondary: #2594E3;
+		--wral-border: #E7E5E4;
+		--wral-card-background: #FFFFFF;
+		--wral-background: #F5F5F5;
+		--wral-gray-medium: #6C6C6C;
+		--wral-font-roboto: 'Roboto', sans-serif;
+		--wral-font-condensed: 'IBM Plex Sans Condensed', sans-serif;
+
+		font-family: var(--wral-font-roboto);
 	}
 
 	.layout {
@@ -533,11 +544,14 @@ const Un = wn`
 		position: relative;
 		width: var(--cropper-size, 128px);
 		height: var(--cropper-size, 128px);
-		border: 1px solid #ccc;
-		background: #f7f7f7;
 		overflow: hidden;
 		user-select: none;
 		touch-action: none;
+
+		border: 1px solid var(--wral-border, #E7E5E4);
+		border-radius: 8px;
+		background: var(--wral-card-background, #FFFFFF);
+		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
 	}
 
 	#image-cropper,
@@ -570,29 +584,30 @@ const Un = wn`
 	}
 
 	#image-cropper > .jcrop-area {
-  	position: absolute;
-  	border: 2px dashed #2b7cff;
-  	cursor: move;
-  	pointer-events: auto;
-		aspect-ratio: 1;
-	}
+		position: absolute;
+		z-index: 10;
 
-	#image-cropper > .jcrop-area {
-  	z-index: 10;
+		border: 2px dashed var(--color-secondary, #2594E3);
+		border-radius: 8px;
+
+		cursor: move;
+		pointer-events: auto;
+
+		aspect-ratio: 1;
 	}
 
 	#image-cropper > .jcrop-area::before,
 	#image-cropper > .jcrop-area::after {
-  	content: "";
-  	position: absolute;
-  	width: 10px;
-  	height: 10px;
-  	background: #2b7cff;
+		content: "";
+		position: absolute;
+		width: 10px;
+		height: 10px;
+		background: var(--color-secondary, #2594E3);
 	}
 
 	#image-cropper > .jcrop-area::before {
-  	top: -5px;
-  	left: -5px;
+		top: -5px;
+		left: -5px;
 	}
 
 	#image-cropper > .jcrop-area::after {
@@ -604,26 +619,52 @@ const Un = wn`
 	#image-cropper [class*='mask' i],
 	#image-cropper [class*='overlay' i] {
 		pointer-events: none;
-		background: rgba(0, 0, 0, 0.15);
+		background: rgba(0, 0, 0, 0.35);
 	}
 
 	#image-cropper .handle,
 	#image-cropper [class*='handle' i] {
 		pointer-events: auto;
-	}
-
-	#image-cropper .handle,
-	#image-cropper [class*='handle' i] {
 		width: 10px;
 		height: 10px;
-		background: #2b7cff;
+		background: var(--color-secondary, #2594E3);
 		border-radius: 2px;
 	}
 
-	#image-cropper .nw, #image-cropper [class*='nw' i] { cursor: nwse-resize; }
-	#image-cropper .ne, #image-cropper [class*='ne' i] { cursor: nesw-resize; }
-	#image-cropper .sw, #image-cropper [class*='sw' i] { cursor: nesw-resize; }
-	#image-cropper .se, #image-cropper [class*='se' i] { cursor: nwse-resize; }
+	#image-cropper .nw,
+	#image-cropper [class*='nw' i] {
+		cursor: nwse-resize;
+	}
+	#image-cropper .ne,
+	#image-cropper [class*='ne' i] {
+		cursor: nesw-resize;
+	}
+	#image-cropper .sw,
+	#image-cropper [class*='sw' i] {
+		cursor: nesw-resize;
+	}
+	#image-cropper .se,
+	#image-cropper [class*='se' i] {
+		cursor: nwse-resize;
+	}
+
+	.jcrop {
+		border-radius: 8px;
+	}
+
+	.jcrop-area {
+		position: relative;
+	}
+
+	.jcrop-area .circle-guide {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+		pointer-events: none;
+
+		outline: 2px solid rgba(255, 255, 255, 0.9);
+		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
+	}
 
 	.preview {
 		display: flex;
@@ -644,7 +685,6 @@ const Un = wn`
 	.controls {
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: center;
 		gap: 12px;
 		align-items: center;
 		justify-content: space-between;
@@ -663,33 +703,25 @@ const Un = wn`
 	input[type="range"] {
 		-webkit-appearance: none;
 		appearance: none;
-
-		background: transparent; 
+		background: transparent;
 		margin: 0;
 	}
 
 	.zoom[type="range"]::-moz-range-track,
 	.zoom[type="range"]::-webkit-slider-runnable-track {
-  	height: 15px;
-  	background: #ccc;
-  	border-radius: 16px;
-	}
-
-	.zoom[type="range"]::-webkit-slider-runnable-track {
-		background-color: #ccc;
+		height: 15px;
+		background: var(--wral-border, #D9D9D9);
 		border-radius: 16px;
 	}
 
 	input[type="range"]::-webkit-slider-thumb {
 		-webkit-appearance: none;
-
 		width: 32px;
 		height: 32px;
 		background: #ffffff;
 		border-radius: 50%;
 		border: none;
-
-		box-shadow: 0 6px 12px rgba(0,0,0,0.25);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
 		margin-top: -12px;
 		cursor: pointer;
 	}
@@ -700,11 +732,14 @@ const Un = wn`
 		background: #ffffff;
 		border-radius: 50%;
 		border: none;
-
-		box-shadow: 0 6px 12px rgba(0,0,0,0.25);
+		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
 		cursor: pointer;
 	}
 
+	.zoom:focus-visible {
+		outline: 3px solid rgba(37, 148, 227, 0.45);
+		outline-offset: 2px;
+	}
 
 	button {
 		display: inline-flex;
@@ -716,56 +751,65 @@ const Un = wn`
 		padding: 10px 14px;
 
 		border-radius: var(--radius-sm, 5px);
-		border: 1.5px solid var(--color-primary, #001D68);
-		background: var(--color-primary, #FFF);
+		border: 1px solid var(--color-primary, #001D68);
+		background: transparent;
+		color: var(--color-primary, #001D68);
+
 		cursor: pointer;
-		color: var(--color-white, #001D68);
 		text-align: center;
 
-		font-size: 14px;
+		font-size: 0.85rem;
 		font-weight: 600;
 		line-height: 16px;
-	}
 
-	button:hover {
-		background: var(--color-secondary, #001D68);
-		color: var(--color-white, #FFF);
-	}
-
-	button[disabled] {
-		background: #ccc;
-		cursor: not-allowed;
+		transition:
+			transform 0.2s ease,
+			box-shadow 0.2s ease,
+			background 0.2s ease,
+			color 0.2s ease,
+			opacity 0.2s ease;
 	}
 
-	.primary {
-		display: flex;
-		height: 40px;
-		padding: 12px;
-		justify-content: center;
-		align-items: center;
-		background: #2b7cff;
+	button.primary:hover:not([disabled]) {
+		background: var(--color-primary, #001D68);
 		color: #fff;
-		border-color: #2b7cff;
+		box-shadow: 0 6px 14px rgba(0, 29, 104, 0.2);
+		transform: translateY(-1px);
 	}
 
-	.jcrop {
-		border-radius: 8px;
+	button:hover:not([disabled]) {
+		color: var(--color-secondary, #2594E3);
+		border-color: var(--color-secondary, #2594E3);
+		box-shadow: 0 6px 14px rgba(0, 29, 104, 0.2);
+		transform: translateY(-1px);
 	}
 
-	.jcrop-area {
-		position: relative;
+	button:focus-visible {
+		outline: 3px solid rgba(37, 148, 227, 0.45);
+		outline-offset: 2px;
 	}
 
-	.jcrop-area .circle-guide {
-		position: absolute;
-		inset: 0;
-		border-radius: 50%;
+	/* Disabled: 50% fade, no hover/click reaction */
+	button[disabled],
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
 		pointer-events: none;
+		box-shadow: none;
+		transform: none;
+	}
 
-		outline: 2px solid rgba(255, 255, 255, 0.9);
+	button.primary,
+	.primary {
+		background: var(--color-primary, #001D68);
+		border-color: var(--color-primary, #001D68);
+		color: #fff;
+	}
 
-		box-shadow:
-			0 0 0 9999px rgba(0, 0, 0, 0.35);
+	button.primary:hover:not([disabled]),
+	.primary:hover:not([disabled]) {
+		background: var(--color-secondary, #2594E3);
+		box-shadow: 0 6px 14px rgba(0, 29, 104, 0.2);
 	}
 
 	.placeholder {
@@ -790,8 +834,6 @@ const Un = wn`
 		aspect-ratio: 1/1;
 	}
 
-
-
 	.nav {
 		display: flex;
 		flex-wrap: wrap;
@@ -824,6 +866,12 @@ const Un = wn`
 		gap: 12px;
 	}
 
+	.confirmation {
+		display: flex;
+		gap: 0.5rem;
+		padding: 1rem;
+	}
+
 	@media (max-width: 640px) {
 		.layout {
 			flex-direction: column;
@@ -846,7 +894,6 @@ const Un = wn`
 			width: 100%;
 		}
 
-		/* Make action buttons full-width for easy tapping */
 		.nav button,
 		.confirmation button {
 			width: 100%;
@@ -863,23 +910,22 @@ const Un = wn`
 		.nav-spacer {
 			display: none;
 		}
-		
+
 		.zoom[type="range"]::-moz-range-track,
 		.zoom[type="range"]::-webkit-slider-runnable-track {
-  		height: 30px;
-  		border-radius: 32px;
+			height: 30px;
+			border-radius: 32px;
 		}
 
 		input[type="range"]::-webkit-slider-thumb {
 			width: 48px;
 			height: 48px;
-			margin-top: -4px; /* centers thumb over 8px track */
+			margin-top: -4px;
 		}
 
 		input[type="range"]::-moz-range-thumb {
 			width: 48px;
 			height: 48px;
-			cursor: pointer;
 		}
 	}
 `, Vn = ut`
@@ -15509,13 +15555,13 @@ class Mi extends Ct {
       	${this.allowRotate ? ut`
 						<div class="rotate-controls">
 							<button
-								class="rotate"
+								class="rotate secondary"
 								?disabled=${this.busy || !this._lastFile}
 								@click=${() => this._rotate(90)}>
 									${Vn} Rotate	
 							</button>
 							<button 
-								class="rotate"
+								class="rotate secondary"
 								?disabled=${this.busy || !this._lastFile} 
 								@click=${() => this._rotate(-90)}>
 									Rotate ${Bn}
@@ -15559,7 +15605,7 @@ class Mi extends Ct {
 					<div class="nav-spacer"></div>
 
 					<button
-						class="primary cancel"
+						class="secondary cancel"
 						@click=${this._closeEditor}
 					> Cancel </button>
 					<button
@@ -15582,7 +15628,9 @@ class Mi extends Ct {
   renderPlaceholder() {
     return ut`
 			<div class="placeholder"
-				@click=${this._openFilePicker}
+				@click=${(N) => {
+      N.preventDefault(), N.stopImmediatePropagation(), this._openFilePicker();
+    }}
 				>
 				<img src="${Di}"></img>
 				<div>Click to browse or drag and drop</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wral/profile-image-editor",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "description": "Lit web component for showing and editing a user's profile picture.",
   "author": "Noah Rojahn <nrojahn@wral.com>",