Can dev confirm the theme build instructions work?

• Moving from old ways to new generative ways.
• Moving to use Single Directory Components (SDC) which all components are listed in Varbase Components →
• Moving to support Storybook in Varbase Projects

• No support for sub-themes, Only Generate your custom cloned theme from the Vartheme BS5 Starter kit.

Do not think of Varbase BS5 as a base theme, It is an empty starter kit theme. It only has template mapping with Single Directory Components.

Varbase Docs 10.0.x or 9.0.x
https://www.youtube.com/watch?v=W823l9KgKNY

Please make sure you're consulting the Varbase Docs for version 10.0.x. It's important to keep in mind that the documentation is still a work in progress.

→

Only for testing!. Do not use in production or live sites yet!.

No Update/Upgrade path at this time yet!. An update path will be managed when the stable Varbase 10.0.0 goes out!.

OK, that set of instructions worked fine. This ticket can be reclassified as a "Vartheme_bs5 ReadMe" error since those instructions are not accurate.

Thank you.

Thanks, Joseph for following up
if you do have time, Please, post your suggested changes over the README.md file.
You can do that by Create issue fork, you can edit and commit easy from the WEB IDE in the browser.
If not time, for sure we will follow up to update it.

Thanks for the notice on the.
.

Rajab, I will make edit suggestions via a, issue fork.

I have made great progress in understanding how to override sass variables in the scss files. And the theme build instructions you pointed me to work great.

One area that is also new to me and not yet working for me is how to "theme" (for lack of a better word) a component. For instance the media hero slider is its own component in the modules directory structure and it has its own scss and css files over there.

In the my new theme directory where I am having success with theme edits of a more general site-wide nature, I see a section in my scss/_my_theme-variables.scss where it seems to allow me to customize the colors of the hero media slider content background but they are not taking effect.

./scss/_bucks_gop-variables.scss

// Custom Varbase Hero slider media variables.
// -----------------------------------------------------------------------------

// Text color.
//$hero-title-text-color: #fff;
//$hero-brief-text-color: #fff;
//$hero-link-text-color: #fff;
$hero-title-text-color: $my-custom-color;
$hero-brief-text-color: $my-custom-color;
$hero-link-text-color:  $my-custom-color;


// Font sizes with responsive sizes.
$hero-xlarge-title-font-size-xs: 3.3rem;
$hero-xlarge-title-font-size-sm: 3.3rem;
$hero-xlarge-title-font-size-md: 57px;
$hero-xlarge-title-font-size-lg: 57px;
$hero-xlarge-title-font-size-xl: 57px;

// Hero content style.
$hero-content-hover-opacity: 0.7;
//$hero-content-background-color1: rgb(0,0,0);
//$hero-content-background-color2: rgba(0,0,0,0.3);
$hero-content-background-color1: $my-custom-color;
$hero-content-background-color2: rgba(x, y, z,0.9);

Do you have any hints on how to pull in component theme edits when the scss and css are in the modules directory rather than my theme directory?

I want to change the color of the hero content text elements and put a semi-transparent background color on the content block.

Joseph, Thanks for having a deeper work with Varbase ~10.0.0

Varbase 10 still 10.0.0-alpha2
Doing a WIP on Varbase Components in
https://www.drupal.org/project/issues/varbase_components?categories=All →

All Varbase modules and front-end elements will have SDC components.

Varbase Media Hero Slider will have it's own SDC components
Better to add the media-hero-slider component in Varbase Components

but for now you can manage in two ways:
1. Copy the library (SCSS files, library desc in .libraries.yml compile and load the library in the .info.yml )
2. Create a custom media-hero-slider SDC component ..

Which started at organisms/media-hero-slider

But It needs work. Moving move all things from https://git.drupalcode.org/project/varbase_heroslider_media/-/blob/10.0.... in it and include it in the node--varbase-heroslider-media.html.twig

You do not know. It could be ready in 1 week, As we are working on
📌 Optimization round to add more Storybook stories for structured components Fixed
Our product owner asked for it today too.