_variables.scss 6.34 KB
Newer Older
1 2 3
// studio - utilities - variables
// ====================

4
// Table of Contents
5
// * +Paths
6 7 8 9 10 11 12 13 14 15 16
// * +Grid
// * +Fonts
// * +Colors - Utility
// * +Colors - Primary
// * +Colors - Shadow
// * +Color - Application
// * +Timing
// * +Archetype UI
// * +Specific UI
// * +Deprecated

17 18
$baseline: 20px;

19 20 21 22
// +Paths
// ====================
$static-path: '..' !default;

23
// +Grid
24
// ====================
25 26
$gw-column: ($baseline*3);
$gw-gutter: $baseline;
27 28 29
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
30
$fg-max-width: 1280px;
31
$fg-min-width: 900px;
32

33
// +Fonts
34
// ====================
Brian Talbot committed
35 36 37
$f-sans-serif: 'Open Sans','Helvetica Neue', Helvetica, Arial, sans-serif;
$f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;

38
// +Colors - Utility
39
// ====================
40
$transparent: rgba(0,0,0,0); // used when color value is needed for UI width/transitions but element is transparent
41

42
// +Colors - Primary
43
// ====================
Brian Talbot committed
44
$black: rgb(0,0,0);
45 46 47 48
$black-t0: rgba($black, 0.125);
$black-t1: rgba($black, 0.25);
$black-t2: rgba($black, 0.5);
$black-t3: rgba($black, 0.75);
49

50
$white: rgb(255,255,255);
51 52 53 54
$white-t0: rgba($white, 0.125);
$white-t1: rgba($white, 0.25);
$white-t2: rgba($white, 0.5);
$white-t3: rgba($white, 0.75);
55 56 57 58 59 60 61

$gray: rgb(127,127,127);
$gray-l1: tint($gray,20%);
$gray-l2: tint($gray,40%);
$gray-l3: tint($gray,60%);
$gray-l4: tint($gray,80%);
$gray-l5: tint($gray,90%);
62
$gray-l6: tint($gray,95%);
63
$gray-l7: tint($gray,99%);
64 65 66 67 68
$gray-d1: shade($gray,20%);
$gray-d2: shade($gray,40%);
$gray-d3: shade($gray,60%);
$gray-d4: shade($gray,80%);

69
$blue: rgb(0, 159, 230);
70 71 72 73 74 75 76 77 78
$blue-l1: tint($blue,20%);
$blue-l2: tint($blue,40%);
$blue-l3: tint($blue,60%);
$blue-l4: tint($blue,80%);
$blue-l5: tint($blue,90%);
$blue-d1: shade($blue,20%);
$blue-d2: shade($blue,40%);
$blue-d3: shade($blue,60%);
$blue-d4: shade($blue,80%);
Brian Talbot committed
79 80 81 82 83 84
$blue-s1: saturate($blue,15%);
$blue-s2: saturate($blue,30%);
$blue-s3: saturate($blue,45%);
$blue-u1: desaturate($blue,15%);
$blue-u2: desaturate($blue,30%);
$blue-u3: desaturate($blue,45%);
85 86 87 88
$blue-t0: rgba($blue, 0.125);
$blue-t1: rgba($blue, 0.25);
$blue-t2: rgba($blue, 0.50);
$blue-t3: rgba($blue, 0.75);
89

90
$pink: rgb(183, 37, 103); // #b72567;
91 92 93 94 95 96 97 98 99
$pink-l1: tint($pink,20%);
$pink-l2: tint($pink,40%);
$pink-l3: tint($pink,60%);
$pink-l4: tint($pink,80%);
$pink-l5: tint($pink,90%);
$pink-d1: shade($pink,20%);
$pink-d2: shade($pink,40%);
$pink-d3: shade($pink,60%);
$pink-d4: shade($pink,80%);
Brian Talbot committed
100 101 102 103 104 105
$pink-s1: saturate($pink,15%);
$pink-s2: saturate($pink,30%);
$pink-s3: saturate($pink,45%);
$pink-u1: desaturate($pink,15%);
$pink-u2: desaturate($pink,30%);
$pink-u3: desaturate($pink,45%);
106

107
$red: rgb(178, 6, 16);  // #b20610;
108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
$red-l1: tint($red,20%);
$red-l2: tint($red,40%);
$red-l3: tint($red,60%);
$red-l4: tint($red,80%);
$red-l5: tint($red,90%);
$red-d1: shade($red,20%);
$red-d2: shade($red,40%);
$red-d3: shade($red,60%);
$red-d4: shade($red,80%);
$red-s1: saturate($red,15%);
$red-s2: saturate($red,30%);
$red-s3: saturate($red,45%);
$red-u1: desaturate($red,15%);
$red-u2: desaturate($red,30%);
$red-u3: desaturate($red,45%);

124
$green: rgb(37, 184, 90); // #25b85a
125 126 127 128 129 130 131 132 133
$green-l1: tint($green,20%);
$green-l2: tint($green,40%);
$green-l3: tint($green,60%);
$green-l4: tint($green,80%);
$green-l5: tint($green,90%);
$green-d1: shade($green,20%);
$green-d2: shade($green,40%);
$green-d3: shade($green,60%);
$green-d4: shade($green,80%);
Brian Talbot committed
134 135 136 137 138 139
$green-s1: saturate($green,15%);
$green-s2: saturate($green,30%);
$green-s3: saturate($green,45%);
$green-u1: desaturate($green,15%);
$green-u2: desaturate($green,30%);
$green-u3: desaturate($green,45%);
140

Brian Talbot committed
141
$yellow: rgb(237, 189, 60);
142 143 144 145 146 147 148 149 150
$yellow-l1: tint($yellow,20%);
$yellow-l2: tint($yellow,40%);
$yellow-l3: tint($yellow,60%);
$yellow-l4: tint($yellow,80%);
$yellow-l5: tint($yellow,90%);
$yellow-d1: shade($yellow,20%);
$yellow-d2: shade($yellow,40%);
$yellow-d3: shade($yellow,60%);
$yellow-d4: shade($yellow,80%);
Brian Talbot committed
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173
$yellow-s1: saturate($yellow,15%);
$yellow-s2: saturate($yellow,30%);
$yellow-s3: saturate($yellow,45%);
$yellow-u1: desaturate($yellow,15%);
$yellow-u2: desaturate($yellow,30%);
$yellow-u3: desaturate($yellow,45%);

$orange: rgb(237, 189, 60);
$orange-l1: tint($orange,20%);
$orange-l2: tint($orange,40%);
$orange-l3: tint($orange,60%);
$orange-l4: tint($orange,80%);
$orange-l5: tint($orange,90%);
$orange-d1: shade($orange,20%);
$orange-d2: shade($orange,40%);
$orange-d3: shade($orange,60%);
$orange-d4: shade($orange,80%);
$orange-s1: saturate($orange,15%);
$orange-s2: saturate($orange,30%);
$orange-s3: saturate($orange,45%);
$orange-u1: desaturate($orange,15%);
$orange-u2: desaturate($orange,30%);
$orange-u3: desaturate($orange,45%);
174

175
// +Colors - Shadows
176
// ====================
177 178 179 180 181
$shadow: rgba($black, 0.2);
$shadow-l1: rgba($black, 0.1);
$shadow-l2: rgba($black, 0.05);
$shadow-d1: rgba($black, 0.4);
$shadow-d2: rgba($black, 0.6);
182

183
// +Colors - Application
184
// ====================
185 186 187 188 189 190
$color-draft: $gray-l3;
$color-live: $blue;
$color-ready: $green;
$color-warning: $orange-l2;
$color-error: $red-l2;
$color-staff-only: $black;
191
$color-gated: $black;
192
$color-visibility-set: $black;
193 194 195

$color-heading-base: $gray-d2;
$color-copy-base: $gray-l1;
196
$color-copy-emphasized: $gray-d2;
197

198
// +Timing
199
// ====================
200
// used for animation/transition mixin syncing
201 202 203 204 205 206 207 208
$tmg-s3: 3.0s;
$tmg-s2: 2.0s;
$tmg-s1: 1.0s;
$tmg-avg: 0.75s;
$tmg-f1: 0.50s;
$tmg-f2: 0.25s;
$tmg-f3: 0.125s;

209
// +Archetype UI
210
// ====================
211 212 213 214 215 216
$ui-action-primary-color: $blue-u2;
$ui-action-primary-color-focus: $blue-s1;

$ui-link-color: $blue-u2;
$ui-link-color-focus: $blue-s1;

217
// +Specific UI
218
// ====================
219 220
$ui-notification-height: ($baseline*10);
$ui-update-color: $blue-l4;
221

222 223
// +Deprecated
// ====================
224
// do not use, future clean up will use updated styles
225
$baseFontColor: $gray-d2;
226
$lighter-base-font-color: rgb(100,100,100);
227
$offBlack: #3c3c3c;
228
$green: #108614;
Tom Giannattasio committed
229
$lightGrey: #edf1f5;
230
$mediumGrey: #b0b6c2;
231
$darkGrey: #8891a1;
232
$extraDarkGrey: #3d4043;
233
$paleYellow: #fffcf1;
234
$yellow: rgb(255, 254, 223);
235 236 237 238
$green: rgb(37, 184, 90);
$brightGreen: rgb(22, 202, 87);
$disabledGreen: rgb(124, 206, 153);
$darkGreen: rgb(52, 133, 76);
239
$lightBluishGrey: rgb(197, 207, 223);
240
$lightBluishGrey2: rgb(213, 220, 228);
241
$error-red: rgb(253, 87, 87);
Brian Talbot committed
242

243 244 245 246

//carryover from LMS for xmodules
$sidebar-color: rgb(246, 246, 246);

Brian Talbot committed
247
// type
248
$sans-serif: $f-sans-serif;
Brian Talbot committed
249
$body-line-height: golden-ratio(.875em, 1);
250 251 252

// carried over from LMS for xmodules
$action-primary-active-bg: #1AA1DE; // $m-blue
253
$very-light-text: $white;