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

Jump to bottom

fix(color)!: keep hsla and rgba consistent with tailwindcss #3221

Merged
merged 7 commits into from Oct 23, 2023
Merged

fix(color)!: keep hsla and rgba consistent with tailwindcss #3221

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bc921ee
chore(color): keep hsla and rgba consistent with tailwindcss
Simon-He95 Oct 11, 2023
ea40d5a
Merge branch 'main' into hsl
Simon-He95 Oct 11, 2023
79c7871
chore: update
Simon-He95 Oct 11, 2023
f8dd6f3
chore: update
Simon-He95 Oct 12, 2023
96395a2
chore: update
Simon-He95 Oct 12, 2023
f6e17d9
fix: test
Simon-He95 Oct 12, 2023
f1bb5e2
Merge branch 'main' into hsl
Simon-He95 Oct 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 5 additions & 5 deletions docs/.vitepress/theme/vars.css
View file
Open in desktop
Expand Up @@ -9,11 +9,11 @@

:root {
--vp-c-gutter: var(--vp-c-divider);
--vp-code-block-bg: rgba(125,125,125,0.04);
--vp-code-block-bg: rgba(125, 125, 125, 0.04);
--vp-code-tab-divider: var(--vp-c-divider);
--vp-code-copy-code-bg: rgba(125,125,125,0.1);
--vp-code-copy-code-hover-bg: rgba(125,125,125,0.2);
--vp-c-disabled-bg: rgba(125,125,125,0.2);
--vp-code-copy-code-bg: rgba(125, 125, 125, 0.1);
--vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.2);
--vp-c-disabled-bg: rgba(125, 125, 125, 0.2);
--vp-code-tab-text-color: var(--vp-c-text-2);
--vp-code-tab-active-text-color: var(--vp-c-text-1);
--vp-code-tab-hover-text-color: var(--vp-c-text-1);
Expand All @@ -26,7 +26,7 @@
}

.dark {
--vp-code-block-bg: rgba(0,0,0,0.2);
--vp-code-block-bg: rgba(0, 0, 0, 0.2);
--vp-c-text-code: #c0cec0;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/inspector/client/main.css
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ html:not(.dark) {
left: 0;
top: 0;
transition: opacity 0.4s;
background-color: rgba(125,125,125,0.1);
background-color: rgba(125, 125, 125, 0.1);
opacity: 0;
z-index: 1;
}
Expand Down Expand Up @@ -95,4 +95,4 @@ html:not(.dark) {
}
.dark .v-popper--theme-dropdown .v-popper__arrow-inner {
border-color: #080808;
}
}
4 changes: 2 additions & 2 deletions packages/preset-mini/src/_rules/ring.ts
View file
Open in desktop
Expand Up @@ -8,8 +8,8 @@ export const ringBase = {
'--un-ring-offset-width': '0px',
'--un-ring-offset-color': '#fff',
'--un-ring-width': '0px',
'--un-ring-color': 'rgba(147,197,253,0.5)',
'--un-shadow': '0 0 rgba(0,0,0,0)',
'--un-ring-color': 'rgba(147, 197, 253, 0.5)',
Simon-He95 marked this conversation as resolved.
Show resolved Hide resolved
'--un-shadow': '0 0 rgba(0, 0, 0, 0)',
}

export const rings: Rule<Theme>[] = [
Expand Down
6 changes: 3 additions & 3 deletions packages/preset-mini/src/_rules/shadow.ts
View file
Open in desktop
Expand Up @@ -4,10 +4,10 @@ import { colorResolver, colorableShadows, h, hasParseableColor } from '../utils'
import { varEmpty } from './static'

export const boxShadowsBase = {
'--un-ring-offset-shadow': '0 0 rgba(0,0,0,0)',
'--un-ring-shadow': '0 0 rgba(0,0,0,0)',
'--un-ring-offset-shadow': '0 0 rgba(0, 0, 0, 0)',
'--un-ring-shadow': '0 0 rgba(0, 0, 0, 0)',
'--un-shadow-inset': varEmpty,
'--un-shadow': '0 0 rgba(0,0,0,0)',
'--un-shadow': '0 0 rgba(0, 0, 0, 0)',
}

export const boxShadows: Rule<Theme>[] = [
Expand Down
14 changes: 7 additions & 7 deletions packages/preset-mini/src/_theme/filters.ts
View file
Open in desktop
Expand Up @@ -10,11 +10,11 @@ export const blur = {
}

export const dropShadow = {
'DEFAULT': ['0 1px 2px rgba(0,0,0,0.1)', '0 1px 1px rgba(0,0,0,0.06)'],
'sm': '0 1px 1px rgba(0,0,0,0.05)',
'md': ['0 4px 3px rgba(0,0,0,0.07)', '0 2px 2px rgba(0,0,0,0.06)'],
'lg': ['0 10px 8px rgba(0,0,0,0.04)', '0 4px 3px rgba(0,0,0,0.1)'],
'xl': ['0 20px 13px rgba(0,0,0,0.03)', '0 8px 5px rgba(0,0,0,0.08)'],
'2xl': '0 25px 25px rgba(0,0,0,0.15)',
'none': '0 0 rgba(0,0,0,0)',
'DEFAULT': ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'],
'sm': '0 1px 1px rgba(0, 0, 0, 0.05)',
'md': ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'],
'lg': ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'],
'xl': ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'],
'2xl': '0 25px 25px rgba(0, 0, 0, 0.15)',
'none': '0 0 rgba(0, 0, 0, 0)',
}
12 changes: 6 additions & 6 deletions packages/preset-mini/src/_theme/font.ts
View file
Open in desktop
Expand Up @@ -73,12 +73,12 @@ export const textStrokeWidth: Theme['textStrokeWidth'] = {
} satisfies Theme['textStrokeWidth']

export const textShadow = {
DEFAULT: ['0 0 1px rgba(0,0,0,0.2)', '0 0 1px rgba(1,0,5,0.1)'],
none: '0 0 rgba(0,0,0,0)',
sm: '1px 1px 3px rgba(36,37,47,0.25)',
md: ['0 1px 2px rgba(30,29,39,0.19)', '1px 2px 4px rgba(54,64,147,0.18)'],
lg: ['3px 3px 6px rgba(0,0,0,0.26)', '0 0 5px rgba(15,3,86,0.22)'],
xl: ['1px 1px 3px rgba(0,0,0,0.29)', '2px 4px 7px rgba(73,64,125,0.35)'],
DEFAULT: ['0 0 1px rgba(0, 0, 0, 0.2)', '0 0 1px rgba(1, 0, 5, 0.1)'],
none: '0 0 rgba(0, 0, 0, 0)',
sm: '1px 1px 3px rgba(36, 37, 47, 0.25)',
md: ['0 1px 2px rgba(30, 29, 39, 0.19)', '1px 2px 4px rgba(54, 64, 147, 0.18)'],
lg: ['3px 3px 6px rgba(0, 0, 0, 0.26)', '0 0 5px rgba(15, 3, 86, 0.22)'],
xl: ['1px 1px 3px rgba(0, 0, 0, 0.29)', '2px 4px 7px rgba(73, 64, 125, 0.35)'],
} satisfies Theme['textShadow']

export const lineHeight = {
Expand Down
16 changes: 8 additions & 8 deletions packages/preset-mini/src/_theme/misc.ts
View file
Open in desktop
Expand Up @@ -59,14 +59,14 @@ export const borderRadius = {
} satisfies Theme['borderRadius']

export const boxShadow = {
'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0,0,0,0.1)'],
'none': '0 0 rgba(0,0,0,0)',
'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0,0,0,0.05)',
'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0,0,0,0.1)'],
'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0,0,0,0.1)'],
'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0,0,0,0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0,0,0,0.1)'],
'2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0,0,0,0.25)',
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.05)',
'DEFAULT': ['var(--un-shadow-inset) 0 1px 3px 0 rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgba(0, 0, 0, 0.1)'],
'none': '0 0 rgba(0, 0, 0, 0)',
'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgba(0, 0, 0, 0.05)',
'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgba(0, 0, 0, 0.1)'],
'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgba(0, 0, 0, 0.1)'],
'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgba(0, 0, 0, 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgba(0, 0, 0, 0.1)'],
'2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgba(0, 0, 0, 0.25)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)',
} satisfies Theme['boxShadow']

export const easing = {
Expand Down
6 changes: 3 additions & 3 deletions packages/preset-mini/src/_utils/utilities.ts
View file
Open in desktop
Expand Up @@ -155,15 +155,15 @@ export function parseColor(body: string, theme: Theme): ParsedColorValue | undef
*
* @example Resolving 'red-100' from theme:
* colorResolver('background-color', 'background')('', 'red-100')
* return { '--un-background-opacity': '1', 'background-color': 'rgba(254,226,226,var(--un-background-opacity))' }
* return { '--un-background-opacity': '1', 'background-color': 'rgba(254, 226, 226, var(--un-background-opacity))' }
*
* @example Resolving 'red-100/20' from theme:
* colorResolver('background-color', 'background')('', 'red-100/20')
* return { 'background-color': 'rgba(204,251,241,0.22)' }
* return { 'background-color': 'rgba(204, 251, 241, 0.22)' }
*
* @example Resolving 'hex-124':
* colorResolver('color', 'text')('', 'hex-124')
* return { '--un-text-opacity': '1', 'color': 'rgba(17,34,68,var(--un-text-opacity))' }
* return { '--un-text-opacity': '1', 'color': 'rgba(17, 34, 68, var(--un-text-opacity))' }
*
* @param property - Property for the css value to be created.
* @param varName - Base name for the opacity variable.
Expand Down
2 changes: 1 addition & 1 deletion packages/preset-wind/src/rules/background.ts
View file
Open in desktop
Expand Up @@ -7,7 +7,7 @@ function bgGradientToValue(cssColor: CSSColorValue | undefined) {
if (cssColor)
return colorToString(cssColor, 0)

return 'rgba(255,255,255,0)'
return 'rgba(255, 255, 255, 0)'
}

function bgGradientColorValue(mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) {
Expand Down
11 changes: 5 additions & 6 deletions packages/rule-utils/src/colors.ts
View file
Open in desktop
Expand Up @@ -29,9 +29,6 @@ export function parseCssColor(str = ''): CSSColorValue | undefined {
if (components.length === 0)
return

if (['rgba', 'hsla'].includes(type) && alpha == null)
return

if (cssColorFunctions.includes(type) && ![1, 3].includes(components.length))
return

Expand All @@ -58,9 +55,11 @@ export function colorToString(color: CSSColorValue | string, alphaOverride?: str
alpha = alphaOverride ?? alpha
type = type.toLowerCase()

// Comma separated functions
if (['hsla', 'hsl', 'rgba', 'rgb'].includes(type))
return `${type.replace('a', '')}a(${components.join(',')}${alpha == null ? '' : `,${alpha}`})`
if (['hsla', 'rgba'].includes(type))
return `${type}(${components.join(', ')}${alpha == null ? '' : `, ${alpha}`})`
Simon-He95 marked this conversation as resolved.
Show resolved Hide resolved

if (['rgb', 'hsl'].includes(type))
Simon-He95 marked this conversation as resolved.
Show resolved Hide resolved
return `${type}(${components.join(' ')}${alpha == null ? '' : ` / ${alpha}`})`
Copy link
Contributor

Choose a reason for hiding this comment

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

Since we clearly agreed that we are going to align with Tailwind, I think this should use COMMA-SEPARATED syntax instead of SPACE-SEPARATED syntax.

Tailwind uses SPACE for rgb and hsl, but COMMA for rgba and hsla.

I can see that through out the MR we are changing everything to SPACE syntax, as well as rgba and hsla. This will work in the browser but that's not aligned with Tailwind.

Copy link
Contributor

Choose a reason for hiding this comment

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

This will break for those who uses COMMA syntax with rgba and hsla (It makes sense to use legacy color function with legacy syntax? 🤣)

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I misunderstood it at first. I used tailwind play to check the output results and made adjustments.


alpha = alpha == null ? '' : ` / ${alpha}`
if (cssColorFunctions.includes(type))
Expand Down
12 changes: 6 additions & 6 deletions packages/svelte-scoped/src/_preprocess/transformClasses/index.test.ts
View file
Open in desktop
Expand Up @@ -47,7 +47,7 @@ describe('transform', () => {
<style>
:global(.uno-orrz3z) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
</style>
"
Expand All @@ -58,7 +58,7 @@ describe('transform', () => {
<style>
:global(._bg-red-500_7dkb0w) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
</style>
"
Expand Down Expand Up @@ -260,8 +260,8 @@ describe('transform', () => {
:global(.uno-3h14cd) {
font-weight: 600;
--un-text-opacity: 1;
color: rgba(34, 197, 94, var(--un-text-opacity));
color: rgba(96, 165, 250, var(--un-text-opacity));
color: rgb(34 197 94 / var(--un-text-opacity));
color: rgb(96 165 250 / var(--un-text-opacity));
}
:global(.uno-r4l94t) {
font-weight: 700;
Expand All @@ -272,7 +272,7 @@ describe('transform', () => {
}
:global(.uno-ffvc5a) {
--un-text-opacity: 1;
color: rgba(220, 38, 38, var(--un-text-opacity));
color: rgb(220 38 38 / var(--un-text-opacity));
}
</style>
"
Expand Down Expand Up @@ -348,7 +348,7 @@ describe('transform', () => {
<style>
:global(.uno-orrz3z) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
</style>
"
Expand Down
8 changes: 4 additions & 4 deletions packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingDev.svelte
View file
Open in desktop
Expand Up @@ -59,11 +59,11 @@
}
:global(._bg-red-500_7dkb0w) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
:global(.dark ._dark\:hover\:bg-green-500_7dkb0w:hover) {
--un-bg-opacity: 1;
background-color: rgba(34, 197, 94, var(--un-bg-opacity));
background-color: rgb(34 197 94 / var(--un-bg-opacity));
}
:global(._text-center_7dkb0w) {
text-align: center;
Expand All @@ -74,11 +74,11 @@
}
:global(._text-orange-400_7dkb0w) {
--un-text-opacity: 1;
color: rgba(251, 146, 60, var(--un-text-opacity));
color: rgb(251 146 60 / var(--un-text-opacity));
}
:global(._hover\:text-red_7dkb0w:hover) {
--un-text-opacity: 1;
color: rgba(248, 113, 113, var(--un-text-opacity));
color: rgb(248 113 113 / var(--un-text-opacity));
}
@media (min-width: 640px) {
:global(._sm\:text-left_7dkb0w) {
Expand Down
10 changes: 5 additions & 5 deletions packages/svelte-scoped/src/_preprocess/transformClasses/test-outputs/EverythingProd.svelte
View file
Open in desktop
Expand Up @@ -32,7 +32,7 @@
skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x))
scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
:global(.uno-rdvmaz > :not([hidden]) ~ :not([hidden])) {
--un-space-x-reverse: 0;
Expand All @@ -44,7 +44,7 @@
}
:global(.dark .uno-uovm2y:hover) {
--un-bg-opacity: 1;
background-color: rgba(34, 197, 94, var(--un-bg-opacity));
background-color: rgb(34 197 94 / var(--un-bg-opacity));
}
:global(.uno-rdvmaz) {
text-align: center;
Expand All @@ -55,15 +55,15 @@
}
:global(.uno-y37ej3) {
--un-text-opacity: 1;
color: rgba(251, 146, 60, var(--un-text-opacity));
color: rgb(251 146 60 / var(--un-text-opacity));
}
:global(.uno-deus5r:hover) {
--un-text-opacity: 1;
color: rgba(248, 113, 113, var(--un-text-opacity));
color: rgb(248 113 113 / var(--un-text-opacity));
}
:global(.uno-wt89uz:hover) {
--un-text-opacity: 1;
color: rgba(248, 113, 113, var(--un-text-opacity));
color: rgb(248 113 113 / var(--un-text-opacity));
}
@media (min-width: 640px) {
:global(.uno-rdvmaz) {
Expand Down
2 changes: 1 addition & 1 deletion packages/svelte-scoped/test/cases/basic/OutputDev.svelte
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
<style>
:global(._bg-red-500_vxas4i) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
:global(._font-semibold_vxas4i) {
font-weight: 600;
Expand Down
2 changes: 1 addition & 1 deletion packages/svelte-scoped/test/cases/basic/OutputProd.svelte
View file
Open in desktop
Expand Up @@ -3,7 +3,7 @@
<style>
:global(.usp-dyjh78) {
--un-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--un-bg-opacity));
background-color: rgb(239 68 68 / var(--un-bg-opacity));
font-weight: 600;
}
</style>
8 changes: 4 additions & 4 deletions packages/svelte-scoped/test/cases/needs-parent/OutputDev.svelte
View file
Open in desktop
Expand Up @@ -24,19 +24,19 @@
button {
border-radius: 0.25rem;
--un-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--un-bg-opacity));
background-color: rgb(254 226 226 / var(--un-bg-opacity));
padding: 0.75rem;
}
button:hover {
--un-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--un-bg-opacity));
background-color: rgb(254 202 202 / var(--un-bg-opacity));
}
:global(.dark) button {
--un-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--un-bg-opacity));
background-color: rgb(185 28 28 / var(--un-bg-opacity));
}
:global(.dark) button:hover {
--un-bg-opacity: 1;
background-color: rgba(220, 38, 38, var(--un-bg-opacity));
background-color: rgb(220 38 38 / var(--un-bg-opacity));
}
</style>
8 changes: 4 additions & 4 deletions packages/svelte-scoped/test/cases/needs-parent/OutputProd.svelte
View file
Open in desktop
Expand Up @@ -24,19 +24,19 @@
button {
border-radius: 0.25rem;
--un-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--un-bg-opacity));
background-color: rgb(254 226 226 / var(--un-bg-opacity));
padding: 0.75rem;
}
button:hover {
--un-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--un-bg-opacity));
background-color: rgb(254 202 202 / var(--un-bg-opacity));
}
:global(.dark) button {
--un-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--un-bg-opacity));
background-color: rgb(185 28 28 / var(--un-bg-opacity));
}
:global(.dark) button:hover {
--un-bg-opacity: 1;
background-color: rgba(220, 38, 38, var(--un-bg-opacity));
background-color: rgb(220 38 38 / var(--un-bg-opacity));
}
</style>
8 changes: 4 additions & 4 deletions packages/svelte-scoped/test/cases/preflights/OutputDev.svelte
View file
Open in desktop
Expand Up @@ -120,19 +120,19 @@
div {
border-radius: 0.25rem;
--un-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--un-bg-opacity));
background-color: rgb(254 226 226 / var(--un-bg-opacity));
padding: 0.75rem;
}
div:hover {
--un-bg-opacity: 1;
background-color: rgba(254, 202, 202, var(--un-bg-opacity));
background-color: rgb(254 202 202 / var(--un-bg-opacity));
}
:global(.dark) div {
--un-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--un-bg-opacity));
background-color: rgb(185 28 28 / var(--un-bg-opacity));
}
:global(.dark) div:hover {
--un-bg-opacity: 1;
background-color: rgba(220, 38, 38, var(--un-bg-opacity));
background-color: rgb(220 38 38 / var(--un-bg-opacity));
}
</style>