@lar-works/design-system 0.0.0-stage → 0.1.0

package/src/showcase/server-unit.css

@@ -0,0 +1,258 @@
+/* The Lar Server unit: a four-bay chassis whose drive sleds are the four media apps, each in its icon's
+   colours. A chosen sled slides forward out of its bay. */
+
+.lar-unit {
+    --chassis-1: #2b2d33;
+    --chassis-2: #15161a;
+    --chassis-edge: rgb(255 255 255 / 14%);
+    --recess: #08090b;
+    --floor: rgb(0 0 0 / 55%);
+    position: relative;
+    padding: clamp(10px, 1.4vw, 18px);
+    border-radius: clamp(16px, 1.8vw, 24px);
+    background: linear-gradient(165deg, var(--chassis-1), var(--chassis-2));
+    box-shadow:
+        inset 0 1px 0 var(--chassis-edge),
+        inset 0 -2px 3px rgb(0 0 0 / 18%),
+        0 44px 70px -28px var(--floor),
+        0 12px 22px -12px var(--floor);
+}
+
+.lar-unit::before,
+.lar-unit::after {
+    content: '';
+    position: absolute;
+    bottom: -7px;
+    width: 11%;
+    height: 8px;
+    border-radius: 0 0 6px 6px;
+    background: #101114;
+}
+
+.lar-unit::before {
+    left: 9%;
+}
+
+.lar-unit::after {
+    right: 9%;
+}
+
+.lar-unit__top {
+    display: flex;
+    align-items: center;
+    gap: clamp(10px, 1.2vw, 16px);
+    margin-bottom: clamp(10px, 1.2vw, 16px);
+    padding-inline: 4px;
+}
+
+.lar-unit__mark {
+    flex: none;
+    width: clamp(20px, 2vw, 28px);
+    height: clamp(20px, 2vw, 28px);
+}
+
+.lar-unit__lcd {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 0.55em 0.9em;
+    border-radius: 8px;
+    background: #070b18;
+    box-shadow:
+        inset 0 1px 4px #000,
+        0 1px 0 var(--chassis-edge);
+    color: #a9bef2;
+    font:
+        500 clamp(11px, 0.95vw, 14px) / 1.2 ui-monospace,
+        'SF Mono',
+        Menlo,
+        monospace;
+    text-shadow: 0 0 10px rgb(130 165 255 / 55%);
+    white-space: nowrap;
+}
+
+.lar-unit__lcd span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.lar-unit__lcd b {
+    font-weight: 500;
+    color: #fff;
+}
+
+.lar-unit__lights {
+    display: flex;
+    gap: 7px;
+}
+
+.lar-unit__lights i {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #7e9ef0;
+    box-shadow: 0 0 9px 1px #6e91ee;
+}
+
+.lar-unit__bays {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: clamp(4px, 0.5vw, 7px);
+    padding: clamp(4px, 0.5vw, 7px);
+    border-radius: clamp(10px, 1vw, 14px);
+    background: var(--recess);
+    box-shadow: inset 0 2px 6px #000;
+}
+
+.lar-sled {
+    --led: #fff;
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    min-height: clamp(220px, 28vw, 340px);
+    padding: clamp(12px, 1.2vw, 16px);
+    overflow: hidden;
+    border-radius: clamp(6px, 0.7vw, 10px);
+    color: #fff;
+    text-align: left;
+    background: linear-gradient(var(--t1), var(--t2));
+    box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%);
+    cursor: pointer;
+    transition:
+        transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
+        box-shadow 300ms ease,
+        filter 300ms ease;
+}
+
+.lar-sled::before,
+.lar-sled::after {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    aspect-ratio: 1;
+    border-radius: 14%;
+    background: var(--q);
+}
+
+.lar-sled::before {
+    width: 240%;
+    left: 34%;
+    top: 36%;
+    opacity: 0.35;
+}
+
+.lar-sled::after {
+    width: 240%;
+    left: 58%;
+    top: 58%;
+    opacity: 0.3;
+}
+
+.lar-sled:hover {
+    filter: brightness(1.12);
+}
+
+.lar-sled:focus-visible {
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
+.lar-sled[aria-selected='true'] {
+    transform: translateY(-10px) scale(1.02);
+    box-shadow:
+        inset 0 1px 0 rgb(255 255 255 / 22%),
+        0 0 0 2px rgb(255 255 255 / 85%),
+        0 22px 40px -12px rgb(0 0 0 / 80%);
+}
+
+.lar-sled[data-app='music'] {
+    --t1: #5c2323;
+    --t2: #200204;
+    --q: #834241;
+}
+
+.lar-sled[data-app='video'] {
+    --t1: #3f2c5d;
+    --t2: #110621;
+    --q: #604b83;
+}
+
+.lar-sled[data-app='photos'] {
+    --t1: #004542;
+    --t2: #001412;
+    --q: #006763;
+}
+
+.lar-sled[data-app='books'] {
+    --t1: #582900;
+    --t2: #1e0500;
+    --q: #7e4921;
+}
+
+.lar-sled[data-status='available'] {
+    --led: #34d399;
+}
+
+.lar-sled[data-status='development'] {
+    --led: #8fb0ff;
+}
+
+.lar-sled[data-status='planned'] {
+    --led: #a1a1aa;
+}
+
+.lar-sled__led {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--led);
+    box-shadow: 0 0 10px 1px var(--led);
+}
+
+.lar-sled__vents {
+    flex: 1;
+    margin: clamp(12px, 1.3vw, 18px) 0;
+    border-radius: 3px;
+    background: repeating-linear-gradient(rgb(0 0 0 / 20%) 0 3px, transparent 3px 9px);
+    -webkit-mask-image: linear-gradient(transparent, #000 25%, #000 60%, transparent);
+    mask-image: linear-gradient(transparent, #000 25%, #000 60%, transparent);
+}
+
+.lar-sled__name {
+    font-size: clamp(18px, 1.9vw, 28px);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    line-height: 1.05;
+}
+
+.lar-sled__state {
+    margin-top: 5px;
+    font-size: clamp(11px, 0.9vw, 13px);
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.lar-sled__latch {
+    margin-top: clamp(10px, 1vw, 14px);
+    height: 5px;
+    width: 46%;
+    border-radius: 3px;
+    background: rgb(255 255 255 / 24%);
+}
+
+@media (max-width: 520px) {
+    .lar-unit__bays {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .lar-sled {
+        min-height: 100px;
+    }
+
+    .lar-sled__vents {
+        margin: 8px 0;
+    }
+}

package/src/showcase/stage.css

@@ -0,0 +1,175 @@
+/* The hero backdrop: lar navy light from above over a faint grid that fades out toward the edges. */
+.lar-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+}
+
+.lar-backdrop::before {
+    content: '';
+    position: absolute;
+    inset: -20% -10% auto;
+    height: 95%;
+    background:
+        radial-gradient(42% 52% at 50% 12%, var(--lar-glow), transparent 72%),
+        radial-gradient(30% 40% at 18% 30%, var(--lar-glow-soft), transparent 70%),
+        radial-gradient(30% 40% at 82% 26%, var(--lar-glow-soft), transparent 70%);
+}
+
+.lar-backdrop::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+        linear-gradient(to right, var(--lar-grid-line) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--lar-grid-line) 1px, transparent 1px);
+    background-size: 64px 64px;
+    background-position: center top;
+    -webkit-mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
+    mask-image: radial-gradient(70% 60% at 50% 20%, #000 20%, transparent 75%);
+}
+
+.lar-backdrop[data-hue] {
+    --lar-glow: oklch(0.55 0.14 var(--lar-backdrop-hue) / 0.3);
+    --lar-glow-soft: oklch(0.6 0.1 var(--lar-backdrop-hue) / 0.14);
+}
+
+/* A stage of devices that leans toward the pointer. --lar-tilt-x and --lar-tilt-y are set from script. */
+.lar-stage {
+    position: relative;
+    perspective: 2400px;
+}
+
+.lar-stage__scene {
+    position: relative;
+    transform-style: preserve-3d;
+    transform: rotateX(calc(var(--lar-stage-pitch, 0deg) + var(--lar-tilt-x, 0deg))) rotateY(var(--lar-tilt-y, 0deg));
+    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.lar-stage__slot {
+    transform-style: preserve-3d;
+    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Content rises into place as it scrolls in, where the browser drives animations from scroll. */
+@media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+        .lar-reveal {
+            animation: lar-reveal linear both;
+            animation-timeline: view();
+            animation-range: entry 0% entry 70%;
+        }
+    }
+
+    .lar-intro {
+        animation: lar-intro 1100ms cubic-bezier(0.16, 1, 0.3, 1) both;
+        animation-delay: var(--lar-intro-delay, 0ms);
+    }
+}
+
+@keyframes lar-reveal {
+    from {
+        opacity: 0;
+        transform: translateY(28px) scale(0.985);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@keyframes lar-intro {
+    from {
+        opacity: 0;
+        transform: translateY(18px);
+        filter: blur(6px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+        filter: none;
+    }
+}
+
+/* The server unit's activity lights. */
+@media (prefers-reduced-motion: no-preference) {
+    .lar-led-pulse {
+        animation: lar-led-pulse 2.4s ease-in-out infinite;
+        animation-delay: var(--lar-led-delay, 0ms);
+    }
+}
+
+@keyframes lar-led-pulse {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.35;
+    }
+}
+
+/* A dashed link whose light travels toward the next node. */
+.lar-route-line {
+    background: color-mix(in srgb, var(--color-base-content) 40%, transparent);
+}
+
+.lar-route-line::after {
+    content: '';
+    position: absolute;
+    left: -2.25px;
+    top: 0;
+    width: 6px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--color-primary);
+    box-shadow: 0 0 12px 2px color-mix(in srgb, var(--color-primary) 70%, transparent);
+    opacity: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .lar-route-line::after {
+        animation: lar-route-travel-y 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+    }
+
+    @media (min-width: 40rem) {
+        .lar-route-line::after {
+            top: -2.5px;
+            left: 0;
+            animation-name: lar-route-travel-x;
+        }
+    }
+}
+
+@keyframes lar-route-travel-y {
+    0% {
+        top: 0;
+        opacity: 0;
+    }
+    15%,
+    85% {
+        opacity: 1;
+    }
+    100% {
+        top: 100%;
+        opacity: 0;
+    }
+}
+
+@keyframes lar-route-travel-x {
+    0% {
+        left: 0;
+        opacity: 0;
+    }
+    15%,
+    85% {
+        opacity: 1;
+    }
+    100% {
+        left: 100%;
+        opacity: 0;
+    }
+}

package/src/styles.css

@@ -0,0 +1,5 @@
+/* Everything an app needs from the design system in one import: Tailwind, ninna-ui's preset, Lar's tokens and
+   base styles, and the components' utilities, which Tailwind finds by scanning this package's sources. */
+@import './foundations/theme.css';
+
+@source './';

package/src/testing.ts

@@ -0,0 +1,34 @@
+// Helpers for apps' component tests (jsdom). Import them from `@lar-works/design-system/testing` in a test setup file.
+import { dismissAllNotifications } from './feedback/ErrorNotification';
+
+/** Clears state the design system keeps at module level, such as the toast store, which outlives a test. */
+export function resetDesignSystem() {
+    dismissAllNotifications();
+}
+
+/** Adds the browser APIs the design system's components use and jsdom does not implement. */
+export function installDomStubs() {
+    class ResizeObserverStub implements ResizeObserver {
+        disconnect(): void {}
+        observe(): void {}
+        unobserve(): void {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+
+    let objectUrlSequence = 0;
+
+    // jsdom has no object URL registry; components that show fetched bytes need a working (if fake) `blob:` URL.
+    Object.defineProperty(URL, 'createObjectURL', {
+        configurable: true,
+        value: () => `blob:mock-object-url-${(objectUrlSequence += 1)}`,
+    });
+
+    Object.defineProperty(URL, 'revokeObjectURL', { configurable: true, value: () => undefined });
+    Object.defineProperty(HTMLElement.prototype, 'hasPointerCapture', { configurable: true, value: () => false });
+    Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', { configurable: true, value: () => undefined });
+
+    // Browsers' element scrollTo returns a promise, which an effect must not return as its cleanup.
+    Object.defineProperty(HTMLElement.prototype, 'scrollTo', { configurable: true, value: () => Promise.resolve() });
+    Object.defineProperty(window, 'scrollTo', { configurable: true, value: () => undefined });
+}

package/src/typography/Link.tsx

@@ -0,0 +1,105 @@
+import {
+    Link as NinnaLink,
+    LinkBox as NinnaLinkBox,
+    type LinkBoxProps,
+    LinkOverlay as NinnaLinkOverlay,
+    type LinkOverlayProps as NinnaLinkOverlayProps,
+    type LinkProps as NinnaLinkProps,
+} from '@ninna-ui/primitives';
+import { forwardRef, type ReactNode } from 'react';
+
+import { tabbable } from '../foundations/KeyboardFocus';
+
+export type LinkProps = Omit<NinnaLinkProps, 'size' | 'color'> & {
+    variant?: 'body' | 'caption';
+    onNavigate?: (href: string) => void;
+};
+
+export type LinkOverlayProps = NinnaLinkOverlayProps & Pick<LinkProps, 'onNavigate'>;
+
+/** Keep secondary links and buttons above the stretched primary link or action. */
+export function LinkBox({ className = '', ...props }: LinkBoxProps) {
+    return (
+        <NinnaLinkBox
+            {...props}
+            className={`isolate [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:relative [&_:is(a,button):not([data-slot=link-overlay]):not([data-slot=action-overlay])]:z-10 ${className}`}
+        />
+    );
+}
+
+export const LinkOverlay = forwardRef<HTMLAnchorElement, LinkOverlayProps>(
+    ({ onNavigate, onClick, className = '', ...props }, ref) => (
+        <NinnaLinkOverlay
+            {...tabbable}
+            {...props}
+            ref={ref}
+            className={`focus-visible:before:outline-primary before:z-1 before:rounded-[inherit] focus-visible:outline-none focus-visible:before:outline-2 focus-visible:before:-outline-offset-2 ${className}`}
+            onClick={navigationClick({ ...props, onClick, onNavigate })}
+        />
+    ),
+);
+
+LinkOverlay.displayName = 'LinkOverlay';
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+    ({ variant = 'body', onNavigate, onClick, ...props }, ref) => (
+        <NinnaLink
+            {...tabbable}
+            {...props}
+            ref={ref}
+            size={variant === 'caption' ? 'xs' : 'sm'}
+            underline="hover"
+            onClick={navigationClick({ ...props, onClick, onNavigate })}
+        />
+    ),
+);
+
+Link.displayName = 'Link';
+
+function navigationClick({
+    href,
+    onNavigate,
+    onClick,
+    external,
+    target,
+    download,
+}: LinkOverlayProps): LinkProps['onClick'] {
+    return (event) => {
+        if (onNavigate) event.stopPropagation();
+
+        onClick?.(event);
+
+        if (
+            !onNavigate ||
+            !href ||
+            event.defaultPrevented ||
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey ||
+            external ||
+            (target && target !== '_self') ||
+            (download !== undefined && download !== false)
+        )
+            return;
+
+        event.preventDefault();
+        onNavigate(href);
+    };
+}
+
+/** A link inside running text or a note: the surrounding size and colour, underlined. */
+export function InlineLink({ href, children }: { href: string; children?: ReactNode }) {
+    return (
+        <a
+            {...tabbable}
+            href={href}
+            target="_blank"
+            rel="noreferrer"
+            className="focus-visible:outline-primary text-inherit underline decoration-current/40 underline-offset-2 transition-colors hover:decoration-current focus-visible:outline-2"
+        >
+            {children}
+        </a>
+    );
+}

package/src/typography/Typography.tsx

@@ -0,0 +1,113 @@
+import type { HTMLAttributes } from 'react';
+
+import { SkeletonLoader } from '../feedback/SkeletonLoader';
+
+const textStyles = {
+    body: 'text-sm leading-5',
+    description: 'text-[15px] leading-6',
+    caption: 'text-xs leading-4',
+    label: 'text-sm font-medium leading-5',
+    overline: 'text-[11px] font-semibold uppercase leading-4 tracking-[0.08em]',
+    metric: 'text-2xl font-semibold leading-8 tracking-[-0.02em] tabular-nums',
+    /** The paragraph under a hero or section title. */
+    lead: 'text-[17px] leading-[1.6] tracking-[-0.011em] sm:text-lg sm:leading-[1.6] text-pretty',
+    /** Running copy on marketing pages. */
+    prose: 'text-[15px] leading-[1.65] tracking-[-0.006em] text-pretty',
+} as const;
+
+/** T3's headings: semibold with tightening tracking as they grow; the hero takes t3.codes' display setting. */
+const headingStyles = {
+    page: 'text-[1.375rem] font-semibold leading-7 tracking-[-0.02em]',
+    section: 'text-base font-semibold leading-6 tracking-[-0.01em]',
+    subsection: 'text-[15px] font-semibold leading-6 tracking-[-0.005em]',
+    title: 'text-sm font-semibold leading-5',
+    label: 'text-sm font-semibold leading-5',
+    hero: 'text-3xl font-semibold leading-[1.05] tracking-[-0.035em] [text-box:trim-both_cap_alphabetic] sm:text-4xl lg:text-[2.875rem]',
+    /** A page's one big statement. */
+    display:
+        'text-[2.625rem] font-semibold leading-[1.04] tracking-[-0.036em] text-balance sm:text-6xl lg:text-[4.5rem] xl:text-[5rem]',
+    /** A marketing section's title. */
+    headline:
+        'text-[1.875rem] font-semibold leading-[1.08] tracking-[-0.035em] text-balance sm:text-[2.5rem] lg:text-[3rem]',
+    /** A feature's title inside a section. */
+    feature: 'text-xl font-semibold leading-7 tracking-[-0.02em] text-balance sm:text-2xl sm:leading-8',
+} as const;
+
+const tones = {
+    default: 'text-base-content',
+    muted: 'text-base-700',
+    soft: 'text-base-800',
+    danger: 'text-danger',
+    warning: 'text-warning',
+    success: 'text-success',
+} as const;
+
+interface TypographyProps extends HTMLAttributes<HTMLElement> {
+    loading?: boolean;
+    tone?: keyof typeof tones;
+    truncate?: boolean;
+}
+
+export interface TextProps extends TypographyProps {
+    as?: 'p' | 'span' | 'div';
+    variant?: keyof typeof textStyles;
+}
+
+export function Text({
+    as: Tag = 'p',
+    variant = 'body',
+    tone = 'default',
+    truncate,
+    loading,
+    className = '',
+    children,
+    ...props
+}: TextProps) {
+    return (
+        <Tag
+            {...props}
+            className={`${textStyles[variant]} ${tones[tone]} ${tone === 'muted' && (variant === 'lead' || variant === 'prose') ? 'dark:text-[#a3a3aa]' : ''} ${truncate ? 'truncate' : ''} ${loading ? `relative ${Tag === 'span' ? 'inline-block w-full' : ''}` : ''} ${className}`}
+        >
+            {loading ? <LoadingText /> : children}
+        </Tag>
+    );
+}
+
+export interface HeadingProps extends TypographyProps {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    variant?: keyof typeof headingStyles;
+}
+
+export function Heading({
+    as: Tag = 'h2',
+    variant = 'section',
+    tone = 'default',
+    truncate,
+    loading,
+    className = '',
+    children,
+    ...props
+}: HeadingProps) {
+    return (
+        <Tag
+            {...props}
+            className={`${headingStyles[variant]} ${tones[tone]} ${truncate ? 'truncate' : ''} ${loading ? 'relative' : ''} ${className}`}
+        >
+            {loading ? <LoadingText heading={variant === 'hero'} /> : children}
+        </Tag>
+    );
+}
+
+/** An invisible glyph retains the font's line box, including cap-height trimming. */
+function LoadingText({ heading = false }: { heading?: boolean }) {
+    return (
+        <>
+            <span aria-hidden="true" className="invisible">
+                &nbsp;
+            </span>
+            <span aria-hidden="true" className="absolute inset-0 flex items-center">
+                <SkeletonLoader.Shape presentation={heading ? 'heading' : 'line'} />
+            </span>
+        </>
+    );
+}

package/src/typography/index.ts

@@ -0,0 +1,3 @@
+export { InlineLink, Link, LinkBox, LinkOverlay, type LinkOverlayProps, type LinkProps } from './Link';
+export { Heading, type HeadingProps, Text, type TextProps } from './Typography';
+export { Code } from '@ninna-ui/primitives';