separate values from utils

duckduckgo · Dec 16, 2024 · e884049 · e884049
1 parent 90e48d3
commit e884049
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 105 deletions.
diff --git a/special-pages/pages/new-tab/app/components/BackgroundProvider.js b/special-pages/pages/new-tab/app/components/BackgroundProvider.js
@@ -1,7 +1,9 @@
-import { h } from 'preact';
+import { Fragment, h } from 'preact';
 import styles from './BackgroundReceiver.module.css';
+import { values } from '../customizer/values.js';
 import { useContext } from 'preact/hooks';
 import { CustomizerContext } from '../customizer/CustomizerProvider.js';
+import { detectThemeFromHex } from '../customizer/utils.js';
 
 /**
  * @import { BackgroundVariant, BrowserTheme } from "../../types/new-tab"
@@ -18,12 +20,22 @@ export function inferSchemeFrom(background, browserTheme, system) {
     switch (background.kind) {
         case 'default':
             return { bg: browser, browser };
-        case 'gradient':
+        case 'color': {
+            const color = values.colors[background.value];
+            return { bg: color.colorScheme, browser };
+        }
+
+        case 'gradient': {
+            const gradient = values.gradients[background.value];
+            return { bg: gradient.colorScheme, browser };
+        }
+
         case 'userImage':
+            return { bg: background.value.colorScheme, browser };
+
         case 'hex':
-            console.log('not supported yet!');
+            return { bg: detectThemeFromHex(background.value), browser };
     }
-    return { bg: browser, browser };
 }
 
 /**
@@ -40,23 +52,90 @@ export function themeFromBrowser(browserTheme, system) {
 
 /**
  * @param {object} props
+ * @param {import("@preact/signals").Signal<'light' | 'dark'>} props.bg
  * @param {import("@preact/signals").Signal<'light' | 'dark'>} props.browser
  */
-export function BackgroundConsumer({ browser }) {
+export function BackgroundConsumer({ bg, browser }) {
     const { data } = useContext(CustomizerContext);
     const background = data.value.background;
 
     switch (background.kind) {
         case 'default': {
             return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
         }
-        case 'hex':
-        case 'color':
-        case 'gradient':
-        case 'userImage':
+        case 'hex': {
+            return (
+                <div
+                    class={styles.root}
+                    data-animate="true"
+                    data-testid="BackgroundConsumer"
+                    style={{
+                        backgroundColor: background.value,
+                    }}
+                ></div>
+            );
+        }
+        case 'color': {
+            const color = values.colors[background.value];
+            return (
+                <div
+                    class={styles.root}
+                    data-animate="true"
+                    data-background-color={color.hex}
+                    data-testid="BackgroundConsumer"
+                    style={{
+                        backgroundColor: color.hex,
+                    }}
+                ></div>
+            );
+        }
+        case 'gradient': {
+            const gradient = values.gradients[background.value];
+            return (
+                <Fragment key="gradient">
+                    <div
+                        class={styles.root}
+                        data-animate="false"
+                        data-testid="BackgroundConsumer"
+                        style={{
+                            backgroundColor: gradient.fallback,
+                            backgroundImage: `url(${gradient.path})`,
+                            backgroundSize: 'cover',
+                            backgroundRepeat: 'no-repeat',
+                        }}
+                    />
+                    <div
+                        class={styles.root}
+                        data-animate="false"
+                        style={{
+                            backgroundImage: `url(gradients/grain.png)`,
+                            backgroundRepeat: 'repeat',
+                            opacity: 0.5,
+                            mixBlendMode: 'soft-light',
+                        }}
+                    ></div>
+                </Fragment>
+            );
+        }
+        case 'userImage': {
+            const img = background.value;
+            return (
+                <div
+                    class={styles.root}
+                    data-animate="true"
+                    data-testid="BackgroundConsumer"
+                    style={{
+                        backgroundImage: `url(${img.src})`,
+                        backgroundSize: 'cover',
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'center center',
+                    }}
+                ></div>
+            );
+        }
         default: {
-            console.warn('not supported yet!');
-            return <div className={styles.root} data-testid="BackgroundConsumer" data-background-kind="default" data-theme={browser} />;
+            console.warn('Unreachable!');
+            return <div className={styles.root}></div>;
         }
     }
 }
diff --git a/special-pages/pages/new-tab/app/customizer/components/BackgroundSection.js b/special-pages/pages/new-tab/app/customizer/components/BackgroundSection.js
@@ -1,12 +1,13 @@
 import { h, Fragment } from 'preact';
 import cn from 'classnames';
 
-import { detectThemeFromHex, values } from '../values.js';
+import { values } from '../values.js';
 import styles from './CustomizerDrawerInner.module.css';
 import { CircleCheck, PlusIcon } from '../../components/Icons.js';
 import { useComputed } from '@preact/signals';
 import { useContext, useId } from 'preact/hooks';
 import { CustomizerThemesContext } from '../CustomizerProvider.js';
+import { detectThemeFromHex } from '../utils.js';
 
 /**
  * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData } from '../../../types/new-tab.js'

diff --git a/special-pages/pages/new-tab/app/customizer/components/ColorSelection.js b/special-pages/pages/new-tab/app/customizer/components/ColorSelection.js
@@ -1,10 +1,11 @@
 import { h, Fragment } from 'preact';
 import cn from 'classnames';
 
-import { detectThemeFromHex, values } from '../values.js';
+import { values } from '../values.js';
 import styles from './CustomizerDrawerInner.module.css';
 import { BackChevron, Picker } from '../../components/Icons.js';
 import { useComputed } from '@preact/signals';
+import { detectThemeFromHex } from '../utils.js';
 
 /**
  * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, PredefinedColor, BackgroundData } from '../../../types/new-tab.js'

diff --git a/special-pages/pages/new-tab/app/customizer/values.js b/special-pages/pages/new-tab/app/customizer/values.js
@@ -59,95 +59,3 @@ export const values = {
         },
     },
 };
-
-/**
- * Determines if a light or dark theme should be used based on background color
- * @param {string} backgroundColor - HEX color code (6 or 8 digits)
- * @returns {'light' | 'dark'} - Returns 'light' or 'dark'
- */
-export function detectThemeFromHex(backgroundColor) {
-    // Remove # if present and handle both 6 and 8 digit hex codes
-    const hex = backgroundColor.replace('#', '');
-
-    // Extract RGB values
-    const r = parseInt(hex.slice(0, 2), 16);
-    const g = parseInt(hex.slice(2, 4), 16);
-    const b = parseInt(hex.slice(4, 6), 16);
-
-    // Calculate relative luminance using sRGB coefficients
-    // Using the formula from WCAG 2.0
-    const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-
-    // Choose theme based on luminance
-    // 128 is the middle value (255/2)
-    return luminance < 128 ? 'dark' : 'light';
-}
-
-// Test cases using Node's built-in assert
-// const testCases = [
-//     {
-//         input: '#FFFFFF',
-//         expected: 'light',
-//         description: 'Pure white should be light theme',
-//     },
-//     {
-//         input: '#000000',
-//         expected: 'dark',
-//         description: 'Pure black should be dark theme',
-//     },
-//     {
-//         input: '7B7B7B',
-//         expected: 'dark',
-//         description: 'Medium gray should be dark theme',
-//     },
-//     {
-//         input: 'FFFFFF00',
-//         expected: 'light',
-//         description: 'White with alpha should be light theme',
-//     },
-//     {
-//         input: '#1E90FF',
-//         expected: 'dark',
-//         description: 'Dodger blue should be dark theme',
-//     },
-//     {
-//         input: '#FFD700',
-//         expected: 'light',
-//         description: 'Gold should be light theme',
-//     },
-//     {
-//         input: '#98FB98',
-//         expected: 'light',
-//         description: 'Pale green should be light theme',
-//     },
-//     {
-//         input: '#800080',
-//         expected: 'dark',
-//         description: 'Purple should be dark theme',
-//     },
-//     {
-//         input: '#FFA07A',
-//         expected: 'light',
-//         description: 'Light salmon should be light theme',
-//     },
-//     {
-//         input: '#2F4F4F',
-//         expected: 'dark',
-//         description: 'Dark slate gray should be dark theme',
-//     },
-// ];
-
-// Run tests
-// console.log('Running tests...\n');
-// testCases.forEach((testCase, index) => {
-//     try {
-//         const result = detectThemeFromHex(testCase.input);
-//         assert.strictEqual(result, testCase.expected);
-//         console.log(`✓ Test ${index + 1}: ${testCase.description}`);
-//     } catch (error) {
-//         console.error(`✗ Test ${index + 1}: ${testCase.description}`);
-//         console.error(`  Expected: ${testCase.expected}`);
-//         // console.error(`  Received: ${result}`);
-//         console.error(`  Input: ${testCase.input}\n`);
-//     }
-// });