diginet-core-ui 1.3.24

package/styles/colors.js

@@ -0,0 +1,306 @@
+import { hexToRGBA } from "./color-helper"; //color brand
+
+export const white = '#fff';
+export const brand1 = '#E9EAF0';
+export const brand2 = '#D4D6E2';
+export const brand3 = '#BEC1D3';
+export const brand4 = '#A8ADC4';
+export const brand5 = '#9398B6';
+export const brand6 = '#7D84A7';
+export const brand7 = '#686F99';
+export const brand8 = '#525B8A';
+export const brand9 = '#3C467B';
+export const brand10 = '#27326D';
+export const brand = '#111D5E';
+export const brand11 = '#F5F6F8';
+export const brand12 = '#EBECF2';
+export const brand13 = '#E2E3EB';
+export const brand14 = '#D8DAE4';
+export const brand15 = '#CED0DE';
+export const brand16 = '#C4C7D7';
+export const brand17 = '#BABDD1';
+export const brand18 = '#B0B4CA';
+export const brand19 = '#A7ABC3';
+export const brand20 = '#9DA1BD';
+export const brand21 = '#FAFBFC';
+export const brand22 = '#F6F6F9';
+export const brand23 = '#F2F2F6';
+export const brand24 = '#EDEEF3';
+export const brand25 = '#E9E9F0';
+export const brand26 = '#E4E5ED';
+export const brand27 = '#E0E1EA';
+export const brand28 = '#DBDDE7';
+export const brand29 = '#D7D8E4';
+export const brand30 = '#D2D4E1'; //// blue
+
+export const blue1 = '#E8F3FF';
+export const blue2 = '#D1E7FF';
+export const blue3 = '#B9DBFF';
+export const blue4 = '#A2CFFF';
+export const blue5 = '#8BC3FF';
+export const blue6 = '#74B7FF';
+export const blue7 = '#5DABFF';
+export const blue8 = '#469FFF';
+export const blue9 = '#2E93FF';
+export const blue10 = '#1787FF';
+export const blue = '#3366ff';
+export const blue11 = '#F4FAFF';
+export const blue12 = '#EAF4FF';
+export const blue13 = '#DFEFFF';
+export const blue14 = '#D5E9FF';
+export const blue15 = '#CAE4FF';
+export const blue16 = '#C0DEFF';
+export const blue17 = '#B5D9FF';
+export const blue18 = '#ABD3FF';
+export const blue19 = '#A0CEFF';
+export const blue20 = '#96C8FF'; ///dark
+
+export const dark1 = '#EAEAEC';
+export const dark2 = '#D4D5D9';
+export const dark3 = '#BFC1C7';
+export const dark4 = '#AAACB4';
+export const dark5 = '#9597A1';
+export const dark6 = '#7F828E';
+export const dark7 = '#6A6D7B';
+export const dark8 = '#555868';
+export const dark9 = '#404456';
+export const dark10 = '#2A2F43';
+export const dark = '#151A30';
+export const dark11 = '#F5F6F6';
+export const dark12 = '#ECECEE';
+export const dark13 = '#E2E3E5';
+export const dark14 = '#D8D9DD';
+export const dark15 = '#CFD0D4';
+export const dark16 = '#C5C6CC';
+export const dark17 = '#BCBDC3';
+export const dark18 = '#B2B3BB';
+export const dark19 = '#A8AAB2';
+export const dark20 = '#9FA0AA'; /// Info
+
+export const info1 = '#CCF5FF';
+export const info2 = '#99E6FF';
+export const info3 = '#66D0FF';
+export const info4 = '#3FBAFF';
+export const info5 = '#0095FF';
+export const info6 = '#0073DB';
+export const info7 = '#0056B7';
+export const info8 = '#003C93';
+export const info9 = '#002B7A'; // success
+
+export const success1 = '#C9FCD3';
+export const success2 = '#95F9B2';
+export const success3 = '#5FEE96';
+export const success4 = '#37DE88';
+export const success5 = '#00C875';
+export const success6 = '#00AC75';
+export const success7 = '#009070';
+export const success8 = '#007466';
+export const success9 = '#00605E'; //warning
+
+export const warning1 = '#FFF4CC';
+export const warning2 = '#FFE799';
+export const warning3 = '#FFD666';
+export const warning4 = '#FFC53F';
+export const warning5 = '#FFAA00';
+export const warning6 = '#DB8A00';
+export const warning7 = '#B76D00';
+export const warning8 = '#B76D00';
+export const warning9 = '#7A4000'; //danger
+
+export const danger1 = '#FFDCD8';
+export const danger2 = '#FFB3B1';
+export const danger3 = '#FF8A93';
+export const danger4 = '#FF6D86';
+export const danger5 = '#FF3D71';
+export const danger6 = '#DB2C6C';
+export const danger7 = '#B71E65';
+export const danger8 = '#93135B';
+export const danger9 = '#7A0B54'; //FORMAL
+
+export const formal1 = '#CED7F6';
+export const formal2 = '#A0B0EE';
+export const formal3 = '#697ccE';
+export const formal4 = '#3d4d9e';
+export const formal5 = '#111d5e';
+export const formal6 = '#0c1550';
+export const formal7 = '#080f43';
+export const formal8 = '#050a36';
+export const formal9 = '#03072d';
+export const color = {
+  //color brand
+  white: '#fff',
+  brand1: '#E9EAF0',
+  brand2: '#D4D6E2',
+  brand3: '#BEC1D3',
+  brand4: '#A8ADC4',
+  brand5: '#9398B6',
+  brand6: '#7D84A7',
+  brand7: '#686F99',
+  brand8: '#525B8A',
+  brand9: '#3C467B',
+  brand10: '#27326D',
+  brand: '#111D5E',
+  brand11: '#F5F6F8',
+  brand12: '#EBECF2',
+  brand13: '#E2E3EB',
+  brand14: '#D8DAE4',
+  brand15: '#CED0DE',
+  brand16: '#C4C7D7',
+  brand17: '#BABDD1',
+  brand18: '#B0B4CA',
+  brand19: '#A7ABC3',
+  brand20: '#9DA1BD',
+  brand21: '#FAFBFC',
+  brand22: '#F6F6F9',
+  brand23: '#F2F2F6',
+  brand24: '#EDEEF3',
+  brand25: '#E9E9F0',
+  brand26: '#E4E5ED',
+  brand27: '#E0E1EA',
+  brand28: '#DBDDE7',
+  brand29: '#D7D8E4',
+  brand30: '#D2D4E1',
+  ///dark
+  dark1: '#EAEAEC',
+  dark2: '#D4D5D9',
+  dark3: '#BFC1C7',
+  dark4: '#AAACB4',
+  dark5: '#9597A1',
+  dark6: '#7F828E',
+  dark7: '#6A6D7B',
+  dark8: '#555868',
+  dark9: '#404456',
+  dark10: '#2A2F43',
+  dark: '#151A30',
+  dark11: '#F5F6F6',
+  dark12: '#ECECEE',
+  dark13: '#E2E3E5',
+  dark14: '#D8D9DD',
+  dark15: '#CFD0D4',
+  dark16: '#C5C6CC',
+  dark17: '#BCBDC3',
+  dark18: '#B2B3BB',
+  dark19: '#A8AAB2',
+  dark20: '#9FA0AA',
+  /// Info
+  info1: '#CCF5FF',
+  info2: '#99E6FF',
+  info3: '#66D0FF',
+  info4: '#3FBAFF',
+  info5: '#0095FF',
+  info6: '#0073DB',
+  info7: '#0056B7',
+  info8: '#003C93',
+  info9: '#002B7A',
+  // success
+  success1: '#C9FCD3',
+  success2: '#95F9B2',
+  success3: '#5FEE96',
+  success4: '#37DE88',
+  success5: '#00C875',
+  success6: '#00AC75',
+  success7: '#009070',
+  success8: '#007466',
+  success9: '#00605E',
+  //warning
+  warning1: '#FFF4CC',
+  warning2: '#FFE799',
+  warning3: '#FFD666',
+  warning4: '#FFC53F',
+  warning5: '#FFAA00',
+  warning6: '#DB8A00',
+  warning7: '#B76D00',
+  warning8: '#B76D00',
+  warning9: '#7A4000',
+  //danger
+  danger1: '#FFDCD8',
+  danger2: '#FFB3B1',
+  danger3: '#FF8A93',
+  danger4: '#FF6D86',
+  danger5: '#FF3D71',
+  danger6: '#DB2C6C',
+  danger7: '#B71E65',
+  danger8: '#93135B',
+  danger9: '#7A0B54',
+  //format
+  formal1: '#CED7F6',
+  formal2: '#A0B0EE',
+  formal3: '#697ccE',
+  formal4: '#3d4d9e',
+  formal5: '#111d5e',
+  formal6: '#0c1550',
+  formal7: '#080f43',
+  formal8: '#050a36',
+  formal9: '#03072d',
+  //blue
+  blue: '#3366FF',
+  blue1: '#E8F3FF',
+  blue2: '#D1E7FF',
+  blue3: '#B9DBFF',
+  blue4: '#A2CFFF',
+  blue5: '#8BC3FF',
+  blue6: '#74B7FF',
+  blue7: '#5DABFF',
+  blue8: '#469FFF',
+  blue9: '#2E93FF',
+  blue10: '#1787FF',
+  blue11: '#F4FAFF',
+  blue12: '#EAF4FF',
+  blue13: '#DFEFFF',
+  blue14: '#D5E9FF',
+  blue15: '#CAE4FF',
+  blue16: '#C0DEFF',
+  blue17: '#B5D9FF',
+  blue18: '#ABD3FF',
+  blue19: '#A0CEFF',
+  blue20: '#96C8FF'
+};
+color.semantic = {
+  danger: color.danger5,
+  warning: color.warning5,
+  success: color.success5,
+  info: color.info5
+};
+color.system = {
+  active: color.brand,
+  blue: color.blue,
+  dark: color.dark,
+  white: color.white,
+  rest: color.dark6,
+  disabled: color.dark4
+};
+color.fill = {
+  sidebar: color.white,
+  headerbar: color.brand12,
+  tabbar: color.brand12,
+  "tabbar-active": color.brand,
+  "scrollbar-tabbar": color.brand13,
+  "odd_raw": color.brand21,
+  "even_raw": color.white,
+  hover: color.blue13,
+  pressed: color.blue6,
+  disabled: color.dark12,
+  extrabutton: color.dark11,
+  tooltip: hexToRGBA(color.dark, 0.9),
+  focus: color.blue4,
+  focusshd: hexToRGBA(color.dark, 0.1),
+  headerUI: color.dark13
+};
+color.text = {
+  main: color.dark,
+  sub: color.dark6,
+  normal_label: color.dark8,
+  "hover-active-focus": color.brand,
+  tooltip: color.white
+};
+color.line = {
+  normal: color.dark6,
+  hover: color.brand,
+  focus: color.info5,
+  disabled: color.dark4,
+  system: color.dark5,
+  "grid_wo_header": color.dark,
+  "grid_w_header": color.white,
+  category: color.dark2,
+  tab: color.dark2
+};

package/styles/general.js

@@ -0,0 +1,48 @@
+import { css, jsx } from '@emotion/core';
+import { color } from "./colors";
+import { parseToPixel } from "./utils";
+export const spacing = {
+  none: 0,
+  xxsmall: 4,
+  xsmall: 8,
+  small: 12,
+  medium: 20,
+  gutter: 24,
+  large: 32,
+  xlarge: 48,
+  xxlarge: 96
+};
+export const margin = {
+  none: 0,
+  xxsmall: 4,
+  xsmall: 8,
+  small: 12,
+  medium: 20,
+  gutter: 24,
+  large: 32,
+  xlarge: 48,
+  xxlarge: 96
+};
+export const fontSizes = {
+  xsmall: '0.79rem',
+  small: '0.889rem',
+  medium: '1rem',
+  large: '1.125rem',
+  xlarge: '1.266rem',
+  xxlarge: '1.424rem'
+};
+export const flexRow = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
+export const flexCol = css`
+  display: flex;
+  flex-direction: column;
+`;
+export const noMargin = css`
+  margin: 0 !important;
+`;
+export const border = (withVl, colorVl) => css`
+  border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
+`;

package/styles/media-queries.js

@@ -0,0 +1,10 @@
+const breakpoints = {
+  "xs": 0,
+  "sm": 576,
+  "md": 768,
+  "lg": 992,
+  "xl": 1200,
+  "xxl": 1400
+};
+
+const mq = n => `@media (min-width: ${breakpoints[n]}px)`;

package/styles/typography.js

@@ -0,0 +1,122 @@
+import { css } from '@emotion/core';
+import { parseToPixel } from "./utils";
+export const fontFamily = `"SF Pro Display Regular", sans-serif`;
+export const fontFamilyLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Regular.otf';
+export const fontFamilyMedium = `"SF Pro Display Medium", sans-serif`;
+export const fontFamilyMediumLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Medium.otf';
+export const fontFamilyBold = `"SF Pro Display Bold", sans-serif`;
+export const fontFamilyBoldLink = 'https://core.diginet.com.vn/theme/default/fonts/SF-Pro-Display/SF-Pro-Display-Bold.otf';
+export const fontSize = '16px';
+const fontNormal = css`
+  font-style: normal;
+`;
+const fontWeightBold = css`
+  font-weight: 700;
+`;
+const fontWeightRegular = css`
+  font-weight: 500;
+`;
+const fontWeightNormal = css`
+  font-weight: normal;
+`;
+
+const getFontSize = size => css`
+  font-size: ${parseToPixel(size)};
+  line-height: ${parseToPixel(size + 4)};
+`;
+
+const title1 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(32)};
+`;
+const title2 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(26)};
+`;
+const title3 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(24)};
+`;
+const title4 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(22)};
+`;
+const heading1 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(20)};
+`;
+const heading2 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(18)};
+`;
+const heading3 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  font-size: 16px;
+  line-height: 20px;
+`;
+const heading4 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(14)};
+`;
+const heading5 = css`
+  ${fontNormal};
+  ${fontWeightBold};
+  ${getFontSize(12)};
+`;
+const heading6 = css`
+  ${fontNormal};
+  ${fontWeightRegular}
+  ${getFontSize(12)};
+`;
+const paragraph1 = css`
+  ${fontNormal};
+  ${fontWeightNormal};
+  ${getFontSize(16)};
+`;
+const paragraph2 = css`
+  ${fontNormal};
+  ${fontWeightNormal};
+  ${getFontSize(14)};
+`;
+const paragraph3 = css`
+  ${fontNormal};
+  ${fontWeightNormal};
+  ${getFontSize(12)};
+`;
+const uppercase = css`
+  textTransform: uppercase
+`;
+const label = css`
+  font-size: 12px;
+  ${fontWeightBold};
+`;
+const helperText = css`
+  font-size: 12px;
+  ${fontWeightNormal}
+`;
+export const typography = {
+  title1,
+  title2,
+  title3,
+  title4,
+  heading1,
+  heading2,
+  heading3,
+  heading4,
+  heading5,
+  heading6,
+  paragraph1,
+  paragraph2,
+  paragraph3,
+  uppercase,
+  label,
+  helperText
+};