From e30f824cda96a69adf1885ac5ea373ab811b3d99 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 17 Aug 2022 08:43:40 +0100
Subject: [PATCH] feat: no button muted alt (#11278)

* insight card primary alt

* lemon input side icon primary alt

* remove button muted alt

* turn on critical a11y testing for home page

* remove muted alt from scss

* de muteify the password input
---
 cypress/e2e/a11y.js                                           | 3 ++-
 frontend/src/lib/components/InsightCard/InsightCard.tsx       | 2 +-
 frontend/src/lib/components/LemonButton/LemonButton.scss      | 2 +-
 .../src/lib/components/LemonButton/LemonButton.stories.tsx    | 2 +-
 frontend/src/lib/components/LemonButton/LemonButton.tsx       | 2 +-
 frontend/src/lib/components/LemonInput/LemonInput.tsx         | 4 ++--
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/a11y.js b/cypress/e2e/a11y.js
index 9fb3f912f84..0de64341f41 100644
--- a/cypress/e2e/a11y.js
+++ b/cypress/e2e/a11y.js
@@ -4,7 +4,8 @@ describe('a11y', () => {
     it('home should have no accessibility violations', () => {
         cy.get('[data-attr="menu-item-projecthomepage"]').click()
         cy.injectAxe()
-        reportA11y({ includedImpacts: ['serious', 'critical'] }, 'home-page')
+        reportA11y({ includedImpacts: ['critical'] }, 'home-page-critical', false)
+        reportA11y({ includedImpacts: ['serious'] }, 'home-page-serious', true)
     })
 
     const sidebarItems = [
diff --git a/frontend/src/lib/components/InsightCard/InsightCard.tsx b/frontend/src/lib/components/InsightCard/InsightCard.tsx
index c94369cbda8..9eb95613cd0 100644
--- a/frontend/src/lib/components/InsightCard/InsightCard.tsx
+++ b/frontend/src/lib/components/InsightCard/InsightCard.tsx
@@ -262,7 +262,7 @@ function InsightMeta({
                                             icon={!areDetailsShown ? <IconSubtitles /> : <IconSubtitlesOff />}
                                             onClick={() => setAreDetailsShown((state) => !state)}
                                             type="tertiary"
-                                            status="muted-alt"
+                                            status="primary-alt"
                                             size={showDetailsButtonLabel ? 'small' : undefined}
                                         >
                                             {showDetailsButtonLabel && `${!areDetailsShown ? 'Show' : 'Hide'} details`}
diff --git a/frontend/src/lib/components/LemonButton/LemonButton.scss b/frontend/src/lib/components/LemonButton/LemonButton.scss
index cdf19d7ca1d..2056cd19f35 100644
--- a/frontend/src/lib/components/LemonButton/LemonButton.scss
+++ b/frontend/src/lib/components/LemonButton/LemonButton.scss
@@ -140,7 +140,7 @@
         }
     }
 
-    @each $status in ('default', 'primary', 'danger', 'primary-alt', 'muted-alt') {
+    @each $status in ('default', 'primary', 'danger', 'primary-alt') {
         &.LemonButton--status-#{$status} {
             color: var(--#{$status}, var(--primary));
 
diff --git a/frontend/src/lib/components/LemonButton/LemonButton.stories.tsx b/frontend/src/lib/components/LemonButton/LemonButton.stories.tsx
index 0b4d6f44983..6a9a99c389a 100644
--- a/frontend/src/lib/components/LemonButton/LemonButton.stories.tsx
+++ b/frontend/src/lib/components/LemonButton/LemonButton.stories.tsx
@@ -13,7 +13,7 @@ import { LemonDivider } from '../LemonDivider'
 import { capitalizeFirstLetter } from 'lib/utils'
 import { urls } from 'scenes/urls'
 
-const statuses: LemonButtonProps['status'][] = ['primary', 'danger', 'primary-alt', 'muted-alt']
+const statuses: LemonButtonProps['status'][] = ['primary', 'danger', 'primary-alt']
 const types: LemonButtonProps['type'][] = ['primary', 'secondary', 'tertiary']
 
 export default {
diff --git a/frontend/src/lib/components/LemonButton/LemonButton.tsx b/frontend/src/lib/components/LemonButton/LemonButton.tsx
index 8cd49d61091..727d8a66769 100644
--- a/frontend/src/lib/components/LemonButton/LemonButton.tsx
+++ b/frontend/src/lib/components/LemonButton/LemonButton.tsx
@@ -16,7 +16,7 @@ export interface LemonButtonPropsBase
     children?: React.ReactNode
     type?: 'primary' | 'secondary' | 'tertiary'
     /** What color scheme the button should follow */
-    status?: 'primary' | 'danger' | 'primary-alt' | 'muted' | 'muted-alt' | 'stealth'
+    status?: 'primary' | 'danger' | 'primary-alt' | 'muted' | 'stealth'
     /** Whether hover style should be applied, signaling that the button is held active in some way. */
     active?: boolean
     /** URL to link to. */
diff --git a/frontend/src/lib/components/LemonInput/LemonInput.tsx b/frontend/src/lib/components/LemonInput/LemonInput.tsx
index baf7eccc8de..014bd9875ac 100644
--- a/frontend/src/lib/components/LemonInput/LemonInput.tsx
+++ b/frontend/src/lib/components/LemonInput/LemonInput.tsx
@@ -100,7 +100,7 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                 size="small"
                 noPadding
                 icon={passwordVisible ? <IconEyeHidden /> : <IconEyeVisible />}
-                status="muted-alt"
+                status="primary-alt"
                 tooltip={passwordVisible ? 'Hide password' : 'Show password'}
                 onClick={(e) => {
                     e.stopPropagation()
@@ -117,7 +117,7 @@ export const LemonInput = React.forwardRef<HTMLInputElement, LemonInputProps>(fu
                 size="small"
                 noPadding
                 icon={<IconClose />}
-                status="muted-alt"
+                status="primary-alt"
                 tooltip="Clear input"
                 onClick={(e) => {
                     e.stopPropagation()