\n\nThis 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.\n\n> 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/)\n\n## Installation\n\n```sh\nyarn add @useblu/ocean-tokens\n```\n\nor\n\n```sh\nnpm i @useblu/ocean-tokens\n```\n\n## Usage\n\n### Javascript\n\n```js\nimport styled from 'styled-components';\nimport {\n fontFamilyHighlight,\n fontSizeLg,\n fontWeightExtrabold,\n lineHeightMedium,\n colorInterfaceLightPure,\n} from '@useblu/ocean-tokens/web/tokens';\n\nexport const Heading1 = styled.h1`\n font-family: ${fontFamilyHighlight};\n font-size: ${fontSizeLg};\n font-weight: ${fontWeightExtrabold};\n line-height: ${lineHeightMedium};\n color: ${colorInterfaceLightPure};\n`;\n```\n\n### Sass\n\n```scss\n@import '~@useblu/ocean-tokens/web/tokens.scss';\n\n.h1 {\n font-family: $font-family-highlight;\n font-size: $font-size-lg;\n font-weight: $font-weight-extrabold;\n line-height: $line-height-medium;\n color: $color-interface-light-pure;\n}\n```\n\n## Versioning\n\nThis package uses (Semantic Release)[https://github.com/semantic-release/semantic-release] for versioning and distributing to NPM.\nIt analyses commits since last version to generate or not a new version. Use the follow commit prefixes to bump versions:\n\n`fix:` Generates patch versions\n`feat:` Generates minor versions\n`BREAKING CHANGES:` Generate major versions\n\nOther prefix commits (like `chore:`) will be ignored!\n\n## Contributing\n\nWhether 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.\n\n### Code of Conduct\n\nWe 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.\n\n### Contributing Guide\n\nRead 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.\n\n### Good First Issues\n\nTo 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.\n\n## Join our community\n\nJoin 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!\n\n## License\n\nAll packages are licensed under the terms of the [GPL-3.0 License](LICENSE).\n","readmeFilename":"README.md"}
![\"Actions](\"https://github.com/ocean-ds/ocean-tokens/workflows/CI/badge.svg\"){kind=icon}
\n \n \n ![\"GitHub](\"https://img.shields.io/github/license/ocean-ds/ocean-tokens\")
\n \n \n ![\"GitHub](\"https://img.shields.io/github/last-commit/ocean-ds/ocean-tokens\")
\n \n \n ![\"Dependabot\"](\"https://img.shields.io/badge/Dependabot-enabled-brightgreen\"){kind=icon}
\n \n \n ![\"Prettier](\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg\"){kind=icon}
\n \n \n ![\"Semantic](\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"){kind=icon}
\n \n \n ![\"Conventional](\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg\"){kind=icon}
\n \n \n ![\"Conventional](\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\"){kind=icon}
\n \n \n ![\"Discord](\"https://img.shields.io/discord/875438252172136468.svg?color=7389D8&labelColor=6A7EC2&logo=discord&logoColor=ffffff\")
\n \n