Radix Colors

一个华丽、无障碍的颜色系统，用于设计精美、无障碍的网站和应用。一个用于 Radix Colors 的 Dart 库

查看 Radix Colors 的 Flutter 网页演示

安装

将 Radix Colors 包添加到 pubspec.yaml

dependencies:
  radix_colors: ^1.0.3

在您的 dart 文件中导入该包

import 'package:radix_colors/radix_colors.dart';

用法

Radix Colors 提供了 15 种颜色比例，专为第 9 级的白色前景文本设计。

浅色变体

RadixColors.amber;

深色变体

RadixColors.dark.amber;

动态颜色，用于自动浅色/深色主题

RadixColorsDynamic(context).amber;

12 种颜色阶/级

RadixColors.amber.step1;
RadixColors.amber.step2;
RadixColors.amber.step3;
RadixColors.amber.step4;
RadixColors.amber.step5;
RadixColors.amber.step6;
RadixColors.amber.step7;
RadixColors.amber.step8;
RadixColors.amber.step9;
RadixColors.amber.step10;
RadixColors.amber.step11;
RadixColors.amber.step12;

每个比例有 12 个阶。每个阶都为至少一个特定用例进行了设计。

步骤 用例
1 应用背景
2 微妙背景
3 UI 元素背景
4 UI 元素悬停背景
5 UI 元素选中/激活背景
6 微妙边框和分隔线
7 UI 元素边框和焦点环
8 UI 元素悬停边框
9 纯色背景
10 纯色背景悬停
11 低对比度文本
12 高对比度文本

第 1 阶和第 2 阶专为应用程序背景和微妙的组件背景设计。您可以根据您想要达到的效果交替使用它们。

合适的应用包括

  • 主应用背景
  • 条纹表格背景
  • 代码块背景
  • 卡片背景
  • 侧边栏背景
  • 画布区域背景

第 3、4、5 阶专为 UI 组件背景设计。

  • 第 3 阶用于正常状态。
  • 第 4 阶用于悬停状态。
  • 第 5 阶用于按下或选中状态。

即使您的组件在默认状态下具有透明背景，您也应跳过第 3 阶，并使用第 4 阶作为其悬停状态。

对于您想特别引起注意的号召性用语组件，您可以将每种颜色向上提升一阶，使用第 4、5、6 阶。

对于需要许多微妙颜色来传达不同含义的复杂组件，您可以发挥创意，例如：

  • 第 3 阶用于悬停背景。
  • 第 4 阶用于选中/按下背景。
  • 第 5 阶用于“未读”背景。
  • 第 6 阶用于悬停的“未读”背景。

第 6、7、8 阶专为边框设计。

  • 第 6 阶专为非交互式组件上的微妙边框设计。例如侧边栏、标题、卡片、警报和分隔线。
  • 第 7 阶专为交互式组件上的边框设计，也可用于焦点环。
  • 第 8 阶专为交互式组件悬停状态下的边框设计。

第 9 和 10 阶专为纯色背景设计。

第 9 阶拥有该比例中所有阶中最高的色度。换句话说，它是最纯净的阶，是与最少白色或黑色混合的阶。由于第 9 阶是最纯净的阶，因此它具有广泛的应用。

  • 网站/应用背景
  • 网站区域背景
  • 标题背景
  • 组件背景
  • 图形/Logo
  • 叠加层
  • 彩色阴影
  • 强调色边框

第 10 阶专为组件悬停状态设计，其中第 9 阶是组件的正常状态背景。

大多数第 9 阶颜色都设计用于白色前景文本。RadixColors.sky、RadixColors.mint、RadixColors.lime、RadixColors.yellow 和 RadixColors.amber 专为黑色前景文本和第 9、10 阶设计。

第 11 和 12 阶专为文本设计。

  • 第 11 阶专为低对比度文本设计。
  • 第 12 阶专为高对比度文本设计。

本文档的很大一部分是从 Radix Colors 网站摘录的。

发现问题或有建议？

创建问题

联系方式

在 Twitter 上联系我 @lesliearkorful

GitHub

查看 Github