chore(ui): cleanup unused color CSS (#7898)
Some checks are pending
/ release (push) Waiting to run
testing / backend-checks (push) Waiting to run
testing / frontend-checks (push) Waiting to run
testing / test-unit (push) Blocked by required conditions
testing / test-e2e (push) Blocked by required conditions
testing / test-remote-cacher (redis) (push) Blocked by required conditions
testing / test-remote-cacher (valkey) (push) Blocked by required conditions
testing / test-remote-cacher (garnet) (push) Blocked by required conditions
testing / test-remote-cacher (redict) (push) Blocked by required conditions
testing / test-mysql (push) Blocked by required conditions
testing / test-pgsql (push) Blocked by required conditions
testing / test-sqlite (push) Blocked by required conditions
testing / security-check (push) Blocked by required conditions

Careful removal of unused classes and rules from editable CSS. One class was used once in the UI and could have been easily replaced, others were only used in a devtest page.

Removed completely:
* pink
* olive
* violet
* background

Removed partially:
* blue

Some of them are also present in generated Fomantic code, but it's not possible to remove them easily here.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7898
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-05-19 14:04:28 +02:00 committed by Otto
parent b6dcae9b50
commit 75258cfa2a
5 changed files with 1 additions and 230 deletions

View file

@ -40,8 +40,6 @@
<button class="ui basic red button">Basic Red</button>
<button class="ui primary button">Green</button>
<button class="ui basic primary button">Basic Green</button>
<button class="ui blue button">Blue</button>
<button class="ui basic blue button">Basic Blue</button>
<button class="ui orange button">Orange</button>
<button class="ui basic orange button">Basic Orange</button>
<button class="ui yellow button">Yellow</button>
@ -52,16 +50,10 @@
<p>Do not use if there is no strong requirement. Do not use grey/black buttons, they don't work well with dark theme.</p>
<button class="ui secondary button">Secondary</button>
<button class="ui basic secondary button">Basic Secondary</button>
<button class="ui olive button">Olive</button>
<button class="ui basic olive button">Basic Olive</button>
<button class="ui teal button">Teal</button>
<button class="ui basic teal button">Basic Teal</button>
<button class="ui violet button">Violet</button>
<button class="ui basic violet button">Basic Violet</button>
<button class="ui purple button">Purple</button>
<button class="ui basic purple button">Basic Purple</button>
<button class="ui pink button">Pink</button>
<button class="ui basic pink button">Basic Pink</button>
<button class="ui brown button">Brown</button>
<button class="ui basic brown button">Basic Brown</button>
</li>

View file

@ -49,7 +49,7 @@
</div>
{{else}}
<div class="stats-table">
<a class="table-cell tiny background light grey"></a>
<a class="table-cell tiny tw-bg-grey"></a>
</div>
{{end}}
{{ctx.Locale.TrN .Activity.ActiveIssueCount "repo.activity.active_issues_count_1" "repo.activity.active_issues_count_n" .Activity.ActiveIssueCount}}

View file

@ -676,10 +676,6 @@ img.ui.avatar,
color: var(--color-yellow) !important;
}
.text.olive {
color: var(--color-olive) !important;
}
.text.green {
color: var(--color-green) !important;
}
@ -692,18 +688,10 @@ img.ui.avatar,
color: var(--color-blue) !important;
}
.text.violet {
color: var(--color-violet) !important;
}
.text.purple {
color: var(--color-purple) !important;
}
.text.pink {
color: var(--color-pink) !important;
}
.text.brown {
color: var(--color-brown) !important;
}
@ -853,46 +841,6 @@ img.ui.avatar,
font-weight: var(--font-weight-normal);
}
.ui .background.red {
background-color: var(--color-red) !important;
}
.ui .background.blue {
background-color: var(--color-blue) !important;
}
.ui .background.black {
background-color: var(--color-black) !important;
}
.ui .background.grey {
background-color: var(--color-grey) !important;
}
.ui .background.light.grey {
background-color: var(--color-grey) !important;
}
.ui .background.green {
background-color: var(--color-green) !important;
}
.ui .background.purple {
background-color: var(--color-purple) !important;
}
.ui .background.yellow {
background-color: var(--color-yellow) !important;
}
.ui .background.orange {
background-color: var(--color-orange) !important;
}
.ui .background.gold {
background-color: var(--color-gold) !important;
}
.ui .migrate {
color: var(--color-text-light-2) !important;
}

View file

@ -349,47 +349,6 @@ It needs some tricks to tweak the left/right borders with active state */
border-color: var(--color-yellow-dark-2);
}
/* olive */
.ui.olive.labels .label,
.ui.ui.ui.olive.label,
.ui.olive.button,
.ui.olive.buttons .button,
.ui.olive.button:focus,
.ui.olive.buttons .button:focus {
background: var(--color-olive);
}
.ui.olive.button:hover,
.ui.olive.buttons .button:hover {
background: var(--color-olive-dark-1);
}
.ui.olive.button:active,
.ui.olive.buttons .button:active {
background: var(--color-olive-dark-2);
}
.ui.basic.olive.buttons .button,
.ui.basic.olive.button,
.ui.basic.olive.buttons .button:focus,
.ui.basic.olive.button:focus {
color: var(--color-olive);
border-color: var(--color-olive);
}
.ui.basic.olive.buttons .button:hover,
.ui.basic.olive.button:hover {
color: var(--color-olive-dark-1);
border-color: var(--color-olive-dark-1);
}
.ui.basic.olive.buttons .button:active,
.ui.basic.olive.button:active {
color: var(--color-olive-dark-2);
border-color: var(--color-olive-dark-2);
}
/* green */
.ui.green.labels .label,
@ -472,88 +431,6 @@ It needs some tricks to tweak the left/right borders with active state */
border-color: var(--color-teal-dark-2);
}
/* blue */
.ui.blue.labels .label,
.ui.ui.ui.blue.label,
.ui.blue.button,
.ui.blue.buttons .button,
.ui.blue.button:focus,
.ui.blue.buttons .button:focus {
background: var(--color-blue);
}
.ui.blue.button:hover,
.ui.blue.buttons .button:hover {
background: var(--color-blue-dark-1);
}
.ui.blue.button:active,
.ui.blue.buttons .button:active {
background: var(--color-blue-dark-2);
}
.ui.basic.blue.buttons .button,
.ui.basic.blue.button,
.ui.basic.blue.buttons .button:focus,
.ui.basic.blue.button:focus {
color: var(--color-blue);
border-color: var(--color-blue);
}
.ui.basic.blue.buttons .button:hover,
.ui.basic.blue.button:hover {
color: var(--color-blue-dark-1);
border-color: var(--color-blue-dark-1);
}
.ui.basic.blue.buttons .button:active,
.ui.basic.blue.button:active {
color: var(--color-blue-dark-2);
border-color: var(--color-blue-dark-2);
}
/* violet */
.ui.violet.labels .label,
.ui.ui.ui.violet.label,
.ui.violet.button,
.ui.violet.buttons .button,
.ui.violet.button:focus,
.ui.violet.buttons .button:focus {
background: var(--color-violet);
}
.ui.violet.button:hover,
.ui.violet.buttons .button:hover {
background: var(--color-violet-dark-1);
}
.ui.violet.button:active,
.ui.violet.buttons .button:active {
background: var(--color-violet-dark-2);
}
.ui.basic.violet.buttons .button,
.ui.basic.violet.button,
.ui.basic.violet.buttons .button:focus,
.ui.basic.violet.button:focus {
color: var(--color-violet);
border-color: var(--color-violet);
}
.ui.basic.violet.buttons .button:hover,
.ui.basic.violet.button:hover {
color: var(--color-violet-dark-1);
border-color: var(--color-violet-dark-1);
}
.ui.basic.violet.buttons .button:active,
.ui.basic.violet.button:active {
color: var(--color-violet-dark-2);
border-color: var(--color-violet-dark-2);
}
/* purple */
.ui.purple.labels .label,
@ -595,47 +472,6 @@ It needs some tricks to tweak the left/right borders with active state */
border-color: var(--color-purple-dark-2);
}
/* pink */
.ui.pink.labels .label,
.ui.ui.ui.pink.label,
.ui.pink.button,
.ui.pink.buttons .button,
.ui.pink.button:focus,
.ui.pink.buttons .button:focus {
background: var(--color-pink);
}
.ui.pink.button:hover,
.ui.pink.buttons .button:hover {
background: var(--color-pink-dark-1);
}
.ui.pink.button:active,
.ui.pink.buttons .button:active {
background: var(--color-pink-dark-2);
}
.ui.basic.pink.buttons .button,
.ui.basic.pink.button,
.ui.basic.pink.buttons .button:focus,
.ui.basic.pink.button:focus {
color: var(--color-pink);
border-color: var(--color-pink);
}
.ui.basic.pink.buttons .button:hover,
.ui.basic.pink.button:hover {
color: var(--color-pink-dark-1);
border-color: var(--color-pink-dark-1);
}
.ui.basic.pink.buttons .button:active,
.ui.basic.pink.button:active {
color: var(--color-pink-dark-2);
border-color: var(--color-pink-dark-2);
}
/* brown */
.ui.brown.labels .label,

View file

@ -203,11 +203,6 @@ a.ui.ui.ui.basic.yellow.label:hover {
border-color: var(--color-yellow-dark-1);
color: var(--color-yellow-dark-1);
}
.ui.ui.ui.olive.label {
background: var(--color-olive);
border-color: var(--color-olive);
color: var(--color-white);
}
.ui.ui.ui.green.label {
background: var(--color-green);