更新文档

packages/materialDesign3ThemeBuilder/README.md

@@ -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';
 
-/**
+const theme = generateTheme({
- * The color keys are the keys that will be used to reference the colors in the theme.
+  primary: '#FF6F00',
- * The values are the hex values of the colors.
+  secondary: '#00B0FF',
- */
+  tertiary: '#00C853',
-const colorKeys = {
+  error: '#B00020',
-  primary: '#007680',
+  info: '#304FFE',
-  secondary: '#000000',
+  warning: '#FF9100',
-  tertiary: '#80CDFA',
+  success: '#00C853',
-  error: '#DA291C',
+  neutral: '#000000',
-  neutral: '#DDDDDD',
+  neutralVariant: '#757575',
-  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);
 ```
+
+### 返回值
+
+生成的主题对象包含以下属性：
+
+| 属性名称    | 描述                 |
+| ----------- | -------------------- |
+| 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           | 阴影色                       |

packages/materialDesign3ThemeBuilder/src/generateTheme.ts

@@ -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.

packages/materialDesign3ThemeBuilder/src/index.ts

@@ -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 };

src/components/WeekGantView/GantDate.vue

@@ -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,
             }"

src/components/WeekGantView/GantView.vue

@@ -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,
               }"

src/components/WeekGantView/demo.vue

@@ -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>

src/stores/modules/system.ts

@@ -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;