From cb1ba8e60db1a6a5c784e22f02e270b1bc0ff6b1 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 11 Dec 2024 09:39:40 +0100
Subject: [PATCH 1/2] Use textMutedColor rather than barTextColor where this is
 contextually more appropriate

---
 code/addons/test/src/components/ContextMenuItem.tsx        | 2 +-
 code/addons/test/src/components/Description.tsx            | 2 +-
 code/core/src/components/components/Loader/Loader.tsx      | 2 +-
 code/core/src/components/components/tooltip/ListItem.tsx   | 2 +-
 code/core/src/manager/components/sidebar/LegacyRender.tsx  | 2 +-
 code/core/src/manager/components/sidebar/SearchResults.tsx | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/code/addons/test/src/components/ContextMenuItem.tsx b/code/addons/test/src/components/ContextMenuItem.tsx
index 52c3b98061f9..229a396b5388 100644
--- a/code/addons/test/src/components/ContextMenuItem.tsx
+++ b/code/addons/test/src/components/ContextMenuItem.tsx
@@ -67,7 +67,7 @@ export const ContextMenuItem: FC<{
             padding="small"
             disabled={state.crashed || isDisabled}
           >
-            <Icon fill={theme.barTextColor} />
+            <Icon fill={theme.textMutedColor} />
           </Button>
         }
       />
diff --git a/code/addons/test/src/components/Description.tsx b/code/addons/test/src/components/Description.tsx
index a94b775b5c95..dea5ec322b9f 100644
--- a/code/addons/test/src/components/Description.tsx
+++ b/code/addons/test/src/components/Description.tsx
@@ -12,7 +12,7 @@ export const Wrapper = styled.div(({ theme }) => ({
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   fontSize: theme.typography.size.s1,
-  color: theme.barTextColor,
+  color: theme.textMutedColor,
 }));
 
 const PositiveText = styled.span(({ theme }) => ({
diff --git a/code/core/src/components/components/Loader/Loader.tsx b/code/core/src/components/components/Loader/Loader.tsx
index 26d01ad3f05d..dace42a9b351 100644
--- a/code/core/src/components/components/Loader/Loader.tsx
+++ b/code/core/src/components/components/Loader/Loader.tsx
@@ -63,7 +63,7 @@ const ProgressBar = styled.div(({ theme }) => ({
 const ProgressMessage = styled.div(({ theme }) => ({
   minHeight: '2em',
   fontSize: `${theme.typography.size.s1}px`,
-  color: theme.barTextColor,
+  color: theme.textMutedColor,
 }));
 
 const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
index 2a93287af503..10e513cc1b6b 100644
--- a/code/core/src/components/components/tooltip/ListItem.tsx
+++ b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -40,7 +40,7 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <sp
   ({ disabled, theme }) =>
     disabled
       ? {
-          color: transparentize(0.7, theme.color.defaultText),
+          color: theme.textMutedColor,
         }
       : {}
 );
diff --git a/code/core/src/manager/components/sidebar/LegacyRender.tsx b/code/core/src/manager/components/sidebar/LegacyRender.tsx
index 82bc83bd1b34..f8afa4317f7f 100644
--- a/code/core/src/manager/components/sidebar/LegacyRender.tsx
+++ b/code/core/src/manager/components/sidebar/LegacyRender.tsx
@@ -32,7 +32,7 @@ const TitleWrapper = styled.div<{ crashed?: boolean }>(({ crashed, theme }) => (
 
 const DescriptionWrapper = styled.div(({ theme }) => ({
   fontSize: theme.typography.size.s1,
-  color: theme.barTextColor,
+  color: theme.textMutedColor,
 }));
 
 const Progress = styled(ProgressSpinner)({
diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
index 7573befe34a1..b7689b7d64d0 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -70,7 +70,7 @@ const NoResults = styled.div(({ theme }) => ({
   lineHeight: `18px`,
   color: theme.color.defaultText,
   small: {
-    color: theme.barTextColor,
+    color: theme.textMutedColor,
     fontSize: `${theme.typography.size.s1}px`,
   },
 }));

From 212f83ae0ad980500601819218abc314be2a06c8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 11 Dec 2024 09:48:34 +0100
Subject: [PATCH 2/2] Indicate when an option is disabled using color and a
 suffix

---
 .../src/components/TestProviderRender.tsx     | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx
index 017ecc2cf27f..6878c37e3f06 100644
--- a/code/addons/test/src/components/TestProviderRender.tsx
+++ b/code/addons/test/src/components/TestProviderRender.tsx
@@ -76,6 +76,16 @@ const StopIcon = styled(StopAltIcon)({
   width: 10,
 });
 
+const ItemTitle = styled.span<{ enabled?: boolean }>(
+  ({ enabled, theme }) =>
+    !enabled && {
+      color: theme.textMutedColor,
+      '&:after': {
+        content: '" (disabled)"',
+      },
+    }
+);
+
 const statusOrder: TestStatus[] = ['failed', 'warning', 'pending', 'passed', 'skipped'];
 const statusMap: Record<TestStatus, ComponentProps<typeof TestStatusIcon>['status']> = {
   failed: 'negative',
@@ -233,7 +243,7 @@ export const TestProviderRender: FC<
           />
           <ListItem
             as="label"
-            title="Coverage"
+            title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
             icon={<ShieldIcon color={theme.textMutedColor} />}
             right={
               <Checkbox
@@ -247,7 +257,7 @@ export const TestProviderRender: FC<
           {isA11yAddon && (
             <ListItem
               as="label"
-              title="Accessibility"
+              title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
               icon={<AccessibilityIcon color={theme.textMutedColor} />}
               right={
                 <Checkbox
@@ -285,7 +295,7 @@ export const TestProviderRender: FC<
           />
           {coverageSummary ? (
             <ListItem
-              title="Coverage"
+              title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
               href={'/coverage/index.html'}
               // @ts-expect-error ListItem doesn't include all anchor attributes in types, but it is an achor element
               target="_blank"
@@ -300,13 +310,13 @@ export const TestProviderRender: FC<
             />
           ) : (
             <ListItem
-              title="Coverage"
+              title={<ItemTitle enabled={config.coverage}>Coverage</ItemTitle>}
               icon={<TestStatusIcon status="unknown" aria-label={`status: unknown`} />}
             />
           )}
           {isA11yAddon && (
             <ListItem
-              title="Accessibility"
+              title={<ItemTitle enabled={config.a11y}>Accessibility</ItemTitle>}
               onClick={
                 (a11yStatus === 'negative' || a11yStatus === 'warning') && a11yResults.length
                   ? () => {