Refactor gap css styles (#3892)

Co-authored-by: Yohann Paris <github@yohannparis.com>
DARPA-ASKEM · Jun 21, 2024 · 0e74894 · 0e74894
1 parent b0926b2
commit 0e74894
Show file tree

Hide file tree

Showing 23 changed files with 92 additions and 73 deletions.
diff --git a/packages/client/hmi-client/src/assets/css/buttonset.scss b/packages/client/hmi-client/src/assets/css/buttonset.scss
@@ -36,6 +36,6 @@
     }
 
     .p-button.p-button-sm {
-        padding: 0.5rem 0.75rem;
+        padding: var(--gap-2) var(--gap-3);
     }
 }
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -976,4 +976,23 @@ $petri-inputBox: var(--surface-0);
 	--node-header-hover: var(--text-color-subdued);
 	--z-index-modal: 1000;
 	--keyboard-zindex: calc(var(--z-index-modal) + 100);
+
+	// tailwind gaps as variables used in app
+	--gap-0-5: 0.125rem; 			// 2px
+	--gap-1: 0.25rem;					// 4px
+	--gap-1-5: 0.375rem;			// 6px
+	--gap-2: 0.5rem;					// 8px
+	--gap-2-5: 0.625rem;			// 10px
+	--gap-3: 0.75rem;					// 12px
+	--gap-3-5: 0.875rem;			// 14px
+	--gap-4: 1rem; 						// 16px
+	--gap-5: 1.25rem;					// 20px
+	--gap-6: 1.5rem;					// 24px
+	--gap-7: 1.75rem;					// 28px
+	--gap-8: 2rem;						// 32px
+	--gap-9: 2.25rem;					// 36px
+	--gap-10: 2.5rem;					// 40px
+	--gap-11: 2.75rem;				// 44px
+	--gap-12: 3rem;						// 48px
+
 }
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/data/_datatable.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/data/_datatable.scss
@@ -280,24 +280,24 @@
          }
 
         .p-datatable-thead > tr > th {
-            padding: 0.125rem 0;
+            padding: var(--gap-0-5) 0;
             font-size: x-small;
         }
-        
+
         .p-datatable-tbody > tr > td {
-            padding: 0.125rem 0;
+            padding: var(--gap-0-5) 0;
             background-color: var(--surface-0);
             border: none;
         }
-        
+
         .p-datatable-thead > tr > th {
             background-color: var(--surface-0);
         }
-        
+
         .p-datatable-tbody > tr > t {
             border: none;
         }
-        
+
         .p-datatable-thead > tr > th {
             border: none;
         }
@@ -346,4 +346,4 @@
             @include scaledPadding($tableFooterPadding, $tableScaleLG);
         }
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/data/_tree.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/data/_tree.scss
@@ -69,7 +69,7 @@
 
     .p-tree-filter-container {
         margin-bottom: $inlineSpacing;
-        padding: 0.5rem;
+        padding: var(--gap-2);
 
         .p-tree-filter {
             width: 100%;
@@ -89,4 +89,4 @@
     .p-tree-loading-icon {
         font-size: $loadingIconFontSize;
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_autocomplete.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/input/_autocomplete.scss
@@ -69,7 +69,7 @@
     border-radius: 0;
     border-bottom-left-radius: 1.5rem;
     border-bottom-right-radius: 1.5rem;
-    padding-bottom: 0.25rem;
+    padding-bottom: var(--gap-1);
     box-shadow: $inputOverlayShadow;
 
     .p-autocomplete-items {
@@ -122,4 +122,4 @@
             font-weight: $submenuHeaderFontWeight;
         }
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/messages/_toast.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/messages/_toast.scss
@@ -18,7 +18,7 @@
             .p-toast-message-icon {
                 font-size: $toastIconFontSize;
                 // display:none;
-                margin-left: 0.25rem;
+                margin-left: var(--gap-1);
                 width: 16px;
                 height: 16px;
             }

diff --git a/packages/client/hmi-client/src/assets/css/theme/designer/components/misc/_chip.scss b/packages/client/hmi-client/src/assets/css/theme/designer/components/misc/_chip.scss
@@ -6,7 +6,7 @@
     border-radius: $chipBorderRadius;
     font-weight: $fontWeightSemiBold;
     font-size: $fontCaption;
-    padding: 0 0.75rem;
+    padding: 0 var(--gap-3);
     border: solid 1px var(--surface-border-light);
 
     .p-chip-text,
@@ -54,4 +54,4 @@
         color:var(--text-color-primary);
     }
 
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_autocomplete.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_autocomplete.scss
@@ -21,7 +21,7 @@
 .p-float-label {
     .p-autocomplete-multiple-container {
         .p-autocomplete-token {
-            padding: .25rem 1rem;
+            padding: var(--gap-1) 1rem;
         }
     }
 }
@@ -69,4 +69,4 @@
             box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
         }
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_breadcrumb.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_breadcrumb.scss
@@ -5,6 +5,6 @@
             background: $emphasis-lower;
         }
 
-        padding: 0.25rem 0.5rem;
+        padding: var(--gap-1) var(--gap-2);
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_chips.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_chips.scss
@@ -15,7 +15,7 @@
 .p-float-label {
     .p-chips-multiple-container {
         .p-chips-token {
-            padding: .25rem 1rem;
+            padding: var(--gap-1) 1rem;
         }
     }
 }
@@ -51,4 +51,4 @@
     &:not(.p-disabled).p-focus {
         box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_dropdown.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_dropdown.scss
@@ -41,6 +41,6 @@
 
 .p-dropdown-sm {
     .p-dropdown-label {
-        padding: 0.5rem;
+        padding: var(--gap-2);
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_float_label.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_float_label.scss
@@ -25,16 +25,16 @@
         .p-inputtext {
             @include filled-input-float-label();
         }
-    
+
         input:focus ~ label,
         input.p-filled ~ label,
         textarea:focus ~ label,
         textarea.p-filled ~ label,
         .p-inputwrapper-focus ~ label,
         .p-inputwrapper-filled ~ label {
-            top: .25rem !important;
+            top: var(--gap-1) !important;
             margin-top: 0;
             background: transparent;
         }
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_mixins.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_mixins.scss
@@ -33,7 +33,7 @@
         border-color: transparent;
     }
 }
-    
+
 @mixin filled-input-interaction() {
     &:enabled:hover {
         background-color: $inputFilledHoverBg;
@@ -98,16 +98,16 @@
             background-image: none;
             background: transparent;
         }
-    } 
+    }
 }
 
 @mixin filled-input-float-label() {
     @if (nth($inputPadding, 1) == 1rem) {
-        padding-top: 1.5rem;
-        padding-bottom: .5rem;
+        padding-top: var(--gap-6);
+        padding-bottom: var(--gap-2);
     }
     @else if (nth($inputPadding, 1) == .75rem) {
-        padding-top: 1.25rem;
-        padding-bottom: .25rem;
+        padding-top: var(--gap-5);
+        padding-bottom: var(--gap-1);
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_multiselect.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_multiselect.scss
@@ -13,7 +13,7 @@
     }
 }
 
-.p-multiselect-panel { 
+.p-multiselect-panel {
     .p-multiselect-items {
         .p-multiselect-item {
             .p-ink {
@@ -53,9 +53,9 @@
 .p-float-label {
     .p-multiselect-label {
         .p-multiselect-token {
-            padding: .25rem 1rem;
-            margin-top: .25rem;
-            margin-bottom: .25rem;
+            padding: var(--gap-1) 1rem;
+            margin-top: var(--gap-1);
+            margin-bottom: var(--gap-1);
         }
     }
 }
@@ -67,25 +67,25 @@
                 @include filled-input-float-label();
             }
         }
-        
+
         .p-inputwrapper-filled {
             &.p-multiselect {
                 .p-multiselect-label {
                     @include filled-input-float-label();
                 }
-                
+
                 &.p-multiselect-chip {
                     .p-multiselect-token {
                         padding-top: 0;
                         padding-bottom: 0;
                         margin-top: 0;
                         margin-bottom: 0;
-    
+
                         .p-multiselect-token-icon {
                             font-size: 75%;
                         }
                     }
-                }   
+                }
             }
         }
     }
@@ -99,4 +99,4 @@
     &:not(.p-disabled).p-focus {
         box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
     }
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_tabview.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_tabview.scss
@@ -6,7 +6,7 @@
             .p-tabview-nav-link {
                 display: flex;
                 font-size: $fontBodyMedium;
-                gap: 0.5rem;
+                gap: var(--gap-2);
                 transition: background-color $transitionDuration;
                 border-radius: 0;
 
@@ -44,4 +44,4 @@
 
 .xsm {
     height: 2rem;
-}
+}
diff --git a/packages/client/hmi-client/src/assets/css/theme/extensions/_treeselect.scss b/packages/client/hmi-client/src/assets/css/theme/extensions/_treeselect.scss
@@ -35,9 +35,9 @@
 .p-float-label {
     .p-treeselect-label {
         .p-treeselect-token {
-            padding: .25rem 1rem;
-            margin-top: .25rem;
-            margin-bottom: .25rem;
+            padding: var(--gap-1) 1rem;
+            margin-top: var(--gap-1);
+            margin-bottom: var(--gap-1);
         }
     }
 }
@@ -49,25 +49,25 @@
                 @include filled-input-float-label();
             }
         }
-        
+
         .p-inputwrapper-filled {
             &.p-treeselect {
                 .p-treeselect-label {
                     @include filled-input-float-label();
                 }
-                
+
                 &.p-treeselect-chip {
                     .p-treeselect-token {
                         padding-top: 0;
                         padding-bottom: 0;
                         margin-top: 0;
                         margin-bottom: 0;
-    
+
                         .p-treeselect-token-icon {
                             font-size: 75%;
                         }
                     }
-                }   
+                }
             }
         }
     }
@@ -81,4 +81,4 @@
     &:not(.p-disabled).p-focus {
         box-shadow: inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor,inset 0 0 0 1px $inputErrorBorderColor;
     }
-}
+}
diff --git a/packages/client/hmi-client/src/components/asset/tera-asset.vue b/packages/client/hmi-client/src/components/asset/tera-asset.vue
@@ -343,7 +343,7 @@ main:deep(.p-accordion-content > textarea) {
 main:deep(.artifact-amount) {
 	font-size: var(--font-caption);
 	color: var(--text-color-subdued);
-	margin-left: 0.25rem;
+	margin-left: var(--gap-1);
 }
 
 main:deep(.p-button.p-button-outlined) {

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-datatable.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-datatable.vue
@@ -281,7 +281,7 @@ watch(
 }
 
 .p-datatable.p-datatable-sm:deep(.p-datatable-tbody > tr > td) {
-	padding: 0.25rem 0.5rem;
+	padding: var(--gap-1) 0.5rem;
 }
 /* Histograms & Charts  */
 .column-summary {

diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset-jupyter-panel.vue
@@ -587,7 +587,7 @@ const onDownloadResponse = (payload) => {
 }
 
 .variables-table div {
-	padding: 0.25rem;
+	padding: var(--gap-1);
 }
 
 .variables-header {