Function TextColorsDisclosure

packages/dev/s2-docs/src/S2Colors.tsx:79–104

()

}

export function TextColorsDisclosure() {
  return (
    <Disclosure isQuiet>
      <DisclosureTitle>Text colors</DisclosureTitle>
      <DisclosurePanel>
        <p>
          The color property supports the following values, in addition to the semantic and global
          colors. These colors are specifically chosen to be used as text colors, so prefer them
          over global colors where possible.
        </p>
        <div className="sb-unstyled" style={{columnWidth: 120}}>
          <Color name="accent" className={colorSwatch('accent', 'color')} />
          <Color name="neutral" className={colorSwatch('neutral', 'color')} />
          <Color name="neutral-subdued" className={colorSwatch('neutral-subdued', 'color')} />
          <Color name="negative" className={colorSwatch('negative', 'color')} />
          <Color name="disabled" className={colorSwatch('disabled', 'color')} />
          <Color name="heading" className={colorSwatch('heading', 'color')} />
          <Color name="title" className={colorSwatch('title', 'color')} />
          <Color name="body" className={colorSwatch('body', 'color')} />
          <Color name="detail" className={colorSwatch('detail', 'color')} />
          <Color name="code" className={colorSwatch('code', 'color')} />
        </div>
      </DisclosurePanel>
    </Disclosure>
  );
}

export function SemanticColorsDisclosure() {
  return (