From 7caf36cb8f29428d3217865db89c705e3405c47d Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 18 Oct 2021 15:44:52 +0400
Subject: [PATCH] Tint elements using `accent-color` and other CSS rules

---
 nuxt.config.js         |  1 +
 src/styles/accent.scss | 22 ++++++++++++++++++++++
 2 files changed, 23 insertions(+)
 create mode 100644 src/styles/accent.scss

diff --git a/nuxt.config.js b/nuxt.config.js
index 88e79130c3..ceef587b41 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -146,6 +146,7 @@ export default {
     '~/assets/fonts.css',
     '~/styles/vocabulary.scss',
     '~/styles/global.scss',
+    '~/styles/accent.scss',
   ],
   head,
   env,
diff --git a/src/styles/accent.scss b/src/styles/accent.scss
new file mode 100644
index 0000000000..4ac5c1ac4b
--- /dev/null
+++ b/src/styles/accent.scss
@@ -0,0 +1,22 @@
+:root {
+  /* Accent color tints checkbox, radio, range and progress. */
+  accent-color: theme('colors.trans-blue');
+}
+
+:focus-visible {
+  outline-color: theme('colors.trans-blue');
+}
+
+::selection {
+  /* Using white text because selection background is dark. */
+  @apply bg-trans-blue text-white;
+}
+
+::-webkit-calendar-picker-indicator,
+::-webkit-clear-button,
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button,
+::marker {
+  /* List markers can be tinted as text. */
+  @apply text-trans-blue;
+}