refactor: Convert SCSS to module.css (#140)

Author: andreaskienle

package-lock.json

@@ -78,7 +78,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.0.0",
     "prettier": "^3.5.3",
-    "sass-embedded": "^1.86.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.3.4",

package.json

@@ -0,0 +1,44 @@
+.infobox {
+  display: inline-block;
+  border: 1px solid;
+  margin: 1rem 0;
+}
+
+.size-sm {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.size-md {
+  padding: 1rem 1.5rem;
+  font-size: 1rem;
+}
+
+.size-lg {
+  padding: 1.5rem 2rem;
+  font-size: 1.25rem;
+}
+
+.variant-normal {
+  border-color: var(--sapNeutralTextColor);
+  background-color: var(--sapNeutralBackground);
+  color: var(--sapNeutralTextColor);
+}
+
+.variant-success {
+  border-color: var(--sapPositiveTextColor);
+  background-color: var(--sapPositiveBackground);
+  color: var(--sapPositiveTextColor);
+}
+
+.variant-warning {
+  border-color: var(--sapCriticalTextColor);
+  background-color: var(--sapCriticalBackground);
+  color: var(--sapCriticalTextColor);
+}
+
+.variant-danger {
+  border-color: var(--sapNegativeTextColor);
+  background-color: var(--sapErrorBackground);
+  color: var(--sapNegativeTextColor);
+}

src/components/Ui/Infobox/Infobox.module.css

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import cx from 'clsx';
 
-import styles from './Infobox.module.scss';
+import styles from './Infobox.module.css';
 
 interface LabelProps {
   id?: string;