From 923313b424fb6672d11e9acb6f05f84725d185f6 Mon Sep 17 00:00:00 2001
From: Magnus Gustafsson <magnus.gustafsson@pax2pay.com>
Date: Thu, 23 Apr 2026 11:52:14 +0200
Subject: [PATCH 1/2] Explicitly set background

Co-authored-by: Copilot <copilot@github.com>
---
 src/components/icon/demo/index.tsx | 45 +++++++++++++++++++++++++++---
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/src/components/icon/demo/index.tsx b/src/components/icon/demo/index.tsx
index 903aba955..07b33c534 100644
--- a/src/components/icon/demo/index.tsx
+++ b/src/components/icon/demo/index.tsx
@@ -1,4 +1,4 @@
-import { Component, Event, EventEmitter, h, Host, State } from "@stencil/core"
+import { Component, Event, EventEmitter, Fragment, h, Host, State } from "@stencil/core"
 import { Color, Fill, Icon, Notice } from "../../../model"
 @Component({
 	tag: "smoothly-icon-demo",
@@ -11,6 +11,7 @@ export class SmoothlyIconDemo {
 	@State() display: { filter?: string; variant?: "outline" | "sharp" } = {}
 	@State() props: {
 		color?: Color
+		customColor?: string
 		fill?: Fill
 		flip?: "x" | "y"
 		size?: "tiny" | "small" | "medium" | "large" | "xlarge"
@@ -32,12 +33,24 @@ export class SmoothlyIconDemo {
 					</smoothly-input-select>
 				</smoothly-form>
 				<h2>Props</h2>
-				<smoothly-form onSmoothlyFormInput={e => (this.props = e.detail)}>
+				<smoothly-form
+					onSmoothlyFormInput={e => {
+						this.props = e.detail
+						console.log("props", this.props)
+					}}>
 					<smoothly-input-select name={"color"}>
 						<span slot={"label"}>Color</span>
 						{Color.values.map(color => (
-							<smoothly-item value={color} color={color}>
-								{color}
+							<smoothly-item value={color}>
+								<span
+									style={{
+										background: `rgb(var(--smoothly-${color}-color))`,
+										"margin-right": "0.5rem",
+										width: "2.5rem",
+										height: "2.5rem",
+									}}
+								/>
+								<span>{color}</span>
 							</smoothly-item>
 						))}
 						<smoothly-input-clear slot={"end"} />
@@ -49,6 +62,26 @@ export class SmoothlyIconDemo {
 						))}
 						<smoothly-input-clear slot={"end"} />
 					</smoothly-input-select>
+					<smoothly-input-select name="customColor" menuHeight="12items" ordered>
+						<span slot={"label"}>Custom Color</span>
+						{Color.values.flatMap(c => (
+							<Fragment>
+								{["tint", "color", "shade", "contrast"].map(v => (
+									<smoothly-item value={`--smoothly-${c}-${v}`}>
+										<span
+											style={{
+												background: `rgb(var(--smoothly-${c}-${v}))`,
+												"margin-right": "0.5rem",
+												width: "2.5rem",
+												height: "2.5rem",
+											}}
+										/>
+										<span>{`rgb(var(--smoothly-${c}-${v}))`}</span>
+									</smoothly-item>
+								))}
+							</Fragment>
+						))}
+					</smoothly-input-select>
 					<smoothly-input-select name="flip">
 						<span slot={"label"}>Flip</span>
 						<smoothly-item value={"x"}>x</smoothly-item>
@@ -82,6 +115,10 @@ export class SmoothlyIconDemo {
 							tooltip={name}
 							data-name={name}
 							color={this.props.color}
+							style={{
+								fill: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+								color: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+							}}
 							fill={this.props.fill}
 							flip={this.props.flip}
 							size={this.props.size}

From 0285b788948cb9eca4dbe29d654044fe4a773f43 Mon Sep 17 00:00:00 2001
From: Magnus Gustafsson <magnus.gustafsson@pax2pay.com>
Date: Thu, 23 Apr 2026 11:56:12 +0200
Subject: [PATCH 2/2] specify customBackground in icon/demo

Co-authored-by: Copilot <copilot@github.com>
---
 src/components/icon/demo/index.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/icon/demo/index.tsx b/src/components/icon/demo/index.tsx
index 07b33c534..bba05ec90 100644
--- a/src/components/icon/demo/index.tsx
+++ b/src/components/icon/demo/index.tsx
@@ -12,6 +12,7 @@ export class SmoothlyIconDemo {
 	@State() props: {
 		color?: Color
 		customColor?: string
+		customBackground?: string
 		fill?: Fill
 		flip?: "x" | "y"
 		size?: "tiny" | "small" | "medium" | "large" | "xlarge"
@@ -23,7 +24,7 @@ export class SmoothlyIconDemo {
 		return (
 			<Host>
 				<h2>Filter and Variants</h2>
-				<smoothly-form onSmoothlyFormInput={e => (this.display = e.detail)}>
+				<smoothly-form looks="grid" onSmoothlyFormInput={e => (this.display = e.detail)}>
 					<smoothly-input name="filter">Filter</smoothly-input>
 					<smoothly-input-select name="variant">
 						<span slot="label">Variant</span>
@@ -34,6 +35,7 @@ export class SmoothlyIconDemo {
 				</smoothly-form>
 				<h2>Props</h2>
 				<smoothly-form
+					looks="grid"
 					onSmoothlyFormInput={e => {
 						this.props = e.detail
 						console.log("props", this.props)
@@ -82,6 +84,26 @@ export class SmoothlyIconDemo {
 							</Fragment>
 						))}
 					</smoothly-input-select>
+					<smoothly-input-select name="customBackground" menuHeight="12items" ordered>
+						<span slot={"label"}>Custom Background</span>
+						{Color.values.flatMap(c => (
+							<Fragment>
+								{["tint", "color", "shade", "contrast"].map(v => (
+									<smoothly-item value={`--smoothly-${c}-${v}`}>
+										<span
+											style={{
+												background: `rgb(var(--smoothly-${c}-${v}))`,
+												"margin-right": "0.5rem",
+												width: "2.5rem",
+												height: "2.5rem",
+											}}
+										/>
+										<span>{`rgb(var(--smoothly-${c}-${v}))`}</span>
+									</smoothly-item>
+								))}
+							</Fragment>
+						))}
+					</smoothly-input-select>
 					<smoothly-input-select name="flip">
 						<span slot={"label"}>Flip</span>
 						<smoothly-item value={"x"}>x</smoothly-item>
@@ -118,6 +140,7 @@ export class SmoothlyIconDemo {
 							style={{
 								fill: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
 								color: this.props["customColor"] ? `rgb(var(${this.props["customColor"]}))` : "",
+								background: this.props["customBackground"] ? `rgb(var(${this.props["customBackground"]}))` : "",
 							}}
 							fill={this.props.fill}
 							flip={this.props.flip}