Function TransparentColorsDisclosure

packages/dev/s2-docs/src/S2Colors.tsx:159–240

()

}

export function TransparentColorsDisclosure() {
  return (
    <Disclosure isQuiet>
      <DisclosureTitle>Transparent colors</DisclosureTitle>
      <DisclosurePanel>
        <p>These colors are useful for overlays or transparent effects.</p>
        <div className="sb-unstyled" style={{columnWidth: 150}}>
          <Color name="transparent" className={colorSwatch('transparent')} />
          <Color name="transparent-white-25" className={colorSwatch('transparent-white-25')} />
          <Color name="transparent-white-50" className={colorSwatch('transparent-white-50')} />
          <Color name="transparent-white-75" className={colorSwatch('transparent-white-75')} />
          <Color name="transparent-white-100" className={colorSwatch('transparent-white-100')} />
          <Color name="transparent-white-200" className={colorSwatch('transparent-white-200')} />
          <Color name="transparent-white-300" className={colorSwatch('transparent-white-300')} />
          <Color name="transparent-white-400" className={colorSwatch('transparent-white-400')} />
          <Color name="transparent-white-500" className={colorSwatch('transparent-white-500')} />
          <Color name="transparent-white-600" className={colorSwatch('transparent-white-600')} />
          <Color name="transparent-white-700" className={colorSwatch('transparent-white-700')} />
          <Color name="transparent-white-800" className={colorSwatch('transparent-white-800')} />
          <Color name="transparent-white-900" className={colorSwatch('transparent-white-900')} />
          <Color name="transparent-white-1000" className={colorSwatch('transparent-white-1000')} />
          <Color name="transparent-black-25" className={colorSwatch('transparent-black-25')} />
          <Color name="transparent-black-50" className={colorSwatch('transparent-black-50')} />
          <Color name="transparent-black-75" className={colorSwatch('transparent-black-75')} />
          <Color name="transparent-black-100" className={colorSwatch('transparent-black-100')} />
          <Color name="transparent-black-200" className={colorSwatch('transparent-black-200')} />
          <Color name="transparent-black-300" className={colorSwatch('transparent-black-300')} />
          <Color name="transparent-black-400" className={colorSwatch('transparent-black-400')} />
          <Color name="transparent-black-500" className={colorSwatch('transparent-black-500')} />
          <Color name="transparent-black-600" className={colorSwatch('transparent-black-600')} />
          <Color name="transparent-black-700" className={colorSwatch('transparent-black-700')} />
          <Color name="transparent-black-800" className={colorSwatch('transparent-black-800')} />
          <Color name="transparent-black-900" className={colorSwatch('transparent-black-900')} />
          <Color name="transparent-black-1000" className={colorSwatch('transparent-black-1000')} />
          <Color name="transparent-overlay-25" className={colorSwatch('transparent-overlay-25')} />
          <Color name="transparent-overlay-50" className={colorSwatch('transparent-overlay-50')} />
          <Color name="transparent-overlay-75" className={colorSwatch('transparent-overlay-75')} />
          <Color
            name="transparent-overlay-100"
            className={colorSwatch('transparent-overlay-100')}
          />
          <Color
            name="transparent-overlay-200"
            className={colorSwatch('transparent-overlay-200')}
          />
          <Color
            name="transparent-overlay-300"
            className={colorSwatch('transparent-overlay-300')}
          />
          <Color
            name="transparent-overlay-400"
            className={colorSwatch('transparent-overlay-400')}
          />
          <Color
            name="transparent-overlay-500"
            className={colorSwatch('transparent-overlay-500')}
          />
          <Color