o3-web-token provides CSS Custom Properties for design tokens representing colours, typographic scale, spacing, and iconography.
o3-web-token supports brands: core, internal, professional and whitelabel.
Import your chosen brand to begin using tokens in your CSS:
@import '@financial-times/o3-web-tokens/core.css';
body {
background-color: var(--o3-color-use-case-page-background);
font-size: var(--o3-font-size-1);
line-height: var(--o3-font-lineheight-1);
}To add support for another brand, import its tokens too:
+@import '@financial-times/o3-web-tokens/core.css';
+@import '@financial-times/o3-web-tokens/internal.css';
.example-custom-link {
color: var(--o3-color-link);
font-size: var(--o3-font-size-3);
line-height: var(--o3-lineheight-3);
}Then apply the brand data selector data-o3-brand="[BRAND]" on a container element within your HTML.
<body data-o3-brand="core">
<a href="#" class="example-custom-link">Example</a>
</body>| State | Major Version | Last Minor Release | Migration guide |
|---|---|---|---|
| ✨ active | 0 | N/A | N/A |
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email origami.support@ft.com.
This software is published by the Financial Times under the MIT licence.