fix(badge): set official colors

ovh · Jul 29, 2024 · defebb4 · defebb4
1 parent 2b0cf28
commit defebb4
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 3 deletions.
diff --git a/packages/ods/src/components/badge/src/components/ods-badge/ods-badge.scss b/packages/ods/src/components/badge/src/components/ods-badge/ods-badge.scss
@@ -11,6 +11,10 @@
 
     @include badge.ods-badge();
 
+    &--neutral {
+      @include badge.ods-badge-color('neutral');
+    }
+
     &--information {
       @include badge.ods-badge-color('information');
     }
@@ -23,6 +27,26 @@
       @include badge.ods-badge-color('warning');
     }
 
+    &--critical {
+      @include badge.ods-badge-color('critical');
+    }
+
+    &--alpha {
+      @include badge.ods-badge-color('alpha');
+    }
+
+    &--beta {
+      @include badge.ods-badge-color('beta');
+    }
+
+    &--new {
+      @include badge.ods-badge-color('new');
+    }
+
+    &--promotion {
+      @include badge.ods-badge-color('promotion');
+    }
+
     &--round {
       @include badge.ods-badge-shape('round');
     }

diff --git a/packages/ods/src/components/badge/src/constants/badge-color.ts b/packages/ods/src/components/badge/src/constants/badge-color.ts
@@ -1,7 +1,13 @@
 enum ODS_BADGE_COLOR {
+  neutral = 'neutral',
   information = 'information',
   success = 'success',
   warning = 'warning',
+  critical = 'critical',
+  alpha = 'alpha',
+  beta = 'beta',
+  new = 'new',
+  promotion = 'promotion',
 }
 
 type OdsBadgeColor =`${ODS_BADGE_COLOR}`;

diff --git a/packages/ods/src/components/badge/src/index.html b/packages/ods/src/components/badge/src/index.html
@@ -33,9 +33,15 @@
   <ods-badge label="LG badge" size="lg"></ods-badge>
 
   <p>Color</p>
+  <ods-badge label="Neutral badge" color="neutral"></ods-badge>
   <ods-badge label="Information badge" color="information"></ods-badge>
   <ods-badge label="Success badge" color="success"></ods-badge>
   <ods-badge label="Warning badge" color="warning"></ods-badge>
+  <ods-badge label="Critical badge" color="critical"></ods-badge>
+  <ods-badge label="Alpha badge" color="alpha"></ods-badge>
+  <ods-badge label="Beta badge" color="beta"></ods-badge>
+  <ods-badge label="New badge" color="new"></ods-badge>
+  <ods-badge label="Promotion badge" color="promotion"></ods-badge>
 
   <p>Custom style</p>
   <ods-badge class="my-badge" label="Custom badge"></ods-badge>

diff --git a/packages/ods/src/style/_badge.scss b/packages/ods/src/style/_badge.scss
@@ -12,12 +12,33 @@ $ods-badge-height-lg: 28px;
 }
 
 @mixin ods-badge-color($color) {
-  @if $color == 'information' {
-    background-color: var(--ods-color-new);
+  @if $color == 'neutral' {
+    background-color: var(--ods-color-neutral-100);
+    color: var(--ods-color-neutral-700);
+  } @else if $color == 'information' {
+    background-color: var(--ods-color-information-100);
+    color: var(--ods-color-information-900);
   } @else if $color == 'success' {
-    background-color: var(--ods-color-beta);
+    background-color: var(--ods-color-success-100);
+    color: var(--ods-color-success-900);
   } @else if $color == 'warning' {
+    background-color: var(--ods-color-warning-100);
+    color: var(--ods-color-warning-900);
+  } @else if $color == 'critical' {
+    background-color: var(--ods-color-critical-100);
+    color: var(--ods-color-critical-900);
+  } @else if $color == 'alpha' {
     background-color: var(--ods-color-alpha);
+    color: var(--ods-color-primary-900);
+  } @else if $color == 'beta' {
+    background-color: var(--ods-color-beta);
+    color: var(--ods-color-primary-900);
+  } @else if $color == 'new' {
+    background-color: var(--ods-color-new);
+    color: var(--ods-color-primary-900);
+  } @else if $color == 'promotion' {
+    background-color: var(--ods-color-promotion);
+    color: var(--ods-color-neutral-000);
   }
 }
 

diff --git a/packages/storybook/stories/components/badge/migration.from.17.x.mdx b/packages/storybook/stories/components/badge/migration.from.17.x.mdx
@@ -42,6 +42,14 @@ Has been removed.
 
 You can use the style customization to achieve the same result, until a new color get validated by the design team.
 
+`color` <img src="https://img.shields.io/badge/updated-00FFFF" />
+
+Has been updated.
+
+`default` is now `neutral`, `info` is now `information`, `error` is now `critical`.
+
+New variants `alpha`, `beta`, `new` and `promotion` were added.
+
 `disabled` <img src="https://img.shields.io/badge/removed-FF0000" />
 
 Has been removed.
@@ -98,6 +106,17 @@ Basic badge:
 </ods-badge>
 ```
 
+Color badge:
+```html
+<osds-chip color="info">
+</osds-chip>
+
+<!-- is now -->
+
+<ods-badge color="information">
+</ods-badge>
+```
+
 Inline badge:
 ```html
 <osds-chip inline>

diff --git a/packages/themes/src/default/index.scss b/packages/themes/src/default/index.scss
@@ -51,6 +51,7 @@
   --ods-color-primary-700: #{var.$ods-primary-700};
   --ods-color-primary-800: #{var.$ods-primary-800};
   --ods-color-primary-900: #{var.$ods-primary-900};
+  --ods-color-promotion: #{var.$ods-single-color-promotion};
   --ods-color-success-000: #{var.$ods-color-green-000};
   --ods-color-success-050: #{var.$ods-color-green-050};
   --ods-color-success-100: #{var.$ods-color-green-100};