https://github.com/ocean-ds/ocean-tokens

Ocean DS Design Tokens
https://github.com/ocean-ds/ocean-tokens

design-system design-tokens style-dictionary

Last synced: about 1 month ago
JSON representation

Ocean DS Design Tokens

• Host: GitHub
• URL: https://github.com/ocean-ds/ocean-tokens
• Owner: ocean-ds
• License: gpl-3.0
• Created: 2019-09-03T20:57:23.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-06T08:55:44.000Z (5 months ago)
• Last Synced: 2024-11-30T16:15:49.773Z (2 months ago)
• Topics: design-system, design-tokens, style-dictionary
• Language: JavaScript
• Homepage: https://ocean-ds.github.io/ocean-tokens
• Size: 1.56 MB
• Stars: 7
• Watchers: 21
• Forks: 2
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: .github/CODE_OF_CONDUCT.md
  • Security: .github/SECURITY.md

Awesome Lists containing this project

README

        


  Ocean Tokens





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  

  

    

  



This project powered by [Theo](https://github.com/salesforce-ux/theo) provides design tokens to the [Ocean](https://zeroheight.com/9c9b2b3aa/p/257272-ocean-ds/t/968532) 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](https://www.lightningdesignsystem.com/design-tokens/)

## Installation

```sh

yarn add @useblu/ocean-tokens

```

or

```sh

npm i @useblu/ocean-tokens

```

## Usage

### Javascript

```js

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

```scss

@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! :blue_heart: 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](.github/CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.

### Contributing Guide

Read our [contributing guide](.github/CONTRIBUTING.md) 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](https://github.com/ocean-ds/ocean-tokens/labels/good%20first%20issue) that contain bugs which have a relatively limited scope. This is a great place to get started.

## Join our community

Join our [discord server](https://discord.gg/hDWzGPKuG2) 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](LICENSE).