@idp.global/catalog 1.1.1

package/ts_web/elements/tokens.ts

@@ -0,0 +1,193 @@
+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];

package/ts_web/index.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/ts_web/pages/index.ts

@@ -0,0 +1,26 @@
+import { html } from '@design.estate/dees-element';
+import '../elements/index.js';
+
+export const LandingPage = () => html`
+  <idp-landing-page></idp-landing-page>
+`;
+
+export const AdminConsole = () => html`
+  <div style="box-sizing: border-box; min-height: 100vh; padding: 32px; background: #f4f4f2; font-family: Geist, system-ui, sans-serif;">
+    <idp-admin-shell></idp-admin-shell>
+  </div>
+`;
+
+export const MobileShowcase = () => html`
+  <idp-mobile-showcase></idp-mobile-showcase>
+`;
+
+export const ComposedViews = () => html`
+  <div style="display: grid; gap: 48px; background: #0a0a0a;">
+    <idp-landing-page></idp-landing-page>
+    <div style="padding: 48px; background: #f4f4f2;">
+      <idp-admin-shell></idp-admin-shell>
+    </div>
+    <idp-mobile-showcase></idp-mobile-showcase>
+  </div>
+`;