From a18e73768984b773f4f0e053f450549b59d13f30 Mon Sep 17 00:00:00 2001
From: Tomislav Matokovic
<71372-tomislav.matokovic@users.noreply.drupalcode.org>
Date: Tue, 18 Feb 2025 14:25:09 +0100
Subject: [PATCH 1/4] changing colors in dark mode, so the Gin switch component
meets SC1.4.11
---
dist/css/base/gin.css | 2 +-
dist/css/theme/accent.css | 1 +
dist/css/theme/dialog.css | 2 +-
dist/css/theme/variables.css | 5 ++++-
styles/base/_form.scss | 2 +-
styles/theme/accent.scss | 1 +
styles/theme/variables.scss | 5 ++++-
7 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index 57dd6a2d2..cfbe41046 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1793,7 +1793,7 @@ table .views-field.views-field-operations {
}
.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input {
- background-color: var(--gin-bg-input);
+ background-color: var(--gin-bg-input-checkbox);
}
@media (forced-colors: active) {
diff --git a/dist/css/theme/accent.css b/dist/css/theme/accent.css
index 705f2d685..103cb55f3 100644
--- a/dist/css/theme/accent.css
+++ b/dist/css/theme/accent.css
@@ -13,6 +13,7 @@
.gin--dark-mode [data-gin-accent] {
--gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
--gin-bg-app-rgb: 27, 27, 29;
+ --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .63);
}
[data-gin-accent=blue] {
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index f26f49868..e8a751880 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -464,7 +464,7 @@
}
.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input {
- background-color: var(--gin-bg-input);
+ background-color: var(--gin-bg-input-checkbox);
}
@media (forced-colors: active) {
diff --git a/dist/css/theme/variables.css b/dist/css/theme/variables.css
index 34d68c2e6..4805eac5e 100644
--- a/dist/css/theme/variables.css
+++ b/dist/css/theme/variables.css
@@ -207,9 +207,11 @@
--gin-color-danger-lightest: #483439;
--gin-color-green: #32cea4;
--gin-color-info: #559bca;
+ --gin-bg-input-checkbox: var(--gin-bg-layer1);
--gin-bg-input: var(--gin-bg-layer2);
--gin-bg-app: #1b1b1d;
--gin-bg-layer: #2a2a2d;
+ --gin-bg-layer1: #909098;
--gin-bg-layer2: #3b3b3f;
--gin-bg-layer3: #47474c;
--gin-bg-layer4: #19191b;
@@ -219,10 +221,11 @@
--gin-border-color: #43454a;
--gin-border-color-secondary: rgba(255, 255, 255, .075);
--gin-border-color-layer: rgba(0, 0, 0, .05);
+ --gin-border-color-layer1: #28282a;
--gin-border-color-layer2: #76777b;
--gin-border-color-table: #43454a;
--gin-border-color-table-header: rgba(255, 255, 255, .4);
- --gin-border-color-form-element: var(--gin-border-color-layer2);
+ --gin-border-color-form-element: var(--gin-border-color-layer1);
--gin-bg-header: #1b1b1d;
--gin-switch: var(--gin-color-primary);
--gin-status-text: #c3cbd0;
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index b46bd5b6d..d4c5cc7ea 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -154,7 +154,7 @@
box-sizing: border-box;
.gin--dark-mode & {
- background-color: var(--gin-bg-input);
+ background-color: var(--gin-bg-input-checkbox);
}
@media (forced-colors: active) {
diff --git a/styles/theme/accent.scss b/styles/theme/accent.scss
index 5580e1c61..d8f9aff95 100644
--- a/styles/theme/accent.scss
+++ b/styles/theme/accent.scss
@@ -13,6 +13,7 @@
.gin--dark-mode [data-gin-accent] {
--gin-bg-item-hover: rgba(var(--gin-color-primary-rgb), .08);
--gin-bg-app-rgb: #{color.red($colorDarkAppBackground)}, #{color.green($colorDarkAppBackground)}, #{color.blue($colorDarkAppBackground)};
+ --gin-color-primary-light-active: rgba(var(--gin-color-primary-rgb), .63);
}
// Light mode
diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss
index 0ea76c019..1b930dd12 100644
--- a/styles/theme/variables.scss
+++ b/styles/theme/variables.scss
@@ -252,11 +252,13 @@
--gin-color-info: #559bca;
// Input
+ --gin-bg-input-checkbox: var(--gin-bg-layer1);
--gin-bg-input: var(--gin-bg-layer2);
// Layers
--gin-bg-app: #{$colorDarkAppBackground};
--gin-bg-layer: #2A2A2D;
+ --gin-bg-layer1: #909098;
--gin-bg-layer2: #3B3B3F;
--gin-bg-layer3: #47474c;
--gin-bg-layer4: #19191b;
@@ -272,6 +274,7 @@
--gin-border-color: #43454a;
--gin-border-color-secondary: rgba(255, 255, 255, .075);
--gin-border-color-layer: rgba(0, 0, 0, .05);
+ --gin-border-color-layer1: #28282A;
--gin-border-color-layer2: #76777B;
--gin-border-color-table: #43454a;
@@ -279,7 +282,7 @@
--gin-border-color-table-header: rgba(255, 255, 255, .4);
// Form element
- --gin-border-color-form-element: var(--gin-border-color-layer2);
+ --gin-border-color-form-element: var(--gin-border-color-layer1);
// Table
--gin-bg-header: #{$colorDarkAppBackground};
--
GitLab
From 7763ce1565edfeefc8e2df2782853d92a181cacc Mon Sep 17 00:00:00 2001
From: Tomislav Matokovic
<71372-tomislav.matokovic@users.noreply.drupalcode.org>
Date: Wed, 19 Feb 2025 11:17:01 +0100
Subject: [PATCH 2/4] ensuring that the toggle in the unchecked state is
visible in Forced Colors mode
---
dist/css/base/gin.css | 2 +-
dist/css/theme/dialog.css | 2 +-
styles/base/_form.scss | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index cfbe41046..d95206ff3 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1821,7 +1821,7 @@ table .views-field.views-field-operations {
}
.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: var(--gin-border-color-form-element);
+ background-color: LinkText !important;
}
@media (forced-colors: active) {
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index e8a751880..c8d974f3e 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -492,7 +492,7 @@
}
.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: var(--gin-border-color-form-element);
+ background-color: LinkText !important;
}
@media (forced-colors: active) {
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index d4c5cc7ea..81fdfb97b 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -172,7 +172,7 @@
transition: transform .3s;
.gin--dark-mode & {
- background-color: var(--gin-border-color-form-element);
+ background-color: LinkText !important;
}
@media (forced-colors: active) {
--
GitLab
From 672a98a66a392aaef888e1a7a69f264d3c6a625a Mon Sep 17 00:00:00 2001
From: Tomislav Matokovic
<71372-tomislav.matokovic@users.noreply.drupalcode.org>
Date: Wed, 19 Feb 2025 11:34:39 +0100
Subject: [PATCH 3/4] fixing code so it only applies for forced colors
---
dist/css/base/gin.css | 4 ++--
dist/css/theme/dialog.css | 4 ++--
styles/base/_form.scss | 4 ++--
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index d95206ff3..fe1718630 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1821,12 +1821,12 @@ table .views-field.views-field-operations {
}
.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: LinkText !important;
+ background-color: var(--gin-border-color-form-element);
}
@media (forced-colors: active) {
:not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: CanvasText;
+ background-color: CanvasText !important;
}
}
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index c8d974f3e..4f7173a89 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -492,12 +492,12 @@
}
.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: LinkText !important;
+ background-color: var(--gin-border-color-form-element);
}
@media (forced-colors: active) {
.ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input::before {
- background-color: CanvasText;
+ background-color: CanvasText !important;
}
}
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index 81fdfb97b..7fe858a4b 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -172,11 +172,11 @@
transition: transform .3s;
.gin--dark-mode & {
- background-color: LinkText !important;
+ background-color: var(--gin-border-color-form-element);
}
@media (forced-colors: active) {
- background-color: CanvasText;
+ background-color: CanvasText!important;
}
}
--
GitLab
From 605e1cf64eb9574096da33ac1419e9013b1f817a Mon Sep 17 00:00:00 2001
From: Tomislav Matokovic
<71372-tomislav.matokovic@users.noreply.drupalcode.org>
Date: Wed, 19 Feb 2025 11:42:31 +0100
Subject: [PATCH 4/4] changing input variable name to dark for more precision
in naming
---
dist/css/base/gin.css | 2 +-
dist/css/theme/dialog.css | 2 +-
dist/css/theme/variables.css | 2 +-
styles/base/_form.scss | 2 +-
styles/theme/variables.scss | 2 +-
5 files changed, 5 insertions(+), 5 deletions(-)
diff --git a/dist/css/base/gin.css b/dist/css/base/gin.css
index fe1718630..3623b5527 100644
--- a/dist/css/base/gin.css
+++ b/dist/css/base/gin.css
@@ -1793,7 +1793,7 @@ table .views-field.views-field-operations {
}
.gin--dark-mode :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input {
- background-color: var(--gin-bg-input-checkbox);
+ background-color: var(--gin-bg-input-dark);
}
@media (forced-colors: active) {
diff --git a/dist/css/theme/dialog.css b/dist/css/theme/dialog.css
index 4f7173a89..ef5d2f0b0 100644
--- a/dist/css/theme/dialog.css
+++ b/dist/css/theme/dialog.css
@@ -464,7 +464,7 @@
}
.gin--dark-mode .ui-dialog :not(.form-checkboxes):not(td):not(.tabledrag-cell-content__item):not(.media-library-item__click-to-select-checkbox):not(.field-content):not(.ajax-new-content):not(.tablesaw-cell-content) > .form-type--checkbox input {
- background-color: var(--gin-bg-input-checkbox);
+ background-color: var(--gin-bg-input-dark);
}
@media (forced-colors: active) {
diff --git a/dist/css/theme/variables.css b/dist/css/theme/variables.css
index 4805eac5e..2eaef634b 100644
--- a/dist/css/theme/variables.css
+++ b/dist/css/theme/variables.css
@@ -207,7 +207,7 @@
--gin-color-danger-lightest: #483439;
--gin-color-green: #32cea4;
--gin-color-info: #559bca;
- --gin-bg-input-checkbox: var(--gin-bg-layer1);
+ --gin-bg-input-dark: var(--gin-bg-layer1);
--gin-bg-input: var(--gin-bg-layer2);
--gin-bg-app: #1b1b1d;
--gin-bg-layer: #2a2a2d;
diff --git a/styles/base/_form.scss b/styles/base/_form.scss
index 7fe858a4b..1893bdfac 100644
--- a/styles/base/_form.scss
+++ b/styles/base/_form.scss
@@ -154,7 +154,7 @@
box-sizing: border-box;
.gin--dark-mode & {
- background-color: var(--gin-bg-input-checkbox);
+ background-color: var(--gin-bg-input-dark);
}
@media (forced-colors: active) {
diff --git a/styles/theme/variables.scss b/styles/theme/variables.scss
index 1b930dd12..337f661a2 100644
--- a/styles/theme/variables.scss
+++ b/styles/theme/variables.scss
@@ -252,7 +252,7 @@
--gin-color-info: #559bca;
// Input
- --gin-bg-input-checkbox: var(--gin-bg-layer1);
+ --gin-bg-input-dark: var(--gin-bg-layer1);
--gin-bg-input: var(--gin-bg-layer2);
// Layers
--
GitLab