diff --git a/.circleci/config.yml b/.circleci/config.yml index 76802d20a9..4a298fa2ee 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -46,7 +46,7 @@ jobs: paths: - node_modules key: frontend-v1-{{ checksum "package-lock.json" }} - - run: npm run dist + - run: npm run build # Save static files for subsequent jobs. - persist_to_workspace: root: ~/project @@ -116,7 +116,7 @@ jobs: - run: cd /usr/local/ && sudo tar --strip-components 1 -xzf ~/node-v14.17.5-linux-x64.tar.gz - run: pip install --user wheel boto3 - run: npm install - - run: npm run dist + - run: npm run build - run: PYTHONPATH=. python scripts/nightly/get_version.py > __init__.py - run: mv __init__.py wagtail/__init__.py - run: python setup.py bdist_wheel diff --git a/.eslintignore b/.eslintignore index 5bc897a583..5bd3074d0a 100644 --- a/.eslintignore +++ b/.eslintignore @@ -3,9 +3,7 @@ node_modules **/lib/ public/ coverage/ -gulp/ **/vendor/ -gulpfile.js docs/_build wagtail/admin/static wagtail/documents/static diff --git a/.squash.yml b/.squash.yml index 427403c28c..1248beb0e8 100644 --- a/.squash.yml +++ b/.squash.yml @@ -9,7 +9,7 @@ deployments: - cd /code post_build_steps: - npm install --no-save --no-audit --progress=false - - npm run dist + - npm run build - pip install /code - mkdir /myproject - cd /myproject diff --git a/client/.storybook/main.js b/client/.storybook/main.js index 3d3769cb00..3e81d1f93b 100644 --- a/client/.storybook/main.js +++ b/client/.storybook/main.js @@ -2,15 +2,33 @@ module.exports = { "stories": [ "../src/**/*.stories.@(js|jsx|ts|tsx)" ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials" - ], "core": { "builder": "webpack5" }, - "webpackFinal": (config) => { + webpackFinal: (config) => { config.resolve.fallback.crypto = false; + + const rules = [ + { + test: /\.(scss|css)$/, + use: [ + "style-loader", + "css-loader", + { + loader: "postcss-loader", + options: { + postcssOptions: { + plugins: ["autoprefixer", "cssnano"], + }, + }, + }, + "sass-loader", + ], + }, + ]; + + config.module.rules = config.module.rules.concat(rules); + return config; }, -} +}; diff --git a/client/.storybook/preview.js b/client/.storybook/preview.js index 6e6b8470b6..c9310b152a 100644 --- a/client/.storybook/preview.js +++ b/client/.storybook/preview.js @@ -1,5 +1,8 @@ import '../tests/stubs'; +import '../../wagtail/admin/static_src/wagtailadmin/scss/core.scss'; +import '../../wagtail/admin/static_src/wagtailadmin/scss/sidebar.scss'; + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, controls: { diff --git a/client/scss/_tools.scss b/client/scss/_tools.scss index 3bd20aa5ca..361af44c2b 100644 --- a/client/scss/_tools.scss +++ b/client/scss/_tools.scss @@ -5,7 +5,6 @@ No CSS should be produced by these files. @import 'tools/functions.breakpoints'; @import 'tools/mixins.breakpoints'; -@import 'tools/mixins.fonts'; @import 'tools/mixins.general'; @import 'tools/mixins.grid'; @import 'tools/various.colors'; diff --git a/client/scss/components/_bulk_actions.scss b/client/scss/components/_bulk_actions.scss index b5dfdb257c..ec49c37a05 100644 --- a/client/scss/components/_bulk_actions.scss +++ b/client/scss/components/_bulk_actions.scss @@ -98,7 +98,7 @@ color: $color-teal-light; background-color: transparent; border: 0; - font-family: Open Sans, Arial, sans-serif; + font-family: $font-sans; padding: 0; } diff --git a/client/scss/components/_button.scss b/client/scss/components/_button.scss index 5fc2a27793..621d4b45d3 100644 --- a/client/scss/components/_button.scss +++ b/client/scss/components/_button.scss @@ -7,7 +7,7 @@ // input[type=button], .button { border-radius: 3px; - font-family: Open Sans,Arial,sans-serif; + font-family: $font-sans; width: auto; height: 2.4em; padding: 0 1em; diff --git a/client/scss/components/_forms.scss b/client/scss/components/_forms.scss index a4573e31d7..a73592ab7d 100644 --- a/client/scss/components/_forms.scss +++ b/client/scss/components/_forms.scss @@ -47,7 +47,7 @@ // box-sizing: border-box; // border-radius: 6px; // width: 100%; -// font-family: Open Sans,Arial,sans-serif; +// font-family: $font-sans; // border: 1px solid $color-input-border; // padding: 0.9em 1.2em; // background-color: $color-fieldset-hover; diff --git a/client/scss/components/_icons.scss b/client/scss/components/_icons.scss index b03a6a87fa..c8dad1af3b 100644 --- a/client/scss/components/_icons.scss +++ b/client/scss/components/_icons.scss @@ -1,8 +1,8 @@ @use "sass:string"; -// The wagtail font isn't available in WOFF2, so a @font-face is set here without a mixin. + @font-face { font-family: 'wagtail'; - src: url('#{$font-root}wagtail.woff') format('woff'); + src: url('../fonts/wagtail.woff') format('woff'); font-weight: normal; font-style: normal; } @@ -89,7 +89,7 @@ svg.icon-spinner { // TODO: leave only class when iconfont styles are removed } .icon-horizontalrule:before { - font-family: Open Sans, Arial, sans-serif; + font-family: $font-sans; } diff --git a/client/scss/elements/_forms.scss b/client/scss/elements/_forms.scss index ab8a3f3b56..1d6bb7a8eb 100644 --- a/client/scss/elements/_forms.scss +++ b/client/scss/elements/_forms.scss @@ -81,7 +81,7 @@ select, box-sizing: border-box; border-radius: 6px; width: 100%; - font-family: Open Sans,Arial,sans-serif; + font-family: $font-sans; border: 1px solid $color-input-border; padding: 0.9em 1.2em; background-color: $color-fieldset-hover; diff --git a/client/scss/elements/_typography.scss b/client/scss/elements/_typography.scss index f7ecd83583..ae93f03e22 100644 --- a/client/scss/elements/_typography.scss +++ b/client/scss/elements/_typography.scss @@ -1,13 +1,6 @@ -@include webfont(Open Sans, opensans-light, 300, normal); -@include webfont(Open Sans, opensans-regular, 400, normal); -@include webfont(Open Sans, opensans-semibold, 600, normal); -@include webfont(Open Sans, opensans-bold, 700, normal); -@include webfont(Roboto Slab, robotoslab-regular, 400, normal); -@include webfont(Roboto Slab, robotoslab-bold, 700, normal); - body { -webkit-font-smoothing: antialiased; // Do not remove! - font-family: Open Sans, Arial, sans-serif; + font-family: $font-sans; font-size: 85%; line-height: 1.5em; color: $color-text-base; @@ -38,7 +31,7 @@ h1 { h2 { text-transform: uppercase; font-size: 1.3em; - font-family: Open Sans, Arial, sans-serif; + font-family: $font-sans; font-weight: 600; color: $color-grey-2; } @@ -65,7 +58,7 @@ code { kbd { border-radius: 3px; - font-family: Open Sans, Arial, sans-serif; + font-family: $font-sans; border: 1px solid $color-grey-2; border-color: rgba(0, 0, 0, 0.2); padding: 0.3em 0.5em; diff --git a/client/scss/settings/_variables.scss b/client/scss/settings/_variables.scss index f914f40cc4..ced9760292 100644 --- a/client/scss/settings/_variables.scss +++ b/client/scss/settings/_variables.scss @@ -6,9 +6,7 @@ // compiled CSS files are used. // */ -$static-root: '../../'; -$images-root: $static-root + 'wagtailadmin/images/'; -$font-root: '../../wagtailadmin/fonts/'; +$images-root: '../images/'; // grid settings $grid-columns: 12; @@ -97,8 +95,7 @@ $system-color-link-text: LinkText; $system-color-button-text: ButtonText; // Fonts -$font-sans: Open Sans, Arial, sans-serif; -$font-serif: Roboto Slab, Georgia, serif; +$font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; // Legacy icon font, to be removed in the near future. $font-wagtail-icons: wagtail; diff --git a/client/scss/tools/_mixins.fonts.scss b/client/scss/tools/_mixins.fonts.scss deleted file mode 100644 index eceaeaf899..0000000000 --- a/client/scss/tools/_mixins.fonts.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* -NB: Due to Wagtail's browser support the following @font-face formats are required: -- WOFF2 For modern browsers - -This example is all we need now: - -@font-face { - font-family: 'MyWebFont'; - src: url('myfont.woff2') format('woff2'); -} - -See https://css-tricks.com/snippets/css/using-font-face/ for more information. - -*/ - -@mixin webfont($fontname, $filestub, $weight, $style:normal) { - @font-face { - font-family: '#{$fontname}'; - src: url('#{$font-root}#{$filestub}.woff2') format('woff2'); - font-weight: $weight; - font-style: $style; - } -} diff --git a/client/src/components/CommentApp/main.scss b/client/src/components/CommentApp/main.scss index 502ed36d3c..2cc11ccfff 100644 --- a/client/src/components/CommentApp/main.scss +++ b/client/src/components/CommentApp/main.scss @@ -40,7 +40,7 @@ $box-padding: 10px; } textarea { - font-family: 'Open Sans', sans-serif; + font-family: $font-sans; margin: 0; padding: 10px; width: 100%; @@ -140,7 +140,7 @@ $box-padding: 10px; top: 30px; right: 30px; z-index: 50; - font-family: 'Open Sans', sans-serif; + font-family: $font-sans; pointer-events: none; } diff --git a/client/src/components/CommentApp/utils/storybook.tsx b/client/src/components/CommentApp/utils/storybook.tsx index 33aa3f0aba..1f88d334ac 100644 --- a/client/src/components/CommentApp/utils/storybook.tsx +++ b/client/src/components/CommentApp/utils/storybook.tsx @@ -20,9 +20,6 @@ import { defaultStrings } from '../main'; import CommentComponent from '../components/Comment/index'; -// Requires Wagtail static to be built -import '../../../../../wagtail/admin/static/wagtailadmin/css/core.css'; - export function RenderCommentsForStorybook({ store, author, diff --git a/client/src/components/Draftail/Draftail.scss b/client/src/components/Draftail/Draftail.scss index a6aaad1715..375067564a 100644 --- a/client/src/components/Draftail/Draftail.scss +++ b/client/src/components/Draftail/Draftail.scss @@ -12,7 +12,7 @@ $draftail-editor-background: transparent; $draftail-toolbar-radius: 3px; $draftail-toolbar-icon-size: 1em; -$draftail-editor-font-family: $font-serif; +$draftail-editor-font-family: $font-sans; @import '../../../../node_modules/draft-js/dist/Draft'; @import '../../../../node_modules/draftail/lib/index'; diff --git a/client/src/components/Hallo/_halloeditor.scss b/client/src/components/Hallo/_halloeditor.scss index f528cf1283..11cdad2ac8 100644 --- a/client/src/components/Hallo/_halloeditor.scss +++ b/client/src/components/Hallo/_halloeditor.scss @@ -1,5 +1,5 @@ .halloeditor { - font-family: $font-serif; + font-family: $font-sans; padding-top: 4em; min-height: 50px; overflow: hidden; diff --git a/client/src/components/StreamField/scss/_variables.scss b/client/src/components/StreamField/scss/_variables.scss index 46c38edf97..7f5fe3192b 100644 --- a/client/src/components/StreamField/scss/_variables.scss +++ b/client/src/components/StreamField/scss/_variables.scss @@ -33,4 +33,4 @@ $screen-xs-max: 799px !default; $screen-sm-min: 800px !default; $screen-l-min: 1075px !default; $add-panel-gutter: 8px !default; -$font-sans: 'Open Sans', sans-serif !default; +$font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji" !default; diff --git a/client/webpack.config.js b/client/webpack.config.js index 146b98555b..e50bff4d14 100644 --- a/client/webpack.config.js +++ b/client/webpack.config.js @@ -1,19 +1,20 @@ const path = require('path'); +const CopyPlugin = require('copy-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // Generates a path to the output bundle to be loaded in the browser. -const getOutputPath = (app, filename) => { - let appLabel = `wagtail${app}`; - - // Exceptions - if (app === 'documents') { - appLabel = 'wagtaildocs'; - } else if (app === 'contrib/table_block') { - appLabel = 'table_block'; - } else if (app === 'contrib/typed_table_block') { - appLabel = 'typed_table_block'; +const getOutputPath = (app, folder, filename) => { + const exceptions = { + 'documents': 'wagtaildocs', + 'contrib/table_block': 'table_block', + 'contrib/typed_table_block': 'typed_table_block', + 'contrib/styleguide': 'wagtailstyleguide', + 'contrib/modeladmin': 'wagtailmodeladmin', } - return path.join('wagtail', app, 'static', appLabel, 'js', filename); + const appLabel = exceptions[app] || `wagtail${app}`; + + return path.join('wagtail', app, 'static', appLabel, folder, filename); }; // Mapping from package name to exposed global variable. @@ -25,7 +26,9 @@ const exposedDependencies = { 'draft-js': 'DraftJS', }; -module.exports = function exports() { +module.exports = function exports(env, argv) { + const isProduction = argv.mode === 'production'; + const entrypoints = { 'admin': [ 'collapsible', @@ -83,7 +86,7 @@ module.exports = function exports() { moduleNames.forEach(moduleName => { entry[moduleName] = { import: [`./client/src/entrypoints/${appName}/${moduleName}.js`], - filename: getOutputPath(appName, moduleName) + '.js', + filename: getOutputPath(appName, 'js', moduleName) + '.js', }; // Add polyfills to all bundles except userbar @@ -96,11 +99,41 @@ module.exports = function exports() { }); } + const sassEntry = {}; + sassEntry[getOutputPath('admin', 'css', 'core')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'core.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/404')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', '404.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/account')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'account.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/compare-revisions')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'compare-revisions.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/home')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'home.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/login')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'login.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/page-editor')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'page-editor.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/report')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'report.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-edit')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'workflow-edit.scss'); + sassEntry[getOutputPath('admin', 'css', 'layouts/workflow-progress')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'layouts', 'workflow-progress.scss'); + // sassEntry[getOutputPath('admin', 'css', 'normalize')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'css', 'normalize.css'); + sassEntry[getOutputPath('admin', 'css', 'panels/draftail')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'draftail.scss'); + sassEntry[getOutputPath('admin', 'css', 'panels/hallo')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'hallo.scss'); + sassEntry[getOutputPath('admin', 'css', 'panels/streamfield')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'panels', 'streamfield.scss'); + sassEntry[getOutputPath('admin', 'css', 'sidebar')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'sidebar.scss'); + sassEntry[getOutputPath('admin', 'css', 'userbar')] = path.resolve('wagtail', 'admin', 'static_src', 'wagtailadmin', 'scss', 'userbar.scss'); + sassEntry[getOutputPath('documents', 'css', 'add-multiple')] = path.resolve('wagtail', 'documents', 'static_src', 'wagtaildocs', 'scss', 'add-multiple.scss'); + sassEntry[getOutputPath('images', 'css', 'add-multiple')] = path.resolve('wagtail', 'images', 'static_src', 'wagtailimages', 'scss', 'add-multiple.scss'); + sassEntry[getOutputPath('images', 'css', 'focal-point-chooser')] = path.resolve('wagtail', 'images', 'static_src', 'wagtailimages', 'scss', 'focal-point-chooser.scss'); + sassEntry[getOutputPath('users', 'css', 'groups_edit')] = path.resolve('wagtail', 'users', 'static_src', 'wagtailusers', 'scss', 'groups_edit.scss'); + sassEntry[getOutputPath('contrib/styleguide', 'css', 'styleguide')] = path.resolve('wagtail', 'contrib', 'styleguide', 'static_src', 'wagtailstyleguide', 'scss', 'styleguide.scss'); + sassEntry[getOutputPath('contrib/modeladmin', 'css', 'index')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'index.scss'); + sassEntry[getOutputPath('contrib/modeladmin', 'css', 'breadcrumbs_page')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'breadcrumbs_page.scss'); + sassEntry[getOutputPath('contrib/modeladmin', 'css', 'choose_parent_page')] = path.resolve('wagtail', 'contrib', 'modeladmin', 'static_src', 'wagtailmodeladmin', 'scss', 'choose_parent_page.scss'); + sassEntry[getOutputPath('contrib/typed_table_block', 'css', 'typed_table_block')] = path.resolve('wagtail', 'contrib', 'typed_table_block', 'static_src', 'typed_table_block', 'scss', 'typed_table_block.scss'); + return { - entry: entry, + entry: { + ...entry, + ...sassEntry, + }, output: { path: path.resolve('.'), - publicPath: '/static/js/' + publicPath: '/static/', }, resolve: { extensions: ['.ts', '.tsx', '.js'], @@ -116,6 +149,26 @@ module.exports = function exports() { externals: { jquery: 'jQuery', }, + + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + new CopyPlugin({ + patterns: [ + { from: 'wagtail/admin/static_src/', to: 'wagtail/admin/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/documents/static_src/', to: 'wagtail/documents/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/embeds/static_src/', to: 'wagtail/embeds/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/images/static_src/', to: 'wagtail/images/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/search/static_src/', to: 'wagtail/search/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/snippets/static_src/', to: 'wagtail/snippets/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/users/static_src/', to: 'wagtail/users/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/contrib/settings/static_src/', to: 'wagtail/contrib/settings/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + { from: 'wagtail/contrib/modeladmin/static_src/', to: 'wagtail/contrib/modeladmin/static/', globOptions: { ignore: ['**/{app,scss}/**', '*.{css,txt}'] } }, + ], + }), + ], + module: { rules: [ { @@ -123,6 +176,37 @@ module.exports = function exports() { loader: 'ts-loader', exclude: /node_modules/, }, + { + // Legacy support for font icon loading, to be removed. + test: /\.(woff)$/i, + generator: { + emit: false, + filename: 'wagtailadmin/fonts/[name][ext]', + }, + }, + { + test: /\.(svg)$/i, + type: 'asset/inline', + }, + { + test: /\.(scss|css)$/, + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: [ + "autoprefixer", + "cssnano", + ] + } + }, + }, + 'sass-loader' + ], + }, ].concat(Object.keys(exposedDependencies).map((name) => { const globalName = exposedDependencies[name]; @@ -148,7 +232,7 @@ module.exports = function exports() { splitChunks: { cacheGroups: { vendor: { - name: getOutputPath('admin', 'vendor'), + name: getOutputPath('admin', 'js', 'vendor'), chunks: 'initial', minChunks: 2, reuseExistingChunk: true, @@ -158,7 +242,7 @@ module.exports = function exports() { }, // See https://webpack.js.org/configuration/devtool/. - devtool: 'source-map', + devtool: isProduction ? false : 'eval-cheap-module-source-map', // For development mode only. watchOptions: { diff --git a/docs/contributing/css_guidelines.rst b/docs/contributing/css_guidelines.rst index 8657571eda..b31a5c4e58 100644 --- a/docs/contributing/css_guidelines.rst +++ b/docs/contributing/css_guidelines.rst @@ -3,35 +3,6 @@ CSS coding guidelines Our CSS is written in `Sass `_, using the SCSS syntax. -Compiling -~~~~~~~~~ - -The SCSS source files are compiled to CSS using the -`gulp `_ build system. -This requires `Node.js `_ to run. -To install the libraries required for compiling the SCSS, -run the following from the Wagtail repository root: - -.. code-block:: console - - $ npm install --no-save - - -To compile the assets, run: - -.. code-block:: console - - $ npm run build - - -Alternatively, the SCSS files can be monitored, -automatically recompiling when any changes are observed, by running: - -.. code-block:: console - - $ npm start - - Linting and formatting SCSS ~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/docs/contributing/developing.rst b/docs/contributing/developing.rst index 1e6a5b2af9..4692e752e0 100644 --- a/docs/contributing/developing.rst +++ b/docs/contributing/developing.rst @@ -268,7 +268,7 @@ The audit also states which parts of Wagtail have and haven’t been tested, how Compiling static assets ~~~~~~~~~~~~~~~~~~~~~~~ -All static assets such as JavaScript, CSS, images, and fonts for the Wagtail admin are compiled from their respective sources by ``gulp``. The compiled assets are not committed to the repository, and are compiled before packaging each new release. Compiled assets should not be submitted as part of a pull request. +All static assets such as JavaScript, CSS, images, and fonts for the Wagtail admin are compiled from their respective sources by ``webpack``. The compiled assets are not committed to the repository, and are compiled before packaging each new release. Compiled assets should not be submitted as part of a pull request. To compile the assets, run: diff --git a/gulpfile.js/config.js b/gulpfile.js/config.js deleted file mode 100644 index 5acfaa2290..0000000000 --- a/gulpfile.js/config.js +++ /dev/null @@ -1,45 +0,0 @@ -var path = require('path'); - -var srcDir = 'static_src'; -var destDir = 'static'; - -var App = function(dir, options) { - this.dir = dir; - this.options = options || {}; - this.appName = this.options.appName || path.basename(dir); - this.sourceFiles = path.join('.', this.dir, srcDir); -}; -App.prototype = Object.create(null); -App.prototype.scssIncludePaths = function() { - return [this.sourceFiles]; -}; -App.prototype.scssSources = function() { - // Assume that any scss we care about is always within the expected - // "appname/static_url/appname/scss/" folder. - // NB: this requires the user to adhere to sass's underscore prefixing - // to tell the compiler what files are includes. - return path.join(this.sourceFiles, this.appName, '/scss/**/*.scss') -}; - -// All the Wagtail apps that contain static files -var apps = [ - new App(path.join('wagtail', 'admin'), {'appName': 'wagtailadmin'}), - new App(path.join('wagtail', 'documents'), {'appName': 'wagtaildocs'}), - new App(path.join('wagtail', 'embeds'), {'appName': 'wagtailembeds'}), - new App(path.join('wagtail', 'images'), {'appName': 'wagtailimages'}), - new App(path.join('wagtail', 'search'), {'appName': 'wagtailsearch'}), - new App(path.join('wagtail', 'snippets'), {'appName': 'wagtailsnippets'}), - new App(path.join('wagtail', 'users'), {'appName': 'wagtailusers'}), - new App(path.join('wagtail', 'contrib', 'styleguide'), {'appName': 'wagtailstyleguide'}), - new App(path.join('wagtail', 'contrib', 'settings'), {'appName': 'wagtailsettings'}), - new App(path.join('wagtail', 'contrib', 'modeladmin'), {'appName': 'wagtailmodeladmin'}), - new App(path.join('wagtail', 'contrib', 'typed_table_block'), {'appName': 'typed_table_block'}), -]; - -module.exports = { - apps: apps, - srcDir: srcDir, - destDir: destDir, - // Determines whether the pipeline is used in production or dev mode. - isProduction: process.env.NODE_ENV === 'production', -}; diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js deleted file mode 100644 index f88a978526..0000000000 --- a/gulpfile.js/index.js +++ /dev/null @@ -1,7 +0,0 @@ -require('./tasks/fonts'); -require('./tasks/images'); -require('./tasks/scripts'); -require('./tasks/styles'); -require('./tasks/build'); -require('./tasks/watch'); -require('./tasks/default'); \ No newline at end of file diff --git a/gulpfile.js/lib/rename-src-to-dest-scss.js b/gulpfile.js/lib/rename-src-to-dest-scss.js deleted file mode 100644 index a2d3a35038..0000000000 --- a/gulpfile.js/lib/rename-src-to-dest-scss.js +++ /dev/null @@ -1,20 +0,0 @@ -var path = require('path'); -var rename = require('gulp-rename'); -var config = require('../config'); - -/** - * Returns a configured gulp-rename to pipe from asset sources to dest. - * Usage: .pipe(renameSrcToDestScss()) - */ -var renameSrcToDestScss = function(log) { - return rename(function(filePath) { - if (log) console.log(filePath.dirname + path.sep + filePath.basename + filePath.extname); - filePath.dirname = filePath.dirname.replace( - path.sep + config.srcDir + path.sep, - path.sep + config.destDir + path.sep - ).replace(path.sep + "scss", path.sep + "css"); - if (log) console.log(filePath.dirname); - }); -}; - -module.exports = renameSrcToDestScss; diff --git a/gulpfile.js/lib/rename-src-to-dest.js b/gulpfile.js/lib/rename-src-to-dest.js deleted file mode 100644 index 14e465031e..0000000000 --- a/gulpfile.js/lib/rename-src-to-dest.js +++ /dev/null @@ -1,19 +0,0 @@ -var path = require('path'); -var rename = require('gulp-rename'); -var config = require('../config'); - -/** - * Returns a configured gulp-rename to pipe from asset sources to dest. - * Usage: .pipe(renameSrcToDest()) - */ -var renameSrcToDest = function(log) { - return rename(function(filePath) { - if (log) console.log(filePath.dirname + path.sep + filePath.basename + filePath.extname); - filePath.dirname = filePath.dirname.replace( - path.sep + config.srcDir + path.sep, - path.sep + config.destDir + path.sep); - if (log) console.log(filePath.dirname); - }); -}; - -module.exports = renameSrcToDest; diff --git a/gulpfile.js/lib/simplyCopy.js b/gulpfile.js/lib/simplyCopy.js deleted file mode 100644 index f421ad5239..0000000000 --- a/gulpfile.js/lib/simplyCopy.js +++ /dev/null @@ -1,24 +0,0 @@ -var gulp = require('gulp'); -var gutil = require('gulp-util'); -var path = require('path'); -var config = require('../config'); -var renameSrcToDest = require('../lib/rename-src-to-dest'); - -/* - * Simple copy task - just copoes files from the source to the destination, - * with no compilation, minification, or other intelligence. - */ -var simpleCopyTask = function(glob) { - return function() { - var sources = config.apps.map(function(app) { - return path.join(app.sourceFiles, app.appName, glob); - }); - - return gulp.src(sources, {base: '.'}) - .pipe(renameSrcToDest()) - .pipe(gulp.dest('.')) - .on('error', gutil.log); - }; -}; - -module.exports = simpleCopyTask; diff --git a/gulpfile.js/tasks/build.js b/gulpfile.js/tasks/build.js deleted file mode 100644 index 4764f45544..0000000000 --- a/gulpfile.js/tasks/build.js +++ /dev/null @@ -1,3 +0,0 @@ -var gulp = require('gulp'); - -gulp.task('build', gulp.series('styles', 'scripts', 'images', 'fonts')); diff --git a/gulpfile.js/tasks/default.js b/gulpfile.js/tasks/default.js deleted file mode 100644 index 1156c18568..0000000000 --- a/gulpfile.js/tasks/default.js +++ /dev/null @@ -1,3 +0,0 @@ -var gulp = require('gulp'); - -gulp.task('default', gulp.series('build', 'watch')); diff --git a/gulpfile.js/tasks/fonts.js b/gulpfile.js/tasks/fonts.js deleted file mode 100644 index 5dcdfeeb75..0000000000 --- a/gulpfile.js/tasks/fonts.js +++ /dev/null @@ -1,4 +0,0 @@ -var gulp = require('gulp'); -var simpleCopyTask = require('../lib/simplyCopy'); - -gulp.task('fonts', simpleCopyTask('fonts/**/*')); diff --git a/gulpfile.js/tasks/images.js b/gulpfile.js/tasks/images.js deleted file mode 100644 index a3db1ede87..0000000000 --- a/gulpfile.js/tasks/images.js +++ /dev/null @@ -1,4 +0,0 @@ -var gulp = require('gulp'); -var simpleCopyTask = require('../lib/simplyCopy'); - -gulp.task('images', simpleCopyTask('images/**/*')); diff --git a/gulpfile.js/tasks/scripts.js b/gulpfile.js/tasks/scripts.js deleted file mode 100644 index 9efd48d260..0000000000 --- a/gulpfile.js/tasks/scripts.js +++ /dev/null @@ -1,4 +0,0 @@ -var gulp = require('gulp'); -var simpleCopyTask = require('../lib/simplyCopy'); - -gulp.task('scripts', simpleCopyTask('js/**/*')); diff --git a/gulpfile.js/tasks/styles.js b/gulpfile.js/tasks/styles.js deleted file mode 100644 index cdf41e95da..0000000000 --- a/gulpfile.js/tasks/styles.js +++ /dev/null @@ -1,84 +0,0 @@ -var path = require('path'); -var gulp = require('gulp'); -var sass = require('gulp-dart-sass'); -var postcss = require('gulp-postcss'); -var autoprefixer = require('autoprefixer'); -var cssnano = require('cssnano'); -var postcssCustomProperties = require('postcss-custom-properties'); -var postcssCalc = require('postcss-calc'); -var sourcemaps = require('gulp-sourcemaps'); -var size = require('gulp-size'); -var config = require('../config'); -var simpleCopyTask = require('../lib/simplyCopy'); -var renameSrcToDest = require('../lib/rename-src-to-dest'); -var renameSrcToDestScss = require('../lib/rename-src-to-dest-scss'); -var gutil = require('gulp-util'); - -var flatten = function(arrOfArr) { - return arrOfArr.reduce(function(flat, more) { - return flat.concat(more); - }, []); -}; - -var autoprefixerConfig = { - cascade: false, -}; - -var cssnanoConfig = { - discardUnused: { - fontFace: false, - }, - zindex: false, -}; - -// Copy all assets that are not CSS files. -gulp.task('styles:assets', simpleCopyTask('css/**/!(*.css)')); - -gulp.task('styles:css', function() { - var sources = config.apps.map(function(app) { - return path.join(app.sourceFiles, app.appName, 'css/**/*.css'); - }); - - return gulp.src(sources, {base: '.'}) - .pipe(postcss([ - cssnano(cssnanoConfig), - autoprefixer(autoprefixerConfig), - ])) - .pipe(renameSrcToDest()) - .pipe(size({ title: 'Vendor CSS' })) - .pipe(gulp.dest('.')) - .on('error', gutil.log); -}); - -// For Sass files, -gulp.task('styles:sass', function () { - // Wagtail Sass files include each other across applications, - // e.g. wagtailimages Sass files will include wagtailadmin/sass/mixins.scss - // Thus, each app is used as an includePath. - var includePaths = flatten(config.apps.map(function(app) { return app.scssIncludePaths(); })); - - // Not all files in a directory need to be compiled, so each app defines - // its own Sass files that need to be compiled. - var sources = flatten(config.apps.map(function(app) { return app.scssSources(); })); - - return gulp.src(sources, {base: '.'}) - .pipe(config.isProduction ? gutil.noop() : sourcemaps.init()) - .pipe(sass({ - errLogToConsole: true, - includePaths: includePaths, - outputStyle: 'expanded' - }).on('error', sass.logError)) - .pipe(postcss([ - cssnano(cssnanoConfig), - autoprefixer(autoprefixerConfig), - postcssCustomProperties(), - postcssCalc(), - ])) - .pipe(size({ title: 'Wagtail CSS' })) - .pipe(config.isProduction ? gutil.noop() : sourcemaps.write()) - .pipe(renameSrcToDestScss()) - .pipe(gulp.dest(".")) - .on('error', gutil.log); -}); - -gulp.task('styles', gulp.series('styles:sass', 'styles:css', 'styles:assets')); diff --git a/gulpfile.js/tasks/watch.js b/gulpfile.js/tasks/watch.js deleted file mode 100644 index 97b8800474..0000000000 --- a/gulpfile.js/tasks/watch.js +++ /dev/null @@ -1,40 +0,0 @@ -var gulp = require("gulp"); -var path = require("path"); -var config = require("../config"); - -const paths = config.apps.reduce( - (_, app) => ({ - "styles:sass": [ - ...(_["styles:sass"] || []), - path.join(app.sourceFiles, "*/scss/**"), - ], - "styles:css": [ - ...(_["styles:css"] || []), - path.join(app.sourceFiles, "*/css/**"), - ], - scripts: [...(_["scripts"] || []), path.join(app.sourceFiles, "*/js/**")], - images: [...(_["images"] || []), path.join(app.sourceFiles, "*/images/**")], - fonts: [...(_["fonts"] || []), path.join(app.sourceFiles, "*/fonts/**")], - }), - {} -); - -paths["styles:sass"] = [...paths["styles:sass"], "./client/**/*.scss"]; - -var gulpOptions = { - cwd: path.resolve("."), -}; - -/* - * Watch - Watch files, trigger tasks when they are modified - */ -gulp.task( - "watch", - gulp.series("build", function (cb) { - gulp.watch(paths["styles:sass"], gulpOptions, gulp.series("styles:sass")); - gulp.watch(paths["styles:css"], gulpOptions, gulp.series("styles:css")); - gulp.watch(paths["scripts"], gulpOptions, gulp.series("scripts")); - gulp.watch(paths["images"], gulpOptions, gulp.series("images")); - gulp.watch(paths["fonts"], gulpOptions, gulp.series("fonts")); - }) -); diff --git a/package.json b/package.json index ee8437f78c..a71009a2c9 100644 --- a/package.json +++ b/package.json @@ -119,16 +119,10 @@ "whatwg-fetch": "^2.0.3" }, "scripts": { - "build": "npm run gulp:prod:build && npm run webpack:prod:build", - "dist": "NODE_ENV=production npm run build", - "watch": "npm-run-all --parallel gulp:dev:watch webpack:dev:watch", - "start": "npm run watch", - "gulp:dev:watch": "gulp watch", - "gulp:prod:build": "gulp build", - "webpack:dev:watch": "webpack --config ./client/webpack.config.js --mode development --progress --watch", - "webpack:prod:build": "webpack --config ./client/webpack.config.js --mode production", + "start": "webpack --config ./client/webpack.config.js --mode development --progress --watch", + "build": "webpack --config ./client/webpack.config.js --mode production", "fix:js": "eslint --ext .js,.ts,.tsx --fix ./", - "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives ./", + "lint:js": "eslint --ext .js,.ts,.tsx --report-unused-disable-directives --max-warnings 16 ./client", "lint:css": "stylelint **/*.scss", "lint": "npm run lint:js && npm run lint:css", "test": "npm run test:unit", diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bold.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bold.woff2 deleted file mode 100755 index 0adfc88405..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bold.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bolditalic.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bolditalic.woff2 deleted file mode 100755 index 30681a3384..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-bolditalic.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-italic.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-italic.woff2 deleted file mode 100755 index 1ce91570b7..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-italic.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-light.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-light.woff2 deleted file mode 100755 index c944650b77..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-light.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-lightitalic.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-lightitalic.woff2 deleted file mode 100755 index fb48916c08..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-lightitalic.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-regular.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-regular.woff2 deleted file mode 100755 index 923bf34b9e..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-regular.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibold.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibold.woff2 deleted file mode 100755 index dd766213a7..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibold.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibolditalic.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibolditalic.woff2 deleted file mode 100755 index 0a5960596a..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/opensans-semibolditalic.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-bold.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-bold.woff2 deleted file mode 100644 index 126a60b11c..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-bold.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-regular.woff2 b/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-regular.woff2 deleted file mode 100644 index a7657715e6..0000000000 Binary files a/wagtail/admin/static_src/wagtailadmin/fonts/robotoslab-regular.woff2 and /dev/null differ diff --git a/wagtail/admin/static_src/wagtailadmin/scss/_helpers.scss b/wagtail/admin/static_src/wagtailadmin/scss/_helpers.scss deleted file mode 100644 index 33658a0d6e..0000000000 --- a/wagtail/admin/static_src/wagtailadmin/scss/_helpers.scss +++ /dev/null @@ -1,2 +0,0 @@ -@import '../../../../../client/scss/settings'; -@import '../../../../../client/scss/tools'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss index f15fa76425..ffdb9b4646 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/404.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .page404__bg { position: fixed; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss index 18f1f0049d..67a54ad2bf 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/compare-revisions.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; $color-addition-dark: #a6f3a6; $color-addition-light: #ebffeb; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss index 5a1b3b433e..22869ff1c7 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/home.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; h1 { font-weight: 300; @@ -93,7 +94,7 @@ header { } span { - font-family: $font-serif; + font-family: $font-sans; display: block; font-size: 4em; line-height: 1em; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss index d9708c7edc..360d9f4e60 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/login.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; // overrides default nice padding defined in variables.scss $desktop-nice-padding: 100px; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss index 121d69a6eb..f8f3039d98 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/page-editor.scss @@ -2,7 +2,8 @@ @use "sass:map"; @use "sass:math"; -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .page-editor { .content-wrapper { @@ -448,7 +449,7 @@ textarea, .halloeditor { font-size: 2em; - font-family: $font-serif; + font-family: $font-sans; } } diff --git a/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss b/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss index 8d1c2a6097..3744aba575 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/layouts/report.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .report { display: grid; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss b/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss index 4561fd3ac8..4addb9b3b0 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/panels/draftail.scss @@ -1,3 +1,3 @@ -@import 'wagtailadmin/scss/helpers'; - +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; @import '../../../../../../client/src/components/Draftail/Draftail'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/panels/hallo.scss b/wagtail/admin/static_src/wagtailadmin/scss/panels/hallo.scss index 58204bf860..2af89baba6 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/panels/hallo.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/panels/hallo.scss @@ -1,3 +1,3 @@ -@import 'wagtailadmin/scss/helpers'; - +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; @import '../../../../../../client/src/components/Hallo/Hallo'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss b/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss index d0a4fd2aa9..273ecd840e 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/panels/streamfield.scss @@ -1,2 +1,3 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; @import '../../../../../../client/src/components/StreamField/StreamField'; diff --git a/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss b/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss index 6310743146..4a1bddbd67 100644 --- a/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss +++ b/wagtail/admin/static_src/wagtailadmin/scss/userbar.scss @@ -3,7 +3,8 @@ @use "sass:math"; @use "sass:string"; -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../client/scss/settings'; +@import '../../../../../client/scss/tools'; // ============================================================================= // Variables @@ -45,47 +46,6 @@ $positions: ( ) ); - -// ============================================================================= -// Fonts -// ============================================================================= - -@include webfont(Open Sans, opensans-regular, 400, normal); - -@font-face { - font-family: 'wagtail'; - src: url('#{$font-root}wagtail.woff') format('woff'); - font-weight: normal; - font-style: normal; -} - -// ============================================================================= -// Namespaced icon component -// ============================================================================= - -// TODO: refactor into a mixin -.#{$namespace}-icon:before { - @include icon(); -} - - -// ============================================================================= -// Icons -// ============================================================================= - -@each $icon, $content in $icons { - .#{$namespace}-icon-#{$icon}:before { - content: string.quote(#{$content}); - } -} - -@each $icon, $content in $icons-after { - .#{$namespace}-icon-#{$icon}:after { - content: string.quote(#{$content}); - } -} - - // ============================================================================= // Wagtail userbar proper // ============================================================================= @@ -172,7 +132,7 @@ $positions: ( margin: 0; min-width: 210px; visibility: hidden; - font-family: 'Open Sans', sans-serif; + font-family: $font-sans; font-size: 14px; box-sizing: border-box; padding-left: 0; @@ -229,7 +189,7 @@ $positions: ( overflow: hidden; transition-duration: 0.125s; transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1); - font-family: 'Open Sans', sans-serif; + font-family: $font-sans; font-size: 16px !important; text-decoration: none !important; diff --git a/wagtail/admin/templates/wagtailadmin/icons/draft.svg b/wagtail/admin/templates/wagtailadmin/icons/draft.svg index 7667a3e3d4..5e6fb9333b 100755 --- a/wagtail/admin/templates/wagtailadmin/icons/draft.svg +++ b/wagtail/admin/templates/wagtailadmin/icons/draft.svg @@ -1,3 +1,3 @@ - DRAFT + DRAFT diff --git a/wagtail/admin/tests/test_userbar.py b/wagtail/admin/tests/test_userbar.py index 94c6a79ec2..fba3632ec5 100644 --- a/wagtail/admin/tests/test_userbar.py +++ b/wagtail/admin/tests/test_userbar.py @@ -146,7 +146,7 @@ class TestUserbarModeration(TestCase, WagtailTestUtils): expected_approve_html = """
-
+
@@ -156,7 +156,7 @@ class TestUserbarModeration(TestCase, WagtailTestUtils): expected_reject_html = """
-
+
diff --git a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss index 325b59269d..9f85f0be1e 100644 --- a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss +++ b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/breadcrumbs_page.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .breadcrumb { margin: -1.2em 0 2em; diff --git a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss index 8f14f53757..9fcf1351c9 100644 --- a/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss +++ b/wagtail/contrib/modeladmin/static_src/wagtailmodeladmin/scss/index.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .content header { margin-bottom: 0; @@ -85,7 +86,7 @@ } a { - font-family: Open Sans,Arial,sans-serif; + font-family: $font-sans; border-radius: 3px; width: auto; line-height: 1.2em; diff --git a/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss b/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss index 8e18776307..42cacc38da 100644 --- a/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss +++ b/wagtail/contrib/styleguide/static_src/wagtailstyleguide/scss/styleguide.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; section { border-top: 1px solid $color-grey-3; diff --git a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss index 19f9418f80..a177aa83b6 100644 --- a/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss +++ b/wagtail/contrib/typed_table_block/static_src/typed_table_block/scss/typed_table_block.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../../client/scss/settings'; +@import '../../../../../../client/scss/tools'; .typed-table-block { &__wrapper { diff --git a/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss b/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss index 97db3bbe1a..3aa438d273 100644 --- a/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss +++ b/wagtail/documents/static_src/wagtaildocs/scss/add-multiple.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../client/scss/settings'; +@import '../../../../../client/scss/tools'; .replace-file-input { display: inline-block; diff --git a/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss b/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss index c196d8f80d..348521660a 100644 --- a/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss +++ b/wagtail/images/static_src/wagtailimages/scss/add-multiple.scss @@ -1,6 +1,7 @@ @use "sass:color"; -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../client/scss/settings'; +@import '../../../../../client/scss/tools'; .replace-file-input { display: inline-block; diff --git a/wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss b/wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss index 729e3e4598..507f0d8461 100644 --- a/wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss +++ b/wagtail/images/static_src/wagtailimages/scss/focal-point-chooser.scss @@ -1,4 +1,5 @@ -@import 'wagtailadmin/scss/helpers'; +@import '../../../../../client/scss/settings'; +@import '../../../../../client/scss/tools'; .focal-point-chooser { position: relative;