@@ -36,7 +48,7 @@
SVG
{% set image_bg_logo_demo = {
variant: 'bg',
- src: paths.assets ~ '/logo.svg',
+ src: paths.images ~ '/logo.svg',
alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
} %}
@@ -48,7 +60,7 @@
PNG
{% set image_bg_astrogoat_demo = {
variant: 'bg',
- src: paths.assets ~ '/astrogoat.png',
+ src: paths.images ~ '/astrogoat.png',
alt: 'A friendly goat wearing a space helmet. The Astrogoat!',
} %}
diff --git a/source/default/_patterns/01-atoms/image/demo/images.yml b/source/default/_patterns/01-atoms/image/demo/images.yml
index 17938a73e0..bb037f4331 100644
--- a/source/default/_patterns/01-atoms/image/demo/images.yml
+++ b/source/default/_patterns/01-atoms/image/demo/images.yml
@@ -1,3 +1,9 @@
+image_demo_block:
+ title: 'Image'
+ text:
+ lead: 'Image HTML patterns.'
+ summary: 'The image pattern includes variants to cover most image use cases, including background images and
picture.'
+
image_primary_demo:
variant: 'primary'
src: ''
@@ -12,9 +18,3 @@ image_picture_demo:
style: ''
srcset: ['https://via.placeholder.com/100', 'https://via.placeholder.com/200', 'https://via.placeholder.com/400']
placeholder: false
-
-image_demo_block:
- title: 'Image'
- text:
- lead: 'Image HTML patterns.'
- summary: 'The image pattern includes variants to cover most image use cases, including background images and
picture.'
diff --git a/source/default/_patterns/01-atoms/image/index.js b/source/default/_patterns/01-atoms/image/index.js
index 1b8530c4ce..2edaa1e56e 100644
--- a/source/default/_patterns/01-atoms/image/index.js
+++ b/source/default/_patterns/01-atoms/image/index.js
@@ -12,6 +12,10 @@ import './_image.scss';
// Module template
import './_image.twig';
+import './_image--bg.twig';
+import './_image--picture.twig';
+import './_image--placeholder.twig';
+import './_image--primary.twig';
export const name = 'image';
diff --git a/source/default/_patterns/01-atoms/svg/_svg--icon.twig b/source/default/_patterns/01-atoms/svg/_svg--icon.twig
index 85c0f9f545..41c4826179 100644
--- a/source/default/_patterns/01-atoms/svg/_svg--icon.twig
+++ b/source/default/_patterns/01-atoms/svg/_svg--icon.twig
@@ -22,6 +22,6 @@
diff --git a/source/default/tokens/sass/non-printing/variables/_colors.scss b/source/default/tokens/sass/non-printing/variables/_colors.scss
index 06bf06d09c..5f4ebe08c2 100644
--- a/source/default/tokens/sass/non-printing/variables/_colors.scss
+++ b/source/default/tokens/sass/non-printing/variables/_colors.scss
@@ -79,6 +79,6 @@ Color Aliases
$color-aliases: (
'pink': map-get($primary-colors, 'pink'),
'goldenrod': map-get($primary-colors, 'goldenrod'),
- 'light': map_get($neutral-hues, 'lightest-gray'),
- 'dark': map_get($neutral-hues, 'darkest-gray'),
+ 'light': map-get($neutral-hues, 'lightest-gray'),
+ 'dark': map-get($neutral-hues, 'darkest-gray'),
);
diff --git a/source/default/tokens/sass/printing/_printing.scss b/source/default/tokens/sass/printing/_printing.scss
index a2015a96ce..5698b84100 100644
--- a/source/default/tokens/sass/printing/_printing.scss
+++ b/source/default/tokens/sass/printing/_printing.scss
@@ -26,7 +26,6 @@ are provided to this file via:
// Utility Classes
@import 'utilities/breakpoints';
-@import 'utilities/svg';
// Custom CSS-generating output
@import 'type';
diff --git a/source/default/tokens/sass/printing/utilities/_svg.scss b/source/default/tokens/sass/printing/utilities/_svg.scss
deleted file mode 100644
index 7cffa48d8f..0000000000
--- a/source/default/tokens/sass/printing/utilities/_svg.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Loop over every SVG and create a CSS class for it
-@each $icon in $svgicons {
- .icon--#{$icon} {
- @include sprite(#{$icon});
- display: inline-block;
- height: rem-calc(40px);
- width: rem-calc(40px);
- }
-}
-
-// Loop over every theme-color and create a CSS class to colorize it
-@each $color in map_keys($theme-colors) {
- .color-fill--#{$color} {
- color: theme-color(#{$color});
- }
-}
diff --git a/source/default/webpack.config.js b/source/default/webpack.config.js
index 14a05eaff3..2becf60057 100644
--- a/source/default/webpack.config.js
+++ b/source/default/webpack.config.js
@@ -3,7 +3,6 @@
*/
const path = require('path');
-const sassExportData = require('@theme-tools/sass-export-data');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');
const namespaces = require('./namespaces');
@@ -17,12 +16,6 @@ module.exports = {
{
loader: 'sass-loader',
options: {
- // Used to generate JSON about variables like colors, fonts
- // @TODO: move to app/pl
- functions: sassExportData({
- name: 'export_data',
- path: path.resolve(__dirname, '_data/'),
- }),
// ALL Sass partials will be provided with non-printing
// variables, mixins, and functions
data: '@import "~tokens/sass/non-printing/non-printing";',
@@ -46,6 +39,7 @@ module.exports = {
},
},
output: {
+ filename: 'images/spritemap.svg',
svg4everybody: true,
svgo: true,
},
diff --git a/webpack.particle.js b/webpack.particle.js
index b5c6b54c24..671ec1aec5 100644
--- a/webpack.particle.js
+++ b/webpack.particle.js
@@ -8,10 +8,6 @@
// Library Imports
const { ProgressPlugin, ProvidePlugin } = require('webpack');
-// Loaders
-const postcssPresetEnv = require('postcss-preset-env');
-const cssnano = require('cssnano');
-
// Plugins
const StyleLintPlugin = require('stylelint-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
@@ -59,20 +55,18 @@ module.exports = {
},
},
{
+ // PostCSS config at ./postcss.config.js
loader: 'postcss-loader',
options: {
sourceMap: true,
ident: 'postcss',
- plugins: () =>
- NODE_ENV === 'development'
- ? [postcssPresetEnv()] // Light processing for dev
- : [postcssPresetEnv(), cssnano()], // Heavy processing for prod
},
},
{
loader: 'resolve-url-loader',
options: {
sourceMap: true,
+ root: '',
},
},
{
@@ -103,7 +97,7 @@ module.exports = {
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
- name: '[name].[ext]?[hash]',
+ name: 'images/[name].[ext]?[hash]',
},
},
{
@@ -112,7 +106,7 @@ module.exports = {
{
loader: 'file-loader',
options: {
- name: 'fonts/[name].[ext]',
+ name: 'fonts/[name].[ext]?[hash]',
},
},
],