OZG-5600-OZG-5715 Fix darkmode colors

- Add class prop to ods-button and ods-button-with-spinner
- Replace html buttons in wizard to ods-buttons

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

@@ -15,6 +15,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   template: `<ods-button
     [text]="text"
     [type]="type"
+    [class]="class"
     [size]="size"
     [dataTestId]="dataTestId"
     [isLoading]="isLoading"
@@ -25,6 +26,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 export class ButtonWithSpinnerComponent implements OnInit {
   @Input() text: string = '';
   @Input() dataTestId: string = '';
+  @Input() class: string = '';
   @Input() stateResource: StateResource<Resource>;
   @Input() type: ButtonVariants['type'] = 'primary';
   @Input() size: ButtonVariants['size'] = 'medium';

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

 import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { VariantProps, cva } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
 
 import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
 
@@ -30,8 +31,9 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   standalone: true,
   imports: [CommonModule, SpinnerIconComponent],
   template: `<button
+    [class]="class"
     type="button"
-    [ngClass]="buttonVariants({ size, type })"
+    [ngClass]="twMerge(buttonVariants({ size, type }), class)"
     [disabled]="isLoading"
     [attr.aria-disabled]="isLoading"
     [attr.aria-label]="text"
@@ -46,6 +48,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
 export class ButtonComponent {
   @Input() text: string = '';
   @Input() dataTestId: string = '';
+  @Input() class: string = '';
   @Input() isLoading: boolean = false;
   @Input() type: ButtonVariants['type'] = 'primary';
   @Input() size: ButtonVariants['size'] = 'medium';
@@ -53,4 +56,5 @@ export class ButtonComponent {
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 
   buttonVariants = buttonVariants;
+  twMerge = twMerge;
 }

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

@@ -30,6 +30,8 @@
 
   --color-pdf: 4 62% 63%;
   --color-doc: 219 63% 54%;
+
+  --color-modal-bg: 0 0% 100%;
 }
 
 .dark {
@@ -57,6 +59,8 @@
 
   --color-pdf: 4 62% 63%;
   --color-doc: 219 63% 54%;
+
+  --color-modal-bg: 0 0% 26%;
 }
 
 .bescheid-dialog-backdrop {

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

@@ -85,6 +85,7 @@ module.exports = {
           DEFAULT: 'hsl(var(--color-doc) / <alpha-value>)',
         },
         mainbg: 'hsl(var(--color-mainbg) / <alpha-value>)',
+        modalBg: 'hsl(var(--color-modal-bg) / <alpha-value>)',
         primary: {
           600: 'hsl(var(--color-primary-600) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-primary-600) / <alpha-value>)',

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-abbrechen-dialog/vorgang-detail-bescheiden-abbrechen-dialog.component.html

-<div class="relative m-6 max-w-2xl rounded-lg bg-white p-6 shadow-xl">
+<div class="relative m-6 max-w-2xl rounded-lg bg-modalBg p-6 shadow-xl">
   <div class="flex flex-col gap-6">
     <div>
       <h4 class="text-lg font-medium text-primary">Bescheiderstellung abbrechen</h4>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-steps-content/vorgang-detail-bescheiden-ueberspringen-dialog/vorgang-detail-bescheiden-ueberspringen-dialog.component.html

 <div
-  class="relative m-6 max-w-2xl rounded-lg bg-white p-6 shadow-xl"
+  class="relative m-6 max-w-2xl rounded-lg bg-modalBg p-6 shadow-xl"
   data-test-id="bescheid-ueberspringen-dialog"
 >
   <button

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail-page/vorgang-detail-bescheiden/vorgang-detail-bescheiden-steps/vorgang-detail-bescheiden-weiter-button/vorgang-detail-bescheiden-weiter-button.component.html

-<button
+<ods-button
   *ngIf="showButton$ | async"
   (click)="clickEmitter.emit($event)"
-  type="button"
-  class="mt-8 rounded-md bg-primary-600 px-8 py-2 text-sm text-white shadow-sm hover:bg-ozgblue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800"
-  data-test-id="bescheid-weiter-button"
->
-  Weiter
-</button>
+  text="Weiter"
+  class="mt-8 min-w-0 px-8"
+  dataTestId="bescheid-weiter-button"
+/>

alfa-client/libs/vorgang-detail/src/lib/vorgang-detail.module.ts

@@ -55,6 +55,7 @@ import {
   BescheidStatusTextComponent,
   BescheidUploadIconComponent,
   ButtonCardComponent,
+  ButtonComponent,
   CloseIconComponent,
   RadioButtonCardComponent,
   SaveIconComponent,
@@ -143,6 +144,7 @@ const routes: Routes = [
     LoeschAnforderungSharedModule,
     BescheidModule,
     RadioButtonCardComponent,
+    ButtonComponent,
     ButtonCardComponent,
     CloseIconComponent,
     SaveIconComponent,