fix: align interactive elements with the label

src/Checkbox/Checkbox.tsx

@@ -94,6 +94,7 @@ const VisualCheckbox = styled.div<VisualCheckboxProps>(
     borderRadius: theme.radii.small,
     border: "solid 1px",
     position: "relative",
+    marginTop: theme.space.x0_5,
     // checkmark
     "&:before": {
       content: "''",

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";

src/Radio/Radio.tsx

@@ -67,6 +67,7 @@ const VisualRadio = styled.div<VisualRadioProps>(
     height: theme.space.x2,
     marginRight: theme.space.x1,
     borderRadius: theme.radii.circle,
+    marginTop: theme.space.x0_5,
     border: "solid 1px",
     position: "relative",
     "&:before": {

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 (
     <AnimatedBox
+      marginTop={componentVariant === "touch" ? "x0_25" : "none"}
       position="relative"
       flexShrink={0}
       height="24px"
@@ -82,7 +86,7 @@ const Slider: React.FC<React.PropsWithChildren<SliderProps>> = ({ disabled, chil
           scale: disabled ? undefined : animationConfig.scale,
         },
         toggled: {
-          marginLeft: theme.space.x3,
+          marginLeft: "24px",
         },
         initial: {
           marginLeft: theme.space.none,

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,

src/theme/theme.ts

@@ -232,24 +232,24 @@ export const themes: Record<ThemeKey, DefaultNDSThemeType> = {
       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<ThemeKey, DefaultNDSThemeType> = {
       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<ThemeKey, DefaultNDSThemeType> = {
       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",

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",