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

feat(catalog): add admin dashboard components

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-07 15:35:37 +00:00
parent 5dbbe90b43
commit 3992adbafa
17 changed files with 2832 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/tokens.ts
+157 -84
View File
@@ -11,11 +11,11 @@ export const idpTheme = {
card: 'var(--idp-card)',
primary: 'var(--idp-primary)',
primaryFg: 'var(--idp-primary-fg)',
accent: 'var(--idp-accent)',
accentHover: 'var(--idp-accent-hover)',
accentSoft: 'var(--idp-accent-soft)',
info: 'var(--idp-info)',
destructive: 'var(--idp-destructive)',
accent: 'var(--idp-accent)',
accentHover: 'var(--idp-accent-hover)',
accentSoft: 'var(--idp-accent-soft)',
info: 'var(--idp-info)',
destructive: 'var(--idp-destructive)',
ok: 'var(--idp-ok)',
warn: 'var(--idp-warn)',
radius: 'var(--idp-radius)',
@@ -23,47 +23,104 @@ export const idpTheme = {
export const idpBaseStyles = css`
:host {
--idp-bg: #fafaf9;
--idp-bg-2: #f4f4f2;
--idp-fg: #0a0a0a;
--idp-fg-2: #3f3f46;
--idp-fg-3: #52525b;
--idp-muted: #f1f1ef;
--idp-muted-fg: #71717a;
--idp-border: #e4e4e7;
--idp-border-soft: #ededec;
--idp-border-strong: #d4d4d8;
--idp-card: #ffffff;
--idp-card-2: #f8f8f7;
--idp-primary: #18181b;
--idp-primary-fg: #fafafa;
--idp-accent: #0050b9;
--idp-accent-hover: #0069f2;
--idp-accent-fg: #ffffff;
--idp-accent-soft: #e6effb;
--idp-destructive: #ef4444;
--idp-ok: #16a34a;
--idp-ok-bg: #f0fdf4;
--idp-ok-border: #bbf7d0;
--idp-warn: #b45309;
--idp-warn-bg: #fef9c3;
--idp-warn-border: #fde68a;
--idp-error: #dc2626;
--idp-error-bg: #fef2f2;
--idp-error-border: #fecaca;
--idp-info: #1e40af;
--idp-info-bg: #eff6ff;
--idp-info-border: #bfdbfe;
--idp-chart-1: #0050b9;
--idp-chart-2: #16a34a;
--idp-chart-3: #dc2626;
--idp-chart-4: #b45309;
--idp-chart-5: #6e5be6;
--idp-spark-up: #16a34a;
--idp-spark-down: #dc2626;
--idp-spark-info: #0050b9;
--idp-radius: 8px;
--idp-radius-lg: 12px;
--sh-bg: ${cssManager.bdTheme('#FAFAF9', '#0A0A0A')};
--sh-bg-2: ${cssManager.bdTheme('#F4F4F2', '#111111')};
--sh-card: ${cssManager.bdTheme('#FFFFFF', '#121212')};
--sh-card-2: ${cssManager.bdTheme('#F8F8F7', '#161616')};
--sh-muted: ${cssManager.bdTheme('#F1F1EF', '#161616')};
--sh-muted-fg: ${cssManager.bdTheme('#71717A', 'hsl(0 0% 55%)')};
--sh-fg: ${cssManager.bdTheme('#0A0A0A', '#FAFAFA')};
--sh-fg-2: ${cssManager.bdTheme('#3F3F46', '#D4D4D8')};
--sh-fg-3: ${cssManager.bdTheme('#52525B', 'hsl(0 0% 70%)')};
--sh-fg-4: ${cssManager.bdTheme('#A1A1AA', 'hsl(0 0% 35%)')};
--sh-border: ${cssManager.bdTheme('#E4E4E7', '#262626')};
--sh-border-soft: ${cssManager.bdTheme('#EDEDEC', '#1C1C1C')};
--sh-border-strong: ${cssManager.bdTheme('#D4D4D8', '#333333')};
--sh-input: ${cssManager.bdTheme('#FFFFFF', '#161616')};
--sh-input-bg: ${cssManager.bdTheme('#FFFFFF', '#0A0A0A')};
--sh-hover: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
--sh-primary: ${cssManager.bdTheme('#18181B', '#FAFAFA')};
--sh-primary-fg: ${cssManager.bdTheme('#FAFAFA', '#18181B')};
--sh-accent: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
--sh-accent-h: ${cssManager.bdTheme('#0069F2', '#60A5FA')};
--sh-accent-fg: #FFFFFF;
--sh-accent-soft: ${cssManager.bdTheme('#E6EFFB', 'rgba(59,130,246,0.15)')};
--sh-accent-soft-fg: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
--sh-accent-ring: ${cssManager.bdTheme('rgba(0,80,185,0.2)', 'rgba(59,130,246,0.35)')};
--sh-ok: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
--sh-ok-bg: ${cssManager.bdTheme('#F0FDF4', 'rgba(20,83,45,0.4)')};
--sh-ok-border: ${cssManager.bdTheme('#BBF7D0', 'rgba(74,222,128,0.25)')};
--sh-warn: ${cssManager.bdTheme('#B45309', '#FBBF24')};
--sh-warn-bg: ${cssManager.bdTheme('#FEF9C3', 'rgba(69,26,3,0.6)')};
--sh-warn-border: ${cssManager.bdTheme('#FDE68A', 'rgba(251,191,36,0.25)')};
--sh-err: ${cssManager.bdTheme('#DC2626', '#F87171')};
--sh-err-bg: ${cssManager.bdTheme('#FEF2F2', 'rgba(69,10,10,0.6)')};
--sh-err-border: ${cssManager.bdTheme('#FECACA', 'rgba(248,113,113,0.25)')};
--sh-info: ${cssManager.bdTheme('#1E40AF', '#93BBFD')};
--sh-info-bg: ${cssManager.bdTheme('#EFF6FF', 'rgba(59,130,246,0.15)')};
--sh-info-border: ${cssManager.bdTheme('#BFDBFE', 'rgba(59,130,246,0.3)')};
--sh-destructive: #EF4444;
--sh-ring: ${cssManager.bdTheme('#A1A1AA', '#3B82F6')};
--sh-radius: 8px;
--sh-radius-lg: 12px;
--sh-chart-1: ${cssManager.bdTheme('#0050B9', '#3B82F6')};
--sh-chart-2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
--sh-chart-3: ${cssManager.bdTheme('#DC2626', '#F87171')};
--sh-chart-4: ${cssManager.bdTheme('#B45309', '#FBBF24')};
--sh-chart-5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
--sh-grid: ${cssManager.bdTheme('#E4E4E7', '#262626')};
--sh-grid-soft: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.04)')};
--sh-spark-up: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
--sh-spark-down: ${cssManager.bdTheme('#DC2626', '#F87171')};
--sh-spark-info: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
--sh-d1: ${cssManager.bdTheme('#0050B9', '#93BBFD')};
--sh-d2: ${cssManager.bdTheme('#16A34A', '#4ADE80')};
--sh-d3: ${cssManager.bdTheme('#B45309', '#FBBF24')};
--sh-d4: ${cssManager.bdTheme('#DC2626', '#F87171')};
--sh-d5: ${cssManager.bdTheme('#6E5BE6', '#A78BFA')};
--sh-d6: ${cssManager.bdTheme('#0891B2', '#22D3EE')};
--idp-bg: var(--sh-bg);
--idp-bg-2: var(--sh-bg-2);
--idp-fg: var(--sh-fg);
--idp-fg-2: var(--sh-fg-2);
--idp-fg-3: var(--sh-fg-3);
--idp-muted: var(--sh-muted);
--idp-muted-fg: var(--sh-muted-fg);
--idp-border: var(--sh-border);
--idp-border-soft: var(--sh-border-soft);
--idp-border-strong: var(--sh-border-strong);
--idp-card: var(--sh-card);
--idp-card-2: var(--sh-card-2);
--idp-primary: var(--sh-primary);
--idp-primary-fg: var(--sh-primary-fg);
--idp-accent: var(--sh-accent);
--idp-accent-hover: var(--sh-accent-h);
--idp-accent-fg: var(--sh-accent-fg);
--idp-accent-soft: var(--sh-accent-soft);
--idp-destructive: var(--sh-destructive);
--idp-ok: var(--sh-ok);
--idp-ok-bg: var(--sh-ok-bg);
--idp-ok-border: var(--sh-ok-border);
--idp-warn: var(--sh-warn);
--idp-warn-bg: var(--sh-warn-bg);
--idp-warn-border: var(--sh-warn-border);
--idp-error: var(--sh-err);
--idp-error-bg: var(--sh-err-bg);
--idp-error-border: var(--sh-err-border);
--idp-info: var(--sh-info);
--idp-info-bg: var(--sh-info-bg);
--idp-info-border: var(--sh-info-border);
--idp-chart-1: var(--sh-chart-1);
--idp-chart-2: var(--sh-chart-2);
--idp-chart-3: var(--sh-chart-3);
--idp-chart-4: var(--sh-chart-4);
--idp-chart-5: var(--sh-chart-5);
--idp-spark-up: var(--sh-spark-up);
--idp-spark-down: var(--sh-spark-down);
--idp-spark-info: var(--sh-spark-info);
--idp-radius: var(--sh-radius);
--idp-radius-lg: var(--sh-radius-lg);
--idp-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--idp-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
--idp-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
@@ -76,44 +133,60 @@ export const idpBaseStyles = css`
:host([theme="dark"]),
:host([dark]) {
--idp-bg: #0a0a0a;
--idp-bg-2: #111111;
--idp-fg: #fafafa;
--idp-fg-2: #d4d4d8;
--idp-fg-3: hsl(0 0% 70%);
--idp-muted: #161616;
--idp-muted-fg: hsl(0 0% 55%);
--idp-border: #262626;
--idp-border-soft: #1c1c1c;
--idp-border-strong: #333333;
--idp-card: #121212;
--idp-card-2: #161616;
--idp-primary: #fafafa;
--idp-primary-fg: #18181b;
--idp-accent: #3b82f6;
--idp-accent-hover: #60a5fa;
--idp-accent-soft: rgba(59, 130, 246, 0.15);
--idp-destructive: #ef4444;
--idp-ok: #4ade80;
--idp-ok-bg: rgba(20, 83, 45, 0.4);
--idp-ok-border: rgba(74, 222, 128, 0.25);
--idp-warn: #fbbf24;
--idp-warn-bg: rgba(69, 26, 3, 0.6);
--idp-warn-border: rgba(251, 191, 36, 0.25);
--idp-error: #f87171;
--idp-error-bg: rgba(69, 10, 10, 0.6);
--idp-error-border: rgba(248, 113, 113, 0.25);
--idp-info: #93bbfd;
--idp-info-bg: rgba(59, 130, 246, 0.15);
--idp-info-border: rgba(59, 130, 246, 0.3);
--idp-chart-1: #3b82f6;
--idp-chart-2: #4ade80;
--idp-chart-3: #f87171;
--idp-chart-4: #fbbf24;
--idp-chart-5: #a78bfa;
--idp-spark-up: #4ade80;
--idp-spark-down: #f87171;
--idp-spark-info: #93bbfd;
--sh-bg: #0A0A0A;
--sh-bg-2: #111111;
--sh-card: #121212;
--sh-card-2: #161616;
--sh-muted: #161616;
--sh-muted-fg: hsl(0 0% 55%);
--sh-fg: #FAFAFA;
--sh-fg-2: #D4D4D8;
--sh-fg-3: hsl(0 0% 70%);
--sh-fg-4: hsl(0 0% 35%);
--sh-border: #262626;
--sh-border-soft: #1C1C1C;
--sh-border-strong: #333333;
--sh-input: #161616;
--sh-input-bg: #0A0A0A;
--sh-hover: rgba(255,255,255,0.04);
--sh-primary: #FAFAFA;
--sh-primary-fg: #18181B;
--sh-accent: #3B82F6;
--sh-accent-h: #60A5FA;
--sh-accent-fg: #FFFFFF;
--sh-accent-soft: rgba(59,130,246,0.15);
--sh-accent-soft-fg: #93BBFD;
--sh-accent-ring: rgba(59,130,246,0.35);
--sh-ok: #4ADE80;
--sh-ok-bg: rgba(20,83,45,0.4);
--sh-ok-border: rgba(74,222,128,0.25);
--sh-warn: #FBBF24;
--sh-warn-bg: rgba(69,26,3,0.6);
--sh-warn-border: rgba(251,191,36,0.25);
--sh-err: #F87171;
--sh-err-bg: rgba(69,10,10,0.6);
--sh-err-border: rgba(248,113,113,0.25);
--sh-info: #93BBFD;
--sh-info-bg: rgba(59,130,246,0.15);
--sh-info-border: rgba(59,130,246,0.3);
--sh-destructive: #EF4444;
--sh-ring: #3B82F6;
--sh-chart-1: #3B82F6;
--sh-chart-2: #4ADE80;
--sh-chart-3: #F87171;
--sh-chart-4: #FBBF24;
--sh-chart-5: #A78BFA;
--sh-grid: #262626;
--sh-grid-soft: rgba(255,255,255,0.04);
--sh-spark-up: #4ADE80;
--sh-spark-down: #F87171;
--sh-spark-info: #93BBFD;
--sh-d1: #93BBFD;
--sh-d2: #4ADE80;
--sh-d3: #FBBF24;
--sh-d4: #F87171;
--sh-d5: #A78BFA;
--sh-d6: #22D3EE;
}
`;