for-humanity 0.6.0 → 0.7.1

package/dist/cli.css

@@ -106,9 +106,8 @@
     border-radius: var(--app-radius-inline);
     background: var(--app-color-code);
     color: var(--app-color-text-strong);
-    font-family: var(--app-font-mono);
+    font-family: inherit;
     font-size: 1em;
-    font-variant-ligatures: none;
   }
   & pre {
     overflow-x: auto;
@@ -119,8 +118,8 @@
     background: var(--app-color-code);
     font-family: var(--app-font-mono);
     font-size: var(--app-font-size-detail);
-    font-variant-ligatures: none;
     line-height: var(--app-line-height-code);
+    letter-spacing: 0;
   }
   & pre code {
     padding: 0;
@@ -249,6 +248,7 @@
   overflow-x: auto;
   margin: var(--app-space-block) 0;
   padding: var(--app-space-block) 0;
+  letter-spacing: 0;
   & svg {
     display: block;
     max-width: 100%;
@@ -310,170 +310,44 @@
   visibility: visible;
 }
 
-/* src/component/widget/navigation/_wg-navigation-branch-toggle.css */
-.wg_navigationBranchToggle__root {
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--app-size-tree-toggle);
-  height: calc(var(--app-font-size-dense) * var(--app-line-height-tight) + var(--app-space-tree-row) * 2);
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: var(--app-color-border-soft);
-  font-family: var(--app-font-mono);
-  font-size: var(--app-font-size-body);
-  line-height: 1;
-  cursor: pointer;
-  &:hover {
-    background: var(--app-color-accent-soft);
-    color: var(--app-color-text-strong);
-  }
-  &:focus-visible {
-    background: var(--app-color-accent-soft);
-    color: var(--app-color-text-strong);
-    outline: var(--app-outline-focus);
-    outline-offset: calc(0px - var(--app-outline-focus-offset));
-  }
-}
-
 /* src/component/widget/navigation/_wg-navigation-nav-list.css */
 .wg_navigationNavList__root {
-  margin: 0 0 0 var(--app-space-tree-inset);
+  margin: 0;
   padding: 0;
   list-style: none;
 }
 .wg_navigationNavList__branch {
-  position: relative;
   display: block;
-  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+  padding: var(--app-space-tree-row) 0;
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
   overflow-wrap: anywhere;
-  &::before {
-    position: absolute;
-    top: calc(0.5lh + var(--app-space-tree-row));
-    left: 0;
-    width: var(--app-space-tree-indent);
-    border-top: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
 }
 .wg_navigationNavList__link {
-  position: relative;
   display: block;
-  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+  padding: var(--app-space-tree-row) 0;
   color: var(--app-color-link);
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
   text-decoration: none;
   overflow-wrap: anywhere;
-  &::before {
-    position: absolute;
-    top: calc(0.5lh + var(--app-space-tree-row));
-    left: 0;
-    width: var(--app-space-tree-indent);
-    border-top: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
   &:where(:hover) {
     text-decoration: underline;
   }
-  &:where(:hover)::before {
-    border-top-color: currentcolor;
-  }
   &:where(:focus-visible) {
     outline: none;
     text-decoration: underline;
   }
-  &:where(:focus-visible)::before {
-    border-top-color: currentcolor;
-  }
 }
 .wg_navigationNavList__link--active {
   color: var(--app-color-link);
   font-weight: var(--app-font-weight-active);
-  &::before {
-    border-top-color: currentcolor;
-  }
 }
 .wg_navigationNavList__item {
-  display: flow-root;
-  position: relative;
-  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__link {
-    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-  }
-  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationNavList__branch {
-    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-  }
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    border-left: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:last-child)::before {
-    bottom: auto;
-    height: calc(0.5lh + var(--app-space-tree-row));
-  }
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: calc(0.5lh + var(--app-space-tree-row));
-    border-left: 1px solid transparent;
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:hover)::after {
-    border-left-color: var(--app-color-link);
-  }
-  &:where(:has(:focus-visible))::after {
-    border-left-color: var(--app-color-link);
-  }
-  &:where(:has(~ .wg_navigationNavList__item:hover))::before {
-    border-left-color: var(--app-color-link);
-  }
-  &:where(:has(~ .wg_navigationNavList__item :focus-visible))::before {
-    border-left-color: var(--app-color-link);
-  }
   & > .wg_navigationNavList__root {
     margin-left: var(--app-space-tree-indent);
   }
-  &:where(:hover) > .wg_navigationNavList__branch::before {
-    border-top-color: var(--app-color-link);
-  }
-  &:where(:has(:focus-visible)) > .wg_navigationNavList__branch::before {
-    border-top-color: var(--app-color-link);
-  }
-  &:where(:hover) > .wg_navigationNavList__link::before {
-    border-top-color: var(--app-color-link);
-  }
-  &:where(:has(:focus-visible)) > .wg_navigationNavList__link::before {
-    border-top-color: var(--app-color-link);
-  }
-}
-.wg_navigationNavList__item--trail {
-  &::before {
-    border-left-color: var(--app-color-link);
-  }
-}
-.wg_navigationNavList__item--current {
-  &::after {
-    border-left-color: var(--app-color-link);
-  }
-  & > .wg_navigationNavList__branch::before {
-    border-top-color: var(--app-color-link);
-  }
-  & > .wg_navigationNavList__link::before {
-    border-top-color: var(--app-color-link);
-  }
 }
 
 /* src/component/widget/navigation/_wg-navigation-nav.css */
@@ -484,19 +358,15 @@
 .wg_navigationNav__docs {
   display: flex;
   flex-direction: column;
-  gap: var(--app-space-stack);
+  gap: var(--app-space-tree-group);
 }
 .wg_navigationNav__group {
-  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-  margin: 0 0 4px;
+  margin: 0 0 var(--app-space-tree-label);
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
   text-box: trim-start cap alphabetic;
 }
-.wg_navigationNav__docGroup {
-  position: relative;
-}
 
 /* src/component/widget/navigation/_wg-navigation-toc.css */
 .wg_navigationToc__root {
@@ -504,222 +374,73 @@
   line-height: var(--app-line-height-tight);
 }
 .wg_navigationToc__label {
-  margin-bottom: var(--app-space-inline);
+  margin: 0 0 var(--app-space-tree-label);
   color: var(--app-color-text-muted);
-  font-size: var(--app-font-size-label);
-  font-weight: var(--app-font-weight-strong);
-  letter-spacing: var(--app-letter-spacing-label);
+  font-size: var(--app-font-size-group);
+  line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
+  text-box: trim-start cap alphabetic;
 }
 .wg_navigationToc__group {
-  margin: 0 0 4px;
-  padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
+  margin: 0 0 var(--app-space-tree-label);
   color: var(--app-color-text-muted);
   font-size: var(--app-font-size-group);
   line-height: calc(var(--app-font-size-dense) * var(--app-line-height-tight));
-}
-.wg_navigationToc__groupSection {
-  position: relative;
-  display: flow-root;
+  text-box: trim-start cap alphabetic;
 }
 .wg_navigationToc__groupSection--named {
-  margin-top: var(--app-space-stack);
+  margin-top: var(--app-space-tree-group);
 }
 .wg_navigationToc__list {
-  margin: 0 0 0 var(--app-space-tree-inset);
+  margin: 0;
   padding: 0;
   list-style: none;
 }
 .wg_navigationToc__link {
-  position: relative;
   display: block;
-  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+  padding: var(--app-space-tree-row) 0;
   color: var(--app-color-text);
   font-size: var(--app-font-size-dense);
   line-height: var(--app-line-height-tight);
   text-decoration: none;
-  &::before {
-    position: absolute;
-    top: calc(0.5lh + var(--app-space-tree-row));
-    left: 0;
-    width: var(--app-space-tree-indent);
-    border-top: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
   &:where(:hover) {
     color: var(--app-color-text-strong);
     text-decoration: underline;
   }
-  &:where(:hover)::before {
-    border-top-color: currentcolor;
-  }
   &:where(:focus-visible) {
     outline: none;
     color: var(--app-color-text-strong);
     text-decoration: underline;
   }
-  &:where(:focus-visible)::before {
-    border-top-color: currentcolor;
-  }
 }
 .wg_navigationToc__link--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
-  &::before {
-    border-top-color: currentcolor;
-  }
-}
-.wg_navigationToc__item {
-  display: flow-root;
-  position: relative;
-  &:has(> .wg_navigationBranchToggle__root) > .wg_navigationToc__link {
-    padding-inline-end: calc(var(--app-size-tree-toggle) + var(--app-space-inline));
-  }
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    border-left: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:last-child)::before {
-    bottom: auto;
-    height: calc(0.5lh + var(--app-space-tree-row));
-  }
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: calc(0.5lh + var(--app-space-tree-row));
-    border-left: 1px solid transparent;
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:hover)::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(:focus-visible))::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(~ .wg_navigationToc__item:hover))::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(~ .wg_navigationToc__item :focus-visible))::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:hover) > .wg_navigationToc__link::before {
-    border-top-color: var(--app-color-text-strong);
-  }
-  &:where(:has(:focus-visible)) > .wg_navigationToc__link::before {
-    border-top-color: var(--app-color-text-strong);
-  }
-}
-.wg_navigationToc__item--trail {
-  &::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-}
-.wg_navigationToc__item--current {
-  &::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-  & > .wg_navigationToc__link::before {
-    border-top-color: var(--app-color-text-strong);
-  }
 }
 .wg_navigationToc__sub {
   margin: var(--app-space-tree-row) 0 4px var(--app-space-tree-indent);
   padding: 0;
   list-style: none;
 }
-.wg_navigationToc__subItem {
-  position: relative;
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    border-left: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:last-child)::before {
-    bottom: auto;
-    height: calc(0.5lh + var(--app-space-tree-row));
-  }
-  &::after {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: calc(0.5lh + var(--app-space-tree-row));
-    border-left: 1px solid transparent;
-    content: "";
-    pointer-events: none;
-  }
-  &:where(:hover)::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(:focus-visible))::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(~ .wg_navigationToc__subItem:hover))::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-  &:where(:has(~ .wg_navigationToc__subItem :focus-visible))::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-}
-.wg_navigationToc__subItem--trail {
-  &::before {
-    border-left-color: var(--app-color-text-strong);
-  }
-}
-.wg_navigationToc__subItem--current {
-  &::after {
-    border-left-color: var(--app-color-text-strong);
-  }
-}
 .wg_navigationToc__subLink {
-  position: relative;
   display: block;
-  padding: var(--app-space-tree-row) 0 var(--app-space-tree-row) calc(var(--app-space-tree-indent) + var(--app-space-inline));
+  padding: var(--app-space-tree-row) 0;
   color: var(--app-color-text);
   font-size: var(--app-font-size-detail);
   line-height: var(--app-line-height-tight);
   text-decoration: none;
-  &::before {
-    position: absolute;
-    top: calc(0.5lh + var(--app-space-tree-row));
-    left: 0;
-    width: var(--app-space-tree-indent);
-    border-top: 1px solid var(--app-color-border-soft);
-    content: "";
-    pointer-events: none;
-  }
   &:where(:hover) {
     color: var(--app-color-text-strong);
     text-decoration: underline;
   }
-  &:where(:hover)::before {
-    border-top-color: currentcolor;
-  }
   &:where(:focus-visible) {
     outline: none;
     color: var(--app-color-text-strong);
     text-decoration: underline;
   }
-  &:where(:focus-visible)::before {
-    border-top-color: currentcolor;
-  }
 }
 .wg_navigationToc__subLink--active {
   color: var(--app-color-text-strong);
   font-weight: var(--app-font-weight-active);
-  &::before {
-    border-top-color: currentcolor;
-  }
 }
 
 /* src/component/widget/navigation/wg-navigation.css */
@@ -937,7 +658,7 @@
     scrollbar-color: auto;
   }
 }
-@media (width < 1536px) {
+@media (width < 1360px) {
   .wg_navigation__tocRail {
     display: none;
   }
@@ -1022,15 +743,13 @@
   --app-color-verified-soft: light-dark(#edf5ed, #1d2c20);
   --app-color-unverified: light-dark(#855700, #dfb26c);
   --app-color-unverified-soft: light-dark(#faf2df, #30291c);
-  --app-font-sans:
-    "Pretendard Variable",
-    system-ui,
-    "Apple SD Gothic Neo",
-    sans-serif;
-  --app-font-mono: "JetBrains Mono Variable", var(--app-font-sans);
-  --app-font-brand: "Architects Daughter", var(--app-font-sans);
+  --app-font-mono:
+    "Monoplex KR",
+    ui-monospace,
+    monospace;
+  --app-font-body: "IBM Plex Sans KR", var(--app-font-mono);
+  --app-font-brand: "Architects Daughter", var(--app-font-body);
   --app-font-size-group: 11px;
-  --app-font-size-label: 12px;
   --app-font-size-detail: 12px;
   --app-font-size-dense: 12px;
   --app-font-size-body: 12px;
@@ -1044,34 +763,33 @@
   --app-font-weight-title: 600;
   --app-line-height-title: 1.5;
   --app-line-height-heading: 1.5;
-  --app-line-height-tight: 1.5;
+  --app-line-height-tight: 1.4;
   --app-line-height-code: 1.65;
   --app-line-height-body: 1.7;
-  --app-letter-spacing-label: 0;
+  --app-letter-spacing-body: -0.03em;
   --app-letter-spacing-brand: 0;
-  --app-letter-spacing-heading: -0.01em;
-  --app-letter-spacing-title: -0.015em;
+  --app-letter-spacing-heading: -0.04em;
+  --app-letter-spacing-title: -0.045em;
   --app-space-inline: 6px;
   --app-space-stack: 10px;
   --app-space-block: 14px;
   --app-space-group: 20px;
   --app-space-section: 32px;
-  --app-space-tree-row: 2px;
-  --app-space-tree-inset: 4px;
+  --app-space-tree-row: 0px;
+  --app-space-tree-group: 16px;
+  --app-space-tree-label: 2px;
   --app-space-tree-indent: 12px;
   --app-space-page-top: 28px;
   --app-space-gutter: 28px;
   --app-space-column: 32px;
   --app-space-sidebar-gap: 32px;
-  --app-size-sidebar: 240px;
-  --app-size-main: 900px;
-  --app-size-page: calc(var(--app-size-main) + (var(--app-size-sidebar) + var(--app-space-sidebar-gap) + var(--app-space-gutter)) * 2);
+  --app-size-sidebar: 200px;
+  --app-size-page: 1920px;
   --app-size-brand: calc(var(--app-font-size-title) * var(--app-line-height-title) + var(--app-space-page-top) + var(--app-space-group));
   --app-size-mobile-header: 56px;
   --app-size-menu-button: 44px;
   --app-size-drawer: 320px;
   --app-size-navigation-fade: 28px;
-  --app-size-tree-toggle: 24px;
   --app-space-anchor: 80px;
   --app-radius-pill: 0;
   --app-radius-card: 0;
@@ -1115,12 +833,13 @@
   max-width: var(--app-size-page);
   margin: 0 auto;
   padding: 0 var(--app-space-gutter);
-  grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
+  grid-template: "nav main outline" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr) calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap));
   background: var(--app-color-ground);
   color: var(--app-color-text);
-  font-family: var(--app-font-sans);
+  font-family: var(--app-font-body);
   font-size: var(--app-font-size-body);
   line-height: var(--app-line-height-body);
+  letter-spacing: var(--app-letter-spacing-body);
   word-break: keep-all;
   overflow-wrap: break-word;
   text-wrap: pretty;
@@ -1135,19 +854,17 @@
 .wg_shell__main {
   grid-area: main;
   min-width: 0;
-  max-width: var(--app-size-main);
   border-inline: 1px solid var(--app-color-border-layout);
   padding-block: var(--app-size-brand) calc(100vh - var(--app-space-anchor));
   padding-inline: var(--app-space-column);
 }
-@media (width < 1536px) {
+@media (width < 1360px) {
   .wg_shell__root {
-    grid-template: "nav main ." 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, var(--app-size-main)) minmax(0, 1fr);
+    grid-template: "nav main" 1fr / calc(var(--app-size-sidebar) + var(--app-space-sidebar-gap)) minmax(0, 1fr);
   }
 }
 @media (width < 1024px) {
   .wg_shell__root {
-    max-width: calc(var(--app-size-main) + var(--app-space-gutter) * 2);
     grid-template: "nav" auto "main" 1fr / minmax(0, 1fr);
   }
   .wg_shell__main {