Skip to content

Commit f22cec2

Browse files
Adebesin-CellAdebesin-Cell
committed
refactor: simplify brand page — remove colors, app icon, and strict guidelines
- Remove app icon (irrelevant to branding) - Remove colors section (not needed for asset page) - Replace do's/don'ts with a single accessibility-focused blockquote - Move "copied" key to logo_menu namespace
1 parent 3639ee2 commit f22cec2

File tree

4 files changed

+19
-252
lines changed

4 files changed

+19
-252
lines changed

‎app/components/LogoContextMenu.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ onKeyStroke('Escape', () => {
8383
:classicon="copied ? 'i-lucide:check text-badge-green' : 'i-lucide:copy'"
8484
@click="copySvg"
8585
>
86-
{{ copied ? $t('brand.colors.copied') : $t('logo_menu.copy_svg') }}
86+
{{ copied ? $t('logo_menu.copied') : $t('logo_menu.copy_svg') }}
8787
</ButtonBase>
8888
<ButtonBase
8989
role="menuitem"

‎app/pages/brand.vue‎

Lines changed: 9 additions & 150 deletions
Original file line numberDiff line numberDiff line change
@@ -35,42 +35,10 @@ const logos = [
3535
height: 153,
3636
span: false,
3737
},
38-
{
39-
name: () => $t('brand.logos.app_icon'),
40-
src: '/logo-icon.svg',
41-
altDark: () => $t('brand.logos.app_icon_alt'),
42-
altLight: () => $t('brand.logos.app_icon_light_alt'),
43-
width: 512,
44-
height: 512,
45-
span: false,
46-
},
4738
]
4839
49-
const colors = [
50-
{ name: () => $t('brand.colors.background'), hex: '#0a0a0a', oklch: 'oklch(0.171 0 0)' },
51-
{ name: () => $t('brand.colors.foreground'), hex: '#fafafa', oklch: 'oklch(0.982 0 0)' },
52-
{ name: () => $t('brand.colors.accent'), hex: '#51c8fc', oklch: 'oklch(0.787 0.128 230.318)' },
53-
]
54-
55-
const { copy, copied, text: lastCopied } = useClipboard({ copiedDuring: 2000 })
56-
5740
const typographySizes = ['text-2xl', 'text-xl', 'text-lg', 'text-base', 'text-sm']
5841
59-
const dosItems = [
60-
() => $t('brand.usage.do_clear_space'),
61-
() => $t('brand.usage.do_color_variants'),
62-
() => $t('brand.usage.do_aspect_ratio'),
63-
() => $t('brand.usage.do_minimum_size'),
64-
]
65-
66-
const dontsItems = [
67-
() => $t('brand.usage.dont_stretch'),
68-
() => $t('brand.usage.dont_recolor'),
69-
() => $t('brand.usage.dont_busy_bg'),
70-
() => $t('brand.usage.dont_effects'),
71-
() => $t('brand.usage.dont_rotate'),
72-
]
73-
7442
const pngLoading = ref(new Set<string>())
7543
7644
async function handlePngDownload(logo: (typeof logos)[number]) {
@@ -184,75 +152,6 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
184152
<BrandCustomize />
185153
</ClientOnly>
186154

187-
<!-- Colors Section -->
188-
<section aria-labelledby="brand-colors-heading">
189-
<h2 id="brand-colors-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
190-
{{ $t('brand.colors.title') }}
191-
</h2>
192-
<p class="text-fg-muted leading-relaxed mb-8">
193-
{{ $t('brand.colors.description') }}
194-
</p>
195-
196-
<!-- Screen reader announcement for copy -->
197-
<div class="sr-only" aria-live="polite" role="status">
198-
<span v-if="copied">{{ $t('brand.colors.copied') }}</span>
199-
</div>
200-
201-
<div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
202-
<div
203-
v-for="color in colors"
204-
:key="color.hex"
205-
class="group"
206-
role="group"
207-
:aria-label="color.name()"
208-
>
209-
<div
210-
class="rounded-lg h-20 sm:h-24 mb-3 border border-border"
211-
:style="{ backgroundColor: color.hex }"
212-
/>
213-
<p class="font-mono text-sm text-fg mb-1 m-0">
214-
{{ color.name() }}
215-
</p>
216-
<div class="flex flex-col gap-1">
217-
<ButtonBase
218-
size="sm"
219-
class="!border-none !px-0 !justify-start"
220-
:aria-label="$t('brand.colors.copy_hex', { name: color.name() })"
221-
@click="copy(color.hex)"
222-
>
223-
<code class="text-fg-muted">{{ color.hex }}</code>
224-
<span
225-
class="w-3 h-3 shrink-0 transition-colors duration-200"
226-
:class="
227-
copied && lastCopied === color.hex
228-
? 'i-lucide:check text-badge-green'
229-
: 'i-lucide:copy opacity-0 group-hover:opacity-100'
230-
"
231-
aria-hidden="true"
232-
/>
233-
</ButtonBase>
234-
<ButtonBase
235-
size="sm"
236-
class="!border-none !px-0 !justify-start"
237-
:aria-label="$t('brand.colors.copy_oklch', { name: color.name() })"
238-
@click="copy(color.oklch)"
239-
>
240-
<code class="text-fg-subtle">{{ color.oklch }}</code>
241-
<span
242-
class="w-3 h-3 shrink-0 transition-colors duration-200"
243-
:class="
244-
copied && lastCopied === color.oklch
245-
? 'i-lucide:check text-badge-green'
246-
: 'i-lucide:copy opacity-0 group-hover:opacity-100'
247-
"
248-
aria-hidden="true"
249-
/>
250-
</ButtonBase>
251-
</div>
252-
</div>
253-
</div>
254-
</section>
255-
256155
<!-- Typography Section -->
257156
<section aria-labelledby="brand-typography-heading">
258157
<h2 id="brand-typography-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
@@ -311,56 +210,16 @@ async function handlePngDownload(logo: (typeof logos)[number]) {
311210
</div>
312211
</section>
313212

314-
<!-- Usage Guidelines Section -->
315-
<section aria-labelledby="brand-usage-heading">
316-
<h2 id="brand-usage-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
317-
{{ $t('brand.usage.title') }}
213+
<!-- Guidelines -->
214+
<section aria-labelledby="brand-guidelines-heading">
215+
<h2 id="brand-guidelines-heading" class="text-lg text-fg uppercase tracking-wider mb-4">
216+
{{ $t('brand.guidelines.title') }}
318217
</h2>
319-
<p class="text-fg-muted leading-relaxed mb-8">
320-
{{ $t('brand.usage.description') }}
321-
</p>
322-
323-
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
324-
<!-- Do's -->
325-
<div>
326-
<h3 class="font-mono text-sm text-badge-green uppercase tracking-wider mb-4">
327-
{{ $t('brand.usage.do') }}
328-
</h3>
329-
<ul class="space-y-3 list-none p-0 m-0">
330-
<li
331-
v-for="(item, i) in dosItems"
332-
:key="`do-${i}`"
333-
class="flex items-start gap-3 text-fg-muted text-sm"
334-
>
335-
<span
336-
class="i-lucide:check w-4 h-4 text-badge-green shrink-0 mt-0.5"
337-
aria-hidden="true"
338-
/>
339-
<span>{{ item() }}</span>
340-
</li>
341-
</ul>
342-
</div>
343-
344-
<!-- Don'ts -->
345-
<div>
346-
<h3 class="font-mono text-sm text-badge-pink uppercase tracking-wider mb-4">
347-
{{ $t('brand.usage.dont') }}
348-
</h3>
349-
<ul class="space-y-3 list-none p-0 m-0">
350-
<li
351-
v-for="(item, i) in dontsItems"
352-
:key="`dont-${i}`"
353-
class="flex items-start gap-3 text-fg-muted text-sm"
354-
>
355-
<span
356-
class="i-lucide:x w-4 h-4 text-badge-pink shrink-0 mt-0.5"
357-
aria-hidden="true"
358-
/>
359-
<span>{{ item() }}</span>
360-
</li>
361-
</ul>
362-
</div>
363-
</div>
218+
<blockquote
219+
class="border-is-2 border-is-accent ps-6 py-2 text-fg-muted leading-relaxed italic"
220+
>
221+
{{ $t('brand.guidelines.message') }}
222+
</blockquote>
364223
</section>
365224
</div>
366225
</article>

‎i18n/locales/en.json‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1468,6 +1468,7 @@
14681468
},
14691469
"logo_menu": {
14701470
"copy_svg": "Copy logo as SVG",
1471+
"copied": "Copied!",
14711472
"browse_brand": "Browse brand kit"
14721473
},
14731474
"brand": {
@@ -1484,9 +1485,6 @@
14841485
"mark": "Logo mark",
14851486
"mark_alt": "npmx logo mark with dot and slash on dark background",
14861487
"mark_light_alt": "npmx logo mark with dot and slash on light background",
1487-
"app_icon": "App icon",
1488-
"app_icon_alt": "npmx app icon with slash on dark rounded background",
1489-
"app_icon_light_alt": "npmx app icon with slash on light background",
14901488
"on_dark": "On dark",
14911489
"on_light": "On light",
14921490
"download_svg": "SVG",
@@ -1502,16 +1500,6 @@
15021500
"download_svg_aria": "Download customized logo as SVG",
15031501
"download_png_aria": "Download customized logo as PNG"
15041502
},
1505-
"colors": {
1506-
"title": "colors",
1507-
"description": "The core npmx color palette uses OKLch color space for perceptual uniformity.",
1508-
"copy_hex": "Copy hex value for {name}",
1509-
"copy_oklch": "Copy OKLch value for {name}",
1510-
"copied": "Copied!",
1511-
"background": "Background",
1512-
"foreground": "Foreground",
1513-
"accent": "Accent"
1514-
},
15151503
"typography": {
15161504
"title": "typography",
15171505
"description": "npmx uses the Geist font family by Vercel for both interface text and code.",
@@ -1522,20 +1510,9 @@
15221510
"pangram": "The quick brown fox jumps over the lazy dog",
15231511
"numbers": "0123456789"
15241512
},
1525-
"usage": {
1526-
"title": "usage guidelines",
1527-
"description": "Follow these guidelines when using the npmx brand assets.",
1528-
"do": "Do",
1529-
"dont": "Don't",
1530-
"do_clear_space": "Maintain adequate clear space around the logo",
1531-
"do_color_variants": "Use the correct color variant for your background",
1532-
"do_aspect_ratio": "Keep the logo's original aspect ratio",
1533-
"do_minimum_size": "Use a minimum height of 24px for the logo mark",
1534-
"dont_stretch": "Stretch or distort the logo",
1535-
"dont_recolor": "Change the logo's colors",
1536-
"dont_busy_bg": "Place on busy or low-contrast backgrounds",
1537-
"dont_effects": "Add shadows, gradients, or outlines",
1538-
"dont_rotate": "Rotate or skew the logo"
1513+
"guidelines": {
1514+
"title": "guidelines",
1515+
"message": "Please leave sufficient contrast with the background and a large enough logo size (more than 24px). This is important for our users' accessibility, and we hope you'll help us uphold these values."
15391516
}
15401517
}
15411518
}

‎i18n/schema.json‎

Lines changed: 5 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -4408,6 +4408,9 @@
44084408
"copy_svg": {
44094409
"type": "string"
44104410
},
4411+
"copied": {
4412+
"type": "string"
4413+
},
44114414
"browse_brand": {
44124415
"type": "string"
44134416
}
@@ -4456,15 +4459,6 @@
44564459
"mark_light_alt": {
44574460
"type": "string"
44584461
},
4459-
"app_icon": {
4460-
"type": "string"
4461-
},
4462-
"app_icon_alt": {
4463-
"type": "string"
4464-
},
4465-
"app_icon_light_alt": {
4466-
"type": "string"
4467-
},
44684462
"on_dark": {
44694463
"type": "string"
44704464
},
@@ -4510,36 +4504,6 @@
45104504
},
45114505
"additionalProperties": false
45124506
},
4513-
"colors": {
4514-
"type": "object",
4515-
"properties": {
4516-
"title": {
4517-
"type": "string"
4518-
},
4519-
"description": {
4520-
"type": "string"
4521-
},
4522-
"copy_hex": {
4523-
"type": "string"
4524-
},
4525-
"copy_oklch": {
4526-
"type": "string"
4527-
},
4528-
"copied": {
4529-
"type": "string"
4530-
},
4531-
"background": {
4532-
"type": "string"
4533-
},
4534-
"foreground": {
4535-
"type": "string"
4536-
},
4537-
"accent": {
4538-
"type": "string"
4539-
}
4540-
},
4541-
"additionalProperties": false
4542-
},
45434507
"typography": {
45444508
"type": "object",
45454509
"properties": {
@@ -4570,46 +4534,13 @@
45704534
},
45714535
"additionalProperties": false
45724536
},
4573-
"usage": {
4537+
"guidelines": {
45744538
"type": "object",
45754539
"properties": {
45764540
"title": {
45774541
"type": "string"
45784542
},
4579-
"description": {
4580-
"type": "string"
4581-
},
4582-
"do": {
4583-
"type": "string"
4584-
},
4585-
"dont": {
4586-
"type": "string"
4587-
},
4588-
"do_clear_space": {
4589-
"type": "string"
4590-
},
4591-
"do_color_variants": {
4592-
"type": "string"
4593-
},
4594-
"do_aspect_ratio": {
4595-
"type": "string"
4596-
},
4597-
"do_minimum_size": {
4598-
"type": "string"
4599-
},
4600-
"dont_stretch": {
4601-
"type": "string"
4602-
},
4603-
"dont_recolor": {
4604-
"type": "string"
4605-
},
4606-
"dont_busy_bg": {
4607-
"type": "string"
4608-
},
4609-
"dont_effects": {
4610-
"type": "string"
4611-
},
4612-
"dont_rotate": {
4543+
"message": {
46134544
"type": "string"
46144545
}
46154546
},

0 commit comments

Comments
 (0)