ocean-ds / ocean-tokens

Ocean DS Design Tokens

Ocean Tokens

This project powered by Theo provides design tokens to the Ocean design system.

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – Salesforce UX

Installation

yarn add @useblu/ocean-tokens

or

npm i @useblu/ocean-tokens

Usage

Javascript

import styled from 'styled-components';
import {
  fontFamilyHighlight,
  fontSizeLg,
  fontWeightExtrabold,
  lineHeightMedium,
  colorInterfaceLightPure,
} from '@useblu/ocean-tokens/web/tokens';

export const Heading1 = styled.h1`
  font-family: ${fontFamilyHighlight};
  font-size: ${fontSizeLg};
  font-weight: ${fontWeightExtrabold};
  line-height: ${lineHeightMedium};
  color: ${colorInterfaceLightPure};
`;

Sass

@import '~@useblu/ocean-tokens/web/tokens.scss';

.h1 {
  font-family: $font-family-highlight;
  font-size: $font-size-lg;
  font-weight: $font-weight-extrabold;
  line-height: $line-height-medium;
  color: $color-interface-light-pure;
}

Versioning

This package uses (Semantic Release)[https://github.com/semantic-release/semantic-release] for versioning and distributing to NPM. It analyses commits since last version to generate or not a new version. Use the follow commit prefixes to bump versions:

fix: Generates patch versions feat: Generates minor versions BREAKING CHANGES: Generate major versions

Other prefix commits (like chore:) will be ignored!

Contributing

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of this project! 💙 Read below to learn how you can take part of it.

Code of Conduct

We adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing Guide

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes.

Good First Issues

To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started.

Join our community

Join our discord server to get the latest updates, chat with other Ocean enthusiasts, and see what's happening in the community!

License

All packages are licensed under the terms of the GPL-3.0 License.

ocean-tokens's Issues

Change Caption font-weight

Change font-weight from $font-weight-regular to $font-weight-medium.

Add contribution guide (Issue template, PR template)

Expected behaviour

Add a issue Template, PR template and a code of conduct for contribuition

Actual behaviour

Does not have

Change color token name

Change colors name from Status Neutral to Status Warning.
$color-status-neutral-pure -> $color-status-warning-pure
$color-status-neutral-up -> $color-status-warning-up
$color-status-neutral-down -> $color-status-warning-down
$color-status-neutral-deep -> $color-status-warning-deep

Discussão - Modelo de versionamento e organização de pastas das plataformas (Web, iOS, Android)

Motivation

We need to provide a model for structuring the code and versioning that portrays the reality of having 3 types of outputs from a single project. Web, Android and iOS.

Current scenario

The current model only provides cases for the generation of Web tokens, but we still have the Android and iOS projects to be covered.

In conversation with Elton, we raised some possible points where improvements / adaptations would be necessary, such as CI configurations and versioning rules, so that we can work in a healthy way with the 3 platforms in harmony.

Possible solutions

Versioning

We talked about something that ultimately produces a result like:

web-v1.0.0
web-v1.1.0
web-v1.2.0

android-v1.0.0
android-v1.1.0
android-v1.2.0

ios-v1.0.0
ios-v1.1.0
ios-v1.2.0

The point is that this is only a part, as we have to define the correct version increment rule for each case.

To help solve the issue of the increment rule, we also thought about maybe changing the project's folder structure, where each platform would end up being independent to do its versioning.

platforms /
+ - ios
    + - formaters /
    + - package.json
+ - android
    + - formaters /
    + - package.json
+ - web
    + - formaters /
    + - package.json
src /
+ - tokens.yml
package.json

To help organize the solution above, Elton even suggested that we take a look at https://github.com/lerna/lerna to see if it works.

We would like to open this thread to make a decision on how we are going to proceed.

Format changelog file after semantic-release process

Is your feature request related to a problem? Please describe.
The changelog file is not in the prettier style after the automatic update by the semantic-release process.

Describe the solution you'd like
Run prettier on changelog file after updates.

Describe alternatives you've considered
Similar to what we've made here:
https://github.com/ocean-ds/ocean-web/blob/master/package.json#L24

Enable eslint for project quality

Is your feature request related to a problem? Please describe.
We don't have a code style guideline configured yet!

Describe the solution you'd like
We decided to adopt airbnb-core as baseline.

Additional context
Run yarn eslint during development, or catch offenses in Github PR.

2023 Tokens Update

🔄 - Update value
🆕 - Add token

COLORS

Interface Light
colorInterfaceLightUp: #F7F9FF -> #F3F5FE🔄
colorInterfaceLightDown: #EBECF5 -> #E0E2EE🔄
colorInterfaceLightDeep: #D8DAE8 -> #CED1E1🔄

Interface Dark
colorInterfaceDarkUp: #B6B9CC -> #AAADC0🔄

---

TYPOGRAPHY

Kill Avenir 🔪 💀
All fonts will be Nunito Sans. ⚠️

---

LINE HEIGHTS

lineHeightMedium: 124%
lineHeightLoose: 132% 🆕

---

SPACINGS

spacingStackXxsExtra: 12px 🆕

---

BORDER RADIUS

borderRadiusTiny: 4px 🆕
borderRadiusSm: 8px 🔄
borderRadiusMd: 12px 🔄

---

SHADOW
shadowLevel2 -> shadowLevel2Bottom 🔄
shadowLevel2Top: box-shadow: 0px **-8px** 16px 0px rgba(12, 13, 20, 0.08); (it can be applied to the mobile versions of Modals)

.

Status Color Adjust

Describe the solution you'd like
We did changes in the colors below (note: the pure color didn't change)

In this image, DEEP colors were old DOWN (with HEX adjust), and the DOWN colors in the image above are new.
The UP colors HEX was adjusted too.

Change spacing stack token values (Global)

I need some help changing some of the spacing stack token values:

(The ones in green are just fine)

The automated release is failing 🚨

🚨 The automated release from the next branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the next branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Missing package.json file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

Add tokens for animation durations

Is your feature request related to a problem? Please describe.
In different places, the same animation has a different duration because we don't have a common pattern between platforms.

Describe the solution you'd like
I think we could create tokens that represent a variety of time duration to be used in animations.

Describe alternatives you've considered

• https://github.com/salesforce-ux/design-system/blob/master/design-tokens/aliases/duration.yml
• https://github.com/Shopify/polaris-tokens/blob/main/dist/duration.json