And so does this paragraphy of text.
This is really important.
``` ### 自定义属性 #### 最大行宽度 `o3-foundation` 包括 CSS 自定义属性 `--o3-typography-max-line-width` 为可读性限制打字行长度. 举个例子. ```css .my-selector { max-width: var(--o3-typography-max-line-width); } ``` 您可能想根据我们 [设计准则](https://origami-for-everyone.ft.com/guides/typography/)为此,我们建议使用 [c 相对单位](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units#distance_units)。 。 。 . 举个例子. ```css .my-selector { max-width: 70ch; } ``` ## 正常化 `o3-foundation` 提供了一组CSS自定义属性,用于实现默认浏览器样式的常态化,并对元素应用了一组默认. 这是为了确保所有项目和各自品牌有一个一致的起点。 正常化清单包括: - 规范样式 `, ` - 在 Mozilla 和 WebKit 浏览器中添加字体吸附 - 减少提出动议的用户 - 连接正常化 - 文本相关要素的正常化 - 规范形式元素 ## 与 Z 索引相叠 我们建议避免设置 `z-index`。在必要时, Origami 提供了一些标准值作为自定义属性。 这有助于防止项目内部的冲突. 1. [没有 Z 索引属性的堆栈](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index) 在可能的情况下. 2. 目标减少 `z-index` 而不是自己养活自己 `z-index` 数值. 3. 何处 `z-index` ,使用以下标准值。 记住,虽然, `z-index` 不是一种全球价值,只适用于 [堆叠上下文( mdn)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context)你可能会找到乔什·W·克莫的 [什么地狱,Z指数?](https://www.joshwcomeau.com/css/stacking-contexts/) 一个很好的介绍. - `--o3-z-index`: 如果 `z-index` 这是不可避免的. - `--o3-z-popover`: 覆盖内容的弹出式, 如选择、 自动完成下拉、 日历部件、 工具提示 . - `--o3-z-navigation-popover`:导航会覆盖内容,例如粘贴头和抽屉. - `--o3-z-message-polite-popover`:非模式性,非批判性的信息覆盖,如营销旗. - `--o3-z-message-service-popover`: 吐司等重要服务或状态信息的非模式,信息覆盖. - `--o3-z-modal-dialog`: Modal 对话框 / 覆盖,防止与基本内容的互动. 如果两个要素属于同一类别并相互重叠,可递增一个: ```css .navigation-drawer { z-index: calc(var(--o3-z-navigation-popover) + 1); } .navigation-sticky { z-index: var(--o3-z-navigation-popover); } ``` ## 焦点环 `o3-foundation` 以两种风格提供焦点环. 1. 默认情况下一个单一的大纲,例如关于锚地元素的大纲,它是无侵扰性的. 2. 按钮和窗体元素的双聚焦环,无论元素颜色和背景如何,这都确保了对比. 双焦环由两个环组成:外黑环和内白环. 默认外环为黑色,外环为白色. 然而,如果使用反向主题,颜色会被倒转. 如果需要将焦点环应用到与上述元素不同的元素上,可以使用 `o3-apply-focus-ring` 课上的元素. 用户也可以通过使用 `o3-revert-focus` 课在元素. ## 字体 `o3-foundation` 定义 2 `@font-face`第一个是 `Metric2-VF` 并用于所有品牌。 第二个是 `FinancierDisplayWeb` 目前仅由核心品牌使用. ## 图标 CSS 自定义图标属性以格式包含每个品牌: `--o3-icon-[ICON NAME]`。 。 。 . 图标 CSS 自定义属性是 [url () CSS 函数](https://developer.mozilla.org/en-US/docs/Web/CSS/url) 用于编码的图标 SVG。 它可能在任何地方使用 [url( )](https://developer.mozilla.org/en-US/docs/Web/CSS/url) 可能用于例如: `background-image` 财务报告和审定财务报表 `mask`。 。 。 . 例如,创建 `1rem` 从当前文本颜色继承颜色的大小图标 : ```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; } ``` ### 资源 - 折纸站 [https://zeroheight.com/04668e87f/v/latest/p/48c763-摄影](https://zeroheight.com/04668e87f/v/latest/p/48c763-iconography) - 故事书-https://o3.origami.ft.com/?path=/story/o3-foundation-o3-icon-icon - C ## 颜色 o3- foundation 为三种颜色提供了 CSS 自定义属性: - 调色板: 底色, 如 `--o3-color-palette-paper`, (中文(简体) ), `--o3-color-palette-teal`。 。 。 . - 使用大小写: 语义颜色, 如 `--o3-color-use-case-page-background`, (中文(简体) ), `--o3-color-use-case-page-inverse-background`。 。 。 . - 调色板颜色: 调色板颜色 `--o3-color-palette-black-10`, (中文(简体) ), `--o3-color-palette-teal-100`。 。 。 . 我们建议在存在使用大小写符号的地方使用该符号,因为这使我们能够灵活地根据使用方式更新基本颜色。 然而,最好直接使用调色板或锡克颜色,而不是错误地使用用例符号. 示例 ```css .example-text { color: var(--o3-color-palette-black); } ``` ### 资源 - 折纸站 [https://zeroheight.com/04668e87f/v/latest/p/22a635-彩色](https://zeroheight.com/04668e87f/v/latest/p/22a635-colour) - 故事书-https://o3.origami.ft.com/?path=/story/o3-foundation-o3-color-primary-palette 页面存档备份,存于互联网档案馆 - Figma - https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core--Origami-o3-?node-id=0-1&p=f&m=dev ## 间距 o3- foundation 为格式的标准间距值提供 CSS 自定义属性 : `--o3-spacing-[spacing size]`。这些随T恤大小从 `5xs` 改为 `4xl`。 。 。 . 示例 ```css .example-spacing { margin: var(--o3-spacing-2xs); } ``` 见文件a [完整间隔符号列表](https://npmcn.com/components/o3-foundation/docs/spacing.md)。 。 。 . ### 资源 - 折纸站 [https://zeroheight.com/04668e87f/v/latest/p/43ea5b-scale (中文(简体) )](https://zeroheight.com/04668e87f/v/latest/p/43ea5b-scale) - 故事集-https://o3.origami.ft.com/?path=/story/o3-foundation-o3-相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相距相 - Figma - https://www.figma.com/design/VVM0PixrY3IRZq2ZUTdWfU/%F0%9F%92%A0-Core--Origami-o3-?node-id=5499-2000&p=f&m=dev ## 网格 这个 `o3-grid` 系统,由 `o3-foundation`,规范跨英尺网格的使用。 这个 `o3-grid` 在不同屏幕大小上响应,并与 [`o-grid`](https://o2-core.origami.ft.com/?path=/docs/maintained-o-grid-readme--docs) 组件。 关于电网系统的更详细准则,请检查我们的文档 [`o3-grid`](https://origami-beta.ft.com/guides/grid/)。 。 。 . 对于方便和标准化的网格布局,应用 `o3-grid` 分类到元素 : ```html