add swatch page, rename colors
This commit is contained in:
parent
21d4174c8f
commit
1cb8335158
5 changed files with 126 additions and 1 deletions
|
|
@ -7,6 +7,22 @@ module.exports = {
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
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: {
|
screens: {
|
||||||
// Adjusted for current hybrid usage (hero changes at sm, header/layout at md)
|
// Adjusted for current hybrid usage (hero changes at sm, header/layout at md)
|
||||||
'sm': '768px', // iPad portrait + when hero layout activates
|
'sm': '768px', // iPad portrait + when hero layout activates
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,8 @@
|
||||||
const el = document.getElementById('riverside-calendar');
|
const el = document.getElementById('riverside-calendar');
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
|
|
||||||
|
requestAnimationFrame(function () {
|
||||||
|
|
||||||
const calendar = new FullCalendar.Calendar(el, {
|
const calendar = new FullCalendar.Calendar(el, {
|
||||||
initialView: 'dayGridMonth',
|
initialView: 'dayGridMonth',
|
||||||
headerToolbar: { left: 'prev', center: 'title', right: 'next' },
|
headerToolbar: { left: 'prev', center: 'title', right: 'next' },
|
||||||
|
|
@ -101,5 +103,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
calendar.render();
|
calendar.render();
|
||||||
|
|
||||||
|
}); // end requestAnimationFrame
|
||||||
});
|
});
|
||||||
})(drupalSettings);
|
})(drupalSettings);
|
||||||
|
|
|
||||||
|
|
@ -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:
|
riverside_pt.home:
|
||||||
path: '/home'
|
path: '/home'
|
||||||
defaults:
|
defaults:
|
||||||
|
|
|
||||||
|
|
@ -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))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -111,7 +111,7 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="bg-white">
|
<section class="bg-white border-b border-pt-blue-300">
|
||||||
<rpt-testimonials class="block"></rpt-testimonials>
|
<rpt-testimonials class="block"></rpt-testimonials>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue