[NTP 💅] Resolve theming around shared Button/Components (#1340)

* chore: Fix Release notes

* chore: Fix css a bit

* chore: update button

* chore: Update special-error

* chore: Update PIR and RMF backgrounds

* fix: dark mode

* fix: Lint n what not

* chore: Add borders to RMF and PIR

Author: vkraucunas

special-pages/pages/new-tab/app/freemium-pir-banner/components/FreemiumPIRBanner.module.css

@@ -1,6 +1,7 @@
 .root {
-    --ntp-freemiumPIR-surface-background-color: rgba(0, 0, 0, .06);
-    background: var(--ntp-freemiumPIR-surface-background-color);
+    background-color: var(--ntp-surface-background-color);
+    backdrop-filter: blur(48px);
+    border: 1px solid var(--ntp-surface-border-color);
     padding: calc(14 * var(--px-in-rem)) var(--sp-8) calc(14 * var(--px-in-rem)) var(--sp-4);
     border-radius: var(--border-radius-lg);
     position: relative;
@@ -16,10 +17,6 @@
     &.icon {
         padding-left: var(--sp-2);
     }
-
-    [data-theme="dark"] & {
-        background-color: var(--color-white-at-6);
-    }
 }
 
 .iconBlock {
@@ -66,12 +63,13 @@
 
 
 @keyframes animate-fade {
-    0% { 
-        opacity: 0; 
-        scale: 0.98; 
+    0% {
+        opacity: 0;
+        scale: 0.98;
     }
-    100% { 
-        opacity: 1; 
+
+    100% {
+        opacity: 1;
         scale: 1;
     }
-}
+}

special-pages/pages/new-tab/app/next-steps/components/NextSteps.module.css

@@ -1,5 +1,6 @@
 .card {
     background-color: var(--ntp-surface-background-color);
+    backdrop-filter: blur(48px);
     border: 1px solid var(--ntp-surface-border-color);
     padding: var(--sp-2) var(--sp-4);
     border-radius: var(--border-radius-lg);
@@ -9,7 +10,6 @@
     justify-content: flex-start;
     align-items: center;
     text-align: center;
-    backdrop-filter: blur(48px);
     max-width: calc(240 * var(--px-in-rem));
     min-height: calc(166 * var(--px-in-rem));
     font-size: var(--body-font-size);
@@ -48,7 +48,8 @@
     font-size: calc(11 * var(--px-in-rem));
     line-height: calc(14 * var(--px-in-rem));
     color: var(--ntp-color-primary);
-    text-wrap: wrap; /* needed for some languages */
+    /* needed for some languages */
+    text-wrap: wrap;
 
     /* the active state created an awkward flash, adding transition out */
     &.supressActiveStateForSwitchToConfirmationText {
@@ -91,6 +92,7 @@
                 background-color: var(--color-black-at-9);
             }
         }
+
         &:hover:not(:active) {
             background-color: var(--color-black-at-9);
         }
@@ -188,6 +190,7 @@
 
 .cardGroup {
     transition: opacity .2s;
+
     &:hover {
         .showhide [aria-controls] {
             opacity: 1;

special-pages/pages/new-tab/app/remote-messaging-framework/components/RemoteMessagingFramework.module.css

@@ -1,6 +1,7 @@
 .root {
-    --ntp-rmf-surface-background-color: rgba(0, 0, 0, .06);
-    background: var(--ntp-rmf-surface-background-color);
+    background-color: var(--ntp-surface-background-color);
+    backdrop-filter: blur(48px);
+    border: 1px solid var(--ntp-surface-border-color);
     padding: calc(14 * var(--px-in-rem)) var(--sp-8) calc(14 * var(--px-in-rem)) var(--sp-4);
     border-radius: var(--border-radius-lg);
     position: relative;
@@ -17,10 +18,6 @@
     &.icon {
         padding-left: var(--sp-2);
     }
-
-    [data-theme=dark] & {
-        background-color: var(--color-white-at-6);
-    }
 }
 
 .iconBlock {
@@ -69,8 +66,9 @@
         opacity: 0;
         scale: 0.98;
     }
+
     100% {
         opacity: 1;
         scale: 1;
     }
-  }
+}

special-pages/pages/release-notes/app/Components.js

@@ -1,25 +1,26 @@
 import { h } from 'preact';
+import { useEffect, useState } from 'preact/hooks';
+import { Button } from '../../../shared/components/Button/Button';
+import { Card } from '../../../shared/components/Card/Card';
 import { DuckDuckGoLogo } from '../../../shared/components/DuckDuckGoLogo/DuckDuckGoLogo';
+import { useEnv } from '../../../shared/components/EnvironmentProvider';
+import { useTypedTranslation } from '../app/types';
+import styles from './Components.module.css';
+import { ContentPlaceholder } from './components/ContentPlaceholder';
 import {
     PageTitle,
-    UpdateStatus,
+    ReleaseNotes,
+    ReleaseNotesContent,
     ReleaseNotesHeading,
-    ReleaseNotesSubheading,
     ReleaseNotesList,
-    ReleaseNotesContent,
-    ReleaseNotes,
+    ReleaseNotesSubheading,
+    UpdateStatus,
 } from './components/ReleaseNotes';
-import { Button } from '../../../shared/components/Button/Button';
-import { Card } from '../../../shared/components/Card/Card';
-import { ContentPlaceholder } from './components/ContentPlaceholder';
-import { useTypedTranslation } from '../app/types';
-
-import styles from './Components.module.css';
 import { sampleData } from './sampleData.js';
-import { useEffect, useState } from 'preact/hooks';
 
 export function Components() {
     const { t } = useTypedTranslation();
+    const { isDarkMode } = useEnv();
     const todayInMilliseconds = Date.now();
     const yesterdayInMilliseconds = new Date(todayInMilliseconds - 24 * 60 * 60 * 1000).getTime();
 
@@ -46,7 +47,7 @@ export function Components() {
     ];
 
     return (
-        <main className={styles.main}>
+        <main className={styles.main} data-theme={isDarkMode ? 'dark' : 'light'}>
             <h1>Release Notes Components</h1>
 
             <h2>DuckDuckGo Logo</h2>

special-pages/pages/release-notes/app/Components.module.css

@@ -8,7 +8,7 @@
         border-bottom: 1px solid black;
         width: 100%;
 
-        @media (prefers-color-scheme: dark) {
+        [data-theme=dark] & {
             border-bottom: 1px solid white;
         }
     }

special-pages/pages/release-notes/app/components/App.js

@@ -1,12 +1,12 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
-import { useMessaging } from '../index';
+import { DuckDuckGoLogo } from '../../../../shared/components/DuckDuckGoLogo/DuckDuckGoLogo';
+import { useEnv } from '../../../../shared/components/EnvironmentProvider';
 import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary';
+import { useMessaging } from '../index';
+import styles from './App.module.css';
 import { ErrorFallback } from './ErrorFallback';
-import { useEnv } from '../../../../shared/components/EnvironmentProvider';
-import { DuckDuckGoLogo } from '../../../../shared/components/DuckDuckGoLogo/DuckDuckGoLogo';
 import { ReleaseNotes } from './ReleaseNotes';
-import styles from './App.module.css';
 
 /**
  * @typedef {import('../../types/release-notes.js').UpdateMessage} UpdateMessage
@@ -18,6 +18,7 @@ import styles from './App.module.css';
  */
 export function App({ children }) {
     const { messages } = useMessaging();
+    const { isDarkMode } = useEnv();
     /** @type {ReturnType<typeof useState<UpdateMessage>>} */
     const [releaseData, setReleaseData] = useState();
 
@@ -37,7 +38,7 @@ export function App({ children }) {
         messages?.reportPageException({ message });
     }
     return (
-        <main className={styles.main}>
+        <main className={styles.main} data-theme={isDarkMode ? 'dark' : 'light'}>
             <ErrorBoundary didCatch={didCatch} fallback={<ErrorFallback />}>
                 <header className={styles.header}>
                     <DuckDuckGoLogo />

special-pages/pages/release-notes/app/components/App.module.css

@@ -1,5 +1,6 @@
 :root {
-    --sp-145: calc(580 * var(--px-in-rem));; /* 580px */
+    --sp-145: calc(580 * var(--px-in-rem));
+    /* 580px */
 }
 
 body {

special-pages/pages/release-notes/app/components/ContentPlaceholder.module.css

@@ -1,9 +1,16 @@
 .contentPlaceholder {
+
     & h2,
     & p {
         background: var(--color-black-at-6);
 
-        @media (prefers-color-scheme: dark) {
+    }
+
+    [data-theme=dark] & {
+
+        & h2,
+        & p {
+
             background: var(--color-white-at-6);
         }
     }
@@ -43,11 +50,6 @@
             left: 0;
         }
 
-        @media (prefers-color-scheme: dark) {
-            &::before {
-                background: var(--color-white-at-6);
-            }
-        }
 
 
         p {
@@ -58,4 +60,11 @@
             }
         }
     }
-}
+
+    [data-theme=dark] & {
+        li::before {
+            background: var(--color-white-at-6);
+        }
+    }
+
+}

special-pages/pages/release-notes/app/components/ReleaseNotes.module.css

@@ -1,16 +1,17 @@
-/* Component-specific variables */
-:root {
+.article {
+    /* Component-specific variables */
     --bullet-color: rgba(57, 105, 239, 0.24);
-    --sp-4_5: calc(18 * var(--px-in-rem)); /* 18px */
-    --sp-2_5: calc(10 * var(--px-in-rem)); /* 10px */
-    --sp-1_5: calc(6 * var(--px-in-rem));  /* 6px */
-
-    @media (prefers-color-scheme: dark) {
+    /* 18px */
+    --sp-4_5: calc(18 * var(--px-in-rem));
+    /* 10px */
+    --sp-2_5: calc(10 * var(--px-in-rem));
+    /* 6px */
+    --sp-1_5: calc(6 * var(--px-in-rem));
+
+    [data-theme="dark"] & {
         --bullet-color: var(--color-blue-20);
     }
-}
 
-.article {
     margin: 0 auto;
     width: 100%;
     display: grid;
@@ -75,10 +76,11 @@
 
 @keyframes spinner {
     0% {
-      transform: rotate(0deg);
+        transform: rotate(0deg);
     }
+
     100% {
-      transform: rotate(360deg);
+        transform: rotate(360deg);
     }
 }
 

special-pages/pages/special-error/app/components/App.jsx

@@ -1,15 +1,14 @@
 import { h } from 'preact';
 import { useEffect, useState } from 'preact/hooks';
 import { useEnv } from '../../../../shared/components/EnvironmentProvider';
-import { useMessaging } from '../providers/MessagingProvider';
 import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary';
-import { ErrorFallback } from './ErrorFallback';
-import { useTypedTranslation } from '../types';
+import { useMessaging } from '../providers/MessagingProvider';
 import { useErrorData } from '../providers/SpecialErrorProvider';
-import { Warning } from './Warning';
+import { useTypedTranslation } from '../types';
 import { AdvancedInfo } from './AdvancedInfo';
-
 import styles from './App.module.css';
+import { ErrorFallback } from './ErrorFallback';
+import { Warning } from './Warning';
 
 export function SpecialErrorView() {
     const [advancedInfoVisible, setAdvancedInfoVisible] = useState(false);
@@ -50,6 +49,7 @@ function PageTitle() {
 
 export function App() {
     const { messaging } = useMessaging();
+    const { isDarkMode } = useEnv();
 
     /**
      * @param {Error} error
@@ -61,7 +61,7 @@ export function App() {
     }
 
     return (
-        <main className={styles.main}>
+        <main className={styles.main} data-theme={isDarkMode ? 'dark' : 'light'}>
             <PageTitle />
             <ErrorBoundary didCatch={didCatch} fallback={<ErrorFallback />}>
                 <SpecialErrorView />