tungsten 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7e97fc0fe7bed257db251420cd9e920782653bb3
-  data.tar.gz: e1455cfe02b515424ca7442a4b7b8a781ca8e127
+  metadata.gz: 06c81130859fa7bd4a0673370e233d1b8fd8ad45
+  data.tar.gz: a9c421d5a3b3fddbd49d266ab96e36e2ea311bea
 SHA512:
-  metadata.gz: bf1d4bb5daa9bcc7acb652cfeada3b0c1513e5381d2d789e5c25c7c16912935cb25bf507e8a942f1369e8c9b3bbbcc06117ade85bd66bef7b72e3a6234aadac3
-  data.tar.gz: 3ffe3652bcd83bfd30280761c7d7e01803a4566e1e5bca2253c65351c9bf575fdb57d9edf177176780e15e471a78cb0a86b9aa64e5359b3cc126ea1ab4e72366
+  metadata.gz: 12014325939bb67a71482ffb2d5f1d6ebf55b1dbdd786a4daaa543aa4f36f42e4c56f85130e9fe592a99e491025bd912ecdb60c7f65e6ee565670e39b2a5b870
+  data.tar.gz: 477692ad0379c819068b6302d54392f289ca497c9747eef41c1623993054adb5563f640c5caf9d140772a3cbc0653f5813b6f9a0289b0f50e52474b7c0381a5f

data/app/assets/javascripts/tungsten/_form_helpers.js

@@ -0,0 +1,21 @@
+var toolbox = require( 'compose-toolbox' )
+var Event = toolbox.event
+var textSelectors = 'textarea, input:not([type=radio]):not([type=checkbox]):not([type=range]):not([type=hidden]):not([type=submit]):not([type=image]):not([type=reset])'
+
+function syncValue( input ) {
+
+  // Allow calling from event handler
+  input = ( input.target || input )
+
+  // If element is empty (or contains only whitespace)
+  // Add empty class
+  input.classList.toggle( 'empty', !input.value.trim().length )
+}
+
+// Initialize input state
+Event.change( function() {
+  toolbox.each( document.querySelectorAll( textSelectors ), syncValue )
+})
+
+// Set input state on keyup (debounced)
+Event.on( document, 'input', textSelectors, syncValue )

data/app/assets/javascripts/tungsten/code.js

@@ -0,0 +1,20 @@
+var event = require( 'compose-toolbox' ).event
+var highlighter = require( 'compose-code-highlighter' )
+
+require( 'codemirror/mode/htmlmixed/htmlmixed' )
+require( 'codemirror/mode/slim/slim' )
+require( 'codemirror/mode/javascript/javascript' )
+require( 'codemirror/mode/css/css' )
+require( 'codemirror/mode/sql/sql' )
+require( 'codemirror/mode/php/php' )
+require( 'codemirror/mode/ruby/ruby' )
+require( 'codemirror/mode/shell/shell' )
+require( 'codemirror/mode/go/go' )
+require( 'codemirror/mode/python/python' )
+require( 'codemirror/mode/yaml/yaml' )
+require( 'codemirror/mode/clike/clike' )
+require( 'codemirror/addon/runmode/runmode' )
+require( 'codemirror/addon/edit/matchbrackets' )
+
+
+event.change( highlighter.highlight )

data/app/assets/javascripts/tungsten/tungsten.js

@@ -1,30 +1,14 @@
 var toggler     = require('compose-toggler')
 var formUp      = require( 'compose-form-up' )
 var toolbox     = require( 'compose-toolbox' )
-var event       = toolbox.event
 var ajax        = require( 'superagent' )
-var highlighter = require( 'compose-code-highlighter' )
-var loader      = require( 'compose-loader' )
-
-require( 'codemirror/mode/htmlmixed/htmlmixed' )
-require( 'codemirror/mode/slim/slim' )
-require( 'codemirror/mode/javascript/javascript' )
-require( 'codemirror/mode/css/css' )
-require( 'codemirror/mode/sql/sql' )
-require( 'codemirror/mode/php/php' )
-require( 'codemirror/mode/ruby/ruby' )
-require( 'codemirror/mode/shell/shell' )
-require( 'codemirror/mode/go/go' )
-require( 'codemirror/mode/python/python' )
-require( 'codemirror/mode/yaml/yaml' )
-require( 'codemirror/mode/clike/clike' )
-require( 'codemirror/addon/runmode/runmode' )
-require( 'codemirror/addon/edit/matchbrackets' )
+var event       = toolbox.event
 
 event.scroll.disablePointer()      // disable pointer events on scroll for performance (to avoid extra repaints)
 
-require('compose-slider')      // Our slider (range input) component
-require('./_icons')
+require('compose-slider')          // Our slider (range input) component
+require('./_icons')                // Import svg icons (from Esvg)
+require( './_form_helpers' )
 
 // Public API object
 var tungsten = toolbox.merge( {

data/app/assets/stylesheets/tungsten/_colors.yml

@@ -1,5 +1,69 @@
 _colors:
-  # Passive colors
-  space:     '#1f2b54' # Blue-Black
-  shark:     '#30446e' # Dark Blue-Gray
-  steel:     '#576e91' # Blue-Gray
+  white:           '#fff'     # carbon: ui-01
+  gray-01:         '#f7fafb'  # ratchet: cirrus
+  gray-02:         '#f5f7fa'  # carbon: ui-02
+  gray-03:         '#f0f3f6'  # carbon: ui-03
+  gray-04:         '#dfe3e6'  # carbon: ui-04
+  gray-05:         '#d6dde7'  # ratchet: isabella
+  gray-06:         '#c3cdda'  # ratchet: alabaster
+  gray-07:         '#b4c1d2'  # ratchet: dolphin
+  gray-08:         '#8c9ba5'  # carbon: ui-05
+  gray-09:         '#5a6872'  # carbon: text-02
+  gray-10:         '#152934'  # carbon: text-01
+  gray-11:         '#0f212e'  # carbon: nav-01
+
+  blue-01:         '#5aaafa'  # carbon: support-04
+  blue-02:         '#5596e6'  # carbon: brand-02
+  blue-03:         '#0094fd'  # ratchet: azure
+  blue-04:         '#006dff'  # ratchet: cobalt
+  blue-05:         '#3d70b2'  # carbon: brand-01
+
+  purple-01:       '#ba8ff7'  # carbon: nav-03
+  purple-02:       '#a346ce'  # ratchet: orchid
+  purple-03:       '#734098'  # carbon: nav-04
+
+  sea-01:          '#41d6c3'  # carbon: brand-03
+  sea-02:          '#00b4a0'  # carbon: nav-05
+  sea-03:          '#008571'  # carbon: nav-06
+
+  green-01:        '#2ac84f'  # ratchet: grass
+  green-02:        '#5aa700'  # carbon: support-02
+
+  yellow-01:       '#efc100'  # carbon: support-03
+
+  orange-01:       '#f69523'  # ratchet: gold
+  orange-02:       '#f96623'  # ratchet: tangelo
+
+  red-01:          '#dd2f41'  # ratchet: rusty
+  red-02:          '#A81C27'  # ratchet: terracotta
+
+code:
+  base03:  '#002b36'
+  base02:  '#073642'
+  base01:  '#586e75'
+  base00:  '#657b83'
+  base0:   '#839496'
+  base1:   '#93a1a1'
+  base2:   '#eee8d5'
+  base3:   '#fbfbfb'
+  yellow:  '#b58900'
+  orange:  '#cb4b16'
+  red:     '#dc322f'
+  magenta: '#d33682'
+  violet:  '#6c71c4'
+  blue:    '#268bd2'
+  cyan:    '#2aa198'
+  green:   '#859900'
+
+gradients:
+  postgresql:    ['#0094fd', '#625ff9']
+  elasticsearch: ['#625ff9', '#8f52ea']
+  rethinkdb:     ['#0094fd', '#25c894']
+  mysql:         ['#0094fd', '#8f52ea']
+  rabbitmq:      ['#f69523', '#f96623']
+  redis:         ['#f96623', '#dd2f41']
+  etcd:          ['#c60ca5', '#dd2f41']
+  scylladb:      ['#c60ca5', '#8f52ea']
+  mongodb:       ['#25c894', '#2ac84f']
+  janusgraph:    ['#869ebc', '#25c894']
+  compose:       ['#0FA7DB', '#0094fd']

data/app/assets/stylesheets/tungsten/_index.scss

@@ -0,0 +1,5 @@
+// Utility modules
+@import 'colors.yml';
+@import 'core/index';
+@import 'code/index';
+@import 'form/index';

data/app/assets/stylesheets/tungsten/code/_codemirror.scss

@@ -0,0 +1,56 @@
+div.CodeMirror {
+  //background: $softwhite;
+  //border: 1px solid $page-border;
+  border-radius: 4px;
+  padding: 5px;
+  font-family: $mono-font;
+
+  pre {
+    color: $code_base0;
+    font-size: 14px;
+    cursor: text; 
+  }
+  .CodeMirror-cursor {
+    border-left: 2px solid #43baff;
+  }
+  .CodeMirror-cursor {
+    border-left: 2px solid #43baff;
+  }
+  span.CodeMirror-matchingbracket {
+    color: $blue-04; font-weight: bold;
+  }
+  span.CodeMirror-nonmatchingbracket {
+    color: $code_red;
+  }
+}
+
+.CodeMirror-scroll {
+  height: 100%;
+  overflow-y: hidden;
+  overflow-x: auto;
+  min-height: 250px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+}
+
+.code-editor, .code-editor-content {
+  height: 100%;
+  .CodeMirror {
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+div.CodeMirror-focused {
+  border-color: hsl(203, 47%, 65%);
+  background-color: #fff;
+  box-shadow: 0 0 0 2px hsl(203, 47%, 65%) inset;
+}
+
+.document-view {
+  pre { cursor: default; }
+  .CodeMirror-cursor { display: none; }
+}
+
+div.CodeMirror-selected { background: desaturate($code-selected-bg, 100); }
+.CodeMirror-focused div.CodeMirror-selected { background: $code-selected-bg; }

data/app/assets/stylesheets/tungsten/code/_color.scss

@@ -0,0 +1,58 @@
+$code_base03:  map-get($code, base3);
+$code_base02:  map-get($code, base2);
+$code_base01:  map-get($code, base1);
+$code_base00:  map-get($code, base0);
+$code_base0:   map-get($code, base00);
+$code_base1:   map-get($code, base01);
+$code_base2:   map-get($code, base02);
+$code_base3:   map-get($code, base03);
+$code_yellow:  map-get($code, yellow);
+$code_orange:  map-get($code, orange);
+$code_red:     map-get($code, red);
+$code_magenta: map-get($code, magenta);
+$code_violet:  map-get($code, violet);
+$code_blue:    map-get($code, blue);
+$code_cyan:    map-get($code, cyan);
+$code_green:   map-get($code, green);
+
+$code-selected-bg: #BDE1FF;
+
+.cm-s-default {
+  .cm-keyword {color: $code_blue;}
+  .cm-atom {color: $code_yellow;}
+  .cm-number {color: $code_cyan;}
+  .cm-def {color: $code_magenta; font-weight: bold;}
+  .cm-variable {color: $code_orange;}
+  .cm-variable-2 {color: $code_blue;}
+  .cm-variable-3 {color: $code_green;}
+  .cm-property {color: $code_base1;}
+  .cm-operator {color: $code_base1;}
+  .cm-comment {color: $code_base01;}
+  .cm-string {color: $code_cyan;}
+  .cm-string-2 {color: $code_green;}
+  .cm-meta {color: #555;}
+  .cm-error {color: $code_red;}
+  .cm-qualifier {color: #555;}
+  .cm-builtin {color: #30a;}
+  .cm-bracket {color: #997;}
+  .cm-tag {color: $code_blue; font-weight: bold;}
+  .cm-attribute {color: $code_base1;}
+  .cm-header {color: blue;}
+  .cm-quote {color: #090;}
+  .cm-hr {color: #999;}
+  .cm-link {color: $code_violet;}
+  .cm-qualifier.cm-attribute {color: $code_orange;}
+  .cm-error {color: #f00;}
+}
+
+.static-code {
+  .cm-variable {color: $code_base1;}
+}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}

data/app/assets/stylesheets/tungsten/code/_highlighted.scss

@@ -0,0 +1,64 @@
+/* Set up the basic look and feel */
+
+code,
+kbd,
+samp {
+  color: inherit;
+  background-color: rgba(#fff, .3);//$code_base03;
+  border: 1px solid rgba(#000, .1);
+  font-family: Consolas, "Liberation Mono", Courier, monospace;
+  font-size: .95em;
+  border-radius: 3px;
+  &:before, &:after {
+    content: "\00a0";
+    letter-spacing: -0.2em;
+  }
+}
+
+pre[class*=lang-]{
+  padding: 1em;
+}
+
+pre.box-content {
+  margin-top: 0;
+}
+
+.highlighted {
+  border: 1px solid #e5e5e5;
+  position: relative;
+  background-color: $code_base03;
+  color: $code_base0;
+  line-height: inherit;
+  overflow-y: scroll;
+  font-size: 14px;
+  max-width: 100%;
+  word-break: normal;
+  word-wrap: normal;
+  transition: none;
+}
+
+.highlighted-code {
+  font-family: $mono-font;
+  background: none;
+  direction: ltr;
+  display: block;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  tab-size: 2;
+  text-align: left;
+  word-spacing: normal;
+  line-height: inherit;
+  word-break: normal;
+  word-wrap: normal;
+  overflow-x: scroll;
+
+  display: block;
+  border: none;
+  font-size: inherit;
+
+  &:before, &:after {
+    content: none;
+  }
+}

data/app/assets/stylesheets/tungsten/code/_index.scss

@@ -0,0 +1,3 @@
+@import 'color';
+@import 'codemirror';
+@import 'highlighted';

data/app/assets/stylesheets/tungsten/core/_buttons.scss

@@ -0,0 +1,144 @@
+/* ========================================================================== *
+ * Button module
+ * -------------------------------------------------------------------------- */
+
+// Universal
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+  line-height: 1;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  border: 0;
+  padding: 12px 15px;
+  background: $white;
+  border-radius: $radius;
+  transition:
+    color $duration,
+    background $duration,
+    box-shadow $duration;
+
+  // Smaller padding in tight contexts
+  table &,
+  .card &,
+  .button-group &,
+  &.small {
+    padding: 8px 12px;
+  }
+
+  // Normal state
+  @include normal {
+    color: inherit;
+    box-shadow:
+      0 0 0 1px rgba($gray-11, .1),
+      0 1px 3px rgba($gray-11, .15);
+  }
+
+  // Active state
+  @include active {
+    color: $blue-03;
+    box-shadow:
+      0 0 0 1px rgba($gray-11, .2),
+      0 1px 3px rgba($gray-11, .25);
+  }
+
+  // Disabled
+  &[disabled] {
+    color: $gray-05 !important;
+    background: $gray-01 !important;
+    cursor: not-allowed !important;
+    box-shadow:
+      0 0 0 1px rgba($gray-11, .1),
+      0 1px 3px rgba($gray-11, .15) !important;
+  }
+}
+
+// Grouped buttons
+.button-group {
+  display: flex;
+  align-items: flex-start;
+
+  .button {
+
+    & + .button {
+      margin: 0;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+
+    &:first-child {
+      border-radius: $radius 0 0 $radius;
+    }
+
+    &:last-child {
+      border-radius: 0 $radius $radius 0;
+    }
+  }
+}
+
+// Destructive action
+.button.destructive {
+
+  // Normal state
+  @include normal {
+    color: $red-01;
+  }
+
+  // Active state
+  @include active {
+    color: $red-02;
+  }
+}
+
+// Primary action
+.button.primary {
+
+  // Normal state
+  @include normal {
+    color: $white;
+    background: $blue-03;
+    box-shadow:
+      0 0 0 1px darken($blue-03, 5),
+      0 1px 3px rgba($gray-11, .15);
+  }
+
+  // Active state
+  @include active {
+    color: $white;
+    background: $blue-04;
+    box-shadow:
+      0 0 0 1px $blue-04,
+      0 1px 3px rgba($gray-11, .15);
+  }
+}
+
+.primary.destructive {
+
+  // Normal state
+  @include normal {
+    background: $red-01;
+    box-shadow:
+      0 0 0 1px darken($red-01, 5),
+      0 1px 3px rgba($gray-11, .15);
+  }
+
+  // Active state
+  @include active {
+    color: $white;
+    background: $red-02;
+    box-shadow:
+      0 0 0 1px $red-02,
+      0 1px 3px rgba($gray-11, .15);
+  }
+}
+
+// Siblings need their space
+.button + .button {
+  margin-left: 10px;
+}