5ddabe26e2
A previous sweep found six dark matches, correctly ruled five of them unreachable, and fixed the one real violation in doxa-simple-map. Re-running it with a luminance test rather than a hex prefix found more, because the earlier pattern also matched the green accent #10b981 and so buried the genuine surfaces in noise. Three further unconditional violations, all the same shape as the one already fixed: the loading overlays in all-people-groups, country-posters and doxa-research-map each render on every load via v-if="!appReady", so a near-black flash was the first thing a visitor saw. All four now use the palette surface with muted text. The template-bundle starter was also dark in both profiles. That one matters more than a leaf: the documented recipe is to copy template-bundle and rename it, so every future plugin would have inherited a surface the house style forbids. The two profiles stay visibly distinct — a tinted surface with an accent border, b white with a neutral one. Verified by reading the shipped rule out of each built bundle: 4 of 4 found, all #f3f3f1 at luminance 243. The found-count is reported so a run that matches nothing cannot read as a pass — an earlier version of that check found zero rules and printed ALL LIGHT.
65 lines
3 KiB
Vue
65 lines
3 KiB
Vue
<script setup>
|
|
/**
|
|
* template-map-a.vue — example profile "A"
|
|
*
|
|
* @description Minimal example profile A — a colored placeholder, no Mapbox or data.
|
|
* @profile template-map-a
|
|
* @bundle template-bundle
|
|
* @element template-bundle
|
|
*
|
|
* This file sits DIRECTLY in the bundle folder (plugin-designs/template-bundle/),
|
|
* NOT in a nested profiles/ subfolder. Its filename without `.vue` —
|
|
* `template-map-a` — is the profile name you request from the host page:
|
|
*
|
|
* <template-bundle profile-config='{"profile":"template-map-a"}'></template-bundle>
|
|
*
|
|
* A profile is a normal Vue component. It can read the host's profile-config via
|
|
* inject('profileConfig') — the same channel the real map profiles use — without
|
|
* any prop-drilling across the web-component boundary.
|
|
*
|
|
* It also shows the sandbox import boundary: this profile pulls its accent color
|
|
* from src/colors/colors.json via a RELATIVE path (./src/...). Your own sandbox
|
|
* code is always a relative import; the @map/... alias is only for the shared
|
|
* library. Edit the hex values in that JSON and rebuild to recolor — no code.
|
|
*/
|
|
import { inject, computed } from 'vue'
|
|
import colors from './src/colors/colors.json'
|
|
|
|
const config = inject('profileConfig', null)
|
|
const note = computed(() => config?.value?.note || '(no note passed in profile-config)')
|
|
const accent = colors.pins.selected
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tpl tpl--a">
|
|
<h2>Profile A</h2>
|
|
<p>Served from <code>template-map-a.vue</code> in the <code>template-bundle</code> bundle.</p>
|
|
<p class="note">note: {{ note }}</p>
|
|
<p class="swatch">
|
|
accent from <code>src/colors/colors.json</code>:
|
|
<span class="dot" :style="{ background: accent }"></span> {{ accent }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.tpl {
|
|
width: 100%; height: 100%;
|
|
display: flex; flex-direction: column; gap: 6px;
|
|
align-items: center; justify-content: center;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
|
text-align: center;
|
|
}
|
|
/* MATERIAL LIGHT (2026-09-21). Was background #0b1f2a / color #7dd3fc.
|
|
★ THIS FILE IS THE COPY-ME STARTER, so a palette violation here PROPAGATES: the skill's recipe
|
|
is "copy template-bundle and rename it", which means every future plugin would inherit a dark
|
|
surface the house style forbids. Fixing the template is worth more than fixing one leaf.
|
|
The two profiles still differ visibly (a uses the accent tint, b a cooler border) — that
|
|
distinction is the point of shipping two, and it survives on the light palette. */
|
|
.tpl--a { background: #f3f3f1; color: #3b463d; border: 1px solid #92b195; }
|
|
.tpl h2 { font-size: 22px; font-weight: 700; }
|
|
.tpl code { background: rgba(59, 70, 61, 0.08); padding: 1px 6px; border-radius: 4px; }
|
|
.tpl .note { font-size: 12px; opacity: 0.7; }
|
|
.tpl .swatch { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 6px; }
|
|
.tpl .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
|
|
</style>
|