diff --git a/package-lock.json b/package-lock.json index 174359de..b5ef9b2a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,7 +67,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" @@ -467,8 +466,9 @@ "version": "2.4.0", "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.4.0.tgz", "integrity": "sha512-RN9M76x7N11QRihKovEglEjjVCQEA9PRBVnDgk9xw8JHLrcUrp4FpAVSPSH91cNbcTft3u2vpLN4GMbiKY9PJw==", - "devOptional": true, - "license": "(Apache-2.0 AND BSD-3-Clause)" + "license": "(Apache-2.0 AND BSD-3-Clause)", + "optional": true, + "peer": true }, "node_modules/@cypress/request": { "version": "3.0.8", @@ -4962,8 +4962,9 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/buffer-builder/-/buffer-builder-0.2.0.tgz", "integrity": "sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==", - "devOptional": true, - "license": "MIT/X11" + "license": "MIT/X11", + "optional": true, + "peer": true }, "node_modules/buffer-crc32": { "version": "0.2.13", @@ -5386,8 +5387,9 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.5.2.tgz", "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==", - "devOptional": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/colors": { "version": "1.4.0", @@ -11927,8 +11929,9 @@ "version": "1.89.0", "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.89.0.tgz", "integrity": "sha512-EDrK1el9zdgJFpocCGlxatDWaP18tJBWoM1hxzo2KJBvjdmBichXI6O6KlQrigvQPO3uJ8DfmFmAAx7s7CG6uw==", - "devOptional": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@bufbuild/protobuf": "^2.0.0", "buffer-builder": "^0.2.0", @@ -11980,6 +11983,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -11996,6 +12000,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12012,6 +12017,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12028,6 +12034,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12044,6 +12051,7 @@ "os": [ "android" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12060,6 +12068,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12076,6 +12085,7 @@ "os": [ "darwin" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12092,6 +12102,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12108,6 +12119,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12124,6 +12136,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12140,6 +12153,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12156,6 +12170,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12172,6 +12187,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12188,6 +12204,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12204,6 +12221,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12220,6 +12238,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12236,6 +12255,7 @@ "os": [ "linux" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12252,6 +12272,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12268,6 +12289,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12284,6 +12306,7 @@ "os": [ "win32" ], + "peer": true, "engines": { "node": ">=14.0.0" } @@ -12292,15 +12315,17 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.2.tgz", "integrity": "sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ==", - "devOptional": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/sass-embedded/node_modules/supports-color": { "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "devOptional": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -13043,8 +13068,9 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/sync-child-process/-/sync-child-process-1.0.2.tgz", "integrity": "sha512-8lD+t2KrrScJ/7KXCSyfhT3/hRq78rC0wBFqNJXv3mZyn6hW2ypM05JmlSvtqRbeq6jqA94oHbxAr2vYsJ8vDA==", - "devOptional": true, "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "sync-message-port": "^1.0.0" }, @@ -13088,8 +13114,9 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/sync-message-port/-/sync-message-port-1.1.3.tgz", "integrity": "sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==", - "devOptional": true, "license": "MIT", + "optional": true, + "peer": true, "engines": { "node": ">=16.0.0" } @@ -13778,8 +13805,9 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz", "integrity": "sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==", - "devOptional": true, - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/vary": { "version": "1.1.2", diff --git a/package.json b/package.json index 89a8e887..5f7c42f7 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,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" diff --git a/src/components/Ui/Infobox/Infobox.module.css b/src/components/Ui/Infobox/Infobox.module.css new file mode 100644 index 00000000..ee3c043c --- /dev/null +++ b/src/components/Ui/Infobox/Infobox.module.css @@ -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); +} diff --git a/src/components/Ui/Infobox/Infobox.module.scss b/src/components/Ui/Infobox/Infobox.module.scss deleted file mode 100644 index c1427fa4..00000000 --- a/src/components/Ui/Infobox/Infobox.module.scss +++ /dev/null @@ -1,45 +0,0 @@ -.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 variations - &.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); - } -} \ No newline at end of file diff --git a/src/components/Ui/Infobox/Infobox.tsx b/src/components/Ui/Infobox/Infobox.tsx index 6c61fe19..842754c5 100644 --- a/src/components/Ui/Infobox/Infobox.tsx +++ b/src/components/Ui/Infobox/Infobox.tsx @@ -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;