@aglyn/shared-ui主题
Aglyn套件共享的材料 UI主题层:一个响应性的主题工厂,控制台和站点默认主题,一个使一个站点所存储的主题文件成为有光和暗方案的主题MUI,情感缓存帮助器,以及WCAG对比工具. 它主要是制造者、设计者和其他人的附属物 @aglyn/shared-ui-* 软件包; 公用设施可用于任何MUI应用程序.
从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .
安装
npm install @aglyn/shared-ui-theme
同伴依赖性 : react, (中文(简体) ), @mui/material, (中文(简体) ), @mui/system, (中文(简体) ), @mui/utils, (中文(简体) ), @mui/types 财务报告和审定财务报表 @mui/styles。 。 。 . @emotion/react 财务报告和审定财务报表 @emotion/cache 是正常的依赖关系.
里面有什么东西
从根入:
- 主题工厂.
createResponsiveTheme({ themeOptions, responsiveFontSizesOptions? })运行createTheme,为额外的调色板颜色取出阴影,修理产生的阴影会错过AA对比度,并取出每个调色板颜色的悬浮阴影(Chover,一个被悬浮的 按钮或Fab 占据自己的contrastText,以及hoverText,并应用responsiveFontSizes跨越每一个断点.createResponsiveCssVarTheme(light, dark, options?)将两个主题合并为一个CSS可变主题,按类切换. - MUI模块增强. 导入软件包会用调色板添加这些主题来扩展 MUI 的类型(
tertiary, (中文(简体) ),surface, (中文(简体) ),tint,以及hover编号 :hoverText在每种调色板颜色上,如displayXl和匹配组件color超载 它还再出口一些MUI类型和帮助者(Theme, (中文(简体) ),ThemeOptions, (中文(简体) ),SxProps, (中文(简体) ),darkScrollbar, (中文(简体) ),visuallyHidden) (中文(简体) ). - 默认主题 .
consoleThemeLight编号 :consoleThemeDark编号 :consoleThemeCssVar编号 :getConsoleTheme(mode)财务报告和审定财务报表tenantThemeLight编号 :tenantThemeDark,与他们的ThemeOptions(单位:千美元)consoleOptions, (中文(简体) ),tenantOptions和暗变种.siteFallbackTheme(host, scheme)财务报告和审定财务报表siteBaseOptions(host, scheme)在他们之间选择一个宿主. - 主持人主题. A 类
HostTheme(该类型生活在@aglyn/shared-data-types)是一个网站的主题定制,作为纯数据.hostThemeToThemeOptions(theme, scheme)转换为ThemeOptions· ;sanitizeHostTheme, (中文(简体) ),mergeThemeOptions, (中文(简体) ),hasHostTheme财务报告和审定财务报表getGoogleFontsUrl支持这个计划.HostThemeProvider将孩子置于其中,带走theme, 要求fallback主题或[light, dark]双人,baseOptions,以及initialMode编号 :initialDeviceMode因此服务器渲染器可以在水合之前选择方案. - 自行托管字体.
util/self-hosted-fonts将 Google 字体 CSS2 样式表读入@font-face规则parseGoogleFontFaces),将每个文件写回网站/api/fonts路线 (selfHostedFontFaceCss),并取出一至两张值得预装的相貌(selfHostedFontPreloads) (中文(简体) ). 佃户取来并服务;这半是纯的. - 浅暗模式.
createWithThemeProvider({ theme })返回提供主题和模式状态的更高顺序组件;useThemeMode()阅读并切换。 选择存储在theme-color-mode饼干COOKIE_THEME_KEY) (中文(简体) ). - 情绪.
createEmotionCache, (中文(简体) ),CacheProvider, (中文(简体) ),createLayeredEmotionCache, (中文(简体) ),createWithEmotionClientCache常数EMOTION_CACHE_KEY, (中文(简体) ),APP_EMOTION_CACHE_OPTIONS, (中文(简体) ),MUI_CSS_LAYER_NAME。 。 。 . - 相会相会.
contrastRatio, (中文(简体) ),relativeLuminance, (中文(简体) ),meetsContrast, (中文(简体) ),accessibleShade, (中文(简体) ),accentTextColor, (中文(简体) ),accentFillColor, (中文(简体) ),accentHoverFillColor, (中文(简体) ),accentHoverTextColor, (中文(简体) ),hoverFillShade, (中文(简体) ),inkContrast, (中文(简体) ),auditPaletteContrast,与AA_TEXT_CONTRAST(4.5个)和AA_NON_TEXT_CONTRAST(3) (3). - 小帮手.
mergeSxProps编号 :useMergeSxProps, (中文(简体) ),generateComponentClassKeys, (中文(简体) ),FontFamily, (中文(简体) ),buildFontFamilyList。 。 。 .
仅通过子路径: util/theme-editor-fields 财务报告和审定财务报表 util/theme-editor-defaults (字段词汇和读者/写作员使用的主题编辑器超过 HostTheme, (中文(简体) ), util/theme-mode-cookie, (中文(简体) ), util/color-scheme-hint 财务报告和审定财务报表 util/scheme-route-segment (服务员-旁解决来访者计划).
使用量
import {
contrastRatio,
createResponsiveTheme,
createWithThemeProvider,
} from '@aglyn/shared-ui-theme'
const light = createResponsiveTheme({
themeOptions: { palette: { primary: { main: '#1565c0' } } },
})
const dark = createResponsiveTheme({
themeOptions: { palette: { mode: 'dark', primary: { main: '#90caf9' } } },
})
const withTheme = createWithThemeProvider({ theme: [light, dark] })
export const App = withTheme(function App() {
return <main>Hello</main>
})
contrastRatio('#ffffff', '#1565c0') // a number; 4.5 or more passes AA for text
import { parseThemeModeCookie } from '@aglyn/shared-ui-theme/util/theme-mode-cookie'
怎样才合适
A 类 shared UI软件包. 这取决于 @aglyn/shared-data-types, (中文(简体) ), @aglyn/shared-util-tools 财务报告和审定财务报表 @aglyn/shared-util-vendor。 。 。 . @aglyn/shared-ui-jsx, (中文(简体) ), @aglyn/shared-ui-jsx-forms, (中文(简体) ), @aglyn/shared-ui-next,节点渲染器和相接器在它上再上. 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.
许可证
阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/them 页面存档备份,存于互联网档案馆