feat(badge): update badges to match new figma version

ui-particles-angular/projects/ui-particles-angular/src/scss/component/gio-badge/README.stories.mdx

@@ -0,0 +1,36 @@
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title="Components / Badge / README" />
+
+# Badges
+
+Documentation and examples for badges, a small count and labeling component inspired by Bootstrap one.
+
+## Demo
+
+<Story id="components-badge--all"></Story>
+
+## Usage
+
+`gio-badge` is a simple SCSS class that can be used on any html element.
+
+Here are some examples with simple `span` elements:
+
+```html
+<span class="gio-badge">Default</span>
+
+<span class="gio-badge gio-badge-accent">Accent</span>
+
+<span class="gio-badge gio-badge-success">Success</span>
+
+<span class="gio-badge gio-badge-warning">Warning</span>
+
+<span class="gio-badge gio-badge-error">Error</span>
+
+<span class="gio-badge gio-badge-error"><mat-icon>lock</mat-icon></span>
+
+<span class="gio-badge gio-badge-error"><mat-icon class="gio-left">lock</mat-icon> Lock</span>
+
+<span class="gio-badge gio-badge-error">Lock<mat-icon class="gio-right">lock</mat-icon></span>
+```
+

ui-particles-angular/projects/ui-particles-angular/src/scss/component/gio-badge/gio-badge.scss

@@ -31,8 +31,9 @@
     min-width: 10px;
     padding: 4px 8px;
     font-size: mat.font-size(theme.$mat-typography, caption);
-    font-weight: bold;
+    font-weight: mat.font-weight(theme.$mat-typography, caption);
     border-radius: 10px;
+    border: 1px solid transparent;
     line-height: 1;
     text-align: center;
     white-space: nowrap;
@@ -62,17 +63,27 @@
     @extend .gio-badge;
     background-color: mat.get-color-from-palette(palettes.$mat-accent-palette, medium);
     color: mat.get-color-from-palette(palettes.$mat-accent-palette, medium-contrast);
+    border-color: mat.get-color-from-palette(palettes.$mat-accent-palette, dark);
   }
 
   .gio-badge-success {
     @extend .gio-badge;
     background-color: mat.get-color-from-palette(palettes.$mat-success-palette, medium);
     color: mat.get-color-from-palette(palettes.$mat-success-palette, medium-contrast);
+    border-color: mat.get-color-from-palette(palettes.$mat-success-palette, dark);
   }
 
   .gio-badge-error {
     @extend .gio-badge;
     background-color: mat.get-color-from-palette(palettes.$mat-error-palette, medium);
     color: mat.get-color-from-palette(palettes.$mat-error-palette, medium-contrast);
+    border-color: mat.get-color-from-palette(palettes.$mat-error-palette, dark);
+  }
+
+  .gio-badge-warning {
+    @extend .gio-badge;
+    background-color: mat.get-color-from-palette(palettes.$mat-warning-palette, medium);
+    color: mat.get-color-from-palette(palettes.$mat-warning-palette, medium-contrast);
+    border-color: mat.get-color-from-palette(palettes.$mat-warning-palette, dark);
   }
 }

ui-particles-angular/projects/ui-particles-angular/src/scss/component/gio-badge/gio-badge.stories.ts

@@ -19,7 +19,7 @@ import { Story } from '@storybook/angular/dist/ts3.9/client/preview/types-7-0';
 import { MatIconModule } from '@angular/material/icon';
 
 export default {
-  title: 'Components/Badge',
+  title: 'Components / Badge',
   decorators: [
     moduleMetadata({
       imports: [MatIconModule],
@@ -28,7 +28,7 @@ export default {
   render: () => ({}),
 } as Meta;
 
-export const Badge: Story = {
+export const All: Story = {
   render: () => ({
     template: `
       <span class="gio-badge">Default</span>
@@ -37,6 +37,8 @@ export const Badge: Story = {
 
       <span class="gio-badge gio-badge-success">Success</span>
       
+      <span class="gio-badge gio-badge-warning">Warning</span>
+      
       <span class="gio-badge gio-badge-error">Error</span>
 
       <span class="gio-badge gio-badge-error"><mat-icon>lock</mat-icon></span>