fix(radio): only one color on hover and selected

packages/design-tokens/tokens/checkbox.js

@@ -62,7 +62,7 @@ module.exports = {
  comment:
  'Background color to use when a radio button in a group is selected',
 
- value: '{color.brand.primary.value',
+ value: '{color.brand.primary.value}',
  },
  },
  },

packages/fractal/package.json

@@ -84,18 +84,18 @@
  "@pandacss/preset-base": "^0.7.0",
  "@simbathesailor/use-what-changed": "^2.0.0",
  "@snowball-tech/eslint-config": "^5.1.3",
- "@storybook/addon-a11y": "^7.0.27",
- "@storybook/addon-essentials": "^7.0.27",
- "@storybook/addon-interactions": "^7.0.27",
- "@storybook/addon-links": "^7.0.27",
- "@storybook/addons": "^7.0.27",
- "@storybook/blocks": "^7.0.27",
- "@storybook/components": "^7.0.27",
- "@storybook/manager-api": "^7.0.27",
- "@storybook/react": "^7.0.27",
- "@storybook/react-vite": "^7.0.27",
+ "@storybook/addon-a11y": "^7.1.0",
+ "@storybook/addon-essentials": "^7.1.0",
+ "@storybook/addon-interactions": "^7.1.0",
+ "@storybook/addon-links": "^7.1.0",
+ "@storybook/addons": "^7.1.0",
+ "@storybook/blocks": "^7.1.0",
+ "@storybook/components": "^7.1.0",
+ "@storybook/manager-api": "^7.1.0",
+ "@storybook/react": "^7.1.0",
+ "@storybook/react-vite": "^7.1.0",
  "@storybook/testing-library": "^0.2.0",
- "@storybook/theming": "^7.0.27",
+ "@storybook/theming": "^7.1.0",
  "@types/eslint": "^8.44.0",
  "@types/lodash": "^4.14.195",
  "@types/prettier": "^2.7.3",
@@ -108,7 +108,7 @@
  "postcss-styled-syntax": "^0.4.0",
  "prettier": "^3.0.0",
  "prop-types": "^15.8.1",
- "storybook": "^7.0.27",
+ "storybook": "^7.1.0",
  "storybook-addon-mock": "^4.1.0",
  "tsup": "^7.1.0",
  "typescript": "^5.1.6",

packages/fractal/src/components/InputRadio/InputRadio.constants.ts

@@ -5,14 +5,3 @@ export enum Variants {
 }
 
 export const DEFAULT_VARIANT = Variants.Primary
-
-export enum Colors {
- Auto = 'auto',
- Blue = 'blue',
- Green = 'green',
- Pink = 'pink',
- Purple = 'purple',
- Yellow = 'yellow',
-}
-
-export const DEFAULT_COLOR = Colors.Auto

packages/fractal/src/components/InputRadio/InputRadio.recipe.ts

@@ -1,18 +1,10 @@
 import { defineRecipe } from '@pandacss/dev'
 import type { SystemStyleObject } from '@snowball-tech/fractal-panda/types'
 
-import { Colors, DEFAULT_COLOR, Variants } from './InputRadio.constants'
+import { Variants } from './InputRadio.constants'
 
 export const GROUP_NAME = 'input-radio'
 
-function getHoverSelector(position: number) {
- return `.fractal-input-radio-group:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) > .fractal-input-radio:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)):nth-of-type(${position}) &:not(:is(:checked, [data-checked], [aria-checked=true])), .fractal-input-radio-group:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) > .fractal-input-radio:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)):nth-of-type(5n+${position}) &:not(:is(:checked, [data-checked], [aria-checked=true]))`
-}
-
-function getCheckedSelector(position: number) {
- return `.fractal-input-radio-group:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) > .fractal-input-radio:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)):nth-of-type(${position}) &:is(:checked, [data-checked], [aria-checked=true]), .fractal-input-radio-group:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) > .fractal-input-radio:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)):nth-of-type(5n+${position}) &:is(:checked, [data-checked], [aria-checked=true])`
-}
-
 export const inputRadioGroup: ReturnType<typeof defineRecipe> = defineRecipe({
  description: 'Radio group',
  name: 'inputRadioGroup',
@@ -79,25 +71,9 @@ export const inputRadioContainer: ReturnType<typeof defineRecipe> =
  {} as Record<Variants, SystemStyleObject>,
  ),
  },
-
- defaultVariants: {
- color: DEFAULT_COLOR,
- },
-
- variants: {
- color: Object.values(Colors).reduce(
- (colors, colorName) => ({
- ...colors,
- [colorName]: {},
- }),
- {} as Record<Colors, SystemStyleObject>,
- ),
- },
  })
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - This type seems to big to compute for TS...
-export const inputRadio: ReturnType<typeof defineRecipe> = defineRecipe({
+export const inputRadio = defineRecipe({
  description: 'Radio',
  name: 'inputRadio',
 
@@ -106,13 +82,25 @@ export const inputRadio: ReturnType<typeof defineRecipe> = defineRecipe({
 
  // eslint-disable-next-line sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects
  base: {
+ '.fractal-input-radio:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) &:not(:is(:checked, [data-checked], [aria-checked=true]))':
+ {
+ backgroundColor: `var(--color-background-radio-hover)`,
+ },
+
  '.fractal-input-radio-group:is(:disabled, [disabled], [data-disabled], .disabled) &, .fractal-input-radio:is(:disabled, [disabled], [data-disabled], .disabled) &':
  {
  borderColor: 'var(--color-box-checkbox-disabled)',
  color: 'var(--color-box-checkbox-disabled)!',
  cursor: 'var(--cursor-disabled)',
  },
 
+ '.fractal-input-radio-group:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) &, .fractal-input-radio:not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) &':
+ {
+ _checkedNotDisabled: {
+ backgroundColor: `var(--color-background-radio-checked)`,
+ },
+ },
+
  alignItems: 'center',
  all: 'unset',
  border: 'var(--size-border-2) solid var(--color-border-default)',
@@ -133,68 +121,6 @@ export const inputRadio: ReturnType<typeof defineRecipe> = defineRecipe({
  {} as Record<Variants, SystemStyleObject>,
  ),
  },
-
- defaultVariants: {
- color: DEFAULT_COLOR,
- },
-
- variants: {
- color: {
- ...Object.values(Colors)
- .filter((colorName) => colorName !== Colors.Auto)
- .reduce(
- (colors, colorName) => ({
- ...colors,
- [colorName]: {
- '.fractal-input-radio:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled], .disabled, :readonly, [readonly], [data-readonly], .readonly)) &:not(:is(:checked, [data-checked], [aria-checked=true]))':
- {
- backgroundColor: `var(--color-decorative-${colorName}-90, var(--color-brand-${colorName}, var(--color-base-white)))`,
- },
-
- _checked: {
- backgroundColor: `var(--color-decorative-${colorName}-70, var(--color-brand-${colorName}, var(--color-base-${colorName}, var(--color-base-white))))`,
- },
- },
- }),
- {} as Record<Colors, SystemStyleObject>,
- ),
- [Colors.Auto]: {
- [getCheckedSelector(1)]: {
- backgroundColor: `var(--color-background-radio-checked-1)`,
- },
-
- [getCheckedSelector(2)]: {
- backgroundColor: `var(--color-background-radio-checked-2)`,
- },
- [getCheckedSelector(3)]: {
- backgroundColor: `var(--color-background-radio-checked-3)`,
- },
- [getCheckedSelector(4)]: {
- backgroundColor: `var(--color-background-radio-checked-4)`,
- },
- [getCheckedSelector(5)]: {
- backgroundColor: `var(--color-background-radio-checked-5)`,
- },
-
- [getHoverSelector(1)]: {
- backgroundColor: `var(--color-background-radio-hover-1)`,
- },
-
- [getHoverSelector(2)]: {
- backgroundColor: `var(--color-background-radio-hover-2)`,
- },
- [getHoverSelector(3)]: {
- backgroundColor: `var(--color-background-radio-hover-3)`,
- },
- [getHoverSelector(4)]: {
- backgroundColor: `var(--color-background-radio-hover-4)`,
- },
- [getHoverSelector(5)]: {
- backgroundColor: `var(--color-background-radio-hover-5)`,
- },
- } as Record<Colors, SystemStyleObject>,
- },
- },
 })
 
 export const inputRadioCheckmark: ReturnType<typeof defineRecipe> =
@@ -228,20 +154,6 @@ export const inputRadioCheckmark: ReturnType<typeof defineRecipe> =
  {} as Record<Variants, SystemStyleObject>,
  ),
  },
-
- defaultVariants: {
- color: DEFAULT_COLOR,
- },
-
- variants: {
- color: Object.values(Colors).reduce(
- (colors, colorName) => ({
- ...colors,
- [colorName]: {},
- }),
- {} as Record<Colors, SystemStyleObject>,
- ),
- },
  })
 
 export const inputRadioLabel: ReturnType<typeof defineRecipe> = defineRecipe({
@@ -281,18 +193,4 @@ export const inputRadioLabel: ReturnType<typeof defineRecipe> = defineRecipe({
  {} as Record<Variants, SystemStyleObject>,
  ),
  },
-
- defaultVariants: {
- color: DEFAULT_COLOR,
- },
-
- variants: {
- color: Object.values(Colors).reduce(
- (colors, colorName) => ({
- ...colors,
- [colorName]: {},
- }),
- {} as Record<Colors, SystemStyleObject>,
- ),
- },
 })

packages/fractal/src/components/InputRadio/InputRadio.stories.tsx

@@ -19,11 +19,11 @@ const children = (
 
 const childrenWithDisabled = (
  <>
- <InputRadio label="Luke Skywalker" value="skywalker" />
+ <InputRadio disabled label="Luke Skywalker" value="skywalker" />
  <InputRadio label="Obi-Wan Kenobi" value="kenobi" />
  <InputRadio disabled label="Yoda" value="yoda" />
  <InputRadio label="Mace Windoo" value="windoo" />
- <InputRadio disabled label="Qui-Gon Jin" value="jin" />
+ <InputRadio label="Qui-Gon Jin" value="jin" />
  </>
 )
 

packages/fractal/src/components/InputRadio/InputRadio.tsx

@@ -15,7 +15,6 @@ import { useContext } from 'react'
 
 import { PREFIX } from '@/constants'
 
-import { DEFAULT_COLOR } from './InputRadio.constants'
 import { GROUP_NAME } from './InputRadio.recipe'
 import type { InputRadioProps } from './InputRadio.types'
 import { InputRadioVariantContext } from './InputRadioVariantContext'
@@ -27,7 +26,6 @@ import { InputRadioVariantContext } from './InputRadioVariantContext'
  * You must use this component with the `InputRadioGroup` component.
  */
 export default function InputRadio({
- color = DEFAULT_COLOR,
  disabled = false,
  fullWidth = false,
  id = uniqueId('fractal-input-checkbox-'),
@@ -39,9 +37,8 @@ export default function InputRadio({
 
  const groupClassNames = cx(
  `${PREFIX}-${GROUP_NAME}`,
- inputRadioContainer({ color }),
+ inputRadioContainer(),
  `variant-${variant}`,
- `color-${color}`,
  props.className,
  disabled ? 'disabled' : '',
  fullWidth ? 'full-width' : '',
@@ -51,21 +48,18 @@ export default function InputRadio({
  <div className={groupClassNames}>
  <RxRadio.Item
  id={id}
- className={inputRadio({ color })}
+ className={inputRadio()}
  disabled={disabled}
  value={value}
  {...omit(['className'], props)}
  >
- <RxRadio.Indicator className={inputRadioCheckmark({ color })}>
+ <RxRadio.Indicator className={inputRadioCheckmark()}>
  <CheckIcon />
  </RxRadio.Indicator>
  </RxRadio.Item>
 
  <RxLabel
- className={cx(
- typography({ variant: 'body-1' }),
- inputRadioLabel({ color }),
- )}
+ className={cx(typography({ variant: 'body-1' }), inputRadioLabel())}
  htmlFor={id}
  >
  {label}

packages/fractal/src/components/InputRadio/InputRadio.types.ts

@@ -4,11 +4,9 @@ import {
 } from '@radix-ui/react-radio-group'
 import type { ReactNode } from 'react'
 
-import { Colors, Variants } from './InputRadio.constants'
+import { Variants } from './InputRadio.constants'
 
 export interface InputRadioProps extends RxRadioProps {
- /** The color of the radio button to use. */
- color?: `${Colors}`
  /** Prevents the user from interacting with the radio button. */
  disabled?: boolean
  /** Indicates if the radio button should take all the available width. */

packages/fractal/src/conditions.ts

@@ -107,6 +107,11 @@ export function extendConditions(
  groupClosed: '.group.closed &',
  peerClosed: '.peer.closed ~ &',
 
+ checkedNotDisabled:
+ '&:is(:checked, [data-checked], [aria-checked=true]):not(:is(:disabled, [disabled], .disabled))',
+ checkedDisabled:
+ '&:is(:checked, [data-checked], [aria-checked=true]):is(:disabled, [disabled], .disabled)',
+
  /* eslint-enable sort-keys, sort-keys/sort-keys-fix, perfectionist/sort-objects */
  }