How to copy Luma Layered Navigation to Blank Theme

Question

I have created a custom theme in Magento 2.3 which is extended from the blank theme.

I would like to use the luma layered navigation.

I have copied Magento_LayeredNavigation folder from /vendor/magento/theme-frontend-luma to my theme path app/design/frontend/vendor/theme/ and ran the static content deploy.

I then receive the following error message:

main.CRITICAL: variable @filter-quantity is undefined in file magento-install/var/view_preprocessed/pub/static/frontend/vendor/theme/en_GB/Magento_LayeredNavigation/css/source/_module.less in _module.less on line 105, column 29 103| 104| &-value { 105| .lib-css(color, @filter-quantity); 106| } 107| 108| &-options { {"exception":"[object] (Magento\Framework\View\Asset\ContentProcessorException(code: 0): variable @filter-quantity is undefined in file magento-install/var/view_preprocessed/pub/static/frontend/vendor/theme/en_GB/Magento_LayeredNavigation/css/source/_module.less in _module.less on line 105, column 29 103| 104| &-value { 105| .lib-css(color, @filter-quantity); 106| } 107| 108| &-options { at magento-install/vendor/magento/framework/Css/PreProcessor/Adapter/Less/Processor.php:97)"} []

Answer 1

I created a _extend.less and copied the relevant css from luma theme into it that was needed from the following files.

/vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_toolbar.less

@toolbar-background: transparent;

/vendor/magento/theme-frontend-luma/Magento_Theme/web/css/source/_module.less

@filter-title-background-color: @color-gray94;

@filter-link: @color-gray-darken4;

@filter-link-hover: darken(@filter-link, 30%);

@filter-quantity: @color-gray46;

Inserted the _extend.less into app/design/frontend/vendor/theme/web/css/source and ran the static content deploy.