Changes
6 changed files (+249/-1)
-
-
@@ -26,6 +26,26 @@ .doc :global(ul > li) {display: list-item; list-style: disc; } .doc :global(code) { font-family: var(--font-mono); } .doc :global(p > code) { display: inline-block; font-size: var(--font-sm); padding: calc((var(--font-md) - var(--font-sm)) * 1.5 / 2 - 2px) calc(var(--font-sm) * 0.5); border: 1px solid oklch(var(--color-border) / var(--alpha-border-subtle)); background-color: oklch(var(--color-fg) / 2%); border-radius: 2px; vertical-align: middle; } .doc :global(strong) { font-weight: var(--font-bold); } </style> <div class="doc">
-
-
-
@@ -26,9 +26,13 @@.override { display: block; padding: var(--space-px-7); font-size: 1rem; line-height: 1.5; font-family: var(--font-sans); font-weight: var(--font-regular); background-color: oklch(var(--color-bg)); color: oklch(var(--color-fg)); color: oklch(var(--color-fg) / var(--alpha-fg-medium)); } .header {
-
-
-
@@ -88,6 +88,14 @@ <NavBar class="nav"><NavBarItem href="/"> About </NavBarItem> <NavBarGroup title="Styles"> <NavBarItem href="/styles/globals/"> Globals </NavBarItem> <NavBarItem href="/styles/spacings/"> Spacings </NavBarItem> </NavBarGroup> <NavBarGroup title="Components"> <NavBarItem href="/components/button/"> Button
-
-
-
@@ -11,6 +11,13 @@ <Document><p> Yamori のスタイルシートとコンポーネントのドキュメント兼デモサイトです。 </p> <h2>Styles</h2> <p> Yamori のスタイルシートが定義するグローバルな影響と CSS カスタムプロパティです。 </p> <h2>Components</h2> <p> CustomElement で実装された汎用的な UI 要素です。
-
@@ -19,6 +26,7 @@ <p>ドメインデータには関与せず、インタラクションや表示といったユーザとのやりとりにのみ関心を持ちます。そのため Protobuf で定義されたデータを受け取る・出力することはありません。 </p> <h2>Widgets</h2> <p> CustomElement で実装されたドメインデータを表示する UI 要素です。
-
-
-
@@ -0,0 +1,46 @@--- // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import DocsLayout from "../../layouts/DocsLayout.astro"; import Document from "../../components/Document.astro"; import Preview from "../../components/Preview.astro"; import ThemeMatrixPreview from "../../components/ThemeMatrixPreview.astro"; --- <DocsLayout title="Globals"> <Document> <p> UA 間の差異を限りなく少なくするため、 Yamori の CSS は<strong> 全てのスタイルをリセット </strong> します。 リセットでは <strong> Yamori によって作成されていない全ての HTML 要素 </strong> に対して <code> all: unset; box-sizing: border-box </code> が与えられます。 </p> <Preview title="<button>BUTTON</button>"> <button type="button">BUTTON</button> </Preview> <p> これにより、全ての HTML 要素は CustomElement のホストと同様に <code> display: inline </code> が初期値となります。 基本的にインラインではない要素に対しては毎回 <code> display </code> プロパティを与える必要があります。 </p> <h2>Body Styles</h2> <p> スタイリングのベースラインとして <code><body></code> には継承される一部の CSS プロパティと背景色が与えられています。 </p> <ThemeMatrixPreview> <p>Paragraph – 段落</p> </ThemeMatrixPreview> </Document> </DocsLayout>
-
-
-
@@ -0,0 +1,162 @@--- // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> // SPDX-License-Identifier: AGPL-3.0-only import DocsLayout from "../../layouts/DocsLayout.astro"; import Document from "../../components/Document.astro"; import Preview from "../../components/Preview.astro"; const gridItems = Array.from({ length: 20 }, (_, i) => { const name = `--space-px-${20 - i}`; const hasLabel = i <= 5; const properties = [ `width: var(${name})`, `height: var(${name})`, hasLabel ? "padding: var(--space-px-1) var(--space-px-2)" : null, ]; return { style: properties.filter((s) => typeof s === "string").join(";"), label: hasLabel ? name : null, }; }); --- <script> const interactiveContainer = document.getElementById("interactive_container"); const interactiveSlider = document.getElementById("interactive_slider"); const interactiveLabel = document.getElementById("interactive_label"); function syncInteractiveGap() { const size = interactiveSlider.value; interactiveContainer.style.gap = `var(--space-px-${size})`; interactiveLabel.textContent = `--space-x-${size}`; } document .getElementById("interactive_slider") .addEventListener("input", (event) => { syncInteractiveGap(); }); syncInteractiveGap(); </script> <style> .list.list { display: grid; grid-template-columns: var(--space-px-20); grid-template-rows: var(--space-px-20); width: 100%; padding: 0; } .box.box { display: inline-flex; align-items: end; border: 1px solid oklch(var(--color-border) / var(--alpha-border-strong)); grid-column: 1 / 2; grid-row: 1 / 2; font-size: var(--font-xs); font-family: var(--font-mono); border-radius: var(--space-px-1); color: oklch(var(--color-fg) / var(--alpha-fg-subtle)); list-style: none; } .box:not(:first-child) { border-inline-start-color: transparent; border-block-start-color: transparent; } .interactive-scroller { display: block; margin-block-end: var(--space-px-6); overflow-x: auto; } .interactive-container { display: flex; align-items: center; width: calc(var(--space-px-6) * 2 + var(--space-px-20)); } .fill { display: block; width: var(--space-px-6); height: var(--space-px-12); background-color: oklch(var(--color-fg) / var(--alpha-fg-strong)); border-radius: 2px; } .interactive-controls { display: flex; flex-direction: column; align-items: start; gap: var(--space-px-3); } .interactive-label { font-size: var(--font-sm); font-family: var(--font-mono); } .slider { border: 1px solid oklch(var(--color-border) / var(--alpha-border-subtle)); background-color: oklch(var(--color-fg) / 2%); border-radius: 0.6em; } .slider:focus-visible { border-color: oklch(var(--color-focus)); box-shadow: 0 0 0 var(--size-focus-ring) oklch(var(--color-focus) / var(--alpha-focus-ring)); } </style> <DocsLayout title="Spacings"> <Document> <p> 要素間・周囲の隙間の大きさは <code>--space-px-*</code> というカスタムプロパティによって一覧定義されています。 </p> <Preview title="List"> <ul class="list"> { gridItems.map(({ style, label }) => ( <li class="box" style={style}>{label}</li> )) } </ul> </Preview> <Preview title="Interactive Gap"> <div class="interactive-scroller"> <div id="interactive_container" class="interactive-container" style="gap: var(--space-px-1)" > <div class="fill" /> <div class="fill" /> </div> </div> <div class="interactive-controls"> <input id="interactive_slider" class="slider" type="range" value="1" min="1" max="20" step="1" aria-label="Gap size" /> <span id="interactive_label" class="interactive-label" >--space-px-1</span> </div> </Preview> </Document> </DocsLayout>
-