diff --git a/README.md b/README.md index e0b9da5..01d3078 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,11 @@ shadows, three easings. your bundler fingerprints them out of `node_modules`. You do not need a copy in `static/fonts`. +**Marks** — `EngineWordmark` and `EngineIcon`, vector, in the two sanctioned +colourways (`variant="primary"` white, `variant="secondary"` Off Black). Size +by height alone. The wordmark is artwork, not type — with the vector in the +package there is no reason to typeset "engine" in Proxima Nova again. + **Primitives** — Alert, Badge, Button, Card, Checkbox, Dialog, Input, Label, Popover, Progress, RadioGroup, Select, Separator, Skeleton, Switch, Table, Tabs, Textarea, Tooltip. diff --git a/package.json b/package.json index da63069..1c915bc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@engineio/ui", "version": "0.0.0-development", - "description": "The Engine design system — tokens, fonts and Svelte primitives.", + "description": "The Engine design system \u2014 tokens, fonts and Svelte primitives.", "license": "UNLICENSED", "private": false, "type": "module", @@ -38,6 +38,10 @@ "./components/ui/*": { "types": "./dist/components/ui/*/index.d.ts", "svelte": "./dist/components/ui/*/index.js" + }, + "./components/brand": { + "types": "./dist/components/brand/index.d.ts", + "svelte": "./dist/components/brand/index.js" } }, "scripts": { diff --git a/src/app.html b/src/app.html index 27978f3..e243d03 100644 --- a/src/app.html +++ b/src/app.html @@ -5,6 +5,7 @@ Engine Design System + %sveltekit.head% diff --git a/src/lib/components/brand/engine-icon.svelte b/src/lib/components/brand/engine-icon.svelte new file mode 100644 index 0000000..5d8398e --- /dev/null +++ b/src/lib/components/brand/engine-icon.svelte @@ -0,0 +1,75 @@ + + + + + + {#if title} + {title} + {/if} + + diff --git a/src/lib/components/brand/engine-wordmark.svelte b/src/lib/components/brand/engine-wordmark.svelte new file mode 100644 index 0000000..169752e --- /dev/null +++ b/src/lib/components/brand/engine-wordmark.svelte @@ -0,0 +1,86 @@ + + + + {#if title} + {title} + {/if} + + + + + + + + + diff --git a/src/lib/components/brand/index.ts b/src/lib/components/brand/index.ts new file mode 100644 index 0000000..b3481e5 --- /dev/null +++ b/src/lib/components/brand/index.ts @@ -0,0 +1,4 @@ +import EngineIcon, { type EngineMarkVariant } from "./engine-icon.svelte" +import EngineWordmark from "./engine-wordmark.svelte" + +export { EngineIcon, EngineWordmark, type EngineMarkVariant } diff --git a/src/lib/index.ts b/src/lib/index.ts index 467b35a..2717d96 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -30,6 +30,12 @@ export type { WithoutChildrenOrChild, } from "./utils.js" +export { + EngineIcon, + EngineWordmark, + type EngineMarkVariant, +} from "./components/brand/index.js" + export { Alert, AlertDescription, diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 962b500..4e78e18 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -19,6 +19,8 @@ DialogHeader, DialogTitle, DialogTrigger, + EngineIcon, + EngineWordmark, Input, Label, Popover, @@ -111,11 +113,15 @@
-

- Engine · Design System · {__DS_VERSION__} -

+
+ + +

+ Design System · {__DS_VERSION__} +

+

One system. Every surface.

@@ -127,6 +133,42 @@

+
+ + + + + + + +
+ + +
+ + +
+ + + + +
+ +

+ Colour is a two-value variant + rather than currentColor on + purpose: with currentColor any ancestor's text colour silently becomes + brand colour, and a magenta wordmark is one careless + text-primary away. Size by + height alone — the brand forbids distortion, and neither the 810:1000 + nor the 2000:449 ratio is one anybody reproduces by hand. +

+
+