Skip to content

[auto change] follow DADS(html) 2026-06-24 #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Andyou007 wants to merge 1 commit into
base: main
Choose a base branch
from
+42 −41
Open

[auto change] follow DADS(html) 2026-06-24 #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,43 +64,43 @@
}
}

.dads-button[dads-type="outline"] {
.dads-button[dads-type="outlined"] {
border: 1px solid currentcolor;
background-color: var(--color-neutral-white);
color: var(--button-color);
}

@media (hover: hover) {
.dads-button[dads-type="outline"]:hover {
.dads-button[dads-type="outlined"]:hover {
background-color: var(--button-outline-hover-bg-color);
color: var(--button-hover-color);
text-decoration: underline;
text-decoration-thickness: calc(1 / 16 * 1rem);
}
}

.dads-button[dads-type="outline"]:active {
.dads-button[dads-type="outlined"]:active {
background-color: var(--button-outline-active-bg-color);
color: var(--button-active-color);
text-decoration: underline;
}

.dads-button[dads-type="outline"]:focus-visible {
.dads-button[dads-type="outlined"]:focus-visible {
outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
outline-offset: calc(2 / 16 * 1rem);
box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
}

.dads-button[dads-type="outline"]:disabled,
.dads-button[dads-type="outline"][aria-disabled="true"] {
.dads-button[dads-type="outlined"]:disabled,
.dads-button[dads-type="outlined"][aria-disabled="true"] {
background-color: var(--color-neutral-white);
color: var(--color-neutral-solid-gray-300);
text-decoration: none;
}

@media (forced-colors: active) {
.dads-button[dads-type="outline"]:disabled,
.dads-button[dads-type="outline"][aria-disabled="true"] {
.dads-button[dads-type="outlined"]:disabled,
.dads-button[dads-type="outlined"][aria-disabled="true"] {
border-color: GrayText;
color: GrayText;
}
Expand Down
3 changes: 2 additions & 1 deletion chip-label.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@
color: var(--_text, #000);
}

.dads-chip-label[dads-type="outline"] {
.dads-chip-label[dads-type="outlined"] {
border: 1px solid var(--_non-text, #000);
background-color: var(--color-neutral-white, #fff);
color: var(--_text, #000);
}

Expand Down
2 changes: 1 addition & 1 deletion file-upload/file-upload.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
text-decoration: underline;
}

.dads-file-upload[dads-error] .dads-button[dads-type="outline"] {
.dads-file-upload[dads-error] .dads-button[dads-type="outlined"] {
border-color: var(--color-semantic-error-1);
}

Expand Down
62 changes: 31 additions & 31 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,11 +274,11 @@ <h2>Button</h2>
<div><button class="dads-button" dads-size="md" dads-type="fill">ボタン</button></div>
<div><button class="dads-button" dads-size="sm" dads-type="fill">ボタン</button></div>
<div><button class="dads-button" dads-size="xs" dads-type="fill">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="outline">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="outline" disabled>ボタン</button></div>
<div><button class="dads-button" dads-size="md" dads-type="outline">ボタン</button></div>
<div><button class="dads-button" dads-size="sm" dads-type="outline">ボタン</button></div>
<div><button class="dads-button" dads-size="xs" dads-type="outline">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="outlined">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="outlined" disabled>ボタン</button></div>
<div><button class="dads-button" dads-size="md" dads-type="outlined">ボタン</button></div>
<div><button class="dads-button" dads-size="sm" dads-type="outlined">ボタン</button></div>
<div><button class="dads-button" dads-size="xs" dads-type="outlined">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="text">ボタン</button></div>
<div><button class="dads-button" dads-size="lg" dads-type="text" disabled>ボタン</button></div>
<div><button class="dads-button" dads-size="md" dads-type="text">ボタン</button></div>
Expand Down Expand Up @@ -306,13 +306,13 @@ <h2>Calendar</h2>
<div class="dads-calendar__controls">
<select class="dads-select" dads-size="sm" aria-label="年" data-js-year-select></select>
<div class="dads-calendar__navigation">
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-prev-month-button>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-prev-month-button>
<svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="前の月">
<path d="m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z" fill="currentcolor"/>
</svg>
</button>
<p class="dads-calendar__current-month" data-js-current-month></p>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-next-month-button>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-next-month-button>
<svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="次の月">
<path d="m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z" fill="currentcolor"/>
</svg>
Expand Down Expand Up @@ -341,7 +341,7 @@ <h2>Calendar</h2>
</table>
<div class="dads-calendar__footer">
<button class="dads-button" dads-size="sm" dads-type="text" data-js-delete-button>削除</button>
<button class="dads-button" dads-size="sm" dads-type="outline" data-js-today-button>今日</button>
<button class="dads-button" dads-size="sm" dads-type="outlined" data-js-today-button>今日</button>
</div>
</dads-calendar>

Expand Down Expand Up @@ -483,7 +483,7 @@ <h2 class="dads-card-example-3__title">
</div>
<ul class="dads-card-example-3__actions">
<li>
<button class="dads-button" type="button" dads-size="sm" dads-type="outline">
<button class="dads-button" type="button" dads-size="sm" dads-type="outlined">
<svg class="dads-button__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 21-1.4-1.3a113 113 0 0 1-6.8-6.9 9 9 0 0 1-1.4-2.4Q2 9.3 2 8.2q0-2.4 1.6-4Q5 2.7 7.5 2.7a6 6 0 0 1 4.5 2 6 6 0 0 1 4.5-2q2.4 0 4 1.5 1.5 1.5 1.5 4 0 1.1-.4 2.2-.3 1-1.4 2.4t-2.6 3l-4.2 3.9zm0-2.7 6.4-6.4q.9-1 1.3-2l.3-1.7a3.4 3.4 0 0 0-3.5-3.5A4 4 0 0 0 12.9 7h-1.8q-.5-1-1.4-1.7-1-.6-2.2-.6A3.4 3.4 0 0 0 4 8.2l.3 1.7q.4 1 1.3 2 .9 1.2 2.5 2.7z" fill="currentcolor"/></svg>
お気に入り
</button>
Expand Down Expand Up @@ -514,7 +514,7 @@ <h2 class="dads-card-example-3__title">
</div>
<ul class="dads-card-example-3__actions">
<li>
<button class="dads-button" type="button" dads-size="sm" dads-type="outline">
<button class="dads-button" type="button" dads-size="sm" dads-type="outlined">
<svg class="dads-button__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 21-1.4-1.3a113 113 0 0 1-6.8-6.9 9 9 0 0 1-1.4-2.4Q2 9.3 2 8.2q0-2.4 1.6-4Q5 2.7 7.5 2.7a6 6 0 0 1 4.5 2 6 6 0 0 1 4.5-2q2.4 0 4 1.5 1.5 1.5 1.5 4 0 1.1-.4 2.2-.3 1-1.4 2.4t-2.6 3l-4.2 3.9zm0-2.7 6.4-6.4q.9-1 1.3-2l.3-1.7a3.4 3.4 0 0 0-3.5-3.5A4 4 0 0 0 12.9 7h-1.8q-.5-1-1.4-1.7-1-.6-2.2-.6A3.4 3.4 0 0 0 4 8.2l.3 1.7q.4 1 1.3 2 .9 1.2 2.5 2.7z" fill="currentcolor"/></svg>
お気に入り
</button>
Expand Down Expand Up @@ -547,7 +547,7 @@ <h2 class="dads-card-example-4__heading">アジア地域における交通問題
<svg width="415" height="235" viewBox="0 0 415 235" role="img" aria-label="中国の都市部の通りを多くの人々が自転車やバイクで行き交う様子" style="display:block;max-width:100%;height:auto"><rect width="415" height="235" fill="#c8d0d8"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#6b7280" font-size="16" font-family="sans-serif">415×235</text></svg>
</div>
<ul class="dads-card-example-4__actions">
<li><a class="dads-button" href="#" dads-size="sm" dads-type="outline">関連情報</a></li>
<li><a class="dads-button" href="#" dads-size="sm" dads-type="outlined">関連情報</a></li>
<li><a class="dads-button" href="#" dads-size="sm" dads-type="fill">詳しくみる</a></li>
</ul>
</div>
Expand All @@ -568,7 +568,7 @@ <h2 class="dads-card-example-4__heading">持続可能な都市開発の最新動
<svg width="415" height="235" viewBox="0 0 415 235" role="img" aria-label="中国の都市部の通りを多くの人々が自転車やバイクで行き交う様子" style="display:block;max-width:100%;height:auto"><rect width="415" height="235" fill="#c8d0d8"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#6b7280" font-size="16" font-family="sans-serif">415×235</text></svg>
</div>
<ul class="dads-card-example-4__actions">
<li><a class="dads-button" href="#" dads-size="sm" dads-type="outline">関連情報</a></li>
<li><a class="dads-button" href="#" dads-size="sm" dads-type="outlined">関連情報</a></li>
<li><a class="dads-button" href="#" dads-size="sm" dads-type="fill">詳しくみる</a></li>
</ul>
</div>
Expand Down Expand Up @@ -597,7 +597,7 @@ <h2 class="dads-card-example-5__heading">
<div class="dads-card-example-5__sub">
<div class="dads-card-example-5__contents">大自然の中で野鳥を観察できます。ガイド付きで安心してご参加いただけます。</div>
<ul class="dads-card-example-5__actions">
<li><button class="dads-button" type="button" dads-size="sm" dads-type="outline">共有する</button></li>
<li><button class="dads-button" type="button" dads-size="sm" dads-type="outlined">共有する</button></li>
<li><button class="dads-button" type="button" dads-size="sm" dads-type="fill">あとで読む</button></li>
</ul>
</div>
Expand All @@ -619,7 +619,7 @@ <h2 class="dads-card-example-5__heading">
<div class="dads-card-example-5__sub">
<div class="dads-card-example-5__contents">美しい山間の温泉で心身ともにリフレッシュ。地元の食材を使った料理もお楽しみいただけます。</div>
<ul class="dads-card-example-5__actions">
<li><button class="dads-button" type="button" dads-size="sm" dads-type="outline">共有する</button></li>
<li><button class="dads-button" type="button" dads-size="sm" dads-type="outlined">共有する</button></li>
<li><button class="dads-button" type="button" dads-size="sm" dads-type="fill">あとで読む</button></li>
</ul>
</div>
Expand Down Expand Up @@ -877,17 +877,17 @@ <h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">text</h3>

<h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">outline</h3>
<div class="chip-label-grid">
<span class="dads-chip-label" dads-type="outline" data-color="gray">gray</span>
<span class="dads-chip-label" dads-type="outline" data-color="blue">blue</span>
<span class="dads-chip-label" dads-type="outline" data-color="light-blue">light-blue</span>
<span class="dads-chip-label" dads-type="outline" data-color="cyan">cyan</span>
<span class="dads-chip-label" dads-type="outline" data-color="green">green</span>
<span class="dads-chip-label" dads-type="outline" data-color="lime">lime</span>
<span class="dads-chip-label" dads-type="outline" data-color="yellow">yellow</span>
<span class="dads-chip-label" dads-type="outline" data-color="orange">orange</span>
<span class="dads-chip-label" dads-type="outline" data-color="red">red</span>
<span class="dads-chip-label" dads-type="outline" data-color="magenta">magenta</span>
<span class="dads-chip-label" dads-type="outline" data-color="purple">purple</span>
<span class="dads-chip-label" dads-type="outlined" data-color="gray">gray</span>
<span class="dads-chip-label" dads-type="outlined" data-color="blue">blue</span>
<span class="dads-chip-label" dads-type="outlined" data-color="light-blue">light-blue</span>
<span class="dads-chip-label" dads-type="outlined" data-color="cyan">cyan</span>
<span class="dads-chip-label" dads-type="outlined" data-color="green">green</span>
<span class="dads-chip-label" dads-type="outlined" data-color="lime">lime</span>
<span class="dads-chip-label" dads-type="outlined" data-color="yellow">yellow</span>
<span class="dads-chip-label" dads-type="outlined" data-color="orange">orange</span>
<span class="dads-chip-label" dads-type="outlined" data-color="red">red</span>
<span class="dads-chip-label" dads-type="outlined" data-color="magenta">magenta</span>
<span class="dads-chip-label" dads-type="outlined" data-color="purple">purple</span>
</div>

<h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">filled-outline</h3>
Expand Down Expand Up @@ -967,13 +967,13 @@ <h2>Date Picker</h2>
<div class="dads-calendar__controls">
<select class="dads-select" dads-size="sm" aria-label="年" data-js-year-select></select>
<div class="dads-calendar__navigation">
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-prev-month-button>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-prev-month-button>
<svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="前の月">
<path d="m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z" fill="currentcolor"/>
</svg>
</button>
<p class="dads-calendar__current-month" data-js-current-month></p>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-next-month-button>
<button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-next-month-button>
<svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="次の月">
<path d="m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z" fill="currentcolor"/>
</svg>
Expand Down Expand Up @@ -1002,7 +1002,7 @@ <h2>Date Picker</h2>
</table>
<div class="dads-calendar__footer">
<button class="dads-button" dads-size="sm" dads-type="text" data-js-delete-button>削除</button>
<button class="dads-button" dads-size="sm" dads-type="outline" data-js-today-button>今日</button>
<button class="dads-button" dads-size="sm" dads-type="outlined" data-js-today-button>今日</button>
</div>
</dads-calendar>
</div>
Expand Down Expand Up @@ -1428,7 +1428,7 @@ <h2>File Upload</h2>
<button
id="file-upload-1-button"
class="dads-button"
dads-type="outline"
dads-type="outlined"
type="button"
aria-labelledby="file-upload-1-label file-upload-1-button"
aria-describedby="file-upload-1-selected-files file-upload-1-error-messages file-upload-1-support-text"
Expand Down Expand Up @@ -1490,7 +1490,7 @@ <h3 style="font: bold 1rem/2 sans-serif; margin: 3rem 0 0.5rem;">単一ファイ
<button
id="file-upload-2-button"
class="dads-button"
dads-type="outline"
dads-type="outlined"
type="button"
aria-labelledby="file-upload-2-label file-upload-2-button"
aria-describedby="file-upload-2-error-messages"
Expand Down Expand Up @@ -1978,7 +1978,7 @@ <h2 class="dads-notification-banner__heading">
<p>入力内容を確認して再度お試しください。</p>
</div>
<div class="dads-notification-banner__actions">
<button class="dads-button" dads-size="md" dads-type="outline">キャンセル</button>
<button class="dads-button" dads-size="md" dads-type="outlined">キャンセル</button>
<button class="dads-button" dads-size="md" dads-type="fill">再試行</button>
</div>
</div>
Expand Down