@financial-times/o3-foundation
Version:
Origami foundations with design tokens
256 lines (253 loc) • 12.3 kB
CSS
@import "./main.css";
/* src/css/tokens/core/_variables.css */
[data-o3-brand=core] {
--o3-color-palette-ft-pink: #fcd0b1;
--o3-color-palette-ft-grey: #333333;
--o3-color-palette-white: #ffffff;
--o3-color-palette-black: #000000;
--o3-color-palette-claret: #990f3d;
--o3-color-palette-teal: #0d7680;
--o3-color-palette-oxford: #0f5499;
--o3-color-palette-slate: #262a33;
--o3-color-palette-paper: #fff1e5;
--o3-color-palette-mandarin: #ff8833;
--o3-color-palette-light-blue: #00a0dd;
--o3-color-palette-crimson: #cc0000;
--o3-color-palette-graphics-dark-blue: #006f9b;
--o3-color-palette-wheat: #f2dfce;
--o3-color-palette-candy: #ff7faa;
--o3-color-palette-wasabi: #96cc28;
--o3-color-palette-jade: #00994d;
--o3-color-palette-velvet: #593380;
--o3-color-palette-lemon: #ffec1a;
--o3-color-palette-sky: #cce6ff;
--o3-color-palette-matisse-blue: #355778;
--o3-color-palette-black-5: #f2e5da;
--o3-color-palette-black-10: #e6d9ce;
--o3-color-palette-black-20: #ccc1b7;
--o3-color-palette-black-30: #b3a9a0;
--o3-color-palette-black-40: #999189;
--o3-color-palette-black-50: #807973;
--o3-color-palette-black-60: #66605c;
--o3-color-palette-black-70: #4d4845;
--o3-color-palette-black-80: #33302e;
--o3-color-palette-black-90: #1a1817;
--o3-color-palette-white-10: #fff2e8;
--o3-color-palette-white-20: #fff4ea;
--o3-color-palette-white-40: #fff7ef;
--o3-color-palette-white-60: #fff9f5;
--o3-color-palette-white-80: #fffcfa;
--o3-color-palette-oxford-30: #082a4d;
--o3-color-palette-oxford-40: #0a3866;
--o3-color-palette-oxford-50: #0d4680;
--o3-color-palette-oxford-60: #0f5499;
--o3-color-palette-oxford-70: #1262b3;
--o3-color-palette-oxford-80: #1470cc;
--o3-color-palette-oxford-90: #177ee6;
--o3-color-palette-oxford-100: #1a8cff;
--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: #0f8e99;
--o3-color-palette-teal-70: #12a5b3;
--o3-color-palette-teal-80: #14bdcc;
--o3-color-palette-teal-90: #17d4e6;
--o3-color-palette-teal-100: #1aecff;
--o3-color-palette-claret-30: #4d081f;
--o3-color-palette-claret-40: #660a29;
--o3-color-palette-claret-50: #800d33;
--o3-color-palette-claret-60: #990f3d;
--o3-color-palette-claret-70: #b31247;
--o3-color-palette-claret-80: #cc1452;
--o3-color-palette-claret-90: #e6175c;
--o3-color-palette-claret-100: #ff1a66;
--o3-color-palette-wheat-100: #ffebd9;
--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: #d4d4d6;
--o3-color-use-case-link-inverse-underline: #ffffff;
--o3-color-use-case-link-inverse-underline-hover: #d4d4d6;
--o3-color-use-case-muted-inverse-text: #a8aaad;
--o3-color-use-case-button-disabled: #9ec0bd;
--o3-color-use-case-error-background: rgba(204, 0, 0, 0.06);
--o3-color-use-case-success-background: #d7f0d1;
--o3-color-use-case-success-foreground: #00572c;
--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-label-text-case: uppercase;
--o3-type-body-content-base-font-family: Georgia;
--o3-type-body-content-base-font-weight: Regular;
--o3-type-body-content-highlight-font-family: Georgia;
--o3-type-body-content-highlight-font-weight: Bold;
--o3-type-body-content-emphasis-font-family: Georgia;
--o3-type-body-content-emphasis-font-weight: Regular;
--o3-type-body-content-emphasis-font-style: italic;
--o3-border-radius-1: 0.125rem;
--o3-border-radius-2: 0.25rem;
--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-color-use-case-link-text: var(--o3-color-palette-teal);
--o3-color-use-case-link-text-hover: var(--o3-color-palette-teal-30);
--o3-color-use-case-page-background: var(--o3-color-palette-paper);
--o3-color-use-case-page-inverse-background: var(--o3-color-palette-slate);
--o3-color-use-case-body-text: var(--o3-color-palette-black-80);
--o3-color-use-case-body-inverse-text: var(--o3-color-palette-white);
--o3-color-use-case-support-text: var(--o3-color-palette-black-70);
--o3-color-use-case-support-inverse-text: #e9eaeb;
--o3-color-use-case-muted-text: var(--o3-color-palette-black-50);
--o3-color-use-case-heading-text: var(--o3-color-palette-black-80);
--o3-color-use-case-heading-inverse-text: var(--o3-color-palette-white);
--o3-color-use-case-footer-text: var(--o3-color-palette-black-80);
--o3-color-use-case-caption-text: var(--o3-color-palette-black-80);
--o3-color-use-case-button-foreground: var(--o3-color-palette-white);
--o3-color-use-case-button-foreground-disabled: var(--o3-color-palette-white-40);
--o3-color-use-case-button-default: var(--o3-color-palette-teal);
--o3-color-use-case-button-hover: var(--o3-color-palette-teal-40);
--o3-color-use-case-button-pressed: var(--o3-color-palette-teal-20);
--o3-color-use-case-error-text: var(--o3-color-palette-crimson);
--o3-color-use-case-error: var(--o3-color-palette-crimson);
--o3-type-display-lg-font-family: var(--o3-font-family-financier-display);
--o3-type-display-lg-font-weight: var(--o3-font-weight-bold);
--o3-type-display-lg-font-size: var(--o3-font-size-7);
--o3-type-display-lg-line-height: var(--o3-font-lineheight-7);
--o3-type-display-md-font-family: var(--o3-font-family-financier-display);
--o3-type-display-md-font-weight: var(--o3-font-weight-bold);
--o3-type-display-md-font-size: var(--o3-font-size-6);
--o3-type-display-md-line-height: var(--o3-font-lineheight-6);
--o3-type-display-sm-font-family: var(--o3-font-family-financier-display);
--o3-type-display-sm-font-weight: var(--o3-font-weight-bold);
--o3-type-display-sm-font-size: var(--o3-font-size-5);
--o3-type-display-sm-line-height: var(--o3-font-lineheight-5);
--o3-type-headline-lg-font-family: var(--o3-font-family-financier-display);
--o3-type-headline-lg-font-weight: var(--o3-font-weight-light);
--o3-type-headline-lg-font-size: var(--o3-font-size-6);
--o3-type-headline-lg-line-height: var(--o3-font-lineheight-6);
--o3-type-headline-md-font-family: var(--o3-font-family-financier-display);
--o3-type-headline-md-font-weight: var(--o3-font-weight-light);
--o3-type-headline-md-font-size: var(--o3-font-size-5);
--o3-type-headline-md-line-height: var(--o3-font-lineheight-5);
--o3-type-headline-sm-font-family: var(--o3-font-family-financier-display);
--o3-type-headline-sm-font-weight: var(--o3-font-weight-light);
--o3-type-headline-sm-font-size: var(--o3-font-size-2);
--o3-type-headline-sm-line-height: var(--o3-font-lineheight-2);
--o3-type-title-lg-font-family: var(--o3-font-family-metric);
--o3-type-title-lg-font-weight: var(--o3-font-weight-semibold);
--o3-type-title-lg-font-size: var(--o3-font-size-metric2-4);
--o3-type-title-lg-line-height: var(--o3-font-lineheight-metric2-3);
--o3-type-title-md-font-family: var(--o3-font-family-metric);
--o3-type-title-md-font-weight: var(--o3-font-weight-regular);
--o3-type-title-md-font-size: var(--o3-font-size-metric2-3);
--o3-type-title-md-line-height: var(--o3-font-lineheight-metric2-3);
--o3-type-title-sm-font-family: var(--o3-font-family-metric);
--o3-type-title-sm-font-weight: var(--o3-font-weight-regular);
--o3-type-title-sm-line-height: var(--o3-font-lineheight-metric2-2);
--o3-type-title-sm-font-size: var(--o3-font-size-metric2-2);
--o3-type-body-lg-font-family: var(--o3-font-family-metric);
--o3-type-body-lg-font-weight: var(--o3-font-weight-regular);
--o3-type-body-lg-font-size: var(--o3-font-size-metric2-1);
--o3-type-body-lg-line-height: var(--o3-font-lineheight-metric2-1);
--o3-type-body-base-font-family: var(--o3-font-family-metric);
--o3-type-body-base-font-weight: var(--o3-font-weight-regular);
--o3-type-body-base-font-size: var(--o3-font-size-metric2-0);
--o3-type-body-base-line-height: var(--o3-font-lineheight-metric2-0);
--o3-type-body-highlight-font-family: var(--o3-font-family-metric);
--o3-type-body-highlight-font-weight: var(--o3-font-weight-semibold);
--o3-type-body-highlight-font-size: var(--o3-font-size-metric2-0);
--o3-type-body-highlight-line-height: var(--o3-font-lineheight-metric2-0);
--o3-type-detail-font-family: var(--o3-font-family-metric);
--o3-type-detail-font-weight: var(--o3-font-weight-regular);
--o3-type-detail-font-size: var(--o3-font-size-metric2-negative-1);
--o3-type-detail-line-height: var(--o3-font-lineheight-metric2-negative-1);
--o3-type-label-font-family: var(--o3-font-family-metric);
--o3-type-label-font-weight: var(--o3-font-weight-regular);
--o3-type-label-font-size: var(--o3-font-size-metric2-negative-1);
--o3-type-label-line-height: var(--o3-font-lineheight-metric2-negative-1);
--o3-type-body-content-base-font-size: var(--o3-font-size-2);
--o3-type-body-content-base-line-height: var(--o3-font-lineheight-4);
--o3-type-body-content-highlight-font-size: var(--o3-font-size-2);
--o3-type-body-content-highlight-line-height: var(--o3-font-lineheight-4);
--o3-type-body-content-emphasis-font-size: var(--o3-font-size-2);
--o3-type-body-content-emphasis-line-height: var(--o3-font-lineheight-4);
--o3-focus-use-case-ring-inner: 0px 0px 0px 4px #ffffff;
--o3-focus-use-case-ring-outer: 0px 0px 0px 8px #4d4845;
--o3-focus-use-case-ring-inverse-inner: 0px 0px 0px 4px #4d4845;
--o3-focus-use-case-ring-inverse-outer: 0px 0px 0px 8px #ffffff;
--o3-focus-use-case-outline-color: 0px 0px 0px 2px #807973;
--o3-focus-use-case-outline-inverse-color: 0px 0px 0px 2px #ffffff;
}
/* src/css/brands/core.css */
@font-face {
src: url(https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2) format("woff2-variations");
font-family: "financier display VF";
font-weight: 300 800;
font-style: normal;
font-display: swap;
}