|
|
@ -0,0 +1,147 @@ |
|
|
|
import { |
|
|
|
defineConfig, |
|
|
|
presetAttributify, |
|
|
|
presetIcons, |
|
|
|
presetTypography, |
|
|
|
presetUno, |
|
|
|
presetWebFonts, |
|
|
|
transformerDirectives, |
|
|
|
transformerVariantGroup, |
|
|
|
} from "unocss"; |
|
|
|
|
|
|
|
// @unocss-include
|
|
|
|
export default defineConfig({ |
|
|
|
shortcuts: [ |
|
|
|
["card-default", "bg-white dark:bg-dark-5 rounded-1.5"], |
|
|
|
["card-bg-color", "bg-white dark:bg-dark-5"], |
|
|
|
["form-bg-color", "bg-white dark:bg-[#1b1b1b]"], |
|
|
|
["card-bg-color-2", "bg-[#f2f2f2] dark:bg-[#1b1b1b]"], |
|
|
|
["input-bg-color", "bg-[#f2f2f2] dark:bg-dark-8"], |
|
|
|
["card-default-br", "bg-[#ffffff93] dark:(bg-dark-5 bg-op-60) rounded-1.5 backdrop-blur-12px backdrop-saturate-180"], |
|
|
|
["card-default-br-2", "bg-light bg-op-90 dark:(bg-dark-5 bg-op-90) rounded-1.5 backdrop-blur-8px backdrop-saturate-180"], |
|
|
|
["blur-card", "backdrop-blur-4 bg-[#75757528] rounded-1.5"], |
|
|
|
["card-rounded-df", " rounded-1.5"], |
|
|
|
["btn-default", "border-0 cursor-pointer rounded-4px hover:text-[var(--el-color-primary)] transition-200 text-white"], |
|
|
|
["btn-primary-bg", " cursor-pointer rounded-4px hover:bg-[var(--el-color-primary)] hover:text-white"], |
|
|
|
// 颜色
|
|
|
|
["bg-color", "bg-white dark:bg-dark-5"], |
|
|
|
["bg-color-2", "bg-[#f2f2f2] dark:bg-[#111111]"], // 次要背景色
|
|
|
|
["bg-color-3", "bg-[#f2f2f2] dark:bg-dark-9"], |
|
|
|
["bg-color-br", "bg-[#ffffff93] dark:(bg-dark-5 bg-op-60) backdrop-blur-12px"], |
|
|
|
["bg-color-df", "bg-[#f2f2f2] dark:bg-dark-9"], |
|
|
|
["bg-menu-color", "bg-[#f6f6f6] dark:bg-dark-8"], |
|
|
|
["bg-color-second", "bg-light-5 dark:bg-dark"], |
|
|
|
["bg-skeleton", "bg-gray-1 dark:bg-[#1f1f1f]"], |
|
|
|
// dialog颜色
|
|
|
|
["dialog-bg-color", "bg-white dark:bg-dark-9"], |
|
|
|
// 文本颜色
|
|
|
|
["text-color", "text-black dark:text-white"], |
|
|
|
["text-default", "text-1em text-black dark:text-white"], |
|
|
|
["text-mini", "text-dark-50 dark:text-[#979898] text-xs"], |
|
|
|
["text-mini-50", "text-xs text-[#717171] dark:text-[#979898]"], |
|
|
|
["text-color-primary", "text-[var(--el-color-primary)]"], |
|
|
|
["text-color-info", "text-[var(--el-color-info)]"], |
|
|
|
["text-color-success", "text-[var(--el-color-success)]"], |
|
|
|
["text-small", "text-dark-50 dark:text-[#979898] text-sm"], |
|
|
|
["text-small-50", "text-sm text-dark-50 dark:text-[#717171]"], |
|
|
|
["text-small-color", "text-dark-50 dark:text-[#979898]"], |
|
|
|
// 边框
|
|
|
|
["border-default", "border-1px border-solid border-gray-200 dark:border-dark-300"], |
|
|
|
["border-default-r", "border-solid border-gray-200 border-0 border-r-1px dark:border-dark-300"], |
|
|
|
["border-default-l", "border-solid border-gray-200 border-0 border-l-1px dark:border-dark-300"], |
|
|
|
["border-default-t", "border-solid border-gray-200 border-0 border-t-1px dark:border-dark-300"], |
|
|
|
["border-default-b", "border-solid border-gray-200 border-0 border-b-1px dark:border-dark-300"], |
|
|
|
["border-default-2", "border-1px border-solid border-[rgba(22,_22,_22,_0.1)] dark:border-[rgba(73,_73,_73,_0.2)]"], |
|
|
|
["border-default-2-r", "border-r-(1px #7e7e7e0e solid) dark:border-dark-300 border-opacity-5"], |
|
|
|
["border-default-2-l", "border-l-(1px #7e7e7e0e solid) dark:border-dark-300 border-opacity-5"], |
|
|
|
["border-default-2-t", "border-t-(1px #7e7e7e0e solid) dark:border-dark-300 border-opacity-5"], |
|
|
|
["border-default-2-b", "border-b-(1px #7e7e7e0e solid) dark:border-dark-300 border-opacity-5"], |
|
|
|
["border-default-dashed", "hover:shadow-sm border-2px border-default border-dashed"], |
|
|
|
["border-default-sm", "border-1px border-solid border-gray-200 dark:border-dark-500"], |
|
|
|
["border-default-hover", "transition-200 border-1px border-solid border-[rgba(22,_22,_22,_0.1)] dark:border-[rgba(73,_73,_73,_0.2)] hover:(border-gray-200 dark:border-dark-100)"], |
|
|
|
["border-default-2-hover", "transition-200 border-1px border-solid border-[rgba(20,_20,_20,_0.05)] dark:border-[rgba(76,_76,_76,_0.1)] hover:(border-gray-200 dark:border-dark-100)"], |
|
|
|
["border-default-dashed", "border-2px border-default border-dashed"], |
|
|
|
["border-default-dashed-hover", "transition-200 hover:border-solid hover:border-[var(--el-color-primary)] border-default-dashed"], |
|
|
|
// 布局
|
|
|
|
["flex-row-c-c", "flex flex-row flex-justify-center flex-items-center"], |
|
|
|
["flex-row-bt-c", "flex flex-row flex-justify-between flex-items-center"], |
|
|
|
["layout-default", "mx-a sm:px-2rem py-4 w-94vw md:w-1400px"], |
|
|
|
["layout-default-md", "mx-a sm:px-2rem py-4 w-94vw md:w-1400px"], |
|
|
|
["layout-default-xm", "mx-a sm:px-2rem py-4 w-94vw md:w-1200px"], |
|
|
|
["layout-default-se", "mx-a sm:px-2rem py-4 w-94vw md:w-1000px"], |
|
|
|
["absolute-center", "absolute left-1/2 -translate-x-1/2"], |
|
|
|
["absolute-center-center", "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"], |
|
|
|
["absolute-center-x", "absolute left-1/2 -translate-x-1/2"], |
|
|
|
|
|
|
|
// element风格按钮
|
|
|
|
["btn-info", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-info)]"], |
|
|
|
["btn-success", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-success)]"], |
|
|
|
["btn-primary", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-primary)]"], |
|
|
|
["btn-danger", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-danger)]"], |
|
|
|
["btn-warning", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-warning)]"], |
|
|
|
["btn-info-text", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-info)]"], |
|
|
|
["btn-success-text", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-success)]"], |
|
|
|
["btn-primary-text", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-primary)]"], |
|
|
|
["btn-danger-text", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-danger)]"], |
|
|
|
["btn-warning-text", "transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-warning)]"], |
|
|
|
["btn-info-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-info)])"], |
|
|
|
["btn-success-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-success)])"], |
|
|
|
["btn-primary-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-primary)])"], |
|
|
|
["btn-danger-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-danger)])"], |
|
|
|
["btn-warning-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-warning)])"], |
|
|
|
["group-btn-info", "transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-info)]"], |
|
|
|
["group-btn-success", "transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-success)]"], |
|
|
|
["group-btn-primary", "transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-primary)]"], |
|
|
|
["group-btn-danger", "transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-danger)]"], |
|
|
|
["group-btn-warning", "transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-warning)]"], |
|
|
|
["btn-light-bg", "transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-light)])"], |
|
|
|
], |
|
|
|
rules: [ |
|
|
|
// color: info success primary danger warning
|
|
|
|
// 文字
|
|
|
|
[/^el-color-(\w*)$/, ([_, color]) => ({ color: `var(--el-color-${color})` })], |
|
|
|
[/^el-bg-(\w*)$/, ([_, color]) => ({ "background-color": `var(--el-color-${color})` })], |
|
|
|
// 文字按钮
|
|
|
|
// [/^btn-(\w*)$/, ([_, color]) => ({
|
|
|
|
// "--at-apply": `transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-${color})]`,
|
|
|
|
// })],
|
|
|
|
// [/^btn-(\w*)-text$/, ([_, color]) => ({
|
|
|
|
// "--at-apply": `transition-200 cursor-pointer rounded-4px hover:text-[var(--el-color-${color})]`,
|
|
|
|
// })],
|
|
|
|
// // 文字背景按钮
|
|
|
|
// [/^btn-(\w*)-bg$/, ([_, color]) => ({
|
|
|
|
// "--at-apply": `transition-200 cursor-pointer rounded-4px hover:(text-white bg-[var(--el-color-${color})]) `,
|
|
|
|
// })],
|
|
|
|
// // 文字按钮组
|
|
|
|
// [/^group-btn-(\w*)$/, ([_, color]) => ({
|
|
|
|
// "--at-apply": `transition-200 cursor-pointer rounded-4px group-hover:text-[var(--el-color-${color})]`,
|
|
|
|
// })],
|
|
|
|
], |
|
|
|
theme: { |
|
|
|
// ...
|
|
|
|
colors: { |
|
|
|
theme: { |
|
|
|
primary: "var(--el-color-primary)", |
|
|
|
danger: "var(--el-color-danger)", |
|
|
|
error: "var(--el-color-error)", |
|
|
|
warning: "var(--el-color-warning)", |
|
|
|
info: "var(--el-color-info)", |
|
|
|
success: "var(--el-color-success)", |
|
|
|
}, // class="text-very-cool"
|
|
|
|
tip: { |
|
|
|
main: "var(--el-color-primary)", // class="--el-color-primary"
|
|
|
|
green: "hsla(var(--hue, 217), 78%, 51%)", // class="bg-brand-primary"
|
|
|
|
}, |
|
|
|
}, |
|
|
|
}, |
|
|
|
presets: [ |
|
|
|
presetUno(), |
|
|
|
presetAttributify(), |
|
|
|
presetTypography(), |
|
|
|
presetWebFonts({}), |
|
|
|
], |
|
|
|
transformers: [ |
|
|
|
transformerDirectives(), |
|
|
|
transformerVariantGroup(), |
|
|
|
], |
|
|
|
}); |