Merge branch 'matilde/chat-dark-mode' (#2144)

* origin/matilde/chat-dark-mode:
  chat: fade images on dark mode
  chat: add dark mode

Signed-off-by: Jared Tobin <jared@tlon.io>

pkg/interface/chat/src/css/custom.css

@@ -141,4 +141,49 @@ h2 {
   .h-100-minus-48-xl {
     height: calc(100% - 48px);
   }
+}
+
+/* dark */
+
+@media (prefers-color-scheme: dark) {
+  .bg-black-d {
+    background-color: black;
+  }
+  .white-d {
+    color: white;
+  }
+  .gray1-d {
+    color: #4d4d4d;
+  }
+  .gray2-d {
+    color: #7f7f7f;
+  }
+  .gray3-d {
+    color: #b1b2b3;
+  }
+  .gray4-d {
+    color: #e6e6e6;
+  }
+  .bg-gray0-d {
+    background-color: #333;
+  }
+  .b--gray0-d {
+    border-color: #333;
+  }
+  .b--gray2-d {
+    border-color: #7f7f7f;
+  }
+  .bb-d {
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+  }
+  .invert-d {
+    filter: invert(1);
+  }
+  .o-60-d {
+    opacity: .6;
+  }
+  a {
+    color: #fff;
+  }
 }

pkg/interface/chat/src/js/components/chat.js

@@ -230,14 +230,15 @@ export class ChatScreen extends Component {
          <Link to="/~chat/">{"⟵ All Chats"}</Link>
        </div>
        <div
-         className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+         className={`pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll 
+         overflow-x-auto-l overflow-x-auto-xl flex-shrink-0`}
          style={{ height: 48 }}>
          <SidebarSwitcher
            sidebarShown={this.props.sidebarShown}
            popout={this.props.popout}
          />
          <Link to={`/~chat/` + isinPopout + `room` + state.station}
-         className="pt2">
+         className="pt2 white-d">
            <h2
              className="mono dib f8 fw4 v-top"
              style={{ width: "max-content" }}>
@@ -253,7 +254,7 @@ export class ChatScreen extends Component {
          />
        </div>
        <div
-         className="overflow-y-scroll pt3 pb2 flex flex-column-reverse"
+         className="overflow-y-scroll bg-black-d pt3 pb2 flex flex-column-reverse"
          style={{ height: "100%", resize: "vertical" }}
          onScroll={this.onScroll}>
          <div

pkg/interface/chat/src/js/components/join.js

@@ -80,9 +80,9 @@ export class JoinScreen extends Component {
   render() {
     const { props } = this;
 
-    let joinClasses = "db f9 green2 ba pa2 b--green2 pointer";
+    let joinClasses = "db f9 green2 ba pa2 b--green2 bg-gray0-d pointer";
     if ((!this.state.station) || (this.state.station === "/")) {
-      joinClasses = 'db f9 gray2 ba pa2 b--gray3 pointer';
+      joinClasses = 'db f9 gray2 ba pa2 b--gray3 bg-gray0-d pointer';
     }
 
     let errElem = (<span />);
@@ -95,7 +95,8 @@ export class JoinScreen extends Component {
     }
 
     return (
-      <div className="h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column">
+      <div className={`h-100 w-100 pa3 pt2 overflow-x-hidden flex flex-column 
+      bg-black-d white-d`}>
         <div
           className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
@@ -106,7 +107,7 @@ export class JoinScreen extends Component {
           <p className="f9 gray2 mb4">Chat names use lowercase, hyphens, and slashes.</p>
           <textarea
             ref={ e => { this.textarea = e; } }
-            className="f7 mono ba b--gray3 pa3 mb2 db"
+            className="f7 mono ba b--gray3 b--gray2-d bg-black-d white-d pa3 mb2 db"
             placeholder="~zod/chatroom"
             spellCheck="false"
             rows={1}

pkg/interface/chat/src/js/components/lib/chat-input.js

@@ -175,7 +175,7 @@ export class ChatInput extends Component {
     this.bindShortcuts();
 
     return (
-      <div className="pa3 cf flex black bt b--gray4" style={{ flexGrow: 1 }}>
+      <div className="pa3 cf flex black white-d bt b--gray4 b--gray2-d bg-black-d" style={{ flexGrow: 1 }}>
         <div
           className="fl"
           style={{
@@ -185,9 +185,9 @@ export class ChatInput extends Component {
           }}>
           <Sigil ship={window.ship} size={24} color="#4330FC" />
         </div>
-        <div className="fr h-100 flex" style={{ flexGrow: 1 }}>
+        <div className="fr h-100 flex bg-black-d" style={{ flexGrow: 1 }}>
           <textarea
-            className={"pl3 bn"}
+            className={"pl3 bn bg-black-d white-d"}
             style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
             autoCapitalize="none"
             autoFocus={(

pkg/interface/chat/src/js/components/lib/chat-tabbar.js

@@ -14,9 +14,9 @@ export class ChatTabBar extends Component {
 
     if (props.location.pathname.includes('/settings')) {
       memColor =  'gray3';
-      setColor = 'black';
+      setColor = 'black white-d';
     } else if (props.location.pathname.includes('/members')) {
-      memColor =  'black';
+      memColor =  'black white-d';
       setColor = 'gray3';
     } else {
       memColor =  'gray3';
@@ -55,7 +55,7 @@ export class ChatTabBar extends Component {
         <a href={`/~chat/popout/room` + props.station} target="_blank"
         className="dib fr">
           <img
-            className={`flex-shrink-0 pr2 dn ` + hidePopoutIcon}
+            className={`flex-shrink-0 pr2 dn invert-d ` + hidePopoutIcon}
             src="/~chat/img/popout.png"
             height="16"
             width="16"/>

pkg/interface/chat/src/js/components/lib/header-bar.js

@@ -17,7 +17,7 @@ export class HeaderBar extends Component {
         : "dn db-m db-l db-xl";
 
     return (
-      <div className={`bg-black w-100 justify-between ` + popoutHide}
+      <div className={`bg-black bb-d b--gray2-d w-100 justify-between ` + popoutHide}
         style={{ height: 48, padding: 8}}>
         <a className="db"
           style={{ background: '#1A1A1A',

pkg/interface/chat/src/js/components/lib/icons/icon-sidebar-switch.js

@@ -16,7 +16,7 @@ export class SidebarSwitcher extends Component {
             api.sidebarToggle();
           }}>
           <img
-            className={`pr3 dn ` + popoutSwitcher}
+            className={`pr3 dn invert-d ` + popoutSwitcher}
             src={
               this.props.sidebarShown
                 ? "/~chat/img/ChatSwitcherLink.png"

pkg/interface/chat/src/js/components/lib/invite-element.js

@@ -80,7 +80,7 @@ export class InviteElement extends Component {
       <div></div>
     );
 
-    let modifyButtonClasses = "db f9 ba pa2 b--black pointer";
+    let modifyButtonClasses = "db f9 ba pa2 white-d bg-gray0-d b--black b--gray2-d pointer";
     if (state.error) {
       modifyButtonClasses = modifyButtonClasses + ' gray3';
     }
@@ -96,7 +96,7 @@ export class InviteElement extends Component {
       <div>
         <textarea
           ref={ e => { this.textarea = e; } }
-          className="f7 mono ba b--gray3 pa3 mb4 db w-100"
+          className="f7 mono ba b--gray3 bg-black-d white-d pa3 mb4 db w-100"
           style={{
             resize: 'none',
             height: 50

pkg/interface/chat/src/js/components/lib/member-element.js

@@ -16,14 +16,14 @@ export class MemberElement extends Component {
     let actionElem;
     if (props.ship === props.owner) {
       actionElem = (
-        <p className="w-20 dib list-ship black f8 c-default">
+        <p className="w-20 dib list-ship black white-d f8 c-default">
           Host
         </p>
       );
     } else if (window.ship !== props.ship && window.ship === props.owner) {
       actionElem = (
         <a onClick={this.onRemove.bind(this)}
-           className="w-20 dib list-ship black f8 pointer">
+           className="w-20 dib list-ship black white-d f8 pointer">
            Ban
         </a>
       );
@@ -38,7 +38,7 @@ export class MemberElement extends Component {
         <Sigil ship={props.ship} size={32} />
         <p
           className={
-            "w-70 mono list-ship dib v-mid black ml2 nowrap f8"
+            "w-70 mono list-ship dib v-mid black white-d ml2 nowrap f8"
           }>
           ~{props.ship}
         </p>

pkg/interface/chat/src/js/components/lib/message.js

@@ -38,6 +38,7 @@ export class Message extends Component {
       if (imgMatch) {
         contents = (
           <img
+            className="o-60-d"
             src={letter.url}
             style={{
               width: "50%",
@@ -115,15 +116,15 @@ export class Message extends Component {
             />
           </div>
           <div
-            className="fr clamp-message"
+            className="fr clamp-message white-d"
             style={{ flexGrow: 1, marginTop: -8 }}>
             <div className="hide-child" style={paddingTop}>
-              <p className="v-mid mono f9 gray dib mr3">
+              <p className="v-mid mono f9 gray2 dib mr3">
                 {props.msg.author.slice(0, 1) === "~" ? "" : "~"}
                 {props.msg.author}
               </p>
-              <p className="v-mid mono f9 gray dib">{timestamp}</p>
-              <p className="v-mid mono f9 ml2 gray dib child dn-s">{datestamp}</p>
+              <p className="v-mid mono f9 gray2 dib">{timestamp}</p>
+              <p className="v-mid mono f9 ml2 gray2 dib child dn-s">{datestamp}</p>
             </div>
             {this.renderContent()}
           </div>
@@ -138,8 +139,8 @@ export class Message extends Component {
           style={{
             minHeight: "min-content"
           }}>
-          <p className="child pt2 pl2 pr1 mono f9 gray dib">{timestamp}</p>
-          <div className="fr f7 clamp-message" style={{ flexGrow: 1 }}>
+          <p className="child pt2 pl2 pr1 mono f9 gray2 dib">{timestamp}</p>
+          <div className="fr f7 clamp-message white-d" style={{ flexGrow: 1 }}>
             {this.renderContent()}
           </div>
         </div>

pkg/interface/chat/src/js/components/lib/sidebar-invite.js

@@ -18,7 +18,7 @@ export class SidebarInvite extends Component {
     return (
       <div className='pa3'>
         <div className='w-100 v-mid'>
-          <p className="dib f8 mono">
+          <p className="dib f8 mono gray4-d">
             {props.invite.text}
           </p>
         </div>
@@ -28,7 +28,7 @@ export class SidebarInvite extends Component {
           Accept Invite
         </a>
         <a
-          className="dib pointer ml4 pa2 f9 bg-black white mt4"
+          className="dib pointer ml4 pa2 f9 bg-black bg-gray0-d white mt4"
           onClick={this.onDecline.bind(this)}>
           Decline
         </a>

pkg/interface/chat/src/js/components/lib/sidebar-item.js

@@ -58,15 +58,15 @@ export class SidebarItem extends Component {
 
     let description = this.getLetter(props.description);
 
-    let selectedCss = !!props.selected ? 'bg-gray5' : 'bg-white pointer';
+    let selectedCss = !!props.selected ? 'bg-gray5 bg-gray0-d gray3-d' : 'bg-white bg-black-d gray3-d pointer';
 
     return (
       <div
-        className={"z1 pa3 pt4 pb4 bb b--gray4 " + selectedCss}
+        className={"z1 pa3 pt4 pb4 bb b--gray4 b--gray2-d " + selectedCss}
         onClick={this.onClick.bind(this)}>
         <div className="w-100 v-mid">
           <p className={"dib mono f8 " + unreadElem }>
-            <span className={(unreadElem === "") ? "gray3" : ""}>
+            <span className={(unreadElem === "") ? "gray3 gray2-d" : ""}>
               {title.substr(0, title.indexOf("/"))}/
             </span>
             {title.substr(title.indexOf("/") + 1)}

pkg/interface/chat/src/js/components/member.js

@@ -76,21 +76,21 @@ export class MemberScreen extends Component {
       let isinPopout = this.props.popout ? "popout/" : "";
 
     return (
-      <div className="h-100 w-100 overflow-x-hidden flex flex-column">
+      <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
         <div
           className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
           style={{ height: "1rem" }}>
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
         <div
-          className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+          className="pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
           style={{ height: 48 }}>
           <SidebarSwitcher
             sidebarShown={this.props.sidebarShown}
             popout={this.props.popout}
           />
           <Link to={`/~chat/` + isinPopout + `room` + state.station}
-          className="pt2">
+          className="pt2 white-d">
             <h2
               className="mono dib f8 fw4 v-top"
               style={{ width: "max-content" }}>

pkg/interface/chat/src/js/components/new.js

@@ -168,9 +168,9 @@ export class NewScreen extends Component {
   }
 
   render() {
-    let createClasses = "pointer db f9 green2 ba pa2 b--green2";
+    let createClasses = "pointer db f9 green2 bg-gray0-d ba pa2 b--green2";
     if (!this.state.idName) {
-      createClasses = 'pointer db f9 gray2 ba pa2 b--gray3';
+      createClasses = 'pointer db f9 gray2 ba bg-gray0-d pa2 b--gray3';
     }
 
     let idErrElem = (<span />);
@@ -192,7 +192,8 @@ export class NewScreen extends Component {
     }
 
     return (
-      <div className="h-100 w-100 w-50-l w-50-xl pa3 pt2 overflow-x-hidden flex flex-column">
+      <div className={`h-100 w-100 w-50-l w-50-xl pa3 pt2 overflow-x-hidden
+      bg-black-d white-d flex flex-column`}>
         <div className="w-100 dn-m dn-l dn-xl inter pt1 pb6 f8">
           <Link to="/~chat/">{"⟵ All Chats"}</Link>
         </div>
@@ -203,7 +204,7 @@ export class NewScreen extends Component {
           Lowercase alphanumeric characters, dashes, and slashes only
           </p>
           <textarea
-            className="f7 ba b--gray3 pa3 db w-100"
+            className="f7 ba b--gray3 b--gray2-d bg-black-d white-d pa3 db w-100"
             placeholder="secret-chat"
             rows={1}
             style={{
@@ -216,7 +217,7 @@ export class NewScreen extends Component {
           <div className="dropdown relative">
             <select
               style={{WebkitAppearance: "none"}}
-              className="pa3 f8 bg-white br0 w-100 inter"
+              className="pa3 f8 bg-white bg-black-d white-d br0 w-100 inter"
               value={this.state.securityValue}
               onChange={this.securityChange}>
               <option value="village">Village</option>
@@ -232,7 +233,7 @@ export class NewScreen extends Component {
           </p>
           <textarea
             ref={e => { this.textarea = e; }}
-            className="f7 mono ba b--gray3 pa3 mb4 db w-100"
+            className="f7 mono ba b--gray3 b--gray2-d bg-black-d white-d pa3 mb4 db w-100"
             placeholder="~zod, ~bus"
             spellCheck="false"
             style={{

pkg/interface/chat/src/js/components/settings.js

@@ -49,7 +49,7 @@ export class SettingsScreen extends Component {
 
     let chatOwner = (deSig(props.match.params.ship) === window.ship);
 
-    let deleteButtonClasses = (chatOwner) ? 'b--red2 red2 pointer' : 'b--grey3 grey3 c-default';
+    let deleteButtonClasses = (chatOwner) ? 'b--red2 red2 pointer bg-gray0-d' : 'b--grey3 grey3 bg-gray0-d c-default';
     let leaveButtonClasses = (!chatOwner) ? "pointer" : "c-default";
 
     return (
@@ -58,7 +58,7 @@ export class SettingsScreen extends Component {
         <p className="f8 mt3 lh-copy db">Leave Chat</p>
         <p className="f9 gray2 db mb4">Remove this chat from your chat list. You will need to request for access again.</p>
         <a onClick={(!chatOwner) ? this.deleteChat.bind(this) : null}
-           className={"dib f9 black ba pa2 b--black " + leaveButtonClasses}>Leave this chat</a>
+           className={"dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray2-d " + leaveButtonClasses}>Leave this chat</a>
       </div>
         <div className={"w-100 fl mt3 " + ((!chatOwner) ? 'o-30' : '')}>
         <p className="f8 mt3 lh-copy db">Delete Chat</p>
@@ -83,21 +83,21 @@ export class SettingsScreen extends Component {
       }
 
       return (
-        <div className="h-100 w-100 overflow-x-hidden flex flex-column">
+        <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
           <div
             className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
             style={{ height: "1rem" }}>
             <Link to="/~chat/">{"⟵ All Chats"}</Link>
           </div>
           <div
-            className="pl3 pt2 bb b--gray4 flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
+            className="pl3 pt2 bb b--gray4 b--gray2-d bg-black-d flex relative overflow-x-scroll overflow-x-auto-l overflow-x-auto-xl flex-shrink-0"
             style={{ height: 48 }}>
             <SidebarSwitcher
               sidebarShown={this.props.sidebarShown}
               popout={this.props.popout}
             />
             <Link to={`/~chat/` + isinPopout + `room` + state.station}
-            className="pt2">
+            className="pt2 white-d">
               <h2
                 className="mono dib f8 fw4 v-top"
                 style={{ width: "max-content" }}>
@@ -118,7 +118,7 @@ export class SettingsScreen extends Component {
     }
 
     return (
-      <div className="h-100 w-100 overflow-x-hidden flex flex-column">
+      <div className="h-100 w-100 overflow-x-hidden flex flex-column white-d">
         <div
           className="w-100 dn-m dn-l dn-xl inter pt4 pb6 pl3 f8"
           style={{ height: "1rem" }}>

pkg/interface/chat/src/js/components/sidebar.js

@@ -71,18 +71,19 @@ export class Sidebar extends Component {
       });
 
     return (
-      <div className="h-100-minus-96-s h-100 w-100 overflow-x-hidden flex flex-column relative z1">
-        <div className="overflow-y-auto pb9 h-100">
+      <div className={`h-100-minus-96-s h-100 w-100 overflow-x-hidden flex
+      bg-black-d flex-column relative z1`}>
+        <div className="overflow-y-auto h-100">
           {sidebarInvites}
           {sidebarItems}
         </div>
         <div className="absolute z2 tc w-100 bg-transparent"
           style={{ bottom: 10 }}>
-          <a className="dib f9 pa3 bt bb bl br tc pointer bg-white"
+          <a className="dib f9 pa3 bt bb bl br tc pointer bg-white bg-gray0-d gray4-d b--gray2-d"
             onClick={this.onClickNew.bind(this)}>
             Create New Chat
           </a>
-          <a className="dib f9 pa3 bt bb br tl pointer bg-white"
+          <a className="dib f9 pa3 bt bb br tl pointer bg-white bg-gray0-d gray4-d b--gray2-d"
             onClick={this.onClickJoin.bind(this)}>
             Join Existing Chat
           </a>

pkg/interface/chat/src/js/components/skeleton.js

@@ -19,7 +19,7 @@ export class Skeleton extends Component {
     : "";
 
     return (
-      <div className="h-100 w-100 absolute">
+      <div className="h-100 w-100 absolute bg-black-d">
         <HeaderBar spinner={this.props.spinner} popout={this.props.popout} />
         <div className={`cf w-100 absolute flex  ` +
           ((this.props.chatHideonMobile)
@@ -29,7 +29,7 @@ export class Skeleton extends Component {
             ? "h-100"
             : "h-100-minus-48-m h-100-minus-48-l h-100-minus-48-xl")}>
           <div className={
-              `fl h-100 br b--gray4 overflow-x-hidden
+              `fl h-100 br b--gray4 b--gray2-d overflow-x-hidden
               flex-basis-full-s flex-basis-300-m flex-basis-300-l
               flex-basis-300-xl ` +
               sidebarHide + " " +
@@ -43,7 +43,7 @@ export class Skeleton extends Component {
               <a className="pl3 pb6" href="/">
                 {"⟵ Landscape"}
               </a>
-              <div className="bb b--gray4 inter f8 pl3 pt6 pb3">All Chats</div>
+              <div className="bb b--gray4 white-d inter f8 pl3 pt6 pb3">All Chats</div>
             </div>
             {this.props.sidebar}
           </div>

pkg/interface/soto/package-lock.json

@@ -1741,7 +1741,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -1762,12 +1763,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -1782,17 +1785,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -1909,7 +1915,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -1921,6 +1928,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -1935,6 +1943,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -1942,12 +1951,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -1966,6 +1977,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2046,7 +2058,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2058,6 +2071,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2143,7 +2157,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -2179,6 +2194,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -2198,6 +2214,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -2241,12 +2258,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },