Skip to content

Commit 60ed451

Browse files
onmaxonmax
committed
feat: add design kit
1 parent 079a243 commit 60ed451

File tree

68 files changed

+1559
-179
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1559
-179
lines changed

‎.vitepress/auto-imports.d.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,6 @@ declare module 'vue' {
352352
readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
353353
readonly isShallow: UnwrapRef<typeof import('vue')['isShallow']>
354354
readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
355-
readonly manualResetRef: UnwrapRef<typeof import('@vueuse/core')['manualResetRef']>
356355
readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
357356
readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
358357
readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
@@ -388,11 +387,11 @@ declare module 'vue' {
388387
readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
389388
readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
390389
readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
391-
readonly refManualReset: UnwrapRef<typeof import('@vueuse/core')['refManualReset']>
392390
readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
393391
readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
394392
readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
395393
readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
394+
readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
396395
readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
397396
readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
398397
readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>

‎.vitepress/theme.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@ export const themeConfig = {
338338
betaBadge: true,
339339
logoContextMenu: {
340340
items: [
341+
{ label: 'Design Kit', icon: 'i-tabler:download', href: './design-kit' },
341342
{ label: 'Nimiq UI', icon: 'i-tabler:palette', href: 'https://onmax.github.io/nimiq-ui/' },
342343
{ label: 'Nimiq.com', icon: 'i-nimiq:logos-nimiq-mono', href: 'https://nimiq.com' },
343344
],

‎.vitepress/theme/components/DesignKitItem.vue‎

Lines changed: 27 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,44 @@
11
<script setup lang="ts">
2+
import { withBase } from 'vitepress'
3+
import { computed } from 'vue'
4+
25
const props = defineProps<{
3-
logo: string
6+
name: string
47
label: string
5-
size: number
8+
svg: string
9+
png?: string
610
dark?: boolean
711
}>()
812
9-
const { copy: copyToClipboard, copied, isSupported: copyIsSupported } = useClipboard({ copiedDuring: 3000 })
10-
async function copySnippet(_type: string) {
11-
// const logo = props.logo.replace('i-', '')
12-
// const str = await getIconSnippet(logo, type)
13-
const str = ''
14-
if (!str)
15-
throw new Error(`Icon ${props.logo} Not found`)
16-
copyToClipboard(str)
17-
}
13+
const svgUrl = computed(() => withBase(props.svg))
14+
const pngUrl = computed(() => props.png ? withBase(props.png) : undefined)
1815
19-
async function download() {
20-
// const logo = props.logo.replace('i-', '')
21-
// const str = await getIconSnippet(logo, 'PNG')
22-
// if (!str)
23-
// return
24-
// const name = `${logo.replaceAll('nimiq:logos-', '')}.png`
25-
// const blob = dataUriToBlob(str)
26-
// downloadBlob(blob, name)
16+
function download(type: 'svg' | 'png') {
17+
const url = type === 'svg' ? svgUrl.value : pngUrl.value
18+
if (!url)
19+
return
20+
const a = document.createElement('a')
21+
a.href = url
22+
a.download = `nimiq-${props.name}.${type}`
23+
a.click()
2724
}
2825
</script>
2926

3027
<template>
31-
<div flex="~ col gap-16 items-center" m-0 class="nq-raw raw" w-full>
28+
<div flex="~ col gap-12" class="nq-raw raw">
3229
<div
33-
p-24 rounded-6 flex-1 w-288 w-full
34-
:class="{
35-
'bg-[rgb(var(--nq-neutral-on-light-0))] border-subtle': !dark,
36-
'bg-[rgb(var(--nq-neutral-on-dark-0))] border-subtle-light': dark,
37-
}"
38-
grid="~ place-content-center"
30+
grid="~ place-content-center" p-24 rounded-6 w-full aspect-video
31+
:class="dark ? 'bg-darkblue' : 'bg-neutral-100 border-1 border-neutral-300'"
3932
>
40-
<div :class="logo" text-128 :style="`font-size: ${size}px`" />
33+
<img :src="svgUrl" :alt="label" h-48 w-auto object-contain>
4134
</div>
42-
<div flex="~ gap-12" w-full>
43-
<p text-neutral-800>
44-
{{ label }}
45-
</p>
46-
<div ml-auto flex>
47-
<Toast v-if="copyIsSupported" v-model="copied" title="Copied to clipboard!" category="success">
48-
<button text-12 mr-12 nq-ghost-btn @click="copySnippet('SVG')">
49-
SVG
50-
</button>
51-
</Toast>
52-
53-
<button text-12 nq-ghost-btn @click="download()">
35+
<div flex="~ items-center justify-between gap-8">
36+
<span text-14 text-neutral-800 font-semibold>{{ label }}</span>
37+
<div flex="~ gap-8">
38+
<button text="f-2xs neutral-800" outline="neutral-400 1.5 ~" px-8 py-2 nq-pill-tertiary @click="download('svg')">
39+
SVG
40+
</button>
41+
<button v-if="pngUrl" text="f-2xs neutral-800" outline="neutral-400 1.5 ~" px-8 py-2 nq-pill-tertiary @click="download('png')">
5442
PNG
5543
</button>
5644
</div>

‎.vitepress/theme/components/FeedbackWidget.vue‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎.vitepress/theme/components/HeaderNavFeedback.vue‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎.vitepress/theme/index.ts‎

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,12 @@
11
import { createHead } from '@unhead/vue/client'
22
import { defineNimiqThemeConfig } from 'nimiq-vitepress-theme/theme'
3-
import { createApp } from 'vue'
4-
import FeedbackWidget from './components/FeedbackWidget.vue'
5-
import HeaderNavFeedback from './components/HeaderNavFeedback.vue'
63
import 'virtual:uno.css'
74
import './main.css'
85
import 'vitepress/dist/client/theme-default/styles/components/vp-code.css'
96

10-
// TODO zoom image
11-
127
export default defineNimiqThemeConfig({
13-
Layout() {
14-
return {
15-
'header-nav-before-modules': HeaderNavFeedback,
16-
}
17-
},
188
enhanceApp({ app }) {
199
const head = createHead()
2010
app.use(head)
21-
22-
if (typeof window !== 'undefined') {
23-
const container = document.createElement('div')
24-
document.body.appendChild(container)
25-
createApp(FeedbackWidget).mount(container)
26-
}
2711
},
2812
})

‎design-kit.md‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
title: Design Kit
3+
description: Download Nimiq brand assets and design resources.
4+
layout: docs
5+
pageFooterLeftText: false
6+
inlineActions: false
7+
---
8+
9+
<script setup>
10+
import DesignKitItem from './.vitepress/theme/components/DesignKitItem.vue'
11+
</script>
12+
13+
# Design Kit
14+
15+
Download official Nimiq logos and brand assets for your projects.
16+
17+
## Nimiq Logo
18+
19+
The logo consists of the iconic hexagon mark and the wordmark. Use the hexagon alone as an icon or profile picture. Use the horizontal version when space allows.
20+
21+
### Hexagon
22+
23+
<div grid="~ cols-1 sm:cols-2 gap-24" mt-24 mb-32>
24+
<DesignKitItem name="hexagon" label="Colored" svg="/logos/nimiq/hexagon.svg" png="/logos/nimiq/hexagon.png" />
25+
<DesignKitItem name="hexagon-mono" label="Mono" svg="/logos/nimiq/hexagon-mono.svg" />
26+
</div>
27+
28+
### Horizontal
29+
30+
<div grid="~ cols-1 lg:cols-2 gap-24" mt-24 mb-32>
31+
<DesignKitItem name="horizontal" label="Colored" svg="/logos/nimiq/horizontal.svg" png="/logos/nimiq/horizontal.png" />
32+
<DesignKitItem name="horizontal-white" label="White" svg="/logos/nimiq/horizontal-white.svg" png="/logos/nimiq/horizontal-white.png" dark />
33+
<DesignKitItem name="horizontal-mono" label="Mono" svg="/logos/nimiq/horizontal-mono.svg" />
34+
</div>
35+
36+
## More Resources
37+
38+
Explore our color palette and icon library for building Nimiq-branded applications.
39+
40+
<div flex="~ gap-12 wrap" w-max mx-0 f-mt-sm>
41+
<a href="https://onmax.github.io/nimiq-ui/nimiq-css/palette.html" target="_blank" nq-pill-secondary>
42+
Color Palette
43+
<div i-tabler:external-link text-14 ml-4 />
44+
</a>
45+
<a href="https://onmax.github.io/nimiq-ui/nimiq-icons/explorer.html" target="_blank" nq-pill-secondary>
46+
Icon Library
47+
<div i-tabler:external-link text-14 ml-4 />
48+
</a>
49+
</div>

‎index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@ popularResources:
126126
href: ./rpc/block-explorers
127127
- title: UI & Design
128128
links:
129+
- text: Design Kit
130+
href: ./design-kit
129131
- text: Nimiq Icons
130132
href: https://onmax.github.io/nimiq-ui/nimiq-icons/explorer
131133
- text: Nimiq CSS

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"@nimiq/utils": "^0.12.4",
3030
"@unhead/vue": "^2.0.19",
3131
"@unocss/reset": "^66.5.4",
32-
"@vueuse/core": "^14.0.0",
32+
"@vueuse/core": "^13.9.0",
3333
"canvas-confetti": "^1.9.4",
3434
"iconify-icon": "^3.0.2",
3535
"json2md": "^2.0.3",

0 commit comments

Comments
 (0)