groundfloor-react-ui 1.0.0

package/components/constants/defaultThemeColor.js

@@ -0,0 +1,15 @@
+import { primaryColor, uiColor, neutralColor, shadeColor, graphColor } from "./colors";
+
+const defaultThemeColor = {
+    primary: { ...primaryColor },
+    ui: { ...uiColor },
+    neutral: { ...neutralColor },
+    shade: { ...shadeColor },
+    graph: { ...graphColor },
+    variant: { ...primaryColor, ...uiColor, ...neutralColor, ...shadeColor, ...graphColor },
+    textColor: primaryColor['primary-2'],
+    bgColor: '#FFFFFF', /**background color */
+    black: '#000000'
+};
+
+export default defaultThemeColor;

package/components/constants/index.js

@@ -0,0 +1,7 @@
+export * from './colors'
+export * from './defaultStyle'
+export * from './defaultThemeColor'
+export * from './utils'
+
+
+

package/components/constants/utils.js

@@ -0,0 +1,31 @@
+const getDefaultStyles = (theme, type) => {
+    if (theme) {
+        let tempObj = {};
+        if (theme[type]) {
+            for (const property in theme[type]) {
+                tempObj[property] = theme[type][property]
+                delete theme.common[property]
+            }
+            for (const property in theme['common']) {
+                tempObj[property] = theme['common'][property]
+            }
+        }
+        return tempObj;
+    }
+}
+
+export function hexToRGB(hex, alpha) {
+    var r = parseInt(hex.slice(1, 3), 16),
+        g = parseInt(hex.slice(3, 5), 16),
+        b = parseInt(hex.slice(5, 7), 16);
+
+    if (alpha) {
+        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
+    } else {
+        return "rgb(" + r + ", " + g + ", " + b + ")";
+    }
+}
+
+hexToRGB('#FF0000', 0.5);
+
+export default getDefaultStyles;

package/components/global/FontStyle.js

@@ -0,0 +1,131 @@
+import { createGlobalStyle } from 'styled-components';
+
+import AvertaExtraThin from '../../assets/fonts/Averta/Averta-ExtraThin.woff2';
+import AvertaThin from '../../assets/fonts/Averta/Averta-Thin.woff2';
+import AvertaLight from '../../assets/fonts/Averta/Averta-Light.woff2';
+import AvertaRegular from '../../assets/fonts/Averta/Averta-Regular.woff2';
+import AvertaSemiBold from '../../assets/fonts/Averta/Averta-SemiBold.woff2';
+import AvertaBold from '../../assets/fonts/Averta/Averta-Bold.woff2';
+import AvertaExtraBold from '../../assets/fonts/Averta/Averta-ExtraBold.woff2';
+import AvertaBlack from '../../assets/fonts/Averta/Averta-Black.woff2';
+import AvertaExtraThinItalic from '../../assets/fonts/Averta/Averta-ExtraThinItalic.woff2';
+import AvertaThinItalic from '../../assets/fonts/Averta/Averta-ThinItalic.woff2';
+import AvertaLightItalic from '../../assets/fonts/Averta/Averta-LightItalic.woff2';
+import AvertaRegularItalic from '../../assets/fonts/Averta/Averta-RegularItalic.woff2';
+import AvertaSemiBoldItalic from '../../assets/fonts/Averta/Averta-SemiBoldItalic.woff2';
+import AvertaBoldItalic from '../../assets/fonts/Averta/Averta-BoldItalic.woff2';
+import AvertaExtraBoldItalic from '../../assets/fonts/Averta/Averta-ExtraBoldItalic.woff2';
+import AvertaBlackItalic from '../../assets/fonts/Averta/Averta-BlackItalic.woff2';
+import BeautyDemo from '../../assets/fonts/Beauty/BeautyDemo.woff';
+
+const GlobalFontStyle = createGlobalStyle`
+    @font-face {
+        font-family: "Averta";
+        font-weight: 100;
+        font-style: normal;
+        src: url(${AvertaExtraThin}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 200;
+        font-style: normal;
+        src: url(${AvertaThin}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 300;
+        font-style: normal;
+        src: url(${AvertaLight}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 400;
+        font-style: normal;
+        src: url(${AvertaRegular}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 600;
+        font-style: normal;
+        src: url(${AvertaSemiBold}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 700;
+        font-style: normal;
+        src: url(${AvertaBold}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 800;
+        font-style: normal;
+        src: url(${AvertaExtraBold}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 900;
+        font-style: normal;
+        src: url(${AvertaBlack}) format("woff2");
+    }
+
+    @font-face {
+        font-family: "Averta";
+        font-weight: 100;
+        font-style: italic;
+        src: url(${AvertaExtraThinItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 200;
+        font-style: italic;
+        src: url(${AvertaThinItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 300;
+        font-style: italic;
+        src: url(${AvertaLightItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 400;
+        font-style: italic;
+        src: url(${AvertaRegularItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 600;
+        font-style: italic;
+        src: url(${AvertaSemiBoldItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 700;
+        font-style: italic;
+        src: url(${AvertaBoldItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 800;
+        font-style: italic;
+        src: url(${AvertaExtraBoldItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Averta";
+        font-weight: 900;
+        font-style: italic;
+        src: url(${AvertaBlackItalic}) format("woff2");
+    }
+    @font-face {
+        font-family: "Beauty";
+        font-weight: normal;
+        font-style: normal;
+        src: url(${BeautyDemo}) format("woff");
+    }
+
+    * {
+        font-family: "Averta";
+    }
+`;
+
+export default GlobalFontStyle;

package/components/global/index.js

@@ -0,0 +1 @@
+export * from "./FontStyle";