Provide an Olivero sub-theme creation tool

I did manually testing of the patch #11. It applied cleanly for me.
The Olivero sub theme is appearing as expected for me.

Testing steps:

• Created an olivero_subtheme folder under themes/custom in Drupal 9.3.x-dev version.
• Created olivero_subtheme.info.yml and olivero_subtheme.libraries.yml files in olivero_subtheme folder and write proper dependencies in these files.
• Created css and js folders and empty css and js files respectively.
• Enabled the olivero_subtheme in appearance section and enabled it as admin theme as well.
• The theme appearance is looking exactly like base Olivero theme.

Adding few screenshots of olivero subtheme.

Yeah, it was the logo image not present in subtheme folder. But it is in base theme (Olivero) folder. So I think it should get the logo from base theme.
As after placing the logo image in subtheme folder, it is appearing now.

@ressa
You are right. I did not used command line instead I did the subtheme setup manually. After following command line, I can see the files safely copied in subtheme. Thanks for the #16.

I have a site in production with Olivero to activate (Drupal 9.2.2). I need to modify some css. Should I use https://github.com/mherchel/olivero-subtheme or this patch ? Thank you

@ressa I just tested the patch, but I failed to create the subtheme

i dont understand because i added the patch to composer.json

@rassa I had applied the patch as I usually do, but there is no script in the folder

@ressa I will test tomorrow because it is late, but a patch is applied normally in the composer.json

This is a good practice explained in the drupal documentation.

On projects following the recommended webroot structure for core, applying core patches with cweagans/composer-patches needs to happen using the 'p2' patch level (i.e. to reach inside the webroot directory when the project composer.json is a level above that). Patches that simply add files can technically apply at any level, but that can mean the files get created in the wrong place. To ensure they get applied in the right place, add this to your composer.json, in the 'extra' section, i.e. next to the 'patches' section:

...
    "composer-exit-on-patch-failure": true,
    "patchLevel": {
      "drupal/core": "-p2",
      "drupal/contrib-module1": "-p1",
      "drupal/contrib-module2": "-p1",
    }
    "patches": {
...

It's worth listing any contrib modules that you are patching, to explicitly use 'p1', to help verify that patches are applied correctly.

You're very welcome - I'm glad to help! Thanks for adding that to that documentation. What needs to happen to progress this? Any particular kind of reviews of anything in particular, from anyone in particular?

I haven't had time to actually have a go myself; the project that I'm interested in this for isn't a paying client so I can only give it so much of my time. Sorry! For me, #3086514: Investigate use of the changing color themes for Olivero is what I'm really after; this sub-theming tool would be a useful alternative if that doesn't progress.

Thanks, I confirm that the file is now created. However I have this message which prevents using the script. It's probably not a Drupal problem, but what if you have any idea ? I am in a shared hosting, I do not have access to sudo

uid170869@od-8ca868:~/sites/www.example.fr$ core/scripts/create-subtheme.sh subtheme_olivero
bash: core/scripts/create-subtheme.sh: Permission denied

@zenimagine If you don't have control over your file permissions / access in your shared hosting, it's best to run the script on a local development copy of your site. Then you can review the changes and upload / push them to your shared hosting. Scripts like this (including composer!) aren't usually recommended to be ran in production environments or on remote hosting that you can't control.

ok thanks, i succeeded. The sub-theme is in the themes/my_theme folder, shouldn't it be in themes/custom/my_theme ?

ok this is different from Drupal 8. One last question, I want to change the color blue all over the website. How to do this ? I want to replace #2494db by #1f71b8

Thank you, but it's complicated to apply a change everywhere on the site, brand, link, button, ...

I wait for a next update with this functionality, as simple as Bootstrap.

Is it normal that the responsive images do not work with Olivéro and the sub themes ?

/admin/config/media/responsive-image-style

The sub-theme does not appear in responsive styles and responsive images does not even work with the base theme.

@ressa Thanks for the patch, it works. But the adaptive images are not consistent with the configuration.

@ressa I just sent you a private message to show you the problem on a clean install.

Fabulous. Wish I had seen this earlier.

For others, the build script that copies the core Olivero into a new, custom theme (not a subtheme) described here fails. Some of the differences are outlined in this issue.

The workaround to that is to perform the alternative manual steps. But this is certainly the preferred way, from my point of view.

I'll try this now.

I added the patch from #58 to composer on a 9.2.8 project and it applied successfully. Then, from the project root here's what I saw:

% web/core/scripts/create-subtheme.sh aarc
zsh: permission denied: web/core/scripts/create-subtheme.sh
% chmod +x web/core/scripts/create-subtheme.sh
% web/core/scripts/create-subtheme.sh aarc    
That theme name looks good, continuing ...

web/core/scripts/create-subtheme.sh: line 73: ${themename^}: bad substitution
sed: 1: "themes/aarc/MACHINENAME ...": undefined label 'hemes/aarc/MACHINENAME.info.yml'
sed: 1: "themes/aarc/MACHINENAME ...": undefined label 'hemes/aarc/MACHINENAME.breakpoints.yml'
sed: 1: "themes/aarc/MACHINENAME ...": undefined label 'hemes/aarc/MACHINENAME.info.yml'
Theme 'aarc' created successfully in themes/aarc ...

Then I ran the instructions for enabling the theme and pulled up the home page. It gave me the error ".../templates/html.twig.php" file is missing. Sure enough, the entire templates directory is empty except for a README.md.

Using Drupal 9.2.8: I've applied the patch #66 using composer, but the create-subtheme.sh script is created in a new subdirectory of core:
web/core/core/scripts

But it turns out I had not changed the patchLevel as described in the issue summary above.

In my case the patch was not being applied at all using Composer and I needed to do "composer require cweagans/composer-patches".

Maybe it's worth adding that to the documentation.
I just saw that it is already there.

+++ b/core/scripts/create-subtheme.sh
@@ -0,0 +1,106 @@
+if [ -d web/core/themes/olivero ]

not sure new bash script is good idea when there's core's tool https://www.drupal.org/node/3206389

@ressa I did! What is the recommended way to customize CSS? I read the instructions here but there is no "package.json" neither in my subtheme or Olivero itself. I can only find a package.json if I clone the theme from its repo.

I have applied patch from comment #66 and ended up with the same "bad substitution" result from comment #65. Here is the output from my console:

$ chmod +x web/core/scripts/create-subtheme.sh
$ web/core/scripts/create-subtheme.sh newtheme2022
That theme name looks good, continuing ...
web/core/scripts/create-subtheme.sh: line 73: ${themename^}: bad substitution
Theme 'olivero2022' created successfully in themes/olivero2022 ...

As far as I can see everything works fine, but I'm missing the *.pcss files, the scripts to run the code compilation, and maybe some instruction in the README.md file about how this process should be done. Creating a sub-theme and not being able to adjust the values of the variables doesn't seem right to me, am I missing an step here?

Thank you so much to everybody for the hard work.

I kept working on the theme until I was able to compile the *.pcss.css files. As I mentioned before a sub-theme loose its value if you are not able to change the values of its parent variable. For clarification I'm going to refer to the parent theme as "olivero" and the sub-theme as "subtheme". Here are all the changes I had to do in order to be able to compile the source code:

1. Set node version and yarn version

According to Drupal'spackage.json we need to use Node v12 and Classic Yarn.

  ...
  "engines": {
    "yarn": ">= 1.6",
    "node": ">= 12.0"
  },
  ...

The easiest way I found to get this set was via Node Version Manager, go to subtheme's root folder and run the following commands:

$ nvm use v12 > .nvmrc
$ yarn set version classic
$ node --version && yarn --version
v12.22.10
1.23.0-20220130.1630

2. Bringing files into the subtheme

You are going to need a few files in order to be able to compile the source code, follow these steps:

1. Replace subtheme/css folder with olivero/css folder.
2. Copy olivero/layout/html.html.twig file into subtheme/layout/ and delete line #43 {% include '@olivero/includes/preload.twig' with { olivero_path: olivero_path } only %}. This line load a bunch of font files that you may not want to use.
3. Copy /core/package.json file into subtheme/ and delete from line #11 & yarn build:ckeditor5, and from line #12 & yarn watch:ckeditor5.
4. Copy /core/scripts into subtheme/. You don't need all the scripts but I haven't gone through the clean up process yet at this point.

3. Load the right libraries

Now you need to make sure you load the libraries from subtheme and not olivero's libraries, in order to do that subtheme.info.yml and subtheme.libraries.yml have to look as follow:

subtheme.info.yml

  name: 'subtheme'
  type: theme
  base theme: olivero
  description: 'An Olivero based sub-theme.'
  package: 'Olivero'
  version: 1.x
  core_version_requirement: ^8 || ^9 || ^10
  regions:
    header: Header
    primary_menu: 'Primary menu'
    secondary_menu: 'Secondary menu'
    hero: 'Hero (full width)'
    highlighted: Highlighted
    breadcrumb: Breadcrumb
    social: Social Bar
    content_above: Content Above
    content: Content
    sidebar: 'Sidebar'
    content_below: 'Content Below'
    footer_top: 'Footer Top'
    footer_bottom: 'Footer Bottom'
  libraries:
    # - subtheme/global-styling
    - subtheme/global-scripts
  # Override the system.theme.css file with our version in the ./css subdirectory:
  # https://www.drupal.org/docs/theming-drupal/adding-stylesheets-css-and-javascript-js-to-a-drupal-theme#override-extend
  libraries-override:
    olivero/global-styling: subtheme/global-styling
    olivero/feed: subtheme/feed
    olivero/navigation-secondary: subtheme/navigation-secondary
    olivero/progress: subtheme/progress
    system/base:
      css:
        component:
          /core/themes/olivero/css/components/ajax-progress.module.css: css/components/ajax-progress.module.css
          /core/themes/olivero/css/components/autocomplete-loading.module.css: css/components/autocomplete-loading.module.css
    subtheme/global-styling:
      js:
        js/checkbox.js: /core/themes/olivero/js/checkbox.js
        js/navigation-utils.js: /core/themes/olivero/js/navigation-utils.js  

subtheme.libraries.yml

  global-styling:
  version: VERSION
  css:
    base:
      css/base/fonts.css: {}
      css/base/variables.css: {}
      css/base/base.css: {}
      css/base/utility.css: {}
    layout:
      css/layout/layout.css: {}
      css/layout/grid.css: {}
      css/layout/layout-content-narrow.css: {}
      css/layout/layout-content-medium.css: {}
      css/layout/layout-footer.css: {}
      css/layout/region.css: {}
      css/layout/region-content.css: {}
      css/layout/region-hero.css: {}
      css/layout/region-secondary-menu.css: {}
      css/layout/social-bar.css: {}
      css/layout/views.css: {}
    component:
      css/components/block.css: {}
      css/components/breadcrumb.css: {}
      css/components/embedded-media.css: {}
      css/components/footer.css: {}
      css/components/button.css: {}
      css/components/container-inline.module.css: {}
      css/components/fieldset.css: {}
      css/components/field.css: {}
      css/components/form.css: {}
      css/components/form-boolean.css: {}
      css/components/form-text.css: {}
      css/components/form-textarea.css: {}
      css/components/form-select.css: {}
      css/components/header-buttons-mobile.css: {}
      css/components/header-navigation.css: {}
      css/components/header-site-branding.css: {}
      css/components/header-sticky-toggle.css: {}
      css/components/hero.css: {}
      css/components/links.css: {}
      css/components/messages.css: {}
      css/components/navigation/nav-button-mobile.css: {}
      css/components/node.css: {}
      css/components/node-teaser.css: {}
      css/components/page-title.css: {}
      css/components/site-header.css: {}
      css/components/skip-link.css: {}
      css/components/pager.css: {}
      css/components/table.css: {}
      css/components/text-content.css: {}
      css/components/tabledrag.css: {}
      css/components/wide-image.css: {}

  js:
    js/checkbox.js: {}
    js/navigation-utils.js: {}

  dependencies:
    - core/drupal.element.closest
    - core/drupal.element.matches
    - core/drupal.nodelist.foreach
    - core/drupal
    - core/once
    - core/tabbable

feed:
  version: VERSION
  css:
    theme:
      css/components/feed.css: {}

navigation-secondary:
  version: VERSION
  css:
    component:
      css/components/navigation/nav-secondary.css: {}

progress:
  version: VERSION
  css:
    component:
      css/components/progress.css: {}

global-scripts:
  js:
    js/scripts.js: {}
  dependencies:
    - core/drupal
    - core/jquery

4. Time to compile

You should be set up, go to subtheme's root folder and run the following command:

yarn watch

If I didn't missed anything you should now be able to see something like this in your command line:

  yarn run v1.23.0-20220130.1630
  $ yarn watch:css & yarn watch:js
  $ node ./scripts/css/postcss-watch.js
  $ cross-env BABEL_ENV=legacy node ./scripts/js/babel-es6-watch.js
  [03:32:20] Watching './**/*.es6.js' for changes.
  [03:32:21] Watching './**/*.pcss.css' for changes.  

I hope this help others, feedback are welcome, and it would be nice to have all these task integrated in the script.

This should leverage the key added in #3206219: Allow configuring which theme is used as a starterkit theme and postponed on #3206217: Allow starterkit themes to control how the theme is generated. Once we have the latter, everything just needs to exist in the StarterKit class.

#3206217: Allow starterkit themes to control how the theme is generated has landed. Let's create a Drupal\olivero\StarterKit class and make this possible!

I see. It seems like Drupal core is moving against promoting sub-themes from Drupal core due to backward compatibility requirements. I'm for opening a different ticket for starter kit and letting this one be. I just don't think a script for subtheming will make it.

Closing this in favor of #3302625: Allow Olivero to be cloned by Starterkit theme generator, so we can focus on the ability to clone Olivero.