[CCUBE-1597][RL] amend styles to match design mocks

LifeSG · Oct 27, 2024 · 7322a5f · 7322a5f
1 parent 0aabee4
commit 7322a5f
Show file tree

Hide file tree

Showing 12 changed files with 152 additions and 222 deletions.
diff --git a/src/alert/alert.style.tsx b/src/alert/alert.style.tsx
@@ -69,9 +69,9 @@ export const Wrapper = styled.div<StyleProps>`
     color: ${Colour.text};
     ${(props) => {
         if (props.$sizeType === "small") {
-            return applyHtmlContentStyle({ textSize: "body-md" });
+            return applyHtmlContentStyle({ textSize: "body-sm" });
         }
-        return applyHtmlContentStyle({ textSize: "body-sm" });
+        return applyHtmlContentStyle({ textSize: "body-md" });
     }}
 `;
 
@@ -138,13 +138,11 @@ export const ActionLinkText = styled(Typography.LinkSM)<StyleProps>`
     display: flex;
     align-items: center;
     align-self: flex-start;
-    color: ${Colour.hyperlink};
 
     svg {
         height: 1rem;
         width: 1rem;
         margin-left: 0.25rem;
-        color: ${Colour.hyperlink};
     }
 `;
 

diff --git a/src/file-upload/file-upload.styles.tsx b/src/file-upload/file-upload.styles.tsx
@@ -12,20 +12,17 @@ export const TextContainer = styled.div`
     display: flex;
     flex-direction: column;
     margin-bottom: 2rem;
+    gap: 0.5rem;
 `;
 
-export const Title = styled(Typography.HeaderXS)`
-    margin-bottom: 0.5rem;
-`;
-``;
+export const Title = styled(Typography.BodyBL)``;
 
 export const TitleContainer = styled.div`
     color: ${Colour.text};
     ${applyHtmlContentStyle({ textSize: "body-baseline" })}
 `;
 
 export const Description = styled(Typography.BodyMD)`
-    margin-bottom: 0;
     color: ${Colour["text-subtler"]};
 `;
 
@@ -56,9 +53,10 @@ export const UploadButton = styled(Button.Small)`
         width: 100%;
     }
 `;
+
 export const UploadButtonLabel = styled.label`
     ${Font["body-md-semibold"]}
-    color: ${Colour["text-primary"]};
+    color: ${Colour["text-subtler"]};
     margin-top: 0.5rem;
     width: 10rem;
     text-align: center;

diff --git a/src/file-upload/file-upload.tsx b/src/file-upload/file-upload.tsx
@@ -101,7 +101,7 @@ export const FileUpload = ({
         }
 
         if (typeof title === "string") {
-            return <Title weight="regular">{title}</Title>;
+            return <Title>{title}</Title>;
         }
 
         return <TitleContainer>{title}</TitleContainer>;
@@ -113,7 +113,7 @@ export const FileUpload = ({
         }
 
         if (typeof description === "string") {
-            return <Description weight="regular">{description}</Description>;
+            return <Description>{description}</Description>;
         }
 
         return <DescriptionContainer>{description}</DescriptionContainer>;

diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx
@@ -1,36 +1,18 @@
 import styled from "styled-components";
-import { Colour, Font } from "../theme";
+import { applyHtmlContentStyle } from "../shared/html-content/html-content";
+import { Colour, FontSpec } from "../theme";
 import { Typography } from "../typography";
 
 // =============================================================================
 // STYLING
 // =============================================================================
 export const Label = styled.label`
-    ${Font["header-xs-semibold"]}
     color: ${Colour["text-subtle"]};
     margin-bottom: 0.5rem;
     display: inline-block;
 
-    a,
-    span,
-    p {
-        ${Font["header-xs-semibold"]}
-    }
-
-    a {
-        color: ${Colour.hyperlink};
-        text-decoration: none;
-
-        :hover,
-        :active,
-        :focus {
-            color: ${Colour["hyperlink-hover"]};
-
-            svg {
-                color: ${Colour["hyperlink-hover"]};
-            }
-        }
-    }
+    ${applyHtmlContentStyle({ textSize: "body-md" })}
+    font-weight: ${FontSpec["weight-semibold"]};
 `;
 
 // check input
@@ -41,9 +23,6 @@ export const ErrorMessage = styled(Typography.BodySM)`
     outline: none;
 `;
 
-export const Subtitle = styled(Typography.BodyMD)`
-    && {
-        color: ${Colour.text};
-        ${Font["body-sm-regular"]}
-    }
+export const Subtitle = styled(Typography.BodySM)`
+    color: ${Colour["text-subtler"]};
 `;
diff --git a/src/modal/modal-box.styles.tsx b/src/modal/modal-box.styles.tsx
@@ -1,7 +1,6 @@
 import styled from "styled-components";
 import { ClickableIcon } from "../shared/clickable-icon";
-import { MediaQuery } from "../theme";
-import { Colour } from "../theme";
+import { Colour, MediaQuery } from "../theme";
 
 export const Box = styled.div`
     position: relative;

diff --git a/src/modal/modal-box.tsx b/src/modal/modal-box.tsx
@@ -26,6 +26,7 @@ export const ModalBox = ({
                 onClick={onClose}
                 data-testid="close-button"
                 focusHighlight={false}
+                focusOutline="browser"
             >
                 <CrossIcon />
             </CloseButton>

diff --git a/src/shared/html-content/html-content.ts b/src/shared/html-content/html-content.ts
@@ -1,7 +1,6 @@
 import { css } from "styled-components";
-import { FontFamily } from "../../spec/text-spec/font-spec";
+import { Colour, Font, FontSpec } from "../../theme";
 import { TypographySizeType } from "../../theme/font/types";
-import { Colour, Font } from "../../theme";
 
 export interface HtmlContentStyleOptions {
     textSize?: TypographySizeType | undefined;
@@ -15,8 +14,8 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => {
         ${textSize && Font[`${textSize}-regular`]}
 
         strong {
-            font-family: ${FontFamily.OpenSans.Semibold};
-            ${textSize && Font[`${textSize}-semibold`]}
+            font-weight: ${FontSpec["weight-semibold"]};
+            ${textSize && Font[`${textSize}-semibold`]};
         }
 
         p {
@@ -25,17 +24,17 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => {
 
         // Link styling
         a {
-            font-family: ${FontFamily.OpenSans.Semibold};
+            font-weight: ${FontSpec["weight-semibold"]};
             ${textSize && Font[`${textSize}-semibold`]}
             color: ${Colour.hyperlink};
             text-decoration: none;
 
             svg {
                 color: ${Colour["icon-primary"]};
-                height: 1rem;
-                width: 1rem;
+                height: 1lh;
+                width: 1em;
                 margin-left: 0.4rem;
-                vertical-align: baseline;
+                vertical-align: middle;
             }
 
             :hover,

diff --git a/src/shared/toggle-icon/toggle-icon.styles.tsx b/src/shared/toggle-icon/toggle-icon.styles.tsx
@@ -3,7 +3,7 @@ import { Colour } from "../../theme";
 
 interface StyleProps {
     $active?: boolean;
-    disabled?: boolean;
+    $disabled?: boolean;
 }
 
 // =============================================================================
@@ -18,17 +18,29 @@ export const Wrapper = styled.div<StyleProps>`
     svg {
         height: 100%;
         width: 100%;
+    }
 
-        ${(props) => {
-            if (props.$active && !props.disabled) {
+    ${(props) => {
+        if (props.$disabled) {
+            if (props.$active) {
                 return css`
-                    color: ${Colour["icon-primary"]};
+                    color: ${Colour["icon-selected-disabled"]};
                 `;
             } else {
                 return css`
                     color: ${Colour["icon-disabled-subtle"]};
                 `;
             }
-        }};
-    }
+        }
+
+        if (props.$active) {
+            return css`
+                color: ${Colour["icon-selected"]};
+            `;
+        }
+
+        return css`
+            color: ${Colour["icon-subtle"]};
+        `;
+    }};
 `;
diff --git a/src/shared/toggle-icon/toggle-icon.tsx b/src/shared/toggle-icon/toggle-icon.tsx
@@ -42,7 +42,7 @@ export const ToggleIcon = ({
     }
 
     return (
-        <Wrapper className={className} $active={active} disabled={disabled}>
+        <Wrapper className={className} $active={active} $disabled={disabled}>
             {component}
         </Wrapper>
     );

diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts
@@ -61,7 +61,7 @@ export const LifeSGColourSet: SemanticColourSet = {
     "border-selected": getPrimitiveColour("primary-50"),
     "border-selected-subtle": getPrimitiveColour("primary-70"),
     "border-selected-subtlest": getPrimitiveColour("primary-90"),
-    "border-selected-hover": getPrimitiveColour("primary-90"),
+    "border-selected-hover": getPrimitiveColour("primary-40"),
 
     "border-focus": getPrimitiveColour("primary-60"),
     "border-focus-strong": getPrimitiveColour("primary-50"),