feat(react): update the design of the Chip component.

wso2 · Jul 8, 2024 · 4b76d98 · 4b76d98
1 parent 1196a33
commit 4b76d98
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 13 deletions.
diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss
@@ -17,23 +17,99 @@
  */
 
 .oxygen-chip {
+  border-radius: var(--oxygen-customComponents-Chip-properties-border-radius);
+  border: var(--oxygen-customComponents-Chip-properties-border);
+  text-transform: var(--oxygen-customComponents-Chip-properties-text-transform);
+  font-weight:  var(--oxygen-customComponents-Chip-properties-font-weight);
+  line-height: var(--oxygen-customComponents-Chip-properties-line-height);
+
   &-premium {
-    background: var(--oxygen-customComponents-Chip-properties-premium-background);
-    color: var(--oxygen-customComponents-Chip-properties-premium-text-color);
+    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);
+
+    .MuiChip-icon {
+      fill: var(--oxygen-customComponents-Chip-properties-premium-border-color);
+    }
+
+    .MuiChip-label {
+      -moz-background-clip: var(--oxygen-customComponents-Chip-properties--moz-background-clip);
+      -moz-text-fill-color: var(--oxygen-customComponents-Chip-properties--moz-text-fill-color);
+      -webkit-background-clip: var(--oxygen-customComponents-Chip-properties--webkit-background-clip);
+      -webkit-text-fill-color: var(--oxygen-customComponents-Chip-properties--webkit-text-fill-color);
+      background-image: var(--oxygen-customComponents-Chip-properties-premium-text-background);
+      background-blend-mode: var(--oxygen-customComponents-Chip-properties-premium-text-background-blend-mode);
+      color: var(--oxygen-customComponents-Chip-properties-premium-text-color);
+      text-transform: var(--oxygen-customComponents-Chip-properties-text-transform);
+    }
   }
 
   &-new {
     background: var(--oxygen-customComponents-Chip-properties-new-background);
-    color: var(--oxygen-customComponents-Chip-properties-new-text-color);
+    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);
+
+    .MuiChip-icon {
+      fill: var(--oxygen-customComponents-Chip-properties-new-border-color);
+    }
+
+    .MuiChip-label {
+      -moz-background-clip: var(--oxygen-customComponents-Chip-properties--moz-background-clip);
+      -moz-text-fill-color: var(--oxygen-customComponents-Chip-properties--moz-text-fill-color);
+      -webkit-background-clip: var(--oxygen-customComponents-Chip-properties--webkit-background-clip);
+      -webkit-text-fill-color: var(--oxygen-customComponents-Chip-properties--webkit-text-fill-color);
+      background-image: var(--oxygen-customComponents-Chip-properties-new-text-color);
+      text-transform: var(--oxygen-customComponents-Chip-properties-text-transform);
+    }
   }
 
   &-beta {
     background: var(--oxygen-customComponents-Chip-properties-beta-background);
-    color: var(--oxygen-customComponents-Chip-properties-beta-text-color);
+    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);
+
+    .MuiChip-icon {
+      fill: var(--oxygen-customComponents-Chip-properties-beta-border-color);
+    }
+
+    .MuiChip-label {
+      -moz-background-clip: var(--oxygen-customComponents-Chip-properties--moz-background-clip);
+      -moz-text-fill-color: var(--oxygen-customComponents-Chip-properties--moz-text-fill-color);
+      -webkit-background-clip: var(--oxygen-customComponents-Chip-properties--webkit-background-clip);
+      -webkit-text-fill-color: var(--oxygen-customComponents-Chip-properties--webkit-text-fill-color);
+      background-image: var(--oxygen-customComponents-Chip-properties-beta-text-color);
+      text-transform: var(--oxygen-customComponents-Chip-properties-text-transform);
+    }
   }
 
   &-experimental {
     background: var(--oxygen-customComponents-Chip-properties-experimental-background);
-    color: var(--oxygen-customComponents-Chip-properties-experimental-text-color);
+    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);
+
+    .MuiChip-icon {
+      fill: var(--oxygen-customComponents-Chip-properties-experimental-border-color);
+    }
+
+    .MuiChip-label {
+      -moz-background-clip: var(--oxygen-customComponents-Chip-properties--moz-background-clip);
+      -moz-text-fill-color: var(--oxygen-customComponents-Chip-properties--moz-text-fill-color);
+      -webkit-background-clip: var(--oxygen-customComponents-Chip-properties--webkit-background-clip);
+      -webkit-text-fill-color: var(--oxygen-customComponents-Chip-properties--webkit-text-fill-color);
+      background-image: var(--oxygen-customComponents-Chip-properties-experimental-text-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
@@ -119,16 +119,32 @@ interface CustomTheme {
     };
     Chip?: {
       properties?: {
+        '-moz-background-clip'?: string;
+        '-moz-text-fill-color'?: string;
+        '-webkit-background-clip'?: string;
+        '-webkit-text-fill-color'?: string;
         'beta-background'?: string;
+        'beta-border-color'?: string;
         'beta-text-color'?: string;
+        border?: string;
+        'border-radius'?: string;
         'default-background'?: string;
+        'default-border-color'?: string;
         'default-text-color'?: string;
         'experimental-background'?: string;
+        'experimental-border-color'?: string;
         'experimental-text-color'?: string;
+        'font-weight'?: string;
+        'line-height'?: string;
         'new-background'?: string;
+        'new-border-color'?: string;
         'new-text-color'?: string;
         'premium-background'?: string;
+        'premium-border-color'?: string;
+        'premium-text-background'?: string;
+        'premium-text-background-blend-mode'?: string;
         'premium-text-color'?: string;
+        'text-transform'?: string;
       };
     };
     Header?: {

diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts
@@ -176,16 +176,35 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial<
     Chip: {
       // TODO: Move these to color palette.
       properties: {
-        'beta-background': '#2ab1da',
-        'beta-text-color': 'var(--oxygen-palette-primary-contrastText)',
+        '-moz-background-clip': 'text',
+        '-moz-text-fill-color': 'transparent',
+        '-webkit-background-clip': 'text',
+        '-webkit-text-fill-color': 'transparent',
+        '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',
         'default-background': 'var(--oxygen-palette-primary-main)',
         'default-text-color': 'var(--oxygen-palette-primary-contrastText)',
-        'experimental-background': '#a73fe3',
-        'experimental-text-color': 'var(--oxygen-palette-primary-contrastText)',
-        'new-background': '#3fb81f',
-        'new-text-color': 'var(--oxygen-palette-primary-contrastText)',
-        'premium-background': '#d2a600',
-        'premium-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',
+        'line-height': '20px',
+        '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(88deg, rgba(236, 81, 97, 0.04) -3.25%, rgba(248, 118, 67, 0.04) 102.62%)',
+        'premium-border-color': 'rgba(255, 169, 106)',
+        'premium-text-background':
+          'radial-gradient(238.39% 44.19% at 96.59% 31.25%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%), radial-gradient(182.56% 55.34% at 5.68% 100%, rgba(246, 251, 34, 0.51) 0%, rgba(255, 158, 69, 0.00) 100%), radial-gradient(137.51% 118.3% at 32.95% 0%, rgba(255, 137, 137, 0.92) 21.25%, rgba(255, 169, 106, 0.57) 88.62%), radial-gradient(178.09% 220.16% at 94.89% -132.81%, #FF7A00 67.59%, rgba(255, 199, 0, 0.38) 100%)',
+        'premium-text-background-blend-mode': 'darken',
+        'premium-text-color': '#FFF500',
+        'text-transform': 'uppercase',
       },
     },
     Header: {