Extract colors
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m10s
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m10s
This commit is contained in:
137
index.html
137
index.html
@@ -31,7 +31,6 @@
|
||||
--text-primary-rgb: 28, 24, 21;
|
||||
--text-secondary-rgb: 102, 92, 83;
|
||||
--text-tertiary-rgb: 156, 146, 137;
|
||||
--accent-rgb: 111, 149, 255;
|
||||
--warm-rgb: 183, 142, 88;
|
||||
--success-rgb: 98, 171, 132;
|
||||
--danger-rgb: 210, 116, 116;
|
||||
@@ -40,27 +39,66 @@
|
||||
--dock-shadow: 0 24px 56px rgba(24, 17, 11, 0.18);
|
||||
--highlight-top: rgba(111, 149, 255, 0.14);
|
||||
--highlight-bottom: rgba(97, 184, 180, 0.12);
|
||||
|
||||
/* Extended palette (placeholder light-mode values — light mode is WIP). */
|
||||
--card-rgb: 255, 255, 255;
|
||||
--card-soft-rgb: 250, 246, 240;
|
||||
--card-strong-rgb: 235, 229, 221;
|
||||
--card-raised-rgb: 252, 248, 242;
|
||||
--sunken-rgb: 247, 242, 236;
|
||||
--sunken-deep-rgb: 235, 229, 221;
|
||||
--border-card-rgb: 220, 212, 200;
|
||||
--border-input-rgb: 176, 164, 150;
|
||||
--text-emphasis-rgb: 14, 12, 10;
|
||||
--text-body-rgb: 48, 40, 33;
|
||||
--text-body-soft-rgb: 72, 62, 52;
|
||||
--text-muted-rgb: 112, 102, 91;
|
||||
--text-dim-rgb: 140, 130, 118;
|
||||
--text-faint-rgb: 156, 146, 137;
|
||||
--text-subdued-rgb: 176, 166, 154;
|
||||
--skeleton-rgb: 226, 220, 210;
|
||||
--on-accent-rgb: 255, 255, 255;
|
||||
--overlay-rgb: 24, 17, 11;
|
||||
}
|
||||
|
||||
.dark {
|
||||
color-scheme: dark;
|
||||
--app-bg-rgb: 45, 46, 43;
|
||||
--surface-rgb: 37, 35, 33;
|
||||
--app-bg-rgb: 45, 46, 43; /* #2d2e2b */
|
||||
--surface-rgb: 37, 35, 33; /* panel/input backgrounds (existing tokens) */
|
||||
--surface-soft-rgb: 46, 43, 40;
|
||||
--surface-strong-rgb: 58, 55, 51;
|
||||
--line-rgb: 255, 249, 239;
|
||||
--text-primary-rgb: 246, 241, 232;
|
||||
--text-secondary-rgb: 183, 173, 161;
|
||||
--text-secondary-rgb: 183, 173, 161; /* #b7ada1 */
|
||||
--text-tertiary-rgb: 129, 121, 112;
|
||||
--accent-rgb: 134, 171, 255;
|
||||
--warm-rgb: 198, 156, 101;
|
||||
--success-rgb: 109, 194, 144;
|
||||
--success-rgb: 110, 231, 183; /* #6ee7b7 — unified success green */
|
||||
--danger-rgb: 220, 127, 127;
|
||||
--panel-shadow: 0 22px 56px rgba(0, 0, 0, 0.24);
|
||||
--panel-shadow-strong: 0 30px 82px rgba(0, 0, 0, 0.42);
|
||||
--dock-shadow: 0 30px 84px rgba(0, 0, 0, 0.42);
|
||||
--highlight-top: transparent;
|
||||
--highlight-bottom: transparent;
|
||||
|
||||
/* Extended dark palette — distinct shades used across cards, dock, pickers, inputs. */
|
||||
--card-rgb: 57, 57, 55; /* #393937 — primary elevated card */
|
||||
--card-soft-rgb: 47, 47, 45; /* #2f2f2d — medium card */
|
||||
--card-strong-rgb: 68, 68, 66; /* #444442 — strong card / stroke */
|
||||
--card-raised-rgb: 58, 58, 55; /* #3a3a37 — slight raise above card */
|
||||
--sunken-rgb: 35, 34, 30; /* #23221e — deep inputs / search shell */
|
||||
--sunken-deep-rgb: 22, 21, 19; /* #161513 — deepest well */
|
||||
--border-card-rgb: 65, 66, 63; /* #41423f — dock/picker borders */
|
||||
--border-input-rgb: 120, 120, 118; /* #787876 — input / active borders */
|
||||
--text-emphasis-rgb: 242, 239, 232; /* #f2efe8 — brightest interactive text */
|
||||
--text-body-rgb: 221, 214, 202; /* #ddd6ca — primary body text (most common) */
|
||||
--text-body-soft-rgb: 215, 210, 200; /* #d7d2c8 — body soft */
|
||||
--text-muted-rgb: 183, 173, 161; /* #b7ada1 — muted (matches --text-secondary) */
|
||||
--text-dim-rgb: 155, 151, 143; /* #9b978f — dim / placeholder */
|
||||
--text-faint-rgb: 143, 139, 132; /* #8f8b84 — faint icon color */
|
||||
--text-subdued-rgb: 109, 108, 103; /* #6d6c67 — subdued */
|
||||
--skeleton-rgb: 212, 212, 212; /* #d4d4d4 — image loading placeholder */
|
||||
--on-accent-rgb: 26, 26, 26; /* #1a1a1a — text on bright accent backgrounds */
|
||||
--overlay-rgb: 0, 0, 0; /* scrim / shadow base */
|
||||
}
|
||||
|
||||
* { touch-action: manipulation; }
|
||||
@@ -84,7 +122,7 @@
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background: rgb(var(--accent-rgb));
|
||||
background: rgb(var(--text-body-rgb));
|
||||
border: 2px solid rgba(var(--surface-rgb), 0.9);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
|
||||
cursor: pointer;
|
||||
@@ -120,7 +158,7 @@
|
||||
background: linear-gradient(180deg, rgba(var(--surface-strong-rgb), 1) 0%, rgba(var(--surface-soft-rgb), 1) 100%) !important;
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.18) !important;
|
||||
}
|
||||
.border-gray-900 { border-color: rgba(var(--accent-rgb), 0.42) !important; }
|
||||
.border-gray-900 { border-color: rgba(var(--text-body-rgb), 0.42) !important; }
|
||||
.bg-white\/90 { background-color: rgba(var(--surface-rgb), 0.9) !important; }
|
||||
.bg-white\/80 { background-color: rgba(var(--surface-rgb), 0.78) !important; }
|
||||
.bg-gray-50\/80 { background-color: rgba(var(--surface-soft-rgb), 0.72) !important; }
|
||||
@@ -146,7 +184,7 @@
|
||||
.divide-red-50 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(var(--danger-rgb), 0.1) !important; }
|
||||
|
||||
.ring-gray-200 { --tw-ring-color: rgba(var(--line-rgb), 0.16) !important; }
|
||||
.ring-gray-900 { --tw-ring-color: rgba(var(--accent-rgb), 0.52) !important; }
|
||||
.ring-gray-900 { --tw-ring-color: rgba(var(--text-body-rgb), 0.52) !important; }
|
||||
|
||||
.hover\:bg-gray-50:hover { background-color: rgba(var(--surface-soft-rgb), 0.94) !important; }
|
||||
.hover\:bg-gray-100:hover { background-color: rgba(var(--surface-strong-rgb), 0.94) !important; }
|
||||
@@ -159,11 +197,11 @@
|
||||
.hover\:text-red-600:hover { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.hover\:border-gray-300:hover { border-color: rgba(var(--line-rgb), 0.28) !important; }
|
||||
.hover\:border-gray-400:hover { border-color: rgba(var(--line-rgb), 0.34) !important; }
|
||||
.hover\:border-gray-900:hover { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.hover\:border-gray-900:hover { border-color: rgba(var(--text-body-rgb), 0.54) !important; }
|
||||
.hover\:border-red-200:hover { border-color: rgba(var(--danger-rgb), 0.34) !important; }
|
||||
|
||||
.focus\:border-gray-400:focus { border-color: rgba(var(--accent-rgb), 0.54) !important; }
|
||||
.focus\:border-gray-300:focus { border-color: rgba(var(--accent-rgb), 0.44) !important; }
|
||||
.focus\:border-gray-400:focus { border-color: rgba(var(--text-body-rgb), 0.54) !important; }
|
||||
.focus\:border-gray-300:focus { border-color: rgba(var(--text-body-rgb), 0.44) !important; }
|
||||
|
||||
.shadow-lg { box-shadow: var(--panel-shadow-strong) !important; }
|
||||
.shadow-sm { box-shadow: var(--panel-shadow) !important; }
|
||||
@@ -213,17 +251,26 @@
|
||||
.text-emerald-600 { color: rgba(var(--success-rgb), 0.94) !important; }
|
||||
.text-emerald-600\/80 { color: rgba(var(--success-rgb), 0.82) !important; }
|
||||
.text-emerald-500 { color: rgba(var(--success-rgb), 0.9) !important; }
|
||||
.text-emerald-400 { color: rgb(var(--success-rgb)) !important; }
|
||||
.text-emerald-300 { color: rgb(var(--success-rgb)) !important; }
|
||||
.bg-emerald-400 { background-color: rgb(var(--success-rgb)) !important; }
|
||||
.border-emerald-400\/40 { border-color: rgba(var(--success-rgb), 0.4) !important; }
|
||||
|
||||
.bg-red-50 { background-color: rgba(var(--danger-rgb), 0.12) !important; }
|
||||
.bg-red-100 { background-color: rgba(var(--danger-rgb), 0.2) !important; }
|
||||
.bg-red-500 { background-color: rgba(var(--danger-rgb), 0.94) !important; }
|
||||
.bg-red-400 { background-color: rgba(var(--danger-rgb), 0.82) !important; }
|
||||
.border-red-200\/80 { border-color: rgba(var(--danger-rgb), 0.26) !important; }
|
||||
.border-red-100\/80 { border-color: rgba(var(--danger-rgb), 0.16) !important; }
|
||||
.border-red-300\/40 { border-color: rgba(var(--danger-rgb), 0.4) !important; }
|
||||
.border-red-300\/30 { border-color: rgba(var(--danger-rgb), 0.3) !important; }
|
||||
.text-red-800 { color: rgba(var(--danger-rgb), 1) !important; }
|
||||
.text-red-600 { color: rgba(var(--danger-rgb), 0.96) !important; }
|
||||
.text-red-600\/80 { color: rgba(var(--danger-rgb), 0.82) !important; }
|
||||
.text-red-500 { color: rgba(var(--danger-rgb), 0.9) !important; }
|
||||
.text-red-400 { color: rgba(var(--danger-rgb), 0.78) !important; }
|
||||
.text-red-300 { color: rgba(var(--danger-rgb), 0.66) !important; }
|
||||
.hover\:text-red-500:hover { color: rgba(var(--danger-rgb), 0.9) !important; }
|
||||
|
||||
/* App shell */
|
||||
#main-view,
|
||||
@@ -235,7 +282,7 @@
|
||||
#main-view > div:last-child,
|
||||
#recipe-grid,
|
||||
#planner-picker-grid {
|
||||
background: #2d2e2b !important;
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
}
|
||||
#recipe-grid,
|
||||
#planner-picker-grid {
|
||||
@@ -250,7 +297,7 @@
|
||||
#calendar-week-wrap,
|
||||
#calendar-month-wrap,
|
||||
#planner-meal-slots {
|
||||
background: #2d2e2b !important;
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
}
|
||||
#main-view > div:first-child,
|
||||
#planner-view > div:first-child,
|
||||
@@ -262,7 +309,7 @@
|
||||
/* Cards and sheets */
|
||||
#recipe-grid > *,
|
||||
#planner-picker-grid > * {
|
||||
background: #393937 !important;
|
||||
background: rgb(var(--card-rgb)) !important;
|
||||
border: none !important;
|
||||
border-radius: 1.75rem !important;
|
||||
box-shadow: none !important;
|
||||
@@ -354,8 +401,8 @@
|
||||
}
|
||||
#recipe-topbar #recipe-search-shell,
|
||||
#recipe-topbar #recipe-search-shell:focus-within {
|
||||
background: #23221e !important;
|
||||
border: 1px solid #787876 !important;
|
||||
background: rgb(var(--sunken-rgb)) !important;
|
||||
border: 1px solid rgb(var(--border-input-rgb)) !important;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
}
|
||||
@@ -365,11 +412,11 @@
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
color: #ddd6ca !important;
|
||||
caret-color: #ddd6ca;
|
||||
color: rgb(var(--text-body-rgb)) !important;
|
||||
caret-color: rgb(var(--text-body-rgb));
|
||||
}
|
||||
#recipe-topbar #recipe-search-input::placeholder {
|
||||
color: #9b978f !important;
|
||||
color: rgb(var(--text-dim-rgb)) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
#recipe-topbar #recipe-filter-btn {
|
||||
@@ -383,8 +430,8 @@
|
||||
z-index: 0;
|
||||
isolation: isolate;
|
||||
border-radius: 999px;
|
||||
background: #393937 !important;
|
||||
border: 1px solid #41423f !important;
|
||||
background: rgb(var(--card-rgb)) !important;
|
||||
border: 1px solid rgb(var(--border-card-rgb)) !important;
|
||||
box-shadow:
|
||||
0 5px 10px rgba(0, 0, 0, 0.16),
|
||||
0 14px 22px rgba(0, 0, 0, 0.24),
|
||||
@@ -410,8 +457,8 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
#planner-picker-search-shell:focus-within {
|
||||
background: #393937 !important;
|
||||
border: 1px solid #4a4b47 !important;
|
||||
background: rgb(var(--card-rgb)) !important;
|
||||
border: 1px solid rgba(var(--border-input-rgb), 0.62) !important;
|
||||
box-shadow:
|
||||
0 6px 12px rgba(0, 0, 0, 0.18),
|
||||
0 16px 24px rgba(0, 0, 0, 0.24),
|
||||
@@ -427,15 +474,15 @@
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
backdrop-filter: none !important;
|
||||
color: #dfd9cf !important;
|
||||
caret-color: #dfd9cf;
|
||||
color: rgb(var(--text-body-rgb)) !important;
|
||||
caret-color: rgb(var(--text-body-rgb));
|
||||
font-size: 15px;
|
||||
font-weight: 400;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
#planner-picker-search::placeholder,
|
||||
#pantry-search::placeholder {
|
||||
color: #beb8ae !important;
|
||||
color: rgba(var(--text-body-soft-rgb), 0.72) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
#planner-picker-filter-btn {
|
||||
@@ -470,7 +517,7 @@
|
||||
#planner-ing-backdrop,
|
||||
#pv2-edit-bg,
|
||||
#mpe-overlay {
|
||||
background: rgba(7, 6, 5, 0.42) !important;
|
||||
background: rgba(var(--overlay-rgb), 0.42) !important;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
@@ -496,8 +543,8 @@
|
||||
gap: 0.06rem;
|
||||
padding: 0.22rem;
|
||||
border-radius: 1.68rem;
|
||||
background: #393937;
|
||||
border: 1px solid #41423f;
|
||||
background: rgb(var(--card-rgb));
|
||||
border: 1px solid rgb(var(--border-card-rgb));
|
||||
box-shadow:
|
||||
inset 0 1px 8px rgba(0, 0, 0, 0.15),
|
||||
0 5px 10px rgba(0, 0, 0, 0.16),
|
||||
@@ -528,7 +575,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
color: #ece8e0;
|
||||
color: rgba(var(--text-primary-rgb), 0.94);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
@@ -544,14 +591,14 @@
|
||||
#app-bottom-nav .nav-tab:hover,
|
||||
#app-bottom-nav .nav-action:hover {
|
||||
transform: translateY(-1px);
|
||||
color: #ffffff;
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
background: rgba(255, 255, 255, 0.04) !important;
|
||||
}
|
||||
#app-bottom-nav .nav-tab.is-active {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background: #2d2e2b !important;
|
||||
color: rgb(var(--text-primary-rgb));
|
||||
background: rgb(var(--app-bg-rgb)) !important;
|
||||
border-radius: 1.46rem;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
@@ -563,7 +610,7 @@
|
||||
outline: none;
|
||||
box-shadow:
|
||||
0 0 0 3px rgba(255, 255, 255, 0.08),
|
||||
0 0 0 6px rgba(var(--accent-rgb), 0.26) !important;
|
||||
0 0 0 6px rgba(var(--text-body-rgb), 0.26) !important;
|
||||
}
|
||||
@media (max-width: 380px) {
|
||||
#app-bottom-nav {
|
||||
@@ -614,12 +661,16 @@
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
const useDarkTheme = savedTheme ? savedTheme === 'dark' : true;
|
||||
if (useDarkTheme) document.documentElement.classList.add('dark');
|
||||
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', useDarkTheme ? '#2d2e2b' : '#f3efe9');
|
||||
const themeMeta = document.querySelector('meta[name="theme-color"]');
|
||||
if (themeMeta) {
|
||||
const appBgRgb = getComputedStyle(document.documentElement).getPropertyValue('--app-bg-rgb').trim();
|
||||
if (appBgRgb) themeMeta.setAttribute('content', `rgb(${appBgRgb})`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div id="app-container" class="relative flex h-dvh min-h-0 w-full flex-col overflow-hidden bg-white">
|
||||
<div class="flex h-full items-center justify-center" style="background:#2d2e2b !important;">
|
||||
<div class="text-[13px] font-medium" style="color:#b7ada1 !important;">Ładowanie...</div>
|
||||
<div class="flex h-full items-center justify-center" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<div class="text-[13px] font-medium" style="color:rgb(var(--text-muted-rgb)) !important;">Ładowanie...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -665,11 +716,11 @@
|
||||
const appContainer = document.getElementById('app-container');
|
||||
if (!appContainer) return;
|
||||
appContainer.innerHTML = `
|
||||
<div class="flex h-full items-center justify-center px-6 text-center" style="background:#2d2e2b !important;">
|
||||
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:#2f2f2d !important; border-color:#444442 !important;">
|
||||
<p class="text-sm font-semibold" style="color:#f2efe8 !important;">Aplikacja nie wystartowała</p>
|
||||
<p class="mt-2 text-xs leading-relaxed" style="color:#b7ada1 !important;">${message}</p>
|
||||
<button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:#23221e !important; border-color:#787876 !important; color:#f2efe8 !important;">Odśwież</button>
|
||||
<div class="flex h-full items-center justify-center px-6 text-center" style="background:rgb(var(--app-bg-rgb)) !important;">
|
||||
<div class="max-w-[18rem] rounded-[1.5rem] border px-5 py-6" style="background:rgb(var(--card-soft-rgb)) !important; border-color:rgb(var(--card-strong-rgb)) !important;">
|
||||
<p class="text-sm font-semibold" style="color:rgb(var(--text-emphasis-rgb)) !important;">Aplikacja nie wystartowała</p>
|
||||
<p class="mt-2 text-xs leading-relaxed" style="color:rgb(var(--text-muted-rgb)) !important;">${message}</p>
|
||||
<button type="button" onclick="window.location.reload()" class="mt-4 h-10 px-4 rounded-full border text-[12px] font-semibold" style="background:rgb(var(--sunken-rgb)) !important; border-color:rgb(var(--border-input-rgb)) !important; color:rgb(var(--text-emphasis-rgb)) !important;">Odśwież</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user