From 5ada002fa6ae7ebc92bca7812b58bba50931a30f Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 13:53:09 -0700
Subject: [PATCH 1/8] chore: Update Privacy stats view

---
 .../components/PrivacyStats.module.css        | 36 ++++++++++++-------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
index 826d07dc0..919f59a0b 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
@@ -10,6 +10,12 @@
     width: 100%;
     margin-bottom: var(--ntp-gap);
 
+    &:hover {
+        .sectionExpander * {
+            opacity: 1;
+        }
+    }
+
     @media screen and (prefers-color-scheme: dark) {
         border-color: var(--color-white-at-9);
     }
@@ -18,28 +24,25 @@
 .heading {
     display: grid;
     grid-template-columns: 1.5rem auto 2rem;
-    gap: var(--sp-3);
+    grid-column-gap: var(--sp-2);
+    grid-row-gap: var(--sp-1);
     grid-template-rows: auto;
     grid-template-areas: 'icon title expander';
 }
 .heading:has(.subtitle) {
     grid-template-rows: auto auto;
     grid-template-areas:
-         'icon title expander'
-        'label label label';
+        'icon title expander'
+        'empty label label';
 }
 .headingIcon {
     grid-area: icon;
     width: 1.5rem;
-    height: 1.5rem;
+    height: var(--title-2-line-height);
     position: relative;
-
-    img {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, calc(-50% - 2px));
-    }
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .title {
@@ -63,7 +66,8 @@
 .subtitle {
     grid-area: label;
     color: var(--ntp-text-muted);
-    padding-left: 2px;
+    line-height: 1;
+    text-transform: uppercase;
 }
 
 .list {
@@ -120,7 +124,7 @@
 .row {
     min-height: 2rem;
     display: grid;
-    grid-gap: 0.75rem;
+    grid-gap: var(--sp-2);
     grid-template-columns: auto auto 40%;
     grid-template-areas: 'company count bar';
     align-items: center;
@@ -203,3 +207,9 @@
     text-align: right;
     color: var(--ntp-text-normal);
 }
+
+.sectionExpander {
+    &:hover * {
+        opacity: 1;
+    }
+}
\ No newline at end of file

From 1ac7bf619733d9923a90e4904dad5489d54accfc Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 15:36:29 -0700
Subject: [PATCH 2/8] chore: Modify the showHide button

---
 special-pages/pages/new-tab/app/components/Icons.js   |  4 ++--
 .../pages/new-tab/app/components/ShowHide.module.css  |  1 +
 .../pages/new-tab/app/components/ShowHideButton.jsx   | 11 ++++++++---
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/special-pages/pages/new-tab/app/components/Icons.js b/special-pages/pages/new-tab/app/components/Icons.js
index 339326644..dd0198ecd 100644
--- a/special-pages/pages/new-tab/app/components/Icons.js
+++ b/special-pages/pages/new-tab/app/components/Icons.js
@@ -15,9 +15,9 @@ export function ChevronButton() {
     );
 }
 
-export function Chevron({ className }) {
+export function Chevron() {
     return (
-        <svg fill="none" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class={className}>
+        <svg fill="none" width="16" height="16" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
             <path
                 fill="currentColor"
                 fill-rule="evenodd"
diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css
index a265d1a4b..a86ca82c2 100644
--- a/special-pages/pages/new-tab/app/components/ShowHide.module.css
+++ b/special-pages/pages/new-tab/app/components/ShowHide.module.css
@@ -24,6 +24,7 @@
 
     svg {
         transition: transform .3s;
+        margin-left: var(--sp-1);
     }
 
     &[aria-pressed=true] svg {
diff --git a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
index 2bfb44e11..a280bbaf0 100644
--- a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
+++ b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
@@ -1,21 +1,26 @@
 import styles from './ShowHide.module.css';
 import cn from 'classnames';
-import { ChevronButton } from './Icons.js';
-import { h } from 'preact';
+import { ChevronButton, Chevron } from './Icons.js';
+import { Fragment, h } from 'preact';
 
 /**
  * Function to handle showing or hiding content based on certain conditions.
  *
  * @param {Object} props - Input parameters for controlling the behavior of the ShowHide functionality.
  * @param {string} props.text
+ * @param {boolean} [props.showText]
  * @param {() => void} props.onClick
  * @param {'none'|'round'} [props.shape]
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
-export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none' }) {
+export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none', showText = false }) {
     return (
         <button {...buttonAttrs} class={cn(styles.button, shape === 'round' && styles.round)} aria-label={text} onClick={onClick}>
+            {showText ? (
+                <Fragment>{text}<Chevron /></Fragment>
+            ) : (
             <ChevronButton />
+            )}
         </button>
     );
 }

From 33a6e2bae91e214a4b2fe1925692d042e6d7ab83 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 16:21:14 -0700
Subject: [PATCH 3/8] chore: FInalize button and spacing in card

---
 .../app/components/ShowHide.module.css        | 18 ++++++--
 .../new-tab/app/components/ShowHideButton.jsx |  4 +-
 .../privacy-stats/components/PrivacyStats.js  | 45 +++++++++++++------
 .../components/PrivacyStats.module.css        | 38 ++++++++++------
 4 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css
index a86ca82c2..ee3d296fe 100644
--- a/special-pages/pages/new-tab/app/components/ShowHide.module.css
+++ b/special-pages/pages/new-tab/app/components/ShowHide.module.css
@@ -11,7 +11,7 @@
     color: var(--ntp-text-normal);
     height: var(--ntp-gap);
     width: 100%;
-    border-radius: var(--border-radius-md);
+    border-radius: var(--border-radius-sm);
 
     &.round {
         width: 2rem;
@@ -22,9 +22,15 @@
         }
     }
 
+    &.withText {
+        border: 1px solid var(--color-black-at-9);
+        svg {
+            margin-right: var(--sp-2);
+        }
+    }
+
     svg {
         transition: transform .3s;
-        margin-left: var(--sp-1);
     }
 
     &[aria-pressed=true] svg {
@@ -35,4 +41,10 @@
         opacity: 1;
         box-shadow: var(--focus-ring-thin);
     }
-}
+
+    @media (prefers-color-scheme: dark) {
+        &.withText {
+            border-color: var(--color-white-at-9);
+        } 
+    }
+}
\ No newline at end of file
diff --git a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
index a280bbaf0..ddc3eaec2 100644
--- a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
+++ b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
@@ -15,9 +15,9 @@ import { Fragment, h } from 'preact';
  */
 export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none', showText = false }) {
     return (
-        <button {...buttonAttrs} class={cn(styles.button, shape === 'round' && styles.round)} aria-label={text} onClick={onClick}>
+        <button {...buttonAttrs} class={cn(styles.button, shape === 'round' && styles.round, !!showText && styles.withText)} aria-label={text} onClick={onClick}>
             {showText ? (
-                <Fragment>{text}<Chevron /></Fragment>
+                <Fragment><Chevron />{text}</Fragment>
             ) : (
             <ChevronButton />
             )}
diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
index 9513bcfd5..4143b0837 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
@@ -1,4 +1,5 @@
 import { Fragment, h } from 'preact';
+import cn from 'classnames';
 import styles from './PrivacyStats.module.css';
 import { useTypedTranslationWith } from '../../types.js';
 import { useContext, useState, useId, useCallback } from 'preact/hooks';
@@ -105,7 +106,7 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
             {none && <p className={styles.title}>{t('stats_noRecent')}</p>}
             {some && <p className={styles.title}>{alltimeTitle}</p>}
             {recent > 0 && (
-                <span className={styles.expander}>
+                <span className={styles.widgetExpander}>
                     <ShowHideButton
                         buttonAttrs={{
                             ...buttonAttrs,
@@ -119,7 +120,7 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
                 </span>
             )}
             {recent === 0 && <p className={styles.subtitle}>{t('stats_noActivity')}</p>}
-            {recent > 0 && <p className={styles.subtitle}>{t('stats_feedCountBlockedPeriod')}</p>}
+            {recent > 0 && <p className={cn(styles.subtitle, styles.uppercase)}>{t('stats_feedCountBlockedPeriod')}</p>}
         </div>
     );
 }
@@ -138,6 +139,15 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
     const [visible, setVisible] = useState(5);
     const hasmore = sorted.length > visible;
 
+    const toggleListExpansion = () => {
+        if (visible === 5) {
+            setVisible(sorted.length);
+        }
+        if (visible === sorted.length) {
+            setVisible(5);
+        }
+    };
+
     return (
         <Fragment>
             <ul {...listAttrs} class={styles.list} data-testid="CompanyList">
@@ -159,22 +169,31 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
                         );
                     }
                     return (
-                        <li key={company.displayName}>
-                            <div class={styles.row}>
-                                <div class={styles.company}>
-                                    <CompanyIcon displayName={company.displayName} />
-                                    <span class={styles.name}>{displayName}</span>
-                                </div>
-                                <span class={styles.count}>{countText}</span>
-                                <span class={styles.bar}></span>
-                                <span class={styles.fill} style={inlineStyles}></span>
+                        <li key={company.displayName} class={styles.row}>
+                            <div class={styles.company}>
+                                <CompanyIcon displayName={company.displayName} />
+                                <span class={styles.name}>{displayName}</span>
                             </div>
+                            <span class={styles.count}>{countText}</span>
+                            <span class={styles.bar}></span>
+                            <span class={styles.fill} style={inlineStyles}></span>
                         </li>
                     );
                 })}
             </ul>
-            {hasmore && visible < sorted.length && <button onClick={() => setVisible(sorted.length)}>{t('ntp_show_more')}</button>}
-            {visible > 5 && visible === sorted.length && <button onClick={() => setVisible(5)}>{t('ntp_show_less')}</button>}
+            {sorted.length > 5 && (
+                <div class={styles.listExpander}>
+                    <ShowHideButton
+                        onClick={toggleListExpansion}
+                        text={hasmore ? t('ntp_show_more') : t('ntp_show_less')}
+                        showText={true}
+                        buttonAttrs={{
+                            'aria-expanded': !hasmore,
+                            'aria-pressed': visible === sorted.length,
+                        }}
+                    />
+                </div>
+            )}
         </Fragment>
     );
 }
diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
index 919f59a0b..9007f860f 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
@@ -6,12 +6,11 @@
     display: grid;
     align-items: start;
     grid-template-columns: auto;
-    grid-row-gap: calc(18 * var(--px-in-rem));
     width: 100%;
     margin-bottom: var(--ntp-gap);
 
     &:hover {
-        .sectionExpander * {
+        .listExpander * {
             opacity: 1;
         }
     }
@@ -43,6 +42,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding-top: 2px;
 }
 
 .title {
@@ -52,7 +52,7 @@
     line-height: var(--title-2-line-height);
 }
 
-.expander {
+.widgetExpander {
     position: relative;
 
     & [aria-controls] {
@@ -67,7 +67,9 @@
     grid-area: label;
     color: var(--ntp-text-muted);
     line-height: 1;
-    text-transform: uppercase;
+    &.uppercase {
+        text-transform: uppercase;
+    }
 }
 
 .list {
@@ -75,6 +77,7 @@
     grid-template-columns: auto;
     grid-row-gap: calc(6 * var(--px-in-rem));
     transition: opacity ease-in-out 0.3s, visibility ease-in-out 0.3s;
+    margin-top: 18px;
 }
 
 .entering {
@@ -128,12 +131,16 @@
     grid-template-columns: auto auto 40%;
     grid-template-areas: 'company count bar';
     align-items: center;
+
     @media screen and (min-width: 500px) {
         grid-template-columns: auto auto 60%;
     }
 }
+
 .textRow {
-    margin-top: 12px;
+    margin-top: var(--sp-3);
+    padding-left: var(--sp-1);
+    color: var(--ntp-text-muted);
 }
 .company {
     grid-area: company;
@@ -154,6 +161,7 @@
         font-size: 0;
         width: 1rem;
         height: 1rem;
+
     }
     &:has([data-errored=true]) {
         outline: 1px solid var(--ntp-surface-border-color);
@@ -177,6 +185,13 @@
     line-height: 1;
 }
 
+.count {
+    grid-area: count;
+    text-align: right;
+    color: var(--ntp-text-normal);
+    line-height: 1;
+}
+
 .bar {
     grid-area: bar;
     width: 100%;
@@ -194,7 +209,6 @@
     grid-area: bar;
     height: 1rem;
     border-radius: calc(20 * var(--px-in-rem));
-
     background: var(--color-black-at-6);
 
     @media screen and (prefers-color-scheme: dark) {
@@ -202,14 +216,10 @@
     }
 }
 
-.count {
-    grid-area: count;
-    text-align: right;
-    color: var(--ntp-text-normal);
-}
-
-.sectionExpander {
-    &:hover * {
+.listExpander {
+    margin-top: var(--sp-3);
+    button {
+        color: var(--ntp-text-muted);
         opacity: 1;
     }
 }
\ No newline at end of file

From 867dbb8f5572eeeee113c65e341adca41b550836 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 16:26:21 -0700
Subject: [PATCH 4/8] fix: lint

---
 .../new-tab/app/components/ShowHideButton.jsx      | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
index ddc3eaec2..6fb6fbc7e 100644
--- a/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
+++ b/special-pages/pages/new-tab/app/components/ShowHideButton.jsx
@@ -15,11 +15,19 @@ import { Fragment, h } from 'preact';
  */
 export function ShowHideButton({ text, onClick, buttonAttrs = {}, shape = 'none', showText = false }) {
     return (
-        <button {...buttonAttrs} class={cn(styles.button, shape === 'round' && styles.round, !!showText && styles.withText)} aria-label={text} onClick={onClick}>
+        <button
+            {...buttonAttrs}
+            class={cn(styles.button, shape === 'round' && styles.round, !!showText && styles.withText)}
+            aria-label={text}
+            onClick={onClick}
+        >
             {showText ? (
-                <Fragment><Chevron />{text}</Fragment>
+                <Fragment>
+                    <Chevron />
+                    {text}
+                </Fragment>
             ) : (
-            <ChevronButton />
+                <ChevronButton />
             )}
         </button>
     );

From 0fc826308c74bf2a99bbdf14af850726d7ca3b32 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 16:33:59 -0700
Subject: [PATCH 5/8] fix: Making sure round buttons stay round

---
 special-pages/pages/new-tab/app/components/ShowHide.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/special-pages/pages/new-tab/app/components/ShowHide.module.css b/special-pages/pages/new-tab/app/components/ShowHide.module.css
index ee3d296fe..5f7ed9519 100644
--- a/special-pages/pages/new-tab/app/components/ShowHide.module.css
+++ b/special-pages/pages/new-tab/app/components/ShowHide.module.css
@@ -14,6 +14,7 @@
     border-radius: var(--border-radius-sm);
 
     &.round {
+        height: 2rem;
         width: 2rem;
         border-radius: 50%;
 

From 02cd68833a3d8ab37ae1b31e748103a4d591c5cd Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 16:36:57 -0700
Subject: [PATCH 6/8] fix: Line height for empty subtitle

---
 .../app/privacy-stats/components/PrivacyStats.module.css        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
index 9007f860f..c49c3f9c0 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
@@ -66,8 +66,8 @@
 .subtitle {
     grid-area: label;
     color: var(--ntp-text-muted);
-    line-height: 1;
     &.uppercase {
+        line-height: 1;
         text-transform: uppercase;
     }
 }

From da802343acfc49522e2bd0663970f392a0c4680d Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 17:25:44 -0700
Subject: [PATCH 7/8] chore: Move rowmax to a const

---
 .../new-tab/app/privacy-stats/components/PrivacyStats.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
index 4143b0837..ad288ab45 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
@@ -134,17 +134,18 @@ export function Heading({ expansion, trackerCompanies, onToggle, buttonAttrs = {
 export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const [formatter] = useState(() => new Intl.NumberFormat());
+    const defaultRowMax = 5;
     const sorted = sortStatsForDisplay(trackerCompanies);
     const max = sorted[0]?.count ?? 0;
-    const [visible, setVisible] = useState(5);
+    const [visible, setVisible] = useState(defaultRowMax);
     const hasmore = sorted.length > visible;
 
     const toggleListExpansion = () => {
-        if (visible === 5) {
+        if (visible === defaultRowMax) {
             setVisible(sorted.length);
         }
         if (visible === sorted.length) {
-            setVisible(5);
+            setVisible(defaultRowMax);
         }
     };
 
@@ -181,7 +182,7 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
                     );
                 })}
             </ul>
-            {sorted.length > 5 && (
+            {sorted.length > defaultRowMax && (
                 <div class={styles.listExpander}>
                     <ShowHideButton
                         onClick={toggleListExpansion}

From cd53f3e71a06b4855b8a6bc5391aa5565f206217 Mon Sep 17 00:00:00 2001
From: Valerie Kraucunas <vkraucunas@duckduckgo.com>
Date: Mon, 25 Nov 2024 17:30:45 -0700
Subject: [PATCH 8/8] chore: Markup cleanpu

---
 .../new-tab/app/privacy-stats/components/PrivacyStats.js    | 4 ++--
 .../app/privacy-stats/components/PrivacyStats.module.css    | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
index ad288ab45..900717392 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js
@@ -164,8 +164,8 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
                     if (company.displayName === DDG_STATS_OTHER_COMPANY_IDENTIFIER) {
                         const otherText = t('stats_otherCount', { count: String(company.count) });
                         return (
-                            <li key={company.displayName}>
-                                <div class={styles.textRow}>{otherText}</div>
+                            <li key={company.displayName} class={styles.otherTrackersRow}>
+                                {otherText}
                             </li>
                         );
                     }
diff --git a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
index c49c3f9c0..7f017f1c9 100644
--- a/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
+++ b/special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css
@@ -137,11 +137,12 @@
     }
 }
 
-.textRow {
+.otherTrackersRow {
     margin-top: var(--sp-3);
     padding-left: var(--sp-1);
     color: var(--ntp-text-muted);
 }
+
 .company {
     grid-area: company;
     display: flex;
@@ -156,13 +157,14 @@
     height: 1rem;
     border-radius: 50%;
     flex-shrink: 0;
+
     img, svg {
         display: block;
         font-size: 0;
         width: 1rem;
         height: 1rem;
-
     }
+
     &:has([data-errored=true]) {
         outline: 1px solid var(--ntp-surface-border-color);
         @media screen and (prefers-color-scheme: dark) {