@artsy/palette-tokens

/** A list of breakpoints accessible by key/value. */ export declare const breakpoints: { /** Above 1920 */ lg: string; /** Between 1280 and 1919 */ md: string; /** Between 768 and 1279 */ sm: string; /** Below 767 */ xs: string; }; /** Copy of `breakpoints` as integers */ export declare const unitlessBreakpoints: { /** Above 1920 */ lg: number; /** Between 1280 and 1919 */ md: number; /** Between 768 and 1279 */ sm: number; /** Below 767 */ xs: number; }; declare const COLORS: { /** Suitable for text on mono10 and lighter */ mono100: string; /** Suitable for text on mono5 and lighter */ mono60: string; /** Background only */ mono30: string; /** Background only */ mono15: string; /** Background only */ mono10: string; /** Suitable for text on mono60 and darker */ mono5: string; /** Suitable for text on mono60 and darker */ mono0: string; /** Suitable for text on mono10 and lighter */ blue200: string; /** Suitable for text on mono10 and lighter */ blue150: string; /** Suitable for text on mono10 and lighter */ blue100: string; /** Alias of blue100 */ brand: string; /** Background only */ blue15: string; /** Background only */ blue10: string; /** Hover/down state and suitable for text on green10 */ green150: string; /** Suitable for text on green10, mono10 and lighter */ green100: string; /** Background only */ green10: string; /** Hover/down state and suitable for text on yellow10 */ yellow150: string; /** Suitable for text on mono10 and lighter */ yellow100: string; /** Background only */ yellow10: string; /** Hover/down state and suitable for text on orange10 */ orange150: string; /** Suitable for text on mono10 and lighter */ orange100: string; /** Background only */ orange10: string; /** Hover/down state and suitable for text on red10 */ red150: string; /** Suitable for text on red10, mono10, and lighter */ red100: string; /** Suitable for importance/urgency indicators */ red50: string; /** Background only */ red10: string; }; export type Colors = typeof COLORS; declare const EFFECTS: { dropShadow: string; innerShadow: string; flatShadow: string; /** Shadow to drop under text to improve legibility when over images */ textShadow: string; /** Overlay to improve legibility of text */ overlayGradient: string; /** Fade right edge */ fadeRight: string; /** Translucent gray for dialog backdrops */ backdrop: string; }; export type Effects = typeof EFFECTS; /** * All of the config for the Artsy theming system, based on the * design system from our design team */ export declare const THEME: { id: string; name: string; breakpoints: string[] & { /** Above 1920 */ lg: string; /** Between 1280 and 1919 */ md: string; /** Between 768 and 1279 */ sm: string; /** Below 767 */ xs: string; }; colors: { /** Suitable for text on mono10 and lighter */ mono100: string; /** Suitable for text on mono5 and lighter */ mono60: string; /** Background only */ mono30: string; /** Background only */ mono15: string; /** Background only */ mono10: string; /** Suitable for text on mono60 and darker */ mono5: string; /** Suitable for text on mono60 and darker */ mono0: string; /** Suitable for text on mono10 and lighter */ blue200: string; /** Suitable for text on mono10 and lighter */ blue150: string; /** Suitable for text on mono10 and lighter */ blue100: string; /** Alias of blue100 */ brand: string; /** Background only */ blue15: string; /** Background only */ blue10: string; /** Hover/down state and suitable for text on green10 */ green150: string; /** Suitable for text on green10, mono10 and lighter */ green100: string; /** Background only */ green10: string; /** Hover/down state and suitable for text on yellow10 */ yellow150: string; /** Suitable for text on mono10 and lighter */ yellow100: string; /** Background only */ yellow10: string; /** Hover/down state and suitable for text on orange10 */ orange150: string; /** Suitable for text on mono10 and lighter */ orange100: string; /** Background only */ orange10: string; /** Hover/down state and suitable for text on red10 */ red150: string; /** Suitable for text on red10, mono10, and lighter */ red100: string; /** Suitable for importance/urgency indicators */ red50: string; /** Background only */ red10: string; }; effects: { dropShadow: string; innerShadow: string; flatShadow: string; /** Shadow to drop under text to improve legibility when over images */ textShadow: string; /** Overlay to improve legibility of text */ overlayGradient: string; /** Fade right edge */ fadeRight: string; /** Translucent gray for dialog backdrops */ backdrop: string; }; fonts: { sans: string; }; mediaQueries: { lg: string; md: string; sm: string; xs: string; /** Determines if the input device has the notion of hover, e.g. mouse. */ hover: string; }; grid: { breakpoints: {}; }; space: { /** Equivalent to 5px */ 0.5: string; /** Equivalent to 10px */ 1: string; /** Equivalent to 20px */ 2: string; /** Equivalent to 40px */ 4: string; /** Equivalent to 60px */ 6: string; /** Equivalent to 120px */ 12: string; }; textVariants: Record<"xxxl" | "xxl" | "xl" | "lg" | "lg-display" | "md" | "sm" | "sm-display" | "xs" | "xxs" | "bq", import("../typography/v3").TextTreatment>; }; /** All available px spacing maps */ export type SpacingUnit = keyof typeof THEME["space"]; /** All available color keys */ export type Color = keyof typeof THEME["colors"]; /** All available color values */ export type ColorValue = typeof THEME["colors"][Color]; /** All available width breakpoint */ export type Breakpoint = keyof typeof breakpoints; export {};