Skip to content

Read the settled brand variable names #794

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ilicfilip merged 5 commits into from
Oct 29, 2026
Merged

Read the settled brand variable names #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28d16d0
Read the settled brand variable names
ilicfilip Oct 28, 2026
ab06650
Give recommendation buttons the button radius
ilicfilip Oct 28, 2026
610a2b9
Draw the secondary button outline on its ::after layer
ilicfilip Oct 28, 2026
ab8103b
Remove the unused placeholder and dropdown text colors
ilicfilip Oct 28, 2026
c0d4ffe
Check the shared --prpl-* names in the pre-commit hook
ilicfilip Oct 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,10 @@ composer check-cs -- --warning-severity=6
composer phpstan
npm run lint:css
npm run lint:js

# Shared --prpl-* names: check against tokens.json in a your-branding checkout.
if [ -n "$YOUR_BRANDING_DIR" ]; then
node "$YOUR_BRANDING_DIR/tools/check-tokens.mjs" --plugin progress-planner=. || exit 1
else
echo "Token check skipped: set YOUR_BRANDING_DIR to a your-branding checkout."
fi
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,14 @@ composer phpstan # Run static analysis
composer lint # Check PHP syntax
```

### Pre-commit hook

`npm install` sets up the husky pre-commit hook: coding standards, PHPStan and the CSS/JS linters.
It also checks the shared `--prpl-*` names against `tokens.json` in
[your-branding](https://github.com/ProgressPlanner/your-branding) when `YOUR_BRANDING_DIR` points
at a checkout of it (`export YOUR_BRANDING_DIR=~/path/to/your-branding`). A name the plugin reads
must be listed there; without the variable the check is skipped.

## Branches on this repository

We use a couple of branches in this repository to keep things clean:
Expand Down
47 changes: 31 additions & 16 deletions assets/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
--prpl-padding: 20px;
--prpl-column-min-width: 22rem;
--prpl-max-columns: 3;
--prpl-border-radius: 8px;
--prpl-border-radius-big: calc(var(--prpl-border-radius) * 2);
--prpl-radius-paper: 8px;
--prpl-radius-button: 6px;
--prpl-border-radius-big: calc(var(--prpl-radius-paper) * 2);

--prpl-container-max-width: calc(var(--prpl-column-min-width) * var(--prpl-max-columns) + var(--prpl-gap) * (var(--prpl-max-columns) - 1) + var(--prpl-column-min-width));

Expand All @@ -35,7 +36,7 @@
color: var(--prpl-color-button-primary-text);
padding: 8px 16px;
text-decoration: none;
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
z-index: 100000;
}

Expand Down Expand Up @@ -70,7 +71,7 @@ body.toplevel_page_progress-planner {
Styles for the container of the page.
\*------------------------------------*/
.prpl-wrap {
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
padding: var(--prpl-settings-page-gap) var(--prpl-padding);
max-width: var(--prpl-container-max-width);
color: var(--prpl-color-text);
Expand Down Expand Up @@ -109,10 +110,18 @@ body.toplevel_page_progress-planner {

.prpl-wrap a {
color: var(--prpl-color-link);

&:visited {
color: var(--prpl-color-link-visited);
}
}

.prpl-wrap input[type="checkbox"] {
border-color: var(--prpl-color-selection-controls-inactive);
border-color: var(--prpl-color-selection-controls);

&:checked {
border-color: var(--prpl-color-selection-controls-active);
}
}

.prpl-wrap select {
Expand Down Expand Up @@ -227,7 +236,7 @@ button.prpl-info-icon {
/* color: var(--prpl-color-border); */
background-color: #fff;
border: 1px solid var(--prpl-color-ui-icon);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);

svg {
width: 1rem;
Expand Down Expand Up @@ -273,7 +282,7 @@ button.prpl-info-icon {
.prpl-widget-wrapper {
background-color: var(--prpl-background-paper);
border: 1px solid var(--prpl-color-border);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
padding: var(--prpl-padding);
min-width: 0;
min-height: 0;
Expand All @@ -283,7 +292,7 @@ button.prpl-info-icon {
hr {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border-top-color: var(--prpl-color-border);
border-top-color: var(--prpl-color-divider);
}

/* Force the last column to be the last column. */
Expand Down Expand Up @@ -347,7 +356,7 @@ button.prpl-info-icon {
line-height: 1.25;
box-shadow: none;
border: none;
border-radius: 6px;
border-radius: var(--prpl-radius-button);
transition: all 0.25s ease-in-out;
font-weight: 600;
text-align: center;
Expand All @@ -365,7 +374,7 @@ button.prpl-info-icon {
top: 0;
left: 0;
z-index: -1;
border-radius: 6px;
border-radius: var(--prpl-radius-button);
transition: all 0.25s ease-in-out;
}

Expand All @@ -392,19 +401,25 @@ button.prpl-info-icon {
.prpl-wrap button.prpl-button-secondary,
.prpl-wrap a.prpl-button-secondary,
#progress_planner_dashboard_widget_score a.prpl-button-secondary {
background: var(--prpl-color-selection-controls-inactive);
--prpl-button-secondary-tint: color-mix(in srgb, var(--prpl-color-button-secondary-border) 6%, var(--prpl-background-paper));
color: var(--prpl-color-button-secondary-text);
background: var(--prpl-background-paper);

/* The outline sits on ::after, which covers the button's own background. */
&::after {
background: var(--prpl-color-selection-controls-inactive);
background: var(--prpl-background-paper);
box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border);
}

&:not([disabled]):hover,
&:not([disabled]):focus {
background: var(--prpl-color-ui-icon);
box-shadow: 3px 3px 10px var(--prpl-color-ui-icon);
color: var(--prpl-color-button-secondary-text);
background: var(--prpl-button-secondary-tint);
box-shadow: none;

&::after {
background: var(--prpl-color-ui-icon);
background: var(--prpl-button-secondary-tint);
box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border);
}
}
}
Expand All @@ -429,7 +444,7 @@ button.prpl-info-icon {
.prpl-popover {
background: var(--prpl-background-paper);
border: 1px solid var(--prpl-color-border);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
padding: var(--prpl-padding);
font-weight: 400;
max-height: 82vh;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/dashboard-widgets/score.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

> div {
border: 1px solid var(--prpl-color-border);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
font-size: 0.875rem;
text-align: center;
padding-bottom: 1em;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/page-widgets/challenge.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
background-color: #fff;
border: 1px solid var(--prpl-color-border);
padding: var(--prpl-padding);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);

.prpl-button-primary {
margin-bottom: 0;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/page-widgets/content-activity.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
th,
td {
text-align: start;
border-top: 1px solid var(--prpl-color-border);
border-top: 1px solid var(--prpl-color-divider);
}
}

Expand Down
27 changes: 13 additions & 14 deletions assets/css/page-widgets/suggested-tasks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@
font-size: var(--prpl-font-size-small);
border-radius: 6px;
background-color: var(--prpl-background-alert-warning);
border: 1px solid var(--prpl-color-border-alert-warning);

.prpl-note-icon {
display: flex;
Expand All @@ -206,6 +207,7 @@
&.prpl-note-error {
color: var(--prpl-color-alert-error-text);
background-color: var(--prpl-background-alert-error);
border-color: var(--prpl-color-border-alert-error);
margin-bottom: 0;

order: 98; /* One less than the spinner. */
Expand Down Expand Up @@ -251,7 +253,7 @@
border: none;
color: var(--prpl-color-text);
font-weight: 600;
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-button);
background-color: var(--prpl-background-banner);
cursor: pointer;

Expand Down Expand Up @@ -315,9 +317,6 @@
align-items: center;
}

--prpl-input-green: #3bb3a6;
--prpl-input-gray: #8b99a6;

/* Hide the default input, because WP has it's own styles (which include pseudo-elements). */
.prpl-custom-checkbox input[type="checkbox"],
.prpl-custom-radio input[type="radio"] {
Expand Down Expand Up @@ -353,7 +352,7 @@
.prpl-custom-checkbox {

.prpl-custom-control {
border: 1px solid var(--prpl-input-gray);
border: 1px solid var(--prpl-color-selection-controls);
border-radius: 6px;
background: #fff;
}
Expand All @@ -362,14 +361,14 @@

/* Checkbox hover (off) */
&:hover + .prpl-custom-control {
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-color-selection-controls-active);
}

/* Checkbox checked (on) */
&:checked + .prpl-custom-control {
background: var(--prpl-input-green);
border-color: var(--prpl-input-green);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
background: var(--prpl-color-selection-controls-active);
border-color: var(--prpl-color-selection-controls-active);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-color-selection-controls-active);
}
}

Expand Down Expand Up @@ -398,7 +397,7 @@
.prpl-custom-radio {

.prpl-custom-control {
border: 1px solid var(--prpl-input-gray);
border: 1px solid var(--prpl-color-selection-controls);
border-radius: 50%;
background: #fff;
}
Expand All @@ -407,14 +406,14 @@
input[type="radio"] {

&:hover + .prpl-custom-control {
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-color-selection-controls-active);
}

/* Radio checked (on) */
&:checked + .prpl-custom-control {
background: var(--prpl-input-green);
border-color: var(--prpl-input-green);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-input-green);
background: var(--prpl-color-selection-controls-active);
border-color: var(--prpl-color-selection-controls-active);
box-shadow: 0 0 0 2px #f7f8fa, 0 0 0 3px var(--prpl-color-selection-controls-active);
}
}

Expand Down
3 changes: 2 additions & 1 deletion assets/css/page-widgets/todo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@

#todo-list-completed-delete-all-wrapper {
margin: 0.25rem 0.5rem 0.75rem 0.5rem;
border-top: 1px solid var(--prpl-color-border);
border-top: 1px solid var(--prpl-color-divider);
display: none;

#todo-list-completed-delete-all {
Expand Down Expand Up @@ -356,6 +356,7 @@
font-size: var(--prpl-font-size-small);
border-radius: 6px;
background-color: var(--prpl-background-alert-warning);
border: 1px solid var(--prpl-color-border-alert-warning);

.prpl-note-icon {
display: flex;
Expand Down
13 changes: 7 additions & 6 deletions assets/css/suggested-task.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@
font-weight: 700;
color: var(--prpl-text-point);
background-color: var(--prpl-background-point);
box-shadow: inset 0 0 0 0.8px var(--prpl-color-border-point);
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
Expand Down Expand Up @@ -262,7 +263,7 @@
margin-top: 0.5rem;
padding: 0.5rem;
background-color: #fff;
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
line-height: 1;
text-align: start;

Expand Down Expand Up @@ -291,17 +292,17 @@
margin-top: 0.75rem;

label {
border-top: 1px solid #dcdcde;
border-top: 1px solid var(--prpl-color-divider);

&:first-child {
border-top-left-radius: var(--prpl-border-radius);
border-top-right-radius: var(--prpl-border-radius);
border-top-left-radius: var(--prpl-radius-paper);
border-top-right-radius: var(--prpl-radius-paper);
border-top: none;
}

&:last-child {
border-bottom-left-radius: var(--prpl-border-radius);
border-bottom-right-radius: var(--prpl-border-radius);
border-bottom-left-radius: var(--prpl-radius-paper);
border-bottom-right-radius: var(--prpl-radius-paper);
}
}

Expand Down
2 changes: 1 addition & 1 deletion assets/css/upgrade-tasks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

#prpl-onboarding-tasks {
border: 1px solid var(--prpl-color-border);
border-radius: var(--prpl-border-radius);
border-radius: var(--prpl-radius-paper);
padding: var(--prpl-padding);
min-width: 0;
min-height: 0;
Expand Down
Loading
Loading