@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.6

package/dist/collection/components/ic-theme/test/basic/ic-theme.e2e.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit themeChange when setThemeRGB method called\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"themeChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.color = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-theme\", () => {\n  it(\"should render\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const element = await page.find(\"ic-theme\");\n    expect(element).toHaveClass(\"hydrated\");\n  });\n\n  it(\"should emit brandChange event when brandColor is changed\", async () => {\n    const page = await newE2EPage();\n\n    await page.setContent(`<ic-theme></ic-theme>`);\n\n    const spy = await page.spyOnEvent(\"brandChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(255, 201, 60)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 60,\n        g: 201,\n        r: 255,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(35, 81, 142)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: 142,\n        g: 81,\n        r: 35,\n      },\n    });\n  });\n\n  it(\"should emit correct textColor when rgb values invalid\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(\"<ic-theme></ic-theme>\");\n\n    const spy = await page.spyOnEvent(\"brandChange\");\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(1000, 1000, 1000)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"dark\",\n      color: {\n        a: 1,\n        b: 1000,\n        g: 1000,\n        r: 1000,\n      },\n    });\n\n    await page.$eval(\"ic-theme\", (elm: HTMLIcThemeElement) => {\n      elm.brandColor = \"rgb(-1, -1, -1)\";\n    });\n\n    await page.waitForChanges();\n\n    expect(spy).toHaveReceivedEventDetail({\n      mode: \"light\",\n      color: {\n        a: 1,\n        b: -1,\n        g: -1,\n        r: -1,\n      },\n    });\n  });\n});\n"]}

package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js

@@ -2,20 +2,20 @@ import { newSpecPage } from "@stencil/core/testing";
 import { Theme } from "../../ic-theme";
 import * as helpers from "../../../../utils/helpers";
 import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../../../utils/constants";
-//mocked as getThemeColorBrightness is NaN when run in test context
+//mocked as getBrandColorBrightness is NaN when run in test context
 //instead we return a value which will trigger the console warning about theme color contrast
 const mockThemeColorContrastFail = () => {
     const func = jest.fn(() => {
         return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;
     });
-    Object.defineProperty(helpers, "getThemeColorBrightness", {
+    Object.defineProperty(helpers, "getBrandColorBrightness", {
         value: func,
     });
 };
 const expectRGBToBe = (page, expectR, expectG, expectB) => {
-    const r = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-r");
-    const g = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-g");
-    const b = page.doc.documentElement.style.getPropertyValue("--ic-theme-primary-b");
+    const r = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-r");
+    const g = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-g");
+    const b = page.doc.documentElement.style.getPropertyValue("--ic-brand-color-primary-b");
     expect(r).toBe(expectR);
     expect(g).toBe(expectG);
     expect(b).toBe(expectB);
@@ -27,28 +27,28 @@ describe("ic-theme", () => {
     it("should set theme colour with hex", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="#FFC0CB"></ic-theme>`,
+            html: `<ic-theme brand-color="#FFC0CB"></ic-theme>`,
         });
         expectRGBToBe(page, "255", "192", "203");
     });
     it("should set theme colour with 3 character hex", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="#FFF"></ic-theme>`,
+            html: `<ic-theme brand-color="#FFF"></ic-theme>`,
         });
         expectRGBToBe(page, "255", "255", "255");
     });
     it("should set theme colour with rgb", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgb(159, 43, 104)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgb(159, 43, 104)"></ic-theme>`,
         });
         expectRGBToBe(page, "159", "43", "104");
     });
     it("should set theme colour with rgba", async () => {
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgba(159, 43, 104, 1)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgba(159, 43, 104, 1)"></ic-theme>`,
         });
         expectRGBToBe(page, "159", "43", "104");
     });
@@ -56,9 +56,9 @@ describe("ic-theme", () => {
         mockThemeColorContrastFail();
         const page = await newSpecPage({
             components: [Theme],
-            html: `<ic-theme color="rgba(159, 43, 104)"></ic-theme>`,
+            html: `<ic-theme brand-color="rgba(159, 43, 104)"></ic-theme>`,
         });
-        page.root.color = "rgba(133, 133, 133, 1)";
+        page.root.brandColor = "rgba(133, 133, 133, 1)";
         await page.waitForChanges();
         expectRGBToBe(page, "133", "133", "133");
     });

package/dist/collection/components/ic-theme/test/basic/ic-theme.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getThemeColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getThemeColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-theme-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.color = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n\n  it(\"should test 'theme' prop\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme theme=\"dark\"></ic-theme>`,\n    });\n\n    expect(page.root).toHaveClass(\"ic-theme-dark\");\n\n    page.root.theme = \"light\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n\n    page.root.theme = \"system\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n  });\n});\n"]}
+{"version":3,"file":"ic-theme.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-theme/test/basic/ic-theme.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage, SpecPage } from \"@stencil/core/testing\";\nimport { Theme } from \"../../ic-theme\";\nimport * as helpers from \"../../../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../../../utils/constants\";\n\n//mocked as getBrandColorBrightness is NaN when run in test context\n//instead we return a value which will trigger the console warning about theme color contrast\nconst mockThemeColorContrastFail = () => {\n  const func = jest.fn(() => {\n    return (BLACK_MIN_COLOR_BRIGHTNESS + WHITE_MAX_COLOR_BRIGHTNESS) / 2;\n  });\n\n  Object.defineProperty(helpers, \"getBrandColorBrightness\", {\n    value: func,\n  });\n};\n\nconst expectRGBToBe = (\n  page: SpecPage,\n  expectR: string,\n  expectG: string,\n  expectB: string\n) => {\n  const r = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-r\"\n  );\n  const g = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-g\"\n  );\n  const b = page.doc.documentElement.style.getPropertyValue(\n    \"--ic-brand-color-primary-b\"\n  );\n\n  expect(r).toBe(expectR);\n  expect(g).toBe(expectG);\n  expect(b).toBe(expectB);\n};\n\nbeforeAll(() => {\n  jest.spyOn(console, \"warn\").mockImplementation(jest.fn());\n});\n\ndescribe(\"ic-theme\", () => {\n  it(\"should set theme colour with hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"#FFC0CB\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"192\", \"203\");\n  });\n\n  it(\"should set theme colour with 3 character hex\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"#FFF\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"255\", \"255\", \"255\");\n  });\n\n  it(\"should set theme colour with rgb\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgb(159, 43, 104)\"></ic-theme>`,\n    });\n\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should set theme colour with rgba\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgba(159, 43, 104, 1)\"></ic-theme>`,\n    });\n    expectRGBToBe(page, \"159\", \"43\", \"104\");\n  });\n\n  it(\"should test updating theme color\", async () => {\n    mockThemeColorContrastFail();\n\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme brand-color=\"rgba(159, 43, 104)\"></ic-theme>`,\n    });\n\n    page.root.brandColor = \"rgba(133, 133, 133, 1)\";\n    await page.waitForChanges();\n\n    expectRGBToBe(page, \"133\", \"133\", \"133\");\n  });\n\n  it(\"should test 'theme' prop\", async () => {\n    const page = await newSpecPage({\n      components: [Theme],\n      html: `<ic-theme theme=\"dark\"></ic-theme>`,\n    });\n\n    expect(page.root).toHaveClass(\"ic-theme-dark\");\n\n    page.root.theme = \"light\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n\n    page.root.theme = \"system\";\n\n    await page.waitForChanges();\n\n    expect(page.root).toHaveClass(\"ic-theme-light\");\n  });\n});\n"]}

package/dist/collection/components/ic-toggle-button/ic-toggle-button.css

@@ -443,28 +443,95 @@ video {
 
 /* VARIABLES FOR IC-TOGGLE-BUTTON-GROUP */
 :host {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-default)
+  --toggle-button-border: var(--ic-toggle-button-unselected-border);
+  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text);
+  --toggle-button-border-hover: var(--ic-toggle-button-unselected-border-hover);
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-unselected-text-hover
+  );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-unselected-border-pressed
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-unselected-text-pressed
   );
 }
 
-:host(.ic-toggle-button-dark) {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-dark)
+:host(.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text);
+  --toggle-button-border-hover: var(--ic-toggle-button-selected-border-hover);
+  --toggle-button-text-colour-hover: var(--ic-toggle-button-selected-text);
+  --toggle-button-border-active: var(
+    --ic-toggle-button-selected-border-pressed
   );
+  --toggle-button-text-colour-active: var(--ic-toggle-button-selected-text);
 }
 
-:host(.ic-toggle-button-light) {
-  --button-border: var(
-    --toggle-button-border,
-    var(--ic-border-width) solid var(--ic-action-light)
+:host(.ic-toggle-button-monochrome) {
+  --toggle-button-border: var(--ic-toggle-button-unselected-border-monochrome);
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+  --toggle-button-border-hover: var(
+    --ic-toggle-button-unselected-border-hover-monochrome
+  );
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-unselected-border-pressed-monochrome
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-unselected-text-monochrome
+  );
+}
+
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border-monochrome);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-monochrome);
+  --toggle-button-border-hover: var(
+    --ic-toggle-button-selected-border-hover-monochrome
+  );
+  --toggle-button-text-colour-hover: var(
+    --ic-toggle-button-selected-text-monochrome
+  );
+  --toggle-button-border-active: var(
+    --ic-toggle-button-selected-border-pressed-monochrome
+  );
+  --toggle-button-text-colour-active: var(
+    --ic-toggle-button-selected-text-monochrome
   );
 }
 
 :host(.ic-toggle-button-disabled) {
-  --button-border: var(--toggle-button-border, var(--ic-border-disabled));
+  --toggle-button-border: var(--ic-toggle-button-unselected-border-disabled);
+  --toggle-button-text-colour: var(--ic-toggle-button-unselected-text-disabled);
+}
+
+:host(.ic-toggle-button-disabled.ic-toggle-button-monochrome) {
+  --toggle-button-border: var(
+    --ic-toggle-button-unselected-border-disabled-monochrome
+  );
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-unselected-text-disabled-monochrome
+  );
+}
+
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) {
+  --toggle-button-border: var(--ic-toggle-button-selected-border-disabled);
+  --toggle-button-text-colour: var(--ic-toggle-button-selected-text-disabled);
+}
+
+:host(
+    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
+  ) {
+  --toggle-button-border: var(
+    --ic-toggle-button-selected-border-disabled-monochrome
+  );
+  --toggle-button-text-colour: var(
+    --ic-toggle-button-selected-text-disabled-monochrome
+  );
 }
 
 :host(.expand-toggle-group-child) ::part(button) {
@@ -504,13 +571,29 @@ video {
 }
 
 :host ::part(button) {
-  border: var(--button-border);
+  border: var(--ic-border-width) solid var(--toggle-button-border);
+  color: var(--toggle-button-text-colour);
+}
+
+:host ::part(button):hover {
+  border: var(--ic-border-width) solid var(--toggle-button-border-hover);
+  color: var(--toggle-button-text-colour-hover);
+}
+
+:host ::part(button):active {
+  border: var(--ic-border-width) solid var(--toggle-button-border-active);
+  color: var(--toggle-button-text-colour-active);
+}
+
+:host(.ic-toggle-button-disabled) ::part(button) {
+  border: var(--ic-space-1px) dashed var(--toggle-button-border);
+  color: var(--toggle-button-text-colour);
 }
 
 :host(.ic-toggle-button-checked) ::part(button) {
-  background-color: var(--ic-action-default);
-  color: var(--ic-architectural-white);
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);
+  background-color: var(--ic-toggle-button-selected-background);
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+    var(--ic-toggle-button-selected-text);
 }
 
 :host(.ic-toggle-button-checked) ::part(button):focus {
@@ -518,55 +601,64 @@ video {
     var(--ic-border-focus);
 }
 
+:host ::part(button):hover {
+  background-color: var(--ic-toggle-button-unselected-background-hover);
+}
+
+:host ::part(button):active {
+  background-color: var(--ic-toggle-button-unselected-background-pressed);
+}
+
 :host(.ic-toggle-button-checked) ::part(button):hover {
-  background-color: var(--button-default-hover);
+  background-color: var(--ic-toggle-button-selected-background-hover);
 }
 
 :host(.ic-toggle-button-checked) ::part(button):active,
 :host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {
-  background-color: var(--ic-action-default-pressed);
-}
-
-:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button) {
-  background-color: var(--ic-action-dark);
+  background-color: var(--ic-toggle-button-selected-background-pressed);
 }
 
-:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):hover {
-  background-color: var(--ic-action-dark-hover);
+:host(.ic-toggle-button-monochrome) ::part(button):hover {
+  background-color: var(
+    --ic-toggle-button-unselected-background-hover-monochrome
+  );
 }
 
-:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active,
-:host(.ic-toggle-button-icon.ic-toggle-button-dark.ic-toggle-button-checked)
-  ::part(button):active {
-  background-color: var(--ic-action-dark-pressed);
+:host(.ic-toggle-button-monochrome) ::part(button):active {
+  background-color: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
 }
 
-:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button) {
-  background-color: var(--ic-action-light);
-  color: var(--ic-color-text-primary);
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked) ::part(button) {
+  background-color: var(--ic-toggle-button-selected-background-monochrome);
 }
 
-:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):hover {
-  background-color: var(--ic-action-light-hover);
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):hover {
+  background-color: var(
+    --ic-toggle-button-selected-background-hover-monochrome
+  );
 }
 
-:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active,
-:host(.ic-toggle-button-icon.ic-toggle-button-light.ic-toggle-button-checked)
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):active,
+:host(
+    .ic-toggle-button-icon.ic-toggle-button-monochrome.ic-toggle-button-checked
+  )
   ::part(button):active {
-  background-color: var(--ic-action-light-pressed);
+  background-color: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
 }
 
-:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):focus {
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),
+:host(.ic-toggle-button-monochrome.ic-toggle-button-checked)
+  ::part(button):focus {
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+      var(--ic-toggle-button-selected-text),
     var(--ic-border-focus);
 }
 
-:host(.ic-toggle-button-disabled) ::part(button),
-:host(.ic-toggle-button-icon.ic-toggle-button-disabled) ::part(button) {
-  border: var(--button-border);
-}
-
 :host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
 :host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
   ::part(button) {
@@ -576,18 +668,35 @@ video {
 :host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
 :host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
   ::part(button)::before {
-  background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);
+  background-image: radial-gradient(
+    var(--ic-toggle-button-selected-background-disabled) 95%,
+    white 20%
+  );
+  background-repeat: no-repeat;
+}
+
+:host(
+    .ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
+  )
+  ::part(button),
+:host(
+    .ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked.ic-toggle-button-monochrome
+  )
+  ::part(button)::before {
+  background-image: radial-gradient(
+    var(--ic-toggle-button-selected-background-disabled-monochrome) 95%,
+    white 20%
+  );
   background-repeat: no-repeat;
 }
 
 :host(.ic-toggle-button-icon) ::part(button) {
-  border: var(--button-border);
   height: calc(var(--ic-space-xl) + var(--ic-space-xs));
   width: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
 :host(.ic-toggle-button-icon) ::part(button):active {
-  background-color: var(--ic-action-default-bg-active);
+  background-color: var(--ic-action-default-bg-pressed);
 }
 
 :host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {
@@ -609,21 +718,47 @@ video {
 }
 
 :host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {
-  background-color: var(--button-default-active);
+  --loading-button-background: var(
+    --ic-toggle-button-selected-background-pressed
+  );
+  background-color: var(--ic-toggle-button-selected-background-pressed);
+}
+
+:host(.ic-toggle-button-loading) ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-unselected-background-pressed
+  );
+  background-color: var(--ic-toggle-button-unselected-background-pressed);
+}
+
+:host(.ic-toggle-button-checked.ic-toggle-button-loading)
+  ::part(ic-loading-container) {
+  --inner-color: var(--ic-toggle-button-loading-bar);
 }
 
 :host(.ic-toggle-button-loading) ::part(ic-loading-container) {
-  --inner-color: var(--ic-architectural-white);
+  --inner-color: var(--ic-toggle-button-selected-loading-bar);
 }
 
-:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-light)
+:host(
+    .ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-monochrome
+  )
   ::part(button) {
-  background-color: var(--ic-action-light-pressed);
+  --loading-button-background: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
+  background-color: var(
+    --ic-toggle-button-selected-background-pressed-monochrome
+  );
 }
 
-:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-dark)
-  ::part(button) {
-  background-color: var(--ic-action-dark-pressed);
+:host(.ic-toggle-button-loading.ic-toggle-button-monochrome) ::part(button) {
+  --loading-button-background: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
+  background-color: var(
+    --ic-toggle-button-unselected-background-pressed-monochrome
+  );
 }
 
 @media (forced-colors: active) {

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js

@@ -17,16 +17,20 @@ export class ToggleButton {
                 });
         };
         this.accessibleLabel = undefined;
-        this.appearance = "default";
+        this.checked = false;
         this.disabled = false;
         this.fullWidth = false;
         this.iconPlacement = undefined;
         this.label = undefined;
         this.loading = false;
+        this.monochrome = false;
         this.size = "medium";
-        this.checked = false;
+        this.theme = "inherit";
         this.variant = "default";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
         const parentIconPlacement = this.el.parentElement.iconPlacement;
@@ -50,13 +54,15 @@ export class ToggleButton {
     }
     render() {
         return (h(Host, { class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
                 ["ic-toggle-button-disabled"]: this.disabled,
                 ["ic-toggle-button-checked"]: this.checked,
-                [`ic-toggle-button-${this.appearance}`]: true,
                 ["ic-toggle-button-icon"]: this.variant === "icon",
                 [`ic-toggle-button-${this.size}`]: true,
                 ["ic-toggle-button-loading"]: this.loading,
-            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                ["ic-toggle-button-monochrome"]: this.monochrome,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -90,29 +96,23 @@ export class ToggleButton {
                 "attribute": "accessible-label",
                 "reflect": false
             },
-            "appearance": {
-                "type": "string",
-                "mutable": false,
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The appearance of the toggle button."
+                    "text": "If `true`, the toggle button will be in a checked state."
                 },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
+                "attribute": "checked",
+                "reflect": true,
+                "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
@@ -202,6 +202,24 @@ export class ToggleButton {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the toggle button will display as black in the light theme, and white in dark theme."
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -226,23 +244,29 @@ export class ToggleButton {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
-            "checked": {
-                "type": "boolean",
-                "mutable": true,
+            "theme": {
+                "type": "string",
+                "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the toggle button will be in a checked state."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "checked",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             },
             "variant": {
                 "type": "string",
@@ -283,6 +307,12 @@ export class ToggleButton {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "watchDisabledHandler"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",