diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 1387b221..fa6a44e6 100644 --- 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 index 1332f76b..2850cc72 100644 --- 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 index f550d4af..00361d29 100644 --- 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 index 48611841..d66b10d7 100644 --- 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: {