regex101: JavaScript Match Workspace

Regular Expression

(theme-([\w-]+))(?:\s*\(\s*)([^)]+?)(?:\s*\))

New

.selector1 {
  background: -webkit-gradient(linear, left top, left bottom, from(theme-color(colorSecondary)), to(theme-color(colorPrimary)));
  background: linear-gradient(theme-color(colorSecondary), theme-color(colorPrimary));
}

.selector, .selector3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(theme-lighten(theme-color(colorSecondary), 0.05)), color-stop(25%, theme-color(colorSecondary)), color-stop(75%, theme-color(colorPrimary)), to(theme-darken(theme-color(colorPrimary), 0.05)));
  background-image: linear-gradient(theme-lighten(theme-color(colorSecondary), 0.05), theme-color(colorSecondary) 25%, theme-color(colorPrimary) 75%, theme-darken(theme-color(colorPrimary), 0.05));
}

.button--secondary {
  border-color: theme-color(colorPrimary);
}

Substitution

.selector1 {
  background: -webkit-gradient(linear, left top, left bottom, from(theme-color(colorSecondary)), to(theme-color(colorPrimary)));
  background: linear-gradient(theme-color(colorSecondary), theme-color(colorPrimary));
}

.selector, .selector3 {
  background-image: -webkit-gradient(linear, left top, left bottom, from(theme-lighten(theme-color(colorSecondary), 0.05)), color-stop(25%, theme-color(colorSecondary)), color-stop(75%, theme-color(colorPrimary)), to(theme-darken(theme-color(colorPrimary), 0.05)));
  background-image: linear-gradient(theme-lighten(theme-color(colorSecondary), 0.05), theme-color(colorSecondary) 25%, theme-color(colorPrimary) 75%, theme-darken(theme-color(colorPrimary), 0.05));
}

.button--secondary {
  border-color: theme-color(colorPrimary);
}