From a2ea06d513a5802964f8f0ef5795cec7e548ed7b Mon Sep 17 00:00:00 2001 From: Alejandro Soto Date: Sat, 13 Sep 2025 14:55:15 -0600 Subject: Squashed 'themes/tabi-lean/' content from commit 95c8796 git-subtree-dir: themes/tabi-lean git-subtree-split: 95c879696445ede40daa7a30a88dae5dd74d5c0c --- sass/skins/blue.scss | 22 ++++++++++++++++++++++ sass/skins/evangelion.scss | 24 ++++++++++++++++++++++++ sass/skins/indigo_ingot.scss | 22 ++++++++++++++++++++++ sass/skins/lavender.scss | 22 ++++++++++++++++++++++ sass/skins/lowcontrast_orange.scss | 26 ++++++++++++++++++++++++++ sass/skins/lowcontrast_peach.scss | 26 ++++++++++++++++++++++++++ sass/skins/lowcontrast_pink.scss | 26 ++++++++++++++++++++++++++ sass/skins/mint.scss | 22 ++++++++++++++++++++++ sass/skins/monochrome.scss | 22 ++++++++++++++++++++++ sass/skins/red.scss | 22 ++++++++++++++++++++++ sass/skins/sakura.scss | 22 ++++++++++++++++++++++ sass/skins/teal.scss | 33 +++++++++++++++++++++++++++++++++ 12 files changed, 289 insertions(+) create mode 100644 sass/skins/blue.scss create mode 100644 sass/skins/evangelion.scss create mode 100644 sass/skins/indigo_ingot.scss create mode 100644 sass/skins/lavender.scss create mode 100644 sass/skins/lowcontrast_orange.scss create mode 100644 sass/skins/lowcontrast_peach.scss create mode 100644 sass/skins/lowcontrast_pink.scss create mode 100644 sass/skins/mint.scss create mode 100644 sass/skins/monochrome.scss create mode 100644 sass/skins/red.scss create mode 100644 sass/skins/sakura.scss create mode 100644 sass/skins/teal.scss (limited to 'sass/skins') 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'); + } +} -- cgit v1.2.3