Merge branch 'main' into jd/yt-events

Author: jdorweiler

special-pages/pages/onboarding/app/v3/components/DockInstructions.js

@@ -15,7 +15,7 @@ export function DockInstructions() {
         <div className={styles.root}>
             <video
                 className={styles.video}
-                src="assets/video/dock-instructions/add-to-dock.mp4"
+                src="assets/videos/add-to-dock.mp4"
                 autoPlay={!isReducedMotion}
                 loop
                 muted

special-pages/pages/onboarding/app/v4/App.js

@@ -1,7 +1,6 @@
 import { h } from 'preact';
-import { useContext } from 'preact/hooks';
 import styles from './App.module.css';
-import { GlobalContext, GlobalDispatch } from '../global';
+import { useGlobalDispatch, useGlobalState } from '../global';
 import { useEnv } from '../../../../shared/components/EnvironmentProvider';
 import { usePlatformName } from '../shared/components/SettingsProvider';
 import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary';
@@ -14,10 +13,10 @@ import { SingleStep } from './components/SingleStep';
  * @param {import("preact").ComponentChild} props.children
  */
 export function App({ children }) {
-    const { debugState } = useEnv();
+    const { debugState, isDarkMode } = useEnv();
     const platformName = usePlatformName();
-    const globalState = useContext(GlobalContext);
-    const dispatch = useContext(GlobalDispatch);
+    const globalState = useGlobalState();
+    const dispatch = useGlobalDispatch();
 
     const { activeStep, exiting } = globalState;
 
@@ -27,7 +26,7 @@ export function App({ children }) {
     };
 
     return (
-        <main data-platform-name={platformName || 'macos'} data-app-version="v4">
+        <main class={isDarkMode ? 'theme-dark' : 'theme-light'} data-platform-name={platformName || 'macos'} data-app-version="v4">
             <Background />
             {debugState && <Debug state={globalState} />}
             <div class={styles.container} data-current={activeStep} data-exiting={String(exiting)}>
@@ -40,6 +39,10 @@ export function App({ children }) {
     );
 }
 
+/**
+ * @param {object} props
+ * @param {import('../types').GlobalState} props.state
+ */
 function Debug(props) {
     const { order, step, exiting, activeStep, nextStep } = props.state;
     const debugData = { order, step, exiting, activeStep, nextStep };

special-pages/pages/onboarding/app/v4/App.module.css

@@ -1,19 +1,15 @@
 @import url('./fonts.css');
+@import url('@duckduckgo/design-tokens/build/desktop-browsers/onboarding.css');
 
 :root {
     --font-display: 'DuckSansDisplay', system-ui, sans-serif;
     --font-product: 'DuckSansProduct', system-ui, sans-serif;
 }
 
 .container {
-    --bubble-bg: white;
-    --bubble-border: #CBEAFF;
+    --bubble-bg: var(--ds-surface-tertiary);
+    --bubble-border: var(--ds-accent-alt-primary);
 
     display: flow-root;
     position: relative;
-
-    @media (prefers-color-scheme: dark) {
-        --bubble-bg: #011D34;
-        --bubble-border: #133E7C;
-    }
 }

special-pages/pages/onboarding/app/v4/components/AddressBarContent.js

@@ -1,64 +1,57 @@
 import { h } from 'preact';
-import { useState, useContext, useEffect } from 'preact/hooks';
+import { useState } from 'preact/hooks';
 import { useTypedTranslation } from '../../types';
 import { Trans } from '../../../../../shared/components/TranslationsProvider';
-import { GlobalDispatch, useGlobalState } from '../../global';
+import { useGlobalState } from '../../global';
 import { useEnv } from '../../../../../shared/components/EnvironmentProvider';
 import { ToggleButton } from '../../shared/components/ToggleButton';
 import { AddressBarPreview } from './AddressBarPreview';
 import { Button } from './Button';
+import { Container } from './Container';
 import { Launch } from '../../shared/components/Icons';
 import styles from './AddressBarContent.module.css';
 
+/** @typedef {'search-and-duckai' | 'search-only'} AddressBarOption */
+
 /**
  * Bottom bubble content for the addressBarMode step.
  * Shows the address bar preview animation, radio toggle buttons for search mode,
  * a footer note about AI features, and the Start Browsing button.
+ *
+ * @param {object} props
+ * @param {() => void} props.dismiss
+ * @param {(id: import('../../types').SystemValueId, payload: import('../../types').SystemValue, current: boolean) => void} props.updateSystemValue
  */
-export function AddressBarContent() {
+export function AddressBarContent({ dismiss, updateSystemValue }) {
     const { t } = useTypedTranslation();
     const { isDarkMode } = useEnv();
-    const dispatch = useContext(GlobalDispatch);
     const { status } = useGlobalState();
-    const [selectedOption, setSelectedOption] = useState('search-and-duckai');
-    const isPending = status.kind === 'executing';
-
-    const dispatchPreference = (option) => {
-        dispatch({
-            kind: 'update-system-value',
-            id: 'address-bar-mode',
-            payload: { enabled: option === 'search-and-duckai' },
-            current: true,
-        });
-    };
 
-    useEffect(() => {
-        dispatchPreference(selectedOption);
-    }, []);
+    const [selectedOption, setSelectedOption] = useState(/** @type {AddressBarOption} */ ('search-and-duckai'));
+    const isPending = status.kind === 'executing';
 
-    const handleSelection = (option) => {
+    /** @param {AddressBarOption} option */
+    const select = (option) => {
         if (option === selectedOption || isPending) return;
         setSelectedOption(option);
-        dispatchPreference(option);
+        updateSystemValue('address-bar-mode', { enabled: option === 'search-and-duckai' }, true);
     };
 
-    const dismiss = () => dispatch({ kind: 'dismiss' });
-
     return (
-        <div class={styles.root}>
+        <Container class={styles.root}>
             <div class={styles.previewContainer}>
                 <AddressBarPreview isReduced={selectedOption === 'search-only'} isDarkMode={isDarkMode} />
             </div>
             <div class={styles.toggleButtons}>
                 <ToggleButton
                     label={t('addressBarMode_searchAndDuckAi')}
                     selected={selectedOption === 'search-and-duckai'}
-                    onClick={() => handleSelection('search-and-duckai')}
+                    onClick={() => select('search-and-duckai')}
                 />
                 <ToggleButton
                     label={t('addressBarMode_searchOnly')}
                     selected={selectedOption === 'search-only'}
-                    onClick={() => handleSelection('search-only')}
+                    onClick={() => select('search-only')}
                 />
             </div>
             <div class={styles.footer}>
@@ -70,6 +63,6 @@ export function AddressBarContent() {
             <Button variant="primary" size="wide" class={styles.startButton} onClick={dismiss}>
                 {t('startBrowsing')} <Launch />
             </Button>
-        </div>
+        </Container>
     );
 }

special-pages/pages/onboarding/app/v4/components/AddressBarContent.module.css

@@ -1,9 +1,5 @@
 .root {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    align-self: stretch;
-    padding: var(--sp-12); /* 48px */
+    gap: 0;
 }
 
 .previewContainer {
@@ -22,46 +18,42 @@
     line-height: calc(18 * var(--px-in-rem));
 
     /* Override ToggleButton theme to match Figma — light */
-    --toggle-accent-light: #4397E0;
-    --toggle-accent-text-light: #1074CC;
-    --toggle-accent-bg-light: rgba(161, 207, 247, 0.08);
-    --toggle-border-light: rgba(0, 0, 0, 0.20);
-    --toggle-color-light: rgba(36, 35, 35, 0.96);
-    --toggle-radio-light: #4397E0;
+    --toggle-accent-light: var(--ds-accent-primary);
+    --toggle-accent-text-light: var(--ds-accent-primary-text-color);
+    --toggle-accent-bg-light: var(--ds-accent-alt-glow-secondary);
+    --toggle-border-light: var(--ds-control-primary-border-color);
+    --toggle-color-light: var(--ds-text-primary);
+    --toggle-radio-light: var(--ds-accent-primary);
 
     /* Override ToggleButton theme to match Figma — dark */
-    --toggle-accent-dark: #75B6EB;
-    --toggle-accent-text-dark: #75B6EB;
-    --toggle-accent-bg-dark: rgba(161, 207, 247, 0.08);
-    --toggle-bg-dark: #011D34;
-    --toggle-border-dark: rgba(255, 255, 255, 0.36);
-    --toggle-color-dark: white;
-    --toggle-radio-dark: #75B6EB;
-    --toggle-radio-check-dark: #222222;
+    --toggle-accent-dark: var(--ds-accent-primary);
+    --toggle-accent-text-dark: var(--ds-accent-primary);
+    --toggle-accent-bg-dark: var(--ds-accent-alt-glow-secondary);
+    --toggle-bg-dark: var(--ds-surface-tertiary);
+    --toggle-border-dark: var(--ds-control-primary-border-color);
+    --toggle-color-dark: var(--ds-text-primary);
+    --toggle-radio-dark: var(--ds-accent-primary);
+    --toggle-radio-check-dark: var(--ds-accent-primary-content-color);
 }
 
 .footer {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--sp-2); /* 8px */
     align-self: stretch;
     margin-top: calc(26 * var(--px-in-rem)); /* 26px */
 }
 
 .starIcon {
-    width: var(--sp-5); /* 20px */
-    height: var(--sp-5); /* 20px */
+    width: var(--sp-6); /* 24px */
+    height: var(--sp-6); /* 24px */
     flex-shrink: 0;
 }
 
 .footerText {
     font-size: calc(13 * var(--px-in-rem));
     line-height: calc(16 * var(--px-in-rem));
-    color: var(--color-black-at-84);
-
-    @media (prefers-color-scheme: dark) {
-        color: var(--color-white-at-84);
-    }
+    color: var(--ds-text-primary);
 }
 
 .footerText :where(b) {
@@ -71,4 +63,3 @@
 .startButton {
     margin-top: var(--sp-8); /* 32px */
 }
-