From 4be5b1ce02ea2d2f64ccac873a76c25a4fb33f13 Mon Sep 17 00:00:00 2001 From: viv <60010897+vivchong@users.noreply.github.com> Date: Thu, 24 Aug 2023 10:37:04 +0800 Subject: [PATCH 1/5] Minor aesthetic changes 1. Shadow blur value: 4px instead of 6px 2. Disabled label for form input fields: N3 instead of N4 (no need to switch colours if disabled) 3. Close icon for modal: N3 instead of N4 --- src/form/form-label.style.tsx | 6 ++---- src/modal/modal-box.styles.tsx | 2 +- src/spec/design-token-spec/base-design-token-set.ts | 4 ++-- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index 6ba7fb63e..fdcac17f7 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -15,8 +15,7 @@ interface LabelProps { export const Label = styled.label` ${TextStyleHelper.getTextStyle("H5", "semibold")} - color: ${(props) => - props.disabled ? Color.Neutral[4](props) : Color.Neutral[3](props)}; + color: ${Color.Neutral[3]}; margin-bottom: 0.5rem; display: inline-block; @@ -37,6 +36,5 @@ export const ErrorMessage = styled(Text.H6)` `; export const Subtitle = styled(Text.BodySmall)` - color: ${(props) => - props.disabled ? Color.Neutral[4](props) : Color.Neutral[3](props)}; + color: ${Color.Neutral[3]}; `; diff --git a/src/modal/modal-box.styles.tsx b/src/modal/modal-box.styles.tsx index 14961fdca..7f0139476 100644 --- a/src/modal/modal-box.styles.tsx +++ b/src/modal/modal-box.styles.tsx @@ -35,5 +35,5 @@ export const CloseButton = styled(ClickableIcon)` export const CloseIcon = styled(CrossIcon)` height: 1.5rem; width: 1.5rem; - color: ${Color.Neutral[4]}; + color: ${Color.Neutral[3]}; `; diff --git a/src/spec/design-token-spec/base-design-token-set.ts b/src/spec/design-token-spec/base-design-token-set.ts index 3256f9823..ab93489a2 100644 --- a/src/spec/design-token-spec/base-design-token-set.ts +++ b/src/spec/design-token-spec/base-design-token-set.ts @@ -4,10 +4,10 @@ import { DesignTokenSet } from "../../design-token/types"; export const BaseDesignTokenSet: DesignTokenSet = { InputBoxShadow: css` - inset 0 0 6px 1px ${Color.Shadow.Accent} + inset 0 0 4px 1px ${Color.Shadow.Accent} `, InputErrorBoxShadow: css` - inset 0 0 6px 1px ${Color.Shadow.Red} + inset 0 0 4px 1px ${Color.Shadow.Red} `, ElevationBoxShadow: css` 0px 2px 8px ${Color.Shadow.Elevation} From 079bf1c64fdc1c95dfc59ec356ee139400db5f9a Mon Sep 17 00:00:00 2001 From: viv <60010897+vivchong@users.noreply.github.com> Date: Thu, 24 Aug 2023 11:59:39 +0800 Subject: [PATCH 2/5] Updated box shadow pptys Adjusted box shadow pptys to look more like the ones in Figma --- src/spec/design-token-spec/base-design-token-set.ts | 4 ++-- src/spec/design-token-spec/rbs-design-token-set.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/spec/design-token-spec/base-design-token-set.ts b/src/spec/design-token-spec/base-design-token-set.ts index ab93489a2..6b86674b4 100644 --- a/src/spec/design-token-spec/base-design-token-set.ts +++ b/src/spec/design-token-spec/base-design-token-set.ts @@ -4,10 +4,10 @@ import { DesignTokenSet } from "../../design-token/types"; export const BaseDesignTokenSet: DesignTokenSet = { InputBoxShadow: css` - inset 0 0 4px 1px ${Color.Shadow.Accent} + inset 0 0 3px 0px ${Color.Shadow.Accent} `, InputErrorBoxShadow: css` - inset 0 0 4px 1px ${Color.Shadow.Red} + inset 0 0 3px 0px ${Color.Shadow.Red} `, ElevationBoxShadow: css` 0px 2px 8px ${Color.Shadow.Elevation} diff --git a/src/spec/design-token-spec/rbs-design-token-set.ts b/src/spec/design-token-spec/rbs-design-token-set.ts index 76e0e847e..e0b466034 100644 --- a/src/spec/design-token-spec/rbs-design-token-set.ts +++ b/src/spec/design-token-spec/rbs-design-token-set.ts @@ -4,10 +4,10 @@ import { DesignTokenSet } from "../../design-token/types"; export const RBSDesignTokenSet: DesignTokenSet = { InputBoxShadow: css` - inset 0 0 6px 1px ${Color.Shadow.Accent} + inset 0 0 3px 0px ${Color.Shadow.Accent} `, InputErrorBoxShadow: css` - inset 0 0 6px 1px ${Color.Shadow.Red} + inset 0 0 3px 0px ${Color.Shadow.Red} `, ElevationBoxShadow: css` 0px 2px 8px ${Color.Shadow.Elevation} From ddc5db7c5083cd40eb13018ec10d8e67e9056792 Mon Sep 17 00:00:00 2001 From: viv <60010897+vivchong@users.noreply.github.com> Date: Fri, 25 Aug 2023 14:55:09 +0800 Subject: [PATCH 3/5] Removed the style interface --- src/form/form-label.style.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index fdcac17f7..e2b6e9f45 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -2,19 +2,12 @@ import styled from "styled-components"; import { Color } from "../color"; import { Text, TextStyleHelper } from "../text"; -// ============================================================================= -// STYLE INTERFACE -// ============================================================================= -interface LabelProps { - disabled?: boolean; -} - // ============================================================================= // STYLING // ============================================================================= export const Label = styled.label` +export const Label = styled.label` ${TextStyleHelper.getTextStyle("H5", "semibold")} - color: ${Color.Neutral[3]}; margin-bottom: 0.5rem; display: inline-block; From f346215be1105cead79805c30d2a550145d424cf Mon Sep 17 00:00:00 2001 From: viv <60010897+vivchong@users.noreply.github.com> Date: Fri, 25 Aug 2023 15:08:17 +0800 Subject: [PATCH 4/5] Removed style interface 2 In previous commit, the line wasn't deleted, not sure why --- src/form/form-label.style.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index e2b6e9f45..1acab44a3 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -5,7 +5,6 @@ import { Text, TextStyleHelper } from "../text"; // ============================================================================= // STYLING // ============================================================================= -export const Label = styled.label` export const Label = styled.label` ${TextStyleHelper.getTextStyle("H5", "semibold")} color: ${Color.Neutral[3]}; From c8a2589236beb048fdacea21517867f531969744 Mon Sep 17 00:00:00 2001 From: viv <60010897+vivchong@users.noreply.github.com> Date: Fri, 25 Aug 2023 16:10:18 +0800 Subject: [PATCH 5/5] Removed last reference of --- src/form/form-label.style.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/form/form-label.style.tsx b/src/form/form-label.style.tsx index 1acab44a3..daf25c396 100644 --- a/src/form/form-label.style.tsx +++ b/src/form/form-label.style.tsx @@ -27,6 +27,6 @@ export const ErrorMessage = styled(Text.H6)` outline: none; `; -export const Subtitle = styled(Text.BodySmall)` +export const Subtitle = styled(Text.BodySmall)` color: ${Color.Neutral[3]}; `;