Merge pull request #1422 from AletheiaFact/Names-colors-more-generic

Suggestion names in component colors
AletheiaFact · Nov 18, 2024 · 90e8de3 · 90e8de3
2 parents f30e334 + d57c866
commit 90e8de3
Show file tree

Hide file tree

Showing 120 changed files with 332 additions and 332 deletions.
diff --git a/config/README-EN.md b/config/README-EN.md
@@ -66,28 +66,28 @@ If defined in `localConfig`, they will be rendered on the site; otherwise, the c
 {
 theme: {
         colors:{
-            bluePrimary: "",
-            blueSecondary: "",
-            blueTertiary: "",
-            blueQuartiary: "",
-            grayPrimary: "",
-            graySecondary: "",
-            grayTertiary: "",
-            lightGray: "",
-            lightGraySecondary: "",
-            lightBluePrimary: "",
-            lightBlueMain: "",
-            lightBlueSecondary: "",
-            white: "",
-            blackPrimary: "",
+            primary: "",
+            secondary: "",
+            tertiary: "",
+            quartiary: "",
+            lightPrimary: "",
+            lightSecondary: "",
+            lightTertiary: "",
+            black: "",
             blackSecondary: "",
             blackTertiary: "",
-            lightYellow: "",
-            logoWhite: "",
-            redText: "",
+            neutral: "",
+            neutralSecondary: "",
+            neutralTertiary: "",
+            lightNeutral: "",
+            lightNeutralSecondary: "",
+            white: "",
             warning: "",
+            shadow: "",
+            logo: "",
+            error: "",
             active: "",
-            inactive: ""
+            inactive: "",
                     }
                }
 }

diff --git a/config/README-PT.md b/config/README-PT.md
@@ -66,28 +66,28 @@ Caso sejam definidas no `localConfig` , elas serão renderizadas no site; caso c
 {
 theme: {
         colors:{
-            bluePrimary: "",
-            blueSecondary: "",
-            blueTertiary: "",
-            blueQuartiary: "",
-            grayPrimary: "",
-            graySecondary: "",
-            grayTertiary: "",
-            lightGray: "",
-            lightGraySecondary: "",
-            lightBluePrimary: "",
-            lightBlueMain: "",
-            lightBlueSecondary: "",
-            white: "",
-            blackPrimary: "",
+            primary: "",
+            secondary: "",
+            tertiary: "",
+            quartiary: "",
+            lightPrimary: "",
+            lightSecondary: "",
+            lightTertiary: "",
+            black: "",
             blackSecondary: "",
             blackTertiary: "",
-            lightYellow: "",
-            logoWhite: "",
-            redText: "",
+            neutral: "",
+            neutralSecondary: "",
+            neutralTertiary: "",
+            lightNeutral: "",
+            lightNeutralSecondary: "",
+            white: "",
             warning: "",
+            shadow: "",
+            logo: "",
+            error: "",
             active: "",
-            inactive: ""
+            inactive: "",
                     }
                }
 }

diff --git a/config/localConfig.schema.ts b/config/localConfig.schema.ts
@@ -7,26 +7,26 @@ const hexPattern = z
 const LocalConfigSchema = z.object({
     theme: z.object({
         colors: z.object({
-            bluePrimary: hexPattern,
-            white: hexPattern,
-            blackPrimary: hexPattern,
-            logoWhite: hexPattern,
-            blackTertiary: hexPattern,
-            blueSecondary: hexPattern,
-            blueTertiary: hexPattern,
-            blueQuartiary: hexPattern,
-            grayPrimary: hexPattern,
-            graySecondary: hexPattern,
-            grayTertiary: hexPattern,
-            lightGray: hexPattern,
-            lightGraySecondary: hexPattern,
-            lightBluePrimary: hexPattern,
-            lightBlueMain: hexPattern,
-            lightBlueSecondary: hexPattern,
+            primary: hexPattern,
+            secondary: hexPattern,
+            tertiary: hexPattern,
+            quartiary: hexPattern,
+            lightPrimary: hexPattern,
+            lightSecondary: hexPattern,
+            lightTertiary: hexPattern,
+            black: hexPattern,
             blackSecondary: hexPattern,
-            lightYellow: hexPattern,
-            redText: hexPattern,
+            blackTertiary: hexPattern,
+            neutral: hexPattern,
+            neutralSecondary: hexPattern,
+            neutralTertiary: hexPattern,
+            lightNeutral: hexPattern,
+            lightNeutralSecondary: hexPattern,
+            white: hexPattern,
             warning: hexPattern,
+            shadow: hexPattern,
+            logo: hexPattern,
+            error: hexPattern,
             active: hexPattern,
             inactive: hexPattern,
         }),

diff --git a/server/summarization/summarization-crawler.service.ts b/server/summarization/summarization-crawler.service.ts
@@ -86,7 +86,7 @@ export class SummarizationCrawlerService {
                             font-weight: bold;
                         }
                         a {
-                            color: ${colors.bluePrimary};
+                            color: ${colors.primary};
                         }
                         .not-fact {
                             color: #006060;   

diff --git a/src/components/About/About.tsx b/src/components/About/About.tsx
@@ -15,7 +15,7 @@ const About = () => {
     return (
         <Row
             style={{
-                color: colors.bluePrimary,
+                color: colors.primary,
                 justifyContent: "center",
                 width: "100%",
                 fontSize: "1rem",

diff --git a/src/components/AffixButton/AffixButton.tsx b/src/components/AffixButton/AffixButton.tsx
@@ -133,11 +133,11 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
             >
                 <PulseAnimation
                     pulse={isModalVisible}
-                    startColor={colors.blueSecondary}
+                    startColor={colors.secondary}
                     endColor={
                         nameSpace === NameSpaceEnum.Main
-                            ? colors.bluePrimary
-                            : colors.blueSecondary
+                            ? colors.primary
+                            : colors.secondary
                     }
                     startSize={0}
                     endSize={65}

diff --git a/src/components/AffixButton/AffixCTAButton.tsx b/src/components/AffixButton/AffixCTAButton.tsx
@@ -20,7 +20,7 @@ const CloseIcon = () => {
             placement="topRight"
             defaultOpen
             color={colors.white}
-            overlayInnerStyle={{ color: colors.blackPrimary }}
+            overlayInnerStyle={{ color: colors.black }}
         >
             <CloseOutlined
                 style={{

diff --git a/src/components/AffixButton/Fab.tsx b/src/components/AffixButton/Fab.tsx
@@ -25,9 +25,9 @@ const Fab = ({ tooltipText, style, icon, size, ...rest }: FabProps) => {
                     background: colors.white,
                     color:
                         nameSpaceProp === NameSpaceEnum.Main
-                            ? colors.bluePrimary
-                            : colors.blueSecondary,
-                    boxShadow: `0px 8px 24px ${colors.colorShadow}`,
+                            ? colors.primary
+                            : colors.secondary,
+                    boxShadow: `0px 8px 24px ${colors.shadow}`,
                     display: "grid",
                     placeContent: "center",
                     width: size,

diff --git a/src/components/AletheiaAvatar.tsx b/src/components/AletheiaAvatar.tsx
@@ -18,7 +18,7 @@ const AletheiaAvatar = ({ size, src, alt }: AletheiaAvatarProps) => {
             style={{
                 width: size + borderGap,
                 height: size + borderGap,
-                border: `${borderWidth}px solid ${colors.blueQuartiary}`,
+                border: `${borderWidth}px solid ${colors.quartiary}`,
                 display: "grid",
                 placeContent: "center",
                 borderRadius: "50%",

diff --git a/src/components/AletheiaInput.tsx b/src/components/AletheiaInput.tsx
@@ -2,8 +2,8 @@ import styled from "styled-components";
 import colors from "../styles/colors";
 
 const AletheiaInput = styled.input`
-    background: ${(props) => (props.white ? colors.white : colors.lightGray)};
-    box-shadow: 0px 2px 2px ${colors.colorShadow};
+    background: ${(props) => (props.white ? colors.white : colors.lightNeutral)};
+    box-shadow: 0px 2px 2px ${colors.shadow};
     border-radius: 4px;
     border: none;
     height: 40px;
@@ -16,7 +16,7 @@ const AletheiaInput = styled.input`
 
     :focus {
         border: none;
-        box-shadow: 0px 2px 2px ${colors.colorShadow};
+        box-shadow: 0px 2px 2px ${colors.shadow};
     }
 
     :active {

diff --git a/src/components/AletheiaMenu.tsx b/src/components/AletheiaMenu.tsx
@@ -35,8 +35,8 @@ const AletheiaMenu = () => {
             mode="inline"
             theme="light"
             style={{
-                backgroundColor: colors.lightGray,
-                color: colors.blackPrimary,
+                backgroundColor: colors.lightNeutral,
+                color: colors.black,
                 fontSize: "16px",
                 padding: "0px 24px",
             }}

diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
@@ -14,7 +14,7 @@ function BackButton({ style, callback }: { style?: CSSProperties; callback?: ()
             <a
                 style={{
                     fontWeight: "bold",
-                    color: colors.blueSecondary,
+                    color: colors.secondary,
                     ...style
                 }}
                 data-cy="testBackButton"

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -26,12 +26,12 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = (
 ) => {
     const [nameSpace] = useAtom(currentNameSpace);
 
-    const [backgroundColor, setBackgroundColor] = useState(colors.bluePrimary);
+    const [backgroundColor, setBackgroundColor] = useState(colors.primary);
     useLayoutEffect(() => {
         setBackgroundColor(
             nameSpace === NameSpaceEnum.Main
-                ? colors.bluePrimary
-                : colors.blueSecondary
+                ? colors.primary
+                : colors.secondary
         );
     }, [nameSpace]);
 
@@ -57,8 +57,8 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = (
         case ButtonType.gray:
             buttonStyle = {
                 ...buttonStyle,
-                background: colors.lightGray,
-                borderColor: colors.lightGray,
+                background: colors.lightNeutral,
+                borderColor: colors.lightNeutral,
                 color: backgroundColor,
             };
             break;
@@ -81,8 +81,8 @@ const AletheiaButton: (props: IAletheiaButtonProps) => JSX.Element = (
         case ButtonType.lightBlue:
             buttonStyle = {
                 ...buttonStyle,
-                background: colors.lightBlueMain,
-                borderColor: colors.lightBlueMain,
+                background: colors.lightPrimary,
+                borderColor: colors.lightPrimary,
                 color: colors.white,
             };
             break;

diff --git a/src/components/CardBase.tsx b/src/components/CardBase.tsx
@@ -5,9 +5,9 @@ const CardBase = ({ children, style = {} }) => {
     return (
         <Row style={{
             background: colors.white,
-            border: `1px solid ${colors.lightGraySecondary}`,
+            border: `1px solid ${colors.lightNeutralSecondary}`,
             boxSizing: "border-box",
-            boxShadow: `0px 3px 3px ${colors.colorShadow}`,
+            boxShadow: `0px 3px 3px ${colors.shadow}`,
             borderRadius: "10px",
             marginBottom: "10px",
             ...style

diff --git a/src/components/Claim/ClaimCard.tsx b/src/components/Claim/ClaimCard.tsx
@@ -167,7 +167,7 @@ const ClaimCard = ({
                                 <span
                                     style={{
                                         color:
-                                            ReviewColors[review?._id] || colors.blackPrimary,
+                                            ReviewColors[review?._id] || colors.black,
                                         fontWeight: 900,
                                         textTransform: "uppercase",
                                         margin: "0px 3px",

diff --git a/src/components/Claim/ClaimCardHeader.tsx b/src/components/Claim/ClaimCardHeader.tsx
@@ -38,7 +38,7 @@ const ClaimCardHeader = ({
                             lineHeight: "20px",
                             fontWeight: 600,
                             marginBottom: 0,
-                            color: colors.blackPrimary,
+                            color: colors.black,
                         }}
                     >
                         {personality.name}

diff --git a/src/components/Claim/ClaimSentence.tsx b/src/components/Claim/ClaimSentence.tsx
@@ -7,12 +7,12 @@ import { useDispatch } from "react-redux";
 import SentencePopover from "./SentencePopover";
 
 const Sentence = styled.a`
-    color: ${colors.bluePrimary};
+    color: ${colors.primary};
     font-size: 18px;
     line-height: 27px;
 
     :hover {
-        color: ${colors.bluePrimary};
+        color: ${colors.primary};
         text-decoration: underline;
     }
 `;

diff --git a/src/components/Claim/ClaimSummary.tsx b/src/components/Claim/ClaimSummary.tsx
@@ -4,7 +4,7 @@ import colors from "../../styles/colors";
 
 const ClaimSummary = styled(Row)`
     position: relative;
-    background: ${colors.lightGraySecondary};
+    background: ${colors.lightNeutralSecondary};
     display:flex;
     padding: 12px 0px 0px 16px;
     margin: 1em auto;
@@ -18,7 +18,7 @@ const ClaimSummary = styled(Row)`
         border-top: none;
         border-right: 12px solid transparent;
         border-left: 12px solid transparent;
-        border-bottom: 12px solid ${colors.lightGraySecondary};
+        border-bottom: 12px solid ${colors.lightNeutralSecondary};
     }
 
     &.claim-review {

diff --git a/src/components/Claim/ClaimSummaryContent.tsx b/src/components/Claim/ClaimSummaryContent.tsx
@@ -65,7 +65,7 @@ const ClaimSummaryContent = ({
                         <p
                             style={{
                                 fontSize: 16,
-                                color: colors.blackPrimary,
+                                color: colors.black,
                                 fontWeight: 400,
                                 margin: 0,
                                 lineHeight: 1.6,

diff --git a/src/components/Claim/CreateClaim/BaseClaimForm.tsx b/src/components/Claim/CreateClaim/BaseClaimForm.tsx
@@ -135,7 +135,7 @@ const BaseClaimForm = ({
             {disclaimer && (
                 <Form.Item
                     style={{
-                        color: colors.redText,
+                        color: colors.error,
                     }}
                 >
                     {disclaimer}

diff --git a/src/components/Claim/SentencePopover.tsx b/src/components/Claim/SentencePopover.tsx
@@ -10,7 +10,7 @@ const SentencePopover = () => {
     const content = (
         <span
             style={{
-                color: colors.bluePrimary,
+                color: colors.primary,
                 lineHeight: "20px",
                 fontSize: 14,
                 display: "flex",
@@ -25,7 +25,7 @@ const SentencePopover = () => {
 
     return (
         <Popover placement="top" content={content} trigger="hover">
-            <InfoCircleOutlined style={{ color: colors.graySecondary }} />
+            <InfoCircleOutlined style={{ color: colors.neutralSecondary }} />
         </Popover>
     );
 };

diff --git a/src/components/ClaimReview/ClaimReviewDrawer.tsx b/src/components/ClaimReview/ClaimReviewDrawer.tsx
@@ -116,13 +116,13 @@ const ClaimReviewDrawer = () => {
                                     <ExclamationCircleOutlined
                                         style={{
                                             fontSize: 16,
-                                            color: colors.blueSecondary,
+                                            color: colors.secondary,
                                             paddingBottom: 4,
                                         }}
                                     />
                                     <span
                                         style={{
-                                            color: colors.blueSecondary,
+                                            color: colors.secondary,
                                             lineHeight: "16px",
                                         }}
                                     >