@transferwise/neptune-tokens
Advanced tools
Comparing version 0.0.3 to 0.1.0
{ | ||
"name": "@transferwise/neptune-tokens", | ||
"version": "0.0.3", | ||
"version": "0.1.0", | ||
"description": "Design tokens for the Neptune Design System", | ||
"license": "UNLICENSED", | ||
"prettier": "@transferwise/eslint-config/.prettierrc.js", | ||
"repository": { | ||
@@ -12,4 +11,4 @@ "type": "git", | ||
"files": [ | ||
"*.css", | ||
"*.json", | ||
"*.css", | ||
"*.less" | ||
@@ -23,10 +22,3 @@ ], | ||
"devDependencies": { | ||
"@transferwise/eslint-config": "^6.0.0", | ||
"eslint-plugin-fp": "^2.3.0", | ||
"eslint-plugin-import": "^2.20.2", | ||
"eslint-plugin-jsx-a11y": "^6.2.3", | ||
"eslint-plugin-prettier": "^3.1.3", | ||
"eslint-plugin-react-hooks": "^4.0.4", | ||
"eslint-plugin-react": "^7.20.0", | ||
"eslint": "^7.1.0", | ||
"fs-extra": "^9.0.1", | ||
"prettier": "^2.0.5", | ||
@@ -33,0 +25,0 @@ "style-dictionary": "^2.10.0" |
@@ -30,7 +30,7 @@ # Neptune Tokens [![npm](https://img.shields.io/npm/v/@transferwise/neptune-tokens.svg)](https://www.npmjs.com/package/@transferwise/neptune-tokens) | ||
### Web usage | ||
### Web | ||
```less | ||
// CSS custom properties | ||
@import '@transferwise/neptune-tokens/spacing.css'; | ||
@import "@transferwise/neptune-tokens/spacing.css"; | ||
@@ -44,3 +44,3 @@ .tw-checkable-card { | ||
// Less variables | ||
@import '@transferwise/neptune-tokens/spacing.less'; | ||
@import "@transferwise/neptune-tokens/spacing.less"; | ||
@@ -71,9 +71,9 @@ .tw-checkable-card { | ||
### Web usage | ||
### Web | ||
We currently only have one theme on web, so the main `colors.css` build uses the values from the `light` theme. | ||
We currently only have one theme on web, so `colors.css` directly references the values from the `light` theme. | ||
```less | ||
// CSS custom properties | ||
@import '@transferwise/neptune-tokens/colors.css'; | ||
@import "@transferwise/neptune-tokens/colors.css"; | ||
@@ -89,3 +89,3 @@ .button { | ||
// Less variables | ||
@import '@transferwise/neptune-tokens/colors-base.less'; | ||
@import "@transferwise/neptune-tokens/colors-base.less"; | ||
@@ -97,4 +97,13 @@ .special-brand-element { | ||
### Figma usage | ||
### iOS | ||
We generate 2 asset catalogs for iOS: | ||
- `BaseColors.xcassets` contains the base colours | ||
- `Colors.xcassets` contains the semantic colours with the `light` and `dark` themes associated with iOS appearances | ||
To use them, copy both catalogs on the [`dist`](https://github.com/transferwise/neptune-tokens/tree/master/dist) folder to your iOS project. | ||
### Figma | ||
To import or update colours on the Figma libraries for Neptune: | ||
@@ -101,0 +110,0 @@ |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
55568
3
108