M3

package.json

@@ -60,6 +60,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4020620240822002",
     "@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4020620240822002",
     "@multiavatar/multiavatar": "^1.0.7",
+    "@ontos/material-design-3-theme-builder": "workspace:*",
     "alova": "^3.0.11",
     "crypto-js": "^4.2.0",
     "lodash-es": "^4.17.21",

packages/materialDesign3ThemeBuilder/.gitignore

@@ -0,0 +1,4 @@
+
+/node_modules
+/dist
+.DS_Store

packages/materialDesign3ThemeBuilder/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 David Sa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/materialDesign3ThemeBuilder/README.md

@@ -0,0 +1,34 @@
+# Material Design 3 Theme Builder
+
+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)
+
+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';
+
+/**
+ * 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);
+```

packages/materialDesign3ThemeBuilder/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@ontos/material-design-3-theme-builder",
+  "type": "module",
+  "version": "1.0.8",
+  "author": "David Sa <davidsa03@gmail.com>",
+  "repository": "https://github.com/davidsa03/material-design-3-theme-builder.git",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "release": "standard-version",
+    "release:minor": "standard-version --release-as minor",
+    "release:major": "standard-version --release-as major"
+  },
+  "dependencies": {
+    "@material/material-color-utilities": "0.2.7"
+  },
+  "devDependencies": {
+    "standard-version": "^9.5.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3"
+  }
+}

packages/materialDesign3ThemeBuilder/src/generateTheme.ts

@@ -0,0 +1,374 @@
+import {
+  TonalPalette,
+  argbFromHex,
+  hexFromArgb,
+} from '@material/material-color-utilities';
+import type { MD3ColorSchemeTokens, MD3Palettes } from './theme.types';
+
+/**
+ * Generates a theme based on the provided color values.
+ *
+ * @param {object} options - The color options for the theme. - 主题的颜色选项。
+ * @param {string} options.primary - The primary color. - 主色。
+ * @param {string} options.secondary - The secondary color. - 次要颜色。
+ * @param {string} options.tertiary - The tertiary color. - 第三色。
+ * @param {string} options.error - The error color. - 错误颜色。
+ * @param {string} options.neutral - The neutral color. - 中性颜色。
+ * @param {string} options.neutralVariant - The variant of the neutral color. - 中性颜色的变体。
+ *
+ * @returns {object} - The generated theme object. - 生成的主题对象。
+ * @property {MD3Palettes} palette - The color palette of the theme. - 主题的颜色调色板。
+ *   The palette includes primary, secondary, and other colors used throughout the theme. - 调色板包括主要的、次要的和主题中使用的其他颜色。
+ *   @property {MD3Tones} palette.primary - The primary color tones. - 主色调。
+ *   @property {MD3Tones} palette.secondary - The secondary color tones. - 次要颜色调。
+ *   @property {MD3Tones} palette.tertiary - The tertiary color tones. - 第三色调。
+ *   @property {MD3NeutralTones} palette.neutral - The neutral color tones. - 中性颜色调。
+ *   @property {MD3Tones} palette.neutralVariant - The neutral variant color tones. - 中性变体颜色调。
+ *   @property {MD3Tones} palette.error - The error color tones. - 错误颜色调。
+ *   @property {MD3Tones} [palette.info] - The info color tones. - 信息颜色调。
+ *   @property {MD3Tones} [palette.warning] - The warning color tones. - 警告颜色调。
+ *   @property {MD3Tones} [palette.success] - The success color tones. - 成功颜色调。
+ *   @property {object} [palette.common] - Common colors. - 常见颜色。
+ *     @property {string} palette.common.black - The black color. - 黑色。
+ *     @property {string} palette.common.white - The white color. - 白色。
+ * @property {MD3ColorSchemeTokens} lightScheme - The color scheme for light mode. - 亮色模式的颜色方案。
+ *   The light scheme defines the colors used when the theme is in light mode. - 亮色模式定义了主题在亮色模式下使用的颜色。
+ *   @property {string} lightScheme.primary - The primary color used in light mode. - 亮色模式下使用的主色。
+ *   @property {string} lightScheme.onPrimary - The color used for text and icons on top of the primary color. - 用于主色上的文本和图标的颜色。
+ *   @property {string} lightScheme.primaryContainer - The primary container color used in light mode. - 亮色模式下使用的主容器颜色。
+ *   @property {string} lightScheme.onPrimaryContainer - The color used for text and icons on top of the primary container color. - 用于主容器颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.secondary - The secondary color used in light mode. - 亮色模式下使用的次要颜色。
+ *   @property {string} lightScheme.onSecondary - The color used for text and icons on top of the secondary color. - 用于次要颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.secondaryContainer - The secondary container color used in light mode. - 亮色模式下使用的次要容器颜色。
+ *   @property {string} lightScheme.onSecondaryContainer - The color used for text and icons on top of the secondary container color. - 用于次要容器颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.tertiary - The tertiary color used in light mode. - 亮色模式下使用的第三色。
+ *   @property {string} lightScheme.onTertiary - The color used for text and icons on top of the tertiary color. - 用于第三色上的文本和图标的颜色。
+ *   @property {string} lightScheme.tertiaryContainer - The tertiary container color used in light mode. - 亮色模式下使用的第三色容器颜色。
+ *   @property {string} lightScheme.onTertiaryContainer - The color used for text and icons on top of the tertiary container color. - 用于第三色容器颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.error - The error color used in light mode. - 亮色模式下使用的错误颜色。
+ *   @property {string} lightScheme.onError - The color used for text and icons on top of the error color. - 用于错误颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.errorContainer - The error container color used in light mode. - 亮色模式下使用的错误容器颜色。
+ *   @property {string} lightScheme.onErrorContainer - The color used for text and icons on top of the error container color. - 用于错误容器颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.info] - The info color used in light mode. - 亮色模式下使用的信息颜色。
+ *   @property {string} [lightScheme.onInfo] - The color used for text and icons on top of the info color. - 用于信息颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.infoContainer] - The info container color used in light mode. - 亮色模式下使用的信息容器颜色。
+ *   @property {string} [lightScheme.onInfoContainer] - The color used for text and icons on top of the info container color. - 用于信息容器颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.warning] - The warning color used in light mode. - 亮色模式下使用的警告颜色。
+ *   @property {string} [lightScheme.onWarning] - The color used for text and icons on top of the warning color. - 用于警告颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.warningContainer] - The warning container color used in light mode. - 亮色模式下使用的警告容器颜色。
+ *   @property {string} [lightScheme.onWarningContainer] - The color used for text and icons on top of the warning container color. - 用于警告容器颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.success] - The success color used in light mode. - 亮色模式下使用的成功颜色。
+ *   @property {string} [lightScheme.onSuccess] - The color used for text and icons on top of the success color. - 用于成功颜色上的文本和图标的颜色。
+ *   @property {string} [lightScheme.successContainer] - The success container color used in light mode. - 亮色模式下使用的成功容器颜色。
+ *   @property {string} [lightScheme.onSuccessContainer] - The color used for text and icons on top of the success container color. - 用于成功容器颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.background - The background color used in light mode. - 亮色模式下使用的背景颜色。
+ *   @property {string} lightScheme.onBackground - The color used for text and icons on top of the background color. - 用于背景颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.surface - The surface color used in light mode. - 亮色模式下使用的表面颜色。
+ *   @property {string} lightScheme.onSurface - The color used for text and icons on top of the surface color. - 用于表面颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.surfaceVariant - The surface variant color used in light mode. - 亮色模式下使用的表面变体颜色。
+ *   @property {string} lightScheme.onSurfaceVariant - The color used for text and icons on top of the surface variant color. - 用于表面变体颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.surfaceContainerLowest - The lowest surface container color used in light mode. - 亮色模式下使用的最低表面容器颜色。
+ *   @property {string} lightScheme.surfaceContainerLow - The low surface container color used in light mode. - 亮色模式下使用的低表面容器颜色。
+ *   @property {string} lightScheme.surfaceContainer - The surface container color used in light mode. - 亮色模式下使用的表面容器颜色。
+ *   @property {string} lightScheme.surfaceContainerHigh - The high surface container color used in light mode. - 亮色模式下使用的高表面容器颜色。
+ *   @property {string} lightScheme.surfaceContainerHighest - The highest surface container color used in light mode. - 亮色模式下使用的最高表面容器颜色。
+ *   @property {string} lightScheme.inverseSurface - The inverse surface color used in light mode. - 亮色模式下使用的反色表面颜色。
+ *   @property {string} lightScheme.inverseOnSurface - The color used for text and icons on top of the inverse surface color. - 用于反色表面颜色上的文本和图标的颜色。
+ *   @property {string} lightScheme.inversePrimary - The inverse primary color used in light mode. - 亮色模式下使用的反色主色。
+ *   @property {string} lightScheme.surfaceTint - The surface tint color used in light mode. - 亮色模式下使用的表面色调。
+ *   @property {string} lightScheme.outline - The outline color used in light mode. - 亮色模式下使用的轮廓颜色。
+ *   @property {string} lightScheme.outlineVariant - The outline variant color used in light mode. - 亮色模式下使用的轮廓变体颜色。
+ *   @property {string} lightScheme.shadow - The shadow color used in light mode. - 亮色模式下使用的阴影颜色。
+ * @property {MD3ColorSchemeTokens} darkScheme - The color scheme for dark mode. - 暗色模式的颜色方案。
+ *   The dark scheme defines the colors used when the theme is in dark mode. - 暗色模式定义了主题在暗色模式下使用的颜色。
+ *   @property {string} darkScheme.primary - The primary color used in dark mode. - 暗色模式下使用的主色。
+ *   @property {string} darkScheme.onPrimary - The color used for text and icons on top of the primary color. - 用于主色上的文本和图标的颜色。
+ *   @property {string} darkScheme.primaryContainer - The primary container color used in dark mode. - 暗色模式下使用的主容器颜色。
+ *   @property {string} darkScheme.onPrimaryContainer - The color used for text and icons on top of the primary container color. - 用于主容器颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.secondary - The secondary color used in dark mode. - 暗色模式下使用的次要颜色。
+ *   @property {string} darkScheme.onSecondary - The color used for text and icons on top of the secondary color. - 用于次要颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.secondaryContainer - The secondary container color used in dark mode. - 暗色模式下使用的次要容器颜色。
+ *   @property {string} darkScheme.onSecondaryContainer - The color used for text and icons on top of the secondary container color. - 用于次要容器颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.tertiary - The tertiary color used in dark mode. - 暗色模式下使用的第三色。
+ *   @property {string} darkScheme.onTertiary - The color used for text and icons on top of the tertiary color. - 用于第三色上的文本和图标的颜色。
+ *   @property {string} darkScheme.tertiaryContainer - The tertiary container color used in dark mode. - 暗色模式下使用的第三色容器颜色。
+ *   @property {string} darkScheme.onTertiaryContainer - The color used for text and icons on top of the tertiary container color. - 用于第三色容器颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.error - The error color used in dark mode. - 暗色模式下使用的错误颜色。
+ *   @property {string} darkScheme.onError - The color used for text and icons on top of the error color. - 用于错误颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.errorContainer - The error container color used in dark mode. - 暗色模式下使用的错误容器颜色。
+ *   @property {string} darkScheme.onErrorContainer - The color used for text and icons on top of the error container color. - 用于错误容器颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.info] - The info color used in dark mode. - 暗色模式下使用的信息颜色。
+ *   @property {string} [darkScheme.onInfo] - The color used for text and icons on top of the info color. - 用于信息颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.infoContainer] - The info container color used in dark mode. - 暗色模式下使用的信息容器颜色。
+ *   @property {string} [darkScheme.onInfoContainer] - The color used for text and icons on top of the info container color. - 用于信息容器颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.warning] - The warning color used in dark mode. - 暗色模式下使用的警告颜色。
+ *   @property {string} [darkScheme.onWarning] - The color used for text and icons on top of the warning color. - 用于警告颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.warningContainer] - The warning container color used in dark mode. - 暗色模式下使用的警告容器颜色。
+ *   @property {string} [darkScheme.onWarningContainer] - The color used for text and icons on top of the warning container color. - 用于警告容器颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.success] - The success color used in dark mode. - 暗色模式下使用的成功颜色。
+ *   @property {string} [darkScheme.onSuccess] - The color used for text and icons on top of the success color. - 用于成功颜色上的文本和图标的颜色。
+ *   @property {string} [darkScheme.successContainer] - The success container color used in dark mode. - 暗色模式下使用的成功容器颜色。
+ *   @property {string} [darkScheme.onSuccessContainer] - The color used for text and icons on top of the success container color. - 用于成功容器颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.background - The background color used in dark mode. - 暗色模式下使用的背景颜色。
+ *   @property {string} darkScheme.onBackground - The color used for text and icons on top of the background color. - 用于背景颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.surface - The surface color used in dark mode. - 暗色模式下使用的表面颜色。
+ *   @property {string} darkScheme.onSurface - The color used for text and icons on top of the surface color. - 用于表面颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.surfaceVariant - The surface variant color used in dark mode. - 暗色模式下使用的表面变体颜色。
+ *   @property {string} darkScheme.onSurfaceVariant - The color used for text and icons on top of the surface variant color. - 用于表面变体颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.surfaceContainerLowest - The lowest surface container color used in dark mode. - 暗色模式下使用的最低表面容器颜色。
+ *   @property {string} darkScheme.surfaceContainerLow - The low surface container color used in dark mode. - 暗色模式下使用的低表面容器颜色。
+ *   @property {string} darkScheme.surfaceContainer - The surface container color used in dark mode. - 暗色模式下使用的表面容器颜色。
+ *   @property {string} darkScheme.surfaceContainerHigh - The high surface container color used in dark mode. - 暗色模式下使用的高表面容器颜色。
+ *   @property {string} darkScheme.surfaceContainerHighest - The highest surface container color used in dark mode. - 暗色模式下使用的最高表面容器颜色。
+ *   @property {string} darkScheme.inverseSurface - The inverse surface color used in dark mode. - 暗色模式下使用的反色表面颜色。
+ *   @property {string} darkScheme.inverseOnSurface - The color used for text and icons on top of the inverse surface color. - 用于反色表面颜色上的文本和图标的颜色。
+ *   @property {string} darkScheme.inversePrimary - The inverse primary color used in dark mode. - 暗色模式下使用的反色主色。
+ *   @property {string} darkScheme.surfaceTint - The surface tint color used in dark mode. - 暗色模式下使用的表面色调。
+ *   @property {string} darkScheme.outline - The outline color used in dark mode. - 暗色模式下使用的轮廓颜色。
+ *   @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,
+  neutral,
+  neutralVariant,
+}: {
+  primary: string
+  secondary: string
+  tertiary: string
+  error: string
+  neutral: string
+  neutralVariant: string
+}): {
+    palette: MD3Palettes
+    lightScheme: MD3ColorSchemeTokens
+    darkScheme: MD3ColorSchemeTokens
+  } {
+  const primaryTonal = TonalPalette.fromInt(argbFromHex(primary));
+  const secondaryTonal = TonalPalette.fromInt(argbFromHex(secondary));
+  const tertiaryTonal = TonalPalette.fromInt(argbFromHex(tertiary));
+  const errorTonal = TonalPalette.fromInt(argbFromHex(error));
+  const neutralTonal = TonalPalette.fromInt(argbFromHex(neutral));
+  const neutralVariantTonal = TonalPalette.fromInt(argbFromHex(neutralVariant));
+
+  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)),
+    },
+  };
+
+  const lightScheme: MD3ColorSchemeTokens = {
+
+    // 缺少 : info warning success
+
+    // primary
+    primary: palette.primary[40],
+    onPrimary: palette.primary[100],
+    primaryContainer: palette.primary[90],
+    onPrimaryContainer: palette.primary[10],
+
+    // secondary
+    secondary: palette.secondary[40],
+    onSecondary: palette.secondary[100],
+    secondaryContainer: palette.secondary[90],
+    onSecondaryContainer: palette.secondary[10],
+
+    // tertiary
+    tertiary: palette.tertiary[40],
+    onTertiary: palette.tertiary[100],
+    tertiaryContainer: palette.tertiary[90],
+    onTertiaryContainer: palette.tertiary[10],
+
+    // error
+    error: palette.error[40],
+    onError: palette.error[100],
+    errorContainer: palette.error[90],
+    onErrorContainer: palette.error[10],
+
+    // surface
+    surface: palette.neutral[98],
+    onSurface: palette.neutral[10],
+    surfaceVariant: palette.neutralVariant[90],
+    onSurfaceVariant: palette.neutralVariant[30],
+    surfaceContainerLowest: palette.neutral[100],
+    surfaceContainerLow: palette.neutral[96],
+    surfaceContainer: palette.neutral[94],
+    surfaceContainerHigh: palette.neutral[92],
+    surfaceContainerHighest: palette.neutral[90],
+    surfaceTint: palette.primary[40],
+
+    // outline
+    outline: palette.neutralVariant[50],
+    outlineVariant: palette.neutralVariant[80],
+
+    shadow: palette.neutral[0],
+
+    // background
+    background: palette.neutral[98],
+    onBackground: palette.neutral[10],
+
+    // inverse
+    inversePrimary: palette.primary[80],
+    inverseSurface: palette.neutral[20],
+    inverseOnSurface: palette.neutral[95],
+  };
+
+  const darkScheme: MD3ColorSchemeTokens = {
+    // primary
+    primary: palette.primary[80],
+    onPrimary: palette.primary[20],
+    primaryContainer: palette.primary[30],
+    onPrimaryContainer: palette.primary[90],
+
+    // secondary
+    secondary: palette.secondary[80],
+    onSecondary: palette.secondary[20],
+    secondaryContainer: palette.secondary[30],
+    onSecondaryContainer: palette.secondary[90],
+
+    // tertiary
+    tertiary: palette.tertiary[80],
+    onTertiary: palette.tertiary[20],
+    tertiaryContainer: palette.tertiary[30],
+    onTertiaryContainer: palette.tertiary[90],
+
+    // error
+    error: palette.error[80],
+    onError: palette.error[20],
+    errorContainer: palette.error[30],
+    onErrorContainer: palette.error[90],
+
+    // surface
+    surface: palette.neutral[6],
+    onSurface: palette.neutral[90],
+    surfaceVariant: palette.neutralVariant[30],
+    onSurfaceVariant: palette.neutralVariant[80],
+    surfaceContainerLowest: palette.neutral[4],
+    surfaceContainerLow: palette.neutral[10],
+    surfaceContainer: palette.neutral[12],
+    surfaceContainerHigh: palette.neutral[17],
+    surfaceContainerHighest: palette.neutral[24],
+    surfaceTint: palette.primary[80],
+
+    // outline
+    outline: palette.neutralVariant[60],
+    outlineVariant: palette.neutralVariant[30],
+
+    shadow: palette.neutral[0],
+
+    // background
+    background: palette.neutral[6],
+    onBackground: palette.neutral[90],
+
+    // inverse
+    inversePrimary: palette.primary[40],
+    inverseSurface: palette.neutral[90],
+    inverseOnSurface: palette.neutral[20],
+  };
+
+  return {
+    palette,
+    lightScheme,
+    darkScheme,
+  };
+}

packages/materialDesign3ThemeBuilder/src/index.ts

@@ -0,0 +1,10 @@
+import { generateTheme } from './generateTheme';
+import type {
+  MD3ColorSchemeTokens,
+  MD3NeutralTones,
+  MD3Palettes,
+  MD3Tones,
+} from './theme.types';
+
+export { generateTheme };
+export type { MD3Tones, MD3NeutralTones, MD3Palettes, MD3ColorSchemeTokens };

packages/materialDesign3ThemeBuilder/src/theme.types.ts

@@ -0,0 +1,115 @@
+/**
+ * Represents the MD3Tones interface.
+ */
+export interface MD3Tones {
+  0: string
+  10: string
+  20: string
+  30: string
+  40: string
+  50: string
+  60: string
+  70: string
+  80: string
+  90: string
+  95: string
+  99: string
+  100: string
+}
+
+/**
+ * Represents the interface for MD3NeutralTones.
+ */
+export interface MD3NeutralTones extends MD3Tones {
+  4: string
+  6: string
+  12: string
+  17: string
+  22: string
+  24: string
+  92: string
+  94: string
+  96: string
+  98: string
+}
+
+/**
+ * Represents the interface for MD3Palettes.
+ */
+export interface MD3Palettes {
+  primary: MD3Tones
+  secondary: MD3Tones
+  tertiary: MD3Tones
+  neutral: MD3NeutralTones
+  neutralVariant: MD3Tones
+  error: MD3Tones
+  info?: MD3Tones
+  warning?: MD3Tones
+  success?: MD3Tones
+  common?: {
+    black: string
+    white: string
+  }
+}
+
+/**
+ * Represents the color scheme tokens for the MD3 theme.
+ */
+export interface MD3ColorSchemeTokens {
+  primary: string
+  onPrimary: string
+  primaryContainer: string
+  onPrimaryContainer: string
+
+  secondary: string
+  onSecondary: string
+  secondaryContainer: string
+  onSecondaryContainer: string
+
+  tertiary: string
+  onTertiary: string
+  tertiaryContainer: string
+  onTertiaryContainer: string
+
+  error: string
+  onError: string
+  errorContainer: string
+  onErrorContainer: string
+
+  info?: string
+  onInfo?: string
+  infoContainer?: string
+  onInfoContainer?: string
+
+  warning?: string
+  onWarning?: string
+  warningContainer?: string
+  onWarningContainer?: string
+
+  success?: string
+  onSuccess?: string
+  successContainer?: string
+  onSuccessContainer?: string
+
+  background: string
+  onBackground: string
+
+  surface: string
+  onSurface: string
+  surfaceVariant: string
+  onSurfaceVariant: string
+  surfaceContainerLowest: string
+  surfaceContainerLow: string
+  surfaceContainer: string
+  surfaceContainerHigh: string
+  surfaceContainerHighest: string
+
+  inverseSurface: string
+  inverseOnSurface: string
+  inversePrimary: string
+  surfaceTint: string
+
+  outline: string
+  outlineVariant: string
+  shadow: string
+}

packages/materialDesign3ThemeBuilder/themeDemo.js

@@ -0,0 +1,98 @@
+/**
+ * Represents a color palette configuration.
+ * @typedef {object} PaletteConfig
+ * @property {object} primary - The primary color palette.
+ * @property {object} secondary - The secondary color palette.
+ * @property {object} tertiary - The tertiary color palette.
+ * @property {object} error - The error color palette.
+ * @property {object} neutral - The neutral color palette.
+ * @property {object} neutralVariant - The neutral variant color palette.
+ */
+
+/**
+ * Represents a light scheme configuration.
+ * @typedef {object} LightSchemeConfig
+ * @property {string} primary - The primary color for the light scheme.
+ * @property {string} onPrimary - The text color on the primary color for the light scheme.
+ * @property {string} primaryContainer - The container color for the primary color in the light scheme.
+ * @property {string} onPrimaryContainer - The text color on the container color for the primary color in the light scheme.
+ * @property {string} secondary - The secondary color for the light scheme.
+ * @property {string} onSecondary - The text color on the secondary color for the light scheme.
+ * @property {string} secondaryContainer - The container color for the secondary color in the light scheme.
+ * @property {string} onSecondaryContainer - The text color on the container color for the secondary color in the light scheme.
+ * @property {string} tertiary - The tertiary color for the light scheme.
+ * @property {string} onTertiary - The text color on the tertiary color for the light scheme.
+ * @property {string} tertiaryContainer - The container color for the tertiary color in the light scheme.
+ * @property {string} onTertiaryContainer - The text color on the container color for the tertiary color in the light scheme.
+ * @property {string} error - The error color for the light scheme.
+ * @property {string} onError - The text color on the error color for the light scheme.
+ * @property {string} errorContainer - The container color for the error color in the light scheme.
+ * @property {string} onErrorContainer - The text color on the container color for the error color in the light scheme.
+ * @property {string} surface - The surface color for the light scheme.
+ * @property {string} onSurface - The text color on the surface color for the light scheme.
+ * @property {string} surfaceVariant - The variant surface color for the light scheme.
+ * @property {string} onSurfaceVariant - The text color on the variant surface color for the light scheme.
+ * @property {string} surfaceContainerLowest - The lowest container color for the surface color in the light scheme.
+ * @property {string} surfaceContainerLow - The low container color for the surface color in the light scheme.
+ * @property {string} surfaceContainer - The container color for the surface color in the light scheme.
+ * @property {string} surfaceContainerHigh - The high container color for the surface color in the light scheme.
+ * @property {string} surfaceContainerHighest - The highest container color for the surface color in the light scheme.
+ * @property {string} surfaceTint - The tint color for the surface color in the light scheme.
+ * @property {string} outline - The outline color for the light scheme.
+ * @property {string} outlineVariant - The variant outline color for the light scheme.
+ * @property {string} shadow - The shadow color for the light scheme.
+ * @property {string} background - The background color for the light scheme.
+ * @property {string} onBackground - The text color on the background color for the light scheme.
+ * @property {string} inversePrimary - The inverse primary color for the light scheme.
+ * @property {string} inverseSurface - The inverse surface color for the light scheme.
+ * @property {string} inverseOnSurface - The text color on the inverse surface color for the light scheme.
+ */
+
+/**
+ * Represents a dark scheme configuration.
+ * @typedef {object} DarkSchemeConfig
+ * @property {string} primary - The primary color for the dark scheme.
+ * @property {string} onPrimary - The text color on the primary color for the dark scheme.
+ * @property {string} primaryContainer - The container color for the primary color in the dark scheme.
+ * @property {string} onPrimaryContainer - The text color on the container color for the primary color in the dark scheme.
+ * @property {string} secondary - The secondary color for the dark scheme.
+ * @property {string} onSecondary - The text color on the secondary color for the dark scheme.
+ * @property {string} secondaryContainer - The container color for the secondary color in the dark scheme.
+ * @property {string} onSecondaryContainer - The text color on the container color for the secondary color in the dark scheme.
+ * @property {string} tertiary - The tertiary color for the dark scheme.
+ * @property {string} onTertiary - The text color on the tertiary color for the dark scheme.
+ * @property {string} tertiaryContainer - The container color for the tertiary color in the dark scheme.
+ * @property {string} onTertiaryContainer - The text color on the container color for the tertiary color in the dark scheme.
+ * @property {string} error - The error color for the dark scheme.
+ * @property {string} onError - The text color on the error color for the dark scheme.
+ * @property {string} errorContainer - The container color for the error color in the dark scheme.
+ * @property {string} onErrorContainer - The text color on the container color for the error color in the dark scheme.
+ * @property {string} surface - The surface color for the dark scheme.
+ * @property {string} onSurface - The text color on the surface color for the dark scheme.
+ * @property {string} surfaceVariant - The variant surface color for the dark scheme.
+ * @property {string} onSurfaceVariant - The text color on the variant surface color for the dark scheme.
+ * @property {string} surfaceContainerLowest - The lowest container color for the surface color in the dark scheme.
+ * @property {string} surfaceContainerLow - The low container color for the surface color in the dark scheme.
+ * @property {string} surfaceContainer - The container color for the surface color in the dark scheme.
+ * @property {string} surfaceContainerHigh - The high container color for the surface color in the dark scheme.
+ * @property {string} surfaceContainerHighest - The highest container color for the surface color in the dark scheme.
+ * @property {string} surfaceTint - The tint color for the surface color in the dark scheme.
+ * @property {string} outline - The outline color for the dark scheme.
+ * @property {string} outlineVariant - The variant outline color for the dark scheme.
+ * @property {string} shadow - The shadow color for the dark scheme.
+ * @property {string} background - The background color for the dark scheme.
+ * @property {string} onBackground - The text color on the background color for the dark scheme.
+ * @property {string} inversePrimary - The inverse primary color for the dark scheme.
+ * @property {string} inverseSurface - The inverse surface color for the dark scheme.
+ * @property {string} inverseOnSurface - The text color on the inverse surface color for the dark scheme.
+ */
+
+/**
+ * Represents a color configuration.
+ * @typedef {object} ColorConfig
+ * @property {PaletteConfig} palette - The color palette configuration.
+ * @property {LightSchemeConfig} lightScheme - The light scheme configuration.
+ * @property {DarkSchemeConfig} darkScheme - The dark scheme configuration.
+ */
+
+export const theme = { palette: { primary: { 0: '#000000', 10: '#22005d', 20: '#3a0093', 30: '#5300cd', 40: '#6d23f9', 50: '#8553ff', 60: '#9d79ff', 70: '#b69cff', 80: '#cfbdff', 90: '#e8ddff', 95: '#f5eeff', 99: '#fffbff', 100: '#ffffff' }, secondary: { 0: '#000000', 10: '#00201c', 20: '#003731', 30: '#005048', 40: '#006a60', 50: '#008679', 60: '#00a293', 70: '#00c0ae', 80: '#17deca', 90: '#4ffbe6', 95: '#b4fff2', 99: '#f2fffb', 100: '#ffffff' }, tertiary: { 0: '#000000', 10: '#00201c', 20: '#003731', 30: '#005048', 40: '#006a60', 50: '#008679', 60: '#00a293', 70: '#00c0ae', 80: '#17deca', 90: '#4ffbe6', 95: '#b4fff2', 99: '#f2fffb', 100: '#ffffff' }, error: { 0: '#000000', 10: '#410006', 20: '#68000f', 30: '#930019', 40: '#bc1127', 50: '#e0313c', 60: '#ff5357', 70: '#ff8985', 80: '#ffb3af', 90: '#ffdad8', 95: '#ffedeb', 99: '#fffbff', 100: '#ffffff' }, neutral: { 0: '#000000', 4: '#0e0e0e', 6: '#131313', 10: '#1b1b1b', 12: '#1f1f1f', 17: '#2a2a2a', 20: '#303030', 22: '#353535', 24: '#393939', 30: '#474747', 40: '#5e5e5e', 50: '#777777', 60: '#919191', 70: '#ababab', 80: '#c6c6c6', 90: '#e2e2e2', 92: '#e8e8e8', 94: '#eeeeee', 95: '#f1f1f1', 96: '#f3f3f3', 98: '#f9f9f9', 99: '#fcfcfc', 100: '#ffffff' }, neutralVariant: { 0: '#000000', 10: '#1a1c1c', 20: '#2f3131', 30: '#454747', 40: '#5d5f5f', 50: '#767777', 60: '#909191', 70: '#aaabab', 80: '#c6c6c7', 90: '#e2e2e2', 95: '#f0f1f1', 99: '#fcfcfc', 100: '#ffffff' } }, lightScheme: { primary: '#6d23f9', onPrimary: '#ffffff', primaryContainer: '#e8ddff', onPrimaryContainer: '#22005d', secondary: '#006a60', onSecondary: '#ffffff', secondaryContainer: '#4ffbe6', onSecondaryContainer: '#00201c', tertiary: '#006a60', onTertiary: '#ffffff', tertiaryContainer: '#4ffbe6', onTertiaryContainer: '#00201c', error: '#bc1127', onError: '#ffffff', errorContainer: '#ffdad8', onErrorContainer: '#410006', surface: '#f9f9f9', onSurface: '#1b1b1b', surfaceVariant: '#e2e2e2', onSurfaceVariant: '#454747', surfaceContainerLowest: '#ffffff', surfaceContainerLow: '#f3f3f3', surfaceContainer: '#eeeeee', surfaceContainerHigh: '#e8e8e8', surfaceContainerHighest: '#e2e2e2', surfaceTint: '#6d23f9', outline: '#767777', outlineVariant: '#c6c6c7', shadow: '#000000', background: '#f9f9f9', onBackground: '#1b1b1b', inversePrimary: '#cfbdff', inverseSurface: '#303030', inverseOnSurface: '#f1f1f1' }, darkScheme: { primary: '#cfbdff', onPrimary: '#3a0093', primaryContainer: '#5300cd', onPrimaryContainer: '#e8ddff', secondary: '#17deca', onSecondary: '#003731', secondaryContainer: '#005048', onSecondaryContainer: '#4ffbe6', tertiary: '#17deca', onTertiary: '#003731', tertiaryContainer: '#005048', onTertiaryContainer: '#4ffbe6', error: '#ffb3af', onError: '#68000f', errorContainer: '#930019', onErrorContainer: '#ffdad8', surface: '#131313', onSurface: '#e2e2e2', surfaceVariant: '#454747', onSurfaceVariant: '#c6c6c7', surfaceContainerLowest: '#0e0e0e', surfaceContainerLow: '#1b1b1b', surfaceContainer: '#1f1f1f', surfaceContainerHigh: '#2a2a2a', surfaceContainerHighest: '#393939', surfaceTint: '#cfbdff', outline: '#909191', outlineVariant: '#454747', shadow: '#000000', background: '#131313', onBackground: '#e2e2e2', inversePrimary: '#6d23f9', inverseSurface: '#e2e2e2', inverseOnSurface: '#303030' } };

packages/materialDesign3ThemeBuilder/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "strict": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/*.ts"],
+  "exclude": ["node_modules"]
+}

packages/materialDesign3ThemeBuilder/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+});

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - "packages/*"

src/pages/splashScreen/index.vue

@@ -16,9 +16,20 @@
   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();

src/theme/theme.ts

@@ -186,7 +186,7 @@ export function buildTheme() {
 
   const _theme: any = {
     extend: {
-      spacing,
+      // spacing,
     },
   };