@1024pix/pix-ui 28.1.1 → 29.1.0

package/addon/styles/_pix-select.scss

@@ -13,30 +13,31 @@
   &__dropdown {
     z-index: 200;
     position: absolute;
-    max-height: 200px;
+    max-height: 12.5rem;
     width: inherit;
     border-top: none;
-    border-radius: 0 0 4px 4px;
+    border-radius: 0 0 $pix-spacing-xxs $pix-spacing-xxs;
     list-style-type: none;
     padding: 0;
     background-color: $pix-neutral-0;
     box-shadow: 0 6px 12px rgba(7, 20, 46, 0.08);
     transition: all 0.1s ease-in-out;
     white-space: nowrap;
-    margin-top: $spacing-xxs;
+    margin-top: $pix-spacing-xxs;
+    overflow-y: auto;
 
     &::-webkit-scrollbar {
       width: 0.5rem;
     }
 
     &::-webkit-scrollbar-track {
-      border-radius: 4px;
+      border-radius: $pix-spacing-xxs;
       border: 1px solid $pix-neutral-20;
       background: $pix-neutral-20;
     }
 
     &::-webkit-scrollbar-thumb {
-      border-radius: 4px;
+      border-radius: $pix-spacing-xxs;
       width: 0.375rem;
       background: $pix-neutral-30;
     }
@@ -52,7 +53,7 @@
   }
 
   &__empty-search-message {
-    @include text-small();
+    @extend %pix-body-s;
 
     color: $pix-neutral-70;
     text-align: center;
@@ -61,9 +62,9 @@
   &__search {
     display: flex;
     border-bottom: 2px solid $pix-neutral-22;
-    margin: $spacing-s $spacing-m;
+    margin: $pix-spacing-s $pix-spacing-m;
     color: $pix-neutral-30;
-    border-radius: 4px 4px 0 0;
+    border-radius: $pix-spacing-xxs $pix-spacing-xxs 0 0;
 
     &:focus-within {
       background: $pix-neutral-10;
@@ -72,8 +73,6 @@
   }
 
   &__options {
-    overflow-y: auto;
-    max-height: inherit;
     border-top: 1px solid $pix-neutral-20;
   }
 
@@ -84,23 +83,20 @@
 
 .pix-select-button {
   display: flex;
-  flex-direction: row;
   align-items: center;
-  font-family: $font-roboto;
-  font-weight: $font-normal;
   position: relative;
   border: 1px $pix-neutral-45 solid;
-  padding: 0 $spacing-s 0 $spacing-s;
+  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
   width: 100%;
   background-color: $pix-neutral-0;
-  border-radius: 4px;
+  border-radius: $pix-spacing-xxs;
   outline: none;
   height: 2.25rem;
   cursor: pointer;
   color: $pix-neutral-90;
   justify-content: space-between;
 
-  @include text-small();
+  @extend %pix-body-s;
   @include hoverFormElement();
   @include focusWithinFormElement();
 
@@ -120,11 +116,10 @@
   }
 
   &__dropdown-icon {
-    @include text-small();
+    @extend %pix-body-s;
 
-    margin-left: $spacing-xs;
+    margin-left: $pix-spacing-xs;
     color: $pix-neutral-60;
-    font-weight: $font-heavy;
     pointer-events: none;
   }
 }
@@ -137,20 +132,19 @@
 
 .pix-select-options-category {
   &__name {
-    @include text-small();
+    @extend %pix-body-s;
 
-    padding: $spacing-s $spacing-m $spacing-xs $spacing-m;
+    padding: $pix-spacing-s $pix-spacing-m $pix-spacing-xs $pix-spacing-m;
     text-transform: uppercase;
-    font-family: $font-roboto;
     color: $pix-neutral-45;
   }
 
   &__option {
-    @include text-small();
+    @extend %pix-body-s;
 
     display: flex;
     justify-content: space-between;
-    padding: $spacing-xs $spacing-m;
+    padding: $pix-spacing-xs $pix-spacing-m;
     color: $pix-neutral-70;
 
     &:hover,
@@ -187,12 +181,12 @@
 
 .pix-select-search {
   &__input {
-    @include text-small();
+    @extend %pix-body-s;
 
     width: 100%;
     border: none;
-    padding-left: $spacing-xs;
-    margin: $spacing-xxs;
+    padding-left: $pix-spacing-xs;
+    margin: $pix-spacing-xxs;
 
     &:focus {
       outline: none;
@@ -201,6 +195,6 @@
   }
 
   &__icon {
-    margin: auto $spacing-xxs;
+    margin: auto $pix-spacing-xxs;
   }
 }

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

@@ -26,9 +26,7 @@ $checkmark-width-with-space: $checkmark-width + 0.438rem;
   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;
   cursor: pointer;
 
   input {

package/addon/styles/_pix-sidebar.scss

@@ -7,7 +7,7 @@
   right: 0;
   overflow-y: scroll;
   background-color: rgba(52, 69, 99, 0.7);
-  transition: all .3s ease-in-out;
+  transition: all 0.3s ease-in-out;
 
   &--hidden {
     visibility: hidden;
@@ -29,7 +29,7 @@ $button-margin: 16px;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   background: $pix-neutral-0;
   transform: translate(0);
-  transition: transform .3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
 
   &--hidden {
     transform: translate(-100%);
@@ -58,7 +58,7 @@ $button-margin: 16px;
   }
 
   &__title {
-    @include h4;
+    @extend %pix-title-s;
 
     margin-bottom: 0;
     color: $pix-neutral-90;

package/addon/styles/_pix-tag.scss

@@ -4,9 +4,7 @@
   vertical-align: baseline;
   white-space: nowrap;
   padding: 4px 16px;
-  font-family: $font-roboto;
   font-size: 0.8125rem;
-  font-weight: $font-normal;
   border: 1px solid transparent;
   border-radius: 0.75rem;
   color: $pix-neutral-0;
@@ -18,21 +16,21 @@
   }
 
   &--green {
-    background-color: $green;
+    background-color: $pix-success-70;
   }
 
   &--green-light {
-    color: $green;
-    background-color: lighten($green, 65%);
+    color: $pix-success-70;
+    background-color: $pix-success-5;
   }
 
   &--purple {
-    background-color: $purple;
+    background-color: $pix-tertiary-60;
   }
 
   &--purple-light {
-    color: darken($purple, 10%);
-    background-color: lighten($purple, 30%);
+    color: $pix-tertiary-80;
+    background-color: $pix-tertiary-5;
   }
 
   &--yellow {
@@ -46,12 +44,12 @@
   }
 
   &--orange {
-    background-color: $orange;
+    background-color: $pix-warning-70;
   }
 
   &--orange-light {
-    color: darken($orange, 25%);
-    background-color: lighten($orange, 35%);
+    color: $pix-warning-70;
+    background-color: $pix-warning-5;
   }
 
   &--grey {

package/addon/styles/_pix-textarea.scss

@@ -5,7 +5,6 @@
     border-style: solid;
     border-radius: 4px;
     padding: 10px 16px;
-    font-family: $font-roboto;
     color: $pix-neutral-90;
     font-size: 0.875rem;
     resize: vertical;

package/addon/styles/_pix-toggle.scss

@@ -5,7 +5,7 @@
   &__label {
     color: $pix-neutral-90;
 
-    @include text;
+    @extend %pix-body-m;
   }
 
   &__button {
@@ -13,29 +13,29 @@
     background-color: transparent;
     border: 1px solid $pix-neutral-30;
     border-radius: 4px;
-    padding: $spacing-xxs;
-    margin-top: $spacing-xxs;
+    padding: $pix-spacing-xxs;
+    margin-top: $pix-spacing-xxs;
   }
 
   &__on,
   &__off {
     display: inline-block;
     border-radius: 4px;
-    padding: $spacing-xs;
+    padding: $pix-spacing-xs;
     color: $pix-neutral-70;
 
-    @include text-small;
+    @extend %pix-body-s;
   }
 
   &__off {
     background-color: $pix-neutral-45;
-    color: $white;
+    color: $pix-neutral-0;
   }
 
   &--inline {
     flex-direction: row;
     align-items: center;
-    gap: $spacing-xxs;
+    gap: $pix-spacing-xxs;
   }
 
   &--inline,
@@ -51,7 +51,7 @@
     .pix-toggle {
       &__on {
         background-color: $pix-neutral-45;
-        color: $white;
+        color: $pix-neutral-0;
       }
 
       &__off {

package/addon/styles/_pix-tooltip.scss

@@ -20,7 +20,6 @@
   padding: 8px 16px;
   left: auto;
   color: $pix-neutral-0;
-  font-family: $font-roboto;
   font-size: 0.875rem;
   border-radius: 6px;
   line-height: 1.4rem;

package/addon/styles/normalize-reset/_normalize.scss

@@ -9,7 +9,7 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
+  line-height: normal; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
   

package/addon/styles/normalize-reset/_reset.scss

@@ -3,6 +3,10 @@
 /*** box sizing border-box for all elements ***/
 html {
   font-size: 16px;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -40,13 +44,18 @@ input::-moz-focus-inner {
 }
 
 ul,
-ol,
-dd {
+ol {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+dl,
+dt,
+dd {
+  margin: 0;
+}
+
 h1,
 h2,
 h3,