From 28d16d0705b87aafa2cfa8efbd52983df5590921 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 28 Oct 2026 09:50:52 +0100 Subject: [PATCH 1/5] Read the settled brand variable names Papers and buttons use --prpl-radius-paper / --prpl-radius-button. Checkboxes and toggles use --prpl-color-selection-controls (unchecked) and -active (checked). The middle score band and "published" use graph color 2, "deleted" graph color 4. Dividers, visited links, score text, the points badge border and the streak and content badge gauges get their own names. Alerts get a 1px border. Topic, top-task and gauge backgrounds are 10% of their color, the primary hover 10% darker. The secondary button becomes the outline button. Nine names nothing read are gone. Co-Authored-By: Claude Opus 5.5 --- assets/css/admin.css | 46 ++++++++++++------- assets/css/dashboard-widgets/score.css | 2 +- assets/css/page-widgets/challenge.css | 2 +- assets/css/page-widgets/content-activity.css | 2 +- assets/css/page-widgets/suggested-tasks.css | 27 ++++++----- assets/css/page-widgets/todo.css | 3 +- assets/css/suggested-task.css | 13 +++--- assets/css/upgrade-tasks.css | 2 +- assets/css/variables-color.css | 44 ++++++++++-------- assets/css/web-components/prpl-tooltip.css | 2 +- assets/css/welcome.css | 6 +-- assets/js/web-components/prpl-gauge.js | 6 +-- .../admin/class-dashboard-widget-score.php | 2 +- .../admin/widgets/class-activity-scores.php | 4 +- views/page-widgets/badge-streak-content.php | 2 +- .../page-widgets/badge-streak-maintenance.php | 2 +- views/page-widgets/content-activity.php | 4 +- 17 files changed, 95 insertions(+), 74 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index 58938bef6..d45534e12 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -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)); @@ -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; } @@ -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); @@ -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 { @@ -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; @@ -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; @@ -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. */ @@ -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; @@ -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; } @@ -392,19 +401,24 @@ 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); + box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border); &::after { - background: var(--prpl-color-selection-controls-inactive); + background: var(--prpl-background-paper); } &: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: inset 0 0 0 1px var(--prpl-color-button-secondary-border); &::after { - background: var(--prpl-color-ui-icon); + background: var(--prpl-button-secondary-tint); + box-shadow: 0 0 0 1px var(--prpl-color-button-secondary-border); } } } @@ -429,7 +443,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; diff --git a/assets/css/dashboard-widgets/score.css b/assets/css/dashboard-widgets/score.css index e1939c4c8..cab238389 100644 --- a/assets/css/dashboard-widgets/score.css +++ b/assets/css/dashboard-widgets/score.css @@ -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; diff --git a/assets/css/page-widgets/challenge.css b/assets/css/page-widgets/challenge.css index 5807a744d..61fd3c73c 100644 --- a/assets/css/page-widgets/challenge.css +++ b/assets/css/page-widgets/challenge.css @@ -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; diff --git a/assets/css/page-widgets/content-activity.css b/assets/css/page-widgets/content-activity.css index 454812464..fb3d6bdab 100644 --- a/assets/css/page-widgets/content-activity.css +++ b/assets/css/page-widgets/content-activity.css @@ -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); } } diff --git a/assets/css/page-widgets/suggested-tasks.css b/assets/css/page-widgets/suggested-tasks.css index 8fa3f87a7..12cd28070 100644 --- a/assets/css/page-widgets/suggested-tasks.css +++ b/assets/css/page-widgets/suggested-tasks.css @@ -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; @@ -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. */ @@ -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-paper); background-color: var(--prpl-background-banner); cursor: pointer; @@ -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"] { @@ -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; } @@ -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); } } @@ -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; } @@ -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); } } diff --git a/assets/css/page-widgets/todo.css b/assets/css/page-widgets/todo.css index 1c7745fa5..50646f6ee 100644 --- a/assets/css/page-widgets/todo.css +++ b/assets/css/page-widgets/todo.css @@ -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 { @@ -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; diff --git a/assets/css/suggested-task.css b/assets/css/suggested-task.css index e1b28ee8e..eddc707d3 100644 --- a/assets/css/suggested-task.css +++ b/assets/css/suggested-task.css @@ -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%; @@ -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; @@ -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); } } diff --git a/assets/css/upgrade-tasks.css b/assets/css/upgrade-tasks.css index d0f9e6c68..8d654ec4b 100644 --- a/assets/css/upgrade-tasks.css +++ b/assets/css/upgrade-tasks.css @@ -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; diff --git a/assets/css/variables-color.css b/assets/css/variables-color.css index 7ea93ae8d..653901b49 100644 --- a/assets/css/variables-color.css +++ b/assets/css/variables-color.css @@ -7,7 +7,7 @@ /* Paper */ --prpl-background-paper: #fff; --prpl-color-border: #d1d5db; - --prpl-color-divider: var(--prpl-color-border); + --prpl-color-divider: #d1d5db; --prpl-color-shadow-paper: #000; /* Graph */ @@ -19,11 +19,11 @@ /* Table */ --prpl-background-table: var(--prpl-background); - --prpl-background-top-task: #fff9f0; + --prpl-background-top-task: color-mix(in srgb, var(--prpl-color-monthly) 10%, var(--prpl-background-paper)); --prpl-color-border-top-task: var(--prpl-color-monthly); --prpl-color-border-next-top-task: var(--prpl-graph-color-4); - --prpl-color-selection-controls-inactive: #9ca3af; - --prpl-color-selection-controls: var(--prpl-color-selection-controls-inactive); /* TBD */ + --prpl-color-selection-controls: #9ca3af; + --prpl-color-selection-controls-active: #3bb3a6; --prpl-color-ui-icon: #6b7280; --prpl-color-ui-icon-hover: var(--prpl-color-link); --prpl-color-ui-icon-hover-fill: var(--prpl-background-content-badge); @@ -33,6 +33,9 @@ --prpl-background-point-inactive: var(--prpl-color-border); --prpl-text-point-inactive: var(--prpl-color-headings); + /* Border around the points badge; none unless a brand sets it */ + --prpl-color-border-point: transparent; + /* Text */ --prpl-color-text: #4b5563; --prpl-color-text-hover: var(--prpl-color-link); @@ -41,53 +44,56 @@ --prpl-color-link: #1e40af; --prpl-color-link-hover: var(--prpl-color-text); --prpl-color-link-visited: var(--prpl-graph-color-4); + --prpl-color-text-score: var(--prpl-color-text); + --prpl-color-text-score-small: var(--prpl-color-text); /* Topics */ --prpl-color-monthly: #faa310; --prpl-color-monthly-2: #faa310; --prpl-color-streak: var(--prpl-color-monthly); --prpl-color-content-badge: var(--prpl-color-monthly); - --prpl-background-monthly: #fff9f0; + --prpl-color-publish: var(--prpl-color-monthly); + --prpl-color-flying-start: var(--prpl-color-monthly); + + /* Topic backgrounds: 10% of the topic color */ + --prpl-background-monthly: color-mix(in srgb, var(--prpl-color-monthly) 10%, var(--prpl-background-paper)); --prpl-background-content: #f6f5fb; --prpl-background-activity: #f2faf9; - --prpl-background-streak: #fff6f7; - --prpl-background-content-badge: #effbfe; + --prpl-background-streak: color-mix(in srgb, var(--prpl-color-streak) 10%, var(--prpl-background-paper)); + --prpl-background-content-badge: color-mix(in srgb, var(--prpl-color-content-badge) 10%, var(--prpl-background-paper)); + --prpl-background-publish: color-mix(in srgb, var(--prpl-color-publish) 10%, var(--prpl-background-paper)); + --prpl-background-flying-start: color-mix(in srgb, var(--prpl-color-flying-start) 10%, var(--prpl-background-paper)); /* Alert success */ --prpl-color-alert-success: #16a34a; --prpl-color-alert-success-text: #14532d; --prpl-background-alert-success: #f0fdf4; + --prpl-color-border-alert-success: #b9e3c8; /* Alert error */ --prpl-color-alert-error: #e73136; --prpl-color-alert-error-text: #7f1d1d; --prpl-background-alert-error: #fdeded; + --prpl-color-border-alert-error: #f8c1c2; /* Alert warning */ --prpl-color-alert-warning: #eab308; --prpl-color-alert-warning-text: #713f12; --prpl-background-alert-warning: #fefce8; + --prpl-color-border-alert-warning: #f9e8b4; /* Alert info */ --prpl-color-alert-info: #2563eb; --prpl-color-alert-info-text: #1e3a8a; --prpl-background-alert-info: #eff6ff; + --prpl-color-border-alert-info: #becceb; /* Button */ --prpl-color-button-primary: #dd324f; - --prpl-color-button-primary-hover: #cf2441; - --prpl-color-button-primary-shadow: var(--prpl-color-shadow-paper); - --prpl-color-button-primary-border: none; + --prpl-color-button-primary-hover: color-mix(in srgb, var(--prpl-color-button-primary), #000 10%); --prpl-color-button-primary-text: var(--prpl-background-paper); - - /* Settings page */ - --prpl-color-setting-pages-icon: var(--prpl-color-monthly); - --prpl-color-setting-posts-icon: var(--prpl-graph-color-4); - --prpl-color-setting-login-icon: var(--prpl-graph-color-3); - --prpl-background-setting-pages: var(--prpl-background-monthly); - --prpl-background-setting-posts: var(--prpl-background-content); - --prpl-background-setting-login: var(--prpl-background-activity); - --prpl-color-border-settings: var(--prpl-color-border); + --prpl-color-button-secondary-border: #faa310; + --prpl-color-button-secondary-text: #374151; /* Input field dropdown */ --prpl-color-field-border: var(--prpl-color-border); diff --git a/assets/css/web-components/prpl-tooltip.css b/assets/css/web-components/prpl-tooltip.css index 40dee191e..072e68f2d 100644 --- a/assets/css/web-components/prpl-tooltip.css +++ b/assets/css/web-components/prpl-tooltip.css @@ -22,7 +22,7 @@ padding: 0.75rem 1.5rem 0.75rem 0.75rem; width: 150px; background: var(--prpl-background-activity); - border-radius: var(--prpl-border-radius); + border-radius: var(--prpl-radius-paper); z-index: 2; /* above the gauges */ visibility: hidden; /* hidden by default */ diff --git a/assets/css/welcome.css b/assets/css/welcome.css index 20004600b..1d229dfc9 100644 --- a/assets/css/welcome.css +++ b/assets/css/welcome.css @@ -2,7 +2,7 @@ padding: 0; 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); } .prpl-welcome { @@ -31,8 +31,8 @@ display: flex; justify-content: space-between; align-items: center; - 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); overflow: hidden; h1 { diff --git a/assets/js/web-components/prpl-gauge.js b/assets/js/web-components/prpl-gauge.js index a2786104a..2c714789c 100644 --- a/assets/js/web-components/prpl-gauge.js +++ b/assets/js/web-components/prpl-gauge.js @@ -213,13 +213,13 @@ customElements.define( this.shadowRoot.innerHTML = `
- 0 - + 0 + - ${ max } + ${ max }
`; diff --git a/classes/admin/class-dashboard-widget-score.php b/classes/admin/class-dashboard-widget-score.php index d6b6509cb..e84b840cc 100644 --- a/classes/admin/class-dashboard-widget-score.php +++ b/classes/admin/class-dashboard-widget-score.php @@ -102,7 +102,7 @@ public function get_badge_details( $category = 'content' ) { ]; if ( $result['progress']['progress'] > 50 ) { - $result['color'] = 'var(--prpl-color-monthly)'; + $result['color'] = 'var(--prpl-graph-color-2)'; } if ( $result['progress']['progress'] > 75 ) { $result['color'] = 'var(--prpl-graph-color-3)'; diff --git a/classes/admin/widgets/class-activity-scores.php b/classes/admin/widgets/class-activity-scores.php index 8adcde644..490dc722d 100644 --- a/classes/admin/widgets/class-activity-scores.php +++ b/classes/admin/widgets/class-activity-scores.php @@ -58,7 +58,7 @@ public function get_color( $number, $date ) { return 'var(--prpl-graph-color-3)'; } if ( $number > 30 ) { - return 'var(--prpl-color-monthly)'; + return 'var(--prpl-graph-color-2)'; } return 'var(--prpl-graph-color-1)'; } @@ -156,7 +156,7 @@ public function get_gauge_color( $score ) { return 'var(--prpl-graph-color-3)'; } if ( $score >= 50 ) { - return 'var(--prpl-color-monthly)'; + return 'var(--prpl-graph-color-2)'; } return 'var(--prpl-graph-color-1)'; } diff --git a/views/page-widgets/badge-streak-content.php b/views/page-widgets/badge-streak-content.php index 381e1e5d7..f6c4e4c93 100644 --- a/views/page-widgets/badge-streak-content.php +++ b/views/page-widgets/badge-streak-content.php @@ -34,7 +34,7 @@
diff --git a/views/page-widgets/badge-streak-maintenance.php b/views/page-widgets/badge-streak-maintenance.php index ca60be3ce..7260a4d80 100644 --- a/views/page-widgets/badge-streak-maintenance.php +++ b/views/page-widgets/badge-streak-maintenance.php @@ -34,7 +34,7 @@
diff --git a/views/page-widgets/content-activity.php b/views/page-widgets/content-activity.php index 600653129..3fd00b378 100644 --- a/views/page-widgets/content-activity.php +++ b/views/page-widgets/content-activity.php @@ -14,7 +14,7 @@ $prpl_activity_types = [ 'publish' => [ 'label' => \__( 'published', 'progress-planner' ), - 'color' => 'var(--prpl-color-monthly)', + 'color' => 'var(--prpl-graph-color-2)', ], 'update' => [ 'label' => \__( 'updated', 'progress-planner' ), @@ -22,7 +22,7 @@ ], 'delete' => [ 'label' => \__( 'deleted', 'progress-planner' ), - 'color' => 'var(--prpl-color-headings)', + 'color' => 'var(--prpl-graph-color-4)', ], ]; From ab06650f7b29866a92f5cfa0f6311accf81af564 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 28 Oct 2026 09:57:28 +0100 Subject: [PATCH 2/5] Give recommendation buttons the button radius Co-Authored-By: Claude Opus 5.5 --- assets/css/page-widgets/suggested-tasks.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/page-widgets/suggested-tasks.css b/assets/css/page-widgets/suggested-tasks.css index 12cd28070..a996a831d 100644 --- a/assets/css/page-widgets/suggested-tasks.css +++ b/assets/css/page-widgets/suggested-tasks.css @@ -253,7 +253,7 @@ border: none; color: var(--prpl-color-text); font-weight: 600; - border-radius: var(--prpl-radius-paper); + border-radius: var(--prpl-radius-button); background-color: var(--prpl-background-banner); cursor: pointer; From 610a2b9c84579b33f84bfb5ede15b0c33939e8c4 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 28 Oct 2026 09:58:35 +0100 Subject: [PATCH 3/5] Draw the secondary button outline on its ::after layer The layer covers the button's own background, which hid an inset outline. Co-Authored-By: Claude Opus 5.5 --- assets/css/admin.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index d45534e12..d5be66d79 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -404,21 +404,22 @@ button.prpl-info-icon { --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); - box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border); + /* The outline sits on ::after, which covers the button's own background. */ &::after { background: var(--prpl-background-paper); + box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border); } &:not([disabled]):hover, &:not([disabled]):focus { color: var(--prpl-color-button-secondary-text); background: var(--prpl-button-secondary-tint); - box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border); + box-shadow: none; &::after { background: var(--prpl-button-secondary-tint); - box-shadow: 0 0 0 1px var(--prpl-color-button-secondary-border); + box-shadow: inset 0 0 0 1px var(--prpl-color-button-secondary-border); } } } From ab8103bf85e11b07c3530857b9ce7b28cbbb338c Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 28 Oct 2026 13:50:53 +0100 Subject: [PATCH 4/5] Remove the unused placeholder and dropdown text colors --prpl-color-text-placeholder and --prpl-color-text-dropdown were defined but never read. Co-Authored-By: Claude Opus 5.5 --- assets/css/variables-color.css | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/css/variables-color.css b/assets/css/variables-color.css index 653901b49..abfe6e8e6 100644 --- a/assets/css/variables-color.css +++ b/assets/css/variables-color.css @@ -97,8 +97,6 @@ /* Input field dropdown */ --prpl-color-field-border: var(--prpl-color-border); - --prpl-color-text-placeholder: var(--prpl-color-ui-icon); - --prpl-color-text-dropdown: var(--prpl-color-text); --prpl-color-field-shadow: var(--prpl-color-shadow-paper); /* Badge */ From c0d4ffe5c7210c6aabea25c9fdd7303128058243 Mon Sep 17 00:00:00 2001 From: Filip Ilic Date: Wed, 28 Oct 2026 15:44:37 +0100 Subject: [PATCH 5/5] Check the shared --prpl-* names in the pre-commit hook When YOUR_BRANDING_DIR points at a your-branding checkout, the hook checks every --prpl-* name the plugin reads or defines against its tokens.json. Without it the check is skipped. Co-Authored-By: Claude Opus 5.5 --- .husky/pre-commit | 7 +++++++ README.md | 8 ++++++++ 2 files changed, 15 insertions(+) diff --git a/.husky/pre-commit b/.husky/pre-commit index df4aef90c..e6fd057e0 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -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 diff --git a/README.md b/README.md index 6b6e782e5..d41cef189 100644 --- a/README.md +++ b/README.md @@ -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: