UNPKG

altair-graphql-core

Version:

Several of the core logic for altair graphql client

942 lines (941 loc) 30.5 kB
"use strict"; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); exports.createTheme = exports.mergeThemes = exports.hexToRgbStr = exports.themeConfigSchema = exports.oldThemeSchema = exports.themeSchema = exports.foundationColors = void 0; exports.transformOldThemeConfigToNewThemeConfig = transformOldThemeConfigToNewThemeConfig; const deepmerge_1 = __importDefault(require("deepmerge")); const color_name_1 = __importDefault(require("color-name")); const v4_1 = require("zod/v4"); /* Some theming ideas: #1a1c24 - A deep charcoal gray with a subtle blue undertone. #181a1f - A very dark gray with a cool, slightly bluish tint. #212529 - A dark cool gray with a hint of blue. #232931 - A rich, deep blue-gray shade that pairs well with greens. #2d2f33 - A slightly lighter dark gray with a subtle blue cast. If the background color is #1a1c24 (deep charcoal gray), you could use #2d3138 for borders. For a #181a1f (very dark gray) background, consider #262a2e for borders. With a #212529 (dark cool gray) background, #343a40 would make a good border color. If you choose #232931 (rich blue-gray) as the background, #3a4149 would be a suitable border shade. For a #2d2f33 (slightly lighter dark gray) background, #404448 could work well for borders. */ exports.foundationColors = { black: '#201e1f', darkGray: '#a6a6a6', gray: '#eaeaea', lightGray: '#fafafa', white: '#ffffff', green: '#64CB29', blue: '#2d9ee0', rose: '#f45b69', cerise: '#f00faa', red: '#ed6a5a', orange: '#edae49', yellow: '#e4ce44', lightRed: '#cc998d', darkPurple: '#303965', }; exports.themeSchema = (0, v4_1.object)({ /** * CSS transition easing function for smooth animations */ easing: (0, v4_1.string)() .meta({ description: 'CSS transition easing function for smooth animations', }) .optional(), /** * Whether this theme follows system preferences (light/dark mode) */ isSystem: (0, v4_1.boolean)() .meta({ description: 'Whether this theme follows system preferences (light/dark mode)', }) .optional(), /** * Black color used for high contrast elements */ 'color.black': (0, v4_1.string)() .meta({ description: 'Black color used for high contrast elements', }) .optional(), /** * Dark gray color for muted text and secondary elements */ 'color.darkGray': (0, v4_1.string)() .meta({ description: 'Dark gray color for muted text and secondary elements', }) .optional(), /** * Medium gray color for neutral backgrounds and borders */ 'color.gray': (0, v4_1.string)() .meta({ description: 'Medium gray color for neutral backgrounds and borders', }) .optional(), /** * Light gray color for subtle backgrounds and dividers */ 'color.lightGray': (0, v4_1.string)() .meta({ description: 'Light gray color for subtle backgrounds and dividers', }) .optional(), /** * White color for light backgrounds and text */ 'color.white': (0, v4_1.string)() .meta({ description: 'White color for light backgrounds and text', }) .optional(), /** * Green color typically used for success states and positive actions */ 'color.green': (0, v4_1.string)() .meta({ description: 'Green color typically used for success states and positive actions', }) .optional(), /** * Blue color for informational elements and links */ 'color.blue': (0, v4_1.string)() .meta({ description: 'Blue color for informational elements and links', }) .optional(), /** * Rose/pink color for accent elements and highlights */ 'color.rose': (0, v4_1.string)() .meta({ description: 'Rose/pink color for accent elements and highlights', }) .optional(), /** * Bright magenta/cerise color for special emphasis */ 'color.cerise': (0, v4_1.string)() .meta({ description: 'Bright magenta/cerise color for special emphasis', }) .optional(), /** * Red color for error states and destructive actions */ 'color.red': (0, v4_1.string)() .meta({ description: 'Red color for error states and destructive actions', }) .optional(), /** * Orange color for warning states and secondary actions */ 'color.orange': (0, v4_1.string)() .meta({ description: 'Orange color for warning states and secondary actions', }) .optional(), /** * Yellow color for caution states and highlights */ 'color.yellow': (0, v4_1.string)() .meta({ description: 'Yellow color for caution states and highlights', }) .optional(), /** * Light red/salmon color for subtle error indicators */ 'color.lightRed': (0, v4_1.string)() .meta({ description: 'Light red/salmon color for subtle error indicators', }) .optional(), /** * Dark purple color for premium features or special elements */ 'color.darkPurple': (0, v4_1.string)() .meta({ description: 'Dark purple color for premium features or special elements', }) .optional(), /** * Primary brand color used for main interactive elements */ 'color.primary': (0, v4_1.string)() .meta({ description: 'Primary brand color used for main interactive elements', }) .optional(), /** * Secondary brand color used for supporting interactive elements */ 'color.secondary': (0, v4_1.string)() .meta({ description: 'Secondary brand color used for supporting interactive elements', }) .optional(), /** * Tertiary brand color used for accent and decorative elements */ 'color.tertiary': (0, v4_1.string)() .meta({ description: 'Tertiary brand color used for accent and decorative elements', }) .optional(), /** * Main background color for the application */ 'color.bg': (0, v4_1.string)() .meta({ description: 'Main background color for the application' }) .optional(), /** * Alternative background color for cards, panels, and sections */ 'color.offBg': (0, v4_1.string)() .meta({ description: 'Alternative background color for cards, panels, and sections', }) .optional(), /** * Primary text color for readable content */ 'color.font': (0, v4_1.string)() .meta({ description: 'Primary text color for readable content' }) .optional(), /** * Secondary text color for less emphasized content */ 'color.offFont': (0, v4_1.string)() .meta({ description: 'Secondary text color for less emphasized content', }) .optional(), /** * Primary border color for main UI elements */ 'color.border': (0, v4_1.string)() .meta({ description: 'Primary border color for main UI elements', }) .optional(), /** * Secondary border color for subtle divisions */ 'color.offBorder': (0, v4_1.string)() .meta({ description: 'Secondary border color for subtle divisions', }) .optional(), /** * Background color specifically for the header section */ 'color.headerBg': (0, v4_1.string)() .meta({ description: 'Background color specifically for the header section', }) .optional(), /** * Base font size in pixels used for calculations */ 'fontSize.base': (0, v4_1.number)() .meta({ description: 'Base font size in pixels used for calculations', }) .optional(), /** * Root em base size in pixels for responsive typography */ 'fontSize.remBase': (0, v4_1.number)() .meta({ description: 'Root em base size in pixels for responsive typography', }) .optional(), /** * Standard body text font size */ 'fontSize.body': (0, v4_1.number)() .meta({ description: 'Standard body text font size' }) .optional(), /** * Smaller body text font size for secondary content */ 'fontSize.bodySmaller': (0, v4_1.number)() .meta({ description: 'Smaller body text font size for secondary content', }) .optional(), /** * Font size for code editor text */ 'fontSize.code': (0, v4_1.number)() .meta({ description: 'Font size for code editor text', }) .optional(), /** * Default system font stack for UI elements */ 'fontFamily.default': (0, v4_1.string)() .meta({ description: 'Default system font stack for UI elements', }) .optional(), /** * Font family specifically for code editor and monospace content */ 'fontFamily.code': (0, v4_1.string)() .meta({ description: 'Font family specifically for code editor and monospace content', }) .optional(), /** * Color used for drop shadows and elevation effects */ 'shadow.color': (0, v4_1.string)() .meta({ description: 'Color used for drop shadows and elevation effects', }) .optional(), /** * Opacity level for shadow effects (0.0 to 1.0) */ 'shadow.opacity': (0, v4_1.number)() .meta({ description: 'Opacity level for shadow effects (0.0 to 1.0)', }) .min(0) .max(1) .optional(), /** * Color for code comments and documentation */ 'color.editor.comment': (0, v4_1.string)() .meta({ description: 'Color for code comments and documentation', }) .optional(), /** * Color for string literals in code */ 'color.editor.string': (0, v4_1.string)() .meta({ description: 'Color for string literals in code' }) .optional(), /** * Color for numeric literals in code */ 'color.editor.number': (0, v4_1.string)() .meta({ description: 'Color for numeric literals in code' }) .optional(), /** * Color for variable names and identifiers */ 'color.editor.variable': (0, v4_1.string)() .meta({ description: 'Color for variable names and identifiers', }) .optional(), /** * Color for programming language keywords */ 'color.editor.keyword': (0, v4_1.string)() .meta({ description: 'Color for programming language keywords', }) .optional(), /** * Color for atomic values like boolean literals */ 'color.editor.atom': (0, v4_1.string)() .meta({ description: 'Color for atomic values like boolean literals', }) .optional(), /** * Color for HTML/XML/GraphQL attributes */ 'color.editor.attribute': (0, v4_1.string)() .meta({ description: 'Color for HTML/XML/GraphQL attributes', }) .optional(), /** * Color for properties */ 'color.editor.property': (0, v4_1.string)() .meta({ description: 'Color for properties' }) .optional(), /** * Color for punctuation marks like brackets and commas */ 'color.editor.punctuation': (0, v4_1.string)() .meta({ description: 'Color for punctuation marks like brackets and commas', }) .optional(), /** * Color for function, class, type definitions */ 'color.editor.definition': (0, v4_1.string)() .meta({ description: 'Color for function, class, type definitions', }) .optional(), /** * Color for built-in functions and types */ 'color.editor.builtin': (0, v4_1.string)() .meta({ description: 'Color for built-in functions and types', }) .optional(), /** * Color for the text cursor in the editor */ 'color.editor.cursor': (0, v4_1.string)() .meta({ description: 'Color for the text cursor in the editor', }) .optional(), }); const requiredThemeSchema = exports.themeSchema.required(); const themeDefaults = { easing: 'ease', isSystem: false, 'color.black': exports.foundationColors.black, 'color.darkGray': exports.foundationColors.darkGray, 'color.gray': exports.foundationColors.gray, 'color.lightGray': exports.foundationColors.lightGray, 'color.white': exports.foundationColors.white, 'color.green': exports.foundationColors.green, 'color.blue': exports.foundationColors.blue, 'color.rose': exports.foundationColors.rose, 'color.cerise': exports.foundationColors.cerise, 'color.red': exports.foundationColors.red, 'color.orange': exports.foundationColors.orange, 'color.yellow': exports.foundationColors.yellow, 'color.lightRed': exports.foundationColors.lightRed, 'color.darkPurple': exports.foundationColors.darkPurple, 'color.primary': exports.foundationColors.green, 'color.secondary': exports.foundationColors.blue, 'color.tertiary': exports.foundationColors.rose, 'color.bg': exports.foundationColors.lightGray, 'color.offBg': exports.foundationColors.white, 'color.font': exports.foundationColors.black, 'color.offFont': exports.foundationColors.darkGray, 'color.border': exports.foundationColors.darkGray, 'color.offBorder': exports.foundationColors.gray, 'color.headerBg': exports.foundationColors.white, 'fontSize.base': 24, 'fontSize.remBase': 24, 'fontSize.body': 13, 'fontSize.bodySmaller': 12, 'fontSize.code': 12, 'fontFamily.default': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', 'fontFamily.code': 'JetBrains Mono, monospace', 'shadow.color': exports.foundationColors.black, 'shadow.opacity': 0.1, 'color.editor.comment': exports.foundationColors.darkGray, 'color.editor.string': exports.foundationColors.orange, 'color.editor.number': exports.foundationColors.orange, 'color.editor.variable': exports.foundationColors.black, 'color.editor.keyword': exports.foundationColors.blue, 'color.editor.atom': exports.foundationColors.black, 'color.editor.attribute': exports.foundationColors.green, 'color.editor.property': exports.foundationColors.blue, 'color.editor.punctuation': exports.foundationColors.blue, 'color.editor.definition': exports.foundationColors.orange, 'color.editor.builtin': exports.foundationColors.orange, 'color.editor.cursor': exports.foundationColors.blue, }; const colorsSchema = (0, v4_1.object)({ /** * Black color used for high contrast elements */ black: (0, v4_1.string)() .meta({ description: 'Black color used for high contrast elements', }) .optional(), /** * Dark gray color for muted text and secondary elements */ darkGray: (0, v4_1.string)() .meta({ description: 'Dark gray color for muted text and secondary elements', }) .optional(), /** * Medium gray color for neutral backgrounds and borders */ gray: (0, v4_1.string)() .meta({ description: 'Medium gray color for neutral backgrounds and borders', }) .optional(), /** * Light gray color for subtle backgrounds and dividers */ lightGray: (0, v4_1.string)() .meta({ description: 'Light gray color for subtle backgrounds and dividers', }) .optional(), /** * White color for light backgrounds and text */ white: (0, v4_1.string)() .meta({ description: 'White color for light backgrounds and text', }) .optional(), /** * Green color typically used for success states and positive actions */ green: (0, v4_1.string)() .meta({ description: 'Green color typically used for success states and positive actions', }) .optional(), /** * Blue color for informational elements and links */ blue: (0, v4_1.string)() .meta({ description: 'Blue color for informational elements and links', }) .optional(), /** * Rose/pink color for accent elements and highlights */ rose: (0, v4_1.string)() .meta({ description: 'Rose/pink color for accent elements and highlights', }) .optional(), /** * Bright magenta/cerise color for special emphasis */ cerise: (0, v4_1.string)() .meta({ description: 'Bright magenta/cerise color for special emphasis', }) .optional(), /** * Red color for error states and destructive actions */ red: (0, v4_1.string)() .meta({ description: 'Red color for error states and destructive actions', }) .optional(), /** * Orange color for warning states and secondary actions */ orange: (0, v4_1.string)() .meta({ description: 'Orange color for warning states and secondary actions', }) .optional(), /** * Yellow color for caution states and highlights */ yellow: (0, v4_1.string)() .meta({ description: 'Yellow color for caution states and highlights', }) .optional(), /** * Light red/salmon color for subtle error indicators */ lightRed: (0, v4_1.string)() .meta({ description: 'Light red/salmon color for subtle error indicators', }) .optional(), /** * Dark purple color for premium features or special elements */ darkPurple: (0, v4_1.string)() .meta({ description: 'Dark purple color for premium features or special elements', }) .optional(), /** * Primary brand color used for main interactive elements */ primary: (0, v4_1.string)() .meta({ description: 'Primary brand color used for main interactive elements', }) .optional(), /** * Secondary brand color used for supporting interactive elements */ secondary: (0, v4_1.string)() .meta({ description: 'Secondary brand color used for supporting interactive elements', }) .optional(), /** * Tertiary brand color used for accent and decorative elements */ tertiary: (0, v4_1.string)() .meta({ description: 'Tertiary brand color used for accent and decorative elements', }) .optional(), /** * Main background color for the application */ bg: (0, v4_1.string)() .meta({ description: 'Main background color for the application' }) .optional(), /** * Alternative background color for cards, panels, and sections */ offBg: (0, v4_1.string)() .meta({ description: 'Alternative background color for cards, panels, and sections', }) .optional(), /** * Primary text color for readable content */ font: (0, v4_1.string)() .meta({ description: 'Primary text color for readable content' }) .optional(), /** * Secondary text color for less emphasized content */ offFont: (0, v4_1.string)() .meta({ description: 'Secondary text color for less emphasized content', }) .optional(), /** * Primary border color for main UI elements */ border: (0, v4_1.string)() .meta({ description: 'Primary border color for main UI elements', }) .optional(), /** * Secondary border color for subtle divisions */ offBorder: (0, v4_1.string)() .meta({ description: 'Secondary border color for subtle divisions', }) .optional(), /** * Background color specifically for the header section */ headerBg: (0, v4_1.string)() .meta({ description: 'Background color specifically for the header section', }) .optional(), }); const typeSchema = (0, v4_1.object)({ fontSize: (0, v4_1.object)({ /** * Base font size in pixels used for calculations */ base: (0, v4_1.number)() .meta({ description: 'Base font size in pixels used for calculations', }) .optional(), /** * Root em base size in pixels for responsive typography */ remBase: (0, v4_1.number)() .meta({ description: 'Root em base size in pixels for responsive typography', }) .optional(), /** * Standard body text font size */ body: (0, v4_1.number)().meta({ description: 'Standard body text font size' }).optional(), /** * Smaller body text font size for secondary content */ bodySmaller: (0, v4_1.number)() .meta({ description: 'Smaller body text font size for secondary content', }) .optional(), }), fontFamily: (0, v4_1.object)({ /** * Default system font stack for UI elements */ default: (0, v4_1.string)() .meta({ description: 'Default system font stack for UI elements', }) .optional(), }).optional(), }); const editorThemeSchema = (0, v4_1.object)({ fontFamily: (0, v4_1.object)({ /** * Font family specifically for code editor and monospace content */ default: (0, v4_1.string)() .meta({ description: 'Font family specifically for code editor and monospace content', }) .optional(), }).optional(), /** * Font size for code editor text */ fontSize: (0, v4_1.number)() .meta({ description: 'Font size for code editor text', }) .optional(), colors: (0, v4_1.object)({ /** * Color for code comments and documentation */ comment: (0, v4_1.string)() .meta({ description: 'Color for code comments and documentation', }) .optional(), /** * Color for string literals in code */ string: (0, v4_1.string)() .meta({ description: 'Color for string literals in code' }) .optional(), /** * Color for numeric literals in code */ number: (0, v4_1.string)() .meta({ description: 'Color for numeric literals in code' }) .optional(), /** * Color for variable names and identifiers */ variable: (0, v4_1.string)() .meta({ description: 'Color for variable names and identifiers', }) .optional(), /** * Color for programming language keywords */ keyword: (0, v4_1.string)() .meta({ description: 'Color for programming language keywords', }) .optional(), /** * Color for atomic values like boolean literals */ atom: (0, v4_1.string)() .meta({ description: 'Color for atomic values like boolean literals', }) .optional(), /** * Color for HTML/XML/GraphQL attributes */ attribute: (0, v4_1.string)() .meta({ description: 'Color for HTML/XML/GraphQL attributes', }) .optional(), /** * Color for properties */ property: (0, v4_1.string)().meta({ description: 'Color for properties' }).optional(), /** * Color for punctuation marks like brackets and commas */ punctuation: (0, v4_1.string)() .meta({ description: 'Color for punctuation marks like brackets and commas', }) .optional(), /** * Color for function, class, type definitions */ definition: (0, v4_1.string)() .meta({ description: 'Color for function, class, type definitions', }) .optional(), /** * Color for built-in functions and types */ builtin: (0, v4_1.string)() .meta({ description: 'Color for built-in functions and types', }) .optional(), /** * Color for the text cursor in the editor */ cursor: (0, v4_1.string)() .meta({ description: 'Color for the text cursor in the editor', }) .optional(), }).optional(), }); exports.oldThemeSchema = (0, v4_1.object)({ /** * CSS transition easing function for smooth animations */ easing: (0, v4_1.string)() .meta({ description: 'CSS transition easing function for smooth animations', }) .optional(), colors: colorsSchema.optional(), type: typeSchema.optional(), /** * Whether this theme follows system preferences (light/dark mode) */ isSystem: (0, v4_1.boolean)() .meta({ description: 'Whether this theme follows system preferences (light/dark mode)', }) .optional(), shadow: (0, v4_1.object)({ /** * Color used for drop shadows and elevation effects */ color: (0, v4_1.string)() .meta({ description: 'Color used for drop shadows and elevation effects', }) .optional(), /** * Opacity level for shadow effects (0.0 to 1.0) */ opacity: (0, v4_1.number)() .meta({ description: 'Opacity level for shadow effects (0.0 to 1.0)', }) .min(0) .max(1) .optional(), }).optional(), editor: editorThemeSchema.optional(), }).meta({ deprecated: true }); function transformOldThemeConfigToNewThemeConfig(oldTheme) { // Transform nested theme structure into flat theme structure const res = { easing: oldTheme.easing, isSystem: oldTheme.isSystem, 'color.bg': oldTheme.colors?.bg, 'color.offBg': oldTheme.colors?.offBg, 'color.font': oldTheme.colors?.font, 'color.offFont': oldTheme.colors?.offFont, 'color.border': oldTheme.colors?.border, 'color.offBorder': oldTheme.colors?.offBorder, 'color.headerBg': oldTheme.colors?.headerBg, 'color.black': oldTheme.colors?.black, 'color.darkGray': oldTheme.colors?.darkGray, 'color.gray': oldTheme.colors?.gray, 'color.lightGray': oldTheme.colors?.lightGray, 'color.white': oldTheme.colors?.white, 'color.green': oldTheme.colors?.green, 'color.blue': oldTheme.colors?.blue, 'color.rose': oldTheme.colors?.rose, 'color.cerise': oldTheme.colors?.cerise, 'color.red': oldTheme.colors?.red, 'color.orange': oldTheme.colors?.orange, 'color.yellow': oldTheme.colors?.yellow, 'color.lightRed': oldTheme.colors?.lightRed, 'color.darkPurple': oldTheme.colors?.darkPurple, 'color.primary': oldTheme.colors?.primary, 'color.secondary': oldTheme.colors?.secondary, 'color.tertiary': oldTheme.colors?.tertiary, 'fontSize.base': oldTheme.type?.fontSize.base, 'fontSize.remBase': oldTheme.type?.fontSize.remBase, 'fontSize.body': oldTheme.type?.fontSize.body, 'fontSize.bodySmaller': oldTheme.type?.fontSize.bodySmaller, 'fontSize.code': oldTheme.editor?.fontSize, 'fontFamily.default': oldTheme.type?.fontFamily?.default, 'fontFamily.code': oldTheme.editor?.fontFamily?.default, 'shadow.color': oldTheme.shadow?.color, 'shadow.opacity': oldTheme.shadow?.opacity, 'color.editor.comment': oldTheme.editor?.colors?.comment, 'color.editor.string': oldTheme.editor?.colors?.string, 'color.editor.number': oldTheme.editor?.colors?.number, 'color.editor.variable': oldTheme.editor?.colors?.variable, 'color.editor.keyword': oldTheme.editor?.colors?.keyword, 'color.editor.atom': oldTheme.editor?.colors?.atom, 'color.editor.attribute': oldTheme.editor?.colors?.attribute, 'color.editor.property': oldTheme.editor?.colors?.property, 'color.editor.punctuation': oldTheme.editor?.colors?.punctuation, 'color.editor.definition': oldTheme.editor?.colors?.definition, 'color.editor.builtin': oldTheme.editor?.colors?.builtin, 'color.editor.cursor': oldTheme.editor?.colors?.cursor, }; const final = {}; // Remove undefined values Object.entries(res).forEach(([key, value]) => { if (value) { final[key] = value; } }); return final; } exports.themeConfigSchema = (0, v4_1.union)([exports.themeSchema, exports.oldThemeSchema]); const colorOrHexToRgb = (hex) => { const rgb = color_name_1.default[hex]; if (rgb) { return { r: rgb[0], g: rgb[1], b: rgb[2], }; } const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); if (!result || result.length < 4) { return; } return { r: parseInt(result[1] ?? '', 16), g: parseInt(result[2] ?? '', 16), b: parseInt(result[3] ?? '', 16), }; }; const hexToRgbStr = (hex) => { if (!hex) { return ''; } const rgb = colorOrHexToRgb(hex); if (!rgb) { return ''; } const { r, g, b } = rgb; return `${r}, ${g}, ${b}`; }; exports.hexToRgbStr = hexToRgbStr; const mergeThemes = (...customThemes) => { return deepmerge_1.default.all(customThemes); }; exports.mergeThemes = mergeThemes; const createTheme = (customTheme, ...extraThemes) => { return deepmerge_1.default.all([themeDefaults, customTheme, ...extraThemes]); }; exports.createTheme = createTheme; //# sourceMappingURL=theme.js.map