ulfr/recipe-mockup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract colors
All checks were successful
Build and Deploy / build-and-push (push) Successful in 1m10s
Details

Browse Source
This commit is contained in:
Rafał
2026-04-18 11:12:05 +02:00
parent 59340e8afd
commit 5c21fb1e64
14 changed files with 485 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/ui/mealCalendar.js
View File

@@ -19,7 +19,7 @@ export const CALENDAR_MONTHS_SHORT = [
export const CALENDAR_WEEKDAYS_SHORT = ['pn', 'wt', 'śr', 'cz', 'pt', 'so', 'nd'];
export const CALENDAR_DAY_ATTR = 'data-calendar-day';
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[#6d6c67]/75';
export const CALENDAR_HANDLE_CLASS = 'block h-1 w-10 rounded-full bg-[rgb(var(--text-subdued-rgb))]/75';
function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
const { mode, selectedDate } = meta;
@@ -27,9 +27,9 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
const showIndicator = !!dayState.showIndicator;
const isDisabled = !!dayState.disabled;
const isDimmed = !!dayState.dimmed && !isSelected;
const defaultBg = '#2f2f2d';
const defaultBorder = '#444442';
const defaultText = '#d7d2c8';
const defaultBg = 'rgb(var(--card-soft-rgb))';
const defaultBorder = 'rgb(var(--card-strong-rgb))';
const defaultText = 'rgb(var(--text-body-soft-rgb))';
let bg;
let borderColor;
@@ -37,12 +37,12 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
let borderClass = 'border';
if (isSelected) {
bg = theme.selectedBg || '#23221e';
borderColor = theme.selectedBorder || '#787876';
text = theme.selectedText || '#f2efe8';
bg = theme.selectedBg || 'rgb(var(--sunken-rgb))';
borderColor = theme.selectedBorder || 'rgb(var(--border-input-rgb))';
text = theme.selectedText || 'rgb(var(--text-emphasis-rgb))';
} else if (isDimmed) {
bg = theme.dimmedBg ?? theme.bg ?? defaultBg;
text = theme.dimText || '#7d7a74';
text = theme.dimText || 'rgb(var(--text-faint-rgb))';
borderClass = 'border-0';
} else {
bg = theme.bg || defaultBg;
@@ -50,7 +50,7 @@ function getCalendarDayHTML(day, meta, dayState, dayAttr, theme = {}) {
text = theme.text || defaultText;
}
const dot = isSelected ? (theme.selectedDot || '#f2efe8') : (theme.dot || '#a59f92');
const dot = isSelected ? (theme.selectedDot || 'rgb(var(--text-emphasis-rgb))') : (theme.dot || 'rgb(var(--text-faint-rgb))');
const opacity = isDimmed ? String(theme.dimOpacity ?? 0.72) : '1';
const borderStyle = isDimmed ? 'border:none;' : `border-color:${borderColor};`;
const outerClass = `${mode === 'month' ? 'mx-auto ' : ''}flex h-[2.05rem] w-full min-w-0 max-w-full items-center justify-center rounded-full ${borderClass} text-xs font-medium transition-colors leading-tight overflow-hidden`;
@@ -118,10 +118,10 @@ export function createCalendarTopbarHTML({
todayId,
nextId,
wrapperClass = 'px-4 pt-4 pb-3 flex items-center justify-end',
controlsStyle = 'background:#2f2f2d;border-color:#444442;',
navButtonClass = 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[#d7d2c8] transition-colors',
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap',
todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[#7d7a74] cursor-default',
controlsStyle = 'background:rgb(var(--card-soft-rgb));border-color:rgb(var(--card-strong-rgb));',
navButtonClass = 'shrink-0 w-7 h-full flex items-center justify-center rounded-full border-0 bg-transparent text-[rgb(var(--text-body-soft-rgb))] transition-colors',
todayButtonActiveClass = 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap',
todayButtonDimClass = 'h-full shrink-0 inline-flex items-center justify-center rounded-full px-2 text-[10px] font-semibold leading-none text-[rgb(var(--text-faint-rgb))] cursor-default',
}) {
return `
<div class="${wrapperClass}">
@@ -168,7 +168,7 @@ export function syncCalendarTodayButton(buttonEl, isOnToday, selectedDate, optio
ariaLabelCurrent = 'Widok jest ustawiony na bieżący okres',
} = options;
const active = buttonEl.dataset.calActiveClass
|| 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[#d7d2c8] active:bg-transparent whitespace-nowrap';
|| 'h-full shrink-0 inline-flex min-w-[5.75rem] max-w-[9rem] items-center justify-center rounded-full bg-transparent px-1.5 text-[10px] font-semibold leading-none tabular-nums text-[rgb(var(--text-body-soft-rgb))] active:bg-transparent whitespace-nowrap';
if (selectedDate != null) {
buttonEl.textContent = formatCalendarSelectedDate(selectedDate);
}