arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor(module)!: implement design system with CSS variables (#2298)

Browse Source
This commit is contained in:
Benjamin Canac
2024-10-07 14:48:02 +02:00
committed by GitHub
parent 3cf5535b2f
commit 9368c6a639
279 changed files with 6533 additions and 6994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
docs/app/plugins/colors.ts
View File

@@ -4,15 +4,15 @@ export default defineNuxtPlugin({
const appConfig = useAppConfig()
if (import.meta.client) {
const primary = window.localStorage.getItem('nuxt-ui-primary')
if (primary) {
appConfig.ui.colors.primary = primary
function updateColor(type: 'primary' | 'neutral') {
const color = localStorage.getItem(`nuxt-ui-${type}`)
if (color) {
appConfig.ui.colors[type] = color
}
}
const gray = window.localStorage.getItem('nuxt-ui-gray')
if (gray) {
appConfig.ui.colors.gray = gray
}
updateColor('primary')
updateColor('neutral')
}
if (import.meta.server) {
@@ -23,13 +23,21 @@ export default defineNuxtPlugin({
let html = document.querySelector('style#nuxt-ui-colors').innerHTML;
if (localStorage.getItem('nuxt-ui-primary')) {
html = html.replaceAll('${appConfig.ui.colors.primary}', localStorage.getItem('nuxt-ui-primary'))
const primaryColor = localStorage.getItem('nuxt-ui-primary');
html = html.replace(
/(--ui-color-primary-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.primary}-(\\d{2,3}\\))/g,
\`$1--color-\${primaryColor}-$2\`
);
}
if (localStorage.getItem('nuxt-ui-gray')) {
html = html.replaceAll('${appConfig.ui.colors.gray}', localStorage.getItem('nuxt-ui-gray'))
if (localStorage.getItem('nuxt-ui-neutral')) {
const neutralColor = localStorage.getItem('nuxt-ui-neutral');
html = html.replace(
/(--ui-color-neutral-\\d{2,3}:\\s*var\\()--color-${appConfig.ui.colors.neutral}-(\\d{2,3}\\))/g,
\`$1--color-\${neutralColor}-$2\`
);
}
document.querySelector('style#nuxt-ui-colors').innerHTML = html
document.querySelector('style#nuxt-ui-colors').innerHTML = html;
`.replace(/\s+/g, ' '),
type: 'text/javascript',
tagPriority: -1