npm - @orangecheck/design - Versions diffs - 0.25.0 → 0.27.0 - Mend

@orangecheck/design 0.25.0 → 0.27.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.

Files changed (25) hide show

package/dist/primitives.d.mts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -225,9 +225,65 @@
     }
 }
+/* Grain — the 2026 texture pass. A tiny repeating feTurbulence tile (160px,
+   luminance-only so it is skin-agnostic) riding inside the aurora slot, so it
+   inherits the radial edge fade and the intensity/mode dampening for free.
+   Static — unaffected by reduced-motion. Dial with --oc-grain-op; zero it
+   per-site with one CSS line. */
+.oc-aurora__grain {
+    position: absolute;
+    inset: 0;
+    mix-blend-mode: overlay;
+    opacity: var(--oc-grain-op, 0.1);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
+    background-repeat: repeat;
+}
+:root.dark .oc-aurora__grain {
+    opacity: calc(var(--oc-grain-op, 0.1) * 1.3);
+}
 /* Motion-sensitive: hold the clouds still (they still recolour via tokens). */
 @media (prefers-reduced-motion: reduce) {
     .oc-aurora__blob {
         animation: none !important;
     }
 }
+/* Ambient-motion switch (oc_motion cookie → data-oc-motion="off" on <html>,
+   applied pre-paint by getOcThemeInitScript). This is the WCAG 2.2.2
+   Pause/Stop/Hide mechanism — a user choice, distinct from the OS-level
+   prefers-reduced-motion above. `.oc-ambient` is the shared opt-in hook: any
+   decorative animation in the family adds the class and inherits the pause. */
+:root[data-oc-motion='off'] .oc-aurora__blob,
+: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/theme.css CHANGED Viewed

@@ -311,6 +311,86 @@
         );
         background-size: 16px 16px;
     }
+    /* Guides — the quieter, 2026-register evolution of .bg-grid: a fainter
+       56px lattice with plus-mark crosses at the intersections (crosses via a
+       masked ::before so their color stays token-reactive). Opt-in; .bg-grid
+       is untouched. */
+    .oc-guides {
+        position: relative;
+        background-image:
+            linear-gradient(
+                to right,
+                color-mix(in oklch, var(--foreground), transparent 96%) 1px,
+                transparent 1px
+            ),
+            linear-gradient(
+                to bottom,
+                color-mix(in oklch, var(--foreground), transparent 96%) 1px,
+                transparent 1px
+            );
+        background-size: 56px 56px;
+    }
+    .oc-guides::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        background: color-mix(in oklch, var(--foreground), transparent 76%);
+        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%3Cpath%20d='M27.5,23h1v10h-1zM23,27.5h10v1h-10z'/%3E%3C/svg%3E");
+        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%3Cpath%20d='M27.5,23h1v10h-1zM23,27.5h10v1h-10z'/%3E%3C/svg%3E");
+        -webkit-mask-size: 56px 56px;
+        mask-size: 56px 56px;
+        -webkit-mask-position: -28px -28px;
+        mask-position: -28px -28px;
+    }
+    /* .oc-halo — the glyph-shaped glow plate (the sanctioned "plinth"): the
+       normalized orangecheck mark as a soft token-tinted mask behind a hero
+       artifact card. Zero JS, one composited layer, no motion. Absorbs the
+       hand-rolled `bg-primary/10 -inset-6 blur-3xl` pattern. Override the mark
+       per-site via --oc-halo-mask (a url(...) to another normalized 0..1024
+       media-kit glyph); dial with --oc-halo-op / --oc-halo-blur /
+       --oc-halo-color. Mount inside a `relative` wrapper, before the card in
+       source order. The default mask is the normalized media-kit render of the
+       mark (centering/flip transform baked in) — never the raw font-space path. */
+    .oc-halo {
+        position: absolute;
+        inset: -18%;
+        pointer-events: none;
+        background: var(--oc-halo-color, var(--primary));
+        opacity: var(--oc-halo-op, 0.3);
+        filter: blur(var(--oc-halo-blur, 40px));
+        -webkit-mask-image: var(
+            --oc-halo-mask,
+            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20d='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'%20transform='translate(195.9452,852.1889),scale(0.513493,-0.513493)'/%3E%3C/svg%3E")
+        );
+        mask-image: var(
+            --oc-halo-mask,
+            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%201024'%3E%3Cpath%20d='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'%20transform='translate(195.9452,852.1889),scale(0.513493,-0.513493)'/%3E%3C/svg%3E")
+        );
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+    }
+    /* Cypherpunk skins: hard borders, no soft shadows — the halo tightens to a
+       crisp edge-glow instead of a warm bloom (skin-coherent, per charter). */
+    :root[data-oc-theme='orangecheck'] .oc-halo,
+    :root[data-oc-theme='phosphor'] .oc-halo,
+    :root[data-oc-theme='lightning'] .oc-halo,
+    :root[data-oc-theme='gold'] .oc-halo {
+        filter: blur(var(--oc-halo-blur, 10px));
+        opacity: calc(var(--oc-halo-op, 0.3) * 0.6);
+    }
+    /* Decorative rasters are NOT auto-stripped by forced colors the way
+       gradients are — hide them explicitly. */
+    @media (forced-colors: active) {
+        .oc-halo,
+        .oc-aurora__grain {
+            display: none;
+        }
+    }
     /* currentColor-based textures for brand/CTA bands. NOT prefixed `bg-`:
        tailwind-merge misclassifies any `bg-*` class as a background-color and
        would drop a real `bg-brand`/`bg-card` sitting next to it in the same

package/dist/tokens.d.mts CHANGED Viewed

@@ -18,26 +18,35 @@ type OcThemeId = (typeof OC_THEMES)[number]['id'] | (string & {});
 declare function isKnownTheme(id: string | null | undefined): id is OcThemeId;
 declare function resolveTheme(id: string | null | undefined): string;
 declare const OC_SKIN_COOKIE = "oc_skin";
+declare const OC_MOTION_COOKIE = "oc_motion";
 declare global {
     interface Window {
         __ocApplySkinChrome?: (skin: string) => void;
     }
 }
+type OcMotion = 'on' | 'off';
 interface OcSkinContextValue {
     skin: string;
     setSkin: (id: string) => void;
     themes: readonly OcTheme[];
+    motion: OcMotion;
+    setMotion: (value: OcMotion) => void;
 }
 interface OcThemeProviderProps {
     children: ReactNode;
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOcSkin(): OcSkinContextValue;
+declare function useOcMotion(): {
+    motion: OcMotion;
+    setMotion: (value: OcMotion) => void;
+};
 declare function getOcThemeInitScript(defaultSkin?: string): string;
 declare function OcThemeBridge(): null;
@@ -61,8 +70,24 @@ 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_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, 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;
+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 OcSceneRGB, type OcSceneTokens, 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 Viewed

@@ -18,26 +18,35 @@ type OcThemeId = (typeof OC_THEMES)[number]['id'] | (string & {});
 declare function isKnownTheme(id: string | null | undefined): id is OcThemeId;
 declare function resolveTheme(id: string | null | undefined): string;
 declare const OC_SKIN_COOKIE = "oc_skin";
+declare const OC_MOTION_COOKIE = "oc_motion";
 declare global {
     interface Window {
         __ocApplySkinChrome?: (skin: string) => void;
     }
 }
+type OcMotion = 'on' | 'off';
 interface OcSkinContextValue {
     skin: string;
     setSkin: (id: string) => void;
     themes: readonly OcTheme[];
+    motion: OcMotion;
+    setMotion: (value: OcMotion) => void;
 }
 interface OcThemeProviderProps {
     children: ReactNode;
     defaultSkin?: string;
     aurora?: boolean | {
         intensity?: number;
+        gl?: boolean;
     };
 }
 declare function OcThemeProvider({ children, defaultSkin, aurora, }: OcThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useOcSkin(): OcSkinContextValue;
+declare function useOcMotion(): {
+    motion: OcMotion;
+    setMotion: (value: OcMotion) => void;
+};
 declare function getOcThemeInitScript(defaultSkin?: string): string;
 declare function OcThemeBridge(): null;
@@ -61,8 +70,24 @@ 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_SKIN_COOKIE, OC_THEMES, OcAppearanceMenu, type OcAppearanceMenuProps, OcAurora, type OcAuroraProps, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, resolveTheme, 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;
+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 OcSceneRGB, type OcSceneTokens, type OcTheme, OcThemeBridge, type OcThemeId, OcThemePicker, type OcThemePickerProps, OcThemeProvider, type OcThemeProviderProps, accentFor, cn, getOcThemeInitScript, isKnownTheme, normalizeHue, readOcSceneTokens, resolveTheme, subscribeOcTheme, useOcMotion, useOcSkin };