@micromag/viewer 0.2.386 → 0.2.387

package/assets/css/styles.css

@@ -1,6 +1,6 @@
 .micromag-viewer-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-viewer-container address,.micromag-viewer-container blockquote,.micromag-viewer-container caption,.micromag-viewer-container dl,.micromag-viewer-container figure,.micromag-viewer-container h1,.micromag-viewer-container h2,.micromag-viewer-container h3,.micromag-viewer-container h4,.micromag-viewer-container h5,.micromag-viewer-container h6,.micromag-viewer-container label,.micromag-viewer-container legend,.micromag-viewer-container li,.micromag-viewer-container ol,.micromag-viewer-container p,.micromag-viewer-container pre,.micromag-viewer-container ul{margin:0;padding:0}.micromag-viewer-container *,.micromag-viewer-container :after,.micromag-viewer-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-viewer-container .micromag-viewer-menuPreview,.micromag-viewer-container .micromag-viewer-menuPreviewContainer,.micromag-viewer-container .micromag-viewer-screen,.micromag-viewer-container .micromag-viewer-screenInner{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-container .micromag-viewer-screen:focus-visible{outline:3px solid #a13dff}.micromag-viewer-container{background-color:#1c1c1c;color:#fff}.micromag-viewer-container,.micromag-viewer-container .micromag-viewer-content{position:relative;width:100%;height:100%;overflow:hidden}.micromag-viewer-container .micromag-viewer-content{z-index:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-container .micromag-viewer-menuDotsContainer{-ms-touch-action:none;touch-action:none;visibility:hidden;position:absolute;z-index:2;top:0;right:50%;width:100%;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.micromag-viewer-container .micromag-viewer-menuDots{position:relative;padding:8px 10px;-webkit-transition:opacity .25s ease;-o-transition:opacity .25s ease;transition:opacity .25s ease}.micromag-viewer-container .micromag-viewer-menuPreviewContainer{visibility:hidden;z-index:3;top:-100%}.micromag-viewer-container .micromag-viewer-menuPreview{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.micromag-viewer-container .micromag-viewer-screen{display:-webkit-flex;display:-ms-flexbox;display:flex;opacity:0}.micromag-viewer-container .micromag-viewer-screen.micromag-viewer-current{opacity:1}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen{top:0;right:auto;bottom:0;left:50%;margin:auto;-webkit-transition:opacity .3s ease,-webkit-transform .3s ease;transition:opacity .3s ease,-webkit-transform .3s ease;-o-transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease;transition:transform .3s ease,opacity .3s ease,-webkit-transform .3s ease;opacity:.2;cursor:pointer}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:focus-visible,.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen:hover{opacity:.3}.micromag-viewer-container.micromag-viewer-landscape .micromag-viewer-screen.micromag-viewer-current{opacity:1;cursor:auto}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDotsContainer{pointer-events:none}.micromag-viewer-container.micromag-viewer-hideMenu:not(.micromag-viewer-landscape) .micromag-viewer-menuDots{opacity:0}.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuDotsContainer,.micromag-viewer-container.micromag-viewer-ready .micromag-viewer-menuPreviewContainer{visibility:visible}
-
 .micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton:focus-visible,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-dots-container{position:relative}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item,.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;width:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item{-webkit-flex:1 1;-ms-flex:1 1;flex:1 1}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button{display:block;width:100%;padding:10px 2px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-dot{display:block;width:100%;height:2px;border-radius:2px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-item:last-child{margin-right:0}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menu{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:16px;height:16px;padding-left:10px}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-menuIcon{display:block;height:100%}.micromag-viewer-menus-menu-dots-container .micromag-viewer-menus-menu-dots-closeButton{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding-left:10px;font-size:26px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical{background:rgba(0,0,0,0)}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical,.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-items{width:auto;height:100%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-button{width:auto;height:100%;padding:2px 10px}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-item .micromag-viewer-menus-menu-dots-dot{width:2px;height:100%}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-vertical .micromag-viewer-menus-menu-dots-menu{position:absolute;top:10px;right:10px;padding-left:0}.micromag-viewer-menus-menu-dots-container.micromag-viewer-menus-menu-dots-withShadow{background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.4)),to(rgba(0,0,0,0)));background:-o-linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0));background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,0))}
+
 .micromag-viewer-partials-share-modal-container{pointer-events:none}.micromag-viewer-partials-share-modal-container .micromag-viewer-partials-share-modal-content{padding:5px;-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);-webkit-transform-origin:center top;-ms-transform-origin:center top;transform-origin:center top;-webkit-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;border-radius:10px;opacity:0;background-color:#fff}.micromag-viewer-partials-share-modal-container .micromag-viewer-partials-share-modal-content:before{content:"";position:absolute;bottom:100%;left:50%;width:0;height:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);border-right:8px solid rgba(0,0,0,0);border-bottom:8px solid #fff;border-left:8px solid rgba(0,0,0,0)}.micromag-viewer-partials-share-modal-container button{display:block;margin:5px}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened{pointer-events:auto}.micromag-viewer-partials-share-modal-container.micromag-viewer-partials-share-modal-opened .micromag-viewer-partials-share-modal-content{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1}
 .micromag-viewer-partials-share-button-container{position:relative;white-space:nowrap}.micromag-viewer-partials-share-button-container .micromag-viewer-partials-share-button-shareModal{position:absolute;top:100%;right:50%;margin-top:15px;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}
 .micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-scroll{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:focus-visible,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton:focus-visible{outline:3px solid #a13dff}.micromag-viewer-menus-menu-preview-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;padding:10px;background-color:#000;background-repeat:no-repeat;background-position:50%;background-size:cover;color:#fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton{display:block}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenButton:focus-visible{border:4px solid #a13dff;outline:none}.micromag-viewer-menus-menu-preview-container.micromag-viewer-menus-menu-preview-disabled .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin-bottom:20px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{display:inline-block;border:0;border-radius:0;background-color:rgba(0,0,0,0);color:inherit;font-size:.9rem;font-weight:600;line-height:1.4;text-align:center;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button{width:20px;margin-left:10px;padding:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-button:first-child{margin-left:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-shareButton{z-index:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-header .micromag-viewer-menus-menu-preview-icon{display:block;width:100%;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-buttons{display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-organisation{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;width:30px;height:30px;margin-right:10px;border-radius:50%;background-color:#fff;background-repeat:no-repeat;background-position:50%;background-size:contain}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-title{margin-right:auto;color:#fff;font-family:Helvetica,Arial,sans-serif}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-content,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-nav{overflow:hidden}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item,.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{margin:0;padding:0;list-style:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-items{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item{position:relative;height:0}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-item.micromag-viewer-menus-menu-preview-active .micromag-viewer-menus-menu-preview-screenButton{pointer-events:none}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-itemContent{padding:2px}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContainer{position:relative;height:100%}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-activeScreenBorder{border:2px solid #fff}.micromag-viewer-menus-menu-preview-container .micromag-viewer-menus-menu-preview-screenContent{-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;background-color:#2b2b2b}

package/es/index.js

@@ -21,8 +21,8 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { useDrag } from 'react-use-gesture';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes, faShare, faCompress, faExpand } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import Scroll from '@micromag/element-scroll';
 import { FacebookShareButton, FacebookIcon, TwitterShareButton, TwitterIcon, EmailShareButton, EmailIcon } from 'react-share';
 
@@ -33,7 +33,9 @@ var routes = PropTypes.shape({
 
 var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
 
-var styles$5 = {};
+var styles$5 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+
+var styles$4 = {};
 
 var propTypes$8 = {
   size: PropTypes.number,
@@ -55,7 +57,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$5.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$4.container, _defineProperty({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -76,16 +78,16 @@ var MenuIcon = function MenuIcon(_ref) {
 MenuIcon.propTypes = propTypes$8;
 MenuIcon.defaultProps = defaultProps$8;
 
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-
 var propTypes$7 = {
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes.bool,
   items: PropTypes$1.menuItems,
   current: PropTypes.number,
   onClickItem: PropTypes.func,
-  colorAccent: PropTypes.string,
-  colorBackground: PropTypes.string,
+  colors: PropTypes.shape({
+    primary: PropTypes.string,
+    secondary: PropTypes.string
+  }),
   closeable: PropTypes.bool,
   onClose: PropTypes.func,
   className: PropTypes.string
@@ -96,29 +98,34 @@ var defaultProps$7 = {
   items: [],
   current: 0,
   onClickItem: null,
-  colorAccent: 'rgba(255, 255, 255, 1)',
-  colorBackground: 'rgba(200, 200, 200, 0.5)',
+  colors: null,
   closeable: false,
   onClose: null,
   className: null
 };
 
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref2;
+  var _ref3;
 
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
       current = _ref.current,
       onClickItem = _ref.onClickItem,
-      colorAccent = _ref.colorAccent,
-      colorBackground = _ref.colorBackground,
+      colors = _ref.colors,
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
+
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
+
   var intl = useIntl();
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty(_ref2, styles$4.withShadow, withShadow), _ref2)]),
+    className: classNames([styles$5.container, (_ref3 = {}, _defineProperty(_ref3, className, className !== null), _defineProperty(_ref3, styles$5.vertical, direction === 'vertical'), _defineProperty(_ref3, styles$5.withShadow, withShadow), _ref3)]),
     "aria-label": intl.formatMessage({
       "id": "bLYuuN",
       "defaultMessage": [{
@@ -142,15 +149,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React.createElement("ul", {
-    className: styles$4.items
+    className: styles$5.items
   }, items.map(function (item, index) {
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames([styles$4.item, _defineProperty({}, styles$4.active, current === index)]),
+      className: classNames([styles$5.item, _defineProperty({}, styles$5.active, current === index)]),
       key: "item-".concat(index),
       "aria-hidden": "true"
     }, /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$4.button,
+      className: styles$5.button,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(index);
@@ -158,16 +165,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       tabIndex: "-1"
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles$4.dot,
+      className: styles$5.dot,
       style: {
-        backgroundColor: index <= current ? colorAccent : colorBackground
+        backgroundColor: index <= current ? primary : secondary
       }
     })));
   }), /*#__PURE__*/React.createElement("li", {
-    className: styles$4.menu
+    className: styles$5.menu
   }, /*#__PURE__*/React.createElement(MenuIcon, {
-    className: styles$4.menuIcon,
-    color: colorAccent
+    className: styles$5.menuIcon,
+    color: primary
   }), /*#__PURE__*/React.createElement("button", {
     type: "button",
     title: intl.formatMessage({
@@ -184,20 +191,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
+    className: styles$5.menuButton,
     onClick: function onClick() {
       if (onClickItem !== null) {
         onClickItem(null);
       }
     }
   })), closeable ? /*#__PURE__*/React.createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     style: {
-      color: colorAccent
+      color: primary
     }
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       "id": "dj/p/q",
@@ -815,7 +822,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref14;
+  var _ref15;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -1312,6 +1319,11 @@ var Viewer = function Viewer(_ref) {
       description: screenDescription
     }) : metadata;
   }, [metadata]);
+
+  var _ref14 = viewerTheme || {},
+      _ref14$menuTheme = _ref14.menuTheme,
+      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
+
   return /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement(ViewerProvider, {
@@ -1325,7 +1337,7 @@ var Viewer = function Viewer(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref14 = {}, _defineProperty(_ref14, styles$6.landscape, landscape), _defineProperty(_ref14, styles$6.hideMenu, !menuVisible), _defineProperty(_ref14, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref14, className, className), _ref14)]),
+    }), (_ref15 = {}, _defineProperty(_ref15, styles$6.landscape, landscape), _defineProperty(_ref15, styles$6.hideMenu, !menuVisible), _defineProperty(_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty(_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", Object.assign({
@@ -1334,7 +1346,7 @@ var Viewer = function Viewer(_ref) {
     style: {
       width: screenWidth
     }
-  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, {
+  }, menuDragBind()), /*#__PURE__*/React.createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     withShadow: menuOverScreen,
     items: screens,
@@ -1343,7 +1355,7 @@ var Viewer = function Viewer(_ref) {
     closeable: closeable,
     onClose: onClose,
     className: styles$6.menuDots
-  })), /*#__PURE__*/React.createElement(animated.div, {
+  }))), /*#__PURE__*/React.createElement(animated.div, {
     className: styles$6.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef

package/lib/index.js

@@ -25,8 +25,8 @@ var classNames = require('classnames');
 var reactHelmet = require('react-helmet');
 var reactIntl = require('react-intl');
 var reactUseGesture = require('react-use-gesture');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
 var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var reactFontawesome = require('@fortawesome/react-fontawesome');
 var Scroll = require('@micromag/element-scroll');
 var reactShare = require('react-share');
 
@@ -50,7 +50,9 @@ var routes = PropTypes__default["default"].shape({
 
 var styles$6 = {"container":"micromag-viewer-container","menuPreview":"micromag-viewer-menuPreview","menuPreviewContainer":"micromag-viewer-menuPreviewContainer","screen":"micromag-viewer-screen","screenInner":"micromag-viewer-screenInner","content":"micromag-viewer-content","menuDotsContainer":"micromag-viewer-menuDotsContainer","menuDots":"micromag-viewer-menuDots","current":"micromag-viewer-current","landscape":"micromag-viewer-landscape","hideMenu":"micromag-viewer-hideMenu","ready":"micromag-viewer-ready"};
 
-var styles$5 = {};
+var styles$5 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
+
+var styles$4 = {};
 
 var propTypes$8 = {
   size: PropTypes__default["default"].number,
@@ -72,7 +74,7 @@ var MenuIcon = function MenuIcon(_ref) {
       className = _ref.className;
   var squareSize = (size - 2 * spacing) / 3;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([styles$5.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className !== null)]),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 ".concat(size, " ").concat(size),
     "aria-hidden": "true"
@@ -93,16 +95,16 @@ var MenuIcon = function MenuIcon(_ref) {
 MenuIcon.propTypes = propTypes$8;
 MenuIcon.defaultProps = defaultProps$8;
 
-var styles$4 = {"container":"micromag-viewer-menus-menu-dots-container","closeButton":"micromag-viewer-menus-menu-dots-closeButton","item":"micromag-viewer-menus-menu-dots-item","button":"micromag-viewer-menus-menu-dots-button","menuButton":"micromag-viewer-menus-menu-dots-menuButton","items":"micromag-viewer-menus-menu-dots-items","dot":"micromag-viewer-menus-menu-dots-dot","menu":"micromag-viewer-menus-menu-dots-menu","menuIcon":"micromag-viewer-menus-menu-dots-menuIcon","vertical":"micromag-viewer-menus-menu-dots-vertical","withShadow":"micromag-viewer-menus-menu-dots-withShadow"};
-
 var propTypes$7 = {
   direction: PropTypes__default["default"].oneOf(['horizontal', 'vertical']),
   withShadow: PropTypes__default["default"].bool,
   items: core.PropTypes.menuItems,
   current: PropTypes__default["default"].number,
   onClickItem: PropTypes__default["default"].func,
-  colorAccent: PropTypes__default["default"].string,
-  colorBackground: PropTypes__default["default"].string,
+  colors: PropTypes__default["default"].shape({
+    primary: PropTypes__default["default"].string,
+    secondary: PropTypes__default["default"].string
+  }),
   closeable: PropTypes__default["default"].bool,
   onClose: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string
@@ -113,29 +115,34 @@ var defaultProps$7 = {
   items: [],
   current: 0,
   onClickItem: null,
-  colorAccent: 'rgba(255, 255, 255, 1)',
-  colorBackground: 'rgba(200, 200, 200, 0.5)',
+  colors: null,
   closeable: false,
   onClose: null,
   className: null
 };
 
 var ViewerMenuDots = function ViewerMenuDots(_ref) {
-  var _ref2;
+  var _ref3;
 
   var direction = _ref.direction,
       withShadow = _ref.withShadow,
       items = _ref.items,
       current = _ref.current,
       onClickItem = _ref.onClickItem,
-      colorAccent = _ref.colorAccent,
-      colorBackground = _ref.colorBackground,
+      colors = _ref.colors,
       closeable = _ref.closeable,
       onClose = _ref.onClose,
       className = _ref.className;
+
+  var _ref2 = colors || {},
+      _ref2$primary = _ref2.primary,
+      primary = _ref2$primary === void 0 ? 'rgba(255, 255, 255, 1)' : _ref2$primary,
+      _ref2$secondary = _ref2.secondary,
+      secondary = _ref2$secondary === void 0 ? 'rgba(200, 200, 200, 0.5)' : _ref2$secondary;
+
   var intl = reactIntl.useIntl();
   return /*#__PURE__*/React__default["default"].createElement("nav", {
-    className: classNames__default["default"]([styles$4.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$4.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref2, styles$4.withShadow, withShadow), _ref2)]),
+    className: classNames__default["default"]([styles$5.container, (_ref3 = {}, _defineProperty__default["default"](_ref3, className, className !== null), _defineProperty__default["default"](_ref3, styles$5.vertical, direction === 'vertical'), _defineProperty__default["default"](_ref3, styles$5.withShadow, withShadow), _ref3)]),
     "aria-label": intl.formatMessage({
       "id": "bLYuuN",
       "defaultMessage": [{
@@ -159,15 +166,15 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       total: items.length
     })
   }, /*#__PURE__*/React__default["default"].createElement("ul", {
-    className: styles$4.items
+    className: styles$5.items
   }, items.map(function (item, index) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
-      className: classNames__default["default"]([styles$4.item, _defineProperty__default["default"]({}, styles$4.active, current === index)]),
+      className: classNames__default["default"]([styles$5.item, _defineProperty__default["default"]({}, styles$5.active, current === index)]),
       key: "item-".concat(index),
       "aria-hidden": "true"
     }, /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: styles$4.button,
+      className: styles$5.button,
       onClick: function onClick() {
         if (onClickItem !== null) {
           onClickItem(index);
@@ -175,16 +182,16 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
       },
       tabIndex: "-1"
     }, /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$4.dot,
+      className: styles$5.dot,
       style: {
-        backgroundColor: index <= current ? colorAccent : colorBackground
+        backgroundColor: index <= current ? primary : secondary
       }
     })));
   }), /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.menu
+    className: styles$5.menu
   }, /*#__PURE__*/React__default["default"].createElement(MenuIcon, {
-    className: styles$4.menuIcon,
-    color: colorAccent
+    className: styles$5.menuIcon,
+    color: primary
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     title: intl.formatMessage({
@@ -201,20 +208,20 @@ var ViewerMenuDots = function ViewerMenuDots(_ref) {
         "value": "Menu"
       }]
     }),
-    className: styles$4.menuButton,
+    className: styles$5.menuButton,
     onClick: function onClick() {
       if (onClickItem !== null) {
         onClickItem(null);
       }
     }
   })), closeable ? /*#__PURE__*/React__default["default"].createElement("li", {
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     style: {
-      color: colorAccent
+      color: primary
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: styles$4.closeButton,
+    className: styles$5.closeButton,
     onClick: onClose,
     title: intl.formatMessage({
       "id": "dj/p/q",
@@ -832,7 +839,7 @@ var defaultProps$2 = {
 };
 
 var Viewer = function Viewer(_ref) {
-  var _ref14;
+  var _ref15;
 
   var story = _ref.story,
       basePath = _ref.basePath,
@@ -1329,6 +1336,11 @@ var Viewer = function Viewer(_ref) {
       description: screenDescription
     }) : metadata;
   }, [metadata]);
+
+  var _ref14 = viewerTheme || {},
+      _ref14$menuTheme = _ref14.menuTheme,
+      menuTheme = _ref14$menuTheme === void 0 ? null : _ref14$menuTheme;
+
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ViewerProvider, {
@@ -1342,7 +1354,7 @@ var Viewer = function Viewer(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$6.container, screenSize.screens.map(function (screenName) {
       return "story-screen-".concat(screenName);
-    }), (_ref14 = {}, _defineProperty__default["default"](_ref14, styles$6.landscape, landscape), _defineProperty__default["default"](_ref14, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref14, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref14, className, className), _ref14)]),
+    }), (_ref15 = {}, _defineProperty__default["default"](_ref15, styles$6.landscape, landscape), _defineProperty__default["default"](_ref15, styles$6.hideMenu, !menuVisible), _defineProperty__default["default"](_ref15, styles$6.ready, ready || withoutScreensTransforms), _defineProperty__default["default"](_ref15, className, className), _ref15)]),
     ref: containerRef,
     onContextMenu: onContextMenu
   }, !withoutMenu ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
@@ -1351,7 +1363,7 @@ var Viewer = function Viewer(_ref) {
     style: {
       width: screenWidth
     }
-  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, {
+  }, menuDragBind()), /*#__PURE__*/React__default["default"].createElement(ViewerMenuDots, Object.assign({}, menuTheme, {
     direction: "horizontal",
     withShadow: menuOverScreen,
     items: screens,
@@ -1360,7 +1372,7 @@ var Viewer = function Viewer(_ref) {
     closeable: closeable,
     onClose: onClose,
     className: styles$6.menuDots
-  })), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
+  }))), /*#__PURE__*/React__default["default"].createElement(web.animated.div, {
     className: styles$6.menuPreviewContainer,
     style: menuPreviewStyle,
     ref: menuPreviewContainerRef

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/viewer",
-    "version": "0.2.386",
+    "version": "0.2.387",
     "description": "",
     "keywords": [
         "javascript"
@@ -76,5 +76,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ea1fb37b6e8b421e8df78c50d392187420cadc70"
+    "gitHead": "0b45b8b2b2c9e602a6845388281f6c2864f7cd84"
 }