@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-theme/ic-theme.js

@@ -4,6 +4,15 @@ import { getBrandColorBrightness } from "../../utils/helpers";
 import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../utils/constants";
 export class Theme {
     constructor() {
+        this.themeClass = "";
+        /**
+         * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+         */
+        this.brandColor = null;
+        /**
+         * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
+         */
+        this.theme = "light";
         this.darkModeChangeHandler = () => {
             if (this.theme === "system") {
                 this.themeClass =
@@ -23,7 +32,7 @@ export class Theme {
             }
         };
         this.setBrandColor = () => {
-            const colorRGBA = convertToRGBA(this.brandColor);
+            const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
                 const { style } = document.documentElement;
@@ -38,9 +47,6 @@ export class Theme {
                 });
             }
         };
-        this.themeClass = "";
-        this.brandColor = null;
-        this.theme = "light";
     }
     watchBrandColorPropHandler() {
         this.setBrandColor();
@@ -58,7 +64,7 @@ export class Theme {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { class: themeClass }, h("slot", null)));
+        return (h(Host, { key: '8b3a86598f9539940fdfc534c4482246b043985c', class: themeClass }, h("slot", { key: '0d55a0ae9b75cfeccf0aa30bd31a2c3a09058ce7' })));
     }
     static get is() { return "ic-theme"; }
     static get properties() {
@@ -67,8 +73,8 @@ export class Theme {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcColor",
-                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})`",
+                    "original": "IcColor | null",
+                    "resolved": "`#${string}` | `rgb(${string})` | `rgba(${string})` | null | undefined",
                     "references": {
                         "IcColor": {
                             "location": "import",
@@ -83,6 +89,8 @@ export class Theme {
                     "tags": [],
                     "text": "The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "brand-color",
                 "reflect": false,
                 "defaultValue": "null"
@@ -92,15 +100,17 @@ export class Theme {
                 "mutable": false,
                 "complexType": {
                     "original": "\"dark\" | \"light\" | \"system\"",
-                    "resolved": "\"dark\" | \"light\" | \"system\"",
+                    "resolved": "\"dark\" | \"light\" | \"system\" | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"light\""

package/dist/collection/components/ic-theme/ic-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-theme.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,KAAK,EACL,IAAI,EACJ,KAAK,GACN,MAAM,eAAe,CAAC;AAGvB,OAAO,EACL,aAAa,EACb,4BAA4B,GAC7B,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAK/B,MAAM,OAAO,KAAK;;QAsCR,0BAAqB,GAAG,GAAS,EAAE;YACzC,IAAI,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC5B,IAAI,CAAC,UAAU;oBACb,MAAM,CAAC,UAAU;wBACjB,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;wBACvD,CAAC,CAAC,eAAe;wBACjB,CAAC,CAAC,gBAAgB,CAAC;YACzB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,GAAG,YAAY,IAAI,CAAC,KAAK,EAAE,CAAC;YAC7C,CAAC;QACH,CAAC,CAAC;QAEM,4BAAuB,GAAG,GAAS,EAAE;YAC3C,IACE,uBAAuB,EAAE,GAAG,0BAA0B;gBACtD,uBAAuB,EAAE,GAAG,0BAA0B,EACtD,CAAC;gBACD,OAAO,CAAC,IAAI,CACV,2TAA2T,CAC5T,CAAC;YACJ,CAAC;QACH,CAAC,CAAC;QAEM,kBAAa,GAAG,GAAG,EAAE;YAC3B,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAEjD,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC;gBACjC,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC,eAAe,CAAC;gBAC3C,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBACxD,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAExD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;oBACpB,IAAI,EAAE,4BAA4B,EAAE;oBACpC,KAAK,EAAE,SAAS;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;0BA9E4B,EAAE;0BAKD,IAAI;qBAUU,OAAO;;IAPpD,0BAA0B;QACxB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAQD,qBAAqB;QACnB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAC7B,IAAI,CAAC,aAAa,EAAE,CAAC;QAErB,MAAM,CAAC,UAAU;YACf,MAAM;iBACH,UAAU,CAAC,8BAA8B,CAAC;iBAC1C,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC;IAC9D,CAAC;IA6CD,MAAM;QACJ,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,UAAU;YACrB,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport { IcColor, IcBrand } from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { getBrandColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n})\nexport class Theme {\n  @State() themeClass: string = \"\";\n\n  /**\n   * The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() brandColor?: IcColor = null;\n\n  @Watch(\"brandColor\")\n  watchBrandColorPropHandler(): void {\n    this.setBrandColor();\n  }\n\n  /**\n   * The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.\n   */\n  @Prop() theme: \"dark\" | \"light\" | \"system\" = \"light\";\n\n  @Watch(\"theme\")\n  watchThemePropHandler(): void {\n    this.darkModeChangeHandler();\n  }\n\n  /**\n   * @internal Emitted when the brand color is changed.\n   */\n  @Event() brandChange: EventEmitter<IcBrand>;\n\n  componentWillLoad(): void {\n    this.darkModeChangeHandler();\n    this.setBrandColor();\n\n    window.matchMedia &&\n      window\n        .matchMedia(\"(prefers-color-scheme: dark)\")\n        .addEventListener(\"change\", this.darkModeChangeHandler);\n  }\n\n  private darkModeChangeHandler = (): void => {\n    if (this.theme === \"system\") {\n      this.themeClass =\n        window.matchMedia &&\n        window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n          ? \"ic-theme-dark\"\n          : \"ic-theme-light\";\n    } else {\n      this.themeClass = `ic-theme-${this.theme}`;\n    }\n  };\n\n  private checkBrandColorContrast = (): void => {\n    if (\n      getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setBrandColor = () => {\n    const colorRGBA = convertToRGBA(this.brandColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const { style } = document.documentElement;\n      style.setProperty(\"--ic-brand-color-primary-r\", `${r}`);\n      style.setProperty(\"--ic-brand-color-primary-g\", `${g}`);\n      style.setProperty(\"--ic-brand-color-primary-b\", `${b}`);\n      style.setProperty(\"--ic-brand-color-primary-a\", `${a}`);\n\n      this.checkBrandColorContrast();\n\n      this.brandChange.emit({\n        mode: getBrandForegroundAppearance(),\n        color: colorRGBA,\n      });\n    }\n  };\n\n  render() {\n    const { themeClass } = this;\n\n    return (\n      <Host class={themeClass}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-theme.js","sourceRoot":"","sources":["../../../src/components/ic-theme/ic-theme.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n  State,\n} from \"@stencil/core\";\n\nimport { IcColor, IcBrand } from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getBrandForegroundAppearance,\n} from \"../../utils/helpers\";\nimport { getBrandColorBrightness } from \"../../utils/helpers\";\nimport {\n  BLACK_MIN_COLOR_BRIGHTNESS,\n  WHITE_MAX_COLOR_BRIGHTNESS,\n} from \"../../utils/constants\";\n\n@Component({\n  tag: \"ic-theme\",\n})\nexport class Theme {\n  @State() themeClass: string = \"\";\n\n  /**\n   * The brand colour. Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() brandColor?: IcColor | null = null;\n\n  @Watch(\"brandColor\")\n  watchBrandColorPropHandler(): void {\n    this.setBrandColor();\n  }\n\n  /**\n   * The theme mode. Can be \"dark\", \"light\", or \"system\". \"system\" will use the device or browser settings.\n   */\n  @Prop() theme?: \"dark\" | \"light\" | \"system\" = \"light\";\n\n  @Watch(\"theme\")\n  watchThemePropHandler(): void {\n    this.darkModeChangeHandler();\n  }\n\n  /**\n   * @internal Emitted when the brand color is changed.\n   */\n  @Event() brandChange: EventEmitter<IcBrand>;\n\n  componentWillLoad(): void {\n    this.darkModeChangeHandler();\n    this.setBrandColor();\n\n    window.matchMedia &&\n      window\n        .matchMedia(\"(prefers-color-scheme: dark)\")\n        .addEventListener(\"change\", this.darkModeChangeHandler);\n  }\n\n  private darkModeChangeHandler = (): void => {\n    if (this.theme === \"system\") {\n      this.themeClass =\n        window.matchMedia &&\n        window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n          ? \"ic-theme-dark\"\n          : \"ic-theme-light\";\n    } else {\n      this.themeClass = `ic-theme-${this.theme}`;\n    }\n  };\n\n  private checkBrandColorContrast = (): void => {\n    if (\n      getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The brand colour does not provide enough contrast with either of the ICDS black or white foreground colours. Consider choosing a colour with a different brightness to achieve sufficient colour contrast for good visibility. See https://www.w3.org/TR/AERT/#color-contrast for more information about colour contrast.`\n      );\n    }\n  };\n\n  private setBrandColor = () => {\n    const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const { style } = document.documentElement;\n      style.setProperty(\"--ic-brand-color-primary-r\", `${r}`);\n      style.setProperty(\"--ic-brand-color-primary-g\", `${g}`);\n      style.setProperty(\"--ic-brand-color-primary-b\", `${b}`);\n      style.setProperty(\"--ic-brand-color-primary-a\", `${a}`);\n\n      this.checkBrandColorContrast();\n\n      this.brandChange.emit({\n        mode: getBrandForegroundAppearance(),\n        color: colorRGBA,\n      });\n    }\n  };\n\n  render() {\n    const { themeClass } = this;\n\n    return (\n      <Host class={themeClass}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-theme/ic-theme.stories.js

@@ -0,0 +1,434 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  brandColor: "rgba(27, 60, 121, 1)",
+  theme: "light",
+};
+
+const defaultThemeArgs = {
+  theme: "light",
+  componentTheme: "light",
+};
+
+export default {
+  title: "Web Components/Theme",
+  component: "ic-theme",
+};
+
+export const SwitchBrand = {
+  render: () =>
+    html` <ic-theme brand-color="rgba(27, 60, 121, 1)">
+      <ic-button
+        variant="primary"
+        id="default-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgb(27, 60, 121)'"
+      >
+        Default brand
+      </ic-button>
+      <ic-button
+        variant="primary"
+        id="custom-btn"
+        onClick="document.querySelector('ic-theme').brandColor='rgba(255, 201, 60, 1)'"
+      >
+        Sunrise brand
+      </ic-button>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-alert
+          heading="This alert uses a custom message slot"
+          dismissible="true"
+          ><ic-button slot="action" variant="secondary">Button</ic-button>
+          <ic-typography variant="body" slot="message">
+            <p>
+              This is some text and
+              <ic-link href="/" inline> this is an inline link</ic-link> within
+              the text.
+            </p>
+          </ic-typography>
+        </ic-alert>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+      </div>
+    </ic-theme>`,
+
+  name: "Switch brand",
+};
+
+const inlineRadioSelector = "inline-radio";
+
+export const Playground = {
+  render: (args) =>
+    html` <ic-theme brand-color=${args.brandColor} theme=${args.theme}>
+      <div style="padding-top:10px">
+        <ic-top-navigation
+          app-title="ApplicationName"
+          status="alpha"
+          version="v0.0.7"
+        >
+          <svg
+            slot="app-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0V0z" fill="none" />
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+            />
+          </svg>
+          <ic-search-bar
+            slot="search"
+            placeholder="Search"
+            label="Search"
+          ></ic-search-bar>
+          <ic-navigation-button
+            label="button1"
+            slot="buttons"
+            onclick="alert('test')"
+          >
+            <svg
+              slot="icon"
+              xmlns="http://www.w3.org/2000/svg"
+              height="24px"
+              viewBox="0 0 24 24"
+              width="24px"
+              fill="#000000"
+            >
+              <path d="M0 0h24v24H0V0z" fill="none" />
+              <path
+                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+              />
+            </svg>
+          </ic-navigation-button>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+            selected="true"
+          ></ic-navigation-item>
+          <ic-navigation-item
+            slot="navigation"
+            label="Navigation"
+            href="/"
+          ></ic-navigation-item>
+        </ic-top-navigation>
+        <ic-hero
+          heading="Hero heading"
+          subheading="Hero description. This is a Hero component, it should be used as a page heading."
+          secondary-heading="Secondary Heading"
+          secondary-subheading="This is a secondary description."
+          full-width
+        >
+          <div slot="interaction" style="display: flex">
+            <ic-text-field
+              placeholder="Filter display"
+              label="Filter display"
+              hide-label
+            ></ic-text-field>
+            <ic-button variant="primary" style="margin-left:16px"
+              >Filter</ic-button
+            >
+          </div>
+          <ic-button variant="secondary" slot="interaction">See all</ic-button>
+          <ic-link
+            href="https://google.com"
+            slot="interaction"
+            style="margin-top:10px"
+            >Help</ic-link
+          >
+        </ic-hero>
+        <ic-section-container
+          style="display:flex; flex-direction: column; gap: 0.5rem"
+        >
+          <ic-checkbox
+            value="valueName1"
+            label="Unselected / Default"
+          ></ic-checkbox>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <ic-alert
+            heading="This alert uses a custom message slot"
+            dismissible="true"
+            ><ic-button slot="action" variant="secondary">Button</ic-button>
+            <ic-typography variant="body" slot="message">
+              <p>
+                This is some text and
+                <ic-link href="/" inline> this is an inline link</ic-link>
+                within the text.
+              </p>
+            </ic-typography>
+          </ic-alert>
+          <ic-card-vertical
+            heading="This is the card heading"
+          ></ic-card-vertical>
+          <ic-text-field
+            label="What is your favourite coffee?"
+            required
+            placeholder="Placeholder"
+            helper-text="Such as Arabica, Robusta or Liberica"
+          >
+          </ic-text-field>
+          <div style="background-color:#000000; border: 1px solid #ffffff;">
+            <span style="color:#ffffff"
+              >This content is in an ic-theme component with dark mode set</span
+            >
+            <ic-theme theme="dark">
+              <ic-card-vertical
+                heading="This is the card heading"
+              ></ic-card-vertical>
+              <ic-text-field
+                label="What is your favourite coffee?"
+                required
+                placeholder="Placeholder"
+                helper-text="Such as Arabica, Robusta or Liberica"
+              >
+              </ic-text-field>
+            </ic-theme>
+          </div>
+        </ic-section-container>
+        <ic-footer
+          align="full-width"
+          description="The ICDS is maintained by the Design Practice Team. If you've got a question or want to feedback, 
+          please get in touch."
+          caption="All content is available under the Open Government Licence v3.0, except source code and code examples which are available under the MIT Licence."
+        >
+          <ic-footer-link slot="link" href="/">Get Started</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Accessibility</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Styles</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Components</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Patterns</ic-footer-link>
+          <ic-footer-link slot="link" href="/">Design toolkit</ic-footer-link>
+          <div
+            slot="logo"
+            style="display:flex; align-items:center; gap:var(--ic-space-sm);"
+          >
+            <ic-button>Slotted Button</ic-button>
+            <ic-footer-link href="/">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height="48px"
+                viewBox="0 0 24 24"
+                width="48px"
+              >
+                <path d="M0 0h24v24H0V0z" fill="none" />
+                <path
+                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z"
+                />
+              </svg>
+            </ic-footer-link>
+          </div>
+        </ic-footer>
+        <ic-back-to-top target="topEl"></ic-back-to-top>
+      </div>
+    </ic-theme>`,
+
+  name: "Playground",
+  args: defaultArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};
+
+export const ThemeVisualisationPlayground = {
+  render: (args) =>
+    html`<div
+      style="background-color: ${args.theme == "dark"
+        ? "black"
+        : args.theme == "light"
+        ? "white"
+        : null};width:450px;height:150px"
+    >
+      <ic-theme theme=${args.theme}>
+        <div
+          style="background-color: ${args.componentTheme == "dark"
+            ? "black"
+            : args.componentTheme == "light"
+            ? "white"
+            : null};width:250px"
+        >
+          <ic-typography theme=${args.componentTheme}>Theme test</ic-typography>
+        </div>
+      </ic-theme>
+    </div>`,
+
+  name: "Theme visualisation playground",
+  args: defaultThemeArgs,
+
+  parameters: {
+    layout: "fullscreen",
+  },
+
+  argTypes: {
+    theme: {
+      options: ["system", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+
+    componentTheme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
+  },
+};

package/dist/collection/components/ic-toast/ic-toast.css

@@ -581,7 +581,7 @@ video {
 
 ic-loading-indicator {
   --outer-color: transparent;
-  --inner-color: var(--ic-action-light);
+  --inner-color: var(--ic-action-monochrome);
 }
 
 .toast-dismiss-timer {