Add a bit margin to margin to make selection more visible

bjarnef · bjarnef · commit 6aeec78d858a · 2025-10-19T17:57:00.000+02:00
diff --git a/packages/uui-color-swatch/lib/uui-color-swatch.element.ts b/packages/uui-color-swatch/lib/uui-color-swatch.element.ts
@@ -250,6 +250,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         margin: 0;
         text-align: left;
         border-radius: 3px;
+        border: 1px solid #ccc;
       }
 
       :host(:not([selectable])) #swatch:focus {
@@ -291,6 +292,7 @@ export class UUIColorSwatchElement extends LabelMixin(
         flex-direction: column;
         justify-content: center;
         align-items: center;
+        margin: 2px;
       }
 
       :host([show-label]) .color-swatch {

Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ export class UUIColorSwatchElement extends LabelMixin(`
`250`	`250`	`margin: 0;`
`251`	`251`	`text-align: left;`
`252`	`252`	`border-radius: 3px;`
	`253`	`+ border: 1px solid #ccc;`
`253`	`254`	`}`
`254`	`255`
`255`	`256`	`:host(:not([selectable])) #swatch:focus {`
`@@ -291,6 +292,7 @@ export class UUIColorSwatchElement extends LabelMixin(`
`291`	`292`	`flex-direction: column;`
`292`	`293`	`justify-content: center;`
`293`	`294`	`align-items: center;`
	`295`	`+ margin: 2px;`
`294`	`296`	`}`
`295`	`297`
`296`	`298`	`:host([show-label]) .color-swatch {`