refactor: reorder Sass imports for utilities, themes, and vendor to get imported in the correct ITCSS order

Author: sghoweri

packages/uikit-workshop/src/sass/pattern-lab--iframe-loader.scss

@@ -1,5 +1,5 @@
-@import 'scss/abstracts/variables';
-@import 'scss/abstracts/mixins';
+@import 'scss/01-abstracts/variables';
+@import 'scss/01-abstracts/mixins';
 
 @keyframes animateIn {
   from {

packages/uikit-workshop/src/sass/pattern-lab.scss

@@ -15,32 +15,31 @@
     #TABLE OF CONTENTS
 \*------------------------------------*/
 /**
- * ABSTRACTS.................Variables
+ * ABSTRACTS.................Variables and mixins
  * BASE......................Reset & Base elements
+ * VENDOR....................Styles out of PL control
  * COMPONENTS................Components
+ * THEMES....................Theming variations
  * UTILITIES.................Helper classes
- * VENDOR....................Styles out of PL control
  */
 
 /*------------------------------------*\
     #ABSTRACTS
 \*------------------------------------*/
-@import "scss/abstracts/variables";
-@import "scss/abstracts/mixins";
-
-
-
-
+@import 'scss/01-abstracts/variables';
+@import 'scss/01-abstracts/mixins';
 
 /*------------------------------------*\
     #BASE
 \*------------------------------------*/
-@import "scss/base/reset";
-@import "scss/base/body";
-
-
-
+@import 'scss/02-base/reset';
+@import 'scss/02-base/body';
 
+/*------------------------------------*\
+    #VENDOR
+\*------------------------------------*/
+@import 'scss/03-vendor/typeahead';
+@import 'scss/03-vendor/prism';
 
 /*------------------------------------*\
     #COMPONENTS
@@ -49,59 +48,41 @@
 /**
  * Pattern Lab Header
  */
-@import "scss/components/header";
-@import "scss/components/logo";
-@import "scss/components/navigation";
-@import "scss/components/ish-sizing";
-@import "scss/components/controls";
-@import "scss/components/tools";
+@import 'scss/04-components/header';
+@import 'scss/04-components/logo';
+@import 'scss/04-components/navigation';
+@import 'scss/04-components/ish-sizing';
+@import 'scss/04-components/controls';
+@import 'scss/04-components/tools';
 
 /**
  * Viewport
  */
-@import "scss/components/viewport";
+@import 'scss/04-components/viewport';
 
 /**
  * Pattern Styles
  */
-@import "scss/components/pattern";
-@import "scss/components/pattern-category";
-@import "scss/components/pattern-info";
-@import "scss/components/pattern-states";
-@import "scss/components/pattern-lineage";
-@import "scss/components/breadcrumbs";
-@import "scss/components/tabs";
-@import "scss/components/tools";
-@import "scss/components/annotations";
-@import "scss/components/modal";
-@import "scss/components/text-passage";
-
-
-
-
+@import 'scss/04-components/pattern';
+@import 'scss/04-components/pattern-category';
+@import 'scss/04-components/pattern-info';
+@import 'scss/04-components/pattern-states';
+@import 'scss/04-components/pattern-lineage';
+@import 'scss/04-components/breadcrumbs';
+@import 'scss/04-components/tabs';
+@import 'scss/04-components/tools';
+@import 'scss/04-components/annotations';
+@import 'scss/04-components/modal';
+@import 'scss/04-components/text-passage';
 
 /*------------------------------------*\
-    #UTILITIES
-\*------------------------------------*/
-@import "scss/utilities/visibility";
-
-
-
-
-
-/*------------------------------------*\
-    #VENDOR
+    #THEMES
 \*------------------------------------*/
-@import "scss/vendor/typeahead";
-@import "scss/vendor/prism";
-
-
-
-
+@import 'scss/05-themes/light-theme';
+@import 'scss/05-themes/density-theme';
+@import 'scss/05-themes/sidebar-theme';
 
 /*------------------------------------*\
-    #THEMES
+    #UTILITIES
 \*------------------------------------*/
-@import "scss/themes/light-theme";
-@import "scss/themes/density-theme";
-@import "scss/themes/sidebar-theme";
+@import 'scss/06-utilities/visibility';