How to use the @pluralsight/ps-design-system-util.transparentize function in @pluralsight/ps-design-system-util

padding: '0',
    position: 'absolute',
    right: core.layout.spacingXSmall,
    top: core.layout.spacingXSmall,

    '& > svg': {
      fill: core.colors.gray03,
      height: '24px',
      width: '24px'
    }
  },

  // __overlay
  '.psds-dialog__overlay': {
    alignItems: 'center',
    backgroundColor: transparentize(0.5, core.colors.black),
    display: 'flex',
    height: '100%',
    justifyContent: 'center',
    left: 0,
    position: 'fixed',
    top: 0,
    width: '100%'
  }
}

'.psds-dialog': ({ fade }) => ({
    animation: `${fade || 'psds-dialog__keyframes__fade'} ${
      core.motion.speedFast
    } ease-out forwards`,
    background: core.colors.white,
    borderRadius: '2px',
    boxShadow: `0 1px 2px ${transparentize(0.5, core.colors.black)}`,
    color: core.colors.gray05,
    display: 'inline-block',
    fontSize: core.type.fontSizeSmall,
    fontWeight: core.type.fontWeightMedium,
    lineHeight: core.type.lineHeightTight,
    opacity: 0,
    overflowY: 'auto',
    padding: core.layout.spacingLarge,
    position: 'relative',
    transform: `translateY(${core.layout.spacingXSmall})`
  }),

import * as core from '@pluralsight/ps-design-system-core'
import { transparentize } from '@pluralsight/ps-design-system-util'

import * as vars from '../vars/index.js'

const shadowBlurWidth = '4px'
const tailDimension = '14px'
const diamondHeight = getDiamondHeight(tailDimension, tailDimension) + 'px'
const tailTransformTop = `translate(calc(((${diamondHeight} - ${tailDimension})) / 2), calc(50% + (${diamondHeight} - ${tailDimension}))) rotate(45deg)`
const tailTransformBottom = `translate(calc(((${diamondHeight} - ${tailDimension})) / 2), -50%) rotate(45deg)`

const boxShadow = `0px 1px ${shadowBlurWidth} ${transparentize(
  0.5,
  core.colors.black
)}`

export default {
  [`@keyframes psds-tooltip__keyframes__fade`]: {
    '100%': {
      transform: 'translateY(0)',
      opacity: 1
    }
  },

  '.psds-tooltip': ({ fade }) => ({
    position: 'relative',
    display: 'inline-block',
    maxWidth: '320px',

<button>Secondary</button>
              <button>Primary button</button>
            
          
        )}

        <style>{`
          :global(body) {
            margin: 0;
          }
          .page {
            display: flex;
            justify-content: center;
            height: 100vh;
            width: 100vw;
            background-color: ${transparentize(0.5, core.colors.black)};
          }
          .app {
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .buttons {
            display: flex;
            justify-content: flex-end;
            padding-top: ${core.layout.spacingMedium};
          }
          .buttons > :global(button) {
            margin-left: ${core.layout.spacingMedium};
          }
        `}</style>

'.psds-date-picker__calendar': ({ slide }) => ({
    position: 'relative',
    zIndex: '0',
    width: '286px',
    maxHeight: '352px',
    background: colors.white,
    color: colors.gray03,
    borderRadius: '2px',
    padding: `${layout.spacingMedium} ${layout.spacingLarge}`,
    fontSize: type.fontSizeXSmall,
    fontWeight: type.fontWeightMedium,
    boxShadow: `0 2px 4px ${transparentize(0.5, colors.black)}`,
    opacity: 0,
    transform: `translateY(calc(-1 * ${layout.spacingXSmall}))`,
    animation: `${slide || 'psds-date-picker__calendar__keyframes__slide'} ${
      motion.speedNormal
    } forwards`
  }),