WRR-287: Replace rgba() with rgb()

rgb() with alpha parameter is supported from Firefox 52 (2017), Chrome 65(2018), and Safari 12.1(2019). rgba() is now an alias for rgb(). Enact-DCO-1.0-Signed-off-by: Seungcheon Baek (sc.baek@lge.com)
enactjs · Dec 4, 2024 · c65d1cb · c65d1cb
1 parent d8bce31
commit c65d1cb
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 19 deletions.
diff --git a/VideoPlayer/VideoPlayer.module.less b/VideoPlayer/VideoPlayer.module.less
@@ -30,7 +30,7 @@
 			height: 80%;
 			transform-origin: bottom;
 			// Fancier gradient for future reference. Keeping linear-gradient as specified from Enyo.
-			// background-image: radial-gradient(rgba(0, 0, 0, 0) 50%, #000000 100%);
+			// background-image: radial-gradient(rgb(0, 0, 0, 0) 50%, #000000 100%);
 			// background-size: 170% 200%;
 			// background-position: bottom center;
 		}

diff --git a/samples/sampler/stories/default/Image.js b/samples/sampler/stories/default/Image.js
@@ -35,7 +35,7 @@ export const _Image = (args) => (
 				border: '#ffa500 dashed 1px',
 				borderBottomWidth: 0,
 				borderRadius: '12px 12px 0 0',
-				backgroundColor: 'rgba(255, 165, 0, 0.5)',
+				backgroundColor: 'rgb(255, 165, 0, 0.5)',
 				color: '#fff',
 				position: 'absolute',
 				transform: 'translateX(-1px) translateY(-100%)',

diff --git a/samples/sampler/stories/default/QuickGuidePanels.js b/samples/sampler/stories/default/QuickGuidePanels.js
@@ -55,7 +55,7 @@ export const _QuickGuidePanels = (args) => {
 							This sample needs to be run with FHD or 4K dimensions.
 						</div>
 						<div className={css.svg}>
-							<svg width="100%" height="100%" fill="rgba(87, 94, 102, 0.3)">
+							<svg width="100%" height="100%" fill="rgb(87, 94, 102, 0.3)">
 								<path d={`M0 0 h${screenWidth} v${screenHeight} h-${screenWidth}z`} />
 							</svg>
 						</div>
@@ -65,7 +65,7 @@ export const _QuickGuidePanels = (args) => {
 							This is a Sandstone Button component.
 						</div>
 						<div className={css.svg}>
-							<svg width="100%" height="100%" fill="rgba(87, 94, 102, 0.3)">
+							<svg width="100%" height="100%" fill="rgb(87, 94, 102, 0.3)">
 								<path d={`M0 0 h${screenWidth} v${screenHeight} h-${screenWidth}z M${184 * widthRatio} ${100 * heightRatio} v${100 * heightRatio} h${200 * widthRatio} v-${100 * heightRatio}z`} />
 							</svg>
 						</div>
@@ -75,7 +75,7 @@ export const _QuickGuidePanels = (args) => {
 							This is a Sandstone SwitchItem component.
 						</div>
 						<div className={css.svg}>
-							<svg width="100%" height="100%" fill="rgba(87, 94, 102, 0.3)">
+							<svg width="100%" height="100%" fill="rgb(87, 94, 102, 0.3)">
 								<path d={`M0 0 h${screenWidth} v${screenHeight} h-${screenWidth}z M${184 * widthRatio} ${232 * heightRatio} v${100 * heightRatio} h${200 * widthRatio} v-${100 * heightRatio}z`} />
 							</svg>
 						</div>

diff --git a/samples/sampler/stories/default/Spinner.js b/samples/sampler/stories/default/Spinner.js
@@ -19,7 +19,7 @@ export const _Spinner = (args) => (
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.scaleToRem(180),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -43,7 +43,7 @@ export const _Spinner = (args) => (
 			<label
 				style={{
 					outline: 'teal dashed 1px',
-					backgroundColor: 'rgba(0, 128, 128, 0.5)',
+					backgroundColor: 'rgb(0, 128, 128, 0.5)',
 					color: '#0bb',
 					position: 'absolute',
 					transform: 'translateY(-100%)',

diff --git a/samples/sampler/stories/default/VideoPlayer.js b/samples/sampler/stories/default/VideoPlayer.js
@@ -128,7 +128,7 @@ export const _VideoPlayer = (args) => {
 			<label
 				style={{
 					outline: 'teal dashed 1px',
-					backgroundColor: 'rgba(0, 128, 128, 0.5)',
+					backgroundColor: 'rgb(0, 128, 128, 0.5)',
 					color: '#0bb',
 					position: 'absolute',
 					transform: 'translateY(-100%)',

diff --git a/samples/sampler/stories/qa/Button.module.less b/samples/sampler/stories/qa/Button.module.less
@@ -1,6 +1,6 @@
 .highlight() {
-	background: rgba(0, 100, 200, 0.2);
-	border: 1px solid rgba(0, 100, 200, 0.4);
+	background: rgb(0, 100, 200, 0.2);
+	border: 1px solid rgb(0, 100, 200, 0.4);
 }
 
 .tapArea {

diff --git a/samples/sampler/stories/qa/Touchable.js b/samples/sampler/stories/qa/Touchable.js
@@ -60,7 +60,7 @@ const TouchArea = kind({
 					width: moveTolerance * 2 + 'px',
 					borderRadius: '999px',
 					border: '1px solid orange',
-					backgroundColor: 'rgba(255, 180, 0, 0.3)',
+					backgroundColor: 'rgb(255, 180, 0, 0.3)',
 					pointerEvents: 'none',
 					touchAction: 'none'
 				}}

diff --git a/tests/screenshot/apps/Sandstone-View.module.less b/tests/screenshot/apps/Sandstone-View.module.less
@@ -11,7 +11,7 @@
 	position: relative;
 	outline: 1px solid #F0F;
 	background-color: black;
-	background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 50%, transparent 50%);
+	background-image: linear-gradient(0deg, rgb(255, 255, 255, 0.2) 50%, transparent 50%), linear-gradient(90deg, rgb(255, 255, 255, 0.2) 50%, transparent 50%);
 	background-size: 12px 12px, 12px 12px;
 
 	&.padded {
@@ -36,7 +36,7 @@
 
 	&.light {
 		background-color: white;
-		background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 50%, transparent 50%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 50%, transparent 50%);
+		background-image: linear-gradient(0deg, rgb(0, 0, 0, 0.2) 50%, transparent 50%), linear-gradient(90deg, rgb(0, 0, 0, 0.2) 50%, transparent 50%);
 	}
 
 }

diff --git a/tests/screenshot/apps/components/Spinner.js b/tests/screenshot/apps/components/Spinner.js
@@ -7,7 +7,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -25,7 +25,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -43,7 +43,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -61,7 +61,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -79,7 +79,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div
@@ -97,7 +97,7 @@ const SpinnerTests = [
 			outline: 'teal dashed 1px',
 			position: 'relative',
 			padding: ri.unit(90, 'rem'),
-			backgroundColor: 'rgba(0, 187, 187, 0.5)'
+			backgroundColor: 'rgb(0, 187, 187, 0.5)'
 		}}
 	>
 		<div