From 3bf0f6f68b45cb67a69b65d2c3890b3e97aeddf1 Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Sat, 15 Jan 2022 19:59:29 +0100
Subject: [PATCH] chore(css-theme): Updated var names

---
 packages/css-theme/src/_theme-wrapper.scss    | 12 +--
 packages/css-theme/src/_variables.scss        | 72 +++++++--------
 .../src/components/_draft-design.scss         | 16 ++--
 packages/css-theme/src/components/_draft.scss | 90 +++++++++----------
 packages/css-theme/src/components/_fab.scss   |  6 +-
 packages/css-theme/src/elements/_a.scss       |  8 +-
 packages/css-theme/src/elements/_button.scss  | 26 +++---
 packages/css-theme/src/elements/_jargon.scss  |  8 +-
 packages/css-theme/src/elements/_ul.scss      |  2 +-
 9 files changed, 120 insertions(+), 120 deletions(-)

diff --git a/packages/css-theme/src/_theme-wrapper.scss b/packages/css-theme/src/_theme-wrapper.scss
index 55037dcd805..8734399c30f 100644
--- a/packages/css-theme/src/_theme-wrapper.scss
+++ b/packages/css-theme/src/_theme-wrapper.scss
@@ -8,18 +8,18 @@
 }
 
 .theme-wrapper.light {
-  background: $fc-bg-light;
-  color: $fc-bg-dark;
+  background: $fs-bg-light;
+  color: $fs-bg-dark;
   .altbg {
-    background: $fc-altbg-light;
+    background: $fs-altbg-light;
   }
 }
 
 .theme-wrapper.dark {
-  background: $fc-bg-dark;
-  color: $fc-bg-light;
+  background: $fs-bg-dark;
+  color: $fs-bg-light;
   .altbg {
-    background: $fc-altbg-dark;
+    background: $fs-altbg-dark;
   }
 }
 
diff --git a/packages/css-theme/src/_variables.scss b/packages/css-theme/src/_variables.scss
index 8a951680575..5c2d86693c4 100644
--- a/packages/css-theme/src/_variables.scss
+++ b/packages/css-theme/src/_variables.scss
@@ -1,39 +1,39 @@
-$fc-blue: '#74c0fc';
-$fc-text-light: $oc-gray-9;
-$fc-text-dark: $oc-gray-0;
-$fc-bg-light: $oc-gray-0;
-$fc-bg-dark: darken($oc-gray-9, 3);
-$fc-altbg-light: $oc-gray-1;
-$fc-altbg-dark: $oc-gray-8;
-$fc-notice-light: $oc-yellow-7;
-$fc-notice-dark: $oc-lime-3;
-$fc-hoverbg-light: $oc-gray-1;
-$fc-hoverbg-dark: $oc-gray-8;
-$fc-accentbg-light: $oc-teal-5;
-$fc-accentbg-dark: $oc-teal-8;
-$fc-link-light: $oc-violet-8;
-$fc-link-dark: $oc-violet-2;
+$fs-blue: '#74c0fc';
+$fs-text-light: $oc-gray-9;
+$fs-text-dark: $oc-gray-0;
+$fs-bg-light: $oc-gray-0;
+$fs-bg-dark: darken($oc-gray-9, 3);
+$fs-altbg-light: $oc-gray-1;
+$fs-altbg-dark: $oc-gray-8;
+$fs-notice-light: $oc-yellow-7;
+$fs-notice-dark: $oc-lime-3;
+$fs-hoverbg-light: $oc-gray-1;
+$fs-hoverbg-dark: $oc-gray-8;
+$fs-accentbg-light: $oc-teal-5;
+$fs-accentbg-dark: $oc-teal-8;
+$fs-link-light: $oc-violet-8;
+$fs-link-dark: $oc-violet-2;
 
-$fc-info-light: $oc-blue-6;
-$fc-success-light: $oc-green-7;
-$fc-danger-light: $oc-red-6;
-$fc-warning-light: $oc-yellow-6;
-$fc-accent-light: $oc-grape-6;
+$fs-info-light: $oc-blue-6;
+$fs-success-light: $oc-green-7;
+$fs-danger-light: $oc-red-6;
+$fs-warning-light: $oc-yellow-6;
+$fs-accent-light: $oc-grape-6;
 
-$fc-draft-fabric-light: $oc-gray-9;
-$fc-draft-lining-light: $oc-lime-7;
-$fc-draft-interfacing-light: $oc-red-7;
-$fc-draft-canvas-light: $oc-yellow-7;
-$fc-draft-various-light: $oc-grape-7;
-$fc-draft-mark-light: $oc-blue-4;
-$fc-draft-contrast-light: $oc-orange-7;
-$fc-draft-note-light: $oc-pink-7;
+$fs-pattern-fabric-light: $oc-gray-9;
+$fs-pattern-lining-light: $oc-lime-7;
+$fs-pattern-interfacing-light: $oc-red-7;
+$fs-pattern-canvas-light: $oc-yellow-7;
+$fs-pattern-various-light: $oc-grape-7;
+$fs-pattern-mark-light: $oc-blue-4;
+$fs-pattern-contrast-light: $oc-orange-7;
+$fs-pattern-note-light: $oc-pink-7;
 
-$fc-draft-fabric-dark: $oc-gray-1;
-$fc-draft-lining-dark: $oc-lime-4;
-$fc-draft-interfacing-dark: $oc-red-4;
-$fc-draft-canvas-dark: $oc-yellow-4;
-$fc-draft-various-dark: $oc-grape-4;
-$fc-draft-mark-dark: $oc-blue-4;
-$fc-draft-contrast-dark: $oc-orange-4;
-$fc-draft-note-dark: $oc-pink-4;
+$fs-pattern-fabric-dark: $oc-gray-1;
+$fs-pattern-lining-dark: $oc-lime-4;
+$fs-pattern-interfacing-dark: $oc-red-4;
+$fs-pattern-canvas-dark: $oc-yellow-4;
+$fs-pattern-various-dark: $oc-grape-4;
+$fs-pattern-mark-dark: $oc-blue-4;
+$fs-pattern-contrast-dark: $oc-orange-4;
+$fs-pattern-note-dark: $oc-pink-4;
diff --git a/packages/css-theme/src/components/_draft-design.scss b/packages/css-theme/src/components/_draft-design.scss
index d2149752d6d..b027c620e04 100644
--- a/packages/css-theme/src/components/_draft-design.scss
+++ b/packages/css-theme/src/components/_draft-design.scss
@@ -132,34 +132,34 @@ div.design {
 .theme-wrapper.light svg.freesewing.draft {
   g.design.point {
     circle {
-      fill: $fc-link-light;
+      fill: $fs-link-light;
     }
     circle.hovertrap {
-      stroke: $fc-link-light;
+      stroke: $fs-link-light;
     }
   }
   path.design.hovertrap {
-    stroke: $fc-link-light;
+    stroke: $fs-link-light;
   }
   circle.design.path.cp {
-    fill: $fc-bg-light;
+    fill: $fs-bg-light;
   }
 }
 
 .theme-wrapper.dark svg.freesewing.draft {
   g.design.point {
     circle {
-      fill: $fc-link-dark;
+      fill: $fs-link-dark;
     }
     circle.hovertrap {
-      stroke: $fc-link-dark;
+      stroke: $fs-link-dark;
     }
   }
   path.design.hovertrap {
-    stroke: $fc-link-dark;
+    stroke: $fs-link-dark;
   }
   circle.design.path.cp {
-    fill: $fc-bg-dark;
+    fill: $fs-bg-dark;
   }
   path.focus.path {
     stroke-opacity: 0.5;
diff --git a/packages/css-theme/src/components/_draft.scss b/packages/css-theme/src/components/_draft.scss
index 2f7932548de..c7e4e9e1d40 100644
--- a/packages/css-theme/src/components/_draft.scss
+++ b/packages/css-theme/src/components/_draft.scss
@@ -1,4 +1,4 @@
-svg.freesewing.draft {
+svg.freesewing.pattern {
   max-width: 100%;
   /* Reset */
   path,
@@ -122,59 +122,59 @@ svg.freesewing.draft text {
   /* Stroke classes */
   path,
   circle {
-    stroke: $fc-draft-fabric-light;
+    stroke: $fs-pattern-fabric-light;
   }
   .fabric {
-    stroke: $fc-draft-fabric-light;
+    stroke: $fs-pattern-fabric-light;
   }
   .lining {
-    stroke: $fc-draft-lining-light;
+    stroke: $fs-pattern-lining-light;
   }
   .interfacing {
-    stroke: $fc-draft-interfacing-light;
+    stroke: $fs-pattern-interfacing-light;
   }
   .canvas {
-    stroke: $fc-draft-canvas-light;
+    stroke: $fs-pattern-canvas-light;
   }
   .various {
-    stroke: $fc-draft-various-light;
+    stroke: $fs-pattern-various-light;
   }
   .mark {
-    stroke: $fc-draft-mark-light;
+    stroke: $fs-pattern-mark-light;
   }
   .contrast {
-    stroke: $fc-draft-contrast-light;
+    stroke: $fs-pattern-contrast-light;
   }
   .note {
-    stroke: $fc-draft-note-light;
+    stroke: $fs-pattern-note-light;
   }
   /* Fill classes */
   .fill-fabric {
-    fill: $fc-draft-fabric-light;
+    fill: $fs-pattern-fabric-light;
   }
   .fill-lining {
-    fill: $fc-draft-lining-light;
+    fill: $fs-pattern-lining-light;
   }
   .fill-interfacing {
-    fill: $fc-draft-interfacing-light;
+    fill: $fs-pattern-interfacing-light;
   }
   .fill-canvas {
-    fill: $fc-draft-canvas-light;
+    fill: $fs-pattern-canvas-light;
   }
   .fill-various {
-    fill: $fc-draft-various-light;
+    fill: $fs-pattern-various-light;
   }
   .fill-mark {
-    fill: $fc-draft-mark-light;
+    fill: $fs-pattern-mark-light;
   }
   .fill-contrast {
-    fill: $fc-draft-contrast-light;
+    fill: $fs-pattern-contrast-light;
   }
   .fill-note {
-    fill: $fc-draft-note-light;
+    fill: $fs-pattern-note-light;
   }
   .fill-bg {
-    fill: $fc-bg-light;
+    fill: $fs-bg-light;
   }
   path.sample-focus {
     fill: #000;
@@ -182,14 +182,14 @@ svg.freesewing.draft text {
   /* scalebox plugin */
   path.scalebox.metric {
     stroke: none;
-    fill: $fc-bg-light;
+    fill: $fs-bg-light;
   }
   path.scalebox.imperial {
     stroke: none;
-    fill: $fc-bg-dark;
+    fill: $fs-bg-dark;
   }
   path.bartack {
-    stroke: $fc-draft-mark-light;
+    stroke: $fs-pattern-mark-light;
   }
   path.logo {
     fill: currentColor;
@@ -234,59 +234,59 @@ svg.freesewing.draft text {
   /* Stroke classes */
   path,
   circle {
-    stroke: $fc-draft-fabric-dark;
+    stroke: $fs-pattern-fabric-dark;
   }
   .fabric {
-    stroke: $fc-draft-fabric-dark;
+    stroke: $fs-pattern-fabric-dark;
   }
   .lining {
-    stroke: $fc-draft-lining-dark;
+    stroke: $fs-pattern-lining-dark;
   }
   .interfacing {
-    stroke: $fc-draft-interfacing-dark;
+    stroke: $fs-pattern-interfacing-dark;
   }
   .canvas {
-    stroke: $fc-draft-canvas-dark;
+    stroke: $fs-pattern-canvas-dark;
   }
   .various {
-    stroke: $fc-draft-various-dark;
+    stroke: $fs-pattern-various-dark;
   }
   .mark {
-    stroke: $fc-draft-mark-dark;
+    stroke: $fs-pattern-mark-dark;
   }
   .contrast {
-    stroke: $fc-draft-contrast-dark;
+    stroke: $fs-pattern-contrast-dark;
   }
   .note {
-    stroke: $fc-draft-note-dark;
+    stroke: $fs-pattern-note-dark;
   }
   /* Fill classes */
   .fill-fabric {
-    fill: $fc-draft-fabric-dark;
+    fill: $fs-pattern-fabric-dark;
   }
   .fill-lining {
-    fill: $fc-draft-lining-dark;
+    fill: $fs-pattern-lining-dark;
   }
   .fill-interfacing {
-    fill: $fc-draft-interfacing-dark;
+    fill: $fs-pattern-interfacing-dark;
   }
   .fill-canvas {
-    fill: $fc-draft-canvas-dark;
+    fill: $fs-pattern-canvas-dark;
   }
   .fill-various {
-    fill: $fc-draft-various-dark;
+    fill: $fs-pattern-various-dark;
   }
   .fill-mark {
-    fill: $fc-draft-mark-dark;
+    fill: $fs-pattern-mark-dark;
   }
   .fill-contrast {
-    fill: $fc-draft-contrast-dark;
+    fill: $fs-pattern-contrast-dark;
   }
   .fill-note {
-    fill: $fc-draft-note-dark;
+    fill: $fs-pattern-note-dark;
   }
   .fill-bg {
-    fill: $fc-bg-dark;
+    fill: $fs-bg-dark;
   }
   path.sample-focus {
     fill: #fff;
@@ -294,14 +294,14 @@ svg.freesewing.draft text {
   /* scalebox plugin */
   path.scalebox.metric {
     stroke: none;
-    fill: $fc-bg-dark;
+    fill: $fs-bg-dark;
   }
   path.scalebox.imperial {
     stroke: none;
-    fill: $fc-bg-light;
+    fill: $fs-bg-light;
   }
   path.bartack {
-    stroke: $fc-draft-mark-dark;
+    stroke: $fs-pattern-mark-dark;
   }
   path.logo {
     fill: currentColor;
@@ -347,11 +347,11 @@ svg.freesewing.draft text {
 g.snippet.notch > circle,
 g.snippet.button > circle,
 g.snippet.buttonhole > path {
-  color: $fc-draft-mark-light;
+  color: $fs-pattern-mark-light;
 }
 g.snippet.bnotch > circle,
 g.snippet.bnotch > path {
-  color: $fc-draft-note-light;
+  color: $fs-pattern-note-light;
 }
 /* Same for paperless grid, also in shadow DOM */
 rect.grid {
diff --git a/packages/css-theme/src/components/_fab.scss b/packages/css-theme/src/components/_fab.scss
index 218f9f2d1e5..180fb2775e6 100644
--- a/packages/css-theme/src/components/_fab.scss
+++ b/packages/css-theme/src/components/_fab.scss
@@ -19,10 +19,10 @@ button.fab.secondary {
 .style-wrapper.dark,
 .theme-wrapper.dark {
   button.fab.accent {
-    background-color: $fc-accent-light;
-    color: $fc-text-dark;
+    background-color: $fs-accent-light;
+    color: $fs-text-dark;
   }
   button.fab.accent:hover {
-    background-color: darken($fc-accent-light, 10%);
+    background-color: darken($fs-accent-light, 10%);
   }
 }
diff --git a/packages/css-theme/src/elements/_a.scss b/packages/css-theme/src/elements/_a.scss
index b40966a8e07..13294771e52 100644
--- a/packages/css-theme/src/elements/_a.scss
+++ b/packages/css-theme/src/elements/_a.scss
@@ -8,17 +8,17 @@
 }
 .style-wrapper.light a:not(.MuiButton-root),
 .theme-wrapper.light a:not(.MuiButton-root) {
-  color: $fc-link-light;
+  color: $fs-link-light;
 }
 .style-wrapper.dark a:not(.MuiButton-root),
 .theme-wrapper.dark a:not(.MuiButton-root) {
-  color: $fc-link-dark;
+  color: $fs-link-dark;
 }
 .style-wrapper.light a.anchor svg path,
 .theme-wrapper.light a.anchor svg path {
-  stroke: $fc-link-light;
+  stroke: $fs-link-light;
 }
 .style-wrapper.dark a.anchor svg path,
 .theme-wrapper.dark a.anchor svg path {
-  stroke: $fc-link-dark;
+  stroke: $fs-link-dark;
 }
diff --git a/packages/css-theme/src/elements/_button.scss b/packages/css-theme/src/elements/_button.scss
index 44abca5f424..16e41ba232f 100644
--- a/packages/css-theme/src/elements/_button.scss
+++ b/packages/css-theme/src/elements/_button.scss
@@ -3,44 +3,44 @@
 .theme-wrapper.dark,
 .theme-wrapper.light {
   .MuiButton-containedPrimary.info {
-    background-color: $fc-info-light;
+    background-color: $fs-info-light;
   }
   .MuiButton-containedPrimary.info:hover {
-    background-color: darken($fc-info-light, 10%);
+    background-color: darken($fs-info-light, 10%);
   }
 
   .MuiButton-containedPrimary.success {
-    background-color: $fc-success-light;
+    background-color: $fs-success-light;
   }
   .MuiButton-containedPrimary.success:hover {
-    background-color: darken($fc-success-light, 10%);
+    background-color: darken($fs-success-light, 10%);
   }
 
   .MuiButton-containedPrimary.warning {
-    background-color: $fc-warning-light;
+    background-color: $fs-warning-light;
   }
   .MuiButton-containedPrimary.warning:hover {
-    background-color: darken($fc-warning-light, 10%);
+    background-color: darken($fs-warning-light, 10%);
   }
 
   .MuiButton-containedPrimary.danger {
-    background-color: $fc-danger-light;
+    background-color: $fs-danger-light;
   }
   .MuiButton-containedPrimary.danger:hover {
-    background-color: darken($fc-danger-light, 10%);
+    background-color: darken($fs-danger-light, 10%);
   }
 
   .MuiButton-containedPrimary.accent {
-    background-color: $fc-accent-light;
+    background-color: $fs-accent-light;
   }
   .MuiButton-containedPrimary.accent:hover {
-    background-color: darken($fc-accent-light, 10%);
+    background-color: darken($fs-accent-light, 10%);
   }
 }
 
 .theme-wrapper.light {
   .MuiButton-containedPrimary {
-    background-color: $fc-bg-dark;
+    background-color: $fs-bg-dark;
   }
   .MuiButton-containedPrimary:hover {
     background-color: #000;
@@ -51,10 +51,10 @@
 }
 .theme-wrapper.dark {
   .MuiButton-containedPrimary {
-    background-color: $fc-bg-light;
+    background-color: $fs-bg-light;
   }
   .MuiButton-containedPrimary:hover {
-    background-color: darken($fc-bg-light, 10%);
+    background-color: darken($fs-bg-light, 10%);
   }
   .MuiButton-contained.Mui-disabled {
     background-color: rgba(2550, 255, 255, 0.12);
diff --git a/packages/css-theme/src/elements/_jargon.scss b/packages/css-theme/src/elements/_jargon.scss
index 5d22bf8c523..761d767cb69 100644
--- a/packages/css-theme/src/elements/_jargon.scss
+++ b/packages/css-theme/src/elements/_jargon.scss
@@ -18,8 +18,8 @@
   position: absolute;
   top: 1.5em;
   left: 0;
-  background: $fc-bg-light;
-  color: $fc-text-light;
+  background: $fs-bg-light;
+  color: $fs-text-light;
   border: 1px solid #dcdcdc;
   padding: 1rem;
   border-radius: 4px;
@@ -34,8 +34,8 @@
     text-decoration: none;
   }
   .jargon-term:hover .jargon-info {
-    background: $fc-bg-dark;
-    color: $fc-text-dark;
+    background: $fs-bg-dark;
+    color: $fs-text-dark;
     border: 1px solid #5a5a5a;
   }
 }
diff --git a/packages/css-theme/src/elements/_ul.scss b/packages/css-theme/src/elements/_ul.scss
index f60d55c2705..2e676aeae0c 100644
--- a/packages/css-theme/src/elements/_ul.scss
+++ b/packages/css-theme/src/elements/_ul.scss
@@ -24,7 +24,7 @@ ul.links {
 	}
   li.active:before,
   li:hover:before {
-		background: $fc-link-light;
+		background: $fs-link-light;
 	}
 }
 @include xs-screen {