create a fill plugin and transparency plugin given:
```
// BorderPlugin Implementation
class BorderPlugin {
  constructor(globalContext, instanceContext, options = {}) {
    globalContext.size = options?.size ?? '2px';
    globalContext.color = options?.color ?? '#000';
    this.globalContext = globalContext;
    this.instanceContext = instanceContext;
    this.host = null;
    this.setGlobalCSS();
  }

  /**
   * Updates the CSS rules based on current configurations.
   */
  setGlobalCSS() {
    this.baseRule = 'border: var(--border-size) solid var(--border-color);';

    // BorderPlugin doesn't have additional CSS rules
    this.additionalCSS = '';
  }

  attach(host) {
    if (host) {
      this.host = host;
    }
    host = this.host;
    const ctx = this.globalContext;
    host.style.setProperty('--border-size', ctx.size);
    host.style.setProperty('--border-color', ctx.color);
    return [this.baseRule, this.additionalCSS];
  }


  detach(host) {
    host.style.removeProperty('--border-size');
    host.style.removeProperty('--border-color');
  }


  getCSS() {
    return [this.baseRule, this.additionalCSS];
  }


  updateGlobal(options = {}) {
    const ctx = this.globalContext;
    const {size, color} = options;
    if (size) ctx.size = size;
    if (color) ctx.color = color;
    return this.attach();
  }

  updateRectElement(rectElement, params) {
    const {size, color} = params;

    if (size) {
      rectElement.style.setProperty('--border-size', typeof size === 'number' ? `${size}px`: size);
    }
    if (color) {
      rectElement.style.setProperty('--border-color', color);
    }

    Object.assign(this.instanceContext.get(rectElement), params);
  }
}

// VertexPlugin Implementation
class VertexPlugin {
  constructor(globalContext, instanceContext, options = {}) {
    globalContext.size = options?.size ?? '25px';
    globalContext.color = options?.color ?? '#3498db';
    this.globalContext = globalContext;
    this.instanceContext = instanceContext;
    this.host = null;
    this.setGlobalCSS();
  }

  /**
   * Updates the CSS rules based on current configurations.
   */
  setGlobalCSS() {
    // VertexPlugin doesn't have base CSS for .rect-region
    this.baseRule = `
      --extended-size: calc(var(--border-size, 2px) + var(--vertex-size));
      --offset: calc(-0.5 * var(--extended-size));
      --adjusted-width: calc(var(--width) - var(--border-size, 2px));
      --adjusted-height: calc(var(--height) - var(--border-size, 2px));
      `;

    this.additionalCSS = `
    .rect-region::before {
      content: '';
      position: absolute;
      width: var(--vertex-size);
      height: var(--vertex-size);
      background-color: var(--vertex-color);
      box-sizing: border-box;

      /* Intermediate variables */

      /* Positioning the first vertex */
      top: var(--offset);
      left: var(--offset);

      /* Creating three more vertices using box-shadow, positioned at each corner */
      box-shadow:
        var(--adjusted-width) 0 0 0 var(--vertex-color),
        var(--adjusted-width) var(--adjusted-height) 0 0 var(--vertex-color),
        0 var(--adjusted-height) 0 0 var(--vertex-color);
    }
    .rect-region::after {
      content: '';
      position: absolute;
      top: var(--offset);
      left: var(--offset);
      width: calc(100% + var(--extended-size));
      height: calc(100% + var(--extended-size));
    }
  `;
  }

  attach(host) {
    if (host) {
      this.host = host;
    }
    host = this.host;
    const ctx = this.globalContext;
    host.style.setProperty('--vertex-size', ctx.size);
    host.style.setProperty('--vertex-color', ctx.color);
    return [this.baseRule, this.additionalCSS];
  }

  detach(host) {
    host.style.removeProperty('--vertex-size');
    host.style.removeProperty('--vertex-color');
  }

  getCSS() {
    return [this.baseRule, this.additionalCSS];
  }

  updateGlobal(options = {}) {
    const ctx = this.globalContext;
    const {size, color} = options;
    if (size) ctx.size = size;
    if (color) ctx.color = color;
    return this.attach();
  }


  updateRectElement(rectElement, params) {
    const {size, color} = params;

    if (size) {
      rectElement.style.setProperty('--vertex-size', typeof size === 'number' ? `${size}px`: size);
    }
    if (color) {
      rectElement.style.setProperty('--vertex-color', color);
    }

    Object.assign(this.instanceContext.get(rectElement), params);
  }

}
```

try to refactor them to reduce the amount of repetitive code and keep DRY