/** * Consent + Gateway Design-Language Themes * * Two CSS-custom-property token sets shared by the new consent screen and * the (future) migrated OAuth Gateway consent. The themes match the screens * Peter approved for Hardware World: * * - `light` → paper background, dark on light, serif headline (Peter's mockup). * - `dark` → glassy dark modal, soft halo backdrop (OAuth Gateway aesthetic). * * Components consume these tokens through Shadow DOM CSS (`var(--cs-*)`). * Org branding flows through `surfaceAccent` / `surfaceAccentText` so the * primary button can adopt operator brand color while the rest of the * surface stays in the chosen theme. * * The amber `HIGHER RISK` chip token is fixed across themes so the visual * stays recognizable regardless of org branding. * * @module @kya-os/consent/styles/theme */ import type { ConsentTheme } from "../types/capabilities.types.js"; /** * Shape of a complete theme token set. Every key must be set on every theme. */ export interface ConsentThemeTokens { /** Page-level background behind the modal/card. */ surfaceBg: string; /** Modal / card surface color. */ surfaceCard: string; /** Border color on cards, dividers, inputs. */ surfaceBorder: string; /** Background for icon tiles and small inset surfaces. */ surfaceInset: string; /** Highest contrast text color. */ textPrimary: string; /** Mid contrast text color (descriptions, supporting copy). */ textSecondary: string; /** Lowest contrast text color (eyebrows, micro-labels). */ textTertiary: string; /** Primary action background — operator brand override applies here. */ surfaceAccent: string; /** Primary action text color. */ surfaceAccentText: string; /** Verified pill background. */ pillVerifiedBg: string; /** Verified pill text color. */ pillVerifiedText: string; /** Unverified pill background. */ pillUnverifiedBg: string; /** Unverified pill text color. */ pillUnverifiedText: string; /** HIGHER RISK chip background. Fixed amber across themes. */ chipRiskBg: string; /** HIGHER RISK chip text color. */ chipRiskText: string; /** Focus ring color (keyboard accessibility). */ focusRing: string; /** Shadow on the consent card. */ cardShadow: string; } export declare const lightTheme: ConsentThemeTokens; export declare const darkTheme: ConsentThemeTokens; /** * Resolve a theme by name. Defaults to `light` for any unknown value. */ export declare function getConsentTheme(theme: ConsentTheme | undefined): ConsentThemeTokens; /** * Render a theme as a CSS string suitable for injecting into a `