More modular approach
[clamp.git] / ui-react / src / theme / globalStyle.js
1 /*-
2  * ============LICENSE_START=======================================================
3  * ONAP CLAMP
4  * ================================================================================
5  * Copyright (C) 2019 AT&T Intellectual Property. All rights
6  *                             reserved.
7  * ================================================================================
8  * Licensed under the Apache License, Version 2.0 (the "License");
9  * you may not use this file except in compliance with the License.
10  * You may obtain a copy of the License at
11  *
12  * http://www.apache.org/licenses/LICENSE-2.0
13  *
14  * Unless required by applicable law or agreed to in writing, software
15  * distributed under the License is distributed on an "AS IS" BASIS,
16  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
17  * See the License for the specific language governing permissions and
18  * limitations under the License.
19  * ============LICENSE_END============================================
20  * ===================================================================
21  *
22  */
23
24 import { createGlobalStyle } from 'styled-components';
25
26 export const GlobalClampStyle = createGlobalStyle`
27   body {
28     padding: 0;
29     margin: 0;
30     font-family: ${props => props.theme.fontFamily};
31     font-size: ${props => props.theme.fontSize};
32     font-weight: normal;
33     color: ${props => props.theme.fontNormal};
34     background-color: ${props => props.theme.backgroundColor};
35   }
36
37  span {
38         font-family: ${props => props.theme.fontFamily};
39     font-size: ${props => props.theme.fontSize};
40     font-weight: bold;
41     color: ${props => props.theme.fontNormal};
42     background-color: ${props => props.theme.backgroundColor};
43   }
44   
45   a {
46         font-family: ${props => props.theme.fontFamily};
47     font-size: ${props => props.theme.fontSize};
48     font-weight: bold;
49     color: ${props => props.theme.fontNormal};
50     background-color: ${props => props.theme.backgroundColor};
51
52   }
53   
54   div {
55         font-family: ${props => props.theme.fontFamily};
56     font-size: ${props => props.theme.fontSize};
57         border-radius: 4px;
58         color: ${props => props.theme.fontNormal};
59     background-color: ${props => (props.theme.backgroundColor)};
60   }
61 `
62
63 export const DefaultClampTheme = {
64         fontDanger: '#eb238e',
65         fontWarning: '#eb238e',
66         fontLight: '#ffffff',
67         fontDark: '#888888',
68         fontHighlight: '#ffff00',
69         fontNormal: 'black',
70         
71         backgroundColor: '#eeeeee',
72         fontFamily: 'Arial, Sans-serif',
73         fontSize: '15px',
74         
75         loopViewerBackgroundColor: 'white',
76         loopViewerFontColor: 'yellow',
77         loopViewerHeaderBackgroundColor: '#337ab7',
78         loopViewerHeaderFontColor: 'white',
79 };