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
LifeSG · Aug 24, 2023 · 4be5b1c · 4be5b1c
1 parent 653e727
commit 4be5b1c
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git 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<LabelProps>`
     ${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)<LabelProps>`
-    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
@@ -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
@@ -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}