From 773fb7b58a957f877168959b04722676c9d4ebfe Mon Sep 17 00:00:00 2001 From: Mingyu He Date: Mon, 13 Nov 2023 13:06:20 +1000 Subject: [PATCH 1/3] fix: 'include' option is deprecated warning --- docs/uno.config.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/uno.config.ts b/docs/uno.config.ts index a0e5131d..01c09a3f 100644 --- a/docs/uno.config.ts +++ b/docs/uno.config.ts @@ -38,5 +38,9 @@ export default defineConfig({ '../packages/preset-theme-default/src/variants.ts', '../packages/preset-theme-default/src/index.ts', ], - include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'], + content: { + pipeline: { + include: [/.*\/anu-vue\.js(.*)?$/, './**/*.vue', './**/*.md'], + }, + }, }) From ed1b217d584306fa9f7400b2f3a92445366e1d41 Mon Sep 17 00:00:00 2001 From: Mingyu He Date: Mon, 13 Nov 2023 11:09:29 +1000 Subject: [PATCH 2/3] fix: hsl() colors broken with unocss 0.57.0 --- docs/.vitepress/theme/style.css | 36 +++++++++---------- docs/components/Api.vue | 2 +- docs/components/Demo.vue | 2 +- docs/components/LinkGrid.vue | 2 +- docs/development/contributing.md | 8 ++++- docs/guide/getting-started/customization.md | 4 +-- docs/package.json | 4 +-- .../anu-vue/src/components/loader/ALoader.vue | 2 +- .../anu-vue/src/components/select/ASelect.vue | 2 +- .../anu-vue/src/components/switch/ASwitch.vue | 2 +- packages/anu-vue/src/composables/useLayer.ts | 16 ++++----- .../src/composables/useTypographyColor.ts | 2 +- packages/anu-vue/src/preset/index.ts | 2 +- packages/anu-vue/src/utils/colord.ts | 8 +++-- .../preset-theme-default/src/scss/index.scss | 2 +- .../preset-theme-default/src/shortcuts.ts | 4 +-- 16 files changed, 53 insertions(+), 45 deletions(-) diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 1a16b907..94fc0071 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -2,7 +2,7 @@ :root { /* Background colors */ - --vp-background: hsl(var(--a-body-bg-c)); + --vp-background: hsla(var(--a-body-bg-c)); --vp-c-bg: var(--vp-background); --vp-c-bg-alt: var(--vp-background); --vp-sidebar-bg-color: var(--vp-background); @@ -15,29 +15,29 @@ --vp-font-family-mono: 'JetBrains Mono', monospace; /* Branding */ - --vp-c-brand-lighter: hsl(var(--a-primary-hue), 97%, 75%); - --vp-c-brand-light: hsl(var(--a-primary-hue), 97%, 70%); - --vp-c-brand: hsl(var(--a-primary-hue), 97%, 66%); - --vp-c-brand-dark: hsl(var(--a-primary-hue), 97%, 60%); - --vp-c-brand-darker: hsl(var(--a-primary-hue), 97%, 55%); + --vp-c-brand-lighter: hsla(var(--a-primary-hue), 97%, 75%); + --vp-c-brand-light: hsla(var(--a-primary-hue), 97%, 70%); + --vp-c-brand: hsla(var(--a-primary-hue), 97%, 66%); + --vp-c-brand-dark: hsla(var(--a-primary-hue), 97%, 60%); + --vp-c-brand-darker: hsla(var(--a-primary-hue), 97%, 55%); /* We need this because menu component has 51 index which overlaps on navbar on scroll */ /* --vp-z-index-nav: 52; */ - --vp-code-scrollbar-thumb-bg: hsl(0, 0%, 40%); + --vp-code-scrollbar-thumb-bg: hsla(0, 0%, 40%); --vp-code-line-height: 1.9; } :root.dark { /* Branding */ --a-primary-hue: 261; - --vp-c-brand-lighter: hsl(var(--a-primary-hue), 73%, 75%); - --vp-c-brand-light: hsl(var(--a-primary-hue), 73%, 70%); - --vp-c-brand: hsl(var(--a-primary-hue), 73%, 66%); - --vp-c-brand-dark: hsl(var(--a-primary-hue), 73%, 60%); - --vp-c-brand-darker: hsl(var(--a-primary-hue), 73%, 55%); + --vp-c-brand-lighter: hsla(var(--a-primary-hue), 73%, 75%); + --vp-c-brand-light: hsla(var(--a-primary-hue), 73%, 70%); + --vp-c-brand: hsla(var(--a-primary-hue), 73%, 66%); + --vp-c-brand-dark: hsla(var(--a-primary-hue), 73%, 60%); + --vp-c-brand-darker: hsla(var(--a-primary-hue), 73%, 55%); - --vp-code-scrollbar-thumb-bg: hsl(0, 0%, 25%); + --vp-code-scrollbar-thumb-bg: hsla(0, 0%, 25%); } /* ========================== @@ -104,7 +104,7 @@ /* Handle */ .VPSidebar::-webkit-scrollbar-thumb { - background: hsl(0, 0%, 90%); + background: hsla(0, 0%, 90%); border-radius: 0.5rem; } @@ -150,11 +150,11 @@ :root.dark { --vp-c-bg-alt: var(--vp-background); - --vp-code-line-highlight-color: hsl(0, 0%, 12%); + --vp-code-line-highlight-color: hsla(0, 0%, 12%); } .dark .VPSidebar::-webkit-scrollbar-thumb { - background: hsl(0, 0%, 10%); + background: hsla(0, 0%, 10%); border-radius: 0.5rem; } @@ -243,11 +243,11 @@ samp { } html:not(.dark) .VPContent.is-home { - background: hsl(var(--a-surface-c)); + background: hsla(var(--a-surface-c)); } html:not(.dark) .VPContent.is-home+.VPFooter { - background: hsl(var(--a-surface-c)); + background: hsla(var(--a-surface-c)); } .VPHome { diff --git a/docs/components/Api.vue b/docs/components/Api.vue index d612f1b2..67220485 100644 --- a/docs/components/Api.vue +++ b/docs/components/Api.vue @@ -82,7 +82,7 @@ onMounted(() => { :key="tab.value" class="capitalize" :class="[!tab.isSelected && 'opacity-50']" - color="hsl(0,0%,50%)" + color="hsla(0,0%,50%)" :variant="tab.isSelected ? 'light' : 'text'" @click="select(tab.value)" > diff --git a/docs/components/Demo.vue b/docs/components/Demo.vue index aeea1d6a..eab77e50 100644 --- a/docs/components/Demo.vue +++ b/docs/components/Demo.vue @@ -5,7 +5,7 @@ const showCode = ref(false)