shkim4
63b3ab010b
StoryPageHeader no longer shows the page title, kicker, description or the SW group notice; it renders only a visually hidden H1 with the Story title, so the preview keeps a page heading for screen readers while the first section starts at the top gutter (unchanged position). - OrgChart verify-p8 / p9 / p9-1 / p9-2-composition wait for the first visible StoryPage content block and read the page H1 instead of .sb-page-title; existing expectations are unchanged. - SW overview browser test clicks the page gutter as its outside-click target. - Drop the unused .sb-page-description from the SW Storybook hide rules. - Update the Storybook page frame rule in the project guideline.
72 lines
3.5 KiB
CSS
72 lines
3.5 KiB
CSS
/* Storybook presentation only. Common page frame for representative Stories; all selectors stay inside .sb-page.
|
||
2026-11-11 compact document rhythm, shared by Web / Chart / OrgChart (SW and CENTER pages use the same frame only):
|
||
2026-11-11: the H1 page title / description header is no longer shown (the H1 stays for screen readers only); pages start with the
|
||
H2 section title 16/24/700 (body-md) over a thin divider → 12px → specimen; sections 24px apart (Dashboard gap);
|
||
H3 specimen labels 14/20/500 secondary, no divider of their own (story-board.tsx). Top / bottom gutter 16–24px.
|
||
Side margins are unchanged (16px up to 480px, growing to 60px at 768px): the SW breakpoints 2040 / 1125 / 787 depend on them.
|
||
No design token is added; --sb-page-* only names existing component token values for this Storybook frame. */
|
||
.sb-page {
|
||
--sb-page-gutter: clamp(16px, 2vw, 24px);
|
||
--sb-page-section-gap: 24px;
|
||
--sb-page-section-title-font-size: var(--hm-dialog-body-font-size);
|
||
--sb-page-section-title-line-height: var(--hm-dialog-body-line-height);
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
min-width: 0;
|
||
padding-block: var(--sb-page-gutter);
|
||
font-family: var(--hm-font-family-base);
|
||
color: var(--hm-sem-fg-primary);
|
||
}
|
||
.sb-page > .sb-page-inner {
|
||
box-sizing: border-box;
|
||
/* 2026-11-05 (user request): no max width; the Inner follows the page width. Side margin (each side) = 16px up to a
|
||
480px viewport (358px Inner at 390px, so a 314px specimen fits), then linear to 60px at 768px (44px over 288px,
|
||
11 / 72 of the viewport growth), 60px from 768px. The Inner keeps growing (about 0.69px per 1px), with no jump. */
|
||
width: calc(100% - 2 * clamp(16px, calc(16px + (100vw - 480px) * 11 / 72), 60px));
|
||
min-width: 0;
|
||
margin-inline: auto;
|
||
}
|
||
|
||
/* 2026-11-11: no visible page header, so the first block starts right at the top gutter. StoryPageHeader only renders the
|
||
visually hidden page H1 (screen readers only, out of flow), so the first visible block after it gets the same reset. */
|
||
.sb-page > .sb-page-inner > :first-child,
|
||
.sb-page > .sb-page-inner > .sb-page-a11y-title:first-child + * { margin-top: 0; }
|
||
.sb-page .sb-page-a11y-title {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
clip: rect(0 0 0 0);
|
||
clip-path: inset(50%);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|
||
|
||
.sb-page .sb-page-section { margin-top: var(--sb-page-section-gap); scroll-margin-top: 16px; }
|
||
.sb-page .sb-page-section-header {
|
||
padding-bottom: 8px;
|
||
margin-bottom: 12px;
|
||
border-bottom: 1px solid var(--hm-sem-stroke-input-default);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
.sb-page .sb-page-section-header .sb-page-section-title {
|
||
margin: 0;
|
||
font-size: var(--sb-page-section-title-font-size);
|
||
line-height: var(--sb-page-section-title-line-height);
|
||
font-weight: var(--hm-font-weight-bold);
|
||
}
|
||
.sb-page .sb-page-section-header .sb-page-section-description {
|
||
margin: 4px 0 0;
|
||
color: var(--hm-sem-fg-secondary);
|
||
font-size: var(--hm-label-font-size);
|
||
line-height: var(--hm-label-line-height);
|
||
font-weight: var(--hm-input-font-weight);
|
||
}
|
||
.sb-page .sb-page-section-body { min-width: 0; }
|
||
/* Sections side by side (StorySectionGrid): grid items keep their margins, so the grid owns the row gap instead.
|
||
Columns and alignment stay with the Story (className): this unlayered rule would override Tailwind's layered grid-cols-*. */
|
||
.sb-page .sb-page-section-grid { display: grid; gap: var(--sb-page-section-gap) 24px; margin-top: var(--sb-page-section-gap); }
|
||
.sb-page .sb-page-section-grid > .sb-page-section { margin-top: 0; }
|