121 lines
3.7 KiB
TypeScript
121 lines
3.7 KiB
TypeScript
import { css, cssManager } from '@design.estate/dees-element';
|
|
|
|
export const idpAccent = '#3B82F6';
|
|
|
|
export const idpTheme = {
|
|
bg: 'var(--idp-bg)',
|
|
fg: 'var(--idp-fg)',
|
|
muted: 'var(--idp-muted)',
|
|
mutedFg: 'var(--idp-muted-fg)',
|
|
border: 'var(--idp-border)',
|
|
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)',
|
|
ok: 'var(--idp-ok)',
|
|
warn: 'var(--idp-warn)',
|
|
radius: 'var(--idp-radius)',
|
|
};
|
|
|
|
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;
|
|
--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;
|
|
--idp-serif: 'Instrument Serif', Georgia, serif;
|
|
font-family: var(--idp-font);
|
|
font-feature-settings: "cv11", "ss03";
|
|
font-variant-numeric: tabular-nums;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
`;
|
|
|
|
export const idpElementStyles = [cssManager.defaultStyles, idpBaseStyles];
|