@ukic/web-components 3.0.0 → 3.2.0

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

@@ -2,6 +2,8 @@
 :host {
   display: flex;
   flex: auto;
+
+  --ic-typography-color: currentcolor;
 }
 
 .step {
@@ -21,29 +23,33 @@
   white-space: pre-line;
 }
 
+.next-step {
+  color: var(--ic-stepper-compact-step-next-text);
+}
+
 .visually-hidden {
   position: absolute;
-  left: -625rem;
+  left: -9999px;
   top: auto;
   width: 1px;
   height: 1px;
   overflow: hidden;
 }
 
+.visually-hidden:dir(rtl) {
+  right: -9999px;
+}
+
 /* COMPACT STEP STYLING */
 :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(.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);
@@ -63,8 +69,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 {
@@ -73,8 +79,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-disabled);
 }
 
 .info-line {
@@ -85,36 +95,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);
 }
@@ -143,10 +141,7 @@
 
 :host(.ic-step-default) .step-icon {
   border-radius: 50%;
-}
-
-:host(.ic-step-default:not(.ic-step-light)) .step-icon {
-  background-color: var(--ic-architectural-white);
+  background-color: var(--ic-step-number-inactive);
 }
 
 .step-icon-inner {
@@ -156,15 +151,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);
-}
-
-:host(.ic-step-default.ic-step-light) .current,
-:host(.ic-step-default.ic-step-light) .current .heading-area {
-  color: var(--ic-status-info-contrast);
+  color: var(--ic-status-info-default);
 }
 
 :host(.ic-step-default) .heading-area {
@@ -173,117 +164,92 @@
   width: 100%;
 }
 
-:host(.ic-step-light) .heading-area {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-step-compact.ic-step-light) .heading-area {
-  color: var(--ic-architectural-white);
-}
-
 :host(.ic-step-default) .heading,
 .subheading {
   width: -moz-fit-content;
   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);
 }
 
-.current .subheading {
-  color: var(--ic-color-primary-text);
+.completed .heading {
+  color: var(--ic-step-title-success);
 }
 
-:host(.ic-step-default) .completed {
-  color: var(--ic-status-success);
+.disabled .heading {
+  color: var(--ic-step-title-disabled);
 }
 
-:host(.ic-step-default.ic-step-light) .completed,
-:host(.ic-step-default.ic-step-light) .completed .heading-area {
-  color: var(--ic-status-success-contrast);
+.subheading {
+  color: var(--ic-step-title-status-text-inactive);
 }
 
-.active .step-icon-inner {
-  box-shadow: inset var(--ic-architectural-200) 0 0 0 0.125rem;
+.current .subheading {
+  color: var(--ic-step-title-status-text-current);
 }
 
-:host(.ic-step-light) .active .step-icon-inner {
-  color: var(--ic-architectural-white);
+.disabled .subheading {
+  color: var(--ic-step-title-status-text-disabled);
 }
 
-.current .step-icon-inner {
-  background-color: var(--ic-status-info);
-  color: white;
+:host(.ic-step-default) .completed {
+  color: var(--ic-status-success-default);
 }
 
-:host(.ic-step-light) .current .step-icon-inner {
-  background-color: var(--ic-status-info-contrast);
+.active .step-icon-inner {
+  box-shadow: inset var(--ic-step-number-inactive-outline) 0 0 0 0.125rem;
 }
 
-.disabled {
-  color: var(--ic-architectural-200);
+.current .step-icon-inner {
+  background-color: var(--ic-step-number-background-active);
+  color: var(--ic-step-number-text-current);
 }
 
-:host(.ic-step-default.ic-step-light) .disabled,
-:host(.ic-step-default.ic-step-light) .disabled .heading-area {
-  color: var(--ic-architectural-400);
+.disabled {
+  color: var(--ic-color-text-disabled-mid);
 }
 
 .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%;
@@ -292,20 +258,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 {
@@ -314,11 +272,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 {
@@ -331,7 +285,7 @@
 }
 
 .step-icon-inner .check-icon > svg > path {
-  fill: var(--ic-color-white-text);
+  fill: var(--ic-step-number-icon-success);
 }
 
 /** High Contrast **/
@@ -343,7 +297,7 @@
 
   /* DEFAULT STEP */
   .step-connect:not(.disabled .step-connect) {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 
   .active .step-icon-inner,
@@ -361,7 +315,9 @@
   }
 
   .disabled,
-  .disabled .heading-area {
+  .disabled .heading-area,
+  .disabled .step-icon-inner,
+  .disabled .heading {
     color: GrayText;
   }
 
@@ -374,16 +330,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;
-  }
-} */