Skip to content

Commit 81c2de1

Browse files
SisyphusZhengSisyphusZheng
committed
Unify www V2 aperture art direction
1 parent 078c70e commit 81c2de1

19 files changed

Lines changed: 889 additions & 873 deletions

‎packages/ui/__tests__/smoke.test.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Deno.test('open-ui - index exports manifest (WC Package Protocol)', async () =>
1717
'open-theme-toggle',
1818
'open-code-block',
1919
'open-badge',
20+
'open-brand-mark',
2021
'open-lab-panel',
2122
'open-standards-visual',
2223
'open-lab-stage',
@@ -58,6 +59,7 @@ Deno.test('open-ui - all components export tagName', async () => {
5859
'open-dialog',
5960
'open-dropdown',
6061
'open-badge',
62+
'open-brand-mark',
6163
'open-lab-panel',
6264
'open-lab-stage',
6365
'open-standards-visual',

‎packages/ui/deno.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"./open-input": "./src/open-input.tsx",
99
"./open-code-block": "./src/open-code-block.tsx",
1010
"./open-badge": "./src/open-badge.tsx",
11+
"./open-brand-mark": "./src/open-brand-mark.tsx",
1112
"./open-lab-panel": "./src/open-lab-panel.tsx",
1213
"./open-lab-stage": "./src/open-lab-stage.tsx",
1314
"./open-standards-visual": "./src/open-standards-visual.tsx",

‎packages/ui/src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
* - open-badge-linear: Linear.app-style pill badge component
1616
* - open-code-block: Code block with copy button
1717
* - open-badge: Open Props status badge
18+
* - open-brand-mark: Aperture O brand mark
1819
* - open-lab-panel: Standards-lab artifact/spec panel
1920
* - open-lab-stage: Kinetic standards-lab hero primitive
2021
* - open-standards-visual: Product-art standards diagrams
@@ -50,6 +51,7 @@ export { OpenCard, tagName as openCardTagName } from './open-card.js';
5051
export { OpenInput, tagName as openInputTagName } from './open-input.js';
5152
export { OpenCodeBlock, tagName as openCodeBlockTagName } from './open-code-block.js';
5253
export { OpenBadge, tagName as openBadgeTagName } from './open-badge.js';
54+
export { OpenBrandMark, tagName as openBrandMarkTagName } from './open-brand-mark.js';
5355
export { OpenLabPanel, tagName as openLabPanelTagName } from './open-lab-panel.js';
5456
export { OpenLabStage, tagName as openLabStageTagName } from './open-lab-stage.js';
5557
export {

‎packages/ui/src/manifest.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,27 @@ export const manifest: OpenElementPackageManifest = {
232232
export: 'OpenBadge',
233233
},
234234
},
235+
{
236+
tagName: 'open-brand-mark',
237+
className: 'OpenBrandMark',
238+
superclassName: 'OpenElement',
239+
description: 'Aperture O brand mark for openElement surfaces',
240+
attributes: [
241+
{ name: 'size', type: 'string', default: '"md"', description: 'Mark size' },
242+
{ name: 'tone', type: 'string', default: '"default"', description: 'Mark tone' },
243+
],
244+
cssParts: [
245+
{ name: 'mark', description: 'The Aperture O wrapper' },
246+
],
247+
openElement: {
248+
ssr: true,
249+
dsd: true,
250+
layer: 'dsd-static',
251+
hydrate: 'idle',
252+
module: '@openelement/ui/open-brand-mark',
253+
export: 'OpenBrandMark',
254+
},
255+
},
235256
{
236257
tagName: 'open-lab-panel',
237258
className: 'OpenLabPanel',
@@ -673,6 +694,11 @@ export const manifest: OpenElementPackageManifest = {
673694
exports: [{ name: 'OpenBadge', path: './open-badge.js' }],
674695
declarations: ['open-badge'],
675696
},
697+
{
698+
path: './open-brand-mark.js',
699+
exports: [{ name: 'OpenBrandMark', path: './open-brand-mark.js' }],
700+
declarations: ['open-brand-mark'],
701+
},
676702
{
677703
path: './open-lab-panel.js',
678704
exports: [{ name: 'OpenLabPanel', path: './open-lab-panel.js' }],

‎packages/ui/src/open-brand-mark.tsx‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
/** @jsxImportSource @openelement/core */
2+
/**
3+
* @openelement/ui - open-brand-mark
4+
*
5+
* Flat Aperture O brand mark shared by header, docs surfaces, and assets.
6+
*/
7+
8+
import { OpenElement } from '@openelement/element';
9+
import { StyleSheet, type StyleSheetLike } from '@openelement/core/style-sheet';
10+
import { openPropsTokenSheet } from './open-props-tokens.js';
11+
12+
export const tagName = 'open-brand-mark';
13+
14+
const sheet: StyleSheetLike = new StyleSheet();
15+
sheet.replaceSync(`
16+
:host {
17+
--mark-size: var(--size-10);
18+
display: inline-grid;
19+
width: var(--mark-size);
20+
height: var(--mark-size);
21+
flex: 0 0 auto;
22+
vertical-align: middle;
23+
}
24+
25+
:host([size="sm"]) { --mark-size: var(--size-8); }
26+
:host([size="lg"]) { --mark-size: var(--size-12); }
27+
:host([size="xl"]) { --mark-size: var(--size-16); }
28+
29+
.mark {
30+
position: relative;
31+
display: grid;
32+
place-items: center;
33+
width: 100%;
34+
height: 100%;
35+
overflow: hidden;
36+
border-radius: var(--radius-round);
37+
background:
38+
radial-gradient(circle at 50% 50%, var(--brand-mark-field, var(--bg-base)) 0 38%, transparent 39%),
39+
conic-gradient(
40+
from 218deg,
41+
var(--brand-deep) 0 24%,
42+
var(--brand) 24% 61%,
43+
var(--brand-light) 61% 82%,
44+
var(--brand-deep) 82% 100%
45+
);
46+
}
47+
48+
:host([tone="inverted"]) .mark {
49+
--brand-mark-field: var(--gray-12);
50+
}
51+
52+
.mark::before {
53+
content: "";
54+
position: absolute;
55+
inset: 27%;
56+
border: var(--border-size-1) solid color-mix(in srgb, var(--brand-light) 58%, var(--brand-mark-field, var(--bg-base)));
57+
border-radius: var(--radius-round);
58+
transform: rotate(-13deg);
59+
}
60+
61+
.mark::after {
62+
content: "";
63+
position: absolute;
64+
inset-inline-end: -2%;
65+
inset-block-start: 7%;
66+
width: 35%;
67+
height: 44%;
68+
border-radius: var(--radius-round) var(--radius-round) 0 0;
69+
background: var(--brand-mark-field, var(--bg-base));
70+
transform: rotate(24deg);
71+
}
72+
73+
.boundary,
74+
.route {
75+
position: absolute;
76+
inset-inline: 28% 22%;
77+
height: var(--border-size-1);
78+
border-radius: var(--radius-round);
79+
background: var(--brand-deep);
80+
z-index: 1;
81+
}
82+
83+
.boundary { inset-block-start: 46%; }
84+
.route {
85+
inset-block-start: 57%;
86+
background: var(--brand);
87+
}
88+
89+
:host([size="sm"]) .boundary,
90+
:host([size="sm"]) .route {
91+
inset-inline: 30% 24%;
92+
}
93+
`);
94+
95+
export class OpenBrandMark extends OpenElement {
96+
static override styles = [openPropsTokenSheet, sheet];
97+
static override observedAttributes = ['size', 'tone'];
98+
99+
override render(): ReturnType<typeof OpenElement.prototype.render> {
100+
return (
101+
<span className='mark' part='mark' aria-hidden='true'>
102+
<span className='boundary'></span>
103+
<span className='route'></span>
104+
</span>
105+
);
106+
}
107+
}
108+
109+
export default OpenBrandMark;
110+
111+
if (typeof customElements !== 'undefined' && !customElements.get(tagName)) {
112+
customElements.define(tagName, OpenBrandMark);
113+
}

0 commit comments

Comments
 (0)