Web:Moving style components to colorTheme components to get rid of component imports from the Common module. Moving the colorTheme components to the Components module.

packages/common/components/StyledIcon/index.js

@@ -1,9 +0,0 @@
-import styled from "styled-components";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import IconButton from "@docspace/components/icon-button";
-
-export const StyledIcon = styled(IconButton)`
-  ${commonIconsStyles}
-`;
-
-export default StyledIcon;

packages/common/components/StyledInfoPanelToggleWrapper/index.js

@@ -1,32 +0,0 @@
-import styled from "styled-components";
-import { tablet } from "@docspace/components/utils/device";
-
-const StyledInfoPanelToggleWrapper = styled.div`
-  display: flex;
-
-  @media ${tablet} {
-    display: none;
-  }
-
-  align-items: center;
-  justify-content: center;
-  padding-right: 20px;
-
-  .info-panel-toggle-bg {
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    background-color: ${(props) => !props.isInfoPanelVisible
-    ? "none"
-    : props.theme.infoPanel.sectionHeaderToggleBgActive};
-
-    path {
-      fill: ${(props) => props.theme.infoPanel.sectionHeaderToggleIconActive};
-    }
-  }
-`;
-
-export default StyledInfoPanelToggleWrapper;

packages/common/components/StyledLoadingButton/index.js

@@ -1,90 +0,0 @@
-import styled, { css, keyframes } from "styled-components";
-import { Base } from "@docspace/components/themes";
-
-const backgroundColor = "none";
-const rotate360 = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-`;
-
-const StyledCircleWrap = styled.div`
-  width: 16px;
-  height: 16px;
-  background: ${backgroundColor};
-  border-radius: 50%;
-  cursor: pointer;
-`;
-
-StyledCircleWrap.defaultProps = { theme: Base };
-
-const StyledLoadingButton = styled.div`
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  text-align: center;
-  line-height: 12px;
-  background: ${(props) =>
-    props.theme.filesPanels.upload.loadingButton.background};
-  position: absolute;
-  margin: 2px;
-  color: ${(props) => props.theme.filesPanels.upload.loadingButton.color};
-  font-size: 16px;
-  font-weight: bold;
-`;
-
-StyledLoadingButton.defaultProps = { theme: Base };
-
-const StyledCircle = styled.div`
-  .circle__mask,
-  .circle__fill {
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    border-radius: 50%;
-  }
-
-  ${(props) =>
-    props.percent === 0 || (props.isAnimation && props.inConversion)
-      ? css`
-          .circle__fill {
-            animation: ${rotate360} 2s linear infinite;
-            transform: translate(0);
-          }
-        `
-      : css`
-          .circle__mask {
-            clip: rect(0px, 16px, 16px, 8px);
-          }
-
-          .circle__fill {
-            animation: fill-rotate ease-in-out none;
-            transform: rotate(${(props) => props.percent * 1.8}deg);
-          }
-        `}
-
-  .circle__mask .circle__fill {
-    clip: rect(0px, 8px, 16px, 0px);
-    background-color: ${(props) =>
-      props.theme.filesPanels.upload.loadingButton.color};
-  }
-
-  .circle__mask.circle__full {
-    animation: fill-rotate ease-in-out none;
-    transform: rotate(${(props) => props.percent * 1.8}deg);
-  }
-
-  @keyframes fill-rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(${(props) => props.percent * 1.8}deg);
-    }
-  }
-`;
-
-export { StyledCircle, StyledLoadingButton, StyledCircleWrap };

packages/common/components/StyledPinIcon/index.js

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import commonIconsStyles from "@docspace/components/utils/common-icons-style";
-import IconButton from "@docspace/components/icon-button";
-
-const StyledPinIcon = styled(IconButton)`
-  ${commonIconsStyles}
-
-  svg {
-    path {
-      fill: ${(props) => props.theme.filesSection.rowView.pinColor};
-    }
-  }
-
-  :hover {
-    svg {
-      path {
-        fill: ${(props) => props.theme.filesSection.rowView.pinColor};
-      }
-    }
-  }
-`;
-
-export default StyledPinIcon;

packages/components/ColorTheme/styled/filterBlockItemTag.js

@@ -0,0 +1,51 @@
+import styled, { css } from "styled-components";
+import Base from "@docspace/components/themes/base";
+
+const StyledFilterBlockItemTag = styled.div`
+  height: 28px;
+  max-height: 28px;
+
+  max-width: 100%;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  border: ${(props) => props.theme.filterInput.filter.border};
+  border-radius: 16px;
+
+  box-sizing: border-box;
+
+  padding: 4px 15px;
+
+  cursor: pointer;
+
+  ${(props) => props.isSelected && selectedItemTag}
+
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+`;
+
+StyledFilterBlockItemTag.defaultProps = { theme: 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);

packages/components/ColorTheme/styled/floatingButton.js

@@ -0,0 +1,42 @@
+import styled, { css } from "styled-components";
+import Base from "@docspace/components/themes/base";
+
+const StyledCircleWrap = styled.div`
+  position: relative;
+  z-index: 500;
+  width: 48px;
+  height: 48px;
+  background: ${(props) =>
+    props.color ? props.color : props.theme.floatingButton.backgroundColor};
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: ${(props) => props.theme.floatingButton.boxShadow};
+`;
+
+const getDefaultStyles = ({ $currentColorScheme, color, displayProgress }) =>
+  $currentColorScheme &&
+  css`
+    background: ${color || $currentColorScheme.main.accent} !important;
+
+    .circle__background {
+      background: ${color || $currentColorScheme.main.accent} !important;
+    }
+
+    .icon-box {
+      svg {
+        path {
+          fill: ${$currentColorScheme.text.accent};
+        }
+      }
+    }
+
+    .circle__mask .circle__fill {
+      background-color: ${!displayProgress
+        ? "transparent !important"
+        : $currentColorScheme.text.accent};
+    }
+  `;
+
+StyledCircleWrap.defaultProps = { theme: Base };
+
+export default styled(StyledCircleWrap)(getDefaultStyles);

packages/components/ColorTheme/styled/iconButton.js

@@ -0,0 +1,39 @@
+import styled, { css } from "styled-components";
+import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import Base from "@docspace/components/themes/base";
+import IconButton from "@docspace/components/icon-button";
+
+export const StyledIcon = styled(IconButton)`
+  ${commonIconsStyles}
+`;
+
+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);

packages/components/ColorTheme/styled/iconButtonPin.js

@@ -0,0 +1,47 @@
+import styled, { css } from "styled-components";
+import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import Base from "@docspace/components/themes/base";
+
+import IconButton from "@docspace/components/icon-button";
+
+const StyledPinIcon = styled(IconButton)`
+  ${commonIconsStyles}
+
+  svg {
+    path {
+      fill: ${(props) => props.theme.filesSection.rowView.pinColor};
+    }
+  }
+
+  :hover {
+    svg {
+      path {
+        fill: ${(props) => props.theme.filesSection.rowView.pinColor};
+      }
+    }
+  }
+`;
+
+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);

packages/components/ColorTheme/styled/iconWrapper.js

@@ -1,6 +1,4 @@
-import styled from "styled-components";
-import { Base } from "@docspace/components/themes";
-
+import styled, { css } from "styled-components";
 const StyledIconWrapper = styled.div`
   width: 17px;
   display: flex;
@@ -23,6 +21,17 @@ const StyledIconWrapper = styled.div`
   }
 `;
 
-StyledIconWrapper.defaultProps = { theme: Base };
+const getDefaultStyles = ({ $currentColorScheme }) =>
+  $currentColorScheme &&
+  css`
+    svg {
+      path:nth-child(2) {
+        fill: ${$currentColorScheme.main.accent};
+      }
+      circle {
+        stroke: ${$currentColorScheme.main.accent};
+      }
+    }
+  `;
 
-export default StyledIconWrapper;
+export default styled(StyledIconWrapper)(getDefaultStyles);

packages/components/ColorTheme/styled/indicatorFilterButton.js

@@ -1,4 +1,3 @@
-import { Base } from "@docspace/components/themes";
 import styled, { css } from "styled-components";
 
 const StyledIndicator = styled.div`
@@ -13,6 +12,14 @@ const StyledIndicator = styled.div`
   z-index: 10;
 `;
 
-StyledIndicator.defaultProps = { theme: Base };
+const getDefaultStyles = ({ $currentColorScheme }) =>
+  $currentColorScheme &&
+  css`
+    background: ${$currentColorScheme.main.accent};
 
-export default StyledIndicator;
+    &:hover {
+      background: ${$currentColorScheme.main.accent};
+    }
+  `;
+
+export default styled(StyledIndicator)(getDefaultStyles);

packages/components/ColorTheme/styled/indicatorLoader.js

@@ -0,0 +1,40 @@
+import styled, { css } from "styled-components";
+import Base from "@docspace/components/themes/base";
+import { isMobileOnly } from "react-device-detect";
+
+const StyledWrapper = styled.div`
+  #ipl-progress-indicator {
+    position: fixed;
+    z-index: 390;
+    top: 0;
+    left: -6px;
+    width: 0%;
+    height: 3px;
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    border-radius: 1px;
+
+    ${isMobileOnly &&
+    css`
+      top: 48px;
+    `}
+  }
+`;
+
+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);

packages/components/ColorTheme/styled/infoPanelToggle.js

@@ -0,0 +1,52 @@
+import styled, { css } from "styled-components";
+import Base from "@docspace/components/themes/base";
+import { tablet } from "@docspace/components/utils/device";
+
+const StyledInfoPanelToggleWrapper = styled.div`
+  display: flex;
+
+  @media ${tablet} {
+    display: none;
+  }
+
+  align-items: center;
+  justify-content: center;
+  padding-right: 20px;
+
+  .info-panel-toggle-bg {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: ${(props) =>
+      !props.isInfoPanelVisible
+        ? "none"
+        : props.theme.infoPanel.sectionHeaderToggleBgActive};
+
+    path {
+      fill: ${(props) => props.theme.infoPanel.sectionHeaderToggleIconActive};
+    }
+  }
+`;
+
+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);

packages/components/ColorTheme/styled/linkForgotPassword.js

@@ -0,0 +1,272 @@
+import styled, { css } from "styled-components";
+import { tablet, hugeMobile } from "@docspace/components/utils/device";
+
+const LoginContainer = styled.div`
+  user-select: none;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 56px auto 0 auto;
+  max-width: 960px;
+  z-index: 0;
+
+  .remember-wrapper {
+    max-width: 142px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .buttonWrapper {
+    margin-bottom: 8px;
+    width: 100%;
+  }
+
+  @media ${tablet} {
+    max-width: 480px;
+  }
+
+  @media ${hugeMobile} {
+    margin: 0 auto 0 auto;
+    max-width: 311px;
+  }
+
+  .socialButton {
+    min-height: 40px;
+  }
+
+  .or-label,
+  .login-or-access-text {
+    min-height: 18px;
+  }
+
+  .login-or-access-text {
+    text-transform: lowercase;
+    color: ${(props) => props.theme.login.orTextColor};
+  }
+
+  .recover-link {
+    min-height: 19px;
+  }
+
+  .greeting-title {
+    width: 100%;
+    padding-bottom: 32px;
+    min-height: 32px;
+    color: ${(props) => props.theme.login.headerColor};
+
+    @media ${hugeMobile} {
+      padding-top: 32px;
+    }
+  }
+
+  .more-label {
+    padding-top: 18px;
+  }
+
+  .or-label {
+    color: ${(props) => props.theme.login.orTextColor};
+    margin: 0 32px;
+  }
+
+  .line {
+    display: flex;
+    width: 320px;
+    align-items: center;
+    color: ${(props) => props.theme.login.orLineColor};
+    padding: 32px 0;
+
+    @media ${tablet} {
+      width: 416px;
+    }
+
+    @media ${hugeMobile} {
+      width: 311px;
+    }
+  }
+
+  .line:before,
+  .line:after {
+    content: "";
+    flex-grow: 1;
+    background: ${(props) => props.theme.login.orLineColor};
+    height: 1px;
+    font-size: 0px;
+    line-height: 0px;
+    margin: 0px;
+  }
+
+  .code-input-container {
+    margin-top: 32px;
+    text-align: center;
+  }
+
+  .not-found-code {
+    margin-top: 32px;
+  }
+
+  .code-input-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 6px;
+    margin-top: 16px;
+    padding: 14px 12px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 11px;
+    line-height: 12px;
+    color: #333;
+    svg {
+      margin: 8px;
+    }
+  }
+
+  .code-input-bar.warning {
+    background: #f7e6be;
+    margin-bottom: 16px;
+  }
+
+  .code-input-bar.error {
+    background: #f7cdbe;
+  }
+
+  .auth-form-container {
+    width: 320px;
+
+    @media ${tablet} {
+      width: 100%;
+    }
+
+    .field-body {
+      input,
+      .password-input > div {
+        background: ${(props) => props.theme.input.backgroundColor};
+        color: ${(props) => props.theme.input.color};
+        border-color: ${(props) => props.theme.input.borderColor};
+      }
+    }
+
+    .login-forgot-wrapper {
+      margin-bottom: 14px;
+      .login-checkbox-wrapper {
+        display: flex;
+        //align-items: center;
+
+        .login-checkbox {
+          display: flex;
+          align-items: flex-start;
+
+          svg {
+            margin-right: 8px !important;
+            rect {
+              fill: ${(props) => props.theme.checkbox.fillColor};
+              stroke: ${(props) => props.theme.checkbox.borderColor};
+            }
+
+            path {
+              fill: ${(props) => props.theme.checkbox.arrowColor};
+            }
+          }
+
+          .help-button {
+            svg {
+              path {
+                fill: ${(props) => props.theme.login.helpButton};
+              }
+            }
+          }
+
+          .checkbox-text {
+            color: ${(props) => props.theme.checkbox.arrowColor};
+          }
+
+          label {
+            justify-content: center;
+          }
+        }
+
+        .remember-helper-wrapper {
+          display: flex;
+          gap: 4px;
+        }
+      }
+
+      .login-link {
+        line-height: 18px;
+        margin-left: auto;
+      }
+    }
+
+    .login-button {
+      margin-top: 8px;
+    }
+
+    .login-button-dialog {
+      margin-right: 8px;
+    }
+
+    .login-bottom-border {
+      width: 100%;
+      height: 1px;
+      background: #eceef1;
+    }
+
+    .login-bottom-text {
+      margin: 0 8px;
+    }
+
+    .login-or-access {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+
+      & > :first-child {
+        margin-top: 24px;
+      }
+    }
+  }
+
+  .logo-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 46px;
+    padding-bottom: 40px;
+
+    svg {
+      path:last-child {
+        fill: ${(props) => props.theme.client.home.logoColor};
+      }
+    }
+
+    @media ${hugeMobile} {
+      display: none;
+    }
+  }
+
+  .workspace-title {
+    color: ${(props) => props.theme.login.titleColor};
+    margin-bottom: 16px;
+
+    @media ${hugeMobile} {
+      margin-top: 32px;
+    }
+  }
+
+  .code-description {
+    color: ${(props) => props.theme.login.textColor};
+  }
+`;
+
+const getDefaultStyles = ({ $currentColorScheme }) =>
+  $currentColorScheme &&
+  css`
+    .login-link {
+      color: ${$currentColorScheme?.main?.accent};
+    }
+  `;
+
+export default styled(LoginContainer)(getDefaultStyles);

packages/components/ColorTheme/styled/loadingButton.js

@@ -0,0 +1,28 @@
+import styled, { css } from "styled-components";
+import { Base } from "@docspace/components/themes";
+
+const StyledCircleWrap = styled.div`
+  width: 16px;
+  height: 16px;
+  background: none;
+  border-radius: 50%;
+  cursor: pointer;
+`;
+
+const getDefaultStyles = ({ $currentColorScheme }) =>
+  $currentColorScheme &&
+  css`
+    .circle__mask .circle__fill {
+      background-color: ${$currentColorScheme.main.accent} !important;
+    }
+
+    .loading-button {
+      color: ${$currentColorScheme.main.accent};
+    }
+  `;
+
+StyledCircleWrap.defaultProps = {
+  theme: Base,
+};
+
+export default styled(StyledCircleWrap)(getDefaultStyles);

packages/components/ColorTheme/styled/progress.js

@@ -1,5 +1,5 @@
-import styled from "styled-components";
-import { Base } from "@docspace/components/themes";
+import styled, { css } from "styled-components";
+import Base from "@docspace/components/themes/base";
 
 const StyledPreparationPortalProgress = styled.div`
   .preparation-portal_progress {
@@ -36,6 +36,14 @@ const StyledPreparationPortalProgress = styled.div`
   }
 `;
 
+const getDefaultStyles = ({ $currentColorScheme, theme }) =>
+  $currentColorScheme &&
+  css`
+    .preparation-portal_progress-line {
+      background: ${theme.isBase ? $currentColorScheme.main.accent : "#FFFFFF"};
+    }
+  `;
+
 StyledPreparationPortalProgress.defaultProps = { theme: Base };
 
-export default StyledPreparationPortalProgress;
+export default styled(StyledPreparationPortalProgress)(getDefaultStyles);

packages/components/ColorTheme/styled/versionBadge.js

@@ -0,0 +1,54 @@
+import styled, { css } from "styled-components";
+import Box from "@docspace/components/box";
+import VersionSvg from "PUBLIC_DIR/images/versionrevision_active.react.svg";
+
+const VersionMarkIcon = styled(VersionSvg)`
+  path {
+    fill: ${(props) =>
+      !props.$isVersion
+        ? props.theme.filesVersionHistory.badge.defaultFill
+        : props.index === 0
+        ? props.theme.filesVersionHistory.badge.fill
+        : props.theme.filesVersionHistory.badge.badgeFill};
+    stroke: ${(props) =>
+      !props.$isVersion
+        ? props.theme.filesVersionHistory.badge.stroke
+        : props.index === 0
+        ? props.theme.filesVersionHistory.badge.fill
+        : props.theme.filesVersionHistory.badge.badgeFill};
+
+    stroke-dasharray: ${(props) => (props.$isVersion ? "2 0" : "3 1")};
+    stroke-linejoin: ${(props) => (props.$isVersion ? "unset" : "round")};
+
+    ${(props) =>
+      props.$isVersion &&
+      css`
+        stroke-width: 2;
+      `}
+  }
+`;
+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);