SD-106: Update font and design tokens

src/domains/chains/components/ChainSelector.tsx

@@ -86,7 +86,7 @@ const StyledButton = styled(Button)`
   border-color: ${vars('--color-neutral-stroke-2-rest')};
   overflow: hidden;
 
-  ${typography.web.body1};
+  ${typography.body1};
 
   @media (width <= ${BOTTOM_MENU_BREAKPOINT}) { /* stylelint-disable-line media-query-no-invalid */
     width: fit-content;
@@ -99,7 +99,7 @@ const Option = styled.div`
   gap: ${vars('--spacing-s')};
   width: 100%;
 
-  ${typography.web.body1Strong};
+  ${typography.body1Strong};
 
   & > ${CIcon} {
     margin-left: auto;

src/domains/chains/components/ConnectModal.tsx

@@ -81,7 +81,7 @@ const Content = styled.div`
 `;
 
 const Title = styled.h3`
-  ${typography.decorative.subtitle1};
+  ${typography.subtitle1};
 `;
 
 const Text = styled.p`
@@ -92,7 +92,7 @@ const Text = styled.p`
 
   text-wrap: pretty;
 
-  ${typography.decorative.body1};
+  ${typography.body1};
 `;
 
 const Buttons = styled.div`
@@ -115,7 +115,7 @@ const Link = styled.a`
   display: flex;
   gap: ${vars('--spacing-xs')};
   color: ${vars('--color-brand-foreground-link-rest')};
-  ${typography.web.body1};
+  ${typography.body1};
 
   & > a {
     color: ${vars('--color-brand-foreground-link-rest')};
@@ -129,7 +129,7 @@ const Branding = styled.div`
   gap: ${vars('--spacing-s')};
   align-items: center;
   color: ${vars('--color-neutral-foreground-2-rest')};
-  ${typography.web.subtitle1};
+  ${typography.subtitle1};
 `;
 
 const LogoContainer = styled.div`

src/domains/misc/components/Badge.tsx

@@ -229,8 +229,8 @@ const BadgeText = styled.span.withConfig({
     })};
   text-align: center;
   ${perSize({
-    medium: typography.web.caption2,
-    large: typography.web.caption1,
+    medium: typography.caption2,
+    large: typography.caption1,
   })};
   line-height: 100%;
 `;

src/domains/misc/components/Button/Button.tsx

@@ -102,11 +102,11 @@ const DomButton = styled.button.withConfig({
   white-space: nowrap;
 
   ${perSize({
-    large: typography.decorative.subtitle1,
-    medium: typography.decorative.subtitle2,
-    small: typography.decorative.body1Strong,
-    'extra-small': typography.decorative.caption1Strong,
-    tiny: typography.decorative.caption2Strong,
+    large: typography.subtitle1,
+    medium: typography.subtitle2,
+    small: typography.body1Strong,
+    'extra-small': typography.caption1Strong,
+    tiny: typography.caption2Strong,
   })};
   border-radius: ${perSize({
     large: vars('--border-radius-s'),

src/domains/misc/components/CopyButton.tsx

@@ -73,7 +73,7 @@ const StyledButton = styled.button`
   color: ${vars('--color-brand-foreground-1-rest')};
 
   border-radius: ${vars('--border-radius-m')};
-  ${typography.decorative.body2};
+  ${typography.body2};
   transition: color 0.2s;
 `;
 

src/domains/misc/components/InfoPair.tsx

@@ -57,7 +57,7 @@ const Label = styled.div`
   height: 24px;
 
   flex-shrink: 0;
-  ${typography.web.body1};
+  ${typography.body1};
 `;
 
 const Value = styled.div<{ $allowShrinking?: boolean }>`
@@ -66,7 +66,7 @@ const Value = styled.div<{ $allowShrinking?: boolean }>`
   overflow: hidden;
 
   flex-shrink: ${({ $allowShrinking }) => ($allowShrinking ? 1 : 0)};
-  ${typography.web.body1Strong};
+  ${typography.body1Strong};
 `;
 
 const Separator = styled.div`

src/domains/misc/components/InteractiveSlider/Axis.tsx

@@ -41,7 +41,7 @@ const Container = styled.div`
   position: relative;
   height: 16px;
 
-  ${typography.web.caption2}
+  ${typography.caption2}
 `;
 
 const Label = styled.div<{ $highlighted: boolean }>`

src/domains/misc/components/Layout/Footer.tsx

@@ -86,7 +86,7 @@ const CopyrightContainer = styled(InnerContainer)`
 const Copyright = styled.div`
   width: 100%;
   color: ${vars('--color-neutral-foreground-4-rest')};
-  ${typography.web.caption2}
+  ${typography.caption2}
 
   @media (width >= ${BREAKPOINTS.sm}) { /* stylelint-disable-line media-query-no-invalid */
     width: auto;
@@ -97,5 +97,5 @@ const Link = styled.a`
   color: ${vars('--color-neutral-foreground-4-rest')};
 
   text-decoration: underline;
-  ${typography.web.caption2}
+  ${typography.caption2}
 `;

src/domains/misc/components/Layout/ThemeSelector.tsx

@@ -50,5 +50,5 @@ const CapitalizedButton = styled(Button)`
 
 const Title = styled.span`
   color: ${vars('--color-neutral-foreground-1-rest')};
-  ${typography.web.body1}
+  ${typography.body1}
 `;

src/domains/misc/components/Layout/TopBar/TopBar.tsx

@@ -82,7 +82,7 @@ const BrandContainer = styled.div`
 const AccountDetails = styled.div`
   display: flex;
   align-items: center;
-  ${typography.web.caption1};
+  ${typography.caption1};
 `;
 
 const AccountManager = styled.div`

src/domains/misc/components/Modal/Modal.stories.tsx

@@ -124,7 +124,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 20px;
-  ${typography.web.body1};
+  ${typography.body1};
 `;
 
 const ButtonWrapper = styled.div`

src/domains/misc/components/PasteButton.tsx

@@ -69,7 +69,7 @@ const StyledButton = styled.button`
   gap: ${vars('--spacing-xs')};
 
   border-radius: ${vars('--border-radius-m')};
-  ${typography.decorative.caption1Strong};
+  ${typography.caption1Strong};
   transition: color 0.2s;
 `;
 

src/domains/misc/components/SelectBox.tsx

@@ -168,7 +168,7 @@ const StyledButton = styled(Button)`
   border-radius: ${vars('--border-radius-xs')};
   outline: none;
 
-  ${typography.web.body1Strong};
+  ${typography.body1Strong};
 
   &:hover, &:active, &:focus, &:focus-visible, &:disabled  {
     border: none;
@@ -184,6 +184,6 @@ const Title = styled.div`
   margin-top: ${vars('--spacing-s')};
   padding-block: ${vars('--spacing-s')};
   padding-inline: 8px;
-  ${typography.web.caption1Strong};
+  ${typography.caption1Strong};
   color: ${vars('--color-neutral-foreground-3-rest')};
 `;

src/domains/misc/components/Tabs/Tab.tsx

@@ -148,10 +148,10 @@ const Container = styled(motion.button)<{ selected: boolean, $size: Size }>`
   /* Note: When changing fonts here, make sure to supply the widest one to the hack below! */
   ${perSize({
     small: ({ selected }: { selected: boolean }) => (
-      selected ? typography.decorative.body1Strong : typography.decorative.body1
+      selected ? typography.body1Strong : typography.body1
     ),
     medium: ({ selected }: { selected: boolean }) => (
-      selected ? typography.decorative.subtitle2 : typography.decorative.body2
+      selected ? typography.subtitle2 : typography.body2
     ),
   })}
 

src/domains/misc/components/TextInput.tsx

@@ -110,7 +110,7 @@ const Container = styled.div<ContainerProps>`
     outline: css`border: ${BORDER_SIZE}px solid ${vars('--color-neutral-stroke-1-rest')}`,
   })};
 
-  ${typography.web.body1}
+  ${typography.body1}
 
   & * {
     fill: ${vars('--color-neutral-foreground-3-rest')};
@@ -182,7 +182,7 @@ const Input = styled.input`
   outline: none;
   transition: color ${transitionTime};
 
-  ${typography.web.body2}
+  ${typography.body2}
 
   &::placeholder {
     color: ${vars('--color-neutral-foreground-4-rest')};

src/domains/misc/components/Title.tsx

@@ -50,9 +50,9 @@ const TitleBar = styled.header<{ $size: Size }>`
     large: '60px',
   })};
   ${perSize({
-    small: typography.decorative.body1Strong,
-    medium: typography.decorative.subtitle2,
-    large: typography.decorative.subtitle1,
+    small: typography.body1Strong,
+    medium: typography.subtitle2,
+    large: typography.subtitle1,
   })}
 `;
 

src/domains/misc/components/Toast/Toast.tsx

@@ -146,20 +146,20 @@ const Title = styled.span`
   flex-grow: 1;
   margin-right: ${vars('--spacing-s')};
   color: ${vars('--color-neutral-foreground-1-rest')};
-  ${typography.web.body1Strong}
+  ${typography.body1Strong}
 `;
 
 const Time = styled.span`
   min-width: fit-content;
   margin-right: ${vars('--spacing-s')};
   color: ${vars('--color-neutral-foreground-1-rest')};
-  ${typography.web.caption1}
+  ${typography.caption1}
 `;
 
 const Action = styled.button`
   margin-right: ${vars('--spacing-m')};
   color: ${vars('--color-brand-foreground-link-rest')};
-  ${typography.web.body1}
+  ${typography.body1}
 
   &:hover {
     text-decoration: underline;
@@ -181,12 +181,12 @@ const Subtitle = styled.p`
   color: ${vars('--color-neutral-foreground-2-rest')};
 
   word-wrap: anywhere;  /* stylelint-disable-line declaration-property-value-no-unknown */
-  ${typography.web.caption1}
+  ${typography.caption1}
 `;
 
 const Body = styled.div`
   color: ${vars('--color-neutral-foreground-2-rest')};
-  ${typography.web.caption1}
+  ${typography.caption1}
 `;
 
 const ActionGroup = styled.section`

src/domains/misc/components/Tooltip/LazyLoadedTooltip.tsx

@@ -89,7 +89,7 @@ const StyledContent = styled(RadixTooltip.Content)`
   &[data-side='left'] { animation-name: ${slideLeft}; }
   &[data-side='right'] { animation-name: ${slideRight}; }
 
-  ${typography.web.caption1}
+  ${typography.caption1}
 `;
 
 const StyledArrow = styled(RadixTooltip.Arrow)`

src/domains/shielder/components/AccountTypeSelector/AccountTypeSelector.tsx

@@ -96,7 +96,7 @@ const BalanceName = styled.div`
   display: flex;
   align-items: center;
   gap: ${vars('--spacing-xxs')};
-  ${typography.web.body1Strong};
+  ${typography.body1Strong};
   background: inherit;
 `;
 
@@ -122,6 +122,6 @@ const Details = styled.div`
 `;
 
 const Address = styled(CopyButton)`
-  ${typography.web.caption1};
+  ${typography.caption1};
   gap: ${vars('--spacing-xs')};
 `;

src/domains/shielder/components/Activity/ActivityItem.tsx

@@ -156,16 +156,16 @@ const Info = styled.div`
 
 const Label = styled.div`
   color: ${vars('--color-neutral-foreground-3-rest')};
-  ${typography.web.caption2}
+  ${typography.caption2}
 `;
 
 const Title = styled.div`
-  ${typography.decorative.subtitle2}
+  ${typography.subtitle2}
 `;
 
 const Balance = styled.div<{ $isPositive: boolean, $status: Status }>`
   margin-left: auto;
-  ${typography.decorative.subtitle2};
+  ${typography.subtitle2};
 
   ${({ $isPositive, $status }) => {
     if ($isPositive) {

src/domains/shielder/components/Activity/Empty.tsx

@@ -31,12 +31,12 @@ const Text = styled(motion.div)`
   text-align: center;
 
   & > :first-of-type {
-    ${typography.decorative.subtitle2}
+    ${typography.subtitle2}
   }
 
   & > :last-of-type {
     max-width: 322px;
     color: ${vars('--color-neutral-foreground-2-rest')};
-    ${typography.web.body1};
+    ${typography.body1};
   }
 `;

src/domains/shielder/components/HelpDisclaimer.tsx

@@ -36,7 +36,7 @@ const Container = styled.div`
 
 const Text = styled.p`
   color: ${vars('--color-neutral-foreground-4-rest')};
-  ${typography.web.caption1}
+  ${typography.caption1}
 `;
 
 const Link = styled.a`

src/domains/shielder/components/Shielder.tsx

@@ -171,7 +171,7 @@ const InfoBox = styled.div`
   gap: ${vars('--spacing-s')};
   padding-left: ${vars('--spacing-xs')};
   color: ${vars('--color-neutral-foreground-3-rest')};
-  ${typography.web.body1Strong};
+  ${typography.body1Strong};
 `;
 
 const Disclaimer = styled(DoubleBorderBox.Content)`
@@ -193,7 +193,7 @@ const InfoContainer = styled.div`
   gap: ${vars('--spacing-xs')};
   padding: ${vars('--spacing-m')} ${vars('--spacing-l')} ${vars('--spacing-l')};
   color: ${vars('--color-neutral-foreground-2-rest')};
-  ${typography.web.caption1};
+  ${typography.caption1};
 `;
 
 const ShieldImage = styled.img`

src/domains/shielder/components/SignatureModal.tsx

@@ -121,12 +121,12 @@ const SignatureIcon = styled(CIcon)`
 `;
 
 const Title = styled.h3<{ $isError?: boolean }>`
-  ${typography.decorative.subtitle1};
+  ${typography.subtitle1};
   ${({ $isError }) => $isError && css`color: ${vars('--color-status-danger-foreground-1-rest')};`}
 `;
 
 const Text = styled.p`
-  ${typography.decorative.body1};
+  ${typography.body1};
   text-align: center;
   color: ${vars('--color-neutral-foreground-2-rest')};
 `;
@@ -141,7 +141,7 @@ const Buttons = styled.div`
 const LearnMore = styled.a`
   display: flex;
   gap: ${vars('--spacing-xs')};
-  ${typography.web.body1};
+  ${typography.body1};
 
   &, & > a {
     color: ${vars('--color-brand-foreground-link-rest')};