@orcestr/ui 0.0.1

package/dist/example/ExampleThemePlayground.d.ts

@@ -0,0 +1,417 @@
+import { type CSSProperties, type Dispatch, type SetStateAction } from 'react';
+import { type OrcestrTheme, type OrcestrThemeMode, type OrcestrThemeOverrides, type OrcestrThemeSurface, type OrcestrUiLocale } from '..';
+type LocalizedText = Record<OrcestrUiLocale, string>;
+export type ThemePreset = {
+    id: string;
+    label: LocalizedText;
+    description: LocalizedText;
+    mode: OrcestrThemeMode;
+    surface: OrcestrThemeSurface;
+    accent: string;
+    previewBg: string;
+    previewPanel: string;
+    previewText: string;
+    group: 'dark' | 'light';
+    overrides?: OrcestrThemeOverrides;
+};
+export declare const themePlaygroundPresets: readonly [{
+    readonly id: "orcestr-dark";
+    readonly label: {
+        readonly ru: "Orcestr темная";
+        readonly en: "Orcestr dark";
+    };
+    readonly description: {
+        readonly ru: "Нейтральная темная база платформы.";
+        readonly en: "Neutral dark platform base.";
+    };
+    readonly mode: "dark";
+    readonly surface: "orcestr";
+    readonly accent: "#6ea0ff";
+    readonly previewBg: "#111318";
+    readonly previewPanel: "#171a21";
+    readonly previewText: "#f4f6f8";
+    readonly group: "dark";
+}, {
+    readonly id: "operations-dark";
+    readonly label: {
+        readonly ru: "Operations";
+        readonly en: "Operations";
+    };
+    readonly description: {
+        readonly ru: "Плотная тема для повторяющейся операционной работы.";
+        readonly en: "Dense theme for repeated operational work.";
+    };
+    readonly mode: "dark";
+    readonly surface: "operations";
+    readonly accent: "#34d399";
+    readonly previewBg: "#07140f";
+    readonly previewPanel: "#0d2119";
+    readonly previewText: "#e8fff5";
+    readonly group: "dark";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#07140f";
+            readonly panel: "#0d2119";
+            readonly panelSoft: "#133126";
+            readonly floating: "#0d2119";
+            readonly brand: "#34d399";
+            readonly brandStrong: "#86efac";
+            readonly brandSolid: "#059669";
+            readonly brandSolidHover: "#10b981";
+            readonly brandSoft: "rgb(52 211 153 / 16%)";
+            readonly selected: "rgb(52 211 153 / 14%)";
+            readonly info: "#7dd3fc";
+            readonly infoSoft: "#0b3240";
+        };
+    };
+}, {
+    readonly id: "deep-black";
+    readonly label: {
+        readonly ru: "Глубокий черный";
+        readonly en: "Deep black";
+    };
+    readonly description: {
+        readonly ru: "Абсолютно черная база для OLED-интерфейсов.";
+        readonly en: "Absolute black base for OLED interfaces.";
+    };
+    readonly mode: "dark";
+    readonly surface: "orcestr";
+    readonly accent: "#8ab4ff";
+    readonly previewBg: "#000000";
+    readonly previewPanel: "#050505";
+    readonly previewText: "#f7f7f7";
+    readonly group: "dark";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#000000";
+            readonly panel: "#050505";
+            readonly panelSoft: "#0a0a0a";
+            readonly floating: "#050505";
+            readonly section: "rgb(255 255 255 / 1.5%)";
+            readonly sectionNested: "rgb(255 255 255 / 1%)";
+            readonly pad: "rgb(255 255 255 / 2.5%)";
+            readonly padHover: "rgb(255 255 255 / 5%)";
+            readonly controlHover: "rgb(255 255 255 / 6%)";
+            readonly border: "rgb(255 255 255 / 7%)";
+            readonly borderStrong: "rgb(255 255 255 / 12%)";
+            readonly text: "#f7f7f7";
+            readonly muted: "#9a9a9a";
+            readonly brand: "#8ab4ff";
+            readonly brandStrong: "#b7d1ff";
+            readonly brandSolid: "#2759c7";
+            readonly brandSolidHover: "#3369e6";
+            readonly brandSoft: "rgb(138 180 255 / 17%)";
+            readonly selected: "rgb(138 180 255 / 14%)";
+            readonly focusRing: "0 0 0 3px rgb(138 180 255 / 20%)";
+            readonly skeletonShimmer: "rgb(255 255 255 / 7%)";
+        };
+        readonly shadows: {
+            readonly sm: "none";
+            readonly md: "0 18px 58px rgb(0 0 0 / 72%)";
+            readonly overlay: "0 28px 90px rgb(0 0 0 / 82%)";
+            readonly section: "none";
+        };
+        readonly components: {
+            readonly buttonRadius: "5px";
+        };
+    };
+}, {
+    readonly id: "graphite";
+    readonly label: {
+        readonly ru: "Графит";
+        readonly en: "Graphite";
+    };
+    readonly description: {
+        readonly ru: "Сдержанная аналитика и административные экраны.";
+        readonly en: "Restrained analytics and admin screens.";
+    };
+    readonly mode: "dark";
+    readonly surface: "orcestr";
+    readonly accent: "#c4d3e8";
+    readonly previewBg: "#111111";
+    readonly previewPanel: "#1a1a1a";
+    readonly previewText: "#eeeeee";
+    readonly group: "dark";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#111111";
+            readonly panel: "#1a1a1a";
+            readonly panelSoft: "#242424";
+            readonly floating: "#1b1b1b";
+            readonly brand: "#c4d3e8";
+            readonly brandStrong: "#e4edf8";
+            readonly brandSolid: "#5d6f87";
+            readonly brandSolidHover: "#71839b";
+            readonly brandSoft: "rgb(196 211 232 / 14%)";
+            readonly selected: "rgb(196 211 232 / 12%)";
+            readonly info: "#8ecae6";
+            readonly infoSoft: "#122f3a";
+        };
+        readonly radii: {
+            readonly md: "5px";
+            readonly lg: "7px";
+            readonly xl: "10px";
+        };
+    };
+}, {
+    readonly id: "media-dark";
+    readonly label: {
+        readonly ru: "Media dark";
+        readonly en: "Media dark";
+    };
+    readonly description: {
+        readonly ru: "Мягкая темная тема для контентных интерфейсов.";
+        readonly en: "Soft dark theme for content-heavy interfaces.";
+    };
+    readonly mode: "dark";
+    readonly surface: "media";
+    readonly accent: "#fb7185";
+    readonly previewBg: "#120d0e";
+    readonly previewPanel: "#2a1222";
+    readonly previewText: "#fff0f6";
+    readonly group: "dark";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#120d0e";
+            readonly panel: "#2a1222";
+            readonly panelSoft: "#3a1830";
+            readonly floating: "#2a1222";
+            readonly brand: "#fb7185";
+            readonly brandStrong: "#fda4af";
+            readonly brandSolid: "#be123c";
+            readonly brandSolidHover: "#e11d48";
+            readonly brandSoft: "rgb(251 113 133 / 18%)";
+            readonly selected: "rgb(251 113 133 / 15%)";
+            readonly warning: "#fbbf24";
+            readonly warningSoft: "#4a2f0b";
+        };
+    };
+}, {
+    readonly id: "catalog-dark";
+    readonly label: {
+        readonly ru: "Catalog dark";
+        readonly en: "Catalog dark";
+    };
+    readonly description: {
+        readonly ru: "Точная темная тема для структурированных каталогов.";
+        readonly en: "Precise dark theme for structured index surfaces.";
+    };
+    readonly mode: "dark";
+    readonly surface: "catalog";
+    readonly accent: "#e6c26a";
+    readonly previewBg: "#11100d";
+    readonly previewPanel: "#191712";
+    readonly previewText: "#f8f1dd";
+    readonly group: "dark";
+}, {
+    readonly id: "midnight";
+    readonly label: {
+        readonly ru: "Полночь";
+        readonly en: "Midnight";
+    };
+    readonly description: {
+        readonly ru: "Сине-черная диспетчерская тема.";
+        readonly en: "Blue-black dispatcher theme.";
+    };
+    readonly mode: "dark";
+    readonly surface: "orcestr";
+    readonly accent: "#a78bfa";
+    readonly previewBg: "#09091f";
+    readonly previewPanel: "#121234";
+    readonly previewText: "#edf5ff";
+    readonly group: "dark";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#09091f";
+            readonly panel: "#121234";
+            readonly panelSoft: "#1b1b4a";
+            readonly floating: "#121234";
+            readonly brand: "#a78bfa";
+            readonly brandStrong: "#c4b5fd";
+            readonly brandSolid: "#7c3aed";
+            readonly brandSolidHover: "#8b5cf6";
+            readonly brandSoft: "rgb(167 139 250 / 17%)";
+            readonly selected: "rgb(167 139 250 / 14%)";
+            readonly info: "#22d3ee";
+            readonly infoSoft: "#083344";
+        };
+    };
+}, {
+    readonly id: "orcestr-light";
+    readonly label: {
+        readonly ru: "Orcestr светлая";
+        readonly en: "Orcestr light";
+    };
+    readonly description: {
+        readonly ru: "Чистая светлая база продукта.";
+        readonly en: "Clean light product base.";
+    };
+    readonly mode: "light";
+    readonly surface: "orcestr";
+    readonly accent: "#2563eb";
+    readonly previewBg: "#f8fafc";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#111827";
+    readonly group: "light";
+}, {
+    readonly id: "operations-light";
+    readonly label: {
+        readonly ru: "Operations light";
+        readonly en: "Operations light";
+    };
+    readonly description: {
+        readonly ru: "Плотная светлая тема для повторяющейся операционной работы.";
+        readonly en: "Dense light theme for repeated operational work.";
+    };
+    readonly mode: "light";
+    readonly surface: "operations";
+    readonly accent: "#047857";
+    readonly previewBg: "#eefbf4";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#092016";
+    readonly group: "light";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#eefbf4";
+            readonly panel: "#ffffff";
+            readonly panelSoft: "#ddf4e8";
+            readonly brand: "#047857";
+            readonly brandStrong: "#065f46";
+            readonly brandSolid: "#047857";
+            readonly brandSolidHover: "#065f46";
+            readonly brandSoft: "rgb(4 120 87 / 12%)";
+            readonly selected: "rgb(4 120 87 / 10%)";
+        };
+    };
+}, {
+    readonly id: "media-light";
+    readonly label: {
+        readonly ru: "Media light";
+        readonly en: "Media light";
+    };
+    readonly description: {
+        readonly ru: "Мягкая светлая тема для контентных интерфейсов.";
+        readonly en: "Soft light theme for content-heavy interfaces.";
+    };
+    readonly mode: "light";
+    readonly surface: "media";
+    readonly accent: "#db2777";
+    readonly previewBg: "#fff1f8";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#181018";
+    readonly group: "light";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#fff1f8";
+            readonly panel: "#ffffff";
+            readonly panelSoft: "#ffe4f2";
+            readonly brand: "#db2777";
+            readonly brandStrong: "#be185d";
+            readonly brandSolid: "#db2777";
+            readonly brandSolidHover: "#be185d";
+            readonly brandSoft: "rgb(219 39 119 / 12%)";
+            readonly selected: "rgb(219 39 119 / 10%)";
+        };
+    };
+}, {
+    readonly id: "catalog-light";
+    readonly label: {
+        readonly ru: "Catalog light";
+        readonly en: "Catalog light";
+    };
+    readonly description: {
+        readonly ru: "Теплая светлая тема для структурированных каталогов.";
+        readonly en: "Warm light theme for structured index surfaces.";
+    };
+    readonly mode: "light";
+    readonly surface: "catalog";
+    readonly accent: "#9b6f12";
+    readonly previewBg: "#fbfaf6";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#211a0f";
+    readonly group: "light";
+}, {
+    readonly id: "porcelain";
+    readonly label: {
+        readonly ru: "Фарфор";
+        readonly en: "Porcelain";
+    };
+    readonly description: {
+        readonly ru: "Спокойная белая редакционная среда.";
+        readonly en: "Calm white editorial workspace.";
+    };
+    readonly mode: "light";
+    readonly surface: "orcestr";
+    readonly accent: "#7c3aed";
+    readonly previewBg: "#f8f5ff";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#1d1435";
+    readonly group: "light";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#f8f5ff";
+            readonly panel: "#ffffff";
+            readonly panelSoft: "#ede9fe";
+            readonly brand: "#7c3aed";
+            readonly brandStrong: "#5b21b6";
+            readonly brandSolid: "#7c3aed";
+            readonly brandSolidHover: "#6d28d9";
+            readonly brandSoft: "rgb(124 58 237 / 10%)";
+            readonly selected: "rgb(124 58 237 / 8%)";
+            readonly section: "rgb(124 58 237 / 3%)";
+            readonly sectionNested: "rgb(124 58 237 / 2%)";
+        };
+        readonly shadows: {
+            readonly section: "none";
+        };
+    };
+}, {
+    readonly id: "mint-light";
+    readonly label: {
+        readonly ru: "Мята светлая";
+        readonly en: "Mint light";
+    };
+    readonly description: {
+        readonly ru: "Свежая светлая тема для плотных рабочих экранов.";
+        readonly en: "Fresh light theme for dense work screens.";
+    };
+    readonly mode: "light";
+    readonly surface: "orcestr";
+    readonly accent: "#0f9f6e";
+    readonly previewBg: "#f4fbf8";
+    readonly previewPanel: "#ffffff";
+    readonly previewText: "#0f1f19";
+    readonly group: "light";
+    readonly overrides: {
+        readonly colors: {
+            readonly bg: "#f4fbf8";
+            readonly panel: "#ffffff";
+            readonly panelSoft: "#eaf7f1";
+            readonly brand: "#0f9f6e";
+            readonly brandStrong: "#087a54";
+            readonly brandSolid: "#0f9f6e";
+            readonly brandSolidHover: "#0b8a5e";
+            readonly brandSoft: "rgb(15 159 110 / 11%)";
+            readonly selected: "rgb(15 159 110 / 9%)";
+        };
+    };
+}];
+export type ThemePresetId = (typeof themePlaygroundPresets)[number]['id'];
+export declare function getThemePlaygroundPreset(id: ThemePresetId): ThemePreset;
+export declare function themePresetLabel(preset: ThemePreset, locale: OrcestrUiLocale): string;
+export declare function themePresetDescription(preset: ThemePreset, locale: OrcestrUiLocale): string;
+export declare function ExampleThemePlayground({ activePresetId, theme, locale, onPresetChange, onThemeOverridesChange, }: {
+    activePresetId: ThemePresetId;
+    theme: OrcestrTheme;
+    locale: OrcestrUiLocale;
+    onPresetChange: (preset: ThemePreset) => void;
+    onThemeOverridesChange: Dispatch<SetStateAction<OrcestrThemeOverrides>>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ThemePresetSelector({ activePresetId, locale, onPresetChange, }: {
+    activePresetId: ThemePresetId;
+    locale: OrcestrUiLocale;
+    onPresetChange: (preset: ThemePreset) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function themePresetPreviewStyle(preset: ThemePreset): CSSProperties;
+export {};
+//# sourceMappingURL=ExampleThemePlayground.d.ts.map

package/dist/example/ExampleThemePlayground.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleThemePlayground.d.ts","sourceRoot":"","sources":["../../src/example/ExampleThemePlayground.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,aAAa,EAAE,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAC,MAAM,OAAO,CAAC;AAElG,OAAO,EAOH,KAAK,YAAY,EACjB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EAExB,KAAK,eAAe,EACvB,MAAM,IAAI,CAAC;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;IACrB,WAAW,EAAE,aAAa,CAAC;IAC3B,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,mBAAmB,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACrC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2YY,CAAC;AAOhD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,wBAAwB,CAAC,EAAE,EAAE,aAAa,GAAG,WAAW,CAEvE;AAED,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAE5E;AAED,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,UAElF;AAyFD,wBAAgB,sBAAsB,CAAC,EACnC,cAAc,EACd,KAAK,EACL,MAAM,EACN,cAAc,EACd,sBAAsB,GACzB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC;IACpB,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,sBAAsB,EAAE,QAAQ,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;CAC3E,2CAwFA;AAED,wBAAgB,mBAAmB,CAAC,EAChC,cAAc,EACd,MAAM,EACN,cAAc,GACjB,EAAE;IACC,cAAc,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE,eAAe,CAAC;IACxB,cAAc,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACjD,2CAkDA;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,GAMlD,aAAa,CACrB"}