add swatch page, rename colors

This commit is contained in:
Philip Peterson 2026-06-01 02:46:47 -07:00
parent 21d4174c8f
commit 1cb8335158
5 changed files with 126 additions and 1 deletions

View file

@ -7,6 +7,22 @@ module.exports = {
],
theme: {
extend: {
colors: {
'pt-blue': {
50: '#e8f2f6',
100: '#dde8f0',
200: '#b8d4dc',
300: '#9dbdcb',
400: '#86aab6',
500: '#306f8e',
600: '#1f5a6e',
},
'pt-sage': {
400: '#83a1a1',
500: '#6f8f96',
},
'pt-navy': '#1e3a5f',
},
screens: {
// Adjusted for current hybrid usage (hero changes at sm, header/layout at md)
'sm': '768px', // iPad portrait + when hero layout activates

View file

@ -3,6 +3,8 @@
const el = document.getElementById('riverside-calendar');
if (!el) return;
requestAnimationFrame(function () {
const calendar = new FullCalendar.Calendar(el, {
initialView: 'dayGridMonth',
headerToolbar: { left: 'prev', center: 'title', right: 'next' },
@ -101,5 +103,7 @@
});
calendar.render();
}); // end requestAnimationFrame
});
})(drupalSettings);

View file

@ -1,3 +1,11 @@
riverside_pt.palette:
path: '/dev/palette'
defaults:
_controller: '\Drupal\riverside_pt\Controller\PaletteController::page'
_title: 'Color Palette'
requirements:
_permission: 'administer site configuration'
riverside_pt.home:
path: '/home'
defaults:

View file

@ -0,0 +1,97 @@
<?php
namespace Drupal\riverside_pt\Controller;
use Drupal\Core\Controller\ControllerBase;
class PaletteController extends ControllerBase {
public function page(): array {
$colors = $this->parseColors();
if (!$colors) {
return ['#markup' => '<p>Could not parse tailwind.config.js</p>'];
}
$html = '<div style="font-family:monospace;font-size:13px;padding:32px;background:#f5f5f5;max-width:480px">';
foreach ($colors as $group => $shades) {
$html .= '<div style="font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#666;margin:20px 0 8px">'
. htmlspecialchars($group) . '</div>';
foreach ($shades as $shade => $hex) {
$label = $shade === 'DEFAULT' ? $group : "$group-$shade";
$lum = $this->luminance($hex);
$textColor = $lum > 140 ? '#333' : '#fff';
$border = $lum > 200 ? 'border:1px solid #ccc;' : '';
$html .= '<div style="display:flex;align-items:center;gap:12px;margin-bottom:6px">'
. "<div style=\"width:80px;height:40px;background:{$hex};{$border}\"></div>"
. "<span style=\"background:{$hex};color:{$textColor};padding:2px 8px\">"
. htmlspecialchars("$label$hex")
. '</span></div>';
}
}
$html .= '</div>';
return ['#markup' => $html];
}
private function parseColors(): array {
$path = dirname(DRUPAL_ROOT) . '/tailwind.config.js';
if (!file_exists($path)) {
return [];
}
$content = file_get_contents($path);
// Find the opening of the colors: { block
if (!preg_match('/colors\s*:\s*\{/', $content, $m, PREG_OFFSET_CAPTURE)) {
return [];
}
$start = $m[0][1] + strlen($m[0][0]);
// Walk forward counting braces to find the closing }
$depth = 1;
$i = $start;
$len = strlen($content);
while ($i < $len && $depth > 0) {
if ($content[$i] === '{') $depth++;
elseif ($content[$i] === '}') $depth--;
$i++;
}
$block = substr($content, $start, $i - $start - 1);
$colors = [];
// 'group': { shade: '#hex', ... }
preg_match_all("/'([^']+)'\s*:\s*\{([^}]+)\}/", $block, $groups, PREG_SET_ORDER);
foreach ($groups as $group) {
$name = $group[1];
preg_match_all('/(\w+)\s*:\s*\'(#[0-9a-fA-F]{3,6})\'/', $group[2], $shades, PREG_SET_ORDER);
foreach ($shades as $shade) {
$colors[$name][$shade[1]] = $shade[2];
}
}
// 'group': '#hex' (flat single-value entry)
preg_match_all("/'([^']+)'\s*:\s*'(#[0-9a-fA-F]{3,6})'/", $block, $singles, PREG_SET_ORDER);
foreach ($singles as $single) {
if (!isset($colors[$single[1]])) {
$colors[$single[1]]['DEFAULT'] = $single[2];
}
}
return $colors;
}
private function luminance(string $hex): int {
$hex = ltrim($hex, '#');
return (int) (
0.299 * hexdec(substr($hex, 0, 2)) +
0.587 * hexdec(substr($hex, 2, 2)) +
0.114 * hexdec(substr($hex, 4, 2))
);
}
}

View file

@ -111,7 +111,7 @@
</div>
</section>
<section class="bg-white">
<section class="bg-white border-b border-pt-blue-300">
<rpt-testimonials class="block"></rpt-testimonials>
</section>