@1024pix/pix-ui 14.3.0 → 14.5.0

package/addon/styles/_pix-input.scss

@@ -8,7 +8,7 @@
   &__label {
     font-family: $font-roboto;
     font-size: 0.875rem;
-    color: $grey-70;
+    color: $pix-neutral-70;
     margin-bottom: 4px;
   }
 
@@ -16,7 +16,7 @@
     font-family: $font-roboto;
     font-size: 0.75rem;
     margin-top: 4px;
-    color: $blue-zodiac;
+    color: $pix-neutral-60;
 
     display: block;
   }
@@ -29,8 +29,8 @@
     position: absolute;
     bottom: 10px;
     right: 6px;
-    color: $white;
-    background: $red;
+    color: $pix-neutral-0;
+    background: $pix-error-70;
     border-radius: 50%;
     font-size: 0.6rem;
     padding: 2px;
@@ -44,21 +44,21 @@
     bottom: calc(-4px - 1px - 0.75rem);
 
     &.pix-input__error-message {
-      margin-top:4px;
+      margin-top: 4px;
     }
   }
 
   input {
     width: 100%;
     height: 36px;
-    border: 1px solid $grey-40;
+    border: 1px solid $pix-neutral-40;
 
     @include input();
     @include hoverFormElement();
     @include focusFormElement();
 
     &::placeholder {
-      color: $grey-30;
+      color: $pix-neutral-30;
     }
 
     &.pix-input__input--error {

package/addon/styles/_pix-message.scss

@@ -9,24 +9,24 @@
   display: flex;
 
   &.pix-message--info {
-    color: $blue-alert-dark;
-    background-color: $blue-alert-light;
+    color: $pix-primary-70;
+    background-color: $pix-primary-10;
   }
   &.pix-message--alert {
-    color: $pink-alert-dark;
-    background-color: $pink-alert-light;
+    color: $pix-error-70;
+    background-color: $pix-error-10;
   }
   &.pix-message--error {
-    color: $pink-alert-dark;
-    background-color: $pink-alert-light;
+    color: $pix-error-70;
+    background-color: $pix-error-10;
   }
   &.pix-message--success {
-    color: $green-alert-dark;
-    background-color: $green-alert-light;
+    color: $pix-success-70;
+    background-color: $pix-success-10;
   }
   &.pix-message--warning {
-    color: $yellow-alert-dark;
-    background-color: $yellow-alert-light;
+    color: $pix-warning-60;
+    background-color: $pix-warning-10;
   }
 
   svg {

package/addon/styles/_pix-modal.scss

@@ -1,5 +1,5 @@
 .pix-modal__overlay {
-  background-color: rgba(52, 69, 99, .7);
+  background-color: rgba(52, 69, 99, 0.7);
   bottom: 0;
   left: 0;
   overflow-y: scroll;
@@ -16,15 +16,15 @@ $space-between-title-and-close-button: 8px;
 $button-margin: 16px;
 
 .pix-modal {
-  @import "reset-css";
-  box-shadow: 1px 1px 5px rgba(0,0,0,.1);
+  @import 'reset-css';
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   margin: 20vh auto;
   max-width: 512px;
   width: calc(100% - 24px);
 
   &__header {
-    background: $white;
-    border-bottom: 1px solid $grey-20;
+    background: $pix-neutral-0;
+    border-bottom: 1px solid $pix-neutral-20;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
     padding: $modal-padding;
@@ -46,7 +46,7 @@ $button-margin: 16px;
   &__title {
     margin-bottom: 0;
     font-family: $font-open-sans;
-    color: $grey-90;
+    color: $pix-neutral-90;
     font-size: 1.25rem;
     line-height: 1.875rem;
     font-weight: $font-normal;
@@ -58,10 +58,10 @@ $button-margin: 16px;
   }
 
   &__content {
-    background-color: $grey-10;
+    background-color: $pix-neutral-10;
     padding: $modal-padding;
     font-size: 0.875rem;
-    color: $grey-90;
+    color: $pix-neutral-90;
     line-height: 1.375rem;
     font-family: $font-roboto;
     font-weight: $font-normal;
@@ -72,7 +72,7 @@ $button-margin: 16px;
   }
 
   &__footer {
-    background-color: $grey-10;
+    background-color: $pix-neutral-10;
     padding: 0 $modal-padding $modal-padding - $button-margin;
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;

package/addon/styles/_pix-multi-select.scss

@@ -16,16 +16,16 @@
   font-family: $font-roboto;
   font-weight: $font-normal;
   position: relative;
-  border: 1px $grey-40 solid;
+  border: 1px $pix-neutral-40 solid;
   height: 36px;
   padding: 0px 32px 0px 16px;
   width: 100%;
-  background-color: $white;
+  background-color: $pix-neutral-0;
   border-radius: 4px;
   outline: none;
   font-size: 0.875rem;
   cursor: pointer;
-  color: $grey-90;
+  color: $pix-neutral-90;
 
   @include hoverFormElement();
   @include focusWithinFormElement();
@@ -35,7 +35,7 @@
   }
 
   &__search-icon {
-    color: $grey-30;
+    color: $pix-neutral-30;
   }
 
   &__title {
@@ -53,13 +53,13 @@
     padding: 0 10px;
     border-radius: 3px;
     font-size: 0.875rem;
-    color: $grey-90;
+    color: $pix-neutral-90;
     background: transparent;
   }
 
   &__dropdown-icon {
     font-size: 11px;
-    color: $grey-30;
+    color: $pix-neutral-30;
     right: 10px;
     top: calc(50% - 6px);
     padding: 0 0 2px;
@@ -67,17 +67,16 @@
     pointer-events: none;
 
     &--expand {
-      color: $blue;
+      color: $pix-primary;
     }
   }
 }
 
-
 .pix-multi-select-list {
   width: 100%;
   margin: 0px;
   z-index: 200;
-  background-color: $white;
+  background-color: $pix-neutral-0;
   position: absolute;
   border-top: none;
   border-radius: 0 0 4px 4px;
@@ -89,47 +88,47 @@
 
   &--hidden {
     display: none;
-  }  
+  }
 
   &::-webkit-scrollbar {
     width: 11px;
   }
   &::-webkit-scrollbar-track {
     border-radius: 4px;
-    border: 1px solid $grey-20;
-    background: $white;
+    border: 1px solid $pix-neutral-20;
+    background: $pix-neutral-0;
   }
   &::-webkit-scrollbar-thumb {
     border-radius: 4px;
-    background: $grey-30;
+    background: $pix-neutral-30;
   }
   &::-webkit-scrollbar-thumb:hover {
-    background: $grey-35;
+    background: $pix-neutral-35;
   }
 
   li.pix-multi-select-list__item {
     font-family: $font-roboto;
     position: relative;
-    border-bottom: 1px solid $grey-15;
+    border-bottom: 1px solid $pix-neutral-15;
     list-style: none;
     font-size: 0.9rem;
 
-    @include hoverFormElement();  
+    @include hoverFormElement();
 
     &--no-result {
       text-align: center;
       padding: 12px 0;
     }
-  
+
     &:last-of-type {
       border-bottom: none;
     }
   }
-  
+
   &__checkbox {
     position: absolute;
     opacity: 0;
-  
+
     & + label {
       position: relative;
       display: flex;
@@ -137,7 +136,7 @@
       padding: 11px 16px;
       cursor: pointer;
     }
-  
+
     & + label:before {
       content: '';
       margin-right: 12px;
@@ -146,15 +145,15 @@
       min-width: 16px;
       min-height: 16px;
       border-radius: 4px;
-      background: $white;
-      border: 1px solid $grey-20;
+      background: $pix-neutral-0;
+      border: 1px solid $pix-neutral-20;
     }
-        
+
     &:checked + label:before {
-      background: $blue;
-      border-color: $blue;
+      background: $pix-primary;
+      border-color: $pix-primary;
     }
-      
+
     &:checked + label:after {
       position: absolute;
       top: calc(50% - 5px);
@@ -162,7 +161,7 @@
       width: 7px;
       height: 5px;
       background: transparent;
-      border: 2px solid $white;
+      border: 2px solid $pix-neutral-0;
       border-top: none;
       border-right: none;
       transform: rotate(-45deg);
@@ -173,7 +172,7 @@
       & + label {
         padding: 11px 36px;
       }
-      
+
       &:checked + label:after {
         left: 41px;
       }

package/addon/styles/_pix-pagination.scss

@@ -1,7 +1,8 @@
-.pix-pagination, .pix-pagination-condensed {
+.pix-pagination,
+.pix-pagination-condensed {
   display: flex;
   justify-content: center;
-  color: $grey-60;
+  color: $pix-neutral-60;
   font-size: 0.875rem;
 
   &__size {

package/addon/styles/_pix-progress-gauge.scss

@@ -7,13 +7,14 @@
   &__sub-title {
     font-size: 0.813rem;
     font-weight: $font-light;
-    color: $yellow;
+    color: $pix-warning-40;
     margin: 6px 0;
     letter-spacing: 0.4px;
     text-transform: uppercase;
   }
 
-  &__marker, &__referrer {
+  &__marker,
+  &__referrer {
     height: 4px;
     border-radius: 5px;
     text-align: right;
@@ -54,31 +55,31 @@
 
   &--white {
     & .progress-gauge__referrer {
-      background-color: lighten($blue, 15%);
+      background-color: lighten($pix-primary, 15%);
     }
 
     & .progress-gauge__marker {
-      background: $white;
+      background: $pix-neutral-0;
     }
 
     & .progress-gauge__tooltip {
-      background: $white;
-      color: $blue;
+      background: $pix-neutral-0;
+      color: $pix-primary;
 
       &::before {
-        color: $white;
-        border-top-color: $white;
+        color: $pix-neutral-0;
+        border-top-color: $pix-neutral-0;
       }
     }
 
     & .progress-gauge__sub-title {
-      color: $white;
+      color: $pix-neutral-0;
     }
   }
 
   &--yellow {
     & .progress-gauge__referrer {
-      background-color: $grey-20;
+      background-color: $pix-neutral-20;
     }
 
     & .progress-gauge__marker {
@@ -87,16 +88,16 @@
 
     & .progress-gauge__tooltip {
       background: $pix-yellow-gradient;
-      color: $white;
+      color: $pix-neutral-0;
 
       &::before {
-        color: $yellow;
-        border-top-color: $yellow;
+        color: $pix-warning-40;
+        border-top-color: $pix-warning-40;
       }
     }
 
     & .progress-gauge__sub-title {
-      color: $yellow;
+      color: $pix-warning-40;
     }
   }
 

package/addon/styles/_pix-radio-button.scss

@@ -2,7 +2,7 @@
   cursor: pointer;
   font-family: $font-roboto;
   font-size: 0.875rem;
-  color: $grey-70;
+  color: $pix-neutral-70;
 
   label {
     display: flex;
@@ -16,34 +16,34 @@
     width: 18px;
     height: 18px;
     margin: 0 10px 0 0;
-    border: 1px solid $grey-70;
+    border: 1px solid $pix-neutral-70;
     cursor: pointer;
     background-color: transparent;
 
     &:hover {
-      background-color: $grey-15;
-      box-shadow: 0 0 0 8px $grey-15;
+      background-color: $pix-neutral-15;
+      box-shadow: 0 0 0 8px $pix-neutral-15;
       transition: all 0.3s ease;
     }
 
     &:focus-visible {
-      box-shadow: $white 0 0 0 2px, $blue 0 0 0 4px;
+      box-shadow: $pix-neutral-0 0 0 0 2px, $pix-primary 0 0 0 4px;
       outline: none;
     }
 
     &:active {
-      border-color: $blue;
+      border-color: $pix-primary;
       background-color: transparent;
       box-shadow: none;
     }
 
     &:checked {
-      border-color: $blue;
+      border-color: $pix-primary;
 
       &:after {
-        background-color: $blue;
+        background-color: $pix-primary;
         border-radius: 50%;
-        content: "";
+        content: '';
         height: 12px;
         width: 12px;
         position: absolute;
@@ -54,19 +54,19 @@
     }
 
     &:disabled {
-      border: 1px solid $grey-45;
+      border: 1px solid $pix-neutral-45;
       background-color: transparent;
       box-shadow: none;
       cursor: not-allowed;
 
       &:checked:after {
-        background-color: $grey-25;
+        background-color: $pix-neutral-25;
       }
     }
   }
 
   &--disabled {
     cursor: not-allowed;
-    color: $grey-45;
+    color: $pix-neutral-45;
   }
 }

package/addon/styles/_pix-return-to.scss

@@ -8,38 +8,45 @@
   align-items: center;
   border-bottom: transparent solid 2px;
   text-decoration: none;
-  
+
   &__icon {
     position: relative;
     z-index: 3;
     padding: 4px 7px;
     font-size: 1rem;
   }
-  
+
   &__icon::before {
     content: '';
     position: absolute;
     z-index: -1;
-    width: 100%; height: 100%;
-    top: 0; left: 0;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
     opacity: 0;
     border-radius: 50%;
     transition: 0.3s ease opacity;
   }
 
-  &__text { margin-left: 4px; }
+  &__text {
+    margin-left: 4px;
+  }
 
-  &:hover, &:active {
+  &:hover,
+  &:active {
     cursor: pointer;
     background-color: transparent;
     border-bottom-color: transparent;
 
-    ::before { opacity: 0.2; }
+    ::before {
+      opacity: 0.2;
+    }
   }
 
   &:focus-visible {
-    background-color: $yellow;
-    border-bottom: $grey-100 solid 2px;
+    background-color: $pix-warning-40;
+    border-bottom: $pix-neutral-100 solid 2px;
 
     .pix-return-to__text {
       padding-right: 6px;
@@ -49,16 +56,27 @@
   @mixin coloriseLink($textColor, $textHoverColor, $arrowColor) {
     color: $textColor;
 
-    .pix-return-to__icon { color: $arrowColor; }
+    .pix-return-to__icon {
+      color: $arrowColor;
+    }
 
-    &:hover, &:active {
+    &:hover,
+    &:active {
       color: $textHoverColor;
 
-      ::before { background-color: $arrowColor; }
+      ::before {
+        background-color: $arrowColor;
+      }
     }
   }
 
-  &--white { @include coloriseLink($grey-10, $white, $white); }
-  &--black { @include coloriseLink($grey-80, $grey-200, $grey-60); }
-  &--blue { @include coloriseLink($communication-dark, $blue-hover, $communication-dark); }
+  &--white {
+    @include coloriseLink($pix-neutral-10, $pix-neutral-0, $pix-neutral-0);
+  }
+  &--black {
+    @include coloriseLink($pix-neutral-80, $pix-neutral-110, $pix-neutral-60);
+  }
+  &--blue {
+    @include coloriseLink($pix-communication-dark, $pix-primary-60, $pix-communication-dark);
+  }
 }

package/addon/styles/_pix-select.scss

@@ -5,9 +5,9 @@
 
   @mixin pixSelect {
     appearance: none;
-    border: 1px $grey-40 solid;
+    border: 1px $pix-neutral-40 solid;
     border-radius: 4px;
-    color: $grey-90;
+    color: $pix-neutral-90;
     font-family: $font-roboto;
     font-size: 0.875rem;
     height: 36px;
@@ -53,7 +53,7 @@
 
   &__icon {
     font-size: 11px;
-    color: $grey-30;
+    color: $pix-neutral-30;
     right: 10px;
     top: calc(50% - 6px);
     padding: 0 0 2px;

package/addon/styles/_pix-selectable-tag.scss

@@ -1,8 +1,7 @@
 $checkmark-width: 0.625rem;
 $checkmark-width-with-space: $checkmark-width + 0.438rem;
 @mixin checkmarkColor($borderColor) {
-  
-  input[type="checkbox"]:checked + label::before {
+  input[type='checkbox']:checked + label::before {
     position: absolute;
     top: 6px;
     left: 8px;
@@ -13,7 +12,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
     border-top: none;
     border-right: none;
     transform: rotate(-45deg);
-    content: "";
+    content: '';
   }
 }
 
@@ -25,9 +24,9 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   padding: 3px calc(8px + #{$checkmark-width-with-space} / 2);
   letter-spacing: 0.009rem;
   border-radius: 0.75rem;
-  border: $grey-30 solid 1px;
-  color: $grey-60;
-  background-color: $white;
+  border: $pix-neutral-30 solid 1px;
+  color: $pix-neutral-60;
+  background-color: $pix-neutral-0;
   font-family: $font-roboto;
   font-size: 0.8125rem;
   font-weight: $font-normal;
@@ -48,23 +47,23 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   }
 
   &:hover {
-    background-color: $grey-22;
-    border: $grey-25 solid 1px;
-    color: $grey-70;
+    background-color: $pix-neutral-22;
+    border: $pix-neutral-25 solid 1px;
+    color: $pix-neutral-70;
   }
-  
+
   &--checked {
-    @include checkmarkColor($grey-70);
-    border: $grey-22 solid 1px;
-    background-color: $grey-20;
-    color: $grey-70;
+    @include checkmarkColor($pix-neutral-70);
+    border: $pix-neutral-22 solid 1px;
+    background-color: $pix-neutral-20;
+    color: $pix-neutral-70;
     padding: 3px 8px;
 
     &:hover {
-      @include checkmarkColor($grey-70);
-      background-color: $grey-22;
-      border: $grey-25 solid 1px;
-      color: $grey-70;
+      @include checkmarkColor($pix-neutral-70);
+      background-color: $pix-neutral-22;
+      border: $pix-neutral-25 solid 1px;
+      color: $pix-neutral-70;
     }
 
     & label {
@@ -73,18 +72,18 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   }
 
   &:focus-within {
-    @include checkmarkColor($white);
-    background-color: $blue-zodiac;
-    color: $white;
-    box-shadow: 0 0 0 1px $blue-zodiac;
-    border-color: $white;
+    @include checkmarkColor($pix-neutral-0);
+    background-color: $pix-neutral-60;
+    color: $pix-neutral-0;
+    box-shadow: 0 0 0 1px $pix-neutral-60;
+    border-color: $pix-neutral-0;
     outline: none;
 
     &:hover {
-      @include checkmarkColor($grey-70);
-      color: $grey-70;
-      background-color: $grey-22;
-      border: $grey-25 solid 1px;
+      @include checkmarkColor($pix-neutral-70);
+      color: $pix-neutral-70;
+      background-color: $pix-neutral-22;
+      border: $pix-neutral-25 solid 1px;
     }
   }
 }