Function BackgroundColorsDisclosure

packages/dev/s2-docs/src/S2Colors.tsx:5–77

()

import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export function BackgroundColorsDisclosure() {
  return (
    <Disclosure isQuiet>
      <DisclosureTitle>Background colors</DisclosureTitle>
      <DisclosurePanel>
        <p>
          The backgroundColor property supports the following values, in addition to the semantic
          and global colors. These colors are specifically chosen to be used as backgrounds, so
          prefer them over global colors where possible.
        </p>
        <div className="sb-unstyled" style={{columnWidth: 120}}>
          <Color name="base" className={colorSwatch('base')} />
          <Color name="layer-1" className={colorSwatch('layer-1')} />
          <Color name="layer-2" className={colorSwatch('layer-2')} />
          <Color name="pasteboard" className={colorSwatch('pasteboard')} />
          <Color name="elevated" className={colorSwatch('elevated')} />
          <Color name="accent" className={colorSwatch('accent')} />
          <Color name="accent-subtle" className={colorSwatch('accent-subtle')} />
          <Color name="neutral" className={colorSwatch('neutral')} />
          <Color name="neutral-subdued" className={colorSwatch('neutral-subdued')} />
          <Color name="neutral-subtle" className={colorSwatch('neutral-subtle')} />
          <Color name="negative" className={colorSwatch('negative')} />
          <Color name="negative-subtle" className={colorSwatch('negative-subtle')} />
          <Color name="informative" className={colorSwatch('informative')} />
          <Color name="informative-subtle" className={colorSwatch('informative-subtle')} />
          <Color name="positive" className={colorSwatch('positive')} />
          <Color name="positive-subtle" className={colorSwatch('positive-subtle')} />
          <Color name="notice" className={colorSwatch('notice')} />
          <Color name="notice-subtle" className={colorSwatch('notice-subtle')} />
          <Color name="gray" className={colorSwatch('gray')} />
          <Color name="gray-subtle" className={colorSwatch('gray-subtle')} />
          <Color name="red" className={colorSwatch('red')} />
          <Color name="red-subtle" className={colorSwatch('red-subtle')} />
          <Color name="orange" className={colorSwatch('orange')} />
          <Color name="orange-subtle" className={colorSwatch('orange-subtle')} />
          <Color name="yellow" className={colorSwatch('yellow')} />
          <Color name="yellow-subtle" className={colorSwatch('yellow-subtle')} />
          <Color name="chartreuse" className={colorSwatch('chartreuse')} />
          <Color name="chartreuse-subtle" className={colorSwatch('chartreuse-subtle')} />
          <Color name="celery" className={colorSwatch('celery')} />
          <Color name="celery-subtle" className={colorSwatch('celery-subtle')} />
          <Color name="green" className={colorSwatch('green')} />
          <Color name="green-subtle" className={colorSwatch('green-subtle')} />
          <Color name="seafoam" className={colorSwatch('seafoam')} />
          <Color name="seafoam-subtle" className={colorSwatch('seafoam-subtle')} />
          <Color name="cyan" className={colorSwatch('cyan')} />
          <Color name="cyan-subtle" className={colorSwatch('cyan-subtle')} />
          <Color name="blue" className={colorSwatch('blue')} />
          <Color name="blue-subtle" className={colorSwatch('blue-subtle')} />
          <Color name="indigo" className={colorSwatch('indigo')} />
          <Color name="indigo-subtle" className={colorSwatch('indigo-subtle')} />
          <Color name="purple" className={colorSwatch('purple')} />
          <Color name="purple-subtle" className={colorSwatch('purple-subtle')} />
          <Color name="fuchsia" className={colorSwatch('fuchsia')} />
          <Color name="fuchsia-subtle" className={colorSwatch('fuchsia-subtle')} />
          <Color name="magenta" className={colorSwatch('magenta')} />
          <Color name="magenta-subtle" className={colorSwatch('magenta-subtle')} />
          <Color name="pink" className={colorSwatch('pink')} />