IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared: Themes: add rombs colors

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-26 17:00:34 +03:00
parent 5b9dccaa54
commit 499bfbf049
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/shared/components/loader/sub-components/Rombs.tsx
View File

@ -27,6 +27,7 @@
import React from "react";
import styled, { keyframes } from "styled-components";
import { globalColors } from "../../../themes";
export const keyFrameBlue = (props: {
colorStep_1: string;
@ -34,14 +35,14 @@ export const keyFrameBlue = (props: {
colorStep_3: string;
colorStep_4: string;
}) => keyframes`
0% { background: #de7a59; top: 120px; }
0% { background: ${globalColors.redRomb}; top: 120px; }
10% { background: ${props.colorStep_1}; top: 120px; }
14% { background: ${props.colorStep_2}; top: 120px; }
15% { background: ${props.colorStep_2}; top: 0; }
20% { background: ${props.colorStep_3}; }
30% { background: ${props.colorStep_4}; }
40% { top: 120px; }
100% { background: #de7a59; top: 120px; }
100% { background: ${globalColors.redRomb}; top: 120px; }
`;
export const keyFrameRed = (props: {
@ -49,13 +50,13 @@ export const keyFrameRed = (props: {
colorStep_2: string;
colorStep_3: string;
}) => keyframes`
0% { background: #55bce6; top: 100px; opacity: 1; }
0% { background: ${globalColors.blueRomb}; top: 100px; opacity: 1; }
10% { background: ${props.colorStep_1}; top: 100px; opacity: 1; }
14% { background: ${props.colorStep_2}; top: 100px; opacity: 1; }
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
20% { background: ${props.colorStep_2}; top: 0; opacity: 0; }
45% { background: ${props.colorStep_3}; top: 0; }
100% { background: #55bce6; top: 100px; }
100% { background: ${globalColors.blueRomb}; top: 100px; }
`;
export const keyFrameGreen = (props: {
@ -64,7 +65,7 @@ export const keyFrameGreen = (props: {
colorStep_3: string;
colorStep_4: string;
}) => keyframes`
0% { background: #a1cb5c; top: 110px; opacity: 1; }
0% { background: ${globalColors.greenRomb}; top: 110px; opacity: 1; }
10% { background: ${props.colorStep_1}; top: 110px; opacity: 1; }
14% { background: ${props.colorStep_2}; top: 110px; opacity: 1; }
15% { background: ${props.colorStep_2}; top: 0; opacity: 1; }
@ -72,7 +73,7 @@ export const keyFrameGreen = (props: {
25% { background: ${props.colorStep_3}; top: 0; opacity: 1; }
30% { background: ${props.colorStep_4}; }
70% { top: 110px; }
100% { background: #a1cb5c; top: 110px; }
100% { background: ${globalColors.greenRomb}; top: 110px; }
`;
const Romb = styled.div<{ size: string }>`
@ -92,9 +93,9 @@ const Romb = styled.div<{ size: string }>`
position: absolute;
background: ${(props) =>
(props.color === "blue" && "#55bce6") ||
(props.color === "red" && "#de7a59") ||
(props.color === "green" && "#a1cb5c")};
(props.color === "blue" && globalColors.blueRomb) ||
(props.color === "red" && globalColors.redRomb) ||
(props.color === "green" && globalColors.greenRomb)};
z-index: ${(props) =>
(props.color === "blue" && "1") ||

3
packages/shared/themes/globalColors.ts
View File

@ -113,4 +113,7 @@ export const globalColors = {
//
tickColor: "#20D21F",
redRomb: "#de7a59",
blueRomb: "#55bce6",
greenRomb: "#a1cb5c",
};