From fb6045c229494fd5fe72d01af0f1f5f486fffa46 Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Wed, 13 Jul 2022 15:18:13 +0300 Subject: [PATCH 1/7] add getColorByBrightness and remove getColorByLuminance --- src/Home.tsx | 4 ++-- src/animation/PitAnimator.ts | 4 ++-- src/components/BoardView.tsx | 4 ++-- src/components/Button.tsx | 4 ++-- src/components/InfoPanel.tsx | 6 +++--- src/util/ColorUtil.ts | 32 ++++++-------------------------- 6 files changed, 17 insertions(+), 37 deletions(-) diff --git a/src/Home.tsx b/src/Home.tsx index d80f116..b70ef3a 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -21,7 +21,7 @@ import { v4 } from "uuid"; import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu"; import "@szhsin/react-menu/dist/index.css"; import "@szhsin/react-menu/dist/transitions/slide.css"; -import { getColorByLuminance } from "./util/ColorUtil"; +import { getColorByBrightness } from "./util/ColorUtil"; import { Theme } from "./theme/Theme"; type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"; @@ -200,7 +200,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { } return <>; }; - const menuTextColor = getColorByLuminance( + const menuTextColor = getColorByBrightness( context.themeManager.theme.appBarBgColor, context.themeManager.theme.primary, context.themeManager.theme.primaryLight diff --git a/src/animation/PitAnimator.ts b/src/animation/PitAnimator.ts index d9c28fc..016f9c1 100644 --- a/src/animation/PitAnimator.ts +++ b/src/animation/PitAnimator.ts @@ -12,7 +12,7 @@ import { v4 } from "uuid"; import { Context } from "../context"; import BoardViewModelFactory from "../factory/BoardViewModelFactory"; import { PitViewModelFactory } from "../factory/PitViewModelFactory"; -import { getColorByLuminance } from "../util/ColorUtil"; +import { getColorByBrightness } from "../util/ColorUtil"; import BoardViewModel from "../viewmodel/BoardViewModel"; const animationUpdateInterval = 300; @@ -131,7 +131,7 @@ export default class PitAnimator { pitViewModel.pitColor = theme.pitGetRivalStonePitAnimateColor; pitViewModel.stoneCount = 0; } - pitViewModel.stoneColor = getColorByLuminance( + pitViewModel.stoneColor = getColorByBrightness( pitViewModel.pitColor, theme.stoneColor, theme.stoneLightColor diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx index 1396aa7..6f5a2f8 100644 --- a/src/components/BoardView.tsx +++ b/src/components/BoardView.tsx @@ -2,7 +2,7 @@ import { Bank, MancalaGame, Pit } from "mancala.js"; import * as React from "react"; import { FunctionComponent, useState } from "react"; import { Context } from "../context"; -import { getColorByLuminance } from "../util/ColorUtil"; +import { getColorByBrightness } from "../util/ColorUtil"; import BoardViewModel from "../viewmodel/BoardViewModel"; import PitViewModel from "../viewmodel/PitViewModel"; @@ -68,7 +68,7 @@ const StoreView: FunctionComponent<{ const balls = [...range(pitViewModel.stoneCount)].map((i) => ( )); - const textColor = getColorByLuminance( + const textColor = getColorByBrightness( pitViewModel.pitColor, context.themeManager.theme.primary, context.themeManager.theme.primaryLight diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 3ff6867..0d0499b 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { FunctionComponent } from "react"; import { Context } from "../context"; -import { getColorByLuminance } from "../util/ColorUtil"; +import { getColorByBrightness } from "../util/ColorUtil"; const Button: FunctionComponent<{ context: Context; @@ -9,7 +9,7 @@ const Button: FunctionComponent<{ onClick: () => void; color: string; }> = ({ context, text, color, onClick }) => { - const textColor = getColorByLuminance( + const textColor = getColorByBrightness( color, context.themeManager.theme.primary, context.themeManager.theme.primaryLight diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx index f91c9b3..b207a05 100644 --- a/src/components/InfoPanel.tsx +++ b/src/components/InfoPanel.tsx @@ -2,7 +2,7 @@ import { MancalaGame } from "mancala.js"; import * as React from "react"; import { FunctionComponent } from "react"; import { Context } from "../context"; -import { getColorByLuminance } from "../util/ColorUtil"; +import { getColorByBrightness } from "../util/ColorUtil"; function getInfoPanelTextByGameState(params: { context: Context; @@ -86,8 +86,8 @@ const InfoPanel: FunctionComponent<{ const isUserTurn = game?.checkIsPlayerTurn(userKey); const containerColor = isUserTurn ? context.themeManager.theme.playerTurnColor - : context.themeManager.theme.holeColor; - const textColor = getColorByLuminance( + : context.themeManager.theme.boardColor; + const textColor = getColorByBrightness( containerColor, context.themeManager.theme.primary, context.themeManager.theme.primaryLight diff --git a/src/util/ColorUtil.ts b/src/util/ColorUtil.ts index 5f82d97..b19a362 100644 --- a/src/util/ColorUtil.ts +++ b/src/util/ColorUtil.ts @@ -1,31 +1,11 @@ -//from this gist https://gist.github.com/jfsiii/5641126 -// from http://www.w3.org/TR/WCAG20/#relativeluminancedef -export function relativeLuminanceW3C( - R8bit: number, - G8bit: number, - B8bit: number -) { - const RsRGB = R8bit / 255; - const GsRGB = G8bit / 255; - const BsRGB = B8bit / 255; - - const R = - RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4); - const G = - GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4); - const B = - BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4); - - // For the sRGB colorspace, the relative luminance of a color is defined as: - const L = 0.2126 * R + 0.7152 * G + 0.0722 * B; - - return L; +export function getBrightness(r: number, g: number, b: number) { + return (r * 299 + g * 587 + b * 114) / 1000; } -export function relativeLuminanceW3CHexColor(hexColor: string): number { +export function getBrightnessFromHexColor(hexColor: string): number { const [r, g, b] = hexToRgb(hexColor); - return relativeLuminanceW3C(r, g, b); + return getBrightness(r, g, b); } // from https://www.codegrepper.com/code-examples/javascript/javascript+convert+color+string+to+rgb @@ -42,10 +22,10 @@ export function hexToRgb( //returns [23, 14, 45] -> reformat if needed } -export function getColorByLuminance( +export function getColorByBrightness( color: string, lightColor: string, darkColor: string ): string { - return relativeLuminanceW3CHexColor(color) < 0.5 ? darkColor : lightColor; + return getBrightnessFromHexColor(color) < 125 ? darkColor : lightColor; } From 50c6dd92a6c905068319e3ddc6111dde72fc5cda Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Wed, 13 Jul 2022 15:21:30 +0300 Subject: [PATCH 2/7] replace primary color with textColor --- src/Home.tsx | 8 ++++---- src/components/BoardView.tsx | 4 ++-- src/components/Button.tsx | 4 ++-- src/components/InfoPanel.tsx | 4 ++-- src/theme/Theme.ts | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Home.tsx b/src/Home.tsx index b70ef3a..4798f4f 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -202,8 +202,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { }; const menuTextColor = getColorByBrightness( context.themeManager.theme.appBarBgColor, - context.themeManager.theme.primary, - context.themeManager.theme.primaryLight + context.themeManager.theme.textColor, + context.themeManager.theme.textLightColor ); return (
= ({ initial = 0 }) => { borderTopRightRadius: "1vw", minWidth: "10vw", minHeight: "1vw", - background: context.themeManager.theme.primary, - color: context.themeManager.theme.primaryLight, + background: context.themeManager.theme.textColor, + color: context.themeManager.theme.textLightColor, }} > {connectionStateText()} diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx index 6f5a2f8..024a7ac 100644 --- a/src/components/BoardView.tsx +++ b/src/components/BoardView.tsx @@ -70,8 +70,8 @@ const StoreView: FunctionComponent<{ )); const textColor = getColorByBrightness( pitViewModel.pitColor, - context.themeManager.theme.primary, - context.themeManager.theme.primaryLight + context.themeManager.theme.textColor, + context.themeManager.theme.textLightColor ); return (
= ({ context, text, color, onClick }) => { const textColor = getColorByBrightness( color, - context.themeManager.theme.primary, - context.themeManager.theme.primaryLight + context.themeManager.theme.textColor, + context.themeManager.theme.textLightColor ); return (