diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 66289821..e49e48d4 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -16,6 +16,14 @@ * under the License. */ +// TODO: Remove the following comment after implementing the autoprefixer in the build process. +// https://github.com/wso2/oxygen-ui/issues/241 +/* stylelint-disable property-no-vendor-prefix */ + +:root { + --oxygen-customComponents-Chip-properties-background-clip: text; +} + .oxygen-chip { border-radius: var(--oxygen-customComponents-Chip-properties-border-radius); @@ -46,6 +54,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; background-image: var(--oxygen-customComponents-Chip-properties-premium-text-color); color: var(--oxygen-customComponents-Chip-properties-text-fill-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -70,6 +79,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-new-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -94,6 +104,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-beta-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -118,6 +129,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-experimental-text-color); text-transform: var(--oxygen-customComponents-Chip-properties-text-transform); @@ -142,6 +154,7 @@ .MuiChip-label { background-clip: var(--oxygen-customComponents-Chip-properties-background-clip); + -webkit-background-clip: text; color: var(--oxygen-customComponents-Chip-properties-text-fill-color); background-image: var(--oxygen-customComponents-Chip-properties-coming-soon-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 index d865b9ae..b1dcc954 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -119,7 +119,6 @@ interface CustomTheme { }; Chip?: { properties?: { - 'background-clip'?: string; 'beta-background'?: string; 'beta-border-color'?: string; 'beta-text-color'?: string; diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 73cb59d5..9a293e26 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -176,7 +176,6 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< Chip: { // TODO: Move these to color palette. properties: { - 'background-clip': 'text', '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%)',