M3 - 2
This commit is contained in:
parent
11cb159a3a
commit
7e0f17f72e
@ -17,7 +17,7 @@
|
||||
"release:major": "standard-version --release-as major"
|
||||
},
|
||||
"dependencies": {
|
||||
"@material/material-color-utilities": "0.2.7"
|
||||
"@material/material-color-utilities": "0.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"standard-version": "^9.5.0",
|
||||
|
||||
@ -3,7 +3,7 @@ import {
|
||||
argbFromHex,
|
||||
hexFromArgb,
|
||||
} from '@material/material-color-utilities';
|
||||
import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
|
||||
import type { MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
|
||||
|
||||
/**
|
||||
* Generates a theme based on the provided color values.
|
||||
@ -13,6 +13,9 @@ import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
|
||||
* @param {string} options.secondary - The secondary color. - 次要颜色。
|
||||
* @param {string} options.tertiary - The tertiary color. - 第三色。
|
||||
* @param {string} options.error - The error color. - 错误颜色。
|
||||
* @param {string} options.info - The info color. - 信息颜色。
|
||||
* @param {string} options.warning - The warning color. - 警告颜色。
|
||||
* @param {string} options.success - The success color. - 成功颜色。
|
||||
* @param {string} options.neutral - The neutral color. - 中性颜色。
|
||||
* @param {string} options.neutralVariant - The variant of the neutral color. - 中性颜色的变体。
|
||||
*
|
||||
@ -128,11 +131,15 @@ import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
|
||||
* @property {string} darkScheme.outlineVariant - The outline variant color used in dark mode. - 暗色模式下使用的轮廓变体颜色。
|
||||
* @property {string} darkScheme.shadow - The shadow color used in dark mode. - 暗色模式下使用的阴影颜色。
|
||||
*/
|
||||
|
||||
export function generateTheme({
|
||||
primary,
|
||||
secondary,
|
||||
tertiary,
|
||||
error,
|
||||
info,
|
||||
warning,
|
||||
success,
|
||||
neutral,
|
||||
neutralVariant,
|
||||
}: {
|
||||
@ -140,6 +147,9 @@ export function generateTheme({
|
||||
secondary: string
|
||||
tertiary: string
|
||||
error: string
|
||||
info: string
|
||||
warning: string
|
||||
success: string
|
||||
neutral: string
|
||||
neutralVariant: string
|
||||
}): {
|
||||
@ -151,116 +161,44 @@ export function generateTheme({
|
||||
const secondaryTonal = TonalPalette.fromInt(argbFromHex(secondary));
|
||||
const tertiaryTonal = TonalPalette.fromInt(argbFromHex(tertiary));
|
||||
const errorTonal = TonalPalette.fromInt(argbFromHex(error));
|
||||
const infoTonal = TonalPalette.fromInt(argbFromHex(info));
|
||||
const warningTonal = TonalPalette.fromInt(argbFromHex(warning));
|
||||
const successTonal = TonalPalette.fromInt(argbFromHex(success));
|
||||
const neutralTonal = TonalPalette.fromInt(argbFromHex(neutral));
|
||||
const neutralVariantTonal = TonalPalette.fromInt(argbFromHex(neutralVariant));
|
||||
|
||||
const themeColors: {
|
||||
primary: MD3Tones
|
||||
secondary: MD3Tones
|
||||
tertiary: MD3Tones
|
||||
error: MD3Tones
|
||||
info: MD3Tones
|
||||
warning: MD3Tones
|
||||
success: MD3Tones
|
||||
neutral: MD3NeutralTones
|
||||
neutralVariant: MD3Tones
|
||||
} = {
|
||||
primary: generateTonalColors(primaryTonal),
|
||||
secondary: generateTonalColors(secondaryTonal),
|
||||
tertiary: generateTonalColors(tertiaryTonal),
|
||||
error: generateTonalColors(errorTonal),
|
||||
info: generateTonalColors(infoTonal),
|
||||
warning: generateTonalColors(warningTonal),
|
||||
success: generateTonalColors(successTonal),
|
||||
neutral: generateNeutralColors(neutralTonal),
|
||||
neutralVariant: generateTonalColors(neutralVariantTonal),
|
||||
};
|
||||
|
||||
const palette: MD3Palettes = {
|
||||
primary: {
|
||||
0: hexFromArgb(primaryTonal.tone(0)),
|
||||
10: hexFromArgb(primaryTonal.tone(10)),
|
||||
20: hexFromArgb(primaryTonal.tone(20)),
|
||||
30: hexFromArgb(primaryTonal.tone(30)),
|
||||
40: hexFromArgb(primaryTonal.tone(40)),
|
||||
50: hexFromArgb(primaryTonal.tone(50)),
|
||||
60: hexFromArgb(primaryTonal.tone(60)),
|
||||
70: hexFromArgb(primaryTonal.tone(70)),
|
||||
80: hexFromArgb(primaryTonal.tone(80)),
|
||||
90: hexFromArgb(primaryTonal.tone(90)),
|
||||
95: hexFromArgb(primaryTonal.tone(95)),
|
||||
99: hexFromArgb(primaryTonal.tone(99)),
|
||||
100: hexFromArgb(primaryTonal.tone(100)),
|
||||
},
|
||||
secondary: {
|
||||
0: hexFromArgb(secondaryTonal.tone(0)),
|
||||
10: hexFromArgb(secondaryTonal.tone(10)),
|
||||
20: hexFromArgb(secondaryTonal.tone(20)),
|
||||
30: hexFromArgb(secondaryTonal.tone(30)),
|
||||
40: hexFromArgb(secondaryTonal.tone(40)),
|
||||
50: hexFromArgb(secondaryTonal.tone(50)),
|
||||
60: hexFromArgb(secondaryTonal.tone(60)),
|
||||
70: hexFromArgb(secondaryTonal.tone(70)),
|
||||
80: hexFromArgb(secondaryTonal.tone(80)),
|
||||
90: hexFromArgb(secondaryTonal.tone(90)),
|
||||
95: hexFromArgb(secondaryTonal.tone(95)),
|
||||
99: hexFromArgb(secondaryTonal.tone(99)),
|
||||
100: hexFromArgb(secondaryTonal.tone(100)),
|
||||
},
|
||||
tertiary: {
|
||||
0: hexFromArgb(tertiaryTonal.tone(0)),
|
||||
10: hexFromArgb(tertiaryTonal.tone(10)),
|
||||
20: hexFromArgb(tertiaryTonal.tone(20)),
|
||||
30: hexFromArgb(tertiaryTonal.tone(30)),
|
||||
40: hexFromArgb(tertiaryTonal.tone(40)),
|
||||
50: hexFromArgb(tertiaryTonal.tone(50)),
|
||||
60: hexFromArgb(tertiaryTonal.tone(60)),
|
||||
70: hexFromArgb(tertiaryTonal.tone(70)),
|
||||
80: hexFromArgb(tertiaryTonal.tone(80)),
|
||||
90: hexFromArgb(tertiaryTonal.tone(90)),
|
||||
95: hexFromArgb(tertiaryTonal.tone(95)),
|
||||
99: hexFromArgb(tertiaryTonal.tone(99)),
|
||||
100: hexFromArgb(tertiaryTonal.tone(100)),
|
||||
},
|
||||
error: {
|
||||
0: hexFromArgb(errorTonal.tone(0)),
|
||||
10: hexFromArgb(errorTonal.tone(10)),
|
||||
20: hexFromArgb(errorTonal.tone(20)),
|
||||
30: hexFromArgb(errorTonal.tone(30)),
|
||||
40: hexFromArgb(errorTonal.tone(40)),
|
||||
50: hexFromArgb(errorTonal.tone(50)),
|
||||
60: hexFromArgb(errorTonal.tone(60)),
|
||||
70: hexFromArgb(errorTonal.tone(70)),
|
||||
80: hexFromArgb(errorTonal.tone(80)),
|
||||
90: hexFromArgb(errorTonal.tone(90)),
|
||||
95: hexFromArgb(errorTonal.tone(95)),
|
||||
99: hexFromArgb(errorTonal.tone(99)),
|
||||
100: hexFromArgb(errorTonal.tone(100)),
|
||||
},
|
||||
neutral: {
|
||||
0: hexFromArgb(neutralTonal.tone(0)),
|
||||
4: hexFromArgb(neutralTonal.tone(4)),
|
||||
6: hexFromArgb(neutralTonal.tone(6)),
|
||||
10: hexFromArgb(neutralTonal.tone(10)),
|
||||
12: hexFromArgb(neutralTonal.tone(12)),
|
||||
17: hexFromArgb(neutralTonal.tone(17)),
|
||||
20: hexFromArgb(neutralTonal.tone(20)),
|
||||
22: hexFromArgb(neutralTonal.tone(22)),
|
||||
24: hexFromArgb(neutralTonal.tone(24)),
|
||||
30: hexFromArgb(neutralTonal.tone(30)),
|
||||
40: hexFromArgb(neutralTonal.tone(40)),
|
||||
50: hexFromArgb(neutralTonal.tone(50)),
|
||||
60: hexFromArgb(neutralTonal.tone(60)),
|
||||
70: hexFromArgb(neutralTonal.tone(70)),
|
||||
80: hexFromArgb(neutralTonal.tone(80)),
|
||||
90: hexFromArgb(neutralTonal.tone(90)),
|
||||
92: hexFromArgb(neutralTonal.tone(92)),
|
||||
94: hexFromArgb(neutralTonal.tone(94)),
|
||||
95: hexFromArgb(neutralTonal.tone(95)),
|
||||
96: hexFromArgb(neutralTonal.tone(96)),
|
||||
98: hexFromArgb(neutralTonal.tone(98)),
|
||||
99: hexFromArgb(neutralTonal.tone(99)),
|
||||
100: hexFromArgb(neutralTonal.tone(100)),
|
||||
},
|
||||
neutralVariant: {
|
||||
0: hexFromArgb(neutralVariantTonal.tone(0)),
|
||||
10: hexFromArgb(neutralVariantTonal.tone(10)),
|
||||
20: hexFromArgb(neutralVariantTonal.tone(20)),
|
||||
30: hexFromArgb(neutralVariantTonal.tone(30)),
|
||||
40: hexFromArgb(neutralVariantTonal.tone(40)),
|
||||
50: hexFromArgb(neutralVariantTonal.tone(50)),
|
||||
60: hexFromArgb(neutralVariantTonal.tone(60)),
|
||||
70: hexFromArgb(neutralVariantTonal.tone(70)),
|
||||
80: hexFromArgb(neutralVariantTonal.tone(80)),
|
||||
90: hexFromArgb(neutralVariantTonal.tone(90)),
|
||||
95: hexFromArgb(neutralVariantTonal.tone(95)),
|
||||
99: hexFromArgb(neutralVariantTonal.tone(99)),
|
||||
100: hexFromArgb(neutralVariantTonal.tone(100)),
|
||||
...themeColors,
|
||||
common: {
|
||||
white: '#fff',
|
||||
black: '#000',
|
||||
},
|
||||
};
|
||||
|
||||
const lightScheme: MD3ColorSchemeTokens = {
|
||||
|
||||
// 缺少 : info warning success
|
||||
|
||||
// primary
|
||||
primary: palette.primary[40],
|
||||
onPrimary: palette.primary[100],
|
||||
@ -285,6 +223,24 @@ export function generateTheme({
|
||||
errorContainer: palette.error[90],
|
||||
onErrorContainer: palette.error[10],
|
||||
|
||||
// info
|
||||
info: palette.info[40],
|
||||
onInfo: palette.info[100],
|
||||
infoContainer: palette.info[90],
|
||||
onInfoContainer: palette.info[10],
|
||||
|
||||
// warning
|
||||
warning: palette.warning[40],
|
||||
onWarning: palette.warning[100],
|
||||
warningContainer: palette.warning[90],
|
||||
onWarningContainer: palette.warning[10],
|
||||
|
||||
// success
|
||||
success: palette.success[40],
|
||||
onSuccess: palette.success[100],
|
||||
successContainer: palette.success[90],
|
||||
onSuccessContainer: palette.success[10],
|
||||
|
||||
// surface
|
||||
surface: palette.neutral[98],
|
||||
onSurface: palette.neutral[10],
|
||||
@ -338,6 +294,24 @@ export function generateTheme({
|
||||
errorContainer: palette.error[30],
|
||||
onErrorContainer: palette.error[90],
|
||||
|
||||
// info
|
||||
info: palette.info[80],
|
||||
onInfo: palette.info[20],
|
||||
infoContainer: palette.info[30],
|
||||
onInfoContainer: palette.info[90],
|
||||
|
||||
// warning
|
||||
warning: palette.warning[80],
|
||||
onWarning: palette.warning[20],
|
||||
warningContainer: palette.warning[30],
|
||||
onWarningContainer: palette.warning[90],
|
||||
|
||||
// success
|
||||
success: palette.success[80],
|
||||
onSuccess: palette.success[20],
|
||||
successContainer: palette.success[30],
|
||||
onSuccessContainer: palette.success[90],
|
||||
|
||||
// surface
|
||||
surface: palette.neutral[6],
|
||||
onSurface: palette.neutral[90],
|
||||
@ -372,3 +346,21 @@ export function generateTheme({
|
||||
darkScheme,
|
||||
};
|
||||
}
|
||||
|
||||
function generateTonalColors(tonal: TonalPalette): MD3Tones {
|
||||
const tones: (keyof MD3Tones)[] = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100];
|
||||
const result: MD3NeutralTones = {} as MD3NeutralTones;
|
||||
tones.forEach((tone) => {
|
||||
result[tone] = hexFromArgb(tonal.tone(tone));
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
function generateNeutralColors(tonal: TonalPalette): MD3NeutralTones {
|
||||
const tones: (keyof MD3NeutralTones)[] = [0, 4, 6, 10, 12, 17, 20, 22, 24, 30, 40, 50, 60, 70, 80, 90, 92, 94, 95, 96, 98, 99, 100];
|
||||
const result: MD3NeutralTones = {} as MD3NeutralTones;
|
||||
tones.forEach((tone) => {
|
||||
result[tone] = hexFromArgb(tonal.tone(tone));
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
@ -43,10 +43,10 @@ export interface MD3Palettes {
|
||||
neutral: MD3NeutralTones
|
||||
neutralVariant: MD3Tones
|
||||
error: MD3Tones
|
||||
info?: MD3Tones
|
||||
warning?: MD3Tones
|
||||
success?: MD3Tones
|
||||
common?: {
|
||||
info: MD3Tones
|
||||
warning: MD3Tones
|
||||
success: MD3Tones
|
||||
common: {
|
||||
black: string
|
||||
white: string
|
||||
}
|
||||
|
||||
@ -12,6 +12,18 @@
|
||||
"ignoreAuth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "ColorCard",
|
||||
"path": "pages/colorCard/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "ColorCard",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"meta": {
|
||||
"tabBar": false,
|
||||
"ignoreAuth": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Home",
|
||||
"path": "pages/index/index",
|
||||
|
||||
43
src/pages/colorCard/ColorPalette.vue
Normal file
43
src/pages/colorCard/ColorPalette.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ColorPalette',
|
||||
props: {
|
||||
palette: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-for="(value, keyName) in palette" :key="keyName" class="flex flex-col"
|
||||
>
|
||||
<h2 v-if="typeof value === 'object'">
|
||||
{{ keyName }}
|
||||
</h2>
|
||||
<div v-if="typeof value === 'object'" class="flex haha flex-1">
|
||||
<ColorPalette :palette="value" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-[54rpx] transition-background-color duration-300"
|
||||
:style="{
|
||||
backgroundColor: value,
|
||||
width: `calc(100vw/${Object.keys(palette).length})`,
|
||||
}"
|
||||
>
|
||||
<!-- <span>{{ keyName }}: {{ value }}</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.palette {
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
49
src/pages/colorCard/Scheme.vue
Normal file
49
src/pages/colorCard/Scheme.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<!--
|
||||
## File: /src/pages/splashScreen/Scheme.vue
|
||||
|
||||
Project: uniapp_vue3_vite_ts
|
||||
|
||||
Created Date: 2024-09-05 10:45:49
|
||||
|
||||
Author: KuroSago
|
||||
|
||||
## Last Modified: 2024-09-05 10:45:49
|
||||
|
||||
Modified By: kurosago
|
||||
|
||||
## Copyright (c) 2024 self.
|
||||
|
||||
Use To: Scheme
|
||||
-->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
scheme: Record<string, any>
|
||||
}>();
|
||||
|
||||
defineComponent({
|
||||
name: 'Scheme',
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="grid grid-cols-3 gap-[8px]">
|
||||
<div
|
||||
v-for="(v, k) in props.scheme"
|
||||
:key="k" class="flex flex-col items-center justify-center "
|
||||
>
|
||||
<span class="text-ellipsis w-full overflow-hidden">{{ k }}</span>
|
||||
<div
|
||||
class="flex-1 w-full flex items-center justify-center transition-background-color duration-300"
|
||||
:style="{
|
||||
backgroundColor: v,
|
||||
borderRadius: '8px',
|
||||
}"
|
||||
>
|
||||
{{ v }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
44
src/pages/colorCard/index.vue
Normal file
44
src/pages/colorCard/index.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<script lang="ts" setup>
|
||||
import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import ColorPalette from './ColorPalette.vue';
|
||||
import Scheme from './Scheme.vue';
|
||||
import { ThemeAssemble } from './themes';
|
||||
|
||||
type ThemeKeys = keyof typeof ThemeAssemble;
|
||||
|
||||
const theme: Ref<ThemeKeys> = ref('Watermelon');
|
||||
|
||||
const themeColor = computed(() => {
|
||||
return generateTheme(ThemeAssemble[theme.value]);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="bg-primary flex-1">
|
||||
<div class="py-[32rpx] b flex flex-col b-[#123]">
|
||||
<span>click it to change theme</span>
|
||||
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div v-for="(v, k) in ThemeAssemble" :key="k" class="flex flex-col justify-center items-center" @click="theme = k">
|
||||
<div class="w-[100rpx] h-[100rpx] bg-[#123] rounded-[8rpx]" :style="{ backgroundColor: v.primary }" />
|
||||
<span>{{ k }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span>now : {{ theme }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 递归渲染色卡 -->
|
||||
<ColorPalette :palette="themeColor.palette" />
|
||||
|
||||
<!-- lightScheme -->
|
||||
<span>lightScheme</span>
|
||||
<Scheme :scheme="themeColor.lightScheme" />
|
||||
|
||||
<!-- darkScheme -->
|
||||
<span>darkScheme</span>
|
||||
<Scheme :scheme="themeColor.darkScheme" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
126
src/pages/colorCard/themes.ts
Normal file
126
src/pages/colorCard/themes.ts
Normal file
@ -0,0 +1,126 @@
|
||||
/**
|
||||
* ## File: /src/pages/colorCard/themes.ts
|
||||
*
|
||||
* Project: uniapp_vue3_vite_ts
|
||||
*
|
||||
* Created Date: 2024-09-05 15:54:91
|
||||
*
|
||||
* Author: KuroSago
|
||||
*
|
||||
* ## Last Modified: 2024-09-05 15:54:91
|
||||
*
|
||||
* Modified By: kurosago
|
||||
*
|
||||
* ## Copyright (c) 2024 self.
|
||||
*
|
||||
* Use To:
|
||||
*/
|
||||
|
||||
const Avocado = {
|
||||
primary: '#6b8e23', // 牛油果果肉的绿色
|
||||
secondary: '#556b2f', // 牛油果外皮的深绿色
|
||||
tertiary: '#8fbc8f', // 浅绿色，作为柔和的补充色
|
||||
error: '#b22222', // 红棕色，作为对比的错误提示色
|
||||
warning: '#d2b48c', // 牛油果核的棕色，作为警告色
|
||||
success: '#228b22', // 深绿色，象征成功和活力
|
||||
info: '#c0c0c0', // 中性的灰色，用作信息色
|
||||
neutral: '#4b5320', // 深绿色，作为主中性色
|
||||
neutralVariant: '#f0e68c', // 浅黄色调，作为一种温和的变体色
|
||||
};
|
||||
|
||||
// 西瓜
|
||||
const Watermelon = {
|
||||
primary: '#ff4757', // 西瓜果肉的鲜红色
|
||||
secondary: '#2ecc71', // 西瓜外皮的绿色
|
||||
tertiary: '#f1c40f', // 黄色，代表西瓜的阳光感
|
||||
error: '#c0392b', // 深红色，作为错误提示色
|
||||
warning: '#f39c12', // 橙黄色，警告色
|
||||
success: '#27ae60', // 明亮的绿色，象征成功
|
||||
info: '#ecf0f1', // 浅灰色，作为信息色
|
||||
neutral: '#34495e', // 瓜籽的深蓝色，作为主中性色
|
||||
neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色变体
|
||||
};
|
||||
|
||||
// 蓝莓
|
||||
const Blueberry = {
|
||||
primary: '#4a69bd', // 蓝莓的深蓝色
|
||||
secondary: '#82ccdd', // 浅蓝色，代表天空的清爽感
|
||||
tertiary: '#f8c291', // 柔和的米色，代表蓝莓周围的土壤
|
||||
error: '#e74c3c', // 深红色，警示错误
|
||||
warning: '#f39c12', // 金黄色，代表警告
|
||||
success: '#27ae60', // 明亮的绿色，象征蓝莓生长的活力
|
||||
info: '#dfe6e9', // 浅灰色，信息提示
|
||||
neutral: '#2d3436', // 深灰色，作为中性色
|
||||
neutralVariant: '#636e72', // 较浅的灰色，作为中性色变体
|
||||
};
|
||||
|
||||
const Lemon = {
|
||||
primary: '#f7b731', // 柠檬的明亮黄色，作为主色调
|
||||
secondary: '#badc58', // 浅绿色，代表柠檬叶子
|
||||
tertiary: '#f9ca24', // 较深的黄色，代表柠檬皮
|
||||
error: '#eb4d4b', // 鲜红色，用于警示错误
|
||||
warning: '#f0932b', // 橙色，代表警告
|
||||
success: '#6ab04c', // 浅绿色，象征成功与自然活力
|
||||
info: '#dff9fb', // 淡蓝色，象征信息提示的清爽
|
||||
neutral: '#2f3640', // 深灰色，作为主中性色
|
||||
neutralVariant: '#7f8c8d', // 中性灰，作为中性色变体
|
||||
};
|
||||
|
||||
const Grape = {
|
||||
primary: '#6f1e51', // 葡萄的深紫色，作为主色调
|
||||
secondary: '#833471', // 较浅的紫色，代表葡萄皮的色彩层次
|
||||
tertiary: '#b53471', // 带红色调的紫色，代表成熟葡萄
|
||||
error: '#e55039', // 深红色，用于错误提示
|
||||
warning: '#f39c12', // 亮橙色，作为警告色
|
||||
success: '#78e08f', // 浅绿色，象征成功和自然
|
||||
info: '#c8d6e5', // 浅蓝色，信息提示色
|
||||
neutral: '#2d3436', // 深灰色，作为中性色
|
||||
neutralVariant: '#8395a7', // 较浅的灰色，作为中性色变体
|
||||
};
|
||||
|
||||
const Peach = {
|
||||
primary: '#ff6b81', // 蜜桃果肉的粉红色
|
||||
secondary: '#ff9f43', // 温暖的橙色，代表蜜桃的阳光感
|
||||
tertiary: '#ffeaa7', // 柔和的黄色，带来舒适感
|
||||
error: '#e74c3c', // 鲜艳的红色，警示错误
|
||||
warning: '#f39c12', // 明亮的橙色，代表警告
|
||||
success: '#2ecc71', // 绿色，象征自然和成长
|
||||
info: '#dfe6e9', // 浅灰蓝，信息提示色
|
||||
neutral: '#576574', // 中性蓝灰色，作为中性色
|
||||
neutralVariant: '#8395a7', // 较浅的灰色，作为中性色变体
|
||||
};
|
||||
|
||||
const Ocean = {
|
||||
primary: '#3498db', // 海水的深蓝色
|
||||
secondary: '#1abc9c', // 清新的蓝绿色，代表海洋的生命力
|
||||
tertiary: '#6dd5ed', // 浅蓝色，海天相接的色彩
|
||||
error: '#e74c3c', // 鲜红色，代表警示
|
||||
warning: '#f39c12', // 明亮的橙色，作为警告色
|
||||
success: '#2ecc71', // 绿色，代表自然的复苏
|
||||
info: '#ecf0f1', // 非常浅的蓝白色，信息提示色
|
||||
neutral: '#34495e', // 深蓝灰色，作为中性色
|
||||
neutralVariant: '#7f8c8d', // 较浅的蓝灰色，作为中性色变体
|
||||
};
|
||||
|
||||
const Forest = {
|
||||
primary: '#1e5631', // 深绿色，代表茂密的树叶和森林的稳重感
|
||||
secondary: '#a3d9a5', // 浅绿色，代表新生的植物和森林中的光线
|
||||
tertiary: '#755139', // 棕色，代表树木的树干和泥土
|
||||
error: '#d32f2f', // 深红色，象征警示
|
||||
warning: '#ffa000', // 亮橙色，作为警告色
|
||||
success: '#4caf50', // 中绿色，象征森林的生机与成功
|
||||
info: '#c8e6c9', // 柔和的浅绿，提供信息提示的清新感
|
||||
neutral: '#2c3e50', // 深蓝灰色，代表阴影和静谧
|
||||
neutralVariant: '#95a5a6', // 较浅的灰色，作为中性色的变体
|
||||
};
|
||||
|
||||
export const ThemeAssemble = {
|
||||
Avocado,
|
||||
Watermelon,
|
||||
Blueberry,
|
||||
Lemon,
|
||||
Grape,
|
||||
Peach,
|
||||
Ocean,
|
||||
Forest,
|
||||
};
|
||||
@ -9,27 +9,16 @@
|
||||
|
||||
## Last Modified: 2024-06-24 11:30:88
|
||||
|
||||
Modified By: KuroSago
|
||||
Modified By: kurosago
|
||||
|
||||
## Copyright (c) 2024 self.
|
||||
|
||||
Use To: 启动页面
|
||||
-->
|
||||
<script lang="ts" setup>
|
||||
import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { useUserStore } from '@/stores/modules/user';
|
||||
import { useSystemInfoStore } from '@/stores/modules/system';
|
||||
|
||||
const a = generateTheme({
|
||||
primary: '#6200ee',
|
||||
secondary: '#03dac6',
|
||||
tertiary: '#03dac6',
|
||||
error: '#b00020',
|
||||
neutral: '#000000',
|
||||
neutralVariant: '#ffffff',
|
||||
});
|
||||
console.log(console.log(JSON.stringify(a)));
|
||||
|
||||
const { changeThemeModel } = useSystemInfoStore();
|
||||
|
||||
const router = useRouter();
|
||||
@ -60,16 +49,26 @@ function changeTheme() {
|
||||
model: themeModel === 'DARK' ? 'LIGHT' : 'DARK',
|
||||
});
|
||||
}
|
||||
|
||||
// fnc : 跳转到色卡页面
|
||||
function toColorCard() {
|
||||
router.push({
|
||||
name: 'ColorCard',
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class=" bg-primary">
|
||||
<span class="text-#123">流转</span>
|
||||
<view class=" bg-primary flex-1">
|
||||
<span @click="changeTheme">
|
||||
changeTheme
|
||||
</span>
|
||||
|
||||
<button
|
||||
@click="changeTheme"
|
||||
>
|
||||
4
|
||||
<button @click="toColorCard">
|
||||
色卡
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
@ -12,7 +12,6 @@ const router = createRouter({
|
||||
|
||||
export function setupRouter(app: App<Element>) {
|
||||
// Configure router guard
|
||||
console.log('app ===', app);
|
||||
createRouterGuard(router);
|
||||
app.use(router);
|
||||
}
|
||||
|
||||
2
src/types/import-components.d.ts
vendored
2
src/types/import-components.d.ts
vendored
@ -9,8 +9,6 @@ declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AppProvider: typeof import('./../components/AppProvider/index.vue')['default']
|
||||
BasicButton: typeof import('./../components/BasicButton/index.vue')['default']
|
||||
BasicInput: typeof import('./../components/BasicInput/index.vue')['default']
|
||||
Iconify: typeof import('./../components/Iconify/index.vue')['default']
|
||||
Test: typeof import('./../components/Test/index.vue')['default']
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
|
||||
import { getIconCollections, iconsPlugin } from '@egoist/tailwindcss-icons';
|
||||
import { isMp } from './build/platform';
|
||||
|
||||
@ -13,61 +14,61 @@ export default {
|
||||
collections: getIconCollections(['mdi', 'svg-spinners']),
|
||||
})],
|
||||
theme: {
|
||||
extend: {
|
||||
opacity: {
|
||||
disabled: 'var(--opacity-disabled)',
|
||||
"extend": {
|
||||
"opacity": {
|
||||
"disabled": "var(--opacity-disabled)"
|
||||
}
|
||||
},
|
||||
"colors": {
|
||||
"primary": "var(--colors-primary)",
|
||||
"secondary": "var(--colors-secondary)",
|
||||
"accent": "var(--colors-accent)",
|
||||
"success": "var(--colors-success)",
|
||||
"warning": "var(--colors-warning)",
|
||||
"error": "var(--colors-error)",
|
||||
"disable": "var(--colors-disable)",
|
||||
"danger": "var(--colors-danger)",
|
||||
"mark": "var(--colors-mark)",
|
||||
"title": "var(--colors-title)",
|
||||
"subtitle": "var(--colors-subtitle)",
|
||||
"paragraph": "var(--colors-paragraph)",
|
||||
"fontColorblack": "var(--colors-fontColorblack)",
|
||||
"fontColorPrimary": "var(--colors-fontColorPrimary)",
|
||||
"fontColorInverse": "var(--colors-fontColorInverse)",
|
||||
"fontColorGrey": "var(--colors-fontColorGrey)",
|
||||
"fontColorPlaceholder": "var(--colors-fontColorPlaceholder)",
|
||||
"fontColorDisable": "var(--colors-fontColorDisable)",
|
||||
"fontColorBottomText": "var(--colors-fontColorBottomText)",
|
||||
"container": "var(--colors-container)",
|
||||
"page": "var(--colors-page)",
|
||||
"containerInverse": "var(--colors-containerInverse)",
|
||||
"containerHover": "var(--colors-containerHover)",
|
||||
"secondaryHover": "var(--colors-secondaryHover)",
|
||||
"containerMask": "var(--colors-containerMask)",
|
||||
"iconButton": "var(--colors-iconButton)",
|
||||
"borderColor": "var(--colors-borderColor)"
|
||||
},
|
||||
colors: {
|
||||
primary: 'var(--colors-primary)',
|
||||
secondary: 'var(--colors-secondary)',
|
||||
accent: 'var(--colors-accent)',
|
||||
success: 'var(--colors-success)',
|
||||
warning: 'var(--colors-warning)',
|
||||
error: 'var(--colors-error)',
|
||||
disable: 'var(--colors-disable)',
|
||||
danger: 'var(--colors-danger)',
|
||||
mark: 'var(--colors-mark)',
|
||||
title: 'var(--colors-title)',
|
||||
subtitle: 'var(--colors-subtitle)',
|
||||
paragraph: 'var(--colors-paragraph)',
|
||||
fontColorblack: 'var(--colors-fontColorblack)',
|
||||
fontColorPrimary: 'var(--colors-fontColorPrimary)',
|
||||
fontColorInverse: 'var(--colors-fontColorInverse)',
|
||||
fontColorGrey: 'var(--colors-fontColorGrey)',
|
||||
fontColorPlaceholder: 'var(--colors-fontColorPlaceholder)',
|
||||
fontColorDisable: 'var(--colors-fontColorDisable)',
|
||||
fontColorBottomText: 'var(--colors-fontColorBottomText)',
|
||||
container: 'var(--colors-container)',
|
||||
page: 'var(--colors-page)',
|
||||
containerInverse: 'var(--colors-containerInverse)',
|
||||
containerHover: 'var(--colors-containerHover)',
|
||||
secondaryHover: 'var(--colors-secondaryHover)',
|
||||
containerMask: 'var(--colors-containerMask)',
|
||||
iconButton: 'var(--colors-iconButton)',
|
||||
borderColor: 'var(--colors-borderColor)',
|
||||
},
|
||||
fontSize: {
|
||||
sm: 'var(--fontSize-sm)',
|
||||
base: 'var(--fontSize-base)',
|
||||
lg: 'var(--fontSize-lg)',
|
||||
title: 'var(--fontSize-title)',
|
||||
subtitle: 'var(--fontSize-subtitle)',
|
||||
paragraph: 'var(--fontSize-paragraph)',
|
||||
},
|
||||
borderRadius: {
|
||||
sm: 'var(--borderRadius-sm)',
|
||||
base: 'var(--borderRadius-base)',
|
||||
lg: 'var(--borderRadius-lg)',
|
||||
circle: 'var(--borderRadius-circle)',
|
||||
},
|
||||
spacing: {
|
||||
rowSm: 'var(--spacing-rowSm)',
|
||||
rowBase: 'var(--spacing-rowBase)',
|
||||
rowLg: 'var(--spacing-rowLg)',
|
||||
colSm: 'var(--spacing-colSm)',
|
||||
colBase: 'var(--spacing-colBase)',
|
||||
colLg: 'var(--spacing-colLg)',
|
||||
"fontSize": {
|
||||
"sm": "var(--fontSize-sm)",
|
||||
"base": "var(--fontSize-base)",
|
||||
"lg": "var(--fontSize-lg)",
|
||||
"title": "var(--fontSize-title)",
|
||||
"subtitle": "var(--fontSize-subtitle)",
|
||||
"paragraph": "var(--fontSize-paragraph)"
|
||||
},
|
||||
"borderRadius": {
|
||||
"sm": "var(--borderRadius-sm)",
|
||||
"base": "var(--borderRadius-base)",
|
||||
"lg": "var(--borderRadius-lg)",
|
||||
"circle": "var(--borderRadius-circle)"
|
||||
},
|
||||
"spacing": {
|
||||
"rowSm": "var(--spacing-rowSm)",
|
||||
"rowBase": "var(--spacing-rowBase)",
|
||||
"rowLg": "var(--spacing-rowLg)",
|
||||
"colSm": "var(--spacing-colSm)",
|
||||
"colBase": "var(--spacing-colBase)",
|
||||
"colLg": "var(--spacing-colLg)"
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -45,8 +45,8 @@ export default defineConfig(async ({ mode }) => {
|
||||
plugins: createVitePlugins({ isProd }),
|
||||
// 开发服务器配置
|
||||
server: {
|
||||
host: true,
|
||||
// open: true,
|
||||
// host: true,
|
||||
open: true,
|
||||
port: Number.parseInt(VITE_PORT!, 10),
|
||||
proxy: resolveProxy([[VITE_PROXY_PREFIX as string, VITE_BASE_URL as string], [VITE_UPLOAD_PROXY_PREFIX as string, VITE_UPLOAD_URL as string]]),
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user