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: diff --git a/assets/css/admin.css b/assets/css/admin.css index 58938bef6..d5be66d79 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,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); } } } @@ -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; 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..a996a831d 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-button); 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..abfe6e8e6 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,58 +44,59 @@ --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); - --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 */ 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)', ], ];