Web:Common:Delete ColorTheme from Common.
This commit is contained in:
parent
f9de792fdf
commit
ff174d6b9c
@ -1,308 +0,0 @@
|
||||
import React, { forwardRef } from "react";
|
||||
import { inject, observer } from "mobx-react";
|
||||
|
||||
import {
|
||||
ButtonTheme,
|
||||
MainButtonTheme,
|
||||
CatalogItemTheme,
|
||||
CalendarTheme,
|
||||
BadgeTheme,
|
||||
SubmenuTextTheme,
|
||||
SubmenuItemLabelTheme,
|
||||
ToggleButtonTheme,
|
||||
TabsContainerTheme,
|
||||
IconButtonTheme,
|
||||
IconButtonPinTheme,
|
||||
IndicatorFilterButtonTheme,
|
||||
FilterBlockItemTagTheme,
|
||||
IconWrapperTheme,
|
||||
VersionBadgeTheme,
|
||||
TextareaTheme,
|
||||
InputBlockTheme,
|
||||
TextInputTheme,
|
||||
ComboButtonTheme,
|
||||
LinkForgotPasswordTheme,
|
||||
LoadingButtonTheme,
|
||||
FloatingButtonTheme,
|
||||
InfoPanelToggleTheme,
|
||||
LinkTheme,
|
||||
SliderTheme,
|
||||
IndicatorLoaderTheme,
|
||||
ProgressTheme,
|
||||
MobileProgressBarTheme,
|
||||
} from "./styled";
|
||||
import { ThemeType } from "./constants";
|
||||
|
||||
const ColorTheme = forwardRef(
|
||||
({ currentColorScheme, isVersion, themeId, hoverColor, ...props }, ref) => {
|
||||
switch (themeId) {
|
||||
case ThemeType.Button: {
|
||||
return (
|
||||
<ButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.MainButton: {
|
||||
return (
|
||||
<MainButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.CatalogItem: {
|
||||
return (
|
||||
<CatalogItemTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Badge: {
|
||||
return (
|
||||
<BadgeTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.SubmenuText: {
|
||||
return (
|
||||
<SubmenuTextTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.SubmenuItemLabel: {
|
||||
return (
|
||||
<SubmenuItemLabelTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.ToggleButton: {
|
||||
return (
|
||||
<ToggleButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.TabsContainer: {
|
||||
return (
|
||||
<TabsContainerTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.IconButton: {
|
||||
return (
|
||||
<IconButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.IconButtonPin: {
|
||||
return (
|
||||
<IconButtonPinTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.IndicatorFilterButton: {
|
||||
return (
|
||||
<IndicatorFilterButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.FilterBlockItemTag: {
|
||||
return (
|
||||
<FilterBlockItemTagTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.IconWrapper: {
|
||||
return (
|
||||
<IconWrapperTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.VersionBadge: {
|
||||
return (
|
||||
<VersionBadgeTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
$isVersion={isVersion}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Textarea: {
|
||||
return (
|
||||
<TextareaTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.InputBlock: {
|
||||
return (
|
||||
<InputBlockTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.TextInput: {
|
||||
return (
|
||||
<TextInputTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Calendar: {
|
||||
return (
|
||||
<CalendarTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.ComboButton: {
|
||||
return (
|
||||
<ComboButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.LinkForgotPassword: {
|
||||
return (
|
||||
<LinkForgotPasswordTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.LoadingButton: {
|
||||
return (
|
||||
<LoadingButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.FloatingButton: {
|
||||
return (
|
||||
<FloatingButtonTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.InfoPanelToggle: {
|
||||
return (
|
||||
<InfoPanelToggleTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Link: {
|
||||
return (
|
||||
<LinkTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Slider: {
|
||||
return (
|
||||
<SliderTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.IndicatorLoader: {
|
||||
return (
|
||||
<IndicatorLoaderTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.Progress: {
|
||||
return (
|
||||
<ProgressTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
case ThemeType.MobileProgressBar: {
|
||||
return (
|
||||
<MobileProgressBarTheme
|
||||
{...props}
|
||||
$currentColorScheme={currentColorScheme}
|
||||
ref={ref}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export default inject(({ auth, loginStore }) => {
|
||||
if (loginStore) {
|
||||
const { currentColorScheme } = loginStore;
|
||||
return { currentColorScheme };
|
||||
} else {
|
||||
if (!auth) return;
|
||||
const { settingsStore } = auth;
|
||||
const { currentColorScheme } = settingsStore;
|
||||
return {
|
||||
currentColorScheme: currentColorScheme || false,
|
||||
};
|
||||
}
|
||||
})(observer(ColorTheme));
|
||||
@ -1,31 +0,0 @@
|
||||
export const ThemeType = {
|
||||
Button: "button",
|
||||
MainButton: "mainButton",
|
||||
CatalogItem: "catalogItem",
|
||||
Badge: "badge",
|
||||
Calendar: 'calendar',
|
||||
SubmenuText: "submenuText",
|
||||
SubmenuItemLabel: "submenuItemLabel",
|
||||
ToggleButton: "toggleButton",
|
||||
TabsContainer: "tabsContainer",
|
||||
IconButton: "iconButton",
|
||||
IconButtonPin: "iconButtonPin",
|
||||
IndicatorFilterButton: "indicatorFilterButton",
|
||||
FilterBlockItemTag: "filterBlockItemTag",
|
||||
IconWrapper: "iconWrapper",
|
||||
Calendar: "calendar",
|
||||
VersionBadge: "versionBadge",
|
||||
Textarea: "textarea",
|
||||
InputBlock: "inputBlock",
|
||||
TextInput: "textInput",
|
||||
ComboButton: "comboButton",
|
||||
LinkForgotPassword: "linkForgotPassword",
|
||||
LoadingButton: "loadingButton",
|
||||
FloatingButton: "floatingButton",
|
||||
InfoPanelToggle: "infoPanelToggle",
|
||||
Link: "link",
|
||||
Slider: "slider",
|
||||
IndicatorLoader: "indicatorLoader",
|
||||
Progress: "progress",
|
||||
MobileProgressBar: "mobileProgressBar",
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
export { default as ColorTheme } from "./ColorTheme";
|
||||
|
||||
export { ThemeType } from "./constants";
|
||||
@ -1,56 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import {
|
||||
StyledBadge,
|
||||
StyledInner,
|
||||
StyledText,
|
||||
} from "@docspace/components/badge/styled-badge";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({
|
||||
$currentColorScheme,
|
||||
isVersionBadge,
|
||||
backgroundColor,
|
||||
color,
|
||||
theme,
|
||||
isPaidBadge,
|
||||
isMutedBadge,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
!isVersionBadge &&
|
||||
css`
|
||||
${StyledText} {
|
||||
color: ${color
|
||||
? color
|
||||
: isPaidBadge
|
||||
? theme.badge.color
|
||||
: $currentColorScheme.text.accent} !important;
|
||||
}
|
||||
|
||||
${StyledInner} {
|
||||
background-color: ${isMutedBadge
|
||||
? theme.badge.disableBackgroundColor
|
||||
: backgroundColor
|
||||
? backgroundColor
|
||||
: $currentColorScheme.main.accent};
|
||||
|
||||
&:hover {
|
||||
background-color: ${isMutedBadge
|
||||
? theme.badge.disableBackgroundColor
|
||||
: backgroundColor
|
||||
? backgroundColor
|
||||
: $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: ${isMutedBadge
|
||||
? theme.badge.disableBackgroundColor
|
||||
: backgroundColor
|
||||
? backgroundColor
|
||||
: $currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledBadge.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledBadge)(getDefaultStyles);
|
||||
@ -1,84 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledButton from "@docspace/components/button/styled-button";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const activeCss = css`
|
||||
border-color: ${(props) => props.$currentColorScheme.main?.buttons};
|
||||
|
||||
background: ${(props) =>
|
||||
props.primary && props.$currentColorScheme.main?.buttons};
|
||||
|
||||
opacity: ${(props) => !props.isDisabled && "1"};
|
||||
|
||||
filter: ${(props) =>
|
||||
props.primary &&
|
||||
(props.theme.isBase ? "brightness(90%)" : "brightness(82%)")};
|
||||
color: ${(props) => props.$currentColorScheme.text?.buttons};
|
||||
`;
|
||||
|
||||
const hoverCss = css`
|
||||
border-color: ${(props) => props.$currentColorScheme.main?.buttons};
|
||||
|
||||
background: ${(props) =>
|
||||
props.primary && props.$currentColorScheme.main?.buttons};
|
||||
|
||||
opacity: ${(props) => props.primary && !props.isDisabled && "0.85"};
|
||||
color: ${(props) => props.primary && props.$currentColorScheme.text?.buttons};
|
||||
`;
|
||||
|
||||
const getDefaultStyles = ({
|
||||
primary,
|
||||
$currentColorScheme,
|
||||
isDisabled,
|
||||
isLoading,
|
||||
isClicked,
|
||||
isHovered,
|
||||
disableHover,
|
||||
title,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
!title &&
|
||||
css`
|
||||
${primary &&
|
||||
css`
|
||||
background: ${$currentColorScheme.main?.buttons};
|
||||
opacity: ${isDisabled && "0.6"};
|
||||
border: ${`1px solid`} ${$currentColorScheme.main?.buttons};
|
||||
color: ${$currentColorScheme.text?.buttons};
|
||||
|
||||
.loader {
|
||||
svg {
|
||||
color: ${$currentColorScheme.text?.buttons};
|
||||
}
|
||||
background-color: ${$currentColorScheme.main?.buttons};
|
||||
}
|
||||
`}
|
||||
|
||||
${!isDisabled &&
|
||||
!isLoading &&
|
||||
(isHovered && primary
|
||||
? hoverCss
|
||||
: !disableHover &&
|
||||
primary &&
|
||||
css`
|
||||
&:hover,
|
||||
&:focus {
|
||||
${hoverCss}
|
||||
}
|
||||
`)}
|
||||
|
||||
${!isDisabled &&
|
||||
!isLoading &&
|
||||
(isClicked
|
||||
? primary && activeCss
|
||||
: primary &&
|
||||
css`
|
||||
&:active {
|
||||
${activeCss}
|
||||
}
|
||||
`)}
|
||||
`;
|
||||
|
||||
StyledButton.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledButton)(getDefaultStyles);
|
||||
@ -1,49 +0,0 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
import {
|
||||
Container,
|
||||
DateItem,
|
||||
CurrentDateItem,
|
||||
RoundButton,
|
||||
} from '@docspace/components/calendar/styled-components';
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${CurrentDateItem} {
|
||||
background: ${$currentColorScheme.main.accent};
|
||||
:hover {
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
|
||||
:focus {
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
${DateItem} {
|
||||
color: ${(props) =>
|
||||
props.disabled
|
||||
? props.theme.calendar.disabledColor
|
||||
: props.focused
|
||||
? $currentColorScheme.main.accent
|
||||
: props.theme.calendar.color};
|
||||
border-color: ${(props) => (props.focused ? $currentColorScheme.main.accent : 'transparent')};
|
||||
:focus {
|
||||
color: ${$currentColorScheme.main.accent};
|
||||
border-color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
${RoundButton} {
|
||||
:hover {
|
||||
outline: ${(props) =>
|
||||
props.disabled
|
||||
? `1px solid ${props.theme.calendar.outlineColor}`
|
||||
: `2px solid ${$currentColorScheme.main.accent}`};
|
||||
span {
|
||||
border-color: ${(props) =>
|
||||
props.disabled ? props.theme.calendar.disabledArrow : $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(Container)(getDefaultStyles);
|
||||
@ -1,50 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import {
|
||||
StyledCatalogItemContainer,
|
||||
StyledCatalogItemImg,
|
||||
StyledCatalogItemText,
|
||||
} from "@docspace/components/catalog-item/styled-catalog-item";
|
||||
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${StyledCatalogItemText} {
|
||||
color: ${isActive && theme.isBase && $currentColorScheme.main.accent};
|
||||
|
||||
&:hover {
|
||||
color: ${isActive && theme.isBase && $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
${StyledCatalogItemImg} {
|
||||
svg {
|
||||
path {
|
||||
fill: ${isActive &&
|
||||
theme.isBase &&
|
||||
$currentColorScheme.main.accent} !important;
|
||||
}
|
||||
circle {
|
||||
fill: ${isActive &&
|
||||
theme.isBase &&
|
||||
$currentColorScheme.main.accent} !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
fill: ${isActive &&
|
||||
theme.isBase &&
|
||||
$currentColorScheme.main.accent} !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledCatalogItemContainer.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledCatalogItemContainer)(getDefaultStyles);
|
||||
@ -1,16 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledComboButton } from "@docspace/components/combobox/sub-components/styled-combobutton";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isOpen, theme }) =>
|
||||
$currentColorScheme &&
|
||||
theme.isBase &&
|
||||
css`
|
||||
border-color: ${isOpen && $currentColorScheme.main.accent};
|
||||
|
||||
:focus {
|
||||
border-color: ${isOpen && $currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(StyledComboButton)(getDefaultStyles);
|
||||
@ -1,26 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledFilterBlockItemTag } from "@docspace/common/components/FilterInput/sub-components/StyledFilterBlock";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isSelected, theme }) =>
|
||||
$currentColorScheme &&
|
||||
isSelected &&
|
||||
css`
|
||||
background: ${$currentColorScheme.main.accent};
|
||||
border-color: ${$currentColorScheme.main.accent};
|
||||
|
||||
.filter-text {
|
||||
color: ${$currentColorScheme.textColor};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: ${$currentColorScheme.main.accent};
|
||||
border-color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledFilterBlockItemTag.defaultProps = {
|
||||
theme: Base,
|
||||
};
|
||||
|
||||
export default styled(StyledFilterBlockItemTag)(getDefaultStyles);
|
||||
@ -1,38 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import {
|
||||
StyledCircleWrap,
|
||||
StyledFloatingButton,
|
||||
IconBox,
|
||||
StyledCircle,
|
||||
} from "@docspace/common/components/FloatingButton/StyledFloatingButton";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, color, displayProgress }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background: ${color || $currentColorScheme.main.accent} !important;
|
||||
|
||||
${StyledFloatingButton} {
|
||||
background: ${color || $currentColorScheme.main.accent} !important;
|
||||
}
|
||||
|
||||
${IconBox} {
|
||||
svg {
|
||||
path {
|
||||
fill: ${$currentColorScheme.text.accent};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${StyledCircle} {
|
||||
.circle__mask .circle__fill {
|
||||
background-color: ${!displayProgress
|
||||
? "transparent !important"
|
||||
: $currentColorScheme.text.accent};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledCircleWrap.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledCircleWrap)(getDefaultStyles);
|
||||
@ -1,35 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
|
||||
import StyledIcon from "../../StyledIcon";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({
|
||||
$currentColorScheme,
|
||||
shared,
|
||||
locked,
|
||||
isFavorite,
|
||||
isEditing,
|
||||
theme,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${commonIconsStyles}
|
||||
svg {
|
||||
path {
|
||||
fill: ${(shared || locked || isFavorite || isEditing) &&
|
||||
$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
fill: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledIcon.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledIcon)(getDefaultStyles);
|
||||
@ -1,28 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import commonIconsStyles from "@docspace/components/utils/common-icons-style";
|
||||
import StyledPinIcon from "../../StyledPinIcon";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
margin-top: 2px;
|
||||
${commonIconsStyles}
|
||||
svg {
|
||||
path {
|
||||
fill: ${theme.isBase && $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
path {
|
||||
fill: ${theme.isBase && $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledPinIcon.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledPinIcon)(getDefaultStyles);
|
||||
@ -1,17 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledIconWrapper from "@docspace/common/components/Navigation/sub-components/StyledIconWrapper";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
svg {
|
||||
path:nth-child(2) {
|
||||
fill: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
circle {
|
||||
stroke: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(StyledIconWrapper)(getDefaultStyles);
|
||||
@ -1,55 +0,0 @@
|
||||
export { default as ButtonTheme } from "./button";
|
||||
|
||||
export { default as MainButtonTheme } from "./mainButton";
|
||||
|
||||
export { default as CatalogItemTheme } from "./catalogItem";
|
||||
|
||||
export { default as BadgeTheme } from "./badge";
|
||||
|
||||
export { default as CalendarTheme } from './calendar'
|
||||
|
||||
export { default as SubmenuTextTheme } from "./submenuText";
|
||||
|
||||
export { default as SubmenuItemLabelTheme } from "./submenuItemLabel";
|
||||
|
||||
export { default as ToggleButtonTheme } from "./toggleButton";
|
||||
|
||||
export { default as TabsContainerTheme } from "./tabsContainer";
|
||||
|
||||
export { default as IconButtonTheme } from "./iconButton";
|
||||
|
||||
export { default as IconButtonPinTheme } from "./iconButtonPin";
|
||||
|
||||
export { default as IndicatorFilterButtonTheme } from "./indicatorFilterButton";
|
||||
|
||||
export { default as FilterBlockItemTagTheme } from "./filterBlockItemTag";
|
||||
|
||||
export { default as IconWrapperTheme } from "./iconWrapper";
|
||||
|
||||
export { default as VersionBadgeTheme } from "./versionBadge";
|
||||
|
||||
export { default as TextareaTheme } from "./textarea";
|
||||
|
||||
export { default as InputBlockTheme } from "./inputBlock";
|
||||
|
||||
export { default as TextInputTheme } from "./textInput";
|
||||
|
||||
export { default as ComboButtonTheme } from "./comboButton";
|
||||
|
||||
export { default as LinkForgotPasswordTheme } from "./linkForgotPassword";
|
||||
|
||||
export { default as LoadingButtonTheme } from "./loadingButton";
|
||||
|
||||
export { default as FloatingButtonTheme } from "./floatingButton";
|
||||
|
||||
export { default as InfoPanelToggleTheme } from "./infoPanelToggle";
|
||||
|
||||
export { default as LinkTheme } from "./link";
|
||||
|
||||
export { default as SliderTheme } from "./slider";
|
||||
|
||||
export { default as IndicatorLoaderTheme } from "./indicatorLoader";
|
||||
|
||||
export { default as ProgressTheme } from "./progress";
|
||||
|
||||
export { default as MobileProgressBarTheme } from "./mobileProgressBar";
|
||||
@ -1,14 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledIndicator from "@docspace/common/components/FilterInput/sub-components/StyledIndicator";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background: ${$currentColorScheme.main.accent};
|
||||
|
||||
&:hover {
|
||||
background: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(StyledIndicator)(getDefaultStyles);
|
||||
@ -1,21 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledWrapper from "../../StyledWrapper";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
#ipl-progress-indicator {
|
||||
background-color: ${theme.isBase
|
||||
? $currentColorScheme.main.accent
|
||||
: "#FFFFFF"};
|
||||
|
||||
&:hover {
|
||||
background-color: ${theme.isBase
|
||||
? $currentColorScheme.main.accent
|
||||
: "#FFFFFF"};
|
||||
}
|
||||
}
|
||||
`;
|
||||
StyledWrapper.defaultProps = { theme: Base };
|
||||
export default styled(StyledWrapper)(getDefaultStyles);
|
||||
@ -1,22 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledInfoPanelToggleWrapper from "../../StyledInfoPanelToggleWrapper";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isInfoPanelVisible }) =>
|
||||
$currentColorScheme && isInfoPanelVisible &&
|
||||
css`
|
||||
.info-panel-toggle-bg {
|
||||
path {
|
||||
fill: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
&:hover {
|
||||
path {
|
||||
fill: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledInfoPanelToggleWrapper)(getDefaultStyles);
|
||||
@ -1,20 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { StyledInputGroup } from "@docspace/components/input-block/styled-input-block";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) =>
|
||||
$currentColorScheme &&
|
||||
theme.isBase &&
|
||||
css`
|
||||
:focus-within {
|
||||
border-color: ${(hasError && theme.input.focusErrorBorderColor) ||
|
||||
$currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledInputGroup.defaultProps = {
|
||||
theme: Base,
|
||||
};
|
||||
|
||||
export default styled(StyledInputGroup)(getDefaultStyles);
|
||||
@ -1,15 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledText from "@docspace/components/link/styled-link";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, noHover }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
color: ${$currentColorScheme.main.accent};
|
||||
|
||||
&:hover {
|
||||
color: ${!noHover && $currentColorScheme.main.accent};
|
||||
text-decoration: underline;
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(StyledText)(getDefaultStyles);
|
||||
@ -1,12 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import LoginContainer from "../../LoginContainer";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
.login-link {
|
||||
color: ${$currentColorScheme?.main?.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(LoginContainer)(getDefaultStyles);
|
||||
@ -1,27 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import {
|
||||
StyledCircle,
|
||||
StyledLoadingButton,
|
||||
StyledCircleWrap,
|
||||
} from "../../StyledLoadingButton";
|
||||
import { Base } from "@docspace/components/themes";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${StyledCircle} {
|
||||
.circle__mask .circle__fill {
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
${StyledLoadingButton} {
|
||||
color: ${$currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledCircleWrap.defaultProps = {
|
||||
theme: Base,
|
||||
};
|
||||
|
||||
export default styled(StyledCircleWrap)(getDefaultStyles);
|
||||
@ -1,54 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledMainButton } from "@docspace/components/main-button/styled-main-button";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const disableStyles = css`
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
filter: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isDisabled, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
|
||||
&:hover {
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
opacity: 0.85;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: ${$currentColorScheme.main.accent};
|
||||
opacity: 1;
|
||||
filter: ${theme.isBase ? "brightness(90%)" : "brightness(82%)"};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main-button_text {
|
||||
color: ${$currentColorScheme.text.accent};
|
||||
}
|
||||
|
||||
.main-button_img svg path {
|
||||
fill: ${$currentColorScheme.text.accent};
|
||||
}
|
||||
|
||||
${isDisabled &&
|
||||
`
|
||||
${disableStyles}
|
||||
`}
|
||||
`;
|
||||
|
||||
StyledMainButton.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledMainButton)(getDefaultStyles);
|
||||
@ -1,14 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledBar } from "@docspace/components/main-button-mobile/styled-main-button";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, theme, error }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background: ${error
|
||||
? theme.mainButtonMobile.bar.errorBackground
|
||||
: theme.isBase
|
||||
? $currentColorScheme.main.accent
|
||||
: "#FFFFFF"};
|
||||
`;
|
||||
|
||||
export default styled(StyledBar)(getDefaultStyles);
|
||||
@ -1,15 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledPreparationPortalProgress from "../../StyledPreparationPortalProgress";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
.preparation-portal_progress-line {
|
||||
background: ${theme.isBase ? $currentColorScheme.main.accent : "#FFFFFF"};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledPreparationPortalProgress.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledPreparationPortalProgress)(getDefaultStyles);
|
||||
@ -1,37 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledSlider } from "@docspace/components/slider/styled-slider";
|
||||
|
||||
const getDefaultStyles = ({
|
||||
$currentColorScheme,
|
||||
withPouring,
|
||||
theme,
|
||||
isDisabled,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background-image: ${withPouring &&
|
||||
((theme.isBase &&
|
||||
`linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) ||
|
||||
(!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
background: ${(theme.isBase && $currentColorScheme.main.accent) ||
|
||||
(!theme.isBase && "#FFFFFF")};
|
||||
box-shadow: ${!theme.isBase &&
|
||||
"0px 3px 12px rgba(0, 0, 0, 0.25); !important"};
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-image: ${withPouring &&
|
||||
((theme.isBase &&
|
||||
`linear-gradient( ${$currentColorScheme.main.accent}, ${$currentColorScheme.main.accent})`) ||
|
||||
(!theme.isBase && `linear-gradient(#FFFFFF, #FFFFFF)`))};
|
||||
}
|
||||
|
||||
${isDisabled &&
|
||||
css`
|
||||
opacity: 0.32;
|
||||
`}
|
||||
`;
|
||||
|
||||
export default styled(StyledSlider)(getDefaultStyles);
|
||||
@ -1,15 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
|
||||
import { StyledSubmenuItemLabel } from "@docspace/components/submenu/styled-submenu";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isActive }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background-color: ${isActive ? $currentColorScheme.main.accent : "none"};
|
||||
|
||||
&:hover {
|
||||
background-color: ${isActive && $currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(StyledSubmenuItemLabel)(getDefaultStyles);
|
||||
@ -1,21 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledText from "@docspace/components/text/styled-text";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, isActive, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
color: ${isActive &&
|
||||
theme.isBase &&
|
||||
$currentColorScheme.main.accent} !important;
|
||||
|
||||
&:hover {
|
||||
color: ${isActive &&
|
||||
theme.isBase &&
|
||||
$currentColorScheme.main.accent} !important;
|
||||
}
|
||||
`;
|
||||
|
||||
StyledText.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledText)(getDefaultStyles);
|
||||
@ -1,17 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { Label } from "@docspace/components/tabs-container/styled-tabs-container";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, selected, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
background-color: ${selected && $currentColorScheme.main.accent} !important;
|
||||
|
||||
.title_style {
|
||||
color: ${selected && $currentColorScheme.text.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
Label.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(Label)(getDefaultStyles);
|
||||
@ -1,25 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import StyledTextInput from "@docspace/components/text-input/styled-text-input";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({
|
||||
$currentColorScheme,
|
||||
hasError,
|
||||
hasWarning,
|
||||
isDisabled,
|
||||
theme,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
theme.isBase &&
|
||||
css`
|
||||
:focus {
|
||||
border-color: ${(hasError && theme.input.focusErrorBorderColor) ||
|
||||
(hasWarning && theme.input.focusWarningBorderColor) ||
|
||||
(isDisabled && theme.input.focusDisabledBorderColor) ||
|
||||
$currentColorScheme.main.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTextInput.defaultProps = { theme: Base };
|
||||
|
||||
export default styled(StyledTextInput)(getDefaultStyles);
|
||||
@ -1,19 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import { StyledScrollbar } from "@docspace/components/textarea/styled-textarea";
|
||||
import Base from "@docspace/components/themes/base";
|
||||
|
||||
const getDefaultStyles = ({ $currentColorScheme, hasError, theme }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
:focus-within {
|
||||
border-color: ${hasError
|
||||
? theme?.textArea.focusErrorBorderColor
|
||||
: theme.textArea.focusBorderColor};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledScrollbar.defaultProps = {
|
||||
theme: Base,
|
||||
};
|
||||
|
||||
export default styled(StyledScrollbar)(getDefaultStyles);
|
||||
@ -1,29 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import {
|
||||
Container,
|
||||
ToggleButtonContainer,
|
||||
} from "@docspace/components/toggle-button/styled-toggle-button";
|
||||
|
||||
const getDefaultStyles = ({
|
||||
$currentColorScheme,
|
||||
isDisabled,
|
||||
isChecked,
|
||||
theme,
|
||||
}) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${ToggleButtonContainer} {
|
||||
svg {
|
||||
rect {
|
||||
fill: ${isChecked && $currentColorScheme.main.accent} !important;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: ${(isChecked && isDisabled && theme.isBase && "#FFFFFF") ||
|
||||
(isChecked && $currentColorScheme.text.accent)};
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(Container)(getDefaultStyles);
|
||||
@ -1,28 +0,0 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import Box from "@docspace/components/box";
|
||||
import VersionMarkIcon from "../../VersionMarkIcon";
|
||||
const getDefaultStyles = ({ $currentColorScheme, $isVersion, theme, index }) =>
|
||||
$currentColorScheme &&
|
||||
css`
|
||||
${VersionMarkIcon} {
|
||||
path {
|
||||
fill: ${!$isVersion
|
||||
? theme.filesVersionHistory.badge.defaultFill
|
||||
: index === 0
|
||||
? theme.filesVersionHistory.badge.fill
|
||||
: $currentColorScheme.main.accent};
|
||||
|
||||
stroke: ${!$isVersion
|
||||
? theme.filesVersionHistory.badge.stroke
|
||||
: index === 0
|
||||
? theme.filesVersionHistory.badge.fill
|
||||
: $currentColorScheme.main.accent};
|
||||
}
|
||||
}
|
||||
|
||||
.version_badge-text {
|
||||
color: ${$isVersion && index !== 0 && $currentColorScheme.text.accent};
|
||||
}
|
||||
`;
|
||||
|
||||
export default styled(Box)(getDefaultStyles);
|
||||
Loading…
Reference in New Issue
Block a user