nightshade 0.2.0 → 1.0.0-2

package/.npmignore

@@ -1,3 +0,0 @@
-assets/
-node_modules/
-index.html

package/README.md

@@ -1,128 +0,0 @@
-# Nightshade — base for team-specific CSS framework
-
-## Usage
-
-Install via npm:
-
-```
-npm i --save nightshade
-```
-
-Import from your Stylus entry point:
-
-```
-// main.styl
-
-// variable overrides go here
-
-@import 'nightshade';
-
-// your app components go there
-```
-
-## Conventions
-
-Good classnames:
-
-  * `.my-component`
-  * `.my-component-subComponent`
-  * `.my-component--modifier`
-
-Bad classnames:
-
-  * `.myComponent`, `.my_component` (prefer single delimiters styls)
-  * `.my-component-subcomponent-subsubstuff` (too much nesting, leave up to 2 levels)
-
-Variables:
-
-  * start with dollar $ (b/c Stylus emits unresolved variables as text)
-  * use dash as name separator
-  * name components specificity: from least specific to most specific
-  * component variable scheme: `$what[-state]-property`
-
-Good variable names:
-
-  * `$color-primary`, `$color-warning`, `$color-critical` (base variables)
-  * `$type-small`, `$type-large` (base variables)
-  * `$link-color`, `$link-active-color` (component variables)
-
-Selector specificity:
-
-  * general rule is to avoid nesting to decrease selector weight,
-    thus making component maintainable
-  * some nesting does make sense, most likely the nested part is a semantic tag
-    (e.g. `.basket h1`, `.page aside`, etc.)
-  * good justification is actual CSS output, never nest unless that's
-    what you would actually type into plain CSS
-
-## Base variables
-
-Typographic essentials:
-
-    * `$font-size` — base font size (applied to html, default 16px)
-    * `$font-main` — main font stack
-    * `$font-weight-normal` — normal font weight (default 300)
-    * `$font-weight-bold` — normal font weight (default 600)
-
-Color scheme:
-
-    * `$color-base` (backdrop, white)
-    * `$color-default` (default ui color for buttons, input borders, etc., gray)
-    * `$color-primary` (brand accent color)
-    * `$color-warning` (self-explanatory, amber)
-    * `$color-critical` (self-explanatory, blood)
-
-Typographic sizes:
-
-    * `$type-larger` (1.5em)
-    * `$type-large` (1.2em)
-    * `$type-normal` (1em)
-    * `$type-small` (0.85em)
-    * `$type-smaller` (0.75em)
-
-These are used to produce modifiers (e.g. `.btn--primary`, `.btn--small`,
-`.color--primary`, `.type-small`, etc.).
-
-It's easy to both add/remove or override colors and sizes:
-
-```
-// Let's add success and secondary to our color scheme
-$colors = 'base' 'default' 'primary' 'secondary' 'success' 'warning' 'critical'
-
-$color-secondary = #d43
-$color-secondary-text = #fff // optional, useful if contrast detector
-                             // doesn't do what you want
-$color-success = #3a5
-
-@import 'nightshade'
-
-// That's it! Classes like .btn--secondary and .btn--success are generated.
-```
-
-## Directory structure
-
-* core — globals
-
-  * variables — base variables (component variables should reside elsewhere)
-  * mixins
-  * reset — mimalistic user-agent resets
-  * base — styles for base tags: html, body, img, a, etc.
-  * helpers — general-purpose classnames with no semantic (to be listed in Vocabulary)
-
-* components
-
-  * filename === component name === toplevel classname
-  * avoid nesting, unless nested part uses tag semantics
-    (e.g. `.input-group input` or `.myArticle h1`)
-  * avoid non-component classnames (bad: `.label`, `.grid .row`, `.grid .grid-cell`, good: `.grid-row`, `.grid-cell`, `.form-label`)
-  * avoid > 2 levels of nesting (bad: `.grid-row-cell`)
-  * it's also ok for some components to contain another components (e.g. `.ctl-group` to contain `.btn` and `.input`)
-
-## Vocabulary
-
-Each team should maintain its own UI stencils vocabulary so that random classnames
-won't popup out of nowhere.
-
-Remember, the whole point of framework/spec is reducing cognitive load.
-Everyone should learn this vocabulary and use proper terms
-both in code and in communication.

package/components/btn.styl

@@ -1,112 +0,0 @@
-$btn-border-width ?= 1px;
-
-.btn {
-  position: relative;
-  z-index: 1;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  box-sizing: border-box;
-  padding: 0 .75em;
-  margin: 0;
-  border: $btn-border-width solid transparent;
-  height: $ctl-height;
-
-  vertical-align: baseline;
-  outline: 0;
-  cursor: pointer;
-  touch-action: manipulation;
-  user-select: none;
-
-  border-radius: $ctl-radius;
-  font: inherit;
-  white-space: nowrap
-  text-indent: 0;
-
-  background: WHITE;
-
-  &::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-  }
-
-  &:active, &.active {
-    z-index: 2;
-  }
-
-  * + * {
-    margin-left: .5em;
-  }
-
-}
-
-for $c in $colors {
-  $color = lookup('$color-' + $c);
-  $text = lookup('$color-' + $c + '-text');
-  $border = lookup('$color-' + $c + '-border');
-
-  .btn--{$c}-outline, a.btn--{$c}-outline {
-    background: transparent;
-    color: $color;
-    border-color: $color;
-
-    &:hover {
-      border-color: $border;
-      color: $border;
-    }
-  }
-
-  .btn--{$c}, a.btn--{$c} {
-    background: $color;
-    color: $text;
-    border-color: $border;
-    border-bottom-color: darken($border, 15%);
-
-    if dark($color) {
-      text-shadow: 0 1px 1px darken($color, 15%);
-    }
-
-    &:hover {
-      background: darken($color, 5%);
-    }
-
-    &:active, &.active {
-      background: darken($color, 12%);
-      border-color: darken($border, 15%);
-      box-shadow: 0 3px 5px darken($border, 10%) inset;
-      if dark($color) {
-        color: #fff;
-        text-shadow: 0 0 8px rgba(#fff, .15);
-      }
-    }
-
-    &[disabled] {
-      opacity: .5;
-      background: desaturate($color, 25%);
-      cursor: not-allowed;
-    }
-
-  }
-
-}
-
-.btn--block {
-  display: flex;
-  width: 100%;
-}
-
-// Preserve same metrics, but no visuals
-.btn--hollow {
-  border: 0;
-  background: transparent;
-}
-
-// Size modifiers
-
-for $s in $sizes {
-  .btn--{$s} {
-    font-size: lookup('$type-' + $s);
-  }
-}

package/components/container.styl

@@ -1,19 +0,0 @@
-.container {
-  padding-left: $gap;
-  padding-right: $gap;
-  margin-left: auto;
-  margin-right: auto;
-  box-sizing: border-box;
-  width: 100%;
-  min-height: 0;
-
-  transition: width .3s, padding .3s, min-height .3s;
-}
-
-@media (min-width: $screen-large-min) {
-
-  .container--fixed {
-    width: $screen-large-min;
-  }
-
-}

package/components/ctl-group.styl

@@ -1,27 +0,0 @@
-.ctl-group {
-  display: inline-flex;
-  flex-flow: row nowrap;
-
-  > * {
-    position: relative;
-    z-index: 2;
-    border-radius: 0;
-    margin-left: -1px;
-
-    &:first-child {
-      margin-left: 0;
-      border-top-left-radius: $ctl-radius;
-      border-bottom-left-radius: $ctl-radius;
-    }
-
-    &:last-child {
-      border-top-right-radius: $ctl-radius;
-      border-bottom-right-radius: $ctl-radius;
-    }
-  }
-
-  > input {
-    z-index: 1;
-  }
-
-}

package/components/grid.styl

@@ -1,84 +0,0 @@
-.grid {
-  display: flex;
-  flex-flow: row wrap;
-  align-items: center;
-}
-
-.grid--top { align-items: flex-start }
-.grid--bottom { align-items: flex-end }
-.grid--baseline { align-items: baseline }
-.grid--stretch { align-items: stretch }
-.grid--distribute { justify-content: space-between }
-.grid--scatter { justify-content: space-around }
-
-.grid--gap {
-  margin: -($gap / 2);
-
-  &.block {
-    margin-top: ($gap / 2);
-    margin-bottom: ($gap / 2);
-  }
-
-  > .cell {
-    margin: ($gap / 2);
-  }
-}
-
-.cell {
-  flex: 100%;
-  box-sizing: border-box;
-  min-width: 1px;
-}
-
-.cell--top { align-self: flex-start }
-.cell--bottom { align-self: flex-end }
-.cell--center { align-self: center }
-.cell--baseline { align-self: baseline }
-.cell--stretch { align-self: stretch }
-
-.cell--min { flex: 0 0 auto }
-
-.cell--1of1 { flex: 100% }
-.cell--1of2 { flex: 50% }
-.cell--1of3 { flex: 33.33% }
-.cell--2of3 { flex: 66.66% }
-.cell--1of4 { flex: 25% }
-.cell--3of4 { flex: 75% }
-
-for i in (1..8) {
-  .cell--{i} { flex: i }
-}
-
-@media (min-width: $screen-medium-min) {
-
-  .cell--m-min { flex: 0 0 auto}
-
-  .cell--m-1of1 { flex: 100% }
-  .cell--m-1of2 { flex: 50% }
-  .cell--m-1of3 { flex: 33.33% }
-  .cell--m-2of3 { flex: 66.66% }
-  .cell--m-1of4 { flex: 25% }
-  .cell--m-3of4 { flex: 75% }
-
-  for i in (1..8) {
-    .cell--m-{i} { flex: i }
-  }
-
-}
-
-@media (min-width: $screen-large-min) {
-
-  .cell--l-min { flex: 0 0 auto }
-
-  .cell--l-1of1 { flex: 100% }
-  .cell--l-1of2 { flex: 50% }
-  .cell--l-1of3 { flex: 33.33% }
-  .cell--l-2of3 { flex: 66.66% }
-  .cell--l-1of4 { flex: 25% }
-  .cell--l-3of4 { flex: 75% }
-
-  for i in (1..8) {
-    .cell--l-{i} { flex: i }
-  }
-
-}

package/components/index.styl

@@ -1,5 +0,0 @@
-@import './btn'
-@import './input'
-@import './ctl-group'
-@import './grid'
-@import './container'

package/components/input.styl

@@ -1,63 +0,0 @@
-.input {
-  position: relative;
-  z-index: 1;
-
-  display: inline-block;
-  box-sizing: border-box
-  padding: 0 .5em;
-  height: $ctl-height;
-
-  vertical-align: baseline;
-  outline: 0;
-
-  border-width: 1px;
-  border-style: solid;
-  border-color: $color-default-border;
-  border-radius: $ctl-radius;
-  background: WHITE;
-  box-shadow: 0 1px 3px $color-default inset;
-
-  &:focus {
-    border-color: $color-primary
-    box-shadow: 0 0 6px rgba($color-primary, .5);
-  }
-
-  &.invalid {
-    border-color: $color-critical;
-    box-shadow: 0 0 6px rgba($color-critical, .5);
-  }
-
-  &[disabled] {
-    background: $color-default;
-    color: $color-muted;
-  }
-
-}
-
-textarea.input {
-  height: auto;
-  white-space: pre-wrap;
-  resize: none;
-}
-
-.input--block {
-  display: block;
-  width: 100%;
-}
-
-for $s in $sizes {
-  .input--{$s} {
-    font-size: lookup('$type-' + $s);
-  }
-}
-
-.input--hollow {
-
-  &, &:focus {
-    padding-left: 0;
-    padding-right: 0;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-}

package/core/base.styl

@@ -1,82 +0,0 @@
-html {
-  min-height: 100vh;
-  font: $font-weight-normal $font-size/$line-height $font-main;
-  text-rendering: optimizeLegibility;
-  perspective: 1000px;
-
-  color: $body-color;
-  background: $body-background;
-}
-
-if ($font-antialias) {
-  @media (-webkit-min-device-pixel-ratio: 2),
-         (-webkit-min-device-pixel-ratio: 192),
-         (min-resolution: 192dppx) {
-    html {
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-    }
-  }
-}
-
-a {
-  color: $link-color;
-  cursor: pointer;
-
-  &:hover {
-    color: lighten($link-color, 20%);
-  }
-}
-
-label {
-  cursor: pointer;
-}
-
-strong, .strong {
-  font-weight: $font-weight-bold;
-}
-
-em, .em {
-  font-style: italic;
-}
-
-strike, .strike {
-  text-decoration: line-through
-}
-
-p, ul, ol, li, dl, dt, dd, figure, figcaption, table, pre {
-  margin: $gap 0;
-}
-
-ul, ol {
-  padding-left: 2em;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin: .618em 0;
-}
-
-h1 {
-  font-size: 2.25rem;
-}
-
-h2 {
-  font-size: 1.75rem;
-}
-
-h3 {
-  font-size: 1.44rem;
-}
-
-h4 {
-  font-size: 1.25rem;
-}
-
-pre, code {
-  font-family: $font-code;
-}
-
-img {
-  vertical-align: middle;
-  max-width: 100%;
-}

package/core/helpers.styl

@@ -1,56 +0,0 @@
-.relative { position: relative }
-
-.block { margin: $gap 0 }
-.block--small { margin: $gap-small 0 }
-.block--large { margin: $gap-large 0 }
-
-.hidden { display: none }
-.no-overflow { overflow: hidden }
-
-.align-left { text-align: left }
-.align-center { text-align: center }
-.align-right { text-align: right }
-
-.screen { min-height: 100vh }
-
-// Responsive show/hide
-
-@media (max-width: $screen-small-max) {
-  .hide-s {
-    display: none !important
-  }
-}
-
-@media (min-width: $screen-medium-min) {
-  .show-s {
-    display: none !important
-  }
-}
-
-@media (min-width: $screen-large-min) {
-  .hide-l {
-    display: none !important
-  }
-}
-
-@media (max-width: $screen-medium-max) {
-  .show-l {
-    display: none !important
-  }
-}
-
-// Colors
-
-for $c in $colors {
-  .color--{$c} {
-    color: lookup('$color-' + $c);
-  }
-}
-
-// Sized
-
-for $s in $sizes {
-  .type--{$s} {
-    font-size: lookup('$type-' + $s);
-  }
-}

package/core/index.styl

@@ -1,6 +0,0 @@
-@import './swatches'
-@import './mixins'
-@import './variables'
-@import './reset'
-@import './base'
-@import './helpers'

package/core/mixins.styl

@@ -1,12 +0,0 @@
-$color-text(colr) {
-  if (dark(colr)) {
-    lighten(colr, 90%);
-  } else {
-    darken(colr, 80%);
-  }
-}
-
-$color-border(colr) {
-  shade(colr, 15%);
-}
-

package/core/reset.styl

@@ -1,32 +0,0 @@
-html, body, form, fieldset, img, iframe, hr {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-}
-
-button, input, select, textarea,
-ul, ol, li, dl, dt, dd,
-blockquote, p {
-  font: inherit;
-  white-space: inherit;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: inherit;
-  font-style: inherit;
-  font-weight: inherit;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-a {
-  text-decoration: none;
-  outline: 0;
-}