diff --git a/packages/meta-css/README.md b/packages/meta-css/README.md
index efeab0543e..58bb8d67b9 100644
--- a/packages/meta-css/README.md
+++ b/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
6 items:
@@ -2329,6 +2338,14 @@ Sets transition-timing-function to `steps(num)`
+#### 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
+#### Color scheme
+
+5 items:
+
+##### `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
+
+
+
#### Dimensions
6 items:
diff --git a/packages/meta-css/specs/_info.mcss.json b/packages/meta-css/specs/_info.mcss.json
index ffdf3248af..f4dfc55188 100644
--- a/packages/meta-css/specs/_info.mcss.json
+++ b/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" },
diff --git a/packages/meta-css/specs/colors.mcss.json b/packages/meta-css/specs/colors.mcss.json
index 5143bd36da..5fb3545ec0 100644
--- a/packages/meta-css/specs/colors.mcss.json
+++ b/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": "" },
+ "name": "color-scheme-",
+ "props": "color-scheme",
+ "values": {
+ "light": "light",
+ "dark": "dark",
+ "light-dark": "light dark"
+ }
+ },
{
"doc": { "group": "border color", "desc": "" },
"name": "border-color-",
@@ -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 `` color using CSS light-dark() function",
+ "args": [
+ "light: variable name (without `--` prefix)",
+ "dark: variable name (without `--` prefix)"
+ ]
+ },
+ "name": "-light-dark",
+ "props": { "": "light-dark(var(--{0}), var(--{1}))" },
+ "vars": ["fill-stroke"]
+ },
{
"doc": {
"group": "border color",
diff --git a/packages/meta-css/specs/display.mcss.json b/packages/meta-css/specs/display.mcss.json
index cedc0e0aac..8addabb819 100644
--- a/packages/meta-css/specs/display.mcss.json
+++ b/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}" }
}
]
}