adding color algo for hex colors

e2e/components/drafts/Label.test.ts → e2e/components/drafts/IssueLabel.test.ts

@@ -5,98 +5,98 @@ import {themes} from '../../test-helpers/themes'
 const variants = [
   {
     title: 'Default',
-    id: 'drafts-components-label--default',
+    id: 'drafts-components-issuelabel--default',
   },
   {
     title: 'Auburn',
-    id: 'drafts-components-label-features--auburn',
+    id: 'drafts-components-issuelabel-features--auburn',
   },
   {
     title: 'Blue',
-    id: 'drafts-components-label-features--blue',
+    id: 'drafts-components-issuelabel-features--blue',
   },
   {
     title: 'Brown',
-    id: 'drafts-components-label-features--brown',
+    id: 'drafts-components-issuelabel-features--brown',
   },
   {
     title: 'Coral',
-    id: 'drafts-components-label-features--coral',
+    id: 'drafts-components-issuelabel-features--coral',
   },
   {
     title: 'Cyan',
-    id: 'drafts-components-label-features--cyan',
+    id: 'drafts-components-issuelabel-features--cyan',
   },
   {
     title: 'Gray',
-    id: 'drafts-components-label-features--gray',
+    id: 'drafts-components-issuelabel-features--gray',
   },
   {
     title: 'Green',
-    id: 'drafts-components-label-features--green',
+    id: 'drafts-components-issuelabel-features--green',
   },
   {
     title: 'Indigo',
-    id: 'drafts-components-label-features--indigo',
+    id: 'drafts-components-issuelabel-features--indigo',
   },
   {
     title: 'Lemon',
-    id: 'drafts-components-label-features--lemon',
+    id: 'drafts-components-issuelabel-features--lemon',
   },
   {
     title: 'Lime',
-    id: 'drafts-components-label-features--lime',
+    id: 'drafts-components-issuelabel-features--lime',
   },
   {
     title: 'Olive',
-    id: 'drafts-components-label-features--olive',
+    id: 'drafts-components-issuelabel-features--olive',
   },
   {
     title: 'Orange',
-    id: 'drafts-components-label-features--orange',
+    id: 'drafts-components-issuelabel-features--orange',
   },
   {
     title: 'Pine',
-    id: 'drafts-components-label-features--pine',
+    id: 'drafts-components-issuelabel-features--pine',
   },
   {
     title: 'Pink',
-    id: 'drafts-components-label-features--pink',
+    id: 'drafts-components-issuelabel-features--pink',
   },
   {
     title: 'Plum',
-    id: 'drafts-components-label-features--plum',
+    id: 'drafts-components-issuelabel-features--plum',
   },
   {
     title: 'Purple',
-    id: 'drafts-components-label-features--purple',
+    id: 'drafts-components-issuelabel-features--purple',
   },
   {
     title: 'Red',
-    id: 'drafts-components-label-features--red',
+    id: 'drafts-components-issuelabel-features--red',
   },
   {
     title: 'Teal',
-    id: 'drafts-components-label-features--teal',
+    id: 'drafts-components-issuelabel-features--teal',
   },
   {
     title: 'Yellow',
-    id: 'drafts-components-label-features--yellow',
+    id: 'drafts-components-issuelabel-features--yellow',
   },
 ] as const
 
 const sizes = [
   {
     title: 'Size: Large',
-    id: 'drafts-components-label-features--size-large',
+    id: 'drafts-components-issuelabel-features--size-large',
   },
   {
     title: 'Size: Small',
-    id: 'drafts-components-label-features--size-small',
+    id: 'drafts-components-issuelabel-features--size-small',
   },
 ] as const
 
-test.describe('Label', () => {
+test.describe('IssueLabel', () => {
   for (const story of variants) {
     test.describe(story.title, () => {
       for (const theme of themes) {
@@ -115,7 +115,7 @@ test.describe('Label', () => {
             })
 
             // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Label.${story.title}.${theme}.png`)
+            expect(await page.screenshot()).toMatchSnapshot(`IssueLabel.${story.title}.${theme}.png`)
           })
 
           test('axe @aat', async ({page}) => {
@@ -145,7 +145,7 @@ test.describe('Label', () => {
         })
 
         // Default state
-        expect(await page.screenshot()).toMatchSnapshot(`Label.${story.title}.png`)
+        expect(await page.screenshot()).toMatchSnapshot(`IssueLabel.${story.title}.png`)
       })
 
       test('axe @aat', async ({page}) => {

packages/react/package.json

@@ -109,6 +109,7 @@
     "focus-visible": "^5.2.0",
     "fzy.js": "^0.4.1",
     "history": "^5.0.0",
+    "hsluv": "1.0.1",
     "lodash.isempty": "^4.4.0",
     "lodash.isobject": "^3.0.2",
     "react-intersection-observer": "^9.4.3",

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -268,6 +268,8 @@ exports[`@primer/react/drafts should not update exports without a semver change
   "InlineAutocomplete",
   "type InlineAutocompleteProps",
   "type InteractiveMarkdownViewerProps",
+  "IssueLabel",
+  "type IssueLabelProps",
   "MarkdownEditor",
   "type MarkdownEditorHandle",
   "type MarkdownEditorProps",
@@ -366,6 +368,8 @@ exports[`@primer/react/experimental should not update exports without a semver c
   "InlineAutocomplete",
   "type InlineAutocompleteProps",
   "type InteractiveMarkdownViewerProps",
+  "IssueLabel",
+  "type IssueLabelProps",
   "MarkdownEditor",
   "type MarkdownEditorHandle",
   "type MarkdownEditorProps",

packages/react/src/drafts/IssueLabel/IssueLabel.features.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {IssueLabel} from '../IssueLabel'
 import type {Meta} from '@storybook/react'
+import type {Hex} from './IssueLabel'
 
 const meta = {
   title: 'Drafts/Components/IssueLabel/Features',
@@ -51,12 +52,12 @@ export const SizeLarge = () => <IssueLabel size="large">Issue label</IssueLabel>
 
 export const SizeSmall = () => <IssueLabel size="small">Issue label</IssueLabel>
 
-export const Hex = hex => <IssueLabel fillColor={hex}>Issue label</IssueLabel>
-Hex.args = {
+export const HexColor = (hex: Hex) => <IssueLabel fillColor={hex}>Issue label</IssueLabel>
+HexColor.args = {
   hex: '#59B200',
   variant: undefined,
 }
-Hex.argTypes = {
+HexColor.argTypes = {
   hex: {control: {type: 'color'}},
   variant: {control: {disable: true}},
 }

packages/react/src/drafts/IssueLabel/IssueLabel.stories.tsx

@@ -3,7 +3,7 @@ import {IssueLabel} from '../IssueLabel'
 import type {Meta, StoryObj} from '@storybook/react'
 
 const meta = {
-  title: 'Drafts/Components/Label',
+  title: 'Drafts/Components/IssueLabel',
   component: IssueLabel,
 } satisfies Meta<typeof IssueLabel>
 
@@ -15,6 +15,10 @@ export const Playground: StoryObj<typeof IssueLabel> = {
   render: args => <IssueLabel {...args}>Issue label</IssueLabel>,
   args: {},
   argTypes: {
+    fillColor: {
+      hex: undefined,
+      control: {type: 'color', presetColors: ['red', 'green', 'blue', 'brown', 'black', 'white', 'salmon', 'orange']},
+    },
     size: {
       control: 'select',
       option: ['small', 'large'],

packages/react/src/drafts/IssueLabel/IssueLabel.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 import styled from 'styled-components'
 import {get} from '../../constants'
+import {getColorsFromHex} from './getColorFromHex'
+import {useTheme} from '../../ThemeProvider'
+export type Hex = `#${string}`
 
 type LabelColorVariant =
   | 'pink'
@@ -29,7 +32,7 @@ export interface IssueLabelProps extends React.PropsWithChildren {
   /**
    *
    */
-  fillColor?: string
+  fillColor?: Hex
 
   /**
    *
@@ -43,8 +46,21 @@ export interface IssueLabelProps extends React.PropsWithChildren {
 }
 
 export function IssueLabel({children, fillColor, size = 'small', variant = 'gray', ...rest}: IssueLabelProps) {
+  const {resolvedColorScheme} = useTheme()
+  const mode = resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'
+  // TODO: get the bgColor, getting it from theme.colorScheme seems a bit sketchy
+  const bgColors: Record<string, Hex> = {
+    light: '#ffffff',
+    dark: '#0d1117',
+  }
+
   return (
-    <StyledLabel {...rest} data-size={size} data-variant={fillColor ? undefined : variant}>
+    <StyledLabel
+      {...rest}
+      data-size={size}
+      data-variant={fillColor ? undefined : variant}
+      style={fillColor ? getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode]) : undefined}
+    >
       {children}
     </StyledLabel>
   )