@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -2,6 +2,8 @@
 :host {
   display: flex;
   flex: auto;
+
+  --ic-typography-color: currentcolor;
 }
 
 .step {
@@ -14,13 +16,17 @@
   justify-content: center;
 }
 
-.step-title,
-.step-subtitle,
+.heading,
+.subheading,
 .step-status,
 .next-step {
   white-space: pre-line;
 }
 
+.next-step {
+  color: var(--ic-stepper-compact-step-next-text);
+}
+
 .visually-hidden {
   position: absolute;
   left: -625rem;
@@ -31,25 +37,21 @@
 }
 
 /* COMPACT STEP STYLING */
-:host(.compact) {
+:host(.ic-step-compact) {
   -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(.compact.light) {
-  --compact-step-inner-color: var(--ic-status-info-contrast);
-  --compact-step-outer-color: var(--ic-architectural-600);
-}
-
-:host(.compact) .step {
+:host(.ic-step-compact) .step {
   -moz-column-gap: var(--ic-space-sm);
        column-gap: var(--ic-space-sm);
 }
 
-:host(.compact) .step:not(.current) {
+:host(.ic-step-compact) .step:not(.current) {
   display: none;
   opacity: 0;
   visibility: hidden;
@@ -63,18 +65,22 @@
   border-radius: 50%;
 }
 
-:host(:not(.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(.compact) .step-title-area {
+:host(.ic-step-compact) .heading-area {
   display: flex;
   flex-direction: column;
   width: 14.25rem;
 }
 
-:host(.compact.light) .disabled .step-title-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 {
@@ -85,51 +91,39 @@
 
 .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(.light) .compact-step-completed .step-status {
-  color: var(--ic-status-success-contrast);
+  color: var(--ic-stepper-compact-step-completed-text);
 }
 
-.compact-step-disabled :is(.step-title, .step-status) {
-  color: var(--ic-color-tertiary-text);
-}
-
-:host(.light) .compact-step-disabled :is(.step-status) {
-  color: var(--ic-architectural-white);
+.compact-step-disabled :is(.heading, .step-status) {
+  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(.light) .step-num {
-  color: var(--ic-architectural-white);
-}
-
-:host(.compact) .step-icon {
+:host(.ic-step-compact) .step-icon {
   margin: var(--ic-space-xxxs);
 }
 
-:host(.compact) .step-icon svg {
+:host(.ic-step-compact) .step-icon svg {
   width: var(--ic-space-md);
   height: var(--ic-space-md);
 }
 
 /* DEFAULT STEP STYLING */
-:host(.default) .step {
+:host(.ic-step-default) .step {
   flex-direction: column;
 }
 
-:host(.default.last-step) {
+:host(.ic-step-default.last-step) {
   flex-grow: initial;
 }
 
@@ -141,12 +135,12 @@
   height: 2.5rem;
 }
 
-:host(.default) .step-icon {
+:host(.ic-step-default) .step-icon {
   border-radius: 50%;
 }
 
-:host(.default:not(.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 {
@@ -156,134 +150,132 @@
   justify-content: center;
   align-items: center;
   border-radius: 50%;
+  color: var(--ic-step-number-text-inactive);
 }
 
-:host(.default) .current {
-  color: var(--ic-status-info);
+:host(.ic-step-default) .current {
+  color: var(--ic-status-info-default);
 }
 
-:host(.default.light) .current,
-:host(.default.light) .current .step-title-area {
+:host(.ic-step-default.ic-step-light) .current,
+:host(.ic-step-default.ic-step-light) .current .heading-area {
   color: var(--ic-status-info-contrast);
 }
 
-:host(.default) .step-title-area {
+:host(.ic-step-default) .heading-area {
   margin: var(--ic-space-xs) 0;
   padding-right: var(--ic-space-xs);
   width: 100%;
 }
 
-:host(.light) .step-title-area {
+:host(.ic-step-light) .heading-area {
   color: var(--ic-architectural-200);
 }
 
-:host(.compact.light) .step-title-area {
+:host(.ic-step-compact.ic-step-light) .heading-area {
   color: var(--ic-architectural-white);
 }
 
-:host(.default) .step-title,
-.step-subtitle {
+:host(.ic-step-default) .heading,
+.subheading {
   width: -moz-fit-content;
   width: fit-content;
 }
 
-.step-subtitle {
-  color: var(--ic-color-tertiary-text);
+.heading {
+  color: var(--ic-step-title);
 }
 
-:host(.light) .step-subtitle {
-  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-step-title-status-text-current);
 }
 
-.current .step-subtitle {
-  color: var(--ic-color-primary-text);
+.disabled .subheading {
+  color: var(--ic-step-title-status-text-disabled);
 }
 
-:host(.default) .completed {
-  color: var(--ic-status-success);
+:host(.ic-step-default) .completed {
+  color: var(--ic-status-success-default);
 }
 
-:host(.default.light) .completed,
-:host(.default.light) .completed .step-title-area {
+:host(.ic-step-default.ic-step-light) .completed,
+:host(.ic-step-default.ic-step-light) .completed .heading-area {
   color: var(--ic-status-success-contrast);
 }
 
 .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(.light) .active .step-icon-inner {
+:host(.ic-step-light) .active .step-icon-inner {
   color: var(--ic-architectural-white);
 }
 
 .current .step-icon-inner {
-  background-color: var(--ic-status-info);
-  color: white;
-}
-
-:host(.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 {
   color: var(--ic-architectural-200);
 }
 
-:host(.default.light) .disabled,
-:host(.default.light) .disabled .step-title-area {
+:host(.ic-step-default.ic-step-light) .disabled,
+:host(.ic-step-default.ic-step-light) .disabled .heading-area {
   color: var(--ic-architectural-400);
 }
 
 .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(.light) .disabled .step-icon-inner {
-  border: var(--ic-border-width) dashed var(--ic-architectural-400);
-}
-
-.disabled .step-title-area,
-:host(.default.light) .disabled .step-subtitle {
-  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(.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(.default) .current .step-icon {
-  border: var(--ic-space-xxxs) solid var(--ic-status-info);
+:host(.ic-step-default) .current .step-icon {
+  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(.default.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(.light) .step-connect {
-  background-color: var(--ic-architectural-600);
-}
-
 .aligned-full-width.step-connect {
   min-width: 6.25rem;
   width: 100%;
@@ -292,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(.light) .disabled .step-connect {
-  border-top: 0.125rem dashed var(--ic-architectural-600);
-}
-
 .completed .step-connect {
-  background-color: var(--ic-status-success);
-}
-
-:host(.light) .completed .step-connect {
-  background-color: var(--ic-status-success-contrast);
+  background-color: var(--ic-stepper-connector-success);
 }
 
 .step-connect-inner {
@@ -314,11 +298,7 @@
   flex: auto;
   height: var(--ic-space-xxxs);
   border-radius: var(--ic-space-xxs);
-  background-color: var(--ic-status-info);
-}
-
-:host(.light) .step-connect-inner {
-  background-color: var(--ic-status-info-contrast);
+  background-color: var(--ic-stepper-connector-current-status);
 }
 
 .step-icon-inner .check-icon {
@@ -331,19 +311,19 @@
 }
 
 .step-icon-inner .check-icon > svg > path {
-  fill: var(--ic-color-white-text);
+  fill: var(--ic-step-number-icon-success);
 }
 
 /** High Contrast **/
 @media (forced-colors: active) {
   /* COMPACT STEP */
-  .compact-step-disabled :is(.step-title, .step-status) {
+  .compact-step-disabled :is(.heading, .step-status) {
     color: GrayText;
   }
 
   /* DEFAULT STEP */
   .step-connect:not(.disabled .step-connect) {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   .active .step-icon-inner,
@@ -355,13 +335,15 @@
     color: canvastext;
   }
 
-  :host(.default) .current .step-icon {
+  :host(.ic-step-default) .current .step-icon {
     padding: 0;
     border: none;
   }
 
   .disabled,
-  .disabled .step-title-area {
+  .disabled .heading-area,
+  .disabled .step-icon-inner,
+  .disabled .heading {
     color: GrayText;
   }
 
@@ -374,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(.light)) .step-icon-inner {
-    color: var(--ic-architectural-black);
-  }
-
-  .step-num,
-  .step-subtitle {
-    color: var(--ic-architectural-white) !important;
-  }
-} */