Skip to content

Commit

Permalink
docs(button): use static background colors from design
Browse files Browse the repository at this point in the history 
Use the example background color tokens for the static white and black
variants, that are used on the s2 design spec. Note; the seafoam-1000
and seafoam-200 token names couldn't be used here as we don't want them
to change between light and dark themes.
  • Loading branch information
@jawinn
jawinn committed Mar 21, 2024
1 parent bf5ed36 commit 5efeafd
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 15 deletions.
24 changes: 12 additions & 12 deletions components/button/metadata/button-staticcolor.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ examples:
- id: button-staticcolor
name: Static White
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); --mod-heading-font-color: white; padding: 15px 20px;">
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
Expand Down Expand Up @@ -144,7 +144,7 @@ examples:
- id: button-staticcolor
name: Static White - Disabled
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--staticWhite" disabled>
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -166,7 +166,7 @@ examples:
- id: button-staticcolor
name: Static White - Secondary
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--staticWhite spectrum-Button--secondary">
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -188,7 +188,7 @@ examples:
- id: button-staticcolor
name: Static Black
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
Expand Down Expand Up @@ -278,7 +278,7 @@ examples:
- id: button-staticcolor
name: Static Black - Disabled
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--staticBlack" disabled>
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -300,7 +300,7 @@ examples:
- id: button-staticcolor
name: Static Black - Secondary
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); color: rgb(181, 209, 211); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--staticBlack spectrum-Button--secondary">
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -322,7 +322,7 @@ examples:
- id: button-staticcolor
name: Static White - Outline
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); --spectrum-alias-heading-text-color: white; padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); --mod-heading-font-color: white; padding: 15px 20px;">
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
Expand Down Expand Up @@ -412,7 +412,7 @@ examples:
- id: button-staticcolor
name: Static White - Outline, Disabled
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite" disabled>
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -434,7 +434,7 @@ examples:
- id: button-staticcolor
name: Static White - Outline, Secondary
markup: |
<div style="background-color: rgb(15, 121, 125); color: rgb(15, 121, 125); padding: 15px 20px;">
<div style="background-color: rgb(5, 108, 92); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticWhite spectrum-Button--secondary">
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -456,7 +456,7 @@ examples:
- id: button-staticcolor
name: Static Black - Outline
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
<div class="spectrum-Examples">
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
Expand Down Expand Up @@ -546,7 +546,7 @@ examples:
- id: button-staticcolor
name: Static Black - Outline, Disabled
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack" disabled>
<span class="spectrum-Button-label">Edit</span>
</button>
Expand All @@ -568,7 +568,7 @@ examples:
- id: button-staticcolor
name: Static Black - Outline, Secondary
markup: |
<div style="background-color: rgb(181, 209, 211); color: rgb(181, 209, 211); padding: 15px 20px;">
<div style="background-color: rgb(211, 246, 234); padding: 15px 20px;">
<button class="spectrum-Button spectrum-Button--outline spectrum-Button--staticBlack spectrum-Button--secondary">
<span class="spectrum-Button-label">Edit</span>
</button>
Expand Down
6 changes: 3 additions & 3 deletions components/button/stories/button.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ const CustomButton = ({
<div
style=${ifDefined(styleMap({
padding: "1rem",
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
backgroundColor: staticColor === "white" ? "rgb(5, 108, 92)" : staticColor === "black" ? "rgb(211, 246, 234)" : undefined,
...customStyles
}))}
>
Expand Down Expand Up @@ -260,7 +260,7 @@ const PendingButton = ({
<div
style=${ifDefined(styleMap({
padding: "1rem",
backgroundColor: "rgb(15, 121, 125)",
backgroundColor: "rgb(5, 108, 92)",
...customStyles
}))}
>
Expand All @@ -280,7 +280,7 @@ const PendingButton = ({
<div
style=${ifDefined(styleMap({
padding: "1rem",
backgroundColor: "rgb(15, 121, 125)",
backgroundColor: "rgb(5, 108, 92)",
...customStyles
}))}
>
Expand Down

0 comments on commit 5efeafd

Please sign in to comment.