From e6764286a74b7fac33f9cc33f7edbc9ee45dac1f Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Mon, 15 Jul 2024 15:36:34 +0530 Subject: [PATCH 1/3] feat(react): change colours of the sub `Chips` components --- packages/react/src/components/Chip/chip.scss | 1 - packages/react/src/models/theme.ts | 2 -- packages/react/src/theme/default-theme.ts | 36 +++++++++----------- 3 files changed, 17 insertions(+), 22 deletions(-) diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index 1387b221..be7dffcb 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -38,7 +38,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); } diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts index f550d4af..2f165438 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -136,13 +136,11 @@ interface CustomTheme { 'experimental-text-color'?: string; 'font-weight'?: 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..982f3755 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -177,31 +177,29 @@ 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%)', + 'beta-background': 'linear-gradient(131deg, rgba(143, 197, 246, 0.40) 0%, rgba(72, 141, 180, 0.40) 100%)', + 'beta-border-color': '#488DB4', + 'beta-text-color': 'linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%)', 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%)', + 'coming-soon-background': 'linear-gradient(131deg, rgba(140, 140, 140, 0.40) 0%, rgba(64, 64, 64, 0.40) 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.40) 0%, rgba(140, 57, 153, 0.40) 100%)', + 'experimental-border-color': '#8C3999', + 'experimental-text-color': 'linear-gradient(93deg, #8C3999 0%, #2F1333 100%)', + 'font-weight': '900', '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.40) 28.46%, rgba(52, 146, 86, 0.40) 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%)', + 'premium-border-color': '#928934', + 'premium-text-color': 'linear-gradient(93deg, #928934 28.46%, #2C2910 119.09%)', 'text-fill-color': 'transparent', 'text-transform': 'uppercase', }, From 5350ac55e4063807ca8bf475a2be078a65861c60 Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Mon, 15 Jul 2024 16:30:54 +0530 Subject: [PATCH 2/3] chore(react): change the design of the chip in the nav-bar item --- packages/react/src/components/NavbarItem/navbar-item.scss | 5 +---- packages/react/src/models/theme.ts | 1 + packages/react/src/theme/default-theme.ts | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) 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 2f165438..00361d29 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -135,6 +135,7 @@ interface CustomTheme { 'experimental-border-color'?: string; 'experimental-text-color'?: string; 'font-weight'?: string; + 'letter-spacing'?: string; 'line-height'?: string; 'new-background'?: string; 'new-border-color'?: string; diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 982f3755..5245e409 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -181,7 +181,7 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< 'beta-border-color': '#488DB4', 'beta-text-color': 'linear-gradient(93deg, #488DB4 0%, #1F3D4E 100%)', border: '1px solid', - 'border-radius': '8px', + '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-border-color': '#868686', 'coming-soon-text-color': 'linear-gradient(93deg, #868686 0%, #202020 100%)', @@ -192,6 +192,7 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< 'experimental-border-color': '#8C3999', 'experimental-text-color': 'linear-gradient(93deg, #8C3999 0%, #2F1333 100%)', 'font-weight': '900', + '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-border-color': '#349256', From 6738c9f9ceb71b7aaaa2271295f637c076fa28bb Mon Sep 17 00:00:00 2001 From: Achintha Isuru Date: Tue, 16 Jul 2024 10:29:37 +0530 Subject: [PATCH 3/3] 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: {