@reuters-graphics/graphics-components 0.0.1-beta.1

package/dist/components/Theme/themes/dark.js

@@ -0,0 +1,23 @@
+/** @type {import('../@types/component').Theme} */
+export default {
+  colour: {
+    background: '#2e3440',
+    'text-primary': '#ffffff',
+    'text-secondary': 'rgb(255 255 255 / 60%)',
+    accent: ' #ef3c2a',
+    'brand-logo': '#fa6400',
+    'brand-rules': '#999999',
+    'brand-shadow': 'rgb(255 255 255 / 10%)',
+  },
+  font: {
+    'size-base': '1.375',
+    'family-serif': 'freight-book, serif',
+    'family-sans-serif': 'Knowledge, sans-serif',
+    'family-monospace':
+      'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    'family-hed': 'var(--theme-font-family-sans-serif)',
+    'family-subhed': 'var(--theme-font-family-sans-serif)',
+    'family-body': 'var(--theme-font-family-serif)',
+    'family-note': 'var(--theme-font-family-sans-serif)',
+  },
+};

package/dist/components/Theme/themes/light.js

@@ -0,0 +1,22 @@
+export default {
+  colour: {
+    background: '#ffffff',
+    'text-primary': '#404040',
+    'text-secondary': '#666666',
+    accent: ' #fa6400',
+    'brand-logo': '#fa6400',
+    'brand-rules': '#d0d0d0',
+    'brand-shadow': 'rgb(64 64 64 / 80%)',
+  },
+  font: {
+    'size-base': '1.375',
+    'family-serif': 'freight-book, serif',
+    'family-sans-serif': 'Knowledge, sans-serif',
+    'family-monospace':
+      'Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    'family-hed': 'var(--theme-font-family-sans-serif)',
+    'family-subhed': 'var(--theme-font-family-sans-serif)',
+    'family-body': 'var(--theme-font-family-serif)',
+    'family-note': 'var(--theme-font-family-sans-serif)',
+  },
+};

package/dist/components/Theme/utils/flatten.js

@@ -0,0 +1,39 @@
+function isBuffer(obj) {
+  return (
+    obj &&
+    obj.constructor &&
+    typeof obj.constructor.isBuffer === 'function' &&
+    obj.constructor.isBuffer(obj)
+  );
+}
+
+const transformKey = (key) => key.replace(/[^a-z0-9-]/gi, '');
+
+export default function flatten(target) {
+  const delimiter = '-';
+  const output = {};
+
+  function step(object, prev, currentDepth = 1) {
+    Object.keys(object).forEach(function (key) {
+      const value = object[key];
+      const isArray = Array.isArray(value);
+      const type = Object.prototype.toString.call(value);
+      const isbuffer = isBuffer(value);
+      const isObject = type === '[object Object]' || type === '[object Array]';
+
+      const newKey = prev
+        ? prev + delimiter + transformKey(key)
+        : transformKey(key);
+
+      if (!isArray && !isbuffer && isObject && Object.keys(value).length) {
+        return step(value, newKey, currentDepth + 1);
+      }
+
+      output[newKey] = value;
+    });
+  }
+
+  step(target);
+
+  return output;
+}

package/dist/components/Theme/utils/merge.js

@@ -0,0 +1,23 @@
+function isObject(item) {
+  return item && typeof item === 'object' && !Array.isArray(item);
+}
+
+/**
+ * Deep merges theme objects.
+ */
+export default function merge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        merge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return merge(target, ...sources);
+}

package/dist/components/Video/Controls.svelte

@@ -0,0 +1,68 @@
+<script>
+  import Fa from 'svelte-fa';
+  import { faReply, faPlay, faPause } from '@fortawesome/free-solid-svg-icons';
+  import { createEventDispatcher } from 'svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let paused;
+  export let clickedOnPauseBtn;
+  export let controlsOpacity;
+  export let controlsPosition;
+  export let widthVideoContainer;
+  export let heightVideoContainer;
+  export let controlsBorderOffset;
+  export let resetCondition;
+  export let separateReplayIcon;
+  export let controlsColour;
+
+  function forwardBtnClick() {
+    paused = !paused;
+    clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
+    dispatch('pausePlayEvent', {
+      paused: paused,
+      clickedOnPauseBtn: clickedOnPauseBtn,
+    });
+  }
+</script>
+
+<button
+  on:click="{forwardBtnClick}"
+  style="
+    opacity: {controlsOpacity}; 
+    top: {controlsPosition === 'top left' || controlsPosition === 'top right'
+    ? `${10}px`
+    : `${heightVideoContainer - controlsBorderOffset}px`};
+    left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
+    ? `${10}px`
+    : `${widthVideoContainer - controlsBorderOffset}px`};
+    "
+>
+  {#if resetCondition}
+    <i class="play-pause-icon replay">
+      {#if separateReplayIcon}
+        <Fa icon="{faReply}" size="2x" color="{controlsColour}" />
+      {:else}
+        <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+      {/if}
+    </i>
+  {:else if paused === false}
+    <i class="play-pause-icon pause">
+      <Fa icon="{faPause}" size="2x" color="{controlsColour}" />
+    </i>
+  {:else if paused === true}
+    <i class="play-pause-icon play">
+      <Fa icon="{faPlay}" size="2x" color="{controlsColour}" />
+    </i>
+  {:else}
+    error
+  {/if}
+</button>
+
+<style>button {
+  z-index: 2;
+  position: absolute;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}</style>

package/dist/components/Video/Video.svelte

@@ -0,0 +1,278 @@
+<script>import IntersectionObserver from 'svelte-intersection-observer';
+import Controls from './Controls.svelte';
+import Block from '../Block/Block.svelte';
+/// //////////////////////////////////
+/// /////////// Props ////////////////
+/// //////////////////////////////////
+/**
+ * Video src.
+ */
+export let src = '';
+export let ariaHidden = true;
+export let ariaDescription = null;
+export let caption = '';
+/**
+ * Width of the block within the article well.
+ * @type {string}
+ */
+export let width = 'normal';
+/**
+ * Preload options. `auto` is ignored if `autoplay` is true. Can also be `none` or `metadata`.
+ * @type {string}
+ */
+export let preloadVideo = 'auto';
+/**
+ * Whether the video should loop.
+ */
+export let loopVideo = true;
+/**
+ * Whether video should have sound or not.
+ */
+export let muteVideo = true;
+export let allowSoundToAutoplay = false; // for video with sound, whether video should be allowed to autoplay if the user has previously interacted with DOM
+export let playVideoWhenInView = true; // whether the video should play when it comes into view or just on page load
+export let playVideoThreshold = 0.5; // if video plays with intersection observer, how much of it should be into view to start playing
+export let possibleToPlayPause = true; // whether to have the option to pause and play video
+export let showControls = true; // whetner to show the play / pause buttons
+export let hoverToSeeControls = false; // whether you need to hover over the video to see the controls
+export let separateReplayIcon = false; // whether to use a separate replay icon or use the play icon for replay as well
+export let controlsColour = '#333'; // change the colour of the play/pause button
+export let controlsOpacity = 0.5; // change the opacity of the play/pause button
+$: interactiveControlsOpacity = 0;
+export let controlsPosition = 'top left'; // have four options for controls position - top right, top left, bottom right, bottom left
+/// //////////////////////////////////
+/// /////// Internal Logic ///////////
+/// //////////////////////////////////
+// Internal props
+let time = 0;
+let duration;
+let paused = true;
+let clickedOnPauseBtn = false; // special variable to track if user clicked on 'pause' btn to help with audio logic
+$: resetCondition = time >= duration; // - 0.1;
+// Dimensions etc other useful things
+let heightVideo;
+let widthVideo;
+let heightVideoContainer;
+let widthVideoContainer;
+const controlsBorderOffset = 50;
+// For intersection observer
+let intersecting;
+let element;
+let videoElement;
+// For video with sound, check if there has been an interaction with the DOM
+let interactedWithDom = false;
+const setInteractedWithDom = () => {
+    interactedWithDom = true;
+};
+// Play the video (with no sound) if it's intersecting; pause when it's no longer intersecting
+$: if (playVideoWhenInView && intersecting && muteVideo)
+    paused = false;
+$: if (playVideoWhenInView && !intersecting)
+    paused = true;
+// Special case for video with sound
+// Only ff you've clicked on play button or interacted with DOM in any way previously, video with audio will play
+$: if (allowSoundToAutoplay &&
+    playVideoWhenInView &&
+    intersecting &&
+    !muteVideo &&
+    interactedWithDom &&
+    !clickedOnPauseBtn // so video doesn't autoplay when coming into view again if paused previously
+) {
+    paused = false;
+}
+$: if (allowSoundToAutoplay && !muteVideo && !interactedWithDom) {
+    paused = true;
+}
+$: if (!possibleToPlayPause)
+    showControls = true;
+// To get the pause state passed up from the Controls
+const pausePlayEvent = (e) => {
+    const fwdPaused = e.detail.paused;
+    const fwdClickedOnPauseBtn = e.detail.clickedOnPauseBtn;
+    paused = fwdPaused;
+    clickedOnPauseBtn = fwdClickedOnPauseBtn;
+};
+// Warning to missing aria attributes
+if (ariaHidden && !ariaDescription) {
+    console.warn('Must provide aria description for video components if ariaHidden is true.');
+}
+</script>
+
+<svelte:window
+  on:click="{setInteractedWithDom}"
+  on:touchstart="{setInteractedWithDom}"
+/>
+
+<Block width="{width}" cls="video-container">
+  <div
+    on:mouseover="{() => {
+      interactiveControlsOpacity = controlsOpacity;
+    }}"
+    on:focus="{() => {
+      interactiveControlsOpacity = controlsOpacity;
+    }}"
+    on:mouseout="{() => {
+      interactiveControlsOpacity = 0;
+    }}"
+    on:blur="{() => {
+      interactiveControlsOpacity = 0;
+    }}"
+  >
+    {#if (ariaHidden && ariaDescription) || !ariaHidden}
+      {#if ariaDescription}
+        <p class="visually-hidden">{ariaDescription}</p>
+      {/if}
+
+      {#if playVideoWhenInView}
+        <!-- Video element with Intersection Observer -->
+        <IntersectionObserver
+          element="{element}"
+          bind:intersecting
+          threshold="{playVideoThreshold}"
+          once="{false}"
+        >
+          <div
+            bind:this="{element}"
+            class="video-wrapper"
+            aria-hidden="{ariaHidden}"
+            bind:clientWidth="{widthVideoContainer}"
+            bind:clientHeight="{heightVideoContainer}"
+          >
+            {#if possibleToPlayPause}
+              {#if showControls}
+                <Controls
+                  on:pausePlayEvent="{pausePlayEvent}"
+                  paused="{paused}"
+                  clickedOnPauseBtn="{clickedOnPauseBtn}"
+                  controlsOpacity="{hoverToSeeControls
+                    ? interactiveControlsOpacity
+                    : controlsOpacity}"
+                  controlsPosition="{controlsPosition}"
+                  widthVideoContainer="{widthVideoContainer}"
+                  heightVideoContainer="{heightVideoContainer}"
+                  controlsBorderOffset="{controlsBorderOffset}"
+                  resetCondition="{resetCondition}"
+                  separateReplayIcon="{separateReplayIcon}"
+                  controlsColour="{controlsColour}"
+                />
+              {:else}
+                <button
+                  on:click="{() => {
+                    paused === true ? (paused = false) : (paused = true);
+                  }}"
+                  style="position: absolute; top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
+                ></button>
+              {/if}
+            {/if}
+            <video
+              bind:this="{videoElement}"
+              src="{src}"
+              width="100%"
+              muted="{muteVideo}"
+              playsinline
+              preload="{preloadVideo}"
+              loop="{loopVideo}"
+              bind:currentTime="{time}"
+              bind:duration
+              bind:paused
+              bind:clientWidth="{widthVideo}"
+              bind:clientHeight="{heightVideo}"
+              style="{showControls
+                ? 'position: relative'
+                : 'position: relative'}"
+            >
+              <track kind="captions" />
+            </video>
+          </div>
+        </IntersectionObserver>
+      {:else}
+        <!-- Video element without Intersection observer -->
+        <div
+          class="video-wrapper"
+          aria-hidden="{ariaHidden}"
+          bind:clientWidth="{widthVideoContainer}"
+          bind:clientHeight="{heightVideoContainer}"
+        >
+          {#if possibleToPlayPause}
+            {#if showControls}
+              <Controls
+                on:pausePlayEvent="{pausePlayEvent}"
+                paused="{paused}"
+                clickedOnPauseBtn="{clickedOnPauseBtn}"
+                controlsOpacity="{controlsOpacity}"
+                controlsPosition="{controlsPosition}"
+                widthVideoContainer="{widthVideoContainer}"
+                heightVideoContainer="{heightVideoContainer}"
+                controlsBorderOffset="{controlsBorderOffset}"
+                resetCondition="{resetCondition}"
+                separateReplayIcon="{separateReplayIcon}"
+                controlsColour="{controlsColour}"
+              />
+            {:else}
+              <button
+                on:click="{() => {
+                  paused === true ? (paused = false) : (paused = true);
+                }}"
+                style="position: absolute; top: 0; left: 0; width: {widthVideoContainer}px; height: {heightVideoContainer}px;"
+              ></button>
+            {/if}
+          {/if}
+          <video
+            bind:this="{videoElement}"
+            src="{src}"
+            width="100%"
+            muted="{muteVideo}"
+            playsinline
+            preload="{preloadVideo}"
+            loop="{loopVideo}"
+            bind:currentTime="{time}"
+            bind:duration
+            bind:paused
+            autoplay
+            bind:clientWidth="{widthVideo}"
+            bind:clientHeight="{heightVideo}"
+            style="{showControls ? 'position: relative' : 'position: relative'}"
+          >
+            <track kind="captions" />
+          </video>
+        </div>
+      {/if}
+      {#if caption}
+        <figcaption>{caption}</figcaption>
+      {/if}
+    {/if}
+  </div>
+</Block>
+
+<style>.video-wrapper {
+  position: relative;
+}
+.video-wrapper video {
+  pointer-events: none;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+figcaption {
+  font-size: 0.8rem;
+  color: var(--theme-colour-text-secondary, #666666);
+}
+
+button {
+  border: none;
+  margin: 0;
+  padding: 0;
+  background: none;
+}</style>

package/dist/components/Visible/Visible.svelte

@@ -0,0 +1,54 @@
+<script>import { onMount } from 'svelte';
+/**
+ * Whether to change visibility just once.
+ *
+ * Useful for loading expensive images or other media and then keeping them around once they're first loaded.
+ */
+export let once = false;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `top`. */
+export let top = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `bottom`. */
+export let bottom = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `left`. */
+export let left = 0;
+/** Set Intersection Observer [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#rootmargin) `right`. */
+export let right = 0;
+/** Set the Intersection Observer [threshold](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#threshold). */
+export let threshold = 0;
+let visible = false;
+let container;
+onMount(() => {
+    if (typeof IntersectionObserver !== 'undefined') {
+        const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
+        const observer = new IntersectionObserver((entries) => {
+            visible = entries[0].isIntersecting;
+            if (visible && once) {
+                observer.unobserve(container);
+            }
+        }, {
+            rootMargin,
+            threshold,
+        });
+        observer.observe(container);
+        return () => observer.unobserve(container);
+    }
+    function handler() {
+        const bcr = container.getBoundingClientRect();
+        visible =
+            bcr.bottom + bottom > 0 &&
+                bcr.right + right > 0 &&
+                bcr.top - top < window.innerHeight &&
+                bcr.left - left < window.innerWidth;
+        if (visible && once) {
+            window.removeEventListener('scroll', handler);
+        }
+    }
+    window.addEventListener('scroll', handler);
+    return () => window.removeEventListener('scroll', handler);
+});
+</script>
+
+<div bind:this="{container}">
+  <!-- An element or component -->
+  <slot visible="{visible}" />
+</div>

package/dist/index.js

@@ -0,0 +1,31 @@
+// Components
+export { default as Article } from './components/Article/Article.svelte';
+export { default as BeforeAfter } from './components/BeforeAfter/BeforeAfter.svelte';
+export { default as Block } from './components/Block/Block.svelte';
+export { default as BodyText } from './components/BodyText/BodyText.svelte';
+export { default as DatawrapperChart } from './components/DatawrapperChart/DatawrapperChart.svelte';
+export { default as EmbedPreviewerLink } from './components/EmbedPreviewerLink/EmbedPreviewerLink.svelte';
+export { default as FeaturePhoto } from './components/FeaturePhoto/FeaturePhoto.svelte';
+export { default as Framer } from './components/Framer/Framer.svelte';
+export { default as GraphicBlock } from './components/GraphicBlock/GraphicBlock.svelte';
+export { default as Headline } from './components/Headline/Headline.svelte';
+export { default as Hero } from './components/Hero/Hero.svelte';
+export { default as NoteText } from './components/NoteText/NoteText.svelte';
+export { default as PymChild } from './components/PymChild/PymChild.svelte';
+export { default as ReutersLogo } from './components/ReutersLogo/ReutersLogo.svelte';
+export { default as Scroller } from './components/Scroller/Scroller.svelte';
+export { default as SEO } from './components/SEO/SEO.svelte';
+export { default as Sharer } from './components/Sharer/Sharer.svelte';
+export { default as SiteFooter } from './components/SiteFooter/SiteFooter.svelte';
+export { default as SiteHeader } from './components/SiteHeader/SiteHeader.svelte';
+export { default as Spinner } from './components/Spinner/Spinner.svelte';
+export {
+  default as Theme,
+  // @ts-ignore
+  themes
+} from './components/Theme/Theme.svelte';
+export { default as Video } from './components/Video/Video.svelte';
+export { default as Visible } from './components/Visible/Visible.svelte';
+
+// Utilities
+export { getPhotoPackPropsFromDoc } from './components/PhotoPack/docProps';

package/dist/scss/_mixins.scss

@@ -0,0 +1,6 @@
+@import 'mixins/block';
+@import 'mixins/body-text';
+@import 'fonts/mixins';
+@import 'mixins/graphic';
+@import 'mixins/note-text';
+@import 'mixins/visually-hidden';

package/dist/scss/_variables.scss

@@ -0,0 +1,2 @@
+@import "fonts/variables";
+@import "typography/variables";

package/dist/scss/bootstrap/_main.scss

@@ -0,0 +1,34 @@
+// Bootstrap overrides...
+@import "variables";
+
+
+// Configuration
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+
+// Layout & components
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
+@import "bootstrap/scss/type";
+@import "bootstrap/scss/images";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
+@import "bootstrap/scss/tables";
+@import "bootstrap/scss/forms";
+@import "bootstrap/scss/buttons";
+@import "bootstrap/scss/transitions";
+@import "bootstrap/scss/dropdown";
+@import "bootstrap/scss/button-group";
+
+// // Helpers
+// @import "bootstrap/scss/helpers";
+
+// // Utilities
+// @import "bootstrap/scss/utilities/api";
+
+
+// // This should go somewhere...
+// $hr-border-width: $border-width !default;

package/dist/scss/bootstrap/_variables.scss

@@ -0,0 +1,10 @@
+// Controls spacing like bootstrap's margin classes...
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+);

package/dist/scss/colours/thematic/_nord.scss

@@ -0,0 +1,40 @@
+$nord-0: #2E3440;
+$nord-polar-night-0: #2E3440;
+$nord-black: #2E3440;
+$nord-1: #3B4252;
+$nord-polar-night-1: #3B4252;
+$nord-2: #434C5E;
+$nord-polar-night-2: #434C5E;
+$nord-3: #4C566A;
+$nord-polar-night-3: #4C566A;
+$nord-4: #D8DEE9;
+$nord-snow-storm-0: #D8DEE9;
+$nord-5: #E5E9F0;
+$nord-snow-storm-1: #E5E9F0;
+$nord-6: #ECEFF4;
+$nord-snow-storm-2: #ECEFF4;
+$nord-white: #ECEFF4;
+$nord-7: #8FBCBB;
+$nord-frost-0: #8FBCBB;
+$nord-8: #88C0D0;
+$nord-frost-1: #88C0D0;
+$nord-9: #81A1C1;
+$nord-frost-2: #81A1C1;
+$nord-10: #5E81AC;
+$nord-frost-3: #5E81AC;
+$nord-blue: #5E81AC;
+$nord-11: #BF616A;
+$nord-aurora-0: #BF616A;
+$nord-red: #BF616A;
+$nord-12: #D08770;
+$nord-aurora-1: #D08770;
+$nord-orange: #D08770;
+$nord-13: #EBCB8B;
+$nord-aurora-2: #EBCB8B;
+$nord-yellow: #EBCB8B;
+$nord-14: #A3BE8C;
+$nord-aurora-3: #A3BE8C;
+$nord-green: #A3BE8C;
+$nord-15: #B48EAD;
+$nord-aurora-4: #B48EAD;
+$nord-purple: #B48EAD;

package/dist/scss/colours/thematic/_tr.scss

@@ -0,0 +1,27 @@
+// Brand colours from RCOM's raptor system
+// https://github.com/tr/rcom-arc_raptor-ui/blob/develop/packages/rcom-raptor-ui_atomic/styles/_colors.scss
+$tr-orange: #fa6400;
+$tr-dark-orange: #dc4300;
+$tr-light-orange: #ffa100;
+$tr-dark-grey: #404040;
+$tr-medium-grey: #666666;
+$tr-light-grey: #afafaf;
+$tr-muted-grey: #d0d0d0;
+$tr-contrast-grey: #949494;
+$tr-hover-background-grey: #f8f8f8;
+$tr-light-muted-grey: #f4f4f4;
+$tr-ultra-light-grey: #fafafa;
+$tr-dark-blue: #005da2;
+$tr-light-blue: #0099c4;
+$tr-muted-blue: #4386B9;
+$tr-lighter-blue: #7FACCE;
+$tr-superlight-blue: #e5eef5;
+$tr-dark-purple: #621f95;
+$tr-light-purple: #6e3ab7;
+$tr-dark-red: #a00000;
+$tr-light-red: #dc0a0a;
+$tr-dark-green: #387c2b;
+$tr-light-green: #77a22d;
+$black: #000;
+$white: #fff;
+$ad-placeholder: #ffb1b1;