Merge pull request #787 from sharetribe/svg-colors

Define svg colors in css
2026-07-28 20:53:24 +10:00 · 2018-04-02 10:23:58 +03:00 · 2018-04-02 10:23:58 +03:00 · 65dfaf0207
commit 65dfaf0207
parent b24238f3ed ed1559f523
11 changed files with 42 additions and 14 deletions
--- a/docs/colors-and-icons.md
+++ b/docs/colors-and-icons.md
@ -12,9 +12,13 @@ change the color variables:
 --marketplaceColorLight: #ff4c38;
 --marketplaceColorDark: #8c291e;
 ```
+and
+```css
+--marketplaceColorEncoded: %23c0392b;
+```

-N.B. search also from files color code `c0392b`. Some icons and background-images with data-URL are
-using it directly.
+N.B. search also from files for the color code `c0392b`. It's used directly in a few places like
+some icons, the 500 error page and map configurations.

 ## Icons

--- a/src/components/FieldCheckbox/FieldCheckbox.js
+++ b/src/components/FieldCheckbox/FieldCheckbox.js
@ -12,7 +12,6 @@ const IconCheckbox = props => {
        <g transform="translate(2 2)">
          <path
            className={css.checked}
-            fill="#C0392B"
            d="M9.9992985 1.5048549l-.0194517 6.9993137C9.977549 9.3309651 9.3066522 10 8.4798526 10H1.5001008c-.8284271 0-1.5-.6715729-1.5-1.5l-.000121-7c0-.8284271.6715728-1.5 1.5-1.5h.000121l6.9993246.0006862c.8284272.000067 1.4999458.671694 1.499879 1.5001211a1.5002208 1.5002208 0 0 1-.0000059.0040476z"
          />
          <path
--- a/src/components/Logo/IconLogo.js
+++ b/src/components/Logo/IconLogo.js
@ -15,7 +15,6 @@ const IconLogo = props => {
    >
      <path
        d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-        fill="#C0392B"
        fillRule="evenodd"
      />
    </svg>
--- a/src/components/Logo/Logo.css
+++ b/src/components/Logo/Logo.css
@ -0,0 +1,7 @@
+@import '../../marketplace.css';
+
+.logoMobile {
+  & path {
+    fill: var(--marketplaceColor);
+  }
+}
--- a/src/components/Logo/Logo.js
+++ b/src/components/Logo/Logo.js
@ -1,18 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import config from '../../config';
+import classNames from 'classnames';

+import config from '../../config';
 import IconLogo from './IconLogo';
 import LogoImage from './saunatime-logo.png';
+import css from './Logo.css';

 const Logo = props => {
  const { className, format, ...rest } = props;
+  const mobileClasses = classNames(css.logoMobile, className);

  if (format === 'desktop') {
    return <img className={className} src={LogoImage} alt={config.siteTitle} {...rest} />;
  }

-  return <IconLogo className={className} {...rest} />;
+  return <IconLogo className={mobileClasses} {...rest} />;
 };

 const { oneOf, string } = PropTypes;
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@ -41,7 +41,7 @@
  border-bottom-color: transparent;

  transition: var(--transitionStyleButton);
-  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
  background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */

  &:hover {
@ -59,7 +59,7 @@
    margin-top: 0;

    &:hover {
-      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23C0392B' fill-rule='evenodd'/></svg>");
+      background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
      background-position: right center;
    }
  }
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@ -45,6 +45,10 @@
 .logoMobile {
  display: block;

+  & path {
+    fill: var(--marketplaceColor);
+  }
+
  @media (--viewportLarge) {
    display: none;
  }
--- a/src/containers/CheckoutPage/LogoIcon.js
+++ b/src/containers/CheckoutPage/LogoIcon.js
@ -16,7 +16,6 @@ const LogoIcon = props => {
      >
        <path
          d="M10.063 23.646c-2.286 0-4.025-1.852-4.025-4.138 0-3.342 2.405-6.49 5.69-7.246-1.875 1.382-1.77 4.06-1.032 5.176.506-.416.956-.87 1.033-1.55 1.727.68 2.358 2.147 2.358 3.733 0 2.288-1.74 4.026-4.025 4.026m9.64-12.442c-.108-.352-.536-.467-.807-.24-.7.592-1.47 1.063-2.3 1.406-.21-6.144-4.754-11.247-10.8-12.214-.42-.066-.73.385-.514.753 1.53 2.598 1.656 5.74.443 8.395-.59-.816-1.033-1.717-1.32-2.686-.1-.342-.522-.482-.805-.244C1.313 8.29 0 11.1 0 14.086c0 5.62 4.553 10.063 10.063 10.063 5.548 0 10.062-4.514 10.062-10.063 0-.982-.143-1.952-.423-2.883"
-          fill="#C0392B"
          fillRule="evenodd"
        />
      </svg>
--- a/src/containers/PasswordRecoveryPage/DoorIcon.css
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.css
@ -0,0 +1,10 @@
+@import '../../marketplace.css';
+
+.stroke {
+  stroke: var(--marketplaceColor);
+}
+
+.strokeAndFill {
+  stroke: var(--marketplaceColor);
+  fill: var(--marketplaceColor);
+}
--- a/src/containers/PasswordRecoveryPage/DoorIcon.js
+++ b/src/containers/PasswordRecoveryPage/DoorIcon.js
@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import css from './DoorIcon.css';

 const DoorIcon = props => {
  const { className } = props;
@ -13,15 +14,14 @@ const DoorIcon = props => {
    >
      <g strokeWidth="2.5" fill="none" fillRule="evenodd" strokeLinejoin="round">
        <path
-          stroke="#C0392B"
-          fill="#C0392B"
+          className={css.strokeAndFill}
          strokeLinecap="round"
          d="M28.182 42.364H50V26H28.182z"
        />
        <path d="M39.09 38v-4.364" stroke="#FFF" strokeLinecap="round" />
        <path
+          className={css.stroke}
          d="M31.455 26v-2.455c0-4.067 3.176-7.363 7.09-7.363 3.915 0 7.09 3.296 7.09 7.363V26"
-          stroke="#C0392B"
          strokeLinecap="round"
        />
        <path
@ -29,13 +29,13 @@ const DoorIcon = props => {
          stroke="#FFF"
        />
        <path
-          stroke="#C0392B"
+          className={css.stroke}
          strokeLinecap="round"
          d="M23.818 7.455h19.637V14M43.455 47.818v4.364H23.818M2 52.798l21.818 4.838V2L2 6.838z"
        />
        <path
+          className={css.stroke}
          d="M19.455 30.91c0 2.107-1.71 3.817-3.82 3.817-2.106 0-3.817-1.71-3.817-3.818 0-2.11 1.71-3.82 3.818-3.82s3.82 1.71 3.82 3.82z"
-          stroke="#C0392B"
          strokeLinecap="round"
        />
      </g>
--- a/src/marketplace.css
+++ b/src/marketplace.css
@ -51,6 +51,9 @@

  --matterColorLightTransparent: rgba(255, 255, 255, 0.65);

+  /* Used with inline CSS SVGs */
+  --marketplaceColorEncoded: %23c0392b;
+
  /* ================ Spacing unites ================ */

  /* Multiples of mobile and desktop spacing units should be used with margins and paddings. */