fix: change teh destructive buttons to be filled

twilio-labs · Nov 15, 2019 · 4571971 · 4571971
1 parent b3c3a20
commit 4571971
Showing 1 changed file with 9 additions and 14 deletions.
diff --git a/packages/paste-core/components/button/src/styles.ts b/packages/paste-core/components/button/src/styles.ts
@@ -199,34 +199,30 @@ const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles =
 const variantDestructiveBase = (props: ButtonWrapperProps): SerializedStyles => css`
   border-width: ${themeGet('borderWidths.borderWidth20')(props)};
   border-style: solid;
-  background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
+  background-color: ${themeGet('backgroundColors.colorBackgroundDestructive')(props)};
+  color: ${themeGet('textColors.colorTextInverse')(props)};
 `;
 
 const variantDestructiveEnabled = (props: ButtonWrapperProps): SerializedStyles =>
   css([
     baseEnabled(props),
     variantDestructiveBase(props),
     css`
-      color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
       border-color: ${themeGet('borderColors.colorBorderDestructive')(props)};
-      background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
 
       &:hover {
-        color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
         border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
-        background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLightest')(props)};
+        background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDarker')(props)};
       }
 
       &:focus {
-        color: ${themeGet('textColors.colorTextLinkDestructive')(props)};
-        border-color: ${themeGet('borderColors.colorBorderDestructive')(props)};
-        background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLightest')(props)};
+        border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
+        background-color: ${themeGet('backgroundColors.colorBackgroundDestructive')(props)};
       }
 
       &:active {
-        color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
         border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
-        background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLighter')(props)};
+        background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDark')(props)};
       }
     `,
   ]);
@@ -235,18 +231,17 @@ const variantDestructiveLoading = (props: ButtonWrapperProps): SerializedStyles
     baseLoading(props),
     variantDestructiveBase(props),
     css`
-      color: ${themeGet('textColors.colorTextLinkDestructiveDarker')(props)};
-      border-color: ${themeGet('borderColors.colorBorderDestructiveLighter')(props)};
-      background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLighter')(props)};
+      border-color: ${themeGet('borderColors.colorBorderDestructiveDarker')(props)};
+      background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveDarker')(props)};
     `,
   ]);
 const variantDestructiveDisabled = (props: ButtonWrapperProps): SerializedStyles =>
   css([
     baseDisabled(props),
     variantDestructiveBase(props),
     css`
-      color: ${themeGet('textColors.colorTextLinkDestructiveLight')(props)};
       border-color: ${themeGet('borderColors.colorBorderDestructiveLight')(props)};
+      background-color: ${themeGet('backgroundColors.colorBackgroundDestructiveLight')(props)};
     `,
   ]);