[angular-ngrx-scss]: add rem function and some default padding values (#1960)

* refactor: add rem function and some default padding values

* fix: add style preprocessor options for tests

Author: honzikec

angular-ngrx-scss/angular.json

@@ -32,7 +32,10 @@
             "assets": ["src/favicon.ico", "src/assets", "src/_redirects"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "allowedCommonJsDependencies": ["@primer/octicons", "prismjs"]
+            "allowedCommonJsDependencies": ["@primer/octicons", "prismjs"],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/shared/styles"]
+            }
           },
           "configurations": {
             "production": {
@@ -95,7 +98,10 @@
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
-            "scripts": []
+            "scripts": [],
+            "stylePreprocessorOptions": {
+              "includePaths": ["src/app/shared/styles"]
+            }
           }
         },
         "lint": {

angular-ngrx-scss/src/app/auth/auth.component.scss

@@ -1,4 +1,5 @@
-@use '../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .page {
   position: absolute;
@@ -18,9 +19,9 @@
 
 .button {
   width: 34%;
-  padding: 1rem;
+  padding: variables.$padding--l;
   border: 1px solid variables.$gray500;
-  border-radius: 0.375rem;
+  border-radius: functions.rem(5);
   font-weight: 500;
   font-size: 100%;
   background: variables.$black;
@@ -35,7 +36,7 @@
 
 .netlify-badge-container {
   position: fixed;
-  bottom: 1rem;
+  bottom: variables.$padding--l;
   left: 0;
   right: 0;
   display: flex;

angular-ngrx-scss/src/app/file-viewer/components/file-code/file-code.component.scss

@@ -1,4 +1,4 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
 
 :host {
   border: 1px solid variables.$gray100;

angular-ngrx-scss/src/app/file-viewer/components/file-explorer-about/file-explorer-about.component.scss

@@ -1,28 +1,29 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 a {
   color: variables.$gray500;
 }
 
 a > span,
 .link {
-  margin-right: 0.5rem;
+  margin-right: variables.$padding;
 }
 
 .mt-1 {
-  margin-top: 1rem;
+  margin-top: variables.$padding--l;
 }
 
 .topic {
-  padding: 0.25rem 0.5rem;
-  margin-right: 0.375rem;
+  padding: variables.$padding--s variables.$padding;
+  margin-right: functions.rem(5);
   background-color: variables.$blue100;
   transition-property: background-color, border-color, color, fill, stroke;
   color: variables.$blue600;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   font-weight: 500;
-  border-radius: 0.75rem;
+  border-radius: functions.rem(11);
   cursor: pointer;
 
   &:hover {

angular-ngrx-scss/src/app/file-viewer/components/file-text/file-text.component.scss

@@ -1,4 +1,5 @@
-@use '../../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 :host {
   border: 1px solid variables.$gray100;
@@ -13,15 +14,15 @@
   border-spacing: 5px;
   background-color: variables.$white;
   overflow: auto;
-  padding: 0.25rem 2rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  padding: variables.$padding--s functions.rem(28);
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   text-align: left;
 }
 
 .lineNumber {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: variables.$padding--l;
   color: variables.$gray500;
   text-align: right;
   user-select: none;

angular-ngrx-scss/src/app/file-viewer/file-explorer-container/file-explorer-container.component.scss

@@ -1,8 +1,8 @@
-@use '../../shared/styles/variables';
+@use 'variables';
 
 .file-list {
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
   display: flex;
   flex-direction: column;
 }

angular-ngrx-scss/src/app/file-viewer/file-explorer-nav/file-explorer-nav.component.scss

@@ -1,21 +1,22 @@
-@use '../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .file-explorer-container {
   display: flex;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
+  margin-top: functions.rem(21);
+  margin-bottom: functions.rem(21);
   align-items: center;
 }
 
 .btn {
   display: inline-flex;
   position: relative;
-  padding: 0.25rem 1rem;
+  padding: variables.$padding--s variables.$padding--l;
   background-color: variables.$gray50;
   color: variables.$gray700;
   font-weight: 500;
   align-items: center;
-  border-radius: 0.375rem;
+  border-radius: functions.rem(5);
   border-width: 1px;
   border-color: variables.$gray300;
 
@@ -26,24 +27,24 @@
 }
 
 .btnIcon {
-  margin-right: 0.25rem;
+  margin-right: variables.$padding--s;
   color: variables.$gray600;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: functions.rem(18);
+  height: functions.rem(18);
 }
 
 .btnCaret {
   font-size: 10px;
-  margin-top: 0.125rem;
-  margin-left: 0.375rem;
+  margin-top: functions.rem(2);
+  margin-left: functions.rem(5);
   color: variables.$gray600;
 }
 
 .separator {
-  margin-left: 0.375rem;
-  margin-right: 0.375rem;
+  margin-left: functions.rem(5);
+  margin-right: functions.rem(5);
   color: variables.$gray800;
-  font-size: 1.125rem;
+  font-size: functions.rem(16);
   line-height: 1.375;
 }
 
@@ -58,8 +59,8 @@
 
 .crumbs {
   display: flex;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: functions.rem(11);
+  padding-right: functions.rem(11);
 }
 
 .crumbLink {

angular-ngrx-scss/src/app/file-viewer/file-explorer/file-explorer.component.scss

@@ -1,3 +1,5 @@
+@use 'functions';
+
 .container.subpage {
-  gap: 2rem;
+  gap: functions.rem(28);
 }

angular-ngrx-scss/src/app/file-viewer/file-viewer/file-viewer.component.scss

@@ -1,47 +1,48 @@
-@use '../../shared/styles/variables';
+@use 'variables';
+@use 'functions';
 
 .file-viewer-container {
   overflow: hidden;
-  border-radius: 0.5rem;
+  border-radius: variables.$padding;
   border-width: 1px;
   border-color: variables.$gray300;
 }
 
 .fileHeader {
-  padding: 0.75rem 1rem;
+  padding: functions.rem(11) variables.$padding--l;
   background-color: variables.$gray100;
   color: variables.$gray800;
   font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   border-bottom-width: 1px;
   border-color: variables.$gray300;
 }
 
 .fileHeaderLines {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: variables.$padding;
+  padding-right: variables.$padding;
 }
 
 .fileHeaderBytes {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-left: variables.$padding;
+  padding-right: variables.$padding;
   border-left: 1px solid variables.$gray300;
 }
 
 .codeBlock {
   border-spacing: 5px;
   overflow: auto;
-  padding: 0.25rem 2rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
+  padding: variables.$padding--s functions.rem(28);
+  font-size: functions.rem(11);
+  line-height: variables.$padding--l;
   text-align: left;
 }
 
 .lineNumber {
   display: table-cell;
-  padding-right: 1rem;
+  padding-right: variables.$padding--l;
   color: variables.$gray500 !important;
   text-align: right;
   user-select: none;

angular-ngrx-scss/src/app/file-viewer/read-me/read-me.component.scss

@@ -1,23 +1,24 @@
-@use '../../shared/styles/variables.scss';
+@use 'variables';
+@use 'functions';
 
 .header {
   position: sticky;
   z-index: 3;
   top: 0;
   background-color: variables.$white;
   font-weight: 600;
-  padding: 0.625rem;
+  padding: functions.rem(9);
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
 
   .icon {
-    margin-right: 0.5rem;
+    margin-right: variables.$padding;
   }
 }
 
 .content {
-  padding: 0.625rem;
+  padding: functions.rem(9);
   border: 1px solid variables.$gray300;
-  border-radius: 0.25rem;
+  border-radius: variables.$padding--s;
   border-top: none;
 }