@bloomreach/banana-theme - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "@bloomreach/banana-theme",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Bloomreach Banana Theme",
@@ -14,7 +14,9 @@ "repository": {
   "exports": {
-    "./css/variables.css": "./dist/css/variables.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/theme.css": "./dist/css/theme.css",
     "./css/fonts.css": "./dist/css/fonts.css"
   },
   "browser": {
-    "./css/variables.css": "./dist/css/variables.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/theme.css": "./dist/css/theme.css",
     "./css/fonts.css": "./dist/css/fonts.css"
@@ -26,11 +28,21 @@ },
   "scripts": {
-    "build": "node ./scripts/build.js",
-    "clean": "rm -rf dist"
+    "build": "ts-node ./scripts/build.ts",
+    "clean": "rm -rf dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "lint:types": "tsc --noEmit"
   },
   "devDependencies": {
+    "@bloomreach/eslint-config-base": "1.2.0",
     "@fontsource/inter": "5.0.3",
-    "@tokens-studio/sd-transforms": "0.9.6",
+    "@fontsource/roboto-mono": "5.0.5",
+    "@tokens-studio/sd-transforms": "0.10.1",
+    "@types/fs-extra": "11.0.1",
+    "eslint": "8.44.0",
+    "eslint-plugin-jsonc": "2.9.0",
     "fs-extra": "11.1.1",
-    "style-dictionary": "3.8.0"
+    "style-dictionary": "3.8.0",
+    "ts-node": "10.9.1",
+    "typescript": "5.1.6"
   }
 }

README.md

@@ -25,6 +25,11 @@ # Bloomreach Banana Theme
 
-After installing the package, you can import the CSS variables into your project.
+After installing the package, you can import the CSS variables into your project. The Banana theme currently exports two
+sets of variables: `base` and `theme`. The `base` variables are the core variables that are used to build the theme. The
+`theme` variables are the variables that are used to style your components. In general, you should use the `theme`
+variables in your project.
 
+Import the `theme` variables into your project's CSS with:
+
 ```css
-@import '@bloomreach/banana-theme/css/variables.css';
+@import '@bloomreach/banana-theme/css/theme.css';
 ```
@@ -40,5 +45,5 @@
 
-#### CSS Variables Naming Scheme
+#### Design Token Naming Scheme
 
-The naming scheme for the CSS variables is based on the following pattern:
+The naming scheme for the design tokens is based on the following pattern:
 
@@ -82,3 +87,3 @@ ```
 
-The design tokens are defined in the `tokens` directory. The `build.js` file defines the build process. The
+The design tokens are defined in the `tokens` directory. The `build.ts` file defines the build process. The
 `dist` directory is where the built files are output.
@@ -88,4 +93,5 @@
 
-Build the design tokens and output them to the `dist` directory. It will generate the following files:
- - `dist/css/variables.css`
+Build the theme using the design tokens and output them to the `dist` directory. It will generate the following files:
+ - `dist/css/base.css`
+ - `dist/css/theme.css`
  - `dist/css/fonts.css`
@@ -101,2 +107,30 @@ - `dist/assets/fonts/*.woff`
 
+#### Lint
+
+Lint the TypeScript and JavaScript files using the
+[@bloomreach/eslint-config-base](https://www.npmjs.com/package/@bloomreach/eslint-config-base) rules, and lint the JSON
+tokens using the [eslint-plugin-jsonc](https://www.npmjs.com/package/eslint-plugin-jsonc) plugin with the
+`plugin:jsonc/recommended` rules and a couple of custom rules to ensure proper formatting.
+
+Run the following command to lint the files:
+
+```bash
+npm run lint
+```
+
+Since the `build` process skips type-checking, a separate command is available to check the types using the TypeScript
+compiler.
+
+```bash
+npm run lint:types
+```
+
+To automatically fix linting errors, run the following command:
+
+```bash
+npm run lint:fix
+```
+
+Note: this will only fix the linting errors that can be fixed automatically by ESLint.
+
 #### Clean
@@ -103,0 +137,0 @@

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

Improved metrics

Total package byte prevSize

495800

67.18%

Number of package files

33

83.33%

Lines of code

288

25.22%

Number of lines in readme file

163

26.36%

Worsened metrics

Dev dependency count

11

175%

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes