Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Colors broken with UnoCSS v0.57 #218

Closed
wants to merge 4 commits into from
Closed

fix: Colors broken with UnoCSS v0.57 #218

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b29408d
fix: colors broken with unocss 0.57.0
Nov 9, 2023
f9c3071
fix: ACheckbox icon not shown
Nov 9, 2023
5d433f6
fix: 'include' option is deprecated warning
Nov 9, 2023
bb63512
Merge branch 'jd-solanki:main' into fix-hsl-color-format
hermit99 Nov 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 25 additions & 25 deletions docs/.vitepress/theme/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,36 +8,36 @@
--vp-sidebar-bg-color: var(--vp-background);

/* Text color */
--vp-c-text-1: hsla(var(--a-base-c), var(--a-text-emphasis-medium-opacity));
--vp-c-text-1: hsl(var(--a-base-c) / var(--a-text-emphasis-medium-opacity));

/* Font family */
--vp-font-family-base: 'Inter', sans-serif;
--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: 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%);

/* 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: hsl(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: 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-code-scrollbar-thumb-bg: hsl(0, 0%, 25%);
--vp-code-scrollbar-thumb-bg: hsl(0 0% 25%);
}

/* ==========================
Expand All @@ -51,7 +51,7 @@

@media (min-width: 768px) {
.VPNavBarSearch .DocSearch.DocSearch-Button {
background-color: hsla(var(--a-base-c), 0.045) !important;
background-color: hsl(var(--a-base-c) / 0.045) !important;
}
}

Expand All @@ -61,7 +61,7 @@

/* Add border bottom instead of shadow */
.VPNav {
border-bottom: thin solid hsla(var(--a-base-c), var(--a-border-opacity));
border-bottom: thin solid hsl(var(--a-base-c) / var(--a-border-opacity));
}

/* Remove shadow effect on scroll */
Expand Down Expand Up @@ -104,7 +104,7 @@

/* Handle */
.VPSidebar::-webkit-scrollbar-thumb {
background: hsl(0, 0%, 90%);
background: hsl(0 0% 90%);
border-radius: 0.5rem;
}

Expand All @@ -114,7 +114,7 @@

/* Add border on right */
.VPSidebar {
border-right: thin solid hsla(var(--a-base-c), var(--a-border-opacity));
border-right: thin solid hsl(var(--a-base-c) / var(--a-border-opacity));
}

/* Make sidebar starts from bottom of navbar */
Expand Down Expand Up @@ -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: hsl(0 0% 12%);
}

.dark .VPSidebar::-webkit-scrollbar-thumb {
background: hsl(0, 0%, 10%);
background: hsl(0 0% 10%);
border-radius: 0.5rem;
}

Expand All @@ -164,7 +164,7 @@
}

.dark .vp-doc div[class*='language-']:not(:where(.vp-raw *)) {
border: 1px solid hsla(var(--a-base-c), var(--a-border-opacity));
border: 1px solid hsl(var(--a-base-c) / var(--a-border-opacity));
opacity: 0.85;
font-weight: 500;
}
Expand All @@ -174,9 +174,9 @@
========================== */

.cards-demo-container {
/* rounded-lg border-dashed border border-a-border p-8 bg-[hsla(var(--a-base-c), .05)] */
/* rounded-lg border-dashed border border-a-border p-8 bg-[hsl(var(--a-base-c) / .05)] */
@apply rounded-lg border-dashed border border-a-border p-8;
background: hsla(var(--a-body-bg-c));
background: hsl(var(--a-body-bg-c));
}

/* ==========================
Expand Down Expand Up @@ -255,11 +255,11 @@ html:not(.dark) .VPContent.is-home+.VPFooter {
}

.VPHero.VPHomeHero .text {
color: hsla(var(--a-base-c), 0.87)
color: hsl(var(--a-base-c) / 0.87)
}

.VPFooter {
border-top: thin solid hsla(var(--a-base-c), var(--a-border-opacity)) !important;
border-top: thin solid hsl(var(--a-base-c) / var(--a-border-opacity)) !important;
}


Expand All @@ -278,7 +278,7 @@ h2[id="api"] {
}

/* HACK: Vue components get red underlined text instead of blue */
.language-vue span[style="color: rgb(255, 85, 85); font-style: italic; text-decoration: underline;"],
.language-vue span[style="color: rgb(255 85 85); font-style: italic; text-decoration: underline;"],
.language-vue span[style="color:#FF5555;font-style:italic;text-decoration:underline;"] {
color: #8BE9FD !important;
text-decoration: none !important;
Expand Down
16 changes: 8 additions & 8 deletions docs/components/Api.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ onMounted(() => {
:key="tab.value"
class="capitalize"
:class="[!tab.isSelected && 'opacity-50']"
color="hsl(0,0%,50%)"
color="hsl(0 0% 50%)"
:variant="tab.isSelected ? 'light' : 'text'"
@click="select(tab.value)"
>
Expand All @@ -98,11 +98,11 @@ onMounted(() => {
:key="prop.name"
class="not-last-mb-4"
>
<span class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]">{{ prop.name.replace('?', '') }}</span>
<span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
<span class="font-semibold text-[hsl(var(--a-title-c) / var(--a-title-opacity))]">{{ prop.name.replace('?', '') }}</span>
<span class="text-[hsl(var(--a-base-c) / var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
<span
v-if="prop.default !== 'unknown'"
class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"
class="text-[hsl(var(--a-base-c) / var(--a-text-emphasis-light-opacity))]"
> = {{ prop.default }}</span>
<div
class="!children-[p]-m-0"
Expand All @@ -118,8 +118,8 @@ onMounted(() => {
:key="slot.name"
class="not-last-mb-4"
>
<span class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]">{{ slot.name }}</span>
<span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> : {{ slot.type }}</span>
<span class="font-semibold text-[hsl(var(--a-title-c) / var(--a-title-opacity))]">{{ slot.name }}</span>
<span class="text-[hsl(var(--a-base-c) / var(--a-text-emphasis-light-opacity))]"> : {{ slot.type }}</span>
<div
class="!children-[p]-m-0"
v-html="slot.description"
Expand All @@ -134,8 +134,8 @@ onMounted(() => {
:key="event.name"
class="not-last-mb-4"
>
<span class="font-semibold text-[hsla(var(--a-title-c),var(--a-title-opacity))]">{{ event.name }}</span>
<span class="text-[hsla(var(--a-base-c),var(--a-text-emphasis-light-opacity))]"> => {{ event.type }}</span>
<span class="font-semibold text-[hsl(var(--a-title-c) / var(--a-title-opacity))]">{{ event.name }}</span>
<span class="text-[hsl(var(--a-base-c) / var(--a-text-emphasis-light-opacity))]"> => {{ event.type }}</span>
<!-- <div
class="!children-[p]-m-0"
v-text="event.signature"
Expand Down
2 changes: 1 addition & 1 deletion docs/components/Demo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const showCode = ref(false)
&.vp-demo-bordered {
background: transparent !important;
box-shadow: none !important;
border: 1px solid hsla(var(--a-base-c), var(--a-border-opacity)) !important;
border: 1px solid hsl(var(--a-base-c) / var(--a-border-opacity)) !important;
}
}

Expand Down
2 changes: 1 addition & 1 deletion docs/components/demos/loader/DemoLoaderCustomization.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<ALoader
color="primary"
class="[--a-ring-color:hsla(var(--a-base-c),0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
class="[--a-ring-color:hsl(var(--a-base-c) / 0.1)] [--a-ring-opacity:1] [--a-spin-duration:1.5s]"
/>

<ALoader class="[--a-ring-stroke:0] [&_.a-spinner-arc]-stroke-cap-round rotate-y-180" />
Expand Down
14 changes: 10 additions & 4 deletions docs/development/contributing.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,20 +132,26 @@ At the moment, anu don't have any design system. Hence, we have full freedom to

### CSS vars

We follow naming convention for CSS color vars. As we have theme colors CSS vars that has just HSL value and not full color (e.g. `--a-primary: 265, 97.7%, 66.3%`) and some other colors that are full color (e.g. `--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`), it's confusing while using the CSS var to identify if it's full color or just HSL value.
We follow naming convention for CSS color vars. As we have theme colors CSS vars that has just HSL value and not full color (e.g. `--a-primary: 265 97.7% 66.3%`) and some other colors that are full color (e.g. `--a-switch-icon-color: hsl(0 10% 20% / 0.68)`), it's confusing while using the CSS var to identify if it's full color or just HSL value.

Due to this reason we follow below convention when deciding the name of CSS var that is color:

- suffix `-c` => For just HSL value (`--a-base-c: 0, 10%, 20%;`)
- suffix `-color` => For full color (`--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)`)
- Don't suffix anything => For theme color (`--a-primary: 265, 97.7%, 66.3%`)
- suffix `-c` => For just HSL value (`--a-base-c: 0 10% 20%`)
- suffix `-color` => For full color (`--a-switch-icon-color: hsl(0 10% 20% / 0.68)`)
- Don't suffix anything => For theme color (`--a-primary: 265 97.7% 66.3%`)

With above naming convention, we can clearly know if we should wrap the CSS var in `hsl()` or directly use it like a color value.

:::warning
Don't forget to follow this convention when defining any CSS var for color, including background (`--a-something-bg-color: hsl(var(--a-surface-c))`)
:::

:::warning
Because comma-separated values are now [Legacy Syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl#legacy_syntax_comma-separated_values), it's no longer supported in Anu's `hsl()` notation to cope with UnoCSS v0.57.0's [breaking changes](https://github.com/unocss/unocss/releases/tag/v0.57.0).

However the comma-separated values are still available in [`hsla()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl#legacy_syntax_hsla), which is a legacy alias for `hsl()`. E.g., `--a-switch-icon-color: hsla(0, 10%, 20%, 0.68)` should still work. That said, consider `hsl` over `hsla` wherever possible to avoid space-separated values mixing with comma-separated values that breaks Anu components' colors.
:::

### [Template Refs](https://vuejs.org/guide/essentials/template-refs.html)

In Anu, we follow below convention for template refs:
Expand Down
2 changes: 1 addition & 1 deletion docs/guide/getting-started/customization.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Below is the list of default colors. You can also [add new colors](/guide/featur
<ACard variant="fill" color="danger" class="rounded-2xl shadow-2xl shadow-danger shadow-opacity-40 w-26 h-26 font-semibold grid place-items-center">Danger</ACard>
</div>

<ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsl(265,97.7%,66.3%)]' : 'bg-[hsl(235,97.7%,66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>
<ABtn class="mt-8" :class="isPrimaryChanged ? 'bg-[hsl(265 97.7% 66.3%)]' : 'bg-[hsl(235 97.7% 66.3%)]'" @click="updatePrimaryColor">{{ isPrimaryChanged ? 'Reset' : 'Change' }} primary</ABtn>

<br />
<br />
Expand Down
4 changes: 2 additions & 2 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"markdown-it": "^13.0.1",
"markdown-it-container": "^3.0.0",
"postcss-prefix-selector": "^1.16.0",
"unocss": "^0.51.13",
"unocss": "^0.57.2",
"vitepress": "1.0.0-beta.1",
"zod": "3.21.4"
},
Expand All @@ -34,4 +34,4 @@
"vee-validate": "^4.9.4",
"vue": "3.3.4"
}
}
}
6 changes: 5 additions & 1 deletion docs/uno.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
},
},
})
3 changes: 3 additions & 0 deletions packages/anu-vue/auto-imports.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ declare global {
const h: typeof import('vue')['h']
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
const inject: typeof import('vue')['inject']
const injectLocal: typeof import('@vueuse/core')['injectLocal']
const isDefined: typeof import('@vueuse/core')['isDefined']
const isProxy: typeof import('vue')['isProxy']
const isReactive: typeof import('vue')['isReactive']
Expand Down Expand Up @@ -63,6 +64,7 @@ declare global {
const onUpdated: typeof import('vue')['onUpdated']
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
const provide: typeof import('vue')['provide']
const provideLocal: typeof import('@vueuse/core')['provideLocal']
const reactify: typeof import('@vueuse/core')['reactify']
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
const reactive: typeof import('vue')['reactive']
Expand Down Expand Up @@ -91,6 +93,7 @@ declare global {
const toReactive: typeof import('@vueuse/core')['toReactive']
const toRef: typeof import('vue')['toRef']
const toRefs: typeof import('vue')['toRefs']
const toValue: typeof import('vue')['toValue']
const triggerRef: typeof import('vue')['triggerRef']
const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
Expand Down
2 changes: 1 addition & 1 deletion packages/anu-vue/src/components/card/ACard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ else

<template>
<div
class="a-card relative overflow-hidden bg-[hsla(var(--a-surface-c),var(--un-bg-opacity,1))]"
class="a-card relative overflow-hidden bg-[hsl(var(--a-surface-c) / var(--un-bg-opacity,1))]"
:class="[classes, defaultsClass]"
:style="[styles, defaultsStyle]"
v-bind="defaultsAttrs"
Expand Down
2 changes: 1 addition & 1 deletion packages/anu-vue/src/components/checkbox/ACheckbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ const _icon = computed<ConfigurableValue>(() => {
:class="[(isChecked || isIndeterminate) && `bg-${props.color} border-${props.color} children:scale-full`]"
>
<i
class="a-checkbox-icon scale-0 text-white"
class="a-checkbox-icon text-white"
:class="_icon"
/>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/anu-vue/src/components/dialog/ADialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import type { Ref } from 'vue'
import type { ADialogEvents } from './meta'
import { aDialogProps, aDialogSlots } from './meta'
import { ACard } from '@/components/card'
import { onClickSameTarget } from '@/composables/onClickSameTarget'
import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
import { useDefaults } from '@/composables/useDefaults'
import { useTeleport } from '@/composables/useTeleport'
import { onClickSameTarget } from '@/composables/onClickSameTarget'
import { filterUsedSlots } from '@/utils/vue'

// SECTION Meta
Expand Down Expand Up @@ -46,7 +46,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
<div
v-show="props.modelValue"
ref="refMask"
class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsla(var(--a-backdrop-c),var(--a-backdrop-opacity))]"
class="a-dialog-wrapper grid place-items-center fixed inset-0 bg-[hsl(var(--a-backdrop-c) / var(--a-backdrop-opacity))]"
>
<Transition name="dialog">
<ACard
Expand Down
4 changes: 2 additions & 2 deletions packages/anu-vue/src/components/drawer/ADrawer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import type { Ref } from 'vue'
import type { ADrawerEvents } from './meta'
import { aDrawerProps, aDrawerSlots } from './meta'
import { ACard } from '@/components/card'
import { onClickSameTarget } from '@/composables/onClickSameTarget'
import { useDOMScrollLock } from '@/composables/useDOMScrollLock'
import { useDefaults } from '@/composables/useDefaults'
import { useTeleport } from '@/composables/useTeleport'
import { onClickSameTarget } from '@/composables/onClickSameTarget'
import { filterUsedSlots } from '@/utils/vue'

// SECTION Meta
Expand Down Expand Up @@ -69,7 +69,7 @@ useDOMScrollLock(toRef(props, 'modelValue') as Ref<boolean>)
v-show="props.modelValue"
ref="refMask"
v-bind="defaultsAttrs"
class="a-drawer-wrapper flex fixed inset-0 bg-[hsla(var(--a-backdrop-c),var(--a-backdrop-opacity))]"
class="a-drawer-wrapper flex fixed inset-0 bg-[hsl(var(--a-backdrop-c) / var(--a-backdrop-opacity))]"
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tested this kind of changes because space in a class mean two different class?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah you are right. Need to do more work to fix it properly. Will push some commits shortly.

:class="[
`a-drawer-anchor-${props.anchor}`,
// `flex-col` set full width for top & bottom anchored drawer
Expand Down
2 changes: 1 addition & 1 deletion packages/anu-vue/src/components/radio/ARadio.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const isChecked = computed(() => props.modelValue === attrs.value)
class="a-radio-circle after:w-full after:h-full after:rounded-full after:block after:content-empty after:transform after:transition after:transition-transform"
:class="[
`after:bg-${props.color}`,
isChecked ? `after:scale-full border-${props.color}` : 'after:scale-0 border-[hsla(var(--a-base-c),var(--a-border-opacity))]',
isChecked ? `after:scale-full border-${props.color}` : 'after:scale-0 border-[hsl(var(--a-base-c) / var(--a-border-opacity))]',
]"
/>
<!-- 👉 Slot: default -->
Expand Down
2 changes: 1 addition & 1 deletion packages/anu-vue/src/composables/useColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export function useColor(color: MaybeRef<ColorProp>, cssVarName: MaybeRef<string

const _styles = {
[cssVar.value]: _isThemeColor.value ? `var(--a-${_color})` : _color,
[property]: `hsla(var(${cssVar.value}), var(${cssVar.value}-opacity, 1))`,
[property]: `hsl(var(${cssVar.value}) / var(${cssVar.value}-opacity, 1))`,
} as StyleValue

return _styles
Expand Down
Loading