feat(task-lists): add support for "Important Checked" task (#734)

assets/css/_core/_function/_index.scss

@@ -0,0 +1,2 @@
+@import 'rgba';
+@import 'var';

assets/css/_core/_function/_rgba.scss

@@ -0,0 +1,8 @@
+/// Build an rgba-like color from any source color expression.
+/// @param {Color | String} $color - Source color, supports CSS vars such as fixit-var(secondary).
+/// @param {Number} $alpha [1] - Alpha channel value in range 0..1.
+/// @example
+///   color: fixit-rgba(fixit-var(secondary), 0.2);
+@function fixit-rgba($color, $alpha: 1) {
+  @return unquote("rgb(from #{$color} r g b / #{$alpha})");
+}

assets/css/_core/_function/_var.scss

@@ -0,0 +1,14 @@
+/// Get CSS variable with prefix
+/// @param {String} $name - CSS variable name (without prefix)
+/// @param {*} $fallback - Optional fallback value
+/// @return {String} - Complete CSS variable reference
+/// @example
+///   color: fixit-var(global-font-color);
+///   background: fixit-var(custom-bg, #fff);
+@function fixit-var($name, $fallback: null) {
+	@if $fallback {
+		@return var(#{$rootPrefix}#{$name}, #{$fallback});
+	} @else {
+		@return var(#{$rootPrefix}#{$name});
+	}
+}

assets/css/_core/_index.scss

@@ -1,3 +1,4 @@
+@import "_function";
 @import "_mixin";
 @import "_base";
 @import "_common";

assets/css/_core/_mixin/_theme-vars.scss

@@ -2,21 +2,6 @@
 // Theme Variable Mixins and Functions
 // ========================================
 
-/// Get CSS variable with prefix
-/// @param {String} $name - CSS variable name (without prefix)
-/// @param {*} $fallback - Optional fallback value
-/// @return {String} - Complete CSS variable reference
-/// @example
-///   color: fixit-var(global-font-color);
-///   background: fixit-var(custom-bg, #fff);
-@function fixit-var($name, $fallback: null) {
-  @if $fallback {
-    @return var(#{$rootPrefix}#{$name}, #{$fallback});
-  } @else {
-    @return var(#{$rootPrefix}#{$name});
-  }
-}
-
 /// Set a single CSS variable
 /// @param {String} $name - CSS variable name (without prefix)
 /// @param {*} $value - Variable value

assets/css/_page/_single/_index.scss

@@ -241,6 +241,16 @@
           color: fixit-var(task-text-color);
         }
       }
+      
+      &[data-task='x'] {
+        @include task-icon {
+          background-color: fixit-rgba(fixit-var(secondary), 0.2);
+          mask-image: linear-gradient(#000, #000);
+          mask-size: 0.875em 0.875em;
+          mask-repeat: no-repeat;
+          mask-position: center;
+        };
+      }
 
       &[data-task='-'] {
         @include task-icon {
@@ -257,7 +267,8 @@
         @include task-text(fixit-var(success));
       }
 
-      &[data-task='!'] {
+      &[data-task='!'],
+      &[data-task='!x'] {
         @include task-icon(fixit-var(danger));
       }