Color context sensitive styled-components HoC

button.js

import styled from "styled-components";

export const withButtonStyle = (component) => styled(component)`
  position: relative;

  display: block;
  width: 100%;
  padding: 0.5rem 2rem;

  color: currentColor;
  background-color: transparent;

  border: none;
  border-radius: 5px;
  overflow: hidden;

  text-transform: uppercase;
  font-weight: bold;

  cursor: pointer;

  transition-property: background-color, color;
  transition-duration: 0.2s;

  z-index: 1;

  &::before,
  &::after {
    content: " ";
    display: block;
    position: absolute;
    top: 0rem;
    left: 0rem;
    right: 0rem;
    bottom: 0rem;
  }

  &::before {
    background-color: white;
    z-index: -1;

    transition-property: background-color;
    transition-duration: 0.2s;
  }

  &::after {
    border: 2px solid currentColor;
    border-radius: 5px;
  }

  &:hover {
    &::before {
      background-color: currentColor;
    }

    -webkit-text-fill-color: white;
    -webkit-background-clip: text;
    background-clip: text;

    color: currentColor;
    border-color: currentColor;
  }
`;

usage.js

import React from "react";
import { withButtonStyle } from "button.js"

const Button = (text) => (
  <button style={{ color: black; }}>{text}</button>
);

export default withButtonStyle(Button);