Merge pull request #928 from omnivore-app/901

Increase luminous for labels

packages/web/components/elements/LabelChip.tsx

@@ -1,6 +1,8 @@
+import { getLuminance, lighten, toHsla } from 'color2k'
 import { useRouter } from 'next/router'
 import { Button } from './Button'
 import { SpanBox } from './LayoutPrimitives'
+import { isDarkTheme } from '../../lib/themeUpdater'
 
 type LabelChipProps = {
   text: string
@@ -9,6 +11,7 @@ type LabelChipProps = {
 
 export function LabelChip(props: LabelChipProps): JSX.Element {
   const router = useRouter()
+
   const hexToRgb = (hex: string) => {
     const bigint = parseInt(hex.substring(1), 16)
     const r = (bigint >> 16) & 255
@@ -17,27 +20,39 @@ export function LabelChip(props: LabelChipProps): JSX.Element {
 
     return [r, g, b]
   }
+  const isDarkMode = isDarkTheme()
+  const luminance = getLuminance(props.color)
+  const lightenColor = lighten(props.color, 0.2)
   const color = hexToRgb(props.color)
-
+  const darkThemeTextColor =
+    luminance > 0.2
+      ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`
+      : lightenColor
+  const lightThemeTextColor = luminance > 0.5 ? '#000000' : '#ffffff'
   return (
-    <Button style="plainIcon" onClick={(e) => {
-      router.push(`/home?q=label:"${props.text}"`)
-      e.stopPropagation()
-    }}>
+    <Button
+      style="plainIcon"
+      onClick={(e) => {
+        router.push(`/home?q=label:"${props.text}"`)
+        e.stopPropagation()
+      }}
+    >
       <SpanBox
         css={{
           display: 'inline-table',
           margin: '4px',
           borderRadius: '32px',
-          color: props.color,
+          color: isDarkMode ? darkThemeTextColor : lightThemeTextColor,
           fontSize: '12px',
           fontWeight: 'bold',
           padding: '2px 5px 2px 5px',
           whiteSpace: 'nowrap',
           cursor: 'pointer',
           backgroundClip: 'padding-box',
-          border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
-          backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`,
+          border: isDarkMode ? `1px solid ${darkThemeTextColor}` :`1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`,
+          backgroundColor: isDarkMode
+            ? `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.08)`
+            : props.color,
         }}
       >
         {props.text}

packages/web/package.json

@@ -29,6 +29,7 @@
     "@segment/analytics-next": "^1.33.5",
     "@sentry/nextjs": "^6.16.1",
     "@stitches/react": "^1.2.5",
+    "color2k": "^2.0.0",
     "cookie": "^0.5.0",
     "diff-match-patch": "^1.0.5",
     "graphql-request": "^3.6.1",