dhis2 · edoardo · Jul 29, 2019 · Jun 26, 2019 · Jul 2, 2019 · Jul 2, 2019
diff --git a/packages/app/config/webpack.config.dev.js b/packages/app/config/webpack.config.dev.js
@@ -167,6 +167,13 @@ module.exports = {
                         },
                     },
                     // Process JS with Babel.
+                    {
+                        test: /@dhis2\/.*\.(js|jsx|mjs)$/,
+                        loader: require.resolve('babel-loader'),
+                        options: {
+                            cacheDirectory: true,
+                        },
+                    },
                     {
                         test: /\.(js|jsx|mjs)$/,
                         include: paths.appSrc,

diff --git a/packages/app/config/webpack.config.prod.js b/packages/app/config/webpack.config.prod.js
@@ -157,6 +157,13 @@ module.exports = {
                         },
                     },
                     // Process JS with Babel.
+                    {
+                        test: /@dhis2\/.*\.(js|jsx|mjs)$/,
+                        loader: require.resolve('babel-loader'),
+                        options: {
+                            cacheDirectory: true,
+                        },
+                    },
                     {
                         test: /\.(js|jsx|mjs)$/,
                         include: paths.appSrc,

diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2019-06-11T12:01:09.869Z\n"
-"PO-Revision-Date: 2019-06-11T12:01:09.869Z\n"
+"POT-Creation-Date: 2019-07-02T11:48:24.367Z\n"
+"PO-Revision-Date: 2019-07-02T11:48:24.367Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -316,6 +316,9 @@ msgstr ""
 msgid "Year over year (column)"
 msgstr ""
 
+msgid "Open as Map"
+msgstr ""
+
 msgid "Reporting rate"
 msgstr ""
 

diff --git a/packages/app/package.json b/packages/app/package.json
@@ -32,6 +32,7 @@
         "@dhis2/d2-ui-interpretations": "6.1.0",
         "@dhis2/data-visualizer-plugin": "33.0.3",
         "@dhis2/ui": "^1.0.0-beta.11",
+        "@dhis2/ui-core": "^3.4.0",
         "@material-ui/core": "^3.1.2",
         "@material-ui/icons": "^3.0.1",
         "autoprefixer": "9.1.3",

diff --git a/packages/app/src/components/AxisSetup/styles/AxisSetup.style.js b/packages/app/src/components/AxisSetup/styles/AxisSetup.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     tableContainer: {
@@ -11,11 +11,11 @@ export default {
         width: '10%',
     },
     coloredColumn: {
-        backgroundColor: colors.lightGrey,
+        backgroundColor: colors.grey100,
     },
     tableCell: {
         padding: '4px 24px',
-        borderBottom: `1px solid ${colors.greyLight}`,
+        borderBottom: `1px solid ${colors.grey300}`,
     },
     head: {
         borderBottom: 'none',

diff --git a/...p/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/styles/DropDownButton.style.js b/...p/src/components/DimensionsPanel/Dialogs/AddToLayoutButton/styles/DropDownButton.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     arrowDown: {

diff --git a/packages/app/src/components/DimensionsPanel/styles/DimensionsPanel.style.js b/packages/app/src/components/DimensionsPanel/styles/DimensionsPanel.style.js
@@ -1,11 +1,11 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export const styles = {
     divContainer: {
         height: '100%',
         display: 'flex',
         flexDirection: 'column',
-        backgroundColor: colors.snow,
+        backgroundColor: colors.grey050,
         padding: '8px 0 2px 8px',
     },
     textField: {

diff --git a/packages/app/src/components/ErrorBoundaries/styles/FatalErrorBoundary.style.js b/packages/app/src/components/ErrorBoundaries/styles/FatalErrorBoundary.style.js
@@ -1,7 +1,9 @@
-const bgColor = '#F4F6F8',
-    iconColor = '#B0BEC5',
-    primaryTextColor = '#000000',
-    secondaryTextColor = '#494949';
+import { colors } from '@dhis2/ui-core';
+
+const bgColor = colors.grey050,
+    iconColor = colors.grey500,
+    primaryTextColor = colors.black,
+    secondaryTextColor = colors.grey700;
 
 export default {
     mask: {

diff --git a/packages/app/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js b/packages/app/src/components/Layout/DefaultLayout/styles/DefaultAxis.style.js
@@ -1,4 +1,5 @@
-import { colors } from '../../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
+
 import defaultLayoutStyle from './DefaultLayout.style';
 import * as layoutStyle from '../../styles/style';
 
@@ -19,7 +20,7 @@ export default {
         maxWidth: 55,
         padding: '2px 0px 0px 0px',
         fontSize: 11,
-        color: colors.greyDark,
+        color: colors.grey700,
         userSelect: 'none',
         letterSpacing: '0.2px',
     },

diff --git a/packages/app/src/components/Layout/styles/Chip.style.js b/packages/app/src/components/Layout/styles/Chip.style.js
@@ -1,4 +1,5 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
+
 import * as layoutStyle from './style';
 
 export const styles = {
@@ -20,7 +21,7 @@ export const styles = {
         textOverflow: 'ellipsis',
     },
     chipEmpty: {
-        backgroundColor: colors.greyLight,
+        backgroundColor: colors.grey300,
     },
     fixedDimensionIcon: {
         paddingRight: '6px',

diff --git a/packages/app/src/components/Layout/styles/Menu.style.js b/packages/app/src/components/Layout/styles/Menu.style.js
@@ -1,9 +1,11 @@
+import { colors } from '@dhis2/ui-core';
+
 export const styles = {
     icon: {
         width: 22,
         height: 22,
         background: 'none',
-        color: '#000',
+        color: colors.black,
         padding: 0,
     },
 };
diff --git a/packages/app/src/components/Layout/styles/Tooltip.style.js b/packages/app/src/components/Layout/styles/Tooltip.style.js
@@ -1,12 +1,12 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export const styles = {
     tooltip: {
         fontFamily: 'roboto',
         padding: '7px 9px',
         color: colors.white,
         fontSize: '12px',
-        backgroundColor: '#4a4a4a',
+        backgroundColor: colors.grey900,
         boxShadow: 'none',
         borderRadius: '3px',
         position: 'relative',

diff --git a/packages/app/src/components/Layout/styles/style.js b/packages/app/src/components/Layout/styles/style.js
@@ -1,23 +1,21 @@
-import { colors } from '../../../modules/colors';
+import { colors, theme } from '@dhis2/ui-core';
 
 // Layout
 export const LAYOUT_HEIGHT = '78px';
 
 // Axis
 export const AXIS_PADDING = '4px 4px 2px 6px';
 export const AXIS_LABEL_PADDING = '2px 0px 0px 4px';
-export const AXIS_BORDER_COLOR = colors.greyLight;
+export const AXIS_BORDER_COLOR = colors.grey300;
 export const AXIS_BORDER_STYLE = 'solid';
 export const AXIS_BORDER_WIDTH = '0px 0px 1px 1px';
 export const AXIS_BACKGROUND_COLOR = colors.white;
 
 // Chip
-export const CHIP_COLOR = colors.black;
+export const CHIP_COLOR = colors.grey900;
 export const CHIP_FONT_WEIGHT = 400;
 export const CHIP_FONT_SIZE = '14px';
-export const CHIP_BACKGROUND_COLOR = colors.accentSecondaryLightest;
-export const CHIP_BACKGROUND_COLOR_HOVER = colors.lightBlueHover;
-export const CHIP_BACKGROUND_COLOR_ACTIVE = colors.lightBlueActive;
+export const CHIP_BACKGROUND_COLOR = theme.secondary200;
 export const CHIP_HEIGHT = '14px';
 export const CHIP_MARGIN = '4px';
 export const CHIP_PADDING = '1px 6px';

diff --git a/packages/app/src/components/MenuBar/styles/MenuBar.style.js b/packages/app/src/components/MenuBar/styles/MenuBar.style.js
@@ -1,6 +1,8 @@
+import { colors } from '@dhis2/ui-core';
+
 export default theme => ({
     menuBar: {
-        background: '#fff',
+        background: colors.white,
         display: 'flex',
         alignItems: 'center',
         padding: `0 ${theme.spacing.unit}px`,

diff --git a/packages/app/src/components/Snackbar/styles/Snackbar.style.js b/packages/app/src/components/Snackbar/styles/Snackbar.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default theme => ({
     container: {
@@ -15,11 +15,11 @@ export default theme => ({
         cursor: 'pointer',
     },
     warning: {
-        backgroundColor: '#FFCA28',
+        backgroundColor: colors.yellow500,
         color: colors.black,
     },
     error: {
-        backgroundColor: '#D32F2F',
+        backgroundColor: colors.red500,
         color: colors.white,
     },
 });
diff --git a/packages/app/src/components/TitleBar/styles/TitleBar.style.js b/packages/app/src/components/TitleBar/styles/TitleBar.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     titleBar: {
@@ -8,7 +8,7 @@ export default {
     cell: {
         display: 'flex',
         alignItems: 'center',
-        background: '#fff',
+        background: colors.white,
         padding: '6px',
         borderRadius: '5px',
         margin: '4px',
@@ -21,7 +21,7 @@ export default {
     },
     interpretation: {
         fontSize: '12px',
-        color: colors.greyDark,
+        color: colors.grey700,
     },
     interpretationIcon: {
         display: 'flex',
@@ -31,10 +31,10 @@ export default {
         marginRight: '3px',
     },
     titleUnsaved: {
-        color: colors.grey,
+        color: colors.grey500,
         fontStyle: 'italic',
     },
     titleDirty: {
-        color: colors.greyDark,
+        color: colors.grey700,
     },
 };
diff --git a/packages/app/src/components/UpdateButton/styles/UpdateButton.style.js b/packages/app/src/components/UpdateButton/styles/UpdateButton.style.js
@@ -1,8 +1,8 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     flat: {
-        backgroundColor: colors.accentPrimary,
+        backgroundColor: colors.primary600,
         color: colors.white,
         fontSize: '13px',
         padding: '6px 15px',

diff --git a/packages/app/src/components/Visualization/styles/BlankCanvas.style.js b/packages/app/src/components/Visualization/styles/BlankCanvas.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 const error = {
     fontWeight: 'bold',
@@ -21,10 +21,10 @@ export default {
     },
     title: {
         ...error,
-        color: colors.greyDark,
+        color: colors.grey700,
     },
     description: {
         ...error,
-        color: colors.grey,
+        color: colors.grey500,
     },
 };
diff --git a/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js b/packages/app/src/components/VisualizationOptions/styles/VisualizationOptions.style.js
@@ -1,11 +1,13 @@
+import { colors } from '@dhis2/ui-core';
+
 export default {
     dialogContent: {
         flex: '1 1 550px',
     },
     tabsBar: {
         height: '48px',
-        backgroundColor: '#FFFFFF',
-        borderBottom: '1px solid #E0E0E0',
+        backgroundColor: colors.white,
+        borderBottom: `1px solid ${colors.grey300}`,
     },
     tab: {
         width: '33.33%',

diff --git a/...es/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.style.js b/...es/app/src/components/VisualizationTypeSelector/styles/VisualizationTypeSelector.style.js
@@ -1,4 +1,4 @@
-import { colors } from '../../../modules/colors';
+import { colors } from '@dhis2/ui-core';
 
 export default {
     button: {
@@ -20,7 +20,7 @@ export default {
     menuDivider: {
         border: 'none',
         borderBottom: '1px solid',
-        borderColor: colors.greyLight,
+        borderColor: colors.grey300,
     },
     menuItem: {
         height: 120,

diff --git a/packages/app/src/modules/chartTypes.js b/packages/app/src/modules/chartTypes.js
@@ -26,7 +26,7 @@ export const chartTypeDisplayNames = {
     [GAUGE]: i18n.t('Gauge'),
     [YEAR_OVER_YEAR_LINE]: i18n.t('Year over year (line)'),
     [YEAR_OVER_YEAR_COLUMN]: i18n.t('Year over year (column)'),
-    [OPEN_AS_MAP]: i18n.t('Open as: Map'),
+    [OPEN_AS_MAP]: i18n.t('Open as Map'), // TODO Open as: Map when i18next nsSeparator fixed
 };
 
 const stackedTypes = [STACKED_COLUMN, STACKED_BAR, AREA];

diff --git a/packages/app/src/modules/colors.js b/packages/app/src/modules/colors.js