@skf-design-system/ui-assets
v0.1.3-beta.1
Published
SKF UI Assets
Downloads
58
Readme
SKF UI Assets 🎨
Table of contents
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-design-system/ui-assets
Install using Yarn
yarn add @skf-design-system/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:
- Open
.vscode/settings.json
- Add the snippet below,
{
...
"cssVariables.lookupFiles": [
"node_modules/@skf-design-system/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-design-system/ui-assets/sass/semantic/skf-background-colors';
@use '@skf-design-system/ui-assets/sass/semantic/skf-border-colors';
@use '@skf-design-system/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-design-system/ui-assets/sass/semantic/skf-background-colors' as bg;
@use '@skf-design-system/ui-assets/sass/semantic/skf-border-colors' as border;
@use '@skf-design-system/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-design-system/ui-assets/sass/semantic/skf-background-colors';
@import '@skf-design-system/ui-assets/sass/semantic/skf-border-colors';
@import '@skf-design-system/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:
- Find Some Sass in the extensions view in VS Code
- Right click Some Sass and choose extension settings
- Find the setting Scanner exlude
- Add
!**/node_modules/@skf-design-system/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-design-system/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