@ukic/web-components 3.0.0 → 3.1.0

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

@@ -1,52 +1,80 @@
 import { Host, h, } from "@stencil/core";
-import { convertToRGBA, getThemeForegroundColor } from "../../utils/helpers";
-import { getThemeColorBrightness } from "../../utils/helpers";
+import { convertToRGBA, getBrandForegroundAppearance, } from "../../utils/helpers";
+import { getBrandColorBrightness } from "../../utils/helpers";
 import { BLACK_MIN_COLOR_BRIGHTNESS, WHITE_MAX_COLOR_BRIGHTNESS, } from "../../utils/constants";
 export class Theme {
     constructor() {
-        this.checkThemeColorContrast = () => {
-            if (getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
-                getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
-                console.warn(`The theme 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.`);
+        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 =
+                    window.matchMedia &&
+                        window.matchMedia("(prefers-color-scheme: dark)").matches
+                        ? "ic-theme-dark"
+                        : "ic-theme-light";
+            }
+            else {
+                this.themeClass = `ic-theme-${this.theme}`;
+            }
+        };
+        this.checkBrandColorContrast = () => {
+            if (getBrandColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&
+                getBrandColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS) {
+                console.warn(`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.`);
             }
         };
-        this.setThemeColor = () => {
-            const colorRGBA = convertToRGBA(this.color);
+        this.setBrandColor = () => {
+            const colorRGBA = this.brandColor ? convertToRGBA(this.brandColor) : null;
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
                 const { style } = document.documentElement;
-                style.setProperty("--ic-theme-primary-r", `${r}`);
-                style.setProperty("--ic-theme-primary-g", `${g}`);
-                style.setProperty("--ic-theme-primary-b", `${b}`);
-                style.setProperty("--ic-theme-primary-a", `${a}`);
-                this.checkThemeColorContrast();
-                this.themeChange.emit({
-                    mode: getThemeForegroundColor(),
+                style.setProperty("--ic-brand-color-primary-r", `${r}`);
+                style.setProperty("--ic-brand-color-primary-g", `${g}`);
+                style.setProperty("--ic-brand-color-primary-b", `${b}`);
+                style.setProperty("--ic-brand-color-primary-a", `${a}`);
+                this.checkBrandColorContrast();
+                this.brandChange.emit({
+                    mode: getBrandForegroundAppearance(),
                     color: colorRGBA,
                 });
             }
         };
-        this.color = null;
     }
-    watchColorPropHandler() {
-        this.setThemeColor();
+    watchBrandColorPropHandler() {
+        this.setBrandColor();
+    }
+    watchThemePropHandler() {
+        this.darkModeChangeHandler();
     }
     componentWillLoad() {
-        this.setThemeColor();
+        this.darkModeChangeHandler();
+        this.setBrandColor();
+        window.matchMedia &&
+            window
+                .matchMedia("(prefers-color-scheme: dark)")
+                .addEventListener("change", this.darkModeChangeHandler);
     }
     render() {
-        return h(Host, null);
+        const { themeClass } = this;
+        return (h(Host, { key: '8b3a86598f9539940fdfc534c4482246b043985c', class: themeClass }, h("slot", { key: '0d55a0ae9b75cfeccf0aa30bd31a2c3a09058ce7' })));
     }
     static get is() { return "ic-theme"; }
-    static get encapsulation() { return "shadow"; }
     static get properties() {
         return {
-            "color": {
+            "brandColor": {
                 "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",
@@ -59,36 +87,63 @@ export class Theme {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The theme 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)\"."
+                    "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)\"."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
+                "attribute": "brand-color",
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"system\"",
+                    "resolved": "\"dark\" | \"light\" | \"system\" | undefined",
+                    "references": {}
+                },
+                "required": 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\""
             }
         };
     }
+    static get states() {
+        return {
+            "themeClass": {}
+        };
+    }
     static get events() {
         return [{
-                "method": "themeChange",
-                "name": "themeChange",
+                "method": "brandChange",
+                "name": "brandChange",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
                     "tags": [{
                             "name": "internal",
-                            "text": "Emitted when the theme is changed."
+                            "text": "Emitted when the brand color is changed."
                         }],
                     "text": ""
                 },
                 "complexType": {
-                    "original": "IcTheme",
-                    "resolved": "{ mode: IcThemeForeground; color: IcColorRGB; }",
+                    "original": "IcBrand",
+                    "resolved": "{ mode: IcBrandForeground; color: IcColorRGB; }",
                     "references": {
-                        "IcTheme": {
+                        "IcBrand": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcTheme"
+                            "id": "src/utils/types.ts::IcBrand"
                         }
                     }
                 }
@@ -96,8 +151,11 @@ export class Theme {
     }
     static get watchers() {
         return [{
-                "propName": "color",
-                "methodName": "watchColorPropHandler"
+                "propName": "brandColor",
+                "methodName": "watchBrandColorPropHandler"
+            }, {
+                "propName": "theme",
+                "methodName": "watchThemePropHandler"
             }];
     }
 }

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,GACL,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EACL,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,OAAO,KAAK;;QAoBR,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,KAAK,CAAC,CAAC;YAE5C,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,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAClD,KAAK,CAAC,WAAW,CAAC,sBAAsB,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;gBAElD,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAE/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;oBACpB,IAAI,EAAE,uBAAuB,EAAE;oBAC/B,KAAK,EAAE,SAAS;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;qBA7CwB,IAAI;;IAG9B,qBAAqB;QACnB,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAOD,iBAAiB;QACf,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAiCD,MAAM;QACJ,OAAO,EAAC,IAAI,OAAQ,CAAC;IACvB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  Event,\n  EventEmitter,\n  h,\n  Watch,\n  Prop,\n} from \"@stencil/core\";\n\nimport { IcColor, IcTheme } from \"../../utils/types\";\nimport { convertToRGBA, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { getThemeColorBrightness } 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  shadow: true,\n})\nexport class Theme {\n  /**\n   * The theme 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() color?: IcColor = null;\n\n  @Watch(\"color\")\n  watchColorPropHandler(): void {\n    this.setThemeColor();\n  }\n\n  /**\n   * @internal Emitted when the theme is changed.\n   */\n  @Event() themeChange: EventEmitter<IcTheme>;\n\n  componentWillLoad(): void {\n    this.setThemeColor();\n  }\n\n  private checkThemeColorContrast = (): void => {\n    if (\n      getThemeColorBrightness() < BLACK_MIN_COLOR_BRIGHTNESS &&\n      getThemeColorBrightness() > WHITE_MAX_COLOR_BRIGHTNESS\n    ) {\n      console.warn(\n        `The theme 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 setThemeColor = () => {\n    const colorRGBA = convertToRGBA(this.color);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const { style } = document.documentElement;\n      style.setProperty(\"--ic-theme-primary-r\", `${r}`);\n      style.setProperty(\"--ic-theme-primary-g\", `${g}`);\n      style.setProperty(\"--ic-theme-primary-b\", `${b}`);\n      style.setProperty(\"--ic-theme-primary-a\", `${a}`);\n\n      this.checkThemeColorContrast();\n\n      this.themeChange.emit({\n        mode: getThemeForegroundColor(),\n        color: colorRGBA,\n      });\n    }\n  };\n\n  render() {\n    return <Host></Host>;\n  }\n}\n"]}
+{"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;IAHlB;QAIW,eAAU,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,eAAU,GAAoB,IAAI,CAAC;QAO3C;;WAEG;QACK,UAAK,GAAiC,OAAO,CAAC;QAsB9C,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,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;YAE1E,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;KAWH;IAjFC,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,qDAAC,KAAK,EAAE,UAAU;YACrB,8DAAa,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 = 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,
+      },
+    },
+  },
+};