Merge pull request #718 from GSA/sam-design-system-1520

Add new button options
GSA · Nov 21, 2024 · 5d666e4 · 5d666e4
2 parents a4c251a + 3a1f4c8
commit 5d666e4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/sam-styles/packages/components/button/standard/templates/button-variants.html b/sam-styles/packages/components/button/standard/templates/button-variants.html
@@ -179,6 +179,32 @@ <h3>Standard Buttons</h3>
       <button class="usa-button usa-button--base usa-button--outline" disabled="disabled">Disabled</button>
     </td>
   </tr>
+
+  <tr style="height: 80px">
+    <td class="padding-1">Info-Light</td>
+    <td class="padding-1"><button class="usa-button usa-button--info-light">Button</button></td>
+    <td class="padding-1"><button class="usa-button usa-button--info-light usa-button--hover">Button</button></td>
+    <td class="padding-1">
+      <button class="usa-button usa-button--info-light usa-button--active">Button</button>
+    </td>
+    <td class="padding-1"><button class="usa-button usa-button--info-light usa-focus">Button</button></td>
+    <td class="padding-1">
+      <button class="usa-button usa-button--info-light" disabled="disabled">Disabled</button>
+    </td>
+  </tr>
+
+  <tr style="height: 80px">
+    <td class="padding-1">Error-Light</td>
+    <td class="padding-1"><button class="usa-button usa-button--error-light">Button</button></td>
+    <td class="padding-1"><button class="usa-button usa-button--error-light usa-button--hover">Button</button></td>
+    <td class="padding-1">
+      <button class="usa-button usa-button--error-light usa-button--active">Button</button>
+    </td>
+    <td class="padding-1"><button class="usa-button usa-button--error-light usa-focus">Button</button></td>
+    <td class="padding-1">
+      <button class="usa-button usa-button--error-light" disabled="disabled">Disabled</button>
+    </td>
+  </tr>
 </table>
 
 <table class="sds-table">

diff --git a/sam-styles/packages/components/button/styles/button.scss b/sam-styles/packages/components/button/styles/button.scss
@@ -1,5 +1,13 @@
 $button-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
 
+$info-light-alt: #9DDFEB;
+$info-lighter-alt: #E7F6F8;
+$info-dark-alt: #009EC1;
+
+$error-light-alt: #FDB8AE;
+$error-lightest-alt: #FDE0DB;
+$error-dark-alt: #B50909;
+
 .usa-button {
   @include u-text("secondary-darker");
   @include u-border("primary");
@@ -424,6 +432,42 @@ $button-shadow: 0 0.25rem 0.5rem 0 rgba(0, 0, 0, 0.2);
   }
 }
 
+.usa-button--info-light {
+  background-color: $info-light-alt;
+  border-color: $info-light-alt;
+
+  &.usa-button--hover,
+  &:hover {
+    background-color: $info-lighter-alt;
+  border-color: $info-lighter-alt;
+  }
+
+  &.usa-button--active,
+  &:active {
+    color: color("white");
+    background-color: $info-dark-alt;
+  border-color: $info-dark-alt;
+  }
+}
+
+.usa-button--error-light {
+  background-color: $error-light-alt;
+  border-color: $error-light-alt;
+
+  &.usa-button--hover,
+  &:hover {
+    background-color: $error-lightest-alt;
+  border-color: $error-lightest-alt;
+  }
+
+  &.usa-button--active,
+  &:active {
+    color: color("white");
+    background-color: $error-dark-alt;
+  border-color: $error-dark-alt;
+  }
+}
+
 .usa-button--accent-warm {
   background-color: color("accent-warm");
   @include u-border("accent-warm");