import { type ViewStyle, type TextStyle } from "react-native"; import { withInnerFill, type ColorTokens } from "../../style/index.js"; import { type HoverMotion } from "../../style/hover.js"; import { type ButtonLoader } from "./button-loader.js"; export declare const shrinkButton: ViewStyle; export declare const shrinkLabel: TextStyle; export type Intent = "primary" | "secondary" | "destructive" | "outline" | "ghost" | "link"; export type Size = "small" | "base" | "large"; export interface ButtonSkinOpts { identityAction?: boolean; pageLink?: boolean; jumpLink?: boolean; mono?: boolean; referenceLink?: boolean; inlineIcon?: boolean; themeChoice?: boolean; selected?: boolean; scopeTrigger?: boolean; filterTrigger?: boolean; inlineLink?: boolean; plainLink?: boolean; foreground?: boolean; extraBold?: boolean; utility?: boolean; iconBox?: "compact" | "medium" | "large" | null; wideIcon?: boolean; circle?: boolean; /** A standard control with fully rounded ends (a pill), 2 px wider at each side on the web. */ rounded?: boolean; /** A dashed edge in place of the solid one. */ dashed?: boolean; inset?: boolean; inverse?: boolean; quiet?: boolean; softHover?: boolean; consistent?: boolean; comfortable?: boolean; icon: boolean; block: boolean; /** disabled or loading: dim the control (the iOS and Android skins). */ dim: boolean; /** disabled alone: the web skin fades a disabled button, and a loading button keeps its full look. */ disabled?: boolean; } export interface ButtonSkin { surround?: (opts: ButtonSkinOpts) => ViewStyle; container: (t: ColorTokens, intent: Intent, size: Size, opts: ButtonSkinOpts) => ViewStyle; label: (t: ColorTokens, intent: Intent, size: Size, opts?: ButtonSkinOpts) => TextStyle; /** The label's colour, which the loader takes too. */ foreground: (t: ColorTokens, intent: Intent, opts?: ButtonSkinOpts) => string; /** * What a loading button shows in place of its leading icon (button-loader.tsx): the web * draws the hand-off's open arc in the label's ink, iOS and Android the platform's own * activity indicator. The shell renders it and hides it from assistive tech. */ loader: ButtonLoader; /** * Whether this intent paints a surface of its own. Under glass a button that does is a * CONTROL-layer puck (the material behind its label); one that does not stays bare. */ surface: (intent: Intent, opts: ButtonSkinOpts) => boolean; /** * The style a hovered button of this intent switches to at once (the `secondary` wash * behind the unfilled looks, the brightening of a filled one), or null. Never applied * while disabled or loading; omitted by the iOS and Android skins. `puck` says a glass * pane sits under the button, so the look is made safe for the material. */ hover?: (theme: HoverTheme, intent: Intent, opts: ButtonSkinOpts | undefined, puck: boolean) => ViewStyle | null; /** * The label's look while hovered, or null to keep its resting ink: the page header's * links brighten their muted label to `foreground` (Component.dc.html `style-hover`). * Never applied while disabled or loading; omitted by the iOS and Android skins. */ hoverLabel?: (t: ColorTokens, opts: ButtonSkinOpts | undefined) => TextStyle | null; /** The resting glow under a `raised` primary button (the hand-off's raised call to action). */ raised: (t: ColorTokens, size: Size) => ViewStyle; /** iOS dims the fill on press; the web scales (`press`) and Android ripples instead (null). */ pressedOpacity: number | null; /** * The web's press: the control scales down and darkens while held. The darkening is a * filter, which would cut a glass pane off from the backdrop it samples, so the shell * drops it on a glass puck and keeps the scale. Omitted by the iOS and Android skins. */ press?: { scale: number; brightness: number; }; ripple: ((t: ColorTokens, intent: Intent) => { color: string; borderless: boolean; }) | null; /** * The rounded shape the shell's `` parent clips the bounded ripple to (the * same corner radii `container` draws). Only the Android skin sets it: a bounded ripple * is Android-only; iOS/web omit it so no clip wrapper is applied. See src/style/ripple-clip. */ rippleClipShape?: (size: Size, opts: ButtonSkinOpts) => ViewStyle; /** * Platform minimum touch target in pt/dp (iOS HIG 44pt, Android M3 48dp). When set, * the shell measures the rendered control and extends the TOUCH area with hitSlop on * whichever axis falls short (e.g. the 32pt `small` text button and the sub-minimum * icon squares). hitSlop never affects layout, so the visual size is untouched. null * (web) skips the measurement entirely: pointer targets stay visual. */ minTarget: number | null; /** * Hover feedback: the rise a hovered button of this intent takes, or null for none. * Never applied while disabled or loading. Omitted by the iOS and Android skins, which * keep their platform buttons (and whose platforms deliver no pointer hover by default). */ lift?: (intent: Intent, opts?: ButtonSkinOpts) => HoverMotion | null; /** Where the notification `count` sits over the upper trailing corner. */ count: ViewStyle; /** * The `unread` mark: the accent dot inside the box's upper trailing corner, ringed in the * card colour (the hand-off's inbox, Controls.dc.html `c-avatar`). */ unread: (t: ColorTokens) => ViewStyle; } export declare function webEmphasisOf(p: Pick): "default" | "inlineLink" | "inverse" | "quiet"; /** Utility hover wins over inverse emphasis on an icon control. */ export declare function webHoverKindOf(p: Pick): "default" | "inlineLink" | "inverse" | "themeChoice" | "utility"; /** Inline action ink, independent of its unboxed anatomy. */ export declare function webLinkInkOf(p: Pick): "primary" | "foreground" | "inverse"; /** Resolve reference anatomy before generic utility-box metrics; the underlined inline link wins over the plain one. */ export declare function webBodyOf(p: Pick): "button" | "link" | "filter" | "identity" | "themeChoice" | "utility" | "pageLink" | "jumpLink" | "inlineIcon" | "plainLink" | "reference" | "scope"; /** * The look of one intent: its fill, border, label ink and lit top edge. The hand-off's * `K.btn` table: `primary` the accent (`action`) with its ink, `destructive` the status * red with its own, `secondary` the `secondary` well, `outline` a bare boundary, `ghost` * and `link` bare. Both bordered looks rest on `input`, the 3:1 control boundary (the * hand-off's `ln2` hairline is about 1.5:1, the deviation audit/v4-redesign/PLAN.md D4 * records). Emphasis wins over the intent, as Argus spells it (`outline inverse`): * `inverse` is a white outline over a branded surface, `quiet` a muted outline, and the * inline link takes its link ink. */ /** What a hover look needs of the theme: its tokens, and whether glass is in force. */ export type HoverTheme = Parameters[0]; export interface Look { fill: string; border: string; label: string; edge: string | null; } export declare function lookOf(t: ColorTokens, intent: Intent, o?: ButtonSkinOpts): Look; /** * The label's ink, which the loader takes too (the hand-off's arc is `currentColor`): a * special body's own ink, else the intent's. */ export declare function foregroundOf(t: ColorTokens, intent: Intent, o?: ButtonSkinOpts): string; export declare const webSkin: ButtonSkin; export declare const iosSkin: ButtonSkin; export declare const androidSkin: ButtonSkin; //# sourceMappingURL=button.styles.d.ts.map