decentraland · andyesp · Jun 30, 2023 · Jun 21, 2023 · Jun 21, 2023 · Jun 21, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -91,6 +91,7 @@
     "react-hook-form": "^7.43.5",
     "react-intl": "^6.4.4",
     "react-loading-skeleton": "^3.1.0",
+    "react-markdown": "^7.1.2",
     "react-select": "^5.3.2",
     "remark-parse": "^9.0.0",
     "remark-stringify": "^9.0.1",

diff --git a/src/components/ActionCard/ActionCard.css b/src/components/ActionCard/ActionCard.css
@@ -16,14 +16,14 @@
 
 .ui.card.ActionCard h3 {
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   font-size: 15px;
   margin: 0;
 }
 
 .ui.card.ActionCard p {
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--weight-normal);
   font-size: 15px;
   line-height: 24px;
   margin: 0;
@@ -53,7 +53,7 @@
   border-radius: 4px;
   color: var(--white-900);
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   font-size: 10px;
   letter-spacing: -0.2px;
   text-transform: uppercase;

diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
 import { Close } from 'decentraland-ui/dist/components/Close/Close'
 
-import Text from '../Common/Text/Text'
+import Text from '../Common/Typography/Text'
 
 import './Banner.css'
 

diff --git a/src/components/Category/CategoryBanner.css b/src/components/Category/CategoryBanner.css
@@ -1,17 +1,15 @@
 .CategoryBanner {
   width: 100%;
   height: 100%;
-  padding: 20px;
   display: flex;
   align-items: center;
   align-content: stretch;
   position: relative;
   padding: 16px 20px;
-  background-color: transparent;
   margin-bottom: 8px;
   cursor: default;
-  background-color: var(--background-disabled);
   border-radius: 8px;
+  background-color: var(--background-disabled);
 }
 
 .CategoryBanner__Icon {
@@ -42,7 +40,7 @@
   border-radius: 4px;
   z-index: 1;
   padding: 4px 5px;
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   font-size: 10px;
   line-height: 5px;
   letter-spacing: -0.2px;
@@ -55,10 +53,10 @@
   background-color: var(--black-400);
 }
 
-.CategoryBanner__PausedText .dg.Paragraph {
+.CategoryBanner__PausedText {
   margin-top: 4px;
   font-size: 13px !important;
-  font-style: italic;
+  font-style: italic !important;
 }
 
 .CategoryBanner--poi,
@@ -163,11 +161,3 @@
   height: 100%;
   width: auto;
 }
-
-.CategoryBanner .dg.Paragraph {
-  margin-bottom: 0;
-}
-
-.CategoryBanner .dg.Paragraph.Paragraph--tiny {
-  font-size: 15px;
-}
diff --git a/src/components/Category/CategoryBanner.tsx b/src/components/Category/CategoryBanner.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 
 import { HiringType, PoiType, ProposalType, isHiringType } from '../../entities/Proposal/types'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { navigate } from '../../utils/locations'
-import Link from '../Common/Link'
-import Text from '../Common/Text/Text'
+import Link from '../Common/Typography/Link'
+import Markdown from '../Common/Typography/Markdown'
+import Text from '../Common/Typography/Text'
 import AddPoi from '../Icon/ProposalCategories/AddPoi'
 import BanName from '../Icon/ProposalCategories/BanName'
 import Catalyst from '../Icon/ProposalCategories/Catalyst'
@@ -99,7 +99,9 @@ export default function CategoryBanner({ active = true, isNew, type, onClick, hr
           )}
         </div>
         <Text>{t(`category.${type}_description`)}</Text>
-        {!active && <Markdown className="CategoryBanner__PausedText">{t(`category.${type}_paused`)}</Markdown>}
+        {!active && (
+          <Markdown componentsClassNames={{ p: 'CategoryBanner__PausedText' }}>{t(`category.${type}_paused`)}</Markdown>
+        )}
       </div>
     </Component>
   )

diff --git a/src/components/Category/CategoryOption.css b/src/components/Category/CategoryOption.css
@@ -33,7 +33,7 @@
 }
 
 .CategoryOption.CategoryOption--active .dg.Paragraph.Paragraph--semi-bold {
-  font-weight: 500;
+  font-weight: var(--weight-semi-bold);
 }
 
 .CategoryOption.CategoryOption--catalyst:hover,
@@ -84,7 +84,7 @@
 }
 
 .CategoryOption__Counter {
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   font-size: 10px;
   line-height: 13px;
   color: var(--black-600);
@@ -138,7 +138,7 @@
 .CategoryOption__SubcategoryItem:hover,
 .CategoryOption__SubcategoryItem--active {
   color: var(--black-800);
-  font-weight: 500;
+  font-weight: var(--weight-semi-bold);
 }
 
 .CategoryOption__SubcategoryItem--active {

diff --git a/src/components/Category/CategoryOption.tsx b/src/components/Category/CategoryOption.tsx
@@ -11,7 +11,7 @@ import { ProposalType, toProposalType } from '../../entities/Proposal/types'
 import { CategoryIconVariant } from '../../helpers/styles'
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { navigate } from '../../utils/locations'
-import Text from '../Common/Text/Text'
+import Text from '../Common/Typography/Text'
 import Arrow from '../Icon/Arrow'
 import All from '../Icon/ProposalCategories/All'
 import Grant from '../Icon/ProposalCategories/Grant'

diff --git a/src/components/Category/CategoryPill.tsx b/src/components/Category/CategoryPill.tsx
@@ -5,8 +5,8 @@ import { Mobile, NotMobile } from 'decentraland-ui/dist/components/Media/Media'
 
 import { ProposalType } from '../../entities/Proposal/types'
 import locations from '../../utils/locations'
-import Link from '../Common/Link'
 import Pill, { PillColor } from '../Common/Pill'
+import Link from '../Common/Typography/Link'
 
 const ColorsConfig: Record<ProposalType, PillColor> = {
   [ProposalType.POI]: PillColor.Green,

diff --git a/src/components/Common/ArticleSectionHeading.css b/src/components/Common/ArticleSectionHeading.css
@@ -2,6 +2,6 @@
   margin-bottom: 1rem;
   font-size: 13px;
   color: var(--black-600);
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   text-transform: uppercase;
 }
diff --git a/src/components/Common/BoxTabs.css b/src/components/Common/BoxTabs.css
@@ -17,15 +17,15 @@
   border-left: none;
   border-bottom: 2px solid var(--primary);
   color: var(--black-800) !important;
-  font-weight: 500 !important;
+  font-weight: var(--weight-medium) !important;
 }
 
 .BoxTabs .tab {
   display: flex;
   align-items: center;
   padding: 7px 0;
   font-size: 13px !important;
-  font-weight: 500 !important;
+  font-weight: var(--weight-medium) !important;
   line-height: 18px;
   text-transform: uppercase !important;
   color: var(--black-600) !important;

diff --git a/src/components/Common/DistributionBar/DistributionBarPopup.css b/src/components/Common/DistributionBar/DistributionBarPopup.css
@@ -9,7 +9,7 @@
 
 .DistributionBarPopup__Title {
   line-height: 18px;
-  font-weight: 400;
+  font-weight: var(--weight-normal);
   font-size: 13px;
   text-transform: uppercase;
   font-style: normal;
@@ -26,7 +26,7 @@
 
 .DistributionBarPopup__Content {
   font-style: normal;
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   font-size: 15px;
   letter-spacing: 0.4px;
   color: var(--white-900);

diff --git a/src/components/Common/Empty.css b/src/components/Common/Empty.css
@@ -7,12 +7,12 @@
   height: 100%;
 }
 
-.Empty .ui.header {
+.Empty__Header {
   margin-top: 0;
   margin-bottom: 7px;
 }
 
-.Empty .dg.Paragraph {
+.Empty__Description {
   margin-bottom: 0 !important;
   font-size: 15px;
   line-height: 24px;
@@ -23,10 +23,10 @@
   margin-bottom: 24px;
 }
 
-.Empty__Action {
-  margin-top: 15px !important;
+.Empty__Link {
+  text-transform: uppercase;
 }
 
-.Empty .Link {
-  text-transform: uppercase;
+.Empty__Action {
+  margin-top: 15px !important;
 }
diff --git a/src/components/Common/Empty.tsx b/src/components/Common/Empty.tsx
@@ -1,19 +1,21 @@
 import React from 'react'
 
 import classNames from 'classnames'
-import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
-import { Header } from 'decentraland-ui/dist/components/Header/Header'
 
 import Watermelon from '../Icon/Watermelon'
 
+import Heading from './Typography/Heading'
+import Link from './Typography/Link'
+import Markdown from './Typography/Markdown'
+
 import './Empty.css'
-import Link from './Link'
 
 export enum ActionType {
   BUTTON,
   LINK,
 }
+
 interface Props {
   title?: string | null
   description?: string | null
@@ -41,10 +43,14 @@ export default function Empty({
   return (
     <div className={classNames('Empty', className)}>
       {icon ? icon : <Watermelon />}
-      {!!title && <Header>{title}</Header>}
-      {!!description && <Markdown>{description}</Markdown>}
+      {!!title && (
+        <Heading size="sm" weight="semi-bold" className="Empty__Header">
+          {title}
+        </Heading>
+      )}
+      {!!description && <Markdown componentsClassNames={{ p: 'Empty__Description' }}>{description}</Markdown>}
       {showAction && actionType === ActionType.LINK && (
-        <Link className="Empty__Action" href={linkHref} onClick={onLinkClick}>
+        <Link className={classNames('Empty__Action', 'Empty__Link')} href={linkHref} onClick={onLinkClick}>
           {linkText}
         </Link>
       )}

diff --git a/src/components/Common/Pill.css b/src/components/Common/Pill.css
@@ -6,7 +6,7 @@
   padding: 0 8px;
   border-radius: 42px;
   border: 1px solid;
-  font-weight: 600;
+  font-weight: var(--weight-semi-bold);
   text-transform: uppercase;
 }
 

diff --git a/src/components/Common/SubLabel.css b/src/components/Common/SubLabel.css
@@ -1,12 +1,9 @@
 .SubLabel {
   margin-bottom: 15px;
+  font-weight: var(--weight-normal) !important;
+  line-height: 20px !important;
 }
 
-.SubLabel,
-.SubLabel .dg.Paragraph {
-  font-style: normal;
-  font-weight: 400;
-  font-size: 15px;
-  line-height: 20px !important;
-  color: var(--black-600);
+.SubLabel, .SubLabel__Strong {
+  color: var(--black-600) !important;
 }
diff --git a/src/components/Common/SubLabel.tsx b/src/components/Common/SubLabel.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 
-import Markdown from 'decentraland-gatsby/dist/components/Text/Markdown'
-
-import Text from './Text/Text'
+import Markdown from './Typography/Markdown'
+import Text from './Typography/Text'
 
 import './SubLabel.css'
 
@@ -13,7 +12,11 @@ interface Props {
 
 const SubLabel = ({ children, isMarkdown }: Props) => {
   if (isMarkdown) {
-    return <Markdown className="SubLabel">{children}</Markdown>
+    return (
+      <Markdown className="SubLabel" componentsClassNames={{ p: 'SubLabel', strong: 'SubLabel__Strong' }}>
+        {children}
+      </Markdown>
+    )
   }
 
   return (