You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

147 lines
8.6 KiB

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(),
],
});