Skip to content

Commit

Permalink
backstage: Remove o-buttons as an o-comments dependency
Browse files Browse the repository at this point in the history
  • Loading branch information
@notlee
notlee committed Nov 25, 2024
1 parent c83e828 commit be6f8c9
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 118 deletions.
3 changes: 1 addition & 2 deletions components/o-comments/main.scss
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
173 changes: 57 additions & 116 deletions components/o-comments/src/scss/coral-talk-iframe/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down Expand Up @@ -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;
}
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
}
}
Expand Down

0 comments on commit be6f8c9

Please sign in to comment.