uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(statuspage): refactor shared styles and modernize components for consistent theming, spacing and APIs

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-23 09:26:37 +00:00
parent 891eb04d11
commit ed9728dd4a
24 changed files with 4177 additions and 3542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
ts_web/elements/upl-statuspage-pagetitle.ts
View File

@@ -1,6 +1,6 @@
import { DeesElement, property, html, customElement, type TemplateResult, css, cssManager, unsafeCSS } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import { demoFunc } from './upl-statuspage-pagetitle.demo.js';
declare global {
@@ -14,13 +14,13 @@ export class UplStatuspagePagetitle extends DeesElement {
public static demo = demoFunc;
@property({ type: String })
public pageTitle: string = 'System Status';
accessor pageTitle: string = 'System Status';
@property({ type: String })
public pageSubtitle: string = '';
@property({ type: String })
accessor pageSubtitle: string = '';
@property({ type: Boolean })
public centered: boolean = false;
accessor centered: boolean = false;
constructor() {
super();
@@ -31,13 +31,13 @@ export class UplStatuspagePagetitle extends DeesElement {
css`
:host {
display: block;
font-family: ${unsafeCSS(fonts.base)};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
}
.title-container {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px 24px 24px;
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
}
.title-container.centered {
@@ -47,30 +47,30 @@ export class UplStatuspagePagetitle extends DeesElement {
h1 {
font-size: 48px;
font-weight: 700;
letter-spacing: -0.02em;
letter-spacing: -0.03em;
line-height: 1.1;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
margin: 0 0 16px 0;
color: ${sharedStyles.colors.text.primary};
margin: 0 0 ${unsafeCSS(sharedStyles.spacing.md)} 0;
}
p {
font-size: 20px;
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
font-size: 18px;
color: ${sharedStyles.colors.text.secondary};
margin: 0;
line-height: 1.5;
line-height: 1.6;
}
@media (max-width: 640px) {
.title-container {
padding: 32px 16px 20px 16px;
padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.md)};
}
h1 {
font-size: 36px;
font-size: 32px;
}
p {
font-size: 18px;
font-size: 16px;
}
}
`