Naive Puppets Marching

    @antv/color-schema
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    English | 简体中文

    @antv/color-schema

    A JSON schema used to regulate semantic color assets or palettes.

    Features

    • Validate: Validate data with JSON schema.
    • Develop: Develop with types and interfaces.

    📖 Example

    {
      brandName: "antd",
      palettes: [
        {
          name: "trinity",
          semantic: "three",
          type: "categorical",
          colors: [
            {
              model: "rgb",
              value: { r: 255, g: 0, b: 0 },
              name: "red",
              undertone: "warm",
              usage: [ "danger", "apple" ]
            },
            {
              model: "rgb",
              value: { r: 0, g: 255, b: 0 },
              name: "green",
              undertone: "neutral"
            },
            {
              model: "rgb",
              value: { r: 0, g: 0, b: 255 },
              name: "blue",
              undertone: "cool"
            }
          ]
        },
        {
          name: "Leaf Yellow",
          semantic: "tranquil",
          type: "discrete-scale",
          description: "Colors of leaves in different seasons.",
          colors: [
            { model: "rgb", value: { r: 255, g: 235, b: 176} },
            { model: "rgb", value: { r: 255, g: 223, b: 128} },
            { model: "rgb", value: { r: 250, g: 202, b: 62 },
            { model: "rgb", value: { r: 230, g: 184, b: 1 },
            { model: "rgb", value: { r: 181, g: 172, b: 35} },
            { model: "rgb", value: { r: 106, g: 154, b: 72} },
            { model: "rgb", value: { r: 32, g: 135, b: 107} },
            { model: "rgb", value: { r: 6, g: 116, b: 107} },
            { model: "rgb", value: { r: 4, g: 78, b: 72} }
          ],
          "usage": ["visualization"]
        },
        {
          name: "scale3",
          semantic: "passional",
          type: "continuous-scale",
          colors: [
            { model: "rgb", value: {r: 255, g: 247, b: 236}, location: 0 },
            { model: "rgb", value: {r: 252, g: 141, b: 89}, location: 0.2 },
            { model: "rgb", value: {r: 127, g: 0, b: 0}, location: 1 }
          ]
        },
        {
          name: "Matrix",
          semantic: "mysterious",
          type: "matrix",
          colors: [
            [
              { model: "rgb", value: { r: 139, g: 89, b: 255 } },
              { model: "rgb", value: { r: 103, g: 82, b: 255 } },
              { model: "rgb", value: { r: 20, g: 68, b: 237 } }
            ],
            [ 
              { model: "rgb", value: { r: 183, g: 141, b: 255 } },
              { model: "rgb", value: { r: 136, g: 129, b: 255 } },
              { model: "rgb", value: { r: 27, g: 107, b: 237 } }
            ],
            [
              { model: "rgb", value: { r: 215, g: 209, b: 255 } },
              { model: "rgb", value: { r: 160, g: 191, b: 255 } },
              { model: "rgb", value: { r: 32, g: 159, b: 237 } }
            ]
          ],
          origin: {
            x: [ 
              { model: "rgb", value: { r: 215, g: 209, b: 255 } },
              { model: "rgb", value: { r: 160, g: 191, b: 255 } },
              { model: "rgb", value: { r: 32, g: 159, b: 237 } }
            ],
            y: [
              { model: "rgb", value: { r: 215, g: 209, b: 255 } },
              { model: "rgb", value: { r: 183, g: 141, b: 255 } },
              { model: "rgb", value: { r: 139, g: 89, b: 255 } }
            ]
          }
        }
      ]
    }

    📦 Installation

    $ npm install @antv/color-schema

    🔨 Usage

    Validate

    Validate by Ajv (JSON schema validator):

    import Ajv from "ajv";
    import colorSchema from "build/color-schema.json";
    
    const ajv = new Ajv();
    const validate = ajv.compile(colorSchema);
    const valid = validate(data);

    Types & Interfaces

    Some types and interfaces:

    import { ColorSchema, Palette, Color } from '@antv/color-schema';

    ColorSchema

    Color Schema is a color assets package consisting of a collection of palettes.

    interface ColorSchema {
      brandName: string;
      palettes: Palette[];
    }

    Palette

    Color palette is a collection of colors.

    interface Palette {
      id?: string;
      name: string;
      type: PaletteType;
      semantic: string | null;
      description?: string;
      colorScheme?: ColorSchemeType;
      usage?: string[];
      colors: Color[] | ContinuousColor[] | colors: Color[][];
      origin?: {
        x: Color[];
        y: Color[];
      };
    }

    PaletteType

    According to different data types and usage scenarios, four different types of color plates are provided.

    type PaletteType = "categorical" | "discrete-scale" | "continuous-scale" | "matrix";

    ColorSchemeType

    Color scheme is described in terms of logical combinations of colors on a color wheel. Different types of schemes, like monochromatic or complementary, are used.

    type ColorSchemeType = 
      | "monochromatic"
      | "complementary"
      | "split-complementary"
      | "achromatic"
      | "analogous"
      | "triadic"
      | "tetradic"
      | "polychromatic"
      | "customized";

    Color

    interface Color {
      model: ColorModel;
      value: ColorValue;
      id?: string;
      name?: string;
      undertone?: Undertone;
      usage?: string[];
    }

    ColorModel

    type ColorModel = "hsl" | "hsv" | "hsi" | "rgb" | "rgba" | "lab" | "lch" | "cmyk";

    Undertone

    type Undertone = "warm" | "neutral" | "cool";

    💻 Dev

    npm install
    npm run start

    🔗 Reference

    License

    MIT

    Keywords

    none

    Install

    npm i @antv/color-schema

    DownloadsWeekly Downloads

    80

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    166 kB

    Total Files

    65

    Last publish

    Collaborators

    • flash1
    • dreammy23
    • laixingui.lxg
    • zhangjunjie-loki
    • rainy25ghz
    • zeyuwang
    • yanxiong
    • susiwen8
    • freestyle21
    • soundquiet
    • elaine.q.10
    • sturuby
    • lviser
    • sakuya223
    • serializedowen
    • xdzhao
    • yangzhanmei
    • wjgogogo
    • leungwensen
    • dori
    • iaaron
    • yard
    • simaq
    • dxq613
    • intchous
    • susan_ann
    • jinke.li
    • lzxue
    • army8735
    • atool
    • baizn
    • dengfuping
    • neoddish
    • jeffy2012
    • zqlu
    • afc163
    • pomelo-nwu
    • kopiluwaky
    • ccnuzindex
    • panyuqi
    • bubkoo
    • zengyue
    • kasmine
    • boyu.zlj
    • l1ud0ngq1
    • newbyvector
    • winniexing
    • chenluli
    • kn9117
    • xdddst
    • semious2020
    • esora
    • nadia_liu
    • bbsqq
    • mxz96102
    • openwayne
    • pearmini
    • pddpd
    • yiqianyao
    • zhanba
    • cxxxxxn