Style: Color Palette
The code exports a color palette with the Handoff brand colors.
Usage Guide
This file is included in the components via the /shared scss import. The color
palette is used to define the colors that are used in the components. The
colors are defined as variables, and are used in the components as needed.
1// Base Colors
2$colors: (
3 /** Don't use single/double quotation marks for color names **/
4 pure-white: #fff,
5 pure-white-0: rgba(255, 255, 255, 0),
6 pure-white-8: rgba(255, 255, 255, 0.8),
7 pure-white-7: rgba(255, 255, 255, 0.7),
8 pure-white-9: rgba(255, 255, 255, 0.65),
9 pure-white-10: rgba(255, 255, 255, 0.6),
10 pure-black: #000,
11 pure-black-08: rgba(0, 0, 0, 0.08),
12 pure-black-1: rgba(0, 0, 0, 0.15),
13 pure-black-2: rgba(0, 0, 0, 0.2),
14 pure-black-3: rgba(0, 0, 0, 0.35),
15 pure-black-4: rgba(0, 0, 0, 0.1),
16 pure-black-5: rgba(11, 77, 153, 0.1),
17 argent: rgba(191, 191, 191, 0.5),
18 argent-1: rgba(15, 10, 48, 0.8),
19 argent-2: rgba(231, 237, 245, 0),
20 argent-3: rgba(231, 237, 245, 0.3),
21 argent-4: rgba(229, 241, 249, 0.5),
22 argent-5: rgba(191, 191, 191, 0.2),
23 argent-6: rgba(100, 111, 121, 0.2),
24 argent-7: rgba(191, 191, 191, 0.8),
25 blue: #0077c8,
26 shade-85: #262626,
27 shade-65: #595959,
28 shade-45: #8c8c8c,
29 shade-45-2: #8c8c8c33,
30 shade-25: #bfbfbf,
31 shade-26: #f5f5f5,
32 shade-27: #e3e9f1,
33 border: #d9d9d9,
34 tangerine: #f5b407,
35 midnight: #0f0a30,
36 pure-navy: #111e65,
37 background-1: #e7edf5,
38 background-2: #e9eff6,
39 in-blue: #0b4d99,
40 in-blue-light: #16bfca,
41 teal: #00677f,
42 tangaroa: #172538,
43 mid-grey: #646f79,
44 mid-grey-1: #4f5358,
45 midnight-blue: #0c408b,
46 cetacean-blue: #100d37,
47 midnight-express: #212336,
48 boder-background: #00000026,
49 bright-grey: #54565a,
50 casper: #a9b3b6
51);
52
53$theme-colors: (
54 primary: #000,
55 secondary: #0077c8,
56);
57
58$white-opacity: rgba(255, 255, 255, 0);
59$box-shadow-1: 0 20px 60px 0 rgba(0, 0, 0, 0.25);
60$box-shadow-2: 0px 0px 15px 0 rgba(0, 0, 0, 0.25);
61$form-bg: linear-gradient(216deg, #0077c8 -4.56%, #111e65 34.5%, #0f0a30 100%);
62$sub-form-bg: linear-gradient(
63 190.48deg,
64 var(--color-primary-blue) -4.56%,
65 color("pure-navy") 34.5%,
66 color("midnight") 100%
67);
68$logo-border: #bfbfbf80;
69$box-shadow-3: 0px 20px 60px 0px #0000001a;
70$counter-border: 1px solid #00000026;
71$card-gradiont: linear-gradient(
72 180deg,
73 rgba(255, 255, 255, 0) 0%,
74 color("pure-white") 100%
75);
76$icon-box-shadow: 0px 28px 78px 0px #0000004d;
77$icon-box-shadow-inner: 0px 4px 25.5px 0px #0000001a inset;