This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch 4020-harmonize-font-sizes
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/4020-harmonize-font-sizes by
this push:
new 7b4de20f52 feat(#4020): Harmonize font sizes
7b4de20f52 is described below
commit 7b4de20f52356043c9f9ce53d10716544e084bcd
Author: Dominik Riemer <[email protected]>
AuthorDate: Thu Dec 4 13:35:40 2025 +0100
feat(#4020): Harmonize font sizes
---
...xtensions-service-details-dialog.component.html | 2 +-
...xtensions-service-details-dialog.component.scss | 1 -
.../file-upload/file-upload-dialog.component.html | 2 +-
.../edit-location-area.component.html | 2 +-
.../edit-location-area.component.scss | 1 -
.../endpoint-item/endpoint-item.component.html | 4 +-
.../general-configuration.component.scss | 2 +-
.../messaging-configuration.component.html | 2 +-
.../messaging-configuration.component.scss | 3 +-
.../edit-role-dialog.component.scss | 2 +-
.../edit-user-dialog.component.html | 2 +-
.../edit-user-dialog.component.scss | 1 -
.../edit-user-dialog/edit-user-dialog.component.ts | 1 +
.../existing-adapters.component.html | 12 +-
.../core/components/toolbar/toolbar.component.scss | 18 ---
ui/src/app/home/components/status.component.html | 14 +-
ui/src/app/home/components/status.component.scss | 7 -
ui/src/app/home/home.component.html | 11 +-
ui/src/app/home/home.component.scss | 13 --
ui/src/app/home/home.module.ts | 2 +
.../pipeline-overview.component.html | 4 +-
ui/src/scss/main.scss | 1 +
ui/src/scss/sp/_typography.scss | 166 +++++++++++++++++++++
ui/src/scss/sp/_variables.scss | 12 +-
ui/src/scss/sp/main.scss | 4 +
25 files changed, 216 insertions(+), 73 deletions(-)
diff --git
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
index dd57482cca..e079412736 100644
---
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
+++
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.html
@@ -40,7 +40,7 @@
<div fxFlex="80">
<div>
@for (tag of serviceReg.tags; track tag) {
- <div class="service-tag">
+ <div class="service-tag text-sm">
<span class="service-tag-prefix">{{
tag.prefix.toLowerCase()
}}</span>
diff --git
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
index 70a4047621..0fed18c7fa 100644
---
a/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
+++
b/ui/src/app/configuration/dialog/extensions-service-details/extensions-service-details-dialog.component.scss
@@ -21,7 +21,6 @@
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
- font-size: small;
border: 1px solid var(--color-bg-3);
display: inline-block;
padding-top: 5px;
diff --git
a/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
b/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
index 6adcd4bac3..3e180822b3 100644
---
a/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
+++
b/ui/src/app/configuration/dialog/file-upload/file-upload-dialog.component.html
@@ -19,7 +19,7 @@
<div class="sp-dialog-container">
<div class="sp-dialog-content p-15" fxLayout="column">
@if (uploadError) {
- <sp-warning-box style="font-size: smaller">
+ <sp-warning-box class="text-sm">
{{ uploadErrorMessage }}
</sp-warning-box>
}
diff --git
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
index 7d478c2df7..66c8a3e2ea 100644
---
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
+++
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.html
@@ -42,7 +42,7 @@
}
@if (site.areas.length === 0) {
<div fxLayoutAlign="start center">
- <div class="no-areas-defined">
+ <div class="no-areas-defined text-sm">
{{ 'No areas defined yet.' | translate }}
</div>
</div>
diff --git
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
index 8edf5ad359..1483f22ce2 100644
---
a/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
+++
b/ui/src/app/configuration/dialog/manage-site/edit-location/edit-location-area/edit-location-area.component.scss
@@ -19,7 +19,6 @@
.no-areas-defined {
margin-top: 5px;
margin-bottom: 5px;
- font-size: smaller;
}
.area {
diff --git
a/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
index b14a592e2c..5e9f8c8eac 100644
---
a/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
+++
b/ui/src/app/configuration/extensions-installation/endpoint-item/endpoint-item.component.html
@@ -156,9 +156,9 @@
<div fxLayout="column">
<div fxFlex fxLayout="column">
<h3>
- <b>{{ item.name }}</b>
+ {{ item.name }}
</h3>
- <p>{{ item.description }}</p>
+ <span class="text-md">{{ item.description }}</span>
</div>
</div>
</div>
diff --git
a/ui/src/app/configuration/general-configuration/general-configuration.component.scss
b/ui/src/app/configuration/general-configuration/general-configuration.component.scss
index b0dea608f3..8283390e12 100644
---
a/ui/src/app/configuration/general-configuration/general-configuration.component.scss
+++
b/ui/src/app/configuration/general-configuration/general-configuration.component.scss
@@ -25,5 +25,5 @@
background: var(--mat-sys-error-container);
color: var(--mat-sys-on-error-container);
padding: 5px;
- font-size: 10pt;
+ font-size: var(--font-size-sm);
}
diff --git
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
index 4bd35c1c2f..a9d36c528c 100644
---
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
+++
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.html
@@ -93,7 +93,7 @@
@if (loadingCompleted) {
<div
cdkDropList
- class="data-format-list"
+ class="data-format-list text-sm"
(cdkDropListDropped)="dropProtocol($event)"
>
@for (
diff --git
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
index a06c58b6bc..0537bbaa7e 100644
---
a/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
+++
b/ui/src/app/configuration/messaging-configuration/messaging-configuration.component.scss
@@ -36,7 +36,7 @@
}
.data-format-box {
- padding: 20px 10px;
+ padding: 1rem 0.5rem;
border-bottom: solid 1px var(--color-bg-3);
color: var(--color-default-text);
display: flex;
@@ -46,7 +46,6 @@
box-sizing: border-box;
cursor: move;
background: var(--color-bg-dialog);
- font-size: 14px;
}
.cdk-drag-preview {
diff --git
a/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
b/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
index ebb3e55286..df7edb4bd3 100644
---
a/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
+++
b/ui/src/app/configuration/security-configuration/edit-role-dialog/edit-role-dialog.component.scss
@@ -22,7 +22,7 @@
}
.list-section {
- font-size: 10pt;
+ font-size: var(--font-size-xs);
border: 1px solid var(--color-bg-2);
}
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
index 778cc555d7..3ffd55cc6e 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.html
@@ -65,7 +65,7 @@
</mat-form-field>
}
@if (emailChanged) {
- <div class="email-changed">
+ <div class="email-changed text-sm">
{{
"Changing the current user's email will
require a re-login."
| translate
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
index d9bff1285f..50e11791da 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.scss
@@ -26,6 +26,5 @@
.email-changed {
color: var(--color-warn);
- font-size: small;
margin-bottom: 10px;
}
diff --git
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
index d000dfeaa2..13a00a2909 100644
---
a/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
+++
b/ui/src/app/configuration/security-configuration/edit-user-dialog/edit-user-dialog.component.ts
@@ -269,6 +269,7 @@ export class EditUserDialogComponent implements OnInit {
private handleFormChanges(): void {
this.parentForm.valueChanges.subscribe(v => {
+ this.emailChanged = v.username !== this.clonedUser.username;
if (this.clonedUser instanceof UserAccount && !this.editMode) {
if (this.sendPasswordToUser !== v.sendPasswordToUser) {
this.sendPasswordToUser = v.sendPasswordToUser;
diff --git
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index e3e8f13933..5a72e94297 100644
---
a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++
b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -175,7 +175,9 @@
fxLayoutAlign="start start"
class="truncate"
>
- <b data-cy="adapter-name">{{ adapter.name }}</b>
+ <span data-cy="adapter-name">{{
+ adapter.name
+ }}</span>
<small> {{ adapter.description }}</small>
</div>
</td>
@@ -204,9 +206,9 @@
{{ 'Created' | translate }}
</th>
<td mat-cell *matCellDef="let adapter">
- <h5>
+ <span>
{{ adapter.createdAt | date: 'dd.MM.yyyy HH:mm' }}
- </h5>
+ </span>
</td>
</ng-container>
@@ -234,7 +236,7 @@
{{ 'Last message' | translate }}
</th>
<td mat-cell *matCellDef="let adapter">
- <h5>
+ <span>
{{
adapterMetrics[adapter.elementId] &&
adapterMetrics[adapter.elementId]
@@ -244,7 +246,7 @@
| date: 'dd.MM.yyyy HH:mm')
: 'n/a'
}}
- </h5>
+ </span>
</td>
</ng-container>
diff --git a/ui/src/app/core/components/toolbar/toolbar.component.scss
b/ui/src/app/core/components/toolbar/toolbar.component.scss
index 1b2256c490..bc7e599468 100644
--- a/ui/src/app/core/components/toolbar/toolbar.component.scss
+++ b/ui/src/app/core/components/toolbar/toolbar.component.scss
@@ -59,24 +59,6 @@
width: 100%;
}
-.version-info-text {
- color: var(--color-navigation-text);
- font-size: small;
- display: block;
- margin-top: 3px;
- margin-right: 15px;
- white-space: nowrap;
-}
-
-.active-page {
- font-size: small;
- background: var(--color-navigation-bg-selected);
- color: var(--color-navigation-selected);
- font-weight: bold;
- padding: 5px;
- border-radius: 2px;
-}
-
.user-email {
font-size: 11pt;
}
diff --git a/ui/src/app/home/components/status.component.html
b/ui/src/app/home/components/status.component.html
index a5e8d1c4a2..79879b43f6 100644
--- a/ui/src/app/home/components/status.component.html
+++ b/ui/src/app/home/components/status.component.html
@@ -24,14 +24,10 @@
<div fxLayout="row" fxFlex="100">
<div fxFlex fxLayout="column" fxLayoutAlign="start start">
<div fxFlex fxLayout="column">
- <div class="status-container-number">
+ <div class="status-container-number text-3xl">
<span>{{ resourceCount }}</span>
</div>
- <div
- class="status-container-text"
- fxFlex
- fxLayoutAlign="end end"
- >
+ <div class="text-xl" fxFlex fxLayoutAlign="end end">
<span>{{ statusBox.title }}</span>
</div>
</div>
@@ -41,7 +37,7 @@
<a
(click)="navigate(statusBox.createLink)"
fxLayoutAlign="start center"
- class="status-container-create-link"
+ class="status-container-create-link text-md"
>
<i class="material-icons">add_circle</i>
<span> {{ statusBox.createTitle }}</span>
@@ -52,6 +48,8 @@
</div>
</div>
<div fxLayoutAlign="start start">
- <i class="material-icons status-container-icon">{{ statusBox.icon
}}</i>
+ <i class="material-icons status-container-icon text-5xl">{{
+ statusBox.icon
+ }}</i>
</div>
</div>
diff --git a/ui/src/app/home/components/status.component.scss
b/ui/src/app/home/components/status.component.scss
index a256d2fe56..cb8de94ec8 100644
--- a/ui/src/app/home/components/status.component.scss
+++ b/ui/src/app/home/components/status.component.scss
@@ -27,7 +27,6 @@
}
.status-container-number {
- font-size: 36pt;
font-weight: bold;
}
@@ -36,12 +35,7 @@
opacity: 0.8;
}
-.status-container-text {
- font-size: 15pt;
-}
-
.status-container-create-link {
- font-size: 12pt;
color: var(--color-primary);
}
@@ -50,6 +44,5 @@
}
.status-container-icon {
- font-size: 50pt;
color: var(--mat-sys-outline-variant);
}
diff --git a/ui/src/app/home/home.component.html
b/ui/src/app/home/home.component.html
index 79ef640bc3..451496cfab 100644
--- a/ui/src/app/home/home.component.html
+++ b/ui/src/app/home/home.component.html
@@ -21,7 +21,9 @@
<div fxFlex="100">
<div fxFlex="100" fxLayout="column">
<div class="p-10 header-margin" fxLayoutAlign="center center">
- <div class="welcome-text">Welcome!</div>
+ <span class="text-3xl font-bold"
+ >{{ 'Welcome' | translate }}!</span
+ >
</div>
<div fxLayout="column" fxFlex="100" class="home-margin">
@if (showStatus) {
@@ -61,17 +63,14 @@
}}</mat-icon>
</div>
<span
+ class="text-md font-bold"
matListItemTitle
- style="
- font-weight: bold;
- font-size: 14pt;
- "
>
{{ link.name }}
</span>
<span
matListItemLine
- class="module-description"
+ class="text-sm font-medium"
>
{{ link.description }}
</span>
diff --git a/ui/src/app/home/home.component.scss
b/ui/src/app/home/home.component.scss
index 7a5b420823..9486e96739 100644
--- a/ui/src/app/home/home.component.scss
+++ b/ui/src/app/home/home.component.scss
@@ -16,14 +16,6 @@
*
*/
-.pageheadbar {
- padding: 0 0 0 10px;
- background-color: #f6f6f6;
- font-size: 14px;
- line-height: 24px;
- border-bottom: 1px solid #ccc;
-}
-
.mt-0 {
margin-top: 0;
}
@@ -33,11 +25,6 @@
border-top-right-radius: 5px;
}
-.welcome-text {
- font-size: 26pt;
- font-weight: bold;
-}
-
.header-margin {
margin-top: 20px;
}
diff --git a/ui/src/app/home/home.module.ts b/ui/src/app/home/home.module.ts
index 44cef5e0ba..9bfd0141f2 100644
--- a/ui/src/app/home/home.module.ts
+++ b/ui/src/app/home/home.module.ts
@@ -31,6 +31,7 @@ import { PlatformServicesModule } from
'@streampipes/platform-services';
import { WelcomeTourComponent } from
'./dialog/welcome-tour/welcome-tour.component';
import { SharedUiModule } from '@streampipes/shared-ui';
import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [
@@ -43,6 +44,7 @@ import { RouterModule } from '@angular/router';
MatListModule,
PlatformServicesModule,
SharedUiModule,
+ TranslateModule.forChild(),
RouterModule.forChild([
{
path: '',
diff --git
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
index 3cf79dcd1d..d57a4b9d99 100644
---
a/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
+++
b/ui/src/app/pipelines/components/pipeline-overview/pipeline-overview.component.html
@@ -170,7 +170,9 @@
{{ 'Last modified' | translate }}
</th>
<td mat-cell *matCellDef="let pipeline">
- <h5>{{ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm' }}</h5>
+ <span class="text-sm">{{
+ pipeline.createdAt | date: 'dd.MM.yyyy HH:mm'
+ }}</span>
</td>
</ng-container>
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 132079f868..83cb8b66be 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -64,3 +64,4 @@
@use './sp/forms-mat3';
@use 'gridstack/dist/gridstack.min.css';
+@use './sp/_typography.scss';
diff --git a/ui/src/scss/sp/_typography.scss b/ui/src/scss/sp/_typography.scss
new file mode 100644
index 0000000000..b9f576c9e7
--- /dev/null
+++ b/ui/src/scss/sp/_typography.scss
@@ -0,0 +1,166 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+:root {
+ --font-size-base: 1rem;
+
+ /* Fluid font sizes using clamp(min, fluid, max) */
+ --font-size-2xs: clamp(0.65rem, 0.63rem + 0.08vw, 0.7rem); /* ~10–11px */
+ --font-size-xs: clamp(
+ 0.72rem,
+ 0.69rem + 0.08vw,
+ 0.78rem
+ ); /* ~11.5–12.5px */
+ --font-size-sm: clamp(0.83rem, 0.79rem + 0.12vw, 0.9rem); /* ~13–14.5px */
+ --font-size-md: clamp(0.96rem, 0.92rem + 0.16vw, 1.05rem); /* ~15–17px */
+ --font-size-lg: clamp(1.08rem, 1.02rem + 0.22vw, 1.2rem); /* ~17–19px */
+ --font-size-xl: clamp(1.22rem, 1.14rem + 0.3vw, 1.4rem); /* ~19–22px */
+ --font-size-2xl: clamp(1.35rem, 1.28rem + 0.38vw, 1.7rem); /* ~22–27px */
+ --font-size-3xl: clamp(1.7rem, 1.55rem + 0.55vw, 2.1rem); /* ~27–34px */
+ --font-size-4xl: clamp(2.05rem, 1.85rem + 0.75vw, 2.7rem); /* ~33–43px */
+ --font-size-5xl: clamp(2.5rem, 2.25rem + 0.95vw, 3.25rem); /* ~40–52px */
+
+ /**
+ Default Angular Material typography scale mapping:
+ (for reference only; not used directly)
+
+ mat-sys-body-large-size: 1rem; md
+ mat-sys-body-medium-size: 0.875rem; sm
+ mat-sys-body-small-size: 0.75rem; xs
+
+ mat-sys-label-large-size: 0.875rem; sm
+ mat-sys-label-medium-size: 0.75rem; xs
+ mat-sys-label-small-size: 0.688rem; <xs
+
+
+ mat-sys-title-large-size: 1.375rem; 2xl
+ mat-sys-title-medium-size: 1rem; md
+ mat-sys-title-small-size: 0.875rem; sm
+
+ */
+
+ --line-height-tight: 1.2;
+ --line-height-normal: 1.4;
+ --line-height-relaxed: 1.6;
+
+ --font-weight-regular: 400;
+ --font-weight-medium: 500;
+ --font-weight-semibold: 600;
+ --font-weight-bold: 700;
+}
+
+.text-xs {
+ font-size: var(--font-size-xs);
+ line-height: var(--line-height-normal);
+}
+
+.text-sm {
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+}
+
+.text-md {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-normal);
+}
+
+.text-lg {
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-normal);
+}
+
+.text-xl {
+ font-size: var(--font-size-xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-2xl {
+ font-size: var(--font-size-2xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-3xl {
+ font-size: var(--font-size-3xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-4xl {
+ font-size: var(--font-size-4xl);
+ line-height: var(--line-height-tight);
+}
+
+.text-5xl {
+ font-size: var(--font-size-5xl);
+ line-height: var(--line-height-tight);
+}
+
+h1 {
+ font-size: var(--font-size-3xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-bold);
+ margin: 0 0 0.5em 0;
+}
+
+h2 {
+ font-size: var(--font-size-2xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-semibold);
+ margin: 0 0 0.5em 0;
+}
+
+h3 {
+ font-size: var(--font-size-xl);
+ line-height: var(--line-height-tight);
+ font-weight: var(--font-weight-semibold);
+ margin: 0 0 0.5em 0;
+}
+
+h4 {
+ font-size: var(--font-size-lg);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+ margin: 0 0 0.5em 0;
+}
+
+h5 {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+ margin: 0 0 0.5em 0;
+}
+
+h6 {
+ font-size: var(--font-size-sm);
+ line-height: var(--line-height-normal);
+ font-weight: var(--font-weight-medium);
+ margin: 0 0 0.5em 0;
+}
+
+p {
+ font-size: var(--font-size-md);
+ line-height: var(--line-height-relaxed);
+ margin: 0 0 1em 0;
+}
+
+.font-bold {
+ font-weight: var(--font-weight-bold);
+}
+
+.font-medium {
+ font-weight: var(--font-weight-medium);
+}
diff --git a/ui/src/scss/sp/_variables.scss b/ui/src/scss/sp/_variables.scss
index ca9cd8a27a..0dfe7d56f3 100644
--- a/ui/src/scss/sp/_variables.scss
+++ b/ui/src/scss/sp/_variables.scss
@@ -26,7 +26,17 @@ $sp-color-sink: #3f51b5;
$sp-color-error: #b71c1c;
:root {
- --mat-sys-body-medium-size: 10pt;
+ --mat-sys-body-large-size: var(--font-size-md);
+ --mat-sys-body-medium-size: var(--font-size-sm);
+ --mat-sys-body-small-size: var(--font-size-xs);
+
+ --mat-sys-label-large-size: var(--font-size-sm);
+ --mat-sys-label-medium-size: var(--font-size-xs);
+ --mat-sys-label-small-size: var(--font-size-2xs);
+
+ --mat-sys-title-large-size: var(--font-size-2xl);
+ --mat-sys-title-medium-size: var(--font-size-md);
+ --mat-sys-title-small-size: var(--font-size-sm);
--color-data-view: rgb(122, 206, 227);
--color-dashboard: rgb(76, 115, 164);
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index b2a9ee5b09..8eb99f6b10 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -19,6 +19,10 @@
@use './variables' as spThemeVars;
@use '../custom-theme/custom-variables' as customThemeVars;
+html {
+ font-size: 90%;
+}
+
.truncate {
overflow: hidden;
text-overflow: ellipsis;
