feat(react): change colours of the sub Chips components

wso2 · Jul 15, 2024 · e676428 · e676428
1 parent 32f521b
commit e676428
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 22 deletions.
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
@@ -38,7 +38,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);
     }

diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts
@@ -136,13 +136,11 @@ interface CustomTheme {
         'experimental-text-color'?: string;
         'font-weight'?: 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,31 +177,29 @@ 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%)',
+        'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.40) 0%, rgba(72, 141, 180, 0.40) 100%)',
+        'beta-border-color': '#488DB4',
+        'beta-text-color': 'linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%)',
         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%)',
+        'coming-soon-background': 'linear-gradient(131deg, rgba(140, 140, 140, 0.40) 0%, rgba(64, 64, 64, 0.40) 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.40) 0%, rgba(140, 57, 153, 0.40) 100%)',
+        'experimental-border-color': '#8C3999',
+        'experimental-text-color': 'linear-gradient(93deg, #8C3999 0%, #2F1333 100%)',
+        'font-weight': '900',
         '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.40) 28.46%, rgba(52, 146, 86, 0.40) 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%)',
+        'premium-border-color': '#928934',
+        'premium-text-color': 'linear-gradient(93deg, #928934 28.46%, #2C2910 119.09%)',
         'text-fill-color': 'transparent',
         'text-transform': 'uppercase',
       },