Merge pull request #1161 from zyfra/feat/stepper-v3-colors

feat: update colors for stepper #1153
zyfra · Dec 12, 2023 · 71ef33e · 71ef33e
2 parents 0120f25 + 469671f
commit 71ef33e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 47 deletions.
diff --git a/libs/components/src/lib/components/stepper/stepper-selector.component.html b/libs/components/src/lib/components/stepper/stepper-selector.component.html
@@ -3,11 +3,9 @@
  <li>
  <button
  class="step step--{{ step.status }} step--{{ index }}"
- [ngClass]="{
- 'step--current': currentStep === step.index,
- 'step--disabled': step.disabled,
- 'step--first': isFirstStep
- }"
+ [class.step--current]="currentStep === step.index"
+ [class.step--disabled]="step.disabled"
+ [class.step--first]="isFirstStep"
  [disabled]="step.disabled"
  [prizmStepperSelectorItem]="step.index"
  (click)="clickOnStep(step.index)"

diff --git a/libs/components/src/lib/components/stepper/stepper-selector.component.less b/libs/components/src/lib/components/stepper/stepper-selector.component.less
@@ -1,7 +1,7 @@
 :host {
  padding: 16px;
  display: flex;
- border-bottom: 1px solid var(--prizm-border-widget);
+ border-bottom: 1px solid var(--prizm-v3-background-stroke);
 }
 
 .steps {
@@ -12,7 +12,10 @@
 
 .step {
  &:focus {
- border-color: var(--prizm-lite-b130-20);
+ .step__index,
+ .step__icon {
+ box-shadow: 0 0 0 2px var(--prizm-v3-background-stroke-focus);
+ }
  }
  display: flex;
  align-items: center;
@@ -43,86 +46,86 @@
 
  &__icon {
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
+ border-radius: 50%;
  }
 
  &__title {
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
- color: var(--prizm-text-contrast);
+ color: var(--prizm-v3-text-icon-primary);
  padding: 0 8px;
  }
 
  &--success {
  .step__index {
- color: var(--prizm-exceptions-white);
- background-color: var(--prizm-index-good);
+ color: var(--prizm-v3-text-icon-exception);
+ background-color: var(--prizm-v3-status-success-primary-default);
  }
 
  .step__icon {
- color: var(--prizm-index-good);
+ color: var(--prizm-v3-status-success-primary-default);
  }
 
  &:hover,
  &:focus {
  .step__index {
- background-color: var(--prizm-palette-gr2);
- border-color: var(--prizm-palette-gr2);
+ background-color: var(--prizm-v3-status-success-primary-hover);
+ border-color: var(--prizm-v3-status-success-primary-hover);
  }
  }
  }
 
  &--warning {
  .step__index {
- color: var(--prizm-exceptions-white);
- background-color: var(--prizm-index-warning);
+ color: var(--prizm-v3-text-icon-exception);
+ background-color: var(--prizm-v3-status-warning-primary-default);
  }
 
  .step__icon {
- color: var(--prizm-index-warning);
+ color: var(--prizm-v3-status-warning-primary-default);
  }
 
  &:hover,
  &:focus {
  .step__index {
- background-color: var(--prizm-palette-y2, #e67b0f);
- border-color: var(--prizm-palette-y2, #e67b0f);
+ background-color: var(--prizm-v3-status-warning-primary-hover);
+ border-color: var(--prizm-v3-status-warning-primary-hover);
  }
  }
  }
 
  &--danger {
  .step__index {
- color: var(--prizm-exceptions-white);
- background-color: var(--prizm-index-danger);
+ color: var(--prizm-v3-text-icon-exception);
+ background-color: var(--prizm-v3-status-alarm-primary-default);
  }
 
  .step__icon {
- color: var(--prizm-index-danger);
+ color: var(--prizm-v3-status-alarm-primary-default);
  }
 
  &:hover,
  &:focus {
  .step__index {
- background-color: var(--prizm-palette-r2);
- border-color: var(--prizm-palette-r2);
+ background-color: var(--prizm-v3-status-alarm-primary-hover);
+ border-color: var(--prizm-v3-status-alarm-primary-hover);
  }
  }
  }
 
  &--default {
  .step__index {
- color: var(--prizm-text-subscript);
- background-color: #fff;
- border-color: var(--prizm-grey-g8-g6);
+ color: var(--prizm-v3-status-none-primary-default);
+ border-color: var(--prizm-v3-status-none-primary-default);
  }
 
  &:hover,
  &:focus {
  .step__index {
- color: var(--prizm-exceptions-white);
- border-color: var(--prizm-grey-g7-g7);
- background-color: var(--prizm-grey-g7-g7);
+ color: var(--prizm-v3-text-icon-exception);
+ border-color: var(--prizm-v3-status-none-primary-hover);
+ background-color: var(--prizm-v3-status-none-primary-hover);
  }
  }
  }
@@ -131,17 +134,17 @@
  cursor: default;
 
  .step__index {
- color: var(--prizm-exceptions-white);
- background-color: var(--prizm-index-plan);
- border-color: var(--prizm-index-plan);
+ color: var(--prizm-v3-text-icon-exception);
+ background-color: var(--prizm-v3-status-info-primary-default);
+ border-color: var(--prizm-v3-status-info-primary-default);
  }
 
  &:hover,
  &:focus {
  .step__index {
- color: var(--prizm-exceptions-white);
- background-color: var(--prizm-index-plan);
- border-color: var(--prizm-index-plan);
+ color: var(--prizm-v3-text-icon-exception);
+ background-color: var(--prizm-v3-status-info-primary-default);
+ border-color: var(--prizm-v3-status-info-primary-default);
  }
  }
  }
@@ -150,17 +153,17 @@
  cursor: not-allowed;
 
  .step__index {
- color: var(--prizm-grey-g10-g4);
- background-color: var(--prizm-grey-g12-g2);
- border-color: var(--prizm-grey-g12-g2);
+ color: var(--prizm-v3-text-icon-disable);
+ background-color: var(--prizm-v3-button-disable);
+ border-color: var(--prizm-v3-button-disable);
  }
 
  &:hover,
  &:focus {
  .step__index {
- color: var(--prizm-grey-g10-g4);
- background-color: var(--prizm-grey-g12-g2);
- border-color: var(--prizm-grey-g12-g2);
+ color: var(--prizm-v3-text-icon-disable);
+ background-color: var(--prizm-v3-button-disable);
+ border-color: var(--prizm-v3-button-disable);
  }
  }
  }
@@ -170,7 +173,7 @@
  flex-grow: 1;
  display: block;
  height: 2px;
- background-color: var(--prizm-border-widget);
+ background-color: var(--prizm-v3-background-stroke);
  min-width: 15px;
  margin: 0 8px;
 
@@ -181,7 +184,7 @@
 
 :host-context(.vertical) {
  border-bottom: none;
- border-right: 1px solid var(--prizm-border-widget);
+ border-right: 1px solid var(--prizm-v3-background-stroke);
  align-items: flex-start;
  width: auto;
 

diff --git a/libs/components/src/lib/components/stepper/stepper.component.less b/libs/components/src/lib/components/stepper/stepper.component.less
@@ -1,16 +1,19 @@
 :host {
  border-radius: 2px;
- border: 1px solid var(--prizm-border-widget);
+ border: 1px solid var(--prizm-v3-background-stroke);
  display: flex;
  flex-direction: column;
+ background-color: var(--prizm-v3-background-fill-primary);
 }
 
 .header {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding: 14px 16px;
- border-bottom: 1px solid var(--prizm-border-widget);
+ border-bottom: 1px solid var(--prizm-v3-background-stroke);
+ color: var(--prizm-v3-text-icon-primary);
+ background-color: var(--prizm-v3-background-fill-panel);
 }
 
 .wrapper {
@@ -23,7 +26,7 @@
 }
 
 .footer {
- border-top: 1px solid var(--prizm-border-widget);
+ border-top: 1px solid var(--prizm-v3-background-stroke);
  padding: 16px;
 }
 

diff --git a/libs/components/src/lib/components/stepper/stepper.component.ts b/libs/components/src/lib/components/stepper/stepper.component.ts
@@ -14,7 +14,6 @@ import { map, startWith, switchMap } from 'rxjs/operators';
 import { PrizmStepperStepDirective } from './stepper-step.directive';
 import { PrizmAbstractTestId } from '@prizm-ui/core';
 import { CommonModule } from '@angular/common';
-import { PrizmIconComponent } from '../icon';
 import { PrizmStepperSelectorComponent } from './stepper-selector.component';
 
 @Component({