skyquake/framework/style/_colors.scss

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19
  20 $darker-gray: rgb(91,91,91);
  21 $dark-gray: rgb(211, 211, 211);
  22 $lightest-gray: rgb(221,221,221);
  23 $light-green: rgb(147, 203, 67);
  24 $light-blue: rgb(0, 168, 235);
  25 $lighter-blue: rgb(159, 196, 244);
  26
  27
  28 $primary-header: $light-green;
  29 $secondary-header: $dark-gray;
  30 $body-color:$lightest-gray;
  31
  32 $error-red:#FF5F5F;
  33
  34 //PC
  35
  36 $black: #000;
  37 $gray-lightest: #f1f1f1;
  38 $gray-lighter: #e5e5e5;
  39 $gray-light: #dadada;
  40 $gray: #ccc;
  41 $gray-dark: #999;
  42 $gray-darker: #666;
  43 $gray-darkest: #333;
  44 $white: #FFF;
  45 //
  46 // Brand Colors
  47 //
  48 $brand-blue-light: #30baef;
  49 $brand-blue: #00acee;
  50 $brand-blue-dark: #147ca3;
  51 $brand-green-light: #93cb43;
  52 $brand-green: #7cc118;
  53
  54
  55 /*
  56     New Styles. Phase out old above
  57 */
  58
  59 /* NEUTRL
  60 ############################################################################ */
  61
  62 $neutral-white: hsl( 0, 100%, 100%);
  63 $neutral-light-1: hsl(360, 100%, 50%);
  64 $neutral-light-2: hsl(360, 100%, 50%);
  65 $neutral-light-3: hsl(360, 100%, 50%);
  66 $neutral-light-4: hsl(360, 100%, 50%);
  67 $neutral-light-5: hsl(360, 100%, 50%);
  68
  69 $neutral-dark-1: hsl(360, 100%, 50%);
  70 $neutral-dark-2: hsl(360, 100%, 50%);
  71 $neutral-dark-3: hsl(360, 100%, 50%);
  72 $neutral-dark-4: hsl(360, 100%, 50%);
  73 $neutral-dark-5: hsl(360, 100%, 50%);
  74 $netral-black: hsl(0, 100%, 0%);
  75
  76
  77
  78 /* SUCCESS, WARNING, ALERT
  79 ############################################################################ */
  80
  81 $success: hsl(198, 59%, 56%);
  82 $warning: hsl(39, 89%, 67%);
  83 $alert: hsl(5, 100%, 71%);
  84
  85
  86
  87 /* ROOT
  88 ############################################################################ */
  89
  90 $header: hsl(218, 18%, 17%);
  91 $body: hsl(181, 6%, 95%);
  92
  93
  94
  95 /* BASE
  96 ############################################################################ */
  97
  98 $primary: hsl(204, 100%, 39%);
  99 $focus: hsla(204, 100%, 39%, 1);
 100
 101
 102
 103 /* BUTTON
 104 ############################################################################ */
 105 /* Normal */
 106 $normalBackground: hsl(211, 3%, 91%);
 107 $normalForeground: hsl(211, 3%, 11%);
 108
 109 $normalHoverBackground: darken($normalBackground, 10%);
 110 $normalHoverForeground: $normalForeground;
 111
 112 $normalActiveBackground: saturate($primary, 50%);
 113 $normalActiveForeground: $neutral-white;
 114
 115 /* Primary */
 116 $primaryBackground: $primary;
 117 $primaryForeground: $neutral-white;
 118
 119 $primaryHoverBackground: darken($primaryBackground, 10%);
 120 $primaryHoverForeground: $primaryForeground;
 121
 122 $primaryActiveBackground: saturate($primary, 50%);
 123 $primaryActiveForeground: $neutral-white;
 124