kui-vue/components/styles/var.less

A lightweight desktop UI component library suitable for Vue.js 2.

@import './color.less';

html,
*[theme-mode=light],
*[theme-mode=light] {
  color-scheme: light;
  --kui-control-height-sm: 24px;
  --kui-control-height: 30px;
  --kui-control-height-lg: 40px;
  --kui-padding-block-sm: 2px;
  --kui-padding-inline-sm: 6px;
  --kui-padding-block: 6px;
  --kui-padding-inline: 8px;
  --kui-padding-block-lg: 6px;
  --kui-padding-inline-lg: 10px;
  --kui-border-radius: @radius;
  --kui-border-radius-outer: @radiusOuter;
  --kui-color-default: @default;
  --kui-color-dark: @dark-default;
  --kui-color-main: @main;
  --kui-color-main-hover: @main-hover;
  --kui-color-main-active: @main-active;
  --kui-color-main-10: @main-10;
  --kui-color-main-30: @main-30;
  --kui-color-main-60: @main-60;
  --kui-color-main-80: @main-80;
  --kui-color-main-90: @main-90;
  --kui-color-success: @success;
  --kui-color-success-hover: @success-hover;
  --kui-color-success-active: @success-active;
  --kui-color-success-30: @success-30;
  --kui-color-success-60: @success-60;
  --kui-color-success-80: @success-80;
  --kui-color-success-90: @success-90;
  --kui-color-danger: @danger;
  --kui-color-danger-hover: @danger-hover;
  --kui-color-danger-active: @danger-active;
  --kui-color-danger-30: @danger-30;
  --kui-color-danger-60: @danger-60;
  --kui-color-danger-80: @danger-80;
  --kui-color-danger-90: @danger-90;
  --kui-color-warning: @warning;
  --kui-color-warning-hover: @warning-hover;
  --kui-color-warning-active: @warning-active;
  --kui-color-warning-30: @warning-30;
  --kui-color-warning-60: @warning-60;
  --kui-color-warning-80: @warning-80;
  --kui-color-warning-90: @warning-90;
  --kui-color-pink: @pink;
  --kui-color-pink-30: @pink-30;
  --kui-color-pink-60: @pink-60;
  --kui-color-pink-80: @pink-80;
  --kui-color-pink-90: @pink-90;
  --kui-color-red: @red;
  --kui-color-red-30: @red-30;
  --kui-color-red-60: @red-60;
  --kui-color-red-80: @red-80;
  --kui-color-red-90: @red-90;
  --kui-color-yellow: @yellow;
  --kui-color-yellow-30: @yellow-30;
  --kui-color-yellow-60: @yellow-60;
  --kui-color-yellow-80: @yellow-80;
  --kui-color-yellow-90: @yellow-90;
  --kui-color-orange: @orange;
  --kui-color-orange-30: @orange-30;
  --kui-color-orange-60: @orange-60;
  --kui-color-orange-80: @orange-80;
  --kui-color-orange-90: @orange-90;
  --kui-color-cyan: @cyan;
  --kui-color-cyan-30: @cyan-30;
  --kui-color-cyan-60: @cyan-60;
  --kui-color-cyan-80: @cyan-80;
  --kui-color-cyan-90: @cyan-90;
  --kui-color-green: @green;
  --kui-color-green-30: @green-30;
  --kui-color-green-60: @green-60;
  --kui-color-green-80: @green-80;
  --kui-color-green-90: @green-90;
  --kui-color-blue: @blue;
  --kui-color-blue-30: @blue-30;
  --kui-color-blue-60: @blue-60;
  --kui-color-blue-80: @blue-80;
  --kui-color-blue-90: @blue-90;
  --kui-color-purple: @purple;
  --kui-color-purple-30: @purple-30;
  --kui-color-purple-60: @purple-60;
  --kui-color-purple-80: @purple-80;
  --kui-color-purple-90: @purple-90;
  --kui-color-magenta: @magenta;
  --kui-color-magenta-30: @magenta-30;
  --kui-color-magenta-60: @magenta-60;
  --kui-color-magenta-80: @magenta-80;
  --kui-color-magenta-90: @magenta-90;
  --kui-color-violet: @violet;
  --kui-color-violet-30: @violet-30;
  --kui-color-violet-60: @violet-60;
  --kui-color-violet-80: @violet-80;
  --kui-color-violet-90: @violet-90;
  --kui-color-brown: @brown;
  --kui-color-brown-30: @brown-30;
  --kui-color-brown-60: @brown-60;
  --kui-color-brown-80: @brown-80;
  --kui-color-brown-90: @brown-90;
  --kui-color-teal: @teal;
  --kui-color-teal-30: @teal-30;
  --kui-color-teal-60: @teal-60;
  --kui-color-teal-80: @teal-80;
  --kui-color-teal-90: @teal-90;
  --kui-color-olive: @olive;
  --kui-color-olive-30: @olive-30;
  --kui-color-olive-60: @olive-60;
  --kui-color-olive-80: @olive-80;
  --kui-color-olive-90: @olive-90;
  --kui-color-volcano: @volcano;
  --kui-color-volcano-30: @volcano-30;
  --kui-color-volcano-60: @volcano-60;
  --kui-color-volcano-80: @volcano-80;
  --kui-color-volcano-90: @volcano-90;
  --kui-color-gold: @gold;
  --kui-color-gold-30: @gold-30;
  --kui-color-gold-60: @gold-60;
  --kui-color-gold-80: @gold-80;
  --kui-color-gold-90: @gold-90;
  --kui-color-lime: @lime;
  --kui-color-lime-30: @lime-30;
  --kui-color-lime-60: @lime-60;
  --kui-color-lime-80: @lime-80;
  --kui-color-lime-90: @lime-90;
  --kui-color-gray: @gray;
  --kui-color-gray-30: @gray-30;
  --kui-color-gray-40: @gray-40;
  --kui-color-gray-50: @gray-50;
  --kui-color-gray-60: @gray-60;
  --kui-color-gray-70: @gray-70;
  --kui-color-gray-80: @gray-80;
  --kui-color-gray-90: @gray-90;
  --kui-color-mask: @mask-color;
  --kui-color-spin: @spin-color;
  --kui-color-mask-30: @mask-color-30;
  --kui-color-mask-90: @mask-color-90;
  --kui-color-skeleton: @skeleton-color;
  --kui-color-skeleton-mid: @skeleton-min-color;
  --kui-color-font: @font-color;
  --kui-color-title: @title-color;
  --kui-color-sub-title: @sub-title-color;
  --kui-color-back: @back-color;
  --kui-color-back-10: @back-color-10;
  --kui-color-back-20: @back-color-20;
  --kui-color-back-30: @back-color-30;
  --kui-color-back-40: @back-color-40;
  --kui-color-back-50: @back-color-50;
  --kui-color-back-60: @back-color-60;
  --kui-color-back-70: @back-color-70;
  --kui-color-back-80: @back-color-80;
  --kui-color-back-90: @back-color-90;
  --kui-color-icon: @icon-color;
  --kui-color-icon-hover: @icon-color-hover;
  --kui-color-icon-active: @icon-color-active;
  --kui-color-hover: @hover-color;
  --kui-color-active: @active-color;
  --kui-color-selected: @selected-color;
  --kui-color-border: @border-color;
  --kui-color-disable-border: @disable-border;
  --kui-color-disable-back: @disable-back;
  --kui-color-disabled: @disable-color;
  --kui-color-table-header: #fafafa;
  --kui-color-table-border: #f0f0f0;
  --kui-color-table-hover: #fafafa;
  --kui-color-table-header-hover: #f1f1f1;
  --kui-color-shadow: rgba(0, 0, 0, .15);
}

[theme-mode=dark],
html[theme-mode=dark],
*[theme-mode=dark] {
  color-scheme: dark;
  --kui-color-default: @dark-default;
  --kui-color-dark: @default;
  --kui-color-font: @dark-font-color;
  --kui-color-title: @dark-title-color;
  --kui-color-sub-title: @dark-sub-title-color;
  --kui-color-back: @dark-back-color;
  --kui-color-back-10: @dark-back-color-10;
  --kui-color-back-20: @dark-back-color-20;
  --kui-color-back-30: @dark-back-color-30;
  --kui-color-back-40: @dark-back-color-40;
  --kui-color-back-50: @dark-back-color-50;
  --kui-color-back-60: @dark-back-color-60;
  --kui-color-back-70: @dark-back-color-70;
  --kui-color-back-80: @dark-back-color-80;
  --kui-color-back-90: @dark-back-color-90;
  --kui-color-spin: @dark-spin-color;
  --kui-color-selected: @selected-color;
  --kui-color-icon: @dark-icon-color;
  --kui-color-icon-hover: @dark-icon-color-hover;
  --kui-color-icon-active: @dark-icon-color-active;
  --kui-color-border: @dark-border-color;
  --kui-color-disable-border: @dark-disable-border;
  --kui-color-disable-back: @dark-disable-back;
  --kui-color-disabled: @dark-disable-color;
  --kui-color-table-header: #262626;
  --kui-color-table-border: #303030;
  --kui-color-table-hover: #262626;
  --kui-color-table-header-hover: #303030;
  --kui-color-shadow: rgba(0, 0, 0, .65);
}