Merge pull request #233 from Achintha444/main-new

chore(react): update the stroke of the icon of the styled chip
wso2 · Jul 17, 2024 · 42c6ed6 · 42c6ed6
2 parents 40de49d + 0b1c7de
commit 42c6ed6
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -23,6 +23,15 @@
   font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
   line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 
+  .MuiChip-icon {
+    fill: var(--oxygen-palette-text-primary);
+
+    path {
+      stroke: var(--oxygen-palette-text-primary);
+      stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+    }
+  }
+
   &-premium {
     background: var(--oxygen-customComponents-Chip-properties-premium-background);
     border: var(--oxygen-customComponents-Chip-properties-border);
@@ -32,6 +41,11 @@
 
     .MuiChip-icon {
       fill: var(--oxygen-customComponents-Chip-properties-premium-border-color);
+
+      path {
+        stroke: var(--oxygen-customComponents-Chip-properties-premium-border-color);
+        stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+      }
     }
 
     .MuiChip-label {
@@ -51,6 +65,11 @@
 
     .MuiChip-icon {
       fill: var(--oxygen-customComponents-Chip-properties-new-border-color);
+
+      path {
+        stroke: var(--oxygen-customComponents-Chip-properties-new-border-color);
+        stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+      }
     }
 
     .MuiChip-label {
@@ -70,6 +89,11 @@
 
     .MuiChip-icon {
       fill: var(--oxygen-customComponents-Chip-properties-beta-border-color);
+
+      path {
+        stroke: var(--oxygen-customComponents-Chip-properties-beta-border-color);
+        stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+      }
     }
 
     .MuiChip-label {
@@ -89,6 +113,11 @@
 
     .MuiChip-icon {
       fill: var(--oxygen-customComponents-Chip-properties-experimental-border-color);
+
+      path {
+        stroke: var(--oxygen-customComponents-Chip-properties-experimental-border-color);
+        stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+      }
     }
 
     .MuiChip-label {
@@ -108,6 +137,11 @@
 
     .MuiChip-icon {
       fill: var(--oxygen-customComponents-Chip-properties-coming-soon-border-color);
+
+      path {
+        stroke: var(--oxygen-customComponents-Chip-properties-coming-soon-border-color);
+        stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width);
+      }
     }
 
     .MuiChip-label {

diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -135,6 +135,7 @@ interface CustomTheme {
         'experimental-border-color'?: string;
         'experimental-text-color'?: string;
         'font-weight'?: string;
+        'icon-stroke-width'?: string;
         'line-height'?: string;
         'new-background'?: string;
         'new-border-color'?: string;

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -192,6 +192,7 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
         'experimental-border-color': '#8C3999',
         'experimental-text-color': 'linear-gradient(93deg, #8C3999 0%, #2F1333 100%)',
         'font-weight': '600',
+        'icon-stroke-width': '0.4',
         'line-height': '20px',
         'new-background': 'linear-gradient(131deg, rgba(117, 237, 161, 0.30) 28.46%, rgba(52, 146, 86, 0.30) 119.09%)',
         'new-border-color': '#349256',