Codeinwp / Codeinwp/otter-blocks

Better defaults for accent colors / buttons

Open
#1,351 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
198
Forks
36
Avg merge
3d 4h
Merged PRs (30d)
30

Description

Following up to the recent discussions we had recently about better defaults in the context of color, here are some notes regarding current issues with blocks and inline color styles.

Progress bar block

The default accent color for the progress bar is hardcoded to #6adcfa
We need to use the theme's accent / link color if possible for this. For the gray (empty part) it would be great if we can have the link color on a 5-10% opacity

Screenshot 2022-11-28 at 12 33 59 PM


Circle counter block

The stroke color of the counter is also set as #3878ff
The other (lighter) empty half of the counter appears to be an opacity of the above value (i may be wrong).
In any case it would be good if these can inherit the theme's accent / link color.

For the empty part of the counter, we can have a 5-10% opacity of the link color.

Screenshot 2022-11-28 at 12 37 46 PM


Review Block buttons

The buttons in the review block should also inherit the theme's default button styles. Curently they are assigned the value of #ED6F57. The button text also appears underlined in the frontend, if there is something we can do about it it would be great.

Screenshot 2022-11-28 at 12 40 57 PM


Contact form buttons

The form buttons should also inherit theme default button styles.
Screenshot 2022-11-28 at 12 43 41 PM


Flip box button

Same applies for the button style of the Flip box. It should ideally default to the theme's button styles.
Screenshot 2022-11-28 at 12 44 43 PM


Plugin Card button and accent colors

Let's follow the same approach for the plugin card as well. There are inline colors of #4550ae so it woulc be great to inherit the theme's accent / link colors.

Additionally, there is an issue with the font families for this block. I see the serif font is not related to the theme styles at all. Can we have all the text styles inherit the theme's family?

Screenshot 2022-11-28 at 12 48 05 PM


Countdown block border color

By default, the border color of the countdowns has a #000 color assigned. By default, we want this to inherit the theme's Text color.

Screenshot 2022-11-28 at 12 52 09 PM


Let me know if the above make sense, and if you spot any other element that may have inline styles applied on it, feel free to add it in the list.

cc @Soare-Robert-Daniel @HardeepAsrani @mghenciu

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the Progress bar, Circle counter, Review, Contact form, Flip box, Plugin Card, and Countdown block entry points and inspect their inline colors, button styles, and font settings. Verify each block against the theme's accent, text, button, and font defaults, then confirm the listed blocks no longer impose those hardcoded styles.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.