From 77c358d185e8ccc36577c08c0a0a2a5d4e02e53b Mon Sep 17 00:00:00 2001
From: Ben Elan <belan@esri.com>
Date: Tue, 10 Jan 2023 13:59:34 -0800
Subject: [PATCH 1/2] refactor(color-picker)!: remove appearance property

---
 src/components/color-picker/color-picker.e2e.ts | 8 --------
 src/components/color-picker/color-picker.scss   | 6 ------
 src/components/color-picker/color-picker.tsx    | 7 +------
 src/components/color-picker/usage/Basic.md      | 2 +-
 src/components/color-picker/usage/Minimal.md    | 5 -----
 src/components/interfaces.ts                    | 2 +-
 src/demos/color-picker.html                     | 6 +++---
 7 files changed, 6 insertions(+), 30 deletions(-)
 delete mode 100644 src/components/color-picker/usage/Minimal.md

diff --git a/src/components/color-picker/color-picker.e2e.ts b/src/components/color-picker/color-picker.e2e.ts
index bb513404e7b..00620d16002 100644
--- a/src/components/color-picker/color-picker.e2e.ts
+++ b/src/components/color-picker/color-picker.e2e.ts
@@ -44,10 +44,6 @@ describe("calcite-color-picker", () => {
 
   it("reflects", async () =>
     reflects("calcite-color-picker", [
-      {
-        propertyName: "appearance",
-        value: "minimal"
-      },
       {
         propertyName: "scale",
         value: "m"
@@ -62,10 +58,6 @@ describe("calcite-color-picker", () => {
         propertyName: "allowEmpty",
         defaultValue: false
       },
-      {
-        propertyName: "appearance",
-        defaultValue: "solid"
-      },
       {
         propertyName: "format",
         defaultValue: "auto"
diff --git a/src/components/color-picker/color-picker.scss b/src/components/color-picker/color-picker.scss
index 1ab3ce15aff..5edbf284a3e 100644
--- a/src/components/color-picker/color-picker.scss
+++ b/src/components/color-picker/color-picker.scss
@@ -93,12 +93,6 @@ $gap--large: 12px;
   }
 }
 
-:host([appearance="minimal"]) {
-  .container {
-    border: none;
-  }
-}
-
 .container {
   @apply bg-foreground-1;
   display: inline-block;
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 9a6ca41303d..1b773a31583 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -14,7 +14,7 @@ import {
 
 import Color from "color";
 import { ColorMode, ColorValue, InternalColor } from "./interfaces";
-import { Appearance, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import {
   CSS,
   DEFAULT_COLOR,
@@ -83,11 +83,6 @@ export class ColorPicker
    */
   @Prop({ reflect: true }) allowEmpty = false;
 
-  /**
-   * Specifies the appearance style of the component -
-   */
-  @Prop({ reflect: true }) appearance: Extract<"minimal" | "solid", Appearance> = "solid";
-
   /**
    * Internal prop for advanced use-cases.
    *
diff --git a/src/components/color-picker/usage/Basic.md b/src/components/color-picker/usage/Basic.md
index 4084c7d701a..055e256ecfb 100644
--- a/src/components/color-picker/usage/Basic.md
+++ b/src/components/color-picker/usage/Basic.md
@@ -1,3 +1,3 @@
 ```html
-<calcite-color-picker dir="ltr" scale="m" value="#b33f33" appearance="default"></calcite-color-picker>
+<calcite-color-picker dir="ltr" scale="m" value="#b33f33"></calcite-color-picker>
 ```
diff --git a/src/components/color-picker/usage/Minimal.md b/src/components/color-picker/usage/Minimal.md
deleted file mode 100644
index 21d4e564815..00000000000
--- a/src/components/color-picker/usage/Minimal.md
+++ /dev/null
@@ -1,5 +0,0 @@
-For a minimal design, you can hide unused color formats and options:
-
-```html
-<calcite-color-picker appearance="minimal" value="" allow-empty hide-saved hide-channels></calcite-color-picker>
-```
diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index fec95ded3e3..1e60623df8f 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -1,6 +1,6 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
-export type Appearance = "minimal" | "outline" | "outline-fill" | "solid" | "transparent";
+export type Appearance = "outline" | "outline-fill" | "solid" | "transparent";
 export type Columns = 1 | 2 | 3 | 4 | 5 | 6;
 export type FlipContext = "both" | "start" | "end";
 export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
diff --git a/src/demos/color-picker.html b/src/demos/color-picker.html
index d70b168befc..25166fe44a5 100644
--- a/src/demos/color-picker.html
+++ b/src/demos/color-picker.html
@@ -146,21 +146,21 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
         <div class="child right-aligned-text">Color-picker in Popover</div>
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-1">
-            <calcite-color-picker appearance="minimal" scale="s"></calcite-color-picker>
+            <calcite-color-picker scale="s"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-1">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-2">
-            <calcite-color-picker appearance="minimal" scale="m"></calcite-color-picker>
+            <calcite-color-picker scale="m"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-2">Activate Popover</calcite-button>
         </div>
 
         <div class="child">
           <calcite-popover pointer-disabled placement="bottom-start" reference-element="popover-button-3">
-            <calcite-color-picker appearance="minimal" scale="l"></calcite-color-picker>
+            <calcite-color-picker scale="l"></calcite-color-picker>
           </calcite-popover>
           <calcite-button id="popover-button-3">Activate Popover</calcite-button>
         </div>

From 6304f4350425c83ada8f8339e9f4eea217f18578 Mon Sep 17 00:00:00 2001
From: Kitty Hurley <khurley@esri.com>
Date: Thu, 12 Jan 2023 12:03:58 -0600
Subject: [PATCH 2/2] Remove appearance import

---
 src/components/color-picker/color-picker.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index e8524f81b08..61ced82ce9e 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -15,7 +15,7 @@ import {
 import Color from "color";
 import { throttle } from "lodash-es";
 import { Direction, getElementDir, isPrimaryPointerButton } from "../../utils/dom";
-import { Appearance, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import { ColorMode, ColorValue, InternalColor } from "./interfaces";
 import {
   CSS,