/** * Design tokens for the Superagent native package. * * Single source of truth, mirroring the web design system * (frontend/packages/design-system/src/tokens/tokens-vars.css). React Native * can't consume the DS CSS variables / Tailwind preset directly, so the * foundation palette, spacing, radius, typography and shadow scales are * transcribed here verbatim, and the DS semantic tokens are expressed as * per-scheme objects (light / dark). * * Style files keep authoring against the dark palette; theme.ts maps each * authored hex onto the matching DS semantic role and resolves it to these * values for the active color scheme. */ export declare const palette: { readonly white: "#ffffff"; readonly stone50: "#f8f6f4"; readonly stone100: "#f1eeea"; readonly stone200: "#e9e6e0"; readonly stone300: "#ddd8d2"; readonly stone400: "#c9c3bc"; readonly stone500: "#ada69f"; readonly stone600: "#8e8780"; readonly stone700: "#6f6963"; readonly stone800: "#514c47"; readonly stone900: "#312d2a"; readonly stone950: "#1c1a18"; readonly neutral50: "#fcfcfc"; readonly neutral100: "#f5f5f4"; readonly neutral200: "#ebebeb"; readonly neutral300: "#c0c0c0"; readonly neutral400: "#929292"; readonly neutral500: "#5d5d5d"; readonly neutral600: "#505050"; readonly neutral700: "#3a3939"; readonly neutral800: "#252424"; readonly neutral900: "#1b1c1e"; readonly neutral950: "#0f0e0e"; readonly orange50: "#FFF3EA"; readonly orange100: "#FFE4D1"; readonly orange200: "#FFC9A6"; readonly orange300: "#FFA875"; readonly orange400: "#FF8E5D"; readonly orange500: "#FF773C"; readonly orange600: "#E8641B"; readonly orange700: "#BF4513"; readonly orange800: "#99370f"; readonly orange900: "#73280a"; readonly orange950: "#4d1a06"; readonly brandLogo: "#FF6A00"; readonly purple50: "#efefff"; readonly purple100: "#e2e2ff"; readonly purple200: "#d0d0f5"; readonly purple300: "#a79fff"; readonly purple400: "#7e73f2"; readonly purple500: "#4d33de"; readonly purple600: "#4029bf"; readonly purple700: "#34219c"; readonly purple800: "#271878"; readonly purple900: "#312e81"; readonly purple950: "#232337"; readonly red50: "#fdf2f2"; readonly red100: "#fce2e3"; readonly red200: "#f8c7c8"; readonly red300: "#f29fa1"; readonly red400: "#ea6e71"; readonly red500: "#df3336"; readonly red600: "#bf2124"; readonly red700: "#9c2426"; readonly red800: "#681719"; readonly red900: "#4c1112"; readonly red950: "#300a0b"; readonly green50: "#f2f8f3"; readonly green100: "#e4f0e6"; readonly green200: "#cbe0cf"; readonly green300: "#a7c8ae"; readonly green400: "#7ead88"; readonly green500: "#568f63"; readonly green600: "#347043"; readonly green700: "#134f25"; readonly green800: "#0f401e"; readonly green900: "#0b3016"; readonly green950: "#061f0d"; readonly yellow50: "#fff9ee"; readonly yellow100: "#fff4db"; readonly yellow200: "#ffeab5"; readonly yellow300: "#f9df8c"; readonly yellow400: "#ffd15f"; readonly yellow500: "#f0c84d"; readonly yellow600: "#ddb440"; readonly yellow700: "#be9734"; readonly yellow800: "#9b7928"; readonly yellow900: "#735a1d"; readonly yellow950: "#473611"; readonly blue50: "#f1f4ff"; readonly blue100: "#e3e9ff"; readonly blue200: "#ccd6ff"; readonly blue300: "#aab9ff"; readonly blue400: "#7e90f5"; readonly blue500: "#3b51e5"; readonly blue600: "#3145c5"; readonly blue700: "#2838a5"; readonly blue800: "#0a1e8f"; readonly blue900: "#07176b"; readonly blue950: "#040f47"; }; export declare const space: { readonly none: 0; readonly xs: 4; readonly sm: 6; readonly md: 8; readonly lg: 12; readonly xl: 16; readonly '2xl': 20; readonly '3xl': 24; readonly '4xl': 32; readonly '5xl': 40; readonly '6xl': 48; readonly '7xl': 64; }; export declare const radius: { readonly none: 0; readonly xs: 2; readonly sm: 4; readonly md: 6; readonly lg: 8; readonly xl: 12; readonly '2xl': 16; readonly '3xl': 24; readonly '4xl': 32; readonly card: 10; readonly pill: 100; readonly full: 9999; }; export declare const fontFamily: { readonly body: "Wix Madefor Text" | "Wix Madefor Text App"; readonly display: "Wix Madefor Display" | "Wix Madefor Display App"; readonly mono: "Menlo"; }; export declare const fontSize: { readonly tiny: 12; readonly small: 14; readonly medium: 16; readonly h6: 12; readonly h5: 14; readonly h4: 16; readonly h3: 20; readonly h2: 24; readonly h1: 32; }; export declare const fontWeight: { readonly regular: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; export declare const lineHeight: { readonly '4': 16; readonly '5': 18; readonly '6': 20; readonly '7': 24; readonly '9': 32; readonly '11': 40; }; type TextStyle = { fontFamily: string; fontWeight: string; fontSize: number; lineHeight: number; }; export declare const textStyles: { readonly h1: TextStyle; readonly h2: TextStyle; readonly h3: TextStyle; readonly h4: TextStyle; readonly h5: TextStyle; readonly h6: TextStyle; readonly body: TextStyle; readonly bodyMedium: TextStyle; readonly bodySemibold: TextStyle; readonly bodyBold: TextStyle; readonly small: TextStyle; readonly smallMedium: TextStyle; readonly smallSemibold: TextStyle; readonly smallBold: TextStyle; readonly tiny: TextStyle; readonly tinyMedium: TextStyle; readonly tinySemibold: TextStyle; readonly tinyBold: TextStyle; }; /** * DS type ramp keyed by font size. Authored sizes are snapped to the nearest * rung so off-scale values (10/11/13/15/17/18/21/22/23…) resolve to a DS size * and its paired line height. `[upperBound, fontSize, lineHeight]`: the first * row whose upper bound is >= the authored size wins. */ export declare const TYPE_RAMP: ReadonlyArray; export declare const shadow: { readonly md: { readonly shadowColor: "#000000"; readonly shadowOffset: { readonly height: 8; readonly width: 0; }; readonly shadowOpacity: 0.35; readonly shadowRadius: 14; readonly elevation: 8; }; readonly lg: { readonly shadowColor: "#000000"; readonly shadowOffset: { readonly height: 20; readonly width: 0; }; readonly shadowOpacity: 0.35; readonly shadowRadius: 30; readonly elevation: 12; }; }; export interface SemanticTokens { surface: { canvas: string; sunken: string; surface: string; muted: string; elevated: string; white: string; brand: string; divider: string; dotMuted: string; actionPrimary: string; successSoft: string; warningSoft: string; dangerSoft: string; infoSoft: string; accentSoft: string; accentStrong: string; premiumSoft: string; chipFill: string; chipFillActive: string; interactiveStone: string; }; fg: { default: string; secondary: string; muted: string; subtle: string; onAction: string; onWhite: string; accent: string; danger: string; success: string; warning: string; info: string; link: string; }; border: { default: string; subtle: string; strong: string; inverse: string; danger: string; warning: string; success: string; accent: string; }; } export declare const semanticDark: SemanticTokens; export declare const semanticLight: SemanticTokens; export declare const semanticTokens: { readonly dark: SemanticTokens; readonly light: SemanticTokens; }; export {}; //# sourceMappingURL=tokens.d.ts.map