[BUGFIX] Make text more readable, prefer lighter background colors

TYPO3 · Nov 25, 2024 · b54c432 · b54c432
1 parent b296aec
commit b54c432
Show file tree

Hide file tree

Showing 10 changed files with 10 additions and 10 deletions.
diff --git a/templates/default/composer-helper.html.twig b/templates/default/composer-helper.html.twig
@@ -10,7 +10,7 @@
         <h1>Composer Helper</h1>
     {% endframe %}
 
-    {% frame with { color: 'light' } %}
+    {% frame with { color: 'lighter' } %}
         <h2>Select the composer packages</h2>
         <div class="js-composer-helper-console d-none">
             <pre class="text-wrap bg-console"><div class="no-user-selection"># paste this into your console</div><code class="js-composer-command"><span class="no-user-selection">$ </span>composer require <span class="js-composer-helper-packages"></span></code></pre>

diff --git a/templates/default/composer-repository.html.twig b/templates/default/composer-repository.html.twig
@@ -17,7 +17,7 @@
         </div>
     {% endframe %}
 
-    {% frame with { color: 'light', id: 'what', title: "What Is It?" } %}
+    {% frame with { color: 'lighter', id: 'what', title: "What Is It?" } %}
         <p>TYPO3 offers a <a href="https://getcomposer.org/" target="_blank" rel="noopener">Composer</a> repository, enabling you to install TYPO3 extensions from the <a href="https://extensions.typo3.org">TYPO3 Extension Repository</a> (TER) including their TER dependencies via Composer. The packages are updated once every 15 minutes.</p>
         <p>This repository includes only the following TYPO3 CMS extensions:</p>
         <ul>

diff --git a/templates/default/composer.html.twig b/templates/default/composer.html.twig
@@ -11,7 +11,7 @@
         </p>
     {% endframe %}
 
-    {% frame with { color: 'light' } %}
+    {% frame with { color: 'lighter' } %}
         <h2>How to use it?</h2>
         <p>As a quick way to use Composer, the Base Distribution can be downloaded. It is assuming you have Composer already <a href="https://getcomposer.org/download/" target="_blank" rel="noopener">installed</a>
         on your system. Detailed information is available in the <a href="https://docs.typo3.org/installation">TYPO3 Documentation</a>.</p>

diff --git a/templates/default/elts.html.twig b/templates/default/elts.html.twig
@@ -7,7 +7,7 @@
         <p class="lead">The version you requested is only available as an Extended Long Term Support (ELTS) version.</p>
     {% endframe %}
 
-    {% frame with { color: 'light' } %}
+    {% frame with { color: 'lighter' } %}
         <h1 class="h2">How to get access to an ELTS version?</h1>
         <p>You can buy an ELTS license, for more information please visit:</p>
         <ul class="list-link">

diff --git a/templates/default/list.html.twig b/templates/default/list.html.twig
@@ -7,7 +7,7 @@
         <p class="lead">{{ currentVersion.subtitle }}</p>
     {% endframe %}
 
-    {% frame with { color: 'light', size: 'small' } %}
+    {% frame with { color: 'lighter', size: 'small' } %}
         <form action="">
             <div class="row">
                 <div class="col-sm-auto">

diff --git a/templates/default/partials/release-notes/version-selector.html.twig b/templates/default/partials/release-notes/version-selector.html.twig
@@ -1,4 +1,4 @@
-{% frame with { color: 'light', size: 'small' } %}
+{% frame with { color: 'lighter', size: 'small' } %}
     <form action="">
         <div class="row">
             <div class="col-sm-auto">

diff --git a/templates/default/partials/version/inactive.html.twig b/templates/default/partials/version/inactive.html.twig
@@ -1,5 +1,5 @@
 {% if elts %}
-    {% frame with { id: 'notice-elts', color: 'light', rulerBefore: true, title: 'Stay secure and up-to-date with TYPO3 ELTS!' } %}
+    {% frame with { id: 'notice-elts', color: 'lighter', rulerBefore: true, title: 'Stay secure and up-to-date with TYPO3 ELTS!' } %}
         <p>
             The TYPO3 CMS community supported from <strong>{{ releaseDate.format("Y-m-d") }}</strong>
             until <strong>{{ maintainedUntil|date("Y-m-d") }}</strong>.<br>

diff --git a/templates/default/partials/version/system-requirements.html.twig b/templates/default/partials/version/system-requirements.html.twig
@@ -1,4 +1,4 @@
-{% frame with { id: 'system-requirements', color: 'light', title: 'System Requirements' } %}
+{% frame with { id: 'system-requirements', color: 'lighter', title: 'System Requirements' } %}
     <p>For more information and installation instructions read the <a href="https://docs.typo3.org/m/typo3/tutorial-getting-started/master/en-us/SystemRequirements/Index.html" rel="noopener,noreferrer">Installation guide</a>.</p>
     <div class="card">
         <div class="datatable">

diff --git a/templates/default/root.html.twig b/templates/default/root.html.twig
@@ -217,7 +217,7 @@
         {% endframe %}
     {% endif %}
 
-    {% frame with { id: 'try-online', color: 'light', indent: true, center: true, title: 'Try it online', titleSize: 3 } %}
+    {% frame with { id: 'try-online', color: 'lighter', indent: true, center: true, title: 'Try it online', titleSize: 3 } %}
         <p>
             Install a complete Apache / MySQL / PHP environment with a TYPO3 package remotely as a SAAS / cloud
             based infrastructures to get started as quick as possible.

diff --git a/templates/default/version.html.twig b/templates/default/version.html.twig
@@ -7,7 +7,7 @@
         <p class="lead">{{ currentVersion.subtitle }}</p>
     {% endframe %}
 
-    {% frame with { color: 'light', size: 'small' } %}
+    {% frame with { color: 'lighter', size: 'small' } %}
         <form action="">
             <div class="row">
                 <div class="col-sm-auto">