fix(color.theme-load()): add $detect argument and update spec.

angular-package · Nov 25, 2023 · 5d095fe · 5d095fe
1 parent 48e2bf8
commit 5d095fe
Show file tree

Hide file tree

Showing 2 changed files with 103 additions and 8 deletions.
diff --git a/color/theme/_theme.load.mixin.scss b/color/theme/_theme.load.mixin.scss
@@ -9,11 +9,12 @@
 // @param `$theme`
 // @arbitrary `$pick`
 // @returns
-@mixin load($theme, $pick...) {
-  @each $theme, $palette in build($theme, $pick...) {
-    @include media.color-scheme-content($theme) {
-      @each $palette, $variant in $palette {
-        @content(($theme, $palette, $variant)...);
+@mixin load($theme, $detect: false, $pick...) {
+  // $theme or $color-scheme
+  @each $theme, $palettes in build($theme, $pick...) {
+    @include media.color-scheme-content($theme, $detect) {
+      @each $name, $variant in $palettes {
+        @content(($theme, $name, $variant)...);
       }
     }
   }

diff --git a/color/theme/_theme.load.mixin.spec.scss b/color/theme/_theme.load.mixin.spec.scss
@@ -104,7 +104,101 @@ $-theme: (
   )
 ) !default;
 
+//
+$-dark-1: (
+  dark: (
+    // Core colors variant.
+    core: (dark, light, accent, (primary (color, dark, light)), (secondary (color, dark, light))),
+
+    // Gray colors.
+    +gray: (color, dark, light),
+
+    // Bg colors.
+    +bg: ((color, 15%), dark, light),
+
+    // Border colors.
+    +border: (dark, light),
+
+    // Link colors.
+    +link: (color, dark, light),
+
+    // Control colors.
+    control: (
+      disabled: disabled,
+      error: error,
+      info: info,
+      success: success,
+      warning: warning
+    ),
+
+    // Body colors.
+    +body: (bg, font),
+
+    // Other colors.
+    other: (
+      code: code,
+      highlight: highlight
+    )
+  )
+) !default;
+
+//
+$-dark-2: (
+  // Core colors variant.
+  core: (dark, light, accent, (primary (color, dark, light)), (secondary (color, dark, light))),
+
+  // Gray colors.
+  +gray: (color, dark, light),
+
+  // Bg colors.
+  +bg: ((color, 15%), dark, light),
+
+  // Border colors.
+  +border: (dark, light),
+
+  // Link colors.
+  +link: (color, dark, light),
+
+  // Control colors.
+  control: (
+    disabled: disabled,
+    error: error,
+    info: info,
+    success: success,
+    warning: warning
+  ),
+
+  // Body colors.
+  +body: (bg, font),
+
+  // Other colors.
+  other: (
+    code: code,
+    highlight: highlight
+  )
+) !default;
+
 // Load theme.
-@include load($-theme, dark) using($color-scheme, $palette-name, $variant) {
-  @include color.variant-create((background: $variant));
-}
+// @include load($-dark-1, false) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }
+
+// @include load($-dark-1, false, dark) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }
+
+// @include load($-dark-1, false, (dark, +bg)) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }
+
+// @include load($-dark-1, false, (dark, +bg), (dark, +gray)) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }
+
+// @include load($-dark-1, false, (dark, (+bg, +gray))) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }
+
+// @include load($-dark-2) using($color-scheme, $palette-name, $variant) {
+//   @include color.variant-create((background: $variant));
+// }