Function GlobalColorsDisclosure

packages/dev/s2-docs/src/S2Colors.tsx:127–157

()

}

export function GlobalColorsDisclosure() {
  return (
    <Disclosure isQuiet>
      <DisclosureTitle>Global colors</DisclosureTitle>
      <DisclosurePanel>
        <p>The following values are available across all color properties.</p>
        <div className="sb-unstyled" style={{columnWidth: 120}}>
          <ColorScale scale={getColorScale('gray')} />
          <ColorScale scale={getColorScale('blue')} />
          <ColorScale scale={getColorScale('red')} />
          <ColorScale scale={getColorScale('orange')} />
          <ColorScale scale={getColorScale('yellow')} />
          <ColorScale scale={getColorScale('chartreuse')} />
          <ColorScale scale={getColorScale('celery')} />
          <ColorScale scale={getColorScale('green')} />
          <ColorScale scale={getColorScale('seafoam')} />
          <ColorScale scale={getColorScale('cyan')} />
          <ColorScale scale={getColorScale('indigo')} />
          <ColorScale scale={getColorScale('purple')} />
          <ColorScale scale={getColorScale('fuchsia')} />
          <ColorScale scale={getColorScale('magenta')} />
          <ColorScale scale={getColorScale('pink')} />
          <ColorScale scale={getColorScale('turquoise')} />
          <ColorScale scale={getColorScale('brown')} />
          <ColorScale scale={getColorScale('silver')} />
          <ColorScale scale={getColorScale('cinnamon')} />
        </div>
      </DisclosurePanel>
    </Disclosure>
  );
}

export function TransparentColorsDisclosure() {
  return (