Merge pull request 'OZG-5600-OZG-5715-darkmode' (#586) from OZG-5600-OZG-5715-darkmode into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/586


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

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

@@ -14,7 +14,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   imports: [CommonModule, ButtonComponent],
   template: `<ods-button
     [text]="text"
-    [type]="type"
+    [variant]="variant"
     [size]="size"
     [dataTestId]="dataTestId"
     [isLoading]="isLoading"
@@ -26,7 +26,7 @@ export class ButtonWithSpinnerComponent implements OnInit {
   @Input() text: string = '';
   @Input() dataTestId: string = '';
   @Input() stateResource: StateResource<Resource>;
-  @Input() type: ButtonVariants['type'] = 'primary';
+  @Input() variant: ButtonVariants['variant'] = 'primary';
   @Input() size: ButtonVariants['size'] = 'medium';
 
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();

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

@@ -6,7 +6,7 @@ import { Component } from '@angular/core';
   standalone: true,
   imports: [CommonModule],
   template: `<div
-    class="block overflow-hidden rounded-md border border-black/25 shadow empty:hidden"
+    class="border-grayborder block overflow-hidden rounded-md border shadow empty:hidden"
   >
     <ng-content></ng-content>
   </div>`,

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

@@ -8,9 +8,9 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
   selector: 'ods-attachment',
   standalone: true,
   imports: [CommonModule, SpinnerIconComponent, FileIconComponent],
-  styles: [':host {@apply flex border-b border-black/25 last:border-b-0}'],
+  styles: [':host {@apply flex}'],
   template: `<button
-    class="relative flex w-full items-start gap-3 border-b bg-background-100 px-3 py-2 hover:bg-ozggray-200"
+    class="border-b-grayborder relative flex w-full items-start gap-3 border-b bg-background-100 px-3 py-2 hover:bg-background-200"
   >
     <div class="flex-shrink">
       <ods-file-icon *ngIf="!isLoading" [fileType]="fileType" size="large" />
@@ -20,7 +20,7 @@ import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.compone
       <p class="text-start text-sm">
         {{ documentName }}
       </p>
-      <p class="text-xs text-ozggray-600">{{ description }}</p>
+      <p class="text-xs text-text/65">{{ description }}</p>
     </div>
     <ng-content select="[close]" *ngIf="!isLoading"></ng-content>
   </button>`,

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

@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   selector: 'ods-bescheid-container',
   standalone: true,
   imports: [CommonModule],
-  template: ` <article class="flex flex-col gap-4 rounded-lg bg-background-200 p-4">
+  template: ` <article class="bg-background-150 flex flex-col gap-4 rounded-lg p-4">
     <ng-content></ng-content>
   </article>`,
 })

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

@@ -5,10 +5,10 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
 
 export const buttonVariants = cva(
-  'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm min-w-32',
+  'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm min-w-32 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ozgblue-800',
   {
     variants: {
-      type: {
+      variant: {
         primary: 'hover:enabled:bg-primary-hover bg-primary text-white shadow-sm',
         outline:
           'border border-primary bg-background-50 text-primary hover:enabled:bg-background-100',
@@ -18,7 +18,7 @@ export const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      type: 'primary',
+      variant: 'primary',
       size: 'medium',
     },
   },
@@ -31,7 +31,7 @@ type ButtonVariants = VariantProps<typeof buttonVariants>;
   imports: [CommonModule, SpinnerIconComponent],
   template: `<button
     type="button"
-    [ngClass]="buttonVariants({ size, type })"
+    [ngClass]="buttonVariants({ size, variant })"
     [disabled]="isLoading"
     [attr.aria-disabled]="isLoading"
     [attr.aria-label]="text"
@@ -47,8 +47,8 @@ export class ButtonComponent {
   @Input() text: string = '';
   @Input() dataTestId: string = '';
   @Input() isLoading: boolean = false;
-  @Input() type: ButtonVariants['type'] = 'primary';
-  @Input() size: ButtonVariants['size'] = 'medium';
+  @Input() variant: ButtonVariants['variant'];
+  @Input() size: ButtonVariants['size'];
 
   @Output() public clickEmitter: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
 

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

@@ -23,7 +23,7 @@ export class RadioButtonCardComponent {
       case 'bescheid_abgelehnt':
         return 'peer-checked:border-abgelehnt peer-checked:bg-abgelehnt-100 border border-ozggray-700 bg-mainbg peer-checked:font-semibold peer-checked:shadow px-9 py-4';
       case 'bescheid_save':
-        return 'border-3 border-mainbg peer-checked:border-ozgblue-650 bg-mainbg px-6 py-2';
+        return 'border-3 border-mainbg peer-checked:border-ozgblue-650 bg-background-50 hover:bg-background-100 px-6 py-2';
       default:
         return '';
     }

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

@@ -17,8 +17,11 @@
   --color-primary-600-hover: 212, 80%, 42%, 0.9;
   --color-background-50: 0 0% 100%;
   --color-background-100: 0 0% 98%;
+  --color-background-150: 0 0% 95%;
   --color-background-200: 0 0% 90%;
 
+  --color-grayborder: 0 0% 75%;
+
   --color-bewilligt-100: 122 100% 92%;
   --color-bewilligt-700: 122 100% 29%;
 
@@ -27,6 +30,8 @@
 
   --color-pdf: 4 62% 63%;
   --color-doc: 219 63% 54%;
+
+  --color-modal-bg: 0 0% 100%;
 }
 
 .dark {
@@ -41,8 +46,11 @@
   --color-primary-600-hover: 43, 96%, 58%, 0.9;
   --color-background-50: 0 0% 0%;
   --color-background-100: 0 0% 8%;
+  --color-background-150: 0 0% 11%;
   --color-background-200: 0 0% 16%;
 
+  --color-grayborder: 0 0% 40%;
+
   --color-bewilligt-100: 122 100% 22%;
   --color-bewilligt-700: 122 100% 29%;
 
@@ -51,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

@@ -61,9 +61,13 @@ module.exports = {
         background: {
           50: 'hsl(var(--color-background-50) / <alpha-value>)',
           100: 'hsl(var(--color-background-100) / <alpha-value>)',
+          150: 'hsl(var(--color-background-150) / <alpha-value>)',
           200: 'hsl(var(--color-background-200) / <alpha-value>)',
           DEFAULT: 'hsl(var(--color-background-100) / <alpha-value>)',
         },
+        grayborder: {
+          DEFAULT: 'hsl(var(--color-grayborder) / <alpha-value>)',
+        },
         bewilligt: {
           100: 'hsl(var(--color-bewilligt-100) / <alpha-value>)',
           700: 'hsl(var(--color-bewilligt-700) / <alpha-value>)',
@@ -81,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-step-content/vorgang-detail-bescheiden-step-content.component.html

@@ -6,7 +6,7 @@
   [tabindex]="shouldShowStepContent() ? '0' : '-1'"
 >
   <alfa-vorgang-detail-bescheiden-step-title
-    [label]="title"
+    [label]="stepTitle"
     data-test-id="step-caption"
   ></alfa-vorgang-detail-bescheiden-step-title>
   <div *ngIf="shouldShowStepContent()">

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-step-content/vorgang-detail-bescheiden-step-content.component.ts

@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
   styles: [':host {@apply flex}'],
 })
 export class VorgangDetailBescheidenStepContentComponent {
-  @Input() title: string;
+  @Input() stepTitle: string;
   @Input() step: number;
   @Input() nextStep: number;
   @Input() activeStep: number = 1;

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-steps-content.component.html

 <alfa-vorgang-detail-bescheiden-step-content
-  title="Antrag bescheiden"
+  stepTitle="Antrag bescheiden"
   [step]="1"
   [nextStep]="2"
   [activeStep]="activeStep$ | async"
@@ -11,7 +11,7 @@
 </alfa-vorgang-detail-bescheiden-step-content>
 
 <alfa-vorgang-detail-bescheiden-step-content
-  title="Dokumente hinzufügen"
+  stepTitle="Dokumente hinzufügen"
   [step]="2"
   [nextStep]="3"
   [activeStep]="activeStep$ | async"
@@ -26,7 +26,7 @@
 </alfa-vorgang-detail-bescheiden-step-content>
 
 <alfa-vorgang-detail-bescheiden-step-content
-  title="Bescheid versenden"
+  stepTitle="Bescheid versenden"
   [step]="3"
   [nextStep]="3"
   [activeStep]="activeStep$ | async"

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"
+  variant="primary"
+  size="medium"
+  class="mt-8 flex"
   data-test-id="bescheid-weiter-button"
+  text="Weiter"
 >
-  Weiter
-</button>
+</ods-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,