open-index/open-npm huggingface dataset:
npm package: @lowes-tech/bds-react
Description: React component for backyard design system
Author: Backyard Design System
Latest version: 1.0.0

# @lowes-tech/bds-react

![Version](https://img.shields.io/badge/version-1.0.0-blue)
![Node](https://img.shields.io/badge/node-8+-blue)
![NPM](https://img.shields.io/badge/npm-5+-blue)
![Contributors](https://img.shields.io/badge/contributers-welcome-brightgreen)

<br>

Backyard Design System React component library is a npm package that exposes atomic level react components for any Omni-Channel product that is using React as their front-end framework.

<br>

## Contributing
Contributers are welcome to the bds-react project. Need to update a component for a new business need? Want to add a new component to the repository? Follow the [contribution guide](CONTRIBUTING.md) to get started.

<br>

## Install
This package requires `node >= 4`, but we recommend `node >= 8`

```bash
npm install -D @lowes-tech/bds-react
```

<br>

## Usage

```js
import * as React from 'react'
import { Grid, Button } from '@lowes-tech/bds-react'

const Component = (props) => {
    //...code
    return (
        <Grid.Container>
            <Grid.Row>
                <Grid.Column>
                    <Button />
                </Grid.Column>
            </Grid.Row>
        </Grid.Container>
    )
}

export default Component
```

<br>

## Components
* [Grid](src/Grid/README.md) component
    * [Container](src/Grid/Container/README.md) component
    * [Row](src/Grid/Row/README.md) component
    * [Column](src/Grid/Column/README.md) component
* [Icon](src/Icon/README.md) component
* [Button](src/Button/README.md) component
    * [PrimaryButton](src/Button/Primary/README.md) component
    * [SecondaryButton](src/Button/Secondary/README.md) component
    * [TertiaryButton](src/Button/Tertiary/README.md) component
    * [IconButton](src/Button/Icon/README.md) component
    * [FlatButton](src/Button/Flat/README.md) component
* [Chip](src/Chip/README.md) component
    * [ChoiceChip](src/Chip/Choice/README.md) component
    * [FilterChip](src/Chip/Filter/README.md) component
    * [InputChip](src/Chip/Input/README.md) 
* [Input](src/Input/README.md) component
    * [Password](src/Input/Password/README.md) component
    * [Search](src/Input/Search/README.md) component
    * [Stepper](src/Input/Stepper/README.md) component
    * [Text](src/Input/Text/README.md) component
    * [TextArea](src/Input/TextArea/README.md) component
* [Select](src/Input/README.md) component
    * [Checkbox](src/Select/Checkbox/README.md) component
    * [Radio](src/Select/Radio/README.md) component
    * [Switch](src/Select/Switch/README.md) component
    * [Dropdown](src/Select/Dropdown/README.md) component
* [Navigation]
    * [Breadcrumb](src/Navigation/Breadcrumb/README.md) component
npm package: @lowes-tech/bds-tokens
Description: Design tokens for backyard design system
Author: Backyard Design System
Latest version: 1.0.0

# Lowe's Backyard Design Tokens

Welcome to the Lowe's Backyard Design Token generator.  These tokens are the source of truth for all Lowe's Digital design properties see below for the token categories included.

This generator will take the YAML files and create variable files for both web and applications depending on platform need.

All platform specific generated tokens are located in the 'dist' directory.  You can see all the themes, types and formats that are created in the table below.

## Quick Start
1. Run `cd packages/bds-token` to enter backyard-tokens directory.
2. Run `npm install` in the backyard-tokens directory.


### Available Commands
1. `npm run build` to build all Design Token files.


### All Themes created

| Theme | Format(s) |
| :--- | :--- |
| android | xml |
| associate | xml |
| backyard | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| core-platform | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| dotcom | scss, sass, less, json, module.js, common.js, stylus, custom-properties |
| iOS | json |
| omnia | scss, sass, less, json, module.js, common.js, stylus, custom-properties |

### Token Categories Included
* Colors
    * Background
    * Border
    * Icon
    * Font
    * Shared
    * Chart (*Core Platform only)
* Typography
    * Font Stack
    * Font Weight
* Sizing
* Layout
    * Media Queries
    * Gutters
* Borders
    * Border Width
    * Border Radius
    * Box Shadow

### Encapsulated Theme Note

The encapsulated theme will create itself from both light and dark themes, so that all tokens for both are available with the prefix of 'theme-light' or 'theme-dark'.

Both Associate Theme and Omnia Theme consume this encapsulated theme for their color tokens.

When needing to override a color token in either Associate or Omnia, make sure you override using the correct prop name

`theme-light-<color-name>`
`theme-dark-<color-name>`

Output will be: 
Android XML: `THEME_LIGHT_<color>` or `THEME_DARK_<color>`
WEB SCSS: `$theme-light-<color>` or `$theme-dark-<color>`

These prefixes will ONLY be for colors, all other tokens will not have prefixes as they should not change from light to dark themes.