Skip to content

Commit

Permalink
Merge pull request #250 from heorhi-deriv/badge-improvements
Browse files Browse the repository at this point in the history 
[FEQ] george / FEQ-2647 / Improve text rendering and colors in Badge component
  • Loading branch information
@shayan-deriv
shayan-deriv authored Sep 18, 2024
2 parents ed8333b + f19e29e commit 4b3e768
Show file tree
Hide file tree
Showing 6 changed files with 249 additions and 110 deletions.
182 changes: 157 additions & 25 deletions src/components/Badge/Badge.scss
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,32 @@
$font-color-white: var(--du-badge-white, #ffffff);
$font-color-gray: var(--du-text-general, #868686);
$success_color_border: var(--du-badge-success, #4bb4b3);
$success-secondary_color_border: var(--du-badge-success-secondary, #007a22);
$warning_color_border: var(--du-badge-warning, #ffad3a);
$warning-secondary_color_border: var(--du-badge-warning-secondary, #c47d00);
$white_color: linear-gradient(#e6e9e9, #f2f3f4);
$success_color: $gradient-color-blue-5;
$success-secondary_color: var(
--du-transparent-success-secondary,
$alpha-color-green-3
);
$warning_color: $gradient-color-yellow;
$warning-secondary_color: var(
--du-transparent-warning-secondary,
$alpha-color-yellow-2
);
$danger_color: var(--du-badge-danger, #ec3f3f);
$danger-secondary_color: var(
--du-transparent-danger-secondary,
$alpha-color-red-4
);
$danger-secondary_color_border: var(--du-badge-danger-secondary, #c40000);
$blue_color: var(--du-badge-blue, #115bff);
$blue-secondary_color: var(
--du-transparent-blue-secondary,
$alpha-color-blue-4
);
$blue-secondary_color_border: var(--du-badge-blue-secondary, #0777c4);
$purple_color: var(--du-badge-purple, #722fe4);
$light_blue_color: var(--du-badge-light-blue, #0dc2e7);
$gold_color: $gradient-color-gold;
Expand Down Expand Up @@ -102,7 +122,7 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--lightblue {
&.deriv-badge__color--light-blue {
background-color: $light_blue_color;

span {
Expand All @@ -118,11 +138,19 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--warning {
background-image: $warning_color;
&.deriv-badge__color--success-secondary {
background: $success-secondary_color;

span {
color: $font-color-white;
color: $success-secondary_color_border;
}
}

&.deriv-badge__color--warning-secondary {
background: $warning-secondary_color;

span {
color: $warning-secondary_color_border;
}
}

Expand All @@ -134,6 +162,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--danger-secondary {
background: $danger-secondary_color;

span {
color: $danger-secondary_color_border;
}
}

&.deriv-badge__color--blue {
background-color: $blue_color;

Expand All @@ -142,6 +178,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--blue-secondary {
background: $blue-secondary_color;

span {
color: $blue-secondary_color_border;
}
}

&.deriv-badge__color--purple {
background-color: $purple_color;

Expand Down Expand Up @@ -179,67 +223,91 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--lightblue {
&.deriv-badge__color--light-blue {
border-color: $light_blue_color;

span {
color: $font-color-gray;
color: $light_blue_color;
}
}

&.deriv-badge__color--success {
border-color: $success_color_border;

span {
color: $font-color-gray;
color: $success_color_border;
}
}

&.deriv-badge__color--success-secondary {
border-color: $success-secondary_color_border;

span {
color: $success-secondary_color_border;
}
}

&.deriv-badge__color--warning {
border-color: $warning_color_border;

span {
color: $font-color-gray;
color: $warning_color_border;
}
}

&.deriv-badge__color--warning-secondary {
border-color: $warning-secondary_color_border;

span {
color: $warning-secondary_color_border;
}
}

&.deriv-badge__color--danger {
border-color: $danger_color;

span {
color: $font-color-gray;
color: $danger_color;
}
}

&.deriv-badge__color--blue {
border-color: $blue_color;
&.deriv-badge__color--danger-secondary {
border-color: $danger-secondary_color_border;

span {
color: $font-color-gray;
color: $danger-secondary_color_border;
}
}

&.deriv-badge__color--blue-secondary {
border-color: $blue-secondary_color_border;

span {
color: $blue-secondary_color_border;
}
}

&.deriv-badge__color--purple {
border-color: $purple_color;

span {
color: $font-color-gray;
color: $purple_color;
}
}

&.deriv-badge__color--gold {
border-color: $gold_color_border;

span {
color: $font-color-gray;
color: $gold_color_border;
}
}

&.deriv-badge__color--green {
border-color: $green_color_border;

span {
color: $font-color-gray;
color: $green_color_border;
}
}
}
Expand Down Expand Up @@ -355,7 +423,7 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--lightblue {
&.deriv-badge__color--light-blue {
background-color: $light_blue_color;

span {
Expand All @@ -371,6 +439,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--success-secondary {
background-image: $success-secondary_color;

span {
color: $success-secondary_color_border;
}
}

&.deriv-badge__color--warning {
background-image: $warning_color;

Expand All @@ -379,6 +455,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--warning-secondary {
background: $warning-secondary_color;

span {
color: $warning-secondary_color_border;
}
}

&.deriv-badge__color--danger {
background-color: $danger_color;

Expand All @@ -387,6 +471,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--danger-secondary {
background: $danger-secondary_color;

span {
color: $danger-secondary_color_border;
}
}

&.deriv-badge__color--blue {
background-color: $blue_color;

Expand All @@ -395,6 +487,14 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--blue-secondary {
background: $blue-secondary_color;

span {
color: $blue-secondary_color_border;
}
}

&.deriv-badge__color--purple {
background-color: $purple_color;

Expand Down Expand Up @@ -432,67 +532,99 @@ $green_color_border: $color-green-6;
}
}

&.deriv-badge__color--lightblue {
&.deriv-badge__color--light-blue {
border-color: $light_blue_color;

span {
color: $font-color-gray;
color: $light_blue_color;
}
}

&.deriv-badge__color--success {
border-color: $success_color_border;

span {
color: $font-color-gray;
color: $success_color_border;
}
}

&.deriv-badge__color--success-secondary {
border-color: $success-secondary_color_border;

span {
color: $success-secondary_color_border;
}
}

&.deriv-badge__color--warning {
border-color: $warning_color_border;

span {
color: $font-color-gray;
color: $warning_color_border;
}
}

&.deriv-badge__color--warning-secondary {
border-color: $warning-secondary_color_border;

span {
color: $warning-secondary_color_border;
}
}

&.deriv-badge__color--danger {
border-color: $danger_color;

span {
color: $font-color-gray;
color: $danger_color;
}
}

&.deriv-badge__color--danger-secondary {
border-color: $danger-secondary_color_border;

span {
color: $danger-secondary_color_border;
}
}

&.deriv-badge__color--blue {
border-color: $blue_color;

span {
color: $font-color-gray;
color: $blue_color;
}
}

&.deriv-badge__color--blue-secondary {
border-color: $blue-secondary_color_border;

span {
color: $blue-secondary_color_border;
}
}

&.deriv-badge__color--purple {
border-color: $purple_color;

span {
color: $font-color-gray;
color: $purple_color;
}
}

&.deriv-badge__color--gold {
border-color: $gold_color_border;

span {
color: $font-color-gray;
color: $gold_color_border;
}
}

&.deriv-badge__color--green {
border-color: $green_color_border;

span {
color: $font-color-gray;
color: $green_color_border;
}
}
}
Expand Down
Loading

0 comments on commit 4b3e768

Please sign in to comment.