From 3e0bdcc85037770c446682639b4bef8bb0af1f80 Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Fri, 25 Sep 2026 14:36:54 -0500 Subject: [PATCH 1/2] feat(css): color PUT and PATCH API links Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .changeset/bright-method-colors.md | 5 +++++ css/src/components/api-link-button.scss | 10 ++++++++++ site/src/components/api-link-button.md | 15 ++++++++++++++- 3 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 .changeset/bright-method-colors.md diff --git a/.changeset/bright-method-colors.md b/.changeset/bright-method-colors.md new file mode 100644 index 000000000..8b83c0bba --- /dev/null +++ b/.changeset/bright-method-colors.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-css': patch +--- + +Add API link button colors for PUT and PATCH methods. diff --git a/css/src/components/api-link-button.scss b/css/src/components/api-link-button.scss index f7d24d23d..2ea9987f9 100644 --- a/css/src/components/api-link-button.scss +++ b/css/src/components/api-link-button.scss @@ -3,6 +3,8 @@ $color-primary: tokens.$primary; $color-success: tokens.$success; +$color-warning: tokens.$warning; +$color-info: tokens.$info; $color-danger: tokens.$danger; .api-link-button-container { @@ -51,6 +53,14 @@ $color-danger: tokens.$danger; color: #{$color-success}; } + &[data-method='put'] { + color: #{$color-warning}; + } + + &[data-method='patch'] { + color: #{$color-info}; + } + &[data-method='delete'] { color: #{$color-danger}; } diff --git a/site/src/components/api-link-button.md b/site/src/components/api-link-button.md index d6b8f5ac9..392985927 100644 --- a/site/src/components/api-link-button.md +++ b/site/src/components/api-link-button.md @@ -39,4 +39,17 @@ The narrow layout reduces the vertical gap between the method and path to keep t ## Method colors -Set `data-method` on `.api-link-button-method` to apply the semantic color for `get`, `post`, or `delete`. Other methods inherit the surrounding text color. +Set `data-method` on `.api-link-button-method` to apply the method color for `get`, `post`, `put`, `patch`, or `delete`. Other methods inherit the surrounding text color. + +```html +
+ + put + /openai/v1/responses/{response_id} + + + patch + /openai/v1/responses/{response_id} + +
+``` From 553c2215fac02ff3d9d10eb8077ac260ed09751f Mon Sep 17 00:00:00 2001 From: Sahil Johari Date: Mon, 5 Oct 2026 11:45:04 -0500 Subject: [PATCH 2/2] fix(css): use accessible API link method colors Use theme-aware warning and info variants for PUT and PATCH and document all five method colors. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- css/src/components/api-link-button.scss | 4 ++-- site/src/components/api-link-button.md | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/css/src/components/api-link-button.scss b/css/src/components/api-link-button.scss index 2ea9987f9..09f6ed93c 100644 --- a/css/src/components/api-link-button.scss +++ b/css/src/components/api-link-button.scss @@ -3,8 +3,8 @@ $color-primary: tokens.$primary; $color-success: tokens.$success; -$color-warning: tokens.$warning; -$color-info: tokens.$info; +$color-warning: tokens.$warning-dark; +$color-info: tokens.$info-active; $color-danger: tokens.$danger; .api-link-button-container { diff --git a/site/src/components/api-link-button.md b/site/src/components/api-link-button.md index 392985927..5322832cf 100644 --- a/site/src/components/api-link-button.md +++ b/site/src/components/api-link-button.md @@ -43,6 +43,14 @@ Set `data-method` on `.api-link-button-method` to apply the method color for `ge ```html
+ + get + /openai/v1/responses/{response_id} + + + post + /openai/v1/responses + put /openai/v1/responses/{response_id} @@ -51,5 +59,9 @@ Set `data-method` on `.api-link-button-method` to apply the method color for `ge patch /openai/v1/responses/{response_id} + + delete + /openai/v1/responses/{response_id} +
```