feat: updated the theming support for kpi and tc #2668

awslabs · Mar 29, 2024 · d32a018 · d32a018
1 parent 30611da
commit d32a018
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 14 deletions.
diff --git a/packages/dashboard/src/components/contextMenu/menu.tsx b/packages/dashboard/src/components/contextMenu/menu.tsx
@@ -10,6 +10,7 @@ import {
   borderRadiusDropdown,
   colorBackgroundDropdownItemDefault,
   colorBorderControlDefault,
+  colorTextBodyDefault,
   spaceScaledXxxs,
 } from '@cloudscape-design/design-tokens';
 
@@ -67,6 +68,7 @@ const Menu: React.FC<MenuProps> = ({ position, clickOutside, children }) => {
           minWidth: '192px', // 128+64, just picking a width which is a multiple of 8
           borderRadius: borderRadiusDropdown,
           background: colorBackgroundDropdownItemDefault,
+          color: colorTextBodyDefault,
         }}
         {...attributes.popper}
         onPointerDown={(e) => e.stopPropagation()} // prevent the grid from handling click events

diff --git a/packages/dashboard/src/customization/widgets/kpi/KPI.svg b/packages/dashboard/src/customization/widgets/kpi/KPI.svg
diff --git a/packages/react-components/src/components/chart/baseChart.tsx b/packages/react-components/src/components/chart/baseChart.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import type { MouseEvent } from 'react';
-import { spaceStaticL, spaceStaticM } from '@cloudscape-design/design-tokens';
+import {
+  colorBorderDividerSecondary,
+  spaceStaticL,
+  spaceStaticM,
+} from '@cloudscape-design/design-tokens';
 
 import { useECharts, useResizeableEChart } from '../../hooks/useECharts';
 import { ChartOptions } from './types';
@@ -195,6 +199,27 @@ const BaseChart = ({
     }
   };
 
+  const legendResizerStyle = () => {
+    const borderThin = `1px solid ${colorBorderDividerSecondary}`;
+    const borderThick = `2px solid ${colorBorderDividerSecondary}`;
+    if (isLegendPositionBottom) {
+      return {
+        borderTop: borderThick,
+        borderBottom: borderThin,
+      };
+    }
+    if (isLegendPositionLeft) {
+      return {
+        borderLeft: borderThin,
+        borderRight: borderThick,
+      };
+    }
+    return {
+      borderLeft: borderThick,
+      borderRight: borderThin,
+    };
+  };
+
   return (
     <div
       className={`base-chart-container ${options.legend?.position}-position`}
@@ -214,6 +239,7 @@ const BaseChart = ({
                   ? 'react-resizable-handle react-resizable-handle-se'
                   : ''
               }
+              style={options.legend?.visible ? legendResizerStyle() : {}}
               data-gesture='resize'
             />
           }

diff --git a/packages/react-components/src/components/chart/chart.css b/packages/react-components/src/components/chart/chart.css
@@ -17,8 +17,6 @@
   cursor: ew-resize;
   background-image: url("./assets/horizontalSliderIcon.svg");
   background-position: center;
-  border-left: 2px solid #e9ebed;
-  border-right: 1px solid #e9ebed;
 }
 
 .bottom-position .react-resizable-handle-se {
@@ -31,8 +29,6 @@
   cursor: ns-resize;
   background-image: url("./assets/verticalSliderIcon.svg");
   border: unset;
-  border-top: 2px solid #e9ebed;
-  border-bottom: 1px solid #e9ebed;
 }
 
 .base-chart-element {
@@ -62,8 +58,6 @@
   right: unset;
   left: 0;
   border: unset;
-  border-right: 2px solid #e9ebed;
-  border-left: 1px solid #e9ebed;
 }
 
 .base-chart-left-legend {

diff --git a/packages/react-components/src/components/chart/timeStamps/timeStamp.tsx b/packages/react-components/src/components/chart/timeStamps/timeStamp.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import {
   colorBackgroundLayoutToggleActive,
-  colorTextHomeHeaderDefault,
+  colorBorderDividerSecondary,
+  colorTextBodyDefault,
   spaceStaticS,
   spaceStaticXl,
   spaceStaticXs,
@@ -31,7 +32,7 @@ export const Timestamp = ({
 }: TimestampProps) => {
   const timestampStyle = {
     ...styleProps,
-    borderTop: `${spaceStaticXxxs} solid ${colorTextHomeHeaderDefault}`,
+    borderTop: `${spaceStaticXxxs} solid ${colorBorderDividerSecondary}`,
     padding: `0 ${spaceStaticS} ${spaceStaticXxxs} ${spaceStaticXs}`,
     fontSize: `10px`,
     color: `${colorBackgroundLayoutToggleActive}`,
@@ -46,6 +47,7 @@ export const Timestamp = ({
         className='base-chart-timestamp'
         style={{
           paddingTop: spaceStaticXxs,
+          color: colorTextBodyDefault,
         }}
       >
         <span>{start}</span>

diff --git a/packages/react-components/src/components/kpi/constants.ts b/packages/react-components/src/components/kpi/constants.ts
@@ -1,3 +1,4 @@
+import { colorBackgroundSegmentDefault } from '@cloudscape-design/design-tokens';
 import type { KPISettings } from './types';
 
 export const DEFAULT_KPI_COLOR = '#16191f';
@@ -15,6 +16,6 @@ export const DEFAULT_KPI_SETTINGS: Required<KPISettings> = {
   fontSize: 30,
   secondaryFontSize: 15,
   aggregationFontSize: 12,
-  backgroundColor: '#ffffff',
+  backgroundColor: colorBackgroundSegmentDefault,
   showAssetName: true,
 };
diff --git a/packages/react-components/src/components/kpi/kpiBase.tsx b/packages/react-components/src/components/kpi/kpiBase.tsx
@@ -10,7 +10,11 @@ import type { KPIBaseProperties, KPISettings } from './types';
 import './kpi.css';
 import { highContrastColor } from './highContrastColor';
 import { getAggregationFrequency } from '../../utils/aggregationFrequency';
-import { fontSizeBodyS } from '@cloudscape-design/design-tokens';
+import {
+  colorBackgroundButtonPrimaryDisabled,
+  colorTextBodyDefault,
+  fontSizeBodyS,
+} from '@cloudscape-design/design-tokens';
 import { DataQualityText } from '../data-quality/data-quality-text';
 
 export const KpiBase: React.FC<KPIBaseProperties> = ({
@@ -44,7 +48,9 @@ export const KpiBase: React.FC<KPIBaseProperties> = ({
     !isFilledThreshold && isThresholdVisible ? '#ffffff' : backgroundColor;
   const highContrastFontColor =
     background === '#ffffff' ? '' : highContrastColor(background);
-  const fontColor = isFilledThreshold ? highContrastFontColor : '';
+  const fontColor = isFilledThreshold
+    ? highContrastFontColor
+    : colorTextBodyDefault;
 
   const point = propertyPoint;
   const aggregationResolutionString = getAggregationFrequency(
@@ -118,7 +124,9 @@ export const KpiBase: React.FC<KPIBaseProperties> = ({
               <>
                 <div
                   className='timestamp-border'
-                  style={{ backgroundColor: fontColor }}
+                  style={{
+                    backgroundColor: colorBackgroundButtonPrimaryDisabled,
+                  }}
                 />
                 <div className='timestamp' data-testid='kpi-timestamp'>
                   {isLoading ? '-' : new Date(point.x).toLocaleString()}

diff --git a/packages/react-components/src/components/menu/menu.tsx b/packages/react-components/src/components/menu/menu.tsx
@@ -4,6 +4,7 @@ import {
   borderRadiusDropdown,
   colorBackgroundDropdownItemDefault,
   colorBorderButtonNormalDisabled,
+  colorTextBodyDefault,
   spaceScaledXxxs,
 } from '@cloudscape-design/design-tokens';
 import { useClickAway } from 'react-use';
@@ -50,6 +51,7 @@ export const Menu: React.FC<PropsWithChildren<MenuProps>> = ({
         border: `${spaceScaledXxxs} solid ${colorBorderButtonNormalDisabled}`,
         borderRadius: borderRadiusDropdown,
         background: colorBackgroundDropdownItemDefault,
+        color: colorTextBodyDefault,
         ...styles,
       }}
       onPointerDown={(e) => e.stopPropagation()} // prevent the parent from handling click events