Theme inheritance. Problem with apostrophe and quotes.

[Sogl]

trafficstars

Tried to inherit Typhoon theme and got an error:

TypeError
Argument 1 passed to Mexitek\PHPColors\Color::__construct() must be of the type string, null given, 
called in /Users/artyom/domains/mydomain/user/plugins/color-tools/color-tools.php on line 65

/**
     * Instantiates the class with a HEX value
     * @param string $hex
     * @throws Exception
     */
    public function __construct(string $hex). <---- this line
    {
        $color = self::sanitizeHex($hex);
        $this->_hex = $color;
        $this->_hsl = self::hexToHsl($color);
        $this->_rgb = self::hexToRgb($color);
    }

Console:

➜  mydomain bin/plugin devtools new-theme

 Enter Theme Name:
 > My Typhoon

 Enter Theme Description:
 > Customizing Typhoon

 Enter Developer Name:
 > Artyom Mezin

 Enter GitHub ID (can be blank):
 > 7556290

 Enter Developer Email:
 > [email protected]

 Please choose an option:
  [pure-blank ] Basic Theme using Pure.css
  [tailwind   ] Basic Theme using tailwind.css
  [inheritance] Inherit from another theme
  [copy       ] Copy another theme
 > inheritance

 Please choose a theme to extend:
  [0] quark
  [1] typhoon
 > 1


SUCCESS theme My Typhoon -> Created Successfully

Path: /Users/artyom/domains/mydomain/user/themes/my-typhoon

Ok. Cache cleared, browser refreshed, error still exist... found another issue: https://github.com/getgrav/grav/issues/3549

Decided to compare typhoon.yaml and my-typhoon.yaml to find differences and that's it:

Normal typhoon.yaml color block:

colors:                                                             # Doesn't work for modular as the CSS is page-level
  text_style: 'text-gray-600 dark:text-gray-400'                    # Text color (Any valid Tailwind color)
  brightness_lighter: '20'                                          # The percentage amount brighter for *-primary-lighter colors
  brightness_darker: '20'                                           # The percentage amount darker for *-primary-darker colors
  primary: '#3893F8'                                                # The primary accent color used throughout the page (Any valid Tailwind color)

Bad my-typhoon.yaml color block:

colors:                                                             # Doesn't work for modular as the CSS is page-level
  text_style: 'text-gray-600 dark:text-gray-400'                    # Text color (Any valid Tailwind color)
  brightness_lighter: '20'                                          # The percentage amount brighter for *-primary-lighter colors
  brightness_darker: '20'                                           # The percentage amount darker for *-primary-darker colors
  primary: '#3893F8'                                                # The primary accent color used throughout the page (Any valid Tailwind color)

Why does it use ' istead of '?

Same about quotes:

" istead of "

[rhukster]

That's odd, i think this might be a windows thing. I've never had such issues on a mac. Can you confirm you ran this on windows?

[Sogl]

Mac OS Catalina 10.15.7

[rhukster]

oh i see you are using inheritance. Have you read these docs: https://getgrav.org/premium/typhoon/docs#theme-modification ?

Inheritance is not recommended with Typhoon because of its features and complexity. Some intrepid user managed to do it, and provided some caveats and notes for our documentation, but again we definitely DON't recommend it. You should use Typhoon as the base and COPY it. That way you get all the features, and can customize freely.

I'm not sure how that relates to your issue with the quotes and things changing though, but definitely worth trying a COPY rather than an INHERIT and see if that does resolve the issue for you.

[Sogl]

I already corrected for the necessary quotes and everything worked. I have read the docs and I am aware of the risks and potential problems.

However, there is an inheritance problem in this plugin, which is why I wrote this issue.

[rhukster]

I will investigate further. thanks.

[FizCS3]

I just ran into this same issue with using devtools plugin to create a new-theme by inheritance, running on linux... it replacing ' and " with html codes in the theme .yaml file, as described above.

The issue seems to be this file of the plugin code in particular: user/plugins/devtools/components/theme/inheritance/theme.yaml.twig

Inside, there is a line where it is printing the config: {{ component.config }} If we add twig's raw filter onto the above, as in: {{ component.config|raw }} It copies the config verbatim, without translating any of those " and ' to html codes. @rhukster Perhaps this is the only code fix needed here.

As a side note, with the above I was attempting to inherit Typhoon (for which this issue actually does not seem specific to this theme), and these days thankfully it is not discouraged to do so by inheritance, with instructions herein: https://getgrav.org/premium/typhoon/docs#create-a-custom-theme-from-typhoon