fix(02): fix week/day time-grid clip and hour-label contrast
- CalendarShell: remove overflow:hidden from calendar container; add
height:100% so Schedule-X .sx__calendar-wrapper can fill the flex
parent and .sx__view-container can scroll.
- index.css: add explicit .sx__calendar-wrapper { height: 100% } rule
to propagate height through the React adapter's wrapper element.
- tokens.css: fix --sx-color-neutral override from near-white
var(--color-surface-dim) to readable var(--color-text-secondary);
fix --sx-color-neutral-variant to var(--color-border); add
--sx-internal-color-text override for chevrons and UI borders.
Both hour-axis labels (.sx__week-grid__hour-text) and weekday/day
name headers (.sx__week-grid__day-name, .sx__week-grid__date-number)
use --sx-color-neutral — all now readable.
Class and variable names confirmed from @schedule-x/theme-default@4.6.0
dist/index.css inspection.
This commit is contained in:
@@ -8,6 +8,27 @@
|
||||
|
||||
@import './tokens.css';
|
||||
|
||||
/* ── Schedule-X calendar sizing ───────────────────────────────────────────── */
|
||||
/*
|
||||
* Schedule-X renders .sx__calendar-wrapper (height:100%) inside a <div> that
|
||||
* the React adapter emits without an explicit height. The parent container in
|
||||
* CalendarShell is a flex item (flex:1; minHeight:0; height:100%) so we must
|
||||
* propagate that height down through the React wrapper element to the
|
||||
* .sx__calendar-wrapper so the week/day time-grid (.sx__view-container) can
|
||||
* scroll correctly.
|
||||
*
|
||||
* Class names confirmed from @schedule-x/theme-default@4.6.0 dist/index.css:
|
||||
* .sx__calendar-wrapper – outer wrapper emitted by the React adapter
|
||||
* .sx__calendar – inner flex-column container (flex:1; height:100%)
|
||||
* .sx__view-container – scrollable time-grid body (flex:1; overflow-y:auto)
|
||||
*
|
||||
* The React adapter wraps everything in a single <div> with no class; we
|
||||
* target it via the .sx__calendar-wrapper descendant relationship.
|
||||
*/
|
||||
.sx__calendar-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ── Minimal Global Reset ─────────────────────────────────────────────────── */
|
||||
|
||||
*,
|
||||
|
||||
@@ -114,10 +114,13 @@
|
||||
--sx-color-on-surface: var(--color-text-primary);
|
||||
--sx-color-on-surface-variant: var(--color-text-secondary);
|
||||
--sx-color-outline: var(--color-border);
|
||||
--sx-color-neutral: var(--color-surface-dim);
|
||||
--sx-color-neutral-variant: var(--color-border-subtle);
|
||||
--sx-color-neutral: var(--color-text-secondary);
|
||||
--sx-color-neutral-variant: var(--color-border);
|
||||
|
||||
--sx-font-family: var(--font-family-base);
|
||||
|
||||
/* Ensure internal text color (chevrons, borders) uses our primary text */
|
||||
--sx-internal-color-text: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user