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 all 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
12 changes: 6 additions & 6 deletions docs/.vitepress/theme/vars.css
View file
Open in desktop
Expand Up @@ -9,24 +9,24 @@

:root {
--vp-c-gutter: var(--vp-c-divider);
--vp-code-block-bg: rgba(125,125,125,0.04);
--vp-code-block-bg: rgb(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: rgb(125 125 125 / 0.1);
--vp-code-copy-code-hover-bg: rgb(125 125 125 / 0.2);
--vp-c-disabled-bg: rgb(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);
--vp-code-copy-code-active-text: var(--vp-c-text-2);
--vp-c-text-dark-3: rgba(56, 56, 56, 0.8);
--vp-c-text-dark-3: rgb(56 56 56 / 0.8);
--vp-c-brand-lightest: var(--vp-c-brand-1);

--vp-c-highlight-bg: var(--vp-c-brand-light);
--vp-c-highlight-text: var(--vp-c-bg);
}

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

Expand Down
8 changes: 4 additions & 4 deletions docs/config/shortcuts.md
View file
Open in desktop
Expand Up @@ -45,20 +45,20 @@ With this, we could use `btn-green` and `btn-red` to generate the following CSS:
padding-left: 1rem;
padding-right: 1rem;
--un-bg-opacity: 1;
background-color: rgba(74, 222, 128, var(--un-bg-opacity));
background-color: rgb(74 222 128 / var(--un-bg-opacity));
border-radius: 0.5rem;
--un-text-opacity: 1;
color: rgba(220, 252, 231, var(--un-text-opacity));
color: rgb(220 252 231 / var(--un-text-opacity));
}
.btn-red {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
--un-bg-opacity: 1;
background-color: rgba(248, 113, 113, var(--un-bg-opacity));
background-color: rgb(248 113 113 / var(--un-bg-opacity));
border-radius: 0.5rem;
--un-text-opacity: 1;
color: rgba(254, 226, 226, var(--un-text-opacity));
color: rgb(254 226 226 / var(--un-text-opacity));
}
```
2 changes: 1 addition & 1 deletion docs/config/theme.md
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@ theme: {
colors: {
'veryCool': '#0000ff', // class="text-very-cool"
'brand': {
'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary"
}
},
}
Expand Down
6 changes: 3 additions & 3 deletions docs/presets/mini.md
View file
Open in desktop
Expand Up @@ -63,7 +63,7 @@ will generate:

```css
.dark .dark\:bg-red\:10 {
background-color: rgba(248, 113, 113, 0.1);
background-color: rgb(248 113 113 / 0.1);
}
```

Expand All @@ -76,7 +76,7 @@ To opt-in media query based dark mode, you can use `@dark:` variant:
```css
@media (prefers-color-scheme: dark) {
.\@dark\:bg-red\:10 {
background-color: rgba(248, 113, 113, 0.1);
background-color: rgb(248 113 113 / 0.1);
}
}
```
Expand Down Expand Up @@ -125,7 +125,7 @@ presetMini({
colors: {
'veryCool': '#0000ff', // class="text-very-cool"
'brand': {
'primary': 'hsla(var(--hue, 217), 78%, 51%)', //class="bg-brand-primary"
'primary': 'hsl(var(--hue 217) 78% / 51%)', //class="bg-brand-primary"
}
},
}
Expand Down
2 changes: 1 addition & 1 deletion docs/presets/wind.md
View file
Open in desktop
Expand Up @@ -91,7 +91,7 @@ The variant `@hover-text-red` will output:
@media (hover: hover) and (pointer: fine) {
.\@hover-text-red:hover {
--un-text-opacity: 1;
color: rgba(248, 113, 113, var(--un-text-opacity));
color: rgb(248 113 113 / var(--un-text-opacity));
}
}
```
Expand Down
2 changes: 1 addition & 1 deletion docs/transformers/compile-class.md
View file
Open in desktop
Expand Up @@ -68,7 +68,7 @@ Will be compiled to:
}
.uno-0qw2gr: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) {
.uno-qlmcrp {
Expand Down
4 changes: 2 additions & 2 deletions examples/sveltekit-scoped/README.md
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@ will be transformed into this:
<style>
:global(.uno-1hashz) {
--un-bg-opacity: 1;
background-color: rgba(254, 226, 226, var(--un-bg-opacity));
background-color: rgb(254 226 226 / var(--un-bg-opacity));
font-size: 1.125rem;
line-height: 1.75rem;
}
Expand Down Expand Up @@ -96,7 +96,7 @@ will be transformed into this:
div {
--un-text-opacity: 1;
color: rgba(59, 130, 246, var(--un-text-opacity));
color: rgb(59 130 246 / var(--un-text-opacity));
text-decoration-line: underline;
}
Expand Down
6 changes: 3 additions & 3 deletions examples/sveltekit/src/routes/Counter.svelte
View file
Open in desktop
Expand Up @@ -15,9 +15,9 @@
font-size: inherit;
padding: 1em 2em;
color: #ff3e00;
background-color: rgba(255, 62, 0, 0.1);
background-color: rgb(255 62 0 / 0.1);
border-radius: 2em;
border: 2px solid rgba(255, 62, 0, 0);
border: 2px solid rgb(255 62 0 / 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
Expand All @@ -29,6 +29,6 @@
}
button:active {
background-color: rgba(255, 62, 0, 0.2);
background-color: rgb(255 62 0 / 0.2);
}
</style>
6 changes: 3 additions & 3 deletions examples/sveltekit/src/routes/Go.svelte
View file
Open in desktop
Expand Up @@ -30,9 +30,9 @@
font-size: inherit;
padding: 1em 2em;
color: #ff3e00;
background-color: rgba(255, 62, 0, 0.1);
background-color: rgb(255 62 0 / 0.1);
border-radius: 2em;
border: 2px solid rgba(255, 62, 0, 0);
border: 2px solid rgb(255 62 0 / 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
Expand All @@ -43,6 +43,6 @@
border: 2px solid #ff3e00;
}
button:active {
background-color: rgba(255, 62, 0, 0.2);
background-color: rgb(255 62 0 / 0.2);
}
</style>
6 changes: 3 additions & 3 deletions interactive/markdown.css
View file
Open in desktop
Expand Up @@ -58,7 +58,7 @@
}

mark {
background-color: rgba(187, 128, 9, 0.15);
background-color: rgb(187 128 9 / 0.15);
color: #c9d1d9;
}

Expand Down Expand Up @@ -218,7 +218,7 @@
background-color: #161b22;
--at-apply: border border-base;
border-radius: 6px;
box-shadow: inset 0 -1px 0 rgba(110, 118, 129, 0.4);
box-shadow: inset 0 -1px 0 rgb(110 118 129 / 0.4);
}

h1,
Expand Down Expand Up @@ -629,7 +629,7 @@
}

table tr:nth-child(2n) {
background-color: rgba(156, 163, 175, 0.02);
background-color: rgb(156 163 175 / 0.02);
}

img {
Expand Down
8 changes: 4 additions & 4 deletions interactive/spa-loading-template.html
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@

@media (prefers-color-scheme: dark) {
html {
background-color: rgba(18, 18, 18, 1);
background-color: rgb(18 18 18 / 1);
color-scheme: dark;
}
}
Expand Down Expand Up @@ -57,7 +57,7 @@
}

100% {
fill: rgb(133, 133, 133);
fill: rgb(133 133 133);
}
}

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

100% {
fill: rgb(204, 204, 204);
fill: rgb(204 204 204);
}
}

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

100% {
fill: rgb(77, 77, 77);
fill: rgb(77 77 77);
}
}

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: rgb(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': 'rgb(147 197 253 / 0.5)',
'--un-shadow': '0 0 rgb(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 rgb(0 0 0 / 0)',
'--un-ring-shadow': '0 0 rgb(0 0 0 / 0)',
'--un-shadow-inset': varEmpty,
'--un-shadow': '0 0 rgba(0,0,0,0)',
'--un-shadow': '0 0 rgb(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 rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
'sm': '0 1px 1px rgb(0 0 0 / 0.05)',
'md': ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
'lg': ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
'xl': ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
'2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
'none': '0 0 rgb(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 rgb(0 0 0 / 0.2)', '0 0 1px rgb(1 0 5 / 0.1)'],
none: '0 0 rgb(0 0 0 / 0)',
sm: '1px 1px 3px rgb(36 37 47 / 0.25)',
md: ['0 1px 2px rgb(30 29 39 / 0.19)', '1px 2px 4px rgb(54 64 147 / 0.18)'],
lg: ['3px 3px 6px rgb(0 0 0 / 0.26)', '0 0 5px rgb(15 3 86 / 0.22)'],
xl: ['1px 1px 3px rgb(0 0 0 / 0.29)', '2px 4px 7px rgb(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 rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 1px 2px -1px rgb(0 0 0 / 0.1)'],
'none': '0 0 rgb(0 0 0 / 0)',
'sm': 'var(--un-shadow-inset) 0 1px 2px 0 rgb(0 0 0 / 0.05)',
'md': ['var(--un-shadow-inset) 0 4px 6px -1px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 2px 4px -2px rgb(0 0 0 / 0.1)'],
'lg': ['var(--un-shadow-inset) 0 10px 15px -3px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 4px 6px -4px rgb(0 0 0 / 0.1)'],
'xl': ['var(--un-shadow-inset) 0 20px 25px -5px rgb(0 0 0 / 0.1)', 'var(--un-shadow-inset) 0 8px 10px -6px rgb(0 0 0 / 0.1)'],
'2xl': 'var(--un-shadow-inset) 0 25px 50px -12px rgb(0 0 0 / 0.25)',
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
} satisfies Theme['boxShadow']

export const easing = {
Expand Down
8 changes: 4 additions & 4 deletions packages/preset-mini/src/_utils/utilities.ts
View file
Open in desktop
Expand Up @@ -70,7 +70,7 @@ export function splitShorthand(body: string, type: string) {
* 'red' // From theme, if 'red' is available
* 'red-100' // From theme, plus scale
* 'red-100/20' // From theme, plus scale/opacity
* '[rgb(100,2,3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity
* '[rgb(100 2 3)]/[var(--op)]' // Bracket with rgb color and bracket with opacity
*
* @param body - Color string to be parsed.
* @param theme - {@link Theme} object.
Expand Down 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': 'rgb(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': 'rgb(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': 'rgb(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
4 changes: 2 additions & 2 deletions 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 'rgb(255 255 255 / 0)'
}

function bgGradientColorValue(mode: string, cssColor: CSSColorValue | undefined, color: string, alpha: any) {
Expand Down Expand Up @@ -92,7 +92,7 @@ export const backgroundStyles: Rule[] = [
[/^(from|via|to)-([\d\.]+)%$/, bgGradientPositionResolver()],
// images
[/^bg-gradient-((?:repeating-)?(?:linear|radial|conic))$/, ([, s]) => ({
'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgba(255, 255, 255, 0))))`,
'background-image': `${s}-gradient(var(--un-gradient, var(--un-gradient-stops, rgb(255 255 255 / 0))))`,
}), { autocomplete: ['bg-gradient-repeating', 'bg-gradient-(linear|radial|conic)', 'bg-gradient-repeating-(linear|radial|conic)'] }],
// ignore any center position
[/^bg-gradient-to-([rltb]{1,2})$/, ([, d]) => {
Expand Down