rods-dictionary v1.2.0
RODS Dictionary
Used by RODS UI and other projects which need to use the dictionary and tokens of the Remessa Design System.
Contents
Usage
Our tokens are generated and distributed based on available brands: 'for-companies', 'for-people' e 'institutional'.
JS
There are two ways to use it: installing the package in your application or using the static files URL.
Module:
npm i @beetech/rods-dictionary
import RodsDictionary from '@beetech/rods-dictionary/web/{BRAND_NAME}'
const textMain = RodsDictionary.rods.color.main.value
SCRIPT:
<script src="https://rods-dictionary.remessaonline.com.br/web/{BRAND_NAME}/index.js"></script>
const RodsDictionary = window.RodsDictionary
const textMain = RodsDictionary.rods.color.main.value
CSS
<link rel="stylesheet" href="https://rods-dictionary.remessaonline.com.br/web/{BRAND_NAME}/variables.css" />
.text {
color: var(--rods-color-main);
}
SCSS
@import url(https://rods-dictionary.remessaonline.com.br/web/{BRAND_NAME}/_variables.scss);
.text {
color: $rods-color-main;
}
Font
@font-face {
font-family: 'Okta Neue';
font-weight: 900;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Bold.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 800;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Bold.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 700;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Bold.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 600;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Semibold.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 500;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Medium.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 400;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Normal.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 300;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Light.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 200;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Light.otf');
}
@font-face {
font-family: 'Okta Neue';
font-weight: 100;
src: url('https://rods-dictionary.remessaonline.com.br/assets/fonts/OktaNeue-Light.otf');
}
.text-bold {
font-family: 'Okta Neue', sans-serif;
font-weight: 700;
}
.text-semibold {
font-family: 'Okta Neue', sans-serif;
font-weight: 600;
}
.text-medium {
font-family: 'Okta Neue', sans-serif;
font-weight: 500;
}
.text-normal {
font-family: 'Okta Neue', sans-serif;
font-weight: 400;
}
.text-light {
font-family: 'Okta Neue', sans-serif;
font-weight: 300;
}
Flutter
// import file into project https://rods-dictionary.remessaonline.com.br/mobile/{BRAND_NAME}/variables.dart
static TextStyle text = TextStyle(
color: StyleDictionary.rodsColorMain,
);
To use static files, see: assets
Remembering that to install internal packages from Remessa, you must be connected to the VPN. See more here
Questions about use fill this form or open an issue or pull request.
Assets
Static files are available under the domain: https://rods-dictionary.remessaonline.com.br and follow the folder structure below:
├── assets
│ └── fonts
│ ├── OktaNeue-Bold.otf
│ ├── OktaNeue-Light.otf
│ ├── OktaNeue-Medium.otf
│ ├── OktaNeue-Normal.otf
│ └── OktaNeue-Semibold.ttf
├── mobile
│ ├── for-companies
│ └── variables.dart
│ ├── for-people
│ └── variables.dart
│ └── institutional
│ └── variables.dart
├── web
│ ├── for-companies
│ ├── _variables.scss
│ ├── variables.css
│ ├── index.d.ts
│ └── index.js
│ ├── for-people
│ ├── _variables.scss
│ ├── variables.css
│ ├── index.d.ts
│ └── index.js
│ └── institutional
│ ├── _variables.scss
│ ├── variables.css
│ ├── index.d.ts
│ └── index.js
Attention (CORS)
Only the following domains are accepted to request these files using the browser because of the CORS Rules:
https://*.beetech.global
https://*.pesoreal.xyz
https://*.beecambio.com.br
https://*.libraiene.xyz
https://*.remessaonline.com.br
https://*.eurodolar.xyz
https://remessa.zeroheight.com
http://localhost
http://localhost:3000
http://localhost:5000
http://localhost:8080
http://localhost:4008
http://localhost:4003
To allow your domain to access these file, add the domain to the aws_s3 module on terraform on the this file on beetech-infrastructure repository. Use this PR#2245 as example.
Development
Tokens
We use the Design Tokens plugin in Figma to generate some project tokens.
The tokens exported by the plugin are:
color
grid
typography
elevation
shadow
Tokens like opacity
and size
are not exported by Figma and have their static values included in the project.
Updating tokens
Figma
To update the tokens generated by Figma it is necessary to have the Design Tokens plugin installed and to have write permission in the Design Tokens Figma project.
After installing the plugin, follow these steps to export the .json
file that will be updated.
Save the exported file in the path external-tokens/figma.json
.
:warning: Warning |
---|
The project transformers are prepared to match the current structure exported by Design Tokens. Make sure the final values generated are valid and that all tests are passing successfully. |
Tokens
To update the tokens, change JSON files inside the src/tokens
folder.
To generate the token files, we perform the following steps:
- RemoveProps: Remove unused properties
- RenameProps: Rename properties to facilitate the use
- NormalizePropsColor: Normalizes the color object structure
- NormalizePropsFont: Normalizes the source object structure
- ConvertKeysToCamelCase: Converts object keys from kebab format to camel case
- SplitGeneralProperties: Create a file with common properties for all brands
- SplitThemeProperties: Creates a file with specific properties for each brand
:warning: Be careful with your custom changes. If someone follows the steps below, It can override the customization made before.
npm run handle-tokens-figma
Output:
|── src
| ├── tokens
│ ├── general
│ ├── index.json
│ ├── theme
│ ├── for-companies.json
│ ├── for-people.json
│ ├── institutional.json
Build
The build is generated using the style-dictionary library and the platform and branding settings are located here.
Run npm run build
to generate an update.
Commit
Commit message uses this setting:
- commitizen: commit conventions CLI (https://github.com/commitizen/cz-cli)
- commitlint: a commit messages checker (https://commitlint.js.org/)
- husky: modern native git hooks made easy (https://github.com/typicode/husky)
To start a commit, run npm run commit
instead of the usual git commit
.
Troubleshooting
References
3 years ago