Skip to content

Commit

Permalink
feat: use new color variables
Browse files Browse the repository at this point in the history
  • Loading branch information
@yannbertrand @xav-car
yannbertrand authored and xav-car committed Dec 8, 2023
1 parent ab7a942 commit d1d0f1d
Show file tree
Hide file tree
Showing 32 changed files with 354 additions and 353 deletions.
2 changes: 1 addition & 1 deletion addon/styles/_pix-background-header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
z-index: -1;
width: 100%;
min-height: 270px;
color: $pix-neutral-0;
color: var(--pix-neutral-0);
background: $pix-primary-app-gradient;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
Expand Down
54 changes: 27 additions & 27 deletions addon/styles/_pix-banner.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,80 +27,80 @@
}

&--information {
color: $pix-primary-70;
background-color: $pix-primary-5;
color: var(--pix-primary-700);
background-color: var(--pix-primary-10);

.pix-icon-button {
color: $pix-primary-70;
background-color: $pix-primary-5;
color: var(--pix-primary-700);
background-color: var(--pix-primary-10);

&:hover:enabled,
&:focus:enabled,
&:active:enabled {
color: $pix-primary-70;
background-color: $pix-primary-10;
color: var(--pix-primary-700);
background-color: var(--pix-primary-100);
}

&:focus:enabled {
outline-color: $pix-primary-70;
outline-color: var(--pix-primary-700);
}
}
}

&--warning {
color: $pix-warning-70;
background-color: $pix-warning-5;
color: var(--pix-warning-700);
background-color: var(--pix-warning-50);

.pix-icon-button {
color: $pix-warning-70;
background-color: $pix-warning-5;
color: var(--pix-warning-700);
background-color: var(--pix-warning-50);

&:hover:enabled,
&:focus:enabled,
&:active:enabled {
color: $pix-warning-70;
background-color: $pix-warning-10;
color: var(--pix-warning-700);
background-color: var(--pix-warning-100);
}

&:focus:enabled {
outline-color: $pix-warning-70;
outline-color: var(--pix-warning-700);
}
}
}

&--error {
color: $pix-error-70;
background-color: $pix-error-5;
color: var(--pix-error-700);
background-color: var(--pix-error-50);

.pix-icon-button {
color: $pix-error-70;
background-color: $pix-error-5;
color: var(--pix-error-700);
background-color: var(--pix-error-50);

&:hover:enabled,
&:focus:enabled,
&:active:enabled {
color: $pix-error-70;
background-color: $pix-error-10;
color: var(--pix-error-700);
background-color: var(--pix-error-100);
}

&:focus:enabled {
outline-color: $pix-error-70;
outline-color: var(--pix-error-700);
}
}
}

&--communication {
color: $pix-neutral-0;
background-color: $pix-primary;
color: var(--pix-neutral-0);
background-color: var(--pix-primary-500);

&-orga {
color: $pix-neutral-0;
background-color: $pix-secondary-orga-80;
color: var(--pix-neutral-0);
background-color: var(--pix-orga-500);
}

&-certif {
color: $pix-neutral-0;
background-color: $pix-secondary-certif-50;
color: var(--pix-neutral-0);
background-color: var(--pix-certif-500);
}
}
}
6 changes: 3 additions & 3 deletions addon/styles/_pix-block.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
.pix-block {
position: relative;
background-color: $pix-neutral-0;
background-color: var(--pix-neutral-0);
border-radius: 5px;

&--shadow-light {
box-shadow: 0 4px 8px rgba($pix-neutral-110, 0.08);
box-shadow: 0 4px 8px rgba(var(--pix-neutral-900), 0.08);
}

&--shadow-heavy {
box-shadow: 0 12px 24px rgba($pix-neutral-110, 0.08);
box-shadow: 0 12px 24px rgba(var(--pix-neutral-900), 0.08);
}
}
100 changes: 50 additions & 50 deletions addon/styles/_pix-button-base.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
display: flex;
align-items: center;
justify-content: center;
color: $pix-neutral-0;
color: var(--pix-neutral-0);
font-weight: $font-medium;
font-size: 0.875rem;
white-space: nowrap;
text-decoration: none;
background-color: $pix-primary;
background-color: var(--pix-primary-500);
border: 1px solid transparent;
outline: none;
cursor: pointer;
Expand Down Expand Up @@ -38,182 +38,182 @@
}

&--background-blue {
background-color: $pix-primary;
background-color: var(--pix-primary-500);

&:not(.pix-button--disabled) {
&:hover {
background-color: $pix-primary-60;
background-color: var(--pix-primary-700);
}

&:focus,
&:focus-visible {
background-color: $pix-primary-60;
outline: 1px solid $pix-neutral-0;
background-color: var(--pix-primary-700);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
background-color: $pix-primary-70;
background-color: var(--pix-primary-700);
outline: none;
}
}
}

&--background-green {
background-color: $pix-success-60;
background-color: var(--pix-success-700);

&:not(.pix-button--disabled) {
&:hover {
background-color: $pix-success-70;
background-color: var(--pix-success-700);
}

&:focus,
&:focus-visible {
background-color: $pix-success-70;
outline: 1px solid $pix-neutral-0;
background-color: var(--pix-success-700);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
background-color: $pix-success-80;
background-color: var(--pix-success-900);
outline: none;
}
}
}

&--background-yellow {
color: $pix-neutral-100;
background-color: $pix-warning-40;
color: var(--pix-neutral-900);
background-color: var(--pix-warning-500);

&:not(.pix-button--disabled) {
&:hover {
background-color: $pix-warning-50;
background-color: var(--pix-warning-500);
}

&:focus,
&:focus-visible {
background-color: $pix-warning-50;
outline: 1px solid $pix-neutral-0;
background-color: var(--pix-warning-500);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
background-color: $pix-warning-60;
background-color: var(--pix-warning-700);
outline: none;
}
}
}

&--background-red {
color: $pix-neutral-0;
background-color: $pix-error-70;
color: var(--pix-neutral-0);
background-color: var(--pix-error-700);

&:not(.pix-button--disabled) {
&:hover {
background-color: $pix-error-80;
background-color: var(--pix-error-900);
}

&:focus,
&:focus-visible {
background-color: $pix-error-70;
outline: 1px solid $pix-neutral-0;
background-color: var(--pix-error-700);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
background-color: $pix-error-90;
background-color: var(--pix-error-900);
outline: none;
}
}
}

&--background-grey {
color: $pix-neutral-90;
background-color: $pix-neutral-20;
color: var(--pix-neutral-900);
background-color: var(--pix-neutral-20);

&:not(.pix-button--disabled) {
&:hover {
background-color: $pix-neutral-22;
background-color: var(--pix-neutral-100);
}

&:focus,
&:focus-visible {
color: $pix-neutral-0;
background-color: $pix-neutral-90;
outline: 1px solid $pix-neutral-0;
color: var(--pix-neutral-0);
background-color: var(--pix-neutral-900);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
color: $pix-neutral-90;
background-color: $pix-neutral-25;
color: var(--pix-neutral-900);
background-color: var(--pix-neutral-100);
outline: none;
}
}
}

/* deprecated in favor of --background-transparent-light + --border */
&--background-transparent {
color: $pix-neutral-50;
color: var(--pix-neutral-500);
background-color: transparent;
border: 1px solid $pix-neutral-50;
border: 1px solid var(--pix-neutral-500);
}

&--background-transparent-light {
color: $pix-neutral-90;
color: var(--pix-neutral-900);
background-color: transparent;

&.pix-button--border {
border: 1px solid $pix-neutral-50;
border: 1px solid var(--pix-neutral-500);
}

&:not(.pix-button--disabled) {
&:hover {
color: $pix-neutral-0;
background-color: $pix-neutral-60;
color: var(--pix-neutral-0);
background-color: var(--pix-neutral-500);
border: 1px solid transparent;
}

&:focus,
&:focus-visible {
color: $pix-neutral-0;
background-color: $pix-neutral-90;
outline: 1px solid $pix-neutral-0;
color: var(--pix-neutral-0);
background-color: var(--pix-neutral-900);
outline: 1px solid var(--pix-neutral-0);
outline-offset: -4px;
}

&:active {
background-color: $pix-neutral-70;
background-color: var(--pix-neutral-800);
outline: none;
}
}
}

&--background-transparent-dark {
color: $pix-neutral-0;
color: var(--pix-neutral-0);
background-color: transparent;

&.pix-button--border {
border: 1px solid $pix-neutral-0;
border: 1px solid var(--pix-neutral-0);
}

&:not(.pix-button--disabled) {
&:hover {
color: $pix-neutral-90;
background-color: $pix-neutral-10;
color: var(--pix-neutral-900);
background-color: var(--pix-neutral-20);
border: 1px solid transparent;
}

&:focus,
&:focus-visible {
color: $pix-neutral-90;
background-color: $pix-neutral-10;
outline: 1px solid $pix-neutral-90;
color: var(--pix-neutral-900);
background-color: var(--pix-neutral-20);
outline: 1px solid var(--pix-neutral-900);
outline-offset: -4px;
}

&:active {
background-color: $pix-neutral-20;
background-color: var(--pix-neutral-20);
outline: none;
}
}
Expand Down
Loading

0 comments on commit d1d0f1d

Please sign in to comment.