diff --git a/conventions/README.md b/conventions/README.md
index 9c4c66f7d55..4c7012663c2 100644
--- a/conventions/README.md
+++ b/conventions/README.md
@@ -188,7 +188,7 @@ Notice `.card` does not appear anywhere. We would then apply styles to the host
 Modifier classes on the "block" (host element) can often be written by reflecting the prop and selecting it directly via an attribute selector:
 
 ```scss
-:host([color="blue"]) {
+:host([kind="success"]) {
 }
 ```
 
diff --git a/conventions/Styling.md b/conventions/Styling.md
index c419dceaa5c..76a0ca43c14 100644
--- a/conventions/Styling.md
+++ b/conventions/Styling.md
@@ -30,47 +30,6 @@ Add a class to handle the logic in the component class.
 }
 ```
 
-## Color
-
-If a component has multiple color themes (for example Blue, Red, Green, and Yellow) representing various state implement a `color` prop and reflect it to an attributes.
-
-```tsx
-enum Colors {
-  red = "red",
-  blue = "blue",
-  green = "green",
-  yellow = "yellow",
-}
-
-export class Component {
-
-// ...
-
-@Prop({ reflect: true }) color: Colors = 'blue'
-
-// ...
-```
-
-You can then use the `:host()` selector to define your custom colors:
-
-```scss
-:host([color="blue"]) {
-  .something {
-    // make it blue
-  }
-}
-
-:host([color="red"]) {
-  .something {
-    // make it red
-  }
-}
-```
-
-**Discussed In**:
-
-- https://github.com/Esri/calcite-components/pull/24/files/3446c89010e3ef0421803d68d627aba2e7c4bfa0#r289427838
-
 ## Light Theme/Dark Theme
 
 In the [global CSS file](https://github.com/Esri/calcite-components/blob/master/src/assets/styles/global.scss), we specify the values of each color for both light and dark theme. This enables theming to be inherited throughout a component tree. Consider this valid example:
diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
index fc058c6d881..c62628a9604 100644
--- a/src/05-custom-theme.stories.mdx
+++ b/src/05-custom-theme.stories.mdx
@@ -185,7 +185,7 @@ export const Template = () =>
         </calcite-tabs>
         <calcite-loader class="chromatic-ignore"></calcite-loader>
         <label>
-          <calcite-switch scale="m" checked color="red"> </calcite-switch>
+          <calcite-switch scale="m" checked> </calcite-switch>
           Red switch scale medium
         </label>
       </div>
diff --git a/src/components/list/list.stories.ts b/src/components/list/list.stories.ts
index bb36d61807b..8999e20f3ba 100644
--- a/src/components/list/list.stories.ts
+++ b/src/components/list/list.stories.ts
@@ -167,7 +167,7 @@ export const startAndEndContentSlots = (): string => html`<calcite-list ${knobsH
     <span slot="content-start">Some value or something and a <b>thing</b>.</span>
     <div slot="content-end" style="display: flex; justify-content: flex-end">
       <calcite-chip class="list-chip" icon="ribbon-rosette" scale="s">Review</calcite-chip>
-      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
+      <calcite-chip class="list-chip" icon="globe" scale="s">Good</calcite-chip>
     </div>
   </calcite-list-item>
   <calcite-list-item>
@@ -175,7 +175,7 @@ export const startAndEndContentSlots = (): string => html`<calcite-list ${knobsH
     <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
     <span slot="content-start">Some value or something and a <b>thing</b>.</span>
     <div slot="content-end" style="display: flex; justify-content: flex-end">
-      <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
+      <calcite-chip class="list-chip" icon="globe" scale="s">Good</calcite-chip>
     </div>
   </calcite-list-item>
   <calcite-list-item>
@@ -183,7 +183,7 @@ export const startAndEndContentSlots = (): string => html`<calcite-list ${knobsH
     <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
     <span slot="content-start">Some value or something and a <b>thing</b>.</span>
     <div slot="content-end" style="display: flex; justify-content: flex-end">
-      <calcite-chip class="list-chip" icon="bell" color="red" scale="s">Halp!</calcite-chip>
+      <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
     </div>
   </calcite-list-item>
 </calcite-list> `;
diff --git a/src/components/modal/usage/Basic.md b/src/components/modal/usage/Basic.md
index d456f766195..7764a3228eb 100644
--- a/src/components/modal/usage/Basic.md
+++ b/src/components/modal/usage/Basic.md
@@ -4,7 +4,7 @@ Customize the modal by passing your content into multiple named slots: `header`
 <calcite-modal aria-labelledby="modal-title" open>
   <h3 slot="header" id="modal-title">Title of the modal</h3>
   <div slot="content">The actual content of the modal</div>
-  <calcite-button slot="back" color="neutral" appearance="outline" icon="chevron-left" width="full">
+  <calcite-button slot="back" kind="neutral" appearance="outline" icon="chevron-left" width="full">
     Back
   </calcite-button>
   <calcite-button slot="secondary" width="full" appearance="outline"> Cancel </calcite-button>
diff --git a/src/demos/list.html b/src/demos/list.html
index c4fef0a8c6e..7e76938cb81 100644
--- a/src/demos/list.html
+++ b/src/demos/list.html
@@ -351,7 +351,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <span slot="content-start">Some value or something and a <b>thing</b>.</span>
               <div slot="content-end" style="display: flex; justify-content: flex-end">
                 <calcite-chip class="list-chip" icon="ribbon-rosette" scale="s">Review</calcite-chip>
-                <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
+                <calcite-chip class="list-chip" icon="globe" scale="s">Good</calcite-chip>
               </div>
             </calcite-list-item>
 
@@ -360,9 +360,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               </calcite-action>
               <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
               <span slot="content-start">Some value or something and a <b>thing</b>.</span>
-              <div slot="content-end" style="display: flex; justify-content: flex-end">
-                <calcite-chip class="list-chip" icon="globe" scale="s" color="green">Good</calcite-chip>
-              </div>
+              <div slot="content-end" style="display: flex; justify-content: flex-end"></div>
             </calcite-list-item>
 
             <calcite-list-item>
@@ -371,7 +369,7 @@ <h1 style="margin: 0 auto; text-align: center">List</h1>
               <calcite-icon icon="user" scale="m" slot="content-start"></calcite-icon>
               <span slot="content-start">Some value or something and a <b>thing</b>.</span>
               <div slot="content-end" style="display: flex; justify-content: flex-end">
-                <calcite-chip class="list-chip" icon="bell" color="red" scale="s">Halp!</calcite-chip>
+                <calcite-chip class="list-chip" icon="bell" scale="s">Halp!</calcite-chip>
               </div>
             </calcite-list-item>
           </calcite-list>