@orangecheck/design 0.27.0 → 0.28.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/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +99 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +98 -4
- package/dist/index.mjs.map +1 -1
- package/dist/styles/sigil.css +161 -0
- package/dist/styles.css +1 -0
- package/dist/tokens.d.mts +13 -1
- package/dist/tokens.d.ts +13 -1
- package/dist/tokens.js +97 -0
- package/dist/tokens.js.map +1 -1
- package/dist/tokens.mjs +96 -2
- package/dist/tokens.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* oc-sigil — the brand mark as a deep-set 3D emboss (aurora depth R3).
|
|
3
|
+
*
|
|
4
|
+
* Tier A is pure CSS: 6 stacked <use> copies of the normalized glyph under
|
|
5
|
+
* perspective + translateZ, each an OPAQUE color-mix toward --background
|
|
6
|
+
* (occlusion, not translucency — enclosed counters never moiré, and the
|
|
7
|
+
* contrast ceiling is compiled in: the loudest layer sits 52% toward the
|
|
8
|
+
* background, so worst-frame text contrast holds by construction). The drift
|
|
9
|
+
* is compositor-only transform at aurora energy, carries `.oc-ambient`
|
|
10
|
+
* (inherits the family oc_motion pause), and freezes under
|
|
11
|
+
* prefers-reduced-motion.
|
|
12
|
+
*
|
|
13
|
+
* PRESERVE-3D FOOTGUN: never put mask / filter / opacity<1 / overflow on
|
|
14
|
+
* .oc-sigil__drift or .oc-sigil__par — any of them silently flattens the
|
|
15
|
+
* stack. The edge fade lives on the OUTER .oc-sigil wrapper, which is safe.
|
|
16
|
+
*
|
|
17
|
+
* Two registers, one geometry, switched here in CSS (zero hydration flash):
|
|
18
|
+
* ember (default root) shows the filled letterpress stack; the cypherpunk
|
|
19
|
+
* skins show the wireframe stack instead.
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
.oc-sigil {
|
|
23
|
+
position: absolute;
|
|
24
|
+
pointer-events: none;
|
|
25
|
+
contain: layout paint;
|
|
26
|
+
perspective: 1100px;
|
|
27
|
+
/* edge fade on the wrapper (NOT the 3D stack) so the emboss dissolves
|
|
28
|
+
into the aurora field instead of ending in a hard box */
|
|
29
|
+
-webkit-mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
|
|
30
|
+
mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* corner anchors — the bleed crops against the hero's overflow-hidden */
|
|
34
|
+
.oc-sigil--bottom-left {
|
|
35
|
+
left: -8%;
|
|
36
|
+
bottom: -16%;
|
|
37
|
+
}
|
|
38
|
+
.oc-sigil--bottom-right {
|
|
39
|
+
right: -8%;
|
|
40
|
+
bottom: -16%;
|
|
41
|
+
}
|
|
42
|
+
.oc-sigil--top-left {
|
|
43
|
+
left: -8%;
|
|
44
|
+
top: -14%;
|
|
45
|
+
}
|
|
46
|
+
.oc-sigil--top-right {
|
|
47
|
+
right: -8%;
|
|
48
|
+
top: -14%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.oc-sigil__drift {
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 100%;
|
|
54
|
+
transform-style: preserve-3d;
|
|
55
|
+
animation: oc-sigil-drift 30s ease-in-out infinite;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.oc-sigil__par {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
transform-style: preserve-3d;
|
|
62
|
+
transform: rotateX(var(--oc-sigil-rx, 0deg)) rotateY(var(--oc-sigil-ry, 0deg));
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes oc-sigil-drift {
|
|
66
|
+
0%,
|
|
67
|
+
100% {
|
|
68
|
+
transform: rotateX(14deg) rotateY(calc(-8deg + var(--oc-sigil-seed, 0deg)));
|
|
69
|
+
}
|
|
70
|
+
50% {
|
|
71
|
+
transform: rotateX(17deg) rotateY(calc(-4deg + var(--oc-sigil-seed, 0deg)));
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.oc-sigil__layer {
|
|
76
|
+
position: absolute;
|
|
77
|
+
inset: 0;
|
|
78
|
+
width: 100%;
|
|
79
|
+
height: 100%;
|
|
80
|
+
}
|
|
81
|
+
/* opaque extrusion ramp — deep layers dissolve toward the page background;
|
|
82
|
+
the ramp endpoints ARE the compiled-in visibility floor + contrast ceiling */
|
|
83
|
+
.oc-sigil__layer-0 {
|
|
84
|
+
transform: translateZ(0px);
|
|
85
|
+
color: color-mix(in oklab, var(--primary), var(--background) 88%);
|
|
86
|
+
}
|
|
87
|
+
.oc-sigil__layer-1 {
|
|
88
|
+
transform: translateZ(3px);
|
|
89
|
+
color: color-mix(in oklab, var(--primary), var(--background) 82%);
|
|
90
|
+
}
|
|
91
|
+
.oc-sigil__layer-2 {
|
|
92
|
+
transform: translateZ(6px);
|
|
93
|
+
color: color-mix(in oklab, var(--primary), var(--background) 76%);
|
|
94
|
+
}
|
|
95
|
+
.oc-sigil__layer-3 {
|
|
96
|
+
transform: translateZ(9px);
|
|
97
|
+
color: color-mix(in oklab, var(--primary), var(--background) 70%);
|
|
98
|
+
}
|
|
99
|
+
.oc-sigil__layer-4 {
|
|
100
|
+
transform: translateZ(12px);
|
|
101
|
+
color: color-mix(in oklab, var(--primary), var(--background) 62%);
|
|
102
|
+
}
|
|
103
|
+
.oc-sigil__layer-5 {
|
|
104
|
+
transform: translateZ(15px);
|
|
105
|
+
color: color-mix(in oklab, var(--primary), var(--background) 52%);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* register switch — filled letterpress under ember (the bare-root default),
|
|
109
|
+
wireframe under the four cypherpunk skins; both stacks are in the markup so
|
|
110
|
+
the swap is pure CSS (no hydration flash, no JS) */
|
|
111
|
+
.oc-sigil__use-wire {
|
|
112
|
+
display: none;
|
|
113
|
+
}
|
|
114
|
+
:root[data-oc-theme='orangecheck'] .oc-sigil__use-filled,
|
|
115
|
+
:root[data-oc-theme='phosphor'] .oc-sigil__use-filled,
|
|
116
|
+
:root[data-oc-theme='lightning'] .oc-sigil__use-filled,
|
|
117
|
+
:root[data-oc-theme='gold'] .oc-sigil__use-filled {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
:root[data-oc-theme='orangecheck'] .oc-sigil__use-wire,
|
|
121
|
+
:root[data-oc-theme='phosphor'] .oc-sigil__use-wire,
|
|
122
|
+
:root[data-oc-theme='lightning'] .oc-sigil__use-wire,
|
|
123
|
+
:root[data-oc-theme='gold'] .oc-sigil__use-wire {
|
|
124
|
+
display: inline;
|
|
125
|
+
}
|
|
126
|
+
/* wireframe stack thins to fewer visible planes — terminal register */
|
|
127
|
+
:root[data-oc-theme='orangecheck'] .oc-sigil__layer-1,
|
|
128
|
+
:root[data-oc-theme='orangecheck'] .oc-sigil__layer-3,
|
|
129
|
+
:root[data-oc-theme='phosphor'] .oc-sigil__layer-1,
|
|
130
|
+
:root[data-oc-theme='phosphor'] .oc-sigil__layer-3,
|
|
131
|
+
:root[data-oc-theme='lightning'] .oc-sigil__layer-1,
|
|
132
|
+
:root[data-oc-theme='lightning'] .oc-sigil__layer-3,
|
|
133
|
+
:root[data-oc-theme='gold'] .oc-sigil__layer-1,
|
|
134
|
+
:root[data-oc-theme='gold'] .oc-sigil__layer-3 {
|
|
135
|
+
display: none;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* mobile = hidden, full stop — decoration never spends phone-fold real estate */
|
|
139
|
+
@media (max-width: 640px) {
|
|
140
|
+
.oc-sigil {
|
|
141
|
+
display: none;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* SVG fills are NOT auto-stripped by forced colors the way gradients are */
|
|
146
|
+
@media (forced-colors: active) {
|
|
147
|
+
.oc-sigil {
|
|
148
|
+
display: none;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* OS-level reduced motion: freeze at the designed resting pose (the 0% frame
|
|
153
|
+
IS the art-directed composition) — the oc_motion pause rides .oc-ambient */
|
|
154
|
+
@media (prefers-reduced-motion: reduce) {
|
|
155
|
+
.oc-sigil__drift {
|
|
156
|
+
animation: none !important;
|
|
157
|
+
}
|
|
158
|
+
.oc-sigil__par {
|
|
159
|
+
transform: none !important;
|
|
160
|
+
}
|
|
161
|
+
}
|
package/dist/styles.css
CHANGED
package/dist/tokens.d.mts
CHANGED
|
@@ -90,4 +90,16 @@ declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
|
|
|
90
90
|
declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
|
|
91
91
|
declare function subscribeOcTheme(cb: () => void): () => void;
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
type OcGlyphSlug = 'orangecheck' | 'attest' | 'docs' | 'me' | 'vault' | 'fleet' | 'chat' | 'cosign' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'btc';
|
|
94
|
+
declare const OC_GLYPH_CANVAS = 1024;
|
|
95
|
+
declare const OC_GLYPHS: Record<OcGlyphSlug, string>;
|
|
96
|
+
|
|
97
|
+
interface OcSigilProps {
|
|
98
|
+
glyph: OcGlyphSlug;
|
|
99
|
+
corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
100
|
+
parallax?: boolean;
|
|
101
|
+
className?: string;
|
|
102
|
+
}
|
|
103
|
+
declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
|
|
104
|
+
|
|
105
|
+
export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_GLYPHS, OC_GLYPH_CANVAS, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcGlyphSlug, type OcMotion, type OcSceneRGB, type OcSceneTokens, OcSigil, type OcSigilProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };
|
package/dist/tokens.d.ts
CHANGED
|
@@ -90,4 +90,16 @@ declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
|
|
|
90
90
|
declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
|
|
91
91
|
declare function subscribeOcTheme(cb: () => void): () => void;
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
type OcGlyphSlug = 'orangecheck' | 'attest' | 'docs' | 'me' | 'vault' | 'fleet' | 'chat' | 'cosign' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'btc';
|
|
94
|
+
declare const OC_GLYPH_CANVAS = 1024;
|
|
95
|
+
declare const OC_GLYPHS: Record<OcGlyphSlug, string>;
|
|
96
|
+
|
|
97
|
+
interface OcSigilProps {
|
|
98
|
+
glyph: OcGlyphSlug;
|
|
99
|
+
corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
100
|
+
parallax?: boolean;
|
|
101
|
+
className?: string;
|
|
102
|
+
}
|
|
103
|
+
declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
|
|
104
|
+
|
|
105
|
+
export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_GLYPHS, OC_GLYPH_CANVAS, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcGlyphSlug, type OcMotion, type OcSceneRGB, type OcSceneTokens, OcSigil, type OcSigilProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };
|
package/dist/tokens.js
CHANGED
|
@@ -936,14 +936,111 @@ function OcAppearanceMenu({
|
|
|
936
936
|
// src/tokens/index.ts
|
|
937
937
|
init_scene_tokens();
|
|
938
938
|
|
|
939
|
+
// src/tokens/glyphs.ts
|
|
940
|
+
var OC_GLYPH_CANVAS = 1024;
|
|
941
|
+
var OC_GLYPHS = {
|
|
942
|
+
orangecheck: `<path d="M518 856Q463 820 438.5 785.5Q414 751 414 711Q414 657 462.5 613.0Q511 569 711 473Q766 509 790.5 543.5Q815 578 815 621Q815 702 550 840ZM930 1460V1235Q845 1265 779.0 1279.5Q713 1294 659 1294Q583 1294 540.5 1265.0Q498 1236 498 1184Q498 1109 701 1004Q720 994 729 989Q943 879 1002.0 808.5Q1061 738 1061 637Q1061 548 1013.5 484.0Q966 420 864 373Q934 323 966.5 261.5Q999 200 999 119Q999 -28 894.5 -111.5Q790 -195 604 -195Q515 -195 429.0 -180.5Q343 -166 258 -137V92Q343 62 424.0 46.5Q505 31 578 31Q655 31 696.0 59.5Q737 88 737 141Q737 211 523 326L512 332L486 346Q170 516 170 688Q170 782 222.0 851.5Q274 921 371 954Q300 1004 268.0 1064.0Q236 1124 236 1206Q236 1348 340.0 1434.0Q444 1520 616 1520Q690 1520 768.5 1505.0Q847 1490 930 1460Z" fill="__FG__" transform="translate(225.3457 820.5434) scale(0.465726 -0.465726)"/>`,
|
|
943
|
+
attest: `<g transform="scale(42.666667 42.666667)"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" fill="__FG__" stroke="__FG__" stroke-width="0.5"/><path d="M9 12 l2 2 l4 -4" fill="none" stroke="__INK__" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></g>`,
|
|
944
|
+
docs: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><rect x="8" y="9" width="8" height="1.25" fill="__INK__"/><rect x="8" y="11.5" width="8" height="1.25" fill="__INK__"/><rect x="8" y="14" width="5" height="1.25" fill="__INK__"/></g>`,
|
|
945
|
+
me: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><circle cx="12" cy="11" r="2" fill="__INK__"/><path d="M8 16.5 C 8 14.5, 9.5 13.5, 12 13.5 C 14.5 13.5, 16 14.5, 16 16.5" fill="none" stroke="__INK__" stroke-width="1.5" stroke-linecap="square"/></g>`,
|
|
946
|
+
vault: `<g transform="scale(42.666667 42.666667)"><path d="M8 9 L8 6.5 Q8 3.5 12 3.5 Q16 3.5 16 6.5 L16 9" fill="none" stroke="__FG__" stroke-width="2" stroke-linecap="square"/><rect x="4" y="9" width="16" height="12" fill="__FG__" stroke="__FG__" stroke-width="0.75"/><circle cx="12" cy="14.5" r="2.75" fill="none" stroke="__INK__" stroke-width="1.5"/><rect x="11.4" y="14.5" width="1.2" height="3.25" fill="__INK__"/><rect x="5.5" y="19" width="2.25" height="1.5" fill="__INK__"/><rect x="16.25" y="19" width="2.25" height="1.5" fill="__INK__"/></g>`,
|
|
947
|
+
fleet: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><path d="M8.5 9.5 L11 12 L8.5 14.5" fill="none" stroke="__INK__" stroke-width="1.6" stroke-linejoin="miter" stroke-linecap="square"/><rect x="12" y="14" width="4" height="1.4" fill="__INK__"/></g>`,
|
|
948
|
+
chat: `<g transform="scale(42.666667 42.666667)"><path d="M5 4 H19 A2 2 0 0 1 21 6 V13 A2 2 0 0 1 19 15 H11 L7 19 V15 H5 A2 2 0 0 1 3 13 V6 A2 2 0 0 1 5 4 Z" fill="__FG__" stroke="__FG__" stroke-width="1.6" stroke-linejoin="round"/><circle cx="8" cy="9.5" r="1.15" fill="__INK__"/><circle cx="12" cy="9.5" r="1.15" fill="__INK__"/><circle cx="16" cy="9.5" r="1.15" fill="__INK__"/></g>`,
|
|
949
|
+
cosign: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><circle cx="9.2" cy="10.4" r="1.65" fill="__INK__"/><circle cx="14.8" cy="10.4" r="1.65" fill="__INK__"/><path d="M6.5 16.6 C 6.5 14.9, 7.6 14.1, 9.2 14.1 C 10.8 14.1, 11.9 14.9, 11.9 16.6" fill="none" stroke="__INK__" stroke-width="1.5" stroke-linecap="square"/><path d="M12.1 16.6 C 12.1 14.9, 13.2 14.1, 14.8 14.1 C 16.4 14.1, 17.5 14.9, 17.5 16.6" fill="none" stroke="__INK__" stroke-width="1.5" stroke-linecap="square"/></g>`,
|
|
950
|
+
lock: `<g transform="scale(42.666667 42.666667)"><path d="M7 11V7.5a5 5 0 0 1 10 0V11" fill="none" stroke="__FG__" stroke-width="2" stroke-linecap="square"/><rect x="4" y="11" width="16" height="10" fill="__FG__" stroke="__FG__" stroke-width="0.75"/><rect x="11" y="14" width="2" height="4" fill="__INK__"/><rect x="10.25" y="14" width="3.5" height="1.5" fill="__INK__"/></g>`,
|
|
951
|
+
vote: `<g transform="scale(42.666667 42.666667)"><rect x="2" y="14" width="4" height="8" fill="__FG__"/><rect x="10" y="8" width="4" height="14" fill="__FG__"/><rect x="18" y="2" width="4" height="20" fill="__FG__"/></g>`,
|
|
952
|
+
stamp: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><rect x="11.25" y="8.5" width="1.5" height="7" fill="__INK__"/><rect x="9.5" y="10" width="5" height="1.5" fill="__INK__"/><path d="M9 14.5 L12 15.75 L15 14.5" fill="none" stroke="__INK__" stroke-width="1.5" stroke-linejoin="miter" stroke-linecap="square"/></g>`,
|
|
953
|
+
agent: `<g transform="scale(42.666667 42.666667)"><path d="M4 20 L12 4 L20 20 Z" fill="__FG__" stroke="__FG__" stroke-width="1.5" stroke-linejoin="miter"/><rect x="7.5" y="13.5" width="9" height="2" fill="__INK__"/><rect x="11" y="9" width="2" height="2" fill="__INK__"/></g>`,
|
|
954
|
+
pledge: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><rect x="6" y="6" width="12" height="12" fill="none" stroke="__INK__" stroke-width="1.5"/><rect x="9.25" y="8.5" width="1.75" height="7" fill="__INK__"/><rect x="9.25" y="8.5" width="4.5" height="1.5" fill="__INK__"/><rect x="12.25" y="8.5" width="1.5" height="3.5" fill="__INK__"/><rect x="9.25" y="10.5" width="4.5" height="1.5" fill="__INK__"/></g>`,
|
|
955
|
+
analytics: `<g transform="scale(42.666667 42.666667)"><rect x="3" y="3" width="18" height="18" fill="__FG__"/><path d="M6 17 L10 12 L14 15 L18 8" fill="none" stroke="__INK__" stroke-width="1.8" stroke-linecap="square" stroke-linejoin="miter"/><rect x="16.6" y="6.6" width="2.8" height="2.8" fill="__INK__"/></g>`,
|
|
956
|
+
btc: `<path d="M373 1414V1676H531V1414ZM670 1414V1676H829V1414ZM373 -186V76H531V-186ZM670 -186V76H829V-186ZM129 0V1490H705Q863 1490 972.50 1441Q1082 1392 1139 1305.50Q1196 1219 1196 1103Q1196 1016 1164 951Q1132 886 1074 843Q1016 800 937 779V774Q1024 765 1095.50 721Q1167 677 1210 600.50Q1253 524 1253 416Q1253 293 1194.50 199Q1136 105 1020 52.50Q904 0 731 0ZM391 217H700Q838 217 910.50 272.50Q983 328 983 428Q983 497 950 547.50Q917 598 855.50 626Q794 654 707 654H391ZM391 858H688Q762 858 817 883.50Q872 909 902 956Q932 1003 932 1068Q932 1161 868 1217.50Q804 1274 689 1274H391Z" fill="__FG__" transform="translate(238.3907 806.9912) scale(0.395961 -0.395961)"/>`
|
|
957
|
+
};
|
|
958
|
+
var LAYERS = [0, 1, 2, 3, 4, 5];
|
|
959
|
+
function sub(markup, fg, ink) {
|
|
960
|
+
return markup.split("__FG__").join(fg).split("__INK__").join(ink).split("__BG__").join("none");
|
|
961
|
+
}
|
|
962
|
+
function OcSigil({ glyph, corner = "bottom-left", parallax = true, className }) {
|
|
963
|
+
const rawId = react.useId();
|
|
964
|
+
const id = react.useMemo(() => `oc-sigil-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`, [rawId]);
|
|
965
|
+
const parRef = react.useRef(null);
|
|
966
|
+
const seed = react.useMemo(() => {
|
|
967
|
+
let h = 0;
|
|
968
|
+
for (const ch of glyph) h = h * 31 + ch.charCodeAt(0) | 0;
|
|
969
|
+
return (h % 7 - 3) * 1.5;
|
|
970
|
+
}, [glyph]);
|
|
971
|
+
const filled = react.useMemo(() => sub(OC_GLYPHS[glyph], "currentColor", "currentColor"), [glyph]);
|
|
972
|
+
const wire = react.useMemo(() => sub(OC_GLYPHS[glyph], "none", "currentColor"), [glyph]);
|
|
973
|
+
react.useEffect(() => {
|
|
974
|
+
if (!parallax) return;
|
|
975
|
+
const el = parRef.current;
|
|
976
|
+
if (!el) return;
|
|
977
|
+
if (!matchMedia("(pointer: fine)").matches) return;
|
|
978
|
+
const prm = matchMedia("(prefers-reduced-motion: reduce)");
|
|
979
|
+
let raf = 0;
|
|
980
|
+
let tx = 0;
|
|
981
|
+
let ty = 0;
|
|
982
|
+
let cx = 0;
|
|
983
|
+
let cy = 0;
|
|
984
|
+
const allowed = () => !prm.matches && document.documentElement.getAttribute("data-oc-motion") !== "off";
|
|
985
|
+
const onMove = (e) => {
|
|
986
|
+
if (!allowed()) return;
|
|
987
|
+
tx = (e.clientX / innerWidth - 0.5) * 10;
|
|
988
|
+
ty = (e.clientY / innerHeight - 0.5) * -10;
|
|
989
|
+
if (!raf) raf = requestAnimationFrame(step);
|
|
990
|
+
};
|
|
991
|
+
const step = () => {
|
|
992
|
+
raf = 0;
|
|
993
|
+
cx += (tx - cx) * 0.06;
|
|
994
|
+
cy += (ty - cy) * 0.06;
|
|
995
|
+
el.style.setProperty("--oc-sigil-ry", `${Math.max(-5, Math.min(5, cx)).toFixed(2)}deg`);
|
|
996
|
+
el.style.setProperty("--oc-sigil-rx", `${Math.max(-5, Math.min(5, cy)).toFixed(2)}deg`);
|
|
997
|
+
if (Math.abs(tx - cx) + Math.abs(ty - cy) > 0.05) raf = requestAnimationFrame(step);
|
|
998
|
+
};
|
|
999
|
+
const onPrm = () => {
|
|
1000
|
+
if (prm.matches) {
|
|
1001
|
+
el.style.setProperty("--oc-sigil-rx", "0deg");
|
|
1002
|
+
el.style.setProperty("--oc-sigil-ry", "0deg");
|
|
1003
|
+
}
|
|
1004
|
+
};
|
|
1005
|
+
window.addEventListener("pointermove", onMove, { passive: true });
|
|
1006
|
+
prm.addEventListener?.("change", onPrm);
|
|
1007
|
+
return () => {
|
|
1008
|
+
window.removeEventListener("pointermove", onMove);
|
|
1009
|
+
prm.removeEventListener?.("change", onPrm);
|
|
1010
|
+
cancelAnimationFrame(raf);
|
|
1011
|
+
};
|
|
1012
|
+
}, [parallax]);
|
|
1013
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1014
|
+
"div",
|
|
1015
|
+
{
|
|
1016
|
+
"aria-hidden": "true",
|
|
1017
|
+
className: cn("oc-sigil", `oc-sigil--${corner}`, className),
|
|
1018
|
+
style: { "--oc-sigil-seed": `${seed}deg` },
|
|
1019
|
+
children: [
|
|
1020
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "0", height: "0", style: { position: "absolute" }, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
|
|
1021
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { id: `${id}-filled`, dangerouslySetInnerHTML: { __html: filled } }),
|
|
1022
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { id: `${id}-wire`, dangerouslySetInnerHTML: { __html: wire } })
|
|
1023
|
+
] }) }),
|
|
1024
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "oc-sigil__drift oc-ambient", children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: parRef, className: "oc-sigil__par", children: LAYERS.map((n) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 1024 1024", className: `oc-sigil__layer oc-sigil__layer-${n}`, children: [
|
|
1025
|
+
/* @__PURE__ */ jsxRuntime.jsx("use", { className: "oc-sigil__use-filled", href: `#${id}-filled` }),
|
|
1026
|
+
/* @__PURE__ */ jsxRuntime.jsx("use", { className: "oc-sigil__use-wire", href: `#${id}-wire` })
|
|
1027
|
+
] }, n)) }) })
|
|
1028
|
+
]
|
|
1029
|
+
}
|
|
1030
|
+
);
|
|
1031
|
+
}
|
|
1032
|
+
|
|
939
1033
|
exports.AppearanceControls = AppearanceControls;
|
|
940
1034
|
exports.DEFAULT_OC_THEME = DEFAULT_OC_THEME;
|
|
941
1035
|
exports.OC_DEFAULT_ACCENT = OC_DEFAULT_ACCENT;
|
|
1036
|
+
exports.OC_GLYPHS = OC_GLYPHS;
|
|
1037
|
+
exports.OC_GLYPH_CANVAS = OC_GLYPH_CANVAS;
|
|
942
1038
|
exports.OC_MOTION_COOKIE = OC_MOTION_COOKIE;
|
|
943
1039
|
exports.OC_SKIN_COOKIE = OC_SKIN_COOKIE;
|
|
944
1040
|
exports.OC_THEMES = OC_THEMES;
|
|
945
1041
|
exports.OcAppearanceMenu = OcAppearanceMenu;
|
|
946
1042
|
exports.OcAurora = OcAurora;
|
|
1043
|
+
exports.OcSigil = OcSigil;
|
|
947
1044
|
exports.OcThemeBridge = OcThemeBridge;
|
|
948
1045
|
exports.OcThemePicker = OcThemePicker;
|
|
949
1046
|
exports.OcThemeProvider = OcThemeProvider;
|