chore: Clean outdated properties

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"]) {
 }
 ```
 

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:

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>

src/components/list/list.stories.ts

@@ -167,23 +167,23 @@ 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>
     <calcite-action slot="actions-end" icon="ellipsis"> </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>
+      <calcite-chip class="list-chip" icon="globe" scale="s">Good</calcite-chip>
     </div>
   </calcite-list-item>
   <calcite-list-item>
     <calcite-action slot="actions-end" icon="ellipsis"> </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="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> `;

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>

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>