From 09052f799cef2e6a8fcaa8b848e2c24ea63a214b Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Fri, 22 May 2026 15:57:41 +0700 Subject: [PATCH 1/8] add panel --- stylesheets/commons/Panels.scss | 45 +++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/stylesheets/commons/Panels.scss b/stylesheets/commons/Panels.scss index 765b4546739..1defbce358e 100644 --- a/stylesheets/commons/Panels.scss +++ b/stylesheets/commons/Panels.scss @@ -2,6 +2,51 @@ Template(s): Panels Author(s): FO-nTTaX *******************************************************************************/ + +/* These variable definitions is used for theme detection on the function below */ +$clr-sun-10: var( --clr-sun-10 ); +$clr-tuliptree-10: var( --clr-tuliptree-10 ); +$clr-redviolet-10: var( --clr-redviolet-10 ); +$clr-gigas-10: var( --clr-gigas-10 ); +$clr-forest-10: var( --clr-forest-10 ); +$clr-wiki-theme-10: var( --clr-wiki-theme-10 ); + +/* Check if the wiki color is included in the theme, + if it is, use the wiki colors for panels, + if not, use the default colors */ +@function isWikiColorIncluded() { + @return index( ( $clr-sun-10, $clr-tuliptree-10, $clr-redviolet-10, $clr-gigas-10, $clr-forest-10 ), $clr-wiki-theme-10 ); +} + +$panel-box-border-color--light: color-mix( in srgb, var( --clr-wiki-primary-container ) 16%, #000000 ); +$panel-box-border-color--dark: var( --clr-surface-3 ); +$panel-box-color--light: var( --clr-wiki-on-primary-container ); +$panel-box-color--dark: var( --clr-wiki-on-primary-container ); +$panel-header-background-color--light: var( --clr-wiki-primary-container ); +$panel-header-background-color--dark: color-mix( in srgb, var( --clr-wiki-primary-container ) 16%, #000000 ); + +/* Panel box */ +@if isWikiColorIncluded() { + $panel-box-border-color--light: var( --clr-wiki-theme-80 ); + $panel-box-border-color--dark: var( --clr-wiki-theme-30 ); + $panel-box-color--light: var( --clr-wiki-theme-10 ); + $panel-box-color--dark: var( --clr-wiki-theme-90 ); + $panel-header-background-color--light: var( --clr-wiki-theme-90 ); + $panel-header-background-color--dark: var( --clr-wiki-theme-20 ); +} + +.theme--light,{ + --panel-box-border-color: #{$panel-box-border-color--light}; + --panel-box-color: #{$panel-box-color--light}; + --panel-header-background-color: #{$panel-header-background-color--light}; +} + +.theme--dark,{ + --panel-box-border-color: #{$panel-box-border-color--dark}; + --panel-box-color: #{$panel-box-color--dark}; + --panel-header-background-color: #{$panel-header-background-color--dark}; +} + // Add html prefix to get higher specificity html .panel-box { margin-bottom: 10px; From 780af6f0092bd13deaae5d00c4b771f3af8f0337 Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 06:38:44 +0700 Subject: [PATCH 2/8] add button --- stylesheets/commons/Panels.scss | 8 ++--- stylesheets/commons/TeamPortal.scss | 54 +++++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 4 deletions(-) diff --git a/stylesheets/commons/Panels.scss b/stylesheets/commons/Panels.scss index 1defbce358e..48a153fdd94 100644 --- a/stylesheets/commons/Panels.scss +++ b/stylesheets/commons/Panels.scss @@ -11,8 +11,8 @@ $clr-gigas-10: var( --clr-gigas-10 ); $clr-forest-10: var( --clr-forest-10 ); $clr-wiki-theme-10: var( --clr-wiki-theme-10 ); -/* Check if the wiki color is included in the theme, - if it is, use the wiki colors for panels, +/* Check if the wiki color is included in the theme, + if it is, use the wiki colors for panels, if not, use the default colors */ @function isWikiColorIncluded() { @return index( ( $clr-sun-10, $clr-tuliptree-10, $clr-redviolet-10, $clr-gigas-10, $clr-forest-10 ), $clr-wiki-theme-10 ); @@ -35,13 +35,13 @@ $panel-header-background-color--dark: color-mix( in srgb, var( --clr-wiki-primar $panel-header-background-color--dark: var( --clr-wiki-theme-20 ); } -.theme--light,{ +.theme--light, { --panel-box-border-color: #{$panel-box-border-color--light}; --panel-box-color: #{$panel-box-color--light}; --panel-header-background-color: #{$panel-header-background-color--light}; } -.theme--dark,{ +.theme--dark, { --panel-box-border-color: #{$panel-box-border-color--dark}; --panel-box-color: #{$panel-box-color--dark}; --panel-header-background-color: #{$panel-header-background-color--dark}; diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss index f7b4500a371..ae01954e4f9 100644 --- a/stylesheets/commons/TeamPortal.scss +++ b/stylesheets/commons/TeamPortal.scss @@ -2,6 +2,60 @@ Template(s): Team Portal Boxes Author(s): salle *******************************************************************************/ + +/* Buttons - General */ +$button-background-color--light: var( --clr-primary ); +$button-background-color--dark: var( --clr-wiki-theme-color-20 ); +$button-background-color-hover--light: color-mix( in srgb, var( --clr-primary ), 16%, #ffffff ); +$button-background-color-hover--dark: color-mix( in srgb, #000000, var( --clr-wiki-theme-color-20 ), 16% ); +$button-background-color-focus--light: color-mix( in srgb, #ffffff, var( --clr-primary ), 12% ); +$button-background-color-focus--dark: color-mix( in srgb, #ffffff, var( --clr-wiki-theme-color-20 ), 12% ); +$button-background-color-active--light: color-mix( in srgb, #ffffff, var( --clr-primary ), 8% ); +$button-background-color-active--dark: color-mix( in srgb, #ffffff, var( --clr-wiki-theme-color-20 ), 8% ); +$button-background-color-disabled--light: color-mix( in srgb, #000000, #e3e3e3, 12% ); +$button-background-color-disabled--dark: color-mix( in srgb, #ffffff, #1f1f1f, 12% ); +$button-border-color-focus--light: var( --clr-wiki-theme-color-20 ); +$button-border-color-focus--dark: var( --clr-wiki-theme-color-40 ); +$button-color--light: var( --clr-on-primary ); +$button-color--dark: #ffffff; +$button-secondary-background-color-hover--light: rgba( var( --clr-primary ), 0.08 ); +$button-secondary-background-color-hover--dark: rgba( var( --clr-primary ), 0.08 ); +$button-secondary-color--light: var( --clr-primary-30 ); +$button-secondary-color--dark: var( --clr-primary-80 ); +$button-error-color--light: var( --clr-semantic-negative-40 ); +$button-error-color--dark: var( --clr-semantic-negative-80 ); + +$button-new-primary-color--light: var( --clr-wiki-theme-color-40 ); +$button-new-primary-color--dark: var( --clr-wiki-theme-color-30 ); + +:root { + --button-background-color: #{$button-background-color--light}; + --button-background-color-hover: #{$button-background-color-hover--light}; + --button-background-color-focus: #{$button-background-color-focus--light}; + --button-background-color-active: #{$button-background-color-active--light}; + --button-background-color-disabled: #{$button-background-color-disabled--light}; + --button-border-color-focus: #{$button-border-color-focus--light}; + --button-color: #{$button-color--light}; + --button-secondary-background-color-hover: #{$button-secondary-background-color-hover--light}; + --button-secondary-color: #{$button-secondary-color--light}; + --button-error-color: #{$button-error-color--light}; + --button-new-primary-color: #{$button-new-primary-color--light}; +} + +.theme--dark { + --button-background-color: #{$button-background-color--dark}; + --button-background-color-hover: #{$button-background-color-hover--dark}; + --button-background-color-focus: #{$button-background-color-focus--dark}; + --button-background-color-active: #{$button-background-color-active--dark}; + --button-background-color-disabled: #{$button-background-color-disabled--dark}; + --button-border-color-focus: #{$button-border-color-focus--dark}; + --button-color: #{$button-color--dark}; + --button-secondary-background-color-hover: #{$button-secondary-background-color-hover--dark}; + --button-secondary-color: #{$button-secondary-color--dark}; + --button-error-color: #{$button-error-color--dark}; + --button-new-primary-color: #{$button-new-primary-color--dark}; +} + .team-portal-list { max-width: 970px; } From e731343733fab87e8ed97e9bee2e1bc56ae61358 Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 06:47:14 +0700 Subject: [PATCH 3/8] add matches and tournaments --- stylesheets/commons/Mainpage.scss | 35 +++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/stylesheets/commons/Mainpage.scss b/stylesheets/commons/Mainpage.scss index 1ebdbc23fca..4c08f173bfe 100644 --- a/stylesheets/commons/Mainpage.scss +++ b/stylesheets/commons/Mainpage.scss @@ -2,6 +2,41 @@ Template(s): Main Page Author(s): FO-nTTaX, salle *******************************************************************************/ + +/* Matches */ +$matches-transfer-green-background-color--light: rgba( 0, 255, 0, 0.065 ); +$matches-transfer-green-background-color--dark: var( --clr-semantic-positive-10 ); +$matches-transfer-red-background-color--light: rgba( 153, 0, 34, 0.065 ); +$matches-transfer-red-background-color--dark: var( --clr-semantic-negative-10 ); +$matches-toggle-button-background-color--light: color-mix( in srgb, #ffffff, var( --clr-wiki-primary-container ), 32% ); +$matches-toggle-button-background-color--dark: var( --clr-wiki-theme-20 ); +$matches-toggle-button-hover-background-color--light: color-mix( in srgb, #ffffff, var( --clr-wiki-primary-container ), 50% ); +$matches-toggle-button-hover-background-color--dark: var( --clr-wiki-theme-30 ); +$matches-toggle-button-color--light: var( --clr-wiki-on-primary-container ); +$matches-toggle-button-color--dark: var( --clr-wiki-theme-90 ); + +/* Tournaments */ +$tournament-list-header-background-color--light: var( --clr-surface-4 ); +$tournament-list-header-background-color--dark: color-mix( in srgb, #000000, var( --clr-wiki-theme-20 ), 20% ); + +:root { + --matches-transfer-red-background-color: #{$matches-transfer-red-background-color--light}; + --matches-transfer-green-background-color: #{$matches-transfer-green-background-color--light}; + --matches-toggle-button-background-color: #{$matches-toggle-button-background-color--light}; + --matches-toggle-button-hover-background-color: #{$matches-toggle-button-hover-background-color--light}; + --matches-toggle-button-color: #{$matches-toggle-button-color--light}; + --tournament-list-header-background-color: #{$tournament-list-header-background-color--light}; +} + +.theme--dark { + --matches-transfer-red-background-color: #{$matches-transfer-red-background-color--dark}; + --matches-transfer-green-background-color: #{$matches-transfer-green-background-color--dark}; + --matches-toggle-button-background-color: #{$matches-toggle-button-background-color--dark}; + --matches-toggle-button-hover-background-color: #{$matches-toggle-button-hover-background-color--dark}; + --matches-toggle-button-color: #{$matches-toggle-button-color--dark}; + --tournament-list-header-background-color: #{$tournament-list-header-background-color--dark}; +} + .mainpage-v2 { display: flex; flex-flow: column nowrap; From 5e2fc8947c5467ba51a7204f419475b9bad14398 Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 10:55:24 +0700 Subject: [PATCH 4/8] fix copilot review --- stylesheets/commons/Mainpage.scss | 6 +-- stylesheets/commons/Panels.scss | 61 ++++++++++++----------------- stylesheets/commons/TeamPortal.scss | 20 +++++----- 3 files changed, 37 insertions(+), 50 deletions(-) diff --git a/stylesheets/commons/Mainpage.scss b/stylesheets/commons/Mainpage.scss index 4c08f173bfe..c895ac14199 100644 --- a/stylesheets/commons/Mainpage.scss +++ b/stylesheets/commons/Mainpage.scss @@ -8,16 +8,16 @@ $matches-transfer-green-background-color--light: rgba( 0, 255, 0, 0.065 ); $matches-transfer-green-background-color--dark: var( --clr-semantic-positive-10 ); $matches-transfer-red-background-color--light: rgba( 153, 0, 34, 0.065 ); $matches-transfer-red-background-color--dark: var( --clr-semantic-negative-10 ); -$matches-toggle-button-background-color--light: color-mix( in srgb, #ffffff, var( --clr-wiki-primary-container ), 32% ); +$matches-toggle-button-background-color--light: color-mix( in srgb, #ffffff 32%, var( --clr-wiki-primary-container ) ); $matches-toggle-button-background-color--dark: var( --clr-wiki-theme-20 ); -$matches-toggle-button-hover-background-color--light: color-mix( in srgb, #ffffff, var( --clr-wiki-primary-container ), 50% ); +$matches-toggle-button-hover-background-color--light: color-mix( in srgb, #ffffff 50%, var( --clr-wiki-primary-container ) ); $matches-toggle-button-hover-background-color--dark: var( --clr-wiki-theme-30 ); $matches-toggle-button-color--light: var( --clr-wiki-on-primary-container ); $matches-toggle-button-color--dark: var( --clr-wiki-theme-90 ); /* Tournaments */ $tournament-list-header-background-color--light: var( --clr-surface-4 ); -$tournament-list-header-background-color--dark: color-mix( in srgb, #000000, var( --clr-wiki-theme-20 ), 20% ); +$tournament-list-header-background-color--dark: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-20 ) ); :root { --matches-transfer-red-background-color: #{$matches-transfer-red-background-color--light}; diff --git a/stylesheets/commons/Panels.scss b/stylesheets/commons/Panels.scss index 48a153fdd94..ce39fbc37d9 100644 --- a/stylesheets/commons/Panels.scss +++ b/stylesheets/commons/Panels.scss @@ -3,48 +3,35 @@ Template(s): Panels Author(s): FO-nTTaX *******************************************************************************/ -/* These variable definitions is used for theme detection on the function below */ -$clr-sun-10: var( --clr-sun-10 ); -$clr-tuliptree-10: var( --clr-tuliptree-10 ); -$clr-redviolet-10: var( --clr-redviolet-10 ); -$clr-gigas-10: var( --clr-gigas-10 ); -$clr-forest-10: var( --clr-forest-10 ); -$clr-wiki-theme-10: var( --clr-wiki-theme-10 ); - -/* Check if the wiki color is included in the theme, - if it is, use the wiki colors for panels, - if not, use the default colors */ -@function isWikiColorIncluded() { - @return index( ( $clr-sun-10, $clr-tuliptree-10, $clr-redviolet-10, $clr-gigas-10, $clr-forest-10 ), $clr-wiki-theme-10 ); -} - -$panel-box-border-color--light: color-mix( in srgb, var( --clr-wiki-primary-container ) 16%, #000000 ); -$panel-box-border-color--dark: var( --clr-surface-3 ); -$panel-box-color--light: var( --clr-wiki-on-primary-container ); -$panel-box-color--dark: var( --clr-wiki-on-primary-container ); -$panel-header-background-color--light: var( --clr-wiki-primary-container ); -$panel-header-background-color--dark: color-mix( in srgb, var( --clr-wiki-primary-container ) 16%, #000000 ); - /* Panel box */ -@if isWikiColorIncluded() { - $panel-box-border-color--light: var( --clr-wiki-theme-80 ); - $panel-box-border-color--dark: var( --clr-wiki-theme-30 ); - $panel-box-color--light: var( --clr-wiki-theme-10 ); - $panel-box-color--dark: var( --clr-wiki-theme-90 ); - $panel-header-background-color--light: var( --clr-wiki-theme-90 ); - $panel-header-background-color--dark: var( --clr-wiki-theme-20 ); +/* Default values */ +.theme--light { + --panel-box-border-color: color-mix( in srgb, #000000 16%, var( --clr-wiki-primary-container ) ); + --panel-box-color: var( --clr-wiki-on-primary-container ); + --panel-header-background-color: var( --clr-wiki-primary-container ); } -.theme--light, { - --panel-box-border-color: #{$panel-box-border-color--light}; - --panel-box-color: #{$panel-box-color--light}; - --panel-header-background-color: #{$panel-header-background-color--light}; +.theme--dark { + --panel-box-border-color: var( --clr-surface-3 ); + --panel-box-color: var( --clr-wiki-on-primary-container ); + --panel-header-background-color: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-color-20 ) ); } -.theme--dark, { - --panel-box-border-color: #{$panel-box-border-color--dark}; - --panel-box-color: #{$panel-box-color--dark}; - --panel-header-background-color: #{$panel-header-background-color--dark}; +/* If theme was in the known list */ +$themes: sun, tuliptree, redviolet, gigas, forest; + +@each $theme in $themes { + html[data-wiki-theme='#{$theme}'].theme--light { + --panel-box-border-color: var( --clr-#{$theme}-80 ); + --panel-box-color: var( --clr-#{$theme}-10 ); + --panel-header-background-color: var( --clr-#{$theme}-90 ); + } + + html[data-wiki-theme='#{$theme}'].theme--dark { + --panel-box-border-color: var( --clr-#{$theme}-30 ); + --panel-box-color: var( --clr-#{$theme}-90 ); + --panel-header-background-color: var( --clr-#{$theme}-20 ); + } } // Add html prefix to get higher specificity diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss index ae01954e4f9..56f5ed75fbd 100644 --- a/stylesheets/commons/TeamPortal.scss +++ b/stylesheets/commons/TeamPortal.scss @@ -6,20 +6,20 @@ Author(s): salle /* Buttons - General */ $button-background-color--light: var( --clr-primary ); $button-background-color--dark: var( --clr-wiki-theme-color-20 ); -$button-background-color-hover--light: color-mix( in srgb, var( --clr-primary ), 16%, #ffffff ); -$button-background-color-hover--dark: color-mix( in srgb, #000000, var( --clr-wiki-theme-color-20 ), 16% ); -$button-background-color-focus--light: color-mix( in srgb, #ffffff, var( --clr-primary ), 12% ); -$button-background-color-focus--dark: color-mix( in srgb, #ffffff, var( --clr-wiki-theme-color-20 ), 12% ); -$button-background-color-active--light: color-mix( in srgb, #ffffff, var( --clr-primary ), 8% ); -$button-background-color-active--dark: color-mix( in srgb, #ffffff, var( --clr-wiki-theme-color-20 ), 8% ); -$button-background-color-disabled--light: color-mix( in srgb, #000000, #e3e3e3, 12% ); -$button-background-color-disabled--dark: color-mix( in srgb, #ffffff, #1f1f1f, 12% ); +$button-background-color-hover--light: color-mix( in srgb, #ffffff 16%, var( --clr-primary ) ); +$button-background-color-hover--dark: color-mix( in srgb, #000000 16%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-focus--light: color-mix( in srgb, #ffffff 12%, var( --clr-primary ) ); +$button-background-color-focus--dark: color-mix( in srgb, #ffffff 12%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-active--light: color-mix( in srgb, #ffffff 8%, var( --clr-primary ) ); +$button-background-color-active--dark: color-mix( in srgb, #ffffff 8%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-disabled--light: color-mix( in srgb, #000000 12%, #e3e3e3 ); +$button-background-color-disabled--dark: color-mix( in srgb, #ffffff 12%, #1f1f1f ); $button-border-color-focus--light: var( --clr-wiki-theme-color-20 ); $button-border-color-focus--dark: var( --clr-wiki-theme-color-40 ); $button-color--light: var( --clr-on-primary ); $button-color--dark: #ffffff; -$button-secondary-background-color-hover--light: rgba( var( --clr-primary ), 0.08 ); -$button-secondary-background-color-hover--dark: rgba( var( --clr-primary ), 0.08 ); +$button-secondary-background-color-hover--light: rgb( from var( --clr-primary ) r g b / 0.08 ); +$button-secondary-background-color-hover--dark: rgb( from var( --clr-primary ) r g b / 0.08 ); $button-secondary-color--light: var( --clr-primary-30 ); $button-secondary-color--dark: var( --clr-primary-80 ); $button-error-color--light: var( --clr-semantic-negative-40 ); From 54c1cbc2e0b26a685990d751bd21d1234cdbdfac Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 11:16:58 +0700 Subject: [PATCH 5/8] fix lint --- stylesheets/commons/TeamPortal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss index 56f5ed75fbd..c21f66e7c1a 100644 --- a/stylesheets/commons/TeamPortal.scss +++ b/stylesheets/commons/TeamPortal.scss @@ -18,8 +18,8 @@ $button-border-color-focus--light: var( --clr-wiki-theme-color-20 ); $button-border-color-focus--dark: var( --clr-wiki-theme-color-40 ); $button-color--light: var( --clr-on-primary ); $button-color--dark: #ffffff; -$button-secondary-background-color-hover--light: rgb( from var( --clr-primary ) r g b / 0.08 ); -$button-secondary-background-color-hover--dark: rgb( from var( --clr-primary ) r g b / 0.08 ); +$button-secondary-background-color-hover--light: hsl(from var(--clr-primary) h s l / 0.08); +$button-secondary-background-color-hover--dark: hsl(from var(--clr-primary) h s l / 0.08); $button-secondary-color--light: var( --clr-primary-30 ); $button-secondary-color--dark: var( --clr-primary-80 ); $button-error-color--light: var( --clr-semantic-negative-40 ); From 83728c04962d5e8c4d64f335f5f2871a723429ca Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 12:24:35 +0700 Subject: [PATCH 6/8] fix spacing --- stylesheets/commons/TeamPortal.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss index c21f66e7c1a..2a1601ac0b1 100644 --- a/stylesheets/commons/TeamPortal.scss +++ b/stylesheets/commons/TeamPortal.scss @@ -18,8 +18,8 @@ $button-border-color-focus--light: var( --clr-wiki-theme-color-20 ); $button-border-color-focus--dark: var( --clr-wiki-theme-color-40 ); $button-color--light: var( --clr-on-primary ); $button-color--dark: #ffffff; -$button-secondary-background-color-hover--light: hsl(from var(--clr-primary) h s l / 0.08); -$button-secondary-background-color-hover--dark: hsl(from var(--clr-primary) h s l / 0.08); +$button-secondary-background-color-hover--light: hsl( from var( --clr-primary ) h s l / 0.08 ); +$button-secondary-background-color-hover--dark: hsl( from var( --clr-primary ) h s l / 0.08 ); $button-secondary-color--light: var( --clr-primary-30 ); $button-secondary-color--dark: var( --clr-primary-80 ); $button-error-color--light: var( --clr-semantic-negative-40 ); From 097593137aade3a6ba8271e3511b913303d8c42e Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 12:28:19 +0700 Subject: [PATCH 7/8] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- stylesheets/commons/Panels.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stylesheets/commons/Panels.scss b/stylesheets/commons/Panels.scss index ce39fbc37d9..d97b33839a1 100644 --- a/stylesheets/commons/Panels.scss +++ b/stylesheets/commons/Panels.scss @@ -14,7 +14,7 @@ Author(s): FO-nTTaX .theme--dark { --panel-box-border-color: var( --clr-surface-3 ); --panel-box-color: var( --clr-wiki-on-primary-container ); - --panel-header-background-color: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-color-20 ) ); + --panel-header-background-color: color-mix( in srgb, #000000 20%, var( --clr-wiki-theme-20 ) ); } /* If theme was in the known list */ From 93bdbfb79079a1dc4d431f488d1b6b2c567ddb85 Mon Sep 17 00:00:00 2001 From: Fikry Abdullah Aziz Date: Tue, 26 May 2026 12:29:38 +0700 Subject: [PATCH 8/8] fix variable name --- stylesheets/commons/TeamPortal.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/stylesheets/commons/TeamPortal.scss b/stylesheets/commons/TeamPortal.scss index 2a1601ac0b1..d5060900cbc 100644 --- a/stylesheets/commons/TeamPortal.scss +++ b/stylesheets/commons/TeamPortal.scss @@ -5,17 +5,17 @@ Author(s): salle /* Buttons - General */ $button-background-color--light: var( --clr-primary ); -$button-background-color--dark: var( --clr-wiki-theme-color-20 ); +$button-background-color--dark: var( --clr-wiki-theme-20 ); $button-background-color-hover--light: color-mix( in srgb, #ffffff 16%, var( --clr-primary ) ); -$button-background-color-hover--dark: color-mix( in srgb, #000000 16%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-hover--dark: color-mix( in srgb, #000000 16%, var( --clr-wiki-theme-20 ) ); $button-background-color-focus--light: color-mix( in srgb, #ffffff 12%, var( --clr-primary ) ); -$button-background-color-focus--dark: color-mix( in srgb, #ffffff 12%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-focus--dark: color-mix( in srgb, #ffffff 12%, var( --clr-wiki-theme-20 ) ); $button-background-color-active--light: color-mix( in srgb, #ffffff 8%, var( --clr-primary ) ); -$button-background-color-active--dark: color-mix( in srgb, #ffffff 8%, var( --clr-wiki-theme-color-20 ) ); +$button-background-color-active--dark: color-mix( in srgb, #ffffff 8%, var( --clr-wiki-theme-20 ) ); $button-background-color-disabled--light: color-mix( in srgb, #000000 12%, #e3e3e3 ); $button-background-color-disabled--dark: color-mix( in srgb, #ffffff 12%, #1f1f1f ); -$button-border-color-focus--light: var( --clr-wiki-theme-color-20 ); -$button-border-color-focus--dark: var( --clr-wiki-theme-color-40 ); +$button-border-color-focus--light: var( --clr-wiki-theme-20 ); +$button-border-color-focus--dark: var( --clr-wiki-theme-40 ); $button-color--light: var( --clr-on-primary ); $button-color--dark: #ffffff; $button-secondary-background-color-hover--light: hsl( from var( --clr-primary ) h s l / 0.08 ); @@ -25,8 +25,8 @@ $button-secondary-color--dark: var( --clr-primary-80 ); $button-error-color--light: var( --clr-semantic-negative-40 ); $button-error-color--dark: var( --clr-semantic-negative-80 ); -$button-new-primary-color--light: var( --clr-wiki-theme-color-40 ); -$button-new-primary-color--dark: var( --clr-wiki-theme-color-30 ); +$button-new-primary-color--light: var( --clr-wiki-theme-40 ); +$button-new-primary-color--dark: var( --clr-wiki-theme-30 ); :root { --button-background-color: #{$button-background-color--light};