From 4ec4032871a90609098fbf70d2de7142834e3fba Mon Sep 17 00:00:00 2001 From: Haider Alshamma Date: Fri, 22 Nov 2024 12:52:11 -0500 Subject: [PATCH] fix: align interactive elements with the label --- src/Checkbox/Checkbox.tsx | 1 + src/Layout/ApplicationFrame.tsx | 1 - src/Radio/Radio.tsx | 1 + src/Toggle/ToggleButton.tsx | 6 +++- src/scripts/generateTheme.ts | 20 ++++++------ src/theme/theme.ts | 56 ++++++++++++++++----------------- src/utils/ClickInputLabel.tsx | 1 - 7 files changed, 45 insertions(+), 41 deletions(-) diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx index 83d8d8e38..eb030a6b9 100644 --- a/src/Checkbox/Checkbox.tsx +++ b/src/Checkbox/Checkbox.tsx @@ -94,6 +94,7 @@ const VisualCheckbox = styled.div( borderRadius: theme.radii.small, border: "solid 1px", position: "relative", + marginTop: theme.space.x0_5, // checkmark "&:before": { content: "''", diff --git a/src/Layout/ApplicationFrame.tsx b/src/Layout/ApplicationFrame.tsx index 297aa2c09..537030636 100644 --- a/src/Layout/ApplicationFrame.tsx +++ b/src/Layout/ApplicationFrame.tsx @@ -1,5 +1,4 @@ import React from "react"; - import Box from "../Box/Box"; import Flex, { FlexProps } from "../Flex/Flex"; import EnvironmentBanner from "../BrandedNavBar/EnvironmentBanner"; diff --git a/src/Radio/Radio.tsx b/src/Radio/Radio.tsx index f394a6aac..3ad64231a 100644 --- a/src/Radio/Radio.tsx +++ b/src/Radio/Radio.tsx @@ -67,6 +67,7 @@ const VisualRadio = styled.div( height: theme.space.x2, marginRight: theme.space.x1, borderRadius: theme.radii.circle, + marginTop: theme.space.x0_5, border: "solid 1px", position: "relative", "&:before": { diff --git a/src/Toggle/ToggleButton.tsx b/src/Toggle/ToggleButton.tsx index 33783a935..3f4858861 100644 --- a/src/Toggle/ToggleButton.tsx +++ b/src/Toggle/ToggleButton.tsx @@ -5,6 +5,7 @@ import type { Transition } from "framer-motion"; import styled, { CSSObject, useTheme } from "styled-components"; import { DefaultNDSThemeType } from "../theme"; import { AnimatedBox } from "../Box"; +import { useComponentVariant } from "../NDSProvider/ComponentVariantContext"; type SwitchProps = { children?: React.ReactNode; @@ -49,8 +50,11 @@ const animationConfig: AnimationConfig = { }; function Switch({ children, disabled, toggled, onClick }: SwitchProps) { + const componentVariant = useComponentVariant(); + return ( > = ({ disabled, chil scale: disabled ? undefined : animationConfig.scale, }, toggled: { - marginLeft: theme.space.x3, + marginLeft: "24px", }, initial: { marginLeft: theme.space.none, diff --git a/src/scripts/generateTheme.ts b/src/scripts/generateTheme.ts index 2ede7e79f..6f099a6b0 100644 --- a/src/scripts/generateTheme.ts +++ b/src/scripts/generateTheme.ts @@ -196,7 +196,7 @@ function generateThemeConfig(baseUnit: number): DefaultNDSThemeType { const semanticFontSizes = { heading1: fontSizes.larger, heading2: fontSizes.large, - heading3: fontSizes.medium, + heading3: fontSizes.md, heading4: fontSizes.small, base: fontSizes.small, } as const; @@ -229,20 +229,20 @@ function generateThemeConfig(baseUnit: number): DefaultNDSThemeType { ...pxs(semanticFontSizes), }, lineHeights: { - base: s((6 * baseUnit) / semanticFontSizes.base), - baseRelaxed: s((7 * baseUnit) / semanticFontSizes.base), + base: s((5 * baseUnit) / semanticFontSizes.base), + baseRelaxed: s((6 * baseUnit) / semanticFontSizes.base), smallTextBase: s((5 * baseUnit) / fontSizes.small), smallTextCompressed: s((5 * baseUnit) / fontSizes.small), smallRelaxed: s((6 * baseUnit) / fontSizes.small), smallerText: s((4 * baseUnit) / fontSizes.smaller), smallerRelaxed: s((5 * baseUnit) / fontSizes.smaller), - heading1: s((7 * baseUnit) / semanticFontSizes.heading1), - heading2: s((6 * baseUnit) / semanticFontSizes.heading2), - heading3: s((5 * baseUnit) / semanticFontSizes.heading3), - heading4: s((4 * baseUnit) / semanticFontSizes.heading4), - title: s((7 * baseUnit) / semanticFontSizes.heading1), - sectionTitle: s((6 * baseUnit) / semanticFontSizes.heading2), - subsectionTitle: s((5 * baseUnit) / semanticFontSizes.heading3), + heading1: s((8 * baseUnit) / semanticFontSizes.heading1), + heading2: s((7 * baseUnit) / semanticFontSizes.heading2), + heading3: s((6 * baseUnit) / semanticFontSizes.heading3), + heading4: s((5 * baseUnit) / semanticFontSizes.heading4), + title: s((8 * baseUnit) / semanticFontSizes.heading1), + sectionTitle: s((7 * baseUnit) / semanticFontSizes.heading2), + subsectionTitle: s((6 * baseUnit) / semanticFontSizes.heading3), }, space, sizes: space, diff --git a/src/theme/theme.ts b/src/theme/theme.ts index dd70ba74d..8b450dbf9 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -232,24 +232,24 @@ export const themes: Record = { xxl: "30px", heading1: "24px", heading2: "21px", - heading3: "15px", + heading3: "18px", heading4: "15px", base: "15px", }, lineHeights: { - base: "1.6", - baseRelaxed: "1.8666666666666667", + base: "1.3333333333333333", + baseRelaxed: "1.6", smallTextBase: "1.3333333333333333", smallTextCompressed: "1.3333333333333333", smallRelaxed: "1.6", smallerText: "1.3333333333333333", smallerRelaxed: "1.6666666666666667", - heading1: "1.1666666666666667", - heading2: "1.1428571428571428", + heading1: "1.3333333333333333", + heading2: "1.3333333333333333", heading3: "1.3333333333333333", - heading4: "1.0666666666666667", - title: "1.1666666666666667", - sectionTitle: "1.1428571428571428", + heading4: "1.3333333333333333", + title: "1.3333333333333333", + sectionTitle: "1.3333333333333333", subsectionTitle: "1.3333333333333333", }, space: { @@ -380,25 +380,25 @@ export const themes: Record = { xxl: "42px", heading1: "33.599999999999994px", heading2: "29.4px", - heading3: "21px", + heading3: "25.2px", heading4: "21px", base: "21px", }, lineHeights: { - base: "1.5999999999999996", - baseRelaxed: "1.8666666666666665", + base: "1.3333333333333333", + baseRelaxed: "1.5999999999999996", smallTextBase: "1.3333333333333333", smallTextCompressed: "1.3333333333333333", smallRelaxed: "1.5999999999999996", smallerText: "1.3333333333333335", smallerRelaxed: "1.666666666666667", - heading1: "1.1666666666666667", - heading2: "1.1428571428571428", - heading3: "1.3333333333333333", - heading4: "1.0666666666666667", - title: "1.1666666666666667", - sectionTitle: "1.1428571428571428", - subsectionTitle: "1.3333333333333333", + heading1: "1.3333333333333335", + heading2: "1.3333333333333333", + heading3: "1.333333333333333", + heading4: "1.3333333333333333", + title: "1.3333333333333335", + sectionTitle: "1.3333333333333333", + subsectionTitle: "1.333333333333333", }, space: { none: "0px", @@ -528,25 +528,25 @@ export const themes: Record = { xxl: "27px", heading1: "21.6px", heading2: "18.900000000000002px", - heading3: "13.5px", + heading3: "16.2px", heading4: "13.5px", base: "13.5px", }, lineHeights: { - base: "1.6", - baseRelaxed: "1.8666666666666667", + base: "1.3333333333333333", + baseRelaxed: "1.6", smallTextBase: "1.3333333333333333", smallTextCompressed: "1.3333333333333333", smallRelaxed: "1.6", smallerText: "1.3333333333333333", smallerRelaxed: "1.6666666666666665", - heading1: "1.1666666666666665", - heading2: "1.1428571428571428", - heading3: "1.3333333333333333", - heading4: "1.0666666666666667", - title: "1.1666666666666665", - sectionTitle: "1.1428571428571428", - subsectionTitle: "1.3333333333333333", + heading1: "1.3333333333333333", + heading2: "1.333333333333333", + heading3: "1.3333333333333335", + heading4: "1.3333333333333333", + title: "1.3333333333333333", + sectionTitle: "1.333333333333333", + subsectionTitle: "1.3333333333333335", }, space: { none: "0px", diff --git a/src/utils/ClickInputLabel.tsx b/src/utils/ClickInputLabel.tsx index ec1df0494..cd7a0ef7e 100644 --- a/src/utils/ClickInputLabel.tsx +++ b/src/utils/ClickInputLabel.tsx @@ -4,7 +4,6 @@ import { ComponentVariant } from "../NDSProvider/ComponentVariantContext"; const ClickInputLabel = styled.label<{ variant?: ComponentVariant; disabled?: boolean }>(({ disabled, theme }) => ({ cursor: disabled ? undefined : "pointer", display: "inline-flex", - alignItems: "center", width: "auto", minHeight: theme.space.x3, userSelect: "none",