feat: use oPrivateColorGetTextColor

Financial-Times · Dec 3, 2024 · 78d315c · 78d315c
1 parent 06b729d
commit 78d315c
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 26 deletions.
diff --git a/components/o-autocomplete/main.scss b/components/o-autocomplete/main.scss
@@ -144,7 +144,7 @@
 
 	.o-autocomplete__option--no-results {
 		background-color: oPrivateColorsMix('o3-color-palett3-white', 'o3-color-palette-black', 98); // #fafafa
-		color: oColorsGetTextColor(
+		color: oPrivateColorsGetTextColor(
 			oPrivateColorsMix('o3-color-palette-white', 'o3-color-palette-black', 98),
 			$minimum-contrast: 'aa-normal'
 		);

diff --git a/components/o-buttons/src/scss/_functions.scss b/components/o-buttons/src/scss/_functions.scss
@@ -149,13 +149,13 @@
 	$context-color-arg: $context-color;
 	$default-background: if(type-of($color) == 'string', oColorsByName($color), $color);
 	$context-color: if(type-of($context-color) == 'string', oColorsByName($context-color), $context-color);
-	$default-context: $context-color == oPrivateColorsByUseCase('page', 'background');
+	$default-context: $context-color == oPrivateColorsByUsecase('page', 'background');
 
 	// The default button text colour is black/white on the default page background.
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
 	// o-buttons does custom contrast checks
-	$default-base-color: oColorsGetTextColor($color, 100, $minimum-contrast: null);
+	$default-base-color: oPrivateColorsGetTextColor($color, 100, $minimum-contrast: null);
 	$default-color: if(
 		$default-context,
 		$default-base-color,
@@ -251,7 +251,7 @@
 	// The text colour is black/white on the default page background.
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
-	$hover-focus-base-color: oColorsGetTextColor($hover-focus-background, 100, $minimum-contrast: null);
+	$hover-focus-base-color: oPrivateColorsGetTextColor($hover-focus-background, 100, $minimum-contrast: null);
 	$hover-focus-color: if(
 		$default-context,
 		$hover-focus-base-color,
@@ -269,7 +269,7 @@
 	// The text colour is black/white on the default page background.
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
-	$active-base-color: oColorsGetTextColor($active-background, 100, $minimum-contrast: null);
+	$active-base-color: oPrivateColorsGetTextColor($active-background, 100, $minimum-contrast: null);
 	$active-color: if(
 		$default-context,
 		$active-base-color,
@@ -359,7 +359,7 @@
 	// the button foreground colour until it does.
 	$hover-focus-color: _oButtonsGetMixColor(
 		$color-a: $color,
-		$color-b: oColorsGetTextColor($hover-focus-background-opaque, 100),
+		$color-b: oPrivateColorsGetTextColor($hover-focus-background-opaque, 100),
 		$contrast-color: $hover-focus-background-opaque,
 		$contrast-aim: 4.5,
 		$preferred-mix: 100,
@@ -368,7 +368,7 @@
 
 	// Get active colours.
 	$active-background: $default-color;
-	$active-color: oColorsGetTextColor($active-background, 100);
+	$active-color: oPrivateColorsGetTextColor($active-background, 100);
 
 	// Confirm the contrast of default state.
 	$contrast-error-message: 'Could not create an accessible secondary button of colour "#{$color}" for a background context "#{$context-color}".';
@@ -446,7 +446,7 @@
 	// the button foreground colour until it does.
 	$hover-focus-color: _oButtonsGetMixColor(
 		$color-a: $color,
-		$color-b: oColorsGetTextColor($hover-focus-background-opaque, 100),
+		$color-b: oPrivateColorsGetTextColor($hover-focus-background-opaque, 100),
 		$contrast-color: $hover-focus-background-opaque,
 		$contrast-aim: 4.5,
 		$preferred-mix: 100,
@@ -455,7 +455,7 @@
 
 	// Get active colours.
 	$active-background: $default-color;
-	$active-color: oColorsGetTextColor($active-background, 100);
+	$active-color: oPrivateColorsGetTextColor($active-background, 100);
 
 	// Confirm the contrast of default state.
 	$contrast-error-message: 'Could not create an accessible ghost button of colour "#{$color}" for a background context "#{$context-color}".';

diff --git a/components/o-labels/src/scss/_mixins.scss b/components/o-labels/src/scss/_mixins.scss
@@ -190,7 +190,7 @@
 	@if _oLabelsGet('text-color', $variant) {
 		color: _oLabelsGet('text-color', $variant);
 	} @else {
-		color: oColorsGetTextColor(_oLabelsGet('background-color', $variant), 100);
+		color: oPrivateColorsGetTextColor(_oLabelsGet('background-color', $variant), 100);
 	}
 
 	// Set the spacing

diff --git a/components/o-private-foundation/src/scss/o-buttons/custom-themes.scss b/components/o-private-foundation/src/scss/o-buttons/custom-themes.scss
@@ -128,7 +128,7 @@
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
 	// o-buttons does custom contrast checks
-	$default-base-color: oColorsGetTextColor(
+	$default-base-color: oPrivateColorsGetTextColor(
 		$color,
 		100,
 		$minimum-contrast: null
@@ -225,7 +225,7 @@
 	// The text colour is black/white on the default page background.
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
-	$hover-focus-base-color: oColorsGetTextColor(
+	$hover-focus-base-color: oPrivateColorsGetTextColor(
 		$hover-focus-background,
 		100,
 		$minimum-contrast: null
@@ -247,7 +247,7 @@
 	// The text colour is black/white on the default page background.
 	// If a different context has been given the text colour matches if possible,
 	// or is mixed to be darker/lighter for higher contrast.
-	$active-base-color: oColorsGetTextColor(
+	$active-base-color: oPrivateColorsGetTextColor(
 		$active-background,
 		100,
 		$minimum-contrast: null
@@ -366,7 +366,7 @@
 	// the button foreground colour until it does.
 	$hover-focus-color: _oPrivateButtonsGetMixColor(
 		$color-a: $color,
-		$color-b: oColorsGetTextColor($hover-focus-background-opaque, 100),
+		$color-b: oPrivateColorsGetTextColor($hover-focus-background-opaque, 100),
 		$contrast-color: $hover-focus-background-opaque,
 		$contrast-aim: 4.5,
 		$preferred-mix: 100,
@@ -375,7 +375,7 @@
 
 	// Get active colours.
 	$active-background: $default-color;
-	$active-color: oColorsGetTextColor($active-background, 100);
+	$active-color: oPrivateColorsGetTextColor($active-background, 100);
 
 	// Confirm the contrast of default state.
 	$contrast-error-message: 'Could not create an accessible secondary button of colour "#{$color}" for a background context "#{$context-color}".';
@@ -478,7 +478,7 @@
 	// the button foreground colour until it does.
 	$hover-focus-color: _oPrivateButtonsGetMixColor(
 		$color-a: $color,
-		$color-b: oColorsGetTextColor($hover-focus-background-opaque, 100),
+		$color-b: oPrivateColorsGetTextColor($hover-focus-background-opaque, 100),
 		$contrast-color: $hover-focus-background-opaque,
 		$contrast-aim: 4.5,
 		$preferred-mix: 100,
@@ -487,7 +487,7 @@
 
 	// Get active colours.
 	$active-background: $default-color;
-	$active-color: oColorsGetTextColor($active-background, 100);
+	$active-color: oPrivateColorsGetTextColor($active-background, 100);
 
 	// Confirm the contrast of default state.
 	$contrast-error-message: 'Could not create an accessible ghost button of colour "#{$color}" for a background context "#{$context-color}".';

diff --git a/components/o-private-foundation/src/scss/o-colors/_functions.scss b/components/o-private-foundation/src/scss/o-colors/_functions.scss
@@ -178,10 +178,10 @@
 /// @param {Color|String} $background - the color or palette color name of the background the text will appear on
 /// @param {Number} $opacity [100] - the opacity percentage the text color should appear at
 /// @param {String|Null} $minimum-contrast ['aa-normal'] - the minimum contrast ratio standard between the background and the returned text color, one of: aa-normal, aa-large, aaa-normal, aaa-large. See [WCAG 2.1 guidelines](https://www.w3.org/TR/WCAG21/#contrast-minimum). If the contrast ratio is too low to meet the selected guideline an error is thrown. Set to `null` to remove contrast checking and never throw an error.
-@function oColorsGetTextColor($background, $opacity: 90, $minimum-contrast: 'aa-normal') {
+@function oPrivateColorsGetTextColor($background, $opacity: 90, $minimum-contrast: 'aa-normal') {
 	$background-name: $background;
 	// Get background color if palette colour name has been given.
-	$background: if(type-of($background) == 'string', oColorsByName($background), $background);
+	$background: if(type-of($background) == 'string', oPrivateFoundationGet($background), $background);
 
 	// Contrast values. See https://www.w3.org/TR/WCAG21/#contrast-minimum
 	$contrast-levels: (

diff --git a/components/o-teaser/src/scss/themes/_package.scss b/components/o-teaser/src/scss/themes/_package.scss
@@ -122,7 +122,7 @@
 		}
 
 		&__list-item a {
-			color: oColorsMix($_o-teaser-base-color, $percentage: 80);
+			color: oPrivateColorsMix($_o-teaser-base-color, $percentage: 80);
 
 			&:hover {
 				color: $_o-teaser-focus-hover;

diff --git a/components/o-topper/src/scss/_mixins.scss b/components/o-topper/src/scss/_mixins.scss
@@ -252,8 +252,8 @@
 // uses topper background colour to set background and pick contrasting text color
 @mixin _oTopperColor($color-name) {
 	$background: oPrivateFoundationGet($color-name);
-	$foreground: oColorsGetTextColor($background, $opacity: 100);
-	$link-text-color: oPrivateColorsByUseCase('link', 'text');
+	$foreground: oPrivateColorsGetTextColor($background, $opacity: 100);
+	$link-text-color: oPrivateColorsByUsecase('link', 'text');
 	$link-contrasts-with-background: oColorsGetContrastRatio($background, $link-text-color) > 4.5;
 	// include oTopperColor on a parent then extend this placeholder on a
 	// descendent to lend that descendent the color you specified in the mixin
@@ -319,10 +319,10 @@
 		.o-topper__opinion-genre,
 		.o-topper__topic,
 		.o-topper__columnist-name {
-			color: oPrivateColorsByUseCase('tag-link', 'text');
+			color: oPrivateColorsByUsecase('tag-link', 'text');
 
 			&:hover {
-				color: oPrivateColorsByUseCase('tag-link-hover', 'text');
+				color: oPrivateColorsByUsecase('tag-link-hover', 'text');
 			}
 		}
 	}
@@ -342,7 +342,7 @@
 	@if $color-name == 'matisse' {
 		.o-topper__columnist-name {			
 			&:hover {
-				color: oColorsMix($foreground, $color-name, 73);
+				color: oPrivateColorsMix($foreground, $color-name, 73);
 			}
 		}
 		:focus-visible {

diff --git a/components/o-topper/src/scss/themes/_deep-portrait.scss b/components/o-topper/src/scss/themes/_deep-portrait.scss
@@ -37,7 +37,7 @@
 			&.o-topper--color-#{$color-name} {
 				.o-topper__image-caption {
 					$background: oPrivateFoundationGet($color-name);
-					$foreground: oColorsGetTextColor($background, $opacity: 100);
+					$foreground: oPrivateColorsGetTextColor($background, $opacity: 100);
 					color: oPrivateColorsMix($foreground, $color-name, 73);
 					background-color: $background;
 				}