diff --git a/package-lock.json b/package-lock.json index 6b11b12b..1fdc9dc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@nordcloud/gnui", - "version": "8.0.0", + "version": "8.1.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@nordcloud/gnui", - "version": "8.0.0", + "version": "8.1.0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index a9fea2ba..98863bd8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@nordcloud/gnui", "description": "Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products", - "version": "8.0.1", + "version": "8.1.0", "license": "MIT", "repository": { "type": "git", diff --git a/src/components/extendedTooltip/ExtendedTooltip.tsx b/src/components/extendedTooltip/ExtendedTooltip.tsx index 515ac9f3..b35d025c 100644 --- a/src/components/extendedTooltip/ExtendedTooltip.tsx +++ b/src/components/extendedTooltip/ExtendedTooltip.tsx @@ -172,7 +172,7 @@ const TooltipWrapper = styled.div` function getColor(status: Status) { return css` background-color: ${setColor(status)}; - color: ${theme.color.text.text01}; + color: ${theme.color.text.text04}; &:after { border-top-color: ${setColor(status)}; } diff --git a/src/components/svgicon/SVGIcon.stories.mdx b/src/components/svgicon/SVGIcon.stories.mdx index af932b1e..c9fbc117 100644 --- a/src/components/svgicon/SVGIcon.stories.mdx +++ b/src/components/svgicon/SVGIcon.stories.mdx @@ -968,6 +968,24 @@ import { Text } from "../text"; + + + + + refreshSuccess + + + + + + + + + + refreshWarning + + + @@ -1498,6 +1516,14 @@ import { Text } from "../text"; + + + + + benefit + + + diff --git a/src/components/svgicon/SVGIcon.tsx b/src/components/svgicon/SVGIcon.tsx index a969f1b7..fc4ea148 100644 --- a/src/components/svgicon/SVGIcon.tsx +++ b/src/components/svgicon/SVGIcon.tsx @@ -8,6 +8,7 @@ const StyledSVGIcon = styled.svg>` fill: ${theme.color.text.text01}; width: ${theme.iconSize.md}; height: ${theme.iconSize.md}; + vertical-align: middle; ${({ color }) => color && diff --git a/src/components/svgicon/icons/resource-categories.tsx b/src/components/svgicon/icons/resource-categories.tsx index 8b5cf433..0c3a501b 100644 --- a/src/components/svgicon/icons/resource-categories.tsx +++ b/src/components/svgicon/icons/resource-categories.tsx @@ -325,4 +325,20 @@ export const resourceCategories = { /> ), + benefit: ( + <> + + + + + ), }; diff --git a/src/components/svgicon/icons/ui.tsx b/src/components/svgicon/icons/ui.tsx index be7f19c1..0d9d95df 100644 --- a/src/components/svgicon/icons/ui.tsx +++ b/src/components/svgicon/icons/ui.tsx @@ -1248,4 +1248,18 @@ export const uiIcons = { ), + refreshSuccess: ( + <> + + + + + ), + refreshWarning: ( + <> + + + + + ), }; diff --git a/src/components/table/Table.stories.mdx b/src/components/table/Table.stories.mdx index 3035bcb5..6aafb350 100644 --- a/src/components/table/Table.stories.mdx +++ b/src/components/table/Table.stories.mdx @@ -3,6 +3,7 @@ import { Table } from "."; import { Box } from "../box"; import { Input } from "../input"; import { Button } from "../button"; +import { SVGIcon } from "../svgicon"; import { FlexContainer } from "../container"; @@ -25,6 +26,7 @@ import { FlexContainer } from "../container"; + Name Title Phone @@ -32,16 +34,25 @@ import { FlexContainer } from "../container"; + + + Kathy C. Do Director +48 XXX-XXX-XXX + + + James D. Washington Developer +48 XXX-XXX-XXX + + + Elaine R. Bean Product Owner +48 XXX-XXX-XXX diff --git a/src/theme/dark.ts b/src/theme/dark.ts index ffbaad1e..b83d10d6 100644 --- a/src/theme/dark.ts +++ b/src/theme/dark.ts @@ -47,22 +47,22 @@ const DARK_COLORS = [ ["--interactive-infoActive", palette.blue.blue600], ["--interactive-disabled", palette.darkGrey.darkGrey200], ["--support-red", palette.red.red400], - ["--support-redInverse", palette.darkGrey.darkGrey100], + ["--support-redInverse", palette.red.redTransparent], ["--support-pink", palette.pink.pink400], ["--support-purple", palette.purple.purple400], ["--support-indigo", palette.indigo.indigo300], ["--support-blue", palette.blue.blue400], - ["--support-blueInverse", palette.darkGrey.darkGrey100], + ["--support-blueInverse", palette.blue.blueTransparent], ["--support-grey", palette.grey.grey800], ["--support-greyInverse", palette.grey.grey300], ["--support-cyan", palette.cyan.cyan400], ["--support-teal", palette.teal.teal400], ["--support-green", palette.lightGreen.lightGreen400], - ["--support-greenInverse", palette.darkGrey.darkGrey100], + ["--support-greenInverse", palette.green.greenTransparent], ["--support-lightGreen", palette.lightGreen.lightGreen400], ["--support-yellow", palette.yellow.yellow400], ["--support-orange", palette.orange.orange400], - ["--support-orangeInverse", palette.darkGrey.darkGrey100], + ["--support-orangeInverse", palette.orange.orangeTransparent], ]; export default DARK_COLORS; diff --git a/src/theme/palette.ts b/src/theme/palette.ts index bd1f9def..bb1d0119 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -40,6 +40,7 @@ export const palette = { red600: "#e53935", red700: "#d32f2f", red800: "#c62828", + redTransparent: "#c6282880", }, pink: { pink100: "#f8bbd0", @@ -80,6 +81,7 @@ export const palette = { blue600: "#1e88e5", blue700: "#1976d2", blue800: "#1565c0", + blueTransparent: "#1565c080", }, deepBlue: { deepBlue100: "#c0daf8", @@ -120,6 +122,7 @@ export const palette = { green600: "#43a047", green700: "#388e3c", green800: "#1b5e20", + greenTransparent: "#1b5e2080", }, lightGreen: { lightGreen100: "#dcedc8", @@ -150,5 +153,6 @@ export const palette = { orange600: "#fb8c00", orange700: "#f57c00", orange800: "#ef6c00", + orangeTransparent: "#ef6c0080", }, } as const;