Merge pull request #231 from Achintha444/main-new

feat(react): change colours of the sub `Chips` components
wso2 · Jul 16, 2024 · 687438a · 687438a
2 parents dffa06c + 6738c9f
commit 687438a
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 34 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);
 
@@ -38,7 +37,6 @@
     .MuiChip-label {
       background-clip: var(--oxygen-customComponents-Chip-properties-background-clip);
       background-image: var(--oxygen-customComponents-Chip-properties-premium-text-color);
-      background-blend-mode: var(--oxygen-customComponents-Chip-properties-premium-text-background-blend-mode);
       color: var(--oxygen-customComponents-Chip-properties-text-fill-color);
       text-transform: var(--oxygen-customComponents-Chip-properties-text-transform);
     }
@@ -48,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);
 
@@ -68,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);
 
@@ -88,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);
 
@@ -108,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/components/NavbarItem/navbar-item.scss b/packages/react/src/components/NavbarItem/navbar-item.scss
@@ -58,10 +58,7 @@
   }
 
   .oxygen-chip {
-    text-transform: uppercase;
-    font-weight: 500;
-    font-size: 0.6rem;
-    height: 18px;
+    font-size: 10px;
 
     .oxygen-navbar-item-chip-label {
       padding-left: 10px;

diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts
@@ -135,14 +135,13 @@ interface CustomTheme {
         'experimental-border-color'?: string;
         'experimental-text-color'?: string;
         'font-weight'?: string;
+        'letter-spacing'?: string;
         'line-height'?: string;
-        'moz-text-fill-color'?: string;
         'new-background'?: string;
         'new-border-color'?: string;
         'new-text-color'?: string;
         'premium-background'?: string;
         'premium-border-color'?: string;
-        'premium-text-background-blend-mode'?: string;
         'premium-text-color'?: string;
         'text-fill-color'?: string;
         'text-transform'?: string;

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -177,33 +177,32 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
       // TODO: Move these to color palette.
       properties: {
         'background-clip': 'text',
-        'beta-background':
-          'linear-gradient(132deg, rgba(143, 197, 246, 0.04) 28.46%, rgba(72, 141, 180, 0.04) 119.09%)',
-        'beta-border-color': 'rgba(143, 197, 246, 0.9)',
-        'beta-text-color': 'linear-gradient(132deg, rgba(143, 197, 246) 28.46%, rgba(72, 141, 180) 119.09%)',
-        border: '1px solid',
-        'border-radius': '8px',
-        'coming-soon-background': 'linear-gradient(132deg, rgba(140, 140, 140, 0.04) 0%, rgba(64, 64, 64, 0.04) 100%)',
-        'coming-soon-border-color': 'rgba(140, 140, 140, 0.9)',
-        'coming-soon-text-color': 'linear-gradient(132deg, rgba(140, 140, 140) 0%, rgba(64, 64, 64) 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: '0',
+        'border-radius': '6px',
+        '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(132deg, rgba(233, 95, 255, 0.04) 28.46%, rgba(140, 57, 153, 0.04) 119.09%)',
-        'experimental-border-color': 'rgba(233, 95, 255, 0.9)',
-        'experimental-text-color': 'linear-gradient(132deg, rgba(233, 95, 255) 0%, rgba(140, 57, 153) 100%)',
-        'font-weight': '700',
+          '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': '600',
+        'letter-spacing': '0.4px',
         'line-height': '20px',
-        'moz-text-fill-color': 'transparent',
-        'new-background': 'linear-gradient(132deg, rgba(117, 237, 161, 0.04) 28.46%, rgba(52, 146, 86, 0.04) 119.09%)',
-        'new-border-color': 'rgba(117, 237, 161, 0.9)',
-        'new-text-color': 'linear-gradient(132deg, rgba(117, 237, 161) 28.46%, rgba(52, 146, 86) 119.09%)',
-        'premium-background': 'linear-gradient(93deg, #ddb7380a 50%, #cba8370a 88.67%, #bd9b2c0a 112.88%)',
-        'premium-border-color': '#ddb738e6',
-        'premium-text-background-blend-mode': 'darken',
-        'premium-text-color': 'linear-gradient(93deg, #DDB638 50%, #CBA837 88.67%, #BD9B2C 112.88%)',
+        '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.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: {