RODS Dictionary

Used by RODS UI and other projects which need to use the dictionary and tokens of the Remessa Design System.

Contents

• Installation
• Usage
• Development
• Deploy
• Troubleshooting
• Contributing
• References

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

• Font weight variants

References

• RODS - ZeroHeight doc
• RODS - Figma
• Material UI - Tokens example
• style-dictionary
• style-dictionary - Possible formats
• Publish to npmjs