diff --git a/src/styles/versions.scss b/src/styles/versions.scss index 14b1c1371d..4146f8d0d0 100644 --- a/src/styles/versions.scss +++ b/src/styles/versions.scss @@ -1,106 +1,130 @@ .g-root { &_theme_light, &_theme_light-hc { - --versions-red-1: #f4315b; - --versions-red-2: #ff426b; - --versions-red-3: #ff7391; - --versions-red-4: #ff8ba4; - - --versions-orange-red-1: #ff6050; - --versions-orange-red-2: #ff7a6d; - --versions-orange-red-3: #ffafa6; - --versions-orange-red-4: #ffbcb5; - - --versions-orange-1: #ff9233; - --versions-orange-2: #ffad65; - --versions-orange-3: #ffc593; - --versions-orange-4: #ffd3ac; - - --versions-yellow-1: #ffea00; - --versions-yellow-2: #ffee31; - --versions-yellow-3: #fff480; - --versions-yellow-4: #fff8a9; - - --versions-green-1: #a1ee26; - --versions-green-2: #b1ff33; - --versions-green-3: #cbff78; - --versions-green-4: #ddffa7; - - --versions-teal-1: #31eba4; - --versions-teal-2: #16ffa6; - --versions-teal-3: #4cffba; - --versions-teal-4: #9bffd8; - - --versions-cyan-1: #2ee4e8; - --versions-cyan-2: #0cfbff; - --versions-cyan-3: #63fdff; - --versions-cyan-4: #b1feff; + --versions-default-color: #d5d5d5; + + --versions-orange-1: #ff5512; + --versions-orange-2: #ff753a; + --versions-orange-3: #ffa16b; + --versions-orange-4: #ffc497; + + --versions-yellow-1: #fed018; + --versions-yellow-2: #faca1c; + --versions-yellow-3: #f6d66d; + --versions-yellow-4: #f8e09f; + + --versions-green-1: #26ee79; + --versions-green-2: #33ff77; + --versions-green-3: #8eff78; + --versions-green-4: #c4ffa7; + + --versions-lightblue-1: #21c7ff; + --versions-lightblue-2: #38cdff; + --versions-lightblue-3: #60d7ff; + --versions-lightblue-4: #79ddff; --versions-blue-1: #386bff; --versions-blue-2: #4070ff; --versions-blue-3: #658bff; --versions-blue-4: #a1b9ff; - --versions-purple-1: #c73af7; - --versions-purple-2: #c92cff; - --versions-purple-3: #dd78ff; - --versions-purple-4: #e79fff; - - --versions-pink-1: #ff49bb; - --versions-pink-2: #ff34b3; - --versions-pink-3: #ff75cb; - --versions-pink-4: #ffb0e1; + --versions-violet-1: #d107e3; + --versions-violet-2: #d836f9; + --versions-violet-3: #e563ff; + --versions-violet-4: #dc92ff; + + --versions-pink-1: #ff499e; + --versions-pink-2: #ff5ca8; + --versions-pink-3: #fe8ac0; + --versions-pink-4: #ff9dcb; + + --versions-caramel-1: #dd7709; + --versions-caramel-2: #ea8312; + --versions-caramel-3: #f1a757; + --versions-caramel-4: #ffc484; + + --versions-moss-1: #53920a; + --versions-moss-2: #6eb818; + --versions-moss-3: #8dd43c; + --versions-moss-4: #b4ea76; + + --versions-turquoise-1: #19b5b8; + --versions-turquoise-2: #38cacd; + --versions-turquoise-3: #51e5e8; + --versions-turquoise-4: #98f4f6; + + --versions-barbie-1: #f35fc4; + --versions-barbie-2: #f17acc; + --versions-barbie-3: #ff86d9; + --versions-barbie-4: #ffa4e3; + + --versions-night-1: #5616ea; + --versions-night-2: #6934e4; + --versions-night-3: #7c48f6; + --versions-night-4: #a179ff; } &_theme_dark, &_theme_dark-hc { - --versions-red-1: #d50c38; - --versions-red-2: #ff2051; - --versions-red-3: #fb3a64; - --versions-red-4: #ff6989; - - --versions-orange-red-1: #eb3320; - --versions-orange-red-2: #ff503e; - --versions-orange-red-3: #ff8376; - --versions-orange-red-4: #ffa399; - - --versions-orange-1: #f47b10; - --versions-orange-2: #ff9b43; - --versions-orange-3: #ffb06a; - --versions-orange-4: #ffc693; - - --versions-yellow-1: #ffea00; - --versions-yellow-2: #ffee31; - --versions-yellow-3: #fff480; - --versions-yellow-4: #fff8a9; - - --versions-green-1: #83d400; - --versions-green-2: #b1ff33; - --versions-green-3: #cbff78; - --versions-green-4: #ddffa7; - - --versions-teal-1: #27c98b; - --versions-teal-2: #16ffa6; - --versions-teal-3: #4cffba; - --versions-teal-4: #9bffd8; - - --versions-cyan-1: #0edbde; - --versions-cyan-2: #0cfbff; - --versions-cyan-3: #63fdff; - --versions-cyan-4: #b1feff; + --versions-default-color: #656469; + + --versions-orange-1: #ff5512; + --versions-orange-2: #ff753a; + --versions-orange-3: #ffa16b; + --versions-orange-4: #ffc497; + + --versions-yellow-1: #fed018; + --versions-yellow-2: #fae41c; + --versions-yellow-3: #f6e66d; + --versions-yellow-4: #f8ef9f; + + --versions-green-1: #26ee79; + --versions-green-2: #33ff77; + --versions-green-3: #8eff78; + --versions-green-4: #c4ffa7; + + --versions-lightblue-1: #00b8f6; + --versions-lightblue-2: #41d0ff; + --versions-lightblue-3: #87e1ff; + --versions-lightblue-4: #b5e8f9; --versions-blue-1: #2059ff; --versions-blue-2: #4070ff; --versions-blue-3: #658bff; --versions-blue-4: #a1b9ff; - --versions-purple-1: #ab07e3; - --versions-purple-2: #c92cff; - --versions-purple-3: #dd78ff; - --versions-purple-4: #e79fff; - - --versions-pink-1: #e71498; - --versions-pink-2: #ff34b3; - --versions-pink-3: #ff75cb; - --versions-pink-4: #ffb0e1; + --versions-violet-1: #a10aff; + --versions-violet-2: #b845ff; + --versions-violet-3: #c76cff; + --versions-violet-4: #dfacff; + + --versions-pink-1: #ed2a7a; + --versions-pink-2: #fe398a; + --versions-pink-3: #fb6ba6; + --versions-pink-4: #ff90be; + + --versions-caramel-1: #bc6c15; + --versions-caramel-2: #d67e1e; + --versions-caramel-3: #f9a243; + --versions-caramel-4: #ffb96d; + + --versions-moss-1: #478500; + --versions-moss-2: #5fa90c; + --versions-moss-3: #76ba28; + --versions-moss-4: #a3e855; + + --versions-turquoise-1: #009ea0; + --versions-turquoise-2: #1dc7ca; + --versions-turquoise-3: #3debee; + --versions-turquoise-4: #6ff3f5; + + --versions-barbie-1: #ee55be; + --versions-barbie-2: #ff6bd0; + --versions-barbie-3: #ff86d9; + --versions-barbie-4: #ffa4e3; + + --versions-night-1: #5b1fe6; + --versions-night-2: #7a41ff; + --versions-night-3: #9973f3; + --versions-night-4: #a179ff; } } diff --git a/src/utils/versions/getVersionsColors.ts b/src/utils/versions/getVersionsColors.ts index a641ed096e..7755f8aae6 100644 --- a/src/utils/versions/getVersionsColors.ts +++ b/src/utils/versions/getVersionsColors.ts @@ -10,18 +10,6 @@ export const hashCode = (s: string) => { }; export const COLORS = [ - [ - 'var(--versions-red-1)', - 'var(--versions-red-2)', - 'var(--versions-red-3)', - 'var(--versions-red-4)', - ], - [ - 'var(--versions-orange-red-1)', - 'var(--versions-orange-red-2)', - 'var(--versions-orange-red-3)', - 'var(--versions-orange-red-4)', - ], [ 'var(--versions-orange-1)', 'var(--versions-orange-2)', @@ -41,16 +29,10 @@ export const COLORS = [ 'var(--versions-green-4)', ], [ - 'var(--versions-teal-1)', - 'var(--versions-teal-2)', - 'var(--versions-teal-3)', - 'var(--versions-teal-4)', - ], - [ - 'var(--versions-cyan-1)', - 'var(--versions-cyan-2)', - 'var(--versions-cyan-3)', - 'var(--versions-cyan-4)', + 'var(--versions-lightblue-1)', + 'var(--versions-lightblue-2)', + 'var(--versions-lightblue-3)', + 'var(--versions-lightblue-4)', ], [ 'var(--versions-blue-1)', @@ -59,10 +41,10 @@ export const COLORS = [ 'var(--versions-blue-4)', ], [ - 'var(--versions-purple-1)', - 'var(--versions-purple-2)', - 'var(--versions-purple-3)', - 'var(--versions-purple-4)', + 'var(--versions-violet-1)', + 'var(--versions-violet-2)', + 'var(--versions-violet-3)', + 'var(--versions-violet-4)', ], [ 'var(--versions-pink-1)', @@ -70,9 +52,39 @@ export const COLORS = [ 'var(--versions-pink-3)', 'var(--versions-pink-4)', ], + [ + 'var(--versions-caramel-1)', + 'var(--versions-caramel-2)', + 'var(--versions-caramel-3)', + 'var(--versions-caramel-4)', + ], + [ + 'var(--versions-moss-1)', + 'var(--versions-moss-2)', + 'var(--versions-moss-3)', + 'var(--versions-moss-4)', + ], + [ + 'var(--versions-turquoise-1)', + 'var(--versions-turquoise-2)', + 'var(--versions-turquoise-3)', + 'var(--versions-turquoise-4)', + ], + [ + 'var(--versions-barbie-1)', + 'var(--versions-barbie-2)', + 'var(--versions-barbie-3)', + 'var(--versions-barbie-4)', + ], + [ + 'var(--versions-night-1)', + 'var(--versions-night-2)', + 'var(--versions-night-3)', + 'var(--versions-night-4)', + ], ]; -export const DEFAULT_COLOR = 'var(--g-color-base-generic-medium)'; +export const DEFAULT_COLOR = 'var(--versions-default-color)'; /** Calculates sub color index */ export function getMinorVersionColorVariant(minorIndex: number, minorQuantity: number) {