zent/theme-css-vars.json

一套前端设计语言和基于React的实现

{
  "hex": {
    "$text-600": [
      "--theme-title-color",
      "--theme-body-color",
      "--theme-default-color",
      "--theme-weak-link-color"
    ],
    "$text-500": [
      "--theme-hint-color"
    ],
    "$text-400": [
      "--theme-disabled-color",
      "--theme-default-disabled-color"
    ],
    "$gray-100": [
      "--theme-section-bg"
    ],
    "$gray-200": [
      "--theme-body-bg",
      "--theme-default-hover-bg",
      "--theme-default-disabled-bg"
    ],
    "$success-500": [
      "--theme-success-color",
      "--theme-success-border-color"
    ],
    "$success-100": [
      "--theme-success-bg"
    ],
    "$warning-500": [
      "--theme-warning-color",
      "--theme-warning-border-color"
    ],
    "$warning-100": [
      "--theme-warning-bg"
    ],
    "$danger-500": [
      "--theme-danger-color",
      "--theme-danger-border-color"
    ],
    "$danger-100": [
      "--theme-danger-bg"
    ],
    "$text-100": [
      "--theme-default-bg",
      "--theme-primary-color"
    ],
    "$gray-300": [
      "--theme-default-border-color"
    ],
    "$primary-100": [
      "--theme-default-selected-bg"
    ],
    "$primary-500": [
      "--theme-primary-bg",
      "--theme-primary-border-color",
      "--theme-link-color"
    ],
    "$primary-400": [
      "--theme-primary-hover-bg",
      "--theme-primary-hover-border-color",
      "--theme-link-hover-color",
      "--theme-weak-link-hover-color"
    ],
    "$primary-600": [
      "--theme-primary-active-bg",
      "--theme-primary-active-border-color",
      "--theme-link-active-color",
      "--theme-weak-link-active-color"
    ],
    "$star-color": [
      "--theme-rate-bg"
    ]
  },
  "rgb": {
    "$text-600": [
      "--theme-rgb-title-color",
      "--theme-rgb-body-color",
      "--theme-rgb-default-color",
      "--theme-rgb-weak-link-color"
    ],
    "$text-500": [
      "--theme-rgb-hint-color"
    ],
    "$text-400": [
      "--theme-rgb-disabled-color",
      "--theme-rgb-default-disabled-color"
    ],
    "$gray-100": [
      "--theme-rgb-section-bg"
    ],
    "$gray-200": [
      "--theme-rgb-body-bg",
      "--theme-rgb-default-hover-bg",
      "--theme-rgb-default-disabled-bg"
    ],
    "$success-500": [
      "--theme-rgb-success-color",
      "--theme-rgb-success-border-color"
    ],
    "$success-100": [
      "--theme-rgb-success-bg"
    ],
    "$warning-500": [
      "--theme-rgb-warning-color",
      "--theme-rgb-warning-border-color"
    ],
    "$warning-100": [
      "--theme-rgb-warning-bg"
    ],
    "$danger-500": [
      "--theme-rgb-danger-color",
      "--theme-rgb-danger-border-color"
    ],
    "$danger-100": [
      "--theme-rgb-danger-bg"
    ],
    "$text-100": [
      "--theme-rgb-default-bg",
      "--theme-rgb-primary-color"
    ],
    "$gray-300": [
      "--theme-rgb-default-border-color"
    ],
    "$primary-100": [
      "--theme-rgb-default-selected-bg"
    ],
    "$primary-500": [
      "--theme-rgb-primary-bg",
      "--theme-rgb-primary-border-color",
      "--theme-rgb-link-color"
    ],
    "$primary-400": [
      "--theme-rgb-primary-hover-bg",
      "--theme-rgb-primary-hover-border-color",
      "--theme-rgb-link-hover-color",
      "--theme-rgb-weak-link-hover-color"
    ],
    "$primary-600": [
      "--theme-rgb-primary-active-bg",
      "--theme-rgb-primary-active-border-color",
      "--theme-rgb-link-active-color",
      "--theme-rgb-weak-link-active-color"
    ],
    "$star-color": [
      "--theme-rgb-rate-bg"
    ]
  },
  "vars": {
    "--theme-primary-bg": {
      "comment": " Primary background color of components, e.g. primary type button"
    },
    "--theme-primary-border-color": {
      "comment": " Primary border color of components, e.g. primary type button"
    },
    "--theme-primary-hover-bg": {
      "comment": " Hover state of primary background color of components, e.g. primary type button"
    },
    "--theme-primary-hover-border-color": {
      "comment": " Hover state of primary border color of components, e.g. primary type button"
    },
    "--theme-primary-active-bg": {
      "comment": " Active state of primary background color of components, e.g. primary type button"
    },
    "--theme-primary-active-border-color": {
      "comment": " Active state of primary border color of components, e.g. primary type button"
    },
    "--theme-link-color": {
      "comment": " Primary text link brand color"
    },
    "--theme-link-hover-color": {
      "comment": " Hover state of primary text link brand color"
    },
    "--theme-link-active-color": {
      "comment": " Active state of primary text link brand color"
    },
    "--theme-weak-link-hover-color": {
      "comment": " Hover state of primary text weak link brand color"
    },
    "--theme-weak-link-active-color": {
      "comment": " Active state of primary text weak link brand color"
    }
  }
}