@adobe/leonardo-contrast-colors

此软件包包含所有通过目标对比比生成颜色的功能.

使用 Leonardo 对比颜色

安装软件包 :

npm i @adobe/leonardo-contrast-colors

导入软件包 :

CJS (节点 12.x)

const {Theme, Color, BackgroundColor} = require('@adobe/leonardo-contrast-colors');

无害环境管理(节点13.x)

import {Theme, Color, BackgroundColor} from '@adobe/leonardo-contrast-colors';

创建和传递新主题的颜色和背景颜色(见下文其他选项):

let gray = new BackgroundColor({
  name: 'gray',
  colorKeys: ['#cacaca'],
  ratios: [2, 3, 4.5, 8]
});

let blue = new Color({
  name: 'blue',
  colorKeys: ['#5CDBFF', '#0000FF'],
  ratios: [3, 4.5]
});

let red = new Color({
  name: 'red',
  colorKeys: ['#FF9A81', '#FF0000'],
  ratios: [3, 4.5]
});

let theme = new Theme({
  colors: [gray, blue, red],
  backgroundColor: gray,
  lightness: 97
});

// returns theme colors as JSON
let colors = theme.contrastColors;

API 参考

Theme

用于生成适应性对比色彩的类函数. 参数结构被调整,需要明确称呼.

设置

Theme.addColor = color

添加一个 Color 改为现有主题

const red = new Color({...})

theme.addColor = red;

Theme.removeColor = color

删除 a Color 从已有主题。 接受带有 Color名称和价值,或通过传递 Color 班级本身.

// Remove via color name
theme.removeColor = {name: 'Red'};

// Remove via Color class
const red = new Color({...})
theme.removeColor = red;

Theme.updateColor = {name, property}

更新a Color 透过主题的设定 接受一个对象,其名称为您想要修改的颜色,然后是属性和您想要修改的新值.

const red = new Color({...})
// Change the colors ratios
theme.updateColor = {name: 'red', ratios: [3, 4.5, 7]};

// Change the colors colorKeys
theme.updateColor = {name: 'red', colorKeys: ['#ff0000']};

// Change the color's name
theme.updateColor = {name: 'red', name: 'Crimson'};

支持的输出格式 :

现有产出格式符合 W3C CSS 色彩模块 第4级 所支持选项的示例,如下所示:

Color

用于定义主题颜色的类函数 。 参数结构被调整,需要明确称呼.

设置

支持的插值颜色空间 :

以下是列奥纳多语的可选插图:

• 妇 人
• 劳工局
• CAM02卫星
• 高级
• 苏维埃
• 高级保险
• RGB 语言

作为数组的比例

当通过一个平坦的目标比例阵列时,您主题中的输出颜色将通过将颜色名称(如"蓝色")与数字递增相接来生成. 带有颜色 正对比比 与基数(即:2:1)相加后命名为100. 譬如说, gray100, (中文(简体) ), gray200。 。 。 .

带有颜色 负对比比 基数( ie-2:1) 将以低于100和 基于已声明的负值数。例如,如果有3个负值 [-1.4, -1.3, -1.2, 1, 2, 3],这些值的名称将递增100/4(长度加一,以避免 0 值),例如 gray25, (中文(简体) ), gray50,以及 gray75。 。 。 .

例如:

new Color({
  name: 'blue',
  colorKeys: ['#5CDBFF', '#0000FF'],
  colorSpace: 'LCH',
  ratios: [3, 4.5]
});

// Returns:
[
  {
    name: 'blue',
    values: [
      {name: 'blue100', contrast: 3, value: '#8d63ff'},
      {name: 'blue200', contrast: 4.5, value: '#623aff'}
    ]
  }
];

作为对象的比例

当定义比例为带有密钥值对的对象时,您定义了您列奥纳多主题中的输出名称 .

new Color({
  name: 'blue',
  colorKeys: ['#5CDBFF', '#0000FF'],
  colorSpace: 'LCH',
  ratios: {
    'blue--largeText': 3,
    'blue--normalText': 4.5
  }
});

// Returns:
[
  {
    name: 'blue',
    values: [
      {name: 'blue--largeText', contrast: 3, value: '#8d63ff'},
      {name: 'blue--normalText', contrast: 4.5, value: '#623aff'}
    ]
  }
];

输出示例

输出有两种类型: Theme 类 :

Theme.contrastColors

每个颜色都是以用户定义的值命名的对象(例如: name: 'gray')“值”数组由颜色的所有生成的颜色值组成,具有属性 name, (中文(简体) ), contrast,以及 value数字 :

[
  {background: '#e0e0e0'},
  {
    name: 'gray',
    values: [
      {name: 'gray100', contrast: 1, value: '#e0e0e0'},
      {name: 'gray200', contrast: 2, value: '#a0a0a0'},
      {name: 'gray300', contrast: 3, value: '#808080'},
      {name: 'gray400', contrast: 4.5, value: '#646464'}
    ]
  },
  {
    name: 'blue',
    values: [
      {name: 'blue100', contrast: 2, value: '#b18cff'},
      {name: 'blue200', contrast: 3, value: '#8d63ff'},
      {name: 'blue300', contrast: 4.5, value: '#623aff'},
      {name: 'blue400', contrast: 8, value: '#1c0ad1'}
    ]
  }
];

Theme.contrastColorPairs

作为键值对对象的简化格式. 财产等于 生成 或者说 用户定义名称 对于每个生成的值.

{
  "gray100": "#e0e0e0";
  "gray200": "#a0a0a0";
  "gray300": "#808080";
  "gray400": "#646464";
  "blue100": "#b18cff";
  "blue200": "#8d63ff";
  "blue300": "#623aff";
  "blue400": "#1c0ad1";
}

Theme.contrastColorValues

在平面阵列中返回所有颜色值.

['#e0e0e0', '#a0a0a0', '#808080', '#646464', '#b18cff', '#8d63ff', '#623aff', '#1c0ad1'];

带有 CSS 变量的 Leonardo

以下是几个实例,说明您如何利用莱昂纳多为您的应用程序动态创建或修改 CSS 变量 .

香草联署材料

let varPrefix = '--';

// Iterate each color object
for (let i = 0; i < myTheme.length; i++) {
  // Iterate each value object within each color object
  for (let j = 0; j < myTheme[i].values.length; j++) {
    // output "name" of color and prefix
    let key = myTheme[i].values[j].name;
    let prop = varPrefix.concat(key);
    // output value of color
    let value = myTheme[i].values[j].value;
    // create CSS property with name and value
    document.documentElement.style.setProperty(prop, value);
  }
}

反应

创建新的主题组件 Theme.js 使用参数 :

import * as Leo from '@adobe/leonardo-contrast-colors';

const Theme = () => {
  let gray = new Leo.BackgroundColor({
    name: 'gray',
    colorKeys: ['#cacaca'],
    ratios: [2, 3, 4.5, 8]
  });

  let blue = new Leo.Color({
    name: 'blue',
    colorKeys: ['#5CDBFF', '#0000FF'],
    ratios: [3, 4.5]
  });

  let red = new Leo.Color({
    name: 'red',
    colorKeys: ['#FF9A81', '#FF0000'],
    ratios: [3, 4.5]
  });

  const adaptiveTheme = new Leo.Theme({
    colors: [gray, blue, red],
    backgroundColor: gray,
    lightness: 97,
    contrast: 1
  });

  return adaptiveTheme;
};

export default Theme;

导入您的 应用程序顶层的主题组件,并将主题作为应用程序属性传递:

// index.js
import Theme from './components/Theme';

ReactDOM.render(
  <React.StrictMode>
    <App adaptiveTheme={Theme()} />
  </React.StrictMode>,
  document.getElementById('root')
);

在您的 App.js 文件中,导入 useTheme 从 css-vars-hook ,并在您的 App 函数内提供以下内容,以便将Leonardo 的输出格式化为所需的结构 css-vars-hook。 。 。 .

// App.js
import {useTheme} from 'css-vars-hook';

function App(props) {
  const [lightness, setLightness] = useState(100);
  const [contrast, setContrast] = useState(1);

  const _createThemeObject = () => {
    let themeObj = {};
    props.adaptiveTheme.contrastColors.forEach((color) => {
      if (color.name) {
        let values = color.values;
        values.forEach((instance) => {
          let name = instance.name;
          let val = instance.value;
          themeObj[name] = val;
        });
      } else {
        // must be the background
        let name = 'background';
        let val = color.background;
        themeObj[name] = val;
      }
    });
    return themeObj;
  };

  const theme = useState(_createThemeObject());

  const {setRef, setVariable} = useTheme(theme);

  return <div className="App" ref={setRef}></div>;
}

要适应应用程序,请在返回功能前包含更新主题的功能:

function _updateColorVariables() {
  let themeInstance = _createThemeObject();

  for (const [key, value] of Object.entries(themeInstance)) {
    setVariable(key, value);
  }
}
// call function to set initial values
_updateColorVariables();

最后,当用户与滑动器组件互动时,引用此函数并设定主题参数(对相容性进行相同):

<label htmlFor="lightness">
  Lightness
</label>
<input
  value={lightness}
  id="lightness"
  type="range"
  min={ sliderMin }
  max={ sliderMax }
  step="1"
  onChange={e => {
    setLightness(e.target.value)
    props.adaptiveTheme.lightness = e.target.value
    _updateColorVariables()
  }}
/>
<label htmlFor="contrast">
  Contrast
</label>
<input
  value={contrast}
  id="contrast"
  type="range"
  min="0.25"
  max="3"
  step="0.025"
  onChange={e => {
    setContrast(e.target.value)
    props.adaptiveTheme.contrast = e.target.value
    _updateColorVariables()
  }}
/>

React 中的暗模式支持

在您的 App.js 文件中包含以下内容以监听黑暗模式 。 这将传递一个不同的光度值(你所选择的)给莱昂纳多. 建议根据模式限制光度范围,以避免无法进入的范围,并提供更好的总体经验

const mq = window.matchMedia('(prefers-color-scheme: dark)');
// Update lightness and slider min/max to be conditional:
const [lightness, setLightness] = useState(mq.matches ? 8 : 100);
const [sliderMin, setSliderMin] = useState(mq.matches ? 0 : 80);
const [sliderMax, setSliderMax] = useState(mq.matches ? 30 : 100);

// Listener to update when user device mode changes:
mq.addEventListener('change', function (evt) {
  props.adaptiveTheme.lightness = mq.matches ? 11 : 100;
  setLightness(mq.matches ? 11 : 100);
  setSliderMin(mq.matches ? 0 : 80);
  setSliderMax(mq.matches ? 30 : 100);
});

为什么不能提供所有对比比率?

您可能注意到该工具需要输入( 目标比) , 但通常输出的对比比略高 。 这与RGB色彩空间中可用的颜色,以及与计算这些比率相关的数学有关.

例如,让我们看看蓝色和白色. 蓝色: rgb( 0, 0, 255) 白色: rgb(255、255、255) 对比率 : 8.59 联合国: 1 个

如果我们改变 RGB 频道中任何一种颜色的值, 比例会改变 : 蓝色: rgb (0), 1个页:1 白色: rgb(255、255、255) 对比率 : 8.57 (中文(简体) ): 1 个

如果8.58是输入以蓝色为起始颜色作为目标比,输出将不准确. 这被各种色相空间插值所夸大.

由于WCAG要求的定义是: 最低对比要求,它应该很好产生 颜色一点点 更多 可访问性超过最小值.

Chroma.js (英语)

这个项目目前正在使用 Chroma.js (英语) 有自定义扩展支持CIE CAM02 互联网档案馆的存檔,存档日期2013-10-02. 在Leonardo中添加了额外的功能来增强染色体鳞片来通过光度正确排列颜色并修正以HSLuv为基础的鳞片的光度.

捐款

欢迎捐款! 读取 贡献指南 更多信息.

发展

您可以使用 :

pnpm dev

或只用一次测试 :

pnpm test

许可证发放

这个项目根据Apache V2许可证获得许可. 见 自由主义 更多信息.