feat(color): add theme module to handle themes.

color/theme/_index.scss

@@ -0,0 +1,8 @@
+// @forward 'palette' as palette-*;
+@forward 'theme.build.function';
+
+// @forward 'scheme.color-to-variant.function';
+// @forward 'scheme.get.function';
+// @forward 'scheme.has.function';
+// @forward 'scheme.load.mixin';
+// @forward 'scheme.pick.function';

color/theme/_theme.build.function.scss

@@ -0,0 +1,32 @@
+// Sass.
+@use 'sass:list';
+@use 'sass:map';
+
+// Modules.
+@use '../palette';
+
+// Functions.
+@use 'theme.pick.function' as *;
+
+// Status: DONE
+// The `color.theme-build()` function.
+// @param `$theme`
+// @arbitrary `$pick...`
+// @returns The returned value is a map built from `$pick...`.
+@function build($theme, $pick...) {
+  $result: ();
+  @if type-of($theme) == map {
+    @if list.length($pick) > 0 {
+      @each $pick in $pick {
+        @each $name, $palette in pick($theme, $pick) {
+          $result: map.deep-merge($result, ($name: palette.create($palette)));
+        }
+      }
+    } @else {
+      @each $name, $palette in $theme {
+        $result: map.deep-merge($result, ($name: palette.create($palette)));
+      }
+    }
+  }
+  @return $result;
+}

color/theme/_theme.build.function.spec.scss

@@ -0,0 +1,204 @@
+// Functions.
+@use 'theme.build.function' as *;
+
+// Dark theme
+$-dark: (
+  dark: (
+    core-dark: ((dark, 15%), light, accent, primary, primary dark, primary light, ),
+    // ['gray', secondary, primary large]: [xs [color, dark, light]],
+    (chat, sidebar, footer large): (disabled, error, info, success, warning),
+  ),
+
+  dark rusty: (
+    core: ((dark, 15%), light, accent, primary, primary dark, primary light, ),
+    ('+gray', +secondary, +primary large): (xs (color, dark, light)),
+    +secondary small: (xs (color, dark, light)),
+  ),
+
+  light: (
+    core: ((dark, 15%), light, accent, primary, primary dark, primary light, ),
+    // ['gray', secondary, primary large]: [xs [color, dark, light]],
+    (chat, sidebar, footer large): (disabled, error, info, success, warning),
+  ),
+);
+
+// Light theme
+$-light: (
+  light: (
+
+    (basic,): (
+      core: (color, dark, light)
+    ),
+
+    // // [bg]: [color, dark, light],
+    // bg: (
+    //   bg: bg color,
+    //   bg dark: (bg dark, -30%),
+    //   bg light: bg light
+    // ),
+
+    // // [border]: [color, dark, light],
+    // border: (
+    //   border dark: border dark,
+    //   border light: border light
+    // ),
+
+    // // [link]: [color, dark, light],
+    // link: (
+    //   link: link color,
+    //   link dark: link dark,
+    //   link light: link light
+    // ),
+
+    // // variant
+    // (chat, sidebar, footer large): (disabled, error, info, success, warning),
+    // // control: (disabled, error, info, success, warning),
+
+    // (control, ghokan): (
+    //   disabled: disabled color,
+    //   error: error color,
+    //   info: info color,
+    //   success: success color,
+    //   warning: warning color
+    // ),
+
+    // 'body.palette': (
+    //   body bg: body bg color,
+    //   body font: body font color
+    // ),
+
+    // 'other.palette': (
+    //   code: code color,
+    //   highlight: highlight color
+    // )
+  )
+);
+
+// Basic theme
+$-basic: (
+  normal: (
+    // (basic,): (
+
+    //   primary: primary color,
+    //   primary dark: primary color dark,
+    //   primary light: primary color light,
+
+    //   secondary: secondary color,
+    //   secondary dark: secondary color dark,
+    //   secondary light: secondary color light,
+
+    // ),
+
+
+    (basic,): (
+      (dark, 15%), light, accent,
+
+      primary, primary dark, primary light,
+
+      secondary, secondary dark, secondary light,
+    ),
+
+    // // core: (dark, light, accent, [primary [color, dark, light]], [secondary [color, dark, light]]),
+    // core: ((dark, 15%), light, accent, primary, primary dark, primary light, ),
+    // // core: (
+    // //   dark: (dark color, -15%),
+    // //   light: light color,
+    // //   accent: accent color,
+    // //   primary: primary color,
+    // //   primary dark: primary dark,
+    // //   primary light: primary light,
+    // //   secondary: secondary color,
+    // //   secondary dark: secondary dark,
+    // //   secondary light: secondary light
+    // // ),
+
+    // // build variant
+    // ['gray', secondary, primary large]: [xs] [color, dark, light],
+    // // ['secondary']: [xs [color, dark, light]],
+    // // 'gray': (
+    // //   'gray': 'gray' color,
+    // //   'gray' dark: 'gray' dark,
+    // //   'gray' light: 'gray' light
+    // // ),
+
+    // // [bg]: [color, dark, light],
+    // bg: (
+    //   bg: bg color,
+    //   bg dark: (bg dark, -30%),
+    //   bg light: bg light
+    // ),
+
+    // // [border]: [color, dark, light],
+    // border: (
+    //   border dark: border dark,
+    //   border light: border light
+    // ),
+
+    // // [link]: [color, dark, light],
+    // link: (
+    //   link: link color,
+    //   link dark: link dark,
+    //   link light: link light
+    // ),
+
+    // // variant
+    // (chat, sidebar, footer large): (disabled, error, info, success, warning),
+    // // control: (disabled, error, info, success, warning),
+
+    // (control, ghokan): (
+    //   disabled: disabled color,
+    //   error: error color,
+    //   info: info color,
+    //   success: success color,
+    //   warning: warning color
+    // ),
+
+    // 'body.palette': (
+    //   body bg: body bg color,
+    //   body font: body font color
+    // ),
+
+    // 'other.palette': (
+    //   code: code color,
+    //   highlight: highlight color
+    // )
+  )
+);
+
+// input data
+// [bracketed list] - build color variant
+// '*' - all from the given theme
+// '*.palette' ends with .palette
+// (class variant)
+
+// Map
+// @debug build($-dark);
+// @debug build($-basic);
+
+// List
+// @debug build($-dark, dark rusty);
+// @debug build($-basic, normal);
+// @debug build($-light, light);
+
+// all *.[string] indicator
+// @debug build($-basic, (basic: '*.palette')); // (basic: ("body.palette": (body bg: body bg color, body font: body font color), "other.palette": (code: code color, highlight: highlight color)))
+// @debug build($-basic, (basic: ('*.palette', '*.colors'))); // (basic: ("body.palette": (body bg: body bg color, body font: body font color), "other.palette": (code: code color, highlight: highlight color)))
+
+// variant
+// @debug build($-basic, (basic: core bg)); // ()
+// @debug build($-basic, (basic: footer large)); // ()
+// @debug build($-basic, (basic: (control big,))); // ()
+// @debug build($-basic, (basic: (control big, control,))); // (basic: (control: (disabled: disabled color, error: error color, info: info color, success: success color, warning: warning color)))
+
+// direct .palette
+// @debug build($-basic, (basic: ('body.palette', 'other.palette'))); // (basic: ("body.palette": (body bg: body bg color, body font: body font color), "other.palette": (code: code color, highlight: highlight color)))
+// @debug build($-basic, (basic: [bg, 'gray'])); // (basic: ("gray": (gray xs: gray xs color, gray xs dark: gray xs color dark, gray xs light: gray xs color light)))
+
+// bracketed palette
+// @debug build($-basic, (basic: [primary xs,])); // ()
+// @debug build($-basic, (basic: [primary xs, secondary])); // (basic: ([secondary]: (secondary xs: secondary xs color, secondary xs dark: secondary xs color dark, secondary xs light: secondary xs color light)))
+
+// multiple
+// @debug build($-basic, (basic: ('*.palette', control big)));
+// @debug build($-basic, (basic: [primary xs, secondary]));
+// @debug build($-basic, (basic: [secondary, 'gray']), (basic: '*.palette'));

color/theme/_theme.get.function.scss

@@ -0,0 +1,47 @@
+// Sass.
+@use 'sass:list';
+
+// Functions.
+@use '../../map';
+
+// Status: DONE
+// The `color.theme-get()` function.
+// @param `$theme`
+// @param `$name`
+// @returns
+@function get($theme, $name) {
+  @each $name in if(list.separator($name) == comma, $name, ($name,)) {
+    @each $key, $value in $theme {
+      @if type-of($key) == list {
+        @if list.index($key, $name) {
+          @return $value;
+        }
+      }
+    }
+    @if map.get($theme, $name) {
+      @return map.get($theme, $name);
+    }
+  }
+  @return null;
+}
+
+// Examples.
+// @debug get((
+//   core: (
+//     secondary palette: (
+//       secondary: secondary color,
+//       secondary dark: secondary color dark,
+//     )
+//   ),
+//   light theme: (
+//     primary palette: (
+//       primary: primary color,
+//       primary dark: primary color dark
+//     )
+//   ),
+//   (dark theme, normal theme): (
+//     silver: #f1f1f1,
+//     red: #d72000,
+//   )
+// ), normal theme);
+// (silver: #f1f1f1, red: #d72000)

color/theme/_theme.has.function.scss

@@ -0,0 +1,31 @@
+// Sass.
+@use 'sass:list';
+
+// Status: DONE
+// The `color.theme-has()` function.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme
+// @param  `$value`
+// @returns
+@function has($value) {
+  @if type-of($value) == map {
+    @each $key, $value in $value {
+      @if list.index(dark light normal, $key) {
+        @return true;
+      }
+      @if type-of($value) == map {
+        @each $key, $value in if(list.separator($value) == comma, $value, ($value,)) {
+          @if list.index(dark light normal, $key) {
+            @return true;
+          }
+        }
+      }
+    }
+  }
+  @return false;
+}
+
+// Examples.
+// @debug has(( dark: test, light: test,));
+// @debug has(( test: (dark: 1, light: 2, normal: 3) ));
+
+// @debug has(( test: (one: 1, two: 2, three: 3) ));

color/theme/_theme.load.mixin.scss

@@ -0,0 +1,20 @@
+// Modules.
+@use '../../media';
+
+// Functions.
+@use 'theme.build.function' as *;
+
+// Status: REVIEW:
+// The `color.theme-load()` mixin.
+// @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)...);
+      }
+    }
+  }
+}