@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