@financial-times/o3-foundation
Version:
Origami foundations with design tokens
240 lines (238 loc) • 9.03 kB
JavaScript
/**
* Do not edit directly, this file was auto-generated.
*/
export default {
"o3-color-palette-black": "#000000",
"o3-color-palette-white": "#ffffff",
"o3-color-palette-teal": "#0d7680",
"o3-color-palette-slate": "#262a33",
"o3-color-palette-slate-white-5": "#f4f4f5",
"o3-color-palette-slate-white-15": "#dedfe0",
"o3-color-palette-lemon": "#fabf14",
"o3-color-palette-lemon-10": "#fff2cc",
"o3-color-palette-lemon-90": "#695008",
"o3-color-palette-jade": "#00994d",
"o3-color-palette-jade-10": "#ccebdb",
"o3-color-palette-jade-90": "#00572c",
"o3-color-palette-crimson": "#b30000",
"o3-color-palette-crimson-10": "#fae6e6",
"o3-color-palette-black-5": "#f2f2f2",
"o3-color-palette-black-10": "#e6e6e6",
"o3-color-palette-black-20": "#cccccc",
"o3-color-palette-black-30": "#b3b3b3",
"o3-color-palette-black-40": "#999999",
"o3-color-palette-black-50": "#808080",
"o3-color-palette-black-60": "#666666",
"o3-color-palette-black-70": "#4d4d4d",
"o3-color-palette-black-80": "#333333",
"o3-color-palette-black-90": "#1a1a1a",
"o3-color-palette-teal-20": "#052f33",
"o3-color-palette-teal-30": "#08474d",
"o3-color-palette-teal-40": "#0a5e66",
"o3-color-palette-teal-50": "#0d7680",
"o3-color-palette-teal-60": "#108d99",
"o3-color-palette-teal-70": "#12a5b3",
"o3-color-palette-teal-80": "#15bccc",
"o3-color-palette-teal-90": "#17d4e6",
"o3-color-palette-teal-100": "#1aebff",
"o3-color-use-case-link-text": "#0d7680",
"o3-color-use-case-link-text-hover": "#08474d",
"o3-color-use-case-link-underline": "#cfd8d1",
"o3-color-use-case-link-underline-hover": "#9ec0bd",
"o3-color-use-case-link-inverse-text": "#ffffff",
"o3-color-use-case-link-inverse-text-hover": "#cccccc",
"o3-color-use-case-link-inverse-underline": "#ffffff",
"o3-color-use-case-link-inverse-underline-hover": "#cccccc",
"o3-color-use-case-page-background": "#ffffff",
"o3-color-use-case-page-inverse-background": "#262a33",
"o3-color-use-case-body-text": "#333333",
"o3-color-use-case-support-text": "#4d4d4d",
"o3-color-use-case-support-inverse-text": "#e9eaeb",
"o3-color-use-case-body-inverse-text": "#ffffff",
"o3-color-use-case-muted-text": "#cccccc",
"o3-color-use-case-muted-inverse-text": "#a8aaad",
"o3-color-use-case-heading-text": "#1a1a1a",
"o3-color-use-case-heading-inverse-text": "#ffffff",
"o3-color-use-case-button-foreground": "#ffffff",
"o3-color-use-case-button-foreground-disabled": "#ffffff",
"o3-color-use-case-button-default": "#0d7680",
"o3-color-use-case-button-hover": "#0a5e66",
"o3-color-use-case-button-pressed": "#052f33",
"o3-color-use-case-button-disabled": "#9ec0bd",
"o3-color-use-case-error-foreground": "#b30000",
"o3-color-use-case-error-background": "#fae6e6",
"o3-color-use-case-warning-background": "#fff2cc",
"o3-color-use-case-warning-foreground": "#695008",
"o3-color-use-case-warning-highlight": "#fabf14",
"o3-color-use-case-success-background": "#ccebdb",
"o3-color-use-case-success-foreground": "#00572c",
"o3-color-use-case-success-highlight": "#00994d",
"o3-color-use-case-border": "#cccccc",
"o3-color-use-case-surface-background": "#dedfe0",
"o3-color-use-case-surface-light-background": "#f4f4f5",
"o3-spacing-5xs": "0.25rem",
"o3-spacing-4xs": "0.5rem",
"o3-spacing-3xs": "0.75rem",
"o3-spacing-2xs": "1rem",
"o3-spacing-xs": "1.25rem",
"o3-spacing-s": "1.5rem",
"o3-spacing-m": "2rem",
"o3-spacing-l": "2.5rem",
"o3-spacing-xl": "3rem",
"o3-spacing-2xl": "4rem",
"o3-spacing-3xl": "5rem",
"o3-spacing-4xl": "6rem",
"o3-type-display-lg-font-family": "financier display VF, serif",
"o3-type-display-lg-font-weight": "800",
"o3-type-display-lg-font-size": "3rem",
"o3-type-display-lg-line-height": "3rem",
"o3-type-display-md-font-family": "financier display VF, serif",
"o3-type-display-md-font-weight": "800",
"o3-type-display-md-font-size": "2.5rem",
"o3-type-display-md-line-height": "2.5rem",
"o3-type-display-sm-font-family": "financier display VF, serif",
"o3-type-display-sm-font-weight": "800",
"o3-type-display-sm-font-size": "2rem",
"o3-type-display-sm-line-height": "2rem",
"o3-type-title-lg-font-family": "metric 2 VF, sans-serif",
"o3-type-title-lg-font-weight": "700",
"o3-type-title-lg-font-size": "1.75rem",
"o3-type-title-lg-line-height": "2rem",
"o3-type-title-md-font-family": "metric 2 VF, sans-serif",
"o3-type-title-md-font-weight": "400",
"o3-type-title-md-font-size": "1.5rem",
"o3-type-title-md-line-height": "2rem",
"o3-type-title-sm-font-family": "metric 2 VF, sans-serif",
"o3-type-title-sm-font-weight": "400",
"o3-type-title-sm-line-height": "1.75rem",
"o3-type-title-sm-font-size": "1.25rem",
"o3-type-body-lg-font-family": "metric 2 VF, sans-serif",
"o3-type-body-lg-font-weight": "400",
"o3-type-body-lg-font-size": "1.125rem",
"o3-type-body-lg-line-height": "1.5rem",
"o3-type-body-base-font-family": "metric 2 VF, sans-serif",
"o3-type-body-base-font-weight": "400",
"o3-type-body-base-font-size": "1rem",
"o3-type-body-base-line-height": "1.5rem",
"o3-type-body-highlight-font-family": "metric 2 VF, sans-serif",
"o3-type-body-highlight-font-weight": "700",
"o3-type-body-highlight-font-size": "1rem",
"o3-type-body-highlight-line-height": "1.5rem",
"o3-type-detail-font-family": "metric 2 VF, sans-serif",
"o3-type-detail-font-weight": "400",
"o3-type-detail-font-size": "0.875rem",
"o3-type-detail-line-height": "1.25rem",
"o3-type-label-font-family": "metric 2 VF, sans-serif",
"o3-type-label-font-weight": "400",
"o3-type-label-font-size": "0.875rem",
"o3-type-label-line-height": "1.25rem",
"o3-type-label-text-case": "uppercase",
"o3-font-family-metric": "metric 2 VF, sans-serif",
"o3-font-family-financier-display": "financier display VF, serif",
"o3-font-family-georgia": "georgia, serif",
"o3-font-weight-light": "300",
"o3-font-weight-regular": "400",
"o3-font-weight-medium": "500",
"o3-font-weight-semibold": "700",
"o3-font-weight-bold": "800",
"o3-font-lineheight-0": "1.25rem",
"o3-font-lineheight-1": "1.25rem",
"o3-font-lineheight-2": "1.5rem",
"o3-font-lineheight-3": "1.75rem",
"o3-font-lineheight-4": "2rem",
"o3-font-lineheight-5": "2rem",
"o3-font-lineheight-6": "2.5rem",
"o3-font-lineheight-7": "3rem",
"o3-font-lineheight-8": "3.5rem",
"o3-font-lineheight-9": "4.5rem",
"o3-font-lineheight-10": "5.25rem",
"o3-font-lineheight-negative-2": "1rem",
"o3-font-lineheight-negative-1": "1rem",
"o3-font-size-0": "1rem",
"o3-font-size-1": "1.125rem",
"o3-font-size-2": "1.25rem",
"o3-font-size-3": "1.5rem",
"o3-font-size-4": "1.75rem",
"o3-font-size-5": "2rem",
"o3-font-size-6": "2.5rem",
"o3-font-size-7": "3rem",
"o3-font-size-8": "3.5rem",
"o3-font-size-9": "4.5rem",
"o3-font-size-10": "5.25rem",
"o3-font-size-negative-2": "0.75rem",
"o3-font-size-negative-1": "0.875rem",
"o3-font-lineheight-metric2-0": "1.5rem",
"o3-font-lineheight-metric2-1": "1.5rem",
"o3-font-lineheight-metric2-2": "1.75rem",
"o3-font-lineheight-metric2-3": "2rem",
"o3-font-lineheight-metric2-4": "2rem",
"o3-font-lineheight-metric2-5": "2.5rem",
"o3-font-lineheight-metric2-6": "3rem",
"o3-font-lineheight-metric2-7": "3.5rem",
"o3-font-lineheight-metric2-8": "4.5rem",
"o3-font-lineheight-metric2-9": "5.25rem",
"o3-font-lineheight-metric2-negative-2": "1rem",
"o3-font-lineheight-metric2-negative-1": "1.25rem",
"o3-font-size-metric2-0": "1rem",
"o3-font-size-metric2-1": "1.125rem",
"o3-font-size-metric2-2": "1.25rem",
"o3-font-size-metric2-3": "1.5rem",
"o3-font-size-metric2-4": "1.75rem",
"o3-font-size-metric2-5": "2rem",
"o3-font-size-metric2-6": "2.5rem",
"o3-font-size-metric2-7": "3rem",
"o3-font-size-metric2-8": "4rem",
"o3-font-size-metric2-9": "4.5rem",
"o3-font-size-metric2-negative-2": "0.75rem",
"o3-font-size-metric2-negative-1": "0.875rem",
"o3-focus-use-case-ring-inner": {
blur: "0",
spread: "2",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-focus-use-case-ring-outer": {
blur: "0",
spread: "4",
color: "#4d4d4d",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-focus-use-case-ring-inverse-inner": {
blur: "0",
spread: "2",
color: "#4d4d4d",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-focus-use-case-ring-inverse-outer": {
blur: "0",
spread: "4",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-focus-use-case-outline-color": {
blur: "0",
spread: "2",
color: "#0d7680",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-focus-use-case-outline-inverse-color": {
blur: "0",
spread: "2",
color: "#ffffff",
type: "dropShadow",
offsetX: "0",
offsetY: "0",
},
"o3-border-radius-1": "0.125rem",
"o3-border-radius-2": "0.25rem",
};