Style v2 (#179)

* update chart bgs, remove border from main chart, set spacing for tile title * update status logo border and nidl position and size * add new chart color vars for chart header, chart toolbox * icon color in chart toolbox --------- Co-authored-by: Panos Christophides <[email protected]>
netdata · Aug 14, 2023 · a8d7260 · a8d7260
1 parent fedf7dd
commit a8d7260
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 28 deletions.
diff --git a/src/components/container.js b/src/components/container.js
@@ -5,8 +5,9 @@ const Container = styled(Flex).attrs(props => ({
   "data-testid": "chart",
   column: true,
   position: "relative",
-  border: { color: "borderSecondary", side: "all" },
   round: true,
+  border: { color: "mainChartBorder", side: "all" },
+  background: "mainChartBg",
   ...props,
 }))`
   ::selection {

diff --git a/src/components/d3pie/index.js b/src/components/d3pie/index.js
@@ -16,7 +16,7 @@ const frames = keyframes`
 `
 
 export const Skeleton = styled(Flex).attrs(props => ({
-  background: "borderSecondary",
+  background: "panelBg",
   round: "100%",
   width: "100%",
   height: "100%",

diff --git a/src/components/gauge/index.js b/src/components/gauge/index.js
@@ -22,8 +22,8 @@ const Label = styled(Text)`
 `
 
 const StrokeLabel = styled(Label)`
-  text-shadow: 0.02em 0 ${getColor("borderSecondary")}, 0 0.02em ${getColor("borderSecondary")},
-    -0.02em 0 ${getColor("borderSecondary")}, 0 -0.02em ${getColor("borderSecondary")};
+  text-shadow: 0.02em 0 ${getColor("border")}, 0 0.02em ${getColor("border")},
+    -0.02em 0 ${getColor("border")}, 0 -0.02em ${getColor("border")};
 `
 export const Value = () => {
   const value = useLatestConvertedValue("selected")
@@ -38,7 +38,7 @@ export const Value = () => {
 export const Unit = () => {
   const unit = useUnitSign()
   return (
-    <Label color="border" fontSize="1em">
+    <Label color="textLite" fontSize="1em">
       {unit}
     </Label>
   )
@@ -49,7 +49,7 @@ export const Bound = ({ empty, index, uiName, ...rest }) => {
   const minMax = chart.getUI(uiName).getMinMax()
 
   return (
-    <Label color="border" fontSize="1.3em" {...rest}>
+    <Label color="textLite" fontSize="1.3em" {...rest}>
       {empty ? "-" : chart.getConvertedValue(minMax[index])}
     </Label>
   )

diff --git a/src/components/header/index.js b/src/components/header/index.js
@@ -14,6 +14,7 @@ export const Container = props => (
     border={{ side: "bottom", color: "borderSecondary" }}
     data-testid="chartHeader"
     height="25px"
+    background="mainChartHeaderBg"
     {...props}
   />
 )

diff --git a/src/components/hocs/withTile.js b/src/components/hocs/withTile.js
@@ -23,7 +23,7 @@ const Label = styled(Text)`
 `
 
 const ChartHeadWrapper = styled(Flex).attrs(({ size, ...rest }) => ({
-  background: "elementBackground",
+  background: "panelBg",
   round: true,
   fontSize: parseInt(size / 3, 10),
   height: "100%",
@@ -50,6 +50,7 @@ export const Title = () => {
       width="80%"
       onClick={onClick}
       cursor="pointer"
+      padding={[2, 0, 0]}
     >
       {title}
     </Label>
@@ -78,7 +79,7 @@ export const HeadWrapper = ({ children, uiName, ...rest }) => {
 
   return (
     <ChartHeadWrapper size={size} {...rest} ref={hoverRef}>
-      <Flex column width="16px" padding={[1, 0]}>
+      <Flex column width="24px" padding={[2, 1]}>
         <Status plain />
         <Collapsible open={focused} column>
           <FilterToolbox
@@ -94,7 +95,7 @@ export const HeadWrapper = ({ children, uiName, ...rest }) => {
         column
         alignItems="center"
         justifyContent="center"
-        padding={[1, 0, 0]}
+        padding={[1, 0, 2]}
         height="100%"
         width="100%"
         position="relative"
@@ -103,7 +104,7 @@ export const HeadWrapper = ({ children, uiName, ...rest }) => {
         <Title />
         {children}
       </Flex>
-      <Flex column width="16px" alignItems="center" padding={[4, 1]} gap={2}>
+      <Flex column width="24px" alignItems="center" padding={[4, 1]} gap={2}>
         {firstDim === "selected" && (
           <>
             <Flex

diff --git a/src/components/icon/button.js b/src/components/icon/button.js
@@ -2,8 +2,8 @@ import styled from "styled-components"
 import { getColor } from "@netdata/netdata-ui/lib/theme/utils"
 import { withTooltip } from "@/components/tooltip"
 
-const color = ({ active, disabled, defaultColor = "border" }) => {
-  if (active) return "textDescription"
+const color = ({ active, disabled, defaultColor = "textLite" }) => {
+  if (active) return "text"
   if (disabled) return "disabled"
 
   return defaultColor
@@ -39,17 +39,13 @@ const Button = styled.button.attrs(({ icon, hoverIndicator = true, padding = 0,
 
   &:hover {
     ${({ theme, hoverIndicator, disabled }) =>
-      hoverIndicator && !disabled && `background: ${getColor("borderSecondary")({ theme })};`};
+      hoverIndicator && !disabled && `background: ${getColor("mainChartTboxHover")({ theme })};`};
 
     svg {
       fill: ${({ theme, stroked, disabled }) =>
-        stroked
-          ? "none"
-          : getColor(color({ defaultColor: "textDescription", disabled }))({ theme })};
+        stroked ? "none" : getColor(color({ defaultColor: "text", disabled }))({ theme })};
       stroke: ${({ theme, stroked, disabled }) =>
-        stroked
-          ? getColor(color({ defaultColor: "textDescription", disabled }))({ theme })
-          : "none"};
+        stroked ? getColor(color({ defaultColor: "text", disabled }))({ theme }) : "none"};
     }
   }
 `

diff --git a/src/components/status/logo.js b/src/components/status/logo.js
@@ -33,7 +33,7 @@ const StyledIcon = styled(Icon)`
 
 const Logo = props => {
   const isFetching = useIsFetching()
-  const color = useLoadingColor("tabsBorder")
+  const color = useLoadingColor("border")
 
   return (
     <StyledIcon

diff --git a/src/components/toolbox/chartType.js b/src/components/toolbox/chartType.js
@@ -9,7 +9,7 @@ import heatmapChart from "@netdata/netdata-ui/lib/components/icon/assets/heatmap
 import Icon, { Button } from "@/components/icon"
 import { useChart, useAttributeValue } from "@/components/provider"
 
-const iconProps = { color: "border", margin: [0, 2, 0, 0], size: "16px" }
+const iconProps = { color: "text", margin: [0, 2, 0, 0], size: "16px" }
 
 const useItems = chart =>
   useMemo(

diff --git a/src/sdk/initialAttributes.js b/src/sdk/initialAttributes.js
@@ -120,7 +120,7 @@ export default {
   eliminateZeroDimensions: true,
   fullscreen: false,
   overlays: {},
-  themeGridColor: ["#F7F8F8", "#282827"],
+  themeGridColor: ["#E4E8E8", "#212727"],
   themeCrosshair: ["#536775", "#536775"],
   showingInfo: false,
   colors: [],
@@ -155,22 +155,22 @@ export default {
 
   pristine: {},
 
-  themeTrackColor: ["#ECEEEF", "#383B40"],
+  themeTrackColor: ["#DBE1E1", "#353F3F"],
   themeScaleColor: ["#F7F8F8", "#2B3136"],
 
-  themeEasyPieTrackColor: ["#ECEEEF", "#383B40"],
-  themeEasyPieScaleColor: ["#CFD5DA", "#536775"],
+  themeEasyPieTrackColor: ["#DBE1E1", "#353F3F"],
+  themeEasyPieScaleColor: ["#B7C2C2", "#424E4E"],
 
   themeGaugePointer: ["#8F9EAA", "#536775"],
-  themeGaugeStroke: ["#ECEEEF", "#383B40"],
+  themeGaugeStroke: ["#DBE1E1", "#353F3F"],
 
   themeD3pieSmallColor: ["#536775", "#CFD5DA"],
-  themeD3pieStroke: ["#ECEEEF", "#383B40"],
+  themeD3pieStroke: ["#DBE1E1", "#353F3F"],
   themeInnerLabelColor: ["#F7F8F8", "#282827"],
 
   themeLabelColor: ["#35414a", "#ffffff"],
   themeBackground: ["#ffffff", "#282C34"],
-  themeNeutralBackground: ["#ECEEEF", "#383B40"],
+  themeNeutralBackground: ["#DBE1E1", "#353F3F"],
   themeWarningBackground: ["#FFCC26", "#FFCC26"],
   themeErrorBackground: ["#F95251", "#F95251"],