From 969a2eb7e5c9be5bfeedffcd12c48104a43e2c2c Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Thu, 15 Dec 2022 15:22:39 -0800
Subject: [PATCH] refactor(button, fab, split-button)!: Update properties and
 values (#6062)

BREAKING CHANGE: Removed deprecated properties and values.

- `button`: Removed the property `form`, this property is no longer
needed if the component is placed inside a form.
- `button`, `fab`, `split-button`: Renamed the property `color`, use
`kind` instead.
- `button`, `fab`, `split-button`: Updated the accepted values of `kind`
to `brand` (default), `danger`, `inverse`, and `neutral`.
- `button`, `split-button`: Updated the accepted values of `appearance`
to `outline`, `outline-fill` and `solid` (default).
- `fab`: Updated the accepted values of `appearance` to `outline-fill`
and `solid` (default).
---
 src/05-custom-theme.stories.mdx               |   2 +-
 src/components/button/button.e2e.ts           |  20 +-
 src/components/button/button.scss             |  56 +-
 src/components/button/button.stories.ts       |  28 +-
 src/components/button/button.tsx              |  26 +-
 src/components/button/interfaces.ts           |   2 -
 src/components/button/usage/Basic.md          |   2 +-
 src/components/button/usage/With-icons.md     |   4 +-
 .../button/usage/With-loader-disabled.md      |   2 +-
 src/components/card/card.stories.ts           |  14 +-
 src/components/color-picker/color-picker.tsx  |   4 +-
 src/components/fab/fab.e2e.ts                 |  22 +-
 src/components/fab/fab.stories.ts             |   2 +-
 src/components/fab/fab.tsx                    |  16 +-
 src/components/flow-item/flow-item.stories.ts |   2 +-
 src/components/flow/flow.stories.ts           |   2 +-
 .../inline-editable/inline-editable.tsx       |   6 +-
 src/components/interfaces.ts                  |   4 +-
 src/components/modal/modal.e2e.ts             |   2 +-
 src/components/modal/modal.stories.ts         |   6 +-
 src/components/panel/panel.stories.ts         |   2 +-
 src/components/pick-list/pick-list.stories.ts |   2 +-
 src/components/shell/shell.stories.ts         |  16 +-
 .../split-button/split-button.e2e.ts          |   6 +-
 src/components/split-button/split-button.scss |  51 +-
 .../split-button/split-button.stories.ts      |  14 +-
 src/components/split-button/split-button.tsx  |  18 +-
 src/components/tooltip/tooltip.stories.ts     |   2 +-
 .../value-list/value-list.stories.ts          |   2 +-
 src/demos/_assets/demo-template.html          |   2 +-
 src/demos/alert.html                          | 126 ++--
 src/demos/animation/animation.html            |   5 +-
 src/demos/button.html                         | 667 +++++++++---------
 src/demos/card.html                           |  44 +-
 src/demos/fab.html                            | 177 +++--
 src/demos/modal.html                          |  52 +-
 src/demos/shell/block-configurations.html     |   6 +-
 .../demo-app-advanced-2-shell-header.html     |  14 +-
 src/demos/shell/demo-app-advanced-2.html      |  14 +-
 src/demos/shell/demo-app-advanced-3.html      |  14 +-
 src/demos/shell/demo-app-advanced.html        |   4 +-
 .../shell/demo-app-full-window-reversed.html  |   4 +-
 src/demos/shell/demo-app-full-window.html     |   2 +-
 src/demos/shell/nesting-testing-flow.html     |   4 +-
 src/demos/shell/nesting-testing.html          |   2 +-
 src/demos/shell/popup-config-example.html     |   4 +-
 src/demos/split-button.html                   | 600 ++++++++--------
 src/demos/theme/auto.html                     |   4 +-
 src/index.html                                |   6 +-
 49 files changed, 1072 insertions(+), 1014 deletions(-)

diff --git a/src/05-custom-theme.stories.mdx b/src/05-custom-theme.stories.mdx
index 280a772f7b0..4b7ebbee642 100644
--- a/src/05-custom-theme.stories.mdx
+++ b/src/05-custom-theme.stories.mdx
@@ -144,7 +144,7 @@ export const Template = () =>
             </calcite-dropdown-group>
           </calcite-dropdown>
           <calcite-button appearance="outline">Outline</calcite-button>
-          <calcite-button color="red">Red</calcite-button>
+          <calcite-button kind="danger">Red</calcite-button>
         </div>
         <div>
           <label>
diff --git a/src/components/button/button.e2e.ts b/src/components/button/button.e2e.ts
index 48a37bd6df2..fdef12b30fa 100644
--- a/src/components/button/button.e2e.ts
+++ b/src/components/button/button.e2e.ts
@@ -20,8 +20,8 @@ describe("calcite-button", () => {
         defaultValue: undefined
       },
       {
-        propertyName: "color",
-        defaultValue: "blue"
+        propertyName: "kind",
+        defaultValue: "brand"
       },
       {
         propertyName: "disabled",
@@ -99,7 +99,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("appearance", "solid");
     expect(element).toEqualAttribute("scale", "m");
     expect(element).toEqualAttribute("width", "auto");
@@ -115,7 +115,7 @@ describe("calcite-button", () => {
   it("is accessible: href", async () => accessible(`<calcite-button href="/">Continue</calcite-button>`));
 
   it("is accessible: style props", async () =>
-    accessible(`<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`));
+    accessible(`<calcite-button kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`));
 
   it("is accessible: href and target", async () =>
     accessible(
@@ -160,7 +160,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("appearance", "solid");
     expect(element).toEqualAttribute("scale", "m");
     expect(element).toEqualAttribute("width", "auto");
@@ -174,7 +174,7 @@ describe("calcite-button", () => {
   it("renders as a button with requested props", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`
+      `<calcite-button kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -184,7 +184,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "red");
+    expect(element).toEqualAttribute("kind", "danger");
     expect(element).toEqualAttribute("appearance", "outline");
     expect(element).toEqualAttribute("scale", "l");
     expect(element).toEqualAttribute("width", "half");
@@ -198,7 +198,7 @@ describe("calcite-button", () => {
   it("renders as a link with requested props", async () => {
     const page = await newE2EPage();
     await page.setContent(
-      `<calcite-button href="/" color="red" scale="l" width="half" appearance="outline">Continue</calcite-button>`
+      `<calcite-button href="/" kind="danger" scale="l" width="half" appearance="outline">Continue</calcite-button>`
     );
     const element = await page.find("calcite-button");
     const elementAsButton = await page.find("calcite-button >>> button");
@@ -208,7 +208,7 @@ describe("calcite-button", () => {
     const loader = await page.find(`calcite-button >>> .${CSS.buttonLoader} calcite-loader`);
 
     expect(element).toHaveAttribute(HYDRATED_ATTR);
-    expect(element).toEqualAttribute("color", "red");
+    expect(element).toEqualAttribute("kind", "danger");
     expect(element).toEqualAttribute("appearance", "outline");
     expect(element).toEqualAttribute("scale", "l");
     expect(element).toEqualAttribute("width", "half");
@@ -421,7 +421,7 @@ describe("calcite-button", () => {
         icon-start="layer"
         icon-end="chevron-down"
         appearance="transparent"
-        color="blue"
+        kind="brand"
       >
         Layers
       </calcite-button>
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index a874fcd42eb..2a7617d1633 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -238,7 +238,7 @@
   }
 }
 
-:host([color="blue"]) {
+:host([kind="brand"]) {
   button,
   a {
     @apply text-color-inverse bg-brand;
@@ -254,7 +254,7 @@
     }
   }
 }
-:host([color="red"]) {
+:host([kind="danger"]) {
   button,
   a {
     @apply text-color-inverse bg-danger;
@@ -270,7 +270,7 @@
     }
   }
 }
-:host([color="neutral"]) {
+:host([kind="neutral"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-3;
@@ -286,7 +286,7 @@
     }
   }
 }
-:host([color="inverse"]) {
+:host([kind="inverse"]) {
   button,
   a {
     @apply text-color-inverse;
@@ -304,14 +304,14 @@
   }
 }
 // outline
-:host([appearance="outline"]) {
+:host([appearance="outline-fill"]) {
   button,
   a {
     @apply bg-foreground-1 border border-solid;
     box-shadow: inset 0 0 0 1px transparent;
   }
 }
-:host([appearance="outline"][color="blue"]) {
+:host([appearance="outline-fill"][kind="brand"]) {
   button,
   a {
     @apply border-color-brand bg-foreground-1;
@@ -336,7 +336,7 @@
     }
   }
 }
-:host([appearance="outline"][color="red"]) {
+:host([appearance="outline-fill"][kind="danger"]) {
   button,
   a {
     @apply border-color-danger bg-foreground-1;
@@ -361,7 +361,7 @@
     }
   }
 }
-:host([appearance="outline"][color="neutral"]) {
+:host([appearance="outline-fill"][kind="neutral"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-1;
@@ -380,7 +380,7 @@
     }
   }
 }
-:host([appearance="outline"][color="inverse"]) {
+:host([appearance="outline-fill"][kind="inverse"]) {
   button,
   a {
     @apply text-color-1 bg-foreground-1;
@@ -402,17 +402,14 @@
     }
   }
 }
-// clear is deprecated. use minimal instead
-:host([appearance="clear"]),
-:host([appearance="minimal"]) {
+:host([appearance="outline"]) {
   button,
   a {
     @apply border border-solid bg-transparent;
     box-shadow: inset 0 0 0 1px transparent;
   }
 }
-:host([appearance="clear"][color="blue"]),
-:host([appearance="minimal"][color="blue"]) {
+:host([appearance="outline"][kind="brand"]) {
   button,
   a {
     @apply border-color-brand bg-transparent;
@@ -437,8 +434,7 @@
     }
   }
 }
-:host([appearance="clear"][color="red"]),
-:host([appearance="minimal"][color="red"]) {
+:host([appearance="outline"][kind="danger"]) {
   button,
   a {
     @apply border-color-danger bg-transparent;
@@ -463,8 +459,7 @@
     }
   }
 }
-:host([appearance="clear"][color="neutral"]),
-:host([appearance="minimal"][color="neutral"]) {
+:host([appearance="outline"][kind="neutral"]) {
   button,
   a {
     @apply text-color-1  bg-transparent;
@@ -483,8 +478,7 @@
     }
   }
 }
-:host([appearance="clear"][color="inverse"]),
-:host([appearance="minimal"][color="inverse"]) {
+:host([appearance="outline"][kind="inverse"]) {
   button,
   a {
     @apply text-color-1  bg-transparent;
@@ -507,16 +501,14 @@
   }
 }
 
-:host([appearance="outline"][split-child="primary"]) button,
-:host([appearance="clear"][split-child="primary"]) button,
-:host([appearance="minimal"][split-child="primary"]) button {
+:host([appearance="outline-fill"][split-child="primary"]) button,
+:host([appearance="outline"][split-child="primary"]) button {
   border-inline-end-width: 0;
   border-inline-start-width: theme("borderWidth.DEFAULT");
 }
 
-:host([appearance="outline"][split-child="secondary"]) button,
-:host([appearance="clear"][split-child="secondary"]) button,
-:host([appearance="minimal"][split-child="secondary"]) button {
+:host([appearance="outline-fill"][split-child="secondary"]) button,
+:host([appearance="outline"][split-child="secondary"]) button {
   border-inline-start-width: 0;
   border-inline-end-width: theme("borderWidth.DEFAULT");
 }
@@ -535,7 +527,7 @@
     }
   }
 }
-:host([appearance="transparent"][color="blue"]) {
+:host([appearance="transparent"][kind="brand"]) {
   button,
   a {
     color: theme("colors.brand");
@@ -554,7 +546,7 @@
   }
 }
 
-:host([appearance="transparent"][color="red"]) {
+:host([appearance="transparent"][kind="danger"]) {
   button,
   a {
     color: theme("colors.danger");
@@ -573,7 +565,7 @@
   }
 }
 
-:host([appearance="transparent"][color="neutral"]:not(.cancel-editing-button)) {
+:host([appearance="transparent"][kind="neutral"]:not(.cancel-editing-button)) {
   button,
   a,
   calcite-loader {
@@ -581,7 +573,7 @@
   }
 }
 
-:host([appearance="transparent"][color="neutral"].cancel-editing-button) {
+:host([appearance="transparent"][kind="neutral"].cancel-editing-button) {
   button {
     @apply text-color-3
       border-t-color-input
@@ -600,7 +592,7 @@
   }
 }
 
-:host([appearance="transparent"][color="neutral"].enable-editing-button) {
+:host([appearance="transparent"][kind="neutral"].enable-editing-button) {
   button {
     @apply bg-transparent;
   }
@@ -616,7 +608,7 @@
   }
 }
 
-:host([appearance="transparent"][color="inverse"]) {
+:host([appearance="transparent"][kind="inverse"]) {
   button,
   a,
   calcite-loader {
diff --git a/src/components/button/button.stories.ts b/src/components/button/button.stories.ts
index 92e55ea3cc1..21be4bdb3bc 100644
--- a/src/components/button/button.stories.ts
+++ b/src/components/button/button.stories.ts
@@ -14,8 +14,8 @@ export default {
 
 export const simple = (): string => html`
   <calcite-button
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"
@@ -34,8 +34,8 @@ export const withIconStart = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     icon-start="${select("icon-start", iconNames, iconNames[0])}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
@@ -56,9 +56,9 @@ export const withIconEnd = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
     icon-end="${select("icon-end", iconNames, iconNames[0])}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"
@@ -79,8 +79,8 @@ export const withIconStartAndIconEnd = (): string => html`
       ["start", "end", "center", "space-between", "icon-start-space-between", "icon-end-space-between"],
       "center"
     )}"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     icon-start="${select("icon-start", iconNames, iconNames[0])}"
     icon-end="${select("icon-end", iconNames, iconNames[0])}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -121,15 +121,15 @@ export const sideBySide_TestOnly = (): string => html`
   <div style="width: 300px; max-width: 100%; display: flex; flex-direction: row; background-color: #fff">
     <calcite-button
       width="half"
-      appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "outline")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "outline-fill")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     >
       ${text("text", "Back")}
     </calcite-button>
     <calcite-button
       width="half"
-      appearance="${select("appearance-2", ["solid", "clear", "outline", "transparent"], "solid")}"
-      color="${select("color-2", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance-2", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind-2", ["brand", "danger", "inverse", "neutral"], "brand")}"
       icon-start="${select("icon-start", iconNames, iconNames[0])}"
     >
       ${text("text-2", "Some long string")}
@@ -141,8 +141,8 @@ export const darkThemeRTL_TestOnly = (): string => html`
   <calcite-button
     class="calcite-theme-dark"
     dir="rtl"
-    appearance="${select("appearance", ["solid", "clear", "outline", "transparent"], "solid")}"
-    color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+    appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+    kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
     ${boolean("round", false)}
     href="${text("href", "")}"
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 92bd41e8534..8ad8362c0d4 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -2,8 +2,8 @@ import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, VNode, Watch } from "@stencil/core";
 import { CSS } from "./resources";
 import { closestElementCrossShadowBoundary } from "../../utils/dom";
-import { ButtonAlignment, ButtonAppearance, ButtonColor } from "./interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
+import { ButtonAlignment } from "./interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { createObserver } from "../../utils/observers";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
@@ -61,13 +61,17 @@ export class Button
   @Prop({ reflect: true }) alignment: ButtonAlignment = "center";
 
   /** Specifies the appearance style of the component. */
-  @Prop({ reflect: true }) appearance: ButtonAppearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<
+    "outline" | "outline-fill" | "solid" | "transparent",
+    Appearance
+  > = "solid";
 
   /** Accessible name for the component. */
   @Prop() label: string;
 
-  /** Specifies the color of the component. */
-  @Prop({ reflect: true }) color: ButtonColor = "blue";
+  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
+    "brand";
 
   /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @Prop({ reflect: true }) disabled = false;
@@ -101,13 +105,6 @@ export class Button
    */
   @Prop({ reflect: true }) rel: string;
 
-  /**
-   * The form ID to associate with the component.
-   *
-   * @deprecated – The property is no longer needed if the component is placed inside a form.
-   */
-  @Prop() form: string;
-
   /** When `true`, adds a round style to the component. */
   @Prop({ reflect: true }) round = false;
 
@@ -175,10 +172,7 @@ export class Button
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
-    this.formEl = closestElementCrossShadowBoundary<HTMLFormElement>(
-      this.el,
-      this.form ? `#${this.form}` : "form"
-    );
+    this.formEl = closestElementCrossShadowBoundary<HTMLFormElement>(this.el, "form");
   }
 
   disconnectedCallback(): void {
diff --git a/src/components/button/interfaces.ts b/src/components/button/interfaces.ts
index 400f21643fe..10642676f27 100644
--- a/src/components/button/interfaces.ts
+++ b/src/components/button/interfaces.ts
@@ -1,5 +1,3 @@
-export type ButtonColor = "blue" | "inverse" | "neutral" | "red";
-export type ButtonAppearance = "solid" | "outline" | "clear" | "transparent" | "minimal";
 export type ButtonAlignment =
   | "start"
   | "end"
diff --git a/src/components/button/usage/Basic.md b/src/components/button/usage/Basic.md
index d40e7c7072f..ef029cd8c2a 100644
--- a/src/components/button/usage/Basic.md
+++ b/src/components/button/usage/Basic.md
@@ -1,3 +1,3 @@
 ```html
-<calcite-button icon-start="plus" color="red">Go!</calcite-button>
+<calcite-button icon-start="plus">Go!</calcite-button>
 ```
diff --git a/src/components/button/usage/With-icons.md b/src/components/button/usage/With-icons.md
index 3c0f7fd029e..36eeef28dbb 100644
--- a/src/components/button/usage/With-icons.md
+++ b/src/components/button/usage/With-icons.md
@@ -1,5 +1,5 @@
 ```html
 <calcite-button appearance="solid" icon-start="arrow-left">Back</calcite-button>
-<calcite-button icon-end="map" color="red">Map Options</calcite-button>
-<calcite-button icon-end="plus" appearance="outline" color="inverse">Add to favorites</calcite-button>
+<calcite-button icon-end="map" kind="danger">Delete Map Options</calcite-button>
+<calcite-button icon-end="plus" appearance="outline-fill" kind="inverse">Add to favorites</calcite-button>
 ```
diff --git a/src/components/button/usage/With-loader-disabled.md b/src/components/button/usage/With-loader-disabled.md
index 3cdd7ff9a03..d2fdefc81b4 100644
--- a/src/components/button/usage/With-loader-disabled.md
+++ b/src/components/button/usage/With-loader-disabled.md
@@ -1,4 +1,4 @@
 ```html
-<calcite-button loading color="neutral">Fetching data...</calcite-button>
+<calcite-button loading kind="neutral">Fetching data...</calcite-button>
 <calcite-button disabled>Can't touch this</calcite-button>
 ```
diff --git a/src/components/card/card.stories.ts b/src/components/card/card.stories.ts
index afc97b03bc5..fd10e93e32f 100644
--- a/src/components/card/card.stories.ts
+++ b/src/components/card/card.stories.ts
@@ -89,9 +89,9 @@ const thumbnailHtml = html`<img
 
 const footerTrailingButtonsHtml = html`
   <div slot="footer-trailing">
-    <calcite-button id="card-icon-test-6" scale="s" appearance="transparent" color="neutral" icon-start="circle">
+    <calcite-button id="card-icon-test-6" scale="s" appearance="transparent" kind="neutral" icon-start="circle">
     </calcite-button>
-    <calcite-button id="card-icon-test-7" scale="s" appearance="transparent" color="neutral" icon-start="circle">
+    <calcite-button id="card-icon-test-7" scale="s" appearance="transparent" kind="neutral" icon-start="circle">
     </calcite-button>
   </div>
 `;
@@ -148,20 +148,20 @@ export const thumbnail = (): string => html`
         </div>
         <calcite-button
           slot="footer-leading"
-          color="neutral"
+          kind="neutral"
           scale="s"
           id="card-icon-test-1"
           icon-start="circle"
         ></calcite-button>
         <div slot="footer-trailing">
-          <calcite-button scale="s" color="neutral" id="card-icon-test-2" icon-start="circle"></calcite-button>
-          <calcite-button scale="s" color="neutral" id="card-icon-test-3" icon-start="circle"></calcite-button>
+          <calcite-button scale="s" kind="neutral" id="card-icon-test-2" icon-start="circle"></calcite-button>
+          <calcite-button scale="s" kind="neutral" id="card-icon-test-3" icon-start="circle"></calcite-button>
           <calcite-dropdown type="hover">
             <calcite-button
               id="card-icon-test-5"
               slot="trigger"
               scale="s"
-              color="neutral"
+              kind="neutral"
               icon-start="circle"
             ></calcite-button>
             <calcite-dropdown-group selection-mode="none">
@@ -205,7 +205,7 @@ export const thumbnailRounded = (): string => html`
       </div>
       <calcite-button
         slot="footer-leading"
-        color="neutral"
+        kind="neutral"
         scale="s"
         id="card-icon-test-1"
         icon-start="circle"
diff --git a/src/components/color-picker/color-picker.tsx b/src/components/color-picker/color-picker.tsx
index 17057b7e8ba..0295654ca61 100644
--- a/src/components/color-picker/color-picker.tsx
+++ b/src/components/color-picker/color-picker.tsx
@@ -820,9 +820,9 @@ export class ColorPicker
                 <calcite-button
                   appearance="transparent"
                   class={CSS.deleteColor}
-                  color="neutral"
                   disabled={noColor}
                   iconStart="minus"
+                  kind="neutral"
                   label={messages.deleteColor}
                   onClick={this.deleteColor}
                   scale={hexInputScale}
@@ -831,9 +831,9 @@ export class ColorPicker
                 <calcite-button
                   appearance="transparent"
                   class={CSS.saveColor}
-                  color="neutral"
                   disabled={noColor}
                   iconStart="plus"
+                  kind="neutral"
                   label={messages.saveColor}
                   onClick={this.saveColor}
                   scale={hexInputScale}
diff --git a/src/components/fab/fab.e2e.ts b/src/components/fab/fab.e2e.ts
index 2c7c7c1d6e4..b30c607ae6b 100755
--- a/src/components/fab/fab.e2e.ts
+++ b/src/components/fab/fab.e2e.ts
@@ -16,7 +16,7 @@ describe("calcite-fab", () => {
       },
       {
         propertyName: "appearance",
-        defaultValue: "outline"
+        defaultValue: "solid"
       }
     ]));
 
@@ -86,20 +86,20 @@ describe("calcite-fab", () => {
     expect(await calciteButton.getProperty("label")).toBe("hi");
   });
 
-  it("should have appearance=outline", async () => {
+  it("should have appearance=solid", async () => {
     const page = await newE2EPage();
     await page.setContent(`<calcite-fab text="hello world"></calcite-fab>`);
 
     const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
-    expect(fab.getAttribute("appearance")).toBe("outline");
+    expect(fab.getAttribute("appearance")).toBe("solid");
   });
 
-  it("should have appearance=solid", async () => {
+  it("should have appearance=outline-fill", async () => {
     const page = await newE2EPage();
-    await page.setContent(`<calcite-fab appearance="solid" text="hello world"></calcite-fab>`);
+    await page.setContent(`<calcite-fab appearance="outline-fill" text="hello world"></calcite-fab>`);
 
     const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
-    expect(fab.getAttribute("appearance")).toBe("solid");
+    expect(fab.getAttribute("appearance")).toBe("outline-fill");
   });
 
   it("should be accessible", async () => {
@@ -109,7 +109,7 @@ describe("calcite-fab", () => {
 
   describe("when invalid appearance values are passed", () => {
     describe("when value is 'transparent'", () => {
-      it("should render with default 'outline' appearance", async () => {
+      it("should render with default 'outline-fill' appearance", async () => {
         const page = await newE2EPage({
           html: `
           <calcite-fab
@@ -120,23 +120,23 @@ describe("calcite-fab", () => {
           `
         });
         const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
-        expect(fab.getAttribute("appearance")).toBe("outline");
+        expect(fab.getAttribute("appearance")).toBe("outline-fill");
       });
     });
 
     describe("when value is 'clear'", () => {
-      it("should render with default 'outline' appearance", async () => {
+      it("should render with default 'outline-fill' appearance", async () => {
         const page = await newE2EPage({
           html: `
           <calcite-fab
             text="FAB"
             text-enabled
-            appearance="clear"
+            appearance="outline"
           ></calcite-fab>
           `
         });
         const fab = await page.find(`calcite-fab >>> .${CSS.button}`);
-        expect(fab.getAttribute("appearance")).toBe("outline");
+        expect(fab.getAttribute("appearance")).toBe("outline-fill");
       });
     });
   });
diff --git a/src/components/fab/fab.stories.ts b/src/components/fab/fab.stories.ts
index 21a916ed8cd..10abecb0c04 100644
--- a/src/components/fab/fab.stories.ts
+++ b/src/components/fab/fab.stories.ts
@@ -27,7 +27,7 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
       {
         name: "appearance",
         commit(): Attribute {
-          this.value = select("appearance", ["solid", "outline"], "outline");
+          this.value = select("appearance", ["solid", "outline-fill"], "outline-fill");
           delete this.build;
           return this;
         }
diff --git a/src/components/fab/fab.tsx b/src/components/fab/fab.tsx
index d0d578022c1..5cecdc62e70 100755
--- a/src/components/fab/fab.tsx
+++ b/src/components/fab/fab.tsx
@@ -1,6 +1,5 @@
 import { Component, Element, Method, Prop, h, VNode } from "@stencil/core";
-import { Appearance, Scale } from "../interfaces";
-import { ButtonColor } from "../button/interfaces";
+import { Appearance, Kind, Scale } from "../interfaces";
 import { CSS, ICONS } from "./resources";
 import { focusElement } from "../../utils/dom";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
@@ -26,12 +25,13 @@ export class Fab implements InteractiveComponent, LoadableComponent {
   /**
    * Specifies the appearance style of the component.
    */
-  @Prop({ reflect: true }) appearance: Extract<"solid" | "outline", Appearance> = "outline";
+  @Prop({ reflect: true }) appearance: Extract<"solid" | "outline-fill", Appearance> = "solid";
 
   /**
-   * Specifies the color of the component.
+   * Specifies the kind of the component (will apply to border and background).
    */
-  @Prop({ reflect: true }) color: ButtonColor = "neutral";
+  @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
+    "brand";
 
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.
@@ -119,16 +119,16 @@ export class Fab implements InteractiveComponent, LoadableComponent {
   // --------------------------------------------------------------------------
 
   render(): VNode {
-    const { appearance, color, disabled, loading, scale, textEnabled, icon, label, text } = this;
+    const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text } = this;
     const title = !textEnabled ? label || text || null : null;
 
     return (
       <calcite-button
-        appearance={appearance === "solid" ? "solid" : "outline"}
+        appearance={appearance === "solid" ? "solid" : "outline-fill"}
         class={CSS.button}
-        color={color}
         disabled={disabled}
         iconStart={icon}
+        kind={kind}
         label={label}
         loading={loading}
         ref={(buttonEl): void => {
diff --git a/src/components/flow-item/flow-item.stories.ts b/src/components/flow-item/flow-item.stories.ts
index aa1715dde45..0490a9d017f 100644
--- a/src/components/flow-item/flow-item.stories.ts
+++ b/src/components/flow-item/flow-item.stories.ts
@@ -98,7 +98,7 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
   <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
 `;
 
diff --git a/src/components/flow/flow.stories.ts b/src/components/flow/flow.stories.ts
index a8eff1fb61e..6627f2b2e8b 100644
--- a/src/components/flow/flow.stories.ts
+++ b/src/components/flow/flow.stories.ts
@@ -71,7 +71,7 @@ const menuActionsHTML = html`
 `;
 
 const footerActionsHTML = html`
-  <calcite-button slot="${SLOTS.footerActions}" width="half" appearance="clear">Cancel</calcite-button>
+  <calcite-button slot="${SLOTS.footerActions}" width="half" appearance="outline">Cancel</calcite-button>
   <calcite-button slot="${SLOTS.footerActions}" width="half">Save</button>
 `;
 
diff --git a/src/components/inline-editable/inline-editable.tsx b/src/components/inline-editable/inline-editable.tsx
index 67d9c6e4552..79ed08c24a3 100644
--- a/src/components/inline-editable/inline-editable.tsx
+++ b/src/components/inline-editable/inline-editable.tsx
@@ -170,9 +170,9 @@ export class InlineEditable
           <calcite-button
             appearance="transparent"
             class={CSS.enableEditingButton}
-            color="neutral"
             disabled={this.disabled}
             iconStart="pencil"
+            kind="neutral"
             label={this.messages.enableEditing}
             onClick={this.enableEditingHandler}
             ref={(el) => (this.enableEditingButton = el)}
@@ -188,9 +188,9 @@ export class InlineEditable
               <calcite-button
                 appearance="transparent"
                 class={CSS.cancelEditingButton}
-                color="neutral"
                 disabled={this.disabled}
                 iconStart="x"
+                kind="neutral"
                 label={this.messages.cancelEditing}
                 onClick={this.cancelEditingHandler}
                 ref={(el) => (this.cancelEditingButton = el)}
@@ -201,9 +201,9 @@ export class InlineEditable
             <calcite-button
               appearance="solid"
               class={CSS.confirmChangesButton}
-              color="blue"
               disabled={this.disabled}
               iconStart="check"
+              kind="brand"
               label={this.messages.confirmChanges}
               loading={this.loading}
               onClick={this.confirmChangesHandler}
diff --git a/src/components/interfaces.ts b/src/components/interfaces.ts
index 26f29222962..9392e6f2575 100644
--- a/src/components/interfaces.ts
+++ b/src/components/interfaces.ts
@@ -1,10 +1,10 @@
 /* Note: using `.d.ts` file extension will exclude it from the output build */
 export type Alignment = "start" | "center" | "end";
 /* Note: "clear" has been deprecated and should be removed before 1.0 */
-export type Appearance = "solid" | "clear" | "outline" | "transparent" | "minimal";
+export type Appearance = "clear" | "minimal" | "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" | "warning" | "success";
+export type Kind = "brand" | "danger" | "info" | "inverse" | "neutral" | "warning" | "success";
 export type Layout = "horizontal" | "vertical" | "grid";
 export type LogicalFlowPosition = "inline-start" | "inline-end" | "block-start" | "block-end";
 export type Position = "start" | "end";
diff --git a/src/components/modal/modal.e2e.ts b/src/components/modal/modal.e2e.ts
index 462e34a5334..0582c66c303 100644
--- a/src/components/modal/modal.e2e.ts
+++ b/src/components/modal/modal.e2e.ts
@@ -485,7 +485,7 @@ describe("calcite-modal accessibility checks", () => {
       <calcite-modal aria-labelledby="modal-title" is-active>
         <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/components/modal/modal.stories.ts b/src/components/modal/modal.stories.ts
index 5d5a3bdd1ab..bc2375dfc9e 100644
--- a/src/components/modal/modal.stories.ts
+++ b/src/components/modal/modal.stories.ts
@@ -30,7 +30,7 @@ export const simple = (): string => html`
     <div slot="content">
       <p>The small modal is perfect for short confirmation dialogs or very compact interfaces with few elements.</p>
     </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>
@@ -58,7 +58,7 @@ export const darkThemeRTLCustomSize_TestOnly = (): string => html`
         customize the size using the width attribute.
       </p>
     </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>
@@ -80,7 +80,7 @@ export const withTooltips_TestOnly = (): string => html`
       et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.
     </div>
-    <calcite-button id="back-button-modal" slot="back" color="neutral" icon="chevron-left" width="full"
+    <calcite-button id="back-button-modal" slot="back" kind="neutral" icon="chevron-left" width="full"
       >Back
     </calcite-button>
     <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
diff --git a/src/components/panel/panel.stories.ts b/src/components/panel/panel.stories.ts
index a18a8160ff5..6d7b9fe8a91 100644
--- a/src/components/panel/panel.stories.ts
+++ b/src/components/panel/panel.stories.ts
@@ -98,7 +98,7 @@ const contentHTML = html`
 `;
 
 const footerHTML = html`
-  <calcite-button slot="${SLOTS.footer}" width="half" appearance="clear">Naw.</calcite-button>
+  <calcite-button slot="${SLOTS.footer}" width="half" appearance="outline">Naw.</calcite-button>
   <calcite-button slot="${SLOTS.footer}" width="half">Yeah!</calcite-button>
 `;
 
diff --git a/src/components/pick-list/pick-list.stories.ts b/src/components/pick-list/pick-list.stories.ts
index 8e8de27583e..2118655fa7c 100644
--- a/src/components/pick-list/pick-list.stories.ts
+++ b/src/components/pick-list/pick-list.stories.ts
@@ -73,7 +73,7 @@ const action = html`
     slot="actions-end"
     label="click-me"
     onClick="console.log('clicked');"
-    appearance="clear"
+    appearance="outline"
     scale="s"
     icon="information"
   ></calcite-action>
diff --git a/src/components/shell/shell.stories.ts b/src/components/shell/shell.stories.ts
index 456619e0929..5b5133807a4 100644
--- a/src/components/shell/shell.stories.ts
+++ b/src/components/shell/shell.stories.ts
@@ -257,7 +257,7 @@ const advancedTrailingPanelHTMl = html`
           </calcite-block-section>
         </calcite-block-content>
       </calcite-block>
-      <calcite-button slot="footer-actions" width="half" appearance="clear">Cancel</calcite-button>
+      <calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
       <calcite-button slot="footer-actions" width="half">Save</calcite-button>
     </calcite-flow-item>
     <calcite-flow-item heading="Deeper flow item">
@@ -291,7 +291,7 @@ const advancedTrailingPanelHTMl = html`
           </calcite-block-section>
         </calcite-block-content>
       </calcite-block>
-      <calcite-button slot="footer-actions" width="half" appearance="clear">Cancel</calcite-button>
+      <calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
       <calcite-button slot="footer-actions" width="half">Save</calcite-button>
     </calcite-flow-item>
   </calcite-flow>
@@ -441,9 +441,9 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
           <calcite-button
             slot="footer-actions"
             width="half"
-            appearance="clear"
+            appearance="outline"
             alignment="center"
-            color="blue"
+            kind="brand"
             scale="m"
           >
             Cancel
@@ -453,7 +453,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
             width="half"
             alignment="center"
             appearance="solid"
-            color="blue"
+            kind="brand"
             scale="m"
           >
             Save
@@ -501,9 +501,9 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
           <calcite-button
             slot="footer-actions"
             width="half"
-            appearance="clear"
+            appearance="outline"
             alignment="center"
-            color="blue"
+            kind="brand"
             scale="m"
           >
             Cancel
@@ -513,7 +513,7 @@ background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
             width="half"
             alignment="center"
             appearance="solid"
-            color="blue"
+            kind="brand"
             scale="m"
           >
             Save
diff --git a/src/components/split-button/split-button.e2e.ts b/src/components/split-button/split-button.e2e.ts
index 10825114b7b..a649700f3b0 100644
--- a/src/components/split-button/split-button.e2e.ts
+++ b/src/components/split-button/split-button.e2e.ts
@@ -63,7 +63,7 @@ describe("calcite-split-button", () => {
       </calcite-split-button>`);
     const element = await page.find("calcite-split-button");
     expect(element).toEqualAttribute("scale", "m");
-    expect(element).toEqualAttribute("color", "blue");
+    expect(element).toEqualAttribute("kind", "brand");
     expect(element).toEqualAttribute("dropdown-icon-type", "chevron");
     expect(element).toEqualAttribute("width", "auto");
   });
@@ -87,7 +87,7 @@ describe("calcite-split-button", () => {
     await page.setContent(`
       <calcite-split-button
           scale="s"
-          color="red"
+          kind="danger"
           dropdown-icon-type="caret"
           loading
           disabled
@@ -99,7 +99,7 @@ describe("calcite-split-button", () => {
     const primaryButton = await page.find("calcite-split-button >>> calcite-button");
     const dropdownButton = await page.find("calcite-split-button >>> calcite-dropdown calcite-button");
     expect(element).toEqualAttribute("scale", "s");
-    expect(element).toEqualAttribute("color", "red");
+    expect(element).toEqualAttribute("kind", "danger");
     expect(element).toEqualAttribute("dropdown-icon-type", "caret");
     expect(element).toHaveAttribute("loading");
     expect(element).toHaveAttribute("disabled");
diff --git a/src/components/split-button/split-button.scss b/src/components/split-button/split-button.scss
index 6b4c38e560f..466a4179795 100644
--- a/src/components/split-button/split-button.scss
+++ b/src/components/split-button/split-button.scss
@@ -12,60 +12,60 @@
 }
 
 :host {
-  &:host([color="blue"]) {
+  &:host([kind="brand"]) {
     --calcite-split-button-background: theme("colors.brand");
     --calcite-split-button-divider: theme("colors.background.foreground.1");
   }
-  &:host([color="red"]) {
+  &:host([kind="danger"]) {
     --calcite-split-button-background: theme("colors.danger");
     --calcite-split-button-divider: theme("colors.background.foreground.1");
   }
-  &:host([color="neutral"]) {
+  &:host([kind="neutral"]) {
     --calcite-split-button-background: theme("colors.background.foreground.3");
     --calcite-split-button-divider: theme("colors.color.1");
   }
-  &:host([color="inverse"]) {
+  &:host([kind="inverse"]) {
     --calcite-split-button-background: var(--calcite-ui-inverse);
     --calcite-split-button-divider: theme("colors.background.foreground.1");
   }
 }
 
 :host([appearance="transparent"]) {
-  &:host([color="blue"]) {
+  &:host([kind="brand"]) {
     --calcite-split-button-divider: theme("colors.brand");
   }
-  &:host([color="red"]) {
+  &:host([kind="danger"]) {
     --calcite-split-button-divider: theme("colors.danger");
   }
-  &:host([color="neutral"]) {
+  &:host([kind="neutral"]) {
     --calcite-split-button-divider: theme("colors.color.1");
   }
-  &:host([color="inverse"]) {
+  &:host([kind="inverse"]) {
     --calcite-split-button-divider: theme("colors.background.foreground.1");
   }
 }
 
-:host([appearance="clear"]),
+:host([appearance="outline"]),
 :host([appearance="transparent"]) {
   --calcite-split-button-background: transparent;
 }
 
-:host([appearance="outline"]) {
+:host([appearance="outline-fill"]) {
   --calcite-split-button-background: theme("colors.background.foreground.1");
 }
 
-:host([appearance="clear"]),
-:host([appearance="outline"]) {
-  &:host([color="blue"]) {
+:host([appearance="outline"]),
+:host([appearance="outline-fill"]) {
+  &:host([kind="brand"]) {
     --calcite-split-button-divider: theme("colors.brand");
   }
-  &:host([color="red"]) {
+  &:host([kind="danger"]) {
     --calcite-split-button-divider: theme("colors.danger");
   }
-  &:host([color="neutral"]) {
+  &:host([kind="neutral"]) {
     --calcite-split-button-divider: theme("colors.background.foreground.3");
   }
-  &:host([color="inverse"]) {
+  &:host([kind="inverse"]) {
     --calcite-split-button-divider: var(--calcite-ui-inverse);
   }
 }
@@ -92,9 +92,8 @@
   background-color: var(--calcite-split-button-divider);
 }
 
-:host([appearance="outline"]),
-:host([appearance="clear"]),
-:host([appearance="minimal"]) {
+:host([appearance="outline-fill"]),
+:host([appearance="outline"]) {
   .split-button__divider-container {
     border-block: 1px solid var(--calcite-split-button-divider);
   }
@@ -103,21 +102,19 @@
   }
 }
 
-:host([appearance="outline"]:hover),
-:host([appearance="clear"]:hover),
-:host([appearance="minimal"]):hover {
+:host([appearance="outline-fill"]:hover),
+:host([appearance="outline"]:hover) {
   .split-button__divider-container {
     background-color: var(--calcite-split-button-divider);
   }
 }
 
-:host([appearance="outline"]:focus-within),
-:host([appearance="clear"]:focus-within),
-:host([appearance="minimal"]:focus-within) {
-  &:host([color="blue"]) {
+:host([appearance="outline-fill"]:focus-within),
+:host([appearance="outline"]:focus-within) {
+  &:host([kind="brand"]) {
     --calcite-split-button-divider: theme("colors.brand-press");
   }
-  &:host([color="red"]) {
+  &:host([kind="danger"]) {
     --calcite-split-button-divider: theme("colors.danger-press");
   }
   .split-button__divider-container {
diff --git a/src/components/split-button/split-button.stories.ts b/src/components/split-button/split-button.stories.ts
index 778d66ca2ac..b355bd66d28 100644
--- a/src/components/split-button/split-button.stories.ts
+++ b/src/components/split-button/split-button.stories.ts
@@ -16,8 +16,8 @@ export const simple = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button
       active
-      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
       scale="${select("size", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
       ${boolean("loading", false)}
@@ -40,7 +40,8 @@ export const simple = (): string => html`
 export const iconEnd_TestOnly = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
       scale="${select("size", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
       ${boolean("loading", false)}
@@ -63,7 +64,8 @@ export const iconEnd_TestOnly = (): string => html`
 export const iconStartAndIconEnd = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
       scale="${select("size", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
       ${boolean("loading", false)}
@@ -87,8 +89,8 @@ export const iconStartAndIconEnd = (): string => html`
 export const darkThemeRTL_TestOnly = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button
-      appearance="${select("appearance", ["solid", "outline", "clear", "transparent"], "solid")}"
-      color="${select("color", ["blue", "red", "neutral", "inverse"], "blue")}"
+      appearance="${select("appearance", ["solid", "outline", "outline-fill", "transparent"], "solid")}"
+      kind="${select("kind", ["brand", "danger", "inverse", "neutral"], "brand")}"
       scale="${select("size", ["s", "m", "l"], "m")}"
       width="${select("width", ["auto", "half", "full"], "auto")}"
       ${boolean("loading", false)}
diff --git a/src/components/split-button/split-button.tsx b/src/components/split-button/split-button.tsx
index 479ffba93a0..483afb78868 100644
--- a/src/components/split-button/split-button.tsx
+++ b/src/components/split-button/split-button.tsx
@@ -1,7 +1,7 @@
 import { Component, Element, Event, EventEmitter, h, Prop, VNode, Watch } from "@stencil/core";
 import { CSS } from "./resources";
-import { ButtonAppearance, ButtonColor, DropdownIconType } from "../button/interfaces";
-import { FlipContext, Scale, Width } from "../interfaces";
+import { DropdownIconType } from "../button/interfaces";
+import { Appearance, FlipContext, Kind, Scale, Width } from "../interfaces";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 
@@ -19,10 +19,14 @@ export class SplitButton implements InteractiveComponent {
   @Element() el: HTMLCalciteSplitButtonElement;
 
   /** Specifies the appearance style of the component. */
-  @Prop({ reflect: true }) appearance: ButtonAppearance = "solid";
+  @Prop({ reflect: true }) appearance: Extract<
+    "outline" | "outline-fill" | "solid" | "transparent",
+    Appearance
+  > = "solid";
 
-  /** Specifies the color of the component. */
-  @Prop({ reflect: true }) color: ButtonColor = "blue";
+  /** Specifies the kind of the component (will apply to border and background if applicable). */
+  @Prop({ reflect: true }) kind: Extract<"brand" | "danger" | "inverse" | "neutral", Kind> =
+    "brand";
 
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @Prop({ reflect: true }) disabled = false;
@@ -125,11 +129,11 @@ export class SplitButton implements InteractiveComponent {
       <div class={widthClasses}>
         <calcite-button
           appearance={this.appearance}
-          color={this.color}
           disabled={this.disabled}
           icon-end={this.primaryIconEnd ? this.primaryIconEnd : null}
           icon-start={this.primaryIconStart ? this.primaryIconStart : null}
           iconFlipRtl={this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null}
+          kind={this.kind}
           label={this.primaryLabel}
           loading={this.loading}
           onClick={this.calciteSplitButtonPrimaryClickHandler}
@@ -154,9 +158,9 @@ export class SplitButton implements InteractiveComponent {
         >
           <calcite-button
             appearance={this.appearance}
-            color={this.color}
             disabled={this.disabled}
             icon-start={this.dropdownIcon}
+            kind={this.kind}
             label={this.dropdownLabel}
             scale={this.scale}
             slot="trigger"
diff --git a/src/components/tooltip/tooltip.stories.ts b/src/components/tooltip/tooltip.stories.ts
index 75de86edbdf..28cda98b84c 100644
--- a/src/components/tooltip/tooltip.stories.ts
+++ b/src/components/tooltip/tooltip.stories.ts
@@ -7,7 +7,7 @@ import { themesDarkDefault } from "../../../.storybook/utils";
 
 const contentHTML = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua`;
 
-const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button appearance="transparent" color="neutral" title="Reference element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
+const referenceElementHTML = `Ut enim ad minim veniam, quis <calcite-button appearance="transparent" kind="neutral" title="Reference element" id="reference-element">nostrud exercitation</calcite-button> ullamco laboris nisi ut aliquip ex ea commodo consequat.`;
 
 export default {
   title: "Components/Tooltip",
diff --git a/src/components/value-list/value-list.stories.ts b/src/components/value-list/value-list.stories.ts
index 7268874a063..df0b9806693 100644
--- a/src/components/value-list/value-list.stories.ts
+++ b/src/components/value-list/value-list.stories.ts
@@ -80,7 +80,7 @@ const action = html`
     slot="actions-end"
     label="click-me"
     onClick="console.log('clicked');"
-    appearance="clear"
+    appearance="outline"
     scale="s"
     icon="ellipsis"
   ></calcite-action>
diff --git a/src/demos/_assets/demo-template.html b/src/demos/_assets/demo-template.html
index c3841f879fc..1a111c855b7 100644
--- a/src/demos/_assets/demo-template.html
+++ b/src/demos/_assets/demo-template.html
@@ -3,7 +3,7 @@
   <script src="/demos/_assets/demo-template.js"></script>
   <header class="demo-header">
     <div class="demo-header__leading-content">
-      <calcite-button color="neutral" icon-start="arrowLeft" appearance="transparent" width="full" href="/"
+      <calcite-button kind="neutral" icon-start="arrowLeft" appearance="transparent" width="full" href="/"
         >Home</calcite-button
       >
     </div>
diff --git a/src/demos/alert.html b/src/demos/alert.html
index d1b79b5a210..74ae57b074e 100644
--- a/src/demos/alert.html
+++ b/src/demos/alert.html
@@ -114,7 +114,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-s').setAttribute('open', '')"
@@ -125,7 +125,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-autoclose').setAttribute('open', '')"
@@ -136,7 +136,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-icon').setAttribute('open', '')"
@@ -147,7 +147,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-icon-link').setAttribute('open', '')"
@@ -163,7 +163,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-s-info').setAttribute('open', '')"
@@ -174,7 +174,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-info-autoclose').setAttribute('open', '')"
@@ -185,7 +185,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-info-icon').setAttribute('open', '')"
@@ -196,7 +196,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-s-info-icon-link').setAttribute('open', '')"
@@ -212,7 +212,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-s-success').setAttribute('open', '')"
@@ -223,7 +223,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-s-success-autoclose').setAttribute('open', '')"
@@ -234,7 +234,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-s-success-icon').setAttribute('open', '')"
@@ -245,7 +245,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-s-success-icon-link').setAttribute('open', '')"
@@ -261,7 +261,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-s-warning').setAttribute('open', '')"
@@ -272,7 +272,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-s-warning-autoclose').setAttribute('open', '')"
@@ -283,7 +283,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-s-warning-icon').setAttribute('open', '')"
@@ -294,7 +294,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-s-warning-icon-link').setAttribute('open', '')"
@@ -310,7 +310,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-s-danger').setAttribute('open', '')"
@@ -321,7 +321,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-s-danger-autoclose').setAttribute('open', '')"
@@ -332,7 +332,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-s-danger-icon').setAttribute('open', '')"
@@ -343,7 +343,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-s-danger-icon-link').setAttribute('open', '')"
@@ -369,7 +369,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-m').setAttribute('open', '')"
@@ -380,7 +380,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-autoclose').setAttribute('open', '')"
@@ -391,7 +391,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-icon').setAttribute('open', '')"
@@ -402,7 +402,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-icon-link').setAttribute('open', '')"
@@ -418,7 +418,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="medium default"
                 scale="s"
                 onclick="document.querySelector('#default-m-info').setAttribute('open', '')"
@@ -429,7 +429,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-info-autoclose').setAttribute('open', '')"
@@ -440,7 +440,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-info-icon').setAttribute('open', '')"
@@ -451,7 +451,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-m-info-icon-link').setAttribute('open', '')"
@@ -467,7 +467,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="medium default"
                 scale="s"
                 onclick="document.querySelector('#default-m-success').setAttribute('open', '')"
@@ -478,7 +478,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-m-success-autoclose').setAttribute('open', '')"
@@ -489,7 +489,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, default, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-m-success-icon').setAttribute('open', '')"
@@ -500,7 +500,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-m-success-icon-link').setAttribute('open', '')"
@@ -516,7 +516,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="medium default"
                 scale="s"
                 onclick="document.querySelector('#default-m-warning').setAttribute('open', '')"
@@ -527,7 +527,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-m-warning-autoclose').setAttribute('open', '')"
@@ -538,7 +538,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, default, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-m-warning-icon').setAttribute('open', '')"
@@ -549,7 +549,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-m-warning-icon-link').setAttribute('open', '')"
@@ -565,7 +565,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="medium default"
                 scale="s"
                 onclick="document.querySelector('#default-m-danger').setAttribute('open', '')"
@@ -576,7 +576,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-m-danger-autoclose').setAttribute('open', '')"
@@ -587,7 +587,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, default, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-m-danger-icon').setAttribute('open', '')"
@@ -598,7 +598,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, medium, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-m-danger-icon-link').setAttribute('open', '')"
@@ -624,7 +624,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="small default"
                 scale="s"
                 onclick="document.querySelector('#default-l').setAttribute('open', '')"
@@ -635,7 +635,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-autoclose').setAttribute('open', '')"
@@ -646,7 +646,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-icon').setAttribute('open', '')"
@@ -657,7 +657,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, small, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-icon-link').setAttribute('open', '')"
@@ -673,7 +673,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="large default"
                 scale="s"
                 onclick="document.querySelector('#default-l-info').setAttribute('open', '')"
@@ -684,7 +684,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-info-autoclose').setAttribute('open', '')"
@@ -695,7 +695,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, default, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-info-icon').setAttribute('open', '')"
@@ -706,7 +706,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title"
                 scale="s"
                 onclick="document.querySelector('#default-l-info-icon-link').setAttribute('open', '')"
@@ -722,7 +722,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="large default"
                 scale="s"
                 onclick="document.querySelector('#default-l-success').setAttribute('open', '')"
@@ -733,7 +733,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-l-success-autoclose').setAttribute('open', '')"
@@ -744,7 +744,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, default, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-l-success-icon').setAttribute('open', '')"
@@ -755,7 +755,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, success"
                 scale="s"
                 onclick="document.querySelector('#default-l-success-icon-link').setAttribute('open', '')"
@@ -771,7 +771,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="large default"
                 scale="s"
                 onclick="document.querySelector('#default-l-warning').setAttribute('open', '')"
@@ -782,7 +782,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-l-warning-autoclose').setAttribute('open', '')"
@@ -793,7 +793,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, default, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-l-warning-icon').setAttribute('open', '')"
@@ -804,7 +804,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, warning"
                 scale="s"
                 onclick="document.querySelector('#default-l-warning-icon-link').setAttribute('open', '')"
@@ -820,7 +820,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="large default"
                 scale="s"
                 onclick="document.querySelector('#default-l-danger').setAttribute('open', '')"
@@ -831,7 +831,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-l-danger-autoclose').setAttribute('open', '')"
@@ -842,7 +842,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, default, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-l-danger-icon').setAttribute('open', '')"
@@ -853,7 +853,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
 
             <div>
               <calcite-button
-                appearance="clear"
+                appearance="outline"
                 title="default, large, autoclose, icon, title, danger"
                 scale="s"
                 onclick="document.querySelector('#default-l-danger-icon-link').setAttribute('open', '')"
@@ -944,7 +944,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
             <div class="alert-insert-in-dom">
               <calcite-button
                 title="created alert"
-                appearance="clear"
+                appearance="outline"
                 scale="s"
                 onclick="createExampleAlert('create-1')"
               >
@@ -954,7 +954,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
               <calcite-button
                 title="created alert"
                 scale="s"
-                appearance="clear"
+                appearance="outline"
                 onclick="createExampleAlert('created-2')"
               >
                 Created alert 2
@@ -966,7 +966,7 @@ <h1 style="margin: 0 auto; text-align: center">Alert</h1>
           <div class="second-container-margin">
             <p>Using the setFocus() method (once opened)</p>
             <div>
-              <calcite-button title="created alert" appearance="clear" scale="s" onclick="focusItems()">
+              <calcite-button title="created alert" appearance="outline" scale="s" onclick="focusItems()">
                 Focus first item
               </calcite-button>
 
diff --git a/src/demos/animation/animation.html b/src/demos/animation/animation.html
index 1c87169605a..05276094280 100644
--- a/src/demos/animation/animation.html
+++ b/src/demos/animation/animation.html
@@ -12,16 +12,19 @@
         padding: 0 2rem;
         align-items: center;
       }
+
       article {
         min-height: 8rem;
         display: flex;
         align-items: center;
       }
+
       pre {
         margin-bottom: 0;
       }
     </style>
   </head>
+
   <body>
     <demo-dom-swapper>
       <main>
@@ -40,7 +43,7 @@ <h2>Global animation classes</h2>
             };
           </script>
           <calcite-button
-            color="red"
+            kind="danger"
             onclick="document.querySelectorAll('calcite-notice').forEach(node => node.active = false)"
           >
             Reset
diff --git a/src/demos/button.html b/src/demos/button.html
index 4aba31da779..50f44c0f5dd 100644
--- a/src/demos/button.html
+++ b/src/demos/button.html
@@ -94,6 +94,7 @@
     <!-- scripts -->
     <script src="_assets/head.js"></script>
   </head>
+
   <body>
     <demo-dom-swapper>
       <!--
@@ -111,13 +112,13 @@
         <div>
           <p>Default</p>
           <p>
-            <calcite-button color="blue" scale="s"> Button </calcite-button>
+            <calcite-button kind="brand" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="blue" scale="m"> Button </calcite-button>
+            <calcite-button kind="brand" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="blue" scale="l"> Button </calcite-button>
+            <calcite-button kind="brand" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -125,17 +126,17 @@
         <div>
           <p>With icons</p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="s">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="m">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="l">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="l">
               Button
             </calcite-button>
           </p>
@@ -145,13 +146,13 @@
         <div>
           <p>Icon only</p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="s"> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="m"> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="l"> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="l"> </calcite-button>
           </p>
         </div>
 
@@ -159,13 +160,13 @@
         <div>
           <p>Rounded</p>
           <p>
-            <calcite-button color="blue" scale="s" round> Button </calcite-button>
+            <calcite-button kind="brand" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="blue" scale="m" round> Button </calcite-button>
+            <calcite-button kind="brand" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="blue" scale="l" round> Button </calcite-button>
+            <calcite-button kind="brand" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -173,17 +174,17 @@
         <div>
           <p>Rounded with icons</p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="s" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="s" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="m" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="m" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="l" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="l" round>
               Button
             </calcite-button>
           </p>
@@ -193,13 +194,13 @@
         <div>
           <p>Rounded icon only</p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="s" round> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="m" round> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="blue" scale="l" round> </calcite-button>
+            <calcite-button icon-start="save" kind="brand" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -217,30 +218,30 @@
         <!-- Solid Neutral -->
         <div>
           <p>
-            <calcite-button color="neutral" scale="s"> Button </calcite-button>
+            <calcite-button kind="neutral" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="neutral" scale="m"> Button </calcite-button>
+            <calcite-button kind="neutral" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="neutral" scale="l"> Button </calcite-button>
+            <calcite-button kind="neutral" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="s">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="m">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="l">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="l">
               Button
             </calcite-button>
           </p>
@@ -249,43 +250,43 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="s"> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="m"> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="l"> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button color="neutral" scale="s" round> Button </calcite-button>
+            <calcite-button kind="neutral" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="neutral" scale="m" round> Button </calcite-button>
+            <calcite-button kind="neutral" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="neutral" scale="l" round> Button </calcite-button>
+            <calcite-button kind="neutral" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
         <!-- Rounded with icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="s" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="s" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="m" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="m" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="l" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="neutral" scale="l" round>
               Button
             </calcite-button>
           </p>
@@ -294,13 +295,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="s" round> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="m" round> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="neutral" scale="l" round> </calcite-button>
+            <calcite-button icon-start="save" kind="neutral" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -318,30 +319,30 @@
         <!-- Solid Inverse -->
         <div>
           <p>
-            <calcite-button color="inverse" scale="s"> Button </calcite-button>
+            <calcite-button kind="inverse" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="inverse" scale="m"> Button </calcite-button>
+            <calcite-button kind="inverse" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="inverse" scale="l"> Button </calcite-button>
+            <calcite-button kind="inverse" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="s">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="m">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="l">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="l">
               Button
             </calcite-button>
           </p>
@@ -350,43 +351,43 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="s"> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="m"> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="l"> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button color="inverse" scale="s" round> Button </calcite-button>
+            <calcite-button kind="inverse" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="inverse" scale="m" round> Button </calcite-button>
+            <calcite-button kind="inverse" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="inverse" scale="l" round> Button </calcite-button>
+            <calcite-button kind="inverse" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
         <!-- Rounded with icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="s" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="s" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="m" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="m" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="l" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="inverse" scale="l" round>
               Button
             </calcite-button>
           </p>
@@ -395,13 +396,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="s" round> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="m" round> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="inverse" scale="l" round> </calcite-button>
+            <calcite-button icon-start="save" kind="inverse" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -419,30 +420,30 @@
         <!-- Solid Danger -->
         <div>
           <p>
-            <calcite-button color="red" scale="s"> Button </calcite-button>
+            <calcite-button kind="danger" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="red" scale="m"> Button </calcite-button>
+            <calcite-button kind="danger" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="red" scale="l"> Button </calcite-button>
+            <calcite-button kind="danger" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="s">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="m">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="l">
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="l">
               Button
             </calcite-button>
           </p>
@@ -451,43 +452,43 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="red" scale="s"> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="red" scale="m"> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="red" scale="l"> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button color="red" scale="s" round> Button </calcite-button>
+            <calcite-button kind="danger" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="red" scale="m" round> Button </calcite-button>
+            <calcite-button kind="danger" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button color="red" scale="l" round> Button </calcite-button>
+            <calcite-button kind="danger" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
         <!-- Rounded with icons -->
         <div>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="s" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="s" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="m" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="m" round>
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="arrow-left" icon-end="arrow-right" color="red" scale="l" round>
+            <calcite-button icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="l" round>
               Button
             </calcite-button>
           </p>
@@ -496,13 +497,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button icon-start="save" color="red" scale="s" round> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="red" scale="m" round> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button icon-start="save" color="red" scale="l" round> </calcite-button>
+            <calcite-button icon-start="save" kind="danger" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -512,26 +513,26 @@
 
       <!--
       ***************************************************************
-      * CLEAR BRAND
+      * OUTLINE BRAND
       ***************************************************************
     -->
       <div class="main-container">
         <div>
           <p>&nbsp;</p>
-          <p class="right-align">Clear Brand</p>
+          <p class="right-align">Outline Brand</p>
         </div>
 
-        <!-- Clear Brand -->
+        <!-- Outline Brand -->
         <div>
           <p>Default</p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -539,17 +540,17 @@
         <div>
           <p>With icons</p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="s">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="m">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="blue" scale="l">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="brand" scale="l">
               Button
             </calcite-button>
           </p>
@@ -559,13 +560,13 @@
         <div>
           <p>Icon only</p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="l"> </calcite-button>
           </p>
         </div>
 
@@ -573,13 +574,13 @@
         <div>
           <p>Rounded</p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="blue" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="brand" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -588,10 +589,10 @@
           <p>Rounded with icons</p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="blue"
+              kind="brand"
               scale="s"
               round
             >
@@ -600,10 +601,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="blue"
+              kind="brand"
               scale="m"
               round
             >
@@ -612,10 +613,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="blue"
+              kind="brand"
               scale="l"
               round
             >
@@ -628,54 +629,72 @@
         <div>
           <p>Rounded icon only</p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="blue" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="brand" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
 
       <!--
       ***************************************************************
-      * CLEAR NETURAL
+      * OUTLINE NETURAL
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Clear Neutral</p>
+          <p class="right-align">Outline Neutral</p>
         </div>
 
-        <!-- Clear Neutral -->
+        <!-- Outline Neutral -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="s">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="neutral"
+              scale="s"
+            >
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="m">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="neutral"
+              scale="m"
+            >
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="neutral" scale="l">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="neutral"
+              scale="l"
+            >
               Button
             </calcite-button>
           </p>
@@ -684,26 +703,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="neutral" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -711,10 +730,10 @@
         <div>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="s"
               round
             >
@@ -723,10 +742,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="m"
               round
             >
@@ -735,10 +754,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="l"
               round
             >
@@ -750,54 +769,72 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="neutral" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
 
       <!--
       ***************************************************************
-      * CLEAR INVERSE
+      * OUTLINE INVERSE
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Clear Inverse</p>
+          <p class="right-align">Outline Inverse</p>
         </div>
 
-        <!-- Clear Inverse -->
+        <!-- Outline Inverse -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="s">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="inverse"
+              scale="s"
+            >
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="m">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="inverse"
+              scale="m"
+            >
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="inverse" scale="l">
+            <calcite-button
+              appearance="outline"
+              icon-start="arrow-left"
+              icon-end="arrow-right"
+              kind="inverse"
+              scale="l"
+            >
               Button
             </calcite-button>
           </p>
@@ -806,26 +843,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="inverse" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -833,10 +870,10 @@
         <div>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="s"
               round
             >
@@ -845,10 +882,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="m"
               round
             >
@@ -857,10 +894,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="l"
               round
             >
@@ -872,54 +909,54 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="inverse" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
 
       <!--
       ***************************************************************
-      * CLEAR DANGER
+      * OUTLINE DANGER
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Clear Danger</p>
+          <p class="right-align">Outline Danger</p>
         </div>
 
-        <!-- Clear Danger -->
+        <!-- Outline Danger -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="red" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="red" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="red" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="s">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="m">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="l">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="l">
               Button
             </calcite-button>
           </p>
@@ -928,26 +965,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="clear" color="red" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="red" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" color="red" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -955,10 +992,10 @@
         <div>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="s"
               round
             >
@@ -967,10 +1004,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="m"
               round
             >
@@ -979,10 +1016,10 @@
           </p>
           <p>
             <calcite-button
-              appearance="clear"
+              appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="l"
               round
             >
@@ -994,13 +1031,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="clear" icon-start="save" color="red" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -1010,15 +1047,15 @@
 
       <!--
       ***************************************************************
-      * OUTLINE BRAND
+      * OUTLINE-FILL BRAND
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Outline Brand</p>
+          <p class="right-align">Outline-fill Brand</p>
         </div>
 
-        <!-- Outline Brand -->
+        <!-- Outline-fill Brand -->
         <div>
           <p>
             <calcite-button appearance="outline" scale="s"> Button </calcite-button>
@@ -1111,24 +1148,24 @@
 
       <!--
       ***************************************************************
-      * OUTLINE NETURAL
+      * OUTLINE-FILL NETURAL
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Outline Neutral</p>
+          <p class="right-align">Outline-fill Neutral</p>
         </div>
 
-        <!-- Outline Neutral -->
+        <!-- Outline-fill Neutral -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -1139,7 +1176,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="s"
             >
               Button
@@ -1150,7 +1187,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="m"
             >
               Button
@@ -1161,7 +1198,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="l"
             >
               Button
@@ -1172,26 +1209,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="neutral" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="neutral" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1202,7 +1239,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="s"
               round
             >
@@ -1214,7 +1251,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="m"
               round
             >
@@ -1226,7 +1263,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="l"
               round
             >
@@ -1238,37 +1275,37 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="neutral" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="neutral" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
 
       <!--
       ***************************************************************
-      * OUTLINE INVERSE
+      * OUTLINE-FILL INVERSE
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Outline Inverse</p>
+          <p class="right-align">Outline-fill Inverse</p>
         </div>
 
-        <!-- Outline Inverse -->
+        <!-- Outline-fill Inverse -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -1279,7 +1316,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="s"
             >
               Button
@@ -1290,7 +1327,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="m"
             >
               Button
@@ -1301,7 +1338,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="l"
             >
               Button
@@ -1312,26 +1349,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="inverse" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="inverse" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1342,7 +1379,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="s"
               round
             >
@@ -1354,7 +1391,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="m"
               round
             >
@@ -1366,7 +1403,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="l"
               round
             >
@@ -1378,54 +1415,54 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="inverse" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="inverse" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
 
       <!--
       ***************************************************************
-      * OUTLINE DANGER
+      * OUTLINE-FILL DANGER
       ***************************************************************
     -->
       <div class="main-container">
         <div>
-          <p class="right-align">Outline Danger</p>
+          <p class="right-align">Outline-fill Danger</p>
         </div>
 
-        <!-- Outline Danger -->
+        <!-- Outline-fill Danger -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="red" scale="s"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="red" scale="m"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="red" scale="l"> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="l"> Button </calcite-button>
           </p>
         </div>
 
         <!-- With Icons -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="s">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="s">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="m">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="m">
               Button
             </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" color="red" scale="l">
+            <calcite-button appearance="outline" icon-start="arrow-left" icon-end="arrow-right" kind="danger" scale="l">
               Button
             </calcite-button>
           </p>
@@ -1434,26 +1471,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="s"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="m"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="l"> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="outline" color="red" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="red" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" color="red" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="outline" kind="danger" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1464,7 +1501,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="s"
               round
             >
@@ -1476,7 +1513,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="m"
               round
             >
@@ -1488,7 +1525,7 @@
               appearance="outline"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="l"
               round
             >
@@ -1500,13 +1537,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="s" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="m" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="outline" icon-start="save" color="red" scale="l" round> </calcite-button>
+            <calcite-button appearance="outline" icon-start="save" kind="danger" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -1628,13 +1665,13 @@
         <!-- Transparent Neutral -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="s"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="m"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="l"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -1645,7 +1682,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="s"
             >
               Button
@@ -1656,7 +1693,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="m"
             >
               Button
@@ -1667,7 +1704,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="l"
             >
               Button
@@ -1678,26 +1715,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="s"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="m"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="l"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="neutral" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="neutral" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1708,7 +1745,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="s"
               round
             >
@@ -1720,7 +1757,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="m"
               round
             >
@@ -1732,7 +1769,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="neutral"
+              kind="neutral"
               scale="l"
               round
             >
@@ -1744,16 +1781,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="s" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="m" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="neutral" scale="l" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="neutral" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -1771,13 +1805,13 @@
         <!-- Transparent Inverse -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="s"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="m"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="l"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -1788,7 +1822,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="s"
             >
               Button
@@ -1799,7 +1833,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="m"
             >
               Button
@@ -1810,7 +1844,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="l"
             >
               Button
@@ -1821,26 +1855,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="s"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="m"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="l"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="inverse" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="inverse" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1851,7 +1885,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="s"
               round
             >
@@ -1863,7 +1897,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="m"
               round
             >
@@ -1875,7 +1909,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="inverse"
+              kind="inverse"
               scale="l"
               round
             >
@@ -1887,16 +1921,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="s" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="m" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="inverse" scale="l" round>
-            </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="inverse" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -1914,13 +1945,13 @@
         <!-- Transparent Danger -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="s"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="s"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="m"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="m"> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="l"> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="l"> Button </calcite-button>
           </p>
         </div>
 
@@ -1931,7 +1962,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="s"
             >
               Button
@@ -1942,7 +1973,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="m"
             >
               Button
@@ -1953,7 +1984,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="l"
             >
               Button
@@ -1964,26 +1995,26 @@
         <!-- Icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="s"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="s"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="m"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="m"> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="l"> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="l"> </calcite-button>
           </p>
         </div>
 
         <!-- Rounded -->
         <div>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="s" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="s" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="m" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="m" round> Button </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" color="red" scale="l" round> Button </calcite-button>
+            <calcite-button appearance="transparent" kind="danger" scale="l" round> Button </calcite-button>
           </p>
         </div>
 
@@ -1994,7 +2025,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="s"
               round
             >
@@ -2006,7 +2037,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="m"
               round
             >
@@ -2018,7 +2049,7 @@
               appearance="transparent"
               icon-start="arrow-left"
               icon-end="arrow-right"
-              color="red"
+              kind="danger"
               scale="l"
               round
             >
@@ -2030,13 +2061,13 @@
         <!-- Rounded icon only -->
         <div>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="s" round> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="s" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="m" round> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="m" round> </calcite-button>
           </p>
           <p>
-            <calcite-button appearance="transparent" icon-start="save" color="red" scale="l" round> </calcite-button>
+            <calcite-button appearance="transparent" icon-start="save" kind="danger" scale="l" round> </calcite-button>
           </p>
         </div>
       </div>
@@ -2046,8 +2077,8 @@
 
       <!--
       ***************************************************************
-      * LOADER
-      ***************************************************************
+      * LOADER"
+      ***************************************************************"
     -->
       <div class="loader">
         <p class="loader-padding">Loader</p>
@@ -2069,25 +2100,25 @@
             <span> Change appearance: </span>
             <calcite-radio-group id="appearance-group">
               <calcite-radio-group-item value="solid" checked>solid</calcite-radio-group-item>
-              <calcite-radio-group-item value="clear">clear</calcite-radio-group-item>
               <calcite-radio-group-item value="outline">outline</calcite-radio-group-item>
+              <calcite-radio-group-item value="outline-fill">outline-fill</calcite-radio-group-item>
               <calcite-radio-group-item value="transparent">transparent</calcite-radio-group-item>
             </calcite-radio-group>
           </calcite-label>
           <calcite-label layout="inline">
-            <span> Change color: </span>
-            <calcite-radio-group id="color-group">
-              <calcite-radio-group-item value="blue">blue</calcite-radio-group-item>
+            <span> Change kind: </span>
+            <calcite-radio-group id="kind-group">
+              <calcite-radio-group-item value="brand">brand</calcite-radio-group-item>
               <calcite-radio-group-item value="neutral">neutral</calcite-radio-group-item>
               <calcite-radio-group-item value="inverse">inverse</calcite-radio-group-item>
-              <calcite-radio-group-item value="red" checked>red</calcite-radio-group-item>
+              <calcite-radio-group-item value="danger" checked>danger</calcite-radio-group-item>
             </calcite-radio-group>
           </calcite-label>
           <script>
             const loadingSwitch = document.querySelector("#loading-switch");
             const scaleRadios = document.querySelector("#scale-group");
             const appearanceRadios = document.querySelector("#appearance-group");
-            const colorRadios = document.querySelector("#color-group");
+            const kindRadios = document.querySelector("#kind-group");
             window.onload = () => {
               loadingSwitch.addEventListener("calciteSwitchChange", () => {
                 document.querySelectorAll(".loading-transition").forEach((button) => {
@@ -2104,9 +2135,9 @@
                   button.setAttribute("appearance", e.detail);
                 });
               });
-              colorRadios.addEventListener("calciteRadioGroupChange", (e) => {
+              kindRadios.addEventListener("calciteRadioGroupChange", (e) => {
                 document.querySelectorAll(".loading-transition").forEach((button) => {
-                  button.setAttribute("color", e.detail);
+                  button.setAttribute("kind", e.detail);
                 });
               });
             };
@@ -2114,43 +2145,43 @@
 
           <calcite-button
             class="loading-transition"
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-start="attachment"
           ></calcite-button>
           <calcite-button
             class="loading-transition"
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-end="download"
             round
           ></calcite-button>
           <calcite-button
             class="loading-transition"
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-start="attachment"
             icon-end="download"
           ></calcite-button>
           <calcite-button
             class="loading-transition"
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-start="attachment"
             round
             icon-end="download"
           ></calcite-button>
-          <calcite-button class="loading-transition" color="red" appearance="solid">Attachments</calcite-button>
-          <calcite-button class="loading-transition" color="red" appearance="solid" round>Attachments</calcite-button>
-          <calcite-button class="loading-transition" color="red" appearance="solid" icon-end="download"
+          <calcite-button class="loading-transition" kind="danger" appearance="solid">Attachments</calcite-button>
+          <calcite-button class="loading-transition" kind="danger" appearance="solid" round>Attachments</calcite-button>
+          <calcite-button class="loading-transition" kind="danger" appearance="solid" icon-end="download"
             >Attachments</calcite-button
           >
-          <calcite-button class="loading-transition" round color="red" appearance="solid" icon-end="download"
+          <calcite-button class="loading-transition" round kind="danger" appearance="solid" icon-end="download"
             >Attachments</calcite-button
           >
           <calcite-button
             class="loading-transition"
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-start="attachment"
             icon-end="download"
@@ -2159,7 +2190,7 @@
           <calcite-button
             class="loading-transition"
             round
-            color="red"
+            kind="danger"
             appearance="solid"
             icon-start="attachment"
             icon-end="download"
@@ -2368,19 +2399,19 @@
 
       <div class="set-focus-item">
         <div class="child">
-          <calcite-button appearance="clear" onclick="document.querySelector('#button-focus-example-1').setFocus()">
+          <calcite-button appearance="outline" onclick="document.querySelector('#button-focus-example-1').setFocus()">
             Focus Button 1
           </calcite-button>
         </div>
 
         <div class="child">
-          <calcite-button appearance="clear" onclick="document.querySelector('#button-focus-example-2').setFocus()">
+          <calcite-button appearance="outline" onclick="document.querySelector('#button-focus-example-2').setFocus()">
             Focus Button 2
           </calcite-button>
         </div>
 
         <div class="child">
-          <calcite-button appearance="clear" onclick="document.querySelector('#button-focus-input').setFocus()">
+          <calcite-button appearance="outline" onclick="document.querySelector('#button-focus-input').setFocus()">
             Focus Input
           </calcite-button>
         </div>
@@ -2473,7 +2504,7 @@
         </div>
 
         <div class="child">
-          <calcite-button color="inverse" aria-label="Add layer">
+          <calcite-button kind="inverse" aria-label="Add layer">
             <calcite-icon scale="m" icon="layer"></calcite-icon>
           </calcite-button>
         </div>
diff --git a/src/demos/card.html b/src/demos/card.html
index 7773e523662..ecf91fe1b12 100644
--- a/src/demos/card.html
+++ b/src/demos/card.html
@@ -95,18 +95,18 @@ <h3 slot="title">Portland Businesses</h3>
             <calcite-button
               type="button"
               slot="footer-leading"
-              color="neutral"
+              kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
             <div slot="footer-trailing">
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-2" icon-start="stairs">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-3" icon-start="ellipsis">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
               </calcite-button>
               <calcite-dropdown type="hover">
-                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" color="neutral" icon-start="caret-down">
+                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="brand" icon-start="caret-down">
                 </calcite-button>
                 <calcite-dropdown-group selection-mode="none">
                   <calcite-dropdown-item>View details</calcite-dropdown-item>
@@ -145,7 +145,7 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
                 id="card-icon-test-6"
                 scale="s"
                 appearance="transparent"
-                color="neutral"
+                kind="brand"
                 icon-start="check-circle-f"
               >
               </calcite-button>
@@ -153,7 +153,7 @@ <h3 slot="title">My great Workforce project that might wrap two lines</h3>
                 id="card-icon-test-7"
                 scale="s"
                 appearance="transparent"
-                color="neutral"
+                kind="brand"
                 icon-start="x-circle-f"
               >
               </calcite-button>
@@ -248,18 +248,18 @@ <h3 slot="title">Portland Businesses</h3>
             <calcite-button
               type="button"
               slot="footer-leading"
-              color="neutral"
+              kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
             <div slot="footer-trailing">
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-2" icon-start="stairs">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-3" icon-start="ellipsis">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
               </calcite-button>
               <calcite-dropdown type="hover">
-                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" color="neutral" icon-start="caret-down">
+                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="brand" icon-start="caret-down">
                 </calcite-button>
                 <calcite-dropdown-group selection-mode="none">
                   <calcite-dropdown-item>View details</calcite-dropdown-item>
@@ -290,18 +290,18 @@ <h3 slot="title">Portland Businesses</h3>
             <calcite-button
               type="button"
               slot="footer-leading"
-              color="neutral"
+              kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
             <div slot="footer-trailing">
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-2" icon-start="stairs">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-3" icon-start="ellipsis">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
               </calcite-button>
               <calcite-dropdown type="hover">
-                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" color="neutral" icon-start="caret-down">
+                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="brand" icon-start="caret-down">
                 </calcite-button>
                 <calcite-dropdown-group selection-mode="none">
                   <calcite-dropdown-item>View details</calcite-dropdown-item>
@@ -334,18 +334,18 @@ <h3 slot="title">Portland Businesses</h3>
             <calcite-button
               type="button"
               slot="footer-leading"
-              color="neutral"
+              kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
             <div slot="footer-trailing">
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-2" icon-start="stairs">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-3" icon-start="ellipsis">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
               </calcite-button>
               <calcite-dropdown type="hover">
-                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" color="neutral" icon-start="caret-down">
+                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="brand" icon-start="caret-down">
                 </calcite-button>
                 <calcite-dropdown-group selection-mode="none">
                   <calcite-dropdown-item>View details</calcite-dropdown-item>
@@ -376,18 +376,18 @@ <h3 slot="title">Portland Businesses</h3>
             <calcite-button
               type="button"
               slot="footer-leading"
-              color="neutral"
+              kind="brand"
               scale="s"
               id="card-icon-test-1"
               icon-start="check"
             ></calcite-button>
             <div slot="footer-trailing">
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-2" icon-start="stairs">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-2" icon-start="stairs">
               </calcite-button>
-              <calcite-button type="button" scale="s" color="neutral" id="card-icon-test-3" icon-start="ellipsis">
+              <calcite-button type="button" scale="s" kind="brand" id="card-icon-test-3" icon-start="ellipsis">
               </calcite-button>
               <calcite-dropdown type="hover">
-                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" color="neutral" icon-start="caret-down">
+                <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="brand" icon-start="caret-down">
                 </calcite-button>
                 <calcite-dropdown-group selection-mode="none">
                   <calcite-dropdown-item>View details</calcite-dropdown-item>
diff --git a/src/demos/fab.html b/src/demos/fab.html
index d0a9b2ae938..c593cdd0044 100644
--- a/src/demos/fab.html
+++ b/src/demos/fab.html
@@ -17,6 +17,7 @@
         font-size: var(--calcite-font-size-0);
         font-weight: var(--calcite-font-weight-medium);
       }
+
       .control,
       .parent-flex,
       span {
@@ -80,8 +81,8 @@
         <div class="child-flex right-aligned-text"></div>
         <div class="child-flex">Solid default</div>
         <div class="child-flex">Solid with text</div>
-        <div class="child-flex">Outline default</div>
-        <div class="child-flex">Outline with text</div>
+        <div class="child-flex">outline-fill default</div>
+        <div class="child-flex">outline-fill with text</div>
       </div>
 
       <!--
@@ -95,15 +96,15 @@
         <!-- solid default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="blue" appearance="solid"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="brand" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="blue" appearance="solid"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="brand" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="blue" appearance="solid"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="brand" appearance="solid"></calcite-fab>
           </div>
         </div>
 
@@ -116,7 +117,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
+              kind="brand"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -128,7 +129,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
+              kind="brand"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -140,28 +141,28 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
+              kind="brand"
               appearance="solid"
             ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline default -->
+        <!-- outline-fill default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="blue" appearance="outline"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="brand" appearance="outline-fill"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="blue" appearance="outline"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="brand" appearance="outline-fill"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="blue" appearance="outline"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="brand" appearance="outline-fill"></calcite-fab>
           </div>
         </div>
 
-        <!-- outline with text -->
+        <!-- outline-fill with text -->
         <div class="child-flex">
           <div>
             <calcite-fab
@@ -170,8 +171,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
-              appearance="outline"
+              kind="brand"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -182,8 +183,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
-              appearance="outline"
+              kind="brand"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -194,8 +195,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="blue"
-              appearance="outline"
+              kind="brand"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
         </div>
@@ -214,15 +215,15 @@
         <!-- neutral default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="neutral" appearance="solid"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="neutral" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="neutral" appearance="solid"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="neutral" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="neutral" appearance="solid"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="neutral" appearance="solid"></calcite-fab>
           </div>
         </div>
 
@@ -235,7 +236,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
+              kind="neutral"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -247,7 +248,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
+              kind="neutral"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -259,28 +260,46 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
+              kind="neutral"
               appearance="solid"
             ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline default -->
+        <!-- outline-fill default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="neutral" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="s"
+              icon="arrow-right"
+              label="FAB"
+              kind="neutral"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="neutral" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="m"
+              icon="arrow-right"
+              label="FAB"
+              kind="neutral"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="neutral" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="l"
+              icon="arrow-right"
+              label="FAB"
+              kind="neutral"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline with text -->
+        <!-- outline-fill with text -->
         <div class="child-flex">
           <div>
             <calcite-fab
@@ -289,8 +308,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
-              appearance="outline"
+              kind="neutral"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -301,8 +320,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
-              appearance="outline"
+              kind="neutral"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -313,8 +332,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="neutral"
-              appearance="outline"
+              kind="neutral"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
         </div>
@@ -333,15 +352,15 @@
         <!-- inverse default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="inverse" appearance="solid"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="inverse" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="inverse" appearance="solid"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="inverse" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="inverse" appearance="solid"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="inverse" appearance="solid"></calcite-fab>
           </div>
         </div>
 
@@ -354,7 +373,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
+              kind="inverse"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -366,7 +385,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
+              kind="inverse"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -378,28 +397,46 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
+              kind="inverse"
               appearance="solid"
             ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline default -->
+        <!-- outline-fill default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="inverse" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="s"
+              icon="arrow-right"
+              label="FAB"
+              kind="inverse"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="inverse" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="m"
+              icon="arrow-right"
+              label="FAB"
+              kind="inverse"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="inverse" appearance="outline"></calcite-fab>
+            <calcite-fab
+              scale="l"
+              icon="arrow-right"
+              label="FAB"
+              kind="inverse"
+              appearance="outline-fill"
+            ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline with text -->
+        <!-- outline-fill with text -->
         <div class="child-flex">
           <div>
             <calcite-fab
@@ -408,8 +445,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
-              appearance="outline"
+              kind="inverse"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -420,8 +457,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
-              appearance="outline"
+              kind="inverse"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -432,8 +469,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="inverse"
-              appearance="outline"
+              kind="inverse"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
         </div>
@@ -452,15 +489,15 @@
         <!-- inverse default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="red" appearance="solid"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="red" appearance="solid"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="red" appearance="solid"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="danger" appearance="solid"></calcite-fab>
           </div>
         </div>
 
@@ -473,7 +510,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
+              kind="danger"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -485,7 +522,7 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
+              kind="danger"
               appearance="solid"
             ></calcite-fab>
           </div>
@@ -497,28 +534,28 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
+              kind="danger"
               appearance="solid"
             ></calcite-fab>
           </div>
         </div>
 
-        <!-- outline default -->
+        <!-- outline-fill default -->
         <div class="child-flex">
           <div>
-            <calcite-fab scale="s" icon="arrow-right" label="FAB" color="red" appearance="outline"></calcite-fab>
+            <calcite-fab scale="s" icon="arrow-right" label="FAB" kind="danger" appearance="outline-fill"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="m" icon="arrow-right" label="FAB" color="red" appearance="outline"></calcite-fab>
+            <calcite-fab scale="m" icon="arrow-right" label="FAB" kind="danger" appearance="outline-fill"></calcite-fab>
           </div>
 
           <div>
-            <calcite-fab scale="l" icon="arrow-right" label="FAB" color="red" appearance="outline"></calcite-fab>
+            <calcite-fab scale="l" icon="arrow-right" label="FAB" kind="danger" appearance="outline-fill"></calcite-fab>
           </div>
         </div>
 
-        <!-- outline with text -->
+        <!-- outline-fill with text -->
         <div class="child-flex">
           <div>
             <calcite-fab
@@ -527,8 +564,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
-              appearance="outline"
+              kind="danger"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -539,8 +576,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
-              appearance="outline"
+              kind="danger"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
 
@@ -551,8 +588,8 @@
               label="FAB"
               text="FAB"
               text-enabled
-              color="red"
-              appearance="outline"
+              kind="danger"
+              appearance="outline-fill"
             ></calcite-fab>
           </div>
         </div>
diff --git a/src/demos/modal.html b/src/demos/modal.html
index 139b73f5981..c2ceb1fe598 100644
--- a/src/demos/modal.html
+++ b/src/demos/modal.html
@@ -68,7 +68,7 @@ <h3 slot="header">Small width and small scale modal</h3>
               slot="back"
               width="full"
               scale="s"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -95,7 +95,7 @@ <h3 slot="header">Small width and medium scale modal</h3>
               slot="back"
               width="full"
               scale="m"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -122,7 +122,7 @@ <h3 slot="header">Small width and large scale modal</h3>
               slot="back"
               width="full"
               scale="l"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -170,7 +170,7 @@ <h3 slot="header">Medium wdith and small scale modal</h3>
               slot="back"
               width="full"
               scale="s"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -209,7 +209,7 @@ <h3 slot="header">Medium width and medium scale modal</h3>
               slot="back"
               width="full"
               scale="m"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -248,7 +248,7 @@ <h3 slot="header">Medium width and large scale modal</h3>
               slot="back"
               width="full"
               scale="l"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
               >Back</calcite-button
@@ -285,7 +285,7 @@ <h3 slot="header">Large width and small scale modal</h3>
               slot="back"
               width="full"
               scale="s"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
             >
@@ -314,7 +314,7 @@ <h3 slot="header">Large width and medium scale modal</h3>
               slot="back"
               width="full"
               scale="m"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
             >
@@ -343,7 +343,7 @@ <h3 slot="header">Large width and large scale modal</h3>
               slot="back"
               width="full"
               scale="l"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-start="chevron-left"
             >
@@ -376,7 +376,7 @@ <h3 slot="header">Brand content!</h3>
             <div slot="content">
               <p>This is some great content</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="s">Add members now</calcite-button>
@@ -394,7 +394,7 @@ <h3 slot="header">Brand content!</h3>
             <div slot="content">
               <p>This is some great content</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="m">Add members now</calcite-button>
@@ -412,7 +412,7 @@ <h3 slot="header">Brand content!</h3>
             <div slot="content">
               <p>This is some great content</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="l">Add members now</calcite-button>
@@ -438,10 +438,10 @@ <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
-            <calcite-button slot="primary" width="full" scale="s" color="red">Delete</calcite-button>
+            <calcite-button slot="primary" width="full" scale="s" kind="danger">Delete</calcite-button>
           </calcite-modal>
 
           <calcite-button onClick="openModal('.js-modal-danger-s')" appearance="outline" scale="s">
@@ -456,10 +456,10 @@ <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
-            <calcite-button slot="primary" width="full" scale="m" color="red">Delete</calcite-button>
+            <calcite-button slot="primary" width="full" scale="m" kind="danger">Delete</calcite-button>
           </calcite-modal>
 
           <calcite-button onClick="openModal('.js-modal-danger-m')" appearance="outline" scale="s">
@@ -474,10 +474,10 @@ <h3 slot="header">Delete</h3>
             <div slot="content">
               <p>This will delete things and perform some desctructive action, do you wish to continue?</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
-            <calcite-button slot="primary" width="full" scale="l" color="red">Delete</calcite-button>
+            <calcite-button slot="primary" width="full" scale="l" kind="danger">Delete</calcite-button>
           </calcite-modal>
 
           <calcite-button onClick="openModal('.js-modal-danger-l')" appearance="outline" scale="s">
@@ -563,7 +563,7 @@ <h3 slot="header">Rejoice!</h3>
             <div slot="content">
               <p>Something successful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="s">Next</calcite-button>
@@ -581,7 +581,7 @@ <h3 slot="header">Rejoice!</h3>
             <div slot="content">
               <p>Something successful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="m">Next</calcite-button>
@@ -599,7 +599,7 @@ <h3 slot="header">Rejoice!</h3>
             <div slot="content">
               <p>Something successful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
@@ -625,7 +625,7 @@ <h3 slot="header">Hold on a second...</h3>
             <div slot="content">
               <p>Something warningful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="s" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
@@ -643,7 +643,7 @@ <h3 slot="header">Hold on a second...</h3>
             <div slot="content">
               <p>Something warningful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="m" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
@@ -661,7 +661,7 @@ <h3 slot="header">Hold on a second...</h3>
             <div slot="content">
               <p>Something warningful happened</p>
             </div>
-            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" color="red"
+            <calcite-button slot="secondary" width="full" scale="l" appearance="outline" kind="danger"
               >Cancel</calcite-button
             >
             <calcite-button slot="primary" width="full" scale="l">Next</calcite-button>
@@ -851,7 +851,7 @@ <h3 slot="header">Fullscreen modal</h3>
                 your modal need the full screen real estate (maps, etc)
               </p>
             </div>
-            <calcite-button slot="back" width="full" color="neutral" appearance="outline" icon-left="chevron-left"
+            <calcite-button slot="back" width="full" kind="neutral" appearance="outline" icon-left="chevron-left"
               >Back</calcite-button
             >
             <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
@@ -986,7 +986,7 @@ <h3 slot="title">ArcGIS Online Sign In and Sign Up</h3>
               scale="m"
               slot="back"
               width="full"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               icon-left="chevron-left"
               width="full"
diff --git a/src/demos/shell/block-configurations.html b/src/demos/shell/block-configurations.html
index 8f6cc9792f3..e3e7421e857 100644
--- a/src/demos/shell/block-configurations.html
+++ b/src/demos/shell/block-configurations.html
@@ -132,7 +132,7 @@
               </calcite-action-bar>
               <calcite-button
                 slot="header"
-                color="inverse"
+                kind="inverse"
                 alignment="icon-end-space-between"
                 icon-end="caret-down"
                 width="full"
@@ -170,7 +170,7 @@
                         <calcite-button
                           slot="action"
                           appearance="transparent"
-                          color="neutral"
+                          kind="neutral"
                           icon-start="brackets-curly"
                           scale="s"
                         ></calcite-button>
@@ -932,7 +932,7 @@ <h2>Cool app</h2>
               <calcite-pick-list-item label="END" value="4"></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/shell/demo-app-advanced-2-shell-header.html b/src/demos/shell/demo-app-advanced-2-shell-header.html
index 108662577c5..8409b05e704 100644
--- a/src/demos/shell/demo-app-advanced-2-shell-header.html
+++ b/src/demos/shell/demo-app-advanced-2-shell-header.html
@@ -131,7 +131,7 @@
               </calcite-action-bar>
               <calcite-button
                 slot="header"
-                color="inverse"
+                kind="inverse"
                 alignment="icon-end-space-between"
                 icon-end="caret-down"
                 width="full"
@@ -162,8 +162,8 @@
                       <calcite-button
                         width="full"
                         scale="s"
-                        appearance="clear"
-                        color="inverse"
+                        appearance="outline"
+                        kind="inverse"
                         class="combo-button__main"
                         text="Edit label style"
                         icon-end="pencil"
@@ -186,8 +186,8 @@
                         <calcite-button
                           width="full"
                           scale="s"
-                          appearance="clear"
-                          color="inverse"
+                          appearance="outline"
+                          kind="inverse"
                           class="combo-button__main"
                           text="Edit label style"
                           icon-end="pencil"
@@ -216,8 +216,8 @@
                         <calcite-button
                           width="full"
                           scale="s"
-                          appearance="clear"
-                          color="inverse"
+                          appearance="outline"
+                          kind="inverse"
                           class="combo-button__main"
                           text="Edit label style"
                           icon-end="pencil"
diff --git a/src/demos/shell/demo-app-advanced-2.html b/src/demos/shell/demo-app-advanced-2.html
index 24349a3110d..e6313eded3c 100644
--- a/src/demos/shell/demo-app-advanced-2.html
+++ b/src/demos/shell/demo-app-advanced-2.html
@@ -158,8 +158,8 @@
                     <calcite-button
                       width="full"
                       scale="s"
-                      appearance="clear"
-                      color="inverse"
+                      appearance="outline"
+                      kind="inverse"
                       class="combo-button__main"
                       text="Edit label style"
                       icon-end="pencil"
@@ -182,8 +182,8 @@
                       <calcite-button
                         width="full"
                         scale="s"
-                        appearance="clear"
-                        color="inverse"
+                        appearance="outline"
+                        kind="inverse"
                         class="combo-button__main"
                         text="Edit label style"
                         icon-end="pencil"
@@ -212,8 +212,8 @@
                       <calcite-button
                         width="full"
                         scale="s"
-                        appearance="clear"
-                        color="inverse"
+                        appearance="outline"
+                        kind="inverse"
                         class="combo-button__main"
                         text="Edit label style"
                         icon-end="pencil"
@@ -313,7 +313,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
               ></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/shell/demo-app-advanced-3.html b/src/demos/shell/demo-app-advanced-3.html
index e34b29caa61..605c5ad4b88 100644
--- a/src/demos/shell/demo-app-advanced-3.html
+++ b/src/demos/shell/demo-app-advanced-3.html
@@ -449,8 +449,8 @@
                     <calcite-button
                       width="full"
                       scale="s"
-                      appearance="clear"
-                      color="inverse"
+                      appearance="outline"
+                      kind="inverse"
                       class="combo-button__main"
                       text="Edit label style"
                       icon-end="pencil"
@@ -473,8 +473,8 @@
                       <calcite-button
                         width="full"
                         scale="s"
-                        appearance="clear"
-                        color="inverse"
+                        appearance="outline"
+                        kind="inverse"
                         class="combo-button__main"
                         text="Edit label style"
                         icon-end="pencil"
@@ -503,8 +503,8 @@
                       <calcite-button
                         width="full"
                         scale="s"
-                        appearance="clear"
-                        color="inverse"
+                        appearance="outline"
+                        kind="inverse"
                         class="combo-button__main"
                         text="Edit label style"
                         icon-end="pencil"
@@ -604,7 +604,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
               ></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/shell/demo-app-advanced.html b/src/demos/shell/demo-app-advanced.html
index 260923b33ce..e0be1ecee31 100644
--- a/src/demos/shell/demo-app-advanced.html
+++ b/src/demos/shell/demo-app-advanced.html
@@ -164,7 +164,7 @@
                         ></calcite-value-list-item>
                       </calcite-value-list>
                       <div class="row">
-                        <calcite-button id="attribute-add" round icon="plus" scale="s" width="full" color="neutral"
+                        <calcite-button id="attribute-add" round icon="plus" scale="s" width="full" kind="neutral"
                           >Select attributes</calcite-button
                         >
                       </div>
@@ -316,7 +316,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
               ></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/shell/demo-app-full-window-reversed.html b/src/demos/shell/demo-app-full-window-reversed.html
index d692865b6c4..8283118c072 100644
--- a/src/demos/shell/demo-app-full-window-reversed.html
+++ b/src/demos/shell/demo-app-full-window-reversed.html
@@ -348,7 +348,7 @@
                     </calcite-block-content>
                   </calcite-block>
                   <calcite-button slot="footer-actions" width="half">Save</calcite-button>
-                  <calcite-button slot="footer-actions" width="half" appearance="clear">Cancel</calcite-button>
+                  <calcite-button slot="footer-actions" width="half" appearance="outline">Cancel</calcite-button>
                 </calcite-flow-item>
               </calcite-flow>
             </calcite-shell-panel>
@@ -434,7 +434,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
               ></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer-actions" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer-actions" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer-actions" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/shell/demo-app-full-window.html b/src/demos/shell/demo-app-full-window.html
index c093dbe657e..b51ff825df4 100644
--- a/src/demos/shell/demo-app-full-window.html
+++ b/src/demos/shell/demo-app-full-window.html
@@ -328,7 +328,7 @@
                     </calcite-block-content>
                   </calcite-block>
                   <calcite-button slot="footer-actions" scale="s" width="half">Save</calcite-button>
-                  <calcite-button slot="footer-actions" scale="s" width="half" appearance="clear"
+                  <calcite-button slot="footer-actions" scale="s" width="half" appearance="outline"
                     >Cancel</calcite-button
                   >
                   <calcite-fab slot="fab" label="Add Item" text="Add"></calcite-fab>
diff --git a/src/demos/shell/nesting-testing-flow.html b/src/demos/shell/nesting-testing-flow.html
index 8b0da40d8a2..a016710da85 100644
--- a/src/demos/shell/nesting-testing-flow.html
+++ b/src/demos/shell/nesting-testing-flow.html
@@ -113,7 +113,7 @@
               </calcite-action-bar>
               <calcite-button
                 slot="header"
-                color="inverse"
+                kind="inverse"
                 alignment="icon-end-space-between"
                 icon-end="caret-down"
                 width="full"
@@ -171,7 +171,7 @@
                             <calcite-button
                               slot="action"
                               appearance="transparent"
-                              color="neutral"
+                              kind="neutral"
                               icon-start="brackets-curly"
                               scale="s"
                             ></calcite-button>
diff --git a/src/demos/shell/nesting-testing.html b/src/demos/shell/nesting-testing.html
index b75af40c5e9..5262c780212 100644
--- a/src/demos/shell/nesting-testing.html
+++ b/src/demos/shell/nesting-testing.html
@@ -113,7 +113,7 @@
               </calcite-action-bar>
               <calcite-button
                 slot="header"
-                color="inverse"
+                kind="inverse"
                 alignment="icon-end-space-between"
                 icon-end="caret-down"
                 width="full"
diff --git a/src/demos/shell/popup-config-example.html b/src/demos/shell/popup-config-example.html
index 8dd8f360d91..3add8bfbfdb 100644
--- a/src/demos/shell/popup-config-example.html
+++ b/src/demos/shell/popup-config-example.html
@@ -146,7 +146,7 @@
               </calcite-action-bar>
               <calcite-button
                 slot="header"
-                color="inverse"
+                kind="inverse"
                 alignment="icon-end-space-between"
                 icon-end="caret-down"
                 width="full"
@@ -440,7 +440,7 @@ <h2>Cool app</h2>
               <calcite-pick-list-item label="END" value="4"></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/demos/split-button.html b/src/demos/split-button.html
index c4fba86c770..0e4178ce841 100644
--- a/src/demos/split-button.html
+++ b/src/demos/split-button.html
@@ -271,7 +271,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="neutral" scale="s" primary-text="Button">
+          <calcite-split-button kind="neutral" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -280,7 +280,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="neutral" scale="m" primary-text="Button">
+            <calcite-split-button kind="neutral" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -290,7 +290,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="neutral" scale="l" primary-text="Button">
+            <calcite-split-button kind="neutral" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -302,7 +302,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="neutral" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="neutral" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -311,7 +311,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="neutral" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -321,7 +321,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="neutral" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -333,7 +333,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="neutral" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="neutral" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -342,7 +342,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="neutral" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="neutral" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -352,7 +352,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="neutral" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="neutral" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -364,7 +364,7 @@
 
         <!-- icon-start -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-start="i2DExplore" color="neutral" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-start="i2DExplore" kind="neutral" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -373,7 +373,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="neutral" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="neutral" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -383,7 +383,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="neutral" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="neutral" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -395,7 +395,7 @@
 
         <!-- icon-end -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-end="i2DExplore" color="neutral" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-end="i2DExplore" kind="neutral" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -404,7 +404,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="neutral" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="neutral" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -414,7 +414,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="neutral" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="neutral" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -429,7 +429,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="neutral"
+            kind="neutral"
             scale="s"
             primary-text="Button"
           >
@@ -444,7 +444,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               scale="m"
               primary-text="Button"
             >
@@ -460,7 +460,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               scale="l"
               primary-text="Button"
             >
@@ -484,7 +484,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="inverse" scale="s" primary-text="Button">
+          <calcite-split-button kind="inverse" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -493,7 +493,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="inverse" scale="m" primary-text="Button">
+            <calcite-split-button kind="inverse" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -503,7 +503,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="inverse" scale="l" primary-text="Button">
+            <calcite-split-button kind="inverse" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -515,7 +515,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="inverse" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="inverse" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -524,7 +524,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="inverse" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -534,7 +534,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="inverse" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -546,7 +546,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="inverse" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="inverse" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -555,7 +555,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="inverse" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="inverse" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -565,7 +565,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="inverse" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="inverse" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -577,7 +577,7 @@
 
         <!-- icon-start -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-start="i2DExplore" color="inverse" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-start="i2DExplore" kind="inverse" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -586,7 +586,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="inverse" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="inverse" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -596,7 +596,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="inverse" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="inverse" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -608,7 +608,7 @@
 
         <!-- icon-end -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-end="i2DExplore" color="inverse" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-end="i2DExplore" kind="inverse" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -617,7 +617,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="inverse" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="inverse" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -627,7 +627,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="inverse" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="inverse" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -642,7 +642,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="inverse"
+            kind="inverse"
             scale="s"
             primary-text="Button"
           >
@@ -657,7 +657,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               scale="m"
               primary-text="Button"
             >
@@ -673,7 +673,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               scale="l"
               primary-text="Button"
             >
@@ -697,7 +697,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="red" scale="s" primary-text="Button">
+          <calcite-split-button kind="danger" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -706,7 +706,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="red" scale="m" primary-text="Button">
+            <calcite-split-button kind="danger" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -716,7 +716,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="red" scale="l" primary-text="Button">
+            <calcite-split-button kind="danger" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -728,7 +728,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="red" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="danger" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -737,7 +737,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="red" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="danger" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -747,7 +747,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="red" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="danger" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -759,7 +759,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="red" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="danger" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -768,7 +768,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="red" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="danger" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -778,7 +778,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="red" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="danger" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -790,7 +790,7 @@
 
         <!-- icon-start -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-start="i2DExplore" color="red" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-start="i2DExplore" kind="danger" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -799,7 +799,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="red" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="danger" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -809,7 +809,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" color="red" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" kind="danger" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -821,7 +821,7 @@
 
         <!-- icon-end -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-end="i2DExplore" color="red" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-end="i2DExplore" kind="danger" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -830,7 +830,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="red" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="danger" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -840,7 +840,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" color="red" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" kind="danger" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -855,7 +855,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="red"
+            kind="danger"
             scale="s"
             primary-text="Button"
           >
@@ -870,7 +870,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               scale="m"
               primary-text="Button"
             >
@@ -886,7 +886,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               scale="l"
               primary-text="Button"
             >
@@ -912,7 +912,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -921,7 +921,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -931,7 +931,7 @@
           </p>
 
           <p>
-            <calcite-split-button appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -943,7 +943,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button disabled appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -952,7 +952,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button disabled appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -962,7 +962,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button disabled appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -974,7 +974,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button loading appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -983,7 +983,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button loading appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -993,7 +993,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button loading appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1005,7 +1005,7 @@
 
         <!-- icon-start -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-start="i2DExplore" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-start="i2DExplore" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1014,7 +1014,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1024,7 +1024,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-start="i2DExplore" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-start="i2DExplore" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1036,7 +1036,7 @@
 
         <!-- icon-end -->
         <div class="child-flex">
-          <calcite-split-button primary-icon-end="i2DExplore" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button primary-icon-end="i2DExplore" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1045,7 +1045,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1055,7 +1055,7 @@
           </p>
 
           <p>
-            <calcite-split-button primary-icon-end="i2DExplore" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button primary-icon-end="i2DExplore" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1070,7 +1070,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            appearance="clear"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1085,7 +1085,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              appearance="clear"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1101,7 +1101,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              appearance="clear"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1125,7 +1125,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="neutral" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1134,7 +1134,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="neutral" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1144,7 +1144,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="neutral" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1156,7 +1156,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="neutral" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1165,7 +1165,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1175,7 +1175,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1187,7 +1187,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="neutral" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1196,7 +1196,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1206,7 +1206,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1220,8 +1220,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="neutral"
-            appearance="clear"
+            kind="neutral"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1235,8 +1235,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1251,8 +1251,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1269,8 +1269,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="neutral"
-            appearance="clear"
+            kind="neutral"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1284,8 +1284,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1300,8 +1300,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1319,8 +1319,8 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="neutral"
-            appearance="clear"
+            kind="neutral"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1335,8 +1335,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1352,8 +1352,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
-              appearance="clear"
+              kind="neutral"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1377,7 +1377,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="inverse" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1386,7 +1386,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="inverse" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1396,7 +1396,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="inverse" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1408,7 +1408,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="inverse" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1417,7 +1417,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1427,7 +1427,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1439,7 +1439,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="inverse" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1448,7 +1448,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1458,7 +1458,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1472,8 +1472,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="inverse"
-            appearance="clear"
+            kind="inverse"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1487,8 +1487,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1503,8 +1503,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1521,8 +1521,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="inverse"
-            appearance="clear"
+            kind="inverse"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1536,8 +1536,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1552,8 +1552,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1571,8 +1571,8 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="inverse"
-            appearance="clear"
+            kind="inverse"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1587,8 +1587,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1604,8 +1604,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
-              appearance="clear"
+              kind="inverse"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1629,7 +1629,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="red" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1638,7 +1638,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="red" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1648,7 +1648,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="red" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1660,7 +1660,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="red" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1669,7 +1669,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1679,7 +1679,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1691,7 +1691,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="red" appearance="clear" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1700,7 +1700,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="red" appearance="clear" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1710,7 +1710,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="red" appearance="clear" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -1724,8 +1724,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="red"
-            appearance="clear"
+            kind="danger"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1739,8 +1739,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1755,8 +1755,8 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1773,8 +1773,8 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="red"
-            appearance="clear"
+            kind="danger"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1788,8 +1788,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1804,8 +1804,8 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -1823,8 +1823,8 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="red"
-            appearance="clear"
+            kind="danger"
+            appearance="outline"
             scale="s"
             primary-text="Button"
           >
@@ -1839,8 +1839,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="m"
               primary-text="Button"
             >
@@ -1856,8 +1856,8 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
-              appearance="clear"
+              kind="danger"
+              appearance="outline"
               scale="l"
               primary-text="Button"
             >
@@ -2096,7 +2096,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="neutral" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2105,7 +2105,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="neutral" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2115,7 +2115,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="neutral" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2127,7 +2127,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="neutral" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2136,7 +2136,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2146,7 +2146,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2158,7 +2158,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="neutral" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="neutral" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2167,7 +2167,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2177,7 +2177,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2191,7 +2191,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2206,7 +2206,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2222,7 +2222,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2240,7 +2240,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2255,7 +2255,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2271,7 +2271,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2290,7 +2290,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2306,7 +2306,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2323,7 +2323,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2348,7 +2348,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="inverse" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2357,7 +2357,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="inverse" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2367,7 +2367,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="inverse" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2379,7 +2379,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="inverse" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2388,7 +2388,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2398,7 +2398,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2410,7 +2410,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="inverse" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="inverse" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2419,7 +2419,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2429,7 +2429,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2443,7 +2443,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2458,7 +2458,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2474,7 +2474,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2492,7 +2492,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2507,7 +2507,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2523,7 +2523,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2542,7 +2542,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2558,7 +2558,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2575,7 +2575,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2600,7 +2600,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="red" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2609,7 +2609,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="red" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2619,7 +2619,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="red" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2631,7 +2631,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="red" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2640,7 +2640,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2650,7 +2650,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2662,7 +2662,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="red" appearance="outline" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="danger" appearance="outline" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2671,7 +2671,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="red" appearance="outline" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="outline" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2681,7 +2681,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="red" appearance="outline" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="outline" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -2695,7 +2695,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2710,7 +2710,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2726,7 +2726,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2744,7 +2744,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2759,7 +2759,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2775,7 +2775,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -2794,7 +2794,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="outline"
             scale="s"
             primary-text="Button"
@@ -2810,7 +2810,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="m"
               primary-text="Button"
@@ -2827,7 +2827,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="outline"
               scale="l"
               primary-text="Button"
@@ -3091,7 +3091,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="neutral" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button kind="neutral" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3100,7 +3100,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="neutral" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3110,7 +3110,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="neutral" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button kind="neutral" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3122,7 +3122,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="neutral" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="neutral" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3131,7 +3131,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3141,7 +3141,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="neutral" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="neutral" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3153,7 +3153,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="neutral" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="neutral" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3162,7 +3162,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3172,7 +3172,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="neutral" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="neutral" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3186,7 +3186,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3201,7 +3201,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3217,7 +3217,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3235,7 +3235,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3250,7 +3250,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3266,7 +3266,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3285,7 +3285,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="neutral"
+            kind="neutral"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3301,7 +3301,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3318,7 +3318,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="neutral"
+              kind="neutral"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3343,7 +3343,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="inverse" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button kind="inverse" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3352,7 +3352,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="inverse" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3362,7 +3362,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="inverse" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button kind="inverse" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3374,7 +3374,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="inverse" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="inverse" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3383,7 +3383,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3393,7 +3393,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="inverse" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="inverse" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3405,7 +3405,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="inverse" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="inverse" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3414,7 +3414,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3424,7 +3424,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="inverse" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="inverse" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3438,7 +3438,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3453,7 +3453,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3469,7 +3469,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3487,7 +3487,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3502,7 +3502,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3518,7 +3518,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3537,7 +3537,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="inverse"
+            kind="inverse"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3553,7 +3553,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3570,7 +3570,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="inverse"
+              kind="inverse"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3595,7 +3595,7 @@
 
         <!-- default -->
         <div class="child-flex">
-          <calcite-split-button color="red" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button kind="danger" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3604,7 +3604,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button color="red" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3614,7 +3614,7 @@
           </p>
 
           <p>
-            <calcite-split-button color="red" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button kind="danger" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3626,7 +3626,7 @@
 
         <!-- disabled -->
         <div class="child-flex">
-          <calcite-split-button disabled color="red" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button disabled kind="danger" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3635,7 +3635,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3645,7 +3645,7 @@
           </p>
 
           <p>
-            <calcite-split-button disabled color="red" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button disabled kind="danger" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3657,7 +3657,7 @@
 
         <!-- loading -->
         <div class="child-flex">
-          <calcite-split-button loading color="red" appearance="transparent" scale="s" primary-text="Button">
+          <calcite-split-button loading kind="danger" appearance="transparent" scale="s" primary-text="Button">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3666,7 +3666,7 @@
           </calcite-split-button>
 
           <p>
-            <calcite-split-button loading color="red" appearance="transparent" scale="m" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="transparent" scale="m" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3676,7 +3676,7 @@
           </p>
 
           <p>
-            <calcite-split-button loading color="red" appearance="transparent" scale="l" primary-text="Button">
+            <calcite-split-button loading kind="danger" appearance="transparent" scale="l" primary-text="Button">
               <calcite-dropdown-group selection-mode="none">
                 <calcite-dropdown-item>Option 2</calcite-dropdown-item>
                 <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3690,7 +3690,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-start="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3705,7 +3705,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3721,7 +3721,7 @@
           <p>
             <calcite-split-button
               primary-icon-start="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3739,7 +3739,7 @@
         <div class="child-flex">
           <calcite-split-button
             primary-icon-end="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3754,7 +3754,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3770,7 +3770,7 @@
           <p>
             <calcite-split-button
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3789,7 +3789,7 @@
           <calcite-split-button
             primary-icon-start="i2DExplore"
             primary-icon-end="i2DExplore"
-            color="red"
+            kind="danger"
             appearance="transparent"
             scale="s"
             primary-text="Button"
@@ -3805,7 +3805,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="m"
               primary-text="Button"
@@ -3822,7 +3822,7 @@
             <calcite-split-button
               primary-icon-start="i2DExplore"
               primary-icon-end="i2DExplore"
-              color="red"
+              kind="danger"
               appearance="transparent"
               scale="l"
               primary-text="Button"
@@ -3889,7 +3889,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Solid neutral icon-only</div>
         <div class="child-flex">
-          <calcite-split-button color="neutral" scale="s" primary-icon-start="save">
+          <calcite-split-button kind="neutral" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3899,7 +3899,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="neutral" scale="m" primary-icon-start="save">
+          <calcite-split-button kind="neutral" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3909,7 +3909,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="neutral" scale="l" primary-icon-start="save">
+          <calcite-split-button kind="neutral" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3923,7 +3923,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Solid inverse icon-only</div>
         <div class="child-flex">
-          <calcite-split-button color="inverse" scale="s" primary-icon-start="save">
+          <calcite-split-button kind="inverse" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3933,7 +3933,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="inverse" scale="m" primary-icon-start="save">
+          <calcite-split-button kind="inverse" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3943,7 +3943,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="inverse" scale="l" primary-icon-start="save">
+          <calcite-split-button kind="inverse" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3957,7 +3957,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Solid danger icon-only</div>
         <div class="child-flex">
-          <calcite-split-button color="red" scale="s" primary-icon-start="save">
+          <calcite-split-button kind="danger" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3967,7 +3967,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="red" scale="m" primary-icon-start="save">
+          <calcite-split-button kind="danger" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3977,7 +3977,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button color="red" scale="l" primary-icon-start="save">
+          <calcite-split-button kind="danger" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -3999,7 +3999,7 @@
 
         <div class="child-flex right-aligned-text">Clear brand icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="clear" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4009,7 +4009,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4019,7 +4019,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4033,7 +4033,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Clear neutral icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="neutral" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4043,7 +4043,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="neutral" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4053,7 +4053,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="neutral" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4067,7 +4067,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Clear inverse icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="inverse" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4077,7 +4077,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="inverse" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4087,7 +4087,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="inverse" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4101,7 +4101,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Clear danger icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="red" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4111,7 +4111,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="red" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4121,7 +4121,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="clear" color="red" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4177,7 +4177,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Outline neutral icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="neutral" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4187,7 +4187,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="neutral" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4197,7 +4197,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="neutral" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="neutral" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4211,7 +4211,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Outline inverse icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="inverse" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4221,7 +4221,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="inverse" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4231,7 +4231,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="inverse" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="inverse" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4245,7 +4245,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Outline danger icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="red" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4255,7 +4255,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="red" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4265,7 +4265,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="outline" color="red" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="outline" kind="danger" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4320,7 +4320,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Transparent neutral icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="neutral" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="neutral" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4330,7 +4330,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="neutral" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="neutral" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4340,7 +4340,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="neutral" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="neutral" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4354,7 +4354,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Transparent inverse icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="inverse" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="inverse" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4364,7 +4364,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="inverse" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="inverse" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4374,7 +4374,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="inverse" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="inverse" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4388,7 +4388,7 @@
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">Transparent danger icon-only</div>
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="red" scale="s" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="danger" scale="s" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4398,7 +4398,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="red" scale="m" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="danger" scale="m" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
@@ -4408,7 +4408,7 @@
         </div>
 
         <div class="child-flex">
-          <calcite-split-button appearance="transparent" color="red" scale="l" primary-icon-start="save">
+          <calcite-split-button appearance="transparent" kind="danger" scale="l" primary-icon-start="save">
             <calcite-dropdown-group selection-mode="none">
               <calcite-dropdown-item>Option 2</calcite-dropdown-item>
               <calcite-dropdown-item>Option 3</calcite-dropdown-item>
diff --git a/src/demos/theme/auto.html b/src/demos/theme/auto.html
index 51f7fdab1c5..23698327cf5 100644
--- a/src/demos/theme/auto.html
+++ b/src/demos/theme/auto.html
@@ -174,7 +174,7 @@
                         ></calcite-value-list-item>
                       </calcite-value-list>
                       <div class="row">
-                        <calcite-button id="attribute-add" round icon="plus" scale="s" width="full" color="neutral"
+                        <calcite-button id="attribute-add" round icon="plus" scale="s" width="full" kind="neutral"
                           >Select attributes</calcite-button
                         >
                       </div>
@@ -324,7 +324,7 @@ <h3 class="heading" slot="header-content">WE CARE A LOT</h3>
               ></calcite-pick-list-item>
             </calcite-pick-list>
             <calcite-button slot="footer" width="half">Yeah!</calcite-button>
-            <calcite-button slot="footer" width="half" appearance="clear">Naw.</calcite-button>
+            <calcite-button slot="footer" width="half" appearance="outline">Naw.</calcite-button>
           </calcite-panel>
         </calcite-popover>
         <script>
diff --git a/src/index.html b/src/index.html
index 1c0dd38c32e..3a21f09bac2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -25,13 +25,13 @@ <h1 id="calcite-demo">Calcite demo</h1>
 
       <div class="examples-github-storybook">
         <div>
-          <calcite-button href="https://esri.github.io/calcite-ui-icons/#?" appearance="solid" color="inverse"
+          <calcite-button href="https://esri.github.io/calcite-ui-icons/#?" appearance="solid" kind="inverse"
             >Calcite UI Icons</calcite-button
           >
         </div>
 
         <div>
-          <calcite-button href="https://github.com/Esri/calcite-components" appearance="solid" color="inverse"
+          <calcite-button href="https://github.com/Esri/calcite-components" appearance="solid" kind="inverse"
             >GitHub</calcite-button
           >
         </div>
@@ -40,7 +40,7 @@ <h1 id="calcite-demo">Calcite demo</h1>
           <calcite-button
             href="https://esri.github.io/calcite-components/?path=/story/overview-home--page"
             appearance="solid"
-            color="inverse"
+            kind="inverse"
             >Storybook</calcite-button
           >
         </div>