@idp.global/catalog 1.2.0 → 2.0.0

package/ts_web/elements/idp-badge.ts

@@ -20,7 +20,7 @@ export class IdpBadge extends DeesElement {
       <idp-badge variant="error">Denied</idp-badge>
     </div>
   `;
-  public static demoGroups = ['idp.global v3 primitives'];
+  public static demoGroups = ['idp.global v5 primitives'];
 
   @property({ type: String })
   public accessor variant: TIdpBadgeVariant = 'default';
@@ -34,15 +34,15 @@ export class IdpBadge extends DeesElement {
       .badge {
         display: inline-flex;
         align-items: center;
-        gap: 4px;
-        padding: 2px 8px;
+        gap: 5px;
+        padding: 3px 9px;
         border: 1px solid transparent;
-        border-radius: 999px;
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        font-weight: 600;
+        border-radius: var(--idp-radius-pill);
+        font-family: var(--idp-font);
+        font-size: 12px;
+        font-weight: 590;
         letter-spacing: -0.01em;
-        line-height: 16px;
+        line-height: 15px;
       }
       .default {
         background: var(--idp-muted);
@@ -67,9 +67,6 @@ export class IdpBadge extends DeesElement {
         color: var(--idp-error);
         border-color: var(--idp-error-border);
       }
-      .accent {
-        border-color: var(--idp-info-border);
-      }
       .outline {
         background: transparent;
         color: var(--idp-fg);

package/ts_web/elements/idp-button.ts

@@ -9,7 +9,7 @@ import {
 import { idpElementStyles } from './tokens.js';
 import './idp-icon.js';
 
-export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent';
+export type TIdpButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'accent' | 'tint' | 'link';
 export type TIdpButtonSize = 'sm' | 'md' | 'lg';
 
 declare global {
@@ -21,15 +21,16 @@ declare global {
 @customElement('idp-button')
 export class IdpButton extends DeesElement {
   public static demo = () => html`
-    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
-      <idp-button>Default</idp-button>
-      <idp-button variant="accent">Approve</idp-button>
+    <div style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
+      <idp-button variant="accent">Claim identity</idp-button>
+      <idp-button variant="tint">Talk to us</idp-button>
       <idp-button variant="outline">Deny</idp-button>
       <idp-button variant="ghost">Ghost</idp-button>
+      <idp-button variant="link">See how it works</idp-button>
       <idp-button variant="destructive">Delete</idp-button>
     </div>
   `;
-  public static demoGroups = ['idp.global v3 primitives'];
+  public static demoGroups = ['idp.global v5 primitives'];
 
   @property({ type: String })
   public accessor variant: TIdpButtonVariant = 'default';
@@ -64,9 +65,10 @@ export class IdpButton extends DeesElement {
         justify-content: center;
         gap: 6px;
         border: 1px solid transparent;
-        border-radius: 6px;
+        border-radius: var(--idp-radius-pill);
         font-family: var(--idp-font);
         font-weight: 500;
+        line-height: 1.4;
         letter-spacing: -0.01em;
         white-space: nowrap;
         cursor: pointer;
@@ -84,19 +86,16 @@ export class IdpButton extends DeesElement {
         cursor: not-allowed;
       }
       .sm {
-        height: 32px;
-        padding: 0 12px;
-        font-size: 13px;
+        padding: 6px 14px;
+        font-size: 14px;
       }
       .md {
-        height: 38px;
-        padding: 0 14px;
-        font-size: 14px;
+        padding: 8px 18px;
+        font-size: 17px;
       }
       .lg {
-        height: 44px;
-        padding: 0 18px;
-        font-size: 15px;
+        padding: 11px 24px;
+        font-size: 19px;
       }
       .default {
         background: var(--idp-primary);
@@ -108,11 +107,35 @@ export class IdpButton extends DeesElement {
       .accent {
         background: var(--idp-accent);
         color: var(--idp-accent-fg);
-        box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
       }
       .accent:hover:not(:disabled) {
         background: var(--idp-accent-hover);
       }
+      .tint {
+        background: var(--idp-accent-soft);
+        color: var(--idp-accent);
+      }
+      .tint:hover:not(:disabled) {
+        background: color-mix(in srgb, var(--idp-accent-soft), var(--idp-accent) 12%);
+      }
+      .link {
+        background: transparent;
+        color: var(--idp-accent);
+        padding: 0;
+        border-radius: 0;
+      }
+      .link:hover:not(:disabled) {
+        text-decoration: underline;
+      }
+      .link::after {
+        content: '›';
+        font-size: 1.15em;
+        line-height: 0;
+        transition: transform 160ms ease;
+      }
+      .link:hover:not(:disabled)::after {
+        transform: translateX(2px);
+      }
       .secondary {
         background: var(--idp-muted);
         color: var(--idp-fg);

package/ts_web/elements/idp-landing-hero.ts

@@ -1,8 +1,7 @@
 import { DeesElement, html, customElement, css, type TemplateResult } from '@design.estate/dees-element';
 import { idpElementStyles } from './tokens.js';
 import './idp-button.js';
-import './idp-dashboard-window.js';
-import './idp-icon.js';
+import './idp-screenshot-placeholder.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -13,128 +12,78 @@ declare global {
 @customElement('idp-landing-hero')
 export class IdpLandingHero extends DeesElement {
   public static demo = () => html`<idp-landing-hero></idp-landing-hero>`;
-  public static demoGroups = ['idp.global v3 composed surfaces'];
+  public static demoGroups = ['idp.global v5 composed surfaces'];
 
   public static styles = [
     ...idpElementStyles,
     css`
       :host {
         display: block;
-      }
-      .hero {
-        position: relative;
-        overflow: hidden;
-        background: var(--idp-bg);
+        background: var(--idp-card);
         color: var(--idp-fg);
-        border-bottom: 1px solid var(--idp-border-soft);
-      }
-      .grid {
-        position: absolute;
-        inset: 0;
-        background-image: linear-gradient(to right, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in srgb, var(--idp-fg), transparent 97%) 1px, transparent 1px);
-        background-size: 56px 56px;
-        mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 70%);
-        pointer-events: none;
       }
-      .glow {
-        position: absolute;
-        top: -220px;
-        left: 50%;
-        width: 900px;
-        height: 600px;
-        transform: translateX(-50%);
-        background: radial-gradient(ellipse, rgba(59,130,246,0.18) 0%, transparent 60%);
-        pointer-events: none;
-      }
-      .inner {
-        position: relative;
-        z-index: 1;
-        max-width: 1240px;
-        margin: 0 auto;
-        padding: 96px 32px 0;
+      .hero {
+        padding: 84px 0 0;
         text-align: center;
       }
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 7px;
-        margin-bottom: 28px;
-        padding: 5px 12px 5px 8px;
-        border: 1px solid var(--idp-border);
-        border-radius: 999px;
-        background: var(--idp-muted);
-        color: var(--idp-fg-3);
-        font-size: 12px;
+      .wrap {
+        max-width: 1024px;
+        margin: 0 auto;
+        padding: 0 22px;
       }
-      .pill {
-        padding: 2px 7px;
-        border-radius: 999px;
-        background: rgba(59,130,246,0.18);
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-mono);
-        font-size: 10px;
+      .hero-tag {
+        margin-bottom: 6px;
+        color: var(--idp-accent);
+        font-size: 21px;
         font-weight: 600;
-        letter-spacing: 0.04em;
+        letter-spacing: -0.02em;
       }
       h1 {
-        margin: 0 0 24px;
-        font-size: clamp(44px, 6.5vw, 78px);
+        max-width: 16ch;
+        margin: 0 auto 22px;
         font-family: var(--idp-display);
+        font-size: clamp(48px, 7vw, 96px);
         font-weight: 700;
-        letter-spacing: -0.035em;
-        line-height: 0.96;
-      }
-      h1 em {
-        color: var(--idp-accent-hover);
-        font-family: var(--idp-serif);
-        font-style: italic;
-        font-weight: 400;
+        line-height: 1.04;
+        letter-spacing: -0.025em;
       }
-      .sub {
-        max-width: 660px;
-        margin: 0 auto 36px;
+      .hero-sub {
+        max-width: 600px;
+        margin: 0 auto 28px;
         color: var(--idp-fg-3);
-        font-size: clamp(16px, 1.6vw, 19px);
-        line-height: 1.55;
+        font-size: clamp(19px, 2vw, 24px);
+        font-weight: 400;
+        line-height: 1.4;
+        letter-spacing: -0.01em;
       }
-      .actions {
+      .hero-actions {
         display: flex;
-        gap: 12px;
+        gap: 26px;
         flex-wrap: wrap;
         align-items: center;
         justify-content: center;
-        margin-bottom: 20px;
       }
-      .fineprint {
-        color: var(--idp-muted-fg);
-        font-family: var(--idp-mono);
-        font-size: 11px;
-        letter-spacing: 0.04em;
+      .hero-fine {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 22px;
+        color: var(--idp-fg-3);
+        font-size: 13px;
       }
-      .fineprint span + span::before {
-        content: '*';
+      .hero-fine span + span::before {
+        content: '·';
         margin: 0 10px;
+        color: var(--idp-fg-3);
       }
       .product {
-        position: relative;
-        max-width: 1180px;
-        margin: 72px auto 0;
-        padding: 0 32px;
-      }
-      .product-glow {
-        position: absolute;
-        inset: 30% 10% -10%;
-        background: radial-gradient(ellipse, rgba(59,130,246,0.25) 0%, transparent 60%);
-        filter: blur(40px);
-        pointer-events: none;
-      }
-      idp-dashboard-window {
-        position: relative;
-        z-index: 1;
+        max-width: 1100px;
+        margin: 60px auto 0;
+        padding: 0 22px;
       }
       @media (max-width: 760px) {
-        .inner {
-          padding: 72px 20px 0;
+        .hero {
+          padding: 64px 0 0;
         }
       }
     `,
@@ -143,22 +92,28 @@ export class IdpLandingHero extends DeesElement {
   public render(): TemplateResult {
     return html`
       <section class="hero">
-        <div class="grid"></div>
-        <div class="glow"></div>
-        <div class="inner">
-          <div class="badge"><span class="pill">v3.81</span>Cardano-anchored identity, now self-hostable</div>
-          <h1>One identity.<br/><em>Any scale.</em> Yours forever.</h1>
-          <p class="sub">An open identity provider for everyone, from a single person to a global enterprise. Anchored to the Cardano blockchain so it can never be erased, taken away, or quietly deprecated.</p>
-          <div class="actions">
-            <idp-button variant="accent" size="lg" icon="shield">Claim your identity - free</idp-button>
-            <idp-button variant="ghost" size="lg" icon="globe">View source</idp-button>
+        <div class="wrap">
+          <div class="hero-tag">idp.global</div>
+          <h1>One identity. Any scale.<br />Yours forever.</h1>
+          <p class="hero-sub">
+            An open identity provider for everyone — from a single person to a global enterprise.
+            Anchored to Cardano, so it can never be erased or taken away.
+          </p>
+          <div class="hero-actions">
+            <idp-button variant="accent" size="lg">Claim your identity</idp-button>
+            <idp-button variant="link" size="lg">See how it works</idp-button>
           </div>
-          <div class="fineprint"><span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span></div>
-          <div class="product">
-            <div class="product-glow"></div>
-            <idp-dashboard-window></idp-dashboard-window>
+          <div class="hero-fine">
+            <span>MIT licensed</span><span>Self-hostable</span><span>No credit card</span><span>Cardano mainnet</span>
           </div>
         </div>
+        <div class="product" id="product">
+          <idp-screenshot-placeholder
+            variant="hero"
+            label="Console dashboard"
+            meta="console.idp.global / overview · 1100 × 620"
+          ></idp-screenshot-placeholder>
+        </div>
       </section>
     `;
   }