Refactor color variables in SCSS files to use new text color variables for improved consistency across components.

Author: mpm-os

src/scripts/OSFramework/OSUI/Pattern/AccordionItem/scss/_accordion-item.scss

@@ -79,11 +79,11 @@
 		}
 
 		&-disabled {
-			color: var(--color-neutral-7);
+			color: var(--text-color-neutral-7);
 			pointer-events: none;
 
 			.osui-accordion-item__icon {
-				color: var(--color-neutral-6);
+				color: var(--text-color-neutral-6);
 
 				&--plus-minus {
 					&:after,

src/scripts/OSFramework/OSUI/Pattern/AnimatedLabel/scss/_animated-label.scss

@@ -15,7 +15,7 @@
 
 		.animated-label-input {
 			.form-control[data-input]::-webkit-datetime-edit {
-				color: var(--color-neutral-9);
+				color: var(--text-color-neutral-9);
 			}
 
 			[data-textarea] {
@@ -25,7 +25,7 @@
 	}
 
 	&-text {
-		color: var(--color-neutral-8);
+		color: var(--text-color-neutral-8);
 		font-size: var(--font-size-s);
 		pointer-events: none;
 		position: absolute;
@@ -63,7 +63,7 @@
 					border-bottom: var(--border-size-s) solid var(--color-primary);
 
 					&::-webkit-datetime-edit {
-						color: var(--color-neutral-9);
+						color: var(--text-color-neutral-9);
 					}
 				}
 

src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss

@@ -28,7 +28,7 @@
 		&.flatpickr-input[disabled] + input {
 			background-color: var(--color-neutral-2);
 			border: var(--border-size-s) solid var(--color-neutral-4);
-			color: var(--color-neutral-6);
+			color: var(--text-color-neutral-6);
 			pointer-events: none;
 		}
 

src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss

@@ -54,7 +54,7 @@ $balloonMobileTopMargin: 5vh;
 
 		&:after {
 			align-items: center;
-			color: var(--color-neutral-7);
+			color: var(--text-color-neutral-7);
 			content: '\f107';
 			display: flex;
 			font: normal normal normal 20px/1 FontAwesome;
@@ -84,7 +84,7 @@ $balloonMobileTopMargin: 5vh;
 			background-color: var(--color-neutral-0);
 			border-radius: var(--border-radius-soft);
 			border: var(--border-size-s) solid var(--color-neutral-5);
-			color: var(--color-neutral-9);
+			color: var(--text-color-neutral-9);
 			cursor: pointer;
 			display: flex;
 			font-size: var(--font-size-s);
@@ -123,7 +123,7 @@ $balloonMobileTopMargin: 5vh;
 
 			&:before {
 				align-items: center;
-				color: var(--color-neutral-6);
+				color: var(--text-color-neutral-6);
 				content: '\f002';
 				display: flex;
 				font: normal normal normal 14px/1 FontAwesome;
@@ -228,7 +228,7 @@ $balloonMobileTopMargin: 5vh;
 			&-wrapper {
 				background-color: var(--color-neutral-2);
 				border-color: var(--color-neutral-4);
-				color: var(--color-neutral-6);
+				color: var(--text-color-neutral-6);
 				pointer-events: none;
 			}
 		}
@@ -288,7 +288,7 @@ $balloonMobileTopMargin: 5vh;
 
 			&-search {
 				&:before {
-					color: var(--color-neutral-7);
+					color: var(--text-color-neutral-7);
 				}
 
 				input,

src/scripts/OSFramework/OSUI/Pattern/Dropdown/scss/_dropdown.scss

@@ -19,7 +19,7 @@
 				&-toggle-button {
 					background-color: var(--color-neutral-2);
 					border: var(--border-size-s) solid var(--color-neutral-4);
-					color: var(--color-neutral-6);
+					color: var(--text-color-neutral-6);
 					pointer-events: none;
 				}
 
@@ -49,7 +49,7 @@
 		}
 
 		&-icon {
-			color: var(--color-neutral-9);
+			color: var(--text-color-neutral-9);
 			font-size: var(--font-size-h6);
 			margin-right: var(--space-s);
 		}

src/scripts/OSFramework/OSUI/Pattern/DropdownServerSideItem/scss/_dropdownserversideitem.scss

@@ -7,7 +7,7 @@
 .osui-dropdown-serverside-item {
 	align-items: center;
 	background-color: transparent;
-	color: var(--color-neutral-9);
+	color: var(--text-color-neutral-9);
 	cursor: pointer;
 	display: flex;
 	flex: 1;

src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss

@@ -50,7 +50,7 @@
 		&[disabled] + input {
 			background-color: var(--color-neutral-2);
 			border: var(--border-size-s) solid var(--color-neutral-4);
-			color: var(--color-neutral-6);
+			color: var(--text-color-neutral-6);
 			pointer-events: none;
 		}
 

src/scripts/OSFramework/OSUI/Pattern/Notification/scss/_notification.scss

@@ -11,7 +11,7 @@
 	border-radius: var(--border-radius-soft);
 	border: var(--border-size-s) solid var(--color-neutral-4);
 	box-shadow: var(--shadow-xl);
-	color: var(--color-neutral-10);
+	color: var(--text-color-neutral-10);
 	max-width: calc(100vw - (var(--osui-notification-margin) * 2));
 	opacity: 0;
 	padding: var(--space-m);

src/scripts/OSFramework/OSUI/Pattern/OverflowMenu/scss/_overflowmenu.scss

@@ -13,7 +13,7 @@
 
 		border: var(--border-size-s) solid transparent;
 		border-radius: var(--osui-overflow-menu-shape);
-		color: var(--color-neutral-9);
+		color: var(--text-color-neutral-9);
 		width: 32px;
 
 		* {
@@ -33,7 +33,7 @@
 		z-index: var(--layer-global-instant-interaction);
 
 		a {
-			color: var(--color-neutral-9);
+			color: var(--text-color-neutral-9);
 
 			&:hover {
 				background: var(--color-neutral-4);

src/scripts/OSFramework/OSUI/Pattern/RangeSlider/scss/_rangeslider.scss

@@ -130,7 +130,7 @@
 			}
 
 			.noUi-pips {
-				color: var(--color-neutral-8);
+				color: var(--text-color-neutral-8);
 			}
 
 			.noUi-pips-margin {
@@ -159,7 +159,7 @@
 		}
 
 		&-pips-vertical {
-			color: var(--color-neutral-8);
+			color: var(--text-color-neutral-8);
 			height: 100%;
 			left: 100%;
 			padding: 0 0 0 var(--space-base);
@@ -197,7 +197,7 @@
 		&-tooltip {
 			background: transparent;
 			border: none;
-			color: var(--color-neutral-10);
+			color: var(--text-color-neutral-10);
 			padding: var(--space-xs);
 		}
 
@@ -251,12 +251,12 @@
 				}
 
 				&-pips {
-					color: var(--color-neutral-6);
+					color: var(--text-color-neutral-6);
 				}
 			}
 
 			.noUi-tooltip {
-				color: var(--color-neutral-6);
+				color: var(--text-color-neutral-6);
 			}
 		}
 	}