@idp.global/catalog 1.2.0 → 2.0.0

package/ts_web/elements/idp-mobile-showcase.ts

@@ -265,7 +265,7 @@ export class IdpMobileShowcase extends DeesElement {
     return html`
       <div class="showcase">
         <header class="head">
-          <div class="badge"><span class="dot"></span>Mobile redesign - v3 - shadcn tokens</div>
+          <div class="badge"><span class="dot"></span>Mobile redesign - v5 - Apple system</div>
           <h1>A personal identity provider, built across every device you carry.</h1>
           <p>Same four-platform architecture: flat surfaces, 1px borders, neutral palette, and blue accent used only where action is expected.</p>
           <div class="tokens">

package/ts_web/elements/idp-screenshot-placeholder.ts

@@ -0,0 +1,126 @@
+import { DeesElement, html, property, customElement, css, type TemplateResult } from '@design.estate/dees-element';
+import { idpElementStyles } from './tokens.js';
+
+export type TIdpScreenshotPlaceholderVariant = 'hero' | 'tile' | 'tile-short';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'idp-screenshot-placeholder': IdpScreenshotPlaceholder;
+  }
+}
+
+/**
+ * A striped, dashed slot that stands in for a real product screenshot until one
+ * is dropped in. Mirrors the `.ph` placeholders in the v5 marketing design. The
+ * diagonal stripe is derived from `--idp-fg` so it reads correctly in light and
+ * dark without a theme attribute.
+ */
+@customElement('idp-screenshot-placeholder')
+export class IdpScreenshotPlaceholder extends DeesElement {
+  public static demo = () => html`
+    <div style="display: flex; gap: 16px; flex-wrap: wrap; max-width: 900px;">
+      <idp-screenshot-placeholder
+        variant="tile"
+        label="Approval inbox"
+        meta="push approval list UI"
+        style="flex: 1 1 320px;"
+      ></idp-screenshot-placeholder>
+      <idp-screenshot-placeholder
+        variant="tile-short"
+        label="Identity card"
+        meta="NFC tap-to-auth credential"
+        style="flex: 1 1 320px;"
+      ></idp-screenshot-placeholder>
+    </div>
+  `;
+  public static demoGroups = ['idp.global v5 primitives'];
+
+  @property({ type: String })
+  public accessor variant: TIdpScreenshotPlaceholderVariant = 'tile';
+
+  @property({ type: String })
+  public accessor kicker = 'screenshot placeholder';
+
+  @property({ type: String })
+  public accessor label = '';
+
+  @property({ type: String })
+  public accessor meta = '';
+
+  public static styles = [
+    ...idpElementStyles,
+    css`
+      :host {
+        display: block;
+      }
+      .ph {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 300px;
+        padding: 24px;
+        border: 1.5px dashed var(--idp-border);
+        border-radius: 16px;
+        background-color: var(--idp-bg-2);
+        background-image: repeating-linear-gradient(
+          45deg,
+          transparent 0 9px,
+          color-mix(in srgb, var(--idp-fg) 6%, transparent) 9px 10px
+        );
+        text-align: center;
+      }
+      .ph.hero {
+        min-height: 560px;
+        border-radius: 22px;
+      }
+      .ph.tile {
+        min-height: 300px;
+      }
+      .ph.tile-short {
+        min-height: 196px;
+      }
+      .ph-inner {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+      }
+      .ph-kicker {
+        margin-bottom: 4px;
+        padding: 3px 10px;
+        border: 1px solid var(--idp-border);
+        border-radius: var(--idp-radius-pill);
+        background: var(--idp-card);
+        color: var(--idp-fg-3);
+        font-family: var(--idp-mono);
+        font-size: 11px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+      }
+      .ph-title {
+        color: var(--idp-fg-2);
+        font-size: 17px;
+        font-weight: 600;
+        letter-spacing: -0.01em;
+      }
+      .ph-meta {
+        color: var(--idp-fg-3);
+        font-family: var(--idp-mono);
+        font-size: 11.5px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="ph ${this.variant}">
+        <div class="ph-inner">
+          ${this.kicker ? html`<div class="ph-kicker">${this.kicker}</div>` : html``}
+          ${this.label ? html`<div class="ph-title">${this.label}</div>` : html``}
+          ${this.meta ? html`<div class="ph-meta">${this.meta}</div>` : html``}
+        </div>
+      </div>
+    `;
+  }
+}

package/ts_web/elements/index.ts

@@ -3,6 +3,7 @@ export * from './idp-icon.js';
 export * from './idp-button.js';
 export * from './idp-badge.js';
 export * from './idp-card.js';
+export * from './idp-screenshot-placeholder.js';
 export * from './idp-input.js';
 export * from './idp-checkbox.js';
 export * from './idp-form.js';

package/ts_web/elements/tokens.ts

@@ -1,6 +1,6 @@
 import { css, cssManager } from '@design.estate/dees-element';
 
-export const idpAccent = '#3B82F6';
+export const idpAccent = '#007AFF';
 
 export const idpTheme = {
   bg: 'var(--idp-bg)',
@@ -21,64 +21,72 @@ export const idpTheme = {
   radius: 'var(--idp-radius)',
 };
 
+/*
+ * idp.global tokens — Apple system theme.
+ * Light = systemGray6 canvas on white cards; dark = true-black on elevated grays.
+ * System-blue accent, SF Pro type, continuous-corner radii.
+ * The --sh-* layer is the console/product register; the --idp-* aliases map onto it
+ * so every consumer inherits new values without renames. Marketing (landing)
+ * components layer their own white-canvas surfaces on top of these shared tokens.
+ */
 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-bg: ${cssManager.bdTheme('#F5F5F7', '#000000')};
+    --sh-bg-2: ${cssManager.bdTheme('#EFEFF1', '#0A0A0A')};
+    --sh-card: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sh-card-2: ${cssManager.bdTheme('#F5F5F7', '#161617')};
+    --sh-muted: ${cssManager.bdTheme('rgba(118,118,128,0.10)', 'rgba(120,120,128,0.20)')};
+    --sh-muted-fg: ${cssManager.bdTheme('#6E6E73', '#98989D')};
+    --sh-fg: ${cssManager.bdTheme('#1D1D1F', '#F5F5F7')};
+    --sh-fg-2: ${cssManager.bdTheme('#424245', '#D1D1D6')};
+    --sh-fg-3: ${cssManager.bdTheme('#6E6E73', '#98989D')};
+    --sh-fg-4: ${cssManager.bdTheme('#AEAEB2', '#636366')};
+    --sh-border: ${cssManager.bdTheme('#D2D2D7', '#38383A')};
+    --sh-border-soft: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.10)')};
+    --sh-border-strong: ${cssManager.bdTheme('#C6C6C8', '#48484A')};
+    --sh-input: ${cssManager.bdTheme('#FFFFFF', '#1C1C1E')};
+    --sh-input-bg: ${cssManager.bdTheme('#FFFFFF', '#000000')};
+    --sh-hover: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.06)')};
+    --sh-primary: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-primary-fg: #FFFFFF;
+    --sh-accent: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-accent-h: ${cssManager.bdTheme('#0066CC', '#409CFF')};
     --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')};
+    --sh-accent-soft: ${cssManager.bdTheme('#E8F1FF', 'rgba(10,132,255,0.22)')};
+    --sh-accent-soft-fg: ${cssManager.bdTheme('#0066CC', '#6CB6FF')};
+    --sh-accent-ring: ${cssManager.bdTheme('rgba(0,122,255,0.25)', 'rgba(10,132,255,0.40)')};
+    --sh-ok: ${cssManager.bdTheme('#248A3D', '#30D158')};
+    --sh-ok-bg: ${cssManager.bdTheme('#E9F9EE', 'rgba(48,209,88,0.16)')};
+    --sh-ok-border: ${cssManager.bdTheme('rgba(52,199,89,0.38)', 'rgba(48,209,88,0.32)')};
+    --sh-warn: ${cssManager.bdTheme('#B25E00', '#FF9F0A')};
+    --sh-warn-bg: ${cssManager.bdTheme('#FFF3E0', 'rgba(255,159,10,0.16)')};
+    --sh-warn-border: ${cssManager.bdTheme('rgba(255,149,0,0.38)', 'rgba(255,159,10,0.32)')};
+    --sh-err: ${cssManager.bdTheme('#D70015', '#FF453A')};
+    --sh-err-bg: ${cssManager.bdTheme('#FFECEB', 'rgba(255,69,58,0.16)')};
+    --sh-err-border: ${cssManager.bdTheme('rgba(255,59,48,0.32)', 'rgba(255,69,58,0.32)')};
+    --sh-info: ${cssManager.bdTheme('#0066CC', '#6CB6FF')};
+    --sh-info-bg: ${cssManager.bdTheme('#E8F1FF', 'rgba(10,132,255,0.16)')};
+    --sh-info-border: ${cssManager.bdTheme('rgba(0,122,255,0.30)', 'rgba(10,132,255,0.30)')};
+    --sh-destructive: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-ring: ${cssManager.bdTheme('#C6C6C8', '#48484A')};
+    --sh-radius: 10px;
+    --sh-radius-lg: 14px;
+    --sh-chart-1: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-chart-2: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-chart-3: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-chart-4: ${cssManager.bdTheme('#FF9500', '#FF9F0A')};
+    --sh-chart-5: ${cssManager.bdTheme('#5856D6', '#BF5AF2')};
+    --sh-grid: ${cssManager.bdTheme('#D2D2D7', '#38383A')};
+    --sh-grid-soft: ${cssManager.bdTheme('rgba(0,0,0,0.04)', 'rgba(255,255,255,0.05)')};
+    --sh-spark-up: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-spark-down: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-spark-info: ${cssManager.bdTheme('#007AFF', '#0A84FF')};
+    --sh-d1: ${cssManager.bdTheme('#007AFF', '#5AC8FA')};
+    --sh-d2: ${cssManager.bdTheme('#34C759', '#30D158')};
+    --sh-d3: ${cssManager.bdTheme('#FF9500', '#FFD60A')};
+    --sh-d4: ${cssManager.bdTheme('#FF3B30', '#FF453A')};
+    --sh-d5: ${cssManager.bdTheme('#5856D6', '#BF5AF2')};
+    --sh-d6: ${cssManager.bdTheme('#5AC8FA', '#64D2FF')};
 
     --idp-bg: var(--sh-bg);
     --idp-bg-2: var(--sh-bg-2);
@@ -121,72 +129,78 @@ export const idpBaseStyles = css`
     --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;
+    --idp-radius-pill: 980px;
+    --idp-nav-bg: ${cssManager.bdTheme('rgba(255,255,255,0.72)', 'rgba(22,22,23,0.72)')};
+    --idp-term-bg: ${cssManager.bdTheme('#1D1D1F', '#161617')};
+    --idp-font: -apple-system, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    --idp-display: -apple-system, 'SF Pro Display', system-ui, 'Segoe UI', sans-serif;
+    --idp-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+    --idp-serif: 'SF Pro Display', -apple-system, Georgia, serif;
     font-family: var(--idp-font);
-    font-feature-settings: "cv11", "ss03";
     font-variant-numeric: tabular-nums;
+    letter-spacing: -0.01em;
     -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
 
   :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-bg: #000000;
+    --sh-bg-2: #0A0A0A;
+    --sh-card: #1C1C1E;
+    --sh-card-2: #161617;
+    --sh-muted: rgba(120,120,128,0.20);
+    --sh-muted-fg: #98989D;
+    --sh-fg: #F5F5F7;
+    --sh-fg-2: #D1D1D6;
+    --sh-fg-3: #98989D;
+    --sh-fg-4: #636366;
+    --sh-border: #38383A;
+    --sh-border-soft: rgba(255,255,255,0.10);
+    --sh-border-strong: #48484A;
+    --sh-input: #1C1C1E;
+    --sh-input-bg: #000000;
+    --sh-hover: rgba(255,255,255,0.06);
+    --sh-primary: #0A84FF;
+    --sh-primary-fg: #FFFFFF;
+    --sh-accent: #0A84FF;
+    --sh-accent-h: #409CFF;
     --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;
+    --sh-accent-soft: rgba(10,132,255,0.22);
+    --sh-accent-soft-fg: #6CB6FF;
+    --sh-accent-ring: rgba(10,132,255,0.40);
+    --sh-ok: #30D158;
+    --sh-ok-bg: rgba(48,209,88,0.16);
+    --sh-ok-border: rgba(48,209,88,0.32);
+    --sh-warn: #FF9F0A;
+    --sh-warn-bg: rgba(255,159,10,0.16);
+    --sh-warn-border: rgba(255,159,10,0.32);
+    --sh-err: #FF453A;
+    --sh-err-bg: rgba(255,69,58,0.16);
+    --sh-err-border: rgba(255,69,58,0.32);
+    --sh-info: #6CB6FF;
+    --sh-info-bg: rgba(10,132,255,0.16);
+    --sh-info-border: rgba(10,132,255,0.30);
+    --sh-destructive: #FF453A;
+    --sh-ring: #48484A;
+    --sh-chart-1: #0A84FF;
+    --sh-chart-2: #30D158;
+    --sh-chart-3: #FF453A;
+    --sh-chart-4: #FF9F0A;
+    --sh-chart-5: #BF5AF2;
+    --sh-grid: #38383A;
+    --sh-grid-soft: rgba(255,255,255,0.05);
+    --sh-spark-up: #30D158;
+    --sh-spark-down: #FF453A;
+    --sh-spark-info: #0A84FF;
+    --sh-d1: #5AC8FA;
+    --sh-d2: #30D158;
+    --sh-d3: #FFD60A;
+    --sh-d4: #FF453A;
+    --sh-d5: #BF5AF2;
+    --sh-d6: #64D2FF;
+    --idp-nav-bg: rgba(22,22,23,0.72);
+    --idp-term-bg: #161617;
   }
 `;