57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
|
import { css, cssManager } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const shxBaseStyles = css`
|
||
|
|
:host {
|
||
|
|
--shx-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||
|
|
--shx-bg-2: ${cssManager.bdTheme('#f4f4f5', '#111111')};
|
||
|
|
--shx-card: ${cssManager.bdTheme('#ffffff', '#121212')};
|
||
|
|
--shx-card-2: ${cssManager.bdTheme('#f8fafc', '#161616')};
|
||
|
|
--shx-fg: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||
|
|
--shx-fg-2: ${cssManager.bdTheme('#3f3f46', '#d4d4d8')};
|
||
|
|
--shx-fg-3: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||
|
|
--shx-fg-4: ${cssManager.bdTheme('#a1a1aa', '#525252')};
|
||
|
|
--shx-border: ${cssManager.bdTheme('#e4e4e7', '#262626')};
|
||
|
|
--shx-border-soft: ${cssManager.bdTheme('#f1f5f9', '#1c1c1c')};
|
||
|
|
--shx-accent: ${cssManager.bdTheme('#0050b9', '#3b82f6')};
|
||
|
|
--shx-accent-2: ${cssManager.bdTheme('#6e5be6', '#a78bfa')};
|
||
|
|
--shx-accent-soft: ${cssManager.bdTheme('#e6effb', 'rgba(59,130,246,0.15)')};
|
||
|
|
--shx-green: ${cssManager.bdTheme('#16a34a', '#4ade80')};
|
||
|
|
--shx-amber: ${cssManager.bdTheme('#b45309', '#fbbf24')};
|
||
|
|
--shx-red: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||
|
|
--shx-radius: 10px;
|
||
|
|
--shx-font: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
|
|
--shx-display: 'Plus Jakarta Sans', 'Geist', ui-sans-serif, system-ui, sans-serif;
|
||
|
|
--shx-mono: 'Intel One Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||
|
|
color: var(--shx-fg);
|
||
|
|
font-family: var(--shx-font);
|
||
|
|
font-feature-settings: 'cv11', 'tnum', 'cv05';
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
}
|
||
|
|
|
||
|
|
:host([theme="dark"]),
|
||
|
|
:host([dark]) {
|
||
|
|
--shx-bg: #0a0a0a;
|
||
|
|
--shx-bg-2: #111111;
|
||
|
|
--shx-card: #121212;
|
||
|
|
--shx-card-2: #161616;
|
||
|
|
--shx-fg: #fafafa;
|
||
|
|
--shx-fg-2: #d4d4d8;
|
||
|
|
--shx-fg-3: #a1a1aa;
|
||
|
|
--shx-fg-4: #525252;
|
||
|
|
--shx-border: #262626;
|
||
|
|
--shx-border-soft: #1c1c1c;
|
||
|
|
--shx-accent: #3b82f6;
|
||
|
|
--shx-accent-2: #a78bfa;
|
||
|
|
--shx-accent-soft: rgba(59,130,246,0.15);
|
||
|
|
--shx-green: #4ade80;
|
||
|
|
--shx-amber: #fbbf24;
|
||
|
|
--shx-red: #f87171;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
export const shxElementStyles = [cssManager.defaultStyles, shxBaseStyles];
|