diff --git a/packages/react/src/components/Chip/chip.scss b/packages/react/src/components/Chip/chip.scss index fa6a44e6..08872cdb 100644 --- a/packages/react/src/components/Chip/chip.scss +++ b/packages/react/src/components/Chip/chip.scss @@ -1,5 +1,5 @@ /** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com). * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except @@ -23,6 +23,15 @@ font-weight: var(--oxygen-customComponents-Chip-properties-font-weight); line-height: var(--oxygen-customComponents-Chip-properties-line-height); + .MuiChip-icon { + fill: var(--oxygen-palette-text-primary); + + path { + stroke: var(--oxygen-palette-text-primary); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } + } + &-premium { background: var(--oxygen-customComponents-Chip-properties-premium-background); border: var(--oxygen-customComponents-Chip-properties-border); @@ -32,6 +41,11 @@ .MuiChip-icon { fill: var(--oxygen-customComponents-Chip-properties-premium-border-color); + + path { + stroke: var(--oxygen-customComponents-Chip-properties-premium-border-color); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } } .MuiChip-label { @@ -51,6 +65,11 @@ .MuiChip-icon { fill: var(--oxygen-customComponents-Chip-properties-new-border-color); + + path { + stroke: var(--oxygen-customComponents-Chip-properties-new-border-color); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } } .MuiChip-label { @@ -70,6 +89,11 @@ .MuiChip-icon { fill: var(--oxygen-customComponents-Chip-properties-beta-border-color); + + path { + stroke: var(--oxygen-customComponents-Chip-properties-beta-border-color); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } } .MuiChip-label { @@ -89,6 +113,11 @@ .MuiChip-icon { fill: var(--oxygen-customComponents-Chip-properties-experimental-border-color); + + path { + stroke: var(--oxygen-customComponents-Chip-properties-experimental-border-color); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } } .MuiChip-label { @@ -108,6 +137,11 @@ .MuiChip-icon { fill: var(--oxygen-customComponents-Chip-properties-coming-soon-border-color); + + path { + stroke: var(--oxygen-customComponents-Chip-properties-coming-soon-border-color); + stroke-width: var(--oxygen-customComponents-Chip-properties-icon-stroke-width); + } } .MuiChip-label { diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts index 2f165438..d865b9ae 100644 --- a/packages/react/src/models/theme.ts +++ b/packages/react/src/models/theme.ts @@ -1,5 +1,5 @@ /** - * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except @@ -135,6 +135,7 @@ interface CustomTheme { 'experimental-border-color'?: string; 'experimental-text-color'?: string; 'font-weight'?: string; + 'icon-stroke-width'?: 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 77d5deb0..73cb59d5 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. * * WSO2 LLC. licenses this file to you under the Apache License, * Version 2.0 (the "License"); you may not use this file except @@ -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': '600', + 'icon-stroke-width': '0.4', 'line-height': '20px', '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',