更新文档
This commit is contained in:
parent
f843603dc0
commit
76c35a015d
@ -1,34 +1,128 @@
|
||||
# Material Design 3 Theme Builder
|
||||
# Material Design 3 主题配置说明
|
||||
|
||||
This is a tool to help you build a Material Design 3 theme for your application. It is based on the [Material Design 3 theme builder](https://material-foundation.github.io/material-theme-builder/) and the [Material Design 3 color system](https://m3.material.io/styles/color/system/overview). Some more reading on the color system can be found at [The Science of Color in Design](https://material.io/blog/science-of-color-design).
|
||||
## 简介
|
||||
|
||||
The color palettes and schemes are built using the color utilities from here [Material Design 3 color utilities](https://github.com/material-foundation/material-color-utilities)
|
||||
Material Design 3 (MD3) 主题配置提供了一套完整的接口定义，用于构建符合MD3设计规范的主题。这包括颜色调色板、亮色和暗色模式的颜色方案等。
|
||||
|
||||
This tool will generate a color palette, light theme, and dark theme for your application.
|
||||
|
||||
## Getting Started
|
||||
|
||||
`npm i material-design-3-theme-builder`
|
||||
### 代码示例
|
||||
|
||||
```typescript
|
||||
import { generateTheme } from 'material-design-3-theme-builder';
|
||||
import { generateTheme } from './generateTheme';
|
||||
|
||||
/**
|
||||
* The color keys are the keys that will be used to reference the colors in the theme.
|
||||
* The values are the hex values of the colors.
|
||||
*/
|
||||
const colorKeys = {
|
||||
primary: '#007680',
|
||||
secondary: '#000000',
|
||||
tertiary: '#80CDFA',
|
||||
error: '#DA291C',
|
||||
neutral: '#DDDDDD',
|
||||
neutralVariant: '#DDDDDD',
|
||||
};
|
||||
|
||||
/**
|
||||
* This will generate the theme object that can be used to style the application.
|
||||
* The theme object will contain the color scheme for both light and dark mode.
|
||||
*/
|
||||
const theme = generateTheme(colorKeys);
|
||||
const theme = generateTheme({
|
||||
primary: '#FF6F00',
|
||||
secondary: '#00B0FF',
|
||||
tertiary: '#00C853',
|
||||
error: '#B00020',
|
||||
info: '#304FFE',
|
||||
warning: '#FF9100',
|
||||
success: '#00C853',
|
||||
neutral: '#000000',
|
||||
neutralVariant: '#757575',
|
||||
});
|
||||
```
|
||||
|
||||
### 返回值
|
||||
|
||||
生成的主题对象包含以下属性：
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ----------- | -------------------- |
|
||||
| palette | 主题的颜色调色板 |
|
||||
| lightScheme | 亮色模式下的颜色方案 |
|
||||
| darkScheme | 暗色模式下的颜色方案 |
|
||||
|
||||
## MD3ColorSchemeTokens 接口
|
||||
|
||||
`MD3ColorSchemeTokens` 定义了颜色方案的详细配置，包括亮色模式和暗色模式。
|
||||
|
||||
### 主色（Primary）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ------------------ | ------------------------------ |
|
||||
| primary | 主色 |
|
||||
| onPrimary | 主色上的文本和图标颜色 |
|
||||
| primaryContainer | 主色容器颜色 |
|
||||
| onPrimaryContainer | 主色容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 次色（Secondary）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| -------------------- | ------------------------------ |
|
||||
| secondary | 次色 |
|
||||
| onSecondary | 次色上的文本和图标颜色 |
|
||||
| secondaryContainer | 次色容器颜色 |
|
||||
| onSecondaryContainer | 次色容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 第三色（Tertiary）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ------------------- | -------------------------------- |
|
||||
| tertiary | 第三色 |
|
||||
| onTertiary | 第三色上的文本和图标颜色 |
|
||||
| tertiaryContainer | 第三色容器颜色 |
|
||||
| onTertiaryContainer | 第三色容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 错误色（Error）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ---------------- | ------------------------------ |
|
||||
| error | 错误色 |
|
||||
| onError | 错误色上的文本和图标颜色 |
|
||||
| errorContainer | 错误容器颜色 |
|
||||
| onErrorContainer | 错误容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 信息色（Info）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| --------------- | ------------------------------ |
|
||||
| info | 信息色 |
|
||||
| onInfo | 信息色上的文本和图标颜色 |
|
||||
| infoContainer | 信息容器颜色 |
|
||||
| onInfoContainer | 信息容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 警告色（Warning）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ------------------ | ------------------------------ |
|
||||
| warning | 警告色 |
|
||||
| onWarning | 警告色上的文本和图标颜色 |
|
||||
| warningContainer | 警告容器颜色 |
|
||||
| onWarningContainer | 警告容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 成功色（Success）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ------------------ | ------------------------------ |
|
||||
| success | 成功色 |
|
||||
| onSuccess | 成功色上的文本和图标颜色 |
|
||||
| successContainer | 成功容器颜色 |
|
||||
| onSuccessContainer | 成功容器颜色上的文本和图标颜色 |
|
||||
|
||||
### 背景和表面（Background and Surface）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ----------------------- | ---------------------------- |
|
||||
| background | 背景色 |
|
||||
| onBackground | 背景色上的文本和图标颜色 |
|
||||
| surface | 表面色 |
|
||||
| onSurface | 表面色上的文本和图标颜色 |
|
||||
| surfaceVariant | 表面变体色 |
|
||||
| onSurfaceVariant | 表面变体色上的文本和图标颜色 |
|
||||
| surfaceContainerLowest | 最低表面容器颜色 |
|
||||
| surfaceContainerLow | 低表面容器颜色 |
|
||||
| surfaceContainer | 表面容器颜色 |
|
||||
| surfaceContainerHigh | 高表面容器颜色 |
|
||||
| surfaceContainerHighest | 最高表面容器颜色 |
|
||||
|
||||
### 其他（Others）
|
||||
|
||||
| 属性名称 | 描述 |
|
||||
| ---------------- | ---------------------------- |
|
||||
| inverseSurface | 反色表面色 |
|
||||
| inverseOnSurface | 反色表面色上的文本和图标颜色 |
|
||||
| inversePrimary | 反色主色 |
|
||||
| surfaceTint | 表面色调 |
|
||||
| outline | 轮廓色 |
|
||||
| outlineVariant | 轮廓变体色 |
|
||||
| shadow | 阴影色 |
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import type { AppTheme, MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
|
||||
import {
|
||||
TonalPalette,
|
||||
argbFromHex,
|
||||
hexFromArgb,
|
||||
TonalPalette,
|
||||
} from '@material/material-color-utilities';
|
||||
import type { AppTheme, MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones } from './theme.types';
|
||||
|
||||
/**
|
||||
* Generates a theme based on the provided color values.
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { generateTheme } from './generateTheme';
|
||||
import type {
|
||||
AppTheme,
|
||||
MD3ColorSchemeTokens,
|
||||
@ -6,6 +5,7 @@ import type {
|
||||
MD3Palettes,
|
||||
MD3Tones,
|
||||
} from './theme.types';
|
||||
import { generateTheme } from './generateTheme';
|
||||
|
||||
export { generateTheme };
|
||||
export type { MD3Tones, MD3NeutralTones, MD3Palettes, MD3ColorSchemeTokens, AppTheme };
|
||||
export type { AppTheme, MD3ColorSchemeTokens, MD3NeutralTones, MD3Palettes, MD3Tones };
|
||||
|
||||
@ -90,7 +90,7 @@ const weekDatesForMarks = computed(() => {
|
||||
type="date"
|
||||
@update:value="datePickerChange"
|
||||
/> -->
|
||||
<span class="font-bold">
|
||||
<span class="font-bold text-inverseSurface">
|
||||
{{ dayjs(selectedDate).format('YYYY年M月') }}
|
||||
</span>
|
||||
<SvgIcon class="rotate-0 font-bold" icon="i-ic-round-keyboard-arrow-down" />
|
||||
@ -126,7 +126,7 @@ const weekDatesForMarks = computed(() => {
|
||||
@click="selectDate(item.date)"
|
||||
>
|
||||
<span
|
||||
class="text-20"
|
||||
class="text-20 text-inverseSurface"
|
||||
:class="{
|
||||
'text-primary': item.date === selectedDate,
|
||||
}"
|
||||
@ -135,7 +135,7 @@ const weekDatesForMarks = computed(() => {
|
||||
</span>
|
||||
|
||||
<span
|
||||
class="text-20 font-bold"
|
||||
class="text-20 font-bold text-inverseSurface"
|
||||
:class="{
|
||||
'text-primary': item.date === selectedDate,
|
||||
}"
|
||||
|
||||
@ -128,7 +128,7 @@ const scrollTop = computed(() => {
|
||||
}"
|
||||
>
|
||||
<span
|
||||
class="relative block text-20rpx translate-y-[-50%] text-[#999999FF] line-height-none text-center"
|
||||
class="relative block text-20rpx translate-y-[-50%] text-inverseSurface line-height-none text-center"
|
||||
:class="{
|
||||
'translate-y-0': inex === 0,
|
||||
}"
|
||||
|
||||
@ -68,7 +68,7 @@ function addThing() {
|
||||
<button class="" @click="addThing">
|
||||
addThing
|
||||
</button>
|
||||
<div class="h-660rpx flex flex-col mx-4 bg-primary-100 rounded-3 shadow overflow-clip ">
|
||||
<div class="h-660rpx flex flex-col mx-4 bg-primaryContainer rounded-3 shadow overflow-clip ">
|
||||
<week-gant-view v-model:value="value" v-model:things="things" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { AppTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { ThemeAssemble, convertPaletteToCSSVariables, convertSchemeToCSSVariables } from '../helper/themes';
|
||||
import { THEME_MODEL } from '@/enums/UI';
|
||||
import { generateTheme } from '@ontos/material-design-3-theme-builder/src/index';
|
||||
import { convertPaletteToCSSVariables, convertSchemeToCSSVariables, ThemeAssemble } from '../helper/themes';
|
||||
|
||||
type ThemeModelKey = keyof typeof THEME_MODEL;
|
||||
type AppThemeKey = keyof typeof ThemeAssemble;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user