diff --git a/CHANGELOG.md b/CHANGELOG.md index 945af09..ab986dd 100755 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,12 @@ All notable changes to the Peptide Search AI plugin will be documented in this f The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [4.6.0] — 2026-04-26 + +### Changed +- `assets/css/peptide-search.css`: adopted brand tokens — replaced hardcoded `#2563eb` blue with `var(--teal-500)` family; font → Inter / IBM Plex Mono +- `assets/css/psa-directory.css`: same token adoption; active tabs/filters → teal; dark mode active states → teal + ## [4.5.1] - 2026-04-23 ### Changed diff --git a/assets/css/peptide-search.css b/assets/css/peptide-search.css index e271197..e17452b 100755 --- a/assets/css/peptide-search.css +++ b/assets/css/peptide-search.css @@ -6,7 +6,7 @@ .psa-search-wrap { max-width: 720px; margin: 2rem auto; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .psa-search-form { @@ -16,15 +16,15 @@ .psa-search-input-wrap { display: flex; gap: 0; - border: 2px solid #2563eb; + border: 2px solid var(--teal-500); border-radius: 8px; overflow: hidden; transition: border-color 0.2s; } .psa-search-input-wrap:focus-within { - border-color: #1d4ed8; - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); + border-color: var(--teal-600); + box-shadow: 0 0 0 3px rgba(27, 138, 146, 0.15); } .psa-search-input { @@ -42,13 +42,13 @@ } .psa-search-input:focus { - outline: 2px solid #2563eb; + outline: 2px solid var(--teal-500); outline-offset: 2px; } .psa-search-btn { padding: 14px 24px; - background: #2563eb; + background: var(--teal-500); color: #fff; border: none; font-size: 15px; @@ -59,7 +59,7 @@ } .psa-search-btn:hover { - background: #1d4ed8; + background: var(--teal-600); } .psa-search-btn:focus-visible { @@ -95,8 +95,8 @@ } .psa-result-item:hover { - border-color: #2563eb; - box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1); + border-color: var(--teal-500); + box-shadow: 0 2px 8px rgba(27, 138, 146, 0.1); } .psa-result-title { @@ -146,8 +146,8 @@ } .psa-badge-manual { - background: #dbeafe; - color: #1e40af; + background: var(--teal-100); + color: var(--teal-700); } /* --- Checking / Loading State --- */ @@ -174,8 +174,8 @@ display: inline-block; width: 36px; height: 36px; - border: 4px solid #bfdbfe; - border-top-color: #2563eb; + border: 4px solid var(--teal-100); + border-top-color: var(--teal-500); border-radius: 50%; animation: psa-spin 0.8s linear infinite; } @@ -192,8 +192,8 @@ .psa-pending-inner { text-align: center; padding: 40px 32px; - background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%); - border: 1px solid #bfdbfe; + background: linear-gradient(135deg, var(--teal-50) 0%, var(--teal-50) 100%); + border: 1px solid var(--teal-100); border-radius: 16px; } @@ -206,14 +206,14 @@ .psa-pending-inner h3 { margin: 0 0 12px; font-size: 21px; - color: #1e40af; + color: var(--teal-700); font-weight: 700; } .psa-pending-inner > p { margin: 0 0 28px; font-size: 15px; - color: #3b82f6; + color: var(--teal-400); max-width: 500px; margin-left: auto; margin-right: auto; @@ -312,7 +312,7 @@ } .psa-sequence { - font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace; + font-family: "IBM Plex Mono", "Fira Code", Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; background: #f1f5f9; @@ -330,7 +330,7 @@ color: #1e293b; margin: 0 0 12px; padding-bottom: 8px; - border-bottom: 2px solid #2563eb; + border-bottom: 2px solid var(--teal-500); } .psa-section-content { @@ -360,9 +360,9 @@ } .psa-source-badge.psa-badge-manual { - background: #eff6ff; + background: var(--teal-50); border: 1px solid #93c5fd; - color: #1e40af; + color: var(--teal-700); } /* --- Responsive --- */ diff --git a/assets/css/psa-directory.css b/assets/css/psa-directory.css index 70e36c4..a183e99 100755 --- a/assets/css/psa-directory.css +++ b/assets/css/psa-directory.css @@ -28,7 +28,7 @@ max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif; + font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* --- Header --- */ @@ -68,8 +68,8 @@ } .psa-dir-search:focus { - border-color: #2563eb; - box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); + border-color: var(--teal-500); + box-shadow: 0 0 0 3px rgba(27, 138, 146, 0.15); } /* --- Tabs --- */ @@ -97,9 +97,9 @@ } .psa-dir-tab--active { - background: #2563eb; + background: var(--teal-500); color: #fff; - border-color: #2563eb; + border-color: var(--teal-500); } /* --- Category Filters --- */ @@ -124,14 +124,14 @@ } .psa-dir-filter:hover { - border-color: #2563eb; - color: #2563eb; + border-color: var(--teal-500); + color: var(--teal-500); } .psa-dir-filter--active { - background: #2563eb; + background: var(--teal-500); color: #fff; - border-color: #2563eb; + border-color: var(--teal-500); } /* --- Grid --- */ @@ -153,8 +153,8 @@ } .psa-dir-card:hover { - border-color: #2563eb; - box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08); + border-color: var(--teal-500); + box-shadow: 0 4px 12px rgba(27, 138, 146, 0.08); } .psa-dir-card__header { @@ -207,7 +207,7 @@ padding: 10px; font-size: 14px; font-weight: 600; - background: #2563eb; + background: var(--teal-500); color: #fff; border: none; border-radius: 8px; @@ -217,7 +217,7 @@ } .psa-dir-card__btn:hover { - background: #1d4ed8; + background: var(--teal-600); } /* --- Category Badge Colors --- */ @@ -261,15 +261,15 @@ font-size: 15px; font-weight: 600; background: #fff; - color: #2563eb; - border: 2px solid #2563eb; + color: var(--teal-500); + border: 2px solid var(--teal-500); border-radius: 8px; cursor: pointer; transition: all 0.2s; } .psa-dir-load-more:hover { - background: #2563eb; + background: var(--teal-500); color: #fff; } @@ -380,7 +380,7 @@ padding: 4px 12px; font-size: 12px; font-weight: 600; - background: #2563eb; + background: var(--teal-500); color: #fff; border: none; border-radius: 4px; @@ -389,7 +389,7 @@ } .psa-dir-modal__copy:hover { - background: #1d4ed8; + background: var(--teal-600); } /* --- Data Grid --- */ @@ -435,7 +435,7 @@ color: #1e293b; margin: 0 0 0.5rem; padding-bottom: 6px; - border-bottom: 2px solid #2563eb; + border-bottom: 2px solid var(--teal-500); } .psa-dir-modal__section p { @@ -449,7 +449,7 @@ .psa-dir-modal__pubchem { display: inline-block; font-size: 13px; - color: #2563eb; + color: var(--teal-500); text-decoration: none; margin-bottom: 1rem; } @@ -465,7 +465,7 @@ font-size: 14px; font-weight: 600; background: #f1f5f9; - color: #2563eb; + color: var(--teal-500); text-decoration: none; border-radius: 8px; transition: background 0.2s; @@ -546,7 +546,7 @@ } [data-theme="dark"] .psa-dir-tab--active { - background: #2563eb; + background: var(--teal-500); color: #fff; } @@ -557,7 +557,7 @@ } [data-theme="dark"] .psa-dir-filter--active { - background: #2563eb; + background: var(--teal-500); color: #fff; } diff --git a/peptide-search-ai.php b/peptide-search-ai.php index 53f89cc..31cacfc 100755 --- a/peptide-search-ai.php +++ b/peptide-search-ai.php @@ -3,7 +3,7 @@ * Plugin Name: Peptide Search AI * Plugin URI: https://github.com/peptiderepo/peptide-search-ai * Description: Searchable peptide database with AI-powered auto-population and browsable directory. - * Version: 4.5.1 + * Version: 4.6.0 * Author: peptiderepo * License: GPL v2 or later * Text Domain: peptide-search-ai