@automattic/calypso-color-schemes - npm Package Compare versions

Comparing version 2.1.1 to 3.0.0

CHANGELOG.md

 # Release Notes
 
+## Unreleased
+
+## 3.0.0
+
+- Added a new color for Mastodon.
+- Switched from `node-sass` to `sass` (Dart Sass) for processing Sass files.
+  - Removed dependency `node-sass`
+  - Added dependency `sass ^1.32.13`
+- Updated dependencies:
+  - postcss to `^8.2.15`
+  - node-sass to `^6.0.0`
+
 ## 2.1.1
 
-* Updated the color palette to the most recent version.
-* Updated `--color-simplenote` with the new brand color.
+- Updated the color palette to the most recent version.
+- Updated `--color-simplenote` with the new brand color.
 
 ## 2.1.0
 
-* Updated the color palette to the most recent version.
-* Added the following RGB counterparts of the existing properties:
-  * `--color-jetpack-onboarding-background-rgb`
-  * `--color-jetpack-onboarding-text-rgb`
-* Removed the following properties:
-  * `--color-section-nav-item-background-hover`
-  * `--color-themes-active-text`
-  * `--color-themes-active-text-rgb`
+- Updated the color palette to the most recent version.
+- Added the following RGB counterparts of the existing properties:
+  - `--color-jetpack-onboarding-background-rgb`
+  - `--color-jetpack-onboarding-text-rgb`
+- Removed the following properties:
+  - `--color-section-nav-item-background-hover`
+  - `--color-themes-active-text`
+  - `--color-themes-active-text-rgb`
 
 ## 2.0.2
 
-* Included missing SCSS dependencies in the published package.
+- Included missing SCSS dependencies in the published package.
 
 ## 2.0.1
 
-* Included WP Admin button colors.
+- Included WP Admin button colors.
 
@@ -31,10 +43,10 @@ ## 2.0.0
 
-* Updated [Color Studio](https://color-studio.blog), the primary dependency, to the most recent version.
-* Following the [files](https://github.com/Automattic/color-studio/blob/master/dist/color-properties.css) [generated](https://github.com/Automattic/color-studio/blob/master/dist/color-properties-rgb.css) by Color Studio, updated all properties to use consistent names (including index numbers).
-* Phased out all SCSS variables in favor of CSS custom properties.
-* Refactored the existing component-specific properties and prefixed all theme variables with `--color`.
-* Introduced semantic `-inverted` properties which are the successor to `--color-white`.
-* Split all color schemes into separate partial files.
+- Updated [Color Studio](https://color-studio.blog), the primary dependency, to the most recent version.
+- Following the [files](https://github.com/Automattic/color-studio/blob/HEAD/dist/color-properties.css) [generated](https://github.com/Automattic/color-studio/blob/HEAD/dist/color-properties-rgb.css) by Color Studio, updated all properties to use consistent names (including index numbers).
+- Phased out all SCSS variables in favor of CSS custom properties.
+- Refactored the existing component-specific properties and prefixed all theme variables with `--color`.
+- Introduced semantic `-inverted` properties which are the successor to `--color-white`.
+- Split all color schemes into separate partial files.
 
-For more details, please refer to Calypso’s [color guide](https://github.com/Automattic/wp-calypso/blob/update/colors/docs/color.md) or the [default color scheme](https://github.com/Automattic/wp-calypso/blob/master/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss).
+For more details, please refer to Calypso’s [color guide](https://github.com/Automattic/wp-calypso/blob/update/colors/docs/color.md) or the [default color scheme](https://github.com/Automattic/wp-calypso/blob/HEAD/packages/calypso-color-schemes/src/shared/color-schemes/_default.scss).
 
@@ -41,0 +53,0 @@ ## 1.0.0

package.json

 {
-	"name": "@automattic/calypso-color-schemes",
-	"version": "2.1.1",
-	"description": "Calypso Shared Style Bits",
-	"author": "Automattic Inc.",
-	"license": "GPL-2.0-or-later",
-	"keywords": [
-		"calypso",
-		"wordpress",
-		"sass",
-		"css"
-	],
-	"homepage": "https://github.com/Automattic/wp-calypso/tree/master/packages/calypso-color-schemes/README.md",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/Automattic/wp-calypso.git",
-		"directory": "packages/calypso-color-schemes"
-	},
-	"bugs": {
-		"url": "https://github.com/Automattic/wp-calypso/issues"
-	},
-	"main": "dist/calypso-color-schemes.css",
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"clean": "check-npm-client && npx rimraf dist src/__color-studio",
-		"prepare": "check-npm-client && node bin/prepare-sass-assets.js && node bin/build-css.js"
-	}
-}
+  "name": "@automattic/calypso-color-schemes",
+  "version": "3.0.0",
+  "description": "Calypso Shared Style Bits.",
+  "author": "Automattic Inc.",
+  "license": "GPL-2.0-or-later",
+  "keywords": [
+    "calypso",
+    "wordpress",
+    "sass",
+    "css"
+  ],
+  "homepage": "https://github.com/Automattic/wp-calypso/tree/HEAD/packages/calypso-color-schemes/README.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/calypso-color-schemes"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "main": "css/index.css",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf js css src/__color-studio",
+    "prepare": "node bin/prepare-sass-assets.js && node bin/build-css.js"
+  },
+  "devDependencies": {
+    "@automattic/calypso-eslint-overrides": "^1.0.0",
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "@automattic/color-studio": "2.5.0",
+    "postcss": "^8.4.5",
+    "postcss-custom-properties": "^11.0.0",
+    "sass": "^1.37.5"
+  }
+}

README.md

@@ -15,3 +15,37 @@ # Calypso Color Schemes
 
-Add this packages CSS from `dist/calypso-color-schemes.css` in order to access the CSS custom
+### Using the CSS output
+
+Add this packages CSS from `css/index.css` in order to access the CSS custom
 properties.
+
+When importing, you can do
+
+```js
+import '@automattic/calypso-color-schemes';
+```
+
+And this will give you the CSS.
+
+### Using the JS output
+
+Sometimes, `calypso-color-schemes` properties are consumed in JavaScript. To avoid parsing CSS syntax on your own, or to help `postcss-custom-properties` use them without parsing the CSS (much faster), use the JS output as follows:
+
+```js
+import { customProperties } from '@automattic/calypso-color-schemes/js'; // mind the js suffix
+```
+
+Or with `postcss-custom-properties`, and `postcss.config.js` can look like this:
+
+```js
+module.exports = () => ( {
+	plugins: {
+		'postcss-custom-properties': {
+			importFrom: [ require.resolve( '@automattic/calypso-color-schemes/js' ) ],
+		},
+	},
+} );
+```
+
+### Note on using the JS output
+
+The CSS files include variable definitions for all Calypso color schemes (Classic Blue, Contrast, Midnight, ...), but the JS exports include only variables from the `:root` selector, i.e., only the fallback default theme.

tsconfig.json

 {
-	"extends": "@automattic/calypso-build/tsconfig",
-	"exclude": [ "node_modules" ],
-	"compilerOptions": {
-		"allowJs": true
-	}
+	"extends": "@automattic/calypso-typescript-config/js-package.json"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

332222

increased by103.88%

Number of package files

28

increased by47.37%

Lines of code

4161

increased by109.41%

Number of lines in readme file

51

increased by200%

Worsened metrics

Dev dependency count

6

increased byInfinity%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes