td-stylekit 29.0.0 → 30.0.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [30.0.0](https://github.com/treasure-data/td-stylekit/compare/v29.0.0...v30.0.0) (2024-09-18)
+
+
+### Code Refactoring
+
+* **CON-16791:** Remove v4 theme ([#1606](https://github.com/treasure-data/td-stylekit/issues/1606)) ([7827e02](https://github.com/treasure-data/td-stylekit/commit/7827e02ccb916dbe388a97cb2ca94e1701525199)), closes [/github.com/treasure-data/td-stylekit/pull/1606/files#diff-9f7f950eeb101f410b8e0af8bae8386a88a565945932b0fb1ae41875c5ff1d95](https://github.com//github.com/treasure-data/td-stylekit/pull/1606/files/issues/diff-9f7f950eeb101f410b8e0af8bae8386a88a565945932b0fb1ae41875c5ff1d95) [/github.com/treasure-data/td-stylekit/pull/1606/files#diff-3b84b9cd1c7a0c0fa22d2c808c5d9c3c1158dda1e2209676610e3afdfb396fb6](https://github.com//github.com/treasure-data/td-stylekit/pull/1606/files/issues/diff-3b84b9cd1c7a0c0fa22d2c808c5d9c3c1158dda1e2209676610e3afdfb396fb6)
+
+
+### BREAKING CHANGES
+
+* **CON-16791:** V4 theme is removed.
+
+[CON-16791]:
+https://treasure-data.atlassian.net/browse/CON-16791?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
+
 # [29.0.0](https://github.com/treasure-data/td-stylekit/compare/v28.44.1...v29.0.0) (2024-09-09)
 
 

package/dist/es/BarChart/BarChart.d.ts

@@ -76,12 +76,12 @@ export declare namespace BarChart {
         customizeTheme: (chartTheme: any) => any;
     };
 }
-declare const ThemedComponent: import("react").FC<Pick<Pick<BarChartProps, "data" | "animate" | "theme" | "height" | "width" | "padding" | "horizontal" | "detailed" | "grayscale" | "chartColors" | "isGrowthRateChart" | "barColor" | "barLabel" | "barRadius" | "barRatio" | "barWidth" | "domainPadding" | "gridStyle" | "xTickCount" | "xTickLabelTitle" | "xTickValues" | "yTickCount" | "yTickValues" | "domain" | "tooltipProps"> & {
+declare const ThemedComponent: import("react").FC<Pick<Pick<BarChartProps, "data" | "animate" | "theme" | "height" | "width" | "padding" | "horizontal" | "chartColors" | "detailed" | "grayscale" | "isGrowthRateChart" | "barColor" | "barLabel" | "barRadius" | "barRatio" | "barWidth" | "domainPadding" | "gridStyle" | "xTickCount" | "xTickLabelTitle" | "xTickValues" | "yTickCount" | "yTickValues" | "domain" | "tooltipProps"> & {
     yTickLabel?: ((data: Datum['y']) => string) | undefined;
     customizeTheme?: ((chartTheme: ChartTheme, theme: Theme) => ChartTheme) | undefined;
     tooltipLabel?: ((data: Datum) => string | string[]) | undefined;
     xTickLabel?: ((data: Datum['x']) => string) | undefined;
-} & {}, "data" | "animate" | "height" | "width" | "padding" | "horizontal" | "detailed" | "grayscale" | "yTickLabel" | "chartColors" | "isGrowthRateChart" | "barColor" | "barLabel" | "barRadius" | "barRatio" | "barWidth" | "customizeTheme" | "domainPadding" | "gridStyle" | "tooltipLabel" | "xTickCount" | "xTickLabel" | "xTickLabelTitle" | "xTickValues" | "yTickCount" | "yTickValues" | "domain" | "tooltipProps"> & {
+} & {}, "data" | "animate" | "height" | "width" | "padding" | "horizontal" | "chartColors" | "detailed" | "grayscale" | "isGrowthRateChart" | "yTickLabel" | "barColor" | "barLabel" | "barRadius" | "barRatio" | "barWidth" | "customizeTheme" | "domainPadding" | "gridStyle" | "tooltipLabel" | "xTickCount" | "xTickLabel" | "xTickLabelTitle" | "xTickValues" | "yTickCount" | "yTickValues" | "domain" | "tooltipProps"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }>;
 export default ThemedComponent;

package/dist/es/BarChart/BarChart.js

@@ -27,8 +27,8 @@ function BarChart(props) {
   var _props$animate = props.animate,
     animate = _props$animate === void 0 ? _ChartPrimitives.chartUtils.ANIMATE : _props$animate,
     _props$barColor = props.barColor,
-    barColor = _props$barColor === void 0 ? function (_datum, theme) {
-      return theme.color.Primary;
+    barColor = _props$barColor === void 0 ? function (_datum) {
+      return theme.palette.primary[2];
     } : _props$barColor,
     barLabel = props.barLabel,
     barRadius = props.barRadius,
@@ -74,7 +74,6 @@ function BarChart(props) {
   width = Math.max(width, 1);
   height = Math.max(height, 1);
   var providerTheme = (0, _react.useTheme)();
-  var isV5 = providerTheme.name === 'v5';
   var BarLabel = function BarLabel(props) {
     var _chartTheme$_labelSty, _tooltipProps$labelSt, _chartTheme$_labelSty2, _tooltipProps$labelSt2, _chartTheme$_labelSty3, _tooltipProps$labelSt3;
     var tooltipProps = typeof restProps.tooltipProps === 'function' ? restProps.tooltipProps(props.datum || {
@@ -106,14 +105,14 @@ function BarChart(props) {
         labelStyle: [_objectSpread(_objectSpread({}, (_chartTheme$_labelSty = chartTheme._labelStyle) === null || _chartTheme$_labelSty === void 0 ? void 0 : _chartTheme$_labelSty[0]), tooltipProps === null || tooltipProps === void 0 ? void 0 : (_tooltipProps$labelSt = tooltipProps.labelStyle) === null || _tooltipProps$labelSt === void 0 ? void 0 : _tooltipProps$labelSt[0]), _objectSpread(_objectSpread({}, (_chartTheme$_labelSty2 = chartTheme._labelStyle) === null || _chartTheme$_labelSty2 === void 0 ? void 0 : _chartTheme$_labelSty2[1]), {}, {
           fill: function fill(_ref2) {
             var datum = _ref2.datum;
-            return isV5 ? (0, _color["default"])(barColor(datum, theme)).darken(0.5) : barColor(datum, theme);
+            return (0, _color["default"])(barColor(datum, theme)).darken(0.5);
           }
         }, tooltipProps === null || tooltipProps === void 0 ? void 0 : (_tooltipProps$labelSt2 = tooltipProps.labelStyle) === null || _tooltipProps$labelSt2 === void 0 ? void 0 : _tooltipProps$labelSt2[1]), _objectSpread(_objectSpread({}, (_chartTheme$_labelSty3 = chartTheme._labelStyle) === null || _chartTheme$_labelSty3 === void 0 ? void 0 : _chartTheme$_labelSty3[0]), tooltipProps === null || tooltipProps === void 0 ? void 0 : (_tooltipProps$labelSt3 = tooltipProps.labelStyle) === null || _tooltipProps$labelSt3 === void 0 ? void 0 : _tooltipProps$labelSt3[0])],
         isGrouped: false
       }))]
     });
   };
-  var chartTheme = isV5 ? customizeTheme(_ChartPrimitives.chartUtils.getV5Theme({
+  var chartTheme = customizeTheme(_ChartPrimitives.chartUtils.getV5Theme({
     chartColors: chartColors,
     width: width,
     height: height,
@@ -124,17 +123,8 @@ function BarChart(props) {
     yAxisLabel: undefined,
     yTickLabel: yTickLabel,
     theme: theme
-  }), theme) : customizeTheme(_ChartPrimitives.chartUtils.getTheme({
-    width: width,
-    height: height,
-    detailed: detailed,
-    data: data,
-    grayscale: grayscale,
-    yAxisLabel: undefined,
-    yTickLabel: yTickLabel,
-    theme: theme
   }), theme);
-  var shouldRenderBackground = isV5 && width > 1 && height > 1;
+  var shouldRenderBackground = width > 1 && height > 1;
   var yDomain = _ChartPrimitives.chartUtils.findYMax(data);
 
   // The y domain is [0, 0] so force it to [-100, 100] so that the

package/dist/es/ChartPrimitives/utils.d.ts

@@ -57,16 +57,6 @@ export type ChartTheme = VictoryThemeDefinition & {
         [key: string]: any;
     };
 };
-export declare function getTheme({ width, height, detailed, grayscale, yAxisLabel, yTickLabel, data, theme }: {
-    width: number;
-    height: number;
-    detailed?: boolean;
-    grayscale?: boolean;
-    data: Datum[];
-    yAxisLabel?: string;
-    yTickLabel?: (d: any) => string;
-    theme: Theme;
-}): ChartTheme;
 export declare function getV5Theme({ chartColors, width, height, detailed, grayscale, isGrowthRateChart, yAxisLabel, yTickLabel, data, theme }: {
     chartColors: string[] | string;
     width: number;

package/dist/es/ChartPrimitives/utils.js

@@ -11,7 +11,6 @@ exports.findLongestYLabel = findLongestYLabel;
 exports.findYMax = findYMax;
 exports.findYMinMax = findYMinMax;
 exports.getChartColor = getChartColor;
-exports.getTheme = getTheme;
 exports.getV5Theme = getV5Theme;
 exports.truncateLabelText = truncateLabelText;
 var _dateFns = require("date-fns");
@@ -123,154 +122,17 @@ maxWidth) {
   }
   return truncated;
 }
-function getTheme(_ref) {
-  var width = _ref.width,
+function getV5Theme(_ref) {
+  var chartColors = _ref.chartColors,
+    width = _ref.width,
     height = _ref.height,
     detailed = _ref.detailed,
     grayscale = _ref.grayscale,
+    isGrowthRateChart = _ref.isGrowthRateChart,
     yAxisLabel = _ref.yAxisLabel,
     yTickLabel = _ref.yTickLabel,
     data = _ref.data,
     theme = _ref.theme;
-  var fontStyles = {
-    fontSize: (0, _utils.remToPx)(theme.fontSize[1]),
-    fill: theme.color.Zorba,
-    stroke: 'transparent',
-    fontStyle: 'normal',
-    fontWeight: 'normal'
-  };
-  var longestYLabel = findLongestYLabel(data, yTickLabel);
-  var _calculateLabelSize = calculateLabelSize([longestYLabel], fontStyles),
-    _calculateLabelSize2 = _slicedToArray(_calculateLabelSize, 1),
-    axisLabelWidth = _calculateLabelSize2[0];
-
-  // Here we have a 1x fontSize difference which is the space between
-  // the axis label and the tick labels
-  var yAxisLabelPadding = axisLabelWidth + fontStyles.fontSize * 2;
-  var leftPadding = yAxisLabelPadding + (axisLabelWidth > 0 ? fontStyles.fontSize : 0);
-  var chartPadding = detailed ? {
-    left: yAxisLabel ? leftPadding : leftPadding - fontStyles.fontSize * 2,
-    bottom: fontStyles.fontSize * 2,
-    right: 6,
-    // room for scatter circles at edge of chart
-    top: 6 // room for scatter circles at top of chart
-  } : 0;
-  var strokeLinecap = 'round';
-  var strokeLinejoin = 'round';
-  return {
-    chart: {
-      padding: chartPadding,
-      width: width,
-      height: height
-    },
-    group: {
-      padding: chartPadding,
-      width: width,
-      height: height
-    },
-    axis: {
-      style: {
-        axis: {
-          stroke: theme.color.LightDividerNew
-        },
-        axisLabel: _objectSpread(_objectSpread({}, fontStyles), {}, {
-          fill: theme.color.Flint,
-          padding: yAxisLabelPadding
-        }),
-        tickLabels: _objectSpread(_objectSpread({}, fontStyles), {}, {
-          padding: (0, _utils.remToPx)(theme.space[2])
-        }),
-        grid: {
-          fill: 'none',
-          stroke: 'none',
-          pointerEvents: 'painted'
-        }
-      }
-    },
-    dependentAxis: {
-      style: {
-        grid: {
-          stroke: detailed && !grayscale ? theme.color.LightDividerNew : 'none'
-        },
-        axis: {
-          stroke: 'none'
-        },
-        axisLabel: _objectSpread(_objectSpread({}, fontStyles), {}, {
-          fill: theme.color.Flint,
-          padding: yAxisLabelPadding
-        }),
-        tickLabels: _objectSpread(_objectSpread({}, fontStyles), {}, {
-          padding: (0, _utils.remToPx)(theme.space[2])
-        })
-      }
-    },
-    area: {
-      style: {
-        data: {
-          fill: _Defs["default"].BLUE_GRADIENT,
-          opacity: 0.4,
-          stroke: theme.color.CuriousBlue,
-          strokeWidth: 3,
-          strokeLinejoin: strokeLinejoin,
-          strokeLinecap: strokeLinecap
-        }
-      }
-    },
-    scatter: {
-      style: {
-        data: {
-          fill: theme.color.Maya,
-          stroke: theme.color.CuriousBlue,
-          strokeWidth: 2
-        }
-      }
-    },
-    line: {
-      style: {
-        data: {
-          strokeWidth: 3,
-          opacity: 0.8,
-          strokeLinejoin: strokeLinejoin,
-          strokeLinecap: strokeLinecap
-        }
-      }
-    },
-    // Non-standard keys on the VictoryTheme. They're still style objects in
-    // the format Victory expects, because we assign them to the the style prop
-    // manually when needed.
-    // We use theme._labelStyle to calculate tooltip sizes.
-    _labelStyle: [_objectSpread(_objectSpread({}, fontStyles), {}, {
-      fill: theme.color.Black
-    }), _objectSpread(_objectSpread({}, fontStyles), {}, {
-      fill: theme.color.CuriousBlue
-    })],
-    // Victory bug: flyoutStyle isn't being assigned through the theme
-    // See: https://github.com/FormidableLabs/victory/issues/1156
-    _flyoutStyle: {
-      stroke: theme.color.BokaraGrey,
-      strokeWidth: 1,
-      fill: theme.color.LightBackground,
-      pointerEvents: 'none',
-      padding: (0, _utils.remToPx)(theme.space[4]),
-      lineHeight: theme.lineHeight[6],
-      filter: _Defs["default"].DROP_SHADOW
-    },
-    _comparisonColors: [theme.color.Violet, theme.color.Emerald, theme.color.CuriousBlue, theme.color.Buckthorn],
-    _axisLabelWidth: axisLabelWidth,
-    _backgroundStyles: {}
-  };
-}
-function getV5Theme(_ref2) {
-  var chartColors = _ref2.chartColors,
-    width = _ref2.width,
-    height = _ref2.height,
-    detailed = _ref2.detailed,
-    grayscale = _ref2.grayscale,
-    isGrowthRateChart = _ref2.isGrowthRateChart,
-    yAxisLabel = _ref2.yAxisLabel,
-    yTickLabel = _ref2.yTickLabel,
-    data = _ref2.data,
-    theme = _ref2.theme;
   var fontStyles = {
     fontSize: 10,
     fill: theme.palette.neutral[9],
@@ -280,9 +142,9 @@ function getV5Theme(_ref2) {
     fontFamily: theme.fontFamily.body
   };
   var longestYLabel = findLongestYLabel(data, yTickLabel);
-  var _calculateLabelSize3 = calculateLabelSize([longestYLabel], fontStyles),
-    _calculateLabelSize4 = _slicedToArray(_calculateLabelSize3, 1),
-    axisLabelWidth = _calculateLabelSize4[0];
+  var _calculateLabelSize = calculateLabelSize([longestYLabel], fontStyles),
+    _calculateLabelSize2 = _slicedToArray(_calculateLabelSize, 1),
+    axisLabelWidth = _calculateLabelSize2[0];
 
   // Here we have a 1x fontSize difference which is the space between
   // the axis label and the tick labels

package/dist/es/ComparisonChart/ComparisonChart.d.ts

@@ -51,11 +51,11 @@ declare const ThemedChart: import("react").FC<Pick<Pick<VictoryChartProps & {
     tooltipLabel?: ((d: Datum) => undefined | string) | undefined;
 } & {
     theme: Theme;
-}, "data" | "detailed" | "grayscale" | "yAxisLabel" | "yTickLabel" | "chartColors" | "xTickValues" | keyof VictoryChartProps | "xAxisLabel"> & {
+}, "data" | "chartColors" | "detailed" | "grayscale" | "yAxisLabel" | "yTickLabel" | "xTickValues" | keyof VictoryChartProps | "xAxisLabel"> & {
     tooltipLabel?: ((d: Datum) => undefined | string) | undefined;
     xTickLabel?: ((data: chartUtils.Datum['x']) => string) | undefined;
     tooltipTitle?: ((d: Datum) => undefined | string) | undefined;
-} & {}, "data" | "style" | "animate" | "children" | "height" | "width" | "padding" | "name" | "scale" | "horizontal" | "origin" | "range" | "detailed" | "grayscale" | "yAxisLabel" | "yTickLabel" | "chartColors" | "groupComponent" | "events" | "backgroundComponent" | "polar" | "domainPadding" | "tooltipLabel" | "xTickLabel" | "xTickValues" | "domain" | "categories" | "defaultAxes" | "defaultPolarAxes" | "endAngle" | "eventKey" | "innerRadius" | "prependDefaultAxes" | "startAngle" | "colorScale" | "containerComponent" | "externalEventMutations" | "maxDomain" | "minDomain" | "sharedEvents" | "singleQuadrantDomainPadding" | "standalone" | "xAxisLabel" | "tooltipTitle"> & {
+} & {}, "data" | "style" | "animate" | "children" | "name" | "height" | "scale" | "width" | "padding" | "horizontal" | "origin" | "range" | "chartColors" | "detailed" | "grayscale" | "yAxisLabel" | "yTickLabel" | "groupComponent" | "events" | "backgroundComponent" | "polar" | "domainPadding" | "tooltipLabel" | "xTickLabel" | "xTickValues" | "domain" | "categories" | "defaultAxes" | "defaultPolarAxes" | "endAngle" | "eventKey" | "innerRadius" | "prependDefaultAxes" | "startAngle" | "colorScale" | "containerComponent" | "externalEventMutations" | "maxDomain" | "minDomain" | "sharedEvents" | "singleQuadrantDomainPadding" | "standalone" | "xAxisLabel" | "tooltipTitle"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }>;
 export default ThemedChart;

package/dist/es/ComparisonChart/ComparisonChart.js

@@ -55,9 +55,7 @@ function ComparisonChart(_ref) {
     return allData.concat(d);
   }, []);
   var Chart = detailed ? _victory.VictoryChart : _victory.VictoryGroup;
-  var providerTheme = (0, _react.useTheme)();
-  var isV5 = providerTheme.name === 'v5';
-  var chartTheme = isV5 ? _ChartPrimitives.chartUtils.getV5Theme({
+  var chartTheme = _ChartPrimitives.chartUtils.getV5Theme({
     chartColors: chartColors,
     height: height,
     width: width,
@@ -67,17 +65,8 @@ function ComparisonChart(_ref) {
     yTickLabel: yTickLabel,
     theme: theme,
     grayscale: grayscale
-  }) : _ChartPrimitives.chartUtils.getTheme({
-    height: height,
-    width: width,
-    detailed: detailed,
-    data: flatData,
-    yAxisLabel: yAxisLabel,
-    yTickLabel: yTickLabel,
-    theme: theme,
-    grayscale: grayscale
   });
-  var shouldRenderBackground = isV5 && width > 1 && height > 1;
+  var shouldRenderBackground = width > 1 && height > 1;
   var minMaxY = _ChartPrimitives.chartUtils.findYMinMax(flatData);
   var padding = (minMaxY[1] - minMaxY[0]) / 100 * 15;
   var domain = {
@@ -93,7 +82,7 @@ function ComparisonChart(_ref) {
     var _chartTheme$_labelSty2;
     var color = getComparisonColor(i);
     labelStyles.push(_objectSpread(_objectSpread({}, (_chartTheme$_labelSty2 = chartTheme._labelStyle) === null || _chartTheme$_labelSty2 === void 0 ? void 0 : _chartTheme$_labelSty2[0]), {}, {
-      fill: isV5 ? (0, _color["default"])(color).darken(0.4) : color
+      fill: (0, _color["default"])(color).darken(0.4)
     }));
   });
   function groupTooltipLabel(d) {
@@ -167,11 +156,11 @@ function ComparisonChart(_ref) {
               "data-gs": gs("src", "comparisonchart", "comparisonchart.tsx", "comparison-chart", "container", "chart", "victory-portal", "victory-group", "victory-scatter"),
               name: "scatters",
               data: data,
-              style: isV5 ? {
+              style: {
                 data: _objectSpread(_objectSpread({}, (_chartTheme$scatter = chartTheme.scatter) === null || _chartTheme$scatter === void 0 ? void 0 : (_chartTheme$scatter$s = _chartTheme$scatter.style) === null || _chartTheme$scatter$s === void 0 ? void 0 : _chartTheme$scatter$s.data), {}, {
                   fill: getComparisonColor(i)
                 })
-              } : {},
+              },
               animate: animate,
               size: function size(_ref3) {
                 var active = _ref3.active;

package/dist/es/DataGrid/elements.d.ts

@@ -231,82 +231,6 @@ export declare const CategoryInput: typeof Input & StyledComponent<any, {}, {
         GlobalNav: number;
         Toast: number;
     };
-    readonly color: {
-        Dune: string;
-        CuriousBlue: string;
-        FlushMahogany: string;
-        Maroon: string;
-        PinkSwan: string;
-        Matisse: string;
-        HummingBird: string;
-        Primary: string;
-        PrimaryContrast: string;
-        PrimaryFade: string;
-        PrimaryLight: string;
-        PrimaryLightFade: string;
-        PrimaryLightHighlight: string;
-        PrimaryAccent: string;
-        DarkBackground: string;
-        DarkBar: string;
-        DarkHover: string;
-        DarkPrimary: string;
-        DarkSecondary: string;
-        LightBackground: string;
-        LightBar: string;
-        LightDisabled: string;
-        LightDivider: string;
-        LightDividerNew: string;
-        LightHint: string;
-        LightHover: string;
-        LightPrimary: string;
-        LightSecondary: string;
-        BorderGrey: string;
-        Blue: string;
-        BlueFade: string;
-        Green: string;
-        GreenFade: string;
-        GreenBackground: string;
-        Red: string;
-        RedFade: string;
-        Yellow: string;
-        YellowFade: string;
-        YellowHighlight: string;
-        Orange: string;
-        OrangeFill: string;
-        OrangeBackground: string;
-        Error: string;
-        ErrorFade: string;
-        ErrorBackground: string;
-        DraggableDraggingBackground: string;
-        Aquamarine: string;
-        Azure: string;
-        AzureNew: string;
-        AzureFade: string;
-        AzureHighlight: string;
-        Silver: string;
-        BlueNavy: string;
-        Black: string;
-        TurquoiseBlue: string;
-        SummerSky: string;
-        Mondo: string;
-        HeavyMetal: string;
-        BokaraGrey: string;
-        Cyan: string;
-        Eucalyptus: string;
-        Flamingo: string;
-        Zorba: string;
-        Flint: string;
-        Maya: string;
-        Bondi: string;
-        Emerald: string;
-        Carissma: string;
-        Solitude: string;
-        WhiteSmoke: string;
-        Violet: string;
-        FireBrick: string;
-        Purple: string;
-        Buckthorn: string;
-    };
     readonly gradient: {
         main: string;
         neutral: string;
@@ -517,14 +441,14 @@ export declare const CategoryInput: typeof Input & StyledComponent<any, {}, {
             Root: symbol;
         };
     } | undefined;
-    name?: "v4" | "v5" | undefined;
+    name?: "v5" | undefined;
     icons?: {
         [name: string]: {
             [name: string]: string | number | symbol;
         };
     } | undefined;
 }>;
-export declare const CategoryCheckbox: StyledComponent<Pick<import("../Checkbox").CheckboxProps, "value" | "label" | "title" | "className" | "onChange" | "readOnly" | "name" | "wrapLabel"> & {
+export declare const CategoryCheckbox: StyledComponent<Pick<import("../Checkbox").CheckboxProps, "value" | "label" | "title" | "className" | "onChange" | "name" | "wrapLabel" | "readOnly"> & {
     disabled?: boolean | undefined;
     'data-instrumentation'?: string | undefined;
 } & {} & {