diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..a53f245 Binary files /dev/null and b/.DS_Store differ diff --git a/package.json b/package.json index 1ce2ea7..663a589 100644 --- a/package.json +++ b/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", diff --git a/packages/.DS_Store b/packages/.DS_Store new file mode 100644 index 0000000..5b80004 Binary files /dev/null and b/packages/.DS_Store differ diff --git a/packages/materialDesign3ThemeBuilder/.gitignore b/packages/materialDesign3ThemeBuilder/.gitignore new file mode 100644 index 0000000..e64a333 --- /dev/null +++ b/packages/materialDesign3ThemeBuilder/.gitignore @@ -0,0 +1,4 @@ + +/node_modules +/dist +.DS_Store diff --git a/packages/materialDesign3ThemeBuilder/LICENSE b/packages/materialDesign3ThemeBuilder/LICENSE new file mode 100644 index 0000000..aa74123 --- /dev/null +++ b/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. diff --git a/packages/materialDesign3ThemeBuilder/README.md b/packages/materialDesign3ThemeBuilder/README.md new file mode 100644 index 0000000..f1cf9b4 --- /dev/null +++ b/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); +``` diff --git a/packages/materialDesign3ThemeBuilder/package.json b/packages/materialDesign3ThemeBuilder/package.json new file mode 100644 index 0000000..d8d3371 --- /dev/null +++ b/packages/materialDesign3ThemeBuilder/package.json @@ -0,0 +1,27 @@ +{ + "name": "@ontos/material-design-3-theme-builder", + "type": "module", + "version": "1.0.8", + "author": "David Sa ", + "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" + } +} diff --git a/packages/materialDesign3ThemeBuilder/src/generateTheme.ts b/packages/materialDesign3ThemeBuilder/src/generateTheme.ts new file mode 100644 index 0000000..fd515cd --- /dev/null +++ b/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, + }; +} diff --git a/packages/materialDesign3ThemeBuilder/src/index.ts b/packages/materialDesign3ThemeBuilder/src/index.ts new file mode 100644 index 0000000..1e4bef2 --- /dev/null +++ b/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 }; diff --git a/packages/materialDesign3ThemeBuilder/src/theme.types.ts b/packages/materialDesign3ThemeBuilder/src/theme.types.ts new file mode 100644 index 0000000..074b9fc --- /dev/null +++ b/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 +} diff --git a/packages/materialDesign3ThemeBuilder/themeDemo.js b/packages/materialDesign3ThemeBuilder/themeDemo.js new file mode 100644 index 0000000..4a53f66 --- /dev/null +++ b/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' } }; diff --git a/packages/materialDesign3ThemeBuilder/tsconfig.json b/packages/materialDesign3ThemeBuilder/tsconfig.json new file mode 100644 index 0000000..cbbf251 --- /dev/null +++ b/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"] +} diff --git a/packages/materialDesign3ThemeBuilder/tsup.config.ts b/packages/materialDesign3ThemeBuilder/tsup.config.ts new file mode 100644 index 0000000..f424baa --- /dev/null +++ b/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, +}); diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000..dee51e9 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +packages: + - "packages/*" diff --git a/src/pages/splashScreen/index.vue b/src/pages/splashScreen/index.vue index a76fd69..6710588 100644 --- a/src/pages/splashScreen/index.vue +++ b/src/pages/splashScreen/index.vue @@ -16,9 +16,20 @@ Use To: 启动页面 -->