chore(react): changed the design of the chips based on the review

wso2 · Jul 16, 2024 · 6738c9f · 6738c9f
1 parent 5350ac5
commit 6738c9f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 13 deletions.
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
@@ -27,7 +27,6 @@
     background: var(--oxygen-customComponents-Chip-properties-premium-background);
     border: var(--oxygen-customComponents-Chip-properties-border);
     border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
-    border-color: var(--oxygen-customComponents-Chip-properties-premium-border-color);
     font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
     line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 
@@ -47,7 +46,6 @@
     background: var(--oxygen-customComponents-Chip-properties-new-background);
     border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
     border: var(--oxygen-customComponents-Chip-properties-border);
-    border-color: var(--oxygen-customComponents-Chip-properties-new-border-color);
     font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
     line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 
@@ -67,7 +65,6 @@
     background: var(--oxygen-customComponents-Chip-properties-beta-background);
     border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
     border: var(--oxygen-customComponents-Chip-properties-border);
-    border-color: var(--oxygen-customComponents-Chip-properties-beta-border-color);
     font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
     line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 
@@ -87,7 +84,6 @@
     background: var(--oxygen-customComponents-Chip-properties-experimental-background);
     border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
     border: var(--oxygen-customComponents-Chip-properties-border);
-    border-color: var(--oxygen-customComponents-Chip-properties-experimental-border-color);
     font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
     line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 
@@ -107,7 +103,6 @@
     background: var(--oxygen-customComponents-Chip-properties-coming-soon-background);
     border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
     border: var(--oxygen-customComponents-Chip-properties-border);
-    border-color: var(--oxygen-customComponents-Chip-properties-coming-soon-border-color);
     font-weight: var(--oxygen-customComponents-Chip-properties-font-weight);
     line-height: var(--oxygen-customComponents-Chip-properties-line-height);
 

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -177,32 +177,32 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
       // TODO: Move these to color palette.
       properties: {
         'background-clip': 'text',
-        'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.40) 0%, rgba(72, 141, 180, 0.40) 100%)',
+        'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.30) 0%, rgba(72, 141, 180, 0.30) 100%)',
         'beta-border-color': '#488DB4',
         'beta-text-color': 'linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%)',
-        border: '1px solid',
+        border: '0',
         'border-radius': '6px',
-        'coming-soon-background': 'linear-gradient(131deg, rgba(140, 140, 140, 0.40) 0%, rgba(64, 64, 64, 0.40) 100%)',
+        'coming-soon-background': 'linear-gradient(131deg, rgba(140, 140, 140, 0.30) 0%, rgba(64, 64, 64, 0.30) 100%)',
         'coming-soon-border-color': '#868686',
         'coming-soon-text-color': 'linear-gradient(93deg, #868686 0%, #202020 100%)',
         'default-background': 'var(--oxygen-palette-primary-main)',
         'default-text-color': 'var(--oxygen-palette-primary-contrastText)',
         'experimental-background':
-          'linear-gradient(131deg, rgba(233, 95, 255, 0.40) 0%, rgba(140, 57, 153, 0.40) 100%)',
+          'linear-gradient(131deg, rgba(233, 95, 255, 0.30) 0%, rgba(140, 57, 153, 0.30) 100%)',
         'experimental-border-color': '#8C3999',
         'experimental-text-color': 'linear-gradient(93deg, #8C3999 0%, #2F1333 100%)',
-        'font-weight': '900',
+        'font-weight': '600',
         'letter-spacing': '0.4px',
         'line-height': '20px',
-        'new-background': 'linear-gradient(131deg, rgba(117, 237, 161, 0.40) 28.46%, rgba(52, 146, 86, 0.40) 119.09%)',
+        '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',
         'new-text-color': 'linear-gradient(93deg, #349256 28.46%, #102C1A 119.09%)',
         'premium-background':
-          'linear-gradient(131deg, rgba(224, 184, 52, 0.40) 25.98%, rgba(181, 138, 0, 0.40) 112.91%)',
+          'linear-gradient(131deg, rgba(224, 184, 52, 0.30) 25.98%, rgba(181, 138, 0, 0.30) 112.91%)',
         'premium-border-color': '#928934',
         'premium-text-color': 'linear-gradient(93deg, #928934 28.46%, #2C2910 119.09%)',
         'text-fill-color': 'transparent',
-        'text-transform': 'uppercase',
+        'text-transform': 'capitalize',
       },
     },
     Header: {