Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

refactor: variant colors (#9586)

Browse Source 
Toned-down colors for dark theme
This commit is contained in:
Tymoteusz Czech 2025-03-20 14:44:33 +01:00 committed by GitHub
parent 8c7d62e305
commit 70444c2003
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx
View File

@ -6,22 +6,14 @@ import type { StrategyVariantSchema } from 'openapi';
import type { FC } from 'react';
const StyledVariantChip = styled(StrategyEvaluationChip)<{ order: number }>(
({ theme, order }) => {
const variantColor =
theme.palette.variants[order % theme.palette.variants.length];
return {
borderRadius: theme.shape.borderRadiusExtraLarge,
border: 'none',
color: theme.palette.text.primary,
background:
// TODO: adjust theme.palette.variants
theme.mode === 'dark'
? `hsl(from ${variantColor} h calc(s - 30) calc(l - 45))`
: `hsl(from ${variantColor} h s calc(l + 5))`,
fontWeight: theme.typography.fontWeightRegular,
};
},
({ theme, order }) => ({
borderRadius: theme.shape.borderRadiusExtraLarge,
border: 'none',
color: theme.palette.text.primary,
background:
theme.palette.variants[order % theme.palette.variants.length],
fontWeight: theme.typography.fontWeightRegular,
}),
);
const StyledPayloadHeader = styled('div')(({ theme }) => ({

37
frontend/src/themes/colors.ts
View File

@ -95,18 +95,31 @@ export const colors = {
600: '#1f3751',
500: '#0e2840',
},
variants: [
'#BEBBF3',
'#FFC46F',
'#B0D182',
'#96D2FA',
'#F7E3AE',
'#7FBAA9',
'#D3B9DB',
'#FBC5A0',
'#DDE7B5',
'#9EC4E3',
'#F8B6CC',
lightVariants: [
'#d2d1f5',
'#f8d18f',
'#c1d699',
'#b7dbf9',
'#f7ecc8',
'#9ac1b5',
'#dacbe2',
'#f6d6bb',
'#e7edcb',
'#b7cfe7',
'#f3d0dc',
] as string[],
darkVariants: [
'#3f3d89',
'#6f4f1d',
'#3a3f2f',
'#325e87',
'#68620e',
'#8e3a53',
'#585659',
'#8a552a',
'#686e4b',
'#3e4f60',
'#343444',
] as string[],
chartSeries: [
'#816DD3',

2
frontend/src/themes/dark-theme.ts
View File

@ -222,7 +222,7 @@ const theme = {
// A400: '#A6000E',
// A700: '#A6000E',
},
variants: colors.variants,
variants: colors.darkVariants,
/**
* Dashboard and charts

2
frontend/src/themes/theme.ts
View File

@ -281,7 +281,7 @@ const theme = {
// A400: '#A6000E',
// A700: '#A6000E',
},
variants: colors.variants,
variants: colors.lightVariants,
/**
* Dashboard and charts