@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.11

package/dist/collection/components/ic-empty-state/ic-empty-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-empty-state.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG/E,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,yBAAyB,GAC1B,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACb,yBAAoB,GAAqB,IAAI,CAAC;QAmD9C,yBAAoB,GAAG,CAAC,YAA8B,EAAQ,EAAE;YACtE,IACE,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CACvD,IAAI,KAAK,WAAW;gBAClB,CAAC,CAAC,yBAAyB,CAAC,UAAU,EAAE,YAAY,EAAE;oBAClD,OAAO;oBACP,SAAS;iBACV,CAAC;gBACJ,CAAC,CAAC,KAAK,CACV,EACD,CAAC;gBACD,WAAW,CAAC,IAAI,CAAC,CAAC;YACpB,CAAC;QACH,CAAC,CAAC;uBAzDwC,MAAM;;;;yBAoBlB,QAAQ;;;IAOtC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAC5E,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAiBD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACzE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;aACrD;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD;gBACP,YAAM,IAAI,EAAC,YAAY;oBACrB,qBAAe,OAAO,EAAC,gBAAgB,IAAE,UAAU,CAAiB,CAC/D;gBACP,YAAM,IAAI,EAAC,MAAM;oBACf,qBAAe,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAAiB,CACpD,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;gBACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Prop, Element, forceUpdate } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  checkSlotInChildMutations,\n} from \"../../utils/helpers\";\nimport { IcSizes } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    if (\n      mutationList.some(({ type, addedNodes, removedNodes }) =>\n        type === \"childList\"\n          ? checkSlotInChildMutations(addedNodes, removedNodes, [\n              \"image\",\n              \"actions\",\n            ])\n          : false\n      )\n    ) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading } = this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\">{heading}</ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography variant=\"subtitle-small\">{subheading}</ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines}>{body}</ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-empty-state.js","sourceRoot":"","sources":["../../../src/components/ic-empty-state/ic-empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAGlE,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAG7B;;;;;;GAMG;AAMH,MAAM,OAAO,UAAU;;QACb,yBAAoB,GAAqB,IAAI,CAAC;uBAOZ,MAAM;;;;yBAoBlB,QAAQ;;qBAUR,SAAS;;IAEvC,oBAAoB;;QAClB,MAAA,IAAI,CAAC,oBAAoB,0CAAE,UAAU,EAAE,CAAC;IAC1C,CAAC;IAED,gBAAgB;QACd,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC;YAC7B,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,aAAa,CACd,CAAC;QAEJ,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,EAAE,EAAE,CAChE,uBAAuB,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,IAAI,CAAC,CAClE,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,GACtE,IAAI,CAAC;QACP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,kBAAkB,OAAO,EAAE,CAAC,EAAE,IAAI;gBACnC,CAAC,SAAS,SAAS,EAAE,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC;gBACpD,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAEA,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,YAAM,IAAI,EAAC,OAAO,GAAQ;YAC3D;gBACE,YAAM,IAAI,EAAC,SAAS;oBAClB,qBAAe,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,qBAAqB,IACpD,OAAO,CACM,CACX;gBACP,YAAM,IAAI,EAAC,YAAY;oBACrB,qBACE,OAAO,EAAC,gBAAgB,EACxB,KAAK,EAAC,wBAAwB,IAE7B,UAAU,CACG,CACX;gBACP,YAAM,IAAI,EAAC,MAAM;oBACf,qBAAe,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAC,kBAAkB,IACxD,IAAI,CACS,CACX,CACH;YACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,IAAI,CACjC,WAAK,KAAK,EAAC,aAAa;gBACtB,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Host, Prop, Element } from \"@stencil/core\";\n\nimport { IcEmptyStateAlignment } from \"./ic-empty-state.types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot image - Content is placed at the top above all other content.\n * @slot actions - Content is placed at the bottom below all other content.\n * @slot heading - Content will be rendered in place of the heading prop.\n * @slot subheading - Content will be rendered in place of the subheading prop.\n * @slot body - Content will be rendered in place of the body prop.\n */\n@Component({\n  tag: \"ic-empty-state\",\n  styleUrl: \"ic-empty-state.css\",\n  shadow: true,\n})\nexport class EmptyState {\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcEmptyStateElement;\n\n  /**\n   * The alignment of the empty state container.\n   */\n  @Prop() aligned?: IcEmptyStateAlignment = \"left\";\n\n  /**\n   * The body text rendered in the empty state container.\n   */\n  @Prop() body?: string;\n\n  /**\n   * The number of lines of body text to display before truncating.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * The title rendered in the empty state container.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the image or icon used in the image slot.\n   */\n  @Prop() imageSize?: IcSizes = \"medium\";\n\n  /**\n   * The subtitle rendered in the empty state container.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * 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.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentDidLoad(): void {\n    !isSlotUsed(this.el, \"heading\") &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.heading, propName: \"heading\" }],\n        \"Empty State\"\n      );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"image\", \"actions\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  render() {\n    const { aligned, body, maxLines, heading, imageSize, subheading, theme } =\n      this;\n    return (\n      <Host\n        class={{\n          [`ic-empty-state-${aligned}`]: true,\n          [`image-${imageSize}`]: isSlotUsed(this.el, \"image\"),\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {isSlotUsed(this.el, \"image\") && <slot name=\"image\"></slot>}\n        <div>\n          <slot name=\"heading\">\n            <ic-typography variant=\"h4\" class=\"empty-state-heading\">\n              {heading}\n            </ic-typography>\n          </slot>\n          <slot name=\"subheading\">\n            <ic-typography\n              variant=\"subtitle-small\"\n              class=\"empty-state-subheading\"\n            >\n              {subheading}\n            </ic-typography>\n          </slot>\n          <slot name=\"body\">\n            <ic-typography maxLines={maxLines} class=\"empty-state-body\">\n              {body}\n            </ic-typography>\n          </slot>\n        </div>\n        {isSlotUsed(this.el, \"actions\") && (\n          <div class=\"action-area\">\n            <slot name=\"actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-empty-state/ic-empty-state.stories.js

@@ -0,0 +1,404 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  aligned: "left",
+  body: "This is the body text for the empty state.",
+  maxLines: 3,
+  heading: "This is the heading",
+  imageSize: "default",
+  subheading: "This is the subheading",
+  showImage: false,
+  showActions: false,
+  theme: "inherit",
+};
+
+export default {
+  title: "Web Components/Empty state",
+  component: "ic-empty-state",
+};
+
+export const WithSubheadingAndBodyText = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    ></ic-empty-state>`,
+
+  name: "With subheading and body text",
+};
+
+export const WithActions = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    >
+      <ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`,
+
+  name: "With actions",
+};
+
+export const WithImage = {
+  render: () => html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    >
+      <svg
+        slot="image"
+        height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+    ></ic-empty-state>`,
+
+  name: "With image",
+};
+
+export const WithSmallImage = {
+  render: () => html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for empty state."
+      image-size="small"
+    >
+      <svg
+        slot="image"
+        height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+    ></ic-empty-state>`,
+
+  name: "With small image",
+};
+
+export const WithLargeImage = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for empty state."
+      image-size="large"
+    >
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+    ></ic-empty-state>`,
+
+  name: "With large image",
+};
+
+export const WithIcon = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    >
+      <svg
+        slot="image"
+        aria-labelledby="warning-title"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="#D07932"
+      >
+        <title id="warning-title">Warning</title>
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" />
+      </svg>
+    </ic-empty-state>`,
+
+  name: "With icon",
+};
+
+export const CentreAligned = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for empty state."
+      aligned="center"
+    >
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+      ><ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`,
+
+  name: "Centre aligned",
+};
+
+export const RightAligned = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for empty state."
+      aligned="right"
+    >
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+      ><ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`,
+
+  name: "Right aligned",
+};
+
+export const MaxLines = {
+  render: () =>
+    html`<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body of text that is truncated to two lines. Click the 'See more' link to expand the text, then click 'See less' to truncate the text once more!
+Dripper caramelization java saucer grounds galão, mocha, and robusta kopi-luwak, percolator, instant, qui saucer latte in brewed café au lait. Con panna, cup, cream, body americano affogato cup espresso, rich milk seasonal saucer grinder spoon that cultivar strong redeye frappuccino barista extraction redeye mazagran. Grounds, french press dripper organic and foam id saucer, crema, black rich dark, grounds breve coffee steamed caramelization percolator."
+      max-lines="2"
+    >
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+      ><ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`,
+
+  name: "Max lines",
+};
+
+export const SlottedContent = {
+  render: () =>
+    html`<ic-empty-state>
+      <ic-typography slot="heading" variant="h4">
+        Empty state title
+      </ic-typography>
+      <ic-typography slot="subheading" variant="subtitle-small">
+        Empty state subtitle
+      </ic-typography>
+      <ic-typography slot="body"> Body text for empty state. </ic-typography>
+      <svg
+        slot="image"
+        style="height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+      ><ic-button slot="actions">Action</ic-button>
+      <ic-link href="/" slot="actions">Standalone link</ic-link></ic-empty-state
+    >`,
+
+  name: "Slotted content",
+};
+
+export const WithinDiv = {
+  render: () =>
+    html`<div style="width:357px;border:1px solid black;background:#D3D3D3;">
+      <ic-empty-state
+        heading="Empty state title"
+        subheading="Empty state subtitle"
+        body="Body text for empty state."
+      >
+        <svg
+          slot="image"
+          style="height:326px;width:326px;"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 1600 900"
+        >
+          <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+          <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+          <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+          <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+          <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+          <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+          <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+          <polygon fill="#b80066" points="641 695 886 900 367 900" />
+          <polygon fill="#960052" points="587 900 641 695 886 900" />
+          <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+          <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+          <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+          <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+        ><ic-button slot="actions">Action</ic-button>
+        <ic-link href="/" slot="actions"
+          >Standalone link</ic-link
+        ></ic-empty-state
+      >
+    </div>`,
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-empty-state
+      heading=${args.heading}
+      subheading=${args.subheading}
+      body=${args.body}
+      image-size=${args.imageSize}
+      max-lines=${args.maxLines}
+      aligned=${args.aligned}
+      theme=${args.theme}
+    >
+      ${args.showImage &&
+      html`
+      <svg
+        slot="image"
+        height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" />
+      </svg>
+          `}
+      ${args.showActions &&
+      html`
+        <ic-button slot="actions">Action</ic-button>
+        <ic-link href="/" slot="actions">Standalone link</ic-link>
+      `}
+    </ic-empty-state>`,
+
+  args: defaultArgs,
+
+  argTypes: {
+    aligned: {
+      options: ["left", "center", "right"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    imageSize: {
+      options: ["medium", "small", "large"],
+
+      control: {
+        type: "radio",
+      },
+    },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+      control: {
+        type: "inline-radio",
+      },
+    },
+  },
+
+  name: "Playground",
+};

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

@@ -0,0 +1,101 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { EmptyState } from "../../ic-empty-state";
+import { mockHasDynamicChildSlots, mockMutationObserverImplementation, mockRenderDynamicChildSlots, } from "../../../../testspec.setup";
+describe("ic-empty-state component", () => {
+    afterAll(() => {
+        jest.restoreAllMocks();
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    it("should render", async () => {
+        const page = await newSpecPage({
+            components: [EmptyState],
+            html: `<ic-empty-state heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    ></ic-empty-state>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with light theme", async () => {
+        const page = await newSpecPage({
+            components: [EmptyState],
+            html: `<ic-empty-state heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+      theme="light"
+    ></ic-empty-state>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with dark theme", async () => {
+        const page = await newSpecPage({
+            components: [EmptyState],
+            html: `<ic-empty-state heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+      theme="dark"
+    ></ic-empty-state>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render with content in the image slot", async () => {
+        const page = await newSpecPage({
+            components: [EmptyState],
+            html: `<ic-empty-state
+      heading="Empty state title"
+      subheading="Empty state subtitle"
+      body="Body text for the empty state."
+    >
+      <svg
+        slot="image"
+        height:326px;width:326px;"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 1600 900"
+      >
+        <rect fill="#ff7700" width="1600" height="1600" y="-350" />
+        <polygon fill="#cc0000" points="957 450 539 900 1396 900" />
+        <polygon fill="#aa0000" points="957 450 872.9 900 1396 900" />
+        <polygon fill="#c50022" points="-60 900 398 662 816 900" />
+        <polygon fill="#a3001b" points="337 900 398 662 816 900" />
+        <polygon fill="#be0044" points="1203 546 1552 900 876 900" />
+        <polygon fill="#9c0036" points="1203 546 1552 900 1162 900" />
+        <polygon fill="#b80066" points="641 695 886 900 367 900" />
+        <polygon fill="#960052" points="587 900 641 695 886 900" />
+        <polygon fill="#b10088" points="1710 900 1401 632 1096 900" />
+        <polygon fill="#8f006d" points="1710 900 1401 632 1365 900" />
+        <polygon fill="#aa00aa" points="1210 900 971 687 725 900" />
+        <polygon fill="#880088" points="943 900 1210 900 971 687" /></svg
+    ></ic-empty-state>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should test rendering an action after initial render", async () => {
+        const page = await newSpecPage({
+            components: [EmptyState],
+            html: `<ic-empty-state heading="Empty state title"></ic-empty-state>`,
+        });
+        const component = page.rootInstance;
+        const host = page.root;
+        const observerInstance = mockMutationObserverImplementation.mock.results[0].value;
+        const action = document.createElement("button");
+        action.setAttribute("slot", "actions");
+        observerInstance.observe(host, { childList: true });
+        host.appendChild(action);
+        const mockMutationRecord = [
+            {
+                addedNodes: [action],
+                removedNodes: [],
+                target: host,
+            },
+        ];
+        observerInstance.trigger(mockMutationRecord);
+        await page.waitForChanges();
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(mockMutationRecord, ["image", "actions"], component);
+        expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);
+        expect(page.root).toMatchSnapshot();
+    });
+});
+//# sourceMappingURL=ic-empty-state.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-empty-state.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-empty-state/test/basic/ic-empty-state.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EACL,wBAAwB,EACxB,kCAAkC,EAElC,2BAA2B,GAC5B,MAAM,4BAA4B,CAAC;AAEpC,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,QAAQ,CAAC,GAAG,EAAE;QACZ,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;uBAGW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;uBAIW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;uBAIW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;uBAwBW;SAClB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE,+DAA+D;SACtE,CAAC,CAAC;QAEH,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QACpC,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;QAEvB,MAAM,gBAAgB,GACpB,kCAAkC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAE3D,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;QAEvC,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;QAEpD,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QAEzB,MAAM,kBAAkB,GAAyB;YAC/C;gBACE,UAAU,EAAE,CAAC,MAAM,CAAC;gBACpB,YAAY,EAAE,EAAE;gBAChB,MAAM,EAAE,IAAI;aACb;SACF,CAAC;QAEF,gBAAgB,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAE7C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAE5B,MAAM,CAAC,2BAA2B,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAC7D,MAAM,CAAC,2BAA2B,CAAC,CAAC,oBAAoB,CACtD,kBAAkB,EAClB,CAAC,OAAO,EAAE,SAAS,CAAC,EACpB,SAAS,CACV,CAAC;QAEF,MAAM,CAAC,wBAAwB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QAE1D,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { EmptyState } from \"../../ic-empty-state\";\nimport {\n  mockHasDynamicChildSlots,\n  mockMutationObserverImplementation,\n  MockMutationRecord,\n  mockRenderDynamicChildSlots,\n} from \"../../../../testspec.setup\";\n\ndescribe(\"ic-empty-state component\", () => {\n  afterAll(() => {\n    jest.restoreAllMocks();\n  });\n\n  afterEach(() => {\n    jest.clearAllMocks();\n  });\n\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\"\n      subheading=\"Empty state subtitle\"\n      body=\"Body text for the empty state.\"\n    ></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with light theme\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\"\n      subheading=\"Empty state subtitle\"\n      body=\"Body text for the empty state.\"\n      theme=\"light\"\n    ></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with dark theme\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\"\n      subheading=\"Empty state subtitle\"\n      body=\"Body text for the empty state.\"\n      theme=\"dark\"\n    ></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with content in the image slot\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state\n      heading=\"Empty state title\"\n      subheading=\"Empty state subtitle\"\n      body=\"Body text for the empty state.\"\n    >\n      <svg\n        slot=\"image\"\n        height:326px;width:326px;\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 1600 900\"\n      >\n        <rect fill=\"#ff7700\" width=\"1600\" height=\"1600\" y=\"-350\" />\n        <polygon fill=\"#cc0000\" points=\"957 450 539 900 1396 900\" />\n        <polygon fill=\"#aa0000\" points=\"957 450 872.9 900 1396 900\" />\n        <polygon fill=\"#c50022\" points=\"-60 900 398 662 816 900\" />\n        <polygon fill=\"#a3001b\" points=\"337 900 398 662 816 900\" />\n        <polygon fill=\"#be0044\" points=\"1203 546 1552 900 876 900\" />\n        <polygon fill=\"#9c0036\" points=\"1203 546 1552 900 1162 900\" />\n        <polygon fill=\"#b80066\" points=\"641 695 886 900 367 900\" />\n        <polygon fill=\"#960052\" points=\"587 900 641 695 886 900\" />\n        <polygon fill=\"#b10088\" points=\"1710 900 1401 632 1096 900\" />\n        <polygon fill=\"#8f006d\" points=\"1710 900 1401 632 1365 900\" />\n        <polygon fill=\"#aa00aa\" points=\"1210 900 971 687 725 900\" />\n        <polygon fill=\"#880088\" points=\"943 900 1210 900 971 687\" /></svg\n    ></ic-empty-state>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test rendering an action after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [EmptyState],\n      html: `<ic-empty-state heading=\"Empty state title\"></ic-empty-state>`,\n    });\n\n    const component = page.rootInstance;\n    const host = page.root;\n\n    const observerInstance =\n      mockMutationObserverImplementation.mock.results[0].value;\n\n    const action = document.createElement(\"button\");\n    action.setAttribute(\"slot\", \"actions\");\n\n    observerInstance.observe(host, { childList: true });\n\n    host.appendChild(action);\n\n    const mockMutationRecord: MockMutationRecord[] = [\n      {\n        addedNodes: [action],\n        removedNodes: [],\n        target: host,\n      },\n    ];\n\n    observerInstance.trigger(mockMutationRecord);\n\n    await page.waitForChanges();\n\n    expect(mockRenderDynamicChildSlots).toHaveBeenCalledTimes(1);\n    expect(mockRenderDynamicChildSlots).toHaveBeenCalledWith(\n      mockMutationRecord,\n      [\"image\", \"actions\"],\n      component\n    );\n\n    expect(mockHasDynamicChildSlots).toHaveBeenCalledTimes(1);\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

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

@@ -459,16 +459,17 @@ video {
   --footer-link-inner-flex-direction: column;
 }
 
-:host(.ic-footer-foreground-light) {
-  --footer-theme-secondary: var(--ic-theme-secondary);
-  --footer-theme-tertiary: var(--ic-theme-tertiary);
-  --footer-keyline: var(--ic-keyline-lighten);
-}
-
 :host(.ic-footer-foreground-dark) {
-  --footer-theme-secondary: var(--ic-theme-secondary-light);
-  --footer-theme-tertiary: var(--ic-theme-tertiary-light);
-  --footer-keyline: var(--ic-keyline-darken);
+  --ic-footer-background: var(--ic-brand-color-secondary-light);
+  --ic-footer-bottom-background: var(--ic-brand-color-tertiary-light);
+  --ic-footer-keyline: var(--ic-state-layer-darken-20);
+  --ic-footer-text: var(--ic-color-text-primary-light);
+  --ic-footer-link: var(--ic-color-text-primary-light);
+  --ic-footer-icon: var(--ic-color-icon-neutral);
+  --ic-footer-chevron-icon: var(--ic-color-icon-neutral);
+  --ic-footer-logo: var(--ic-color-icon-neutral);
+  --ic-footer-hover: var(--ic-architectural-700-state-layer-10);
+  --ic-footer-pressed: var(--ic-architectural-700-state-layer-20);
 }
 
 :host(.ic-footer-small.ic-footer-ungrouped) {
@@ -485,12 +486,12 @@ footer {
 /* Description */
 
 .footer-description {
-  background-color: var(--footer-theme-secondary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-background);
+  color: var(--ic-footer-text);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-text);
 
-  border-bottom: var(--footer-keyline);
+  border-bottom: var(--ic-space-1px) solid var(--ic-footer-keyline);
 }
 
 .footer-description-inner {
@@ -501,10 +502,10 @@ footer {
 
 .footer-links {
   padding: var(--footer-links-padding);
-  background-color: var(--footer-theme-secondary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-background);
+  color: var(--ic-footer-link);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-link);
 }
 
 .footer-links-inner {
@@ -515,10 +516,10 @@ footer {
 /* Compliance */
 
 .footer-compliance {
-  background-color: var(--footer-theme-tertiary);
-  color: var(--ic-theme-text);
+  background-color: var(--ic-footer-bottom-background);
+  color: var(--ic-footer-text);
 
-  --ic-typography-color: var(--ic-theme-text);
+  --ic-typography-color: var(--ic-footer-text);
 }
 
 .footer-compliance-inner {
@@ -545,6 +546,6 @@ footer {
 
 @media (forced-colors: active) {
   footer {
-    border-top: var(--ic-hc-border);
+    border-top: var(--ic-border-hc);
   }
 }