Zakaria/floci-ui
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Layout polish - rename: The Cloud

Browse Source
This commit is contained in:
Zakaria
2026-10-01 15:06:55 -04:00
parent 7f0d707578
commit 7f08f5b668
5 changed files with 119 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/components/Layout.tsx
+4 -7
View File
@@ -1,10 +1,7 @@
import {NavLink, Outlet, useLocation, useSearchParams} from 'react-router-dom'
import {AlertTriangle, ChevronsLeft, ChevronsRight, LayoutDashboard, Moon, Search, Sun} from 'lucide-react'
import {useCallback, useEffect, useRef, useState} from 'react'
import flociWhite from '@/assets/floci-white.svg'
import flociBlack from '@/assets/floci-black.svg'
import flociMarkWhite from '@/assets/floci-mark-white.svg'
import flociMarkBlack from '@/assets/floci-mark-black.svg'
import theCloud from '../../../../TheCloud.png'
import {useTheme} from '@/lib/useTheme'
import {useSidebar} from '@/lib/useSidebar'
import {useQuery} from '@tanstack/react-query'
@@ -179,9 +176,9 @@ export function Layout() {
<aside className="sidebar">
<div className="sidebar-inner">
<div className="brand">
<img className="brand-logo" src={isDark ? flociWhite : flociBlack} alt="Floci"/>
<img className="brand-mark" src={isDark ? flociMarkWhite : flociMarkBlack} alt="" aria-hidden="true"/>
<p>Local Cloud</p>
<img className="brand-logo" src={theCloud} alt="The Cloud"/>
<img className="brand-mark" src={theCloud} alt="" aria-hidden="true"/>
<p>The Cloud</p>
</div>
<nav className="nav" aria-label="Console">
packages/frontend/src/index.css
+106 -86
View File
@@ -1,57 +1,55 @@
:root {
color-scheme: dark;
/* ── Floci dark palette ── */
--bg: #0f1117;
--surface: #1a1d2e;
--elevated: #12152b;
--raised: #1e2245;
--raised-hover: #252b52;
--border: rgba(92, 107, 192, 0.25);
--border-faint: rgba(92, 107, 192, 0.15);
--border-lighter: rgba(92, 107, 192, 0.08);
--border-hover: rgba(92, 107, 192, 0.45);
--active-nav-bg: rgba(92, 107, 192, 0.18);
/* ── AWS dark palette ── */
--bg: #0f141a;
--surface: #161d26;
--elevated: #1b232d;
--raised: #232b37;
--raised-hover: #333843;
--border: #424650;
--border-faint: rgba(101, 104, 113, 0.55);
--border-lighter: rgba(101, 104, 113, 0.3);
--border-hover: #75cfff;
--active-nav-bg: #001129;
--text: #e8eaf6;
--text-bright: #ffffff;
--text-2: #9fa8c7;
/* 4.5:1 vs raised-hover (#252b52) so muted labels pass WCAG AA. */
--text-3: #9098c4;
--text: #c6c6cd;
--text-bright: #f9f9fa;
--text-2: #b4b4bb;
--text-3: #a4a4ad;
--text-muted: var(--text-3);
--text-nav: #b0b8d8;
--text-nav: #c6c6cd;
--status-ok: #4ade80;
--status-warn: #fbbf24;
--status-error: #f87171;
--status-ok: #2bb534;
--status-warn: #fbd332;
--status-error: #ff7a7a;
/* Floci brand indigo (floci.io) */
--accent: #7a7fd6;
--accent-tint: rgba(122, 127, 214, 0.16);
--accent-tint-faint: rgba(122, 127, 214, 0.07);
--accent-tint-border: rgba(122, 127, 214, 0.28);
--accent: #42b4ff;
--accent-tint: rgba(66, 180, 255, 0.16);
--accent-tint-faint: rgba(66, 180, 255, 0.07);
--accent-tint-border: rgba(66, 180, 255, 0.35);
/* Floci indigo interactive */
--link: #7986cb;
--link-tint: rgba(121, 134, 203, 0.08);
--link-tint-hover: rgba(121, 134, 203, 0.14);
--link-tint-border: rgba(121, 134, 203, 0.22);
--link: #42b4ff;
--link-tint: rgba(66, 180, 255, 0.08);
--link-tint-hover: rgba(66, 180, 255, 0.14);
--link-tint-border: rgba(66, 180, 255, 0.3);
--hover: rgba(255, 255, 255, 0.04);
--hover-md: rgba(255, 255, 255, 0.06);
--hover-lg: rgba(255, 255, 255, 0.07);
/* 3:1 vs raised so inputs/buttons meet non-text contrast. */
--input-border: rgba(255, 255, 255, 0.38);
--input-bg: rgba(255, 255, 255, 0.06);
--connection-bg: rgba(255, 255, 255, 0.03);
--kbd-border: rgba(255, 255, 255, 0.1);
--scrollbar-thumb: rgba(92, 107, 192, 0.3);
--service-card-bg: rgba(15, 17, 23, 0.92);
--service-card-hover: rgba(26, 29, 46, 0.96);
--fn-card-hover: rgba(30, 34, 69, 0.9);
--bulk-bar-bg: rgba(57, 73, 171, 0.35);
--bulk-bar-border: #5c6bc0;
--bulk-bar-text: #e8eaf6;
--input-border: #656871;
--input-bg: #161d26;
--connection-bg: #131920;
--kbd-border: #424650;
--scrollbar-thumb: #656871;
--service-card-bg: #161d26;
--service-card-hover: #1b232d;
--fn-card-hover: #232b37;
--bulk-bar-bg: #001129;
--bulk-bar-border: #42b4ff;
--bulk-bar-text: #f9f9fa;
--code-bg: #282c34;
/* Workflow Studio: keep canvas surfaces readable independently of state accents. */
--workflow-save-border: #4e628f;
@@ -106,55 +104,76 @@
[data-theme="light"] {
color-scheme: light;
/* ── Floci light palette ── */
--bg: #f4f6fc;
--surface: #ffffff;
--elevated: #ffffff;
--raised: #eef0f8;
--raised-hover: #e4e7f5;
--border: rgba(92, 107, 192, 0.22);
--border-faint: rgba(92, 107, 192, 0.14);
--border-lighter: rgba(92, 107, 192, 0.08);
--border-hover: rgba(92, 107, 192, 0.45);
--active-nav-bg: rgba(57, 73, 171, 0.09);
/* ── Warm paper light palette ── */
--paper: #efe7d2;
--paper-warm: #ece4cf;
--paper-dark: #ddd2b6;
--ink: #15140f;
--ink-soft: #2a2620;
--ink-mute: #5a5448;
--ink-faint: #8b8676;
--coral: #ed6f5c;
--coral-soft: #f08e7c;
--mustard: #e9b94a;
--olive: #6e7448;
--bone: #f7f1de;
--line: rgba(21, 20, 15, 0.16);
--line-soft: rgba(21, 20, 15, 0.08);
--line-faint: rgba(21, 20, 15, 0.05);
--shadow: 0 30px 60px -30px rgba(21, 20, 15, 0.18);
--serif: 'Playfair Display', 'Times New Roman', serif;
--sans: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--body: 'Inter', -apple-system, system-ui, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
--text: #263052;
--text-bright: #12173e;
--text-2: #4a5296;
/* 4.5:1 vs raised-hover (#e4e7f5). Light-theme muted indigo was 4.14:1. */
--text-3: #545c88;
--text-nav: #4a5296;
--bg: var(--paper);
--surface: var(--bone);
--elevated: #fffaf0;
--raised: var(--paper-warm);
--raised-hover: var(--paper-dark);
--border: var(--line);
--border-faint: var(--line-soft);
--border-lighter: var(--line-faint);
--border-hover: var(--coral);
--active-nav-bg: rgba(233, 185, 74, 0.2);
--status-ok: #166534;
--status-warn: #92400e;
--status-error: #b91c1c;
--text: var(--ink-soft);
--text-bright: var(--ink);
--text-2: var(--ink-mute);
--text-3: var(--ink-faint);
--text-nav: var(--ink-mute);
/* Floci brand indigo (floci.io, light) */
--accent: #5559a7;
--accent-tint: rgba(85, 89, 167, 0.12);
--accent-tint-faint: rgba(85, 89, 167, 0.06);
--accent-tint-border: rgba(85, 89, 167, 0.25);
--status-ok: #16803a;
--status-warn: #9a6b00;
--status-error: #bd3f30;
/* Floci indigo interactive (light) */
--link: #3949ab;
--link-tint: rgba(57, 73, 171, 0.07);
--link-tint-hover: rgba(57, 73, 171, 0.12);
--link-tint-border: rgba(57, 73, 171, 0.22);
--accent: var(--coral);
--accent-tint: rgba(237, 111, 92, 0.14);
--accent-tint-faint: rgba(237, 111, 92, 0.07);
--accent-tint-border: rgba(237, 111, 92, 0.3);
--link: #9d4133;
--link-tint: rgba(237, 111, 92, 0.08);
--link-tint-hover: rgba(237, 111, 92, 0.14);
--link-tint-border: rgba(237, 111, 92, 0.24);
--hover: rgba(0, 0, 0, 0.04);
--hover-md: rgba(0, 0, 0, 0.05);
--hover-lg: rgba(0, 0, 0, 0.06);
--input-border: rgba(38, 48, 82, 0.55);
--input-bg: rgba(0, 0, 0, 0.04);
--connection-bg: rgba(0, 0, 0, 0.02);
--kbd-border: rgba(0, 0, 0, 0.15);
--scrollbar-thumb: rgba(92, 107, 192, 0.3);
--service-card-bg: #ffffff;
--service-card-hover: #f5f7ff;
--fn-card-hover: #eff1ff;
--bulk-bar-bg: rgba(57, 73, 171, 0.1);
--bulk-bar-border: #3949ab;
--bulk-bar-text: #1a237e;
--input-border: rgba(21, 20, 15, 0.35);
--input-bg: rgba(247, 241, 222, 0.72);
--connection-bg: rgba(21, 20, 15, 0.025);
--kbd-border: var(--line);
--scrollbar-thumb: var(--paper-dark);
--service-card-bg: var(--bone);
--service-card-hover: #fffaf0;
--fn-card-hover: var(--paper-warm);
--bulk-bar-bg: rgba(233, 185, 74, 0.18);
--bulk-bar-border: #b77810;
--bulk-bar-text: var(--ink-soft);
--code-bg: #282c34;
font-family: var(--body);
--workflow-save-border: #5565a7;
--workflow-save-bg: #e7ecff;
@@ -415,17 +434,17 @@ pre,
.brand {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
gap: 4px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.brand-logo {
width: 100%;
max-width: 150px;
height: auto;
width: 72px;
height: 72px;
display: block;
object-fit: contain;
}
/* Shown only in the rail — see the collapsible sidebar section. */
@@ -457,6 +476,7 @@ pre,
margin: 0;
font-size: 11px;
color: var(--text-2);
text-align: center;
}
.nav {