@lightdash/common 0.2251.4 → 0.2251.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,20 +2,27 @@
2
2
  * Theme color constants for ECharts styling
3
3
  * Centralizes color usage across all chart style utilities
4
4
  * Using Mantine default color palette
5
+ *
6
+ * IMPORTANT: These use CSS variables WITH fallback values because CSS variables
7
+ * are not resolved when exporting charts to images via ECharts.getDataURL().
8
+ * The fallback ensures colors work in both DOM rendering and image exports.
9
+ *
10
+ * Light mode colors are used as fallbacks since charts are typically exported
11
+ * with white backgrounds (MinimalSavedExplorer uses backgroundColor: 'white').
5
12
  */
6
- export declare const GRAY_0 = "var(--mantine-color-ldGray-0)";
7
- export declare const GRAY_1 = "var(--mantine-color-ldGray-1)";
8
- export declare const GRAY_2 = "var(--mantine-color-ldGray-2)";
9
- export declare const GRAY_3 = "var(--mantine-color-ldGray-3)";
10
- export declare const GRAY_4 = "var(--mantine-color-ldGray-4)";
11
- export declare const GRAY_5 = "var(--mantine-color-ldGray-5)";
12
- export declare const GRAY_6 = "var(--mantine-color-ldGray-6)";
13
- export declare const GRAY_7 = "var(--mantine-color-ldGray-7)";
14
- export declare const GRAY_8 = "var(--mantine-color-ldGray-8)";
15
- export declare const GRAY_9 = "var(--mantine-color-ldGray-9)";
16
- export declare const WHITE = "var(--mantine-color-white)";
17
- export declare const FOREGROUND = "var(--mantine-color-foreground-0)";
18
- export declare const BACKGROUND = "var(--mantine-color-background-0)";
19
- export declare const TOOLTIP_BACKGROUND = "var(--mantine-color-background-1)";
20
- export declare const AXIS_TITLE_COLOR = "var(--mantine-color-gray-6)";
13
+ export declare const GRAY_0 = "var(--mantine-color-ldGray-0, #f8f9fa)";
14
+ export declare const GRAY_1 = "var(--mantine-color-ldGray-1, #f1f3f5)";
15
+ export declare const GRAY_2 = "var(--mantine-color-ldGray-2, #e9ecef)";
16
+ export declare const GRAY_3 = "var(--mantine-color-ldGray-3, #dee2e6)";
17
+ export declare const GRAY_4 = "var(--mantine-color-ldGray-4, #ced4da)";
18
+ export declare const GRAY_5 = "var(--mantine-color-ldGray-5, #adb5bd)";
19
+ export declare const GRAY_6 = "var(--mantine-color-ldGray-6, #868e96)";
20
+ export declare const GRAY_7 = "var(--mantine-color-ldGray-7, #495057)";
21
+ export declare const GRAY_8 = "var(--mantine-color-ldGray-8, #343a40)";
22
+ export declare const GRAY_9 = "var(--mantine-color-ldGray-9, #212529)";
23
+ export declare const WHITE = "var(--mantine-color-white, #ffffff)";
24
+ export declare const FOREGROUND = "var(--mantine-color-foreground-0, #1A1B1E)";
25
+ export declare const BACKGROUND = "var(--mantine-color-background-0, #FEFEFE)";
26
+ export declare const TOOLTIP_BACKGROUND = "var(--mantine-color-background-0, #FEFEFE)";
27
+ export declare const AXIS_TITLE_COLOR = "var(--mantine-color-gray-6, #868e96)";
21
28
  //# sourceMappingURL=themeColors.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"themeColors.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AACtD,eAAO,MAAM,MAAM,kCAAkC,CAAC;AAGtD,eAAO,MAAM,KAAK,+BAA+B,CAAC;AAElD,eAAO,MAAM,UAAU,sCAAsC,CAAC;AAC9D,eAAO,MAAM,UAAU,sCAAsC,CAAC;AAC9D,eAAO,MAAM,kBAAkB,sCAAsC,CAAC;AAEtE,eAAO,MAAM,gBAAgB,gCAAgC,CAAC"}
1
+ {"version":3,"file":"themeColors.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAGH,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAC/D,eAAO,MAAM,MAAM,2CAA2C,CAAC;AAG/D,eAAO,MAAM,KAAK,wCAAwC,CAAC;AAG3D,eAAO,MAAM,UAAU,+CAA+C,CAAC;AACvE,eAAO,MAAM,UAAU,+CAA+C,CAAC;AACvE,eAAO,MAAM,kBAAkB,+CAA+C,CAAC;AAG/E,eAAO,MAAM,gBAAgB,yCAAyC,CAAC"}
@@ -3,23 +3,33 @@
3
3
  * Theme color constants for ECharts styling
4
4
  * Centralizes color usage across all chart style utilities
5
5
  * Using Mantine default color palette
6
+ *
7
+ * IMPORTANT: These use CSS variables WITH fallback values because CSS variables
8
+ * are not resolved when exporting charts to images via ECharts.getDataURL().
9
+ * The fallback ensures colors work in both DOM rendering and image exports.
10
+ *
11
+ * Light mode colors are used as fallbacks since charts are typically exported
12
+ * with white backgrounds (MinimalSavedExplorer uses backgroundColor: 'white').
6
13
  */
7
14
  Object.defineProperty(exports, "__esModule", { value: true });
8
15
  exports.AXIS_TITLE_COLOR = exports.TOOLTIP_BACKGROUND = exports.BACKGROUND = exports.FOREGROUND = exports.WHITE = exports.GRAY_9 = exports.GRAY_8 = exports.GRAY_7 = exports.GRAY_6 = exports.GRAY_5 = exports.GRAY_4 = exports.GRAY_3 = exports.GRAY_2 = exports.GRAY_1 = exports.GRAY_0 = void 0;
9
- exports.GRAY_0 = 'var(--mantine-color-ldGray-0)';
10
- exports.GRAY_1 = 'var(--mantine-color-ldGray-1)';
11
- exports.GRAY_2 = 'var(--mantine-color-ldGray-2)';
12
- exports.GRAY_3 = 'var(--mantine-color-ldGray-3)';
13
- exports.GRAY_4 = 'var(--mantine-color-ldGray-4)';
14
- exports.GRAY_5 = 'var(--mantine-color-ldGray-5)';
15
- exports.GRAY_6 = 'var(--mantine-color-ldGray-6)';
16
- exports.GRAY_7 = 'var(--mantine-color-ldGray-7)';
17
- exports.GRAY_8 = 'var(--mantine-color-ldGray-8)';
18
- exports.GRAY_9 = 'var(--mantine-color-ldGray-9)';
16
+ // Light mode gray scale (from mantineTheme.ts lightModeColors.ldGray)
17
+ exports.GRAY_0 = 'var(--mantine-color-ldGray-0, #f8f9fa)';
18
+ exports.GRAY_1 = 'var(--mantine-color-ldGray-1, #f1f3f5)';
19
+ exports.GRAY_2 = 'var(--mantine-color-ldGray-2, #e9ecef)';
20
+ exports.GRAY_3 = 'var(--mantine-color-ldGray-3, #dee2e6)';
21
+ exports.GRAY_4 = 'var(--mantine-color-ldGray-4, #ced4da)';
22
+ exports.GRAY_5 = 'var(--mantine-color-ldGray-5, #adb5bd)';
23
+ exports.GRAY_6 = 'var(--mantine-color-ldGray-6, #868e96)';
24
+ exports.GRAY_7 = 'var(--mantine-color-ldGray-7, #495057)';
25
+ exports.GRAY_8 = 'var(--mantine-color-ldGray-8, #343a40)';
26
+ exports.GRAY_9 = 'var(--mantine-color-ldGray-9, #212529)';
19
27
  // White
20
- exports.WHITE = 'var(--mantine-color-white)';
21
- exports.FOREGROUND = 'var(--mantine-color-foreground-0)';
22
- exports.BACKGROUND = 'var(--mantine-color-background-0)';
23
- exports.TOOLTIP_BACKGROUND = 'var(--mantine-color-background-1)';
24
- exports.AXIS_TITLE_COLOR = 'var(--mantine-color-gray-6)';
28
+ exports.WHITE = 'var(--mantine-color-white, #ffffff)';
29
+ // Foreground and background colors with light mode fallbacks
30
+ exports.FOREGROUND = 'var(--mantine-color-foreground-0, #1A1B1E)';
31
+ exports.BACKGROUND = 'var(--mantine-color-background-0, #FEFEFE)';
32
+ exports.TOOLTIP_BACKGROUND = 'var(--mantine-color-background-0, #FEFEFE)';
33
+ // Axis title color (Mantine gray.6)
34
+ exports.AXIS_TITLE_COLOR = 'var(--mantine-color-gray-6, #868e96)';
25
35
  //# sourceMappingURL=themeColors.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"themeColors.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAEU,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AACzC,QAAA,MAAM,GAAG,+BAA+B,CAAC;AAEtD,QAAQ;AACK,QAAA,KAAK,GAAG,4BAA4B,CAAC;AAErC,QAAA,UAAU,GAAG,mCAAmC,CAAC;AACjD,QAAA,UAAU,GAAG,mCAAmC,CAAC;AACjD,QAAA,kBAAkB,GAAG,mCAAmC,CAAC;AAEzD,QAAA,gBAAgB,GAAG,6BAA6B,CAAC"}
1
+ {"version":3,"file":"themeColors.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;GAWG;;;AAEH,sEAAsE;AACzD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAE/D,QAAQ;AACK,QAAA,KAAK,GAAG,qCAAqC,CAAC;AAE3D,6DAA6D;AAChD,QAAA,UAAU,GAAG,4CAA4C,CAAC;AAC1D,QAAA,UAAU,GAAG,4CAA4C,CAAC;AAC1D,QAAA,kBAAkB,GAAG,4CAA4C,CAAC;AAE/E,oCAAoC;AACvB,QAAA,gBAAgB,GAAG,sCAAsC,CAAC"}
@@ -10,13 +10,13 @@ import { type Series } from '../../../types/savedCharts';
10
10
  export declare const getValueLabelStyle: (position: "left" | "right" | "top" | "bottom" | "inside" | undefined, type: Series["type"]) => {
11
11
  readonly fontSize: 11;
12
12
  readonly fontWeight: "500" | "400";
13
- readonly color: "var(--mantine-color-foreground-0)";
13
+ readonly color: "var(--mantine-color-foreground-0, #1A1B1E)";
14
14
  } | {
15
15
  textBorderColor: string;
16
16
  textBorderWidth: number;
17
17
  textBorderType: string;
18
18
  fontSize: 11;
19
19
  fontWeight: "500" | "400";
20
- color: "var(--mantine-color-foreground-0)";
20
+ color: "var(--mantine-color-foreground-0, #1A1B1E)";
21
21
  };
22
22
  //# sourceMappingURL=valueLabelStyles.d.ts.map