And so does this paragraphy of text.
This is really important.
``` ### Custom Properties #### Max Line Width `o3-foundation` includes a CSS Custom Property `--o3-typography-max-line-width` to limit typography line length for readability. E.g. ```css .my-selector { max-width: var(--o3-typography-max-line-width); } ``` You may want to slightly decrease or increase this limit inline with our [design guidelines](https://origami-for-everyone.ft.com/guides/typography/). To do so we recommend using the [ch relative unit](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#distance_units). E.g. ```css .my-selector { max-width: 70ch; } ``` ## Normalisation `o3-foundation` provides a set of CSS Custom Properties for normalising the default browser styles and also applies a set of defaults to elements. This is to ensure a consistent starting point for all projects and respective brands. The list of normalisations includes: - Normalising styles for `, ` - Adding font-smoothing to Mozilla and WebKit browsers - Reducing motion for users who have requested it - Normalising links - Normalising text related elements - Normalising form elements ## Stacking with z-index We recommend to avoid setting `z-index`. Where needed, Origami provide some standard values as Custom Properties. This help prevent conflicts within projects. 1. [Stack without the z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index) where possible. 2. Aim to reduce `z-index` elsewhere, rather than raise your own `z-index` value. 3. Where `z-index` is required, use a standard value as below. Remember though, `z-index` is not a global value and only applies within a [Stacking Context (mdn)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). You might find Josh W Comeau's [What The Heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/) a good introduction. - `--o3-z-index`: To bump z-index for most elements, if `z-index` is unavoidable. - `--o3-z-popover`: Popovers which overlay content, such as select, autocomplete drop downs, calendar widgets, tooltips. - `--o3-z-navigation-popover`: Navigation which overlays content, such as sticky headers and drawers. - `--o3-z-message-polite-popover`: Non-modal, non-critical messaging overlays such as marketing banners. - `--o3-z-message-service-popover`: Non-modal, messaging overlays for important service or status messages such as toasts. - `--o3-z-modal-dialog`: Modal dialogue / overlays which prevent interaction with underlying content. Where two elements fall into the same category and overlap, you may increment by one: ```css .navigation-drawer { z-index: calc(var(--o3-z-navigation-popover) + 1); } .navigation-sticky { z-index: var(--o3-z-navigation-popover); } ``` ## Focus rings `o3-foundation` provides focus rings in two styles. 1. A single outline by default, for example on anchor elements, which is unobtrusive. 1. A double focus ring for buttons and form elements, this ensures contrast regardless of the element colour and its background. The double focus rings consist of two rings: an outer black ring and an inner white ring. By default, the outer ring is black and the inner ring is white. However, if you are using an inverse theme, the colors will be inverted. If you need to apply a focus ring to a different element than the ones mentioned above, you can use the `o3-apply-focus-ring` class on that element. Users can also revert the focus rings by using the `o3-revert-focus` class on the element. ## Fonts `o3-foundation` defines two `@font-face`-s. The first one is `Metric2-VF` and it is used fot all brands. The second one is `FinancierDisplayWeb` and currently used by core brand only. ## Icons CSS Custom Properties for icons are included for each brand in the format: `--o3-icon-[ICON NAME]`. The icon CSS Custom Property is a [url() CSS function](https://developer.mozilla.org/en-US/docs/Web/CSS/url) for the encoded icon SVG. It may be used anywhere [url()](https://developer.mozilla.org/en-US/docs/Web/CSS/url) may be used such as within `background-image` and `mask`. For example, to create a `1rem` sized icon which inherits its colour from the current text colour: ```css .example-icon-use { /* Create a square the size we want an icon */ display: inline-block; width: 1rem; height: 1rem; /* Set the icon colour, In this case match the current foreground text colour. */ background-color: currentColor; /* Mask the square with an Origami icon. */ mask-image: var(--o3-icon-plus); mask-repeat: no-repeat; mask-size: contain; } ``` See our documentation website for a [full list of icons](https://origami-for-everyone.ft.com/guides/icons/) and more details. ## Colours o3-foundation provides CSS Custom Properties for 3 types of colours: - Palette: Base colours such as `--o3-color-palette-paper`, `--o3-color-palette-teal`. - Usecase: Semantic colours such as `--o3-color-use-case-page-background`, `--o3-color-use-case-page-inverse-background`. - Tints: Modified palette colours `--o3-color-palette-black-10`, `--o3-color-palette-teal-100`. We recommend using a usecase token where one exists, as this allows us flexibility to update the underlying colour based on how it is used. However it is preferable to use a palette or tint colour directly rather than mis-use a usecase token. Example: ```css .example-text { color: var(--o3-color-palette-black); } ``` See our documentation website for a [full list of colours and where to use them](https://origami-for-everyone.ft.com/guides/colours/). ## Spacing o3-foundation provides CSS Custom Properties for standard spacing values in the format: `--o3-spacing-[spacing size]`. These follow t-shirt sizes from `5xs` to `4xl`. Example: ```css .example-spacing { margin: var(--o3-spacing-2xs); } ``` See our documentation website for a [full list of spacing tokens](https://origami-for-everyone.ft.com/guides/spacing/). ## Grid The `o3-grid` system, provided by `o3-foundation`, standardises usage of grid across ft. The `o3-grid` is responsive on different screen sizes and differs from [`o-grid`](https://o2-core.origami.ft.com/?path=/docs/maintained-o-grid-readme--docs) component. For more detailed guidelines on grid system check our documentation for [`o3-grid`](https://origami-beta.ft.com/guides/grid/). For a convenient and standardized grid layout, apply the `o3-grid` class to your element: ```html