SKF UI Assets 🎨

Table of contents

• Introduction
• Reporting Issues
• Getting started
• Formats
  • CSS (Custom Properties)
  • Sass
  • TypeScript

Introduction

Our token system is based on two categories:

• Global tokens (primitives)
• Semantic tokens (aliases <- start here)

When working with our tokens, always follow a bottom-up approach, meaning that the starting point should always be semantic tokens. Only if a specific token does not exist at that level should you use global tokens.

Note! If you think that a certain token is missing please add a request ticket in our Issues board.

Reporting issues

Reporting issues requires an skf email and github access. See this section

We are working on a solution to report issues without an explicit skf email, which will be publicly available.

🏃 Getting started

👶 Installation

Install using NPM

npm install @skf-aurora/ui-assets

Install using Yarn

yarn add @skf-aurora/ui-assets

Formats

CSS (Custom Properties)

VS Code Intellisense

In order to get intellisense using this project, you need to install and configure a plugin. The plugin is of your own choice, but we suggest using CSS Variable Autocomplete.

You need to configure the extension to recognize the files from our package. This is also true if you use another plugin of your own choice, but might look different. For CSS Variable Autocomplete:

1. Open .vscode/settings.json
2. Add the snippet below,

{
  ...

  "cssVariables.lookupFiles": [
    "node_modules/@skf-aurora/ui-assets/dist/tokens/css/**/*.css"
  ]
}

Sass

Our Sass files contains both simple Sass variables and maps. Maps are useful when you need to dynamically create style variants. Or recreate your own custom maps for your needs.

Importing files

With @use

We recommend the @use when importing our variables to prevent collision with other variables.

Example using default namespace:

@use '@skf-aurora/ui-assets/sass/semantic/skf-background-colors';
@use '@skf-aurora/ui-assets/sass/semantic/skf-border-colors';
@use '@skf-aurora/ui-assets/sass/semantic/skf-text-colors';

.button {
	background: skf-background-colors.$interactive-primary-light;
	border: 2px solid skf-border-colors.$brand-light;
	color: skf-text-colors.$onColor;
}

Example using custom namespace:

@use '@skf-aurora/ui-assets/sass/semantic/skf-background-colors' as bg;
@use '@skf-aurora/ui-assets/sass/semantic/skf-border-colors' as border;
@use '@skf-aurora/ui-assets/sass/semantic/skf-text-colors' as color;

.button {
	background: bg.$interactive-primary-light;
	border: 2px solid border.$brand-light;
	color: color.$onColor;
}

With @import

Default imports might be easier to work with but might interfere with local variables.

@import '@skf-aurora/ui-assets/sass/semantic/skf-background-colors';
@import '@skf-aurora/ui-assets/sass/semantic/skf-border-colors';
@import '@skf-aurora/ui-assets/sass/semantic/skf-text-colors';

$interactive-primary-light: #fff; // Will override `$interactive-primary-light` from `skf-background-colors`

.button {
	background: $interactive-primary-light;
	border: 2px solid $brand-light;
	color: $onColor;
}

VS Code Intellisense

In order to get intellisense using this project, you need to install and configure a plugin. The plugin is of your own choice, but we suggest using Some Sass.

You need to configure the extension to recognize the files from our package. This is also true if you use another plugin of your own choice, but might look different. For Some Sass:

1. Find Some Sass in the extensions view in VS Code
2. Right click Some Sass and choose extension settings
3. Find the setting Scanner exlude
4. Add !**/node_modules/@skf-aurora/ui-assets/** to the list

TypeScript

Our TS files contains both object, arrays and types that may be used to simplify handling of component API and styling.

Example

import { type BgColor, type Spacing, BG_COLORS, SPACINGS } from '@skf-aurora/ui-assets';

interface MyComponent {
	/** Applies given background-color */
	bgColor: BgColor;

	/** If provided, adds provided spacing */
	padding?: Extract<Spacing, 'sm' | 'md' | 'lg'>;
}

export const MyComponent = ({bgColor, padding}): MyComponent => (
	<div style={{
		backgroundColor: BG_COLORS[bgColor],
		padding: SPACINGS[padding]
	}}>
		My Component
	</div>
);

...

<MyComponent padding="md" bgColor="primary" />

📖 Further reading

🎁 Contributing

Would you like to contribute to the ui components library? That is awesome! Thank you for wanting to be part of our community.

SKF-email

In order to contribute, you will need a valid SKF-email ending with @skf.com as your primary GitHub-email to be able to clone and install this repo.

🙋‍♀️ But I am a consultant outside SKF domain without SKF email?

👯 Apply for Github access on behalf of a friend

If you have access already, you can apply for Github on behalf of a friend if you need or want to 🙏

🛠️ Troubleshooting

There is nothin stopping you from using our package. However, our repository has internal visiblity with our organization. If you need access to the repository for contributing, contact us and let's see what solution suit you best.

Checklist:

• Do you have an SKF email address? If not contact your manager/SKF contact.
• Do you have SSO enabled? If not contact IT.
• Do you have access to GitHub on your SKF account? Contact IT and make sure your account have access to the Enterprise Organization.

🧑‍⚖️ License

Copyright SKF 2024