Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +02: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'; import type { FC } from 'react';
const StyledVariantChip = styled(StrategyEvaluationChip)<{ order: number }>( const StyledVariantChip = styled(StrategyEvaluationChip)<{ order: number }>(
({ theme, order }) => { ({ theme, order }) => ({
const variantColor = borderRadius: theme.shape.borderRadiusExtraLarge,
theme.palette.variants[order % theme.palette.variants.length]; border: 'none',
color: theme.palette.text.primary,
return { background:
borderRadius: theme.shape.borderRadiusExtraLarge, theme.palette.variants[order % theme.palette.variants.length],
border: 'none', fontWeight: theme.typography.fontWeightRegular,
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,
};
},
); );
const StyledPayloadHeader = styled('div')(({ theme }) => ({ const StyledPayloadHeader = styled('div')(({ theme }) => ({

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

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

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

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

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

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