From 66b3c358552e9465660755550c7e6f124988fd15 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 18 Oct 2024 10:53:32 +0800 Subject: [PATCH 1/5] [CCUBE-1597][MAHI]Add html-content.ts file with changes and its respective usages --- src/alert/alert.style.tsx | 62 +++++++------- src/file-upload/file-upload.styles.tsx | 30 +++---- src/markup/markup.style.tsx | 9 +- src/markup/types.ts | 5 +- src/popover-v2/popover.styles.tsx | 13 ++- src/popover-v2/popover.tsx | 4 +- src/shared/html-content/html-content.ts | 20 ++--- src/toggle/toggle.styles.tsx | 106 +++++++++++------------- stories/markup/markup.stories.tsx | 4 +- 9 files changed, 120 insertions(+), 133 deletions(-) diff --git a/src/alert/alert.style.tsx b/src/alert/alert.style.tsx index abd720654..be5e50f99 100644 --- a/src/alert/alert.style.tsx +++ b/src/alert/alert.style.tsx @@ -1,9 +1,9 @@ import { ChevronDownIcon } from "@lifesg/react-icons"; import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color/color"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; import { AlertSizeType, AlertType } from "./types"; +import { Colour, Font } from "../theme"; +import { Typography } from "../typography"; // ============================================================================= // STYLE INTERFACES, transient props are denoted with $ @@ -35,28 +35,28 @@ export const Wrapper = styled.div` let borderColor: string; switch (props.$type) { case "error": - backgroundColor = V2_Color.Validation.Red.Background(props); - borderColor = V2_Color.Validation.Red.Border(props); + backgroundColor = Colour["bg-error"](props); + borderColor = Colour["border-error"](props); break; case "success": - backgroundColor = V2_Color.Validation.Green.Background(props); - borderColor = V2_Color.Validation.Green.Border(props); + backgroundColor = Colour["bg-success"](props); + borderColor = Colour["border-success"](props); break; case "warning": - backgroundColor = V2_Color.Validation.Orange.Background(props); - borderColor = V2_Color.Validation.Orange.Border(props); + backgroundColor = Colour["bg-warning"](props); + borderColor = Colour["border-warning"](props); break; case "info": - backgroundColor = V2_Color.Validation.Blue.Background(props); - borderColor = V2_Color.Validation.Blue.Border(props); + backgroundColor = Colour["bg-info"](props); + borderColor = Colour["border-info"](props); break; case "description": - backgroundColor = V2_Color.Neutral[7](props); - borderColor = V2_Color.Neutral[4](props); + backgroundColor = Colour["bg-strong"](props); + borderColor = Colour["border-strong"](props); break; default: - backgroundColor = V2_Color.Validation.Orange.Background(props); - borderColor = V2_Color.Validation.Orange.Border(props); + backgroundColor = Colour["bg-warning"](props); + borderColor = Colour["border-warning"](props); break; } @@ -66,12 +66,12 @@ export const Wrapper = styled.div` `; }} - color: ${V2_Color.Neutral[1]}; + color: ${Colour.text}; ${(props) => { if (props.$sizeType === "small") { - return applyHtmlContentStyle({ textSize: "H6" }); + return applyHtmlContentStyle({ textSize: "header-xs" }); } - return applyHtmlContentStyle({ textSize: "BodySmall" }); + return applyHtmlContentStyle({ textSize: "body-sm" }); }} `; @@ -92,22 +92,22 @@ export const AlertIconWrapper = styled.div` const iconSize = props.$sizeType === "small" ? "1.25rem" : "1.5rem"; switch (props.$type) { case "error": - iconColor = V2_Color.Validation.Red.Icon(props); + iconColor = Colour["icon-error"](props); break; case "success": - iconColor = V2_Color.Validation.Green.Icon(props); + iconColor = Colour["icon-success"](props); break; case "warning": - iconColor = V2_Color.Validation.Orange.Icon(props); + iconColor = Colour["icon-warning"](props); break; case "info": - iconColor = V2_Color.Validation.Blue.Icon(props); + iconColor = Colour["icon-info"](props); break; case "description": - iconColor = V2_Color.Neutral[4](props); + iconColor = Colour["icon-subtle"](props); break; default: - iconColor = V2_Color.Validation.Orange.Icon(props); + iconColor = Colour["icon-warning"](props); break; } @@ -121,16 +121,16 @@ export const AlertIconWrapper = styled.div` }} `; -export const ActionLinkText = styled(V2_Text.Hyperlink.Small)` +export const ActionLinkText = styled(Typography.LinkSM)` ${(props) => { if (props.$sizeType === "small") return css` - ${V2_TextStyleHelper.getTextStyle("H6", "semibold")} + ${Font["body-sm-semibold"]} margin-top: 0.25rem; `; else { return css` - ${V2_TextStyleHelper.getTextStyle("H5", "semibold")} + ${Font["body-md-semibold"]} margin-top: 0.5rem; `; } @@ -138,13 +138,13 @@ export const ActionLinkText = styled(V2_Text.Hyperlink.Small)` display: flex; align-items: center; align-self: flex-start; - color: ${V2_Color.Primary}; + color: ${Colour.hyperlink}; svg { height: 1rem; width: 1rem; margin-left: 0.25rem; - color: ${V2_Color.Primary}; + color: ${Colour.hyperlink}; } `; @@ -182,11 +182,11 @@ export const ShowMoreButton = styled.button` ${(props) => { if (props.$sizeType === "small") return css` - ${V2_TextStyleHelper.getTextStyle("H6", "semibold")} + ${Font["body-sm-semibold"]} `; else { return css` - ${V2_TextStyleHelper.getTextStyle("H5", "semibold")} + ${Font["body-md-semibold"]} `; } }} @@ -202,7 +202,7 @@ export const ShowMoreButton = styled.button` border: none; background: transparent; - color: ${V2_Color.Primary}; + color: ${Colour["text-primary"]}; `; export const ChevronIcon = styled(ChevronDownIcon)` diff --git a/src/file-upload/file-upload.styles.tsx b/src/file-upload/file-upload.styles.tsx index c1e065159..223561416 100644 --- a/src/file-upload/file-upload.styles.tsx +++ b/src/file-upload/file-upload.styles.tsx @@ -1,10 +1,9 @@ import styled from "styled-components"; import { Alert } from "../alert"; import { Button } from "../button"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; +import { Colour, Font, MediaQuery } from "../theme"; +import { Typography } from "../typography"; // ============================================================================= // STYLING @@ -15,23 +14,24 @@ export const TextContainer = styled.div` margin-bottom: 2rem; `; -export const Title = styled(V2_Text.H4)` +export const Title = styled(Typography.HeaderXS)` margin-bottom: 0.5rem; `; +``; export const TitleContainer = styled.div` - color: ${V2_Color.Neutral[1]}; - ${applyHtmlContentStyle({ textSize: "Body" })} + color: ${Colour.text}; + ${applyHtmlContentStyle({ textSize: "body-baseline" })} `; -export const Description = styled(V2_Text.BodySmall)` +export const Description = styled(Typography.BodyMD)` margin-bottom: 0; - color: ${V2_Color.Neutral[3]}; + color: ${Colour["text-subtler"]}; `; export const DescriptionContainer = styled.div` - color: ${V2_Color.Neutral[3]}; - ${applyHtmlContentStyle({ textSize: "BodySmall" })} + color: ${Colour.text}; + ${applyHtmlContentStyle({ textSize: "body-md" })} `; export const WarningAlert = styled(Alert)` @@ -44,7 +44,7 @@ export const UploadButtonContainer = styled.div` flex-direction: column; align-items: flex-end; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { align-items: flex-start; } `; @@ -52,17 +52,17 @@ export const UploadButtonContainer = styled.div` export const UploadButton = styled(Button.Small)` width: 10rem; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { width: 100%; } `; export const UploadButtonLabel = styled.label` - ${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")} - color: ${V2_Color.Neutral[3]}; + ${Font["body-md-semibold"]} + color: ${Colour["text-primary"]}; margin-top: 0.5rem; width: 10rem; text-align: center; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { display: none; visibility: hidden; } diff --git a/src/markup/markup.style.tsx b/src/markup/markup.style.tsx index 396d4ed56..9a76f1621 100644 --- a/src/markup/markup.style.tsx +++ b/src/markup/markup.style.tsx @@ -1,14 +1,13 @@ import styled, { css } from "styled-components"; -import { - HtmlContentStyleOptions, - applyHtmlContentStyle, -} from "../shared/html-content/html-content"; +import { applyHtmlContentStyle } from "../shared/html-content/html-content"; +import { TypographySizeType } from "../theme/font/types"; // ============================================================================= // STYLE INTERFACES // ============================================================================= interface ContainerStyleProps { - $textSize?: HtmlContentStyleOptions["textSize"] | undefined; + // $textSize?: HtmlContentStyleOptions["textSize"] | undefined; + $textSize?: TypographySizeType | undefined; $textColor?: string | ((props: unknown) => string) | undefined; } diff --git a/src/markup/types.ts b/src/markup/types.ts index 823e56c81..4b824e461 100644 --- a/src/markup/types.ts +++ b/src/markup/types.ts @@ -1,8 +1,9 @@ -import { V2_TextSizeType } from "../v2_text"; +import { TypographySizeType } from "../theme/font/types"; export interface MarkupProps extends React.HTMLAttributes { /** The default font size. If not specified, inherited from the parent */ - baseTextSize?: V2_TextSizeType | undefined; + // baseTextSize?: TypographySizeType | undefined; + baseTextSize?: TypographySizeType | undefined; /** The default font color. If not specified, inherited from the parent */ baseTextColor?: string | ((props: unknown) => string) | undefined; /** diff --git a/src/popover-v2/popover.styles.tsx b/src/popover-v2/popover.styles.tsx index a31ffd5fc..6acc4467e 100644 --- a/src/popover-v2/popover.styles.tsx +++ b/src/popover-v2/popover.styles.tsx @@ -1,9 +1,8 @@ import styled from "styled-components"; import { Card } from "../card"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { ModalBox } from "../modal/modal-box"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; +import { Colour, MediaQuery } from "../theme"; // ============================================================================= // STYLING @@ -15,10 +14,10 @@ export const PopoverContainer = styled.div` `; export const PopoverCard = styled(Card)` - color: ${V2_Color.Neutral[1]}; - ${applyHtmlContentStyle({ textSize: "BodySmall" })} + color: ${Colour.text}; + ${applyHtmlContentStyle({ textSize: "body-md" })} - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { display: none; } `; @@ -34,6 +33,6 @@ export const ContentWrapper = styled.div` display: none; /* Chrome/Safari/Webkit */ } - color: ${V2_Color.Neutral[1]}; - ${applyHtmlContentStyle({ textSize: "BodySmall" })} + color: ${Colour.text}; + ${applyHtmlContentStyle({ textSize: "body-md" })} `; diff --git a/src/popover-v2/popover.tsx b/src/popover-v2/popover.tsx index 5f1775da1..544872c95 100644 --- a/src/popover-v2/popover.tsx +++ b/src/popover-v2/popover.tsx @@ -1,7 +1,6 @@ import { useMediaQuery } from "react-responsive"; import { Modal } from "../modal/modal"; import { MediaWidths } from "../spec/media-spec"; -import { V2_Text } from "../v2_text/text"; import { ContentWrapper, MobileModalBox, @@ -9,6 +8,7 @@ import { PopoverContainer, } from "./popover.styles"; import { PopoverV2Props } from "./types"; +import { Typography } from "../typography"; export const PopoverV2 = ({ children, @@ -38,7 +38,7 @@ export const PopoverV2 = ({ // ============================================================================= const renderContent = () => typeof children === "string" ? ( - {children} + {children} ) : ( children ); diff --git a/src/shared/html-content/html-content.ts b/src/shared/html-content/html-content.ts index 99db7b736..32d60d2d6 100644 --- a/src/shared/html-content/html-content.ts +++ b/src/shared/html-content/html-content.ts @@ -1,10 +1,10 @@ import { css } from "styled-components"; -import { V2_Color } from "../../v2_color"; import { FontFamily } from "../../spec/text-spec/font-spec"; -import { V2_TextSizeType, V2_TextStyleHelper } from "../../v2_text"; +import { TypographySizeType } from "../../theme/font/types"; +import { Colour, Font } from "../../theme"; export interface HtmlContentStyleOptions { - textSize?: V2_TextSizeType | undefined; + textSize?: TypographySizeType | undefined; } export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => { @@ -12,11 +12,11 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => { return css` // Text styling - ${textSize && V2_TextStyleHelper.getTextStyle(textSize, "regular")} + ${textSize && Font[`${textSize}-regular`]} strong { font-family: ${FontFamily.OpenSans.Semibold}; - ${textSize && V2_TextStyleHelper.getTextStyle(textSize, "semibold")} + ${textSize && Font[`${textSize}-semibold`]} } p { @@ -26,12 +26,12 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => { // Link styling a { font-family: ${FontFamily.OpenSans.Semibold}; - ${textSize && V2_TextStyleHelper.getTextStyle(textSize, "semibold")} - color: ${V2_Color.Primary}; + ${textSize && Font[`${textSize}-semibold`]} + color: ${Colour.hyperlink}; text-decoration: none; svg { - color: ${V2_Color.Primary}; + color: ${Colour["icon-primary"]}; height: 1rem; width: 1rem; margin-left: 0.4rem; @@ -42,10 +42,10 @@ export const applyHtmlContentStyle = (options?: HtmlContentStyleOptions) => { :active, :visited, :focus { - color: ${V2_Color.Secondary}; + color: ${Colour["hyperlink-hover"]}; svg { - color: ${V2_Color.Secondary}; + color: ${Colour["icon-hover"]}; } } } diff --git a/src/toggle/toggle.styles.tsx b/src/toggle/toggle.styles.tsx index 5a2be2272..25742ea22 100644 --- a/src/toggle/toggle.styles.tsx +++ b/src/toggle/toggle.styles.tsx @@ -1,11 +1,11 @@ import styled, { css } from "styled-components"; import { Alert } from "../alert"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; import { TextList } from "../text-list"; import { ToggleStyleType } from "./types"; +import { Colour, Font } from "../theme"; +import { MediaQuery } from "../theme"; +import { Typography } from "../typography"; // ============================================================================= // STYLE INTERFACES, transient props are denoted with $ @@ -67,18 +67,14 @@ export const Container = styled.div` case "no-border": { if (props.$error) { return css` - border-color: ${V2_Color.Validation.Red.Icon}; - - :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Red}; - } + border-color: ${Colour["border-error"]}; `; } else if (!props.$disabled) { return css` border-color: transparent; :hover { - background: ${V2_Color.Accent.Light[6]}; + background: ${Colour.bg}; } `; } else { @@ -91,36 +87,27 @@ export const Container = styled.div` default: { if (props.$disabled && !props.$selected) { return css` - border-color: ${V2_Color.Neutral[5]}; + border-color: ${Colour["border-disabled"]}; `; } else if (props.$disabled && props.$selected) { return css` - border-color: ${V2_Color.Neutral[4]}; + border-color: ${Colour["border-selected-disabled"]}; `; } else if (props.$error) { return css` - border-color: ${V2_Color.Validation.Red.Border}; - - :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Red}; - } + border-color: ${Colour["border-error"]}; `; } else if (props.$selected) { return css` - border-color: ${V2_Color.Primary}; - - :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent}; - } + border-color: ${Colour["border-selected"]}; `; } else { return css` - background: ${V2_Color.Neutral[8]}; - border-color: ${V2_Color.Neutral[5]}; + background: ${Colour.bg}; + border-color: ${Colour.border}; :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent}; - border-color: ${V2_Color.Accent.Light[1]}; + border-color: ${Colour["border-hover-strong"]}; } `; } @@ -155,11 +142,11 @@ export const Label = styled.label` ${(props) => { if (props.$selected && !props.$indicator) { return css` - ${V2_TextStyleHelper.getTextStyle("H4", "semibold")} + ${Font["header-xs-semibold"]} `; } else { return css` - ${V2_TextStyleHelper.getTextStyle("H4", "regular")} + ${Font["header-xs-regular"]} `; } }} @@ -169,29 +156,29 @@ export const Label = styled.label` -webkit-box-orient: vertical; overflow-wrap: break-word; -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? "none"}; - ${V2_MediaQuery.MaxWidth.tablet} { + ${MediaQuery.MaxWidth.xl} { -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? "none"}; } - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.md} { -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? "none"}; } - color: ${V2_Color.Neutral[1]}; + color: ${Colour.text}; ${(props) => { if (props.$disabled) { return css` - color: ${V2_Color.Neutral[3]}; + color: ${Colour["text-disabled"]}; `; } else if (props.$selected) { return css` - color: ${V2_Color.Primary}; + color: ${Colour["text-selected"]}; `; } }} `; export const SubLabel = styled.div` - ${V2_TextStyleHelper.getTextStyle("BodySmall", "regular")} + ${Font["body-lg-regular"]} margin-top: 0.5rem; z-index: 1; // forces sublabel to render above the input @@ -199,22 +186,22 @@ export const SubLabel = styled.div` strong, b { - ${V2_TextStyleHelper.getFontFamily("BodySmall", "semibold")} + ${Font["body-lg-semibold"]} color: inherit; } ${(props) => { if (props.$disabled) { return css` - color: ${V2_Color.Neutral[3]}; + color: ${Colour["text-disabled"]}; `; } else if (props.$selected) { return css` - color: ${V2_Color.Primary}; + color: ${Colour["text-selected"]}; `; } else { return css` - color: ${V2_Color.Neutral[1]}; + color: ${Colour.text}; `; } }} @@ -231,38 +218,41 @@ export const HeaderContainer = styled.div` case "no-border": { if (props.$error) { return css` - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; `; } else if (!props.$disabled) { return css` :hover { - background: ${V2_Color.Accent.Light[6]}; + background: ${Colour.bg}; + border: ${Colour.border}; } `; } else { - return css``; + return css` + border: ${Colour["border-disabled"]}; + `; } } default: { if (props.$disabled && !props.$selected) { return css` - background: ${V2_Color.Neutral[6]}; + background: ${Colour["bg-disabled"]}; `; } else if (props.$disabled && props.$selected) { return css` - background: ${V2_Color.Neutral[6]}; + background: ${Colour["bg-selected-disabled"]}; `; } else if (props.$error) { return css` - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; `; } else if (props.$selected) { return css` - background: ${V2_Color.Accent.Light[5]}; + background: ${Colour["bg-selected"]}; `; } else { return css` - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; `; } } @@ -281,9 +271,9 @@ export const IndicatorLabelContainer = styled.div` color: ${(props) => - props.$disabled ? V2_Color.Neutral[3] : V2_Color.Validation.Red.Icon}; + props.$disabled ? Colour["text-disabled"] : Colour.text}; white-space: nowrap; - ${V2_TextStyleHelper.getTextStyle("H4", "semibold")} + ${Font["header-xs-semibold"]} height: fit-content; padding: 0.6875rem 1rem 0.6875rem 0.5rem; border: none; @@ -294,8 +284,8 @@ export const RemoveButton = styled.button` export const ExpandButton = styled.button` color: ${(props) => - props.disabled ? V2_Color.Neutral[3] : V2_Color.Primary}; - ${V2_TextStyleHelper.getTextStyle("H4", "semibold")} + props.disabled ? Colour["text-disabled"] : Colour.text}; + ${Font["header-xs-semibold"]} display: flex; align-items: center; justify-content: flex-end; @@ -317,7 +307,7 @@ export const ExpandButton = styled.button` export const ErrorContainer = styled.div` width: 100%; color: ${(props) => - props.$disabled ? V2_Color.Neutral[3] : V2_Color.Primary}; + props.$disabled ? Colour["text-disabled"] : Colour.text}; border: none; background: none; cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")}; @@ -333,35 +323,33 @@ export const Children = styled.div` padding: 0 1rem; padding-top: 0.6875rem; padding-bottom: ${(props) => (props.$isFinalItem ? "0.6875rem" : "0.5rem")}; - ${applyHtmlContentStyle({ textSize: "BodySmall" })} + ${applyHtmlContentStyle({ textSize: "body-sm" })} ${(props) => { if (props.$disabled) { return css` - color: ${V2_Color.Neutral[3]}; + color: ${Colour["text-disabled"]}; `; } else if (props.$selected) { return css` - color: ${V2_Color.Primary}; + color: ${Colour["text-selected"]}; `; } else { return css` - color: ${V2_Color.Neutral[1]}; + color: ${Colour.text}; `; } }} `; -export const ErrorText = styled(V2_Text.BodySmall)` +export const ErrorText = styled(Typography.BodyMD)` color: ${(props) => - props.$disabled ? V2_Color.Neutral[3] : V2_Color.Validation.Red.Text}; + props.$disabled ? Colour["text-disabled"] : Colour.text}; `; export const ErrorList = styled(TextList.Ul)` li { color: ${(props) => - props.$disabled - ? V2_Color.Neutral[3] - : V2_Color.Validation.Red.Text}; + props.$disabled ? Colour["text-disabled"] : Colour.text}; } `; diff --git a/stories/markup/markup.stories.tsx b/stories/markup/markup.stories.tsx index 258a53779..b7d7ec786 100644 --- a/stories/markup/markup.stories.tsx +++ b/stories/markup/markup.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { V2_Color } from "src/v2_color"; import { Markup } from "src/markup"; +import { Colour } from "../../src"; type Component = typeof Markup; @@ -13,7 +13,7 @@ export default meta; export const Default: StoryObj = { render: () => ( - +

You can use bold text to emphasise important information From 8cc21f98a3ab55b493c0b5e21e0c1d996416fec2 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 18 Oct 2024 10:59:27 +0800 Subject: [PATCH 2/5] [CCUBE-1597][MAHI]Migrate form label and modal to V3 --- src/form/form-label.style.tsx | 27 ++++++++++++++------------- src/form/form-label.tsx | 4 ++-- src/form/form-wrapper.style.tsx | 4 ++-- src/modal/modal-box.styles.tsx | 16 ++++++---------- src/modal/modal.styles.tsx | 4 ++-- 5 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index 5bfae4643..32315209f 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -1,48 +1,49 @@ import styled from "styled-components"; -import { V2_Color } from "../v2_color"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; +import { Colour, Font } from "../theme"; +import { Typography } from "../typography"; // ============================================================================= // STYLING // ============================================================================= export const Label = styled.label` - ${V2_TextStyleHelper.getTextStyle("H5", "semibold")} - color: ${V2_Color.Neutral[2]}; + ${Font["header-xs-semibold"]} + color: ${Colour["text-subtle"]}; margin-bottom: 0.5rem; display: inline-block; a, span, p { - ${V2_TextStyleHelper.getTextStyle("H5", "semibold")} + ${Font["header-xs-semibold"]} } a { - color: ${V2_Color.Primary}; + color: ${Colour.hyperlink}; text-decoration: none; :hover, :active, :focus { - color: ${V2_Color.Secondary}; + color: ${Colour["hyperlink-hover"]}; svg { - color: ${V2_Color.Secondary}; + color: ${Colour["hyperlink-hover"]}; } } } `; -export const ErrorMessage = styled(V2_Text.H6)` - color: ${V2_Color.Validation.Red.Text}; +// check input +export const ErrorMessage = styled(Typography.BodySM)` + color: ${Colour["text-error"]}; margin-top: 0.5rem; margin-bottom: 0; outline: none; `; -export const Subtitle = styled(V2_Text.BodySmall)` +export const Subtitle = styled(Typography.BodyMD)` && { - color: ${V2_Color.Neutral[3]}; - ${V2_TextStyleHelper.getFontFamily("BodySmall", "regular")} + color: ${Colour.text}; + ${Font["body-sm-regular"]} } `; diff --git a/src/form/form-label.tsx b/src/form/form-label.tsx index 0fdefd772..11a90f25c 100644 --- a/src/form/form-label.tsx +++ b/src/form/form-label.tsx @@ -1,4 +1,4 @@ -import { V2_TextProps } from "../v2_text"; +import { TypographyProps } from "../typography/types"; import { PopoverAddon } from "./form-label-addon"; import { ErrorMessage, Label, Subtitle } from "./form-label.style"; import { FormLabelProps } from "./types"; @@ -41,6 +41,6 @@ export const FormLabel = ({ ); }; -export const FormErrorMessage = (props: V2_TextProps): JSX.Element => { +export const FormErrorMessage = (props: TypographyProps): JSX.Element => { return ; }; diff --git a/src/form/form-wrapper.style.tsx b/src/form/form-wrapper.style.tsx index 569585476..7b55b5bc9 100644 --- a/src/form/form-wrapper.style.tsx +++ b/src/form/form-wrapper.style.tsx @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { V2_Layout } from "../v2_layout"; +import { Layout } from "../layout"; const commonStyles = css` display: flex; @@ -14,6 +14,6 @@ export const Container = styled.div` ${commonStyles} `; -export const ColDivContainer = styled(V2_Layout.ColDiv)` +export const ColDivContainer = styled(Layout.ColDiv)` ${commonStyles} `; diff --git a/src/modal/modal-box.styles.tsx b/src/modal/modal-box.styles.tsx index 1b72f4d00..2464367ff 100644 --- a/src/modal/modal-box.styles.tsx +++ b/src/modal/modal-box.styles.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { ClickableIcon } from "../shared/clickable-icon"; +import { MediaQuery } from "../theme"; +import { Colour } from "../theme"; export const Box = styled.div` position: relative; @@ -9,12 +9,12 @@ export const Box = styled.div` flex-direction: column; width: 40rem; max-height: 70%; - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.45); border-radius: 0.75rem; overflow: hidden; - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.md} { width: 90%; max-height: 70%; } @@ -25,18 +25,14 @@ export const CloseButton = styled(ClickableIcon)` top: 1rem; right: 1rem; padding: 0; - color: ${V2_Color.Neutral[3]}; - - :focus-visible { - outline: 4px solid ${V2_Color.Accent.Light[1]}; - } + color: ${Colour.icon}; svg { height: 2rem; width: 2rem; } - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { right: 1.25rem; } `; diff --git a/src/modal/modal.styles.tsx b/src/modal/modal.styles.tsx index 5cd816d46..ee15bcc7f 100644 --- a/src/modal/modal.styles.tsx +++ b/src/modal/modal.styles.tsx @@ -1,6 +1,6 @@ import styled from "styled-components"; -import { V2_MediaQuery } from "../v2_media"; import { ModalAnimationDirection } from "./types"; +import { MediaQuery } from "../theme"; interface Props { show: boolean; @@ -39,7 +39,7 @@ export const Container = styled.div` overflow: hidden; ${(props) => visibilityStyle(props.show, props.animationFrom || "bottom")} - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { height: calc( ${(props) => props.verticalHeight From 0aabee45f4821faba756a07c4560e0caf94bec24 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Fri, 25 Oct 2024 09:47:46 +0800 Subject: [PATCH 3/5] [CCUBE-1597][MAHI]Fix toggle styling and adjusting styling for the other componenets and added primitive colour token --- src/alert/alert.style.tsx | 2 +- src/markup/markup.style.tsx | 1 - src/markup/types.ts | 1 - src/shared/toggle-icon/toggle-icon.styles.tsx | 6 +- .../specs/lifesg-semantic-tokens.ts | 1 + src/theme/colour-semantic/theme-helper.ts | 1 + src/theme/colour-semantic/types.ts | 1 + src/toggle/toggle.styles.tsx | 174 ++++++++++++------ stories/markup/markup.stories.tsx | 2 +- .../doc-semantic-colour-display.tsx | 4 +- 10 files changed, 129 insertions(+), 64 deletions(-) diff --git a/src/alert/alert.style.tsx b/src/alert/alert.style.tsx index be5e50f99..781cb054b 100644 --- a/src/alert/alert.style.tsx +++ b/src/alert/alert.style.tsx @@ -69,7 +69,7 @@ export const Wrapper = styled.div` color: ${Colour.text}; ${(props) => { if (props.$sizeType === "small") { - return applyHtmlContentStyle({ textSize: "header-xs" }); + return applyHtmlContentStyle({ textSize: "body-md" }); } return applyHtmlContentStyle({ textSize: "body-sm" }); }} diff --git a/src/markup/markup.style.tsx b/src/markup/markup.style.tsx index 9a76f1621..a4700ba69 100644 --- a/src/markup/markup.style.tsx +++ b/src/markup/markup.style.tsx @@ -6,7 +6,6 @@ import { TypographySizeType } from "../theme/font/types"; // STYLE INTERFACES // ============================================================================= interface ContainerStyleProps { - // $textSize?: HtmlContentStyleOptions["textSize"] | undefined; $textSize?: TypographySizeType | undefined; $textColor?: string | ((props: unknown) => string) | undefined; } diff --git a/src/markup/types.ts b/src/markup/types.ts index 4b824e461..e72a95f38 100644 --- a/src/markup/types.ts +++ b/src/markup/types.ts @@ -2,7 +2,6 @@ import { TypographySizeType } from "../theme/font/types"; export interface MarkupProps extends React.HTMLAttributes { /** The default font size. If not specified, inherited from the parent */ - // baseTextSize?: TypographySizeType | undefined; baseTextSize?: TypographySizeType | undefined; /** The default font color. If not specified, inherited from the parent */ baseTextColor?: string | ((props: unknown) => string) | undefined; diff --git a/src/shared/toggle-icon/toggle-icon.styles.tsx b/src/shared/toggle-icon/toggle-icon.styles.tsx index 42bce002c..137254a50 100644 --- a/src/shared/toggle-icon/toggle-icon.styles.tsx +++ b/src/shared/toggle-icon/toggle-icon.styles.tsx @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { V2_Color } from "../../v2_color"; +import { Colour } from "../../theme"; interface StyleProps { $active?: boolean; @@ -22,11 +22,11 @@ export const Wrapper = styled.div` ${(props) => { if (props.$active && !props.disabled) { return css` - color: ${V2_Color.Primary}; + color: ${Colour["icon-primary"]}; `; } else { return css` - color: ${V2_Color.Neutral[4]}; + color: ${Colour["icon-disabled-subtle"]}; `; } }}; diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts index 738fff732..0eb655647 100644 --- a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts +++ b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts @@ -56,6 +56,7 @@ export const LifeSGColourSet: SemanticColourSet = { "border-primary-subtle": getPrimitiveColour("primary-60"), "border-hover": getPrimitiveColour("primary-90"), + "border-hover-strong": getPrimitiveColour("primary-60"), "border-selected": getPrimitiveColour("primary-50"), "border-selected-subtle": getPrimitiveColour("primary-70"), diff --git a/src/theme/colour-semantic/theme-helper.ts b/src/theme/colour-semantic/theme-helper.ts index becf482ef..4fe9ce72c 100644 --- a/src/theme/colour-semantic/theme-helper.ts +++ b/src/theme/colour-semantic/theme-helper.ts @@ -95,6 +95,7 @@ export const ColourSemantic = { "border-primary-subtle": getSemanticColour("border-primary-subtle"), "border-hover": getSemanticColour("border-hover"), + "border-hover-strong": getSemanticColour("border-hover-strong"), "border-selected": getSemanticColour("border-selected"), "border-selected-subtle": getSemanticColour("border-selected-subtle"), diff --git a/src/theme/colour-semantic/types.ts b/src/theme/colour-semantic/types.ts index e4900ee4b..13004395c 100644 --- a/src/theme/colour-semantic/types.ts +++ b/src/theme/colour-semantic/types.ts @@ -63,6 +63,7 @@ export type SemanticColourSet = { "border-primary-subtle": SemanticColourValue; "border-hover": SemanticColourValue; + "border-hover-strong": SemanticColourValue; "border-selected": SemanticColourValue; "border-selected-subtle": SemanticColourValue; diff --git a/src/toggle/toggle.styles.tsx b/src/toggle/toggle.styles.tsx index 25742ea22..f1370097b 100644 --- a/src/toggle/toggle.styles.tsx +++ b/src/toggle/toggle.styles.tsx @@ -41,6 +41,7 @@ interface ChildrenStyleProps extends StyleProps { // ============================================================================= // STYLING // ============================================================================= + export const Container = styled.div` position: relative; display: inline-flex; @@ -61,7 +62,7 @@ export const Container = styled.div` } }} - // Background, Hover and Border style + // Background, Hover and Border style following strict structure ${(props) => { switch (props.$styleType) { case "no-border": { @@ -69,37 +70,73 @@ export const Container = styled.div` return css` border-color: ${Colour["border-error"]}; `; - } else if (!props.$disabled) { + } + + if (props.$disabled) { + if (props.$selected) { + return css` + border: none; + background: ${Colour["bg-selected-disabled"]}; + `; + } else { + return css` + border: none; + background: ${Colour.bg}; + `; + } + } + + if (props.$selected) { return css` - border-color: transparent; + background: ${Colour["bg-selected"]}; + border: none; :hover { - background: ${Colour.bg}; + background: ${Colour["bg-selected-hover"]}; + border: ${Colour["border-selected-hover"]}; } `; } else { return css` - border-color: transparent; + border: none; + + :hover { + background: ${Colour["bg-hover-subtle"]}; + border: ${Colour["border-hover"]}; + } `; } } default: { - if (props.$disabled && !props.$selected) { - return css` - border-color: ${Colour["border-disabled"]}; - `; - } else if (props.$disabled && props.$selected) { - return css` - border-color: ${Colour["border-selected-disabled"]}; - `; - } else if (props.$error) { + if (props.$error) { return css` border-color: ${Colour["border-error"]}; `; - } else if (props.$selected) { + } + if (props.$disabled) { + if (props.$selected) { + return css` + border-color: ${Colour["border-selected-disabled"]}; + background: ${Colour["bg-selected-disabled"]}; + `; + } else { + return css` + border-color: ${Colour["border-disabled"]}; + background: ${Colour["bg-disabled"]}; + `; + } + } + + if (props.$selected) { return css` border-color: ${Colour["border-selected"]}; + background: ${Colour["bg-selected"]}; + + :hover { + border-color: ${Colour["border-selected-hover"]}; + background: ${Colour["bg-selected-hover"]}; + } `; } else { return css` @@ -139,27 +176,17 @@ export const TextContainer = styled.div` `; export const Label = styled.label` - ${(props) => { - if (props.$selected && !props.$indicator) { - return css` - ${Font["header-xs-semibold"]} - `; - } else { - return css` - ${Font["header-xs-regular"]} - `; - } - }} + ${Font["header-xs-regular"]} overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; overflow-wrap: break-word; -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? "none"}; - ${MediaQuery.MaxWidth.xl} { + ${MediaQuery.MaxWidth.lg} { -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? "none"}; } - ${MediaQuery.MaxWidth.md} { + ${MediaQuery.MaxWidth.sm} { -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? "none"}; } color: ${Colour.text}; @@ -178,7 +205,7 @@ export const Label = styled.label` `; export const SubLabel = styled.div` - ${Font["body-lg-regular"]} + ${Font["body-md-regular"]} margin-top: 0.5rem; z-index: 1; // forces sublabel to render above the input @@ -186,7 +213,7 @@ export const SubLabel = styled.div` strong, b { - ${Font["body-lg-semibold"]} + ${Font["body-md-semibold"]} color: inherit; } @@ -197,7 +224,7 @@ export const SubLabel = styled.div` `; } else if (props.$selected) { return css` - color: ${Colour["text-selected"]}; + color: ${Colour["text-primary"]}; `; } else { return css` @@ -212,47 +239,81 @@ export const HeaderContainer = styled.div` align-items: flex-start; justify-content: space-between; - // Background, Hover and Border style + // Background, Hover, and Border style following strict structure ${(props) => { switch (props.$styleType) { case "no-border": { if (props.$error) { return css` - background: ${Colour.bg}; + border-color: ${Colour["border-error"]}; `; - } else if (!props.$disabled) { + } + if (props.$disabled) { + if (props.$selected) { + return css` + background: ${Colour["bg-selected-disabled"]}; + `; + } else { + return css` + background: ${Colour.bg}; + `; + } + } + if (props.$selected) { return css` + background: ${Colour["bg-selected"]}; + :hover { - background: ${Colour.bg}; - border: ${Colour.border}; + background: ${Colour["bg-selected-hover"]}; } `; } else { return css` - border: ${Colour["border-disabled"]}; + :hover { + background: ${Colour["bg-hover-subtle"]}; + } `; } } + default: { - if (props.$disabled && !props.$selected) { - return css` - background: ${Colour["bg-disabled"]}; - `; - } else if (props.$disabled && props.$selected) { - return css` - background: ${Colour["bg-selected-disabled"]}; - `; - } else if (props.$error) { + if (props.$error) { return css` - background: ${Colour.bg}; + border-color: ${Colour["border-error"]}; `; - } else if (props.$selected) { + } + if (props.$disabled) { + if (props.$selected) { + return css` + border-color: ${Colour["border-selected-disabled"]}; + background: ${Colour["bg-selected-disabled"]}; + `; + } else { + return css` + border-color: ${Colour["border-disabled"]}; + background: ${Colour["bg-disabled"]}; + `; + } + } + + if (props.$selected) { return css` + border-color: ${Colour["border-selected"]}; background: ${Colour["bg-selected"]}; + + :hover { + border-color: ${Colour["border-selected-hover"]}; + background: ${Colour["bg-selected-hover"]}; + } `; } else { return css` background: ${Colour.bg}; + border-color: ${Colour.border}; + + :hover { + border-color: ${Colour["border-hover-strong"]}; + } `; } } @@ -271,7 +332,7 @@ export const IndicatorLabelContainer = styled.div` color: ${(props) => - props.$disabled ? Colour["text-disabled"] : Colour.text}; + props.$disabled ? Colour["text-disabled"] : Colour["text-error"]}; white-space: nowrap; ${Font["header-xs-semibold"]} height: fit-content; @@ -284,13 +345,13 @@ export const RemoveButton = styled.button` export const ExpandButton = styled.button` color: ${(props) => - props.disabled ? Colour["text-disabled"] : Colour.text}; + props.disabled ? Colour["text-disabled"] : Colour["text-primary"]}; ${Font["header-xs-semibold"]} display: flex; align-items: center; justify-content: flex-end; border: none; - background: none; + background-color: ${Colour.bg}; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; padding: 0 1rem 0.6875rem 1rem; padding-top: ${(props) => @@ -298,8 +359,8 @@ export const ExpandButton = styled.button` width: 100%; svg { - width: 1.125rem; - height: 1.125rem; + width: 1em; + height: 1em; margin-left: 0.5rem; } `; @@ -307,7 +368,7 @@ export const ExpandButton = styled.button` export const ErrorContainer = styled.div` width: 100%; color: ${(props) => - props.$disabled ? Colour["text-disabled"] : Colour.text}; + props.$disabled ? Colour["text-disabled"] : Colour["text-error"]}; border: none; background: none; cursor: ${(props) => (props.$disabled ? "not-allowed" : "pointer")}; @@ -323,7 +384,8 @@ export const Children = styled.div` padding: 0 1rem; padding-top: 0.6875rem; padding-bottom: ${(props) => (props.$isFinalItem ? "0.6875rem" : "0.5rem")}; - ${applyHtmlContentStyle({ textSize: "body-sm" })} + background-color: ${Colour.bg}; + ${applyHtmlContentStyle({ textSize: "body-md" })} ${(props) => { if (props.$disabled) { @@ -344,7 +406,7 @@ export const Children = styled.div` export const ErrorText = styled(Typography.BodyMD)` color: ${(props) => - props.$disabled ? Colour["text-disabled"] : Colour.text}; + props.$disabled ? Colour["text-disabled"] : Colour["text-error"]}; `; export const ErrorList = styled(TextList.Ul)` diff --git a/stories/markup/markup.stories.tsx b/stories/markup/markup.stories.tsx index b7d7ec786..f3c419ef6 100644 --- a/stories/markup/markup.stories.tsx +++ b/stories/markup/markup.stories.tsx @@ -1,6 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Markup } from "src/markup"; -import { Colour } from "../../src"; +import { Colour } from "../../src/theme"; type Component = typeof Markup; diff --git a/stories/theme/doc-elements/doc-semantic-colour-display.tsx b/stories/theme/doc-elements/doc-semantic-colour-display.tsx index 998823e7d..1181c8de9 100644 --- a/stories/theme/doc-elements/doc-semantic-colour-display.tsx +++ b/stories/theme/doc-elements/doc-semantic-colour-display.tsx @@ -146,7 +146,9 @@ export const SemanticColourDisplay = ({ "border-primary-subtle", ]} /> - + Date: Sun, 27 Oct 2024 22:18:13 +0800 Subject: [PATCH 4/5] [CCUBE-1597][RL] amend styles to match design mocks --- src/alert/alert.style.tsx | 6 +- src/file-upload/file-upload.styles.tsx | 10 +- src/file-upload/file-upload.tsx | 4 +- src/form/form-label.style.tsx | 33 +-- src/modal/modal-box.styles.tsx | 3 +- src/modal/modal-box.tsx | 1 + src/shared/html-content/html-content.ts | 15 +- src/shared/toggle-icon/toggle-icon.styles.tsx | 24 +- src/shared/toggle-icon/toggle-icon.tsx | 2 +- .../specs/lifesg-semantic-tokens.ts | 2 +- src/toggle/toggle.styles.tsx | 252 +++++++----------- src/toggle/toggle.tsx | 22 +- 12 files changed, 152 insertions(+), 222 deletions(-) diff --git a/src/alert/alert.style.tsx b/src/alert/alert.style.tsx index 781cb054b..f847d44d7 100644 --- a/src/alert/alert.style.tsx +++ b/src/alert/alert.style.tsx @@ -69,9 +69,9 @@ export const Wrapper = styled.div` 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)` 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 index 223561416..7adc59d9c 100644 --- a/src/file-upload/file-upload.styles.tsx +++ b/src/file-upload/file-upload.styles.tsx @@ -12,12 +12,10 @@ 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}; @@ -25,7 +23,6 @@ export const TitleContainer = styled.div` `; 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 index a9ef44de9..02d36a42b 100644 --- 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}; + return {title}; } return {title}; @@ -113,7 +113,7 @@ export const FileUpload = ({ } if (typeof description === "string") { - return {description}; + return {description}; } return {description}; diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index 32315209f..c81ddf895 100644 --- 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 index 2464367ff..c9ba2c5bc 100644 --- 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 index c3e870350..4b2a72818 100644 --- 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" > diff --git a/src/shared/html-content/html-content.ts b/src/shared/html-content/html-content.ts index 32d60d2d6..5adcb45d9 100644 --- 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 index 137254a50..fc31987d1 100644 --- 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` 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 index 74f857f31..40d9fef23 100644 --- a/src/shared/toggle-icon/toggle-icon.tsx +++ b/src/shared/toggle-icon/toggle-icon.tsx @@ -42,7 +42,7 @@ export const ToggleIcon = ({ } return ( - + {component} ); diff --git a/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts b/src/theme/colour-semantic/specs/lifesg-semantic-tokens.ts index 0eb655647..7fd86b9ec 100644 --- 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"), diff --git a/src/toggle/toggle.styles.tsx b/src/toggle/toggle.styles.tsx index f1370097b..e8b8f8f72 100644 --- a/src/toggle/toggle.styles.tsx +++ b/src/toggle/toggle.styles.tsx @@ -1,11 +1,11 @@ import styled, { css } from "styled-components"; import { Alert } from "../alert"; import { applyHtmlContentStyle } from "../shared/html-content/html-content"; +import { ToggleIcon } from "../shared/toggle-icon/toggle-icon"; import { TextList } from "../text-list"; -import { ToggleStyleType } from "./types"; -import { Colour, Font } from "../theme"; -import { MediaQuery } from "../theme"; +import { Colour, Font, MediaQuery } from "../theme"; import { Typography } from "../typography"; +import { ToggleStyleType } from "./types"; // ============================================================================= // STYLE INTERFACES, transient props are denoted with $ @@ -26,7 +26,7 @@ interface IndicatorLabelContainerStyleProps { $addPadding?: boolean; } -interface LabelStyleProps extends StyleProps { +interface LabelStyleProps { $maxLines?: { desktop?: number; mobile?: number; tablet?: number }; } @@ -52,8 +52,8 @@ export const Container = styled.div` overflow: hidden; flex-direction: column; height: fit-content; + background: ${Colour.bg}; - // Content positioning style ${(props) => { if (!props.$indicator) { return css` @@ -62,13 +62,13 @@ export const Container = styled.div` } }} - // Background, Hover and Border style following strict structure + // apply container border and header background color ${(props) => { switch (props.$styleType) { case "no-border": { if (props.$error) { return css` - border-color: ${Colour["border-error"]}; + border-color: ${Colour["border-error-strong"]}; `; } @@ -81,39 +81,37 @@ export const Container = styled.div` } else { return css` border: none; - background: ${Colour.bg}; `; } } if (props.$selected) { return css` - background: ${Colour["bg-selected"]}; border: none; + background: ${Colour["bg-selected"]}; :hover { background: ${Colour["bg-selected-hover"]}; - border: ${Colour["border-selected-hover"]}; - } - `; - } else { - return css` - border: none; - - :hover { - background: ${Colour["bg-hover-subtle"]}; - border: ${Colour["border-hover"]}; } `; } + + return css` + border: none; + + :hover { + background: ${Colour["bg-hover-subtle"]}; + } + `; } default: { if (props.$error) { return css` - border-color: ${Colour["border-error"]}; + border-color: ${Colour["border-error-strong"]}; `; } + if (props.$disabled) { if (props.$selected) { return css` @@ -138,19 +136,18 @@ export const Container = styled.div` background: ${Colour["bg-selected-hover"]}; } `; - } else { - return css` - background: ${Colour.bg}; - border-color: ${Colour.border}; - - :hover { - border-color: ${Colour["border-hover-strong"]}; - } - `; } + + return css` + border-color: ${Colour.border}; + + :hover { + border-color: ${Colour["border-hover-strong"]}; + } + `; } } - }} + }}} `; export const Input = styled.input` @@ -167,16 +164,51 @@ export const Input = styled.input` border: none; `; -export const TextContainer = styled.div` +export const TextContainer = styled.div` display: flex; flex-direction: column; overflow-wrap: anywhere; width: 100%; overflow: hidden; + + // apply header container text color + ${(props) => { + if (props.$disabled) { + if (props.$selected) { + return css` + color: ${Colour["text-selected-disabled"]}; + `; + } else { + return css` + color: ${Colour["text-disabled"]}; + `; + } + } + + if (props.$selected) { + return css` + color: ${Colour["text-selected"]}; + + // this syntax is a workaround for this issue: + // https://github.com/styled-components/styled-components/issues/3265#issuecomment-1199263511 + &:is(${Container}:hover *) { + color: ${Colour["text-selected-hover"]}; + } + `; + } + + return css` + color: ${Colour.text}; + + &:is(${Container}:hover *) { + color: ${Colour["text-hover"]}; + } + `; + }} `; export const Label = styled.label` - ${Font["header-xs-regular"]} + ${Font["body-baseline-regular"]} overflow: hidden; display: -webkit-box; text-overflow: ellipsis; @@ -189,22 +221,9 @@ export const Label = styled.label` ${MediaQuery.MaxWidth.sm} { -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? "none"}; } - color: ${Colour.text}; - - ${(props) => { - if (props.$disabled) { - return css` - color: ${Colour["text-disabled"]}; - `; - } else if (props.$selected) { - return css` - color: ${Colour["text-selected"]}; - `; - } - }} `; -export const SubLabel = styled.div` +export const SubLabel = styled.div` ${Font["body-md-regular"]} margin-top: 0.5rem; @@ -214,111 +233,13 @@ export const SubLabel = styled.div` strong, b { ${Font["body-md-semibold"]} - color: inherit; } - - ${(props) => { - if (props.$disabled) { - return css` - color: ${Colour["text-disabled"]}; - `; - } else if (props.$selected) { - return css` - color: ${Colour["text-primary"]}; - `; - } else { - return css` - color: ${Colour.text}; - `; - } - }} `; export const HeaderContainer = styled.div` display: flex; align-items: flex-start; justify-content: space-between; - - // Background, Hover, and Border style following strict structure - ${(props) => { - switch (props.$styleType) { - case "no-border": { - if (props.$error) { - return css` - border-color: ${Colour["border-error"]}; - `; - } - if (props.$disabled) { - if (props.$selected) { - return css` - background: ${Colour["bg-selected-disabled"]}; - `; - } else { - return css` - background: ${Colour.bg}; - `; - } - } - if (props.$selected) { - return css` - background: ${Colour["bg-selected"]}; - - :hover { - background: ${Colour["bg-selected-hover"]}; - } - `; - } else { - return css` - :hover { - background: ${Colour["bg-hover-subtle"]}; - } - `; - } - } - - default: { - if (props.$error) { - return css` - border-color: ${Colour["border-error"]}; - `; - } - if (props.$disabled) { - if (props.$selected) { - return css` - border-color: ${Colour["border-selected-disabled"]}; - background: ${Colour["bg-selected-disabled"]}; - `; - } else { - return css` - border-color: ${Colour["border-disabled"]}; - background: ${Colour["bg-disabled"]}; - `; - } - } - - if (props.$selected) { - return css` - border-color: ${Colour["border-selected"]}; - background: ${Colour["bg-selected"]}; - - :hover { - border-color: ${Colour["border-selected-hover"]}; - background: ${Colour["bg-selected-hover"]}; - } - `; - } else { - return css` - background: ${Colour.bg}; - border-color: ${Colour.border}; - - :hover { - border-color: ${Colour["border-hover-strong"]}; - } - `; - } - } - } - }} `; export const IndicatorLabelContainer = styled.div` @@ -334,7 +255,7 @@ export const RemoveButton = styled.button` color: ${(props) => props.$disabled ? Colour["text-disabled"] : Colour["text-error"]}; white-space: nowrap; - ${Font["header-xs-semibold"]} + ${Font["body-md-semibold"]} height: fit-content; padding: 0.6875rem 1rem 0.6875rem 0.5rem; border: none; @@ -346,7 +267,7 @@ export const RemoveButton = styled.button` export const ExpandButton = styled.button` color: ${(props) => props.disabled ? Colour["text-disabled"] : Colour["text-primary"]}; - ${Font["header-xs-semibold"]} + ${Font["body-baseline-semibold"]} display: flex; align-items: center; justify-content: flex-end; @@ -410,8 +331,39 @@ export const ErrorText = styled(Typography.BodyMD)` `; export const ErrorList = styled(TextList.Ul)` - li { - color: ${(props) => - props.$disabled ? Colour["text-disabled"] : Colour.text}; - } + color: ${(props) => + props.$disabled ? Colour["text-disabled"] : Colour["text-error"]}; +`; + +export const StyledToggleIcon = styled(ToggleIcon)` + ${(props) => { + if (props.$disabled) { + if (props.$selected) { + return css` + color: ${Colour["icon-selected-disabled"]}; + `; + } else { + return css` + color: ${Colour["icon-disabled-subtle"]}; + `; + } + } + + if (props.$selected) { + return css` + color: ${Colour["icon-selected"]}; + + &:is(${Container}:hover *) { + color: ${Colour["icon-selected-hover"]}; + } + `; + } + return css` + color: ${Colour["icon-subtle"]}; + + &:is(${Container}:hover *) { + color: ${Colour["icon-hover"]}; + } + `; + }}; `; diff --git a/src/toggle/toggle.tsx b/src/toggle/toggle.tsx index 9022b6f95..b6633f35f 100644 --- a/src/toggle/toggle.tsx +++ b/src/toggle/toggle.tsx @@ -1,7 +1,7 @@ import { ChevronDownIcon } from "@lifesg/react-icons/chevron-down"; import { ChevronUpIcon } from "@lifesg/react-icons/chevron-up"; import { useEffect, useMemo, useRef, useState } from "react"; -import { ToggleIcon, ToggleIconType } from "../shared/toggle-icon/toggle-icon"; +import { ToggleIconType } from "../shared/toggle-icon/toggle-icon"; import { SimpleIdGenerator } from "../util"; import { AlertContainer, @@ -16,6 +16,7 @@ import { Input, Label, RemoveButton, + StyledToggleIcon, SubLabel, TextContainer, } from "./toggle.styles"; @@ -136,10 +137,12 @@ export const Toggle = ({ } return ( - ); }; @@ -156,15 +159,7 @@ export const Toggle = ({ component = subLabel; } - return ( - - {component} - - ); + return {component}; }; const renderCompositeChildren = () => { @@ -224,12 +219,9 @@ export const Toggle = ({ checked={selected} /> {indicator && renderIndicator()} - +