//
// @include defcolours($bg: white black, $fg: black white);
@mixin defcolours($args...) {
- :root {
- @each $colour, $list in keywords($args) {
- $colourmap: map-merge($colourmap, ($colour: $list)) !global;
- @if length($list) > 1 {
- #{--colour- + $colour}: nth($list, 1);
- }
- }
- }
- @media (prefers-color-scheme: dark) {
- :root {
- @each $colour, $list in keywords($args) {
- @if length($list) > 1 {
- #{--colour- + $colour}: nth($list, 2);
- }
- }
- }
+ @each $colour, $list in keywords($args) {
+ $colourmap: map-merge($colourmap, ($colour: $list)) !global;
}
}
-// For the given previously-defined colour name, returns its value from
-// primary (light) colour scheme.
+// Obtain the colour value for a previously-defined colour name. By
+// default, its primary (light) colour value is returned; this can be
+// changed with the $num keyword parameter.
//
// The $pre and $post keyword arguments may be used to supplement the
// result with additional tokens either before or after the colour
// value, respectively, as might be used for combined properties
// such as border, outline, etc.
-@function getcolour($colour, $pre: (), $post: ()) {
- @return join(append($pre, nth(map-get($colourmap, $colour), 1)), $post);
+@function getcolour($colour, $pre: (), $post: (), $num: 1) {
+ @return join(append($pre, nth(map-get($colourmap, $colour), $num)), $post);
}
-@mixin usecolour_var_($prop, $colour, $pre: (), $post: ()) {
+@mixin usecolour_dark_($prop, $colour, $pre: (), $post: ()) {
@if (length(map-get($colourmap, $colour)) > 1) {
$transprop: map-get($_colourpropmap, $prop);
@if $transprop {
- #{$transprop}: var(--colour- + $colour)
+ #{$transprop}: getcolour($colour, $num: 2)
} @else {
- #{$prop}: join(append($pre, var(--colour- + $colour)), $post);
+ #{$prop}: getcolour($colour, $pre, $post, 2);
}
}
}
// @include usecolour(border, fg, $pre: solid 1px);
@mixin usecolour($prop, $colour, $pre: (), $post: ()) {
#{$prop}: getcolour($colour, $pre, $post);
- @at-root & { @include usecolour_var_($prop, $colour, $pre, $post); }
+ @at-root {
+ @media (prefers-color-scheme: dark) {
+ & { @include usecolour_dark_($prop, $colour, $pre, $post); }
+ }
+ }
}
// Convenience helper to assign multiple colour properties at once, for
@each $prop, $colour in keywords($args) {
#{$prop}: getcolour($colour);
}
- @at-root & {
- @each $prop, $colour in keywords($args) {
- @include usecolour_var_($prop, $colour);
+ @at-root {
+ @media (prefers-color-scheme: dark) {
+ & {
+ @each $prop, $colour in keywords($args) {
+ @include usecolour_dark_($prop, $colour);
+ }
+ }
}
}
}