Complete color refactoring (#15414)
# Complete color refactoring Closes https://github.com/twentyhq/core-team-issues/issues/1779 - Updated all colors to use Radix colors with P3 color space allowing for brighter colors - Created our own gray scale interpolated on Radix's scale to have the same values for grays as the old ones in the app - Introduced dark and light colors as well as there transparent versions - Added many new colors from radix that can be used in the tags or in the graphs - Updated multiple color utilities to match new behaviors - Changed the computation of Avatar colors to return only colors from the theme (before it was random hsl) These changes allow the user to use new colors in tags or charts, the colors are brighter and with better contrast. We have a full range of color variations from 1 to 12 where before we only had 4 adaptative colors. All these changes will allow us to develop custom themes for the user soon, where users can choose their accent colors, background colors and there contrast.
This commit is contained in:
Raphaël Bosi
+500
-33
@@ -8,84 +8,551 @@ export const createGraphColorRegistry = (
|
||||
blue: {
|
||||
name: 'blue',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.blue1, theme.adaptiveColors.blue2],
|
||||
hover: [theme.adaptiveColors.blue3, theme.adaptiveColors.blue4],
|
||||
normal: [theme.color.blue3, theme.color.blue5],
|
||||
hover: [theme.color.blue7, theme.color.blue8],
|
||||
},
|
||||
solid: theme.adaptiveColors.blue4,
|
||||
solid: theme.color.blue8,
|
||||
variations: [
|
||||
theme.color.blue1,
|
||||
theme.color.blue2,
|
||||
theme.color.blue3,
|
||||
theme.color.blue4,
|
||||
theme.color.blue5,
|
||||
theme.color.blue6,
|
||||
theme.color.blue7,
|
||||
theme.color.blue8,
|
||||
theme.color.blue9,
|
||||
theme.color.blue10,
|
||||
theme.color.blue11,
|
||||
theme.color.blue12,
|
||||
],
|
||||
},
|
||||
purple: {
|
||||
name: 'purple',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.purple1, theme.adaptiveColors.purple2],
|
||||
hover: [theme.adaptiveColors.purple3, theme.adaptiveColors.purple4],
|
||||
normal: [theme.color.purple3, theme.color.purple5],
|
||||
hover: [theme.color.purple7, theme.color.purple8],
|
||||
},
|
||||
solid: theme.adaptiveColors.purple4,
|
||||
solid: theme.color.purple8,
|
||||
variations: [
|
||||
theme.color.purple1,
|
||||
theme.color.purple2,
|
||||
theme.color.purple3,
|
||||
theme.color.purple4,
|
||||
theme.color.purple5,
|
||||
theme.color.purple6,
|
||||
theme.color.purple7,
|
||||
theme.color.purple8,
|
||||
theme.color.purple9,
|
||||
theme.color.purple10,
|
||||
theme.color.purple11,
|
||||
theme.color.purple12,
|
||||
],
|
||||
},
|
||||
turquoise: {
|
||||
name: 'turquoise',
|
||||
gradient: {
|
||||
normal: [
|
||||
theme.adaptiveColors.turquoise1,
|
||||
theme.adaptiveColors.turquoise2,
|
||||
],
|
||||
hover: [theme.adaptiveColors.turquoise3, theme.adaptiveColors.turquoise4],
|
||||
normal: [theme.color.turquoise3, theme.color.turquoise5],
|
||||
hover: [theme.color.turquoise7, theme.color.turquoise8],
|
||||
},
|
||||
solid: theme.adaptiveColors.turquoise4,
|
||||
solid: theme.color.turquoise8,
|
||||
variations: [
|
||||
theme.color.turquoise1,
|
||||
theme.color.turquoise2,
|
||||
theme.color.turquoise3,
|
||||
theme.color.turquoise4,
|
||||
theme.color.turquoise5,
|
||||
theme.color.turquoise6,
|
||||
theme.color.turquoise7,
|
||||
theme.color.turquoise8,
|
||||
theme.color.turquoise9,
|
||||
theme.color.turquoise10,
|
||||
theme.color.turquoise11,
|
||||
theme.color.turquoise12,
|
||||
],
|
||||
},
|
||||
orange: {
|
||||
name: 'orange',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.orange1, theme.adaptiveColors.orange2],
|
||||
hover: [theme.adaptiveColors.orange3, theme.adaptiveColors.orange4],
|
||||
normal: [theme.color.orange3, theme.color.orange5],
|
||||
hover: [theme.color.orange7, theme.color.orange8],
|
||||
},
|
||||
solid: theme.adaptiveColors.orange4,
|
||||
solid: theme.color.orange8,
|
||||
variations: [
|
||||
theme.color.orange1,
|
||||
theme.color.orange2,
|
||||
theme.color.orange3,
|
||||
theme.color.orange4,
|
||||
theme.color.orange5,
|
||||
theme.color.orange6,
|
||||
theme.color.orange7,
|
||||
theme.color.orange8,
|
||||
theme.color.orange9,
|
||||
theme.color.orange10,
|
||||
theme.color.orange11,
|
||||
theme.color.orange12,
|
||||
],
|
||||
},
|
||||
pink: {
|
||||
name: 'pink',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.pink1, theme.adaptiveColors.pink2],
|
||||
hover: [theme.adaptiveColors.pink3, theme.adaptiveColors.pink4],
|
||||
normal: [theme.color.pink3, theme.color.pink5],
|
||||
hover: [theme.color.pink7, theme.color.pink8],
|
||||
},
|
||||
solid: theme.adaptiveColors.pink4,
|
||||
solid: theme.color.pink8,
|
||||
variations: [
|
||||
theme.color.pink1,
|
||||
theme.color.pink2,
|
||||
theme.color.pink3,
|
||||
theme.color.pink4,
|
||||
theme.color.pink5,
|
||||
theme.color.pink6,
|
||||
theme.color.pink7,
|
||||
theme.color.pink8,
|
||||
theme.color.pink9,
|
||||
theme.color.pink10,
|
||||
theme.color.pink11,
|
||||
theme.color.pink12,
|
||||
],
|
||||
},
|
||||
yellow: {
|
||||
name: 'yellow',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.yellow1, theme.adaptiveColors.yellow2],
|
||||
hover: [theme.adaptiveColors.yellow3, theme.adaptiveColors.yellow4],
|
||||
normal: [theme.color.yellow3, theme.color.yellow5],
|
||||
hover: [theme.color.yellow7, theme.color.yellow8],
|
||||
},
|
||||
solid: theme.adaptiveColors.yellow4,
|
||||
solid: theme.color.yellow8,
|
||||
variations: [
|
||||
theme.color.yellow1,
|
||||
theme.color.yellow2,
|
||||
theme.color.yellow3,
|
||||
theme.color.yellow4,
|
||||
theme.color.yellow5,
|
||||
theme.color.yellow6,
|
||||
theme.color.yellow7,
|
||||
theme.color.yellow8,
|
||||
theme.color.yellow9,
|
||||
theme.color.yellow10,
|
||||
theme.color.yellow11,
|
||||
theme.color.yellow12,
|
||||
],
|
||||
},
|
||||
red: {
|
||||
name: 'red',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.red1, theme.adaptiveColors.red2],
|
||||
hover: [theme.adaptiveColors.red3, theme.adaptiveColors.red4],
|
||||
normal: [theme.color.red3, theme.color.red5],
|
||||
hover: [theme.color.red7, theme.color.red8],
|
||||
},
|
||||
solid: theme.adaptiveColors.red4,
|
||||
solid: theme.color.red8,
|
||||
variations: [
|
||||
theme.color.red1,
|
||||
theme.color.red2,
|
||||
theme.color.red3,
|
||||
theme.color.red4,
|
||||
theme.color.red5,
|
||||
theme.color.red6,
|
||||
theme.color.red7,
|
||||
theme.color.red8,
|
||||
theme.color.red9,
|
||||
theme.color.red10,
|
||||
theme.color.red11,
|
||||
theme.color.red12,
|
||||
],
|
||||
},
|
||||
green: {
|
||||
name: 'green',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.green1, theme.adaptiveColors.green2],
|
||||
hover: [theme.adaptiveColors.green3, theme.adaptiveColors.green4],
|
||||
normal: [theme.color.green3, theme.color.green5],
|
||||
hover: [theme.color.green7, theme.color.green8],
|
||||
},
|
||||
solid: theme.adaptiveColors.green4,
|
||||
solid: theme.color.green8,
|
||||
variations: [
|
||||
theme.color.green1,
|
||||
theme.color.green2,
|
||||
theme.color.green3,
|
||||
theme.color.green4,
|
||||
theme.color.green5,
|
||||
theme.color.green6,
|
||||
theme.color.green7,
|
||||
theme.color.green8,
|
||||
theme.color.green9,
|
||||
theme.color.green10,
|
||||
theme.color.green11,
|
||||
theme.color.green12,
|
||||
],
|
||||
},
|
||||
sky: {
|
||||
name: 'sky',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.sky1, theme.adaptiveColors.sky2],
|
||||
hover: [theme.adaptiveColors.sky3, theme.adaptiveColors.sky4],
|
||||
normal: [theme.color.sky3, theme.color.sky5],
|
||||
hover: [theme.color.sky7, theme.color.sky8],
|
||||
},
|
||||
solid: theme.adaptiveColors.sky4,
|
||||
solid: theme.color.sky8,
|
||||
variations: [
|
||||
theme.color.sky1,
|
||||
theme.color.sky2,
|
||||
theme.color.sky3,
|
||||
theme.color.sky4,
|
||||
theme.color.sky5,
|
||||
theme.color.sky6,
|
||||
theme.color.sky7,
|
||||
theme.color.sky8,
|
||||
theme.color.sky9,
|
||||
theme.color.sky10,
|
||||
theme.color.sky11,
|
||||
theme.color.sky12,
|
||||
],
|
||||
},
|
||||
gray: {
|
||||
name: 'gray',
|
||||
gradient: {
|
||||
normal: [theme.adaptiveColors.gray1, theme.adaptiveColors.gray2],
|
||||
hover: [theme.adaptiveColors.gray3, theme.adaptiveColors.gray4],
|
||||
normal: [theme.color.gray3, theme.color.gray5],
|
||||
hover: [theme.color.gray7, theme.color.gray8],
|
||||
},
|
||||
solid: theme.adaptiveColors.gray4,
|
||||
solid: theme.color.gray8,
|
||||
variations: [
|
||||
theme.color.gray1,
|
||||
theme.color.gray2,
|
||||
theme.color.gray3,
|
||||
theme.color.gray4,
|
||||
theme.color.gray5,
|
||||
theme.color.gray6,
|
||||
theme.color.gray7,
|
||||
theme.color.gray8,
|
||||
theme.color.gray9,
|
||||
theme.color.gray10,
|
||||
theme.color.gray11,
|
||||
theme.color.gray12,
|
||||
],
|
||||
},
|
||||
tomato: {
|
||||
name: 'tomato',
|
||||
gradient: {
|
||||
normal: [theme.color.tomato3, theme.color.tomato5],
|
||||
hover: [theme.color.tomato7, theme.color.tomato8],
|
||||
},
|
||||
solid: theme.color.tomato8,
|
||||
variations: [
|
||||
theme.color.tomato1,
|
||||
theme.color.tomato2,
|
||||
theme.color.tomato3,
|
||||
theme.color.tomato4,
|
||||
theme.color.tomato5,
|
||||
theme.color.tomato6,
|
||||
theme.color.tomato7,
|
||||
theme.color.tomato8,
|
||||
theme.color.tomato9,
|
||||
theme.color.tomato10,
|
||||
theme.color.tomato11,
|
||||
theme.color.tomato12,
|
||||
],
|
||||
},
|
||||
ruby: {
|
||||
name: 'ruby',
|
||||
gradient: {
|
||||
normal: [theme.color.ruby3, theme.color.ruby5],
|
||||
hover: [theme.color.ruby7, theme.color.ruby8],
|
||||
},
|
||||
solid: theme.color.ruby8,
|
||||
variations: [
|
||||
theme.color.ruby1,
|
||||
theme.color.ruby2,
|
||||
theme.color.ruby3,
|
||||
theme.color.ruby4,
|
||||
theme.color.ruby5,
|
||||
theme.color.ruby6,
|
||||
theme.color.ruby7,
|
||||
theme.color.ruby8,
|
||||
theme.color.ruby9,
|
||||
theme.color.ruby10,
|
||||
theme.color.ruby11,
|
||||
theme.color.ruby12,
|
||||
],
|
||||
},
|
||||
crimson: {
|
||||
name: 'crimson',
|
||||
gradient: {
|
||||
normal: [theme.color.crimson3, theme.color.crimson5],
|
||||
hover: [theme.color.crimson7, theme.color.crimson8],
|
||||
},
|
||||
solid: theme.color.crimson8,
|
||||
variations: [
|
||||
theme.color.crimson1,
|
||||
theme.color.crimson2,
|
||||
theme.color.crimson3,
|
||||
theme.color.crimson4,
|
||||
theme.color.crimson5,
|
||||
theme.color.crimson6,
|
||||
theme.color.crimson7,
|
||||
theme.color.crimson8,
|
||||
theme.color.crimson9,
|
||||
theme.color.crimson10,
|
||||
theme.color.crimson11,
|
||||
theme.color.crimson12,
|
||||
],
|
||||
},
|
||||
plum: {
|
||||
name: 'plum',
|
||||
gradient: {
|
||||
normal: [theme.color.plum3, theme.color.plum5],
|
||||
hover: [theme.color.plum7, theme.color.plum8],
|
||||
},
|
||||
solid: theme.color.plum8,
|
||||
variations: [
|
||||
theme.color.plum1,
|
||||
theme.color.plum2,
|
||||
theme.color.plum3,
|
||||
theme.color.plum4,
|
||||
theme.color.plum5,
|
||||
theme.color.plum6,
|
||||
theme.color.plum7,
|
||||
theme.color.plum8,
|
||||
theme.color.plum9,
|
||||
theme.color.plum10,
|
||||
theme.color.plum11,
|
||||
theme.color.plum12,
|
||||
],
|
||||
},
|
||||
violet: {
|
||||
name: 'violet',
|
||||
gradient: {
|
||||
normal: [theme.color.violet3, theme.color.violet5],
|
||||
hover: [theme.color.violet7, theme.color.violet8],
|
||||
},
|
||||
solid: theme.color.violet8,
|
||||
variations: [
|
||||
theme.color.violet1,
|
||||
theme.color.violet2,
|
||||
theme.color.violet3,
|
||||
theme.color.violet4,
|
||||
theme.color.violet5,
|
||||
theme.color.violet6,
|
||||
theme.color.violet7,
|
||||
theme.color.violet8,
|
||||
theme.color.violet9,
|
||||
theme.color.violet10,
|
||||
theme.color.violet11,
|
||||
theme.color.violet12,
|
||||
],
|
||||
},
|
||||
iris: {
|
||||
name: 'iris',
|
||||
gradient: {
|
||||
normal: [theme.color.iris3, theme.color.iris5],
|
||||
hover: [theme.color.iris7, theme.color.iris8],
|
||||
},
|
||||
solid: theme.color.iris8,
|
||||
variations: [
|
||||
theme.color.iris1,
|
||||
theme.color.iris2,
|
||||
theme.color.iris3,
|
||||
theme.color.iris4,
|
||||
theme.color.iris5,
|
||||
theme.color.iris6,
|
||||
theme.color.iris7,
|
||||
theme.color.iris8,
|
||||
theme.color.iris9,
|
||||
theme.color.iris10,
|
||||
theme.color.iris11,
|
||||
theme.color.iris12,
|
||||
],
|
||||
},
|
||||
cyan: {
|
||||
name: 'cyan',
|
||||
gradient: {
|
||||
normal: [theme.color.cyan3, theme.color.cyan5],
|
||||
hover: [theme.color.cyan7, theme.color.cyan8],
|
||||
},
|
||||
solid: theme.color.cyan8,
|
||||
variations: [
|
||||
theme.color.cyan1,
|
||||
theme.color.cyan2,
|
||||
theme.color.cyan3,
|
||||
theme.color.cyan4,
|
||||
theme.color.cyan5,
|
||||
theme.color.cyan6,
|
||||
theme.color.cyan7,
|
||||
theme.color.cyan8,
|
||||
theme.color.cyan9,
|
||||
theme.color.cyan10,
|
||||
theme.color.cyan11,
|
||||
theme.color.cyan12,
|
||||
],
|
||||
},
|
||||
jade: {
|
||||
name: 'jade',
|
||||
gradient: {
|
||||
normal: [theme.color.jade3, theme.color.jade5],
|
||||
hover: [theme.color.jade7, theme.color.jade8],
|
||||
},
|
||||
solid: theme.color.jade8,
|
||||
variations: [
|
||||
theme.color.jade1,
|
||||
theme.color.jade2,
|
||||
theme.color.jade3,
|
||||
theme.color.jade4,
|
||||
theme.color.jade5,
|
||||
theme.color.jade6,
|
||||
theme.color.jade7,
|
||||
theme.color.jade8,
|
||||
theme.color.jade9,
|
||||
theme.color.jade10,
|
||||
theme.color.jade11,
|
||||
theme.color.jade12,
|
||||
],
|
||||
},
|
||||
grass: {
|
||||
name: 'grass',
|
||||
gradient: {
|
||||
normal: [theme.color.grass3, theme.color.grass5],
|
||||
hover: [theme.color.grass7, theme.color.grass8],
|
||||
},
|
||||
solid: theme.color.grass8,
|
||||
variations: [
|
||||
theme.color.grass1,
|
||||
theme.color.grass2,
|
||||
theme.color.grass3,
|
||||
theme.color.grass4,
|
||||
theme.color.grass5,
|
||||
theme.color.grass6,
|
||||
theme.color.grass7,
|
||||
theme.color.grass8,
|
||||
theme.color.grass9,
|
||||
theme.color.grass10,
|
||||
theme.color.grass11,
|
||||
theme.color.grass12,
|
||||
],
|
||||
},
|
||||
mint: {
|
||||
name: 'mint',
|
||||
gradient: {
|
||||
normal: [theme.color.mint3, theme.color.mint5],
|
||||
hover: [theme.color.mint7, theme.color.mint8],
|
||||
},
|
||||
solid: theme.color.mint8,
|
||||
variations: [
|
||||
theme.color.mint1,
|
||||
theme.color.mint2,
|
||||
theme.color.mint3,
|
||||
theme.color.mint4,
|
||||
theme.color.mint5,
|
||||
theme.color.mint6,
|
||||
theme.color.mint7,
|
||||
theme.color.mint8,
|
||||
theme.color.mint9,
|
||||
theme.color.mint10,
|
||||
theme.color.mint11,
|
||||
theme.color.mint12,
|
||||
],
|
||||
},
|
||||
lime: {
|
||||
name: 'lime',
|
||||
gradient: {
|
||||
normal: [theme.color.lime3, theme.color.lime5],
|
||||
hover: [theme.color.lime7, theme.color.lime8],
|
||||
},
|
||||
solid: theme.color.lime8,
|
||||
variations: [
|
||||
theme.color.lime1,
|
||||
theme.color.lime2,
|
||||
theme.color.lime3,
|
||||
theme.color.lime4,
|
||||
theme.color.lime5,
|
||||
theme.color.lime6,
|
||||
theme.color.lime7,
|
||||
theme.color.lime8,
|
||||
theme.color.lime9,
|
||||
theme.color.lime10,
|
||||
theme.color.lime11,
|
||||
theme.color.lime12,
|
||||
],
|
||||
},
|
||||
bronze: {
|
||||
name: 'bronze',
|
||||
gradient: {
|
||||
normal: [theme.color.bronze3, theme.color.bronze5],
|
||||
hover: [theme.color.bronze7, theme.color.bronze8],
|
||||
},
|
||||
solid: theme.color.bronze8,
|
||||
variations: [
|
||||
theme.color.bronze1,
|
||||
theme.color.bronze2,
|
||||
theme.color.bronze3,
|
||||
theme.color.bronze4,
|
||||
theme.color.bronze5,
|
||||
theme.color.bronze6,
|
||||
theme.color.bronze7,
|
||||
theme.color.bronze8,
|
||||
theme.color.bronze9,
|
||||
theme.color.bronze10,
|
||||
theme.color.bronze11,
|
||||
theme.color.bronze12,
|
||||
],
|
||||
},
|
||||
gold: {
|
||||
name: 'gold',
|
||||
gradient: {
|
||||
normal: [theme.color.gold3, theme.color.gold5],
|
||||
hover: [theme.color.gold7, theme.color.gold8],
|
||||
},
|
||||
solid: theme.color.gold8,
|
||||
variations: [
|
||||
theme.color.gold1,
|
||||
theme.color.gold2,
|
||||
theme.color.gold3,
|
||||
theme.color.gold4,
|
||||
theme.color.gold5,
|
||||
theme.color.gold6,
|
||||
theme.color.gold7,
|
||||
theme.color.gold8,
|
||||
theme.color.gold9,
|
||||
theme.color.gold10,
|
||||
theme.color.gold11,
|
||||
theme.color.gold12,
|
||||
],
|
||||
},
|
||||
brown: {
|
||||
name: 'brown',
|
||||
gradient: {
|
||||
normal: [theme.color.brown3, theme.color.brown5],
|
||||
hover: [theme.color.brown7, theme.color.brown8],
|
||||
},
|
||||
solid: theme.color.brown8,
|
||||
variations: [
|
||||
theme.color.brown1,
|
||||
theme.color.brown2,
|
||||
theme.color.brown3,
|
||||
theme.color.brown4,
|
||||
theme.color.brown5,
|
||||
theme.color.brown6,
|
||||
theme.color.brown7,
|
||||
theme.color.brown8,
|
||||
theme.color.brown9,
|
||||
theme.color.brown10,
|
||||
theme.color.brown11,
|
||||
theme.color.brown12,
|
||||
],
|
||||
},
|
||||
amber: {
|
||||
name: 'amber',
|
||||
gradient: {
|
||||
normal: [theme.color.amber3, theme.color.amber5],
|
||||
hover: [theme.color.amber7, theme.color.amber8],
|
||||
},
|
||||
solid: theme.color.amber8,
|
||||
variations: [
|
||||
theme.color.amber1,
|
||||
theme.color.amber2,
|
||||
theme.color.amber3,
|
||||
theme.color.amber4,
|
||||
theme.color.amber5,
|
||||
theme.color.amber6,
|
||||
theme.color.amber7,
|
||||
theme.color.amber8,
|
||||
theme.color.amber9,
|
||||
theme.color.amber10,
|
||||
theme.color.amber11,
|
||||
theme.color.amber12,
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
+11
-8
@@ -1,6 +1,5 @@
|
||||
import { RGBA } from 'twenty-ui/theme';
|
||||
|
||||
import { GRAPH_GROUP_COLOR_MINIMUM_ALPHA } from '@/page-layout/widgets/graph/constants/GraphGroupColorMinimumAlpha.constant';
|
||||
import { GRAPH_COLOR_SCALE_MAX } from '@/page-layout/widgets/graph/constants/GraphColorScaleMax';
|
||||
import { GRAPH_COLOR_SCALE_MIN } from '@/page-layout/widgets/graph/constants/GraphColorScaleMinIndex';
|
||||
import { GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS } from '@/page-layout/widgets/graph/constants/GraphMaximumNumberOfGroupColors';
|
||||
import { type GraphColorScheme } from '@/page-layout/widgets/graph/types/GraphColorScheme';
|
||||
|
||||
@@ -23,10 +22,14 @@ export const generateGroupColor = ({
|
||||
GRAPH_MAXIMUM_NUMBER_OF_GROUP_COLORS,
|
||||
);
|
||||
|
||||
const ratio = (effectiveGroupIndex + 1) / effectiveTotalGroups;
|
||||
const alpha =
|
||||
GRAPH_GROUP_COLOR_MINIMUM_ALPHA +
|
||||
(1 - GRAPH_GROUP_COLOR_MINIMUM_ALPHA) * ratio;
|
||||
const colorIndexRange = GRAPH_COLOR_SCALE_MAX - GRAPH_COLOR_SCALE_MIN;
|
||||
|
||||
return RGBA(colorScheme.solid, alpha);
|
||||
const variationIndex =
|
||||
GRAPH_COLOR_SCALE_MIN -
|
||||
1 +
|
||||
Math.floor(
|
||||
((effectiveGroupIndex + 1) / effectiveTotalGroups) * colorIndexRange,
|
||||
);
|
||||
|
||||
return colorScheme.variations[variationIndex];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user