Skip to content

Commit a8c023f

Browse files
laoneolaoneo
authored
[4.0] CSS variables should be generic (#34621)
1 parent fff2a56 commit a8c023f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+250
-219
lines changed

‎administrator/templates/atum/component.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@
2424
->useStyle('template.user')
2525
->addInlineStyle(':root {
2626
--hue: ' . $matches[1] . ';
27-
--atum-bg-light: ' . $this->params->get('bg-light', '--atum-bg-light') . ';
28-
--atum-text-dark: ' . $this->params->get('text-dark', '--atum-text-dark') . ';
29-
--atum-text-light: ' . $this->params->get('text-light', '--atum-text-light') . ';
30-
--atum-link-color: ' . $this->params->get('link-color', '--atum-link-color') . ';
31-
--atum-special-color: ' . $this->params->get('special-color', '--atum-special-color') . ';
27+
--template-bg-light: ' . $this->params->get('bg-light', '--template-bg-light') . ';
28+
--template-text-dark: ' . $this->params->get('text-dark', '--template-text-dark') . ';
29+
--template-text-light: ' . $this->params->get('text-light', '--template-text-light') . ';
30+
--template-link-color: ' . $this->params->get('link-color', '--template-link-color') . ';
31+
--template-special-color: ' . $this->params->get('special-color', '--template-special-color') . ';
3232
}');
3333

3434
// No template.js for modals

‎administrator/templates/atum/error_full.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -58,11 +58,11 @@
5858
->useStyle('template.user')
5959
->addInlineStyle(':root {
6060
--hue: ' . $matches[1] . ';
61-
--atum-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
62-
--atum-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
63-
--atum-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
64-
--atum-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
65-
--atum-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
61+
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
62+
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
63+
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
64+
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
65+
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
6666
}');
6767

6868
// Override 'template.active' asset to set correct ltr/rtl dependency

‎administrator/templates/atum/error_login.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
->useStyle('template.user')
6363
->addInlineStyle(':root {
6464
--hue: ' . $matches[1] . ';
65-
--atum-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
66-
--atum-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
67-
--atum-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
68-
--atum-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
69-
--atum-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
65+
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
66+
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
67+
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
68+
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
69+
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
7070
}');
7171

7272
// Override 'template.active' asset to set correct ltr/rtl dependency

‎administrator/templates/atum/index.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,11 @@
6666
->useStyle('template.user')
6767
->addInlineStyle(':root {
6868
--hue: ' . $matches[1] . ';
69-
--atum-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
70-
--atum-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
71-
--atum-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
72-
--atum-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
73-
--atum-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
69+
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
70+
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
71+
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
72+
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
73+
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
7474
}');
7575

7676
// Override 'template.active' asset to set correct ltr/rtl dependency

‎administrator/templates/atum/login.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@
6262
->useStyle('template.user')
6363
->addInlineStyle(':root {
6464
--hue: ' . $matches[1] . ';
65-
--atum-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
66-
--atum-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
67-
--atum-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
68-
--atum-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
69-
--atum-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
65+
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
66+
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
67+
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
68+
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
69+
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
7070
}');
7171

7272
// Override 'template.active' asset to set correct ltr/rtl dependency

‎administrator/templates/atum/scss/_variables.scss‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -73,39 +73,39 @@ $colors: (
7373
focus: $focuscolor,
7474
focus-shadow: $focusshadow,
7575
toggle-color: $white, //used in sidebar
76-
atum-sidebar-bg: var(--atum-bg-dark-80),
77-
atum-sidebar-font-color: $white,
78-
atum-sidebar-link-color: $white,
79-
atum-bg-light: #f0f4fb, //light background color, frontend dashboard background
80-
atum-text-light: $white,
81-
atum-special-color: $dark-blue,
82-
atum-link-color: $light-blue,
83-
atum-link-hover-color: darken($light-blue, 20%),
84-
atum-contrast: $light-blue,
85-
atum-bg-dark: hsl(var(--hue), 40%, 20%),
86-
atum-bg-dark-3: hsl(var(--hue), 40%, 97%),
87-
atum-bg-dark-5: hsl(var(--hue), 40%, 95%),
88-
atum-bg-dark-7: hsl(var(--hue), 40%, 93%),
89-
atum-bg-dark-10: hsl(var(--hue), 40%, 90%),
90-
atum-bg-dark-15: hsl(var(--hue), 40%, 85%),
91-
atum-bg-dark-20: hsl(var(--hue), 40%, 80%),
92-
atum-bg-dark-30: hsl(var(--hue), 40%, 70%),
93-
atum-bg-dark-40: hsl(var(--hue), 40%, 60%),
94-
atum-bg-dark-50: hsl(var(--hue), 40%, 50%),
95-
atum-bg-dark-60: hsl(var(--hue), 40%, 40%),
96-
atum-bg-dark-65: hsl(var(--hue), 40%, 35%),
97-
atum-bg-dark-70: hsl(var(--hue), 40%, 30%),
98-
atum-bg-dark-75: hsl(var(--hue), 40%, 25%),
99-
atum-bg-dark-80: hsl(var(--hue), 40%, 20%),
100-
atum-bg-dark-90: hsl(var(--hue), 40%, 10%)
76+
template-sidebar-bg: var(--template-bg-dark-80),
77+
template-sidebar-font-color: $white,
78+
template-sidebar-link-color: $white,
79+
template-bg-light: #f0f4fb, //light background color, frontend dashboard background
80+
template-text-light: $white,
81+
template-special-color: $dark-blue,
82+
template-link-color: $light-blue,
83+
template-link-hover-color: darken($light-blue, 20%),
84+
template-contrast: $light-blue,
85+
template-bg-dark: hsl(var(--hue), 40%, 20%),
86+
template-bg-dark-3: hsl(var(--hue), 40%, 97%),
87+
template-bg-dark-5: hsl(var(--hue), 40%, 95%),
88+
template-bg-dark-7: hsl(var(--hue), 40%, 93%),
89+
template-bg-dark-10: hsl(var(--hue), 40%, 90%),
90+
template-bg-dark-15: hsl(var(--hue), 40%, 85%),
91+
template-bg-dark-20: hsl(var(--hue), 40%, 80%),
92+
template-bg-dark-30: hsl(var(--hue), 40%, 70%),
93+
template-bg-dark-40: hsl(var(--hue), 40%, 60%),
94+
template-bg-dark-50: hsl(var(--hue), 40%, 50%),
95+
template-bg-dark-60: hsl(var(--hue), 40%, 40%),
96+
template-bg-dark-65: hsl(var(--hue), 40%, 35%),
97+
template-bg-dark-70: hsl(var(--hue), 40%, 30%),
98+
template-bg-dark-75: hsl(var(--hue), 40%, 25%),
99+
template-bg-dark-80: hsl(var(--hue), 40%, 20%),
100+
template-bg-dark-90: hsl(var(--hue), 40%, 10%)
101101
);
102102

103103
// Alerts
104104
$alert-border-level: 0;
105105
$alert-color-level: 0;
106106

107107
// Global
108-
$atum-box-shadow: 0 2px 10px -8px var(--atum-bg-dark-50);
108+
$atum-box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
109109
$enable-rounded: true;
110110
$input-box-shadow: inset 0 0 0 .1rem #e9e9e9;
111111
$input-btn-padding-y: .5rem;
@@ -133,7 +133,7 @@ $h3-font-size: 1.25rem;
133133
$h4-font-size: 1rem;
134134
$h5-font-size: .9286rem;
135135
$h6-font-size: .8571rem;
136-
$headings-color: var(--atum-bg-dark);
136+
$headings-color: var(--template-bg-dark);
137137
$font-size-sm: .8rem;
138138
$font-size-vsm: .6rem;
139139
$display1-size: 1rem;
@@ -159,7 +159,7 @@ $extrabold-weight: 800;
159159
$black-weight: 900;
160160

161161
// Text
162-
$body-color: var(--atum-text-dark); //only used in bootstrap, please use --atum-color-dark
162+
$body-color: var(--template-text-dark); //only used in bootstrap, please use --template-color-dark
163163

164164
// Tables
165165
$table-bg: var(--white);
@@ -172,7 +172,7 @@ $table-group-separator-color: $gray-300;
172172
// Dropdowns
173173
$dropdown-padding-y: 0;
174174
$dropdown-box-shadow: 0 1px 1px rgba($black, .15);
175-
$dropdown-link-hover-color: var(--atum-text-dark);
175+
$dropdown-link-hover-color: var(--template-text-dark);
176176
$dropdown-border-width: 1px;
177177
$dropdown-item-padding-y: .5rem;
178178
$dropdown-item-padding-x: .75rem;
@@ -187,9 +187,9 @@ $state-success-text: $success;
187187
$state-success-bg: lighten($success, 58%);
188188
$state-success-border: hsl(var(--hue),50%,93%);
189189

190-
$state-info-text: var(--atum-bg-dark-70);
190+
$state-info-text: var(--template-bg-dark-70);
191191
$state-info-bg: var(--white);
192-
$state-info-border: var(--atum-bg-dark-70);
192+
$state-info-border: var(--template-bg-dark-70);
193193

194194
$state-warning-text: darken($warning, 24%);
195195
$state-warning-bg: lighten($warning, 44%);
@@ -223,7 +223,7 @@ $info-txt: $white;
223223
// Input Group
224224
$input-group-addon-color: var(--white);
225225
$input-group-addon-bg: $base-color;
226-
$input-group-addon-border-color: var(--atum-bg-dark);
226+
$input-group-addon-border-color: var(--template-bg-dark);
227227

228228
// Treeselect
229229
$treeselect-line-height: 2.2rem;
@@ -241,7 +241,7 @@ $input-btn-submenu-icon-distance: 1rem;
241241

242242
// Custom form
243243
$form-select-indicator-padding: 3rem;
244-
$form-select-bg: var(--atum-bg-light);
244+
$form-select-bg: var(--template-bg-light);
245245
$form-select-bg-size: 116rem;
246246
$form-select-indicator: url("../images/select-bg.svg");
247247
$form-select-indicator-rtl: url("../images/select-bg-rtl.svg");
@@ -256,7 +256,7 @@ $form-file-button-color: var(--white);
256256

257257
//input
258258
$input-padding: .5rem 1rem;
259-
$input-border: solid 1px var(--atum-bg-dark-20);
259+
$input-border: solid 1px var(--template-bg-dark-20);
260260

261261
// Modals
262262
$modal-header-height: 2.875rem;
@@ -277,8 +277,8 @@ $grid-gutter-width-s: 15px;
277277
$breadcrumb-bg: var(--white);
278278

279279
// Links
280-
$link-color: var(--atum-link-color);
281-
$link-hover-color: var(--atum-link-hover-color);
280+
$link-color: var(--template-link-color);
281+
$link-hover-color: var(--template-link-hover-color);
282282
$link-decoration: none;
283283

284284
// Z-Index list

‎administrator/templates/atum/scss/blocks/_alerts.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
border-radius: $border-radius-sm;
88

99
&.alert-info {
10-
color: var(--atum-bg-dark);
11-
background-color: var(--atum-bg-dark-10);
12-
border: 1px solid var(--atum-bg-dark-20);
10+
color: var(--template-bg-dark);
11+
background-color: var(--template-bg-dark-10);
12+
border: 1px solid var(--template-bg-dark-20);
1313
}
1414

1515
&.alert-warning {

‎administrator/templates/atum/scss/blocks/_global.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ body {
1717
text-align: start;
1818

1919
&.admin {
20-
background-color: var(--atum-bg-dark-5);
20+
background-color: var(--template-bg-dark-5);
2121
}
2222

2323
&.monochrome {
@@ -30,7 +30,7 @@ body {
3030
width: 100%;
3131
height: 100%;
3232
content: "";
33-
background: var(--atum-bg-dark-5);
33+
background: var(--template-bg-dark-5);
3434
}
3535
}
3636

@@ -115,7 +115,7 @@ caption {
115115
.logo {
116116

117117
img path {
118-
fill: var(--atum-text-dark);
118+
fill: var(--template-text-dark);
119119
}
120120
}
121121

@@ -147,7 +147,7 @@ body .container-main {
147147
body:not(.contentpane) .main-card {
148148
background: $white;
149149
border-radius: $border-radius;
150-
box-shadow: 0 2px 10px -8px var(--atum-bg-dark-50);
150+
box-shadow: 0 2px 10px -8px var(--template-bg-dark-50);
151151
}
152152

153153
.row-selected {
@@ -198,7 +198,7 @@ a[target="_blank"]::before {
198198
}
199199

200200
.text-muted {
201-
color: var(--atum-text-dark) !important;
201+
color: var(--template-text-dark) !important;
202202
opacity: .7;
203203
}
204204

@@ -232,12 +232,12 @@ a[target="_blank"]::before {
232232
details {
233233
padding: .5rem 1rem;
234234
margin: 0 0 2rem;
235-
background: var(--atum-bg-dark-3);
236-
border: 1px solid var(--atum-bg-dark-10);
235+
background: var(--template-bg-dark-3);
236+
border: 1px solid var(--template-bg-dark-10);
237237
border-radius: $border-radius;
238238

239239
summary {
240-
color: var(--atum-link-color);
240+
color: var(--template-link-color);
241241

242242
~ * {
243243
margin-top: 1rem;
@@ -262,7 +262,7 @@ meter {
262262
--gutter-x: 4rem;
263263

264264
> * + * {
265-
border-left: 1px solid var(--atum-bg-dark-10);
265+
border-left: 1px solid var(--template-bg-dark-10);
266266
}
267267
}
268268
}

‎administrator/templates/atum/scss/blocks/_header.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
.header {
33
z-index: $zindex-header;
44
color: $white;
5-
background: var(--atum-bg-dark);
5+
background: var(--template-bg-dark);
66

77
&-inside {
88
display: flex;
@@ -24,7 +24,7 @@
2424
width: $sidebar-width;
2525
height: 100%;
2626
padding: 12px 5px;
27-
background-color: var(--atum-bg-dark-70);
27+
background-color: var(--template-bg-dark-70);
2828
transition: all .3s ease-in-out;
2929

3030
&.small {
@@ -80,21 +80,21 @@
8080
.dropdown-item {
8181
padding: .82rem .75rem;
8282
color: $white;
83-
background-color: var(--atum-bg-dark-70);
83+
background-color: var(--template-bg-dark-70);
8484

8585
> span {
8686
margin-inline-end: .5rem;
8787
}
8888

8989
&:hover {
90-
background-color: var(--atum-bg-dark);
90+
background-color: var(--template-bg-dark);
9191
}
9292
}
9393

9494
.dropdown-header {
9595
padding: .75rem;
9696
font-size: inherit;
97-
background-color: var(--atum-bg-dark);
97+
background-color: var(--template-bg-dark);
9898
}
9999
}
100100

@@ -125,7 +125,7 @@
125125
align-items: center;
126126
line-height: 1rem;
127127
color: $white;
128-
background-color: var(--atum-bg-dark-60);
128+
background-color: var(--template-bg-dark-60);
129129
border-radius: 22px;
130130
padding-inline-end: 4px;
131131

@@ -140,7 +140,7 @@
140140
}
141141

142142
&:not(.no-link):not(.joomlaversion):hover {
143-
background-color: var(--atum-bg-dark-50);
143+
background-color: var(--template-bg-dark-50);
144144
}
145145

146146
&.joomlaversion {
@@ -163,7 +163,7 @@
163163
height: 28px;
164164
margin: 4px;
165165
color: $white;
166-
background-color: var(--atum-bg-dark);
166+
background-color: var(--template-bg-dark);
167167
border-radius: 16px;
168168
}
169169

@@ -213,7 +213,7 @@
213213
width: 100%;
214214
padding: 10px 0;
215215
margin: 0;
216-
background: var(--atum-bg-dark);
216+
background: var(--template-bg-dark);
217217

218218
.#{$jicon-css-prefix}-angle-down,
219219
.#{$fa-css-prefix}-angle-down {

0 commit comments

Comments
 (0)