How to use the @pluralsight/ps-design-system-core.layout function in @pluralsight/ps-design-system-core

},

  // __panel / __panel-content
  [`.psds-drawer__panel`]: {
    background: transparentize(0.94, core.colors.gray02),
    transition: `box-shadow ${core.motion.speedNormal}`
  },
  [`.psds-drawer__panel.psds-theme--${themeNames.light}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.1)'
  },
  [`.psds-drawer__panel.psds-theme--${themeDefaultName}`]: {
    boxShadow: 'inset 0 1px 3px 0 rgba(0,0,0,0.5)'
  },
  [`.psds-drawer__panel-content`]: {
    marginRight: `calc(-1 * ${vars.toggleAreaWidth})`,
    paddingLeft: core.layout.spacingMedium,
    paddingRight: vars.toggleAreaWidth
  },

  // __toggle-button-container / __toggle-button
  [`.psds-drawer__toggle-button-container`]: {
    position: 'absolute',
    top: 0,
    right: core.layout.spacingMedium,
    bottom: 0,
    display: 'flex',
    alignItems: 'center'
  },
  [`.psds-drawer__toggle-button`]: {
    height: '24px',
    overflow: 'hidden',
    fontSize: core.type.fontSizeXSmall,

Font weight
      <p>Five Gotham SSm font weights are available for use.</p>
      

      Font size
      <p>Eight Gotham SSm font sizes are available.</p>
      

      Line height
      <p>
        Four line height increments are available. Each font size also has a
        default line height.
      </p>
      
      <div style="{{">
        <code>{`@import "@pluralsight/ps-design-system-core";
.mySelector { line-height: var(--psTypeLineHeightStandard); }`}</code>
      </div>

      Monospace font
      <p>
        Pluralsight’s monospace font family for the web is{' '}
        
          Source Code Pro
        
        .
      </p>

onClick={this.handleSubmit}
            >
              Save
            
            <button> {}}&gt;
              Cancel
            </button>
          
        
      
    )
  }
}`}
        <style>{`
          .example {
            padding: ${core.layout.spacingLarge} ${core.layout.spacingXLarge};
          }
        `}</style>
      
    )
  }
}

<button size="{Button.sizes.large}">
          Light
        </button>
      
    
    <div>
      
        <button size="{Button.sizes.large}">
          Dark
        </button>
      
    </div>
    <style>{`
      .contrast {
        display: flex;
        margin: ${core.layout.spacingLarge} 0;
      }
      .side {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: ${core.layout.spacingXXLarge} ${core.layout.spacingLarge};
      }
      .light {
        background: ${core.colors.bone};
      }
      .dark {
        background: ${core.colors.gray05};
      }
    `}</style>

import { transparentize } from '@pluralsight/ps-design-system-util/color.js'

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

export default {
  '@keyframes psds-button__keyframes__spin': {
    '100%': {
      transform: 'rotate(360deg)'
    }
  },
  '.psds-button': {
    position: 'relative',
    display: 'inline-flex',
    justifyContent: 'center',
    alignItems: 'stretch',
    padding: `${core.layout.spacingSmall} ${core.layout.spacingMedium}`,
    border: 0,
    borderRadius: '2px',
    fontSize: core.type.fontSizeSmall,
    fontWeight: core.type.fontWeightMedium,
    textAlign: 'center',
    color: core.colors.white,
    background: core.colors.orange,
    whiteSpace: 'nowrap',
    textDecoration: 'none',
    transition: `all ${core.motion.speedNormal}`,
    verticalAlign: 'middle',

    '&:not([disabled]):hover': {
      background: core.colors.orangeLight,
      cursor: 'pointer'
    },

export default {
  '.psds-verticaltabs': {
    height: '100%',
    overflowY: 'auto',
    padding: `${core.layout.spacingMedium} 0`,
    listStyle: 'none',
    margin: 0
  },
  [`.psds-verticaltabs.psds-theme--${themeNames.light}`]: {
    backgroundColor: core.colors.bone
  },
  [`.psds-verticaltabs.psds-theme--${themeDefaultName}`]: {
    backgroundColor: core.colors.gray05
  },
  '.psds-verticaltabs__divider': {
    margin: `${core.layout.spacingXSmall} 0`,
    borderWidth: '1px 0 0 0',
    borderStyle: 'solid'
  },
  [`.psds-verticaltabs__divider.psds-theme--${themeNames.light}`]: {
    borderColor: core.colors.gray01
  },
  [`.psds-verticaltabs__divider.psds-theme--${themeDefaultName}`]: {
    borderColor: core.colors.gray03
  },
  '.psds-verticaltabs__item': {
    boxSizing: 'border-box',
    display: 'flex',
    alignItems: 'center'
  },
  '.psds-verticaltabs__tier1': {
    lineHeight: '24px',

const LevelList = props => (
  <div>
    {props.children}
    <style>{`
      .list {
        padding-bottom: ${core.layout.spacingXLarge};
        border-bottom: 1px solid ${core.colors.gray01};
        margin-bottom: ${core.layout.spacingSmall};
      }
    `}</style>
  </div>
)

const Close = props => (
  <div>
    <button>
      
    </button>

    <style>{`
      .close {
      }
      .button {
        background: none;
        border: 0;
        padding: 0;
        margin: ${core.layout.spacingLarge};
        cursor: pointer;
        color: ${core.colors.gray03};
        line-height: 0;
        transition: all ${core.motion.speedXFast} linear;
      }
      .button:hover,
      .button:focus {
        color: ${core.colors.black};
      }
      .button:focus {
        background: ${core.colors.gray01};
        border-radius: 2px;
      }
      @media screen and (min-width: 769px) {
        .close {
          display: none;</style></div>

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

const newStackingContextForFocusRingVisibility = {
  position: 'relative',
  zIndex: '0'
}

export default {
  '.psds-form-button-row': {
    display: 'flex'
  },
  [`.psds-form-button-row--align-${vars.aligns.right}`]: {
    justifyContent: 'flex-end'
  },
  '.psds-form-button-row__button': {
    marginRight: core.layout.spacingLarge,
    '&:last-child': {
      marginRight: 0
    }
  },

  '.psds-form-divider': {
    height: '1px',
    width: '100%',
    backgroundColor: core.colors.gray04
  },
  [`.psds-form-divider.psds-theme--${themeNames.light}`]: {
    backgroundColor: core.colors.gray01
  },

  '.psds-form-vertical-layout': {
    ...newStackingContextForFocusRingVisibility,

.join(', ')}
        
      
    )
  }
}`}
        <style>{`
          .example {
            display: flex;
            margin-bottom: ${core.layout.spacingMedium};
          }
          .selection {
            flex: 1;
            display: flex;
            align-items: center;
            margin: ${core.layout.spacingMedium} 0 0 0;
            padding: ${core.layout.spacingLarge};
            font-size: ${core.type.fontSizeMedium};
            color: ${core.colors.gray04};
            background: ${core.colors.bone};
            border-radius: 12px;
          }
          .checkboxes {
            flex: 1;
            position: relative;
            z-index: 0;
            padding: ${core.layout.spacingLarge};
          }
        `}</style>
      
    )
  }