diff --git a/packages/client/hmi-client/src/assets/css/buttonset.scss b/packages/client/hmi-client/src/assets/css/buttonset.scss index 6c78c5948a..ea4cc96d33 100644 --- 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 index b60ea78eba..bbfd5e1556 100644 --- 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 index e43cd64636..87cb69f161 100644 --- 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); } } -} \ No newline at end of file +} 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 index 87827ad0ff..4bd2976568 100644 --- 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; } -} \ No newline at end of file +} 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 index 99ce7e38c5..f000e8d8ec 100644 --- 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; } } -} \ No newline at end of file +} 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 index 356f5697fe..b2e4383d43 100644 --- 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 index 244b01cfdf..b76f906b16 100644 --- 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); } -} \ No newline at end of file +} 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 index b8a4423677..64691c924f 100644 --- 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; } } -} \ No newline at end of file +} 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 index 9591f8647d..92c315f824 100644 --- 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); } -} \ No newline at end of file +} 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 index 7fd9927442..deec27e5ad 100644 --- 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; } -} \ No newline at end of file +} 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 index d43b8b9f0e..e0192adbf3 100644 --- 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); } -} \ No newline at end of file +} 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 index c5a032babc..35d27f5cc1 100644 --- 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; } } -} \ No newline at end of file +} 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 index 8d7136650a..7b024ee8f6 100644 --- 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); } -} \ No newline at end of file +} 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 index 19b6f0f3ce..76e9f3c573 100644 --- 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; } -} \ No newline at end of file +} 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 index bd08dc0b42..f7b8adcb24 100644 --- 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; -} \ No newline at end of file +} 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 index 768abb070d..0c9af70299 100644 --- 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; } -} \ No newline at end of file +} diff --git a/packages/client/hmi-client/src/components/asset/tera-asset.vue b/packages/client/hmi-client/src/components/asset/tera-asset.vue index 97b0c8b5fe..d32feed7f1 100644 --- 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 index ab7882da84..b66cfab482 100644 --- 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 index 64d192e930..6190b0946e 100644 --- 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 { diff --git a/packages/client/hmi-client/src/page/data-explorer/components/tera-search-results-list.vue b/packages/client/hmi-client/src/page/data-explorer/components/tera-search-results-list.vue index f4a70ff667..3865ab803c 100644 --- a/packages/client/hmi-client/src/page/data-explorer/components/tera-search-results-list.vue +++ b/packages/client/hmi-client/src/page/data-explorer/components/tera-search-results-list.vue @@ -294,7 +294,7 @@ ul { display: flex; flex-direction: column; justify-content: center; - gap: 0.25rem; + gap: var(--gap-1); align-items: center; margin-bottom: 8rem; flex-grow: 1; @@ -311,7 +311,7 @@ ul { .no-results-found { font-weight: var(--font-weight); - margin-top: 0.25rem; + margin-top: var(--gap-1); font-size: 1.5rem; } @@ -338,7 +338,7 @@ ul { .p-chip span { color: var(--text-color-primary); - margin-left: 0.25rem; + margin-left: var(--gap-1); } .search-container { diff --git a/packages/client/hmi-client/src/page/project/components/tera-notes-sidebar.vue b/packages/client/hmi-client/src/page/project/components/tera-notes-sidebar.vue index 7df979b165..9bce67156b 100644 --- a/packages/client/hmi-client/src/page/project/components/tera-notes-sidebar.vue +++ b/packages/client/hmi-client/src/page/project/components/tera-notes-sidebar.vue @@ -294,7 +294,7 @@ footer { display: flex; justify-content: space-between; gap: 0.5rem; - padding-top: 0.25rem; + padding-top: var(--gap-1); } .p-inputtext { diff --git a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue index c9741331f3..559e5b5765 100644 --- a/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue +++ b/packages/client/hmi-client/src/page/project/components/tera-resource-sidebar.vue @@ -229,12 +229,12 @@ function endDrag() { nav { display: flex; flex-direction: column; - gap: 1rem; + gap: var(--gap-4); } header { - padding-left: 0.5rem; - padding-right: 0.5rem; + padding-left: var(--gap-2); + padding-right: var(--gap-2); display: flex; flex-direction: row; @@ -253,10 +253,10 @@ header { position: absolute; right: 48px; margin-top: 0.65rem; - height: 0.5rem; + height: var(--gap-2); } .clear-icon .pi-times { - font-size: 0.75rem; + font-size: var(--gap-3); color: var(--text-color-subdued); cursor: pointer; z-index: 100; @@ -268,7 +268,7 @@ header { .removeResourceButton { color: var(--text-color-subdued); - margin-right: 0.75rem; + margin-right: var(--gap-3); font-size: 0.75rem; } @@ -294,18 +294,18 @@ header { :deep(.p-accordion .p-accordion-content) { display: flex; flex-direction: column; - padding: 0 0 1rem; + padding: 0 0 var(--gap-4); } :deep(.p-accordion .p-accordion-header .p-accordion-header-link) { font-size: var(--font-body-small); - padding: 0.5rem 1rem; + padding: var(--gap-2) var(--gap-4); } :deep(.p-accordion .p-accordion-header .p-accordion-header-link aside) { color: var(--text-color-subdued); font-size: var(--font-caption); - margin-left: 0.25rem; + margin-left: var(--gap-1); } :deep(.asset-button.p-button) { @@ -319,7 +319,7 @@ header { :deep(.asset-button.p-button > span) { display: inline-flex; width: 100%; - padding: 0.375rem 1rem; + padding: var(--gap-1-5) var(--gap-4); overflow: hidden; } @@ -370,7 +370,7 @@ header { display: flex; align-items: center; justify-content: space-between; - gap: 0.5rem; + gap: var(--gap-2); } .resource-panel-search { @@ -378,7 +378,7 @@ header { } :deep(.p-button-icon-left.icon) { - margin-right: 0.5rem; + margin-right: var(--gap-2); } .skeleton-container { diff --git a/packages/client/hmi-client/src/page/project/components/tera-upload-resources-modal.vue b/packages/client/hmi-client/src/page/project/components/tera-upload-resources-modal.vue index d518e034a9..ba3ecfb3d5 100644 --- a/packages/client/hmi-client/src/page/project/components/tera-upload-resources-modal.vue +++ b/packages/client/hmi-client/src/page/project/components/tera-upload-resources-modal.vue @@ -270,12 +270,12 @@ async function upload() { .supported-resources { display: flex; justify-content: space-between; - margin-bottom: 0.25rem; + margin-bottom: var(--gap-1); div { display: flex; align-items: end; - gap: 0.25rem; + gap: var(--gap-1); font-size: 0.75rem; } span:first-of-type {