themename.layouts.yml

layout_onecol:
  label: 'One column'
  path: layouts/onecol
  template: layout--onecol
  library: layout_discovery/onecol
  category: 'Columns: 1'
  default_region: content
  icon_map:
    - [content]
  regions:
    content:
      label: Content

  #
  # New stuff here.
  #

  # Add the CSS style dropdowns to the "add section" form
  section_styles:
    spacing:
      name: 'Spacing styles'
      required: false
      styles:
        small:
          name: 'Small'
          css_classes: 'section--sp-sm'
          default: false
        medium:
          name: 'Medium'
          css_classes: 'section--sp-md'
          default: true
        large:
          name: 'Large'
          css_classes: 'section--sp-lg'
          default: false
    color:
      name: 'Palette styles'
      required: false
      styles:
        white:
          name: 'White'
          css_classes: 'palette--white border--lt'
          default: false
        gray:
          name: 'Gray'
          css_classes: 'palette--gray border--md'
          default: false
        dark:
          name: 'Dark'
          css_classes: 'palette--dark border--dk'
          default: false
    width:
      name: 'Width'
      required: false
      styles:
        narrow:
          name: 'Small'
          css_classes: 'width--narrow'
          default: false
        medium:
          name: 'Medium'
          css_classes: 'width--medium'
          default: false
        wide:
          name: 'Wide'
          css_classes: 'width--wide'
          default: false

  # Add the CSS style dropdowns to the "add block" form
  block_styles:
    spacing:
      name: 'Spacing styles'
      required: false
      styles:
        small:
          name: 'small'
          css_classes: 'block--sp-sm'
          default: false
        medium:
          name: 'small'
          css_classes: 'block--sp-md'
          default: false
        large:
          name: 'small'
          css_classes: 'block--sp-lg'
          default: false
    color:
      name: 'Palette styles'
      required: false
      styles:
        white:
          name: 'small'
          css_classes: 'palette--white'
          default: false
        gray:
          name: 'small'
          css_classes: 'palette--gray'
          default: false
        dark:
          name: 'small'
          css_classes: 'palette--dark'
          default: false