joomla
/
cms
mirror of https://github.com/joomla/joomla-cms.git
29
0
Fork 0
Code Packages Releases Activity

[4.4] Bootstrap 5.3 (#41101) 

* Upgrade to bootstrap 5.3

* Restore variable for b/c of com_media overrides

* Fixes for RGB conversions

* Fixes

* Don't use undefined var

* Oops

* Fix path

* New version of system template files

* Move prefix into the variables folder for other scss files

* Remove bs prefix
This commit is contained in:
George Wilson 2023-07-23 10:49:11 +01:00 committed by GitHub
parent 217b967c16
commit ca610ebd09
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 78 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
administrator/templates/atum/component.php
View File

@ -19,17 +19,21 @@ $wa = $this->getWebAssetManager();
// Get the hue value
preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$#i', $this->params->get('hue', 'hsl(214, 63%, 20%)'), $matches);
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
->useStyle('template.user')
->addInlineStyle(':root {
--hue: ' . $matches[1] . ';
--template-bg-light: ' . $this->params->get('bg-light', '--template-bg-light') . ';
--template-text-dark: ' . $this->params->get('text-dark', '--template-text-dark') . ';
--template-text-light: ' . $this->params->get('text-light', '--template-text-light') . ';
--template-link-color: ' . $this->params->get('link-color', '--template-link-color') . ';
--template-special-color: ' . $this->params->get('special-color', '--template-special-color') . ';
--template-bg-light: ' . $this->params->get('bg-light', 'var(--template-bg-light)') . ';
--template-text-dark: ' . $this->params->get('text-dark', 'var(--template-text-dark)') . ';
--template-text-light: ' . $this->params->get('text-light', 'var(--template-text-light)') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', 'var(--template-special-color)') . ';
}');
// No template.js for modals

6
administrator/templates/atum/error_full.php
View File

@ -54,6 +54,9 @@ $logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($th
// Get the hue value
preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$#i', $this->params->get('hue', 'hsl(214, 63%, 20%)'), $matches);
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
@ -63,7 +66,8 @@ $logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($th
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');

6
administrator/templates/atum/error_login.php
View File

@ -58,6 +58,9 @@ $loginLogoAlt = empty($this->params->get('loginLogoAlt')) && empty($this->params
// Get the hue value
preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$#i', $this->params->get('hue', 'hsl(214, 63%, 20%)'), $matches);
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
@ -67,7 +70,8 @@ $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');

6
administrator/templates/atum/index.php
View File

@ -61,6 +61,9 @@ $logoBrandSmallAlt = empty($this->params->get('logoBrandSmallAlt')) && empty($th
// Get the hue value
preg_match('#^hsla?\(([0-9]+)[\D]+([0-9]+)[\D]+([0-9]+)[\D]+([0-9](?:.\d+)?)?\)$#i', $this->params->get('hue', 'hsl(214, 63%, 20%)'), $matches);
$linkColor = $this->params->get('link-color', '#2a69b8');
list($r, $g, $b) = sscanf($linkColor, "#%02x%02x%02x");
// Enable assets
$wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
->useStyle('template.active.language')
@ -70,7 +73,8 @@ $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
--link-color: ' . $linkColor . ';
--link-color-rgb: ' . $r . ',' . $g . ',' . $b . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');

2
administrator/templates/atum/login.php
View File

@ -66,7 +66,7 @@ $wa->usePreset('template.atum.' . ($this->direction === 'rtl' ? 'rtl' : 'ltr'))
--template-bg-light: ' . $this->params->get('bg-light', '#f0f4fb') . ';
--template-text-dark: ' . $this->params->get('text-dark', '#495057') . ';
--template-text-light: ' . $this->params->get('text-light', '#ffffff') . ';
--template-link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
--link-color: ' . $this->params->get('link-color', '#2a69b8') . ';
--template-special-color: ' . $this->params->get('special-color', '#001B4C') . ';
}');

6
build/build-modules-js/javascript/build-bootstrap-js.es6.js
View File

@ -57,12 +57,6 @@ const build = async () => {
],
}),
],
external: [
'./base-component.js',
...domImports.map((file) => `./dom/${file}`),
...domImports.map((file) => `./${file}`),
...utilImports.map((file) => `./util/${file}`),
],
manualChunks: {
alert: ['build/media_source/vendor/bootstrap/js/alert.es6.js'],
button: ['build/media_source/vendor/bootstrap/js/button.es6.js'],

13
build/media_source/templates/administrator/atum/scss/_variables.scss
View File

@ -1,3 +1,9 @@
// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
$prefix: "";
// Disable dark mode in J4.4 - it's going to cause major b/c breaks to introduce. We will enable it in 5.0
$enable-dark-mode: false;
// Variables
$white: #fff;
$whiteoffset: #fefefe;
@ -55,10 +61,9 @@ $atum-colors: (
template-sidebar-font-color: $white,
template-sidebar-link-color: $white,
template-bg-light: #f0f4fb, //light background color, frontend dashboard background
template-link-color: var(--link-color),
template-text-light: $white,
template-special-color: $dark-blue,
template-link-color: $light-blue,
template-link-hover-color: darken($light-blue, 20%),
template-contrast: $light-blue,
template-bg-dark: hsl(var(--hue), 40%, 20%),
template-bg-dark-3: hsl(var(--hue), 40%, 97%),
@ -269,8 +274,8 @@ $grid-gutter-width-s: 15px;
$breadcrumb-bg: var(--white);
// Links
$link-color: var(--template-link-color);
$link-hover-color: var(--template-link-hover-color);
$link-color: $light-blue;
$link-hover-color: darken($light-blue, 20%);
$link-decoration: none;
// Z-Index list

8
build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
View File

@ -22,7 +22,7 @@
}
a {
color: var(--template-link-color);
color: var(--#{$prefix}link-color);
}
h2 {
@ -49,7 +49,7 @@
}
a {
color: var(--template-link-color);
color: var(--#{$prefix}link-color);
}
h2 {
@ -187,11 +187,11 @@
display: block;
padding: .5rem;
color: rgba(255, 255, 255, .9);
background: var(--template-link-color);
background: var(--#{$prefix}link-color);
box-shadow: $atum-box-shadow;
&:hover {
background: var(--template-link-hover-color);
background: var(--#{$prefix}link-hover-color);
}
}
}

4
build/media_source/templates/administrator/atum/scss/template.scss
View File

@ -1,6 +1,3 @@
// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
$prefix: "";
// Bootstrap functions
@import "../../../../../../media/vendor/bootstrap/scss/functions";
@ -8,6 +5,7 @@ $prefix: "";
@import "variables";
@import "../../../../../../media/vendor/bootstrap/scss/variables";
@import "../../../../../../media/vendor/bootstrap/scss/variables-dark";
@import "../../../../../../media/vendor/bootstrap/scss/maps";
@import "../../../../../../media/vendor/bootstrap/scss/mixins";
@import "../../../../../../media/vendor/bootstrap/scss/utilities";

2
build/media_source/templates/site/cassiopeia/scss/blocks/_frontend-edit.scss
View File

@ -6,7 +6,7 @@
right: 0;
left: auto;
z-index: 900;
color: var(--cassiopeia-color-link);
color: var(--#{$prefix}link-color);
background-color: rgba(255,255,255,.5);
border: 1px solid #58595a;
border-radius: .25rem;

6
build/media_source/templates/site/cassiopeia/scss/blocks/_global.scss
View File

@ -54,7 +54,7 @@ h6 {
}
a {
color: var(--cassiopeia-color-link);
color: var(--#{$prefix}link-color);
&:not([class]) {
text-decoration: underline;
@ -216,9 +216,9 @@ meter {
}
.page-link {
color: var(--cassiopeia-color-link);
color: var(--#{$prefix}link-color);
&:hover {
color: var(--cassiopeia-color-link);
color: var(--#{$prefix}link-color);
}
}

4
build/media_source/templates/site/cassiopeia/scss/global/colors_alternative.scss
View File

@ -1,8 +1,12 @@
// Variables, Functions and Mixins
@import "../tools/tools";
@import "../../../../../../../media/vendor/bootstrap/scss/functions";
:root {
--cassiopeia-color-primary: #{$alternative-color-primary};
// @deprecated --casiopeia-color-link is deprecated in favour of --link-color
--cassiopeia-color-link: #{$alternative-color-link};
--link-color: #{$alternative-color-link};
--link-color-rgb: #{to-rgb($alternative-color-link)};
--cassiopeia-color-hover: #{$alternative-color-hover};
}

4
build/media_source/templates/site/cassiopeia/scss/global/colors_standard.scss
View File

@ -1,8 +1,12 @@
// Variables, Functions and Mixins
@import "../tools/tools";
@import "../../../../../../../media/vendor/bootstrap/scss/functions";
:root {
--cassiopeia-color-primary: #{$standard-color-primary};
// @deprecated --casiopeia-color-link is deprecated in favour of --link-color
--cassiopeia-color-link: #{$standard-color-link};
--link-color: #{$standard-color-link};
--link-color-rgb: #{to-rgb($standard-color-link)};
--cassiopeia-color-hover: #{$standard-color-hover};
}

4
build/media_source/templates/site/cassiopeia/scss/template.scss
View File

@ -1,10 +1,8 @@
// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
$prefix: "";
// Bootstrap functions
@import "../../../../../../media/vendor/bootstrap/scss/functions";
@import "tools/variables/variables";
@import "../../../../../../media/vendor/bootstrap/scss/variables";
@import "../../../../../../media/vendor/bootstrap/scss/variables-dark";
@import "../../../../../../media/vendor/bootstrap/scss/maps";
@import "../../../../../../media/vendor/bootstrap/scss/mixins";
@import "../../../../../../media/vendor/bootstrap/scss/utilities";

10
build/media_source/templates/site/cassiopeia/scss/tools/variables/_variables.scss
View File

@ -1,3 +1,9 @@
// Remove prefix added in BS5 for compat with Joomla beta's shipped with Betas
$prefix: "";
// Disable dark mode in J4.4 - it's going to cause major b/c breaks to introduce. We will enable it in 5.0
$enable-dark-mode: false;
// Global
$cassiopeia-container-main-bg: hsl(0, 0%, 95%) !default;
$cassiopeia-border-color: hsl(210, 14%, 89%) !default;
@ -136,8 +142,8 @@ $cassiopeia-colors: (
) !default;
// Links
$link-color: var(--cassiopeia-color-link) !default;
$link-hover-color: var(--cassiopeia-color-hover) !default;
$link-color: $standard-color-link !default;
$link-hover-color: $standard-color-hover !default;
// Breadcrumbs
$breadcrumb-active-color: $gray-700 !default;

1
build/media_source/templates/site/cassiopeia/scss/vendor/_chosen.scss vendored
View File

@ -8,7 +8,6 @@ $chosen-select-padding-y: $form-select-padding-y + .21;
.chosen-single {
display: inline-block;
$select-border-width: ($form-select-border-width * 2);
height: #{$input-height};
padding: $chosen-select-padding-y ($form-select-padding-x + $form-select-indicator-padding) $chosen-select-padding-y $form-select-padding-x;
line-height: 1.5;

2
installation/template/index.php
View File

@ -32,7 +32,7 @@ $this->getWebAssetManager()
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--link-color: #2a69b8;
--template-special-color: #001b4c;
}');

2
installation/template/scss/template.scss
View File

@ -205,7 +205,7 @@ body {
color: $white;
&:hover {
color: var(--template-link-color);
color: var(--#{$prefix}link-color);
}
}
}

16
package-lock.json generated
View File

@ -17,7 +17,7 @@
"@webcomponents/webcomponentsjs": "^2.8.0",
"accessibility": "^3.0.17",
"awesomplete": "^1.1.5",
"bootstrap": "~5.2.3",
"bootstrap": "~5.3.0",
"choices.js": "^9.1.0",
"chosen-js": "^1.8.7",
"codemirror": "^5.65.13",
@ -2959,9 +2959,9 @@
"dev": true
},
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
"integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
"funding": [
{
"type": "github",
@ -2973,7 +2973,7 @@
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
"@popperjs/core": "^2.11.7"
}
},
"node_modules/brace-expansion": {
@ -12241,9 +12241,9 @@
"dev": true
},
"bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
"integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==",
"requires": {}
},
"brace-expansion": {

2
package.json
View File

@ -44,7 +44,7 @@
"@webcomponents/webcomponentsjs": "^2.8.0",
"accessibility": "^3.0.17",
"awesomplete": "^1.1.5",
"bootstrap": "~5.2.3",
"bootstrap": "~5.3.0",
"choices.js": "^9.1.0",
"chosen-js": "^1.8.7",
"codemirror": "^5.65.13",

2
templates/cassiopeia/component.php
View File

@ -56,7 +56,7 @@ $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'l
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--link-color: var(--link-color);
--template-special-color: #001B4C;
$fontStyles
}");

2
templates/cassiopeia/error.php
View File

@ -72,7 +72,7 @@ $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'l
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--link-color: var(--link-color);
--template-special-color: #001B4C;
$fontStyles
}");

2
templates/cassiopeia/index.php
View File

@ -74,7 +74,7 @@ $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'l
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--template-link-color: var(--link-color);
--template-special-color: #001B4C;
$fontStyles
}");

2
templates/cassiopeia/offline.php
View File

@ -67,7 +67,7 @@ $wa->usePreset('template.cassiopeia.' . ($this->direction === 'rtl' ? 'rtl' : 'l
--template-bg-light: #f0f4fb;
--template-text-dark: #495057;
--template-text-light: #ffffff;
--template-link-color: #2a69b8;
--link-color: var(--link-color);
--template-special-color: #001B4C;
$fontStyles
}");

2
templates/system/build_incomplete.html
View File

File diff suppressed because one or more lines are too long

2
templates/system/fatal-error.html
View File

File diff suppressed because one or more lines are too long

2
templates/system/incompatible.html
View File

File diff suppressed because one or more lines are too long