fix: use BEM for inverse class naming

Financial-Times · Oct 6, 2023 · 1eb0d8a · 1eb0d8a
1 parent 64fc46b
commit 1eb0d8a
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/components/o-editorial-typography/demos/src/links-inverse.mustache b/components/o-editorial-typography/demos/src/links-inverse.mustache
@@ -1,4 +1,4 @@
-<p class="o-editorial-typography-body o-editorial-typography-inverse">
+<p class="o-editorial-typography-body o-editorial-typography--inverse">
 
     We have a <a href="#" class="o-editorial-typography-link">standard link</a> style.
     Links may open in a new window/tab but we <a href="https://www.w3.org/TR/WCAG20-TECHS/G200.html" class="o-editorial-typography-link">recommend against this</a> in most cases.

diff --git a/components/o-editorial-typography/main.scss b/components/o-editorial-typography/main.scss
@@ -67,7 +67,7 @@
 		.o-editorial-typography-body {
 			@include oEditorialTypographyBody();
 		}
-		.o-editorial-typography-inverse {
+		.o-editorial-typography--inverse {
 			--_o-editorial-typography-body-color: #{oColorsByName('white')};
 		}
 	}
@@ -78,9 +78,9 @@
 			@include oTypographyLink;
 		}
 
-		.o-editorial-typography-inverse {
+		.o-editorial-typography--inverse {
 			--_o-typography-link-color: #{_oEditorialTypographyGet('base', 'link-inverse')};
-			--_o-typography-link-decoration-color: #{_oEditorialTypographyGet('base-decoration', 'link-inverse')};				
+			--_o-typography-link-decoration-color: #{_oEditorialTypographyGet('base-decoration', 'link-inverse')};
 			--_o-typography-link-color-hover: #{_oEditorialTypographyGet('hover', 'link-inverse')};
 			--_o-typography-link-decoration-color-hover: #{_oEditorialTypographyGet('hover-decoration', 'link-inverse')};
 		}