fix: 🎨 styles related issues fix

styles related changes and settings file updated

Ref #24

.vscode/settings.json

@@ -8,7 +8,7 @@
   "editor.guides.indentation": true,
   "editor.renderWhitespace": "boundary",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
   "eslint.validate": [
     "javascript"

app/styles/DefaultModuleStyles.js

@@ -1,9 +1,13 @@
-import { defaultUtilityStyles } from "@wrappid/styles";
+import { DefaultCoreStyles } from "@wrappid/core";
 
-export const defaultAppStyles = {
-  /**************************************************
-   * Using defaultUtilityStyles example
-   * eg. testWrappidStyleClass: { ...defaultUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: { ...defaultUtilityStyles.bgBlack }
-};
+export class DefaultModuleStyles extends DefaultCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using defaultUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}

app/styles/LargeModuleStyles.js

@@ -1,9 +1,13 @@
-// -- import { largeUtilityStyles } from "@wrappid/styles";
+import { LargeCoreStyles } from "@wrappid/core";
 
-export const largeAppStyles = {
-  /**************************************************
-   * Using largeUtilityStyles example
-   * eg. usingLargeUtilityStyles: { ...largeUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: {/* your style goes here */}
-};
+export class LargeModuleStyles extends LargeCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using LargeUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}

app/styles/MediumModuleStyles.js

@@ -1,10 +1,13 @@
-// -- import { mediumUtilityStyles } from "@wrappid/styles";
+import { MediumCoreStyles } from "@wrappid/core";
 
-export const mediumAppStyles = {
-
-  /**************************************************
-   * Using mediumUtilityStyles example
-   * eg. usingMediumUtilityStyles: { ...mediumUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: {/* your style goes here */}
-};
+export class MediumModuleStyles extends MediumCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using defaultUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}

app/styles/SmallModuleStyles.js

@@ -1,9 +1,13 @@
-// -- import { smallUtilityStyles } from "@wrappid/styles";
+import { SmallCoreStyles } from "@wrappid/core";
 
-export const smallAppStyles = {
-  /**************************************************
-   * Using smallUtilityStyles example
-   * eg. usingSmallUtilityStyles: { ...smallUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: {/* your style goes here */}
-};
+export class SmallModuleStyles extends SmallCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using smallUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}

app/styles/XLargeModuleStyles.js

@@ -1,9 +1,13 @@
-// -- import { xLargeUtilityStyles } from "@wrappid/styles";
+import { XLargeCoreStyles } from "@wrappid/core";
 
-export const xLargeAppStyles = {
-  /**************************************************
-   * Using xLargeUtilityStyles example
-   * eg. usingXLargeUtilityStyles: { ...xLargeUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: {/* your style goes here */}
-};
+export class XLargeModuleStyles extends XLargeCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using XLargeUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}

app/styles/XXLargeModuleStyles.js

@@ -1,9 +1,13 @@
-// -- import { xXLargeUtilityStyles } from "@wrappid/styles";
+import { XXLargeCoreStyles } from "@wrappid/core";
 
-export const xXLargeAppStyles = {
-  /**************************************************
-   * Using xXLargeUtilityStyles example
-   * eg. usingXXLargeUtilityStyles: { ...xXLargeUtilityStyles.anyUtilityStyle },
-   *************************************************/
-  testWrappidStyleClass: {/* your style goes here */}
-};
+export class XXLargeModuleStyles extends XXLargeCoreStyles {
+  constructor(){
+    super();
+    this.style = {
+      /**************************************************
+       * Using XXLargeUtilityStyles example
+       *************************************************/
+      testWrappidStyleClass: { ...this.styles.devBorder },
+    };
+  }
+}