chore(sb): primary button variants

src/app/shared/components/v3/button/Button.stories.ts

@@ -62,6 +62,27 @@ export const PrimaryWide: Story = {
   },
 };
 
+export const PrimaryBlack: Story = {
+  args: {
+    ...Primary.args,
+    variant: ButtonTypeV3.PrimaryBlack,
+  },
+};
+
+export const PrimaryWarning: Story = {
+  args: {
+    ...Primary.args,
+    variant: ButtonTypeV3.PrimaryWarning,
+  },
+};
+
+export const PrimarySuccess: Story = {
+  args: {
+    ...Primary.args,
+    variant: ButtonTypeV3.PrimarySuccess,
+  },
+};
+
 export const Secondary: Story = {
   args: {
     label: 'Secondary button',

src/app/shared/components/v3/button/button.component.scss

@@ -16,6 +16,12 @@ button {
     outline: 2px solid $blue-focus;
   }
 
+  // WIDTH
+  width: 150px;
+  &.wide {
+    width: 250px;
+  }
+
   // SIZES
   &.small {
     height: 32px;
@@ -33,22 +39,15 @@ button {
     padding-inline: 24px;
   }
 
-  // WIDTH
-  width: 150px;
-
-  &.wide {
-    width: 250px;
-  }
-
   // VARIANT
   &.primary {
     background-color: $red;
     color: $white;
     &:hover {
-      background-color: $red-hover;
+      background-color: $red-dark;
     }
     &:disabled {
-      background-color: $grey-9;
+      background-color: $grey-8;
       color: $grey-3;
     }
     &:active {
@@ -56,6 +55,51 @@ button {
     }
   }
 
+  &.primaryBlack {
+    background-color: $grey-1;
+    color: $white;
+    &:hover {
+      background-color: $grey-2;
+    }
+    &:disabled {
+      background-color: $grey-8;
+      color: $grey-3;
+    }
+    &:active {
+      background-color: $grey-3;
+    }
+  }
+
+  &.primaryWarning {
+    background-color: $info-warning;
+    color: $white;
+    &:hover {
+      background-color: $warning-hover;
+    }
+    &:disabled {
+      background-color: $grey-8;
+      color: $grey-3;
+    }
+    &:active {
+      background-color: $warning-pressed;
+    }
+  }
+
+  &.primarySuccess {
+    background-color: $info-success;
+    color: $white;
+    &:hover {
+      background-color: $success-hover;
+    }
+    &:disabled {
+      background-color: $grey-8;
+      color: $grey-3;
+    }
+    &:active {
+      background-color: $success-pressed;
+    }
+  }
+
   &.secondary {
     background-color: $white;
     color: $grey-1;

src/app/shared/components/v3/button/button.type.ts

 /** values will be used for css selectors */
 export enum ButtonTypeV3 {
   Primary = 'primary',
+  PrimaryBlack = 'primaryBlack',
+  PrimaryWarning = 'primaryWarning',
+  PrimarySuccess = 'primarySuccess',
   Secondary = 'secondary',
   Tertiary = 'tertiary',
 }

src/assets/scss/_color.scss

@@ -15,8 +15,10 @@ $grey-9: #f8f8f8;
 $grey-10: $white;
 /* REDS */
 $red-darker: #a50f0e;
+$red-dark: #ba1615;
 $red: #da3635;
 $red-light: #ffe5e4;
+$red-pressed: #ff4544;
 /* INFO */
 $info-success: #1d8844;
 $info-warning: #cf4b00;
@@ -25,6 +27,12 @@ $info-error: #da3635;
 /* BLUE */
 $blue-focus: #0078f3; // not referenced in figma doc, keep it ?
 
+// Additional colors for button effects
+$warning-hover: #b24000;
+$warning-pressed: #f1742e;
+$success-hover: #066629;
+$success-pressed: #46c374;
+
 /* 
 OLD COLORS
 AFTER V3 DELETE FOLLOWING COLORS 
@@ -34,10 +42,8 @@ $grey-3-15: #33333326;
 $grey-3-20: #33333333;
 
 $red-20: #da363533; // main red with 20% opacity
-$red-dark: #b85959;
 $red-hover: #c02423;
 $red-1: #f35453;
-$red-pressed: #ff4544;
 $red-error: #ff0000;
 
 /* GOLD */