Squashed 'themes/tabi-lean/' content from commit 95c8796

git-subtree-dir: themes/tabi-lean
git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c

12 files changed, 289 insertions, 0 deletions

diff --git a/sass/skins/blue.scss b/sass/skins/blue.scss
new file mode 100644
index 0000000..d135219
--- /dev/null
+++ b/sass/skins/blue.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #3271E7; // Contrast ratio: 4.51:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #6cacff; // Contrast ratio: 7.05:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/evangelion.scss b/sass/skins/evangelion.scss
new file mode 100644
index 0000000..d0350a5
--- /dev/null
+++ b/sass/skins/evangelion.scss
@@ -0,0 +1,24 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Evangelion Unit-02.
+        --primary-color: #d12e36;  // Contrast ratio: 5.05:1
+    }
+    @else if $theme == 'dark' {
+        // Evangelion Unit-01.
+        --primary-color: #c09bd9;  // Contrast ratio: 7.01:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/indigo_ingot.scss b/sass/skins/indigo_ingot.scss
new file mode 100644
index 0000000..11a6370
--- /dev/null
+++ b/sass/skins/indigo_ingot.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #1460bd; // Contrast ratio: 6.1:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #e6c212; // Contrast ratio: 9.48:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/lavender.scss b/sass/skins/lavender.scss
new file mode 100644
index 0000000..97a40df
--- /dev/null
+++ b/sass/skins/lavender.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #9055d8;  // Contrast ratio: 4.69:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #cba2e8;  // Contrast ratio: 7.74:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/lowcontrast_orange.scss b/sass/skins/lowcontrast_orange.scss
new file mode 100644
index 0000000..ad84bf4
--- /dev/null
+++ b/sass/skins/lowcontrast_orange.scss
@@ -0,0 +1,26 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/lowcontrast_peach.scss b/sass/skins/lowcontrast_peach.scss
new file mode 100644
index 0000000..328a4da
--- /dev/null
+++ b/sass/skins/lowcontrast_peach.scss
@@ -0,0 +1,26 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/lowcontrast_pink.scss b/sass/skins/lowcontrast_pink.scss
new file mode 100644
index 0000000..3f96d1d
--- /dev/null
+++ b/sass/skins/lowcontrast_pink.scss
@@ -0,0 +1,26 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/mint.scss b/sass/skins/mint.scss
new file mode 100644
index 0000000..e598c24
--- /dev/null
+++ b/sass/skins/mint.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #00804d;  // Contrast ratio: 5:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #00b86e;  // Contrast ratio: 6.34:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/monochrome.scss b/sass/skins/monochrome.scss
new file mode 100644
index 0000000..976e12e
--- /dev/null
+++ b/sass/skins/monochrome.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #727272;  // Contrast ratio: 4.81:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/red.scss b/sass/skins/red.scss
new file mode 100644
index 0000000..169340f
--- /dev/null
+++ b/sass/skins/red.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #ca4963; // Contrast ratio: 4.52:1.
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #ea535f; // Contrast ratio: 4.63:1.
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/sakura.scss b/sass/skins/sakura.scss
new file mode 100644
index 0000000..4e418eb
--- /dev/null
+++ b/sass/skins/sakura.scss
@@ -0,0 +1,22 @@
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        --primary-color: #D33C5C;  // Contrast ratio: 4.61:1
+    }
+    @else if $theme == 'dark' {
+        --primary-color: #fabed2;  // Contrast ratio: 10.48:1
+    }
+}
+
+:root {
+    @include theme-variables('light');
+}
+
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}
diff --git a/sass/skins/teal.scss b/sass/skins/teal.scss
new file mode 100644
index 0000000..3a1fbcd
--- /dev/null
+++ b/sass/skins/teal.scss
@@ -0,0 +1,33 @@
+// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
+// to verify the accessibility and readability of your colourscheme.
+// The default light background is #fff and the dark background is #1f1f1f.
+
+// This defines theme-specific variables.
+@mixin theme-variables($theme) {
+    @if $theme =='light' {
+        // Light theme colours.
+        --primary-color: #087e96; // Contrast ratio: 4.73:1
+    }
+    @else if $theme == 'dark' {
+        // Dark theme colours.
+        --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+    }
+}
+
+// Apply light theme variables by default.
+:root {
+    @include theme-variables('light');
+}
+
+// Apply dark theme variables when dark theme is explicitly set.
+[data-theme='dark'] {
+    @include theme-variables('dark');
+}
+
+// Apply dark theme variables when user's system prefers dark mode
+// and the theme is not explicitly set to light.
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme='light']) {
+        @include theme-variables('dark');
+    }
+}