Closed bobbingwide closed 2 years ago
There are a couple of colours in the Gutenberg palette which are no good on a white background. These are very-light-gray ( #EEEEEE ) and white. Get rid of these and a one or two more. Initially I just want to be able to see all the lines in Slog compare with 13 lines - base and the top 12 plugins.
Now that I've implemented palette.json
it should now be possible to define different "themes" simply by adding the new theme's colors to the JSON file and rebuilding the block.
I can try this with Rainbow: Violet, Indigo, Blue Green Yellow Orange Red. and the new WordPress admin colours.
With the upgrade to Chartjs v3.1.0, and the change to defining the color palettes in a JSON file, it's now necessary to implement a control to allow the user to set the opacity. Whether or not we need a separate opacity for borders and lines needs to be investigated.
Screenshot from v2.9.4
Screenshot from v3.1.0 with opacity 1
Screenshot from v3.1.0 with opacity 0.5
In order to implement the opacity parameter I needed to be able to apply the alpha
value to the original hex value obtained from palettes.json
.
Gutenberg uses a function called rgba()
, which is implemented in
https://github.com/WordPress/gutenberg/blob/trunk/packages/components/src/utils/colors.js
But I don't know how to use it.
I failed to import rgba from @wordpress/components
import { rgba } from '@wordpress/components';
So I copied the code and tried to import tinycolor
from the tinycolor2
NPM package.
import { tinycolor } from 'tinycolor2';
Same result. The block crashes with Uncaught TypeError: Object(...) is not a function
const { r, g, b } = tinycolor( hexValue ).toRgb();
The pragmatic solution was to set the r,g,b values like this:
const r = parseInt(hexValue.slice(1, 3), 16);
const g = parseInt(hexValue.slice(3, 5), 16);
const b = parseInt(hexValue.slice(5, 7), 16);
It would be nice to be able to find out how to use tinycolor2 since it's less picky about the format of the hex number.
This code expects it to be #rrggbb
.
So I copied the code and tried to import
tinycolor
from thetinycolor2
NPM package.
I used npm install tinycolor2 --save
.
This updated package.json
, adding
"tinycolor2": "^1.4.2"
to dependencies
.
In Gutenberg's package.json
it's different
"@types/tinycolor2": "1.4.2",
in devDependencies
.
I tried npm install @types/tinycolor2 --save-dev
but that didn't work either.
Stumped again.
Some improvements to colour palette selection
Theme
to Color palette
( US English )palette.json
.Also consider changing the names of the colour palettes: Gutenberg, Chart, Visualizer and Tertiary
I've implemented a single opacity RangeControl to set the opacity between 0 and 1.0. Note: For some chart types, such as Pie, it's a bit silly setting the opacity to anything less than 0.1
Current version on wordpress.org is v0.4.1
Over a number of Slack conversations with @AndrewMLeonard we created 4 different colour themes ( or palettes) to use in the charts.
Here's a screen capture showing examples of each chart type currently implemented and each colour palette.
Requirements
Proposed solution