From 835915c965dc906f9da95de47ee02b478f4c2005 Mon Sep 17 00:00:00 2001
From: verena-ifx <lechneve@ISCN5CG1201S7M.infineon.com>
Date: Tue, 12 Sep 2023 10:42:36 +0200
Subject: [PATCH] design review changes

---
 .../src/components/status/readme.md           | 10 ++++----
 .../src/components/status/status.scss         | 24 +++++++++----------
 .../src/components/status/status.stories.ts   |  2 +-
 .../src/components/status/status.tsx          |  2 +-
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/components/status/readme.md b/packages/components/src/components/status/readme.md
index eb5b9c0cdc..14cc52cefb 100644
--- a/packages/components/src/components/status/readme.md
+++ b/packages/components/src/components/status/readme.md
@@ -7,11 +7,11 @@
 
 ## Properties
 
-| Property | Attribute | Description | Type                                                                         | Default     |
-| -------- | --------- | ----------- | ---------------------------------------------------------------------------- | ----------- |
-| `border` | `border`  |             | `boolean`                                                                    | `false`     |
-| `color`  | `color`   |             | `"berry" \| "green" \| "grey" \| "grey-200" \| "ocean" \| "orange" \| "red"` | `'orange'`  |
-| `label`  | `label`   |             | `string`                                                                     | `undefined` |
+| Property | Attribute | Description | Type                                                                           | Default     |
+| -------- | --------- | ----------- | ------------------------------------------------------------------------------ | ----------- |
+| `border` | `border`  |             | `boolean`                                                                      | `false`     |
+| `color`  | `color`   |             | `"berry" \| "green" \| "grey" \| "light-grey" \| "ocean" \| "orange" \| "red"` | `'orange'`  |
+| `label`  | `label`   |             | `string`                                                                       | `undefined` |
 
 
 ----------------------------------------------
diff --git a/packages/components/src/components/status/status.scss b/packages/components/src/components/status/status.scss
index cee3e9d49f..b2c6247f7d 100644
--- a/packages/components/src/components/status/status.scss
+++ b/packages/components/src/components/status/status.scss
@@ -9,13 +9,13 @@
   display: flex;
   min-height: 1.25em;
   align-items: center;
-  padding: tokens.$ifxSpace25 tokens.$ifxSpace200;
+  padding: 0 tokens.$ifxSpace100;
   border-radius: tokens.$ifxBorderRadiusRound;
 }
 
 .text {
   margin: 0;
-  padding-left: 5px;
+  padding-left: tokens.$ifxSpace50;
   font-style: normal;
   font-weight: tokens.$ifxFontWeightSemibold;
   font-size: tokens.$ifxFontSizeM;
@@ -33,31 +33,31 @@
 
 .container {
   &.border-orange {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorOrange500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOrange500;
   }
 
   &.border-ocean {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorOcean500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorOcean500;
   }
 
   &.border-grey {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorEngineering500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering500;
   }
 
-  &.border-grey-200 {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorEngineering200;
+  &.border-light-grey {
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering300;
   }
 
   &.border-red {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorRed500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorRed500;
   }
 
   &.border-green {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorGreen500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorGreen500;
   }
 
   &.border-berry {
-    border: tokens.$ifxBorderWidth25 solid tokens.$ifxColorBerry500;
+    border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorBerry500;
   }
 }
 
@@ -74,8 +74,8 @@
     background-color: tokens.$ifxColorEngineering500;
   }
 
-  &.grey-200 {
-    background-color: tokens.$ifxColorEngineering200;
+  &.light-grey {
+    background-color: tokens.$ifxColorEngineering300;
   }
 
   &.red {
diff --git a/packages/components/src/components/status/status.stories.ts b/packages/components/src/components/status/status.stories.ts
index 1ad5c4bf87..5b44452b60 100644
--- a/packages/components/src/components/status/status.stories.ts
+++ b/packages/components/src/components/status/status.stories.ts
@@ -14,7 +14,7 @@ export default {
       attr: 'border',
     },
     color: {
-      options: ['orange', 'ocean', 'grey', 'grey-200', 'red', 'green', 'berry'],
+      options: ['orange', 'ocean', 'grey', 'light-grey', 'red', 'green', 'berry'],
       control: { type: 'radio' },
     },
   },
diff --git a/packages/components/src/components/status/status.tsx b/packages/components/src/components/status/status.tsx
index a1d5d0e9c2..362b0731ed 100644
--- a/packages/components/src/components/status/status.tsx
+++ b/packages/components/src/components/status/status.tsx
@@ -10,7 +10,7 @@ export class Status {
 
   @Prop() label: string;
   @Prop() border: boolean = false;
-  @Prop() color: 'orange' | 'ocean' | 'grey' | 'grey-200' | 'red' | 'green' | 'berry' = 'orange';
+  @Prop() color: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry' = 'orange';
 
   render() {
     const borderClass = this.border ? `border-${this.color}` : '';