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

Shared: use colors from theme

Browse Source
This commit is contained in:
Viktor Fomin 2024-06-25 12:40:11 +03:00
parent 1bbdd22b9e
commit b46c1605fe
16 changed files with 63 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/shared/components/access-right-select/data.ts
View File

@ -33,6 +33,7 @@
// import AccessNoneReactSvgUrl from "PUBLIC_DIR/images/access.none.react.svg?url";
import { TOption } from "../combobox";
import { globalColors } from "../../themes";
export const data: TOption[] = [
{
@ -40,14 +41,14 @@ export const data: TOption[] = [
label: "Room administrator",
description: `Administration of rooms, archiving of rooms, inviting and managing users in rooms.`,
quota: "free",
color: "#20D21F",
color: globalColors.tickColor,
},
{
key: "key2",
label: "Full access",
description: `Edit, upload, create, view, download, delete files and folders.`,
quota: "paid",
color: "#EDC409",
color: globalColors.favoritesStatus,
},
{ key: "key3", label: "", isSeparator: true },

7
packages/shared/components/campaigns-banner/CampaignsBanner.tsx
View File

@ -42,6 +42,7 @@ import {
import { CampaignsBannerProps } from "./CampaignsBanner.types";
import useFitText from "./useFitText";
import { globalColors } from "../../themes";
const CampaignsBanner = (props: CampaignsBannerProps) => {
const {
@ -76,7 +77,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
{hasTitle && (
<TextComponent
className="header"
color={title?.color || "#333"}
color={title?.color || globalColors.black}
fontSize={title?.fontSize}
fontWeight={title?.fontWeight}
lineHeight="12px"
@ -87,7 +88,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
<div>
{hasBodyText && (
<TextComponent
color={body?.color || "#333"}
color={body?.color || globalColors.black}
fontSize={fontSize}
fontWeight={body?.fontWeight}
>
@ -96,7 +97,7 @@ const CampaignsBanner = (props: CampaignsBannerProps) => {
)}
{hasText && (
<TextComponent
color={text?.color || "#333"}
color={text?.color || globalColors.black}
fontSize={text?.fontSize}
fontWeight={text?.fontWeight}
>

6
packages/shared/components/color-theme/styled-components/indicatorLoader.ts
View File

@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import { Base, TColorScheme, TTheme } from "../../../themes";
import { Base, TColorScheme, TTheme, globalColors } from "../../../themes";
import StyledWrapper from "../sub-components/StyledWrapper";
const getDefaultStyles = ({
@ -40,12 +40,12 @@ const getDefaultStyles = ({
#ipl-progress-indicator {
background-color: ${theme.isBase
? $currentColorScheme.main?.accent
: "#FFFFFF"};
: globalColors.white};
&:hover {
background-color: ${theme.isBase
? $currentColorScheme.main?.accent
: "#FFFFFF"};
: globalColors.white};
}
}
`;

4
packages/shared/components/color-theme/styled-components/progress.ts
View File

@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import { Base } from "../../../themes";
import { Base, globalColors } from "../../../themes";
import StyledPreparationPortalProgress from "../sub-components/StyledPreparationPortalProgress";
import { ProgressColorTheme } from "../ColorTheme.types";
@ -36,7 +36,7 @@ const getDefaultStyles = ({ $currentColorScheme, theme }: ProgressColorTheme) =>
.preparation-portal_progress-line {
background: ${theme.isBase
? $currentColorScheme.main?.accent
: "#FFFFFF"};
: globalColors.white};
}
`;

3
packages/shared/components/field-container/FieldContainer.stories.tsx
View File

@ -31,6 +31,7 @@ import { InputSize, InputType, TextInput } from "../text-input";
import { FieldContainer } from "./FieldContainer";
import { FieldContainerProps } from "./FieldContainer.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/FieldContainer",
@ -84,7 +85,7 @@ export const Default: Story = {
place: "top",
errorMessage:
"Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit",
errorColor: "#C96C27",
errorColor: globalColors.lightErrorStatus,
errorMessageWidth: "293px",
removeMargin: false,
children: null,

4
packages/shared/components/input-block/InputBlock.styled.tsx
View File

@ -28,7 +28,7 @@ import React from "react";
import styled, { css } from "styled-components";
import { commonInputStyles } from "../../utils";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
const StyledIconBlock = styled.div<{
isDisabled?: boolean;
@ -87,7 +87,7 @@ const StyledInputGroup = styled(CustomInputGroup)`
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-background-clip: text;
-webkit-text-fill-color: #ffffff;
-webkit-text-fill-color: ${globalColors.white};
transition: background-color 5000s ease-in-out 0s;
box-shadow: inset 0 0 20px 20px #23232329;
}

24
packages/shared/components/link-with-dropdown/LinkWithDropdown.test.tsx
View File

@ -54,7 +54,7 @@
describe("<LinkWithDropdown />", () => {
it("renders without error", () => {
// const wrapper = mount(
// <LinkWithDropdown color="#333333" isBold={true} data={[]}>
// <LinkWithDropdown isBold={true} data={[]}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -66,7 +66,7 @@ describe("<LinkWithDropdown />", () => {
// it("re-render test", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={data}>
// <LinkWithDropdown isBold={true} data={data}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -87,7 +87,7 @@ describe("<LinkWithDropdown />", () => {
// it("re-render after changing color", () => {
// const wrapper = shallow(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={data}>
// <LinkWithDropdown isBold={true} data={data}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -95,7 +95,7 @@ describe("<LinkWithDropdown />", () => {
// const shouldUpdate = instance.shouldComponentUpdate(
// {
// color: "#999",
// color: "",
// },
// instance.state
// );
@ -108,7 +108,7 @@ describe("<LinkWithDropdown />", () => {
// it("re-render after changing dropdownType and isOpen prop", () => {
// const wrapper = shallow(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={data}>
// <LinkWithDropdown isBold={true} data={data}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -130,7 +130,7 @@ describe("<LinkWithDropdown />", () => {
// it("re-render after changing isOpen prop", () => {
// const wrapper = shallow(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={data}>
// <LinkWithDropdown isBold={true} data={data}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -151,7 +151,7 @@ describe("<LinkWithDropdown />", () => {
// it("not re-render", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={data}>
// <LinkWithDropdown isBold={true} data={data}>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -170,7 +170,7 @@ describe("<LinkWithDropdown />", () => {
// it("accepts id", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={[]} id="testId">
// <LinkWithDropdown isBold={true} data={[]} id="testId">
// Link with dropdown
// </LinkWithDropdown>
// );
@ -184,7 +184,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// className="test"
@ -202,7 +201,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// style={{ color: "red" }}
@ -220,7 +218,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = shallow(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// style={{ color: "red" }}
@ -247,7 +244,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = shallow(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// style={{ color: "red" }}
@ -271,7 +267,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// dropdownType="appearDashedAfterHover"
@ -288,7 +283,7 @@ describe("<LinkWithDropdown />", () => {
// it("accepts prop isOpen", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown color="#333333" isBold={true} data={[]} isOpen>
// <LinkWithDropdown isBold={true} data={[]} isOpen>
// Link with dropdown
// </LinkWithDropdown>
// );
@ -302,7 +297,6 @@ describe("<LinkWithDropdown />", () => {
// const wrapper = mount(
// // @ts-expect-error TS(2322): Type '{ children: string; color: string; isBold: b... Remove this comment to see the full error message
// <LinkWithDropdown
// color="#333333"
// isBold={true}
// data={[]}
// isSemitransparent

4
packages/shared/components/main-button-mobile/MainButtonMobile.styled.ts
View File

@ -29,7 +29,7 @@ import { isMobile } from "react-device-detect";
import { mobile, tablet } from "../../utils";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import { DropDown } from "../drop-down";
import { DropDownItem } from "../drop-down-item";
import { FloatingButton } from "../floating-button";
@ -410,7 +410,7 @@ const getDefaultProgressStyles = ({
$currentColorScheme &&
css`
background: ${
theme.isBase ? $currentColorScheme?.main?.accent : "#FFFFFF"
theme.isBase ? $currentColorScheme?.main?.accent : globalColors.white
}};
`;

7
packages/shared/components/media-viewer/sub-components/PDFViewer/ui/Bookmarks/Bookmarks.styled.ts
View File

@ -25,6 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled from "styled-components";
import { globalColors } from "../../../../../../themes";
export const List = styled.ul`
padding-left: 16px;
@ -38,7 +39,7 @@ export const List = styled.ul`
`;
export const Item = styled.li`
color: #ffffff;
color: ${globalColors.white};
padding: 1px 16px 0 16px;
font-weight: 400;
font-size: 13px;
@ -50,13 +51,13 @@ export const Item = styled.li`
@media (hover: hover) {
:hover {
background: #474747;
background: ${globalColors.grayDarkStrong};
}
}
`;
export const Text = styled.p`
margin: 0;
border-bottom: 1px solid #474747;
border-bottom: 1px solid ${globalColors.grayDarkStrong};
padding: 6px 0;
`;

6
packages/shared/components/modal-dialog/ModalDialog.stories.tsx
View File

@ -32,6 +32,7 @@ import { Button, ButtonSize } from "../button";
import { ModalDialog } from "./ModalDialog";
import { ModalDialogType } from "./ModalDialog.enums";
import { ModalDialogProps } from "./ModalDialog.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/ModalDialog",
@ -68,7 +69,10 @@ const Template = ({ ...args }: ModalDialogProps) => {
<ModalDialog.Body>
<span>
Send the password change instruction to the{" "}
<a style={{ color: "#5299E0" }} href="mailto:asc@story.book">
<a
style={{ color: globalColors.lightSecondMain }}
href="mailto:asc@story.book"
>
asc@story.book
</a>{" "}
email address

6
packages/shared/components/navigation/Navigation.styled.ts
View File

@ -30,7 +30,7 @@ import ExpanderDownIcon from "PUBLIC_DIR/images/expander-down.react.svg";
import ArrowIcon from "PUBLIC_DIR/images/arrow.react.svg";
import { tablet, mobile, commonIconsStyles } from "../../utils";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import { ColorTheme } from "../color-theme";
import { Heading } from "../heading";
@ -98,11 +98,11 @@ const StyledContainer = styled.div<{
${(props) =>
props.theme.interfaceDirection === "rtl"
? css`
border-right: 1px solid #dfe2e3;
border-right: 1px solid ${globalColors.lightGraySelected};
margin: 0 15px 0 0;
`
: css`
border-left: 1px solid #dfe2e3;
border-left: 1px solid ${globalColors.lightGraySelected};
margin: 0 0 0 15px;
`}

7
packages/shared/components/password-input/PasswordInput.styled.tsx
View File

@ -27,7 +27,7 @@
import React from "react";
import styled, { css } from "styled-components";
import { tablet, mobile } from "../../utils";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import { Text } from "../text";
@ -184,7 +184,10 @@ StyledTooltipContainer.defaultProps = { theme: Base };
const StyledTooltipItem = styled(Text)<{ valid?: boolean }>`
//height: 24px;
color: ${(props) => (props.valid ? "#44bb00" : "#B40404")} !important;
color: ${(props) =>
props.valid
? globalColors.lightStatusPositive
: globalColors.lightErrorStatus} !important;
`;
export {

14
packages/shared/components/slider/Slider.styled.ts
View File

@ -25,7 +25,7 @@
// International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
import styled, { css } from "styled-components";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import { SliderThemeProps } from "./Slider.types";
const StyledSlider = styled.input.attrs((props: SliderThemeProps) => ({
@ -46,8 +46,8 @@ const StyledSlider = styled.input.attrs((props: SliderThemeProps) => ({
props.withPouring &&
css`
background-image: ${props.isDisabled
? `linear-gradient(#A6DCF2, #A6DCF2)`
: `linear-gradient(#2da7db, #2da7db)`};
? `linear-gradient(${globalColors.lightSecondMainDisabled}, ${globalColors.lightSecondMainDisabled})`
: `linear-gradient(${globalColors.lightSecondMain}, ${globalColors.lightSecondMain})`};
`}
background-size: ${(props) => `${props.sizeProp} 100%`};
@ -195,12 +195,13 @@ const StyledSliderTheme = styled(StyledSlider)<SliderThemeProps>`
props.withPouring &&
((props.theme.isBase &&
`linear-gradient( ${props.$currentColorScheme?.main?.accent}, ${props.$currentColorScheme?.main?.accent})`) ||
(!props.theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
(!props.theme.isBase &&
`linear-gradient(${globalColors.white}, ${globalColors.white})`))};
&::-webkit-slider-thumb {
background: ${(props) =>
(props.theme.isBase && props.$currentColorScheme?.main?.accent) ||
(!props.theme.isBase && "#FFFFFF")};
(!props.theme.isBase && globalColors.white)};
box-shadow: ${(props) =>
!props.theme.isBase && "0px 3px 12px rgba(0, 0, 0, 0.25); !important"};
}
@ -210,7 +211,8 @@ const StyledSliderTheme = styled(StyledSlider)<SliderThemeProps>`
props.withPouring &&
((props.theme.isBase &&
`linear-gradient( ${props.$currentColorScheme?.main?.accent}, ${props.$currentColorScheme?.main?.accent})`) ||
(!props.theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
(!props.theme.isBase &&
`linear-gradient(${globalColors.white}, ${globalColors.white})`))};
}
${(props) =>

5
packages/shared/components/snackbar/snackbar.stories.tsx
View File

@ -31,6 +31,7 @@ import { Box } from "../box";
import { SnackBar } from "./Snackbar";
import { SnackbarProps } from "./Snackbar.types";
import { globalColors } from "../../themes";
const meta = {
title: "Components/SnackBar",
@ -68,8 +69,8 @@ export const base: Story = {
render: (args) => <BaseTemplate {...args} />,
args: {
backgroundImg: "",
backgroundColor: "#f8f7bf",
textColor: "#000",
backgroundColor: globalColors.lightToastInfo,
textColor: globalColors.darkBlack,
opacity: 1,
headerText: "Attention",
text: "We apologize for any short-term technical issues in service functioning, that may appear on 22.06.2021 during the update of ONLYOFFICE Personal.",

5
packages/shared/components/social-button/SocialButton.styled.tsx
View File

@ -27,7 +27,7 @@
import React, { PropsWithChildren } from "react";
import styled, { css } from "styled-components";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import type { StyledSocialButtonProps } from "./SocialButton.types";
@ -199,7 +199,8 @@ const StyledSocialButton = styled(ButtonWrapper).attrs((props) => ({
path {
fill: ${(props) => props.isConnect && props.theme.socialButton.svg.fill};
fill: ${(props) => !props.theme.isBase && !props.isConnect && "#FFFFFF"};
fill: ${(props) =>
!props.theme.isBase && !props.isConnect && globalColors.white};
}
}

7
packages/shared/components/toggle-button/ToggleButton.styled.ts
View File

@ -26,7 +26,7 @@
import styled, { css } from "styled-components";
import { Base } from "../../themes";
import { Base, globalColors } from "../../themes";
import { NoUserSelect } from "../../utils";
import {
@ -139,7 +139,10 @@ const ContainerToggleButtonTheme = styled(
}
circle {
fill: ${(isChecked && isDisabled && theme.isBase && "#FFFFFF") ||
fill: ${(isChecked &&
isDisabled &&
theme.isBase &&
globalColors.white) ||
(isChecked && $currentColorScheme.text?.accent)};
}
}