-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathcss-variables.css
More file actions
191 lines (190 loc) · 7.71 KB
/
Copy pathcss-variables.css
File metadata and controls
191 lines (190 loc) · 7.71 KB
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
:root {
color-scheme: light dark;
--navbar-height: 36px;
--toolbar-height: 48px;
--mobile-toolbar-height: 57px;
--external-header-height: 24px;
--search-header-height: 56px;
--sidebar-width: 192px;
--rightbar-width: 192px;
--login-background-color: var(--brand-primary-500);
--login-inner-background-color: light-dark(#ffffff, #000000);
--gray-base: light-dark(#000000, #f2f2f2);
--gray-darkest: light-dark(#262626, #d9d9d9);
--gray-darker: light-dark(#4d4d4d, #999999);
--gray-dark: light-dark(#666666, #777777);
--gray: light-dark(#777777, #666666);
--gray-light: light-dark(#999999, #4d4d4d);
--gray-lighter: light-dark(#d9d9d9, #262626);
--gray-lightest: light-dark(#f2f2f2, #191919);
/* Stable colors which will not changed in dark mode */
--gray-base-stable: #000000;
--gray-darkest-stable: #262626;
--gray-darker-stable: #4d4d4d;
--gray-dark-stable: #666666;
--gray-stable: #777777;
--gray-light-stable: #999999;
--gray-lighter-stable: #d9d9d9;
--gray-lightest-stable: #f2f2f2;
--black-bg: #000000;
--white-bg: #ffffff;
--surface-color: #f5f8fc;
--surface-bg: light-dark(var(--surface-color), var(--gray-lighter));
--gray-placeholder: var(--gray-dark);
--warm-gray: var(--gray-light);
--off-white: #fafafa;
--translucent-black: rgba(0, 0, 0, 0.6);
--translucent-white: rgba(255, 255, 255, 0.6);
--overlay-bg: light-dark(var(--translucent-black), var(--translucent-white));
--branding-font-family: "Roboto", Helvetica, Arial, sans-serif;
--branding-font-family-regular: "Roboto", Helvetica, Arial, sans-serif;
--branding-font-family-medium: "Roboto", Helvetica, Arial, sans-serif;
--branding-font-family-bold: "Roboto", Helvetica, Arial, sans-serif;
--branding-font-family-medium-italic: "Roboto", Helvetica, Arial, sans-serif;
--color-light-positive: #00bd02;
--color-light-negative: #ff1f1f;
--body-bg: light-dark(#ffffff, #000000);
--text-color: light-dark(var(--gray-darker), var(--gray-darkest));
--text-color-white: #ffffff;
--text-color-black: #000000;
--dialog-title-fg: var(--gray-base);
--dialog-bg: light-dark(#ffffff, #1A1A1A);
--background-gray: var(--gray-lightest);
--link-color: light-dark(var(--brand-primary-600), var(--brand-primary-400));
--link-hover-color: light-dark(var(--brand-primary-800), var(--brand-primary-200));
--link-hover-decoration: underline;
--item-hover-bg: #ffffff;
--item-selected-bg: var(--brand-primary-100);
--border-color: light-dark(var(--gray-lighter), var(--gray));
--hr-border: light-dark(var(--gray-lighter), var(--gray));
--input-border-color: var(--gray-light);
--placeholder-color: var(--gray-dark);
--app-menu-active-color: var(--text-color-white);
--app-menu-active-background-color: var(--brand-primary-500);
--list-active-bg: light-dark(var(--brand-primary-50), var(--brand-primary-900));
--list-hover-bg: var(--gray-lightest);
--folder-item-hover-bg: var(--list-hover-bg);
--sidebar-bg-color: var(--body-bg);
--sidebar-header-bg-color: var(--body-bg);
--sidebar-shaded-color: var(--border-color);
--rightbar-bg-color: var(--gray-lightest);
--read-pane-toolbar-color: var(--gray-lightest);
--read-pane-bg-color: var(--gray-lightest);
--file-type-doc: #0f73ff;
--file-type-ppt: #ff9937;
--file-type-pdf: #ff4c4e;
--file-type-xls: #0e9d58;
--file-type-zip: #ada293;
--file-type-default: #949cae;
--file-type-media: #bc0e67;
--file-type-code: #00b4ca;
--toast-success-color: var(--brand-success-500);
--toast-failure-color: var(--brand-danger-500);
--toast-warning-color: var(--brand-warning-500);
--font-family-sans-serif: "Roboto", Helvetica, Arial, sans-serif;
--font-family-serif: Georgia, "Times New Roman", Times, serif;
--font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
--font-family-base: "Roboto", Helvetica, Arial, sans-serif;
--font-brand-primary: inherit;
--font-family-primary: inherit;
--font-family-secondary: inherit;
--font-family-plainText: monospace;
--font-size-dialog-title: 20px;
--font-size-secondary: 13px;
--font-size-caption: 11px;
--font-size-base: 14px;
--font-size-med: calc(var(--font-size-base) * 1.15); /*~16px*/
--font-size-large: calc(var(--font-size-base) * 1.25); /*~18px*/
--font-size-small: calc(var(--font-size-base) * 0.85); /*~12px*/
--font-size-h1: calc(var(--font-size-base) * 2.6); /* ~36px */
--font-size-h2: calc(var(--font-size-base) * 2.15); /* ~30px */
--font-size-h3: calc(var(--font-size-base) * 1.7); /* ~24px */
--font-size-h4: calc(var(--font-size-base) * 1.25); /* ~18px */
--font-size-h5: var(--font-size-base);
--font-size-h6: calc(var(--font-size-base) * 0.85); /* ~12px */
--line-height-base: 1.42857143;
--line-height-computed: calc(var(--font-size-base) * var(--line-height-base)); /* ~20px */
--headings-font-family: inherit;
--headings-font-weight: 300;
--headings-line-height: 1.1;
--headings-color: inherit;
--headings-small-color: var(--gray-light);
--spacing-base: 8px;
--spacing-xs: calc(var(--spacing-base) / 2);
--spacing-sm: var(--spacing-base);
--spacing-md: calc(var(--spacing-base) * 2);
--spacing-lg: calc(var(--spacing-base) * 3);
--spacing-xl: calc(var(--spacing-base) * 4);
--radius-base: 4px;
--radius-xs: var(--radius-base);
--radius-sm: calc(var(--radius-base) * 2);
--radius-md: calc(var(--radius-base) * 3);
--radius-lg: calc(var(--radius-base) * 4);
--radius-xl: calc(var(--radius-base) * 5);
--icon-size-xs: 12px;
--icon-size-sm: 16px;
--icon-size-smd: 20px;
--icon-size-md: 24px;
--icon-size-lg: 32px;
--icon-size-xl: 40px;
--logo-height: 32px;
--logo-max-width: 200px;
--header-bg: light-dark(var(--white-bg), #1A1A1A);
--header-fg: light-dark(var(--gray-darker), var(--gray-darkest));
--header-actions-fg: light-dark(var(--gray-darker), var(--gray-darkest));
--external-header-bg: var(--brand-primary-700);
--external-header-fg: #ffffff;
--search-highlighter: #fff100;
--row-height-narrow: 72px;
--row-height-narrow-relaxed: 80px;
--row-height-narrow-regular: var(--row-height-narrow);
--row-height-narrow-slim: 56px;
--row-height-wide-relaxed: 44px;
--row-height-wide-regular: 32px;
--row-height-wide-slim: 24px;
--tag-secondary-font-color: #ffffff;
--popover-row-border-color: var(--border-color);
--warning-banner-bg: light-dark(var(--brand-warning-50), var(--brand-warning-200));
--drop-zone-bg: light-dark(rgba(215, 243, 255, 0.9), rgba(0, 55, 79, 0.9));
--drop-zone-border-color: light-dark(rgba(0, 118, 168, 0.9), rgba(128, 187, 212, 0.9));
--drop-zone-text-color: light-dark(#00648f, #80bbd4);
--secondary-scrollbar: light-dark(#d1d1d1, #4d4d4d) light-dark(#d1d1d1, #4D4D4D);
--color-navy: #1E3A8A;
--color-amber: #B45309;
--color-teal: #0F766E;
--tag-color-blue: #3C82F6;
--tag-color-cyan: #048080;
--tag-color-green: #248723;
--tag-color-purple: #6F3C96;
--tag-color-red: #DC2625;
--tag-color-yellow: #FBAF19;
--tag-color-pink: #DD0B73;
--tag-color-gray: #758083;
--tag-color-orange: #FF7015;
--tag-color-navy: var(--color-navy);
--tag-color-amber: var(--color-amber);
--tag-color-teal: var(--color-teal);
--calendar-color-blue: #d2def8;
--calendar-color-cyan: #d2eff3;
--calendar-color-green: #d6f0cf;
--calendar-color-purple: #e4d8ee;
--calendar-color-red: #fcc3be;
--calendar-color-yellow: #fdf8b1;
--calendar-color-pink: #ffd7df;
--calendar-color-gray: #e5e5e5;
--calendar-color-orange: #fcdbb3;
--avatar-color-navy: var(--color-navy);
--avatar-color-violet: #5B21B6;
--avatar-color-teal: var(--color-teal);
--avatar-color-forest: #166534;
--avatar-color-emerald: #065F46;
--avatar-color-rust: #C2410C;
--avatar-color-amber: var(--color-amber);
--avatar-color-crimson: #991B1B;
--avatar-color-rose: #9F1239;
--avatar-color-indigo: #3730A3;
--avatar-color-coffee: #4E342E;
--avatar-color-slate: #334155;
--primary-light-border: light-dark(var(--brand-primary-100), var(--input-border-color));
--flag-color: #CD1D1D
}