diff --git a/packages/calcite-components/src/components/card-group/card-group.e2e.ts b/packages/calcite-components/src/components/card-group/card-group.e2e.ts
index 75d21dd2bdc..ba4806b115f 100644
--- a/packages/calcite-components/src/components/card-group/card-group.e2e.ts
+++ b/packages/calcite-components/src/components/card-group/card-group.e2e.ts
@@ -1,8 +1,9 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, renders, hidden, disabled } from "../../tests/commonTests";
-import { CSS } from "../card/resources";
+import { accessible, renders, hidden, disabled, themed } from "../../tests/commonTests";
+import { CSS as CARD_CSS } from "../card/resources";
 import { createSelectedItemsAsserter } from "../../tests/utils";
+import { CSS } from "./resources";
 
 describe("calcite-card-group", () => {
   describe("renders", () => {
@@ -70,8 +71,8 @@ describe("calcite-card-group", () => {
       const element = await page.find("calcite-card-group");
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -88,7 +89,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(await cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -98,7 +99,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -108,7 +109,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(cardSelectSpy1).toHaveReceivedEventTimes(1);
@@ -132,8 +133,8 @@ describe("calcite-card-group", () => {
       const element = await page.find("calcite-card-group");
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -146,7 +147,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -154,7 +155,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -162,7 +163,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card2.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -186,9 +187,9 @@ describe("calcite-card-group", () => {
       const card1 = await page.find("#card-1");
       const card2 = await page.find("#card-2");
       const card3 = await page.find("#card-3");
-      const card1CheckAction = await page.find(`#card-1 >>> .${CSS.checkboxWrapper}`);
-      const card2CheckAction = await page.find(`#card-2 >>> .${CSS.checkboxWrapper}`);
-      const card3CheckAction = await page.find(`#card-3 >>> .${CSS.checkboxWrapper}`);
+      const card1CheckAction = await page.find(`#card-1 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card2CheckAction = await page.find(`#card-2 >>> .${CARD_CSS.checkboxWrapper}`);
+      const card3CheckAction = await page.find(`#card-3 >>> .${CARD_CSS.checkboxWrapper}`);
 
       const cardGroupSelectSpy = await element.spyOnEvent("calciteCardGroupSelect");
       const selectedItemAsserter = await createSelectedItemsAsserter(
@@ -201,7 +202,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toEqual([]);
       await selectedItemAsserter([]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(1);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -210,7 +211,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card1.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(2);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -219,7 +220,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(2);
       await selectedItemAsserter([card1.id, card2.id]);
 
-      card3CheckAction.click();
+      await card3CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(3);
       expect(await card1.getProperty("selected")).toBe(true);
@@ -228,7 +229,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(3);
       await selectedItemAsserter([card1.id, card2.id, card3.id]);
 
-      card1CheckAction.click();
+      await card1CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(4);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -237,7 +238,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(2);
       await selectedItemAsserter([card2.id, card3.id]);
 
-      card2CheckAction.click();
+      await card2CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(5);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -246,7 +247,7 @@ describe("calcite-card-group", () => {
       expect(await element.getProperty("selectedItems")).toHaveLength(1);
       await selectedItemAsserter([card3.id]);
 
-      card3CheckAction.click();
+      await card3CheckAction.click();
       await page.waitForChanges();
       expect(cardGroupSelectSpy).toHaveReceivedEventTimes(6);
       expect(await card1.getProperty("selected")).toBe(false);
@@ -441,4 +442,15 @@ describe("calcite-card-group", () => {
     expect(await element.getProperty("selectedItems")).toHaveLength(2);
     await selectedItemAsserter([card4.id, card5.id]);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-card-group", {
+        "--calcite-card-group-gap": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "gap",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/card-group/card-group.tsx b/packages/calcite-components/src/components/card-group/card-group.tsx
index 30c4d2ce6c2..08fd04a48db 100644
--- a/packages/calcite-components/src/components/card-group/card-group.tsx
+++ b/packages/calcite-components/src/components/card-group/card-group.tsx
@@ -26,6 +26,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { CSS } from "./resources";
 
 /**
  * @slot - A slot for adding one or more `calcite-card`s.
@@ -248,7 +249,7 @@ export class CardGroup implements InteractiveComponent, LoadableComponent {
           <div
             aria-disabled={toAriaBoolean(this.disabled)}
             aria-label={this.label}
-            class="container"
+            class={CSS.container}
             role={role}
           >
             <slot
diff --git a/packages/calcite-components/src/components/card-group/resources.ts b/packages/calcite-components/src/components/card-group/resources.ts
new file mode 100644
index 00000000000..8ce4e2bdc7b
--- /dev/null
+++ b/packages/calcite-components/src/components/card-group/resources.ts
@@ -0,0 +1,3 @@
+export const CSS = {
+  container: "container",
+};
diff --git a/packages/calcite-components/src/components/card/card.e2e.ts b/packages/calcite-components/src/components/card/card.e2e.ts
index 52d736c0fef..b17c43e7ea6 100644
--- a/packages/calcite-components/src/components/card/card.e2e.ts
+++ b/packages/calcite-components/src/components/card/card.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, renders, slots, hidden, t9n } from "../../tests/commonTests";
+import { accessible, renders, slots, hidden, t9n, themed } from "../../tests/commonTests";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { html } from "../../../support/formatting";
 import { CSS, SLOTS } from "./resources";
@@ -116,4 +116,117 @@ describe("calcite-card", () => {
     const loaderContainer = await page.find("calcite-card >>> .calcite-card-loader-container");
     expect(loaderContainer.getAttribute("aria-live")).toBe("polite");
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`<calcite-card>
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>`,
+        {
+          "--calcite-card-background-color": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-card-corner-radius": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "borderRadius",
+          },
+          "--calcite-card-border-color": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "borderColor",
+          },
+          "--calcite-card-shadow": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "boxShadow",
+          },
+        },
+      );
+    });
+
+    describe("selectable", () => {
+      themed(
+        html`<calcite-card selection-mode="single">
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>`,
+        {
+          "--calcite-card-selection-icon-color": {
+            shadowSelector: `calcite-icon`,
+            targetProp: "--calcite-icon-color",
+          },
+          "--calcite-card-selection-background-color": {
+            shadowSelector: `.${CSS.checkboxWrapper}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-card-selection-background-color-active": {
+            shadowSelector: `.${CSS.checkboxWrapper}`,
+            targetProp: "backgroundColor",
+            state: { press: { attribute: "class", value: CSS.checkboxWrapper } },
+          },
+          "--calcite-card-selection-background-color-hover": {
+            shadowSelector: `.${CSS.checkboxWrapper}`,
+            targetProp: "backgroundColor",
+            state: "hover",
+          },
+        },
+      );
+    });
+
+    describe("selected", () => {
+      themed(
+        html`<calcite-card selected selection-mode="single">
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>`,
+        {
+          "--calcite-card-accent-color-selected": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "boxShadow",
+          },
+          "--calcite-card-border-color": {
+            shadowSelector: `.${CSS.contentWrapper}`,
+            targetProp: "borderColor",
+          },
+          "--calcite-card-selection-background-color-selected": {
+            shadowSelector: `.${CSS.checkboxWrapper}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-card-selection-icon-color-selected": {
+            shadowSelector: `calcite-icon`,
+            targetProp: "--calcite-icon-color",
+          },
+          "--calcite-card-selection-icon-color-hover": {
+            shadowSelector: `calcite-icon`,
+            targetProp: "--calcite-icon-color",
+            state: "hover",
+          },
+        },
+      );
+    });
+
+    describe("loading", () => {
+      themed(
+        html`<calcite-card loading>
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>`,
+        {
+          "--calcite-card-loader-color-start": {
+            shadowSelector: `calcite-loader`,
+            targetProp: "--calcite-loader-color-start",
+          },
+          "--calcite-card-loader-color-middle": {
+            shadowSelector: `calcite-loader`,
+            targetProp: "--calcite-loader-color-middle",
+          },
+          "--calcite-card-loader-color-end": {
+            shadowSelector: `calcite-loader`,
+            targetProp: "--calcite-loader-color-end",
+          },
+        },
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/card/card.scss b/packages/calcite-components/src/components/card/card.scss
index 51e0134aa13..e4a39f90bc4 100644
--- a/packages/calcite-components/src/components/card/card.scss
+++ b/packages/calcite-components/src/components/card/card.scss
@@ -3,11 +3,13 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- *
  * @prop --calcite-card-accent-color-selected: Specifies the accent color of the component when `selected`.
  * @prop --calcite-card-background-color: Specifies the background color of the component.
  * @prop --calcite-card-border-color: Specifies the border color of the component.
  * @prop --calcite-card-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-card-loader-color-end: Specifies the end color of the loader
+ * @prop --calcite-card-loader-color-middle: Specifies the middle color of the loader
+ * @prop --calcite-card-loader-color-start: Specifies the start color of the loader
  * @prop --calcite-card-selection-background-color-active: Specifies the background color of the component's selection element when active.
  * @prop --calcite-card-selection-background-color-hover: Specifies the background color of the component's selection element when hovered.
  * @prop --calcite-card-selection-background-color-selected: Specifies the icon color of the component's selection element when `selected`.
@@ -16,11 +18,6 @@
  * @prop --calcite-card-selection-icon-color-selected: Specifies the icon color of the component's selection element when `selected`.
  * @prop --calcite-card-selection-icon-color: Specifies the icon color of the component's selection element.
  * @prop --calcite-card-shadow: Specifies the shadow of the component.
- 
- * @prop --calcite-card-loader-color-one-third: Specifies the starting color of the loader
- * @prop --calcite-card-loader-color-start: Specifies the starting color of the loader
- * @prop --calcite-card-loader-color-two-thirds: Specifies the starting color of the loader
- *
  */
 
 :host {
@@ -217,9 +214,9 @@ slot[name="footer-end"]::slotted(*) {
 }
 
 calcite-loader {
-  --calcite-loader-color-middle: var(--calcite-card-loader-color-one-third);
   --calcite-loader-color-start: var(--calcite-card-loader-color-start);
-  --calcite-loader-color-end: var(--calcite-card-loader-color-two-thirds);
+  --calcite-loader-color-middle: var(--calcite-card-loader-color-middle);
+  --calcite-loader-color-end: var(--calcite-card-loader-color-end);
 }
 
 @include base-component();