# Canvas Kit Core

Canvas Kit Core contains values and base styles that are shared across the kit.

<a href="../README.md">
  <img src="https://img.shields.io/badge/-maintenance mode-important" alt="Mainenance Mode" />
</a>

Includes:

- [Colors](#colors)
- [Spacing](#spacing)
- [Depth](#depth)
- [Fonts](#fonts)
- [Type](#type)
- [Accessibility](#accessibility)

## Installation

```sh
yarn add @workday/canvas-kit-css
```

or

```sh
yarn add @workday/canvas-kit-css-core
```

Add your `node_modules` directory to your SASS `includePaths`. You will then be able to import
`index.scss`.

You may also import specific modules from `/lib`.

```scss
@import '~@workday/canvas-kit-css-core/index.scss';
@import '~@workday/canvas-kit-css-core/lib/colors.scss';
```

## Colors

Workday Canvas color variables in weights from 100 - 600. Colors are in hex code format.

See `lib/colors.scss` for the full list of available colors.

```scss
$wdc-color-cinnamon-600: #a31c12;
$wdc-color-cinnamon-500: #de2e21;
$wdc-color-cinnamon-400: #ff5447;
$wdc-color-cinnamon-300: #ff867d;
$wdc-color-cinnamon-200: #fcc2bd;
$wdc-color-cinnamon-100: #ffeeed;
```

**Colors**  
Cinnamon  
Peach  
Chili Mango  
Cantaloupe  
Sour Lemon  
Juicy Pear  
Kiwi  
Green Apple  
Watermelon  
Jewel  
Toothpaste  
Blueberry  
Plum  
Berry Smoothie  
Blackberry  
Island Punch  
Grape Soda  
Pomegranate  
Fruit Punch  
Root Beer  
Toasted Marshmallow  
Coconut  
Cappuccino  
Soap  
Licorice  
French Vanilla  
Black Pepper

## Border Radius

Border Radius variables in t-shirt size format. Spacing values are in `px` format.

| Variable                    | Size  |
| --------------------------- | ----- |
| `$wdc-border-radius-zero`   | 0     |
| `$wdc-border-radius-s`      | 2px   |
| `$wdc-border-radius-m`      | 4px   |
| `$wdc-border-radius-l`      | 8px   |
| `$wdc-border-radius-circle` | 999px |

## Spacing

Spacing variables in t-shirt size format. Spacing values are in `px` format.

| Variable            | Size |
| ------------------- | ---- |
| `$wdc-spacing-xxxs` | 4px  |
| `$wdc-spacing-xxs`  | 8px  |
| `$wdc-spacing-xs`   | 12px |
| `$wdc-spacing-s`    | 16px |
| `$wdc-spacing-m`    | 24px |
| `$wdc-spacing-l`    | 32px |
| `$wdc-spacing-xl`   | 40px |
| `$wdc-spacing-xxl`  | 64px |
| `$wdc-spacing-xxxl` | 80px |

## Depth

Five levels of depth available in CSS classes and SASS mixins.

> The CSS classes are implemented using the equivalent SASS mixin.

**HTML**

```html
<div class="wdc-depth-1">
  <h4 class="wdc-type-h5">Depth 1</h4>
</div>
```

**SCSS**

```scss
.standardItem {
  @include wdc-depth-1();
}
```

**Depth -1:** Inset card depth  
Class: `.wdc-depth-inset`  
Mixin: `wdc-depth-inset`

**Depth 1:** Standard card depth  
Class: `.wdc-depth-1`  
Mixin: `wdc-depth-1`

**Depth 2:** Increased card depth on hover  
Class: `.wdc-depth-2`  
Mixin: `wdc-depth-2`

**Depth 3:** Active, Task Orch, Pop Ups, Async Notification  
Class: `.wdc-depth-3`  
Mixin: `wdc-depth-3`

**Depth 4:** Cards on white backgrounds, Menus, Prompt window  
Class: `.wdc-depth-4`  
Mixin: `wdc-depth-4`

## Type

### Fonts

To use the Canvas Kit font
[install and import the `@workday/canvas-kit-css-fonts` module](https://github.com/Workday/canvas-kit/tree/master/modules/fonts/css).
Note that this module sources fonts from the Workday CDN.

### Hierarchy

Type styles are available as classes and mixins. Using the class is preferred. Use mixins to
override CSS only if necessary,

**Base Type**  
Applies base body and font styles. Any type styles must be descendants of `.wdc-type` for the Canvas
fonts to be used.

```html
<div class="wdc-type">
  <h1 class="wdc-type-h1">Header</h1>
  <p class="wdc-type-body">Body text</p>
</div>
```

If you don't want to wrap your type elements with `.wdc-type`, you may also use the `wdc-type` mixin
to set the default styling. For preset defaults (i.e. all headers, body font, links, etc.), simply
apply `.wdc` to your body tag or a similar wrapper.

```scss
body {
  @include wdc-type();
}
```

There are mixins provided so you can do this for all levels of the type hierarchy if you'd like:

```scss
p {
  @include wdc-type-body();
}
h1 {
  @include wdc-type-h1();
}
h2 {
  @include wdc-type-h2();
}
...
```

**Headings**  
Modifies font size and weight.

```html
<h1 class="wdc-type-h1">H1 Header</h1>
<h2 class="wdc-type-h2">H2 Header</h2>
<h3 class="wdc-type-h3">H3 Header</h3>
<h4 class="wdc-type-h4">H4 Header</h4>
<h5 class="wdc-type-h5">H5 Header</h5>
```

**Body**

```html
<p class="wdc-type-body">Body text</p>
<p class="wdc-type-body-2">Smaller body text</p>
```

**Small**

```html
<p class="wdc-type-small">Small text</p>
```

### Variations

You can modify any of the type hierarchy with the below variations:

**Label**

```html
<span class="wdc-type-variant-label">Label Text</span>
```

**Button**

```html
<span class="wdc-type-variant-button">Button Text</span>
```

**Caps**

```html
<span class="wdc-type-variant-caps">Caps Text</span>
```

**Hint**

```html
<span class="wdc-type-variant-hint">Hint Text</span>
```

**Error**

```html
<span class="wdc-type-variant-error">Error Text</span>
```

**Link**

```html
<a href="#" class="wdc-type-variant-link">Link Text</a>
```

**Mono**

```html
<span class="wdc-type-variant-mono">Mono Text</span>
```

**Inverse**

```html
<button class="wdc-type-variant-inverse">White Text</button>
```

## Accessibility

By default, browsers add an outline around focusable elements. This is great for keyboard
accessibility but is not the best visual experience for users who don't need it. To provide the best
visual experience for all users, canvas-kit-css-core uses `what-input` to prevent outlines on mouse
events while showing outlines during keyboard navigation. To include `what-input` into your project
please view the [what-input github repository](https://github.com/ten1seven/what-input).

Canvas-kit-css-core includes an `accessibility.scss` file that will target specific `what-input`
styles. The elements within canvas-kit-css will prevent browser outlines from being shown during
mouse events by default. You can apply the class `.wdc-a11y` to `body` or any other element to
implement the same functionality for all focusable elements within a given element.

If you want to control when the outlines are shown/hidden yourself, you can use the
`wdc-show-outlines()` and `wdc-hide-outlines()` mixins.