Merge pull request #220 from sharetribe/mobile-buttons-fixes

Mobile buttons

src/components/Button/Button.css

@@ -1,76 +1,20 @@
+@import '../../marketplace.css';
+
 .root {
-  display: block;
-  padding: 0.5rem;
-  background-color: #9B9B9B;
-  border-width: 0px;
-
-  /* Font */
-  font-weight: bold;
-  font-size: 16px;
-  color: #FFFFFF;
-  letter-spacing: -0.4px;
-
-  /* Dimensions */
-  width: 100%;
-  height: 50px;
-
-  /* Hovers */
-
-  &:enabled {
-    cursor: pointer;
-  }
-  &:enabled:hover {
-    background-color: color(#9B9B9B blackness(+ 20%));
-  }
-  &:enabled:active {
-    background-color: #ccc;
-  }
-  &:disabled {
-    background-color: #ddd;
-    cursor: auto;
-  }
+  @apply --marketplaceButtonStyles;
 }
 
-/**
-* This is an alternative button styling instead of default .root style
-* TODO css.flatButton could compose styles from marketplace's style configuration
-* (to make it easier to manage colors, strokes, fonts etc. from one file)
-*/
-.flatButton {
-  display: block;
-  padding: 12px;
+.primaryButton {
+  @apply --marketplaceButtonStylesPrimary;
+}
 
-  /* fill colors should be in sync with marketplace color palette */
-  background-color: transparent;
+.secondaryButton {
+  @apply --marketplaceButtonStylesSecondary;
+}
 
-  /* border-width should be in sync with marketplace strike-widths */
-  border-width: 0px;
-
-  /* Font configuration */
-  font-weight: bold;
-  font-size: 16px;
-  letter-spacing: -0.4px;
-
-  /* Font color should be in sync with marketplace color palette */
-  color: #4A4A4A;
-
-  /* Dimensions */
-  /* TODO parent should be able to define or override these */
-  width: 100%;
-  height: 50px;
-
-  /* Hovers */
-  &:enabled {
-    cursor: pointer;
-  }
-  &:enabled:hover,
-  &:enabled:active {
-    background-color: transparent;
-  }
-  &:disabled {
-    background-color: transparent;
-    cursor: auto;
-  }
+.inlineTextButton {
+  @apply --marketplaceBodyFontStyles;
+  @apply --marketplaceLinkStyles;
 }
 
 .inlineButton {

src/components/Button/Button.example.css

@@ -0,0 +1,19 @@
+@import '../../marketplace.css';
+
+.buttonLink {
+  @apply --marketplaceButtonStyles;
+}
+
+.buttonLinkPrimary {
+  @apply --marketplaceButtonStylesPrimary;
+}
+
+.buttonLinkSecondary {
+  @apply --marketplaceButtonStylesSecondary;
+}
+
+.customButton {
+  @apply --marketplaceButtonStyles;
+  border-radius: 4px;
+  padding: 12px 0;
+}

src/components/Button/Button.example.js

@@ -0,0 +1,57 @@
+/* eslint-disable jsx-a11y/href-no-hash */
+import React from 'react';
+import Button, { PrimaryButton, SecondaryButton, InlineTextButton } from './Button';
+
+import css from './Button.example.css';
+
+const preventDefault = e => {
+  e.preventDefault();
+};
+
+const ButtonsComponent = () => {
+  return (
+    <div>
+      <h3>Default button:</h3>
+      <Button>Click me</Button>
+
+      <h3>Default button disabled:</h3>
+      <Button disabled>Click me</Button>
+
+      <h3>Primary button:</h3>
+      <PrimaryButton>Click me</PrimaryButton>
+
+      <h3>Primary button disabled:</h3>
+      <PrimaryButton disabled>Click me</PrimaryButton>
+
+      <h3>Secondary button:</h3>
+      <SecondaryButton>Click me</SecondaryButton>
+
+      <h3>Secondary button disabled:</h3>
+      <SecondaryButton disabled>Click me</SecondaryButton>
+
+      <h3>Inline text button:</h3>
+      <p>
+        Lorem ipsum <InlineTextButton>button that looks like link</InlineTextButton> dolor sit amet
+      </p>
+      <p>Lorem ipsum <a href="#" onClick={preventDefault}>a normal link</a> dolor sit amet</p>
+
+      <h3>Link that looks like a default button:</h3>
+      <a className={css.buttonLink} href="#" onClick={preventDefault}>Click me</a>
+
+      <h3>Link that looks like a primary button:</h3>
+      <a className={css.buttonLinkPrimary} href="#" onClick={preventDefault}>Click me</a>
+
+      <h3>Link that looks like a secondary button:</h3>
+      <a className={css.buttonLinkSecondary} href="#" onClick={preventDefault}>Click me</a>
+
+      <h3>Button with custom styles:</h3>
+      <Button className={css.customButton}>Click me</Button>
+
+    </div>
+  );
+};
+
+export const Buttons = {
+  component: ButtonsComponent,
+  group: 'buttons',
+};

src/components/Button/Button.js

@@ -15,23 +15,21 @@ const Button = props => {
 const { node, string } = PropTypes;
 
 Button.defaultProps = {
-  children: null,
+  rootClassName: null,
   className: null,
-  rootClassName: '',
+  children: null,
 };
 
 Button.propTypes = {
-  children: node,
-  className: string,
   rootClassName: string,
+  className: string,
+  children: node,
 };
 
 export default Button;
 
-export const FlatButton = props => <Button {...props} rootClassName={css.flatButton} />;
-FlatButton.defaultProps = { className: '' };
-FlatButton.propTypes = { className: string };
+export const PrimaryButton = props => <Button {...props} rootClassName={css.primaryButton} />;
 
-export const InlineButton = props => <Button {...props} rootClassName={css.inlineButton} />;
-InlineButton.defaultProps = { className: '' };
-InlineButton.propTypes = { className: string };
+export const SecondaryButton = props => <Button {...props} rootClassName={css.secondaryButton} />;
+
+export const InlineTextButton = props => <Button {...props} rootClassName={css.inlineTextButton} />;

src/components/HeroSection/HeroSection.js

@@ -1,7 +1,7 @@
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { SearchIcon } from '../../components';
+import { SearchIcon, Button } from '../../components';
 import { LocationSearchForm } from '../../containers';
 import { stringify } from '../../util/urlHelpers';
 import { createResourceLocatorString } from '../../util/routes';
@@ -35,10 +35,10 @@ const HeroSection = props => {
       <p className={css.heroSubTitle}>
         <FormattedMessage id="HeroSection.subTitle" />
       </p>
-      <button className={css.mobileSearchButton} onClick={handleMobileSearchClick}>
+      <Button className={css.mobileSearchButton} onClick={handleMobileSearchClick}>
         <SearchIcon rootClassName={css.searchIcon} />
         <FormattedMessage id="HeroSection.mobileSearchButtonText" />
-      </button>
+      </Button>
       <LocationSearchForm className={css.desktopSearchForm} onSubmit={handleSearchSubmit} />
     </div>
   );

src/components/HeroSection/__snapshots__/HeroSection.test.js.snap

@@ -14,7 +14,7 @@ exports[`HeroSection matches snapshot 1`] = `
     </span>
   </p>
   <button
-    className={undefined}
+    className=""
     onClick={[Function]}>
     <svg
       className=""

src/components/Menu/Menu.example.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { InlineButton, MenuContent, MenuLabel, MenuItem } from '../../components';
+import { InlineTextButton, MenuContent, MenuLabel, MenuItem } from '../../components';
 import Menu from './Menu';
 
 const noop = () => null;
 const style = { padding: '24px' };
-const btnStyle = { whiteSpace: 'nowrap' };
+const btnStyle = { whiteSpace: 'nowrap', padding: '6px 0' };
 
 const MenuWrapper = () => {
   return (
@@ -14,10 +14,10 @@ const MenuWrapper = () => {
       </MenuLabel>
       <MenuContent style={style}>
         <MenuItem key="first item">
-          <InlineButton onClick={noop} style={btnStyle}>Click this</InlineButton>
+          <InlineTextButton onClick={noop} style={btnStyle}>Click this</InlineTextButton>
         </MenuItem>
         <MenuItem key="second item">
-          <InlineButton onClick={noop} style={btnStyle}>Click this</InlineButton>
+          <InlineTextButton onClick={noop} style={btnStyle}>Click this</InlineTextButton>
         </MenuItem>
       </MenuContent>
     </Menu>

src/components/Menu/Menu.js

@@ -9,7 +9,7 @@
  *    </MenuLabel>
  *    <MenuContent>
  *      <MenuItem key="first item">
- *        <button onClick={onClick}>Click this</button>
+ *        <Button onClick={onClick}>Click this</Button>
  *      </MenuItem>
  *    </MenuContent>
  *  </Menu>

src/components/TopbarDesktop/TopbarDesktop.css

@@ -120,17 +120,17 @@
 }
 
 .logoutButton {
+  @apply --marketplaceH4FontStyles;
   width: 100%;
+  min-width: 276px;
   margin: 0;
   padding: 20px 24px;
-  composes: h4Font from '../../marketplace.css';
-  composes: textColor from '../../marketplace.css';
+  color: var(--matterColor);
   text-align: left;
   white-space: nowrap;
 
-  &:hover,
-  &:active {
-    box-shadow: none;
+  @media (--desktopViewport) {
+    margin: 0;
   }
 
   &:focus {

src/components/TopbarDesktop/TopbarDesktop.js

@@ -3,7 +3,7 @@ import { FormattedMessage, intlShape } from 'react-intl';
 import classNames from 'classnames';
 import {
   Avatar,
-  InlineButton,
+  InlineTextButton,
   Menu,
   MenuLabel,
   MenuContent,
@@ -58,9 +58,9 @@ const TopbarDesktop = props => {
         </MenuLabel>
         <MenuContent className={css.profileMenuContent}>
           <MenuItem key="logout">
-            <InlineButton className={css.logoutButton} onClick={onLogout}>
+            <InlineTextButton className={css.logoutButton} onClick={onLogout}>
               <FormattedMessage id="TopbarDesktop.logout" />
-            </InlineButton>
+            </InlineTextButton>
           </MenuItem>
         </MenuContent>
       </Menu>

src/components/TopbarMobileMenu/TopbarMobileMenu.css

@@ -2,6 +2,7 @@
 
 :root{
   --topMarginMobileMenu: 96px;
+  --buttonHeight: 61px;
 }
 
 .root {
@@ -20,7 +21,7 @@
 }
 
 .footer {
-  flex-basis: 66px;
+  flex-basis: var(--buttonHeight);
   flex-shrink: 0;
   margin-bottom: 24px;
 }
@@ -51,15 +52,10 @@
 }
 
 .logoutButton {
-  /* Position component */
-  margin: 6px 0;
-  width: initial;
-
   /* Logout font is smaller and gray since the action is not recommended. */
-  composes: h3Font from '../../marketplace.css';
+  @apply --marketplaceH3FontStyles;
   color: var(--matterColorAnti);
 
-  /* Position component */
   margin-top: 0;
   padding: 0;
 }
@@ -73,38 +69,8 @@
   color: var(--marketplaceColor);
 }
 
-/* TODO createNewListingLink camouflages as a button. */
 .createNewListingLink {
-  display: block;
-  padding: 17px 0 20px 0;
-  background-color: var(--marketplaceColor);
-  border-width: 0;
-  border-radius: var(--borderRadius);
-
-  /* Font */
-  composes: buttonFont from '../../marketplace.css';
-  color: var(--matterColorLight);
-  text-align: center;
-
-  /* Dimensions */
-  width: 100%;
-
-  /* Hovers */
-
-  &:enabled {
-    cursor: pointer;
-  }
-  &:enabled:hover {
-    background-color: var(--marketplaceColorDark);
-    text-decoration: none;
-  }
-  &:enabled:active {
-    background-color: var(--marketplaceColorLight);
-  }
-  &:disabled {
-    background-color: var(--matterColorAnti);
-    cursor: auto;
-  }
+  @apply --marketplaceButtonStyles;
 }
 
 .authenticationGreeting {

src/components/TopbarMobileMenu/TopbarMobileMenu.js

@@ -4,7 +4,7 @@
  */
 import React, { PropTypes } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, InlineButton, NamedLink } from '../../components';
+import { Avatar, InlineTextButton, NamedLink } from '../../components';
 
 import css from './TopbarMobileMenu.css';
 
@@ -65,9 +65,9 @@ const TopbarMobileMenu = props => {
         <span className={css.greeting}>
           <FormattedMessage id="TopbarMobileMenu.greeting" values={{ firstName }} />
         </span>
-        <InlineButton className={css.logoutButton} onClick={onLogout}>
+        <InlineTextButton className={css.logoutButton} onClick={onLogout}>
           <FormattedMessage id="TopbarMobileMenu.logoutLink" />
-        </InlineButton>
+        </InlineTextButton>
         {inboxLink}
       </div>
       <div className={css.footer}>

src/components/index.js

@@ -3,7 +3,7 @@ import AuthorInfo from './AuthorInfo/AuthorInfo';
 import Avatar from './Avatar/Avatar';
 import BirthdayInput from './BirthdayInput/BirthdayInput';
 import BookingInfo from './BookingInfo/BookingInfo';
-import Button, { FlatButton, InlineButton } from './Button/Button';
+import Button, { InlineTextButton } from './Button/Button';
 import CloseIcon from './CloseIcon/CloseIcon';
 import CurrencyInput from './CurrencyInput/CurrencyInput';
 import DateInput from './DateInput/DateInput';
@@ -67,9 +67,8 @@ export {
   EditListingWizard,
   ExternalLink,
   FilterPanel,
-  FlatButton,
   HeroSection,
-  InlineButton,
+  InlineTextButton,
   Input,
   InputField,
   LabeledField,

src/containers/BookingDatesForm/__snapshots__/BookingDatesForm.test.js.snap

@@ -38,7 +38,7 @@ exports[`BookingDatesForm matches snapshot 1`] = `
   <Button
     className={null}
     disabled={true}
-    rootClassName=""
+    rootClassName={null}
     type="submit">
     <FormattedMessage
       id="BookingDatesForm.requestToBook"

src/containers/EditListingLocationForm/__snapshots__/EditListingLocationForm.test.js.snap

@@ -22,7 +22,7 @@ exports[`EditListingLocationForm matches snapshot 1`] = `
     type="text" />
   <Button
     className={null}
-    rootClassName=""
+    rootClassName={null}
     type="submit">
     Next: pricing
   </Button>

src/containers/EditListingPhotosForm/__snapshots__/EditListingPhotosForm.test.js.snap

@@ -25,7 +25,7 @@ exports[`EditListingPhotosForm matches snapshot 1`] = `
   </AddImages>
   <Button
     className={null}
-    rootClassName=""
+    rootClassName={null}
     type="submit">
     Publish listing
   </Button>

src/containers/ListingPage/__snapshots__/ListingPage.test.js.snap

@@ -86,7 +86,7 @@ exports[`ListingPage matches snapshot 1`] = `
       <Button
         className={null}
         onClick={[Function]}
-        rootClassName="">
+        rootClassName={null}>
         ListingPage.ctaButtonMessage
       </Button>
     </div>

src/containers/SalePage/__snapshots__/SalePage.test.js.snap

@@ -70,7 +70,7 @@ exports[`SalePage matches snapshot 1`] = `
     <Button
       className={null}
       onClick={[Function]}
-      rootClassName="">
+      rootClassName={null}>
       <FormattedMessage
         id="SalePage.rejectButton"
         values={Object {}} />
@@ -78,7 +78,7 @@ exports[`SalePage matches snapshot 1`] = `
     <Button
       className={null}
       onClick={[Function]}
-      rootClassName="">
+      rootClassName={null}>
       <FormattedMessage
         id="SalePage.acceptButton"
         values={Object {}} />

src/examples.js

@@ -2,6 +2,7 @@
 import * as AddImages from './components/AddImages/AddImages.example';
 import * as BirthdayInput from './components/BirthdayInput/BirthdayInput.example';
 import * as BookingInfo from './components/BookingInfo/BookingInfo.example';
+import * as Button from './components/Button/Button.example';
 import * as CurrencyInput from './components/CurrencyInput/CurrencyInput.example';
 import * as DateInput from './components/DateInput/DateInput.example';
 import * as EditListingWizard from './components/EditListingWizard/EditListingWizard.example';
@@ -48,6 +49,7 @@ export {
   BirthdayInput,
   BookingDatesForm,
   BookingInfo,
+  Button,
   ChangeAccountPasswordForm,
   ChangePasswordForm,
   Colors,

src/marketplace.css

@@ -9,6 +9,7 @@
   --marketplaceColorDark: #8C291E;
 
   --successColor: #2ECC71;
+  --successColorDark: #239954;
   --failColor: #FF0000;
   --attentionColor: #FFAA00;
 
@@ -46,6 +47,280 @@
   /* Topbar */
   --topbarHeight: 60px;
   --topbarHeightDesktop: 72px;
+
+  /* Fonts */
+  --marketplaceBodyFontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 500; /* Medium */
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: -0.1px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 12px;
+    margin-bottom: 12px;
+
+    @media (--desktopViewport) {
+      font-size: 20px;
+      line-height: 24px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  }
+  --marketplaceHeroTitleFontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 700; /* Bold */
+    font-size: 48px;
+    line-height: 54px;
+    letter-spacing: -1px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 25px;
+    margin-bottom: 29px;
+
+    @media (--desktopViewport) {
+      font-size: 90px;
+      line-height: 96px;
+      letter-spacing: -2px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 25px;
+      margin-bottom: 31px;
+    }
+  }
+  --marketplaceH1FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 700; /* SemiBold */
+    font-size: 30px;
+    line-height: 36px;
+    letter-spacing: -0.5px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 18px;
+    margin-bottom: 18px;
+
+    @media (--desktopViewport) {
+      font-size: 48px;
+      line-height: 56px;
+      letter-spacing: -1px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 24px;
+      margin-bottom: 24px;
+    }
+  }
+  --marketplaceH2FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 600; /* SemiBold */
+    font-size: 24px;
+    line-height: 30px;
+    letter-spacing: -0.3px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 21px;
+    margin-bottom: 17px;
+
+    @media (--desktopViewport) {
+      line-height: 32px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 21px;
+      margin-bottom: 19px;
+    }
+  }
+  --marketplaceH3FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 600; /* SemiBold */
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: -0.2px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 16px;
+    margin-bottom: 14px;
+
+    @media (--desktopViewport) {
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  }
+  --marketplaceH4FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 500; /* Medium */
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 12px;
+    margin-bottom: 12px;
+
+    @media (--desktopViewport) {
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 17px;
+      margin-bottom: 15px;
+    }
+  }
+  --marketplaceH5FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 400; /* Regular */
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 10px;
+    margin-bottom: 8px;
+
+    @media (--desktopViewport) {
+      line-height: 16px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 10px;
+      margin-bottom: 14px;
+    }
+  }
+  --marketplaceH6FontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 700; /* Bold */
+    font-size: 12px;
+    line-height: 18px;
+    letter-spacing: 1.5px;
+    text-transform: uppercase;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 10px;
+    margin-bottom: 8px;
+
+    @media (--desktopViewport) {
+      line-height: 16px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 10px;
+      margin-bottom: 6px;
+    }
+  }
+  --marketplaceTinyFontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 400; /* Regular */
+    font-size: 13px;
+    line-height: 18px;
+    letter-spacing: -0.1px;
+    /* margin-top + n * line-height + margin-bottom => x * 6px */
+    margin-top: 9.5px;
+    margin-bottom: 8.5px;
+
+    @media (--desktopViewport) {
+      line-height: 16px;
+      /* margin-top + n * line-height + margin-bottom => x * 8px */
+      margin-top: 10.5px;
+      margin-bottom: 13.5px;
+    }
+  }
+
+  /* This font is specific to Avatar component only */
+  --marketplaceSmallAvatarFontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 700; /* Bold */
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.1px;
+  }
+
+  /* Links */
+  --marketplaceLinkStyles: {
+
+    /* Position and dimensions */
+    display: inline;
+    margin: 0;
+    padding: 0;
+
+    /* Borders */
+    border: none;
+
+    /* Colors */
+    color: var(--marketplaceColor);
+
+    /* Text size should be inherited */
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+
+  /* Buttons */
+  --marketplaceButtonFontStyles: {
+    font-family: "sofiapro", Helvetica, Arial, sans-serif;
+    font-weight: 600; /* SemiBold */
+    font-size: 18px;
+    line-height: 24px;
+    letter-spacing: -0.3px;
+
+    @media (--desktopViewport) {
+      /* TODO: Make sure button text aligns with the baseline */
+    }
+  }
+  --marketplaceButtonStyles {
+    @apply --marketplaceButtonFontStyles;
+
+    /* Dimensions */
+    display: block;
+    width: 100%;
+    margin: 0;
+    padding: 17px 0 20px 0;
+
+    /* Borders */
+    border: none;
+    border-radius: var(--borderRadius);
+
+    /* Colors */
+    background-color: var(--marketplaceColor);
+    color: var(--matterColorLight);
+
+    /* Text */
+    text-align: center;
+
+    /* Effects */
+
+    transition: all var(--transitionStyleButton);
+
+    &:enabled:hover,
+    &:enabled:focus {
+      outline: none;
+      background-color: var(--marketplaceColorDark);
+      text-decoration: none;
+      box-shadow: var(--boxShadowButton);
+    }
+    &:disabled {
+      background-color: var(--matterColorNegative);
+      color: var(--matterColorLight);
+    }
+    &:enabled {
+      cursor: pointer;
+    }
+  }
+  --marketplaceButtonStylesPrimary {
+    @apply --marketplaceButtonStyles;
+
+    background-color: var(--successColor);
+    color: var(--matterColorLight);
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background-color: var(--successColorDark);
+    }
+  }
+  --marketplaceButtonStylesSecondary {
+    @apply --marketplaceButtonStyles;
+
+    /* We must reduce the padding since the border takes space from the
+       full height that should match the default button height */
+    padding: 16px 0 19px 0;
+
+    background-color: var(--matterColorLight);
+    color: var(--matterColor);
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--matterColorNegative);
+
+    &:enabled:hover,
+    &:enabled:focus {
+      background-color: var(--matterColorLight);
+      border-color: var(--matterColorAnti);
+    }
+  }
 }
 
 /* ================ Custom media queries ================ */
@@ -60,215 +335,40 @@ body {
   text-rendering: optimizeSpeed;
 }
 
-h1, h2, h3, h4, h5, h6, p, pre {
-  margin: 0;
+a {
+  @apply --marketplaceLinkStyles;
 }
 
 /* Site title (landing page) */
-.heroTitle {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 700; /* Bold */
-  font-size: 48px;
-  line-height: 54px;
-  letter-spacing: -1px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 25px;
-  margin-bottom: 29px;
+.heroTitle { @apply --marketplaceHeroTitleFontStyles; }
 
-  @media (--desktopViewport) {
-    font-size: 90px;
-    line-height: 96px;
-    letter-spacing: -2px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 25px;
-    margin-bottom: 31px;
-  }
-}
-
-/* Page title */
-h1,
-.h1Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 700; /* SemiBold */
-  font-size: 30px;
-  line-height: 36px;
-  letter-spacing: -0.5px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 18px;
-  margin-bottom: 18px;
-
-  @media (--desktopViewport) {
-    font-size: 48px;
-    line-height: 56px;
-    letter-spacing: -1px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 24px;
-    margin-bottom: 24px;
-  }
-}
-
-h2,
-.h2Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 600; /* SemiBold */
-  font-size: 24px;
-  line-height: 30px;
-  letter-spacing: -0.3px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 21px;
-  margin-bottom: 17px;
-
-  @media (--desktopViewport) {
-    line-height: 32px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 21px;
-    margin-bottom: 19px;
-  }
-}
-
-h3,
-.h3Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 600; /* SemiBold */
-  font-size: 20px;
-  line-height: 24px;
-  letter-spacing: -0.2px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 16px;
-  margin-bottom: 14px;
-
-  @media (--desktopViewport) {
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
-}
-
-h4,
-.h4Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 500; /* Medium */
-  font-size: 16px;
-  line-height: 24px;
-  letter-spacing: 0;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 12px;
-  margin-bottom: 12px;
-
-  @media (--desktopViewport) {
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 17px;
-    margin-bottom: 15px;
-  }
-}
-
-h5,
-.h5Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 400; /* Regular */
-  font-size: 14px;
-  line-height: 18px;
-  letter-spacing: 0;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 10px;
-  margin-bottom: 8px;
-
-  @media (--desktopViewport) {
-    line-height: 16px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 10px;
-    margin-bottom: 14px;
-  }
-}
-
-h6,
-.h6Font {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 700; /* Bold */
-  font-size: 12px;
-  line-height: 18px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 10px;
-  margin-bottom: 8px;
-
-  @media (--desktopViewport) {
-    line-height: 16px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 10px;
-    margin-bottom: 6px;
-  }
-}
+h1, .h1Font { @apply --marketplaceH1FontStyles; }
+h2, .h2Font { @apply --marketplaceH2FontStyles; }
+h3, .h3Font { @apply --marketplaceH3FontStyles; }
+h4, .h4Font { @apply --marketplaceH4FontStyles; }
+h5, .h5Font { @apply --marketplaceH5FontStyles; }
+h6, .h6Font { @apply --marketplaceH6FontStyles; }
 
 html,
 input,
-button,
 p,
 pre,
 li,
 .bodyFont {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 500; /* Medium */
-  font-size: 18px;
-  line-height: 24px;
-  letter-spacing: -0.1px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 12px;
-  margin-bottom: 12px;
-
-  @media (--desktopViewport) {
-    font-size: 20px;
-    line-height: 24px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 16px;
-    margin-bottom: 16px;
-  }
+  @apply --marketplaceBodyFontStyles;
 }
 
 .tinyFont {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 400; /* Regular */
-  font-size: 13px;
-  line-height: 18px;
-  letter-spacing: -0.1px;
-  /* margin-top + n * line-height + margin-bottom => x * 6px */
-  margin-top: 9.5px;
-  margin-bottom: 8.5px;
-
-  @media (--desktopViewport) {
-    line-height: 16px;
-    /* margin-top + n * line-height + margin-bottom => x * 8px */
-    margin-top: 10.5px;
-    margin-bottom: 13.5px;
-  }
-}
-
-button,
-.buttonFont {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 600; /* SemiBold */
-  font-size: 18px;
-  line-height: 24px;
-  padding: 2.5px 0 3.5px; /* 2.5px + 3.5px = 6px */
-  letter-spacing: -0.3px;
-
-  @media (--desktopViewport) {
-    /* TODO: Make sure button text aligns with the baseline */
-  }
+  @apply --marketplaceTinyFontStyles;
 }
 
 /* This font is specific to Avatar component only */
 .smallAvatarFont {
-  font-family: "sofiapro", Helvetica, Arial, sans-serif;
-  font-weight: 700; /* Bold */
-  font-size: 14px;
-  line-height: 18px;
-  letter-spacing: 0.1px;
+  @apply --marketplaceSmallAvatarFontStyles;
 }
 
 .searchResultsFont {
-  composes: bodyFont;
+  @apply --marketplaceBodyFontStyles;
 }
 
 /* Base font color */
@@ -285,14 +385,6 @@ html {
   margin: 0;
 }
 
-a {
-  text-decoration: none;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
 ul {
   list-style: none;
   padding: 0;
@@ -349,29 +441,3 @@ input {
     outline: none;
   }
 }
-
-button {
-  display: block;
-
-  /* Borders */
-  border: none;
-  border-radius: var(--borderRadius);
-
-  /* Dimensions */
-  width: 100%;
-  padding: 17px 0 20px 0;
-  margin: 0;
-
-  /* Colors */
-  color: var(--matterColorLight);
-  background-color: var(--marketplaceColor);
-
-  transition: all var(--transitionStyleButton);
-
-  &:hover,
-  &:active {
-    cursor: pointer;
-    background-color: var(--marketplaceColorDark);
-    box-shadow: var(--boxShadowButton);
-  }
-}