Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: update Modal with semantic tokens (refs SFKUI-7034) #276

Merged
merged 1 commit into from
Feb 12, 2025

Conversation

johancarnegard
Copy link
Contributor

Modalen har nya komponentspecifika variabler för färger kopplat till de semantiska variablerna. Modalen har fått en transparent outline för att möjliggöra tillräcklig kontrast mot bakgrunden vid forced-color mode (aka högkontrastläge).

Copy link

github-actions bot commented Feb 11, 2025

PR Preview Action v1.6.0
Preview removed because the pull request was closed.
2025-02-12 12:17 UTC

--f-text-color-close-button: var(--f-text-color-default-inverted);
&--information #{$MODAL_SELECTOR}__shelf {
background-color: $modal-shelf-info-color-background;
.close-button {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Jag är ok med detta men vill ändå påpeka att det strider mot BEM.

Om vi tycker det är viktigt så bör vi lägga på ytterligare en klass på sträng-knappen.

@@ -42,7 +43,7 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
&__shelf {
justify-content: flex-end;
display: flex;
background-color: var(--f-background-modal-shelf);
Copy link
Contributor

@dvitamin dvitamin Feb 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • deprekera

@@ -151,17 +153,21 @@ $modal-width: calc(100vw - 40px) !default; // 100% - 20px each side;
}
}

&--information {
--f-background-modal-shelf: var(--f-border-color-info);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enda beroendet kvar till denna variablen, --f-border-color-info är i message-box. Föreslår att merga message-box-prn först #208 och sedan deprekera variablen i samband med denna prn.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deprekerat.

}

&--warning {
--f-background-modal-shelf: var(--f-border-color-warning);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enda beroendet kvar till denna variablen, --f-border-color-warning är i message-box. Föreslår att merga message-box-prn först #208 och sedan deprekera variablen i samband med denna prn.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deprekerat.

@dvitamin dvitamin force-pushed the feature/tokens_modal branch from 8d8c14c to 810f3e3 Compare February 12, 2025 11:35
@dvitamin dvitamin merged commit b759bc0 into main Feb 12, 2025
14 checks passed
@dvitamin dvitamin deleted the feature/tokens_modal branch February 12, 2025 12:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants