_design-tokens.artifact.scss 12.3 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// DO NOT EDIT THIS FILE.  This is a gitignored artifact created by Gulp.
// Design tokens should be edited in config.design-tokens.yml
$gesso: (
  palette: (
    brand: (
      blue: (
        base: #0071BC,
        light: #4773aa,
        light-1: #8ba6ca,
        light-2: #dce4ef,
        dark: #205493,
        dark-1: #112E51,
      ),
      ocean-blue: (
        base: #02bfe7,
        light: #9bdaf1,
        light-1: #e1f3f8,
        dark: #00a6d2,
        dark-1: #046b99,
      ),
Eric Bremner's avatar
Eric Bremner committed
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
      org-default: (
        uw-black: (
          lvl1: #dfdfdf,
          lvl2: #a2a2a2,
          lvl3: #787878,
          lvl4: #000,
          primary: #000,
        ),
        uw-gold: (
          lvl1: #fffaaa,
          lvl2: #ffea30,
          lvl3: #fdd54f,
          lvl4: #e4b429,
          primary: #fdd54f,
        ),
        uw-white: (
          lvl1: #fff,
          primary: #fff,
        ),
      ),
      org-ahs: (
        lvl1: #97dfef,
        lvl2: #00bed0,
        lvl3: #0098a5,
        lvl4: #005963,
        primary: #005963,
      ),
      org-art: (
        lvl1: #ffd5a5,
        lvl2: #fbaf00,
        lvl3: #e78100,
        lvl4: #d93f00,
53
        primary: #d93f00,
Eric Bremner's avatar
Eric Bremner committed
54
55
56
57
58
59
      ),
      org-eng: (
        lvl1: #d0b4ef,
        lvl2: #be33da,
        lvl3: #8100b4,
        lvl4: #57058b,
60
        primary: #57058b,
Eric Bremner's avatar
Eric Bremner committed
61
62
63
64
65
66
      ),
      org-env: (
        lvl1: #daf582,
        lvl2: #bed500,
        lvl3: #b4be00,
        lvl4: #607000,
67
        primary: #607000,
Eric Bremner's avatar
Eric Bremner committed
68
69
70
71
72
73
      ),
      org-mat: (
        lvl1: #ffbeef,
        lvl2: #ff63aa,
        lvl3: #df2498,
        lvl4: #c60078,
74
        primary: #c60078,
Eric Bremner's avatar
Eric Bremner committed
75
76
77
78
79
80
      ),
      org-sci: (
        lvl1: #b4d5ff,
        lvl2: #63a0ff,
        lvl3: #0073ce,
        lvl4: #0033be,
81
        primary: #0033be,
Eric Bremner's avatar
Eric Bremner committed
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
      ),
      org-ren: (
        green: #00693c,
        red: #de3831,
        gold: #d2c295,
      ),
      org-stj: (
        green: #01573e,
        gold: #c88a11,
      ),
      org-stp: (
        green: #879637,
        brown: #584528,
      ),
      org-cgc: (
        red: #c4262e,
      ),
      org-school: (
        lvl1: #ffa5aa,
        lvl2: #e41740,
        lvl3: #b71233,
        lvl4: #80001f,
        primary: #b71233,
      ),
106
107
108
    ),
    grayscale: (
      white: #fff,
109
110
      gray-1: #fafafa,
      gray-2: #eee,
m26lebla's avatar
m26lebla committed
111
      gray-3: #ccc,
112
      gray-4: #A2A2A2,
m26lebla's avatar
m26lebla committed
113
      gray-5: #757575,
114
      gray-6: #4e4e4e,
m26lebla's avatar
m26lebla committed
115
      gray-7: #333,
116
      black: #000,
117
118
119
120
121
122
123
124
125
126
    ),
    other: (
      yellow: (
        base: #fad980,
        light: #fff1d2,
      ),
      yellow-neon: (
        base: #ff0,
      ),
      green: (
127
128
        base: #4d8f46,
        dark: #0a6700,
129
130
131
132
133
134
135
136
        light: #e7f4e4,
      ),
      red: (
        base: #e31c3d,
        light: #e59393,
        light-1: #f9dede,
        dark: #cd2026,
        dark-1: #981b1e,
137
138
        orange-light: #f69231,
        orange-dark: #ef6114,
139
140
141
142
143
144
145
146
147
148
      ),
    ),
  ),
  box-shadow: (
    0: none,
    1: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
    2: '0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)',
    3: '0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23)',
    4: '0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22)',
    5: '0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22)',
149
    6: '0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3)',
150
151
152
153
154
155
156
157
  ),
  constrains: (
    sm: 800px,
    md: 1440px,
    lg: 2200px,
  ),
  breakpoints: (
    xs: 480px,
158
159
160
    sm: 641px,
    md: 769px,
    lg: 1011px,
161
    xl: 1200px,
162
163
164
    xxl: 1640px,
    onek: 1920px,
    twok: 2559px,
165
166
167
  ),
  colors: (
    text: (
168
      primary: #000,
m26lebla's avatar
m26lebla committed
169
      secondary: #4e4e4e,
170
      on-light: #000,
171
      on-dark: #fff,
172
173
174
175
      link: #4e4e4e,
      link-hover: #000,
      link-active: #4e4e4e,
      link-visited: #4e4e4e,
176
177
178
179
180
    ),
    background: (
      site: #fff,
    ),
    button: (
181
      default: (
m26lebla's avatar
m26lebla committed
182
183
184
        background: #757575,
        background-hover: #eee,
        background-active: #757575,
185
        text: #fff,
m26lebla's avatar
m26lebla committed
186
        text-hover: #4e4e4e,
187
188
        text-active: #fff,
      ),
189
190
191
192
193
194
195
196
      primary: (
        background: #4d8f46,
        background-hover: #0a6700,
        background-active: #0a6700,
        text: #fff,
        text-hover: #fff,
        text-active: #fff,
      ),
197
198
199
200
201
202
203
204
205
      secondary: (
        background: #02bfe7,
        background-hover: #00a6d2,
        background-active: #046b99,
        text: #fff,
        text-hover: #fff,
        text-active: #fff,
      ),
      disabled: (
206
207
        background: #eee,
        text: #A2A2A2,
208
209
210
211
212
213
214
215
216
      ),
      danger: (
        background: #e31c3d,
        background-hover: #cd2026,
        background-active: #981b1e,
        text: #fff,
        text-hover: #fff,
        text-active: #fff,
      ),
217
218
219
220
221
222
223
224
      cancel: (
        background: #f69231,
        background-hover: #ef6114,
        background-active: #ef6114,
        text: #fff,
        text-hover: #fff,
        text-active: #fff,
      ),
225
226
    ),
    form: (
227
      background: #fafafa,
228
229
230
      background-active: #fff,
      background-checked: #0071BC,
      background-unchecked: #fff,
m26lebla's avatar
m26lebla committed
231
      border: #ccc,
m26lebla's avatar
m26lebla committed
232
      border-dark: #757575,
233
      border-light: #fafafa,
m26lebla's avatar
m26lebla committed
234
235
236
237
238
239
240
241
      input: (
        input-background: #fff,
        input-border: #ccc,
        input-border-focus: #757575,
        input-color: #4e4e4e,
        input-outline: #eee,
        input-focus: #757575,
      ),
242
243
244
      fieldset: (
        fieldset-background: #fafafa,
      ),
m26lebla's avatar
m26lebla committed
245
      thumb: #757575,
246
      track: #A2A2A2,
247
248
249
    ),
    mark: (
      background: #ff0,
250
      text: #000,
251
252
253
254
255
256
    ),
    selection: (
      background: #0071BC,
      text: #fff,
    ),
    table: (
m26lebla's avatar
m26lebla committed
257
      border: #757575,
258
      background: #fff,
259
260
      background-head: #eee,
      background-foot: #eee,
261
262
263
    ),
    ui: (
      generic: (
264
265
        background: #A2A2A2,
        background-darker: #000,
266
        background-dark: #757575,
267
268
269
270
271
        background-light: #eee,
        background-lighter: #fafafa,
        border: #A2A2A2,
        border-dark: #4e4e4e,
        border-light: #eee,
272
        text-lighter: #fff,
273
        text-light: #A2A2A2,
m26lebla's avatar
m26lebla committed
274
        text-dark: #757575,
275
        text-darker: #000,
wodby's avatar
wodby committed
276
277
278
279
        accent: #000,
        accent-dark: #e4b429,
        accent-light: #ffea30,
        focus: #000,
280
281
282
283
284
285
286
      ),
      error: (
        background: #f9dede,
        border: #e59393,
      ),
      success: (
        background: #e7f4e4,
287
        border: #4d8f46,
288
289
290
291
292
293
294
295
296
297
298
      ),
      warning: (
        background: #fff1d2,
        border: #fad980,
      ),
    ),
  ),
  typography: (
    font-family: (
      primary: (
        name: Primary,
299
300
301
302
        stack: 'georgia, "droid serif", "Times New Roman", Times, serif',
      ),
      secondary: (
        name: Secondary,
303
        stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
304
      ),
305
306
307
308
      book: (
        name: Book,
        stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
309
310
311
312
      condensed: (
        name: Condensed,
        stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
313
      condensedbook: (
314
315
316
        name: Condensed-Book,
        stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
      ),
317
      system: (
318
        name: 'System  Typ1451-Regular',
319
        stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
320
      ),
321
322
323
324
325
326
327
328
329
330
331
332
      systemlight: (
        name: 'System light Typ1451-Light',
        stack: 'Typ1451-light,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
      ),
      systemmedium: (
        name: 'System Medium  Typ1451-Medium',
        stack: 'Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
      ),
      systembold: (
        name: 'System Bold  Typ1451-Bold',
        stack: 'Typ1451-Bold,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
      ),
333
334
335
336
      monospace: (
        name: Monospace,
        stack: 'Consolas, "Lucida Console", "Liberation Mono", "Courier New", monospace, sans-serif',
      ),
337
      iconfont: (
338
339
340
        name: icon-font,
        stack: fdsu-rwd,
      ),
341
342
343
    ),
    base-font-size: 16px,
    font-size: (
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
      0: 16px,
      1: 18px,
      2: 20.256px,
      3: 22.784px,
      4: 25.632px,
      5: 28.832px,
      6: 32.432px,
      7: 36.496px,
      8: 41.056px,
      9: 46.192px,
      10: 51.952px,
      11: 58.448px,
      12: 65.76px,
      13: 73.984px,
      14: 83.232px,
      15: 93.632px,
      16: 105.328px,
      -6: 7.888px,
      -5: 8.88px,
      -4: 9.984px,
      -3: 11.232px,
      -2: 12.64px,
366
      -1: 14.22224px,
367
368
    ),
    font-weight: (
369
      hairline: 200,
370
371
      light: 300,
      regular: 400,
372
      bold: 600,
373
      semibold: 600,
374
375
      extrabold: 700,
      black: 800,
376
377
378
379
380
381
382
383
    ),
    line-height: (
      tight: 1.1,
      base: 1.45,
      loose: 1.7,
    ),
    display: (
      display: (
384
385
        font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
        font-size: 41.056px,
386
        font-weight: 400,
387
388
      ),
      h1: (
389
390
391
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 41.056px,
        font-weight: 400,
392
393
394
        line-height: 1.1,
      ),
      h2: (
395
396
397
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 28.832px,
        font-weight: 400,
398
399
400
        line-height: 1.1,
      ),
      h3: (
401
402
403
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 22.784px,
        font-weight: 400,
404
405
406
        line-height: 1.1,
      ),
      h4: (
407
408
409
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 20.256px,
        font-weight: 400,
410
        line-height: 1.1,
411
412
      ),
      h5: (
413
414
415
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 18px,
        font-weight: 400,
416
        line-height: 1.1,
417
418
      ),
      h6: (
419
420
421
        font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
        font-size: 16px,
        font-weight: 400,
422
        line-height: 1.1,
423
424
      ),
      blockquote: (
425
426
        font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
        font-size: 22.784px,
427
428
429
430
        font-weight: 400,
        line-height: 1.45,
      ),
      body: (
431
432
        color: #000,
        font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
433
434
435
436
437
        font-size: 16px,
        font-weight: 400,
        line-height: 1.45,
      ),
      body-large: (
438
439
440
        color: #000,
        font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
        font-size: 20.256px,
441
442
443
444
        font-weight: 400,
        line-height: 1.45,
      ),
      cite: (
m26lebla's avatar
m26lebla committed
445
        color: #4e4e4e,
446
447
        font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
        font-size: 16px,
448
449
        font-style: normal,
        font-weight: 600,
450
        letter-spacing: .02rem,
451
452
        line-height: 1.1,
      ),
m26lebla's avatar
m26lebla committed
453
454
455
456
457
458
459
460
461
      input: (
        color: #4e4e4e,
        font-family: 'Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif',
        font-size: 16px,
        font-style: normal,
        font-weight: 600,
        letter-spacing: .02rem,
        line-height: 1.1,
      ),
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
    ),
  ),
  transitions: (
    ease: (
      ease-in-out: 'cubic-bezier(0.4, 0, 0.2, 1)',
      ease-out: 'cubic-bezier(0.0, 0, 0.2, 1)',
      ease-in: 'cubic-bezier(0.4, 0, 1, 1)',
      sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
    ),
    duration: (
      shortest: 150ms,
      short: 200ms,
      standard: 375ms,
      long: 400ms,
      intro: 270ms,
      outro: 195ms,
    ),
  ),
  z-index: (
481
482
483
484
485
486
487
488
489
490
    modal: 10,
    drawer: 9,
    overlay: 9,
    nav: 8,
    logo: 8,
    dropdown: 7,
    mobilemenu: 6,
    interact: 5,
    header: 4,
    content: 3,
491
    footer: 2,
492
493
494
    slides: 2,
    wrapper: 2,
    background: 1,
495
496
497
498
499
500
  ),
  spacing: (
    xxs: 4px,
    xs: 8px,
    sm: 16px,
    md: 24px,
501
    lg: 32px,
502
503
504
505
    xl: 56px,
    xxl: 96px,
  ),
  gutter-width: 40px,
506
);