open-index/open-npm huggingface dataset:
npm package: @seedcss/seed-alert
Description: Alert component pack for Seed
Latest version: 1.0.1

# seed-alert

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-alert.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-alert)

> Alert component pack for Seed

## Install

```
npm install @seedcss/seed-alert --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-alert/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-alert");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-alert** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-alert/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Alert :: Config

// Dependencies
@import "pack/seed-button/_config";

// Namespace
$seed-alert-namespace: "c-alert" !default;
$seed-alert-error-namespace: "error" !default;
$seed-alert-info-namespace: "info" !default;
$seed-alert-success-namespace: "success" !default;
$seed-alert-warning-namespace: "warning" !default;
$seed-alert-text-namespace: "#{$seed-alert-namespace}__text" !default;

// Configs
$seed-alert-accent-width: 4px !default;
$seed-alert-padding: 12px 16px 12px 20px !default;
$seed-alert-margin-bottom: 16px !default;


// Config for state prefix
// options: true || false
// if true, then alert states will compile with the defined state prefix
// Default is ".is-"
// Example:
// .is-success {
//   ...
// }
$seed-alert-enable-state-prefix: true !default;
$seed-alert-state-prefix: "is" !default;

$seed-alert-allow-link-normalize: true !default;
$seed-alert-link-normalize-selector: "a:not(.#{$seed-button-namespace})" !default;

```
npm package: @seedcss/seed-avatar
Description: Avatar component pack for Seed
Latest version: 1.0.1

# seed-avatar

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-avatar.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-avatar)

> Avatar component pack for Seed

## Install

```
npm install @seedcss/seed-avatar --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-avatar/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-avatar");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-avatar** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-avatar/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Avatar :: Config

// Namespaces
$seed-avatar-namespace: "c-avatar" !default;
$seed-avatar-image-namespace: #{$seed-avatar-namespace}__image !default;

// Borders
$seed-avatar-border-radius: 4px !default;

// Colors
$seed-avatar-background: #f1f3f5 !default;
$seed-avatar-shadow: 0 1px 0 0 #e3e8eb !default;

// Sizes
// Default size
$seed-avatar-size: 50px !default;
// Modifier sizes
$seed-avatar-modifier-sizes: (
  lg: $seed-avatar-size,
  md: 40px,
  sm: 32px,
  xs: 28px
) !default;

```
npm package: @seedcss/seed-badge
Description: Badge component pack for Seed
Latest version: 1.0.1

# seed-badge

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-badge.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-badge)

> Badge component pack for Seed

## Install

```
npm install @seedcss/seed-badge --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-badge/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-badge");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-badge** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-badge/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Badge :: Config

// Namespace
$seed-badge-namespace: "c-badge" !default;

// Border
$seed-badge-border-radius: 2px !default;

// Colors
$seed-badge-background-color: #A5B2BD !default;
$seed-badge-text-color: #fff !default;

// Font
$seed-badge-font-size: 11px !default;
$seed-badge-font-weight: 600 !default;
$seed-badge-text-transform: uppercase !default;

// Padding
$seed-badge-padding: 4px 5px !default;

// Config for state prefix
// options: true || false
// if true, then badge states will compile with the defined state prefix
// Default is ".is-"
// Example:
// .is-success {
//   ...
// }
$seed-badge-enable-state-prefix: true !default;
$seed-badge-state-prefix: "is" !default;

```
npm package: @seedcss/seed-base
Description: Base styles pack for Seed
Latest version: 1.0.1

# seed-base

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-base.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-base)

> Base styles pack for Seed

## Install

```
npm install @seedcss/seed-base --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-base/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-base");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-base** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-base/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Base :: Config

// Config: Type
$seed-base-margin-bottom: 16px !default;

// Config: Headings
$seed-base-heading-color: inherit !default;
$seed-base-heading-font-family: inherit !default;
$seed-base-heading-font-weight: 500 !default;
$seed-base-heading-line-height: 1.1 !default;
$seed-base-heading-margin-bottom: 8px !default;
$seed-base-heading-margin-top: 0 !default;

// Config: Small
$seed-base-small-font-size: 80% !default;
$seed-base-small-font-weight: normal !default;

// Config: Mark
$seed-base-mark-background-color: #fcf8e3 !default;
$seed-base-mark-padding: 0.2em !default;

// Config: Code
$seed-base-code-background-color: rgba(black, 0.08) !default;
$seed-base-code-border-radius: 3px !default;
$seed-base-code-color: #000 !default;
$seed-base-code-font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$seed-base-code-font-size: 85% !default;
$seed-base-code-padding: 0.16em 0.4em !default;

// Config: Pre
$seed-base-pre-color: #373a3c !default;

```
npm package: @seedcss/seed-bootstrap-fade
Description: Bootstrap fade animation pack for Seed
Latest version: 1.0.1

# seed-bootstrap-fade

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-bootstrap-fade.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-bootstrap-fade)

> Bootstrap fade animation pack for Seed

## Install

```
npm install @seedcss/seed-bootstrap-fade --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-bootstrap-fade/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-bootstrap-fade");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-bootstrap-fade** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-bootstrap-fade/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// bootstrap-fade :: Config

// Namespaces
$seed-bootstrap-fade-namespace: "fade" !default;
$seed-bootstrap-fade-in-namespace: "fade.in" !default;
// Config
$seed-bootstrap-fade-transition: opacity 0.15s linear !default;

```
npm package: @seedcss/seed-border
Description: Border theme pack for Seed
Latest version: 1.0.1

# seed-border

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-border.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-border)

> Border theme pack for Seed

## Install

```
npm install @seedcss/seed-border --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-border/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-border");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-border** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-border/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Border :: Config

// Namespaces
$seed-border-namespace: "t-bdr" !default;
$seed-border-radius-namespace: "#{$seed-border-namespace}-r" !default;

// Defaults
$seed-border-color: #eee !default;
$seed-border-radius: 3px !default;
$seed-border-size: 1px !default;
$seed-border-style: solid !default;

// Important (Typical convention for utility purposes)
$seed-border-use-important: true !default;

// Directions
$seed-border-directions: (
  all: false,
  top: "t",
  right: "r",
  bottom: "b",
  left: "l",
  none: false,
) !default;

$seed-border-radius-sizes: (
  0: 0px,
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  circle: 50%,
  pill: 9999px,
) !default;

// Base variable
$seed-border: $seed-border-size $seed-border-style $seed-border-color !default;

```
npm package: @seedcss/seed-breakpoints
Description: Breakpoints mixin pack for Seed
Latest version: 1.0.1

# seed-breakpoints

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-breakpoints.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-breakpoints)

> Breakpoints mixin pack for Seed

## Install

```
npm install @seedcss/seed-breakpoints --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-breakpoints/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-breakpoints");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-breakpoints** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-breakpoints/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Seed Breakpoints :: Config

// Namespaces
$seed-breakpoints-at-namespace: \@ !default;

// Breakpoints
$seed-breakpoints: (
  xs: 0,
  sm: 544px,
  md: 768px,
  lg: 992px,
) !default;

```
npm package: @seedcss/seed-card
Description: Card component pack for Seed
Latest version: 1.0.1

# seed-card

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-card.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-card)

> Card component pack for Seed

## Install

```
npm install @seedcss/seed-card --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-card/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-card");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-card** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-card/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Card :: Config

// Dependencies
@import "pack/seed-border/config";

// Namespaces
$seed-card-namespace: c-card !default;
$seed-card-block-namespace: #{$seed-card-namespace}__block !default;

// Config: Card
$seed-card-background-color: #fff !default;
$seed-card-border: $seed-border !default;
$seed-card-border-radius: 4px !default;
// Config: Card block
$seed-card-block-sizes: (
  md: 20px 20px,
  sm: 12px 20px,
  xs: 8px 20px,
) !default;

```
npm package: @seedcss/seed-centralize
Description: Centralize utility pack for Seed
Latest version: 1.0.1

# seed-centralize

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-centralize.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-centralize)

> Centralize utility pack for Seed

## Install

```
npm install @seedcss/seed-centralize --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-centralize/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-centralize");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-centralize** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-centralize/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Centralize :: Config

$seed-centralize-namespace: "u-centralize" !default;

```
npm package: @seedcss/seed-color-scheme-helpscout
Description: Help Scout color scheme for Seed
Latest version: 1.0.1

# seed-color-scheme-helpscout

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme-helpscout.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-color-scheme-helpscout)

> Help Scout color scheme for Seed

## Install

```
npm install @seedcss/seed-color-scheme-helpscout --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-color-scheme-helpscout/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-color-scheme-helpscout");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-color-scheme-helpscout** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-color-scheme-helpscout/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Help Scout color scheme config

$seed-color-scheme-helpscout: (
  // Base
  white: #fff,
  black: #000,

  // Primary
  blue: (
    100: #F3FBFF,
    200: #D6EDFF,
    300: #A0D4FF,
    400: #57B0FB,
    500: #1292EE,
    600: #0077CC,
    700: #005CA4,
    800: #034077,
    900: #002651
  ),

  charcoal: (
    200: #93A1B0,
    300: #748494,
    400: #556575,
    500: #405261,
    600: #314351,
    700: #253642,
    800: #1d2b36
  ),

  ash: (
    200: #F9FAFA,
    300: #F1F3F5,
    400: #E5E9EC,
    500: #D5DCE1,
    600: #A5B2BD,
    700: #B7C2CC,
    800: #A5B2BD
  ),

  // Secondary
  gold: (
    100: #FFF9EF,
    200: #FFF2D7,
    300: #FFE7B8,
    400: #FDD88E,
    500: #FFC555,
    600: #FAB347,
    700: #E89635,
    800: #CE7129,
    900: #B24319
  ),

  green: (
    100: #F5FFF9,
    200: #E3FBEE,
    300: #C2F0D7,
    400: #87DBAE,
    500: #56C288,
    600: #39AC6E,
    700: #268C55,
    800: #106236,
    900: #003C1C
  ),

  pink: (
    100: #FFF9FB,
    200: #FFEEF1,
    300: #FFE1E7,
    400: #FFCCD7,
    500: #FFB3C3,
    600: #FD9AAE,
    700: #FD9AAE,
    800: #FC5D7D,
    900: #F23459
  ),

  lavender: (
    100: #F9F9FF,
    200: #EBECFF,
    300: #D9DCFD,
    400: #B9BEFF,
    500: #9FA6FF,
    600: #818AEC,
    700: #6269C5,
    800: #404996,
    900: #232A5C
  ),

  indigo: (
    100: #F2F6FF,
    200: #DFE7FF,
    300: #B2C8FB,
    400: #79A1F8,
    500: #527CEB,
    600: #3B64D2,
    700: #2549A8,
    800: #16337F,
    900: #071E57
  ),

  whaletail: (
    100: #F3F7FF,
    200: #E5EDFE,
    300: #D0DEFD,
    400: #AFC7F9,
    500: #8AABF1,
    600: #7296E1,
    700: #5174BB,
    800: #304F8B,
    900: #142F5E
  ),

  text: (
    default: #2b2b2b
  ),

  button: (
    border: #d5d5d5,
    hover: #e6e6e6,
    active: #b6b6b6
  )
) !default;

```
npm package: @seedcss/seed-config
Description: Sass config pack
Latest version: 1.0.1

# seed-config

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-config.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-config)

> Sass config pack

## Install

```
npm install @seedcss/seed-config --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-config/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-config");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-config** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-config/_index";
```
npm package: @seedcss/seed-control
Description: Control config pack for Seed
Latest version: 1.0.1

# seed-control

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-control.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-control)

> Control config pack for Seed

## Install

```
npm install @seedcss/seed-control --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-control/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-control");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-control** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-control/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Control :: Config

$seed-control-size-default: 36px !default;

$seed-control-sizes: (
  sm: (
    font-size: 0.875rem,
    height: 28px,
    padding: 0 0.5em,
  ),
  md: (
    font-size: 1rem,
    height: $seed-control-size-default,
    padding: 0 1em,
  ),
  lg: (
    font-size: 1.25rem,
    height: 52px,
    padding: 0 1.5em,
  ),
) !default;

```
npm package: @seedcss/seed-control-group
Description: Control group object pack for Seed
Latest version: 1.0.1

# seed-control-group

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-control-group.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-control-group)

> Control group object pack for Seed

## Install

```
npm install @seedcss/seed-control-group --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-control-group/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-control-group");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-control-group** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-control-group/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Control group :: Config

// Namespaces
$seed-control-group-namespace: "o-control-group" !default;
$seed-control-group-block-namespace: "#{$seed-control-group-namespace}__block" !default;

// Alignment
$seed-control-group-alignment: (
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

```
npm package: @seedcss/seed-dash
Description: Config utility pack for Seed
Latest version: 1.0.1

# seed-dash

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-dash.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-dash)

> Config utility pack for Seed

## Install

```
npm install @seedcss/seed-dash --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-dash/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-dash");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-dash** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-dash/_index";
```
npm package: @seedcss/seed-display
Description: Display utility pack for Seed
Latest version: 1.0.1

# seed-display

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-display.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-display)

> Display utility pack for Seed

## Install

```
npm install @seedcss/seed-display --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-display/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-display");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-display** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-display/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Display :: Config

// Namespaces
$seed-display-namespace: "u-d" !default;

// Displays
$seed-display: (
  initial: initial,
  none: none,
  block: block,
  inline: inline,
  inline-block: inline-block,
  flex: flex,
) !default;

```
npm package: @seedcss/seed-dot-nav
Description: Dot navigation component pack for Seed
Latest version: 1.0.1

# seed-dot-nav

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-dot-nav.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-dot-nav)

> Dot navigation component pack for Seed

## Install

```
npm install @seedcss/seed-dot-nav --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-dot-nav/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-dot-nav");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-dot-nav** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-dot-nav/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// dot-nav :: Config
@import "pack/seed-color-scheme/__index";

// Namespace
$seed-dot-nav-namespace: c-dot-nav !default;
$seed-dot-nav-item-namespace: #{$seed-dot-nav-namespace}__item !default;
$seed-dot-nav-link-namespace: #{$seed-dot-nav-namespace}__link !default;

// Configs
$seed-dot-nav-item-spacing-multiplier: 3 !default;
$seed-dot-nav-item-margin: 0 !default;
$seed-dot-nav-link-focus-outline: none !default;
$seed-dot-nav-dot-transition: background-color 0.2s ease !default;
$seed-dot-nav-dot-size: 10px !default;
$seed-dot-nav-dot-color: rgba(black, 0.2) !default;
$seed-dot-nav-dot-color-hover: rgba(black, 0.4) !default;
$seed-dot-nav-dot-active-color: _color(blue, 500) !default;
$seed-dot-nav-dot-active-size-increase: 1px !default;
$seed-dot-nav-dot-transform: translate(-50%, -50%) !default;

$seed-dot-nav-alignment: (
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

$seed-dot-nav-dot-sizes: (
  lg: 16px,
  md: $seed-dot-nav-dot-size,
  sm: 8px,
) !default;

```
npm package: @seedcss/seed-exclude
Description: Mixin that excludes modules published with seed-publish
Latest version: 1.0.1

# seed-exclude

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-exclude.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-exclude)

> Mixin that excludes modules published with seed-publish

## Install

```
npm install @seedcss/seed-exclude --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-exclude/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-exclude");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-exclude** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-exclude/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// exclude :: Config

// Global namespace
@if not variable-exists(__seed-publish-list) {
  $__seed-publish-list: (
    seed-publish: true
  ) !global;
}

```
npm package: @seedcss/seed-family
Description: Family related mixin pack for Seed
Latest version: 1.0.1

# seed-family

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-family.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-family)

> Family related mixin pack for Seed

## Install

```
npm install @seedcss/seed-family --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-family/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-family");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-family** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-family/_index";
```
npm package: @seedcss/seed-flexy
Description: Flex object pack for Seed
Latest version: 1.0.1

# seed-flexy

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-flexy.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-flexy)

> Flex object pack for Seed

## Install

```
npm install @seedcss/seed-flexy --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-flexy/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-flexy");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-flexy** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-flexy/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Flexy :: Config

// Namespaces
$seed-flexy-namespace: "o-flexy" !default;
$seed-flexy-item-namespace: #{$seed-flexy-namespace}__item !default;
$seed-flexy-inline-item-namespace: #{$seed-flexy-namespace}__inline-item !default;
$seed-flexy-block-namespace: #{$seed-flexy-namespace}__block !default;
$seed-flexy-alignment-namespace: #{$seed-flexy-namespace}- !default;
$seed-flexy-gap-namespace: #{$seed-flexy-namespace}--gap !default;
$seed-flexy-justify-namespace: #{$seed-flexy-namespace}--just !default;

// Alignment
$seed-flexy-alignment: (
  top: flex-start,
  middle: center,
  bottom: flex-end,
  stretch: stretch
) !default;

// Justify alignment
$seed-flexy-justify-alignment: (
  default: space-between,
  left: flex-start,
  center: center,
  right: flex-end,
) !default;

// Gap
$seed-flexy-gap-sizes: (
  xs: 4px,
  sm: 8px,
  md: 12px,
  lg: 16px,
  xl: 20px,
) !default;

```
npm package: @seedcss/seed-floats
Description: Floats utility pack for Seed
Latest version: 1.0.1

# seed-floats

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-floats.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-floats)

> Floats utility pack for Seed

## Install

```
npm install @seedcss/seed-floats --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-floats/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-floats");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-floats** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-floats/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Floats :: Config

// Namespaces
$seed-floats-clear-namespace: "u-clear" !default;
$seed-floats-clearfix-namespace: "u-clearfix" !default;
$seed-floats-pull-namespace: "u-pull" !default;

$seed-floats-pull: (
  left: left,
  right: right,
  none: none
) !default;

$seed-floats-clear: (
  none: none,
  left: left,
  right: right,
  both: both
) !default;

```
npm package: @seedcss/seed-form-group
Description: Form group component pack for Seed
Latest version: 1.0.1

# seed-form-group

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-form-group.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-form-group)

> Form group component pack for Seed

## Install

```
npm install @seedcss/seed-form-group --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-form-group/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-form-group");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-form-group** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-form-group/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Form group :: Config

// Namespace
$seed-form-group-namespace: c-form-group !default;

// Configs
$seed-form-group-margin-bottom: 20px !default;

```
npm package: @seedcss/seed-grid
Description: Grid system pack for Seed
Latest version: 1.0.1

# seed-grid

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-grid.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-grid)

> Grid system pack for Seed

## Install

```
npm install @seedcss/seed-grid --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-grid/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-grid");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-grid** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-grid/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Seed Grid :: Config

// Namespace
$seed-grid-namespace-col: "o-col" !default;
$seed-grid-namespace-container: "o-container" !default;
$seed-grid-namespace-row: "o-row" !default;
$seed-grid-namespace-row-flex: "o-row-flex" !default;


// Container
$seed-container-widths: (
  sm: 576px,
  md: 720px,
  lg: 940px,
  xl: 1140px
) !default;


// Grid
$seed-grid-columns: (
  0: 0%,
  1: 8.33333%,
  2: 16.66667%,
  3: 25%,
  4: 33.33333%,
  5: 41.66667%,
  6: 50%,
  7: 58.33333%,
  8: 66.66667%,
  9: 75%,
  10: 83.33333%,
  11: 91.66667%,
  12: 100%,
  20: 20%,
) !default;

$seed-grid-gutter: 30px !default;
$seed-grid-gutter-offset: ceil($seed-grid-gutter / 2) !default; // 15px
$seed-grid-gutter-offset-sizes: (
  md: 8px,
  sm: 4px,
  xs: 2px
) !default;


```
npm package: @seedcss/seed-helpscout-theme
Description: Help Scout theme pack for Seed
Latest version: 1.0.1

# seed-helpscout-theme

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-helpscout-theme.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-helpscout-theme)

> Help Scout theme pack for Seed

## Install

```
npm install @seedcss/seed-helpscout-theme --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-helpscout-theme/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-helpscout-theme");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-helpscout-theme** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-helpscout-theme/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Help Scout Theme :: Config

// Dependencies
@import "pack/seed-color-scheme-helpscout/_index";
@import "pack/seed-dash/_index";

$seed-helpscout-theme-background-color-namespace: "t-bg" !default;
$seed-helpscout-theme-text-color-namespace: "t-tx" !default;

// Config
// Adds !important to classes by default
$seed-helpscout-theme-enable-important: true !default;

// Theme colors
// Constructing the color palette from seed-color-scheme-helpscout
$seed-helpscout-theme-colors: (
  // Base colors
  black: _get($seed-color-scheme-helpscout, black),
  white: _get($seed-color-scheme-helpscout, white),
  // Primary colors
  blue: _get($seed-color-scheme-helpscout, blue),
  charcoal: _get($seed-color-scheme-helpscout, charcoal),
  ash: _get($seed-color-scheme-helpscout, ash),
  // Secondary colors
  gold: _get($seed-color-scheme-helpscout, gold),
  green: _get($seed-color-scheme-helpscout, green),
  pink: _get($seed-color-scheme-helpscout, pink),
  lavender: _get($seed-color-scheme-helpscout, lavender),
  indigo: _get($seed-color-scheme-helpscout, indigo),
  whaletail: _get($seed-color-scheme-helpscout, whaletail),
) !default;

```
npm package: @seedcss/seed-hr
Description: HR component pack for Seed
Latest version: 1.0.1

# seed-hr

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-hr.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-hr)

> HR component pack for Seed

## Install

```
npm install @seedcss/seed-hr --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-hr/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-hr");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-hr** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-hr/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// HR :: Config

// Namespaces
$seed-hr-namespace: "c-hr" !default;

// Config
$seed-hr-include-hr-selector: true !default;

// The above configuration determines this private variable
$__seed-hr-class: ".#{$seed-hr-namespace}";
// Include the image selector (Default)
@if $seed-hr-include-hr-selector == true {
  $__seed-hr-class: ".#{$seed-hr-namespace}, hr";
}

// Styles
$seed-hr-border-color: #eee !default;
$seed-hr-border-size: 1px !default;
$seed-hr-border-style: solid !default;
$seed-hr-margin: 20px 0 !default;

```
npm package: @seedcss/seed-inline
Description: Inline object pack for Seed
Latest version: 1.0.1

# seed-inline

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-inline.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-inline)

> Inline object pack for Seed

## Install

```
npm install @seedcss/seed-inline --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-inline/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-inline");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-inline** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-inline/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Seed inline :: Config

// Namespaces
$seed-inline-namespace: o-inline !default;
$seed-inline-item-namespace: #{$seed-inline-namespace}__item !default;

// Config
$seed-inline-spacing: 4px !default;

// Sizes
$seed-inline-sizes: (
  xs: 4px,
  sm: 8px,
  md: 16px,
  lg: 24px,
) !default;

```
npm package: @seedcss/seed-input
Description: Input component pack for Seed
Latest version: 1.0.1

# seed-input

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-input.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-input)

> Input component pack for Seed

## Install

```
npm install @seedcss/seed-input --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-input/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-input");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-input** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-input/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Input :: Config

// Dependencies
@import "pack/seed-border/config";
@import "pack/seed-color-scheme/config";

// Namespaces
$seed-input-namespace: "c-input" !default;

// Configs
$seed-input-background-color: #fff !default;
$seed-input-border-color: #d5d5d5 !default;
$seed-input-border-radius: $seed-border-radius !default;
$seed-input-border-size: $seed-border-size !default;
$seed-input-border-style: solid !default;
$seed-input-border-color-focus: _color(blue, 500) !default;

$seed-input-background-color-disabled: #e6e6e6;

$seed-input-padding: 0 8px !default;
$seed-input-padding-textarea: 8px !default;

$seed-input-type-file-height: 24px !default;

```
npm package: @seedcss/seed-input-addons
Description: Input addon component pack for Seed
Latest version: 1.0.1

# seed-input-addons

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-input-addons.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-input-addons)

> Input addon component pack for Seed

## Install

```
npm install @seedcss/seed-input-addons --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-input-addons/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-input-addons");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-input-addons** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-input-addons/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// input-addons :: Config

// Namespaces
$seed-input-addons-input-addon-namespace: c-input-addon !default;
$seed-input-addons-input-static-namespace: c-input-static !default;

// Configs
$seed-input-addons-input-addon-background-color: #F1F3F5 !default;
$seed-input-addons-input-addon-padding: 0 0.5em !default;

```
npm package: @seedcss/seed-link
Description: Link component pack for Seed
Latest version: 1.0.1

# seed-link

[![npm version](https://badge.fury.io/js/%40seedcss%2Fseed-link.svg)](https://badge.fury.io/js/%40seedcss%2Fseed-link)

> Link component pack for Seed

## Install

```
npm install @seedcss/seed-link --save
```

## Documentation

Check out our **[documentation of this pack](http://developer.helpscout.net/seed/packs/seed-link/)**.

## Basic Usage

### SCSS

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:

```javascript
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-link");

gulp.task("sass", function() {
  return gulp
    .src("./sass/**/*.scss")
    .pipe(
      sass({
        includePaths: pathfinder(
          // Other includePaths...
          pack
        )
      })
    )
    .pipe(gulp.dest("./css"));
});
```

Once that is setup, simply `@import` **seed-link** as needed in your `.scss` file:

```scss
// Packs
@import "pack/seed-link/_index";
```



## Options

The following variables can be found in `_config.scss`

```scss
// Link :: Config

@import "pack/seed-color-scheme/__index";

// Namespaces
$seed-link-namespace: "c-link" !default;

// Config
$seed-link-include-a-selector: true !default;

// Colors
$seed-link-color: _color(link, base) !default;
$seed-link-color-hover: _color(link, hover) !default;
$seed-link-color-active: _color(link, active) !default;

// Outline
$seed-link-focus-outline: 5px auto -webkit-focus-ring-color !default;
$seed-link-focus-outline-offset: -2px !default;

// Transition
$seed-link-transition: none !default;

```