@arclux/brand 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +98 -0
- package/package.json +30 -0
- package/src/assets/logo.js +7 -0
- package/src/assets/svg/logo-lg.svg +1 -0
- package/src/assets/svg/logo-sm.svg +1 -0
- package/src/assets/tektur-font.js +7 -0
- package/src/assets/wordmark-font.js +7 -0
- package/src/components/by-arclight.js +90 -0
- package/src/components/logo-wordmark.js +73 -0
- package/src/components/logo.js +81 -0
- package/src/components/powered-by.js +96 -0
- package/src/components/wordmark.js +74 -0
- package/src/index.js +5 -0
- package/src/shared-styles.js +28 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Arclight Digital, LLC
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
# @arclux/brand
|
|
2
|
+
|
|
3
|
+
Arclight brand components — self-contained Lit web components for logo, wordmark, and attribution badges. All fonts are embedded as subsetted base64 WOFF2, no external requests.
|
|
4
|
+
|
|
5
|
+
## Components
|
|
6
|
+
|
|
7
|
+
### `<arclight-logo>`
|
|
8
|
+
|
|
9
|
+
Standalone logo mark.
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<arclight-logo size="sm"></arclight-logo>
|
|
13
|
+
<arclight-logo size="lg"></arclight-logo>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
| Prop | Values | Default | Description |
|
|
17
|
+
|------|--------|---------|-------------|
|
|
18
|
+
| `size` | `sm`, `lg` | `sm` | 32px or 96px tall |
|
|
19
|
+
|
|
20
|
+
### `<arclight-wordmark>`
|
|
21
|
+
|
|
22
|
+
"ARCLIGHT" text in Host Grotesk (embedded subset).
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<arclight-wordmark size="sm"></arclight-wordmark>
|
|
26
|
+
<arclight-wordmark size="md"></arclight-wordmark>
|
|
27
|
+
<arclight-wordmark size="lg"></arclight-wordmark>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
| Prop | Values | Default | Description |
|
|
31
|
+
|------|--------|---------|-------------|
|
|
32
|
+
| `size` | `sm`, `md`, `lg`, `stacked` | `sm` | Font size variant |
|
|
33
|
+
|
|
34
|
+
### `<arclight-logo-wordmark>`
|
|
35
|
+
|
|
36
|
+
Logo + wordmark lockup.
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<arclight-logo-wordmark layout="inline"></arclight-logo-wordmark>
|
|
40
|
+
<arclight-logo-wordmark layout="stacked"></arclight-logo-wordmark>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
| Prop | Values | Default | Description |
|
|
44
|
+
|------|--------|---------|-------------|
|
|
45
|
+
| `layout` | `inline`, `stacked` | `inline` | Horizontal or vertical layout |
|
|
46
|
+
| `href` | URL string | `https://arclight.build` | Link target |
|
|
47
|
+
|
|
48
|
+
### `<arclight-by>`
|
|
49
|
+
|
|
50
|
+
"BY [logo] ARCLIGHT" attribution badge.
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<arclight-by></arclight-by>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
| Prop | Values | Default | Description |
|
|
57
|
+
|------|--------|---------|-------------|
|
|
58
|
+
| `href` | URL string | `https://arclight.build` | Link target |
|
|
59
|
+
|
|
60
|
+
### `<arclight-powered-by>`
|
|
61
|
+
|
|
62
|
+
"POWERED BY [logo] ARCLIGHT" attribution badge.
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<arclight-powered-by size="sm"></arclight-powered-by>
|
|
66
|
+
<arclight-powered-by size="md"></arclight-powered-by>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
| Prop | Values | Default | Description |
|
|
70
|
+
|------|--------|---------|-------------|
|
|
71
|
+
| `size` | `sm`, `md` | `md` | Font size variant |
|
|
72
|
+
| `href` | URL string | `https://arclight.build` | Link target |
|
|
73
|
+
|
|
74
|
+
## Theming
|
|
75
|
+
|
|
76
|
+
Components use `currentColor` for the logo SVG and `--text-primary` for the wordmark. On dark backgrounds they work out of the box. On light backgrounds, set `color` on a parent element or load `base.css` with a light theme.
|
|
77
|
+
|
|
78
|
+
Hover effects use `--accent-primary-rgb` and `--accent-secondary-rgb` with hardcoded fallbacks.
|
|
79
|
+
|
|
80
|
+
## Updating logos
|
|
81
|
+
|
|
82
|
+
1. Drop `.svg` files in `packages/brand/src/assets/svg/`
|
|
83
|
+
2. Run `pnpm generate` (or `node scripts/generate-brand-assets.js`)
|
|
84
|
+
3. The script strips XML headers and replaces brand colors with `currentColor`
|
|
85
|
+
|
|
86
|
+
## Preview
|
|
87
|
+
|
|
88
|
+
```
|
|
89
|
+
cd packages/brand && pnpm preview
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
## Install
|
|
93
|
+
|
|
94
|
+
```
|
|
95
|
+
pnpm add @arclux/brand
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
Peer dependency: `lit ^3.3.0`
|
package/package.json
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@arclux/brand",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Arclight brand components — logo, wordmark, powered-by badge",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "src/index.js",
|
|
7
|
+
"module": "src/index.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": "./src/index.js",
|
|
10
|
+
"./logo": "./src/components/logo.js",
|
|
11
|
+
"./wordmark": "./src/components/wordmark.js",
|
|
12
|
+
"./logo-wordmark": "./src/components/logo-wordmark.js",
|
|
13
|
+
"./by": "./src/components/by-arclight.js",
|
|
14
|
+
"./powered-by": "./src/components/powered-by.js"
|
|
15
|
+
},
|
|
16
|
+
"files": [
|
|
17
|
+
"src/"
|
|
18
|
+
],
|
|
19
|
+
"sideEffects": false,
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"lit": "^3.3.0"
|
|
22
|
+
},
|
|
23
|
+
"dependencies": {},
|
|
24
|
+
"publishConfig": {
|
|
25
|
+
"access": "public"
|
|
26
|
+
},
|
|
27
|
+
"scripts": {
|
|
28
|
+
"preview": "npx vite --open preview.html"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
// Generated by scripts/generate-brand-assets.js — do not edit by hand
|
|
2
|
+
import { svg } from 'lit';
|
|
3
|
+
|
|
4
|
+
export const logoLg = svg`<svg width="100%" height="100%" viewBox="0 0 3011 2324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M29.167,2294.723c0,0 612.723,-956.177 1475.848,-956.177c863.125,0 1475.848,956.177 1475.848,956.177" style="fill:none;stroke:currentColor;stroke-width:58.33px;"/><g id="Circles"><ellipse cx="1505.015" cy="652.756" rx="150.009" ry="146.552" style="fill:currentColor;"/><ellipse cx="1505.015" cy="652.756" rx="385.624" ry="376.738" style="fill:currentColor;fill-opacity:0.07;"/><circle cx="1505.015" cy="652.756" r="652.756" style="fill:url(#_Radial1);"/><circle cx="1505.015" cy="652.756" r="406.707" style="fill:url(#_Radial2);"/></g></g><defs><radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(652.755612,0,0,652.755612,1505.014682,652.755612)"><stop offset="0" style="stop-color:currentColor;stop-opacity:0.21"/><stop offset="0.49" style="stop-color:currentColor;stop-opacity:0.16"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient><radialGradient id="_Radial2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(406.70721,0,0,406.70721,1505.014682,652.755612)"><stop offset="0" style="stop-color:currentColor;stop-opacity:0.14"/><stop offset="0.49" style="stop-color:currentColor;stop-opacity:0.1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient></defs></svg>`;
|
|
5
|
+
|
|
6
|
+
export const logoSm = svg`<svg width="100%" height="100%" viewBox="0 0 1586 1423" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M46.103,1376.356c0,0 310.078,-483.888 746.875,-483.888c436.797,0 746.875,483.888 746.875,483.888" style="fill:none;stroke:currentColor;stroke-width:92.21px;"/><g id="Circles"><circle cx="792.978" cy="437.876" r="106.129" style="fill:currentColor;"/><circle cx="792.978" cy="437.876" r="272.824" style="fill:currentColor;fill-opacity:0.07;"/><circle cx="792.978" cy="437.876" r="437.876" style="fill:url(#_Radial1);"/><circle cx="792.978" cy="437.876" r="272.824" style="fill:url(#_Radial2);"/></g></g><defs><radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(437.875566,0,0,437.875566,792.978395,437.875566)"><stop offset="0" style="stop-color:currentColor;stop-opacity:0.21"/><stop offset="0.49" style="stop-color:currentColor;stop-opacity:0.16"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient><radialGradient id="_Radial2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(272.823621,0,0,272.823621,792.978395,437.875566)"><stop offset="0" style="stop-color:currentColor;stop-opacity:0.14"/><stop offset="0.49" style="stop-color:currentColor;stop-opacity:0.1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient></defs></svg>`;
|
|
7
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 3011 2324" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M29.167,2294.723c0,0 612.723,-956.177 1475.848,-956.177c863.125,0 1475.848,956.177 1475.848,956.177" style="fill:none;stroke:#e8e8f4;stroke-width:58.33px;"/><g id="Circles"><ellipse cx="1505.015" cy="652.756" rx="150.009" ry="146.552" style="fill:#e8e8ec;"/><ellipse cx="1505.015" cy="652.756" rx="385.624" ry="376.738" style="fill:#e8e8ec;fill-opacity:0.07;"/><circle cx="1505.015" cy="652.756" r="652.756" style="fill:url(#_Radial1);"/><circle cx="1505.015" cy="652.756" r="406.707" style="fill:url(#_Radial2);"/></g></g><defs><radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(652.755612,0,0,652.755612,1505.014682,652.755612)"><stop offset="0" style="stop-color:#e8e8ec;stop-opacity:0.21"/><stop offset="0.49" style="stop-color:#adadb0;stop-opacity:0.16"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient><radialGradient id="_Radial2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(406.70721,0,0,406.70721,1505.014682,652.755612)"><stop offset="0" style="stop-color:#e8e8ec;stop-opacity:0.14"/><stop offset="0.49" style="stop-color:#adadb0;stop-opacity:0.1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient></defs></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 1586 1423" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><g><path d="M46.103,1376.356c0,0 310.078,-483.888 746.875,-483.888c436.797,0 746.875,483.888 746.875,483.888" style="fill:none;stroke:#e8e8f4;stroke-width:92.21px;"/><g id="Circles"><circle cx="792.978" cy="437.876" r="106.129" style="fill:#e8e8ec;"/><circle cx="792.978" cy="437.876" r="272.824" style="fill:#e8e8ec;fill-opacity:0.07;"/><circle cx="792.978" cy="437.876" r="437.876" style="fill:url(#_Radial1);"/><circle cx="792.978" cy="437.876" r="272.824" style="fill:url(#_Radial2);"/></g></g><defs><radialGradient id="_Radial1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(437.875566,0,0,437.875566,792.978395,437.875566)"><stop offset="0" style="stop-color:#e8e8ec;stop-opacity:0.21"/><stop offset="0.49" style="stop-color:#adadb0;stop-opacity:0.16"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient><radialGradient id="_Radial2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(272.823621,0,0,272.823621,792.978395,437.875566)"><stop offset="0" style="stop-color:#e8e8ec;stop-opacity:0.14"/><stop offset="0.49" style="stop-color:#adadb0;stop-opacity:0.1"/><stop offset="1" style="stop-color:#000;stop-opacity:0"/></radialGradient></defs></svg>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Subsetted Tektur font (WOFF2) containing only the glyphs
|
|
3
|
+
* needed for "POWERED BY" (chars: B D E O P R W Y + space).
|
|
4
|
+
*
|
|
5
|
+
* Generated via: pyftsubset tektur-latin.woff2 --text="POWERDBY " --flavor=woff2
|
|
6
|
+
*/
|
|
7
|
+
export const tekturSubsetBase64 = 'd09GMgABAAAAAAVoABMAAAAACsQAAAT/AAEBSAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgUocNj9IVkFSRAZgP1NUQVSBCgBkL1QRCAqDNIJDMIJcATYCJAMoCxYABCAFhQYHIAwHG/EIyJ4FdsN1ERYQfL8Vl0CRd8LZeJ5+rc9zX3dP89+p3QkDSyCFqKIQdSqSyJi4sGKZrB1DcMvDXkWhM4FsuBRrmbgp+Q8LQIS7+1qWa0BBFnjqCYXSH/vN+h+SSKJN33VC40iUQAqmvi2JNbYQVxoLCZM4rbtF8a6N0Cam1Xam0EVsRefAG37kz6MJJkARRS+CwaHqMM9u3laIgHt0XSlEYcPazTA6yN2mzhS80Phq5a9Gp7hcU3ArB7YaYP22x6XycK3RqDQWOr1YqFUoIhqNgEpZk//pWIiPVIY9PGb26uxA2upssiONkWwaCY3urMCx9t1Ogm0xhNNxoUbYimGFYUiqJKWIuhyRiRrKC0UKuOh4ktyKkuQhxdD849cTB7E7Wf3z/1WYtCjkPSiHl73YnaeITsGKJ/bGfMjYlWQseGiRXRmt2LCjHBUI7ckxULJkBJUo6fIi5RtESJ//JHco13eOce5U7X5fc/U8KKiwwhKssF0OloKwsDtCMwIdSMi+2+I0xV/t+ncHHbDdNptsLGhZsMQUKx46dpEXWeuevy5tOuxID4cRGSjXAxn5jcpEtTtkht9WZO22CQxgBTZwJ3gRQA2gUkQRdxCp675eTF1dd/W4abrJP1M9Z7oddQPC3szX+TfTzZz5GvbVvs1s0kaua9eZab/b2PM5VU1zkRJDM98UFflc288eb/W9xfcm3xt8b/O92edGqX92qkltXOF6H69NFd4QxpHfyHUZp14TtW/5/LN7v8BrhzVxfJl975bjQj7q7kPB8LtCgfDjxMtRa3on8qfe3va4vnGY9kw4XLh+eB5RT5cvnNWozlPvzCOIXn91rg/xH+2eh/E8vUemtXN1//puTNyTSaaGLshfiB7Y8qSLXmkGzRlbmjTlk5FeBggiOJAPOBjAdjJVaEXOZTTe5GIgA529wea9aBFFzZ1LZWWF5ea3dAasjl/YavlyufzmzaPY+rZuBAjbnrG/b8YM6u3bK9HRV4ZUFDV58mDG7nOHxtZusGhSaHTzL+5DGcieu/9547RpZzD+8SJ/WZ/8Ll3GjRvCaL57UL9xEGvyfdTkIUBlezC/iSAh4SZFtd7E8Ewjl1cqxDYqCnu52vuMAVRWVnAg192z/bCAx/RF2Gq916dB2f3VCAwO7J1/33IxhCNL/fPnyjx0eZfFMPzwJ8X3Qc/ysBAfDtrnh3DdPAZvbwsYv//+6Nue+VdGrup4vCFDGS7XSATJ+eqcxbGawJP/9yrVn8CPSw+8C/y2pWvr9pXW764WY6GA8Otw9+9GiIJjBM0bytlICJvytJNLnx6awkpwEKPTVYkw/6p2wMDgCBx7Yt/jjJVg6TgqqXt8CCTG5EMsNnyMlSPtxtrO3mLjxHhJFnYOQYQ95FZsTbmjo7ufO72Pej8OlhmIoy4v4mRzZuJsyEfmZX4znzgLzaWXzqwsSF0lKVGkRKkkQiTT8bQmdl1101kSgc5oNiYG1MwrhV2RaHOXSZiF1HWYSxc1ChXqIaoFLKzQT3ajV8CA5lSI1Et3vfTSReFzDmdr5g7SbCl+0kGns2IFihQpV4vHSMepFj0ivz3ol5dEiLVv3t2KRkm68/9uYdYVjebQhUKRAtUKlCqieppQwsrYJEmYvq65nZQ2surGqSM4rUTpNB73NtNTV53pLCtxv7KBXftc2JmT7ttYwHpuR6K1XzDcw2aPAwAAAA==';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Subsetted Host Grotesk variable font (WOFF2) containing only the glyphs
|
|
3
|
+
* needed for "ARCLIGHT" (chars: A C G H I L R T + space).
|
|
4
|
+
*
|
|
5
|
+
* Generated via: pyftsubset HostGrotesk-Variable.woff2 --text="ACGHILRT " --flavor=woff2
|
|
6
|
+
*/
|
|
7
|
+
export const hostGroteskSubsetBase64 = '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';
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { tokenStyles } from '../shared-styles.js';
|
|
3
|
+
import { tekturSubsetBase64 } from '../assets/tektur-font.js';
|
|
4
|
+
import './logo-wordmark.js';
|
|
5
|
+
|
|
6
|
+
// @font-face must be in document scope — shadow DOM won't pick it up.
|
|
7
|
+
let fontInjected = false;
|
|
8
|
+
function injectFont() {
|
|
9
|
+
if (fontInjected) return;
|
|
10
|
+
fontInjected = true;
|
|
11
|
+
const style = document.createElement('style');
|
|
12
|
+
style.textContent = `
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: 'Tektur Subset';
|
|
15
|
+
src: url('data:font/woff2;base64,${tekturSubsetBase64}') format('woff2');
|
|
16
|
+
font-weight: 400 900;
|
|
17
|
+
font-display: block;
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
document.head.appendChild(style);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/** @tag arclight-by */
|
|
24
|
+
export class ArclightBy extends LitElement {
|
|
25
|
+
static properties = {
|
|
26
|
+
href: { type: String },
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
static styles = [
|
|
30
|
+
tokenStyles,
|
|
31
|
+
css`
|
|
32
|
+
:host {
|
|
33
|
+
display: inline-block;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.badge, a.badge {
|
|
37
|
+
display: inline-flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
gap: 6px;
|
|
40
|
+
white-space: nowrap;
|
|
41
|
+
user-select: none;
|
|
42
|
+
font-size: 10px;
|
|
43
|
+
text-decoration: none;
|
|
44
|
+
color: inherit;
|
|
45
|
+
transition:
|
|
46
|
+
transform 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
|
47
|
+
filter 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
a.badge:hover {
|
|
51
|
+
transform: translateY(-1px);
|
|
52
|
+
filter:
|
|
53
|
+
drop-shadow(0 0 6px rgba(var(--accent-primary-rgb, 77, 126, 247), 0.25))
|
|
54
|
+
drop-shadow(0 0 16px rgba(var(--accent-secondary-rgb, 168, 85, 247), 0.1));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.label {
|
|
58
|
+
font-family: 'Tektur Subset', system-ui, sans-serif;
|
|
59
|
+
text-transform: uppercase;
|
|
60
|
+
letter-spacing: 3px;
|
|
61
|
+
color: var(--text-ghost, #6b6b80);
|
|
62
|
+
font-weight: 500;
|
|
63
|
+
margin-top: 0.15em;
|
|
64
|
+
}
|
|
65
|
+
`,
|
|
66
|
+
];
|
|
67
|
+
|
|
68
|
+
constructor() {
|
|
69
|
+
super();
|
|
70
|
+
this.href = 'https://arclight.build';
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
connectedCallback() {
|
|
74
|
+
super.connectedCallback();
|
|
75
|
+
injectFont();
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
render() {
|
|
79
|
+
const content = html`
|
|
80
|
+
<span class="label">by</span>
|
|
81
|
+
<arclight-logo-wordmark layout="inline"></arclight-logo-wordmark>
|
|
82
|
+
`;
|
|
83
|
+
|
|
84
|
+
return this.href
|
|
85
|
+
? html`<a class="badge" href="${this.href}">${content}</a>`
|
|
86
|
+
: html`<span class="badge">${content}</span>`;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
customElements.define('arclight-by', ArclightBy);
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { tokenStyles } from '../shared-styles.js';
|
|
3
|
+
import './logo.js';
|
|
4
|
+
import './wordmark.js';
|
|
5
|
+
|
|
6
|
+
const LAYOUTS = {
|
|
7
|
+
inline: { logoSize: 'sm', wordmarkSize: 'sm', gap: '8px' },
|
|
8
|
+
stacked: { logoSize: 'lg', wordmarkSize: 'stacked', gap: '12px' },
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
/** @tag arclight-logo-wordmark */
|
|
12
|
+
export class ArclightLogoWordmark extends LitElement {
|
|
13
|
+
static properties = {
|
|
14
|
+
layout: { type: String, reflect: true },
|
|
15
|
+
href: { type: String },
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
static styles = [
|
|
19
|
+
tokenStyles,
|
|
20
|
+
css`
|
|
21
|
+
:host {
|
|
22
|
+
display: inline-block;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.lockup, a.lockup {
|
|
26
|
+
display: inline-flex;
|
|
27
|
+
align-items: center;
|
|
28
|
+
white-space: nowrap;
|
|
29
|
+
user-select: none;
|
|
30
|
+
text-decoration: none;
|
|
31
|
+
color: inherit;
|
|
32
|
+
transition:
|
|
33
|
+
transform 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
|
34
|
+
filter 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
a.lockup:hover {
|
|
38
|
+
transform: translateY(-1px);
|
|
39
|
+
filter:
|
|
40
|
+
drop-shadow(0 0 8px rgba(var(--accent-primary-rgb, 77, 126, 247), 0.3))
|
|
41
|
+
drop-shadow(0 0 20px rgba(var(--accent-secondary-rgb, 168, 85, 247), 0.12));
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
:host([layout="stacked"]) .lockup {
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
:host(:not([layout="stacked"])) arclight-wordmark {
|
|
49
|
+
margin-top: 0.15em;
|
|
50
|
+
}
|
|
51
|
+
`,
|
|
52
|
+
];
|
|
53
|
+
|
|
54
|
+
constructor() {
|
|
55
|
+
super();
|
|
56
|
+
this.layout = 'inline';
|
|
57
|
+
this.href = 'https://arclight.build';
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
render() {
|
|
61
|
+
const s = LAYOUTS[this.layout] || LAYOUTS.inline;
|
|
62
|
+
const content = html`
|
|
63
|
+
<arclight-logo size="${s.logoSize}"></arclight-logo>
|
|
64
|
+
<arclight-wordmark size="${s.wordmarkSize}"></arclight-wordmark>
|
|
65
|
+
`;
|
|
66
|
+
|
|
67
|
+
return this.href
|
|
68
|
+
? html`<a class="lockup" href="${this.href}" style="gap: ${s.gap};">${content}</a>`
|
|
69
|
+
: html`<span class="lockup" style="gap: ${s.gap};">${content}</span>`;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
customElements.define('arclight-logo-wordmark', ArclightLogoWordmark);
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { tokenStyles } from '../shared-styles.js';
|
|
3
|
+
import { logoSm, logoLg } from '../assets/logo.js';
|
|
4
|
+
|
|
5
|
+
const SIZES = { sm: { svg: logoSm, height: 28 }, lg: { svg: logoLg, height: 96 } };
|
|
6
|
+
|
|
7
|
+
/** @tag arclight-logo */
|
|
8
|
+
export class ArclightLogo extends LitElement {
|
|
9
|
+
static properties = {
|
|
10
|
+
size: { type: String, reflect: true },
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
static styles = [
|
|
14
|
+
tokenStyles,
|
|
15
|
+
css`
|
|
16
|
+
:host {
|
|
17
|
+
display: inline-flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
line-height: 0;
|
|
21
|
+
color: var(--text-primary, #e8e8ec);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
@keyframes pulse-expand {
|
|
25
|
+
0%, 100% { transform: scale(1); opacity: 0.7; }
|
|
26
|
+
50% { transform: scale(1.15); opacity: 1; }
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes pulse-contract {
|
|
30
|
+
0%, 100% { transform: scale(1); opacity: 1; }
|
|
31
|
+
50% { transform: scale(0.92); opacity: 0.5; }
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.pulse-out {
|
|
35
|
+
animation: pulse-expand 4s ease-in-out infinite;
|
|
36
|
+
transform-box: fill-box;
|
|
37
|
+
transform-origin: center;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.pulse-in {
|
|
41
|
+
animation: pulse-contract 4s ease-in-out infinite;
|
|
42
|
+
transform-box: fill-box;
|
|
43
|
+
transform-origin: center;
|
|
44
|
+
}
|
|
45
|
+
`,
|
|
46
|
+
];
|
|
47
|
+
|
|
48
|
+
constructor() {
|
|
49
|
+
super();
|
|
50
|
+
this.size = 'sm';
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
render() {
|
|
54
|
+
const s = SIZES[this.size] || SIZES.sm;
|
|
55
|
+
return html`${s.svg}`;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
updated() {
|
|
59
|
+
const s = SIZES[this.size] || SIZES.sm;
|
|
60
|
+
const svg = this.renderRoot.querySelector('svg');
|
|
61
|
+
if (svg) {
|
|
62
|
+
svg.style.height = `${s.height}px`;
|
|
63
|
+
svg.style.width = 'auto';
|
|
64
|
+
|
|
65
|
+
// Tag the pulsing rings — skip the first child (solid dot)
|
|
66
|
+
const circles = svg.querySelector('#Circles');
|
|
67
|
+
if (circles) {
|
|
68
|
+
const children = [...circles.children];
|
|
69
|
+
// 0: solid dot (stays still)
|
|
70
|
+
// 1: 7% opacity ring — expands out
|
|
71
|
+
// 2: large gradient — contracts in (counter-motion)
|
|
72
|
+
// 3: medium gradient — expands out
|
|
73
|
+
if (children[1]) { children[1].classList.add('pulse-out'); children[1].style.animationDelay = '0s'; }
|
|
74
|
+
if (children[2]) { children[2].classList.add('pulse-in'); children[2].style.animationDelay = '-1s'; }
|
|
75
|
+
if (children[3]) { children[3].classList.add('pulse-out'); children[3].style.animationDelay = '-2s'; }
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
customElements.define('arclight-logo', ArclightLogo);
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { tokenStyles } from '../shared-styles.js';
|
|
3
|
+
import { tekturSubsetBase64 } from '../assets/tektur-font.js';
|
|
4
|
+
import './logo-wordmark.js';
|
|
5
|
+
|
|
6
|
+
// @font-face must be in document scope — shadow DOM won't pick it up.
|
|
7
|
+
let fontInjected = false;
|
|
8
|
+
function injectFont() {
|
|
9
|
+
if (fontInjected) return;
|
|
10
|
+
fontInjected = true;
|
|
11
|
+
const style = document.createElement('style');
|
|
12
|
+
style.textContent = `
|
|
13
|
+
@font-face {
|
|
14
|
+
font-family: 'Tektur Subset';
|
|
15
|
+
src: url('data:font/woff2;base64,${tekturSubsetBase64}') format('woff2');
|
|
16
|
+
font-weight: 400 900;
|
|
17
|
+
font-display: block;
|
|
18
|
+
}
|
|
19
|
+
`;
|
|
20
|
+
document.head.appendChild(style);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const SIZES = {
|
|
24
|
+
sm: { fontSize: '9px', gap: '6px' },
|
|
25
|
+
md: { fontSize: '10px', gap: '8px' },
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
/** @tag arclight-powered-by */
|
|
29
|
+
export class ArclightPoweredBy extends LitElement {
|
|
30
|
+
static properties = {
|
|
31
|
+
size: { type: String, reflect: true },
|
|
32
|
+
href: { type: String },
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
static styles = [
|
|
36
|
+
tokenStyles,
|
|
37
|
+
css`
|
|
38
|
+
:host {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.badge, a.badge {
|
|
43
|
+
display: inline-flex;
|
|
44
|
+
align-items: center;
|
|
45
|
+
white-space: nowrap;
|
|
46
|
+
user-select: none;
|
|
47
|
+
text-decoration: none;
|
|
48
|
+
color: inherit;
|
|
49
|
+
transition:
|
|
50
|
+
transform 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)),
|
|
51
|
+
filter 400ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
a.badge:hover {
|
|
55
|
+
transform: translateY(-1px);
|
|
56
|
+
filter:
|
|
57
|
+
drop-shadow(0 0 6px rgba(var(--accent-primary-rgb, 77, 126, 247), 0.25))
|
|
58
|
+
drop-shadow(0 0 16px rgba(var(--accent-secondary-rgb, 168, 85, 247), 0.1));
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.label {
|
|
62
|
+
font-family: 'Tektur Subset', system-ui, sans-serif;
|
|
63
|
+
text-transform: uppercase;
|
|
64
|
+
letter-spacing: 3px;
|
|
65
|
+
color: var(--text-ghost, #6b6b80);
|
|
66
|
+
font-weight: 500;
|
|
67
|
+
margin-top: 0.15em;
|
|
68
|
+
}
|
|
69
|
+
`,
|
|
70
|
+
];
|
|
71
|
+
|
|
72
|
+
connectedCallback() {
|
|
73
|
+
super.connectedCallback();
|
|
74
|
+
injectFont();
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
constructor() {
|
|
78
|
+
super();
|
|
79
|
+
this.size = 'md';
|
|
80
|
+
this.href = 'https://arclight.build';
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
render() {
|
|
84
|
+
const s = SIZES[this.size] || SIZES.md;
|
|
85
|
+
const content = html`
|
|
86
|
+
<span class="label">Powered by</span>
|
|
87
|
+
<arclight-logo-wordmark layout="inline"></arclight-logo-wordmark>
|
|
88
|
+
`;
|
|
89
|
+
|
|
90
|
+
return this.href
|
|
91
|
+
? html`<a class="badge" href="${this.href}" style="gap: ${s.gap}; font-size: ${s.fontSize};">${content}</a>`
|
|
92
|
+
: html`<span class="badge" style="gap: ${s.gap}; font-size: ${s.fontSize};">${content}</span>`;
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
customElements.define('arclight-powered-by', ArclightPoweredBy);
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { tokenStyles } from '../shared-styles.js';
|
|
3
|
+
import { hostGroteskSubsetBase64 } from '../assets/wordmark-font.js';
|
|
4
|
+
|
|
5
|
+
const SIZES = {
|
|
6
|
+
sm: { fontSize: '13px', fontWeight: '400', letterSpacing: '6px' },
|
|
7
|
+
md: { fontSize: '18px', fontWeight: '400', letterSpacing: '9px' },
|
|
8
|
+
lg: { fontSize: '24px', fontWeight: '400', letterSpacing: '12px' },
|
|
9
|
+
stacked: { fontSize: '16px', fontWeight: '400', letterSpacing: '8px' },
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
// @font-face must be in document scope — shadow DOM won't pick it up.
|
|
13
|
+
let fontInjected = false;
|
|
14
|
+
function injectFont() {
|
|
15
|
+
if (fontInjected) return;
|
|
16
|
+
fontInjected = true;
|
|
17
|
+
const style = document.createElement('style');
|
|
18
|
+
style.textContent = `
|
|
19
|
+
@font-face {
|
|
20
|
+
font-family: 'Host Grotesk Subset';
|
|
21
|
+
src: url('data:font/woff2;base64,${hostGroteskSubsetBase64}') format('woff2');
|
|
22
|
+
font-weight: 100 900;
|
|
23
|
+
font-display: block;
|
|
24
|
+
}
|
|
25
|
+
`;
|
|
26
|
+
document.head.appendChild(style);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/** @tag arclight-wordmark */
|
|
30
|
+
export class ArclightWordmark extends LitElement {
|
|
31
|
+
static properties = {
|
|
32
|
+
size: { type: String, reflect: true },
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
static styles = [
|
|
36
|
+
tokenStyles,
|
|
37
|
+
css`
|
|
38
|
+
:host {
|
|
39
|
+
display: inline-block;
|
|
40
|
+
line-height: 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.wordmark {
|
|
44
|
+
font-family: 'Host Grotesk Subset', system-ui, sans-serif;
|
|
45
|
+
text-transform: uppercase;
|
|
46
|
+
color: var(--text-primary, #e8e8ec);
|
|
47
|
+
white-space: nowrap;
|
|
48
|
+
user-select: none;
|
|
49
|
+
}
|
|
50
|
+
`,
|
|
51
|
+
];
|
|
52
|
+
|
|
53
|
+
constructor() {
|
|
54
|
+
super();
|
|
55
|
+
this.size = 'sm';
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
connectedCallback() {
|
|
59
|
+
super.connectedCallback();
|
|
60
|
+
injectFont();
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
render() {
|
|
64
|
+
const s = SIZES[this.size] || SIZES.sm;
|
|
65
|
+
return html`
|
|
66
|
+
<span
|
|
67
|
+
class="wordmark"
|
|
68
|
+
style="font-size: ${s.fontSize}; font-weight: ${s.fontWeight}; letter-spacing: ${s.letterSpacing};"
|
|
69
|
+
>ARCLIGHT</span>
|
|
70
|
+
`;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
customElements.define('arclight-wordmark', ArclightWordmark);
|
package/src/index.js
ADDED
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { ArclightLogo } from './components/logo.js';
|
|
2
|
+
export { ArclightWordmark } from './components/wordmark.js';
|
|
3
|
+
export { ArclightLogoWordmark } from './components/logo-wordmark.js';
|
|
4
|
+
export { ArclightBy } from './components/by-arclight.js';
|
|
5
|
+
export { ArclightPoweredBy } from './components/powered-by.js';
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Re-export tokenStyles from the main arc-ui package.
|
|
3
|
+
*
|
|
4
|
+
* Uses the barrel export which includes shared-styles via the index.
|
|
5
|
+
* We import the css helper and define a minimal subset of tokens needed
|
|
6
|
+
* by brand components — the full theme tokens (colors, gradients) inherit
|
|
7
|
+
* from base.css on the document root.
|
|
8
|
+
*/
|
|
9
|
+
import { css } from 'lit';
|
|
10
|
+
|
|
11
|
+
export const tokenStyles = css`
|
|
12
|
+
*, *::before, *::after {
|
|
13
|
+
margin: 0;
|
|
14
|
+
padding: 0;
|
|
15
|
+
box-sizing: border-box;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
:host {
|
|
19
|
+
--font-body: 'Host Grotesk', system-ui, sans-serif;
|
|
20
|
+
--font-accent: 'Tektur', system-ui, sans-serif;
|
|
21
|
+
|
|
22
|
+
--space-xs: 4px;
|
|
23
|
+
--space-sm: 8px;
|
|
24
|
+
--space-md: 16px;
|
|
25
|
+
|
|
26
|
+
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
|
27
|
+
}
|
|
28
|
+
`;
|