OZG-6242-7645 button colors

alfa-client/libs/design-system/src/lib/button/button.component.ts

@@ -30,16 +30,16 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
 
 export const buttonVariants = cva(
   [
-    'flex items-center gap-4 rounded-md text-sm font-medium box-border',
+    'flex items-center gap-4 rounded-lg text-sm font-medium box-border',
     'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
   ],
   {
     variants: {
       variant: {
-        primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
+        primary: 'bg-primary text-white shadow-md hover:enabled:bg-primary-hover',
         outline:
-          'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100 focus-visible:border-background-200',
-        ghost: 'border-2 border-transparent hover:enabled:border-primary-hover text-primary focus-visible:border-background-200',
+          'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:border-background-200',
+        ghost: 'border-2 border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200',
       },
       size: {
         medium: 'h-9 py-2 px-4 min-w-32',
@@ -51,7 +51,7 @@ export const buttonVariants = cva(
       },
       destructive: {
         false: 'outline-focus',
-        true: 'outline-error',
+        true: 'outline-destructive',
       },
     },
     defaultVariants: {
@@ -63,17 +63,17 @@ export const buttonVariants = cva(
       {
         variant: 'primary',
         destructive: true,
-        class: '[&]:hover:enabled:bg-error/90 [&]:bg-error [&]:outline-error',
+        class: '[&]:hover:enabled:bg-destructive-primary-hover [&]:bg-destructive [&]:outline-destructive',
       },
       {
         variant: 'outline',
         destructive: true,
-        class: '[&]:border-error [&]:text-error',
+        class: '[&]:border-destructive [&]:text-destructive [&]:hover:enabled:bg-destructive-hover',
       },
       {
         variant: 'ghost',
         destructive: true,
-        class: '[&]:text-error hover:enabled:border-error',
+        class: '[&]:text-destructive [&]:hover:enabled:bg-destructive-hover',
       },
     ],
   },

alfa-client/libs/design-system/src/lib/button/button.stories.ts

@@ -139,6 +139,20 @@ export const GhostIcon: Story = {
   }),
 };
 
+export const GhostIconDestructive: Story = {
+  args: {
+    variant: 'ghost',
+    size: 'fit',
+    destructive: true,
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-button ${argsToTemplate(args)}>
+      <ods-save-icon icon size='medium' class="fill-destructive" />
+    </ods-button>`,
+  }),
+};
+
 export const GhostLoadingIcon: Story = {
   args: {
     variant: 'ghost',

alfa-client/libs/design-system/src/lib/link/link.component.ts

@@ -11,7 +11,7 @@ import { twMerge } from 'tailwind-merge';
     [href]="url"
     [class]="
       twMerge(
-        'block rounded border-2 border-transparent text-text hover:bg-neutral-100 focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
+        'hover:bg-ghost-hover block rounded border-2 border-transparent text-text focus:border-focus focus:outline-none dark:hover:bg-neutral-700',
         class
       )
     "

alfa-client/libs/design-system/src/lib/tailwind-preset/root.css

@@ -19,6 +19,12 @@
   --color-disabled: 206 14% 95%;
   --color-disabled-dark: 208 12% 65%;
 
+  --color-destructive: 360, 71%, 49%, 1;
+  --color-destructive-hover: 360, 71%, 49%, 0.07;
+  --color-destructive-primary-hover: 360, 71%, 49%, 0.9;
+
+  --color-ghost-hover: 212, 80%, 42%, 0.07;
+
   --color-background-secondary: 0 0% 98%;
   --color-mainbg: 0 0% 100%;
   --text: 0 0% 0%;
@@ -54,6 +60,12 @@
   --color-disabled: 206 14% 15%;
   --color-disabled-dark: 208 12% 33%;
 
+  --color-destructive: 360, 71%, 49%, 1;
+  --color-destructive-hover: 360, 71%, 49%, 0.07;
+  --color-destructive-primary-hover: 360, 71%, 49%, 0.9;
+
+  --color-ghost-hover: 43, 96%, 58%, 0.18;
+
   --color-background-secondary: 0 0% 16%;
   --color-mainbg: 0 0% 14%;
   --text: 0 0% 100%;

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -148,6 +148,10 @@ module.exports = {
           dark: 'hsl(var(--color-disabled-dark) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-disabled) / <alpha-value>)',
         },
+        destructive: 'hsla(var(--color-destructive))',
+        'destructive-primary-hover': 'hsla(var(--color-destructive-primary-hover))',
+        'destructive-hover': 'hsla(var(--color-destructive-hover))',
+        'ghost-hover': 'hsla(var(--color-ghost-hover))',
       },
       backdropBlur: {
         1: '1px',