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

unocss · Oct 23, 2023 · 5c3d02d · 5c3d02d
1 parent 9bbb27c
commit 5c3d02d
Show file tree

Hide file tree

Showing 77 changed files with 540 additions and 542 deletions.
diff --git a/docs/.vitepress/theme/vars.css b/docs/.vitepress/theme/vars.css
@@ -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;
 }
 

diff --git a/docs/config/shortcuts.md b/docs/config/shortcuts.md
@@ -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));
 }
 ```
diff --git a/docs/config/theme.md b/docs/config/theme.md
@@ -18,7 +18,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"
     }
   },
 }

diff --git a/docs/presets/mini.md b/docs/presets/mini.md
@@ -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);
 }
 ```
 
@@ -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);
   }
 }
 ```
@@ -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"
       }
     },
   }

diff --git a/docs/presets/wind.md b/docs/presets/wind.md
@@ -97,7 +97,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));
   }
 }
 ```

diff --git a/docs/transformers/compile-class.md b/docs/transformers/compile-class.md
@@ -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 {

diff --git a/examples/sveltekit-scoped/README.md b/examples/sveltekit-scoped/README.md
@@ -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;
   }
@@ -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;
   }
 

diff --git a/examples/sveltekit/src/routes/Counter.svelte b/examples/sveltekit/src/routes/Counter.svelte
@@ -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;
@@ -29,6 +29,6 @@
 	}
 
 	button:active {
-		background-color: rgba(255, 62, 0, 0.2);
+		background-color: rgb(255 62 0 / 0.2);
 	}
 </style>
diff --git a/examples/sveltekit/src/routes/Go.svelte b/examples/sveltekit/src/routes/Go.svelte
@@ -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;
@@ -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>
diff --git a/interactive/markdown.css b/interactive/markdown.css
@@ -58,7 +58,7 @@
   }
 
   mark {
-    background-color: rgba(187, 128, 9, 0.15);
+    background-color: rgb(187 128 9 / 0.15);
     color: #c9d1d9;
   }
 
@@ -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,
@@ -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 {

diff --git a/interactive/spa-loading-template.html b/interactive/spa-loading-template.html
@@ -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;
     }
   }
@@ -57,7 +57,7 @@
     }
 
     100% {
-      fill: rgb(133, 133, 133);
+      fill: rgb(133 133 133);
     }
   }
 
@@ -67,7 +67,7 @@
     }
 
     100% {
-      fill: rgb(204, 204, 204);
+      fill: rgb(204 204 204);
     }
   }
 
@@ -77,7 +77,7 @@
     }
 
     100% {
-      fill: rgb(77, 77, 77);
+      fill: rgb(77 77 77);
     }
   }
 

diff --git a/packages/inspector/client/main.css b/packages/inspector/client/main.css
@@ -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;
 }
@@ -95,4 +95,4 @@ html:not(.dark) {
 }
 .dark .v-popper--theme-dropdown .v-popper__arrow-inner {
   border-color: #080808;
-}
+}
diff --git a/packages/preset-mini/src/_rules/ring.ts b/packages/preset-mini/src/_rules/ring.ts
@@ -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>[] = [

diff --git a/packages/preset-mini/src/_rules/shadow.ts b/packages/preset-mini/src/_rules/shadow.ts
@@ -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>[] = [

diff --git a/packages/preset-mini/src/_theme/filters.ts b/packages/preset-mini/src/_theme/filters.ts
@@ -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)',
 }
diff --git a/packages/preset-mini/src/_theme/font.ts b/packages/preset-mini/src/_theme/font.ts
@@ -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 = {

diff --git a/packages/preset-mini/src/_theme/misc.ts b/packages/preset-mini/src/_theme/misc.ts
@@ -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 = {

diff --git a/packages/preset-mini/src/_utils/utilities.ts b/packages/preset-mini/src/_utils/utilities.ts
@@ -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.
@@ -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.

diff --git a/packages/preset-wind/src/rules/background.ts b/packages/preset-wind/src/rules/background.ts
@@ -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) {
@@ -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]) => {