From 07209b5733ea24ec9ff02af9f1084167060632be Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Tue, 5 Nov 2024 10:42:11 +0800 Subject: [PATCH 1/4] [CCUBE-1608][MAHI]Migrate Icon, Image Button, Card, Notification and SmartApp Banner to V3 --- src/card/card.style.tsx | 4 +- src/card/card.tsx | 4 +- src/icon-button/icon-button.style.tsx | 39 ++++++++++++------- src/image-button/image-button.style.tsx | 37 ++++++++---------- .../notification-banner.styles.tsx | 36 ++++++++--------- src/notification-banner/types.ts | 8 ++-- .../smart-app-banner.styles.ts | 21 +++++----- 7 files changed, 76 insertions(+), 73 deletions(-) diff --git a/src/card/card.style.tsx b/src/card/card.style.tsx index aa015de18..9771b55b3 100644 --- a/src/card/card.style.tsx +++ b/src/card/card.style.tsx @@ -1,12 +1,12 @@ import styled from "styled-components"; -import { V2_Color } from "../v2_color/color"; +import { Colour } from "../theme"; // ============================================================================= // STYLING // ============================================================================= export const StyledCard = styled.div` border-radius: 0.5rem; - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; padding: 1rem 2rem; box-shadow: 0 0.125rem 0.5rem rgba(104, 104, 104, 0.25); `; diff --git a/src/card/card.tsx b/src/card/card.tsx index 71b11871c..28b9b610e 100644 --- a/src/card/card.tsx +++ b/src/card/card.tsx @@ -1,4 +1,4 @@ -import { V2_Text } from "../v2_text/text"; +import { Typography } from "../typography/typography"; import { StyledCard } from "./card.style"; import { CardProps } from "./types"; @@ -13,7 +13,7 @@ export const Card = ({ children, ...otherProps }: CardProps): JSX.Element => { // ============================================================================= const renderContent = () => typeof children === "string" ? ( - {children} + {children} ) : ( children ); diff --git a/src/icon-button/icon-button.style.tsx b/src/icon-button/icon-button.style.tsx index d178ff626..4af9ad065 100644 --- a/src/icon-button/icon-button.style.tsx +++ b/src/icon-button/icon-button.style.tsx @@ -1,7 +1,6 @@ import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color/color"; import { SizeType, StyleType } from "./types"; - +import { Colour } from "../theme"; interface StyleProps { $styleType: StyleType; $sizeType: SizeType; @@ -9,9 +8,7 @@ interface StyleProps { export const Main = styled.button` align-items: center; - background-color: ${V2_Color.Primary}; border-radius: 0.25rem; - color: ${V2_Color.Neutral[8]}; cursor: pointer; display: flex; justify-content: center; @@ -62,23 +59,35 @@ export const Main = styled.button` switch (props.$styleType) { case "secondary": return css` - background-color: ${V2_Color.Neutral[8]}; - border: 1px solid ${V2_Color.Primary}; - color: ${V2_Color.Primary}; + background-color: ${Colour.bg}; + border: 1px solid ${Colour["border-primary"]}; + color: ${Colour["text-primary"]}; + + :hover { + background-color: ${Colour["bg-hover-neutral"]}; + } `; case "light": return css` - background-color: ${V2_Color.Neutral[8]}; - border: 1px solid ${V2_Color.Neutral[5]}; - color: ${V2_Color.Primary}; + background-color: ${Colour.bg}; + border: 1px solid ${Colour.border}; + color: ${Colour["text-primary"]}; + + :hover { + background-color: ${Colour["bg-hover-neutral"]}; + } `; case "primary": default: return css` - background-color: ${V2_Color.Primary}; + background-color: ${Colour["bg-primary"]}; border: none; - color: ${V2_Color.Neutral[8]}; + color: ${Colour["text-inverse"]}; + + :hover { + background-color: ${Colour["bg-primary-hover"]}; + } `; } }} @@ -86,9 +95,9 @@ export const Main = styled.button` box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); } &:disabled { - background-color: ${V2_Color.Neutral[6]}; - border: 1px solid ${V2_Color.Neutral[6]}; - color: ${V2_Color.Neutral[3]}; + background-color: ${Colour["bg-disabled"]}; + border: 1px solid ${Colour["border-disabled"]}; + color: ${Colour["text-disabled"]}; cursor: not-allowed; &:hover { diff --git a/src/image-button/image-button.style.tsx b/src/image-button/image-button.style.tsx index 4389ea851..3fc9ec246 100644 --- a/src/image-button/image-button.style.tsx +++ b/src/image-button/image-button.style.tsx @@ -1,7 +1,6 @@ -import { V2_MediaQuery } from "../v2_media"; import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color/color"; -import { V2_TextStyleHelper } from "../v2_text/helper"; +import { Colour, Font } from "../theme"; +import { MediaQuery } from "../theme"; export const Main = styled.button<{ $selected?: boolean; @@ -14,14 +13,14 @@ export const Main = styled.button<{ justify-content: center; align-items: center; padding: 1.5rem 1rem; - background-color: ${V2_Color.Neutral[8]}; + background-color: ${Colour.bg}; border: 1px solid transparent; border-radius: 0.5rem; cursor: pointer; max-width: 13rem; transition: all 200ms ease; - ${V2_TextStyleHelper.getTextStyle("Body", "semibold")} - color: ${({ $selected }) => $selected && V2_Color.Primary}; + ${Font["body-baseline-semibold"]} + color: ${({ $selected }) => $selected && Colour["text-primary"]}; overflow-wrap: anywhere; img { @@ -31,36 +30,32 @@ export const Main = styled.button<{ object-fit: contain; } - ${V2_MediaQuery.MaxWidth.mobileL} { + ${MediaQuery.MaxWidth.sm} { padding: 0.5rem 0.25rem; gap: 0.25rem; - ${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")} + ${Font["body-lg-semibold"]} } ${(props) => { if (props.$error) { return css` - background: ${V2_Color.Neutral[8]}; - border: 1px solid ${V2_Color.Validation.Red.Border}; - - :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Red}; - } + background: ${Colour.bg}; + border: 1px solid ${Colour["border-error"]}; `; } else if (props.$selected) { return css` - background: ${V2_Color.Accent.Light[5]}; - border: 1px solid ${V2_Color.Primary}; + background: ${Colour["bg-selected"]}; + border: 1px solid ${Colour["border-selected"]}; - :hover { - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent}; + &:hover { + background: ${Colour["bg-selected-hover"]}; + border: 1px solid ${Colour["border-selected-hover"]}; } `; } else { return css` &:hover { - border: 1px solid ${V2_Color.Accent.Light[1]}; - box-shadow: 0 0 4px 1px ${V2_Color.Shadow.Accent}; + border: 1px solid ${Colour["border-hover-strong"]}; } `; } @@ -74,7 +69,7 @@ export const Main = styled.button<{ img { filter: grayscale(100%); } - color: ${V2_Color.Neutral[3]}; + color: ${Colour["text-disabled"]}; outline: none; cursor: not-allowed; diff --git a/src/notification-banner/notification-banner.styles.tsx b/src/notification-banner/notification-banner.styles.tsx index af47c9a4e..9e5d384b6 100644 --- a/src/notification-banner/notification-banner.styles.tsx +++ b/src/notification-banner/notification-banner.styles.tsx @@ -1,10 +1,10 @@ import { CrossIcon } from "@lifesg/react-icons/cross"; import styled, { css } from "styled-components"; -import { V2_Color } from "../v2_color"; -import { V2_Layout } from "../v2_layout"; import { ClickableIcon } from "../shared/clickable-icon"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; import { Transition } from "../transition"; +import { Colour, Font } from "../theme"; +import { Layout } from "../layout"; +import { Typography } from "../typography"; // ============================================================================= // STYLE INTERFACES, transient props are denoted with $ @@ -23,19 +23,19 @@ interface ContentStyleProps { // STYLING // ============================================================================= const commonLinkStyle = css` - color: ${V2_Color.Validation.Orange.Icon}; + color: ${Colour["hyperlink-inverse"]}; svg { - color: ${V2_Color.Validation.Orange.Icon}; + color: ${Colour["icon-primary-inverse"]}; } :hover, :active, :visited, :focus { - color: ${V2_Color.Validation.Orange.Icon}; + color: ${Colour["hyperlink-inverse"]}; svg { - color: ${V2_Color.Validation.Orange.Icon}; + color: ${Colour["icon-primary-inverse"]}; } } `; @@ -46,12 +46,12 @@ export const Wrapper = styled.div` top: 0; width: 100%; transition: ${Transition.Base}; - background: ${V2_Color.Neutral[2]}; + background: ${Colour["bg-inverse-subtle"]}; z-index: 25; cursor: ${(props) => (props.$clickable ? "pointer" : "default")}; `; -export const Container = styled(V2_Layout.Content)` +export const Container = styled(Layout.Content)` display: flex; `; @@ -68,20 +68,20 @@ export const Content = styled.div` display: inline-block; width: 100%; - ${V2_TextStyleHelper.getTextStyle("Body", "regular")} - color: ${V2_Color.Neutral[8]}; + ${Font["body-baseline-regular"]} + color: ${Colour["text-inverse"]}; p { display: inline-block; } strong { - ${V2_TextStyleHelper.getFontFamily("Body", "semibold")} - color: ${V2_Color.Neutral[8]}; + ${Font["body-baseline-semibold"]} + color: ${Colour["text-inverse"]}; } a { - ${V2_TextStyleHelper.getTextStyle("Body", "regular")} + ${Font["body-baseline-regular"]} ${commonLinkStyle} } @@ -98,7 +98,7 @@ export const Content = styled.div` }} `; -export const ContentLink = styled(V2_Text.Hyperlink.Default)` +export const ContentLink = styled(Typography.LinkBL)` position: relative; ${commonLinkStyle} @@ -113,7 +113,7 @@ export const StyledIconButton = styled(ClickableIcon)` export const StyledIcon = styled(CrossIcon)` height: 1.875rem; width: 1.875rem; - color: ${V2_Color.Neutral[8]}; + color: ${Colour["icon-inverse"]}; `; export const ActionButton = styled.button` @@ -125,8 +125,8 @@ export const ActionButton = styled.button` border: none; background: transparent; - color: ${V2_Color.Validation.Orange.Icon}; - ${V2_TextStyleHelper.getTextStyle("BodySmall", "semibold")}; + color: ${Colour["hyperlink-inverse"]}; + ${Font["body-md-semibold"]}; cursor: pointer; `; diff --git a/src/notification-banner/types.ts b/src/notification-banner/types.ts index ce710ad81..fb7734d7d 100644 --- a/src/notification-banner/types.ts +++ b/src/notification-banner/types.ts @@ -1,4 +1,4 @@ -import { V2_TextLinkProps, V2_TextProps } from "../v2_text/types"; +import { TypographyLinkProps, TypographyProps } from "../typography"; export interface NotificationBannerProps extends React.HTMLAttributes { @@ -21,11 +21,11 @@ export interface NotificationBannerWithForwardedRefProps export type ContentType = "text" | "link"; -export interface ContentLinkAttributes extends V2_TextLinkProps {} -export interface ContentTextAttributes extends V2_TextProps {} +export interface ContentLinkAttributes extends TypographyLinkProps {} +export interface ContentTextAttributes extends TypographyProps {} export interface NotificationContentAttributes { type: ContentType; content: string; - otherAttributes?: V2_TextLinkProps | V2_TextProps | undefined; + otherAttributes?: TypographyLinkProps | TypographyProps | undefined; } diff --git a/src/smart-app-banner/smart-app-banner.styles.ts b/src/smart-app-banner/smart-app-banner.styles.ts index 411e974f1..d3f6a1094 100644 --- a/src/smart-app-banner/smart-app-banner.styles.ts +++ b/src/smart-app-banner/smart-app-banner.styles.ts @@ -4,10 +4,9 @@ import { StarFillIcon } from "@lifesg/react-icons/star-fill"; import { StarHalfIcon } from "@lifesg/react-icons/star-half"; import styled, { css, keyframes } from "styled-components"; import { Button } from "../button"; -import { V2_Color } from "../v2_color"; -import { V2_MediaQuery } from "../v2_media"; import { ClickableIcon } from "../shared/clickable-icon"; -import { V2_Text, V2_TextStyleHelper } from "../v2_text"; +import { Colour, Font, MediaQuery } from "../theme"; +import { Typography } from "../typography/typography"; const slideDown = keyframes` from { @@ -36,7 +35,7 @@ export const SmartAppBannerContainer = styled.div<{ width: calc(100% - 2.5rem); min-height: 5.5rem; z-index: 9001; - background: ${V2_Color.Neutral[8]}; + background: ${Colour.bg}; box-shadow: 0 0.125rem 0.5rem rgba(104, 104, 104, 0.25); border-radius: 0.5rem; ${(props) => { @@ -58,7 +57,7 @@ export const DismissButton = styled(ClickableIcon)` `; export const Cross = styled(CrossIcon)` - color: ${V2_Color.Neutral[1]}; + color: ${Colour.icon}; height: 1.25rem; width: 1.25rem; `; @@ -77,7 +76,7 @@ export const TextContainer = styled.div` flex-direction: column; align-items: left; margin: 0.5rem; - ${V2_MediaQuery.MaxWidth.mobileM} { + ${MediaQuery.MaxWidth.xs} { margin: 0 0.5rem; } `; @@ -97,18 +96,18 @@ export const StyledButton = styled(Button.Small)` height: auto; & > span { overflow-wrap: anywhere; - ${V2_TextStyleHelper.getTextStyle("XSmall", "semibold")}; + ${Font["body-xs-semibold"]} } `; -export const Title = styled(V2_Text.H6)` +export const Title = styled(Typography.BodySM)` overflow-wrap: anywhere; - ${V2_MediaQuery.MaxWidth.mobileM} { - ${V2_TextStyleHelper.getTextStyle("XSmall", "semibold")} + ${MediaQuery.MaxWidth.xs} { + ${Font["body-xs-semibold"]} } `; -export const Description = styled(V2_Text.XSmall)` +export const Description = styled(Typography.BodyXS)` overflow-wrap: anywhere; `; From 07011a456b051011f294314a078286c4d05458e5 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Wed, 6 Nov 2024 12:44:10 +0800 Subject: [PATCH 2/4] [CCUBE-1608][MAHI]Use radius and border tokens for styling and fix up styling for components --- src/card/card.style.tsx | 8 +++--- src/icon-button/icon-button.style.tsx | 17 +++++------- src/image-button/image-button.style.tsx | 26 +++++++++++-------- .../notification-banner.styles.tsx | 5 ++-- .../smart-app-banner.styles.ts | 7 ++--- 5 files changed, 31 insertions(+), 32 deletions(-) diff --git a/src/card/card.style.tsx b/src/card/card.style.tsx index 9771b55b3..ece5d979a 100644 --- a/src/card/card.style.tsx +++ b/src/card/card.style.tsx @@ -1,12 +1,12 @@ import styled from "styled-components"; -import { Colour } from "../theme"; +import { Colour, Radius, Spacing } from "../theme"; // ============================================================================= // STYLING // ============================================================================= export const StyledCard = styled.div` - border-radius: 0.5rem; + border-radius: ${Radius.md}; background: ${Colour.bg}; - padding: 1rem 2rem; - box-shadow: 0 0.125rem 0.5rem rgba(104, 104, 104, 0.25); + padding: ${Spacing["spacing-16"]} ${Spacing["spacing-32"]}; + box-shadow: 0 2px 8px rgba(104, 104, 104, 0.25); `; diff --git a/src/icon-button/icon-button.style.tsx b/src/icon-button/icon-button.style.tsx index 4af9ad065..ea753332f 100644 --- a/src/icon-button/icon-button.style.tsx +++ b/src/icon-button/icon-button.style.tsx @@ -1,6 +1,6 @@ import styled, { css } from "styled-components"; import { SizeType, StyleType } from "./types"; -import { Colour } from "../theme"; +import { Border, Colour } from "../theme"; interface StyleProps { $styleType: StyleType; $sizeType: SizeType; @@ -60,7 +60,8 @@ export const Main = styled.button` case "secondary": return css` background-color: ${Colour.bg}; - border: 1px solid ${Colour["border-primary"]}; + border: ${Border["width-010"]} solid + ${Colour["border-primary"]}; color: ${Colour["text-primary"]}; :hover { @@ -71,7 +72,7 @@ export const Main = styled.button` case "light": return css` background-color: ${Colour.bg}; - border: 1px solid ${Colour.border}; + border: ${Border["width-010"]} solid ${Colour.border}; color: ${Colour["text-primary"]}; :hover { @@ -91,17 +92,11 @@ export const Main = styled.button` `; } }} - &:hover { - box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2); - } + &:disabled { background-color: ${Colour["bg-disabled"]}; - border: 1px solid ${Colour["border-disabled"]}; + border: ${Border["width-010"]} solid ${Colour["border-disabled"]}; color: ${Colour["text-disabled"]}; cursor: not-allowed; - - &:hover { - box-shadow: none; - } } `; diff --git a/src/image-button/image-button.style.tsx b/src/image-button/image-button.style.tsx index 3fc9ec246..d7b10aa22 100644 --- a/src/image-button/image-button.style.tsx +++ b/src/image-button/image-button.style.tsx @@ -1,5 +1,5 @@ import styled, { css } from "styled-components"; -import { Colour, Font } from "../theme"; +import { Border, Colour, Font, Motion, Radius } from "../theme"; import { MediaQuery } from "../theme"; export const Main = styled.button<{ @@ -14,13 +14,14 @@ export const Main = styled.button<{ align-items: center; padding: 1.5rem 1rem; background-color: ${Colour.bg}; - border: 1px solid transparent; - border-radius: 0.5rem; + border: ${Border["width-010"]} solid transparent; + border-radius: ${Radius.md}; cursor: pointer; max-width: 13rem; - transition: all 200ms ease; + transition: all ${Motion["duration-250"]} ${Motion["ease-default"]}; ${Font["body-baseline-semibold"]} - color: ${({ $selected }) => $selected && Colour["text-primary"]}; + color: ${({ $selected }) => + $selected ? Colour["text-primary"] : Colour["text"]}; overflow-wrap: anywhere; img { @@ -33,29 +34,32 @@ export const Main = styled.button<{ ${MediaQuery.MaxWidth.sm} { padding: 0.5rem 0.25rem; gap: 0.25rem; - ${Font["body-lg-semibold"]} + ${Font["body-md-semibold"]} } ${(props) => { if (props.$error) { return css` background: ${Colour.bg}; - border: 1px solid ${Colour["border-error"]}; + border: ${Border["width-010"]} solid ${Colour["border-error"]}; `; } else if (props.$selected) { return css` background: ${Colour["bg-selected"]}; - border: 1px solid ${Colour["border-selected"]}; + border: ${Border["width-010"]} solid + ${Colour["border-selected"]}; &:hover { background: ${Colour["bg-selected-hover"]}; - border: 1px solid ${Colour["border-selected-hover"]}; + border: ${Border["width-010"]} solid + ${Colour["border-selected-hover"]}; } `; } else { return css` &:hover { - border: 1px solid ${Colour["border-hover-strong"]}; + border: ${Border["width-010"]} solid + ${Colour["border-hover-strong"]}; } `; } @@ -63,7 +67,7 @@ export const Main = styled.button<{ :disabled { &:hover { - border: 1px solid transparent; + border: ${Border["width-010"]} solid transparent; } box-shadow: none; img { diff --git a/src/notification-banner/notification-banner.styles.tsx b/src/notification-banner/notification-banner.styles.tsx index 9e5d384b6..7686e8b88 100644 --- a/src/notification-banner/notification-banner.styles.tsx +++ b/src/notification-banner/notification-banner.styles.tsx @@ -1,8 +1,7 @@ import { CrossIcon } from "@lifesg/react-icons/cross"; import styled, { css } from "styled-components"; import { ClickableIcon } from "../shared/clickable-icon"; -import { Transition } from "../transition"; -import { Colour, Font } from "../theme"; +import { Colour, Font, Motion } from "../theme"; import { Layout } from "../layout"; import { Typography } from "../typography"; @@ -45,7 +44,7 @@ export const Wrapper = styled.div` left: 0; top: 0; width: 100%; - transition: ${Transition.Base}; + transition: all ${Motion["duration-800"]} ${Motion["ease-default"]}; background: ${Colour["bg-inverse-subtle"]}; z-index: 25; cursor: ${(props) => (props.$clickable ? "pointer" : "default")}; diff --git a/src/smart-app-banner/smart-app-banner.styles.ts b/src/smart-app-banner/smart-app-banner.styles.ts index d3f6a1094..ae72aa2d7 100644 --- a/src/smart-app-banner/smart-app-banner.styles.ts +++ b/src/smart-app-banner/smart-app-banner.styles.ts @@ -5,7 +5,7 @@ import { StarHalfIcon } from "@lifesg/react-icons/star-half"; import styled, { css, keyframes } from "styled-components"; import { Button } from "../button"; import { ClickableIcon } from "../shared/clickable-icon"; -import { Colour, Font, MediaQuery } from "../theme"; +import { Colour, Font, FontSpec, MediaQuery, Radius } from "../theme"; import { Typography } from "../typography/typography"; const slideDown = keyframes` @@ -37,7 +37,7 @@ export const SmartAppBannerContainer = styled.div<{ z-index: 9001; background: ${Colour.bg}; box-shadow: 0 0.125rem 0.5rem rgba(104, 104, 104, 0.25); - border-radius: 0.5rem; + border-radius: ${Radius.md}; ${(props) => { if (props.$isAnimated) return css` @@ -101,9 +101,10 @@ export const StyledButton = styled(Button.Small)` `; export const Title = styled(Typography.BodySM)` + font-weight: ${FontSpec["weight-bold"]}; overflow-wrap: anywhere; ${MediaQuery.MaxWidth.xs} { - ${Font["body-xs-semibold"]} + ${Font["body-xs-bold"]} } `; From 6508b5b02080aa3ca1f13572d0899c38400301f5 Mon Sep 17 00:00:00 2001 From: Gundu Mahidhar Reddy Date: Thu, 7 Nov 2024 11:16:53 +0800 Subject: [PATCH 3/4] [CCUBE-1608][MAHI]Use Border token for solid across changes --- src/icon-button/icon-button.style.tsx | 10 ++++++---- src/image-button/image-button.style.tsx | 13 +++++++------ 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/src/icon-button/icon-button.style.tsx b/src/icon-button/icon-button.style.tsx index ea753332f..26d5b1a67 100644 --- a/src/icon-button/icon-button.style.tsx +++ b/src/icon-button/icon-button.style.tsx @@ -60,7 +60,7 @@ export const Main = styled.button` case "secondary": return css` background-color: ${Colour.bg}; - border: ${Border["width-010"]} solid + border: ${Border["width-010"]} ${Border.solid} ${Colour["border-primary"]}; color: ${Colour["text-primary"]}; @@ -72,7 +72,8 @@ export const Main = styled.button` case "light": return css` background-color: ${Colour.bg}; - border: ${Border["width-010"]} solid ${Colour.border}; + border: ${Border["width-010"]} ${Border.solid} + ${Colour.border}; color: ${Colour["text-primary"]}; :hover { @@ -93,9 +94,10 @@ export const Main = styled.button` } }} - &:disabled { +&:disabled { background-color: ${Colour["bg-disabled"]}; - border: ${Border["width-010"]} solid ${Colour["border-disabled"]}; + border: ${Border["width-010"]} ${Border["solid"]} + ${Colour["border-disabled"]}; color: ${Colour["text-disabled"]}; cursor: not-allowed; } diff --git a/src/image-button/image-button.style.tsx b/src/image-button/image-button.style.tsx index d7b10aa22..94af38a87 100644 --- a/src/image-button/image-button.style.tsx +++ b/src/image-button/image-button.style.tsx @@ -14,7 +14,7 @@ export const Main = styled.button<{ align-items: center; padding: 1.5rem 1rem; background-color: ${Colour.bg}; - border: ${Border["width-010"]} solid transparent; + border: ${Border["width-010"]} ${Border.solid} transparent; border-radius: ${Radius.md}; cursor: pointer; max-width: 13rem; @@ -41,24 +41,25 @@ export const Main = styled.button<{ if (props.$error) { return css` background: ${Colour.bg}; - border: ${Border["width-010"]} solid ${Colour["border-error"]}; + border: ${Border["width-010"]} ${Border.solid} + ${Colour["border-error"]}; `; } else if (props.$selected) { return css` background: ${Colour["bg-selected"]}; - border: ${Border["width-010"]} solid + border: ${Border["width-010"]} ${Border.solid} ${Colour["border-selected"]}; &:hover { background: ${Colour["bg-selected-hover"]}; - border: ${Border["width-010"]} solid + border: ${Border["width-010"]} ${Border.solid} ${Colour["border-selected-hover"]}; } `; } else { return css` &:hover { - border: ${Border["width-010"]} solid + border: ${Border["width-010"]} ${Border.solid} ${Colour["border-hover-strong"]}; } `; @@ -67,7 +68,7 @@ export const Main = styled.button<{ :disabled { &:hover { - border: ${Border["width-010"]} solid transparent; + border: ${Border["width-010"]} ${Border.solid} transparent; } box-shadow: none; img { From cae3581af59c87fbc977d3156228c0647fc9bb78 Mon Sep 17 00:00:00 2001 From: Quek Ruo Ling Date: Thu, 7 Nov 2024 13:48:46 +0800 Subject: [PATCH 4/4] [MISC][RL] Update indentation --- src/icon-button/icon-button.style.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/icon-button/icon-button.style.tsx b/src/icon-button/icon-button.style.tsx index 26d5b1a67..a59436912 100644 --- a/src/icon-button/icon-button.style.tsx +++ b/src/icon-button/icon-button.style.tsx @@ -94,7 +94,7 @@ export const Main = styled.button` } }} -&:disabled { + &:disabled { background-color: ${Colour["bg-disabled"]}; border: ${Border["width-010"]} ${Border["solid"]} ${Colour["border-disabled"]};