АРХ - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: фундамент редизайна и фиксация UI-техдолга

plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx

@@ -116,7 +116,7 @@ const ProjectsToolbarMenu = observer(function ProjectsToolbarMenu() {
       >
         <span
           className={`nodedc-toolbar-icon-active-dot ${
-            pathname.includes("/projects/") ? "bg-[rgb(var(--nodedc-accent-rgb))] text-[#0b1117]" : ""
+            pathname.includes("/projects/") ? "bg-[rgb(var(--nodedc-accent-rgb))] text-[rgb(var(--nodedc-on-accent-rgb))]" : ""
           }`}
         >
           <ProjectIcon className="size-4" />

plane-src/apps/web/app/root.tsx

@@ -36,10 +36,50 @@ import "@fontsource/ibm-plex-mono";
 
 const APP_TITLE = "NODE.DC | Self-hosted task management workspace.";
 
+const DARK_TEXT_RGB = [11, 17, 23] as const;
+const LIGHT_TEXT_RGB = [245, 247, 251] as const;
+
+const formatRgbTuple = (rgb: readonly number[]) => rgb.join(" ");
+const formatCssRgb = (rgb: readonly number[]) => `rgb(${rgb.join(" ")})`;
+
+const blendRgb = (rgb: readonly number[], target: number, ratio: number) =>
+  rgb.map((channel) => Math.round(channel * (1 - ratio) + target * ratio)) as [number, number, number];
+
+const toRelativeLuminance = (rgb: readonly number[]) => {
+  const [r, g, b] = rgb.map((channel) => {
+    const normalized = channel / 255;
+    return normalized <= 0.03928 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  });
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+};
+
+const getReadableTextRgb = (rgb: readonly number[]) => (toRelativeLuminance(rgb) > 0.52 ? DARK_TEXT_RGB : LIGHT_TEXT_RGB);
+
+const accentRgb = designConfig.nodedc.accent_rgb as [number, number, number];
+const activeCardRgb = designConfig.nodedc.active_card_rgb as [number, number, number];
+const passiveCardRgb = designConfig.nodedc.passive_card_rgb as [number, number, number];
+const accentHoverRgb = blendRgb(accentRgb, 255, 0.18);
+const accentActiveRgb = blendRgb(accentRgb, 0, 0.1);
+const onAccentRgb = getReadableTextRgb(accentRgb);
+const onActiveCardRgb = getReadableTextRgb(activeCardRgb);
+const onPassiveCardRgb = getReadableTextRgb(passiveCardRgb);
+
 const designConfigStyle = {
-  "--nodedc-accent-rgb": designConfig.nodedc.accent_rgb.join(" "),
-  "--nodedc-card-passive-rgb": designConfig.nodedc.passive_card_rgb.join(" "),
-  "--nodedc-card-active-rgb": designConfig.nodedc.active_card_rgb.join(" "),
+  "--nodedc-accent-rgb": formatRgbTuple(accentRgb),
+  "--nodedc-card-passive-rgb": formatRgbTuple(passiveCardRgb),
+  "--nodedc-card-active-rgb": formatRgbTuple(activeCardRgb),
+  "--nodedc-on-accent-rgb": formatRgbTuple(onAccentRgb),
+  "--nodedc-on-card-active-rgb": formatRgbTuple(onActiveCardRgb),
+  "--nodedc-on-card-passive-rgb": formatRgbTuple(onPassiveCardRgb),
+  "--brand-default": formatCssRgb(accentRgb),
+  "--brand-300": formatCssRgb(blendRgb(accentRgb, 255, 0.35)),
+  "--brand-700": formatCssRgb(blendRgb(accentRgb, 0, 0.25)),
+  "--bg-accent-primary": formatCssRgb(accentRgb),
+  "--bg-accent-primary-hover": formatCssRgb(accentHoverRgb),
+  "--bg-accent-primary-active": formatCssRgb(accentActiveRgb),
+  "--txt-on-color": formatCssRgb(onAccentRgb),
+  "--txt-icon-on-color": formatCssRgb(onAccentRgb),
 } as CSSProperties;
 
 export const links: LinksFunction = () => [