⚠️ 注: 已替换为 o3 创建请参看 移徙指南 用于升级的步骤.

o-颜色

用于管理颜色的组件 。 包括 FT 彩色调色板.

• 使用量
• 标记
• CSS 自定义属性
• 萨斯
• 移徙
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-colors。 。 。 .

标记

颜色使用大小写类

有限的颜色 使用大小写 提供CSS课程,包括:

• .o-colors-page-background
• .o-colors-box-background
• .o-colors-body-text
• .o-colors-muted-text

<body class="o-colors-page-background">
    <!-- default background colour set -->
    <!-- e.g. for the core brand `background: #fff1e5;` -->
</body>

用于构建服务用户的颜色更多 CSS 自定义属性。 。 。 .

CSS 自定义属性

色彩调色板自定义属性

所有调色板颜色,包括默认的组合和色调,都可以作为CSS自定义属性(CSS可变)格式 --o-colors-[NAME]。 。 。 .

见 所有可用的调色板颜色 在登记册中.

.ft-pink {
    background: var(--o-colors-paper);
    color: var(--o-colors-black-80);
}

颜色自定义属性

有限的颜色 使用大小写 也可作为CSS自定义属性(CSS变量)提供,包括:

• --o-colors-page-background
• --o-colors-box-background
• --o-colors-body-text
• --o-colors-muted-text
• --o-colors-link-text
• --o-colors-link-hover-text

body {
    background: var(--o-colors-page-background);
}

萨斯

o-colors有多个混音器和功能供您访问项目中的调色板. 我们建议Sass项目直接使用这些混合体和功能. 举个例子. 颜色ByName 财务报告和审定财务报表 颜色Byuses case然而,也可以使用以下选项输出所有 o-colors CSS 自定义属性(CSS变量)和类: oColors 混合剂.

@import '@financial-times/o-colors/main';
@include oColors(
    $opts: (
        'palette-custom-properties': true,
        // e.g. --o-colors-paper
        'usecase-custom-properties': true,
        // e.g. --o-colors-page-background
        'usecase-classes': true // e.g. .o-colors-page-background,
    )
);

调色板颜色

o-colors 定义了一个颜色调色板( 一组命名的颜色), 它可能是 在登记册中预览。自定义调色板颜色可能会被添加到调色板上,以便与依赖性共享.

调色板默认还有额外的颜色,包括色调和混音. 见注册演示 一个完整的名单.

ft-pink 财务报告和审定财务报表 ft-grey 是一些数字资产中使用的品牌颜色,例如FT标志,但数字用户界面的有效使用案例数量有限。 而不是考虑 paper 财务报告和审定财务报表 slate 或黑相/相纸混合,例如 black-80。作为用于 ft-pink,它可用于防止错误颜色的闪出作为标志图像负载.

默认调色板颜色

使用调色板获取默认颜色 oColorsByName。 。 。 .

.example {
    // Get a default o-colors palette colour.
    background: oColorsByName('paper');
}

自定义调色板颜色

设置自定义调色板颜色以与其他组件共享调用 oColorsSetColor。 。 。 . 对项目或组件必须使用向前斜线进行命名.

// Set a custom palette colour within a project `o-example`.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value: #ff69b4
);

.example {
    // Get a custom palette colour from a project `o-example`.
    background: oColorsByName('o-example/myhotpink');
}

默认的自定义颜色不允许 音调 以减少项目内使用的颜色。 允许Tones设置 allow-tones 选项.

// Set a custom palette colour within a project `o-example`,
// which allows tones of the same colour.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value: #ff69b4,
    $opts: (
        'allow-tones': true,
    )
);

.example {
    // Get a toned custom palette colour from a project `o-example`.
    background-color: oColorsGetTone('o-example/myhotpink', 80);
}

删除一个颜色被视为突破性变化,需要主放出. 向用户告知一种颜色不应通过传递而贬值 $opts 带有贬损消息的参数.

// Deprecate a custom colour, which will be removed in a future major release.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value #ff69b4,
    $opts: (
        'deprecated': 'Use the default colour claret instead.',
    )
);

见 o- 颜色 SassDoc 更多细节和实例.

使用大小写

A 类 彩色调色板 帮助产品使用同一套颜色,但并不帮助他们一致地使用颜色. 因此o-colors提供了基于用例返回颜色的工具. 例如,页面背景或正文文本的颜色.

默认使用大小写

获取默认使用大小写调用颜色 oColorsByUsecase。 。 。 .

html {
    // get the background colour for the page usecase
    background: oColorsByUsecase('page', 'background');
}

.paragraph {
    // get the text colour for the body usecase
    color: oColorsByUsecase('body', 'text');
}

自定义使用大小写

创建新的使用大小写呼叫 oColorsSetUseCase。 。 。 .

• $usecase: 使用套件的名称, 如 “ page ” 。 这必须包括您组件或工程的命名空间,然后是向前斜线.
• $colors: 将属性("文本","背景","边界",或"外线")映射到调色板颜色名上.
• $opts (可选) :
  • deprecated: 用于用例的贬损信息.

// set colours for a "stripes" in o-example.
@include oColorsSetUseCase(
    'o-example/stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    )
);

删除一个使用大小写是一个突破性更改,需要主放出. 为通知用户,不应使用一个使用套件,而应加以折旧。 通过一个 $opts 带有贬损消息的参数.

折旧所有使用大小写属性 :

// deprecate all usecase properties for the o-example custom usecase "stripes".
@include oColorsSetUseCase(
    'o-example',
    'stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    ),
    (
        'deprecated': 'o-example has no stripes anymore, use a different colour',
    )
);

折旧个人使用大小写属性 :

// deprecate only the background property for the o-example custom usecase "stripes".
@include oColorsSetUseCase(
    'o-example',
    'stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    ),
    (
        'deprecated': (
            'background':
                'o-example stripes has no background anymore, use a different colour',
        ),
    )
);

生成文本颜色

oColorsGetTextColor 将返回基于背景和指定的不透明度的浅色或暗色文字颜色.

.example {
    background: oColorsByName('teal');
    // Get a text colour for a teal background
    color: oColorsGetTextColor('teal');
}

.example {
    background: oColorsByName('teal');
    // Get a text colour for a teal background,
    // with greater than usual opacity (80)
    color: oColorsGetTextColor('teal', 80);
}

背景对比度和产生的文本颜色对照 WCAG 2.1准则。如果对比度过低,则投出出出错。 默认情况下, 在 AA 级别检查 对比度 。 可检查对比度 大文本 或针对更严格的AAA建议(正常、大、或大).

.example-large-text {
    background: oColorsByName('teal');
    // Get a text colour for a teal background,
    // enforce a lower level of contrast "large text".
    color: oColorsGetTextColor('teal', $minimum-contrast: 'aa-large');
}

设定 $minimum-contrast 改为 null 删除对比检查。 只忽略对比 附带或标志文本,否则您的项目可能无法访问.

混合颜色

oColorsMix 将按百分比混合两种颜色。 这给人留下了底色在背景颜色上不透明的百分比时出现的印象. oColorsMix 将接受一个颜色值或一个o-colors调色板颜色的名称作为参数.

默认 oColorsMix 与页面背景颜色使用大小写相混合 :

$color: oColorsMix(
    $color: 'black',
    $percentage: 30,
); // same as black-30

但可出出二种相相相. 例如,以20%的速度混合平板电脑:

$color: oColorsMix(
    $color: 'claret',
    $background: 'slate',
    $percentage: 20,
);

调色板颜色

O-克色色调是调色板颜色,带有被修改的饱和度和发光度,在保持活性的同时会形成更轻或更暗的颜色.

所推荐的色调已经在色调中,例如:. teal-80 (见 登记册中的默认值) (中文(简体) ). 然而,对于需要使用新语气的情况 oColorsGetTone。它将返回基于指定亮度的新颜色.

.teal-tone-example {
    background-color: oColorsGetTone('teal', 80);
}

就设计的一致性而言,并非所有颜色都允许被标注。 只有调色板中带有默认色调的颜色(如teal,oxford,和claret)才能被使用. 其他颜色 可能还是混血儿。如果您的工程使用 oColorsSetColor,这些可能通过设置 allow-tones 选项。 。 。 .

颜色工具

o-colors为用颜色工作提供了其他有用的功能,包括:

• 校对:Soup
• 颜色亮度
• 颜色图示

见 o- 颜色 SassDoc 更多细节和实例.

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .