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

62
ts_web/elements/upl-statuspage-statsgrid.ts
View File

@@ -9,7 +9,7 @@ import {
unsafeCSS,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { fonts, colors, shadows, borderRadius, spacing, commonStyles } from '../styles/shared.styles.js';
import * as sharedStyles from '../styles/shared.styles.js';
import './internal/uplinternal-miniheading.js';
import { demoFunc } from './upl-statuspage-statsgrid.demo.js';
@@ -25,28 +25,28 @@ export class UplStatuspageStatsgrid extends DeesElement {
public static demo = demoFunc;
@property({ type: Number })
public uptime: number = 99.99;
accessor uptime: number = 99.99;
@property({ type: Number })
public avgResponseTime: number = 125;
accessor avgResponseTime: number = 125;
@property({ type: Number })
public totalIncidents: number = 0;
accessor totalIncidents: number = 0;
@property({ type: Number })
public affectedServices: number = 0;
accessor affectedServices: number = 0;
@property({ type: Number })
public totalServices: number = 0;
accessor totalServices: number = 0;
@property({ type: String })
public currentStatus: string = 'operational';
accessor currentStatus: string = 'operational';
@property({ type: Boolean })
public loading: boolean = false;
accessor loading: boolean = false;
@property({ type: String })
public timePeriod: string = '90 days';
accessor timePeriod: string = '90 days';
constructor() {
super();
@@ -54,32 +54,32 @@ export class UplStatuspageStatsgrid extends DeesElement {
public static styles = [
domtools.elementBasic.staticStyles,
commonStyles,
sharedStyles.commonStyles,
css`
:host {
display: block;
background: transparent;
font-family: ${unsafeCSS(fonts.base)};
color: ${colors.text.primary};
font-family: ${unsafeCSS(sharedStyles.fonts.base)};
color: ${sharedStyles.colors.text.primary};
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)} ${unsafeCSS(spacing.lg)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.lg)};
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.md)};
}
.stat-card {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
padding: ${unsafeCSS(spacing.lg)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
transition: all 0.2s ease;
}
@@ -97,10 +97,10 @@ export class UplStatuspageStatsgrid extends DeesElement {
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
margin-bottom: ${unsafeCSS(spacing.sm)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
display: flex;
align-items: center;
gap: ${unsafeCSS(spacing.xs)};
gap: ${unsafeCSS(sharedStyles.spacing.xs)};
}
.stat-value {
@@ -120,7 +120,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
.stat-change {
font-size: 12px;
margin-top: ${unsafeCSS(spacing.xs)};
margin-top: ${unsafeCSS(sharedStyles.spacing.xs)};
display: flex;
align-items: center;
gap: 4px;
@@ -141,14 +141,14 @@ export class UplStatuspageStatsgrid extends DeesElement {
.loading-skeleton {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: ${unsafeCSS(spacing.md)};
gap: ${unsafeCSS(sharedStyles.spacing.md)};
}
.skeleton-card {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: ${unsafeCSS(borderRadius.base)};
padding: ${unsafeCSS(spacing.lg)};
border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
padding: ${unsafeCSS(sharedStyles.spacing.lg)};
height: 100px;
}
@@ -157,7 +157,7 @@ export class UplStatuspageStatsgrid extends DeesElement {
width: 80px;
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
border-radius: 4px;
margin-bottom: ${unsafeCSS(spacing.sm)};
margin-bottom: ${unsafeCSS(sharedStyles.spacing.sm)};
animation: pulse 2s infinite;
}
@@ -183,37 +183,37 @@ export class UplStatuspageStatsgrid extends DeesElement {
}
.status-indicator.operational {
background: ${colors.status.operational};
background: ${sharedStyles.colors.status.operational};
}
.status-indicator.degraded {
background: ${colors.status.degraded};
background: ${sharedStyles.colors.status.degraded};
}
.status-indicator.partial_outage {
background: ${colors.status.partial};
background: ${sharedStyles.colors.status.partial};
}
.status-indicator.major_outage {
background: ${colors.status.major};
background: ${sharedStyles.colors.status.major};
}
.status-indicator.maintenance {
background: ${colors.status.maintenance};
background: ${sharedStyles.colors.status.maintenance};
}
@media (max-width: 640px) {
.container {
padding: 0 ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)} ${unsafeCSS(spacing.md)};
padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
}
.stats-grid {
grid-template-columns: 1fr;
gap: ${unsafeCSS(spacing.sm)};
gap: ${unsafeCSS(sharedStyles.spacing.sm)};
}
.stat-card {
padding: ${unsafeCSS(spacing.md)};
padding: ${unsafeCSS(sharedStyles.spacing.md)};
}
.stat-value {