shkim4
51e8ab8c42
Add Foundation > Company Colors as a separate Storybook menu placed right after Color. It shows the 7 affiliates and 14 colors from the existing companyColorPresets (main first, then secondary) with the Color chip styles and the Default emphasis reused for the main color. Theme tokens, public API and the existing Color story are unchanged. - Foundation sort order: Color, Company Colors, Typography, Layout - Company chip width rule scoped to the company rows - Document the menu in brand-color-steps.md - Add the new story to the Story Inventory records
44 lines
4.0 KiB
CSS
44 lines
4.0 KiB
CSS
/* Storybook presentation only. All selectors stay inside the Foundation page.
|
|
Page inner, title and sections come from the common Story page (src/components/story-page.css); these rules style the reference content. */
|
|
.hm-foundation {
|
|
font-size: var(--hm-label-font-size); line-height: var(--hm-label-line-height);
|
|
font-weight: var(--hm-input-font-weight); overflow-wrap: anywhere;
|
|
}
|
|
.hm-foundation *, .hm-foundation *::before, .hm-foundation *::after { box-sizing: border-box; }
|
|
.hm-foundation h3 { margin: 0 0 8px; font-size: var(--hm-label-font-size); font-weight: var(--hm-font-weight-bold); }
|
|
.hm-foundation p { margin: 0 0 12px; }
|
|
.hm-foundation-note { color: var(--hm-sem-fg-secondary); }
|
|
.hm-foundation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 16px; }
|
|
.hm-foundation-card, .hm-foundation-panel { min-width: 0; padding: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-container); background: var(--hm-sem-bg-surface); }
|
|
.hm-foundation-swatch { height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-input-default); border-radius: var(--hm-radius-control-md); }
|
|
.hm-foundation dl { margin: 16px 0 0; }
|
|
.hm-foundation dt { margin-top: 8px; color: var(--hm-sem-fg-secondary); font-size: var(--hm-button-font-size-sm); }
|
|
.hm-foundation dd { margin: 2px 0 0; min-width: 0; }
|
|
.hm-foundation code { font-family: inherit; font-size: inherit; white-space: normal; overflow-wrap: anywhere; }
|
|
.hm-foundation-links { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 16px; }
|
|
.hm-foundation-links a { color: var(--hm-sem-action-primary); text-decoration: underline; }
|
|
.hm-foundation-details { margin-top: 24px; }
|
|
.hm-foundation-details summary { cursor: pointer; padding-block: 12px; font-weight: var(--hm-font-weight-bold); }
|
|
.hm-foundation-specimens { display: grid; gap: 16px; }
|
|
.hm-foundation-specimen { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--hm-sem-stroke-input-default); }
|
|
.hm-foundation-specimen small { display: block; font-size: var(--hm-button-font-size-sm); line-height: var(--hm-button-line-height-sm); font-weight: var(--hm-input-font-weight); }
|
|
.hm-foundation-spacing { max-width: 100%; height: 24px; margin-block: 12px; background: var(--hm-sem-state-active); }
|
|
.hm-foundation-radius { width: 100%; height: 64px; margin-bottom: 16px; border: 1px solid var(--hm-sem-stroke-default); background: var(--hm-sem-bg-content); }
|
|
.hm-foundation-layout-sample { display: grid; min-width: 0; background: var(--hm-sem-bg-content); border: 1px solid var(--hm-sem-stroke-input-default); }
|
|
.hm-foundation-layout-card { min-width: 0; border: 1px solid var(--hm-card-border-color); border-radius: var(--hm-card-radius); background: var(--hm-card-surface); }
|
|
.hm-brand-color-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; }
|
|
.hm-brand-color-chip { flex: 1 0 110px; min-width: 0; padding: 8px; border: 1px solid var(--hm-sem-stroke-default); }
|
|
.hm-brand-color-chip[data-base] { border: 2px solid var(--hm-sem-fg-primary); font-weight: var(--hm-font-weight-bold); }
|
|
.hm-brand-color-chip h3, .hm-brand-color-chip p { margin: 8px 0 0; font-size: 13px; }
|
|
|
|
/* Color reference additions only; preserve the existing palette row and Default emphasis. */
|
|
.hm-foundation .hm-color-gradient-preview { height: 112px; }
|
|
.hm-foundation .hm-color-gradient-stops { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
|
|
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip { flex: 1 1 110px; }
|
|
/* New common background stop IDs stay on one line at the supported widths. */
|
|
.hm-foundation .hm-color-gradient-stops .hm-brand-color-chip[data-gradient-stop-token] { flex-basis: 220px; }
|
|
.hm-foundation .hm-color-foreground-sample { padding: 16px; background: var(--hm-sem-bg-surface); }
|
|
|
|
/* Company Colors: keep each chip close to the Color row width so 1-3 chips per company do not stretch across the page. */
|
|
.hm-foundation .hm-brand-color-row[data-company-id] .hm-brand-color-chip { flex: 0 1 140px; }
|