-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathcolors.css
108 lines (84 loc) · 5.24 KB
/
colors.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
:root {
/* Stable color properties */
--color-primary-h: 17;
--color-primary-s: 81%;
--color-primary-l: 38%;
--color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
--color-secondary-h: 0;
--color-secondary-s: 14%;
--color-secondary-l: 83%;
--color-secondary: hsl(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l));
--color-text-h: 0;
--color-text-s: 0%;
--color-text-l: 13%;
--color-text: hsl(var(--color-text-h), var(--color-text-s), var(--color-text-l));
--color-text-secondary-h: var(--color-text-h);
--color-text-secondary-s: var(--color-text-s);
--color-text-secondary-l: var(--color-text-l);
--color-text-secondary: hsl(var(--color-text-secondary-h), var(--color-text-secondary-s), var(--color-text-secondary-l));
--color-button-h: 0;
--color-button-s: 0%;
--color-button-l: 33%;
--color-button: hsl(var(--color-button-h), var(--color-button-s), var(--color-button-l));
--color-danger-h: 0;
--color-danger-s: 84%;
--color-danger-l: 44%;
--color-success-h: 100;
--color-success-s: 70%;
--color-success-l: 28%;
--color-background: #f4f0f0;
--color-background-component: #ffffff;
--color-background-component-heading: #f0f0f0;
--color-background-navbar: var(--color-secondary);
--color-link: var(--color-primary);
--color-link-hover: var(--color-primary-light);
/* Computed colors */
--color-primary-dark: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * .95));
--color-primary-light: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 1.15));
--color-primary-opacity: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) * 1.15), 0.7);
--color-secondary-light: var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 1.08);
--color-secondary-dark: var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 0.75);
--color-secondary-dark-faded-30: hsla(var(--color-secondary-dark), 0.3);
--color-secondary-dark-faded-65: hsla(var(--color-secondary-dark), 0.65);
--color-success: hsl(var(--color-success-h), var(--color-success-s), var(--color-success-l));
--color-success-dark: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) * 0.5));
--color-success-light: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) * 1.5));
--color-success-lighter: hsl(var(--color-success-h), var(--color-success-s), calc(var(--color-success-l) * 3));
--color-warning: var(--color-secondary);
--color-warning-light: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 1.15));
--color-warning-dark: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 0.85));
--color-warning-darker: hsl(var(--color-secondary-h), var(--color-secondary-s), calc(var(--color-secondary-l) * 0.75));
--color-danger: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
--color-danger-dark: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) * 0.65));
--color-danger-light: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) * 1.68));
--color-danger-lighter: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) * 2));
/* Text colors */
--color-text-navbar: var(--color-text);
--color-text-grey: hsl(var(--color-text-h), var(--color-text-s), 29%);
--color-text-lightGrey: hsl(var(--color-text-h), var(--color-text-s), 45%);
--color-text-veryLightGrey: hsl(var(--color-text-h), var(--color-text-s), 82%);
--color-text-veryLightGrey-opacity: hsla(var(--color-text-h), var(--color-text-s), 82%, 0.7);
/* Button colors */
--color-button-hover: var(--color-primary-light);
--color-button-light: hsla(var(--color-button-h), var(--color-button-s), var(--color-button-l), 0.8);
--color-button-lighter: hsla(var(--color-button-h), var(--color-button-s), var(--color-button-l), 0.4);
--color-button-delete: var(--color-danger);
--color-button-delete-hover: var(--color-danger-dark);
/* General colors */
--color-shadow: rgba(0, 0, 0, 0.2);
--color-loading-overlay-background: rgba(255, 255, 255, 0.6);
/* Component specific colors */
--color--conceptSearch-result-selected: var(--color-primary-dark);
--color--mappingBrowser-table-match: hsla(var(--color-secondary-light), 0.7);
--color--mappingBrowser-table-match-hover: hsla(var(--color-secondary-light), 0.45);
--color--mappingBrowser-table-editing: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.4);
--color--mappingBrowser-table-editing-hover: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), 0.3);
--color--conceptSearch-result-selected-background: var(--color-background);
--color--conceptSearch-searchHighlight: var(--color-secondary-dark);
--color--conceptSearch-searchHighlight-selected: var(--color-secondary-dark);
--color--itemName-highlighted: var(--color-text-grey);
--color--loadingIndicator-border: var(--color-background);
--color--loadingIndicator-border-top: var(--color-primary);
/* Alert colors */
--color-alert-success: var(--color-text);
}