This commit is contained in:
Oleg Maslov
154
docs/design_handoff_waggle_app/design-files/styles/waggle.css
Normal file
154
docs/design_handoff_waggle_app/design-files/styles/waggle.css
Normal file
@@ -0,0 +1,154 @@
|
||||
/* ═══════════════════════════════════════════════════════════════════════
|
||||
* WAGGLE — Refreshed "Hive" Design System (concept exploration)
|
||||
* A warmer, more crafted evolution of the original honey/dark theme.
|
||||
* Default = dark (warm graphite). [data-theme="light"] = warm paper.
|
||||
* ═══════════════════════════════════════════════════════════════════════ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
:root {
|
||||
/* ── Warm dark (the hive interior) ──────────────────────────── */
|
||||
--bg: #14110b;
|
||||
--bg-2: #1a160f;
|
||||
--surface: #1f1a12;
|
||||
--surface-2: #272117;
|
||||
--surface-3: #322a1d;
|
||||
--line: #38301f;
|
||||
--line-soft: #2a2417;
|
||||
--line-strong: #4a4030;
|
||||
|
||||
--text: #f6f1e4;
|
||||
--text-2: #c8bfa9;
|
||||
--text-muted: #948a73;
|
||||
--text-dim: #6b6250;
|
||||
|
||||
/* ── Honey (the accent — used sparingly, with intent) ───────── */
|
||||
--honey: #e9a52c;
|
||||
--honey-bright: #f6c45a;
|
||||
--honey-deep: #c07e16;
|
||||
--honey-wash: rgba(233,165,44,0.10);
|
||||
--honey-line: rgba(233,165,44,0.28);
|
||||
--honey-glow: 0 0 0 1px rgba(233,165,44,0.25), 0 8px 30px -10px rgba(233,165,44,0.35);
|
||||
|
||||
/* ── Refined, desaturated semantics ─────────────────────────── */
|
||||
--work: #7aa6d6; /* dusty blue — tasks / workspaces */
|
||||
--intel: #b196dd; /* muted violet — intelligence / memory */
|
||||
--healthy: #6cb78c; /* sage — complete / healthy */
|
||||
--attention: #e9a52c; /* honey — attention / automation */
|
||||
--risk: #db8068; /* terracotta — risk / failure */
|
||||
--work-wash: rgba(122,166,214,0.12);
|
||||
--intel-wash: rgba(177,150,221,0.12);
|
||||
--healthy-wash: rgba(108,183,140,0.12);
|
||||
--risk-wash: rgba(219,128,104,0.12);
|
||||
|
||||
/* ── Depth ──────────────────────────────────────────────────── */
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
|
||||
--shadow: 0 4px 24px -8px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
|
||||
--shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
|
||||
--shadow-pop: 0 30px 80px -24px rgba(0,0,0,0.8);
|
||||
|
||||
/* ── Type ───────────────────────────────────────────────────── */
|
||||
--sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
--serif: var(--sans); /* softened: display now uses the clean grotesk, not a book serif */
|
||||
--mono: 'JetBrains Mono', ui-monospace, monospace;
|
||||
|
||||
--r-sm: 8px;
|
||||
--r: 12px;
|
||||
--r-lg: 18px;
|
||||
--r-xl: 26px;
|
||||
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
[data-theme="light"] {
|
||||
--bg: #f7f1e4;
|
||||
--bg-2: #f1e9d8;
|
||||
--surface: #fffdf8;
|
||||
--surface-2: #f6efe0;
|
||||
--surface-3: #efe6d2;
|
||||
--line: #e4d8be;
|
||||
--line-soft: #ede3cd;
|
||||
--line-strong: #d2c3a2;
|
||||
|
||||
--text: #211b11;
|
||||
--text-2: #5a5140;
|
||||
--text-muted: #847a64;
|
||||
--text-dim: #a99e85;
|
||||
|
||||
--honey: #b57d12;
|
||||
--honey-bright: #cf932a;
|
||||
--honey-deep: #92620a;
|
||||
--honey-wash: rgba(181,125,18,0.10);
|
||||
--honey-line: rgba(181,125,18,0.30);
|
||||
--honey-glow: 0 0 0 1px rgba(181,125,18,0.22), 0 8px 30px -12px rgba(181,125,18,0.30);
|
||||
|
||||
--work: #3f72b0;
|
||||
--intel: #7d57b8;
|
||||
--healthy: #3c8a5f;
|
||||
--attention: #b57d12;
|
||||
--risk: #c0573c;
|
||||
--work-wash: rgba(63,114,176,0.10);
|
||||
--intel-wash: rgba(125,87,184,0.10);
|
||||
--healthy-wash: rgba(60,138,95,0.10);
|
||||
--risk-wash: rgba(192,87,60,0.10);
|
||||
|
||||
--shadow-sm: 0 1px 2px rgba(60,45,20,0.06);
|
||||
--shadow: 0 6px 24px -10px rgba(60,45,20,0.18), 0 1px 2px rgba(60,45,20,0.06);
|
||||
--shadow-lg: 0 24px 60px -22px rgba(60,45,20,0.22), 0 2px 8px rgba(60,45,20,0.08);
|
||||
--shadow-pop: 0 30px 80px -26px rgba(60,45,20,0.28);
|
||||
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: var(--sans);
|
||||
font-size: 16px;
|
||||
line-height: 1.55;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* ── Hex utility ────────────────────────────────────────────────── */
|
||||
.hex { clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }
|
||||
|
||||
/* ── Honeycomb texture (very subtle) ────────────────────────────── */
|
||||
.comb {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 18.5l26 15v30l-26 15-26-15v-30z M28 53.5l26 15v30l-26 15-26-15v-30z' fill='none' stroke='%23e9a52c' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ── Focus ──────────────────────────────────────────────────────── */
|
||||
:focus-visible { outline: 2px solid var(--honey); outline-offset: 2px; }
|
||||
|
||||
::selection { background: rgba(233,165,44,0.28); color: var(--text); }
|
||||
|
||||
::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }
|
||||
|
||||
/* ── Shared atoms used across screens ───────────────────────────── */
|
||||
.mono { font-family: var(--mono); }
|
||||
.serif { font-family: var(--serif); }
|
||||
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px; border-radius: 999px;
|
||||
font-size: 12px; font-weight: 500; letter-spacing: 0.01em;
|
||||
border: 1px solid var(--line); color: var(--text-2); background: var(--surface);
|
||||
}
|
||||
|
||||
.kbd {
|
||||
font-family: var(--mono); font-size: 11px;
|
||||
padding: 2px 7px; border-radius: 6px;
|
||||
border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2);
|
||||
box-shadow: 0 1px 0 var(--line);
|
||||
}
|
||||
|
||||
.dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
|
||||
@keyframes breathe { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .55; transform: scale(.82);} }
|
||||
.dot-live { animation: breathe 2.4s ease-in-out infinite; }
|
||||
Reference in New Issue
Block a user