@layer components { /* 寸法と色は Basecamp 2 の実測（docs/visual-reference.md）に合わせる。 - 控えめな操作（「Post a new message」）: 平らな白、1px #ccc の枠、下に 1px #ddd の影、角丸 5px、高さ 22px、12px の黒い文字。 - 主操作（「Start the project」）: 平らな緑、1px の濃い緑の枠と下に 1px の同じ色の影、角丸 4px、白い太字。 グラデーションと浮き彫りの文字は使わない。 */ /* FilterBarへ直接渡された標準リンクにも、同じボタンの規則を適用する。 */ .rx-button, :where(.rx-filter-bar > a) { appearance: none; display: inline-flex; align-items: center; justify-content: center; justify-self: start; gap: calc(4em / 12); /* アイコンと文言を内容幅で並べるためFlex。 */ min-block-size: var(--rx-button-size); max-inline-size: 100%; padding-block: 0; padding-inline: calc(11em / 12); border: var(--rx-stroke-width) solid var(--rx-control-border); border-radius: var(--rx-radius-control); background: var(--rx-surface); background-image: var(--rx-fill-control); color: var(--rx-text); font-family: var(--rx-control-font-family); font-size: var(--rx-button-font); font-weight: 400; line-height: calc(17 / 12); text-align: center; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; box-shadow: var(--rx-shadow-control); /* フォーカスは入力欄と同じ、青い縁と外側の淡い青の輪。 */ &:focus-visible { outline: 0.125rem solid transparent; outline-offset: 0; border-color: var(--rx-focus-border); box-shadow: var(--rx-focus-glow), var(--rx-shadow-control); } /* ホバーと押した時の見た目は手本の画像に無い（推測）。ホバーは面をわずかに灰色にし、枠を濃くする。 押すと面をもう一段灰色にして、内側へへこませる。 */ &:hover:not(:disabled) { border-color: color-mix(in srgb, var(--rx-control-border) 75%, var(--rx-ink)); background-image: var(--rx-fill-control-hover); box-shadow: var(--rx-shadow-control-hover); } &:active:not(:disabled) { background-color: var(--rx-gray-50); background-image: var(--rx-fill-control-pressed); box-shadow: var(--rx-shadow-control-pressed); } &[data-size="compact"] { padding-inline: calc(7em / 12); } /* 大きな操作（「Edit this document」「Start the project」）。14px の文字で高さ 32px。 */ &[data-size="large"] { min-block-size: var(--rx-button-large); padding-inline: calc(18em / 14); font-size: calc(var(--rx-button-font) * 7 / 6); line-height: calc(10 / 7); } /* 主操作は緑、危険は赤の、平らな塗りに白い文字。選んでいる状態（current）は、チェックボックスの選んだ状態と同じ淡い青の塗りに紺の縁と文字。 枠と下の影を塗りより濃い同じ色にし、手本の主操作と同じく下だけ2pxの縁に見せる。 */ &[data-variant="primary"] { --rx-button-color: var(--rx-green); --rx-button-edge: var(--rx-green-dark); font-weight: 700; } &[data-variant="danger"] { --rx-button-color: var(--rx-danger); --rx-button-edge: var(--rx-red-dark); } &:is([data-variant="primary"], [data-variant="danger"]):not([data-current="true"]) { border-color: var(--rx-button-edge); border-radius: var(--rx-radius-primary); background: var(--rx-button-color); color: var(--rx-surface); box-shadow: 0 var(--rx-stroke-width) 0 var(--rx-button-edge); &:hover:not(:disabled) { border-color: var(--rx-button-edge); background: color-mix(in srgb, var(--rx-button-color) 88%, black); box-shadow: 0 var(--rx-stroke-width) 0 var(--rx-button-edge); } &:active:not(:disabled) { background: color-mix(in srgb, var(--rx-button-color) 80%, black); box-shadow: var(--rx-shadow-control-primary-pressed); } &:focus-visible { box-shadow: var(--rx-focus-glow), 0 var(--rx-stroke-width) 0 var(--rx-button-edge); } } /* 選んでいる状態は、選ぶ操作の共通の見た目（--rx-selected-*）。形と角丸は控えめな操作のまま。 */ &[data-current="true"]:not([data-variant="link"]) { border-color: var(--rx-selected-edge); border-block-end-color: var(--rx-selected-edge-end); background: var(--rx-selected-fill); color: var(--rx-selected-text); &:hover:not(:disabled) { border-color: var(--rx-selected-edge); border-block-end-color: var(--rx-selected-edge-end); background: var(--rx-selected-fill-hover); } &:active:not(:disabled) { background: var(--rx-selected-fill-hover); box-shadow: var(--rx-shadow-control-pressed); } } /* 文字だけの操作は、本文のリンクと同じく青緑の文字に1pxの下線を引く。 */ &[data-variant="link"] { background: transparent; border-color: transparent; color: var(--rx-link); box-shadow: none; padding-inline: calc(2em / 12); text-decoration-line: underline; text-decoration-thickness: var(--rx-stroke-width); text-underline-offset: 0.15em; &:is(:hover, :active) { border-color: transparent; box-shadow: none; } &:hover:not(:disabled) { background: transparent; color: var(--rx-link-hover); } &:active:not(:disabled) { background: transparent; } } /* 使えない操作は、Highriseの「First」と同じく形・枠・塗りをそのままにし、文字だけを灰色にする。 塗りのある操作（主・危険）は白い文字のまま灰色にできないので、控えめな操作と同じ白い面にする。 選んでいる状態は淡い塗りなので、塗りを残して文字だけを灰色にする。 */ &:disabled:not([data-busy="true"]) { cursor: default; color: var(--rx-disabled-text); &:is([data-variant="primary"], [data-variant="danger"]):not([data-current="true"]) { border-color: var(--rx-control-border); border-radius: var(--rx-radius-control); background: var(--rx-surface); box-shadow: var(--rx-shadow-control); } } &[data-icon-only="true"] { min-inline-size: var(--rx-button-size); padding-block: 0; padding-inline: 0; text-decoration: none; &[data-size="large"] { min-inline-size: var(--rx-button-large); } } /* 処理中は、待っていることが分かるよう面を淡い灰色にし、ポインターを待ちの形にする。 */ &[data-busy="true"] { cursor: progress; &:not( [data-variant="primary"], [data-variant="danger"], [data-current="true"], [data-variant="link"] ) { background: var(--rx-gray-50); } } } } @layer components { @media (forced-colors: active) { .rx-button { background-image: none; box-shadow: none; } :is(.rx-button, :where(.rx-filter-bar > a))[data-current="true"]:not(:disabled) { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; } } @media (pointer: coarse) { .rx-button[data-icon-only="true"]:not([data-size="tag"]) { min-inline-size: 2.75rem; } /* タグ内のアイコン専用操作は小さなチップの高さを維持する。 */ .rx-button:not([data-size="tag"][data-icon-only="true"]) { min-block-size: 2.75rem; } } }