Recommended way to extend Snowdog/blank using Frontools

[klaas_werkt]

Hi,

I'm making use of the Snowdog/blank SASS theme with Frontools. For the custom theme I want to apply on my shop I extend from the Snowdog/blank theme, using the following themes.json:

{
  "snow-blank": {
    "src": "vendor/snowdog/theme-blank-sass",
    "dest": "pub/static/frontend/Snowdog/blank",
    "locale": ["nl_NL"]
  },
  "klaas-default": {
    "src": "app/design/frontend/Klaas/default",
    "dest": "pub/static/frontend/Klaas/default",
    "locale": ["nl_NL"],
    "localeOverwrites": true,
    "parent": "snow-blank",
    "postcss": ["plugins.autoprefixer()"]
  }
}

When I select the appropriate theme in the Magento configuration (Klaas/default) and run:

gulp styles

.. all is sweet. There's the blank SASS theme.

My current approach (this doesn't seem right):

I copy:

vendor/snowdog/theme-blank-sass/styles/styles.scss

.. to my own theme:

app/design/frontend/Klaas/default/styles/styles.scss

.. and add some 'hooks' to apply customization, such as:

...

// Theme variables
@import 'variables';

// >> HOOK FOR VARIABLES
@import "custom-variables";

// Reset default styles with magento-reset
@include lib-magento-reset();

...

@import '../Magento_MultipleWishlist/styles/widgets';
@import '../Magento_VersionsCms/styles/widgets';

// >> HOOK FOR CUSTOM THEMING
@import 'extend';

 This sorta works, I get to override/add variables and add surplus SASS in:

app/design/frontend/Klaas/default/styles/_extend.scss

However, also when I have to apply custom styling on a certain module I have to copy (for example the Magento_Review module):

vendor/snowdog/theme-blank-sass/Magento_Review/styles/_module.scss

.. to my own theme and edit/extend this file.

My problem:

What is the recommended way to extend the Snowdog/blank theme and apply custom styling?

Am I doing it correctly already or is there a way to copy less code/styling directly from the Snowdog/blank theme?

[bambamboole]

I stand in front of the same problem.

Can you please provide a simple step by step solution for creating new theme which extends from snowdog/blank theme.

That would be nice

Thanks in advance

bambamboole

[mattgreenfield]

Thanks for raising this.

I am doing something similar, as well as creating blank `_child-extend-var.scss` and `_child-extend-patterns.scss' files so that my themes child (or the snowdog/blank grandchild theme if you like) can add styles.

But it just doesn't feel right.

An example child theme that follows best practices would be great.

[klaas_werkt]

Also, it seems it is not possible to simply change the default button color by changing a (theme-)variable. This is because the variables used in "styles\vendor\magento-ui\_buttons.scss" don't have the "!default" suffix on declaration as such:

$button__background: $color-gray-darken0 !default;

I suppose this needs to be added to all the variable declarations in "styles\vendor\magento-ui".

[mattgreenfield]

Yes, I found this too.

There is a pull request to do just that - https://github.com/SnowdogApps/magento2-theme-blank-sass/pull/142

I've merged it in to my fork.

[klaas_werkt]

I saw that one a tad late, and got working on the same thing. I've however made all settings available as variables in my pull-request and cleanup the internals of the _buttons.scss in magento-library and in "blocks". Please consider:

https://github.com/SnowdogApps/magento2-theme-blank-sass/pull/151

[klaas_werkt]

I'm going to look into the whole "_navigation.scss" as well ...

[Bartek Igielski]

Whole Magento UI looks the same, so it's complex problem.

[mattgreenfield]

The navigation vars would be good too.

It might be worth looking at this github issue - https://github.com/SnowdogApps/magento2-theme-blank-sass/issues/143

@Bartek Igielski - if there are many more of this variables that need doing, how do you feel about raising each one as a github issue and creating a 'milestone' to get them all done. Hopefully we will be able to reduce the amount of people duplicating fixes, and spread the work out a bit.

[klaas_werkt]

I think that, in order to have full control over most of the design using just theme-variables, first all magento-ui variables need to be separated from the magento-ui lib mixins.

I realize just now that this should exactly follow the current Less implementation, e.g: /lib/web/css/source/lib/variables/_buttons.less (something I failed to do on my pull-request for the button variables). This could be performed quite generically, starting from the less files. Do you agree that that is a good way to regenerate and improve the current implementation of the content of the magento-ui directory?