Shared: use colors from theme

packages/shared/components/filling-role-selector/FillingRoleSelector.stories.tsx

@@ -29,6 +29,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { FillingRoleSelector } from "./FillingRoleSelector";
 import { FillingRoleSelectorProps } from "./FillingRoleSelector.types";
+import { globalColors } from "../../themes";
 
 const meta = {
   title: "Components/FillingRoleSelector",
@@ -43,13 +44,13 @@ type Story = StoryObj<typeof FillingRoleSelector>;
 export default meta;
 
 const mockRoles = [
-  { id: "3", name: "Director", order: 3, color: "#BB85E7" },
-  { id: "2", name: "Accountant", order: 2, color: "#70D3B0" },
+  { id: "3", name: "Director", order: 3, color: globalColors.secondPurple },
+  { id: "2", name: "Accountant", order: 2, color: globalColors.secondGreen },
   {
     id: "1",
     name: "Employee",
     order: 1,
-    color: "#FBCC86",
+    color: globalColors.favoritesStatus,
     everyone: "@Everyone",
   },
 ];

packages/shared/components/media-viewer/sub-components/ViewerToolbar/ViewerToolbar.styled.ts

@@ -84,7 +84,7 @@ export const ToolbarItem = styled.li<{
       ${(props) =>
         props.$percent !== 25
           ? `fill: ${globalColors.white};`
-          : "fill: #BEBEBE;"}
+          : `fill: ${globalColors.gray};`}
     }
   }
 

packages/shared/components/snackbar/SnackbarAction.styled.ts

@@ -29,12 +29,13 @@ import styled from "styled-components";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
 
 import { commonIconsStyles } from "../../utils";
+import { globalColors } from "../../themes";
 
 const StyledCrossIcon = styled(CrossReactSvg)`
   ${commonIconsStyles}
 
   path {
-    fill: #999976;
+    fill: ${globalColors.gray};
   }
 `;
 

packages/shared/constants/index.ts

@@ -125,7 +125,7 @@ export const PROVIDERS_DATA = Object.freeze({
   twitter: {
     label: "twitter",
     icon: ShareTwitterReactSvgUrl,
-    iconOptions: { color: "#2AA3EF" },
+    iconOptions: { color: globalColors.twitterColor },
   },
   linkedin: {
     label: "linkedin",

packages/shared/themes/globalColors.ts

@@ -109,6 +109,7 @@ export const globalColors = {
   windowsColor: "#4C83CD",
   linuxColor: "#F4BB40",
   androidColor: "#A8D548",
+  twitterColor: "#2AA3EF",
   //
 
   tickColor: "#20D21F",