shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

feat(sw): add SW Footer component and Storybook stories

Browse Source
This commit is contained in:
shkim4 committed 2026-10-20 09:41:12 +09:00
1 parent 77a809baa3
commit 6cf885412e
105 files changed
+3288 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/sw/sw-footer-stories.css
+37
View File
@@ -0,0 +1,37 @@
/* Story-owned layout for SW/Footer. Like a consuming program it arranges public components; it never styles
hm-sw-* classes. Surfaces behind standalone parts read the public --hm-sw-footer-* tokens. */
.sw-footer-story-screen { position: relative; display: flex; flex-direction: column; background: #060606; }
.sw-footer-story-canvas { position: relative; background: var(--sw-story-canvas); }
.sw-footer-story-workspace { display: flex; flex-direction: column; height: 720px; background: #060606; }
.sw-footer-story-canvas--fill { flex: 1 1 auto; min-height: 0; }
.sw-footer-story-reference { display: block; width: 1915px; max-width: none; }
.sw-footer-story-figma-bottom { width: 1920px; height: 120px; background: 0 -960px / 1920px 1080px no-repeat; }
.sw-footer-story-nodes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.sw-footer-story-node { margin: 0; padding: 12px; border: 1px solid #dedbd2; border-radius: 6px; background: #fff; }
.sw-footer-story-node figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; font-size: 12px; color: #3d4a45; }
.sw-footer-story-node figcaption code { font-size: 11px; color: #6e6759; }
.sw-footer-story-node figcaption small { color: #6e6759; }
.sw-footer-story-node__pair { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.sw-footer-story-node__pair > div { min-width: 0; }
.sw-footer-story-node__pair img { display: block; max-width: 100%; }
.sw-footer-story-node__label { margin: 0 0 4px; font-size: 11px; color: #6e6759; }
.sw-footer-story-node__live { display: inline-block; padding: 20px; border-radius: 4px; background: #fff; }
.sw-footer-story-node__wide { width: min(1920px, calc(100vw - 160px)); overflow-x: auto; padding-top: 24px; background: #060606; }
.sw-footer-story-node[data-node-id="26:10097"] .sw-footer-story-node__pair { flex-direction: column; }
.sw-footer-story-node[data-node-id="26:10097"] img { width: min(1920px, calc(100vw - 160px)); }
.sw-footer-story-column { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sw-footer-story-pin { display: contents; }
.sw-footer-story-group-surface { padding: 6px; border-radius: 4px; background: var(--hm-sw-footer-group-background); }
.sw-footer-story-guide-room { gap: 160px; padding: 170px 80px 6px; }
.sw-footer-story-guide-frame { display: block; width: 194px; height: 111px; background-repeat: no-repeat; background-size: 250px 1179px; }
.sw-footer-story-guide-text { display: grid; place-items: center; height: 100%; padding: 8px; font-size: 12px; color: #d4cbbd; text-align: center; }
.sw-footer-story-states { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.sw-footer-story-state { margin: 0; }
.sw-footer-story-state figcaption { margin-bottom: 6px; font-size: 12px; color: #3d4a45; }
.sw-footer-story-lucide { display: grid; place-items: center; color: #d4cbbd; }
.sw-footer-story-status { padding: 0 12px; font-size: 12px; color: #d4cbbd; font-family: ui-monospace, monospace; }
.sw-footer-story-row { display: flex; align-items: flex-start; gap: 16px; }
.sw-footer-story-row--tight { gap: 0; }
.sw-footer-story-inline { display: inline-flex; flex-direction: column; padding: 0; }
.sw-footer-story-width + .sw-footer-story-width { margin-top: 16px; }
.sw-footer-story-reference-narrow { display: block; width: 952px; max-width: 100%; }