From 21c2b187367777ed4bf33b7cc263784913815c01 Mon Sep 17 00:00:00 2001
From: Katie Langerman <18661030+langermank@users.noreply.github.com>
Date: Mon, 23 Sep 2024 13:01:02 -0700
Subject: [PATCH] adding functionality to match dotcom

---
 .../IssueLabel/IssueLabel.module.css          | 192 ++++++++++++
 .../IssueLabel/IssueLabel.stories.tsx         |  11 +-
 .../experimental/IssueLabel/IssueLabel.tsx    | 281 +++++-------------
 3 files changed, 271 insertions(+), 213 deletions(-)
 create mode 100644 packages/react/src/experimental/IssueLabel/IssueLabel.module.css

diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.module.css b/packages/react/src/experimental/IssueLabel/IssueLabel.module.css
new file mode 100644
index 00000000000..8e47f7acfcc
--- /dev/null
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.module.css
@@ -0,0 +1,192 @@
+.IssueLabel {
+  background-color: var(--label-bgColor-rest);
+  color: var(--label-fgColor);
+  border: none;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: calc(20 / 12);
+  font-weight: var(--base-text-weight-semibold, 600);
+
+  &[data-size='small'] {
+    min-height: var(--base-size-20, 1.25rem);
+    padding-inline: var(--base-size-8, 0.5rem);
+  }
+
+  &[data-size='large'] {
+    min-height: var(--base-size-24, 1.5rem);
+    padding-inline: var(--base-size-12, 0.75rem);
+  }
+
+  &[data-variant='pink'] {
+    --label-bgColor-rest: var(--label-pink-bgColor-rest);
+    --label-bgColor-hover: var(--label-pink-bgColor-hover);
+    --label-bgColor-active: var(--label-pink-bgColor-active);
+    --label-fgColor: var(--label-pink-fgColor-rest);
+    --label-fgColor-hover: var(--label-pink-fgColor-hover);
+    --label-fgColor-active: var(--label-pink-fgColor-active);
+  }
+
+  &[data-variant='plum'] {
+    --label-bgColor-rest: var(--label-plum-bgColor-rest);
+    --label-bgColor-hover: var(--label-plum-bgColor-hover);
+    --label-bgColor-active: var(--label-plum-bgColor-active);
+    --label-fgColor: var(--label-plum-fgColor-rest);
+    --label-fgColor-hover: var(--label-plum-fgColor-hover);
+    --label-fgColor-active: var(--label-plum-fgColor-active);
+  }
+
+  &[data-variant='purple'] {
+    --label-bgColor-rest: var(--label-purple-bgColor-rest);
+    --label-bgColor-hover: var(--label-purple-bgColor-hover);
+    --label-bgColor-active: var(--label-purple-bgColor-active);
+    --label-fgColor: var(--label-purple-fgColor-rest);
+    --label-fgColor-hover: var(--label-purple-fgColor-hover);
+    --label-fgColor-active: var(--label-purple-fgColor-active);
+  }
+
+  &[data-variant='indigo'] {
+    --label-bgColor-rest: var(--label-indigo-bgColor-rest);
+    --label-bgColor-hover: var(--label-indigo-bgColor-hover);
+    --label-bgColor-active: var(--label-indigo-bgColor-active);
+    --label-fgColor: var(--label-indigo-fgColor-rest);
+    --label-fgColor-hover: var(--label-indigo-fgColor-hover);
+    --label-fgColor-active: var(--label-indigo-fgColor-active);
+  }
+
+  &[data-variant='blue'] {
+    --label-bgColor-rest: var(--label-blue-bgColor-rest);
+    --label-bgColor-hover: var(--label-blue-bgColor-hover);
+    --label-bgColor-active: var(--label-blue-bgColor-active);
+    --label-fgColor: var(--label-blue-fgColor-rest);
+    --label-fgColor-hover: var(--label-blue-fgColor-hover);
+    --label-fgColor-active: var(--label-blue-fgColor-active);
+  }
+
+  &[data-variant='cyan'] {
+    --label-bgColor-rest: var(--label-cyan-bgColor-rest);
+    --label-bgColor-hover: var(--label-cyan-bgColor-hover);
+    --label-bgColor-active: var(--label-cyan-bgColor-active);
+    --label-fgColor: var(--label-cyan-fgColor-rest);
+    --label-fgColor-hover: var(--label-cyan-fgColor-hover);
+    --label-fgColor-active: var(--label-cyan-fgColor-active);
+  }
+
+  &[data-variant='teal'] {
+    --label-bgColor-rest: var(--label-teal-bgColor-rest);
+    --label-bgColor-hover: var(--label-teal-bgColor-hover);
+    --label-bgColor-active: var(--label-teal-bgColor-active);
+    --label-fgColor: var(--label-teal-fgColor-rest);
+    --label-fgColor-hover: var(--label-teal-fgColor-hover);
+    --label-fgColor-active: var(--label-teal-fgColor-active);
+  }
+
+  &[data-variant='pine'] {
+    --label-bgColor-rest: var(--label-pine-bgColor-rest);
+    --label-bgColor-hover: var(--label-pine-bgColor-hover);
+    --label-bgColor-active: var(--label-pine-bgColor-active);
+    --label-fgColor: var(--label-pine-fgColor-rest);
+    --label-fgColor-hover: var(--label-pine-fgColor-hover);
+    --label-fgColor-active: var(--label-pine-fgColor-active);
+  }
+
+  &[data-variant='green'] {
+    --label-bgColor-rest: var(--label-green-bgColor-rest);
+    --label-bgColor-hover: var(--label-green-bgColor-hover);
+    --label-bgColor-active: var(--label-green-bgColor-active);
+    --label-fgColor: var(--label-green-fgColor-rest);
+    --label-fgColor-hover: var(--label-green-fgColor-hover);
+    --label-fgColor-active: var(--label-green-fgColor-active);
+  }
+
+  &[data-variant='lime'] {
+    --label-bgColor-rest: var(--label-lime-bgColor-rest);
+    --label-bgColor-hover: var(--label-lime-bgColor-hover);
+    --label-bgColor-active: var(--label-lime-bgColor-active);
+    --label-fgColor: var(--label-lime-fgColor-rest);
+    --label-fgColor-hover: var(--label-lime-fgColor-hover);
+    --label-fgColor-active: var(--label-lime-fgColor-active);
+  }
+
+  &[data-variant='olive'] {
+    --label-bgColor-rest: var(--label-olive-bgColor-rest);
+    --label-bgColor-hover: var(--label-olive-bgColor-hover);
+    --label-bgColor-active: var(--label-olive-bgColor-active);
+    --label-fgColor: var(--label-olive-fgColor-rest);
+    --label-fgColor-hover: var(--label-olive-fgColor-hover);
+    --label-fgColor-active: var(--label-olive-fgColor-active);
+  }
+
+  &[data-variant='lemon'] {
+    --label-bgColor-rest: var(--label-lemon-bgColor-rest);
+    --label-bgColor-hover: var(--label-lemon-bgColor-hover);
+    --label-bgColor-active: var(--label-lemon-bgColor-active);
+    --label-fgColor: var(--label-lemon-fgColor-rest);
+    --label-fgColor-hover: var(--label-lemon-fgColor-hover);
+    --label-fgColor-active: var(--label-lemon-fgColor-active);
+  }
+
+  &[data-variant='yellow'] {
+    --label-bgColor-rest: var(--label-yellow-bgColor-rest);
+    --label-bgColor-hover: var(--label-yellow-bgColor-hover);
+    --label-bgColor-active: var(--label-yellow-bgColor-active);
+    --label-fgColor: var(--label-yellow-fgColor-rest);
+    --label-fgColor-hover: var(--label-yellow-fgColor-hover);
+    --label-fgColor-active: var(--label-yellow-fgColor-active);
+  }
+
+  &[data-variant='orange'] {
+    --label-bgColor-rest: var(--label-orange-bgColor-rest);
+    --label-bgColor-hover: var(--label-orange-bgColor-hover);
+    --label-bgColor-active: var(--label-orange-bgColor-active);
+    --label-fgColor: var(--label-orange-fgColor-rest);
+    --label-fgColor-hover: var(--label-orange-fgColor-hover);
+    --label-fgColor-active: var(--label-orange-fgColor-active);
+  }
+
+  &[data-variant='red'] {
+    --label-bgColor-rest: var(--label-red-bgColor-rest);
+    --label-bgColor-hover: var(--label-red-bgColor-hover);
+    --label-bgColor-active: var(--label-red-bgColor-active);
+    --label-fgColor: var(--label-red-fgColor-rest);
+    --label-fgColor-hover: var(--label-red-fgColor-hover);
+    --label-fgColor-active: var(--label-red-fgColor-active);
+  }
+
+  &[data-variant='coral'] {
+    --label-bgColor-rest: var(--label-coral-bgColor-rest);
+    --label-bgColor-hover: var(--label-coral-bgColor-hover);
+    --label-bgColor-active: var(--label-coral-bgColor-active);
+    --label-fgColor: var(--label-coral-fgColor-rest);
+    --label-fgColor-hover: var(--label-coral-fgColor-hover);
+    --label-fgColor-active: var(--label-coral-fgColor-active);
+  }
+
+  &[data-variant='gray'] {
+    --label-bgColor-rest: var(--label-gray-bgColor-rest);
+    --label-bgColor-hover: var(--label-gray-bgColor-hover);
+    --label-bgColor-active: var(--label-gray-bgColor-active);
+    --label-fgColor: var(--label-gray-fgColor-rest);
+    --label-fgColor-hover: var(--label-gray-fgColor-hover);
+    --label-fgColor-active: var(--label-gray-fgColor-active);
+  }
+
+  &[data-variant='brown'] {
+    --label-bgColor-rest: var(--label-brown-bgColor-rest);
+    --label-bgColor-hover: var(--label-brown-bgColor-hover);
+    --label-bgColor-active: var(--label-brown-bgColor-active);
+    --label-fgColor: var(--label-brown-fgColor-rest);
+    --label-fgColor-hover: var(--label-brown-fgColor-hover);
+    --label-fgColor-active: var(--label-brown-fgColor-active);
+  }
+
+  &[data-variant='auburn'] {
+    --label-bgColor-rest: var(--label-auburn-bgColor-rest);
+    --label-bgColor-hover: var(--label-auburn-bgColor-hover);
+    --label-bgColor-active: var(--label-auburn-bgColor-active);
+    --label-fgColor: var(--label-auburn-fgColor-rest);
+    --label-fgColor-hover: var(--label-auburn-fgColor-hover);
+    --label-fgColor-active: var(--label-auburn-fgColor-active);
+  }
+}
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
index 69c649caa2d..50104a3bd51 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.stories.tsx
@@ -9,11 +9,13 @@ const meta = {
 
 export default meta
 
-export const Default = () => <IssueLabel>Issue label</IssueLabel>
+export const Default = () => <IssueLabel text="Issue label" />
 
 export const Playground: StoryObj<typeof IssueLabel> = {
-  render: args => <IssueLabel {...args}>Issue label</IssueLabel>,
-  args: {},
+  render: args => <IssueLabel {...args} />,
+  args: {
+    text: 'Issue label',
+  },
   argTypes: {
     fillColor: {
       hex: undefined,
@@ -47,5 +49,8 @@ export const Playground: StoryObj<typeof IssueLabel> = {
         'auburn',
       ],
     },
+    text: {
+      control: 'text',
+    },
   },
 }
diff --git a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
index 4d44b7834e2..6f8472c6601 100644
--- a/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
+++ b/packages/react/src/experimental/IssueLabel/IssueLabel.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import styled from 'styled-components'
-import {get} from '../../constants'
 import {getColorsFromHex} from './getColorFromHex'
 import {useTheme} from '../../ThemeProvider'
+import {clsx} from 'clsx'
+import classes from './IssueLabel.module.css'
 export type Hex = `#${string}`
 
 type LabelColorVariant =
@@ -28,24 +28,57 @@ type LabelColorVariant =
 
 // These colors should overlap with label
 
-export interface IssueLabelProps extends React.PropsWithChildren {
-  /**
-   *
-   */
+// extends Omit<React.HTMLAttributes<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>, 'size' | 'id'>
+
+export interface IssueLabelProps {
   fillColor?: Hex
+  size?: 'small' | 'large'
+  variant?: LabelColorVariant
+  href?: string
+  as?: 'button' | 'a' | 'span'
 
   /**
-   *
+   * The function that gets called when a user clicks the remove button, or keys "Backspace" or "Delete" when focused on the token
    */
-  size?: 'small' | 'large'
-
+  onRemove?: () => void
   /**
-   *
+   * Whether the token is selected
    */
-  variant?: LabelColorVariant
+  isSelected?: boolean
+  /**
+   * The text label inside the token
+   */
+  text: React.ReactNode
+  /**
+   * A unique identifier that can be associated with the token
+   */
+  id?: number | string
+
+  className?: string
+  onClick?: React.MouseEventHandler<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>
+  onFocus?: React.FocusEventHandler<HTMLSpanElement | HTMLButtonElement | HTMLAnchorElement>
+  // onClick?: (event: MouseEvent<HTMLButtonElement>) => void
+  // onFocus?: (event: FocusEvent<HTMLElement>) => void
 }
 
-export function IssueLabel({children, fillColor, size = 'small', variant = 'gray', ...rest}: IssueLabelProps) {
+export function IssueLabel({
+  className,
+  fillColor,
+  size = 'small',
+  variant = 'gray',
+  href,
+  onClick,
+  onFocus,
+  text,
+  as,
+  id,
+  ...rest
+}: IssueLabelProps) {
+  // Error handling: `href` and `onClick` should not be set simultaneously
+  if (href && onClick) {
+    throw new Error('`href` and `onClick` cannot both be set. Choose either a link (`<a>`) or a button (`<button>`).')
+  }
+
   const {resolvedColorScheme} = useTheme()
   const mode = resolvedColorScheme?.startsWith('dark') ? 'dark' : 'light'
   // TODO: get the bgColor, getting it from theme.colorScheme seems a bit sketchy
@@ -54,209 +87,37 @@ export function IssueLabel({children, fillColor, size = 'small', variant = 'gray
     dark: '#0d1117',
   }
 
+  // Determine the component type: Prioritize `as`, then fallback to `href` or `onClick` logic
+  let Component: 'a' | 'button' | 'span' = 'span' // Default to <span>
+
+  if (as) {
+    Component = as // If `as` prop is provided, use it explicitly
+  } else if (href) {
+    Component = 'a' // If `href` is provided and `as` is not set, render as <a>
+  } else if (onClick) {
+    Component = 'button' // If `onClick` is provided and `href` is not set, render as <button>
+  }
+
+  // Set tabIndex to -1 if either onClick, onFocus, or onRemove is provided
+  const tabIndex = onClick || onFocus ? -1 : undefined
+
+  // Prepare anchor props if the component is an <a> element
+  const anchorProps = href ? {href} : {}
+
   return (
-    <StyledLabel
+    <Component
       {...rest}
+      {...anchorProps}
+      onClick={onClick}
+      onFocus={onFocus}
+      tabIndex={tabIndex}
+      id={id?.toString()}
+      className={clsx(classes.IssueLabel, className)}
       data-size={size}
       data-variant={fillColor ? undefined : variant}
       style={fillColor ? getColorsFromHex(fillColor, resolvedColorScheme, bgColors[mode]) : undefined}
     >
-      {children}
-    </StyledLabel>
+      {text}
+    </Component>
   )
 }
-
-const StyledLabel = styled.div`
-  background-color: var(--label-bgColor-rest);
-  color: var(--label-fgColor);
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 999px;
-  font-size: ${get('fontSizes.0')};
-  line-height: calc(20 / 12);
-  font-weight: var(--base-text-weight-semibold, 600);
-
-  // Size ----------------------------------------------------------------------
-  &[data-size='small'] {
-    min-height: var(--base-size-20, 1.25rem);
-    padding-inline: var(--base-size-8, 0.5rem);
-  }
-
-  &[data-size='large'] {
-    min-height: var(--base-size-24, 1.5rem);
-    padding-inline: var(--base-size-12, 0.75rem);
-  }
-
-  // Variant--------------------------------------------------------------------
-  &[data-variant='pink'] {
-    --label-bgColor-rest: var(--label-pink-bgColor-rest);
-    --label-bgColor-hover: var(--label-pink-bgColor-hover);
-    --label-bgColor-active: var(--label-pink-bgColor-active);
-    --label-fgColor: var(--label-pink-fgColor-rest);
-    --label-fgColor-hover: var(--label-pink-fgColor-hover);
-    --label-fgColor-active: var(--label-pink-fgColor-active);
-  }
-
-  &[data-variant='plum'] {
-    --label-bgColor-rest: var(--label-plum-bgColor-rest);
-    --label-bgColor-hover: var(--label-plum-bgColor-hover);
-    --label-bgColor-active: var(--label-plum-bgColor-active);
-    --label-fgColor: var(--label-plum-fgColor-rest);
-    --label-fgColor-hover: var(--label-plum-fgColor-hover);
-    --label-fgColor-active: var(--label-plum-fgColor-active);
-  }
-
-  &[data-variant='purple'] {
-    --label-bgColor-rest: var(--label-purple-bgColor-rest);
-    --label-bgColor-hover: var(--label-purple-bgColor-hover);
-    --label-bgColor-active: var(--label-purple-bgColor-active);
-    --label-fgColor: var(--label-purple-fgColor-rest);
-    --label-fgColor-hover: var(--label-purple-fgColor-hover);
-    --label-fgColor-active: var(--label-purple-fgColor-active);
-  }
-
-  &[data-variant='indigo'] {
-    --label-bgColor-rest: var(--label-indigo-bgColor-rest);
-    --label-bgColor-hover: var(--label-indigo-bgColor-hover);
-    --label-bgColor-active: var(--label-indigo-bgColor-active);
-    --label-fgColor: var(--label-indigo-fgColor-rest);
-    --label-fgColor-hover: var(--label-indigo-fgColor-hover);
-    --label-fgColor-active: var(--label-indigo-fgColor-active);
-  }
-
-  &[data-variant='blue'] {
-    --label-bgColor-rest: var(--label-blue-bgColor-rest);
-    --label-bgColor-hover: var(--label-blue-bgColor-hover);
-    --label-bgColor-active: var(--label-blue-bgColor-active);
-    --label-fgColor: var(--label-blue-fgColor-rest);
-    --label-fgColor-hover: var(--label-blue-fgColor-hover);
-    --label-fgColor-active: var(--label-blue-fgColor-active);
-  }
-
-  &[data-variant='cyan'] {
-    --label-bgColor-rest: var(--label-cyan-bgColor-rest);
-    --label-bgColor-hover: var(--label-cyan-bgColor-hover);
-    --label-bgColor-active: var(--label-cyan-bgColor-active);
-    --label-fgColor: var(--label-cyan-fgColor-rest);
-    --label-fgColor-hover: var(--label-cyan-fgColor-hover);
-    --label-fgColor-active: var(--label-cyan-fgColor-active);
-  }
-
-  &[data-variant='teal'] {
-    --label-bgColor-rest: var(--label-teal-bgColor-rest);
-    --label-bgColor-hover: var(--label-teal-bgColor-hover);
-    --label-bgColor-active: var(--label-teal-bgColor-active);
-    --label-fgColor: var(--label-teal-fgColor-rest);
-    --label-fgColor-hover: var(--label-teal-fgColor-hover);
-    --label-fgColor-active: var(--label-teal-fgColor-active);
-  }
-
-  &[data-variant='pine'] {
-    --label-bgColor-rest: var(--label-pine-bgColor-rest);
-    --label-bgColor-hover: var(--label-pine-bgColor-hover);
-    --label-bgColor-active: var(--label-pine-bgColor-active);
-    --label-fgColor: var(--label-pine-fgColor-rest);
-    --label-fgColor-hover: var(--label-pine-fgColor-hover);
-    --label-fgColor-active: var(--label-pine-fgColor-active);
-  }
-
-  &[data-variant='green'] {
-    --label-bgColor-rest: var(--label-green-bgColor-rest);
-    --label-bgColor-hover: var(--label-green-bgColor-hover);
-    --label-bgColor-active: var(--label-green-bgColor-active);
-    --label-fgColor: var(--label-green-fgColor-rest);
-    --label-fgColor-hover: var(--label-green-fgColor-hover);
-    --label-fgColor-active: var(--label-green-fgColor-active);
-  }
-
-  &[data-variant='lime'] {
-    --label-bgColor-rest: var(--label-lime-bgColor-rest);
-    --label-bgColor-hover: var(--label-lime-bgColor-hover);
-    --label-bgColor-active: var(--label-lime-bgColor-active);
-    --label-fgColor: var(--label-lime-fgColor-rest);
-    --label-fgColor-hover: var(--label-lime-fgColor-hover);
-    --label-fgColor-active: var(--label-lime-fgColor-active);
-  }
-
-  &[data-variant='olive'] {
-    --label-bgColor-rest: var(--label-olive-bgColor-rest);
-    --label-bgColor-hover: var(--label-olive-bgColor-hover);
-    --label-bgColor-active: var(--label-olive-bgColor-active);
-    --label-fgColor: var(--label-olive-fgColor-rest);
-    --label-fgColor-hover: var(--label-olive-fgColor-hover);
-    --label-fgColor-active: var(--label-olive-fgColor-active);
-  }
-
-  &[data-variant='lemon'] {
-    --label-bgColor-rest: var(--label-lemon-bgColor-rest);
-    --label-bgColor-hover: var(--label-lemon-bgColor-hover);
-    --label-bgColor-active: var(--label-lemon-bgColor-active);
-    --label-fgColor: var(--label-lemon-fgColor-rest);
-    --label-fgColor-hover: var(--label-lemon-fgColor-hover);
-    --label-fgColor-active: var(--label-lemon-fgColor-active);
-  }
-
-  &[data-variant='yellow'] {
-    --label-bgColor-rest: var(--label-yellow-bgColor-rest);
-    --label-bgColor-hover: var(--label-yellow-bgColor-hover);
-    --label-bgColor-active: var(--label-yellow-bgColor-active);
-    --label-fgColor: var(--label-yellow-fgColor-rest);
-    --label-fgColor-hover: var(--label-yellow-fgColor-hover);
-    --label-fgColor-active: var(--label-yellow-fgColor-active);
-  }
-
-  &[data-variant='orange'] {
-    --label-bgColor-rest: var(--label-orange-bgColor-rest);
-    --label-bgColor-hover: var(--label-orange-bgColor-hover);
-    --label-bgColor-active: var(--label-orange-bgColor-active);
-    --label-fgColor: var(--label-orange-fgColor-rest);
-    --label-fgColor-hover: var(--label-orange-fgColor-hover);
-    --label-fgColor-active: var(--label-orange-fgColor-active);
-  }
-
-  &[data-variant='red'] {
-    --label-bgColor-rest: var(--label-red-bgColor-rest);
-    --label-bgColor-hover: var(--label-red-bgColor-hover);
-    --label-bgColor-active: var(--label-red-bgColor-active);
-    --label-fgColor: var(--label-red-fgColor-rest);
-    --label-fgColor-hover: var(--label-red-fgColor-hover);
-    --label-fgColor-active: var(--label-red-fgColor-active);
-  }
-
-  &[data-variant='coral'] {
-    --label-bgColor-rest: var(--label-coral-bgColor-rest);
-    --label-bgColor-hover: var(--label-coral-bgColor-hover);
-    --label-bgColor-active: var(--label-coral-bgColor-active);
-    --label-fgColor: var(--label-coral-fgColor-rest);
-    --label-fgColor-hover: var(--label-coral-fgColor-hover);
-    --label-fgColor-active: var(--label-coral-fgColor-active);
-  }
-
-  &[data-variant='gray'] {
-    --label-bgColor-rest: var(--label-gray-bgColor-rest);
-    --label-bgColor-hover: var(--label-gray-bgColor-hover);
-    --label-bgColor-active: var(--label-gray-bgColor-active);
-    --label-fgColor: var(--label-gray-fgColor-rest);
-    --label-fgColor-hover: var(--label-gray-fgColor-hover);
-    --label-fgColor-active: var(--label-gray-fgColor-active);
-  }
-
-  &[data-variant='brown'] {
-    --label-bgColor-rest: var(--label-brown-bgColor-rest);
-    --label-bgColor-hover: var(--label-brown-bgColor-hover);
-    --label-bgColor-active: var(--label-brown-bgColor-active);
-    --label-fgColor: var(--label-brown-fgColor-rest);
-    --label-fgColor-hover: var(--label-brown-fgColor-hover);
-    --label-fgColor-active: var(--label-brown-fgColor-active);
-  }
-
-  &[data-variant='auburn'] {
-    --label-bgColor-rest: var(--label-auburn-bgColor-rest);
-    --label-bgColor-hover: var(--label-auburn-bgColor-hover);
-    --label-bgColor-active: var(--label-auburn-bgColor-active);
-    --label-fgColor: var(--label-auburn-fgColor-rest);
-    --label-fgColor-hover: var(--label-auburn-fgColor-hover);
-    --label-fgColor-active: var(--label-auburn-fgColor-active);
-  }
-`