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-0: hsl(0, 0%, 80.7%);
  70 $neutral-dark-1: hsl(0, 0%, 63.7%);
  71 $neutral-dark-2: hsl(0, 0%, 56.7%);
  72 $neutral-dark-3: hsl(0, 0%, 49.7%);
  73 $neutral-dark-4: hsl(0, 0%, 42.7%);
  74 $neutral-dark-5: hsl(0, 0%, 35.7%);
  75 $netral-black: hsl(0, 100%, 0%);
  76
  77
  78
  79 /* SUCCESS, WARNING, ALERT
  80 ############################################################################ */
  81
  82 $success: hsl(198, 59%, 56%);
  83 $warning: hsl(39, 89%, 67%);
  84 $alert: hsl(5, 100%, 71%);
  85
  86
  87
  88 /* ROOT
  89 ############################################################################ */
  90
  91 $header: hsl(218, 18%, 17%);
  92 $body: hsl(181, 6%, 95%);
  93
  94
  95
  96 /* BASE
  97 ############################################################################ */
  98
  99 $primary: hsl(204, 100%, 39%);
 100 $focus: hsla(204, 100%, 39%, 1);
 101
 102
 103
 104 /* BUTTON
 105 ############################################################################ */
 106 /* Normal */
 107 $normalBackground: hsl(211, 3%, 91%);
 108 $normalForeground: hsl(211, 3%, 11%);
 109
 110 $normalHoverBackground: darken($normalBackground, 10%);
 111 $normalHoverForeground: $normalForeground;
 112
 113 $normalActiveBackground: saturate($primary, 50%);
 114 $normalActiveForeground: $neutral-white;
 115
 116 /* Primary */
 117 $primaryBackground: $primary;
 118 $primaryForeground: $neutral-white;
 119
 120 $primaryHoverBackground: darken($primaryBackground, 10%);
 121 $primaryHoverForeground: $primaryForeground;
 122
 123 $primaryActiveBackground: saturate($primary, 50%);
 124 $primaryActiveForeground: $neutral-white;
 125