1 files changed, 339 insertions, 0 deletions
diff --git a/templates/@theme-base/reusable-components/_design-system-colors.scss b/templates/@theme-base/reusable-components/_design-system-colors.scss
new file mode 100644
index 0000000..650d1aa
--- /dev/null
+++ b/templates/@theme-base/reusable-components/_design-system-colors.scss
@@ -0,0 +1,339 @@
+/* PM and VPN colors */
+.bg-global-grey {
+  background-color: $pm-global-grey;
+}
+.bg-global-altgrey {
+  background-color: $pm-global-altgrey;
+}
+.bg-global-altgrey-gradient {
+  background-image: linear-gradient(to bottom, $pm-global-grey, $pm-global-altgrey);
+}
+.bg-global-light {
+  background-color: $pm-global-light;
+}
+.bg-global-border {
+  background-color: var(--bordercolor-input, $pm-global-border);
+}
+.bg-global-muted {
+  background-color: $pm-global-muted;
+}
+.bg-global-muted-dm {
+  background-color: var(--bgcolor-muted, $pm-global-muted);
+}
+.bg-global-success {
+  background-color: $pm-global-success;
+}
+.bg-global-warning {
+  background-color: $pm-global-warning;
+}
+.bg-global-attention {
+  background-color: $pm-global-attention;
+}
+.bg-global-info {
+  background-color: $pm-global-info;
+}
+.bg-pm-blue {
+  background-color: $pm-blue;
+}
+.bg-pm-blue-dark {
+  background-color: $pm-blue-dark;
+}
+.bg-pm-blue-light {
+  background-color: $pm-blue-light;
+}
+.bg-pm-blue-gradient {
+	background-image: $pm-blue-gradient;
+}
+
+.bg-global-highlight {
+  background-color: var(--bgcolor-highlight, $pm-global-light);
+}
+
+
+.bg-pv-green {
+  background-color: $pv-green;
+}
+.bg-pv-green-dark {
+  background-color: $pv-green-dark;
+}
+.bg-pv-green-light {
+  background-color: $pv-green-light;
+}
+
+.bg-white {
+  background-color: $white;
+}
+.bg-black {
+  background-color: $black;
+}
+
+.bg-white-dm {
+  background-color: var(--bgcolor-main-area, $white);
+}
+
+.bg-visionary {
+  background-color: $visionary;
+}
+.bg-plus {
+  background-color: $plus;
+}
+.bg-professional {
+  background-color: $professional;
+}
+.bg-vpnbasic {
+  background-color: $vpnbasic;
+}
+.bg-vpnplus {
+  background-color: $vpnplus;
+}
+.bg-primary {
+  background-color: $pm-primary;
+}
+.bg-inherit {
+  background: inherit;
+}
+.bg-currentColor {
+  background: currentColor;
+}
+
+.fill-global-grey {
+  fill: $pm-global-grey;
+}
+.fill-global-altgrey {
+  fill: $pm-global-altgrey;
+}
+.fill-global-light {
+  fill: $pm-global-light;
+}
+.fill-global-highlight {
+  fill: var(--bgcolor-highlight, $pm-global-light);
+}
+.fill-global-border {
+  fill: $pm-global-border;
+}
+.fill-global-muted {
+  fill: $pm-global-muted;
+}
+.fill-global-success {
+  fill: $pm-global-success;
+}
+.fill-global-warning {
+  fill: $pm-global-warning;
+}
+.fill-global-attention {
+  fill: $pm-global-attention;
+}
+.fill-pm-blue {
+  fill: $pm-blue;
+}
+.fill-pm-blue-dark {
+  fill: $pm-blue-dark;
+}
+.fill-pm-blue-light {
+  fill: $pm-blue-light;
+}
+
+.fill-pv-green {
+  fill: $pv-green;
+}
+.fill-pv-green-dark {
+  fill: $pv-green-dark;
+}
+.fill-pv-green-light {
+  fill: $pv-green-light;
+}
+
+.fill-white {
+  fill: $white;
+}
+.fill-white-dm {
+  fill: var(--bgcolor-main-area, $white);
+}
+.fill-black {
+  fill: $black;
+}
+.fill-currentColor {
+  fill: currentColor;
+}
+.fill-primary {
+  fill: $pm-primary;
+}
+
+.fill-visionary {
+  fill: $visionary;
+}
+.fill-plus {
+  fill: $plus;
+}
+.fill-professional {
+  fill: $professional;
+}
+.fill-vpnbasic {
+  fill: $vpnbasic;
+}
+.fill-vpnplus {
+  fill: $vpnplus;
+}
+.fill-beta.fill-beta { // specificity because bold class is applied and after
+  fill: $pm-primary-dark;
+  font-weight: normal;
+  font-style: italic;
+}
+
+.stroke-global-grey {
+  stroke: $pm-global-grey;
+}
+.stroke-global-altgrey {
+  stroke: $pm-global-altgrey;
+}
+.stroke-global-light {
+  stroke: $pm-global-light;
+}
+.stroke-global-border {
+  stroke: $pm-global-border;
+}
+.stroke-global-muted {
+  stroke: $pm-global-muted;
+}
+.stroke-global-success {
+  stroke: $pm-global-success;
+}
+.stroke-global-warning {
+  stroke: $pm-global-warning;
+}
+.stroke-global-attention {
+  stroke: $pm-global-attention;
+}
+.stroke-pm-blue {
+  stroke: $pm-blue;
+}
+.stroke-pm-blue-dark {
+  stroke: $pm-blue-dark;
+}
+.stroke-pm-blue-light {
+  stroke: $pm-blue-light;
+}
+
+.stroke-pv-green {
+  stroke: $pv-green;
+}
+.stroke-pv-green-dark {
+  stroke: $pv-green-dark;
+}
+.stroke-pv-green-light {
+  stroke: $pv-green-light;
+}
+
+.stroke-white {
+  stroke: $white;
+}
+.stroke-black {
+  stroke: $black;
+}
+.stroke-currentColor {
+  stroke: currentColor;
+}
+.stroke-primary {
+  stroke: $pm-primary;
+}
+
+
+.stroke-visionary {
+  stroke: $visionary;
+}
+.stroke-plus {
+  stroke: $plus;
+}
+.stroke-professional {
+  stroke: $professional;
+}
+.stroke-vpnbasic {
+  stroke: $vpnbasic;
+}
+.stroke-vpnplus {
+  stroke: $vpnplus;
+}
+
+
+
+.color-global-grey {
+  color: $pm-global-grey;
+}
+.color-global-grey-dm {
+  color: var(--color-main-area, $pm-global-grey);
+}
+.color-global-altgrey {
+  color: $pm-global-altgrey;
+}
+.color-global-light {
+  color: $pm-global-light;
+}
+.color-global-border {
+  color: $pm-global-border;
+}
+.color-global-muted {
+  color: $pm-global-muted;
+}
+.color-global-success {
+  color: $pm-global-success;
+}
+.color-global-warning {
+  color: $pm-global-warning;
+}
+.color-global-attention {
+  color: $pm-global-attention;
+}
+.color-global-info {
+  color: $pm-global-info;
+}
+.color-pm-blue {
+  color: $pm-blue;
+}
+.color-pm-blue-dark {
+  color: $pm-blue-dark;
+}
+.color-pm-blue-light {
+  color: $pm-blue-light;
+}
+.color-subheader {
+  color: var(--bgcolor-subheader, $text-sub-header);
+}
+
+.color-pv-green {
+  color: $pv-green;
+}
+.color-pv-green-dark {
+  color: $pv-green-dark;
+}
+.color-pv-green-light {
+  color: $pv-green-light;
+}
+
+.color-white {
+  color: $white;
+}
+.color-black {
+  color: $black;
+}
+.color-currentColor {
+  color: currentColor;
+}
+.color-primary {
+  color: $pm-primary;
+}
+
+.color-visionary {
+  color: $visionary;
+}
+.color-plus {
+  color: $plus;
+}
+.color-professional {
+  color: $professional;
+}
+.color-vpnbasic {
+  color: $vpnbasic;
+}
+.color-vpnplus {
+  color: $vpnplus;
+}