diginet-core-ui 1.4.39 → 1.4.40

package/src/styles/colors.js

@@ -0,0 +1,504 @@
+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 blue = '#007BFF';
+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 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';
+export const blue21 = '#0272EB';
+export const blue22 = '#0369D9';
+export const blue23 = '#0560C6';
+export const blue24 = '#0758B3';
+export const blue25 = '#094FA1';
+export const blue26 = '#0B468E';
+export const blue27 = '#0D3D7C';
+export const blue28 = '#0F3569';
+export const blue29 = '#112C56';
+export const blue30 = '#132344';
+///dark
+
+export const dark = '#151A30';
+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 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';
+export const dark21 = '#757885';
+export const dark22 = '#6B6E7C';
+export const dark23 = '#626574';
+export const dark24 = '#585C6B';
+export const dark25 = '#4F5363';
+export const dark26 = '#45495A';
+export const dark27 = '#3B4052';
+export const dark28 = '#323649';
+export const dark29 = '#282D41';
+export const dark30 = '#1F2439';
+
+/// 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 = '#935300';
+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';
+
+let 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',
+    dark21: '#757885',
+    dark22: '#6B6E7C',
+    dark23: '#626574',
+    dark24: '#585C6B',
+    dark25: '#4F5363',
+    dark26: '#45495A',
+    dark27: '#3B4052',
+    dark28: '#323649',
+    dark29: '#282D41',
+    dark30: '#1F2439',
+
+    /// 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: '#935300',
+    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: '#007BFF',
+    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',
+    blue21: '#0272EB',
+    blue22: '#0369D9',
+    blue23: '#0560C6',
+    blue24: '#0758B3',
+    blue25: '#094FA1',
+    blue26: '#0B468E',
+    blue27: '#0D3D7C',
+    blue28: '#0F3569',
+    blue29: '#112C56',
+    blue30: '#132344',
+
+    //aqua
+    aqua5: '#00C4DF',
+
+    //pistachio
+    pistachio5: '#94C800',
+
+    //pumpkin
+    pumpkin5: '#FF7612',
+
+    //magenta
+    magenta5: '#DA30B4',
+
+    //violet
+    violet5: '#A430FF',
+};
+
+//* ----------------- Start Mode Light ----------------- >
+const lightMode = {};
+
+lightMode.semantic = {
+    danger: color.danger5,
+    warning: color.warning5,
+    success: color.success5,
+    info: color.info5,
+};
+
+lightMode.system = {
+    active: color.brand,
+    blue: color.blue,
+    rest: color.dark6,
+    disabled: color.dark4,
+
+    standard: color.white,
+    'on-standard': color.dark,
+
+    //old
+    dark: color.dark,
+    white: color.white,
+};
+
+lightMode.fill = {
+    surface: color.white,
+    headerbar: color.brand22,
+    scrollbar_rest: color.brand13,
+    scrollbar_hover: color.brand15,
+    scrollbar_pressed: color.brand15,
+    'odd-field': color.brand21,
+    'even-field': color.white,
+    hover: color.blue13,
+    pressed: color.blue19,
+    disabled: color.dark12,
+    background: color.dark11,
+    tooltip: hexToRGBA(color.dark, 0.9),
+    focus: color.blue16,
+    focusshd: hexToRGBA(color.dark, 0.1),
+    headerUI: color.dark13,
+    'header-datagrid': color.brand1,
+
+    //old
+    tabbar: color.brand12,
+    sidebar: color.white,
+    'scrollbar-tabbar': color.brand13,
+    odd_raw: color.brand21,
+    even_raw: color.white,
+    extrabutton: color.dark11,
+};
+
+lightMode.text = {
+    main: color.dark,
+    sub: color.dark6,
+    label: color.dark8,
+    focus: color.brand,
+    tooltip: color.white,
+
+    //old
+    normal_label: color.dark8,
+    'hover-active-focus': color.brand,
+};
+
+lightMode.line = {
+    normal: color.dark6,
+    hover: color.brand,
+    focus: color.info5,
+    system: color.dark5,
+    category: color.dark2,
+    tab: color.dark2,
+
+    //old
+    disabled: color.dark4,
+    grid_wo_header: color.dark,
+    grid_w_header: color.white,
+};
+
+lightMode.dynamic = {
+    aqua: color.aqua5,
+    pistachio: color.pistachio5,
+    pumpkin: color.pumpkin5,
+    magenta: color.magenta5,
+    violet: color.violet5,
+};
+
+lightMode.primary = lightMode.system.active;
+lightMode.secondary = lightMode.system.rest;
+lightMode.success = lightMode.semantic.success;
+lightMode.warning = lightMode.semantic.warning;
+lightMode.danger = lightMode.semantic.danger;
+lightMode.info = lightMode.semantic.info;
+
+//** ----------------- End Mode Light ----------------- >
+
+// ----------------- Start Mode Dark ----------------- >
+
+const darkMode = {};
+
+darkMode.semantic = {
+    danger: color.danger5,
+    warning: color.warning5,
+    success: color.success5,
+    info: color.info5,
+};
+
+darkMode.system = {
+    active: color.white,
+    blue: color.blue,
+    rest: color.dark6,
+    disabled: color.dark8,
+
+    //old
+    // white: color.dark,
+    // dark: color.white,
+
+    //new
+    standard: color.dark,
+    'on-standard': color.white,
+};
+
+darkMode.fill = {
+    surface: color.dark,
+    headerbar: color.dark29,
+    scrollbar_rest: color.dark9,
+    scrollbar_hover: color.dark8,
+    scrollbar_pressed: color.dark8,
+    'odd-field': color.dark30,
+    'even-field': color.dark,
+    hover: color.blue29,
+    pressed: color.blue26,
+    disabled: color.dark10,
+    background: color.dark30,
+    tooltip: hexToRGBA(color.white, 0.9),
+    focus: color.blue27,
+    focusshd: hexToRGBA(color.white, 0.1),
+    headerUI: color.dark29,
+    'header-datagrid': color.dark28,
+};
+
+darkMode.text = {
+    main: color.white,
+    sub: color.dark6,
+    label: color.dark3,
+    focus: color.brand,
+    tooltip: color.dark,
+};
+
+darkMode.line = {
+    normal: color.dark6,
+    hover: color.white,
+    focus: color.info5,
+    system: color.dark5,
+    category: color.dark2,
+    tab: color.dark2,
+};
+
+darkMode.dynamic = {
+    aqua: color.aqua5,
+    pistachio: color.pistachio5,
+    pumpkin: color.pumpkin5,
+    magenta: color.magenta5,
+    violet: color.violet5,
+};
+
+darkMode.primary = darkMode.system.active;
+darkMode.secondary = darkMode.system.rest;
+darkMode.success = darkMode.semantic.success;
+darkMode.warning = darkMode.semantic.warning;
+darkMode.danger = darkMode.semantic.danger;
+darkMode.info = darkMode.semantic.info;
+
+// ----------------- End Mode Dark ----------------- >
+
+color = { ...color, ...lightMode, lightMode: lightMode, darkMode: darkMode };
+export { color };

package/src/styles/colors.stories.js

@@ -0,0 +1,105 @@
+import { TextInput, Typography } from 'components';
+import React, { useState } from 'react';
+import { useTheme } from 'theme';
+import { getProp } from 'utils';
+
+export default {
+    title: 'Style/Colors',
+};
+
+const styles = {
+    grid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+    },
+    item: {
+        margin: '10px 50px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+    },
+    color: {
+        width: 24,
+        height: 24,
+        borderRadius: 4,
+    },
+};
+
+const ColorBlocks = ({ colorList, pattern }) => {
+    const { colors } = useTheme();
+    return (
+        <div style={styles.grid}>
+            {colorList.map((colorName, index) => {
+                const _color = getProp(colors, colorName);
+                if (!colorName.startsWith('darkMode') && (pattern.test(colorName) || pattern.test(_color))) {
+                    return (
+                        <div key={index} style={styles.item}>
+                            <div style={{ ...styles.color, ...{ background: _color } }} />
+                            <Typography type={'h4'}>{colorName}</Typography>
+                            <Typography type={'h4'}>{_color}</Typography>
+                        </div>
+                    );
+                }
+                return null;
+            })}
+        </div>
+    );
+};
+
+const Template = () => {
+    const { colors } = useTheme();
+    const [search, setSearch] = useState('');
+    const pattern = new RegExp(search, 'i');
+    const excludeList = ['primary', 'success', 'warning', 'danger', 'info'];
+    let baseColorList = []; // white brand success1 danger1 formal1
+    let objectColorList = []; // semantic system fill text line
+    // let keywordList = []; // rest disabled sidebar headerbar tabbar scrollbar-tabbar odd_raw
+    let developColorList = [];
+
+    Object.keys(colors).map(key => {
+        if (typeof colors[key] === 'string') {
+            if (!excludeList.includes(key)) {
+                baseColorList.push(key);
+            } else {
+                developColorList.push(key);
+            }
+        } else {
+            objectColorList.push(key);
+        }
+    });
+
+    objectColorList.forEach(item => {
+        Object.keys(colors[item]).map(key => {
+            developColorList.push(`${item}/${key}`);
+        });
+    });
+
+    return (
+        <>
+            <TextInput
+                icon={'Search'}
+                label={'Tìm kiếm'}
+                placeholder={'Nhập tên màu hoặc mã màu'}
+                onChange={e => setSearch(e.target.value)}
+            />
+            <Typography type={'title1'} color={'success'}>
+                Develop Colors
+            </Typography>
+            <ColorBlocks colorList={developColorList} pattern={pattern} />
+            <Typography type={'title1'} color={'danger'}>
+                {`Base Colors (UI Dev please DO NOT use this!!!)`}
+            </Typography>
+            <ColorBlocks colorList={baseColorList} pattern={pattern} />
+        </>
+    );
+};
+
+export const SampleColor = Template.bind({});
+SampleColor.parameters = {
+    controls: { include: [], hideNoControlsWarning: true },
+    docs: {
+        source: {
+            code: ' ',
+        },
+    },
+};

package/src/styles/font.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-undef */
+export const fontSizes = {
+    xsmall: '12px',
+    small: '14px',
+    medium: '16px',
+    large: '16px',
+    xlarge: '16px',
+    xxlarge: '16px',
+};
+
+export const font = {
+    fontFamily: `"SF Pro Display"`,
+    fontFamilyLink: require('../assets/fonts/SF-Pro-Display-Regular.otf'),
+    fontFamilyMedium: `"SF Pro Display Medium"`,
+    fontFamilyMediumLink: require('../assets/fonts/SF-Pro-Display-Medium.otf'),
+    fontFamilyBold: `"SF Pro Display Bold"`,
+    fontFamilyBoldLink: require('../assets/fonts/SF-Pro-Display-Bold.otf'),
+    fontSize: '16px',
+
+    // text-security-disc
+    fontFamilySecurity: 'text-security-disc',
+    fontFamilySecurityCompatEOTLink: require('../assets/fonts/text-security-disc-compat.eot'),
+    fontFamilySecurityCompatWOFF2Link: require('../assets/fonts/text-security-disc-compat.woff2'),
+    fontFamilySecurityCompatTTFLink: require('../assets/fonts/text-security-disc-compat.ttf'),
+    fontFamilySecurityWOFF2Link: require('../assets/fonts/text-security-disc.woff2'),
+};