Function SemanticColorsDisclosure

packages/dev/s2-docs/src/S2Colors.tsx:106–125

()

}

export function SemanticColorsDisclosure() {
  return (
    <Disclosure isQuiet>
      <DisclosureTitle>Semantic colors</DisclosureTitle>
      <DisclosurePanel>
        <p>
          The following values are available across all color properties. Prefer to use semantic
          colors over global colors when they represent a specific meaning.
        </p>
        <div className="sb-unstyled" style={{columnWidth: 120}}>
          <ColorScale scale={getColorScale('accent-color')} />
          <ColorScale scale={getColorScale('informative-color')} />
          <ColorScale scale={getColorScale('negative-color')} />
          <ColorScale scale={getColorScale('notice-color')} />
          <ColorScale scale={getColorScale('positive-color')} />
        </div>
      </DisclosurePanel>
    </Disclosure>
  );
}

export function GlobalColorsDisclosure() {
  return (