@skbkontur/ui-kit/lib/themes/flat/color_tokens_flat.json

{
  "colors": {
    "meaning": {
      "background_level_1": "$.base.white",
      "background_level_2": "$.base.gray_xx_light",
      "background_level_3": "$.base.gray_x_light",

      "background_interactive_hover": "$.base.blue_light",

      "text_default": "$.base.gray_dark",
      "text_disabled": "$.base.gray_light",
      "text_secondary": "$.base.gray",
      "text_inverse": "$.base.white",

      "text_interactive": "$.base.blue",
      "text_interactive_hover": "$.base.blue_dark",
      "text_interactive_active": "$.base.blue_x_dark",

      "text_success": "$.base.green",
      "text_success_hover": "$.base.green_dark",
      "text_success_active": "$.base.green_dark",

      "text_danger": "$.base.red",
      "text_danger_hover": "$.base.red_dark",
      "text_danger_active": "$.base.red_dark"
    },

    "base": {
      "brand_x_light": "#f5e0f3",
      "brand_light": "#b254aa",
      "brand": "#a23a99",
      "brand_dark": "#902987",
      "brand_x_dark": "#7a1871",

      "white": "#ffffff",
      "gray_xx_light": "#f2f2f2",
      "gray_x_light": "#e5e5e5",
      "gray_light": "#a0a0a0",
      "gray": "#808080",
      "gray_dark": "#333333",
      "black": "#000000",

      "blue_xx_light": "#e4f3ff",
      "blue_light": "#5199db",
      "blue": "#3072c4",
      "blue_dark": "#1e5aa4",
      "blue_x_dark": "#044785",

      "blue_bttn": "#1D85D0",

      "green_xx_light": "#e2f7dc",
      "green": "#3f9726",
      "green_dark": "#228007",

      "red_xx_light": "#ffd6d6",
      "red": "#d70c17",
      "red_dark_bttn": "#cd381b",
      "red_dark": "#ce0014",
      "red_x_dark": "#BB0012",

      "yellow_xx_light": "#fff0bc",
      "yellow": "#f69c00",
      "yellow_bttn": "#FFCA43",
      "yellow_dark_bttn": "#fbb028",
      "yellow_dark": "#d97e00"
    },
    "shadows": {
      "disabled": "0 0 0 1px #d9d9d9",
      "button_focus": "inset 0 0 0 1px #fff, 0 0 0 2px $.base.blue_light",

      "input_default": "0 0 0 1px $.base.black_alpha_15, 0 -1px 0 0 $.base.black_alpha_15, inset 0px 1px 0px $.base.black_alpha_05",
      "input_focus": "0 0 0 2px $.base.blue_light",
      "input_warning": "0 0 0 2px #D70C17" ,
      "input_error": "0 0 0 2px #F69C00",
      "input_disabled": "0 0 0 1px $.base.black_alpha_15, inset 0 0 0 0 rgba(0,0,0,0.0)",

      "gray": "0 0 0 1px #CECECE",
      "gray_hover": "0 0 0 1px #CECECE",
      "gray_active": "0 0 0 1px #CECECE",

      "brand": "0 0 0 1px #a23a99",
      "brand_hover": "0 0 0 1px #902987",
      "brand_active": "0 0 0 1px #7a1871",

      "blue": "0 0 0 1px #1D85D0",
      "blue_hover": "0 0 0 1px #1e5aa4",
      "blue_active": "0 0 0 1px #044785",

      "green": "0 0 0 1px #3f9726",
      "green_hover": "0 0 0 1px #228007",
      "green_active": "0 0 0 1px #228007",

      "red": "0 0 0 1px #d70c17",
      "red_hover": "0 0 0 1px #ce0014",
      "red_active": "0 0 0 1px #BB0012",

      "yellow": "0 0 0 1px #FFCA43",
      "yellow_hover": "0 0 0 1px #fbb028",
      "yellow_active": "0 0 0 1px #fbb028",

      "level_1": "0 0 0 1px rgba(0,0,0,0.10)",
      "level_2": "0 0 0 1px rgba(0,0,0,0.10), 0 3px 10px 0 rgba(0,0,0,0.20)",
      "level_3": "0 5px 10px 0 rgba(0,0,0,0.20)"
    },
    "borders" : {
      "reset": "0"
    }
  },
  "components": {
    "text": {
      "default": { "text": "$.meaning.text_default" },
      "secondary": { "text": "$.meaning.text_secondary" },
      "disabled": { "text": "$.meaning.text_disabled" }
    },
    "button": {
      "default": {
        "default": {
          "text": "$.meaning.text_default",
          "background": "$.meaning.background_level_1",
          "shadow": "$.shadows.gray"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.meaning.background_level_2", "shadow": "$.shadows.gray_hover" },
        "active": { "background": "$.meaning.background_level_3", "shadow": "$.shadows.gray_active" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "brand": {
        "default": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.brand",
          "shadow": "$.base.brand"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.base.brand_dark", "shadow": "$.base.brand_dark" },
        "active": { "background": "$.base.brand_x_dark", "shadow": "$.base.brand_x_dark" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "primary": {
        "default": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.blue_bttn",
          "shadow": "$.shadows.blue"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.base.blue_dark", "shadow": "$.shadows.blue_hover" },
        "active": { "background": "$.base.blue_x_dark", "shadow": "$.shadows.blue_hover" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "success": {
        "default": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.green",
          "shadow": "$.shadows.green"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.base.green_dark", "shadow": "$.shadows.green_hover" },
        "active": { "background": "$.base.green_x_dark", "shadow": "$.shadows.green_hover" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "danger": {
        "default": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.red",
          "shadow": "$.shadows.red"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.base.red_dark", "shadow": "$.shadows.red_hover" },
        "active": { "background": "$.base.red_x_dark", "shadow": "$.shadows.red_active" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "pay": {
        "default": {
          "text": "$.meaning.text_default",
          "background": "$.base.yellow_bttn",
          "shadow": "$.shadows.yellow"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": { "background": "$.base.yellow_dark_bttn", "shadow": "$.shadows.yellow_hover" },
        "active": { "background": "$.base.yellow_dark_bttn", "shadow": "$.shadows.yellow_active" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      }
    },
    "input": {
      "default": {
        "default": {
          "text": "$.meaning.text_default",
          "background": "$.meaning.background_level_1",
          "shadow": "$.shadows.input_default",
          "border": "$.borders.reset"
        },
        "focus": { "shadow": "$.shadows.input_focus", "border": "$.borders.reset" },
        "warning": { "shadow": "$.shadows.input_warning", "border": "$.borders.reset" },
        "error": { "shadow": "$.shadows.input_error", "border": "$.borders.reset" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.input_disabled",
          "border": "$.borders.reset"
        }
      }
    },
    "input_label": {
      "default": {
        "default": { "text": "$.meaning.text_default" },
        "secondary": { "text": "$.meaning.text_secondary" }
      }
    },
    "dropdown_menu": {"background": "$.meaning.background_level_1", "shadow": "$.shadows.level_2"},
    "dropdown_menu_item": {
      "default": {"text" : "$.meaning.text_default", "background": "$.meaning.background_level_1"},
      "hover": {"text" : "$.meaning.text_inverse", "background": "$.meaning.background_interactive_hover"},
      "selected": {"text" : "$.meaning.text_default", "background": "$.meaning.background_level_3"},
      "disabled": {"text" : "$.meaning.text_disabled", "background": "$.meaning.background_level_1"}
    },
    "checkbox": {
      "unchecked": {
        "default": {
          "text": "$.meaning.text_default",
          "background": "$.base.white",
          "shadow": "$.shadows.gray"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": {
          "background": "$.meaning.background_level_2", "shadow": "$.shadows.gray_hover" },
        "active": {
          "background": "$.meaning.background_level_3",
          "shadow": "$.shadows.gray_active" },
        "disabled": {
          "text": "$.base.gray",
          "background": "$.base.gray_xx_light",
          "shadow": "$.shadows.disabled"
        }
      },
      "checked": {
        "default": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.blue",
          "shadow": "$.shadows.blue"
        },
        "focus": { "shadow": "$.shadows.button_focus" },
        "hover": {
          "background": "$.base.blue_dark", "shadow": "$.shadows.blue_hover" },
        "active": {
          "text": "$.meaning.text_inverse",
          "background": "$.base.blue_dark",
          "shadow": "$.shadows.blue_hover" },
        "disabled": {
          "text": "$.base.gray_xx_light",
          "background": "$.base.gray",
          "shadow": "$.shadows.gray"
        }
      }
    },
    "link": {
      "default": {
        "default": { "text": "$.meaning.text_interactive" },
        "hover": { "text": "$.meaning.text_interactive_hover" },
        "active": { "text": "$.meaning.text_interactive_active" },
        "focus": { "text": "" },
        "disabled": { "text": "$.meaning.text_disabled" }
      },
      "success": {
        "default": { "text": "$.meaning.text_success" },
        "hover": { "text": "$.meaning.text_success_hover" },
        "active": { "text": "$.meaning.text_success_active" },
        "focus": { "text": "" },
        "disabled": { "text": "$.meaning.text_disabled" }
      },
      "danger": {
        "default": { "text": "$.meaning.text_danger" },
        "hover": { "text": "$.meaning.text_danger_hover" },
        "active": { "text": "$.meaning.text_danger_active" },
        "focus": { "text": "" },
        "disabled": { "text": "$.meaning.text_disabled" }
      },
      "grayed": {
        "default": { "text": "$.base.gray_light" },
        "hover": { "text": "$.base.gray" },
        "active": { "text": "$.base.gray_dark" },
        "focus": { "text": "" },
        "disabled": { "text": "$.meaning.text_disabled" }
      }
    }
  }
}