How to use color-alpha - 3 common examples

const twoDecimals = v => Math.round(v * 100) / 100

export default {
  // The general styles used by the other theme groups, or directly by the
  // components. Themes can generally only extend this group to reach a decent
  // level of customization.
  general: {
    colorBorder: colors.grey[300],
    colorAccent: colors.primary[500],
    colorFocus: colors.primary[500],

    surfaceBackground: '#F8FCFD',
    surfacePanel: '#FFFFFF',
    surfacePanelOutline: '#D1D1D1',
    surfaceFloating: alpha('#445159', 0.9),

    dropShadow: (elevation, opacity = 1) => {
      if (elevation > 0) {
        return `
          drop-shadow(
            0
            ${twoDecimals(elevation * 0.6)}px
            ${twoDecimals(Math.max(1, elevation * 0.55))}px
            rgba(0, 0, 0, ${twoDecimals(0.2 * opacity)})
          )
        `
      }
      const color = `rgba(0, 0, 0, ${twoDecimals(0.05 * opacity)})`
      return `
        drop-shadow(  0     -0.5px 0 ${color} )
        drop-shadow( -0.5px  0     0 ${color} )

let lines;
    if (coord.lines instanceof Function) {
      lines = coord.lines(state);
    } else {
      lines = coord.lines || [];
    }
    state.lines = lines;
    //calc colors
    if (coord.lineColor instanceof Function) {
      state.lineColors = coord.lineColor(state);
    } else if (Array.isArray(coord.lineColor)) {
      state.lineColors = coord.lineColor;
    } else {
      let color =
        typeof coord.lineColor === 'number'
          ? alpha(coord.color, coord.lineColor)
          : coord.lineColor === false || coord.lineColor == null
          ? null
          : coord.color;
      state.lineColors = Array(lines.length).fill(color);
    }
    //calc ticks
    let ticks;
    if (coord.ticks instanceof Function) {
      ticks = coord.ticks(state);
    } else if (Array.isArray(coord.ticks)) {
      ticks = coord.ticks;
    } else {
      let tick =
        coord.ticks === true || coord.ticks === true ? state.axisWidth * 2 : coord.ticks || 0;
      ticks = Array(lines.length).fill(tick);
    }

coordinate: coord,
      shape: shape,
      grid: this
    };
    //calculate real offset/range
    state.range = coord.getRange(state);
    state.offset = clamp(
      coord.offset - state.range * clamp(0.5, 0, 1),
      Math.max(coord.min, -Number.MAX_VALUE + 1),
      Math.min(coord.max, Number.MAX_VALUE) - state.range
    );
    state.zoom = coord.zoom;
    //calc style
    state.axisColor =
      typeof coord.axisColor === 'number'
        ? alpha(coord.color, coord.axisColor)
        : coord.axisColor || coord.color;
    state.axisWidth = coord.axisWidth || coord.lineWidth;
    state.lineWidth = coord.lineWidth;
    state.tickAlign = coord.tickAlign;
    state.labelColor = state.color;
    //get padding
    if (typeof coord.padding === 'number') {
      state.padding = Array(4).fill(coord.padding);
    } else if (coord.padding instanceof Function) {
      state.padding = coord.padding(state);
    } else {
      state.padding = coord.padding;
    }
    //calc font
    if (typeof coord.fontSize === 'number') {
      state.fontSize = coord.fontSize;