diff --git a/package-lock.json b/package-lock.json index 1cd91918..d1b94609 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1324,9 +1324,9 @@ } }, "@delangle/use-modal": { - "version": "1.5.42", - "resolved": "https://registry.npmjs.org/@delangle/use-modal/-/use-modal-1.5.42.tgz", - "integrity": "sha512-z7x4akFj8Y50TbDcYfhtJNJmU0DyipN3YJWrKELUQzMBHKCquN9iEhQ9GNqpVvyF//cas+126PeldnUn+JLaYg==", + "version": "1.5.44", + "resolved": "https://registry.npmjs.org/@delangle/use-modal/-/use-modal-1.5.44.tgz", + "integrity": "sha512-H4yHVAisCYZV/FJO51IhgRHel4J83MzsjEx8jWI+jo3wr7tbjiYUNdxKNOXzLcUlD3WlqEg+wi7prQ80D+ogJw==", "dev": true, "requires": { "test-jest": "^1.0.1" @@ -1519,16 +1519,15 @@ } }, "@habx/ui-core": { - "version": "4.5.0", - "resolved": "https://registry.npmjs.org/@habx/ui-core/-/ui-core-4.5.0.tgz", - "integrity": "sha512-i23mSqpJ38xbAIOwu8C4oMohU22ixF8rN5utX4SrrCgluvFB4y5528Abiya49bEQgUZEvCW3d5rNN4+5VYq2Aw==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@habx/ui-core/-/ui-core-5.0.0.tgz", + "integrity": "sha512-tt0opGyvNdbXYU4hH0EHLLYNiN7kTDNSj0uAZt08r51rhOPSaRDXgki3B9/2GLo76yeZcMchKVE3zHVHn6iUkQ==", "dev": true, "requires": { - "@delangle/use-modal": "^1.5.41", - "color": "^3.1.3", + "@delangle/use-modal": "^1.5.44", + "color-parse": "^1.4.2", "lodash.deburr": "^4.1.0", "markdown-it": "^12.0.2", - "markdown-it-sup": "^1.0.0", "merge": "^2.1.0", "react-easy-swipe": "0.0.21", "react-is": "^17.0.1" @@ -6619,6 +6618,15 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" }, + "color-parse": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-1.4.2.tgz", + "integrity": "sha512-RI7s49/8yqDj3fECFZjUI1Yi0z/Gq1py43oNJivAIIDSyJiOZLfYCRQEgn8HEVAj++PcRe8AnL2XF0fRJ3BTnA==", + "dev": true, + "requires": { + "color-name": "^1.0.0" + } + }, "color-string": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.4.tgz", @@ -13957,12 +13965,6 @@ } } }, - "markdown-it-sup": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/markdown-it-sup/-/markdown-it-sup-1.0.0.tgz", - "integrity": "sha1-y5yf+RpSVawI8/09YyhuFd8KH8M=", - "dev": true - }, "markdown-to-jsx": { "version": "6.11.4", "resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-6.11.4.tgz", diff --git a/package.json b/package.json index 16cb5df0..e6c35e85 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", "@babel/plugin-proposal-optional-chaining": "^7.12.7", "@habx/eslint-config-client": "^5.4.0", - "@habx/ui-core": "^4.5.0", + "@habx/ui-core": "^5.0.0", "@storybook/addon-actions": "^6.1.9", "@storybook/addon-centered": "^5.3.21", "@storybook/addon-knobs": "^6.1.9", diff --git a/src/Table/Density.tsx b/src/Table/Density.tsx index f5687eb1..cb45986a 100644 --- a/src/Table/Density.tsx +++ b/src/Table/Density.tsx @@ -1,21 +1,21 @@ import * as React from 'react' import styled from 'styled-components' -import { Tooltip, Icon, palette } from '@habx/ui-core' +import { Tooltip, Icon, theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' const DensityIcon = styled(Icon)` margin-left: 18px; - color: ${palette.darkBlue[800]}; + color: ${theme.neutralColor(800)}; &[data-active='false'] { - color: ${palette.darkBlue[300]}; + color: ${theme.neutralColor(300)}; transition: all ease-in-out 150ms; } &:hover { - color: ${palette.darkBlue[500]}; + color: ${theme.neutralColor(500)}; cursor: pointer; } ` diff --git a/src/Table/LoadingRow.tsx b/src/Table/LoadingRow.tsx index 69333f17..d444c7c5 100644 --- a/src/Table/LoadingRow.tsx +++ b/src/Table/LoadingRow.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { palette } from '@habx/ui-core' +import { theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' @@ -22,9 +22,9 @@ const Loader = styled.div` max-height: 16px; background: linear-gradient( to right, - ${palette.darkBlue[200]} 20%, - ${palette.darkBlue[300]} 50%, - ${palette.darkBlue[200]} 80% + ${theme.neutralColor(200)} 20%, + ${theme.neutralColor(300)} 50%, + ${theme.neutralColor(200)} 80% ); animation: fading 2s linear infinite; background-size: 500px 100px; diff --git a/src/Table/Table.style.ts b/src/Table/Table.style.ts index fd69a0d5..521a769f 100644 --- a/src/Table/Table.style.ts +++ b/src/Table/Table.style.ts @@ -1,6 +1,6 @@ import styled, { css } from 'styled-components' -import { palette, Text, theme } from '@habx/ui-core' +import { Text, theme } from '@habx/ui-core' const alignItems = css` &[data-align='center'] { @@ -54,13 +54,13 @@ export const TableHeadCell = styled.th<{ size: number }>` grid-column-end: span ${({ size }) => size}; --table-header-font-size: 12px; - --table-header-color: ${palette.darkBlue[400]}; + --table-header-color: ${theme.neutralColor(400)}; &[data-big='true'] { font-size: 16px; - border-bottom: solid 1px ${palette.darkBlue[300]}; + border-bottom: solid 1px ${theme.neutralColor(300)}; --table-header-font-size: 16px; - --table-header-color: ${palette.darkBlue[900]}; + --table-header-color: ${theme.neutralColor(900)}; } ` @@ -84,22 +84,22 @@ export const TableBodyRow = styled.tr` transition: background-color 50ms ease-in-out; &[data-striped='true']:nth-child(2n + 1) { - background-color: ${palette.darkBlue[100]}; + background-color: ${theme.neutralColor(100)}; } &[data-active='true'] { - background-color: ${palette.blue[100]}; + background-color: ${theme.neutralColor(100)}; &[data-clickable='true'] { &:hover { - background-color: ${palette.blue[200]}; + background-color: ${theme.neutralColor(200)}; } } } &:not([data-active='true'])[data-clickable='true'] { &:hover { - background-color: ${palette.darkBlue[200]}; + background-color: ${theme.neutralColor(200)}; } } @@ -133,7 +133,7 @@ export const TableCell = styled.td` > div { font-size: 16px; - color: ${palette.darkBlue[700]}; + color: ${theme.neutralColor(700)}; width: 100%; } ` diff --git a/src/Table/Table.tsx b/src/Table/Table.tsx index c9799d3e..7a083ab9 100644 --- a/src/Table/Table.tsx +++ b/src/Table/Table.tsx @@ -155,7 +155,10 @@ const Table = ({ - + {renderHeader} {column.isSorted && ( diff --git a/src/Table/TablePagination.tsx b/src/Table/TablePagination.tsx index a12f9fdd..c101476a 100644 --- a/src/Table/TablePagination.tsx +++ b/src/Table/TablePagination.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { Text, Icon, Select, palette } from '@habx/ui-core' +import { Text, Icon, Select, theme } from '@habx/ui-core' import { TableInstance } from '../types/Table' @@ -24,16 +24,16 @@ export const PagesChevrons = styled.div` ` export const PaginationIcon = styled(Icon)` - color: ${palette.darkBlue[800]}; + color: ${theme.neutralColor(800)}; transition: all ease-in-out 150ms; cursor: pointer; &:hover { - color: ${palette.darkBlue[500]}; + color: ${theme.neutralColor(500)}; } &[data-disabled='true'] { - color: ${palette.darkBlue[300]}; + color: ${theme.neutralColor(300)}; pointer-events: none; } ` diff --git a/src/cell/BooleanCell/BooleanCell.tsx b/src/cell/BooleanCell/BooleanCell.tsx index e70eb49b..e962fb93 100644 --- a/src/cell/BooleanCell/BooleanCell.tsx +++ b/src/cell/BooleanCell/BooleanCell.tsx @@ -1,6 +1,6 @@ import * as React from 'react' -import { palette } from '@habx/ui-core' +import { useThemeVariant } from '@habx/ui-core' import IconCell, { IconCellProps } from '../IconCell' @@ -8,11 +8,13 @@ const BooleanCell = React.forwardRef( (props, ref) => { const { value, ...rest } = props + const theme = useThemeVariant() + return ( ) diff --git a/src/cell/IconCell/IconCell.style.ts b/src/cell/IconCell/IconCell.style.ts index e7ad2d2d..ff26fe7b 100644 --- a/src/cell/IconCell/IconCell.style.ts +++ b/src/cell/IconCell/IconCell.style.ts @@ -20,7 +20,7 @@ export const IconContainer = styled.div<{ color?: string }>` color: ${color}; ` : css` - color: ${theme.textColor({ opacity: 0.72 })}; + color: ${theme.textColor()}; `}; ` diff --git a/src/components/LoadingBar/LoadingBar.tsx b/src/components/LoadingBar/LoadingBar.tsx index dca3c3ae..b11a4d90 100644 --- a/src/components/LoadingBar/LoadingBar.tsx +++ b/src/components/LoadingBar/LoadingBar.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import styled from 'styled-components' -import { palette, theme } from '@habx/ui-core' +import { theme } from '@habx/ui-core' export const LoadingBarStyled = styled.div` width: 300px; @@ -9,7 +9,7 @@ export const LoadingBarStyled = styled.div` --loading-bar-progress: 0%; position: relative; - background: ${palette.darkBlue[300]}; + background: ${theme.neutralColor(300)}; &:after { transition: width ease-in-out 150ms; diff --git a/src/imex/imex.style.ts b/src/imex/imex.style.ts index b78745a3..46cd3a30 100644 --- a/src/imex/imex.style.ts +++ b/src/imex/imex.style.ts @@ -1,6 +1,6 @@ import styled from 'styled-components' -import { palette, Text, theme } from '@habx/ui-core' +import { Text, theme } from '@habx/ui-core' export const OverlayContainer = styled(Text)` position: fixed; @@ -8,7 +8,7 @@ export const OverlayContainer = styled(Text)` height: 100vh; width: 100vw; left: 0; - background-color: ${palette.darkBlue[300]}; + background-color: ${theme.neutralColor(300)}; opacity: 0.9; display: grid; justify-items: center; diff --git a/src/imex/useImportTable.tsx b/src/imex/useImportTable.tsx index f0c0a280..f5133e6e 100644 --- a/src/imex/useImportTable.tsx +++ b/src/imex/useImportTable.tsx @@ -322,10 +322,11 @@ const useImportTable = ( -