From 6738c9f9ceb71b7aaaa2271295f637c076fa28bb Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Tue, 16 Jul 2024 10:29:37 +0530 Subject: [PATCH] chore(react): changed the design of the chips based on the review --- packages/react/src/components/Chip/chip.scss | 5 ----- packages/react/src/theme/default-theme.ts | 16 ++++++++-------- 2 files changed, 8 insertions(+), 13 deletions(-) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index be7dffcb..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); @@ -47,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); @@ -67,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); @@ -87,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); @@ -107,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/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 5245e409..d66b10d7 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -177,32 +177,32 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< // TODO: Move these to color palette. properties: { 'background-clip': 'text', - 'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.40) 0%, rgba(72, 141, 180, 0.40) 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: '1px solid', + border: '0', 'border-radius': '6px', - 'coming-soon-background': 'linear-gradient(131deg, rgba(140, 140, 140, 0.40) 0%, rgba(64, 64, 64, 0.40) 100%)', + '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(131deg, rgba(233, 95, 255, 0.40) 0%, rgba(140, 57, 153, 0.40) 100%)', + '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': '900', + 'font-weight': '600', 'letter-spacing': '0.4px', 'line-height': '20px', - 'new-background': 'linear-gradient(131deg, rgba(117, 237, 161, 0.40) 28.46%, rgba(52, 146, 86, 0.40) 119.09%)', + '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.40) 25.98%, rgba(181, 138, 0, 0.40) 112.91%)', + '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: {