Sage Design Tokens

This repository contains the design tokens from the Sage Design System. These are maintained by the Sage DS team. This library is for distributing these tokens across multiple playforms.

Beta

Currently this library is in an unstable open beta stage. It is not ready for production at this point as the tokens are liable to drastically change between now and the production release.

Using the design tokens

Web

To make use of these tokens in your application, import the correct variable definitions based on your styling technology.

Install

To add to a project using npm:

# If you're using npm:
npm install --save @sage/design-tokens

# OR If you're using yarn:
yarn add @sage/design-tokens

You can also add the files directly by downloading from the releases page on Github.

CSS

To make use of the css variables, import them into your code like so:

/* Inside css */
@import "~@Sage/design-tokens/css/_variables.css";

// For projects where you can import css files into JS
import "@Sage/design-tokens/css/_variables.css";

This will add the variables to the root element of the page.

SCSS

To make use of the scss variables, import them into your scss files like so:

@use '~@sage/design-tokens/scss/_variables.scss';

You can also use @import, but for scss this is being deprecated in favour of @use;

LESS

To make use of the less variables, import them into your less files like so:

@import (reference) "~@sage/design-tokens/less/_variables.less";

CSS-in-JS

The js variables are exported in PascalCase, rather than dash seperated in the design system portal.

To import all of the tokens, you can do so like so:

import * as SageDesignTokens from "@sage/design-tokens";

To import a single token, such as colors-text-black-90, import it like so:

import { ColorsTextBlack90 } from "@sage/design-tokens";

A type definition file is also included to work in projects with typescript installed.

iOS

COMING SOON

Android

COMING SOON

Contributing

If you would like to help contribute to this library, please read our contributing documentation,

Licence

Licensed under the Apache License, Version 2.0 (the "License"); you may not use these files except in compliance with the License. You may obtain a copy of the License at Apache 2.0 license.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Repository maintainer

Mark Mizen, User Experience Engineer.

Copyright (c) 2021 Sage Group Plc. All rights reserved.