wework / plasma

PLASMA by WeWork

Plasma is a design system for creating sensible, modern interfaces.

Component docs at http://plasma.guide

Storybook at http://plasma.guide/dev/storybook

---

IMPORTANT!

Select and Datepicker components do not work right now. Use react-select and datepicker directly in Spacestation.

Developing with Storybook

Running Storybook

1. Run the Plasma Webpack dev server: yarn start
2. Run the Storybook server: yarn storybook
3. Go to http://localhost:6006/ to view the Storybook

Developing with Storybook

1. Follow steps above "Running Storybook"
2. Create a new dev branch: git checkout -b mybranch
3. Add / update as necessary
4. Add stories to the stories/ directory as you add / update components!

Using the styleguide

Running

1. Run yarn run styleguide.
2. Load up http://0.0.0.0:6060

Building static version

1. Run yarn run styleguide:build
2. Files output to /styleguide

Building flow-typed definitions

1. Run yarn flow:buildTypeDefs

This will output flow-typed compatible definitions of Flow types for Plasma. For Spacestation, you likely want to yarn flow:buildTypeDefs | pbcopy (if on Mac) and paste the contents to the plasma_vx.x.x.js under flow-typed/

Documenting components

1. Run ./docs/publish.sh from the root dir. This will update the docs, commit to gh-pages, and push to github (updating http://plasma.guide)

Info here: https://react-styleguidist.js.org/docs/documenting.html

Creating a Pull Request / Publishing

Creating a Pull Request

1. When you're ready, push your branch to Github and create a pull request.
2. If you've made visual changes, include screenshots.
3. If you've made implementation changes, run yarn test:update to update jest snapshots.
4. PR will be reviewed
5. When PR is accepted, it will be merged into master.
6. (Optional) If you also need to publish a new Plasma version, read that section.

Publishing to NPM

1. Create a separate PR or bump the npm version in the feature branch, do not publish from master.
2. Run yarn run pack to bundle the .js and .css file into /dist folder.
3. Run npm version patch. This will bump the version in package.json and create a new tag and push the tag to Github.
4. Make sure you're logged in to NPM via npm login. login is in 1password, when prompted for email please use: [email protected]
5. Run npm publish from the root directory to publish to NPM registry.
6. Check https://www.npmjs.com/~wework-dev to make sure package is updated.

Developing with Spacestation

Link Plasma (you only need to do this once)

1. In your terminal, cd to local Plasma repo.
2. Run yarn link.
3. cd to local Spacestation repo.
4. Run yarn link @wework-dev/plasma. This creates a symlink in Spacestation's node_modules/@wework-dev/plasma folder that points to local Plasma repo.
5. (Optional) If you need to, you can unlink at any time with yarn unlink @wework-dev/plasma

Developing with Spacestation

1. Create a new Plasma dev branch: cd /plasma git checkout -b mybranch
2. Run the Plasma dev server with watch: yarn watch
3. Save any changes in Plasma, webpack should bundle changes in /dist
4. Run Spacestion: cd /spacestation yarn start
5. Changes you make in Plasma should automatically be picked up by Spacestation
6. Follow "Creating a Pull Request / Publishing"

Using a published Plasma version from NPM

1. Run yarn add @wework-dev/plasma in your project.

2. Include the Plasma object (or individual components) in your Javascript. Plasma object example:

   import Plasma from '@wework-dev/plasma';
   <Plasma.Button label="Click it" />;

   Individual components example:

   import { Button } from '@wework-dev/plasma';
   <Button label="Click it" />;

Testing

For testing, Plasma uses Jest (https://facebook.github.io/jest/) with Enzyme (http://airbnb.io/enzyme/).

Tests are located in src/tests.

Flow coverage can be checked via yarn flow:coverage.

Running tests

1. Run yarn test for a single run or yarn test:watch to watch for changes.

plasma's Issues

Number input

Preview:

---

CSS (limited):

Number input CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* Number input */
min-width: 60px;

/* Plus/minus control (normal) */
width: 15px;
background-color: $white300;
border: 1px solid darken($white300, 10%);

/* Plus/minus (active) */
background-color: darken($white300, 10%);

/* Plus/minus control (disabled) */
border-color: $gray300;
background-color: $white;
color: $gray300;

/* Plus/minus control (error) */
border-color: $warningred;
background: $warningred;
color: $white;

Large:

/* Number input */
min-width: 70px;

Table cell <td>

Preview:

---

CSS:

/* <td> */
padding: 10px 0;
min-height: 40px;
border-bottom: 1px solid $gray300;
font: $regular2;
color: $weworkblack;

/* Links */
font-weight: bold;
color: $linkblue;

/* First <td> with text */
padding-left: 20px;

Image <td>

Preview:

---

CSS:

/* Image <td> */
padding: 10px 0 10px 10px;

/* Image */
width: 100px;
height: 60px;
background-image: url();
background-size: cover;

Segmented card

Only a small tweak.

The border-color for the left and right segment should be Gray 300 #E0E0E0

Checkbox

Preview:

---

CSS (limited):

Search CSS largely the same as a radio button (see #20).
Additions and differences below:

Regular:

/* Input */
width: 16px;
height: 16px;
border-radius: 2px;

Field caption

'Field caption' is an optional ‘caption’ below a form field or fieldset, with three use cases:

• Instruction: Provide more context to what the form field is asking.
• Error: Why is this form field showing an error.
• Link: A link or action related to the form field.

---

Preview:

---

CSS:

Regular:

* Instruction (text below) */
font: $regular3;
color: $gray200;
margin-top : 5px;

/* Error (text below) */
font: $bold6;
color: $warningred;
margin-top : 5px;

/* Link/action (text below) */
font: $bold6;
color: $linkblue;
margin-top : 5px;

/* Disabled state */
color: $gray300;

Large:

/* No change */

Fixed right

Preview:

---

CSS (limited):

/* Fixed right */
height: 100%;
min-width: 200px;
padding: 0 30px;
border-left: 1px dashed $gray300;

/* Fixed right (fixed position) */
position: fixed;
margin-top: 30px;

Preview (in-situ):

Hero screen

Talk to me (Andrew) about this one... Had an idea for a transition between the log in screen and the opening screen of the product (on load) that will make more sense explaining in person :)

---

Preview:

---

Outline:

---

CSS (limited):

/* Log in screen */

/* H1 */
font: $bold1;
color: $gray600;
margin-bottom: 40px;

/* Use the primary button */

/* H1 and button */
width: 70%;
max-width: 800px;
padding: 0 15%;
/* H1 and button vertically centered */

/* Side bar */
background-color: none;
/* Only brand item present in side bar */

/* Background */
background-size: cover;

---

Photos used in mocks:

• Sunset
• NYC (I'll need to crop this one)
• Space

Secondary button style

There are 5 styles for buttons in Plasma. This is the secondary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

---

Design:

---

CSS:

Hopefully the below will help :) Doesn't cover everything, but does cover off some of the core css for each state.

/* Normal */
background-color: $white300;
border: 1px solid darken($white300, 10%);
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: darken($white300, 5%);
border-color: darken($white300, 10%);

/* Active */
background-color: darken($white300, 10%);
border-color: darken($white300, 20%);

/* Loading icon */
width: 20px;
height: 20px;
color: #000;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

Inline label

Related issue: Legend & label (#22)

---

Preview:

---

CSS (limited):

Regular:

/* Inline label */
font: $bold5;
line-height: 40px;
margin-right: 20px;

Large:

/* Inline label */
font: $bold4;
line-height: 50px;

Select

Related issue: Options & option groups #16

---

Preview:

---

CSS (limited):

Search CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* css arrow */
background-image: 
  linear-gradient(45deg, transparent 50%, $weworkblack 50%),
  linear-gradient(135deg, $weworkblack 50%, transparent 50%);
background-position: 
  calc(100% - 15px) 16px, 
  calc(100% - 10px) 16px;
background-size: 
  5px 5px, 
  5px 6px;
background-repeat: no-repeat;

Large:

/* css arrow */
background-position: 
  calc(100% - 20px) 21px, 
  calc(100% - 15px) 21px;

Tertiary (light) button style

Related to #11

---

This is an alternative variant on the default tertiary style — a light version for overlaying images and dark background colors.

/* Same styles as the default tertiary button, but switch any instance of WeWork Black or #000 with Gray 600 */

Design:

Table <table>

Preview:

---

CSS:

/* <table> */
background: $white;
border-top: 1px solid $gray300;
border-left: 1px solid $gray300;
border-right: 1px solid $gray300;
border-radius: 2px;
border-spacing: 0;
width: 100%;

---

Related issues:

• Table cell #47
• Table header #48
• Null state for a #49
• Row that opens the side drawer #50

Pill

Preview:

---

CSS:

/* Pill */
font: $regular3;
color: $gray600;
padding: 0 5px;
background-color: $purple200;
border-radius: 2px;

Tooltip

Preview:

---

CSS (limited):

/* Tooltip */
background-color: rgba(36,39,40,0.94); /* $weworkblack @ 94% */
padding: 15px;
min-width: 150px;
font: $bold6;
color: $gray600;
border-radius: 3px;
text-align:left;

Actions <td>

Preview:

---

CSS:

/* Action <td> */
padding: 0 0 0 4px;

/* Icon */
height: 30px;
width: 30px;
color: $gray300;

---

Note:
The actions menu on-hover of the action icon still needs design spec. Will follow soon.

Table header <th>

Preview:

---

CSS:

/* <th> */
height: 70px;
border-bottom: 1px solid $gray200;
font: $bold5;
color: $weworkblack;

/* Sorted by <th> */
border-bottom: 3px solid $weworkyellow;

Radio buttons

Preview:

---

CSS (limited):

Regular:

/* Input & label */
margin: 3px 0;

/* Input */
width: 16px;
height: 16px;
border-radius: 100%;
background: $white;
border: 1px solid $gray300;

/* Label (normal) */
margin-left: 10px;
font: $regular2;
color: $weworkblack;

/* Checked (dot) */
height: 8px;
width: 8px;
border-radius: 100%;
background-color: $weworkblack;
top: 3px;
left: 3px;
transition: background 0.2s linear;

/* Hover (input) */
border-color: $gray200;

/* Hover (label) */
opacity: 0.7;

/* Focus (input) */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Focus (label) */
opacity: 0.4;

/* Error (input) */
border-color: $warningred;

/* Error (text below fieldset) */
font: $bold6;
color: $warningred;

Large:

/* Input & label */
margin: 6px 0;

/* Label (normal) */
font: $regular1;

Avatar <td>

Preview:

---

CSS:

/* Avatar <td> */
padding: 10px 0 10px 10px;

/* Avatar */
width: 30px;
height: 30px;
border-radius: 100%;

Legend & label

Related issue: Inline label (#32)

---

Preview:

---

CSS (limited):

Regular:

/* Label & legend */
font: $bold5;
margin-bottom: 5px;

Large:

/* Label & legend */
font: $bold4;

Side bar item

Preview:

---

CSS:

/* Side bar item */
height: 50px; /* 70px with padding */
padding: 10px 0;
font: $regular2;
color: $gray600;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.3);

/* Icon */
width: 30px;
height: 30px;
/* Icon color is $gray300 */

/* Active state (:before) */
background-color: $purple200;
width: 5px;
height: 100%;
display: block;

/* Active state */
background-color: rgba(89,105,139,0.1); /* $purple200 @ 10% */

/* Hover state */
background-color: $purple200;

Options & option groups

Related issue: Select #15

---

Preview:

---

CSS (limited):

Regular:

/* Options */
background: $white;
padding: 10px 0;
font: $regular2;
line-height: 30px;
color: $weworkblack;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);

/* Hover (an option) */
background-color: rgba(0, 0, 0, 0.05);
(height: 30px;)

/* <optgroup> */
font: $bold6;
line-height: 30px;

Large:

/* css arrow */
/* No difference for large size inputs */

User & settings item

Preview:

---

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* User & settings item */
padding: 10px 0 20px 0;

/* User avatar */
width: 34px;
height: 34px;
border: 3px solid rgba(0,0,0,0.1);
margin: 0 0 5px 0;

Some longer location names do not fit in sidebar

Search

Preview:

---

Assets:

• Search icon

---

CSS (limited):

Search CSS largely the same as a text input (see #14) and select (see #15).
Additions and differences below:

Regular:

/* Search */
text-indent: 38px;

/* Search icon (normal) */
color: $gray300;
width: 30px;
height: 30px;
margin: 4px;

/* Search icon (hover) */
color: $gray200;

Large:

/* Search */
text-indent: 48px;

/* Search icon */
margin: 9px;

Modal

Preview:

---

Animation:

Perhaps we could play with a subtle animation on load of the modal (also upon exiting it)... Maybe the purple overlay fades in quick, then after a very short delay the modal loads (zoomIn). Done a quick demo here: https://codepen.io/roomfive/pen/WGLdBP

---

CSS:

/* Modal (outer container) */
min-width: 500px;
border-radius: 10px;
background-color: $white;
box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
padding: 40px 40px 0 40px;

/* Header (above frame) */
font: $bold3;
margin-bottom: 30px;

/* Frame (inner container) */
border: 1px dashed $gray300;
border-radius: 2px;
padding: 30px;

/* Buttons (below frame) */
margin: 30px 0;

/* Fullscreen overlay */
opacity: 0.94;
Background-color: $purple100;

---

Spec:

---

Also see related issue: 'Tabs in a modal' #41

Support item

Preview:

---

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* Support side bar item */
border-bottom: none;
margin-bottom: 10px;

Tertiary button style

There are 5 styles for buttons in Plasma. This is the tertiary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

---

Design:

---

CSS (limited):

/* Normal */
background-color: none;
border: 1px solid $weworkblack;
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: rgba(0, 0, 0, 0.05);

/* Active */
background-color: rgba(0, 0, 0, 0.1);

/* Loading icon */
width: 20px;
height: 20px;
color: #000;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

See also: Tertiary (light) button style (issue #37)

Tabs in a modal

Related to modal issue #25

---

---

CSS:

/* Tabs */
padding: 14px 0 0 14px; /* so first tab aligns with labels */
border-bottom: 1px solid $gray300;

/* Tab */
height: 38px;
padding: 0 15px;
font: $regular2;
color: $weworkblack;
background-color: rgba(255,207,113,0.05); /* $weworkyellow @ 5% opacity) */
border: 1px solid $gray300;

border-radius: 2px 2px 0 0; /* first tab */
border-radius: 0; /* middle tab(s) */
border-radius: 0 2px 0 0; /* last tab */

/* Active tab */
background-color: $white;
border-bottom: 1px solid $white;

/* Hover (non-active tab) */
background-color: rgba(0, 0, 0, 0.02);

/* Focus (non-active tab) */
background-color: rgba(0, 0, 0, 0.05);

---

Spec:

Multi-select and option tags

Related issue: Select #15

---

Preview:

---

Assets:

• 'x' icon

---

CSS (limited):

Multi-select CSS largely the same as a select (see #15).
Additions and differences below:

Regular:

/* Multi-select */
padding: 3px 0;

/* Option tag */
height: 32px;
padding: 0 30px 0 10px;
border-radius: 2px;
margin-left: 3px;
background-color: $purple200;
font: $regular2;
color: $gray600;

/* Option tag ‘x’ icon */
background-image: 
  url(path_to_icon.png);
width: 30px;
height: 30px;
background-position: center right;

Large:

/* Option tag */
height: 42px;

Side bar

Preview:

---

CSS:

/* Side bar */
background-color: $purple100;
width: 70px;
height: 100%;

---

Related issues:

• Side bar item #27
• Brand item #28
• User & settings item #29
• Support item #30
• Search item #31

Null state for a <td>

To signify that a table row is cancelled, complete, occupied etc.

---

Preview:

---

CSS:

/* Null <td> */
background-color: $gray600;

Font styles

9 font styles for Plasma:

---

Bold 1

/* Bold 1 */
font-family: Helvetica;
font-weight: bold;
font-size: 80px;
letter-spacing: -3px;
line-height: 80px;

---

Bold 2

/* Bold 2 */
font-family: Helvetica;
font-weight: Bold;
font-size: 40px;
letter-spacing: -1px;
line-height: 44px;

---

Bold 3

/* Bold 3 */
font-family: Helvetica;
font-weight: Bold;
font-size: 30px;
letter-spacing: -0.3px;
line-height: 30px;

---

Bold 4

/* Bold 4 */
font-family: Helvetica;
font-weight: Bold;
font-size: 16px;
line-height: 20px;

---

Bold 5

/* Bold 5 */
font-family: Helvetica;
font-weight: Bold;
font-size: 13px;
line-height: 20px;

---

Bold 6

/* Bold 5 */
font-family: Helvetica;
font-weight: Bold;
font-size: 11px;
line-height: 18px;

---

Regular 1

/* Regular 1 */
font-family: Helvetica;
font-weight: Regular;
font-size: 16px;
line-height: 20px;

---

Regular 2

/* Regular 2 */
font-family: Helvetica;
font-weight: Regular;
font-size: 13px;
line-height: 20px;

---

Regular 3

/* Regular 3 */
font-family: Helvetica;
font-weight: Regular;
font-size: 11px;
line-height: 18px;

Overflow menu

Preview:

---

CSS (limited):

/* Icon part of menu */
background: $white;
width: 38px; /* 4px either side of 30x30 action icon */
height: 30px;
(icon) color: $gray200;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);

/* CSS for menu part same as options for a select #16 */

Row that opens the side drawer

Rows that on-click open the side drawer behave like this:

---

Preview:

---

CSS:

/* Row on hover */
background-color: rgba(255,207,113,0.05); 
/* $weworkyellow @ 5% */

Empty state for a table

In the event that a table has no data, the rows are replaced with a simple message explaining why/that the table has no data.

---

Preview:

---

CSS:

/* Empty state message */
font: $bold3;
color: $gray300;
padding: 40px;

Alert bar

An alert bar slides down from the top of the screen, overlaying all page content. There are three types of alert bar as seen below:

---

Warning:
Red with button to dismiss the alert bar

---

Error:
Red with button to refresh the page

---

Message:
Purple with button to dismiss the alert bar

---

CSS:

/* Alert bar */
background-color: $warningred;
opacity: 0.94;
height: 70px;
padding: 0 30px;

/* Message alert bar */
background-color: $purple200;

/* Text to the left */
font: $bold5;
color: $gray600;

/* Link + icon style button to the far right */

---

Icons for button:

Both .svg icons should be $gray600 color.

• Close .svg icon
• Refresh .svg icon

Alert overlay

Preview:

Outline:

---

CSS (limited):

/* Messaging */

/* Fullscreen overlay */
background-color: $purple100;
opacity: 0.94;

/* H1 and button */
width: 70%;
max-width: 800px;
padding: 0 15%;

/* H1 */
font: $bold1;
color: $gray600;
margin-bottom: 40px;

/* Use the primary button for the primary action */

/* Use the tertiary (light) button for the secondary action, if there is one */

Range input

Preview:

---

CSS:

Regular:

/* Slider bar */
height: 3px;
border-radius: 100%;
background-color: $gray300;
margin: 7px 0 12px 0;

/* Slider */
width: 9px;
height: 9px;
border: 3px solid $purple200;
border-radius: 100%;
background-color: $white;

/* Values */
font: $regular3;
color: $gray200;

Large:

/* Slider bar */
margin: 11px 0 16px 0;

/* Values */
font: $regular2;

Prefix and suffix (on a text input)

Preview:

---

CSS:

Regular:

padding: 0 10px;
font: $regular2;
color: $weworkblack;
background-color: $gray600;
border-color: $gray300;

Large:

padding: 0 15px;
font: $regular1;

Search item

Preview:

---

CSS:

/* CSS largely the same as side bar item (#26). Differences below */

/* Search side bar item */
background-color: rgba(0,0,0,0.1); /* #000 @ 10% */
/* Icon centered vertically */
/* No text on search item */

Textarea

Preview:

---

CSS (limited):

Search CSS largely the same as a text input (see #14).
Additions and differences below:

Regular:

/* Textarea */
height: none;
padding: 10px;
(minimum 4 rows)

Large:

/* Textarea */
padding: 15px;

Brand item

Preview:

---

.svg of we brand: https://www.dropbox.com/s/6lwe4uajvaqz54r/we-brand.svg?dl=0

---

CSS:

/* Brand item */
height: 70px;

/* Logo */
height: 14px;
/* logo color is $white *)
/* logo centered vertically and horizontally */

Fixed left

Preview:

---

CSS (limited):

/* Fixed left */
height: 100%;
min-width: 200px;
padding: 0 30px;
border-right: 1px dashed $gray300;

/* Fixed left (fixed position) */
position: fixed;
margin-top: 30px;

Preview (in-situ):

Text input

Preview:

---

Assets:

• Error icon

---

CSS (limited):

Regular

/* Text input */
background: $white;
height: 38px;
padding: 0 10px;
border: 1px solid $gray300;
border-radius: 2px;
font: $regular2;
color: $weworkblack;

/* Placeholder */
color: $gray200;

/* Hover */
border-color: $gray200;

/* Focus */
border-color: $gray200;
box-shadow: 0 0 4px 1px $gray300;

/* Disabled */
color: $gray300;
cursor: not-allowed;

/* Instruction (text below) */
font: $regular3;
color: $gray200;
margin-top : 5px;

/* Error (input) */
border-color: $warningred;

/* Error (text below) */
font: $bold6;
color: $warningred;
margin-top : 5px;

Large

/* Text input */
height: 48px;
padding: 0 15px;
font: $regular1;

Update to SASS hex colors

Note: These are aren't 'final', but well progressed, and necessary for some further issues coming up related to buttons (issues for those following shortly). Any changes to these colors will be minimal in future though.

Some tweaks to the hex color values (and naming):

---

WeWork Black
#252729

Gray 100
#575757

Gray 200
#C2C2C2

Gray 300
#E0E0E0

Gray 400
#EAEBEC

Gray 500
#F4F4F4

Gray 600
#FAF9F8

---

White
#FFFFFF

White 100
#FFFEF2

White 200
#FCF9EB

White 300
#ECE9D9

White 400
#D7D4C4

White 500
#969186

---

WeWork Yellow
#FFCF71

WeLive Red
#EF4822

---

Link Blue
#5499C3

Warning Red
#D86262

---

Purple 100
#2B3445

Purple 200
#59698B

Primary button style

There are 5 styles for buttons in Plasma. This is the primary style.

Each button style has up to 5 states, including as they appear left-to-right below: normal, hover, active, loading and disabled.

---

Design:

---

CSS:

Hopefully the below will help :) Doesn't cover everything, but does cover off some of the core css for each state.

/* Normal */
background-color: $weworkyellow;
border: 1px solid darken($weworkyellow, 15%);
border-radius: 5px;
height: 38px;
padding: 0 20px;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* Hover */
background-color: darken($weworkyellow, 5%);
border-color: darken($weworkyellow, 20%);

/* Active */
background-color: darken($weworkyellow, 10%);
border-color: darken($weworkyellow, 30%);

/* Loading icon */
width: 20px;
height: 20px;
color: #FFF;
opacity: 0.1;

/* Disabled */
background-color: none;
border-color: #000;
color: #000;
opacity: 0.1;

Date input

Preview:

---

Assets:

• Date/calendar .svg icon

---

CSS (limited):

Search CSS largely the same as a text input (see #14) and select (see #15).
Additions and differences below:

Regular:

/* Search */
text-indent: 38px;

/* Search icon (normal) */
color: $gray300;
width: 30px;
height: 30px;
margin: 4px;

/* Search icon (hover) */
color: $gray200;

Large:

/* Search */
text-indent: 48px;

/* Search icon */
margin: 9px;

Link button style

There are 5 styles for buttons in Plasma. This is the 'link' and 'link with an icon' style(s).

This button style has 4 states, including as they appear left-to-right below: normal, hover, active and disabled.

---

Link (with no icon) design:

---

Link (with icon) design:

---

Assets:

• Refresh icon (as shown above, to test)

---

CSS (limited):

/* Normal */
background-color: none;
border: none;
height: 38px;
padding: 0;
transition: all 0.2s;
font: $bold5;
color: $weworkblack;

/* :before (link with an icon) */
content: "";
display: block;
background: url("path_to_icon.png") no-repeat;
width: 30px;
height: 30px;
float: left;
margin: 4px 0;

/* Hover */
opacity: 0.7;

/* Active */
opacity: 0.4;

/* Disabled */
opacity: 0.1;

Loading icon (on button)

Related to loading state on buttons:

I was originally recommending the 2nd top-left spinner seen in visual above (code here: http://projects.lukehaas.me/css-loaders/) ...But I wrestled with the code and it was a bitch to edit.

Thinking now to keep it simpler... What do you think of this one?http://codepen.io/roomfive/pen/XjkJmo

Other options I like at: http://tobiasahlin.com/spinkit/