M3
This commit is contained in:
parent
3930f847bc
commit
11cb159a3a
@ -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",
|
||||
|
||||
BIN
packages/.DS_Store
vendored
Normal file
BIN
packages/.DS_Store
vendored
Normal file
Binary file not shown.
4
packages/materialDesign3ThemeBuilder/.gitignore
vendored
Normal file
4
packages/materialDesign3ThemeBuilder/.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
/node_modules
|
||||
/dist
|
||||
.DS_Store
|
||||
21
packages/materialDesign3ThemeBuilder/LICENSE
Normal file
21
packages/materialDesign3ThemeBuilder/LICENSE
Normal file
@ -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.
|
||||
34
packages/materialDesign3ThemeBuilder/README.md
Normal file
34
packages/materialDesign3ThemeBuilder/README.md
Normal file
@ -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);
|
||||
```
|
||||
27
packages/materialDesign3ThemeBuilder/package.json
Normal file
27
packages/materialDesign3ThemeBuilder/package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
374
packages/materialDesign3ThemeBuilder/src/generateTheme.ts
Normal file
374
packages/materialDesign3ThemeBuilder/src/generateTheme.ts
Normal file
@ -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,
|
||||
};
|
||||
}
|
||||
10
packages/materialDesign3ThemeBuilder/src/index.ts
Normal file
10
packages/materialDesign3ThemeBuilder/src/index.ts
Normal file
@ -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 };
|
||||
115
packages/materialDesign3ThemeBuilder/src/theme.types.ts
Normal file
115
packages/materialDesign3ThemeBuilder/src/theme.types.ts
Normal file
@ -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
|
||||
}
|
||||
98
packages/materialDesign3ThemeBuilder/themeDemo.js
Normal file
98
packages/materialDesign3ThemeBuilder/themeDemo.js
Normal file
@ -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' } };
|
||||
13
packages/materialDesign3ThemeBuilder/tsconfig.json
Normal file
13
packages/materialDesign3ThemeBuilder/tsconfig.json
Normal file
@ -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"]
|
||||
}
|
||||
10
packages/materialDesign3ThemeBuilder/tsup.config.ts
Normal file
10
packages/materialDesign3ThemeBuilder/tsup.config.ts
Normal file
@ -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,
|
||||
});
|
||||
2
pnpm-workspace.yaml
Normal file
2
pnpm-workspace.yaml
Normal file
@ -0,0 +1,2 @@
|
||||
packages:
|
||||
- "packages/*"
|
||||
@ -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();
|
||||
|
||||
@ -186,7 +186,7 @@ export function buildTheme() {
|
||||
|
||||
const _theme: any = {
|
||||
extend: {
|
||||
spacing,
|
||||
// spacing,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
1505
tailwind.config.ts
1505
tailwind.config.ts
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user