How to use the defaults.background function in defaults

},

    value: {
      default: text('value', 'my value')
    },

    color: {
      default: color('color', defaultColors.color)
    },

    borderColor: {
      default: color('borderColor', defaultColors.highlight)
    },

    background: {
      default: color('background', defaultColors.background)
    },

    block: {
      default: boolean('block', false)
    }
  },
  template: `
    `
})

},

    value: {
      default: text('value', 'value-2')
    },

    options: {
      default: object('options', ['value-1', 'value-2', 'value-3', 'value-4'])
    },

    color: {
      default: color('color', defaultColors.background)
    },

    borderColor: {
      default: color('borderColor', defaultColors.background)
    },

    background: {
      default: color('background', defaultColors.color)
    }
  },
  methods: {
    change: action('@change')
  },
  template: `
    
  `
})

export default () => ({
  components: { PlayButton },
  props: {
    type: {
      default: select('type', types, 'loading')
    },
    color: {
      default: color('color', defaultVariables.color)
    },
    background: {
      default: color('background', defaultVariables.background)
    },
    label: {
      default: text('label', '')
    },
    size: {
      default: number('size', 50)
    }
  },
  template: `

value: 0.5,
          label: '50x'
        },
        {
          value: 0.75,
          label: '75x'
        },
        {
          value: 1,
          label: '100x'
        }
      ])
    },

    borderColor: {
      default: color('borderColor', defaultColors.background)
    },

    background: {
      default: color('background', defaultColors.color)
    }
  },
  methods: {
    change: action('@change'),
    input: action('@input'),
    dblclick: action('@dblclick')
  },

  template: `
    <div style="width: 350px; margin: 20px;">
      </div>

},
    step: {
      type: Number,
      default: 0.1
    },
    value: {
      type: Number,
      default: 0
    },
    pins: {
      type: Array,
      default: () => []
    },
    background: {
      type: String,
      default: defaultColors.background
    },
    borderColor: {
      type: String,
      default: defaultColors.color
    }
  },

  computed: {
    thumbStyle() {
      const left = relativePosition(this.value, this.min, this.max)
      return {
        left: `${left}%`,
        'background-color': this.background,
        'border-color': this.borderColor
      }
    }

},
    playtime: {
      type: Number,
      default: number('playtime', 2.5 * 60 * 1000)
    },
    ghost: {
      type: Number,
      default: number('ghost')
    },
    progressColor: {
      type: String,
      default: color('progressColor', defaultVariables.background)
    }
  },
  template: `
    <div style="background: ${col(defaultVariables.background)
      .fade(0.8)
      .string()}">
      
      </div>

},
    showLink: {
      type: Boolean,
      default: boolean('showLink', true)
    },
    playtime: {
      type: Number,
      default: number('playtime', 2.5 * 60 * 1000)
    },
    ghost: {
      type: Number,
      default: number('ghost')
    },
    progressColor: {
      type: String,
      default: color('progressColor', defaultVariables.background)
    }
  },
  template: `
    <div style="background: ${col(defaultVariables.background)
      .fade(0.8)
      .string()}">
      </div>

components: { ContentOption, Icon },
  props: {
    content: {
      default: text('content', 'Show')
    },
    title: {
      default: text('title', 'Content Title')
    },
    type: {
      default: text('type', 'show')
    },
    icon: {
      default: select('icon', icons, 'play')
    },
    background: {
      default: color('background', defaults.background)
    },
    color: {
      default: color('color', defaults.color)
    }
  },
  template: `
    
      
    `,

},
    options: {
      type: Array,
      default: () => []
    },
    color: {
      type: String,
      default: defaultColors.background
    },
    background: {
      type: String,
      default: defaultColors.color
    },
    borderColor: {
      type: String,
      default: defaultColors.background
    },
    value: {
      type: String,
      default: null
    }
  },
  computed: {
    style() {
      return {
        color: this.color,
        background: this.background,
        'border-color': this.borderColor
      }
    }
  },
  methods: {