@damocle/fe-theme-zsly

中山六院常用主题

color

.bgc-theme {
	background: var(--fe-theme-color);
}
.bgc-theme-minor {
	background: var(--fe-minor-button-bg);
}
.bgc-tag-theme {
	background: var(--fe-tag-bg);
}
.bgc-tag-error {
	background-color: var(--fe-error-tag-bg);
}
.bgc-tag-warning {
	background-color: var(--fe-warning-tag-bg);
}
.bgc-logo {
	background-color: var(--fe-logo-color);
}

// 通用颜色
.c-theme {
	color: var(--fe-theme-color);
}
.c-theme-button {
	color: var(--fe-theme-button-color);
}

.c-warning {
	color: var(--fe-warning-color);
}
.c-error {
	color: var(--fe-error-color);
}
.c-logo {
	color: var(--fe-logo-color);
}

// border color
.fe-bc-theme {
	border-color: var(--fe-theme-color);
}
.fe-bc-warning {
	border-color: var(--fe-warning-border-color);
}
.fe-bc-error {
	border-color: var(--fe-error-border-color);
}

common

	box-shadow: var(--fe-card-shadow);
}

.shadow-card {
	&:extend(.shadow-box,
	.ovh,
	.brs-8,
	.bgc-w,
	.px-5,
	.py-5);
}

variables

// 黑色
@dark-content-color: #1b2622; // 一级字色（标题文字  重要字段文字  内容文字）
@dark-label-color: #454d49; // 标签颜色 二级字色  表单、详情页 左侧标题文字
@dark-minor-color: #6d7370; // 次级内容颜色 三级字色  可点击按钮文字  次级内容
@dark-disabled-color: #a2a6a4; // 禁用颜色  四级字色  输入框提示文字  禁用色字体
@dark-disabled-background-color: #e8edea; // 禁用背景色、分隔线、边框

// 主题色
@theme-color: #48b284; // 主色
@theme-button-color: #2a8c65; // 按钮文字颜色
@theme-tag-background-color: #e6fff1; // 标签背景色
@theme-minor-button-background-color: #cef2df; // 二级按钮背景色

// 警告色
@warning-tag-background-color: #fff2e6; // 警告标签背景色
@warning-color: #e69d0b; // 警告色
@warning-border-color: #f2ab30; // 警告边框色

// 错误色
@erro-tag-background-color: #fff2f4; // 错误标签背景色
@erro-color: #cc3333; // 错误色
@erro-border-color: #e6676b; // 错误边框色

// logo颜色
@logo-color: #6a1318;

// 投影
@box-shadow-card: 0 2px 8px 0 rgba(6, 53, 64, 0.1); // 下投影
@box-shadow-pop: 0 0 25px 0 rgba(6, 53, 64, 0.2); // 弹窗投影
@box-shadow-top: 0 -2px 10px 0 rgba(6, 53, 64, 0.1); // 上投影
@box-shadow-border: 0 2px 8px 0 rgba(6, 53, 64, 0.2); // 描边投影

// 自定义变量
:root,
page {
	--fe-global-fixed-bottom: 64px;
	--fe-tabs-height: 44px;
	--fe-tabbar-height: 50px;
	--fe-android-immerse-height: 23px;
	--fe-android-immerse-nav-height: calc(var(--fe-android-immerse-height) + var(--fe-nav-height));
	--fe-nav-height: calc(46px + env(safe-area-inset-top));

	--fe-theme-color: @theme-color;
	--fe-html-bg: @html-bg;
	--fe-box-border-color: @dark-disabled-background-color;

	--fe-card-shadow: @box-shadow-card;
	--fe-pop-shadow: @box-shadow-pop;
	--fe-top-shadow: @box-shadow-top;
	--fe-border-shadow: @box-shadow-border;

	--fe-theme-button-color: @theme-button-color;
	--fe-tag-bg: @theme-tag-background-color;
	--fe-minor-button-bg: @theme-minor-button-background-color;

	--fe-warning-tag-bg: @warning-tag-background-color;
	--fe-warning-color: @warning-color;
	--fe-warning-border-color: @warning-border-color;

	--fe-error-tag-bg: @erro-tag-background-color;
	--fe-error-color: @erro-color;
	--fe-error-border-color: @erro-border-color;

	--fe-content-color: @dark-content-color;
	--fe-label-color: @dark-label-color;
	--fe-minor-color: @dark-minor-color;
	--fe-disabled-color: @dark-disabled-color;
	--fe-disabled-bg: @dark-disabled-background-color;

	--fe-logo-color: @logo-color;
}