Style tweeks

.gitignore

@@ -20,3 +20,4 @@ coverage/
 .env
 .temp/
 storybook-static/
+*.tgz

lerna.json

@@ -10,7 +10,7 @@
       "allowBranch": ["master", "release/*"],
       "conventionalCommits": true,
       "preid": "beta",
-      "gitRemote": "upstream",
+      "gitRemote": "origin",
       "message": "chore(release): publish"
     }
   },

package.json

@@ -61,7 +61,13 @@
     "publish:graduate:dry-run": "run-s \"publish:version --conventional-graduate --no-git-tag-version\"",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "pack:core": "cd packages/netlify-cms-core && npm pack",
+    "pack:app": "cd packages/netlify-cms-app && npm pack",
+    "pack:ui-default": "cd packages/netlify-cms-ui-default && npm pack",
+    "pack-copy": "mv packages/**/*.tgz ./packs",
+    "pack-all": "run-p pack:* && npm run pack-copy",
+    "build:pack": "run-s build publish:version pack-all"
   },
   "browserslist": [
     "last 2 Chrome versions",
@@ -192,5 +198,6 @@
   },
   "resolutions": {
     "react-redux": "^7.2.0"
-  }
+  },
+  "version": "0.0.0"
 }

packages/netlify-cms-app/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.15.76](https://github.com/netlify/netlify-cms/compare/netlify-cms-app@2.15.72...netlify-cms-app@2.15.76) (2022-09-07)
+
+**Note:** Version bump only for package netlify-cms-app
+
+
+
+
+
 ## [2.15.72](https://github.com/netlify/netlify-cms/compare/netlify-cms-app@2.15.71...netlify-cms-app@2.15.72) (2022-04-13)
 
 **Note:** Version bump only for package netlify-cms-app

packages/netlify-cms-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "netlify-cms-app",
   "description": "An extensible, open source, Git-based, React CMS for static sites. Reusable congiuration with React as peer.",
-  "version": "2.15.72",
+  "version": "2.15.76",
   "homepage": "https://www.netlifycms.org",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-app",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
@@ -40,13 +40,13 @@
     "netlify-cms-backend-gitlab": "^2.13.0",
     "netlify-cms-backend-proxy": "^1.2.3",
     "netlify-cms-backend-test": "^2.11.3",
-    "netlify-cms-core": "^2.55.2",
+    "netlify-cms-core": "^2.55.6",
     "netlify-cms-editor-component-image": "^2.7.0",
     "netlify-cms-lib-auth": "^2.4.2",
     "netlify-cms-lib-util": "^2.15.1",
     "netlify-cms-lib-widgets": "^1.8.1",
     "netlify-cms-locales": "^1.39.0",
-    "netlify-cms-ui-default": "^2.15.5",
+    "netlify-cms-ui-default": "^2.15.9",
     "netlify-cms-widget-boolean": "^2.4.1",
     "netlify-cms-widget-code": "^1.3.4",
     "netlify-cms-widget-colorstring": "^1.1.2",

packages/netlify-cms-core/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.55.6](https://github.com/netlify/netlify-cms/compare/netlify-cms-core@2.55.2...netlify-cms-core@2.55.6) (2022-09-07)
+
+**Note:** Version bump only for package netlify-cms-core
+
+
+
+
+
 ## [2.55.2](https://github.com/netlify/netlify-cms/compare/netlify-cms-core@2.55.1...netlify-cms-core@2.55.2) (2022-04-13)
 
 

packages/netlify-cms-core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "netlify-cms-core",
   "description": "Netlify CMS core application, see netlify-cms package for the main distribution.",
-  "version": "2.55.2",
+  "version": "2.55.6",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-core",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
   "module": "dist/esm/index.js",
@@ -66,7 +66,7 @@
     "redux-devtools-extension": "^2.13.8",
     "redux-notifications": "^4.0.1",
     "redux-thunk": "^2.3.0",
-    "remark-gfm": "1.0.0",
+    "remark-gfm": "3.0.1",
     "sanitize-filename": "^1.6.1",
     "semaphore": "^1.0.5",
     "tomlify-j0.4": "^3.0.0-alpha.0",

packages/netlify-cms-core/src/bootstrap.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { render } from 'react-dom';
 import { Provider, connect } from 'react-redux';
 import { Route, Router } from 'react-router-dom';
-import { GlobalStyles } from 'netlify-cms-ui-default';
 import { I18n } from 'react-polyglot';
 
 import { store } from './redux';
@@ -85,7 +84,6 @@ function bootstrap(opts = {}) {
   function Root() {
     return (
       <>
-        <GlobalStyles />
         <Provider store={store}>
           <ConnectedTranslatedApp />
         </Provider>

packages/netlify-cms-core/src/components/App/App.js

@@ -34,7 +34,7 @@ TopBarProgress.config({
 });
 
 const AppMainContainer = styled.div`
-  min-width: 800px;
+  min-width: 1200px;
   max-width: 1440px;
   margin: 0 auto;
 `;

packages/netlify-cms-core/src/components/App/Header.js

@@ -47,7 +47,7 @@ function AppHeader(props) {
 const AppHeaderContent = styled.div`
   display: flex;
   justify-content: space-between;
-  min-width: 800px;
+  min-width: 1200px;
   max-width: 1440px;
   padding: 0 12px;
   margin: 0 auto;

packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js

@@ -15,6 +15,7 @@ const CardsGrid = styled.ul`
   margin-left: -12px;
   margin-top: 16px;
   margin-bottom: 16px;
+  padding-left: 0;
 `;
 
 export default class EntryListing extends React.Component {

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -39,6 +39,7 @@ const SidebarHeading = styled.h2`
 
 const SidebarNavList = styled.ul`
   margin: 16px 0 0;
+  padding-left: 0;
   list-style: none;
   overflow: auto;
 `;

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js

@@ -23,7 +23,7 @@ import {
 } from '../../../lib/i18n';
 
 const ControlPaneContainer = styled.div`
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
   padding-bottom: 16px;
   font-size: 16px;

packages/netlify-cms-core/src/components/Editor/EditorInterface.js

@@ -89,7 +89,7 @@ const NoPreviewContainer = styled.div`
 
 const EditorContainer = styled.div`
   width: 100%;
-  min-width: 800px;
+  min-width: 1200px;
   height: 100%;
   position: absolute;
   top: 0;
@@ -252,7 +252,7 @@ class EditorInterface extends Component {
 
     const leftPanelLocale = this.state.leftPanelLocale || locales?.[0];
     const editor = (
-      <ControlPaneContainer overFlow blockEntry={showEventBlocker}>
+      <ControlPaneContainer id="control-pane" overFlow blockEntry={showEventBlocker}>
         <EditorControlPane
           {...editorProps}
           ref={c => (this.controlPaneRef = c)}

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.js

@@ -1,8 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { isElement } from 'react-is';
-import { ScrollSyncPane } from 'react-scroll-sync';
-import { FrameContextConsumer } from 'react-frame-component';
 
 /**
  * We need to create a lightweight component here so that we can access the
@@ -12,17 +10,9 @@ import { FrameContextConsumer } from 'react-frame-component';
 class PreviewContent extends React.Component {
   render() {
     const { previewComponent, previewProps } = this.props;
-    return (
+    return isElement(previewComponent)
-      <FrameContextConsumer>
+      ? React.cloneElement(previewComponent, previewProps)
-        {context => (
+      : React.createElement(previewComponent, previewProps);
-          <ScrollSyncPane attachTo={context.document.scrollingElement}>
-            {isElement(previewComponent)
-              ? React.cloneElement(previewComponent, previewProps)
-              : React.createElement(previewComponent, previewProps)}
-          </ScrollSyncPane>
-        )}
-      </FrameContextConsumer>
-    );
   }
 }
 

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -3,9 +3,9 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Frame, { FrameContextConsumer } from 'react-frame-component';
 import { lengths } from 'netlify-cms-ui-default';
 import { connect } from 'react-redux';
+import { ScrollSyncPane } from 'react-scroll-sync';
 
 import {
   resolveWidget,
@@ -22,12 +22,13 @@ import EditorPreviewContent from './EditorPreviewContent.js';
 import PreviewHOC from './PreviewHOC';
 import EditorPreview from './EditorPreview';
 
-const PreviewPaneFrame = styled(Frame)`
+const PreviewPaneFrame = styled.div`
   width: 100%;
   height: 100%;
   border: none;
   background: #fff;
   border-radius: ${lengths.borderRadius};
+  overflow: auto;
 `;
 
 export class PreviewPane extends React.Component {
@@ -231,17 +232,13 @@ export class PreviewPane extends React.Component {
 
     return (
       <ErrorBoundary config={config}>
-        <PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
+        <ScrollSyncPane>{/* attachTo={document.getElementById('control-pane')}>*/}
-          <FrameContextConsumer>
+          <PreviewPaneFrame id="preview-pane" head={styleEls} initialContent={initialContent}>
-            {({ document, window }) => {
+            <EditorPreviewContent
-              return (
+              {...{ previewComponent, previewProps: { ...previewProps, document, window } }}
-                <EditorPreviewContent
+            />
-                  {...{ previewComponent, previewProps: { ...previewProps, document, window } }}
+          </PreviewPaneFrame>
-                />
+        </ScrollSyncPane>
-              );
-            }}
-          </FrameContextConsumer>
-        </PreviewPaneFrame>
       </ErrorBoundary>
     );
   }

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -89,7 +89,7 @@ const ToolbarContainer = styled.div`
   top: 0;
   left: 0;
   width: 100%;
-  min-width: 800px;
+  min-width: 1200px;
   z-index: ${zIndex.zIndex300};
   background-color: #fff;
   height: 66px;

packages/netlify-cms-ui-default/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.15.9](https://github.com/netlify/netlify-cms/compare/netlify-cms-ui-default@2.15.5...netlify-cms-ui-default@2.15.9) (2022-09-07)
+
+**Note:** Version bump only for package netlify-cms-ui-default
+
+
+
+
+
 ## [2.15.5](https://github.com/netlify/netlify-cms/compare/netlify-cms-ui-default@2.15.4...netlify-cms-ui-default@2.15.5) (2022-03-08)
 
 **Note:** Version bump only for package netlify-cms-ui-default

packages/netlify-cms-ui-default/package.json

@@ -1,7 +1,7 @@
 {
   "name": "netlify-cms-ui-default",
   "description": "Default UI components for Netlify CMS.",
-  "version": "2.15.5",
+  "version": "2.15.9",
   "repository": "https://github.com/netlify/netlify-cms/tree/master/packages/netlify-cms-ui-default",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
   "license": "MIT",

packages/netlify-cms-ui-default/src/index.js

@@ -28,7 +28,6 @@ import {
   effects,
   zIndex,
   reactSelectStyles,
-  GlobalStyles,
 } from './styles';
 
 export const NetlifyCmsUiDefault = {
@@ -62,7 +61,6 @@ export const NetlifyCmsUiDefault = {
   effects,
   zIndex,
   reactSelectStyles,
-  GlobalStyles,
 };
 export {
   Dropdown,
@@ -95,6 +93,5 @@ export {
   effects,
   zIndex,
   reactSelectStyles,
-  GlobalStyles,
   GoBackButton,
 };

packages/netlify-cms-ui-default/src/styles.js

@@ -1,5 +1,4 @@
-import React from 'react';
+import { css } from '@emotion/core';
-import { css, Global } from '@emotion/core';
 
 /**
  * Font Stacks
@@ -89,7 +88,7 @@ const lengths = {
   borderRadius: '5px',
   richTextEditorMinHeight: '300px',
   borderWidth: '2px',
-  topCardWidth: '682px',
+  topCardWidth: '722px',
   pageMargin: '28px 18px',
   objectWidgetTopBarContainerPadding: '0 14px 14px',
 };
@@ -424,100 +423,6 @@ const zIndex = {
   zIndex99999: 99999,
 };
 
-function GlobalStyles() {
-  return (
-    <Global
-      styles={css`
-        *,
-        *:before,
-        *:after {
-          box-sizing: border-box;
-        }
-
-        :focus {
-          outline: -webkit-focus-ring-color auto ${lengths.borderRadius};
-        }
-
-        /**
-       * Don't show outlines if the user is utilizing mouse rather than keyboard.
-       */
-        [data-whatintent='mouse'] *:focus {
-          outline: none;
-        }
-
-        input {
-          border: 0;
-        }
-
-        body {
-          font-family: ${fonts.primary};
-          font-weight: normal;
-          background-color: ${colors.background};
-          color: ${colors.text};
-          margin: 0;
-        }
-
-        ul,
-        ol {
-          padding-left: 0;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6,
-        p {
-          font-family: ${fonts.primary};
-          color: ${colors.textLead};
-          font-size: 15px;
-          line-height: 1.5;
-          margin-top: 0;
-        }
-
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-          font-weight: 500;
-        }
-
-        h1 {
-          font-size: 24px;
-          letter-spacing: 0.4px;
-          color: ${colors.textLead};
-        }
-
-        a,
-        button {
-          font-size: 14px;
-          font-weight: 500;
-        }
-
-        a {
-          color: ${colors.text};
-          text-decoration: none;
-        }
-
-        button {
-          font-family: inherit;
-        }
-
-        img {
-          max-width: 100%;
-        }
-
-        textarea {
-          resize: none;
-        }
-      `}
-    />
-  );
-}
-
 export {
   fonts,
   colorsRaw,
@@ -532,5 +437,4 @@ export {
   effects,
   zIndex,
   reactSelectStyles,
-  GlobalStyles,
 };

packages/netlify-cms/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.10.193](https://github.com/netlify/netlify-cms/compare/netlify-cms@2.10.192...netlify-cms@2.10.193) (2022-09-07)
+
+**Note:** Version bump only for package netlify-cms
+
+
+
+
+
 ## [2.10.192](https://github.com/netlify/netlify-cms/compare/netlify-cms@2.10.191...netlify-cms@2.10.192) (2022-04-13)
 
 **Note:** Version bump only for package netlify-cms

packages/netlify-cms/package.json

@@ -1,7 +1,7 @@
 {
   "name": "netlify-cms",
   "description": "An extensible, open source, Git-based, React CMS for static sites.",
-  "version": "2.10.192",
+  "version": "2.10.193",
   "homepage": "https://www.netlifycms.org",
   "repository": "https://github.com/netlify/netlify-cms",
   "bugs": "https://github.com/netlify/netlify-cms/issues",
@@ -23,7 +23,7 @@
   "dependencies": {
     "codemirror": "^5.46.0",
     "create-react-class": "^15.7.0",
-    "netlify-cms-app": "^2.15.72",
+    "netlify-cms-app": "^2.15.76",
     "netlify-cms-media-library-cloudinary": "^1.3.10",
     "netlify-cms-media-library-uploadcare": "^0.5.10",
     "react": "^16.8.4",

website/src/components/layout.js

@@ -5,7 +5,6 @@ import { ThemeProvider } from 'emotion-theming';
 
 import Header from './header';
 import Footer from './footer';
-import GlobalStyles from '../global-styles';
 import theme from '../theme';
 
 const LAYOUT_QUERY = graphql`
@@ -32,7 +31,6 @@ const LAYOUT_QUERY = graphql`
 export function LayoutTemplate({ children }) {
   return (
     <ThemeProvider theme={theme}>
-      <GlobalStyles />
       {children}
     </ThemeProvider>
   );

website/src/global-styles.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Global, css } from '@emotion/core';
-
-import theme from './theme';
-
-const globalStyles = css`
-  * {
-    box-sizing: border-box;
-  }
-
-  body {
-    color: ${theme.colors.gray};
-    font-family: ${theme.fontFamily};
-    line-height: ${theme.lineHeight[2]};
-    font-size: ${theme.fontsize[3]};
-    background: ${theme.colors.shadeBlue};
-    margin: 0;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  ol,
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: ${theme.lineHeight[1]};
-    margin-top: 0;
-    margin-bottom: 0.5em;
-  }
-
-  h1 {
-    font-size: 36px;
-  }
-
-  h2 {
-    font-size: 28px;
-  }
-
-  h3 {
-    font-size: 24px;
-  }
-
-  p {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
-  a {
-    color: ${theme.colors.darkGreen};
-    text-decoration: none;
-  }
-
-  .gitter-open-chat-button {
-    &,
-    &:visited {
-      padding: ${theme.space[3]} ${theme.space[4]};
-      font-family: ${theme.fontFamily};
-      font-size: ${theme.fontsize[3]};
-      letter-spacing: 0.5px;
-      line-height: 1;
-      color: ${theme.colors.gray};
-      background-color: ${theme.colors.green};
-      box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.15), 0 1px 4px 0 rgba(68, 74, 87, 0.3);
-    }
-
-    &:hover {
-      background-color: ${theme.colors.lightGreen};
-      box-shadow: 0 2px 16px 0 rgba(68, 74, 87, 0.25), 0 1px 4px 0 rgba(68, 74, 87, 0.5);
-    }
-
-    &:focus {
-      box-shadow: 0 0 6px 3px rgba(62, 160, 127, 0.6);
-      transition: none;
-    }
-
-    &:active {
-      color: ${theme.colors.lightGray};
-    }
-  }
-`;
-
-function GlobalStyles() {
-  return <Global styles={globalStyles} />;
-}
-
-export default GlobalStyles;