diff options
Diffstat (limited to 'themes/tabi-lean/sass/skins')
| -rw-r--r-- | themes/tabi-lean/sass/skins/blue.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/evangelion.scss | 24 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/indigo_ingot.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/lavender.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/lowcontrast_orange.scss | 26 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/lowcontrast_peach.scss | 26 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/lowcontrast_pink.scss | 26 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/mint.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/monochrome.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/red.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/sakura.scss | 22 | ||||
| -rw-r--r-- | themes/tabi-lean/sass/skins/teal.scss | 33 |
12 files changed, 0 insertions, 289 deletions
diff --git a/themes/tabi-lean/sass/skins/blue.scss b/themes/tabi-lean/sass/skins/blue.scss deleted file mode 100644 index d135219..0000000 --- a/themes/tabi-lean/sass/skins/blue.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/evangelion.scss b/themes/tabi-lean/sass/skins/evangelion.scss deleted file mode 100644 index d0350a5..0000000 --- a/themes/tabi-lean/sass/skins/evangelion.scss +++ /dev/null @@ -1,24 +0,0 @@ -@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/themes/tabi-lean/sass/skins/indigo_ingot.scss b/themes/tabi-lean/sass/skins/indigo_ingot.scss deleted file mode 100644 index 11a6370..0000000 --- a/themes/tabi-lean/sass/skins/indigo_ingot.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/lavender.scss b/themes/tabi-lean/sass/skins/lavender.scss deleted file mode 100644 index 97a40df..0000000 --- a/themes/tabi-lean/sass/skins/lavender.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/lowcontrast_orange.scss b/themes/tabi-lean/sass/skins/lowcontrast_orange.scss deleted file mode 100644 index ad84bf4..0000000 --- a/themes/tabi-lean/sass/skins/lowcontrast_orange.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/themes/tabi-lean/sass/skins/lowcontrast_peach.scss b/themes/tabi-lean/sass/skins/lowcontrast_peach.scss deleted file mode 100644 index 328a4da..0000000 --- a/themes/tabi-lean/sass/skins/lowcontrast_peach.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/themes/tabi-lean/sass/skins/lowcontrast_pink.scss b/themes/tabi-lean/sass/skins/lowcontrast_pink.scss deleted file mode 100644 index 3f96d1d..0000000 --- a/themes/tabi-lean/sass/skins/lowcontrast_pink.scss +++ /dev/null @@ -1,26 +0,0 @@ -// 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/themes/tabi-lean/sass/skins/mint.scss b/themes/tabi-lean/sass/skins/mint.scss deleted file mode 100644 index e598c24..0000000 --- a/themes/tabi-lean/sass/skins/mint.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/monochrome.scss b/themes/tabi-lean/sass/skins/monochrome.scss deleted file mode 100644 index 976e12e..0000000 --- a/themes/tabi-lean/sass/skins/monochrome.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/red.scss b/themes/tabi-lean/sass/skins/red.scss deleted file mode 100644 index 169340f..0000000 --- a/themes/tabi-lean/sass/skins/red.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/sakura.scss b/themes/tabi-lean/sass/skins/sakura.scss deleted file mode 100644 index 4e418eb..0000000 --- a/themes/tabi-lean/sass/skins/sakura.scss +++ /dev/null @@ -1,22 +0,0 @@ -@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/themes/tabi-lean/sass/skins/teal.scss b/themes/tabi-lean/sass/skins/teal.scss deleted file mode 100644 index 3a1fbcd..0000000 --- a/themes/tabi-lean/sass/skins/teal.scss +++ /dev/null @@ -1,33 +0,0 @@ -// 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'); - } -} |
