Skip to content

[WC-3414] improve css variables usage #321

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.

Sign up for GitHub

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

Merged
gjulivan merged 2 commits into from
Jun 22, 2026
Merged

[WC-3414] improve css variables usage #321

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f193e3e
chore: improve css variables support
gjulivan May 5, 2026
4a38867
fix: remove unused styling and add scss vars fallback
gjulivan Jun 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions packages/atlas-core/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),

## [Unreleased]

### Changed

- We removed legacy styling for switch widget below version 3.0.

### Fixed

- We added scss variables fallback for css variables styling in modal-dialog.

## [4.3.6] Atlas Core - 2026-4-23

### Fixed
Expand Down
31 changes: 16 additions & 15 deletions packages/atlas/src/themesource/atlas_core/web/core/widgets/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,40 @@
========================================================================== */
.modal-dialog {
.modal-content {
border: var(--border-width-default) solid var(--modal-header-border-color);
border: var(--border-width-default, $border-width-default) solid var(--modal-header-border-color, $modal-header-border-color);
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
background-color: var(--bg-color-secondary, $bg-color-secondary);

.modal-header {
padding: 15px 20px;
border-bottom-color: var(--modal-header-border-color);
border-bottom-color: var(--modal-header-border-color, $modal-header-border-color);
border-radius: 0; // Because of the class .mx-window-active in mxui.css
background-color: var(--modal-header-bg);
background-color: var(--modal-header-bg, $modal-header-bg);

h2, h4 {
margin: 0;
color: var(--modal-header-color);
color: var(--modal-header-color, $modal-header-color);
font-size: 16px;
font-weight: var(--font-weight-header);
font-weight: var(--font-weight-header, $font-weight-header);
}

.close {
margin-top: -3px;
opacity: 1;
font-weight: var(--font-weight-normal);
font-weight: var(--font-weight-normal, $font-weight-normal);
/* For IE8 and earlier */
color: var(--modal-header-color);
color: var(--modal-header-color, $modal-header-color);
text-shadow: none;
&:focus {
border-radius: 4px;
outline: 2px solid var(--brand-primary);
outline: 2px solid var(--brand-primary, $brand-primary);
}
}
}

.modal-body {
background-color: var(--modal-body-bg);
background-color: var(--modal-body-bg, $modal-body-bg);
}

.modal-footer {
Expand All @@ -54,7 +55,7 @@
margin-top: 0;
padding: 20px;
border-style: none;
background-color: var(--modal-footer-bg);
background-color: var(--modal-footer-bg, $modal-footer-bg);
}
}
}
Expand All @@ -77,8 +78,8 @@
justify-content: flex-end;
margin: 0;
padding: 20px;
text-align: var(--dataview-controls-alignment);
border-top: 1px solid var(--modal-header-border-color);
text-align: var(--dataview-controls-alignment, $dataview-controls-alignment);
border-top: 1px solid var(--modal-header-border-color, $modal-header-border-color);
}
}

Expand Down Expand Up @@ -106,13 +107,13 @@
input {
height: 56px;
padding: 12px 12px;
border: 1px solid var(--bg-color-secondary);
background: var(--bg-color-secondary);
border: 1px solid var(--bg-color-secondary, $bg-color-secondary);
background: var(--bg-color-secondary, $bg-color-secondary);
box-shadow: none;
font-size: 16px;

&:focus {
border-color: var(--brand-primary-200);
border-color: var(--brand-primary-200, $color-primary-light);
}
}
}
Expand Down
139 changes: 2 additions & 137 deletions packages/atlas/src/themesource/atlas_core/web/core/widgets/_switch.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

$default-android-color: #6fbeb5;
$default-ios-color: rgb(100, 189, 99);
$default-android-color: #6fbeb5 !default;
$default-ios-color: rgb(100, 189, 99) !default;

@mixin bootstrap-style-ios($brand-style) {
border-color: $brand-style;
Expand Down Expand Up @@ -43,104 +43,6 @@ $default-ios-color: rgb(100, 189, 99);
}
}

// maintained for backwards compatibility prior to Switch 3.0.0.
@mixin ios {
.widget-switch-btn-wrapper {
&.checked {
&.widget-switch-btn-wrapper-default {
@include bootstrap-style-ios($default-ios-color);
}

&.widget-switch-btn-wrapper-success {
@include bootstrap-style-ios(var(--brand-success));
}

&.widget-switch-btn-wrapper-info {
@include bootstrap-style-ios(var(--brand-primary-300));
}

&.widget-switch-btn-wrapper-primary {
@include bootstrap-style-ios(var(--brand-primary));
}

&.widget-switch-btn-wrapper-warning {
@include bootstrap-style-ios(var(--brand-warning));
}

&.widget-switch-btn-wrapper-danger {
@include bootstrap-style-ios(var(--brand-danger));
}

&.widget-switch-btn-wrapper-inverse {
@include bootstrap-style-ios(var(--brand-primary-600));
}
}
}
}

// maintained for backwards compatibility prior to Switch 3.0.0.
@mixin android {
.widget-switch-btn-wrapper {
&.checked {
&.widget-switch-btn-wrapper-default {
@include bootstrap-style-android($default-android-color);

.widget-switch-btn {
background: $default-android-color;
}
}

&.widget-switch-btn-wrapper-success {
@include bootstrap-style-android(var(--brand-success));

.widget-switch-btn {
background: var(--brand-success);
}
}

&.widget-switch-btn-wrapper-info {
@include bootstrap-style-android(var(--brand-primary-300));

.widget-switch-btn {
background: var(--brand-primary-300);
}
}

&.widget-switch-btn-wrapper-primary {
@include bootstrap-style-android(var(--brand-primary));

.widget-switch-btn {
background: var(--brand-primary);
}
}

&.widget-switch-btn-wrapper-warning {
@include bootstrap-style-android(var(--brand-warning));

.widget-switch-btn {
background: var(--brand-warning);
}
}

&.widget-switch-btn-wrapper-danger {
@include bootstrap-style-android(var(--brand-danger));

.widget-switch-btn {
background: var(--brand-danger);
}
}

&.widget-switch-btn-wrapper-inverse {
@include bootstrap-style-android(var(--brand-primary-600));

.widget-switch-btn {
background: var(--brand-primary-600);
}
}
}
}
}

@mixin switch() {
.widget-switch-btn-wrapper {
&:focus-visible {
Expand All @@ -162,41 +64,4 @@ $default-ios-color: rgb(100, 189, 99);
@include style("success", var(--brand-success));
@include style("warning", var(--brand-warning));
@include style("danger", var(--brand-danger));

// below is maintained for backwards compatibility prior to Switch 3.0.0.
div {
&.widget-switch {
&.iOS {
@include ios;
}

&.android {
@include android;
}

&.auto {
@include ios;
}
}
}

html {
div {
&.dj_android {
.widget-switch {
&.auto {
@include android;
}
}
}

&.dj_ios {
.widget-switch {
&.auto {
@include ios;
}
}
}
}
}
}
Loading