Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

kuma-base

Package Overview
Dependencies
Maintainers
2
Versions
89
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

kuma-base

base for kuma

  • 1.2.1
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
26
decreased by-16.13%
Maintainers
2
Weekly downloads
 
Created
Source

kuma-base

概念

COLORS

品牌色、中立色、功能色为颜色的基础框架,UI设计中的任何颜色都要在此框架下产生,调色板中包含设计中的所有颜色。建议品牌色中基准色位于调色板中的中间位置,方便与向深浅两个方向拓展。

品牌色

品牌色分主品牌色和品牌辅助色。品牌核心颜色,代表品牌对外形象及VI识别。主色的数量根据品牌特性制定,可以1个也可以多个。用于主要Button、ICON等需要突出品牌特征的地方。主品牌色来源于品牌的代表色颜色,通常来源于LOGO。子品牌、子服务等衍生业务可以由次级品牌色构成,也可以由主品牌色构成,主要依据品牌策略和业务模式。

变量名说明
@brand-primary主品牌色
@brand-secondary子品牌色
@brand-complement补色
@brand-comosite复合
@brand-deep浓度
中立色

灰或饱和度低的颜色(如蓝灰)用与界面设计中背景、边框、分割线、ICON、中立插图等。

变量名说明
@basic-100
@basic-200
@basic-300
@basic-400
@basic-500
@basic-600
@basic-700
@gray-dark#333
@gray#666
@gray-light#999
@gray-lighter#ccc
功能色

分类:信息提示类 、连接色类。用于UI设计中需要引起注意的设计。如:流程中的进度、提醒、成功等。

信息提示色
变量名说明
@brand-success确认 成功 正向积极
@brand-success-lighter
@brand-info
@brand-info-lighter
@brand-warning警告 强调 着重说明
@brand-warning-lighter
@brand-danger强警告 出错 引起注意
@brand-danger-lighter
链接色
变量名说明
@link-colornormal
@link-hover-colorhover
@link-active-colorclick
@link-visited-colorvisited
@link-disabled-colordisable
文本色
变量名说明
@text-primary-color主要文本
@text-secondary-color次要文本
@text-thirdary-color辅助文本
@text-helper-color提示,禁用文本
@text-ali-color阿里橙 (用于加强显示的文案或超链接)|

更多的颜色定义的变量请查看 variables/colors

关于上一个版本的 kuma 兼容

老版本中的变量在新版本中保留,保存在 memories 目录下,开发人员在开发新的变量时,请注意核对是否冲突。

主题

内置两款主题:橙色系蓝色系

如何开发

git clone git@github.com:uxcore/kuma-base.git
cd kuma-base
npm install
gulp

FAQs

Package last updated on 09 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc