diff --git a/components/o-autocomplete/main.scss b/components/o-autocomplete/main.scss index 9077ad5ed0..f805245566 100644 --- 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 index a6c0584a0d..e6ed50fddf 100644 --- 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 index 2ad6816ec0..364c6d2521 100644 --- 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 index 2a4e5cdd0f..41ab0e8829 100644 --- 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 index ced7fc0e68..67e2396642 100644 --- 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 index da98c8caa3..c3db87fa62 100644 --- 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 index 818ccc99ae..96971f61f7 100644 --- 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 index 6a3707aa78..56a6aa2634 100644 --- 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; }