@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.
Files changed (19) hide show
  1. package/dist/cjs/.tsbuildinfo +1 -1
  2. package/dist/cjs/visualizations/helpers/styles/themeColors.d.ts +22 -15
  3. package/dist/cjs/visualizations/helpers/styles/themeColors.d.ts.map +1 -1
  4. package/dist/cjs/visualizations/helpers/styles/themeColors.js +25 -15
  5. package/dist/cjs/visualizations/helpers/styles/themeColors.js.map +1 -1
  6. package/dist/cjs/visualizations/helpers/styles/valueLabelStyles.d.ts +2 -2
  7. package/dist/esm/.tsbuildinfo +1 -1
  8. package/dist/esm/visualizations/helpers/styles/themeColors.d.ts +22 -15
  9. package/dist/esm/visualizations/helpers/styles/themeColors.d.ts.map +1 -1
  10. package/dist/esm/visualizations/helpers/styles/themeColors.js +25 -15
  11. package/dist/esm/visualizations/helpers/styles/themeColors.js.map +1 -1
  12. package/dist/esm/visualizations/helpers/styles/valueLabelStyles.d.ts +2 -2
  13. package/dist/types/.tsbuildinfo +1 -1
  14. package/dist/types/visualizations/helpers/styles/themeColors.d.ts +22 -15
  15. package/dist/types/visualizations/helpers/styles/themeColors.d.ts.map +1 -1
  16. package/dist/types/visualizations/helpers/styles/themeColors.js +25 -15
  17. package/dist/types/visualizations/helpers/styles/themeColors.js.map +1 -1
  18. package/dist/types/visualizations/helpers/styles/valueLabelStyles.d.ts +2 -2
  19. package/package.json +1 -1
package/dist/types/visualizations/helpers/styles/themeColors.d.ts CHANGED
@@ -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
package/dist/types/visualizations/helpers/styles/themeColors.d.ts.map CHANGED
@@ -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"}
package/dist/types/visualizations/helpers/styles/themeColors.js CHANGED
@@ -2,21 +2,31 @@
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 const GRAY_0 = 'var(--mantine-color-ldGray-0)';
7
- export const GRAY_1 = 'var(--mantine-color-ldGray-1)';
8
- export const GRAY_2 = 'var(--mantine-color-ldGray-2)';
9
- export const GRAY_3 = 'var(--mantine-color-ldGray-3)';
10
- export const GRAY_4 = 'var(--mantine-color-ldGray-4)';
11
- export const GRAY_5 = 'var(--mantine-color-ldGray-5)';
12
- export const GRAY_6 = 'var(--mantine-color-ldGray-6)';
13
- export const GRAY_7 = 'var(--mantine-color-ldGray-7)';
14
- export const GRAY_8 = 'var(--mantine-color-ldGray-8)';
15
- export const GRAY_9 = 'var(--mantine-color-ldGray-9)';
13
+ // Light mode gray scale (from mantineTheme.ts lightModeColors.ldGray)
14
+ export const GRAY_0 = 'var(--mantine-color-ldGray-0, #f8f9fa)';
15
+ export const GRAY_1 = 'var(--mantine-color-ldGray-1, #f1f3f5)';
16
+ export const GRAY_2 = 'var(--mantine-color-ldGray-2, #e9ecef)';
17
+ export const GRAY_3 = 'var(--mantine-color-ldGray-3, #dee2e6)';
18
+ export const GRAY_4 = 'var(--mantine-color-ldGray-4, #ced4da)';
19
+ export const GRAY_5 = 'var(--mantine-color-ldGray-5, #adb5bd)';
20
+ export const GRAY_6 = 'var(--mantine-color-ldGray-6, #868e96)';
21
+ export const GRAY_7 = 'var(--mantine-color-ldGray-7, #495057)';
22
+ export const GRAY_8 = 'var(--mantine-color-ldGray-8, #343a40)';
23
+ export const GRAY_9 = 'var(--mantine-color-ldGray-9, #212529)';
16
24
  // White
17
- export const WHITE = 'var(--mantine-color-white)';
18
- export const FOREGROUND = 'var(--mantine-color-foreground-0)';
19
- export const BACKGROUND = 'var(--mantine-color-background-0)';
20
- export const TOOLTIP_BACKGROUND = 'var(--mantine-color-background-1)';
21
- export const AXIS_TITLE_COLOR = 'var(--mantine-color-gray-6)';
25
+ export const WHITE = 'var(--mantine-color-white, #ffffff)';
26
+ // Foreground and background colors with light mode fallbacks
27
+ export const FOREGROUND = 'var(--mantine-color-foreground-0, #1A1B1E)';
28
+ export const BACKGROUND = 'var(--mantine-color-background-0, #FEFEFE)';
29
+ export const TOOLTIP_BACKGROUND = 'var(--mantine-color-background-0, #FEFEFE)';
30
+ // Axis title color (Mantine gray.6)
31
+ export const AXIS_TITLE_COLOR = 'var(--mantine-color-gray-6, #868e96)';
22
32
  //# sourceMappingURL=themeColors.js.map
package/dist/types/visualizations/helpers/styles/themeColors.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"themeColors.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AACtD,MAAM,CAAC,MAAM,MAAM,GAAG,+BAA+B,CAAC;AAEtD,QAAQ;AACR,MAAM,CAAC,MAAM,KAAK,GAAG,4BAA4B,CAAC;AAElD,MAAM,CAAC,MAAM,UAAU,GAAG,mCAAmC,CAAC;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAG,mCAAmC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,mCAAmC,CAAC;AAEtE,MAAM,CAAC,MAAM,gBAAgB,GAAG,6BAA6B,CAAC"}
1
+ {"version":3,"file":"themeColors.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,sEAAsE;AACtE,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAC/D,MAAM,CAAC,MAAM,MAAM,GAAG,wCAAwC,CAAC;AAE/D,QAAQ;AACR,MAAM,CAAC,MAAM,KAAK,GAAG,qCAAqC,CAAC;AAE3D,6DAA6D;AAC7D,MAAM,CAAC,MAAM,UAAU,GAAG,4CAA4C,CAAC;AACvE,MAAM,CAAC,MAAM,UAAU,GAAG,4CAA4C,CAAC;AACvE,MAAM,CAAC,MAAM,kBAAkB,GAAG,4CAA4C,CAAC;AAE/E,oCAAoC;AACpC,MAAM,CAAC,MAAM,gBAAgB,GAAG,sCAAsC,CAAC"}
package/dist/types/visualizations/helpers/styles/valueLabelStyles.d.ts CHANGED
@@ -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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lightdash/common",
3
- "version": "0.2251.4",
3
+ "version": "0.2251.5",
4
4
  "main": "dist/cjs/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",