@arup-group/arc-scss v0.0.4
@arup-group/arc-scss
This package contains SCSS styling utilities for the ARC design system.
Installation
npm install @arup-group/arc-scss
Usage
// Import main.scss into your .scss stylesheet
@import "@arup-group/arc-scss/main";
// Use the values provided to style your app
.someElement {
padding: $spacing-2;
font-size: $font-size-body;
background-color: $blue-050;
}
If you only want specific styling information (e.g. colors) it might make more sense to import specific files:
@import "@arup-group/arc-scss/_colors.scss";
.anotherElement {
color: $red-040;
}
Creating a theme
Create a theme.scss
file in your project and copy in the following template, adjusting the values as necessary:
@import "@arup-group/arc-scss/_colors.scss";
$theme-primary: $blue-primary;
$theme-primary-light: $blue-light;
$theme-primary-dark: $blue-dark;
$theme-contrast: $orange-primary;
$theme-contrast-light: $orange-light;
$theme-contrast-dark: $orange-dark;
$theme-accent: $pink-primary;
$theme-accent-light: $pink-light;
$theme-accent-dark: $pink-dark;
$theme-error: $red-primary;
$theme-error-light: $red-light;
$theme-error-dark: $red-dark;
$theme-success: $green-primary;
$theme-success-light: $green-light;
$theme-success-dark: $green-dark;
$theme-black: $black;
$theme-white: $white;
$theme-text-color: $grey-100;
$theme-inactive-color: $grey-030;
$theme-background: $grey-020;
Development
Setup
- ensure you have the latest version of this repo locally
- navigate to this package in your terminal and run
npm link
- create a simple test project where you can import components/utils from this package (e.g. using
create-react-app
) - navigate to this test project in your terminal and run
npm link @arup-group/arc-scss
Now you can import this package as you would normally and use it in your app.
When you make changes to the package, rebuild it and your app should update automatically.
Cleanup
When you're finished developing you can kill the link to the local version of this package. This is only necessary if you want to test using the published version of the package in the same test project you were using in the step above. To do this:
- navigate to the test project in your terminal and run
npm unlink --no-save @arup-group/arc-scss
- navigate to this package in your terminal and run
npm unlink
Build
There is currently no build step for this package.
Publishing
Bump the version number in accordance with semver and run:
npm publish