/** * Color -- * Color maps names to values. * This is the "raw" store of all OpenFin colors * referenced by their Figma names. * * This is the only place Color values should be defined */ export declare const Color: { readonly white: "#FFFFFF"; readonly lightGray1: "#FAFBFE"; readonly lightGray2: "#F3F5F8"; readonly lightGray3: "#ECEEF1"; readonly lightGray4: "#DDDFE4"; readonly lightGray5: "#C9CBD2"; readonly neutralGray: "#7D808A"; readonly neutralGray80: "rgba(125,128,138,0.8)"; readonly silverGray: "#C0C1C2"; readonly darkGray1: "#53565F"; readonly darkGray2: "#383A40"; readonly darkGray3: "#2F3136"; readonly darkGray4: "#24262B"; readonly darkGray5: "#1E1F23"; readonly darkGray6: "#111214"; readonly openFinDarkest: "#3D39CD"; readonly openFinDarker: "#4642E0"; readonly openFin: "#504CFF"; readonly openFinLight: "#5254FB"; readonly openFinLighter: "#5C5EFE"; readonly openFinLightest: "#6864FF"; readonly functional1: "#207735"; readonly functional2: "#46C8F1"; readonly functional3: "#0A76D3"; readonly functional4: "#6CADE5"; readonly functional5: "#0A76D3"; readonly functional6: "#882BFE"; readonly functional7: "#F31818"; readonly functional8: "#C93400"; readonly functional9: "#FF5E60"; readonly functional10: "#F48F00"; readonly purple: "#8C61FF"; readonly lightblue: "#36C3FE"; readonly aqua: "#00CC88"; readonly yellow: "#FFEB00"; readonly salmon: "#FF8C4C"; readonly pink: "#FF5E60"; readonly lightpink: "#FF8FB8"; readonly white00: "rgba(255,255,255,0.0)"; readonly white10: "rgba(255,255,255,0.1)"; readonly white20: "rgba(255,255,255,0.2)"; readonly white30: "rgba(255,255,255,0.3)"; readonly white40: "rgba(255,255,255,0.4)"; readonly white50: "rgba(255,255,255,0.5)"; readonly white60: "rgba(255,255,255,0.6)"; readonly white70: "rgba(255,255,255,0.7)"; readonly white80: "rgba(255,255,255,0.8)"; readonly white90: "rgba(255,255,255,0.9)"; readonly black00: "rgba(0,0,0,0.0)"; readonly black10: "rgba(0,0,0,0.1)"; readonly black20: "rgba(0,0,0,0.2)"; readonly black30: "rgba(0,0,0,0.3)"; readonly black40: "rgba(0,0,0,0.4)"; readonly black50: "rgba(0,0,0,0.5)"; readonly black60: "rgba(0,0,0,0.6)"; readonly black70: "rgba(0,0,0,0.7)"; readonly black80: "rgba(0,0,0,0.8)"; readonly black90: "rgba(0,0,0,0.9)"; readonly transparent: "transparent"; readonly openFinActive: "#4642FF"; readonly openFinHover: "#6965FF"; readonly lightGray4Active: "#D7DADF"; readonly lightGray4Hover: "#EBECEF"; readonly darkGray2Active: "#33353B"; readonly darkGray2Hover: "#44464E"; }; /** * Size -- * Common keys used to describe a range of values * - Unit, UnitPx, Shadow, FontSize */ export declare const Size: { readonly xsmall: "xsmall"; readonly small: "small"; readonly base: "base"; readonly large: "large"; readonly xlarge: "xlarge"; readonly xxlarge: "xxlarge"; readonly xxxlarge: "xxxlarge"; readonly xxxxlarge: "xxxxlarge"; }; /** * SizeName -- * Primarly a Storybook Helper for displaying human-friendly size names * It's more intuitive to maintain this if it lives here */ export declare const SizeName: { readonly xsmall: "Extra Small"; readonly small: "Small"; readonly base: "Base"; readonly large: "Large"; readonly xlarge: "Extra Large"; readonly xxlarge: "2X Large"; readonly xxxlarge: "3X Large"; readonly xxxxlarge: "4X Large"; }; /** * Unit -- * Design System works on a 4px Grid * Units are represented as numbers here for convienence in Javascript, e.g. `Unit.base * 4` */ export declare const Unit: { readonly xsmall: 4; readonly small: 8; readonly base: 12; readonly large: 16; readonly xlarge: 20; readonly xxlarge: 24; readonly xxxlarge: 32; readonly xxxxlarge: 48; }; /** * UnitPx / "px" -- * Design System works on a 4px Grid * UnitPx includes the px suffix for convenience in Styled Components */ export declare const UnitPx: { readonly xsmall: "4px"; readonly small: "8px"; readonly base: "12px"; readonly large: "16px"; readonly xlarge: "20px"; readonly xxlarge: "24px"; readonly xxxlarge: "32px"; readonly xxxxlarge: "48px"; }; /** * Radius -- * The border radius values supported in the design system */ export declare const Radius: { readonly xsmall: "2px"; readonly small: "4px"; readonly base: "8px"; readonly large: "24px"; readonly pill: "100vh"; readonly round: "50%"; readonly none: "0"; }; /** * Shadow -- * Design System drop shadows * Note: This does not include any `text-shadow` */ export declare const Shadow: { base: string; }; /** * Design System uses "Inter" and we include @font-face definitions to load a CDN hosted version of the font * The rest of the stack includes reasonable fallbacks for contingency cases where the CDN asset fails to load */ export declare const FontFamily: string; /** * FontSize -- * Design System font sizes using standard scale */ export declare const FontSize: { readonly xsmall: "8px"; readonly small: "10px"; readonly base: "12px"; readonly large: "14px"; readonly xlarge: "16px"; readonly xxlarge: "18px"; readonly xxxlarge: "20px"; readonly xxxxlarge: "40px"; }; /** * FontWeight -- * Design System font weights (three) */ export declare const FontWeight: { readonly normal: 400; readonly bold: 600; }; /** * LineHeight -- * Read about "unitless" line-height * @link https://css-tricks.com/almanac/properties/l/line-height/#unitless-line-heights */ export declare const LineHeight: { readonly ui: 1; readonly heading: 1.2; readonly text: 1.5; }; /** * Transitions -- * Design System transition easings because UI motion feels better if everything moves the same way. */ export declare const Transition: { readonly base: "200ms cubic-bezier(0.16, 1, 0.3, 1)"; readonly none: "0ms"; }; /** * IconSize -- * Design System standard set of icon sizes */ export declare const IconSize: { readonly xsmall: "8px"; readonly small: "12px"; readonly base: "15px"; readonly large: "20px"; readonly xlarge: "24px"; readonly xxlarge: "32px"; readonly xxxlarge: "48px"; };