@financial-times/o3-foundation
Version:
Origami foundations with design tokens
238 lines (236 loc) • 17.8 kB
JavaScript
/**
* Do not edit directly, this file was auto-generated.
*/
export const o3_color_palette_black = "#000000";
export const o3_color_palette_white = "#ffffff";
export const o3_color_palette_teal = "#0d7680";
export const o3_color_palette_slate = "#262a33";
export const o3_color_palette_slate_white_5 = "#f4f4f5";
export const o3_color_palette_slate_white_15 = "#dedfe0";
export const o3_color_palette_lemon = "#fabf14";
export const o3_color_palette_lemon_10 = "#fff2cc";
export const o3_color_palette_lemon_90 = "#695008";
export const o3_color_palette_jade = "#00994d";
export const o3_color_palette_jade_10 = "#ccebdb";
export const o3_color_palette_jade_90 = "#00572c";
export const o3_color_palette_crimson = "#b30000";
export const o3_color_palette_crimson_10 = "#fae6e6";
export const o3_color_palette_black_5 = "#f2f2f2";
export const o3_color_palette_black_10 = "#e6e6e6";
export const o3_color_palette_black_20 = "#cccccc";
export const o3_color_palette_black_30 = "#b3b3b3";
export const o3_color_palette_black_40 = "#999999";
export const o3_color_palette_black_50 = "#808080";
export const o3_color_palette_black_60 = "#666666";
export const o3_color_palette_black_70 = "#4d4d4d";
export const o3_color_palette_black_80 = "#333333";
export const o3_color_palette_black_90 = "#1a1a1a";
export const o3_color_palette_teal_20 = "#052f33";
export const o3_color_palette_teal_30 = "#08474d";
export const o3_color_palette_teal_40 = "#0a5e66";
export const o3_color_palette_teal_50 = "#0d7680";
export const o3_color_palette_teal_60 = "#108d99";
export const o3_color_palette_teal_70 = "#12a5b3";
export const o3_color_palette_teal_80 = "#15bccc";
export const o3_color_palette_teal_90 = "#17d4e6";
export const o3_color_palette_teal_100 = "#1aebff";
export const o3_color_use_case_link_text = "#0d7680";
export const o3_color_use_case_link_text_hover = "#08474d";
export const o3_color_use_case_link_underline = "#cfd8d1";
export const o3_color_use_case_link_underline_hover = "#9ec0bd";
export const o3_color_use_case_link_inverse_text = "#ffffff";
export const o3_color_use_case_link_inverse_text_hover = "#cccccc";
export const o3_color_use_case_link_inverse_underline = "#ffffff";
export const o3_color_use_case_link_inverse_underline_hover = "#cccccc";
export const o3_color_use_case_page_background = "#ffffff";
export const o3_color_use_case_page_inverse_background = "#262a33";
export const o3_color_use_case_body_text = "#333333";
export const o3_color_use_case_support_text = "#4d4d4d";
export const o3_color_use_case_support_inverse_text = "#e9eaeb";
export const o3_color_use_case_body_inverse_text = "#ffffff";
export const o3_color_use_case_muted_text = "#cccccc"; // "Muted" text is less prominent, for example credits and captions.
export const o3_color_use_case_muted_inverse_text = "#a8aaad"; // "Muted" text is less prominent, for example credits and captions.
export const o3_color_use_case_heading_text = "#1a1a1a";
export const o3_color_use_case_heading_inverse_text = "#ffffff";
export const o3_color_use_case_button_foreground = "#ffffff";
export const o3_color_use_case_button_foreground_disabled = "#ffffff";
export const o3_color_use_case_button_default = "#0d7680";
export const o3_color_use_case_button_hover = "#0a5e66";
export const o3_color_use_case_button_pressed = "#052f33";
export const o3_color_use_case_button_disabled = "#9ec0bd";
export const o3_color_use_case_error_foreground = "#b30000";
export const o3_color_use_case_error_background = "#fae6e6";
export const o3_color_use_case_warning_background = "#fff2cc";
export const o3_color_use_case_warning_foreground = "#695008";
export const o3_color_use_case_warning_highlight = "#fabf14";
export const o3_color_use_case_success_background = "#ccebdb";
export const o3_color_use_case_success_foreground = "#00572c";
export const o3_color_use_case_success_highlight = "#00994d";
export const o3_color_use_case_border = "#cccccc";
export const o3_color_use_case_surface_background = "#dedfe0";
export const o3_color_use_case_surface_light_background = "#f4f4f5";
export const o3_spacing_5xs = "0.25rem";
export const o3_spacing_4xs = "0.5rem";
export const o3_spacing_3xs = "0.75rem";
export const o3_spacing_2xs = "1rem";
export const o3_spacing_xs = "1.25rem";
export const o3_spacing_s = "1.5rem";
export const o3_spacing_m = "2rem";
export const o3_spacing_l = "2.5rem";
export const o3_spacing_xl = "3rem";
export const o3_spacing_2xl = "4rem";
export const o3_spacing_3xl = "5rem";
export const o3_spacing_4xl = "6rem";
export const o3_type_display_lg_font_family = "financier display VF, serif"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_font_weight = "800"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_font_size = "3rem"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_lg_line_height = "3rem"; // Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_family = "financier display VF, serif"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_weight = "800"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_font_size = "2.5rem"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_md_line_height = "2.5rem"; // Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_family = "financier display VF, serif"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_weight = "800"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_font_size = "2rem"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_display_sm_line_height = "2rem"; // Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.
export const o3_type_title_lg_font_family = "metric 2 VF, sans-serif"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_font_weight = "700"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_font_size = "1.75rem"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_lg_line_height = "2rem"; // Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.
export const o3_type_title_md_font_family = "metric 2 VF, sans-serif"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_font_weight = "400"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_font_size = "1.5rem"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_md_line_height = "2rem"; // Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.
export const o3_type_title_sm_font_family = "metric 2 VF, sans-serif"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_font_weight = "400"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_line_height = "1.75rem"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_title_sm_font_size = "1.25rem"; // Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.
export const o3_type_body_lg_font_family = "metric 2 VF, sans-serif"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_font_weight = "400"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_font_size = "1.125rem"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_lg_line_height = "1.5rem"; // Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.
export const o3_type_body_base_font_family = "metric 2 VF, sans-serif"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_font_weight = "400"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_font_size = "1rem"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_base_line_height = "1.5rem"; // Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.
export const o3_type_body_highlight_font_family = "metric 2 VF, sans-serif"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_font_weight = "700"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_font_size = "1rem"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_body_highlight_line_height = "1.5rem"; // Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.
export const o3_type_detail_font_family = "metric 2 VF, sans-serif"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_font_weight = "400"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_font_size = "0.875rem"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_detail_line_height = "1.25rem"; // Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.
export const o3_type_label_font_family = "metric 2 VF, sans-serif"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_font_weight = "400"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_font_size = "0.875rem"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_line_height = "1.25rem"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_type_label_text_case = "uppercase"; // Use this style for labels such as badges and metadata in teasers and toppers (e.g., "Live," "Premium," or the main timestamp). Avoid using full sentences.
export const o3_font_family_metric = "metric 2 VF, sans-serif";
export const o3_font_family_financier_display = "financier display VF, serif";
export const o3_font_family_georgia = "georgia, serif";
export const o3_font_weight_light = "300";
export const o3_font_weight_regular = "400";
export const o3_font_weight_medium = "500";
export const o3_font_weight_semibold = "700";
export const o3_font_weight_bold = "800";
export const o3_font_lineheight_0 = "1.25rem";
export const o3_font_lineheight_1 = "1.25rem";
export const o3_font_lineheight_2 = "1.5rem";
export const o3_font_lineheight_3 = "1.75rem";
export const o3_font_lineheight_4 = "2rem";
export const o3_font_lineheight_5 = "2rem";
export const o3_font_lineheight_6 = "2.5rem";
export const o3_font_lineheight_7 = "3rem";
export const o3_font_lineheight_8 = "3.5rem";
export const o3_font_lineheight_9 = "4.5rem";
export const o3_font_lineheight_10 = "5.25rem";
export const o3_font_lineheight_negative_2 = "1rem";
export const o3_font_lineheight_negative_1 = "1rem";
export const o3_font_size_0 = "1rem";
export const o3_font_size_1 = "1.125rem";
export const o3_font_size_2 = "1.25rem";
export const o3_font_size_3 = "1.5rem";
export const o3_font_size_4 = "1.75rem";
export const o3_font_size_5 = "2rem";
export const o3_font_size_6 = "2.5rem";
export const o3_font_size_7 = "3rem";
export const o3_font_size_8 = "3.5rem";
export const o3_font_size_9 = "4.5rem";
export const o3_font_size_10 = "5.25rem";
export const o3_font_size_negative_2 = "0.75rem";
export const o3_font_size_negative_1 = "0.875rem";
export const o3_font_lineheight_metric2_0 = "1.5rem";
export const o3_font_lineheight_metric2_1 = "1.5rem";
export const o3_font_lineheight_metric2_2 = "1.75rem";
export const o3_font_lineheight_metric2_3 = "2rem";
export const o3_font_lineheight_metric2_4 = "2rem";
export const o3_font_lineheight_metric2_5 = "2.5rem";
export const o3_font_lineheight_metric2_6 = "3rem";
export const o3_font_lineheight_metric2_7 = "3.5rem";
export const o3_font_lineheight_metric2_8 = "4.5rem";
export const o3_font_lineheight_metric2_9 = "5.25rem";
export const o3_font_lineheight_metric2_negative_2 = "1rem";
export const o3_font_lineheight_metric2_negative_1 = "1.25rem";
export const o3_font_size_metric2_0 = "1rem";
export const o3_font_size_metric2_1 = "1.125rem";
export const o3_font_size_metric2_2 = "1.25rem";
export const o3_font_size_metric2_3 = "1.5rem";
export const o3_font_size_metric2_4 = "1.75rem";
export const o3_font_size_metric2_5 = "2rem";
export const o3_font_size_metric2_6 = "2.5rem";
export const o3_font_size_metric2_7 = "3rem";
export const o3_font_size_metric2_8 = "4rem";
export const o3_font_size_metric2_9 = "4.5rem";
export const o3_font_size_metric2_negative_2 = "0.75rem";
export const o3_font_size_metric2_negative_1 = "0.875rem";
export const o3_focus_use_case_ring_inner = {
blur: "0",
spread: "2",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_outer = {
blur: "0",
spread: "4",
color: "#4d4d4d",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_inverse_inner = {
blur: "0",
spread: "2",
color: "#4d4d4d",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_ring_inverse_outer = {
blur: "0",
spread: "4",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_outline_color = {
blur: "0",
spread: "2",
color: "#0d7680",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_focus_use_case_outline_inverse_color = {
blur: "0",
spread: "2",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
};
export const o3_border_radius_1 = "0.125rem"; // for default radius on interactive elements
export const o3_border_radius_2 = "0.25rem"; // for the outer radius of interactive elements that have both inner and outer boundaries as in box radio button