Establish NODE.DC design system baseline
This commit is contained in:
DCCONSTRUCTIONS
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" data-nodedc-ui data-nodedc-theme="dark">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#050506" />
|
||||
<title>NODE.DC UI Catalog</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "@nodedc/ui-catalog",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --host 127.0.0.1",
|
||||
"build": "tsc -b && vite build",
|
||||
"typecheck": "tsc -b --pretty false"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nodedc/ui-core": "0.1.0",
|
||||
"@nodedc/ui-react": "0.1.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.0",
|
||||
"@vitejs/plugin-react": "^4.6.0",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^7.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg id="nodedc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.82 54.55"><defs><style>.cls-1{fill:#e2e1e1}.cls-2{fill:#dbdbdb;stroke:#dbdbdb;stroke-miterlimit:10;stroke-width:.75px}</style></defs><path class="cls-1" d="M52.8,23.61,46.92,33.76,41.05,23.61H52.8m18-10.39H23.06L46.92,54.55Z"/><polygon class="cls-1" points="31.28 33.13 18.11 10.34 75.73 10.34 62.59 33.13 74.28 33.13 93.22 0 0 0 19.61 33.13 31.28 33.13"/><path class="cls-2" d="M116.35,18.49V1h1.27l10.34,15V1h1.33V18.49H128l-10.34-15v15Z"/><path class="cls-2" d="M140.43,18.64c-4.79,0-8.16-3.72-8.16-8.89S135.64.86,140.43.86s8.17,3.72,8.17,8.89S145.25,18.64,140.43,18.64Zm0-1.25c4,0,6.79-3.17,6.79-7.64s-2.77-7.64-6.79-7.64-6.77,3.17-6.77,7.64S136.44,17.39,140.43,17.39Z"/><path class="cls-2" d="M151.6,18.49V1h5.1c5.54,0,8.79,3.42,8.79,8.74s-3.25,8.74-8.79,8.74ZM153,17.24h3.75c4.77,0,7.42-2.92,7.42-7.49s-2.65-7.49-7.42-7.49H153Z"/><path class="cls-2" d="M168.49,1h10.77V2.26h-9.42V8.93h7.89v1.25h-7.89v7.06h9.74v1.25H168.49Z"/><path class="cls-2" d="M188.88,18.49V1H194c5.54,0,8.79,3.42,8.79,8.74s-3.25,8.74-8.79,8.74Zm1.35-1.25H194c4.77,0,7.41-2.92,7.41-7.49S198.75,2.26,194,2.26h-3.75Z"/><path class="cls-2" d="M205.15,9.75c0-5.24,3.19-8.89,8.11-8.89a6.8,6.8,0,0,1,7.1,5.52h-1.43a5.54,5.54,0,0,0-5.74-4.27c-4.05,0-6.64,3.17-6.64,7.64s2.54,7.64,6.59,7.64a5.46,5.46,0,0,0,5.74-4.29h1.43c-.75,3.52-3.4,5.54-7.15,5.54C208.27,18.64,205.15,15.05,205.15,9.75Z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,331 @@
|
||||
import { useEffect, useMemo, useState, type CSSProperties, type ReactNode } from "react";
|
||||
import { applyNodedcTheme, type NodedcTheme, type RgbTuple } from "@nodedc/ui-core";
|
||||
import {
|
||||
AppHeader,
|
||||
Button,
|
||||
Checker,
|
||||
ColorField,
|
||||
ConfirmationModal,
|
||||
ControlRow,
|
||||
Dropdown,
|
||||
FieldFrame,
|
||||
GlassSurface,
|
||||
HeaderProfile,
|
||||
HeaderWorkspace,
|
||||
IconButton,
|
||||
Inspector,
|
||||
RangeControl,
|
||||
SegmentedControl,
|
||||
Select,
|
||||
StatusBadge,
|
||||
TextAreaField,
|
||||
TextField,
|
||||
Window,
|
||||
WindowFooterActions,
|
||||
} from "@nodedc/ui-react";
|
||||
|
||||
type CatalogSection = "foundation" | "controls" | "windows" | "inspector";
|
||||
|
||||
const accents: Array<{ label: string; value: RgbTuple; hex: string }> = [
|
||||
{ label: "Hub", value: [195, 255, 102], hex: "#c3ff66" },
|
||||
{ label: "Engine", value: [148, 123, 219], hex: "#947bdb" },
|
||||
{ label: "BIM", value: [78, 164, 255], hex: "#4ea4ff" },
|
||||
{ label: "SEO", value: [32, 32, 34], hex: "#202022" },
|
||||
];
|
||||
|
||||
const selectOptions = [
|
||||
{ value: "active", label: "Активен", description: "Сервис доступен пользователям" },
|
||||
{ value: "maintenance", label: "Техработы", description: "Временно недоступен" },
|
||||
{ value: "disabled", label: "Отключён", description: "Запуск запрещён" },
|
||||
] as const;
|
||||
|
||||
function rgbFromHex(hex: string): RgbTuple | null {
|
||||
const normalized = hex.trim().replace(/^#/, "");
|
||||
if (!/^[0-9a-f]{6}$/i.test(normalized)) return null;
|
||||
return [
|
||||
Number.parseInt(normalized.slice(0, 2), 16),
|
||||
Number.parseInt(normalized.slice(2, 4), 16),
|
||||
Number.parseInt(normalized.slice(4, 6), 16),
|
||||
];
|
||||
}
|
||||
|
||||
function Section({ id, eyebrow, title, description, children }: {
|
||||
id: string;
|
||||
eyebrow: string;
|
||||
title: string;
|
||||
description: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section id={id} className="catalog-section">
|
||||
<header className="catalog-section__head">
|
||||
<span>{eyebrow}</span>
|
||||
<h2>{title}</h2>
|
||||
<p>{description}</p>
|
||||
</header>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function Preview({ title, note, children, className }: {
|
||||
title: string;
|
||||
note?: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<GlassSurface className={`catalog-preview ${className ?? ""}`} padding="lg">
|
||||
<div className="catalog-preview__head">
|
||||
<strong>{title}</strong>
|
||||
{note ? <span>{note}</span> : null}
|
||||
</div>
|
||||
<div className="catalog-preview__body">{children}</div>
|
||||
</GlassSurface>
|
||||
);
|
||||
}
|
||||
|
||||
export function CatalogApp() {
|
||||
const [theme, setTheme] = useState<NodedcTheme>("dark");
|
||||
const [accentHex, setAccentHex] = useState("#c3ff66");
|
||||
const [section, setSection] = useState<CatalogSection>("foundation");
|
||||
const [selectedStatus, setSelectedStatus] = useState<(typeof selectOptions)[number]["value"]>("active");
|
||||
const [checker, setChecker] = useState(true);
|
||||
const [range, setRange] = useState(64);
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
const [inspectorOpen, setInspectorOpen] = useState(false);
|
||||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||||
const [projectName, setProjectName] = useState("NODE.DC Platform");
|
||||
const [notes, setNotes] = useState("Общий контракт компонентов без доменной логики приложения.");
|
||||
|
||||
const accent = useMemo(() => rgbFromHex(accentHex) ?? accents[0].value, [accentHex]);
|
||||
|
||||
useEffect(() => {
|
||||
applyNodedcTheme(document.documentElement, { theme, accent });
|
||||
}, [accent, theme]);
|
||||
|
||||
const openSection = (next: CatalogSection) => {
|
||||
setSection(next);
|
||||
document.getElementById(next)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
};
|
||||
|
||||
const inspectorSections = [
|
||||
{
|
||||
id: "definition",
|
||||
label: "Definition Control",
|
||||
description: "Параметры агентной ноды",
|
||||
content: (
|
||||
<>
|
||||
<ControlRow label="Активность"><Checker checked={checker} label="Агент активен" onChange={setChecker} /></ControlRow>
|
||||
<ControlRow label="Модель">
|
||||
<Select
|
||||
label="Модель"
|
||||
value="codex"
|
||||
options={[
|
||||
{ value: "codex", label: "Codex" },
|
||||
{ value: "local", label: "Local executor" },
|
||||
]}
|
||||
onChange={() => undefined}
|
||||
/>
|
||||
</ControlRow>
|
||||
<RangeControl label="Температура" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "appearance",
|
||||
label: "Внешний вид",
|
||||
description: "Тема и акцент",
|
||||
content: (
|
||||
<ControlRow label="Акцент"><ColorField value={accentHex} onChange={setAccentHex} /></ControlRow>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: "runtime",
|
||||
label: "Выполнение",
|
||||
description: "Параметры запуска",
|
||||
content: <Checker checked={false} label="Запускать автоматически" onChange={() => undefined} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="catalog-app nodedc-ui-root" style={{ "--catalog-accent": accentHex } as CSSProperties}>
|
||||
<AppHeader
|
||||
brand={<img src="/nodedc-logo.svg" alt="NODE.DC" />}
|
||||
center={
|
||||
<>
|
||||
<HeaderWorkspace label="UI" />
|
||||
<SegmentedControl
|
||||
label="Разделы каталога"
|
||||
value={section}
|
||||
items={[
|
||||
{ value: "foundation", label: "Основа" },
|
||||
{ value: "controls", label: "Контролы" },
|
||||
{ value: "windows", label: "Окна" },
|
||||
{ value: "inspector", label: "Инспектор" },
|
||||
]}
|
||||
onChange={openSection}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
right={
|
||||
<HeaderProfile>
|
||||
<IconButton label="Сменить тему" onClick={() => setTheme((current) => current === "dark" ? "light" : "dark")}>
|
||||
{theme === "dark" ? "☼" : "◐"}
|
||||
</IconButton>
|
||||
<span className="catalog-avatar">DC</span>
|
||||
</HeaderProfile>
|
||||
}
|
||||
/>
|
||||
|
||||
<main className="catalog-main">
|
||||
<div className="catalog-hero">
|
||||
<StatusBadge tone="accent">baseline 0.1.0</StatusBadge>
|
||||
<h1>Один UI-контракт.<br />Разные приложения.</h1>
|
||||
<p>Геометрия, окна и поведение остаются общими. Приложение выбирает тему и акцент, затем использует готовые компоненты.</p>
|
||||
</div>
|
||||
|
||||
<Section id="foundation" eyebrow="01 / Foundation" title="Материал и тема" description="Одинаковые поверхности проверяются в тёмной и светлой схеме без fork компонентов.">
|
||||
<div className="catalog-grid catalog-grid--foundation">
|
||||
<Preview title="Theme contract" note={theme === "dark" ? "dark glass" : "light glass"}>
|
||||
<div className="catalog-theme-row">
|
||||
<Button variant={theme === "dark" ? "accent" : "secondary"} onClick={() => setTheme("dark")}>Dark</Button>
|
||||
<Button variant={theme === "light" ? "accent" : "secondary"} onClick={() => setTheme("light")}>Light</Button>
|
||||
</div>
|
||||
<div className="catalog-swatches">
|
||||
{accents.map((item) => (
|
||||
<button
|
||||
key={item.label}
|
||||
type="button"
|
||||
className="catalog-swatch"
|
||||
data-active={item.hex.toLowerCase() === accentHex.toLowerCase() ? "true" : undefined}
|
||||
style={{ "--swatch": item.hex } as CSSProperties}
|
||||
onClick={() => setAccentHex(item.hex)}
|
||||
>
|
||||
<span />{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<ColorField label="Свой accent" value={accentHex} onChange={setAccentHex} />
|
||||
</Preview>
|
||||
<Preview title="Glass hierarchy" note="default / strong / soft">
|
||||
<div className="catalog-surface-stack">
|
||||
<GlassSurface padding="md">Default surface</GlassSurface>
|
||||
<GlassSurface tone="strong" padding="md">Strong floating surface</GlassSurface>
|
||||
<GlassSurface tone="soft" padding="md">Soft nested surface</GlassSurface>
|
||||
</div>
|
||||
</Preview>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="controls" eyebrow="02 / Primitives" title="Контролы" description="Общие actions, fields и selection primitives для React и DOM consumers.">
|
||||
<div className="catalog-grid">
|
||||
<Preview title="Actions" note="shared geometry">
|
||||
<div className="catalog-inline catalog-inline--wrap">
|
||||
<Button variant="accent">Сохранить</Button>
|
||||
<Button>Отмена</Button>
|
||||
<Button variant="ghost">Подробнее</Button>
|
||||
<Button variant="danger">Удалить</Button>
|
||||
<IconButton label="Настройки">⚙</IconButton>
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Fields" note="label / hint / control">
|
||||
<div className="catalog-form">
|
||||
<TextField label="Название проекта" hint="обязательно" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||||
<TextAreaField label="Описание" value={notes} onChange={(event) => setNotes(event.target.value)} />
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Selection" note="portal dropdown">
|
||||
<div className="catalog-form">
|
||||
<FieldFrame label="Статус">
|
||||
<Select label="Статус" value={selectedStatus} options={[...selectOptions]} searchable onChange={setSelectedStatus} />
|
||||
</FieldFrame>
|
||||
<Dropdown
|
||||
trigger={({ open, toggle, setTriggerRef, surfaceId }) => (
|
||||
<Button ref={setTriggerRef} aria-expanded={open} aria-controls={surfaceId} onClick={toggle}>Действия</Button>
|
||||
)}
|
||||
>
|
||||
{({ close }) => (
|
||||
<>
|
||||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Переименовать</span></button>
|
||||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Дублировать</span></button>
|
||||
<button className="nodedc-dropdown-option" data-nodedc-option onClick={close}><span /><span className="nodedc-dropdown-option__label">Архивировать</span></button>
|
||||
</>
|
||||
)}
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Settings controls" note="new Engine generation">
|
||||
<div className="catalog-form">
|
||||
<Checker checked={checker} label="Автоматическое обновление" description="Применять изменения без перезапуска" onChange={setChecker} />
|
||||
<RangeControl label="Интенсивность стекла" value={range} min={0} max={100} formatValue={(value) => `${value}%`} onChange={setRange} />
|
||||
</div>
|
||||
</Preview>
|
||||
<Preview title="Semantic status" note="not tied to accent" className="catalog-preview--wide">
|
||||
<div className="catalog-inline catalog-inline--wrap">
|
||||
<StatusBadge>Черновик</StatusBadge>
|
||||
<StatusBadge tone="success">Готово</StatusBadge>
|
||||
<StatusBadge tone="warning">Нужна проверка</StatusBadge>
|
||||
<StatusBadge tone="danger">Ошибка</StatusBadge>
|
||||
<StatusBadge tone="accent">В работе</StatusBadge>
|
||||
</div>
|
||||
</Preview>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section id="windows" eyebrow="03 / Layers" title="Окна и подтверждения" description="Modal и side panel используют одну механику portal, Escape, focus trap и focus restore.">
|
||||
<Preview title="Controlled windows" note="center / end / confirm">
|
||||
<div className="catalog-inline catalog-inline--wrap">
|
||||
<Button variant="accent" onClick={() => setModalOpen(true)}>Открыть окно</Button>
|
||||
<Button onClick={() => setInspectorOpen(true)}>Открыть инспектор</Button>
|
||||
<Button variant="danger" onClick={() => setConfirmOpen(true)}>Проверить удаление</Button>
|
||||
</div>
|
||||
</Preview>
|
||||
</Section>
|
||||
|
||||
<Section id="inspector" eyebrow="04 / Pattern" title="Inspector / Settings" description="Канон основан только на новом Environment Settings и NDC Agent Inspector, без legacy-инспекторов Engine.">
|
||||
<div className="catalog-inspector-stage">
|
||||
<GlassSurface tone="strong" radius="panel" padding="md" className="catalog-inspector-card">
|
||||
<div className="catalog-inspector-title"><strong>Инспектор</strong><span>Agent Definition</span></div>
|
||||
<Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
|
||||
</GlassSurface>
|
||||
</div>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
<Window
|
||||
open={modalOpen}
|
||||
title="Настройки сервиса"
|
||||
subtitle="Единое окно Launcher / CMS / SEO"
|
||||
onClose={() => setModalOpen(false)}
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={() => setModalOpen(false)}>Отмена</Button>
|
||||
<WindowFooterActions><Button variant="accent" onClick={() => setModalOpen(false)}>Сохранить</Button></WindowFooterActions>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="catalog-form">
|
||||
<TextField label="Название" value={projectName} onChange={(event) => setProjectName(event.target.value)} />
|
||||
<FieldFrame label="Статус"><Select label="Статус" value={selectedStatus} options={[...selectOptions]} onChange={setSelectedStatus} /></FieldFrame>
|
||||
<Checker checked={checker} label="Сервис активен" onChange={setChecker} />
|
||||
</div>
|
||||
</Window>
|
||||
|
||||
<Window open={inspectorOpen} title="Инспектор" subtitle="Agent Definition" placement="end" onClose={() => setInspectorOpen(false)}>
|
||||
<Inspector sections={inspectorSections} defaultOpen={["definition"]} activeId="definition" />
|
||||
</Window>
|
||||
|
||||
<ConfirmationModal
|
||||
open={confirmOpen}
|
||||
title="Удалить конфигурацию?"
|
||||
description={<>Конфигурация будет удалена. Это действие нельзя отменить.</>}
|
||||
confirmLabel="Удалить"
|
||||
danger
|
||||
onClose={() => setConfirmOpen(false)}
|
||||
onConfirm={() => setConfirmOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "@nodedc/ui-core/styles.css";
|
||||
import "./styles.css";
|
||||
import { CatalogApp } from "./CatalogApp";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<StrictMode>
|
||||
<CatalogApp />
|
||||
</StrictMode>,
|
||||
);
|
||||
|
||||
@@ -0,0 +1,261 @@
|
||||
:root {
|
||||
background: var(--nodedc-canvas);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
background:
|
||||
radial-gradient(circle at 72% 10%, rgba(var(--nodedc-accent-rgb), 0.09), transparent 28rem),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
|
||||
linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
|
||||
var(--nodedc-canvas);
|
||||
background-size: auto, 44px 44px, 44px 44px, auto;
|
||||
color: var(--nodedc-text-primary);
|
||||
transition: background-color 220ms ease, color 220ms ease;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.catalog-app {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
[data-nodedc-theme="light"] .catalog-app .nodedc-header__brand img {
|
||||
filter: brightness(0.12);
|
||||
}
|
||||
|
||||
.catalog-avatar {
|
||||
display: inline-grid;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: rgb(var(--nodedc-accent-rgb));
|
||||
color: rgb(var(--nodedc-on-accent-rgb));
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.catalog-main {
|
||||
display: grid;
|
||||
width: min(1180px, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
gap: 8rem;
|
||||
padding: 5rem 0 10rem;
|
||||
}
|
||||
|
||||
.catalog-hero {
|
||||
display: grid;
|
||||
min-height: 32rem;
|
||||
align-content: center;
|
||||
justify-items: start;
|
||||
gap: 1.4rem;
|
||||
}
|
||||
|
||||
.catalog-hero h1 {
|
||||
max-width: 820px;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-primary);
|
||||
font-size: clamp(3.1rem, 7vw, 6.4rem);
|
||||
font-weight: 670;
|
||||
letter-spacing: -0.065em;
|
||||
line-height: 0.92;
|
||||
}
|
||||
|
||||
.catalog-hero p {
|
||||
max-width: 650px;
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: clamp(1rem, 1.6vw, 1.3rem);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.catalog-section {
|
||||
display: grid;
|
||||
scroll-margin-top: 2rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.catalog-section__head {
|
||||
display: grid;
|
||||
max-width: 760px;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-section__head span {
|
||||
color: rgb(var(--nodedc-accent-rgb));
|
||||
font-size: 0.72rem;
|
||||
font-weight: 780;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.catalog-section__head h2 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 4vw, 3.6rem);
|
||||
font-weight: 650;
|
||||
letter-spacing: -0.05em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.catalog-section__head p {
|
||||
margin: 0;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.catalog-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-grid--foundation {
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
}
|
||||
|
||||
.catalog-preview {
|
||||
min-height: 18rem;
|
||||
}
|
||||
|
||||
.catalog-preview--wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.catalog-preview__head {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.catalog-preview__head strong {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.catalog-preview__head span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.68rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.catalog-preview__body {
|
||||
display: grid;
|
||||
min-height: 10rem;
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.catalog-theme-row,
|
||||
.catalog-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.catalog-inline--wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.catalog-swatches {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.catalog-swatch {
|
||||
display: grid;
|
||||
min-width: 0;
|
||||
gap: 0.4rem;
|
||||
border: 0;
|
||||
border-radius: 0.9rem;
|
||||
background: var(--nodedc-glass-control-bg);
|
||||
color: var(--nodedc-text-muted);
|
||||
padding: 0.55rem;
|
||||
font-size: 0.68rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.catalog-swatch span {
|
||||
height: 2.4rem;
|
||||
border-radius: 0.65rem;
|
||||
background: var(--swatch);
|
||||
}
|
||||
|
||||
.catalog-swatch[data-active="true"] {
|
||||
background: var(--nodedc-glass-control-hover);
|
||||
color: var(--nodedc-text-primary);
|
||||
}
|
||||
|
||||
.catalog-surface-stack,
|
||||
.catalog-form {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.catalog-surface-stack .nodedc-glass {
|
||||
min-height: 4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--nodedc-text-secondary);
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.catalog-inspector-stage {
|
||||
display: flex;
|
||||
min-height: 40rem;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-start;
|
||||
padding: 4rem;
|
||||
border-radius: 2rem;
|
||||
background:
|
||||
radial-gradient(circle at 18% 24%, rgba(var(--nodedc-accent-rgb), 0.13), transparent 22rem),
|
||||
color-mix(in srgb, var(--nodedc-canvas-soft) 86%, transparent);
|
||||
}
|
||||
|
||||
.catalog-inspector-card {
|
||||
width: min(24.375rem, 100%);
|
||||
}
|
||||
|
||||
.catalog-inspector-title {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
padding: 0.75rem 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.catalog-inspector-title span {
|
||||
color: var(--nodedc-text-muted);
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
.catalog-main {
|
||||
gap: 6rem;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.catalog-grid,
|
||||
.catalog-grid--foundation {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.catalog-preview--wide {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.catalog-inspector-stage {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"noEmit": true,
|
||||
"types": ["vite/client"]
|
||||
},
|
||||
"include": ["src", "vite.config.ts"]
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
sourcemap: true,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user