设计系统颜色

使不同项目颜色标准化的公用事业 -- -- 从而有可能通过 Abtion 组件库

使用量

想法是:

1. 设计者为一个项目创建了样式指南,其背景颜色(中性、初级、二级、成功、危险、警告、信息)

2. 设计者会为每个上下文的花色100-900和暗/光的花色创造出彩色遮荫,这将分别用于提供光/暗的花色对比.

3. A 类 colors.json- 创建了所有颜色的文件:

   {
     "dark": "#111827",
     "light": "#F3F4F6",
     "neutral": {
       "DEFAULT": "#6B7280",
       "100": "#F3F4F6",
       ...
       "900": "#111827"
     },
     "primary": {
       "DEFAULT": "#2563EB",
       "100": "#D3E6FE",
       ...
       "900": "#071A70"
     },
   
     ...
   }
   

4. getColorStyles 用于生成所有颜色的样式表,指定为 CSS 变量(R G B),而每个阴影上都加上了对比颜色("暗"或"光"基于相对亮度):

   :root {
     --color-dark: 17 24 39;
     --color-light: 243 244 246;
   
     --color-neutral: 107 114 128;
     --color-neutral-contrast: 243 244 246;
   
     --color-neutral-100: 243 244 246;
     --color-neutral-100-contrast: 17 24 39;
     ...
     --color-neutral-900: 17 24 39;
     --color-neutral-900-contrast: 243 244 246;
   
     --color-primary: 37 99 235;
     --color-primary-contrast: 243 244 246;
   
     --color-primary-100: 211 230 254;
     --color-primary-100-contrast: 17 24 39;
     ...
     --color-primary-900: 7 26 112;
     --color-primary-900-contrast: 243 244 246;
   
     ...
   }
   

5. getTailwindColors 用于为尾风配置提供颜色(带有对比颜色和不透明支持):

   {
     dark: 'rgb(var(--color-dark) / <alpha-value>)',
     light: 'rgb(var(--color-light) / <alpha-value>)',
     neutral: {
       DEFAULT: 'rgb(var(--color-neutral) / <alpha-value>)',
       contrast: 'rgb(var(--color-neutral-contrast) / <alpha-value>)',
   
       '100': 'rgb(var(--color-neutral-100) / <alpha-value>)',
       '100-contrast': 'rgb(var(--color-neutral-100-contrast) / <alpha-value>)',
       ...
       '900': 'rgb(var(--color-neutral-900) / <alpha-value>)',
       '900-contrast': 'rgb(var(--color-neutral-900-contrast) / <alpha-value>)',
     },
     primary: {
       DEFAULT: 'rgb(var(--color-info) / <alpha-value>)',
       contrast: 'rgb(var(--color-info-contrast) / <alpha-value>)'
   
       '100-contrast': 'rgb(var(--color-danger-100-contrast) / <alpha-value>)',
       ...
       '900': 'rgb(var(--color-primary-900) / <alpha-value>)',
       '900-contrast': 'rgb(var(--color-info-900-contrast) / <alpha-value>)',
     },
     ...
   }
   

6. 现在项目可以使用上下文颜色(和对比颜色)和共享组件进行样式化 组件库 可在不作任何调整的情况下投入使用.

公用事业

通常项目只需要使用:

• 获取颜色样式
• 获取 Tailwind Colors

其他公用事业包括:

• 添加连接颜色
• 获取康特拉斯特颜色
• 获取色彩变量
• 获取元素