@csstools/postcss-light-dark-function - npm Package Compare versions

Comparing version 1.0.3 to 1.0.4

CHANGELOG.md

 # Changes to PostCSS Light Dark Function
 
+### 1.0.4
+
+_May 4, 2024_
+
+- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.3.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#230) (minor)
+- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.6.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#262) (patch)
+
 ### 1.0.3
@@ -15,10 +22,2 @@
 
-### 1.0.1
-
-_March 13, 2024_
-
-- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.4`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#224) (patch)
-- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.1.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#311) (patch)
-- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.6.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#261) (patch)
-
 [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function/CHANGELOG.md)

package.json

 {
 	"name": "@csstools/postcss-light-dark-function",
 	"description": "Use the light-dark() color function in CSS",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"contributors": [
@@ -51,4 +51,4 @@ {
 	"dependencies": {
-		"@csstools/css-parser-algorithms": "^2.6.1",
-		"@csstools/css-tokenizer": "^2.2.4",
+		"@csstools/css-parser-algorithms": "^2.6.2",
+		"@csstools/css-tokenizer": "^2.3.0",
 		"@csstools/postcss-progressive-custom-properties": "^3.2.0",
@@ -55,0 +55,0 @@ "@csstools/utilities": "^1.0.0"

README.md

@@ -12,17 +12,15 @@ # PostCSS Light Dark Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
-```pcss
-.dark {
-	color-scheme: dark;
-}
+Read more about this feature on mdn:
+- define the colors for light and dark with [`light-dark()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)
+- define which elements support light and/or dark with [`color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)
 
-.light {
-	color-scheme: light;
-}
+With both features combined you can mix and match color schemes in a single document, while also respecting the user's preferences.
 
-.theme {
+```pcss
+.foo {
 	color: light-dark(pink, magenta);
 }
 
-.prop {
-	--theme-color: light-dark(cyan, deepskyblue);
+.bar {
+	--bar: light-dark(cyan, deepskyblue);
 }
@@ -32,13 +30,3 @@
 
-.dark {
-	--csstools-color-scheme--dark: initial;
-	color-scheme: dark;
-}
-
-.light {
-	--csstools-color-scheme--dark:  ;
-	color-scheme: light;
-}
-
-.theme {
+.foo {
 	--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
@@ -49,8 +37,8 @@ color: var(--csstools-light-dark-toggle--0, magenta);
 
-.prop {
+.bar {
 	--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
-	--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
+	--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
 	& * {
 	--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
-	--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
+	--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
 	}
@@ -60,4 +48,4 @@ }
 @supports (color: light-dark(red, red)) {
-.prop {
-	--theme-color: light-dark(cyan, deepskyblue);
+.bar {
+	--bar: light-dark(cyan, deepskyblue);
 }
@@ -67,2 +55,48 @@ }
 
+Declare that your document supports both light and dark mode:
+
+```pcss
+:root {
+	color-scheme: light dark;
+}
+
+/* becomes */
+
+:root {
+	--csstools-color-scheme--dark:  ;
+	color-scheme: light dark;
+}@media (prefers-color-scheme: dark) {:root {
+	--csstools-color-scheme--dark: initial;
+}
+}
+```
+
+Dynamically alter the supported color scheme for some elements:
+
+```pcss
+:root {
+	/* Root only supports light mode */
+	color-scheme: light;
+}
+
+.foo {
+	/* This element and its children only support dark mode */
+	color-scheme: dark;
+}
+
+/* becomes */
+
+:root {
+	/* Root only supports light mode */
+	--csstools-color-scheme--dark:  ;
+	color-scheme: light;
+}
+
+.foo {
+	/* This element and its children only support dark mode */
+	--csstools-color-scheme--dark: initial;
+	color-scheme: dark;
+}
+```
+
 ## Usage
@@ -110,16 +144,8 @@
 ```pcss
-.dark {
-	color-scheme: dark;
-}
-
-.light {
-	color-scheme: light;
-}
-
-.theme {
+.foo {
 	color: light-dark(pink, magenta);
 }
 
-.prop {
-	--theme-color: light-dark(cyan, deepskyblue);
+.bar {
+	--bar: light-dark(cyan, deepskyblue);
 }
@@ -129,13 +155,3 @@
 
-.dark {
-	--csstools-color-scheme--dark: initial;
-	color-scheme: dark;
-}
-
-.light {
-	--csstools-color-scheme--dark:  ;
-	color-scheme: light;
-}
-
-.theme {
+.foo {
 	--csstools-light-dark-toggle--0: var(--csstools-color-scheme--dark) pink;
@@ -145,8 +161,8 @@ color: var(--csstools-light-dark-toggle--0, magenta);
 
-.prop {
+.bar {
 	--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
-	--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
+	--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
 	& * {
 	--csstools-light-dark-toggle--1: var(--csstools-color-scheme--dark) cyan;
-	--theme-color: var(--csstools-light-dark-toggle--1, deepskyblue);
+	--bar: var(--csstools-light-dark-toggle--1, deepskyblue);
 	}
@@ -153,0 +169,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

16362

increased by2.71%

Lines of code

39

increased by2.63%

Number of lines in readme file

185

increased by9.47%

Worsened metrics

Published versions last two months

2

decreased by-33.33%

Dependency changes

• Updated@csstools/css-parser-algorithms@^2.6.2

• Updated@csstools/css-tokenizer@^2.3.0