@servicetitan/tokens - npm Package Compare versions

Comparing version 12.1.0 to 12.1.1

package.json

 {
-    "name": "@servicetitan/tokens",
-    "version": "12.1.0",
-    "description": "",
-    "homepage": "https://anvil.servicetitan.com",
-    "repository": {
-        "type": "git",
-        "url": "github:servicetitan/anvil",
-        "directory": "packages/tokens"
-    },
-    "main": "./dist/tokens.js",
-    "scripts": {
-        "start": "npm-run-all watch --silent",
-        "build": "npm-run-all build:init build:style-dictionary --silent",
-        "build:init": "rimraf dist",
-        "build:style-dictionary": "npm-run-all build:variables build:typescript build:message",
-        "build:variables": "node ./build.js",
-        "build:typescript": "tsc",
-        "prebuild:message": "echo \" \"",
-        "build:message": "echo \"🎉 Anvil Tokens built\"",
-        "postbuild:message": "echo \" \"",
-        "watch": "chokidar \"src/**/*.*\" -c \"npm run build\""
-    },
-    "files": [
-        "dist",
-        "readme.md"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "devDependencies": {
-        "@types/node": "16.9.1",
-        "chokidar-cli": "3.0.0",
-        "core-js": "3.17.3",
-        "npm-run-all": "4.1.5",
-        "rimraf": "3.0.2",
-        "style-dictionary": "3.0.2",
-        "typescript": "4.4.3"
-    },
-    "gitHead": "d62ff4749b2239a5095beea4f778e939c6500749"
+  "name": "@servicetitan/tokens",
+  "version": "12.1.1",
+  "description": "",
+  "homepage": "https://anvil.servicetitan.com",
+  "repository": {
+    "type": "git",
+    "url": "github:servicetitan/tokens"
+  },
+  "main": "build/web/index.js",
+  "scripts": {
+    "build": "run-s clean build:*",
+    "build:typescript": "node ./build-typescript.js && tsc --project tsconfig.json",
+    "build:swift": "node ./build-swift.js",
+    "build:jetpack": "node ./build-kotlin.js",
+    "build:figma": "node ./build-figma.js",
+    "clean": "rm -rf build && echo \"Cleaning build folder\"",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "release": "auto shipit --dry-run && cli-confirm \"Are you sure the changes look correct?\" && npm run build && auto shipit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@auto-it/first-time-contributor": "^10.36.5",
+    "@auto-it/omit-release-notes": "^10.36.5",
+    "@auto-it/released": "^10.36.5",
+    "auto": "^10.36.5",
+    "cli-confirm": "^1.0.1",
+    "handlebars": "^4.7.7",
+    "lodash": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "sass": "^1.50.1",
+    "style-dictionary": "latest",
+    "tinycolor2": "^1.4.2",
+    "typescript": "^4.7.3"
+  },
+  "files": [
+    "build/",
+    "core/",
+    "Package.swift"
+  ]
 }

README.md

@@ -1,44 +0,82 @@
-# Anvil Tokens
-The design tokens project is available to use in developing custom components and UI that is also used in `@servicetitan/design-system`. It contains variables in SCSS, Less, and JS variables that can be imported into any type of project.
+# Design Token for Anvil Design System
 
-## Installation
+All of the design tokens and assets for Anvil is in this package. It generates assets for iOS(swift), Android(Kotlin), and web(JS).
+
+To get started, run:
 ```
-npm install @servicetitan/tokens --save
+$ npm install
+$ npm run build
 ```
 
-Within the packages `dist/` directory there are a few files that can be used.
+The `npm run build` runs style-dictionary build steps to generate the files for each platform. Every time you change something in the style dictionary, such as changing a color value or adding a new design token, you will have to run this command again to generate the updated assets.
 
-| File             | Description                              |
-| ---------------- | ---------------------------------------- |
-| tokens.common.js | JS object of variables as module.exports |
-| tokens.less      | Less variables                           |
-| tokens.scss      | SCSS variables                           |
 
+# Making changes
+> Don't forget that we also have Figma counterpart that requires udpate when there is any change(May 2022).
+> <br />Link to Figma guide: https://www.figma.com/file/N0wRgro1ZHxK0VTIyoj2li/Anvil-Theme-Core?node-id=1204%3A1733
 
-## Using Less Tokens
+## Updating existing token
 
-```
-@import (reference) '~@servicetitan/tokens/dist/tokens.less';
+1. Make a new branch
+2. Update the token object located under `tokens/themes/<theme name>` with the new value
+3. Run `npm run build` to update the assets in the `build` folder
+4. Create a PR
 
-div {
-    color: @color-blue;
-}
-```
+## Adding a new design token
 
-## Using SCSS Tokens
+> Adding a new design token requires all existing themes to have respective token defined. This only applies to color related tokens for now(May 2022).
 
+Steps to adding new design token:
+1. Make a new branch 
+2. Update `tokens/themes/theme.d.ts` with the new token
+3. Add the new design token key and value to all of the themes
+4. Run `npm run build` to update the assets in the `build` folder
+5. Create a PR
+
+## Adding a new theme
+
+Copy a theme to base on, for example `tokens/themes/core`, and make changes to the values and that's all you have to do.
+
+# How to use
+
+## Android(Kotlin)
+
+### Steps
+1. Copy the `AnvilColorToken.kt` and `AnvilThemeToken.kt` from `build/kotlin/{theme}` folder
+2. Adjust the package in each file to match your file structure as necessary
+
+### Files
+- `AnvilColorToken.kt` contains base colors.
+- `AnvilThemeToken.kt` contains color pairings for the light and the dark mode.
+
+### Example of using the themed color
+```Kotlin
+AnvilThemeToken.AppBackground.forTheme()
 ```
-@import 'node_modules/@servicetitan/tokens/dist/tokens';
 
-div {
-    color: $color-blue;
-}
+### Example of using the base color
+```Kotlin
+AnvilColorToken.Neutral10
 ```
 
-## Using JS Tokens
+## iOS(Swift)
 
+### Add as dependencies
+To include this package, add to your `Package.swift`:
+```Swift
+dependencies: [
+    .package(
+        url: "https://github.com/servicetitan/tokens.git",
+        from: "12.0.0"
+    )
+]
 ```
-import tokens from '@servicetitan/tokens';
 
-const Component = () => <div style={{backgroundColor: tokens.colorBlue}} />
+### Example of using the base color
+```Swift
+import AnvilCore
+
+Text("Hello World")
+.foregroundColor(.anvil(.neutral10))
 ```
+

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 42 instances in 1 package

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed 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

3721717

increased by2165.18%

Number of package files

226

increased by153.93%

Lines of code

5809

increased by22.06%

Number of lines in readme file

83

increased by84.44%

Worsened metrics

Dev dependency count

12

increased by71.43%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

43

increased by4200%

No dependency changes