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

package/dist/collection/components/ic-side-navigation/ic-side-navigation.css

@@ -99,7 +99,7 @@
 }
 
 .bottom-wrapper {
-  border-top: var(--ic-keyline-lighten);
+  border-top: var(--ic-border-keyline-lighten);
   bottom: 0;
   left: 0;
   z-index: 2;
@@ -114,7 +114,7 @@
 }
 
 :host(.ic-side-navigation-dark) .bottom-wrapper {
-  border-top: var(--ic-keyline-darken);
+  border-top: var(--ic-border-keyline-darken);
 }
 
 /* Mobile Top Bar */
@@ -131,7 +131,7 @@
   top: 0;
   left: 0;
   right: 0;
-  border-bottom: var(--ic-keyline-darken);
+  border-bottom: var(--ic-border-keyline-darken);
   box-shadow: var(--ic-elevation-overlay);
   z-index: 2;
   overflow: hidden;
@@ -147,13 +147,13 @@
 }
 
 .top-bar.light {
-  border-bottom: var(--ic-keyline-lighten);
+  border-bottom: var(--ic-border-keyline-lighten);
 }
 
 .app-title-wrapper {
   display: flex;
   margin-left: var(--ic-space-xs);
-  border-left: var(--ic-keyline-darken);
+  border-left: var(--ic-border-keyline-darken);
   padding-left: var(--ic-space-xxs);
   color: var(--ic-theme-text);
   align-items: center;
@@ -286,7 +286,7 @@ slot[name="app-title"]::slotted(a) {
   display: flex;
   border-radius: 1rem;
   background-color: var(--ic-theme-text);
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary);
   padding: var(--ic-space-xxs) var(--ic-space-lg);
   min-width: 1rem;
 }
@@ -317,7 +317,7 @@ slot[name="app-title"]::slotted(a) {
   --navigation-group-hover: var(--ic-theme-hover);
   --navigation-group-text-hover: var(--ic-theme-text);
   --navigation-item-child-height: 3.5rem;
-  --navigation-item-child-active: var(--ic-action-dark-bg-active);
+  --navigation-item-child-active: var(--ic-action-dark-bg-pressed);
   --navigation-item-child-color: var(--ic-theme-text);
   --navigation-group-expand-toggle-padding: 0.25rem;
 }
@@ -670,7 +670,7 @@ slot[name="app-title"]::slotted(a) {
 @media (forced-colors: active) {
   .side-navigation,
   .top-bar {
-    border-right: var(--ic-hc-border);
+    border-right: var(--ic-border-hc);
   }
 
   .menu-expand-button {

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

@@ -443,38 +443,20 @@ video {
 
 @keyframes loading {
   0% {
-    background-color: var(--ic-architectural-100);
+    background-color: var(--ic-skeleton-background);
   }
 
   50% {
-    background-color: var(--ic-architectural-200);
+    background-color: var(--ic-skeleton-background-secondary);
   }
 
   100% {
-    background-color: var(--ic-architectural-100);
+    background-color: var(--ic-skeleton-background);
   }
 }
 
-@keyframes loading-light {
-  0% {
-    background-color: var(--ic-architectural-600);
-  }
-
-  50% {
-    background-color: var(--ic-architectural-400);
-  }
-
-  100% {
-    background-color: var(--ic-architectural-600);
-  }
-}
-
-:host {
-  display: inline-block;
-}
-
 :host(.skeleton) {
-  background-color: var(--ic-architectural-100);
+  background-color: var(--ic-skeleton-background);
   border-radius: var(--ic-border-radius);
   animation: loading 1200ms infinite;
   display: inline-block;
@@ -489,11 +471,6 @@ video {
   border-radius: 50%;
 }
 
-:host(.ic-skeleton-light) {
-  background-color: var(--ic-architectural-600);
-  animation: loading-light 1200ms infinite;
-}
-
 @media (forced-colors: active) {
   :host(.skeleton) {
     -ms-high-contrast-adjust: none;

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

@@ -6,11 +6,11 @@ const DEFAULT_HEIGHTS = {
 };
 export class Skeleton {
     constructor() {
-        this.appearance = "default";
+        this.theme = "inherit";
         this.variant = "rectangle";
     }
     render() {
-        const { variant, appearance, el } = this;
+        const { variant, theme, el } = this;
         const style = !el.firstElementChild
             ? {
                 height: el.style.height || DEFAULT_HEIGHTS[variant],
@@ -20,7 +20,7 @@ export class Skeleton {
         return (h(Host, { class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
-                "ic-skeleton-light": appearance === "light",
+                [`ic-theme-${theme}`]: theme !== "inherit",
             }, style: style, "aria-disabled": "true" }, h("slot", null)));
     }
     static get is() { return "ic-skeleton"; }
@@ -37,23 +37,29 @@ export class Skeleton {
     }
     static get properties() {
         return {
-            "appearance": {
+            "theme": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"light\" | \"default\"",
-                    "resolved": "\"default\" | \"light\"",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The appearance of the skeleton."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "appearance",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"inherit\""
             },
             "variant": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;;0BAMwB,SAAS;uBAKb,WAAW;;IAElD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEzC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAO,CAAC;gBACnD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,mBAAmB,EAAE,UAAU,KAAK,OAAO;aAC5C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\n\n  /**\n   * The appearance of the skeleton.\n   */\n  @Prop() appearance?: \"light\" | \"default\" = \"default\";\n\n  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, appearance, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          \"ic-skeleton-light\": appearance === \"light\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-skeleton.js","sourceRoot":"","sources":["../../../src/components/ic-skeleton/ic-skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlE,MAAM,eAAe,GAAG;IACtB,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,MAAM;IACd,SAAS,EAAE,MAAM;CAClB,CAAC;AAOF,MAAM,OAAO,QAAQ;;qBAMW,SAAS;uBAKA,WAAW;;IAElD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;QAEpC,MAAM,KAAK,GAAG,CAAC,EAAE,CAAC,iBAAiB;YACjC,CAAC,CAAC;gBACE,MAAM,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,eAAe,CAAC,OAAO,CAAC;gBACnD,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;aACnE;YACH,CAAC,CAAC,SAAS,CAAC;QAEd,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,oBAAoB,EAAE,OAAO,KAAK,QAAQ;gBAC1C,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C,EACD,KAAK,EAAE,KAAK,mBACE,MAAM;YAEpB,eAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport { IcSkeletonVariants } from \"./ic-skeleton.types\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst DEFAULT_HEIGHTS = {\n  text: \"1em\",\n  circle: \"25px\",\n  rectangle: \"93px\",\n};\n\n@Component({\n  tag: \"ic-skeleton\",\n  styleUrl: \"ic-skeleton.css\",\n  shadow: true,\n})\nexport class Skeleton {\n  @Element() el: HTMLIcSkeletonElement;\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  /**\n   * The variant of the skeleton that will be displayed.\n   */\n  @Prop() variant?: IcSkeletonVariants = \"rectangle\";\n\n  render() {\n    const { variant, theme, el } = this;\n\n    const style = !el.firstElementChild\n      ? {\n          height: el.style.height || DEFAULT_HEIGHTS[variant],\n          width: el.style.width || (variant === \"circle\" ? \"25px\" : \"260px\"),\n        }\n      : undefined;\n\n    return (\n      <Host\n        class={{\n          skeleton: true,\n          \"ic-skeleton-circle\": variant === \"circle\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        style={style}\n        aria-disabled=\"true\"\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-status-tag/ic-status-tag.css

@@ -519,7 +519,7 @@ video {
 
 @media (forced-colors: active) {
   .tag {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
     -ms-high-contrast-adjust: none;
     forced-color-adjust: none;
   }

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

@@ -23,6 +23,10 @@
   white-space: pre-line;
 }
 
+.next-step {
+  color: var(--ic-stepper-compact-step-next-text);
+}
+
 .visually-hidden {
   position: absolute;
   left: -625rem;
@@ -37,15 +41,11 @@
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 
-  --compact-step-inner-color: var(--ic-status-info);
+  --compact-step-inner-color: var(--ic-step-indicator-status-current);
+  --compact-step-outer-color: var(--ic-step-indicator-status-remaining);
   --compact-step-circular-line-width: var(--ic-space-xxs);
 }
 
-:host(.ic-step-compact.ic-step-light) {
-  --compact-step-inner-color: var(--ic-status-info-contrast);
-  --compact-step-outer-color: var(--ic-architectural-600);
-}
-
 :host(.ic-step-compact) .step {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
@@ -65,8 +65,8 @@
   border-radius: 50%;
 }
 
-:host(:not(.ic-step-light)) ic-loading-indicator::part(ic-loading-container) {
-  background-color: var(--ic-architectural-white);
+:host() ic-loading-indicator::part(ic-loading-container) {
+  background-color: var(--ic-step-indicator-background);
 }
 
 :host(.ic-step-compact) .heading-area {
@@ -75,8 +75,12 @@
   width: 14.25rem;
 }
 
-:host(.ic-step-compact.ic-step-light) .disabled .heading-area {
-  color: var(--ic-architectural-400);
+:host(.ic-step-compact) .heading {
+  color: var(--ic-stepper-compact-step-title);
+}
+
+:host(.ic-step-compact) .disabled .heading {
+  color: var(--ic-stepper-compact-step-title);
 }
 
 .info-line {
@@ -87,36 +91,24 @@
 
 .step-status {
   display: flex;
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-stepper-compact-step-requirement-text);
   -moz-column-gap: var(--ic-space-xxxs);
        column-gap: var(--ic-space-xxxs);
 }
 
 .compact-step-completed .step-status {
-  color: var(--ic-status-success);
-}
-
-:host(.ic-step-light) .compact-step-completed .step-status {
-  color: var(--ic-status-success-contrast);
+  color: var(--ic-stepper-compact-step-completed-text);
 }
 
 .compact-step-disabled :is(.heading, .step-status) {
-  color: var(--ic-color-tertiary-text);
-}
-
-:host(.ic-step-light) .compact-step-disabled :is(.step-status) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-stepper-compact-step-requirement-text-disabled);
 }
 
 .step-num {
-  color: var(--ic-color-secondary-text);
+  color: var(--ic-stepper-compact-step-stage-text);
   white-space: nowrap;
 }
 
-:host(.ic-step-light) .step-num {
-  color: var(--ic-architectural-white);
-}
-
 :host(.ic-step-compact) .step-icon {
   margin: var(--ic-space-xxxs);
 }
@@ -147,8 +139,8 @@
   border-radius: 50%;
 }
 
-:host(.ic-step-default:not(.ic-step-light)) .step-icon {
-  background-color: var(--ic-architectural-white);
+:host(.ic-step-default) .step-icon {
+  background-color: var(--ic-step-number-inactive);
 }
 
 .step-icon-inner {
@@ -158,10 +150,11 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%;
+  color: var(--ic-step-number-text-inactive);
 }
 
 :host(.ic-step-default) .current {
-  color: var(--ic-status-info);
+  color: var(--ic-status-info-default);
 }
 
 :host(.ic-step-default.ic-step-light) .current,
@@ -189,20 +182,36 @@
   width: fit-content;
 }
 
-.subheading {
-  color: var(--ic-color-tertiary-text);
+.heading {
+  color: var(--ic-step-title);
 }
 
-:host(.ic-step-light) .subheading {
-  color: var(--ic-architectural-white);
+.current .heading {
+  color: var(--ic-step-title-current);
+}
+
+.completed .heading {
+  color: var(--ic-step-title-success);
+}
+
+.disabled .heading {
+  color: var(--ic-step-title-disabled);
+}
+
+.subheading {
+  color: var(--ic-step-title-status-text-inactive);
 }
 
 .current .subheading {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-step-title-status-text-current);
+}
+
+.disabled .subheading {
+  color: var(--ic-step-title-status-text-disabled);
 }
 
 :host(.ic-step-default) .completed {
-  color: var(--ic-status-success);
+  color: var(--ic-status-success-default);
 }
 
 :host(.ic-step-default.ic-step-light) .completed,
@@ -211,7 +220,7 @@
 }
 
 .active .step-icon-inner {
-  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
+  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
 }
 
 :host(.ic-step-light) .active .step-icon-inner {
@@ -219,12 +228,8 @@
 }
 
 .current .step-icon-inner {
-  background-color: var(--ic-status-info);
-  color: var(--ic-architectural-white);
-}
-
-:host(.ic-step-light) .current .step-icon-inner {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-step-number-background-active);
+  color: var(--ic-step-number-text);
 }
 
 .disabled {
@@ -237,55 +242,40 @@
 }
 
 .disabled .step-icon-inner {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed var(--ic-step-number-disabled);
   width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
   height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  color: var(--ic-step-number-text-disabled);
 }
 
-:host(.ic-step-light) .disabled .step-icon-inner {
-  border: var(--ic-border-width) dashed var(--ic-architectural-400);
-}
-
-.disabled .heading-area,
-:host(.ic-step-default.ic-step-light) .disabled .subheading {
-  color: var(--ic-color-tertiary-text);
+.disabled .step-icon {
+  background-color: transparent !important;
 }
 
 .completed .step-icon-inner {
-  background: var(--ic-status-success);
-  box-shadow: inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);
+  background: var(--ic-step-number-background-success);
+  box-shadow: inset var(--ic-step-number-background-success) 0 0 0
+    var(--ic-space-xxxs);
   border-radius: 100%;
 }
 
-:host(.ic-step-light) .completed .step-icon-inner {
-  background: var(--ic-status-success-contrast);
-  box-shadow: inset var(--ic-status-success-contrast) 0 0 0 var(--ic-space-xxxs);
-}
-
 :host(.ic-step-default) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-status-info);
+  border: var(--ic-space-xxxs) solid var(--ic-step-number-current-outline);
   padding: var(--ic-space-xxxs);
   margin: 0 calc(-1 * var(--ic-space-xxxs));
+  background-color: var(--ic-step-number-current-outer-fill);
 
   /* compensating for the circle being bigger than other steps */
 }
 
-:host(.ic-step-default.ic-step-light) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-status-info-contrast);
-}
-
 .step-connect {
   height: var(--ic-space-xxxs);
-  background-color: var(--ic-architectural-200);
+  background-color: var(--ic-stepper-connector-remaining-status);
   margin: 0 var(--ic-space-xs);
   border-radius: var(--ic-space-xxs);
   width: 100%;
 }
 
-:host(.ic-step-light) .step-connect {
-  background-color: var(--ic-architectural-600);
-}
-
 .aligned-full-width.step-connect {
   min-width: 6.25rem;
   width: 100%;
@@ -294,20 +284,12 @@
 .disabled .step-connect {
   height: 0;
   background-color: rgb(0 0 0 / 0%);
-  border-top: 0.125rem dashed var(--ic-architectural-200);
+  border-top: 0.125rem dashed var(--ic-stepper-connector-disabled);
   border-radius: 0;
 }
 
-:host(.ic-step-light) .disabled .step-connect {
-  border-top: 0.125rem dashed var(--ic-architectural-600);
-}
-
 .completed .step-connect {
-  background-color: var(--ic-status-success);
-}
-
-:host(.ic-step-light) .completed .step-connect {
-  background-color: var(--ic-status-success-contrast);
+  background-color: var(--ic-stepper-connector-success);
 }
 
 .step-connect-inner {
@@ -316,11 +298,7 @@
   flex: auto;
   height: var(--ic-space-xxxs);
   border-radius: var(--ic-space-xxs);
-  background-color: var(--ic-status-info);
-}
-
-:host(.ic-step-light) .step-connect-inner {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-stepper-connector-current-status);
 }
 
 .step-icon-inner .check-icon {
@@ -333,7 +311,7 @@
 }
 
 .step-icon-inner .check-icon > svg > path {
-  fill: var(--ic-color-white-text);
+  fill: var(--ic-step-number-icon-success);
 }
 
 /** High Contrast **/
@@ -345,7 +323,7 @@
 
   /* DEFAULT STEP */
   .step-connect:not(.disabled .step-connect) {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   .active .step-icon-inner,
@@ -363,7 +341,9 @@
   }
 
   .disabled,
-  .disabled .heading-area {
+  .disabled .heading-area,
+  .disabled .step-icon-inner,
+  .disabled .heading {
     color: GrayText;
   }
 
@@ -376,16 +356,3 @@
     fill: canvastext;
   }
 }
-
-/* Add back in after storybook has the `color-scheme: light dark` code */
-
-/* @media (prefers-color-scheme: dark) and (not (forced-colors: active)) {
-  :host(:not(.ic-step-light)) .step-icon-inner {
-    color: var(--ic-architectural-black);
-  }
-
-  .step-num,
-  .subheading {
-    color: var(--ic-architectural-white) !important;
-  }
-} */

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

@@ -14,6 +14,7 @@ export class Step {
         this.status = undefined;
         this.subheading = undefined;
         this.heading = undefined;
+        this.theme = "inherit";
         this.variant = undefined;
         this.type = "active";
     }
@@ -26,7 +27,6 @@ export class Step {
         }
     }
     render() {
-        var _a;
         // ARIA LABEL
         let ariaLabel = "";
         if (this.type === "completed") {
@@ -114,8 +114,7 @@ export class Step {
                 ["aligned-full-width"]: this.el.parentElement.classList.contains("ic-stepper-default") &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left"),
                 [`ic-step-${this.variant}`]: true,
-                ["ic-step-light"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.appearance) ===
-                    "light",
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.variant === "compact" ? compactStep : defaultStep));
     }
     static get is() { return "ic-step"; }
@@ -336,6 +335,33 @@ export class Step {
                 "attribute": "heading",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
+                        }],
+                    "text": ""
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "variant": {
                 "type": "string",
                 "mutable": false,