added dark theme option. It ìs selected automagically based on system choiche of...

[theme-danix.xyz.git] / assets / sass / components / _button.scss

diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss
index fc903c1..a23e8d8 100644 (file)
--- a/assets/sass/components/_button.scss
+++ b/assets/sass/components/_button.scss
@@ -20,8 +20,12 @@
                background-color: transparent;\r
                border: 0;\r
                border-radius: 0;\r
-               box-shadow: inset 0 0 0 2px _palette(fg-bold);\r
-               color: _palette(fg-bold);\r
+               box-shadow: inset 0 0 0 2px _palette_light(fg-bold);\r
+               color: _palette_light(fg-bold);\r
+               @media screen and (prefers-color-scheme: dark) {\r
+                       box-shadow: inset 0 0 0 2px _palette_dark(fg-bold);\r
+                       color: _palette_dark(fg-bold);\r
+               }\r
                cursor: pointer;\r
                display: inline-block;\r
                font-size: 0.8em;\r
@@ -36,14 +40,23 @@
                white-space: nowrap;\r
 \r
                &:hover, &:active {\r
-                       box-shadow: inset 0 0 0 2px _palette(highlight);\r
-                       color: _palette(highlight);\r
+                       box-shadow: inset 0 0 0 2px _palette_light(highlight);\r
+                       color: _palette_light(highlight);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               box-shadow: inset 0 0 0 2px _palette_dark(highlight);\r
+                               color: _palette_dark(highlight);\r
+                       }\r
                }\r
 \r
                &:active {\r
-                       background-color: transparentize(_palette(highlight), 0.9);\r
-                       box-shadow: inset 0 0 0 2px desaturate(darken(_palette(highlight), 15), 5);\r
-                       color: desaturate(darken(_palette(highlight), 15), 5);\r
+                       background-color: transparentize(_palette_light(highlight), 0.9);\r
+                       box-shadow: inset 0 0 0 2px desaturate(darken(_palette_light(highlight), 15), 5);\r
+                       color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               background-color: transparentize(_palette_dark(highlight), 0.9);\r
+                               box-shadow: inset 0 0 0 2px desaturate(darken(_palette_dark(highlight), 15), 5);\r
+                               color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+                       }\r
                }\r
 \r
                &.icon {\r
@@ -86,11 +99,17 @@
                        }\r
 \r
                        &:before {\r
-                               background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(fg-bold)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               }\r
                        }\r
 \r
                        &:after {\r
-                               background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_light(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="24px" viewBox="0 0 36 24" zoomAndPan="disable"><style>line { stroke: #{_palette_dark(highlight)}; stroke-width: 2px; }</style><line x1="0" y1="12" x2="34" y2="12" /><line x1="25" y1="4" x2="34" y2="12.5" /><line x1="25" y1="20" x2="34" y2="11.5" /></svg>');\r
+                               }\r
                                opacity: 0;\r
                                z-index: 1;\r
                        }\r
@@ -107,17 +126,28 @@
                }\r
 \r
                &.primary {\r
-                       background-color: _palette(fg-bold);\r
+                       background-color: _palette_light(fg-bold);\r
                        box-shadow: none;\r
-                       color: _palette(bg);\r
+                       color: _palette_light(bg);\r
+                       @media screen and (prefers-color-scheme: dark) {\r
+                               background-color: _palette_dark(fg-bold);\r
+                               color: _palette_dark(bg);\r
+                       }\r
 \r
                        &:hover, &:active {\r
-                               background-color: _palette(highlight);\r
-                               color: _palette(bg) !important;\r
+                               background-color: _palette_light(highlight);\r
+                               color: _palette_light(bg) !important;\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-color: _palette_dark(highlight);\r
+                                       color: _palette_dark(bg) !important;\r
+                               }\r
                        }\r
 \r
                        &:active {\r
-                               background-color: desaturate(darken(_palette(highlight), 15), 5);\r
+                               background-color: desaturate(darken(_palette_light(highlight), 15), 5);\r
+                               @media screen and (prefers-color-scheme: dark) {\r
+                                       background-color: desaturate(darken(_palette_dark(highlight), 15), 5);\r
+                               }\r
                        }\r
                }\r
 \r