diff --git a/components/o-comments/main.scss b/components/o-comments/main.scss index 61cf023e82..b56c919e7f 100644 --- a/components/o-comments/main.scss +++ b/components/o-comments/main.scss @@ -1,6 +1,5 @@ @import "@financial-times/o-spacing/main"; -@import "@financial-times/o-private-foundations/main"; -@import "@financial-times/o-private-foundation/o-normalise"; +@import "@financial-times/o-private-foundation/main"; @import "@financial-times/o-colors/main"; @import "@financial-times/o-typography/main"; @import "@financial-times/o-editorial-typography/main"; diff --git a/components/o-comments/src/scss/coral-talk-iframe/main.scss b/components/o-comments/src/scss/coral-talk-iframe/main.scss index ce5afca8a8..1b285d0c61 100644 --- a/components/o-comments/src/scss/coral-talk-iframe/main.scss +++ b/components/o-comments/src/scss/coral-talk-iframe/main.scss @@ -152,48 +152,33 @@ ); border-width: 1px; - // normally, these should come for free with oButtons mixin - // but we have to declare this explicitly here because - // Coral styles override our styles for some reason + // We have to declare this explicitly here because + // Coral styles override our styles &[aria-pressed="true"], &[aria-current] { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "primary" + border-color: oPrivateFoundationGet( + "_o3-button-primary-standard-border" ) !important; border-top: 1px !important; border-bottom: 1px !important; } &[aria-selected="true"] { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; border-top: 1px !important; border-bottom: 1px solid - oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" - ) !important; + oPrivateFoundationGet("_o3-button-primary-standard-border") !important; } } @@ -238,37 +223,25 @@ // normally, these should come for free with oButtons mixin // but we have to declare this explicitly here because // Coral styles override our styles for some reason - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "primary" + border-color: oPrivateFoundationGet( + "_o3-button-primary-standard-border" ) !important; &:hover { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "primary" + border-color: oPrivateFoundationGet( + "_o3-button-primary-standard-border" ) !important; } } @@ -283,29 +256,21 @@ ) ); - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "secondary" + color: oPrivateFoundationGet( + "_o3-button-secondary-standard-color" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "secondary" + border-color: oPrivateFoundationGet( + "_o3-button-secondary-standard-border" ) !important; font-size: 12.18pt !important; font-family: var(--font-family-primary) !important; &:hover { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "secondary" + color: oPrivateFoundationGet( + "_o3-button-secondary-standard-color" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "secondary" + border-color: oPrivateFoundationGet( + "_o3-button-secondary-standard-border" ) !important; text-decoration: none !important; } @@ -392,37 +357,25 @@ ) ); - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "primary" + border-color: oPrivateFoundationGet( + "_o3-button-primary-standard-border" ) !important; &:hover { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "primary" + color: oPrivateFoundationGet( + "_o3-button-primary-standard-color" ) !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "primary" + background-color: oPrivateFoundationGet( + "_o3-button-primary-standard-background" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "primary" + border-color: oPrivateFoundationGet( + "_o3-button-primary-standard-border" ) !important; font-weight: var(--font-weight-primary-regular) !important; } @@ -470,22 +423,16 @@ "type": "secondary", ) ); - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "secondary" + color: oPrivateFoundationGet( + "_o3-button-secondary-standard-color" ) !important; - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "secondary" + border-color: oPrivateFoundationGet( + "_o3-button-secondary-standard-border" ) !important; border-radius: 0 !important; - background-color: oButtonsGetColor( - $state: "default", - $property: "background", - $type: "secondary" + background-color: oPrivateFoundationGet( + "_o3-button-secondary-standard-background" ) !important; } @@ -503,17 +450,13 @@ ) ); - border-color: oButtonsGetColor( - $state: "default", - $property: "border", - $type: "secondary" + border-color: oPrivateFoundationGet( + "_o3-button-secondary-standard-border" ) !important; &:hover { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "secondary" + color: oPrivateFoundationGet( + "_o3-button-secondary-standard-color" ) !important; } } @@ -583,10 +526,8 @@ // verify email resend button .coral-verifyEmail-resendButton { &:hover { - color: oButtonsGetColor( - $state: "default", - $property: "color", - $type: "secondary" + color: oPrivateFoundationGet( + "_o3-button-secondary-standard-color" ) !important; } }