feat(meta-css): add color-scheme, light-dark() and appearance rules/tpls

packages/meta-css/README.md

@@ -50,6 +50,7 @@
     - [Border radius](#border-radius)
     - [Border width](#border-width)
     - [Box sizing](#box-sizing)
+    - [Color scheme](#color-scheme)
     - [Content](#content)
     - [Cursors](#cursors)
     - [Display mode](#display-mode)
@@ -91,12 +92,14 @@
     - [Z-indices](#z-indices)
   - [Templates by category](#templates-by-category)
     - [Animation / transition](#animation--transition)
+    - [Appearance](#appearance)
     - [Aspect ratios](#aspect-ratios)
     - [Background](#background)
     - [Background color](#background-color)
     - [Border color](#border-color)
     - [Color adjustment](#color-adjustment)
     - [Color definitions](#color-definitions)
+    - [Color scheme](#color-scheme)
     - [Dimensions](#dimensions)
     - [Font families](#font-families)
     - [Fx](#fx)
@@ -1111,7 +1114,7 @@ These are readily usable (and used by a growing number of example projects in
 this repo), but also are provided as starting point to define your own custom
 framework(s)...
 
-Currently, there are 937 CSS utility classes (incl. 64 templates) defined in "MetaCSS base" (v0.9.0):
+Currently, there are 946 CSS utility classes (incl. 70 templates) defined in "MetaCSS base" (v0.12.0):
 
 ### Classes by category
 
@@ -1342,6 +1345,12 @@ Currently, there are 937 CSS utility classes (incl. 64 templates) defined in "Me
 - `border-box` (border-box)
 - `content-box` (content-box)
 
+#### Color scheme
+
+- `color-scheme-dark` (dark)
+- `color-scheme-light` (light)
+- `color-scheme-light-dark` (light dark)
+
 #### Content
 
 <details><summary>6 items:</summary>
@@ -2329,6 +2338,14 @@ Sets transition-timing-function to `steps(num)`
 
 </details>
 
+#### Appearance
+
+##### `appearance(mode)`
+
+- **mode**: CSS value
+
+Sets appearance (incl. `-webkit` prefixed version) to given value
+
 #### Aspect ratios
 
 ##### `aspect-ratio(width, height)`
@@ -2467,6 +2484,47 @@ Defines a rgb() color variable with given name and additional derived vars for e
 
 </details>
 
+#### Color scheme
+
+<details><summary>5 items:</summary>
+
+##### `bg-light-dark(light, dark)`
+
+- **light**: variable name (without `--` prefix)
+- **dark**: variable name (without `--` prefix)
+
+Sets `background-color` using CSS light-dark() function
+
+##### `border-light-dark(light, dark)`
+
+- **light**: variable name (without `--` prefix)
+- **dark**: variable name (without `--` prefix)
+
+Sets `border-color` using CSS light-dark() function
+
+##### `fill-light-dark(light, dark)`
+
+- **light**: variable name (without `--` prefix)
+- **dark**: variable name (without `--` prefix)
+
+Sets `fill` color using CSS light-dark() function
+
+##### `light-dark(light, dark)`
+
+- **light**: variable name (without `--` prefix)
+- **dark**: variable name (without `--` prefix)
+
+Sets `color` using CSS light-dark() function
+
+##### `stroke-light-dark(light, dark)`
+
+- **light**: variable name (without `--` prefix)
+- **dark**: variable name (without `--` prefix)
+
+Sets `stroke` color using CSS light-dark() function
+
+</details>
+
 #### Dimensions
 
 <details><summary>6 items:</summary>

packages/meta-css/specs/_info.mcss.json

@@ -1,7 +1,7 @@
 {
 	"info": {
 		"name": "MetaCSS base",
-		"version": "0.9.0"
+		"version": "0.12.0"
 	},
 	"media": {
 		"ns": { "min-width": "640px" },

packages/meta-css/specs/colors.mcss.json

@@ -46,9 +46,20 @@
 		}
 	},
 	"vars": {
+		"schemes": ["border-", "background-", ""],
 		"fill-stroke": ["fill", "stroke"]
 	},
 	"specs": [
+		{
+			"doc": { "group": "color scheme", "desc": "<v>" },
+			"name": "color-scheme-<k>",
+			"props": "color-scheme",
+			"values": {
+				"light": "light",
+				"dark": "dark",
+				"light-dark": "light dark"
+			}
+		},
 		{
 			"doc": { "group": "border color", "desc": "<v>" },
 			"name": "border-color-<k>",
@@ -119,6 +130,59 @@
 		}
 	],
 	"templates": [
+		{
+			"doc": {
+				"group": "color scheme",
+				"desc": "Sets `border-color` using CSS light-dark() function",
+				"args": [
+					"light: variable name (without `--` prefix)",
+					"dark: variable name (without `--` prefix)"
+				]
+			},
+			"name": "border-light-dark",
+			"props": { "border-color": "light-dark(var(--{0}), var(--{1}))" }
+		},
+		{
+			"doc": {
+				"group": "color scheme",
+				"desc": "Sets `background-color` using CSS light-dark() function",
+				"args": [
+					"light: variable name (without `--` prefix)",
+					"dark: variable name (without `--` prefix)"
+				]
+			},
+			"name": "bg-light-dark",
+			"props": {
+				"background-color": "light-dark(var(--{0}), var(--{1}))"
+			}
+		},
+		{
+			"doc": {
+				"group": "color scheme",
+				"desc": "Sets `color` using CSS light-dark() function",
+				"args": [
+					"light: variable name (without `--` prefix)",
+					"dark: variable name (without `--` prefix)"
+				]
+			},
+			"name": "light-dark",
+			"props": {
+				"background-color": "light-dark(var(--{0}), var(--{1}))"
+			}
+		},
+		{
+			"doc": {
+				"group": "color scheme",
+				"desc": "Sets `<var>` color using CSS light-dark() function",
+				"args": [
+					"light: variable name (without `--` prefix)",
+					"dark: variable name (without `--` prefix)"
+				]
+			},
+			"name": "<var>-light-dark",
+			"props": { "<var>": "light-dark(var(--{0}), var(--{1}))" },
+			"vars": ["fill-stroke"]
+		},
 		{
 			"doc": {
 				"group": "border color",

packages/meta-css/specs/display.mcss.json

@@ -30,6 +30,15 @@
 			"doc": { "group": "layout", "args": ["num: column count"] },
 			"name": "columns",
 			"props": "column-count"
+		},
+		{
+			"doc": {
+				"group": "appearance",
+				"desc": "Sets appearance (incl. `-webkit` prefixed version) to given value",
+				"args": ["mode: CSS value"]
+			},
+			"name": "appearance",
+			"props": { "appearance": "{0}", "-webkit-appearance": "{0}" }
 		}
 	]
 }