194 lines
7.9 KiB
TypeScript
194 lines
7.9 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 {
|
|
--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;
|
|
--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]) {
|
|
--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;
|
|
}
|
|
`;
|
|
|
|
export const idpElementStyles = [cssManager.defaultStyles, idpBaseStyles];
|