feat: add added the ability to customize the color of for each blocks

[Grougalorasalar]

The basics

• I validated my changes

The details

Resolves

Added the ability to customize the color of field_labels for each block.

Proposed Changes

Override applyColour for field_label and add colourFieldLabel in BlockStyle interface.

Reason for Changes

This provides a wider range of customization options, using colors such as white or yellow with field_labels written in black, for example. If the block is disabled, the text color is white.

Test Coverage

Change tests in theme_test.js file for include colourFieldLabel in expectedOutput.

Documentation

Update BlockStyle (add explanation of colourFieldLabel) and FieldLabe (add explanation of applyColour ) .

Additional Information

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[github-actions]

Welcome! It looks like this is your first pull request in Blockly, so here are a couple of tips:

• You can find tips about contributing to Blockly and how to
  validate your changes on our
  developer site.

• All contributors must sign the Google Contributor License
  Agreement (CLA). If the google-cla bot leaves a comment on this
  PR, make sure you follow the instructions.

• We use conventional commits
  to make versioning the package easier. Make sure your commit
  message is in the proper format
  or learn how to fix it.

• If any of the other checks on this PR fail, you can click on
  them to learn why. It might be that your change caused a test
  failure, or that you need to double-check the
  style guide.

Thank you for opening this PR! A member of the Blockly team will review it soon.

[BeksOmega]

Hello! I think you can do this with our current css selectors:

/* replace geras-renderer.classic-theme with your theme and renderer */
.geras-renderer.classic-theme .blocklyDisabled .blocklyText {
  fill: #000;
}

Does that solve your use-case?

[Grougalorasalar]

Yes, but if I would a black block and white block I need white text for the first block and black text for the second block. The goal of the PR is to have a large color palette for blocks, making them more legible by changing the text color. However, we could used this : https://www.w3.org/WAI/WCAG21/Techniques/general/G18 for automatic adaption text color but we have less possibilities color for the texts blocks.

[BeksOmega]

Yes, but if I would a black block and white block I need white text for the first block and black text for the second block. The goal of the PR is to have a large color palette for blocks, making them more legible by changing the text color. However, we could used this : https://www.w3.org/WAI/WCAG21/Techniques/general/G18 for automatic adaption text color but we have less possibilities color for the texts blocks.

That makes sense! But I think in general as a library we want to move away from doing styling changes in JavaScript and instead have people use CSS. This allows the browser to better optimize repaints, and makes our API more maintainable.

If we applied a css class to the block that was the block's block-style name, do you think you could achieve what you want with CSS?

[BeksOmega]

Yes, but if I would a black block and white block I need white text for the first block and black text for the second block. The goal of the PR is to have a large color palette for blocks, making them more legible by changing the text color. However, we could used this : https://www.w3.org/WAI/WCAG21/Techniques/general/G18 for automatic adaption text color but we have less possibilities color for the texts blocks.

That makes sense! But I think in general as a library we want to move away from doing styling changes in JavaScript and instead have people use CSS. This allows the browser to better optimize repaints, and makes our API more maintainable.

If we applied a css class to the block that was the block's block-style name, do you think you could achieve what you want with CSS?

Heya @Grougalorasalar Still definitely interested in your thoughts on this!

[BeksOmega]

Hello @Grougalorasalar I'm going to go ahead and close this as stale, but if you still have thoughts feel free to reopen this or file an issue!