diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index d2120445..2975b37b 100644 --- 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 index 15ddcf17..5c56f1c8 100644 --- 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 index 649ccef9..7ddfcdd5 100644 --- 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: {