@1024pix/pix-ui 41.1.2 → 41.2.0

package/addon/styles/_pix-checkbox.scss

@@ -3,136 +3,139 @@
   z-index: 0;
   display: flex;
   align-items: center;
-  color: $pix-neutral-70;
 
   & + .pix-checkbox {
-    margin-top: $pix-spacing-s;
+    margin-top: var(--pix-spacing-4x);
   }
-}
-
-/* Label */
-.pix-checkbox__label {
-  padding-left: 12px;
-  color: $pix-neutral-90;
-  font-size: 1rem;
-  line-height: 1.5;
-  cursor: pointer;
 
-  &--small {
-    font-size: 0.875rem;
-  }
+  /* Label */
+  &__label {
+    @extend %pix-body-m;
 
-  &--large {
-    font-size: 1.125rem;
-  }
-}
+    padding-left: var(--pix-spacing-3x);
+    color: var(--pix-neutral-900);
+    cursor: pointer;
 
-/* Input */
-.pix-checkbox__input {
-  position: relative;
-  flex-shrink: 0;
-  width: 1rem;
-  height: 1rem;
-  background-color: $pix-neutral-0;
-  border: 1.5px solid $pix-neutral-70;
-  border-radius: 2px;
-  cursor: pointer;
-  appearance: none;
-
-  // Hover effect
-  &::before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: -1;
-    width: 1rem;
-    height: 1rem;
-    background-color: $pix-neutral-15;
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    visibility: hidden;
-    opacity: 0;
-    transition: all 0.3s ease;
-    content: '';
-  }
-
-  &:hover,
-  &:focus-visible,
-  &:active {
-    border-color: $pix-neutral-90;
-
-    &::before {
-      transform: translate(-50%, -50%) scale(1.75);
-      visibility: visible;
-      opacity: 1;
+    &--small {
+      font-size: 0.875rem;
     }
-  }
 
-  &:active {
-    &::before {
-      background-color: $pix-neutral-22;
+    &--large {
+      font-size: 1.125rem;
     }
   }
 
-  // Checked state
-  &:checked {
-    background: $pix-primary;
-    border-color: $pix-primary;
-
-    &:hover,
-    &:focus-visible,
-    &:active {
-      background: $pix-primary-60;
-      border-color: $pix-primary-60;
-    }
-
-    &::after {
+  /* Input */
+  &__input {
+    position: relative;
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    background-color: var(--pix-neutral-0);
+    border: 1.5px solid var(--pix-neutral-800);
+    border-radius: 2px;
+    outline: 0;
+    cursor: pointer;
+    appearance: none;
+
+    // Hover effect
+    &::before {
       position: absolute;
-      background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: contain;
+      top: 50%;
+      left: 50%;
+      z-index: -1;
+      width: 1rem;
+      height: 1rem;
+      background-color: var(--pix-neutral-20);
+      border-color: var(--pix-neutral-900);
+      border-radius: 50%;
+      transform: translate(-50%, -50%) scale(1);
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.3s ease;
       content: '';
-      inset: 10%;
     }
-  }
-
-  // Indeterminate state
-  &--indeterminate:checked {
-    background: $pix-neutral-70;
-    border-color: $pix-neutral-70;
 
     &:hover,
-    &:focus-visible,
+    &:focus-visible {
+      &::before {
+        background-color: var(--pix-neutral-20);
+        transform: translate(-50%, -50%) scale(1.75);
+        visibility: visible;
+        opacity: 1;
+      }
+    }
+
     &:active {
-      background: $pix-neutral-90;
-      border-color: $pix-neutral-90;
+      &::before {
+        background-color: var(--pix-neutral-100);
+        transform: translate(-50%, -50%) scale(1.75);
+        visibility: visible;
+        opacity: 1;
+      }
     }
 
-    &::after {
-      background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
-      inset: 15%;
+    // Checked state
+    &:checked {
+      background: var(--pix-primary-500);
+      border-color: var(--pix-primary-500);
+
+      &:hover,
+      &:focus-visible,
+      &:active {
+        background: var(--pix-primary-700);
+        border-color: var(--pix-primary-700);
+      }
+
+      &::after {
+        position: absolute;
+        background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        content: '';
+        inset: 10%;
+      }
     }
-  }
 
-  // Disabled state
-  &:disabled,
-  &--indeterminate:disabled {
-    background: $pix-neutral-10;
-    border-color: $pix-neutral-30;
-    cursor: not-allowed;
+    // Indeterminate state
+    &--indeterminate:checked {
+      background: var(--pix-neutral-800);
+      border-color: var(--pix-neutral-800);
+
+      &:hover,
+      &:focus-visible,
+      &:active {
+        background: var(--pix-neutral-900);
+        border-color: var(--pix-neutral-900);
+      }
+
+      &::after {
+        background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
+        inset: 15%;
+      }
+    }
 
-    & + .pix-checkbox__label {
+    // Disabled state
+    &:disabled,
+    &--indeterminate:disabled {
+      background: var(--pix-neutral-100);
+      border-color: var(--pix-neutral-100);
       cursor: not-allowed;
-    }
 
-    &:checked {
-      background: $pix-neutral-30;
-      border-color: $pix-neutral-30;
-    }
+      & + .pix-checkbox__label {
+        color: var(--pix-neutral-500);
+        cursor: not-allowed;
+      }
 
-    &::before {
-      display: none;
+      &:checked {
+        background: var(--pix-neutral-100);
+        border-color: var(--pix-neutral-100);
+      }
+
+      &::before {
+        display: none;
+      }
     }
   }
 }

package/addon/styles/_pix-collapsible.scss

@@ -1,6 +1,6 @@
 .pix-collapsible {
-  background-color: $pix-neutral-0;
-  border: 1px solid $pix-neutral-20;
+  background-color: var(--pix-neutral-0);
+  border: 1px solid var(--pix-neutral-100);
 
   &:first-child,
   &:first-child .pix-collapsible__title {
@@ -17,6 +17,15 @@
   &:not(:first-child) {
     border-top: none;
   }
+
+  &:hover {
+    border-color: var(--pix-neutral-500);
+  }
+
+  &:focus-within  {
+    border: 1px solid var(--pix-primary-500);
+    outline: 2px solid var(--pix-primary-300)
+  }
 }
 
 .pix-collapsible__title {
@@ -24,20 +33,20 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: $pix-spacing-s;
-  color: $pix-neutral-90;
+  padding: var(--pix-spacing-4x);
+  color: var(--pix-neutral-800);
   font-size: 1rem;
   line-height: 1.25;
   border: none;
 
   &:hover,
-  &:focus,
   &[aria-expanded='true'] {
-    background-color: $pix-neutral-10;
+    color: var(--pix-neutral-900);
+    background-color: var(--pix-neutral-20);
   }
 
   &[aria-expanded='true'] {
-    border-bottom: 1px solid $pix-neutral-20;
+    border-bottom: 1px solid var(--pix-neutral-20);
   }
 }
 
@@ -49,26 +58,26 @@
   }
 
   &__icon {
-    margin-right: $pix-spacing-xs;
-    color: $pix-neutral-50;
+    margin-right: var(--pix-spacing-2x);
+    color: var(--pix-neutral-500);
   }
 
   &__toggle-icon {
     width: 1rem;
     height: 1rem;
-    margin-left: $pix-spacing-xs;
+    margin-left: var(--pix-spacing-2x);
     padding: 0.5rem;
     border-radius: 50%;
   }
 }
 
 .pix-collapsible__title:hover .pix-collapsible-title__toggle-icon {
-  background-color: $pix-neutral-20;
+  background-color: var(--pix-neutral-100);
 }
 
 .pix-collapsible__content {
-  padding: $pix-spacing-s;
-  color: $pix-neutral-60;
+  padding: var(--pix-spacing-4x);
+  color: var(--pix-neutral-500);
   font-size: 0.875rem;
   line-height: 1.25rem;
 

package/addon/styles/_pix-filter-banner.scss

@@ -1,37 +1,38 @@
 .pix-filter-banner {
+  @extend %pix-shadow-sm;
+
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: $pix-spacing-xs;
+  gap: var(--pix-spacing-2x);
   width: 100%;
   min-height: 64px;
-  padding: $pix-spacing-s $pix-spacing-m;
-  background-color: $pix-neutral-0;
-  box-shadow: 0 2px 5px 0 rgba($pix-neutral-110, 0.05);
+  padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
+  background-color: var(--pix-neutral-0);
 
   &__title {
     margin: 0;
-    color: $pix-neutral-60;
+    color: var(--pix-neutral-500);
     font-size: 0.875rem;
   }
 
   &__container-filter {
     display: flex;
     flex-direction: column;
-    gap: $pix-spacing-s;
+    gap: var(--pix-spacing-4x);
   }
 
   &__container-action {
     display: flex;
     flex-direction: column;
     align-items: center;
-    border-top: 1px solid $pix-neutral-15;
+    border-top: 1px solid var(--pix-neutral-20);
   }
 
   &__details {
     margin: 0;
-    padding: $pix-spacing-xs 0 $pix-spacing-xs 0;
-    color: $pix-neutral-60;
+    padding: var(--pix-spacing-2x) 0 var(--pix-spacing-2x) 0;
+    color: var(--pix-neutral-500);
     font-weight: $font-medium;
     font-size: 0.875rem;
   }
@@ -42,13 +43,13 @@
 }
 
 .pix-filter-banner-button__icon {
-  padding-right: $pix-spacing-xxs;
+  padding-right: var(--pix-spacing-1x);
 }
 
 @include device-is('tablet') {
   .pix-filter-banner {
     flex-direction: row;
-    gap: $pix-spacing-m;
+    gap: var(--pix-spacing-6x);
     align-items: center;
 
     &__container-title {
@@ -69,14 +70,14 @@
     }
 
     &__details {
-      padding: 0 $pix-spacing-s 0 0;
+      padding: 0 var(--pix-spacing-4x) 0 0;
       text-align: center;
       border: none;
     }
 
     &__button-container {
-      padding-left: $pix-spacing-s;
-      border-left: 1px solid $pix-neutral-15;
+      padding-left: var(--pix-spacing-4x);
+      border-left: 1px solid var(--pix-neutral-20);
     }
   }
 }

package/addon/styles/_pix-filterable-and-searchable-select.scss

@@ -1,8 +1,8 @@
 .pix-filterable-and-searchable-select {
   display: flex;
   max-width: 100%;
-  border: 1px $pix-neutral-45 solid;
-  border-radius: 4px;
+  border: 1px var(--pix-neutral-500) solid;
+  border-radius: var(--pix-spacing-1x);
 
   &--error {
     @include formElementInError();
@@ -44,14 +44,14 @@
 
   &__pix-multi-select {
     position: relative;
-    border-radius: 4px 0 0 4px;
+    border-radius: var(--pix-spacing-1x) 0 0 var(--pix-spacing-1x);
 
     &:after {
       position: absolute;
       right: -2px;
       width: 2px;
       height: 22px;
-      background-color: $pix-neutral-22;
+      background-color: var(--pix-neutral-100);
       border-radius: 50px;
       content: '';
     }

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

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  color: $pix-neutral-60;
+  color: var(--pix-neutral-800);
   background-color: transparent;
   border: none;
   border-radius: 50%;
@@ -16,26 +16,25 @@
   }
 
   &:hover:enabled {
-    color: $pix-neutral-60;
-    background-color: $pix-neutral-20;
+    background-color: var(--pix-neutral-20);
     outline: 0;
   }
 
   &:focus:enabled {
-    color: $pix-neutral-0;
-    background-color: $pix-neutral-60;
-    outline: 1px solid $pix-neutral-0;
+    color: var(--pix-neutral-0);
+    background-color: var(--pix-neutral-800);
+    outline: 1px solid var(--pix-neutral-0);
     outline-offset: -3px;
   }
 
   &:active:enabled {
-    color: $pix-neutral-60;
-    background-color: $pix-neutral-22;
+    color: var(--pix-neutral-800);
+    background-color: var(--pix-neutral-100);
     outline: 0;
   }
 
   &--background {
-    background-color: $pix-neutral-10;
+    background-color: var(--pix-neutral-20);
   }
 
   &--small {

package/addon/styles/_pix-indicator-card.scss

@@ -1,11 +1,12 @@
 .indicator-card {
+  @extend %pix-shadow-xs;
+
   display: flex;
   width: 100%;
   min-height: 112px;
   padding: 0;
-  background-color: $pix-neutral-0;
+  background-color: var(--pix-neutral-0);
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.05);
 
   &__icon {
     display: flex;
@@ -15,24 +16,29 @@
     font-size: 2.5rem;
     border-radius: 8px 0 0 8px;
 
-    &--grey {
-      color: $pix-neutral-60;
-      background-color: $pix-neutral-5;  
+    &--grey, &--neutral {
+      color: var(--pix-neutral-500);
+      background-color: var(--pix-neutral-20);
+    }
+
+    &--blue, &--primary {
+      color: var(--pix-primary-700);
+      background-color: var(--pix-primary-10);
     }
 
-    &--blue {
-      color: $pix-primary-60;
-      background-color: $pix-primary-5;  
+    &--green, &--success {
+      color: var(--pix-success-700);
+      background-color: var(--pix-success-50);
     }
 
-    &--green {
-      color: $pix-success-60;
-      background-color: $pix-success-5;  
+    &--purple, &--tertiary {
+      color: var(--pix-tertiary-900);
+      background-color: var(--pix-tertiary-100);
     }
 
-    &--purple {
-      color: $pix-tertiary-60;
-      background-color: $pix-tertiary-5;  
+    &--warning {
+      color: var(--pix-warning-700);
+      background-color: var(--pix-warning-50);
     }
   }
 
@@ -40,8 +46,8 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: $pix-spacing-s $pix-spacing-m;
-    color: $pix-neutral-60;
+    padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
+    color: var(--pix-neutral-500);
   }
 
   &__title {
@@ -49,7 +55,8 @@
 
     display: flex;
     align-items: center;
-    margin-bottom: $pix-spacing-xxs;
+    margin-bottom: var(--pix-spacing-1x);
+    color: var(--pix-neutral-800);
     font-weight: $font-medium;
     font-size: 1rem;
     line-height: 1.375rem;
@@ -58,7 +65,8 @@
   &__value {
     @extend %pix-title-m;
 
-    margin-bottom: $pix-spacing-xxs;
+    margin-bottom: var(--pix-spacing-1x);
+    color: var(--pix-neutral-800);
   }
 
   &__sub {
@@ -74,7 +82,7 @@
   }
 
   &__tooltip-icon {
-    margin: 0 $pix-spacing-xs;
-    color: $pix-neutral-30;
+    margin: 0 var(--pix-spacing-2x);
+    color: var(--pix-neutral-500);
   }
 }

package/addon/styles/_pix-input-code.scss

@@ -5,6 +5,7 @@
   input[type='number'] {
     // Firefox
     -moz-appearance: textfield;
+    appearance: textfield;
 
     // The rest
     &::-webkit-inner-spin-button,
@@ -22,48 +23,41 @@
   }
 
   input:nth-of-type(3n + 4) {
-    margin-left: 12px;
+    margin-left: var(--pix-spacing-3x);
   }
 
   input.pix-input-code__input {
     display: inline-block;
     width: 38px;
     height: 44px;
-    padding: 10px 12px 8px;
-    color: $pix-neutral-90;
+    padding: 10px var(--pix-spacing-3x) var(--pix-spacing-2x);
+    color: var(--pix-neutral-900);
     font-size: 1.25rem;
     text-align: center;
-    background-color: $pix-neutral-10;
-    border: 1.4px solid $pix-neutral-50;
+    background-color: var(--pix-neutral-0);
+    border: 1.4px solid var(--pix-neutral-500);
     border-radius: 4px;
-    outline: none;
 
     @include hoverFormElement();
+    @include focusFormElement();
+    @include activeFormElement();
 
-    &:not(:first-child) {
-      margin-left: 4px;
-    }
-
-    &::placeholder {
-      color: $pix-neutral-50;
+    &:focus, &:active {
+      &::placeholder {
+        opacity: 0;
+      }
     }
 
-    &:hover {
-      border-color: $pix-neutral-70;
+    &:not(:first-child) {
+      margin-left: var(--pix-spacing-1x);
     }
 
-    &:active,
-    &:focus {
-      background-color: $pix-neutral-0;
-      border-color: $pix-primary;
-
-      &::placeholder {
-        opacity: 0;
-      }
+    &::placeholder {
+      color: var(--pix-neutral-500);
     }
 
     &.filled {
-      background-color: $pix-neutral-0;
+      background-color: var(--pix-neutral-0);
     }
   }
 }