@orangecheck/design 0.26.0 → 0.28.0

package/dist/primitives.d.mts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/dist/primitives.d.ts

@@ -17,7 +17,7 @@ import { ToasterProps } from 'sonner';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "onBrand" | "onBrandOutline" | null | undefined;
     size?: "default" | "icon" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {

package/dist/styles/aurora.css

@@ -258,3 +258,32 @@
 :root[data-oc-motion='off'] .oc-ambient {
     animation-play-state: paused !important;
 }
+
+/* ── OcAuroraGL (aurora depth R2) ─────────────────────────────────────
+   The lazy WebGL2 silk field renders inside the same container, so the radial
+   mask, the mode-op × intensity opacity, and ember's --au-* re-hue all govern
+   it for free. Once the first GL frame lands (`--gl-live`), the CSS blobs
+   pause AND hide — dimming alone does not stop blur rasterization; the page
+   pays for exactly one aurora at any moment. Any demotion removes the class
+   and the blobs resume, invisibly. */
+.oc-aurora__gl {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+}
+.oc-aurora--gl-live .oc-aurora__gl {
+    opacity: 1;
+}
+.oc-aurora--gl-live .oc-aurora__blob {
+    visibility: hidden;
+    animation-play-state: paused;
+}
+/* Canvas raster is NOT stripped by forced colors the way gradients are. */
+@media (forced-colors: active) {
+    .oc-aurora__gl {
+        display: none;
+    }
+}

package/dist/styles/sigil.css

@@ -0,0 +1,161 @@
+/*
+ * oc-sigil — the brand mark as a deep-set 3D emboss (aurora depth R3).
+ *
+ * Tier A is pure CSS: 6 stacked <use> copies of the normalized glyph under
+ * perspective + translateZ, each an OPAQUE color-mix toward --background
+ * (occlusion, not translucency — enclosed counters never moiré, and the
+ * contrast ceiling is compiled in: the loudest layer sits 52% toward the
+ * background, so worst-frame text contrast holds by construction). The drift
+ * is compositor-only transform at aurora energy, carries `.oc-ambient`
+ * (inherits the family oc_motion pause), and freezes under
+ * prefers-reduced-motion.
+ *
+ * PRESERVE-3D FOOTGUN: never put mask / filter / opacity<1 / overflow on
+ * .oc-sigil__drift or .oc-sigil__par — any of them silently flattens the
+ * stack. The edge fade lives on the OUTER .oc-sigil wrapper, which is safe.
+ *
+ * Two registers, one geometry, switched here in CSS (zero hydration flash):
+ * ember (default root) shows the filled letterpress stack; the cypherpunk
+ * skins show the wireframe stack instead.
+ */
+
+.oc-sigil {
+    position: absolute;
+    pointer-events: none;
+    contain: layout paint;
+    perspective: 1100px;
+    /* edge fade on the wrapper (NOT the 3D stack) so the emboss dissolves
+       into the aurora field instead of ending in a hard box */
+    -webkit-mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
+    mask-image: radial-gradient(120% 120% at 55% 42%, #000 45%, transparent 92%);
+}
+
+/* corner anchors — the bleed crops against the hero's overflow-hidden */
+.oc-sigil--bottom-left {
+    left: -8%;
+    bottom: -16%;
+}
+.oc-sigil--bottom-right {
+    right: -8%;
+    bottom: -16%;
+}
+.oc-sigil--top-left {
+    left: -8%;
+    top: -14%;
+}
+.oc-sigil--top-right {
+    right: -8%;
+    top: -14%;
+}
+
+.oc-sigil__drift {
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    animation: oc-sigil-drift 30s ease-in-out infinite;
+}
+
+.oc-sigil__par {
+    width: 100%;
+    height: 100%;
+    transform-style: preserve-3d;
+    transform: rotateX(var(--oc-sigil-rx, 0deg)) rotateY(var(--oc-sigil-ry, 0deg));
+}
+
+@keyframes oc-sigil-drift {
+    0%,
+    100% {
+        transform: rotateX(14deg) rotateY(calc(-8deg + var(--oc-sigil-seed, 0deg)));
+    }
+    50% {
+        transform: rotateX(17deg) rotateY(calc(-4deg + var(--oc-sigil-seed, 0deg)));
+    }
+}
+
+.oc-sigil__layer {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+}
+/* opaque extrusion ramp — deep layers dissolve toward the page background;
+   the ramp endpoints ARE the compiled-in visibility floor + contrast ceiling */
+.oc-sigil__layer-0 {
+    transform: translateZ(0px);
+    color: color-mix(in oklab, var(--primary), var(--background) 88%);
+}
+.oc-sigil__layer-1 {
+    transform: translateZ(3px);
+    color: color-mix(in oklab, var(--primary), var(--background) 82%);
+}
+.oc-sigil__layer-2 {
+    transform: translateZ(6px);
+    color: color-mix(in oklab, var(--primary), var(--background) 76%);
+}
+.oc-sigil__layer-3 {
+    transform: translateZ(9px);
+    color: color-mix(in oklab, var(--primary), var(--background) 70%);
+}
+.oc-sigil__layer-4 {
+    transform: translateZ(12px);
+    color: color-mix(in oklab, var(--primary), var(--background) 62%);
+}
+.oc-sigil__layer-5 {
+    transform: translateZ(15px);
+    color: color-mix(in oklab, var(--primary), var(--background) 52%);
+}
+
+/* register switch — filled letterpress under ember (the bare-root default),
+   wireframe under the four cypherpunk skins; both stacks are in the markup so
+   the swap is pure CSS (no hydration flash, no JS) */
+.oc-sigil__use-wire {
+    display: none;
+}
+:root[data-oc-theme='orangecheck'] .oc-sigil__use-filled,
+:root[data-oc-theme='phosphor'] .oc-sigil__use-filled,
+:root[data-oc-theme='lightning'] .oc-sigil__use-filled,
+:root[data-oc-theme='gold'] .oc-sigil__use-filled {
+    display: none;
+}
+:root[data-oc-theme='orangecheck'] .oc-sigil__use-wire,
+:root[data-oc-theme='phosphor'] .oc-sigil__use-wire,
+:root[data-oc-theme='lightning'] .oc-sigil__use-wire,
+:root[data-oc-theme='gold'] .oc-sigil__use-wire {
+    display: inline;
+}
+/* wireframe stack thins to fewer visible planes — terminal register */
+:root[data-oc-theme='orangecheck'] .oc-sigil__layer-1,
+:root[data-oc-theme='orangecheck'] .oc-sigil__layer-3,
+:root[data-oc-theme='phosphor'] .oc-sigil__layer-1,
+:root[data-oc-theme='phosphor'] .oc-sigil__layer-3,
+:root[data-oc-theme='lightning'] .oc-sigil__layer-1,
+:root[data-oc-theme='lightning'] .oc-sigil__layer-3,
+:root[data-oc-theme='gold'] .oc-sigil__layer-1,
+:root[data-oc-theme='gold'] .oc-sigil__layer-3 {
+    display: none;
+}
+
+/* mobile = hidden, full stop — decoration never spends phone-fold real estate */
+@media (max-width: 640px) {
+    .oc-sigil {
+        display: none;
+    }
+}
+
+/* SVG fills are NOT auto-stripped by forced colors the way gradients are */
+@media (forced-colors: active) {
+    .oc-sigil {
+        display: none;
+    }
+}
+
+/* OS-level reduced motion: freeze at the designed resting pose (the 0% frame
+   IS the art-directed composition) — the oc_motion pause rides .oc-ambient */
+@media (prefers-reduced-motion: reduce) {
+    .oc-sigil__drift {
+        animation: none !important;
+    }
+    .oc-sigil__par {
+        transform: none !important;
+    }
+}

package/dist/styles.css

@@ -19,3 +19,4 @@
 @import './styles/theme.css';
 @import './styles/themes.css';
 @import './styles/aurora.css';
+@import './styles/sigil.css';

package/dist/tokens.d.mts

@@ -38,6 +38,7 @@ interface OcThemeProviderProps {
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
@@ -69,8 +70,36 @@ declare function OcAppearanceMenu({ className, triggerClassName, popoverClassNam
 
 interface OcAuroraProps {
     intensity?: number;
+    gl?: boolean;
     className?: string;
 }
-declare function OcAurora({ intensity, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
+declare function OcAurora({ intensity, gl, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin };
+interface OcSceneRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface OcSceneTokens {
+    palette: [OcSceneRGB, OcSceneRGB, OcSceneRGB, OcSceneRGB];
+    background: OcSceneRGB;
+    isDark: boolean;
+    motionOff: boolean;
+}
+declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
+declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
+declare function subscribeOcTheme(cb: () => void): () => void;
+
+type OcGlyphSlug = 'orangecheck' | 'attest' | 'docs' | 'me' | 'vault' | 'fleet' | 'chat' | 'cosign' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'btc';
+declare const OC_GLYPH_CANVAS = 1024;
+declare const OC_GLYPHS: Record<OcGlyphSlug, string>;
+
+interface OcSigilProps {
+    glyph: OcGlyphSlug;
+    corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    parallax?: boolean;
+    className?: string;
+}
+declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
+
+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

@@ -38,6 +38,7 @@ interface OcThemeProviderProps {
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
@@ -69,8 +70,36 @@ declare function OcAppearanceMenu({ className, triggerClassName, popoverClassNam
 
 interface OcAuroraProps {
     intensity?: number;
+    gl?: boolean;
     className?: string;
 }
-declare function OcAurora({ intensity, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
+declare function OcAurora({ intensity, gl, className }: OcAuroraProps): react_jsx_runtime.JSX.Element;
 
-export { AppearanceControls, DEFAULT_OC_THEME, OC_DEFAULT_ACCENT, OC_MOTION_COOKIE, OC_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcMotion, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, useOcMotion, useOcSkin };
+interface OcSceneRGB {
+    r: number;
+    g: number;
+    b: number;
+}
+interface OcSceneTokens {
+    palette: [OcSceneRGB, OcSceneRGB, OcSceneRGB, OcSceneRGB];
+    background: OcSceneRGB;
+    isDark: boolean;
+    motionOff: boolean;
+}
+declare function normalizeHue(c: OcSceneRGB, isDark: boolean): OcSceneRGB;
+declare function readOcSceneTokens(host: HTMLElement): OcSceneTokens | null;
+declare function subscribeOcTheme(cb: () => void): () => void;
+
+type OcGlyphSlug = 'orangecheck' | 'attest' | 'docs' | 'me' | 'vault' | 'fleet' | 'chat' | 'cosign' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics' | 'btc';
+declare const OC_GLYPH_CANVAS = 1024;
+declare const OC_GLYPHS: Record<OcGlyphSlug, string>;
+
+interface OcSigilProps {
+    glyph: OcGlyphSlug;
+    corner?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    parallax?: boolean;
+    className?: string;
+}
+declare function OcSigil({ glyph, corner, parallax, className }: OcSigilProps): react_jsx_runtime.JSX.Element;
+
+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 };