@wallarm-org/design-system 0.67.3 → 0.68.0

package/dist/theme/components/animated-background.css

@@ -0,0 +1,117 @@
+/* Pixel variant */
+
+@font-face {
+    font-family: 'Press Start 2P';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+        U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+:root {
+    --animated-bg-dot: var(--color-slate-500);
+    --animated-bg-accent-dot: var(--color-red-400);
+    --animated-bg-caught-dot: var(--color-green-500);
+}
+
+[data-theme="dark"] {
+    --animated-bg-dot: var(--color-slate-500);
+    --animated-bg-accent-dot: var(--color-red-400);
+    --animated-bg-caught-dot: var(--color-green-300);
+}
+
+@keyframes hud-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes catch-pop {
+    0% {
+        transform: scale(1);
+    }
+    40% {
+        transform: scale(1.25);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+/* Blur variant */
+
+.lg-frame {
+    position: relative;
+    overflow: hidden;
+    background: #ffffff;
+    container-type: inline-size;
+    --lg-blur-ref: 360;
+}
+
+.lg-mesh {
+    position: absolute;
+    inset: 0;
+    filter: blur(calc(var(--lg-blur-ref, 90) * 100cqw / var(--lg-blur-ref, 360)));
+}
+
+.lg-blob {
+    position: absolute;
+    border-radius: 50%;
+    will-change: transform;
+}
+
+@keyframes lg-f1 {
+    0%   { transform: translate(0, 0) scale(1); }
+    30%  { transform: translate(25%, 29%) scale(1.18); }
+    60%  { transform: translate(-18%, 34%) scale(0.92); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+@keyframes lg-f2 {
+    0%   { transform: translate(0, 0) scale(1.08); }
+    30%  { transform: translate(-29%, 18%) scale(0.88); }
+    60%  { transform: translate(-13%, -25%) scale(1.16); }
+    100% { transform: translate(0, 0) scale(1.08); }
+}
+
+@keyframes lg-f3 {
+    0%   { transform: translate(0, 0) scale(1); }
+    35%  { transform: translate(22%, -29%) scale(1.26); }
+    70%  { transform: translate(-25%, -9%) scale(0.9); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+@keyframes lg-f4 {
+    0%   { transform: translate(0, 0) scale(1.12); }
+    30%  { transform: translate(-25%, -22%) scale(0.86); }
+    60%  { transform: translate(17%, -13%) scale(1.2); }
+    100% { transform: translate(0, 0) scale(1.12); }
+}
+
+@keyframes lg-f5 {
+    0%   { transform: translate(0, 0) scale(1); }
+    35%  { transform: translate(-29%, -32%) scale(1.18); }
+    65%  { transform: translate(13%, -17%) scale(0.92); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+@keyframes lg-f6 {
+    0%   { transform: translate(0, 0) scale(1); }
+    30%  { transform: translate(23%, 25%) scale(1.12); }
+    60%  { transform: translate(-22%, 13%) scale(0.92); }
+    100% { transform: translate(0, 0) scale(1); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .lg-blob {
+        animation: none !important;
+    }
+}

package/dist/theme/index.css

@@ -23,7 +23,7 @@
 @import './components/accordion.css';
 @import './components/progress.css';
 @import './components/product-nav.css';
-@import './components/login-background.css';
+@import './components/animated-background.css';
 
 [data-scope='scroll-area'][data-part='viewport'] {
     scrollbar-width: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.67.3",
+  "version": "0.68.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

package/dist/components/AnimatedBackground/module/lib.d.ts

@@ -1,2 +0,0 @@
-import type { AnimatedBackgroundProps, EngineOptions } from './types';
-export declare const resolveOptions: (props: AnimatedBackgroundProps) => EngineOptions;

package/dist/components/AnimatedBackground/module/lib.js

@@ -1,32 +0,0 @@
-const LOGIN_BG_DEFAULTS = {
-    clean: {
-        spacing: 20,
-        bloomRadius: 44,
-        maxDotSize: 20
-    },
-    halftone: {
-        spacing: 16,
-        bloomRadius: 80,
-        maxDotSize: 20
-    }
-};
-const resolveOptions = (props)=>{
-    const texture = props.texture ?? 'halftone';
-    const d = LOGIN_BG_DEFAULTS[texture];
-    return {
-        texture,
-        spacing: props.spacing ?? d.spacing,
-        sweepPeriod: props.sweepPeriod ?? 12.5,
-        bloomRadius: props.bloomRadius ?? d.bloomRadius,
-        anomalyInterval: props.anomalyInterval ?? 1.4,
-        intensity: props.intensity ?? 0.9,
-        bloomAlpha: props.bloomAlpha ?? 0.2,
-        maxDotSize: props.maxDotSize ?? d.maxDotSize,
-        tilt: props.tilt ?? 16,
-        dotColorVar: props.dotColorVar ?? '--animated-bg-dot',
-        accentColorVar: props.accentColorVar ?? '--animated-bg-accent-dot',
-        baseColorVar: props.baseColorVar ?? '--color-component-app-shell-bg',
-        caughtColorVar: props.caughtColorVar ?? '--animated-bg-caught-dot'
-    };
-};
-export { resolveOptions };

package/dist/components/AnimatedBackground/module/types.d.ts

@@ -1,79 +0,0 @@
-import type { HTMLAttributes, ReactNode, Ref } from 'react';
-export type Texture = 'clean' | 'halftone';
-export interface AnimatedBackgroundProps extends HTMLAttributes<HTMLDivElement> {
-    ref?: Ref<HTMLDivElement>;
-    /** Content rendered centered above the animated canvas. */
-    children?: ReactNode;
-    /** Variant A (`clean`) vs Variant B (`halftone`). */
-    texture?: Texture;
-    /** Grid cell size in px. */
-    spacing?: number;
-    /** Seconds for one L->R sweep pass. */
-    sweepPeriod?: number;
-    /** How far from the scan line (px) dots react. */
-    bloomRadius?: number;
-    /** Minimum seconds between orange events. Higher = rarer. */
-    anomalyInterval?: number;
-    /** Global opacity/strength multiplier (0-1). */
-    intensity?: number;
-    /** Peak alpha of fully-bloomed (emphasized) dots, before intensity. */
-    bloomAlpha?: number;
-    /** Halftone only: cap on a bloomed pixel's full edge length (px). */
-    maxDotSize?: number;
-    /** Sweep-line tilt in degrees (0 = vertical; positive leans the top right). */
-    tilt?: number;
-    /** CSS custom-property name for the dot color. */
-    dotColorVar?: string;
-    /** CSS custom-property name for the "caught" accent. */
-    accentColorVar?: string;
-    /** CSS custom-property name for the base fill. */
-    baseColorVar?: string;
-    /** CSS custom-property name for the "neutralised" (caught) color. */
-    caughtColorVar?: string;
-    /** Force a single static frame (also auto-true under reduced motion). */
-    paused?: boolean;
-    /** Enable the interactive shooter easter egg (halftone only). Default: false. */
-    game?: boolean;
-    /** Card dimensions for spawn-exclusion when game is enabled. */
-    excludeCardSize?: {
-        width: number;
-        height: number;
-    };
-}
-export interface EngineOptions {
-    texture: Texture;
-    /** Grid cell size in px. */
-    spacing: number;
-    /** Seconds for one L→R sweep pass. */
-    sweepPeriod: number;
-    /** How far from the scan line (px) dots react. */
-    bloomRadius: number;
-    /** Minimum seconds between accent events. */
-    anomalyInterval: number;
-    /** Global opacity multiplier (0–1). */
-    intensity: number;
-    /** Peak alpha of bloomed dots before `intensity`. */
-    bloomAlpha: number;
-    /** Halftone only: cap on a bloomed pixel's edge length (px). */
-    maxDotSize: number;
-    /** Sweep-line tilt in degrees (0 = vertical). */
-    tilt: number;
-    /** CSS custom-property names resolved at runtime. */
-    dotColorVar: string;
-    accentColorVar: string;
-    baseColorVar: string;
-    /** CSS custom-property name for the "caught" (neutralised) color. */
-    caughtColorVar: string;
-}
-export interface GameStats {
-    /** Lifetime catches — drives the arming gate (≥ 5); reset only by exitGame. */
-    kills: number;
-    /** Threats stopped THIS round (HIT numerator). */
-    stopped: number;
-    /** Threats that timed out unshot THIS round. */
-    escaped: number;
-    /** Attacks spawned this round (caps at ROUND_ATTACKS). */
-    spawned: number;
-    /** Round complete — full wave spawned AND field cleared. */
-    done: boolean;
-}

package/dist/theme/components/login-background.css

@@ -1,45 +0,0 @@
-@font-face {
-    font-family: 'Press Start 2P';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url('https://fonts.gstatic.com/s/pressstart2p/v15/e3t4euO8T-267oIAQAu6jDQyK3nVivM.woff2') format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-        U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-:root {
-    --animated-bg-dot: var(--color-slate-500);
-    --animated-bg-accent-dot: var(--color-red-400);
-    --animated-bg-caught-dot: var(--color-green-500);
-}
-
-[data-theme="dark"] {
-    --animated-bg-dot: var(--color-slate-500);
-    --animated-bg-accent-dot: var(--color-red-400);
-    --animated-bg-caught-dot: var(--color-green-300);
-}
-
-@keyframes hud-in {
-    from {
-        opacity: 0;
-        transform: translateY(-4px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes catch-pop {
-    0% {
-        transform: scale(1);
-    }
-    40% {
-        transform: scale(1.25);
-    }
-    100% {
-        transform: scale(1);
-    }
-}