@1024pix/pix-ui 28.1.1 → 29.1.0

package/addon/styles/pix-design-tokens/_colors.scss

@@ -138,373 +138,3 @@ $pix-content-gradient: linear-gradient(180deg, #1A8C89 0%, #52D987 100%);
 $pix-communication-gradient: linear-gradient(180deg, #3D68FF 0%, #12A3FF 100%);
 $pix-security-gradient: linear-gradient(180deg, #AC008D 0%, #FF3F94 100%);
 $pix-environment-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
-
-//// DEPRECATED
-// primary
-
-/**
- * @deprecated Please use '$pix-primary' instead!
- */
-$blue: #3D68FF;
-
-/**
- * @deprecated Please use '$pix-warning-40' instead!
- */
-$yellow: #FFBE00;
-
-/**
- * @deprecated
- */
-$orange: #DA7601;
-
-/**
- * @deprecated
- */
-$red: #D63F00;
-
-/**
- * @deprecated Please use '$pix-neutral-60' instead!
- */
-$blue-zodiac: #505F79;
-
-/**
- * @deprecated Please use '$pix-neutral-110' instead!
- */
-$black: #07142E;
-
-/**
- * @deprecated Please use '$pix-neutral-0' instead!
- */
-$white: #FFFFFF;
-
-// secondary
-
-/**
- * @deprecated
- */
-$blue-hover: #3257D9;
-
-/**
- * @deprecated
- */
-$dark-blue-pro: #1A38A0;
-
-/**
- * @deprecated Please use '$pix-secondary-certif-50' instead!
- */
-$dark-green-certif: #17817E;
-
-/**
- * @deprecated
- */
-$dark-orga: #006C87;
-
-/**
- * @deprecated
- */
-$green: #038125;
-
-/**
- * @deprecated Please use '$pix-secondary-orga' instead!
- */
-$orga: #00DDFF;
-
-/**
- * @deprecated
- */
-$purple: #8845FF;
-
-@mixin colorize($color, $percentageDarkenForColor, $percentageLightenForBackground) {
-  color: darken($color, $percentageDarkenForColor);
-  background-color: lighten($color, $percentageLightenForBackground);
-}
-
-// gradients
-
-/**
- * @deprecated Please use '$pix-primary-app-gradient' instead!
- */
-$pix-blue-gradient: linear-gradient(135deg, #12A3FF 0%, #3D68FF 100%);
-
-/**
- * @deprecated Please use '$pix-primary-certif-gradient' instead!
- */
-$pix-certif-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
-
-/**
- * @deprecated Please use '$pix-security-gradient' instead!
- */
-$pix-certif-old-gradient: linear-gradient(135deg, #FF3F93 0%, #AC008D 100%);
-
-/**
- * @deprecated Please use '$pix-information-gradient' instead!
- */
-$pix-orange-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
-
-/**
- * @deprecated Please use '$pix-primary-orga-gradient' instead!
- */
-$pix-orga-gradient: linear-gradient(134deg, #00DDFF 0%, #0095C0 100%);
-
-/**
- * @deprecated Please use '$pix-primary-orga-gradient' instead!
- */
-$pix-orga-old-gradient: linear-gradient(0deg, #0D7DC4 0%, #213371 100%);
-
-/**
- * @deprecated Please use '$pix-security-gradient' instead!
- */
-$pix-pink-gradient: linear-gradient(0deg, #FF3F93 0%, #AC008D 100%);
-
-/**
- * @deprecated Please use '$pix-environment-gradient' instead!
- */
-$pix-purple-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
-
-/**
- * Still in use for PixProgressGauge, may be removed in the future.
- */
-$pix-yellow-gradient: linear-gradient(135deg, #FFBE00 0%, #FF9F00 100%);
-
-/**
- * Still in use for PixProgressGauge, may be removed in the future.
- */
-$pix-yellow-gradient-right: linear-gradient(to right, #FFBE00, #FF9F00);
-
-// light
-
-/**
- * @deprecated Please use '$pix-neutral-5' instead!
- */
-$grey-5: #FAFBFC;
-
-/**
- * @deprecated Please use '$pix-neutral-10' instead!
- */
-$grey-10: #F4F5F7;
-
-/**
- * @deprecated Please use '$pix-neutral-15' instead!
- */
-$grey-15: #EAECF0;
-
-/**
- * @deprecated Please use '$pix-neutral-20' instead!
- */
-$grey-20: #DFE1E6;
-
-/**
- * @deprecated Please use '$pix-neutral-22' instead!
- */
-$grey-22: #C1C7D0;
-
-/**
- * @deprecated Please use '$pix-neutral-25' instead!
- */
-$grey-25: #A5ADBA;
-
-// medium
-
-/**
- * @deprecated Please use '$pix-neutral-30' instead!
- */
-$grey-30: #97A0AF;
-
-/**
- * @deprecated Please use '$pix-neutral-35' instead!
- */
-$grey-35: #8993A4;
-
-/**
- * @deprecated Please use '$pix-neutral-40' instead!
- */
-$grey-40: #7A869A;
-
-/**
- * @deprecated Please use '$pix-neutral-45' instead!
- */
-$grey-45: #6B778C;
-
-/**
- * @deprecated Please use '$pix-neutral-5O' instead!
- */
-$grey-50: #5E6C84;
-
-/**
- * @deprecated Please use '$pix-neutral-60' instead!
- */
-$grey-60: #505F79;
-
-// dark
-
-/**
- * @deprecated Please use '$pix-neutral-70' instead!
- */
-$grey-70: #344563;
-
-/**
- * @deprecated Please use '$pix-neutral-80' instead!
- */
-$grey-80: #253858;
-
-/**
- * @deprecated Please use '$pix-neutral-90' instead!
- */
-$grey-90: #172B4D;
-
-/**
- * @deprecated Please use '$pix-neutral-100' instead!
- */
-$grey-100: #091E42;
-
-/**
- * @deprecated Please use '$pix-neutral-150' instead!
- */
-$grey-150: #0C163A;
-
-/**
- * @deprecated Please use '$pix-neutral-110' instead!
- */
-$grey-200: #07142E;
-
-// gradients domain
-
-/**
- * @deprecated Please use '$pix-information-gradient' instead!
- */
-$information-gradient: linear-gradient(180deg, #F24645 0%, #F1A141 100%);
-
-/**
- * @deprecated Please use '$pix-content-gradient' instead!
- */
-$content-gradient: linear-gradient(0deg, #52D987 0%, #1A8C89 100%);
-
-/**
- * @deprecated Please use '$pix-communication-gradient' instead!
- */
-$communication-gradient: linear-gradient(0deg, #12A3FF 0%, #3D68FF 100%);
-
-/**
- * @deprecated Please use '$pix-security-gradient' instead!
- */
-$security-gradient: linear-gradient(0deg, #FF3F93 0%, #AC008D 100%);
-
-/**
- * @deprecated Please use '$pix-environment-gradient' instead!
- */
-$environment-gradient: linear-gradient(180deg, #5E2563 0%, #564DA6 100%);
-
-// solids
-
-/**
- * @deprecated Please use '$pix-environment-dark' instead!
- */
-$environment-dark: #5E2563;
-
-/**
- * @deprecated Please use '$pix-environment-light' instead!
- */
-$environment-light: #564DA6;
-
-/**
- * @deprecated Please use '$pix-communication-dark' instead!
- */
-$communication-dark: #3D68FF;
-
-/**
- * @deprecated Please use '$pix-communication-light' instead!
- */
-$communication-light: #12A3FF;
-
-/**
- * @deprecated Please use '$pix-content-dark' instead!
- */
-$content-dark: #1A8C89;
-
-/**
- * @deprecated Please use '$pix-content-light' instead!
- */
-$content-light: #52D987;
-
-/**
- * @deprecated Please use '$pix-information-dark' instead!
- */
-$information-dark: #F24645;
-
-/**
- * @deprecated Please use '$pix-information-light' instead!
- */
-$information-light: #F1A141;
-
-/**
- * @deprecated Please use '$pix-security-dark' instead!
- */
-$security-dark: #AC008D;
-
-/**
- * @deprecated Please use '$pix-security-light' instead!
- */
-$security-light: #FF3F94;
-
-/**
- * @deprecated Please use '$pix-error-10' instead!
- */
-$pink-alert-light: #FFE1E1;
-
-/**
- * @deprecated Please use '$pix-error-70' instead!
- */
-$pink-alert-dark: #A71E1A;
-
-/**
- * @deprecated Please use '$pix-primary-10' instead!
- */
-$blue-alert-light: #DCF1FF;
-
-/**
- * @deprecated Please use '$pix-primary-70' instead!
- */
-$blue-alert-dark: #0D25B3;
-
-/**
- * @deprecated Please use '$pix-success-10' instead!
- */
-$green-alert-light: #EFFFD8;
-
-/**
- * @deprecated Please use '$pix-success-70' instead!
- */
-$green-alert-dark: #006134;
-
-/**
- * @deprecated Please use '$pix-warning-10' instead!
- */
-$yellow-alert-light: #FFF1C5;
-
-/**
- * @deprecated Please use '$pix-secondary-60' instead!
- */
-$yellow-alert-dark: #A95800;
-
-// status
-
-/**
- * @deprecated
- *-To style text or border : $pix-error-70
- *-To style background : $pix-error-5
- */
-$error: #FF4B00;
-
-/**
- * @deprecated
- *-To style text or border : $pix-success-70
- *-To style background : $pix-success-5
- */
-$success: #57C884;
-
-/**
- * @deprecated
- *-To style text or border : $pix-warning-70
- *-To style background : $pix-warning-5
- */
-$warning: #FFBE00;

package/addon/styles/pix-design-tokens/_fonts.scss

@@ -1,51 +1,33 @@
 @font-face {
-  font-family: "Open Sans";
-  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-Regular.ttf");
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-SemiBold.ttf");
-  font-weight: 600;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: "Open Sans";
-  src: url("../@1024pix/pix-ui/fonts/OpenSans/OpenSans-Light.ttf");
-  font-weight: 300;
+  font-family: 'Open Sans';
+  src: url('../@1024pix/pix-ui/fonts/OpenSans/OpenSans-Medium.ttf');
+  font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Roboto";
-  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Regular.ttf");
-  font-weight: normal;
+  font-family: 'Roboto';
+  src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Regular.ttf');
+  font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Roboto";
-  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Medium.ttf");
+  font-family: 'Roboto';
+  src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Medium.ttf');
   font-weight: 500;
   font-style: normal;
 }
 
 @font-face {
-  font-family: "Roboto";
-  src: url("../@1024pix/pix-ui/fonts/Roboto/Roboto-Light.ttf");
-  font-weight: 300;
+  font-family: 'Roboto';
+  src: url('../@1024pix/pix-ui/fonts/Roboto/Roboto-Bold.ttf');
+  font-weight: 700;
   font-style: normal;
 }
 
 $font-open-sans: 'Open Sans', Arial, sans-serif;
 $font-roboto: 'Roboto', Arial, sans-serif;
-$font-light: 300;
 $font-normal: 400;
 $font-medium: 500;
-$font-semi-bold: 600;
 $font-bold: 700;
-$font-extra-bold: 800;
-$font-heavy: 900;

package/addon/styles/pix-design-tokens/_form.scss

@@ -34,11 +34,10 @@
 
 @mixin label() {
   display: block;
-  font-family: $font-roboto;
   font-size: 0.875rem;
   line-height: 1.375rem;
   color: $pix-neutral-90;
-  margin-bottom: $spacing-xxs;
+  margin-bottom: $pix-spacing-xxs;
   font-weight: $font-medium;
 }
 
@@ -52,10 +51,9 @@
 }
 
 @mixin errorMessage() {
-  font-family: $font-roboto;
   font-size: 0.75rem;
   color: $pix-error-70;
-  margin-top: $spacing-xxs;
+  margin-top: $pix-spacing-xxs;
 }
 
 @mixin formElementInError() {
@@ -69,12 +67,11 @@
 }
 
 @mixin input() {
-  font-family: $font-roboto;
   font-size: 0.875rem;
-  font-weight: 400;
+  font-weight: $font-normal;
   color: $pix-neutral-90;
-  border-radius: $spacing-xxs;
-  padding: 0 $spacing-s 0 $spacing-s;
+  border-radius: $pix-spacing-xxs;
+  padding: 0 $pix-spacing-s 0 $pix-spacing-s;
 }
 
 .pix-form__label {
@@ -84,7 +81,7 @@
 }
 
 .pix-radio-button {
-  padding: $spacing-xs 0 $spacing-xs 0;
+  padding: $pix-spacing-xs 0 $pix-spacing-xs 0;
 }
 
 .pix-form__actions {
@@ -96,7 +93,8 @@
   }
 }
 
-abbr.mandatory-mark {
+.mandatory-mark,
+.mandatory-mark[title] {
   cursor: help;
   color: $pix-error-70;
   text-decoration: none;

package/addon/styles/pix-design-tokens/_shadows.scss

@@ -5,42 +5,27 @@
   box-shadow: 0 $verticalSize $blur rgba(7, 20, 46, 0.08);
 }
 
-@mixin shadow-xs() {
-  @include shadow(4px, 8px);
-}
-
-@mixin shadow-sm() {
-  @include shadow(6px, 12px);
-}
-
-@mixin shadow-md() {
-  @include shadow(8px, 16px);
-}
-
-@mixin shadow-lg() {
-  @include shadow(10px, 20px);
-}
-
-@mixin shadow-xl() {
-  @include shadow(12px, 24px);
-}
-
+%pix-shadow-xs,
 .pix-shadow-xs {
-  @include shadow-xs;
+  @include shadow(4px, 8px);
 }
 
+%pix-shadow-sm,
 .pix-shadow-sm {
-  @include shadow-sm;
+  @include shadow(6px, 12px);
 }
 
+%pix-shadow-md,
 .pix-shadow-md {
-  @include shadow-md;
+  @include shadow(8px, 16px);
 }
 
+%pix-shadow-lg,
 .pix-shadow-lg {
-  @include shadow-lg;
+  @include shadow(10px, 20px);
 }
 
+%pix-shadow-xl,
 .pix-shadow-xl {
-  @include shadow-xl;
+  @include shadow(12px, 24px);
 }

package/addon/styles/pix-design-tokens/_spacing.scss

@@ -1,9 +1,9 @@
-// See https://zeroheight.com/8dd127da7/p/6877af-layout/t/053b83
+// See https://www.figma.com/file/8RJ3aCSfdeQ8AZZVBBYKS8/Design-System-Pix?node-id=54%3A4595&t=8piOzYzdI0ala3i6-0
 
-$spacing-xxs: 4px;
-$spacing-xs: 8px;
-$spacing-s: 16px;
-$spacing-m: 24px;
-$spacing-l: 32px;
-$spacing-xl: 40px;
-$spacing-xxl: 48px;
+$pix-spacing-xxs: 4px;
+$pix-spacing-xs: 8px;
+$pix-spacing-s: 16px;
+$pix-spacing-m: 24px;
+$pix-spacing-l: 32px;
+$pix-spacing-xl: 40px;
+$pix-spacing-xxl: 48px;