Add P3 for theme.

evilmartians · Oct 18, 2023 · fd849e7 · fd849e7
1 parent 9e514d0
commit fd849e7
Show file tree

Hide file tree

Showing 17 changed files with 190 additions and 134 deletions.
diff --git a/src/ui/components/AppContent.tsx b/src/ui/components/AppContent.tsx
@@ -36,7 +36,7 @@ export const AppContent = (): ReactElement => {
     const pair = contrastConclusion[0];
 
     if (isEmpty(pair)) {
-      return <div />;
+      return <EmptySelectionMessage />;
     }
 
     return <Selection id={pair.id} isLast size="large" userSelection={pair} />;

diff --git a/src/ui/components/BasicColorPreviewIcon.tsx b/src/ui/components/BasicColorPreviewIcon.tsx
@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 
 interface Props {
-  borderColor?: string;
+  borderColor: string;
   indicatorColor: string;
 }
 
@@ -18,7 +18,7 @@ export const BasicColorPreviewIcon = ({
       <path
         clipRule="evenodd"
         d="M12 .5H4C2.067.5.5 2.067.5 4v8c0 1.933 1.567 3.5 3.5 3.5h8c1.933 0 3.5-1.567 3.5-3.5V4c0-1.933-1.567-3.5-3.5-3.5ZM4 0C1.79086 0 0 1.79086 0 4v8c0 2.2091 1.79086 4 4 4h8c2.2091 0 4-1.7909 4-4V4c0-2.20914-1.7909-4-4-4H4Z"
-        fill={borderColor}
+        fill={`var(${borderColor})`}
         fillRule="evenodd"
       />
     </svg>

diff --git a/src/ui/components/ColorIndicator.tsx b/src/ui/components/ColorIndicator.tsx
@@ -1,5 +1,6 @@
 import { useStore } from '@nanostores/react';
 import { ColorPreview } from '~ui/components/ColorPreview.tsx';
+import { ThemeVariablesKeys } from '~ui/components/ThemeVariablesProvider.tsx';
 import {
   getFormatterForCSS,
   getFormatterForDisplaying,
@@ -12,18 +13,16 @@ import { $colorSpaceDisplayMode } from '../stores/color-space-display-mode.ts';
 import { Tooltip, TooltipContent, TooltipTrigger } from './Tooltip.tsx';
 
 interface ColorIndicatorProps {
-  borderColor?: string;
+  borderColor: string;
   fill: { hex: string; oklch: Oklch };
-  hoverBgColor: string;
   indicatorColor: string;
-  isBlended?: boolean;
+  isBlended: boolean;
   textColor: string;
 }
 
 export const ColorIndicator = ({
   borderColor,
   fill,
-  hoverBgColor,
   indicatorColor,
   isBlended,
   textColor,
@@ -49,9 +48,9 @@ export const ColorIndicator = ({
           style={{
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-expect-error
-            '--indicators-active': `${hoverBgColor}3D`,
-            '--indicators-hover': `${hoverBgColor}28`,
-            color: textColor,
+            '--indicators-active': `var(${ThemeVariablesKeys.secondary24})`,
+            '--indicators-hover': `var(${ThemeVariablesKeys.secondary16})`,
+            color: indicatorColor,
           }}
           className="interactive"
           onClick={setCopied}
@@ -65,7 +64,7 @@ export const ColorIndicator = ({
                 isBlended={isBlended}
               />
             </div>
-            <span style={{ color: textColor }}>{displayValue}</span>
+            <span style={{ color: `var(${textColor})` }}>{displayValue}</span>
           </div>
         </button>
       </TooltipTrigger>

diff --git a/src/ui/components/ColorPreview.tsx b/src/ui/components/ColorPreview.tsx
@@ -3,17 +3,17 @@ import { LayeredColorPreviewIcon } from '~ui/components/LayeredColorPreviewIcon.
 import { type ReactElement } from 'react';
 
 interface Props {
-  borderColor?: string;
+  borderColor: string;
   indicatorColor: string;
-  isBlended?: boolean;
+  isBlended: boolean;
 }
 
 export const ColorPreview = ({
   borderColor,
   indicatorColor,
   isBlended,
 }: Props): ReactElement => {
-  if (isBlended === true) {
+  if (isBlended) {
     return (
       <div className="flex">
         <LayeredColorPreviewIcon

diff --git a/src/ui/components/ContrastSample.tsx b/src/ui/components/ContrastSample.tsx
@@ -1,10 +1,9 @@
-import { notEmpty } from '~utils/not-empty.ts';
+import { ThemeVariablesKeys } from '~ui/components/ThemeVariablesProvider.tsx';
 import clsx from 'clsx';
 import { type ReactElement } from 'react';
 
 interface Props {
   bgColor: string;
-  borderColor?: string;
   color: string;
   opacity?: number;
   size: 'large' | 'small';
@@ -14,7 +13,6 @@ const exampleText = 'Aa';
 
 export const ContrastSample = ({
   bgColor,
-  borderColor,
   color,
   opacity,
   size,
@@ -23,12 +21,11 @@ export const ContrastSample = ({
     <p
       className={clsx(
         size === 'small' ? 'h-9 w-9 text-xxs' : 'h-13 w-13 text-base',
-        'flex items-center justify-center rounded-lg text-base',
-        notEmpty(borderColor) ? 'border-0.5' : null
+        'flex items-center justify-center rounded-lg border-0.5 text-base'
       )}
       style={{
         backgroundColor: bgColor,
-        borderColor,
+        borderColor: `var(${ThemeVariablesKeys.borderOriginal})`,
         color,
       }}
     >

diff --git a/src/ui/components/LayeredColorPreviewIcon.tsx b/src/ui/components/LayeredColorPreviewIcon.tsx
@@ -1,7 +1,7 @@
 import { type ReactElement } from 'react';
 
 interface Props {
-  borderColor?: string;
+  borderColor: string;
   indicatorColor: string;
 }
 
@@ -24,16 +24,16 @@ export const LayeredColorPreviewIcon = ({
         <path
           clipRule="evenodd"
           d="M.976086 7.21913 8.75061.999511c.73044-.584349 1.76839-.58435 2.49879 0l7.7745 6.219619c.5004.40033.5004 1.16141 0 1.56174l-7.7745 6.21963c-.7304.5843-1.76835.5843-2.49879 0L.976086 8.78087c-.500406-.40033-.500407-1.16141 0-1.56174ZM9.06296 1.38995 1.28843 7.60956c-.2502.20017-.2502.58071 0 .78087l7.77453 6.21967c.54783.4382 1.32624.4382 1.87404 0l7.7746-6.21967c.2502-.20016.2502-.5807 0-.78087L10.937 1.38995c-.5478-.438267-1.32621-.438267-1.87404 0Z"
-          fill={borderColor}
+          fill={`var(${borderColor})`}
           fillRule="evenodd"
         />
         <path
           d="M.939285 9.24999c-.463302.4075-.451038 1.14061.036789 1.53091L8.7506 17.0005c.73044.5843 1.7683.5843 2.4988 0l7.7745-6.2196c.4878-.3903.5001-1.12339.0368-1.53089-.0119.0105-.0242.02079-.0368.03085l-.3616.2893.0493.0394c.2502.20017.2502.58074 0 .78084l-7.7746 6.2197c-.5478.4382-1.32623.4382-1.87405 0l-7.77453-6.2197c-.2502-.2001-.2502-.58067 0-.78084l.04927-.03941-.361604-.28929C.963503 9.2708.951236 9.2605.939285 9.24999Z"
-          fill={borderColor}
+          fill={`var(${borderColor})`}
         />
         <path
           d="M.976074 12.7809C.488247 12.3906.475983 11.6575.939285 11.25c.011951.0105.024218.0208.036801.0309l.361604.2892-.04927.0395c-.2502.2001-.2502.5807 0 .7808l7.77453 6.2197c.54782.4382 1.32625.4382 1.87405 0l7.7746-6.2197c.2502-.2001.2502-.5807 0-.7808l-.0493-.0394.3616-.2893c.0126-.0101.0249-.0204.0368-.0309.4633.4075.451 1.1406-.0368 1.5309l-7.7745 6.2196c-.7305.5843-1.76836.5843-2.4988 0L.976074 12.7809Z"
-          fill={borderColor}
+          fill={`var(${borderColor})`}
         />
       </svg>
     </div>

diff --git a/src/ui/components/PictureIcon.tsx b/src/ui/components/PictureIcon.tsx
@@ -1,16 +1,13 @@
+import { ThemeVariablesKeys } from '~ui/components/ThemeVariablesProvider.tsx';
 import { type ReactElement } from 'react';
 
-interface Props {
-  color?: string;
-}
-
-export const PictureIcon = ({ color }: Props): ReactElement => {
+export const PictureIcon = (): ReactElement => {
   return (
     <svg fill="none" height="17" width="14" xmlns="http://www.w3.org/2000/svg">
       <path
         clipRule="evenodd"
         d="M12 1H2c-.55228 0-1 .44772-1 1v6.29289l3.14645-3.14644L4.5 4.79289l.35355.35356 7.69185 7.69185C12.8191 12.6599 13 12.3511 13 12V2c0-.55228-.4477-1-1-1ZM1 12V9.70711l3.5-3.5L11.2929 13H2c-.55228 0-1-.4477-1-1ZM2 0C.895431 0 0 .89543 0 2v10c0 1.1046.89543 2 2 2h10c1.1046 0 2-.8954 2-2V2c0-1.104569-.8954-2-2-2H2Zm9 4.5c0 .82843-.6716 1.5-1.5 1.5C8.67157 6 8 5.32843 8 4.5S8.67157 3 9.5 3c.8284 0 1.5.67157 1.5 1.5Zm1 0C12 5.88071 10.8807 7 9.5 7 8.11929 7 7 5.88071 7 4.5S8.11929 2 9.5 2C10.8807 2 12 3.11929 12 4.5Z"
-        fill={color}
+        fill={`var(${ThemeVariablesKeys.fg})`}
         fillRule="evenodd"
       />
     </svg>

diff --git a/src/ui/components/ProgressBar.tsx b/src/ui/components/ProgressBar.tsx
@@ -2,6 +2,7 @@ import { useStore } from '@nanostores/react';
 import { RewardingAnimationBodyText } from '~ui/components/RewardingAnimationBodyText.tsx';
 import { RewardingAnimationContentText } from '~ui/components/RewardingAnimationContentText.tsx';
 import { RewardingAnimationFluentText } from '~ui/components/RewardingAnimationFluentText.tsx';
+import { ThemeVariablesKeys } from '~ui/components/ThemeVariablesProvider.tsx';
 import { conclusions } from '~ui/services/apca/conclusion.ts';
 import { $rewardAnimationLaunch } from '~ui/stores/selected-nodes.ts';
 import { isEmpty } from '~utils/not-empty.ts';
@@ -10,24 +11,15 @@ import { type ReactElement } from 'react';
 
 interface Props {
   apca: number;
-  bgColor: string;
   height: number;
-  primaryColor: string;
-  secondaryColor: string;
 }
 
 const SCALE = 2;
 const APCA_NEGATIVE_MAX_SCALE = 108;
 const APCA_POSITIVE_MAX_SCALE = 106;
 const SERIF_OFFSET = 2;
 
-export const ProgressBar = ({
-  apca,
-  bgColor,
-  height,
-  primaryColor,
-  secondaryColor,
-}: Props): ReactElement => {
+export const ProgressBar = ({ apca, height }: Props): ReactElement => {
   const rewardAnimationLaunch = useStore($rewardAnimationLaunch);
   const maxScale = apca > 0 ? APCA_POSITIVE_MAX_SCALE : APCA_NEGATIVE_MAX_SCALE;
   const barWidth = maxScale * SCALE;
@@ -39,7 +31,7 @@ export const ProgressBar = ({
       <div className="flex items-center">
         <span
           style={{
-            color: secondaryColor,
+            color: `var(${ThemeVariablesKeys.secondary})`,
           }}
           className="mr-2 text-xxs"
         >
@@ -48,32 +40,21 @@ export const ProgressBar = ({
 
         <div
           style={{
-            backgroundColor: `${secondaryColor}1F`,
+            backgroundColor: `var(${ThemeVariablesKeys.secondary12})`,
             height: `${height}px`,
             width: barWidth,
           }}
           className="relative rounded-full"
         >
           <div
             style={{
-              backgroundImage: `linear-gradient(to right, ${primaryColor}B2 70%, ${primaryColor} 85%)`,
+              backgroundImage: `linear-gradient(to right, var(${ThemeVariablesKeys.fg70}) 70%, var(${ThemeVariablesKeys.fg}) 85%)`,
               height: `${height}px`,
               width: filledSegmentWidth,
             }}
             className="rounded-full"
           />
 
-          {/* {notEmpty(initialSingleSelectionAPCA) && ( */}
-          {/*  <div */}
-          {/*    style={{ */}
-          {/*      left: filledSegmentWidth, */}
-          {/*    }} */}
-          {/*    className="absolute -translate-x-0.5 -translate-y-1" */}
-          {/*  > */}
-          {/*    <RewardingAnimation apca={Math.abs(apca)} /> */}
-          {/*  </div> */}
-          {/* )} */}
-
           <div>
             {Array.from({ length: conclusionScores.length }).map((_, i) => {
               const value = conclusionScores[i];
@@ -94,8 +75,8 @@ export const ProgressBar = ({
                   style={{
                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                     // @ts-expect-error
-                    '--color-sparkles': primaryColor,
-                    backgroundColor: bgColor,
+                    '--color-sparkles': `var(${ThemeVariablesKeys.fg})`,
+                    backgroundColor: `var(${ThemeVariablesKeys.bg})`,
                     left: position,
                   }}
                   key={i}
@@ -121,7 +102,7 @@ export const ProgressBar = ({
 
         <span
           style={{
-            color: secondaryColor,
+            color: `var(${ThemeVariablesKeys.secondary})`,
           }}
           className="ml-2 text-xxs"
         >

diff --git a/src/ui/components/SegmentedFontStyleDefinition.tsx b/src/ui/components/SegmentedFontStyleDefinition.tsx
@@ -1,10 +1,12 @@
+import { type UIColor } from '~types/common.ts';
+import { formatColorForTheme } from '~ui/components/ThemeVariablesProvider.tsx';
 import { type ReactElement } from 'react';
 
 interface Props {
   currentStyleNumber: number;
   id: string;
-  primaryColor: string;
-  secondaryColor: string;
+  primaryColor: UIColor;
+  secondaryColor: UIColor;
 }
 
 export const SegmentedFontStyleDefinition = ({
@@ -21,12 +23,15 @@ export const SegmentedFontStyleDefinition = ({
     }
   );
 
+  const primaryFormatted = formatColorForTheme(primaryColor);
+  const secondaryFormatted = formatColorForTheme(secondaryColor, 0.12);
+
   return (
     <style>
       {`
         @font-palette-values --segmented-${id} {
           font-family: Segmented;
-          override-colors: 0 ${primaryColor}, 1 ${secondaryColor}1F;
+          override-colors: 0 ${primaryFormatted}, 1 ${secondaryFormatted};
         }
 
         .segmented-${id} {

diff --git a/src/ui/components/Selection.tsx b/src/ui/components/Selection.tsx
@@ -1,3 +1,7 @@
+import {
+  ThemeVariablesKeys,
+  ThemeVariablesProvider,
+} from '~ui/components/ThemeVariablesProvider.tsx';
 import { type ContrastConclusion } from '~ui/services/colors/render-and-blend-colors.ts';
 import { isEmpty } from '~utils/not-empty.ts';
 import clsx from 'clsx';
@@ -58,32 +62,35 @@ export const Selection = ({
   }
 
   return (
-    <div
-      className={clsx(
-        'w-full rounded-2.5xl',
-        size === 'small' && isLast === false && 'px-5 pb-8 pt-2',
-        size === 'small' && isLast === true && 'px-5 py-3',
-        size === 'large' && 'p-5'
-      )}
-      style={{ backgroundColor: uiColors.theme.bg.hex }}
-    >
-      <SegmentedFontStyleDefinition
-        currentStyleNumber={currentStyleNumber}
-        id={id}
-        primaryColor={uiColors.theme.fg.hex}
-        secondaryColor={uiColors.theme.secondary.hex}
-      />
+    <ThemeVariablesProvider theme={uiColors.theme}>
+      <div
+        className={clsx(
+          'w-full rounded-2.5xl',
+          size === 'small' && isLast === false && 'px-5 pb-8 pt-2',
+          size === 'small' && isLast === true && 'px-5 py-3',
+          size === 'large' && 'p-5'
+        )}
+        style={{
+          backgroundColor: `var(${ThemeVariablesKeys.bg})`,
+        }}
+      >
+        <SegmentedFontStyleDefinition
+          currentStyleNumber={currentStyleNumber}
+          id={id}
+          primaryColor={uiColors.theme.fg}
+          secondaryColor={uiColors.theme.secondary}
+        />
 
-      <SelectionContent
-        apca={apca}
-        bg={bg}
-        fg={fg}
-        id={id}
-        isLast={isLast}
-        onApcaDoubleClick={handleCurrentStyleNumberChange}
-        size={size}
-        uiColors={uiColors}
-      />
-    </div>
+        <SelectionContent
+          apca={apca}
+          bg={bg}
+          fg={fg}
+          id={id}
+          isLast={isLast}
+          onApcaDoubleClick={handleCurrentStyleNumberChange}
+          size={size}
+        />
+      </div>
+    </ThemeVariablesProvider>
   );
 };