From 7950e5d50a6d78f78ba6a564bce3d3f509236448 Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Mon, 11 Nov 2024 18:08:32 +0100 Subject: [PATCH] [Visual Refresh] Provide legacy JSON tokens via EUI (#8125) --- packages/eui/scripts/compile-scss.js | 5 + .../theme/_json/eui_theme_borealis_dark.json | 314 +++++++++++++++++ .../_json/eui_theme_borealis_dark.json.d.ts | 317 ++++++++++++++++++ .../theme/_json/eui_theme_borealis_light.json | 314 +++++++++++++++++ .../_json/eui_theme_borealis_light.json.d.ts | 317 ++++++++++++++++++ 5 files changed, 1267 insertions(+) create mode 100644 packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json create mode 100644 packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts create mode 100644 packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json create mode 100644 packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts diff --git a/packages/eui/scripts/compile-scss.js b/packages/eui/scripts/compile-scss.js index 07d12551b29..f5be3ceaf32 100755 --- a/packages/eui/scripts/compile-scss.js +++ b/packages/eui/scripts/compile-scss.js @@ -15,6 +15,11 @@ async function compileScssFiles({ 'eui_theme_amsterdam_light.json', 'eui_theme_amsterdam_dark.json.d.ts', 'eui_theme_amsterdam_light.json.d.ts', + /* TODO: temp files only, remove once imports from theme package work as expected */ + 'eui_theme_borealis_dark.json', + 'eui_theme_borealis_light.json', + 'eui_theme_borealis_dark.json.d.ts', + 'eui_theme_borealis_light.json.d.ts', ]; await Promise.all( jsonFilesToCopy.map((fileName) => { diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json new file mode 100644 index 00000000000..37c668610c4 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json @@ -0,0 +1,314 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(255, 255, 255, 0.06)", + "euiTableSelectedColor": "#243147", + "euiTableHoverSelectedColor": "rgba(255, 255, 255, 0.06)", + "euiTableActionsBorderColor": "#2B394F", + "euiTableHoverClickableColor": "rgba(255, 255, 255, 0.06)", + "euiTableFocusClickableColor": "rgba(255, 255, 255, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#2B394F", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #2B394F", + "euiBorderThin": "1px solid #2B394F", + "euiBorderEditable": "2px dotted #2B394F", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#1D2A3E", + "euiButtonColorDisabledText": "#6A7FA0", + "euiButtonColorGhostDisabled": "#1D2A3E", + "euiButtonTypes": { + "primary": "#599DFF", + "accent": "#ED6BA2", + "accentSecondary": "#00BEB8", + "success": "#23BE8F", + "warning": "#FCD279", + "danger": "#F66D64", + "ghost": "#07101F", + "text": "#8E9FBC" + }, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#00BEB8", + "behindText": "#00BEB8" + }, + "euiColorVis1": { + "graphic": "#98E6E2", + "behindText": "#98E6E2" + }, + "euiColorVis2": { + "graphic": "#599DFF", + "behindText": "#599DFF" + }, + "euiColorVis3": { + "graphic": "#B4D5FF", + "behindText": "#B4D5FF" + }, + "euiColorVis4": { + "graphic": "#ED6BA2", + "behindText": "#ED6BA2" + }, + "euiColorVis5": { + "graphic": "#FFBED5", + "behindText": "#FFBED5" + }, + "euiColorVis6": { + "graphic": "#F66D64", + "behindText": "#F66D64" + }, + "euiColorVis7": { + "graphic": "#FFC0B8", + "behindText": "#FFC0B8" + }, + "euiColorVis8": { + "graphic": "#E6AB01", + "behindText": "#E6AB01" + }, + "euiColorVis9": { + "graphic": "#FCD279", + "behindText": "#FCD279" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#00BEB8", + "euiColorVis1": "#98E6E2", + "euiColorVis2": "#599DFF", + "euiColorVis3": "#B4D5FF", + "euiColorVis4": "#ED6BA2", + "euiColorVis5": "#FFBED5", + "euiColorVis6": "#F66D64", + "euiColorVis7": "#FFC0B8", + "euiColorVis8": "#E6AB01", + "euiColorVis9": "#FCD279", + "euiColorVis0_behindText": "#00BEB8", + "euiColorVis1_behindText": "#98E6E2", + "euiColorVis2_behindText": "#599DFF", + "euiColorVis3_behindText": "#B4D5FF", + "euiColorVis4_behindText": "#ED6BA2", + "euiColorVis5_behindText": "#FFBED5", + "euiColorVis6_behindText": "#F66D64", + "euiColorVis7_behindText": "#FFC0B8", + "euiColorVis8_behindText": "#E6AB01", + "euiColorVis9_behindText": "#FCD279", + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#07101F", + "euiFormBackgroundDisabledColor": "#1D2A3E", + "euiFormBackgroundReadOnlyColor": "#0B1628", + "euiFormBorderOpaqueColor": "#5054af", + "euiFormBorderColor": "#485975", + "euiFormBorderDisabledColor": "#485975", + "euiFormCustomControlDisabledIconColor": "#6A7FA0", + "euiFormCustomControlBorderColor": "#485975", + "euiFormControlDisabledColor": "#485975", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#8E9FBC", + "euiFormInputGroupLabelBackground": "#243147", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#8E9FBC", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#0B1628", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#2B394F", + "euiHeaderBreadcrumbColor": "#0D2F5E", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#0B1628", + "subdued": "#07101F", + "accent": "#351725", + "accentSecondary": "#03282B", + "primary": "#0A2342", + "success": "#092A26", + "warning": "#2C2721", + "danger": "#351721" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#599DFF", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.8, + "euiFocusTransparencyPercent": "80%", + "euiFocusBackgroundColor": "#243147", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#599DFF", + "euiColorAccent": "#ED6BA2", + "euiColorAccentSecondary": "#00BEB8", + "euiColorSuccess": "#23BE8F", + "euiColorWarning": "#FCD279", + "euiColorDanger": "#F66D64", + "euiColorEmptyShade": "#0B1628", + "euiColorLightestShade": "#172336", + "euiColorLightShade": "#243147", + "euiColorMediumShade": "#516381", + "euiColorDarkShade": "#7186A8", + "euiColorDarkestShade": "#CAD3E2", + "euiColorFullShade": "#FFFFFF", + "euiPageBackgroundColor": "#07101F", + "euiColorHighlight": "#1750BA", + "euiTextColor": "#E3E8F2", + "euiTitleColor": "#ECF1F9", + "euiTextSubduedColor": "#8E9FBC", + "euiColorDisabled": "#1D2A3E", + "euiColorPrimaryText": "#599DFF", + "euiColorSuccessText": "#23BE8F", + "euiColorAccentText": "#ED6BA2", + "euiColorAccentSecondaryText": "#00BEB8", + "euiColorWarningText": "#FCD279", + "euiColorDangerText": "#F66D64", + "euiColorDisabledText": "#6A7FA0", + "euiLinkColor": "#599DFF", + "euiColorChartLines": "#7186A8", + "euiColorChartBand": "#243147" +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts new file mode 100644 index 00000000000..fa529ceab02 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_dark.json.d.ts @@ -0,0 +1,317 @@ +declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorAccentSecondaryText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorChartLines: string; + euiColorChartBand: string; + }; + export default sassVariables; +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json new file mode 100644 index 00000000000..25537e2d6d9 --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json @@ -0,0 +1,314 @@ +{ + "euiZDataGrid": 999, + "euiZHeaderBelowDataGrid": 998, + "euiZDataGridCellPopover": 1000, + "euiDataGridCellPaddingS": "4px", + "euiDataGridCellPaddingM": "6px", + "euiDataGridCellPaddingL": "8px", + "euiTableHoverColor": "rgba(54, 95, 178, 0.06)", + "euiTableSelectedColor": "#EDEFF3", + "euiTableHoverSelectedColor": "rgba(54, 95, 178, 0.06)", + "euiTableActionsBorderColor": "#E3E8F2", + "euiTableHoverClickableColor": "rgba(54, 95, 178, 0.06)", + "euiTableFocusClickableColor": "rgba(54, 95, 178, 0.06)", + "euiContrastRatioText": 4.5, + "euiContrastRatioGraphic": 3, + "euiContrastRatioDisabled": 2, + "euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)", + "euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)", + "euiAnimSpeedExtraFast": "90ms", + "euiAnimSpeedFast": "150ms", + "euiAnimSpeedNormal": "250ms", + "euiAnimSpeedSlow": "350ms", + "euiAnimSpeedExtraSlow": "500ms", + "euiBorderWidthThin": "1px", + "euiBorderWidthThick": "2px", + "euiBorderColor": "#E3E8F2", + "euiBorderRadius": "6px", + "euiBorderRadiusSmall": "4px", + "euiBorderThick": "2px solid #E3E8F2", + "euiBorderThin": "1px solid #E3E8F2", + "euiBorderEditable": "2px dotted #E3E8F2", + "euiButtonHeight": "40px", + "euiButtonHeightSmall": "32px", + "euiButtonHeightXSmall": "24px", + "euiButtonColorDisabled": "#ECF1F9", + "euiButtonColorDisabledText": "#798EAF", + "euiButtonColorGhostDisabled": "#ECF1F9", + "euiButtonTypes": { + "primary": "#0B64DD", + "accent": "#BC1E70", + "accentSecondary": "#008B87", + "success": "#008A5E", + "warning": "#FACB3D", + "danger": "#C61E25", + "ghost": "#ffffff", + "text": "#5A6D8C" + }, + "euiPaletteColorBlind": { + "euiColorVis0": { + "graphic": "#00BEB8", + "behindText": "#00BEB8" + }, + "euiColorVis1": { + "graphic": "#98E6E2", + "behindText": "#98E6E2" + }, + "euiColorVis2": { + "graphic": "#599DFF", + "behindText": "#599DFF" + }, + "euiColorVis3": { + "graphic": "#B4D5FF", + "behindText": "#B4D5FF" + }, + "euiColorVis4": { + "graphic": "#ED6BA2", + "behindText": "#ED6BA2" + }, + "euiColorVis5": { + "graphic": "#FFBED5", + "behindText": "#FFBED5" + }, + "euiColorVis6": { + "graphic": "#F66D64", + "behindText": "#F66D64" + }, + "euiColorVis7": { + "graphic": "#FFC0B8", + "behindText": "#FFC0B8" + }, + "euiColorVis8": { + "graphic": "#E6AB01", + "behindText": "#E6AB01" + }, + "euiColorVis9": { + "graphic": "#FCD279", + "behindText": "#FCD279" + } + }, + "euiPaletteColorBlindKeys": "'euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9'", + "euiColorVis0": "#00BEB8", + "euiColorVis1": "#98E6E2", + "euiColorVis2": "#599DFF", + "euiColorVis3": "#B4D5FF", + "euiColorVis4": "#ED6BA2", + "euiColorVis5": "#FFBED5", + "euiColorVis6": "#F66D64", + "euiColorVis7": "#FFC0B8", + "euiColorVis8": "#E6AB01", + "euiColorVis9": "#FCD279", + "euiColorVis0_behindText": "#00BEB8", + "euiColorVis1_behindText": "#98E6E2", + "euiColorVis2_behindText": "#599DFF", + "euiColorVis3_behindText": "#B4D5FF", + "euiColorVis4_behindText": "#ED6BA2", + "euiColorVis5_behindText": "#FFBED5", + "euiColorVis6_behindText": "#F66D64", + "euiColorVis7_behindText": "#FFC0B8", + "euiColorVis8_behindText": "#E6AB01", + "euiColorVis9_behindText": "#FCD279", + "euiFontWeightLight": 300, + "euiFontWeightRegular": 400, + "euiFontWeightMedium": 450, + "euiFontWeightSemiBold": 500, + "euiFontWeightBold": 600, + "euiCodeFontWeightRegular": 400, + "euiCodeFontWeightBold": 600, + "euiFormMaxWidth": "400px", + "euiFormControlHeight": "40px", + "euiFormControlCompressedHeight": "32px", + "euiFormControlPadding": "12px", + "euiFormControlCompressedPadding": "8px", + "euiFormControlBorderRadius": "6px", + "euiFormControlCompressedBorderRadius": "4px", + "euiRadioSize": "16px", + "euiCheckBoxSize": "16px", + "euiCheckboxBorderRadius": "4px", + "euiSwitchHeight": "20px", + "euiSwitchWidth": "44px", + "euiSwitchThumbSize": "20px", + "euiSwitchIconHeight": "16px", + "euiSwitchHeightCompressed": "16px", + "euiSwitchWidthCompressed": "28px", + "euiSwitchThumbSizeCompressed": "16px", + "euiSwitchHeightMini": "10px", + "euiSwitchWidthMini": "22px", + "euiSwitchThumbSizeMini": "10px", + "euiFormBackgroundColor": "#F6F9FC", + "euiFormBackgroundDisabledColor": "#ECF1F9", + "euiFormBackgroundReadOnlyColor": "#FFFFFF", + "euiFormBorderOpaqueColor": "#1c2390", + "euiFormBorderColor": "#CAD3E2", + "euiFormBorderDisabledColor": "#CAD3E2", + "euiFormCustomControlDisabledIconColor": "#798EAF", + "euiFormCustomControlBorderColor": "#CAD3E2", + "euiFormControlDisabledColor": "#CAD3E2", + "euiFormControlBoxShadow": "0 0 rgba(0, 0, 0, 0)", + "euiFormControlPlaceholderText": "#5A6D8C", + "euiFormInputGroupLabelBackground": "#ECF1F9", + "euiFormInputGroupBorder": "none", + "euiSwitchOffColor": "#5A6D8C", + "euiFormControlIconSizes": { + "small": "12px", + "medium": "16px", + "large": "24px", + "xLarge": "32px", + "xxLarge": "40px" + }, + "euiFormControlLayoutGroupInputHeight": "38px", + "euiFormControlLayoutGroupInputCompressedHeight": "30px", + "euiFormControlLayoutGroupInputCompressedBorderRadius": "2px", + "euiHeaderBackgroundColor": "#FFFFFF", + "euiHeaderDarkBackgroundColor": "#0B1628", + "euiHeaderBorderColor": "#E3E8F2", + "euiHeaderBreadcrumbColor": "#D6E9FF", + "euiHeaderHeight": "48px", + "euiHeaderChildSize": "40px", + "euiHeaderHeightCompensation": "48px", + "euiPageDefaultMaxWidth": "1200px", + "euiPageSidebarMinWidth": "192px", + "euiPanelPaddingModifiers": { + "paddingSmall": "8px", + "paddingMedium": "16px", + "paddingLarge": "24px" + }, + "euiPanelBorderRadiusModifiers": { + "borderRadiusNone": 0, + "borderRadiusMedium": "6px" + }, + "euiPanelBackgroundColorModifiers": { + "transparent": "rgba(0, 0, 0, 0)", + "plain": "#FFFFFF", + "subdued": "#F6F9FC", + "accent": "#FFEBF5", + "accentSecondary": "#E2F9F7", + "primary": "#E5F3FF", + "success": "#E2F8F0", + "warning": "#FDF3D8", + "danger": "#FFE8E5" + }, + "euiBreakpoints": { + "xs": 0, + "s": "575px", + "m": "768px", + "l": "992px", + "xl": "1200px" + }, + "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'", + "euiShadowColor": "#000000", + "euiSize": "16px", + "euiSizeXS": "4px", + "euiSizeS": "8px", + "euiSizeM": "12px", + "euiSizeL": "24px", + "euiSizeXL": "32px", + "euiSizeXXL": "40px", + "euiScrollBar": "16px", + "euiScrollBarCorner": "4px", + "euiScrollBarCornerThin": "6px", + "euiFocusRingColor": "#1750BA", + "euiFocusRingAnimStartColor": "rgba(0, 0, 0, 0)", + "euiFocusRingAnimStartSize": "2px", + "euiFocusRingAnimStartSizeLarge": "10px", + "euiFocusRingSizeLarge": "4px", + "euiFocusRingSize": "2px", + "euiFocusTransparency": 0.9, + "euiFocusTransparencyPercent": "90%", + "euiFocusBackgroundColor": "#ECF1F9", + "euiFontFamily": "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", + "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace", + "euiFontFeatureSettings": "calt 1 kern 1 liga 1", + "euiTextScale": "1,875, 1.5, 1.25, 1, .875, .75", + "euiFontSize": "14px", + "euiFontSizeXS": "12px", + "euiFontSizeS": "14px", + "euiFontSizeM": "16px", + "euiFontSizeL": "20px", + "euiFontSizeXL": "24px", + "euiFontSizeXXL": "30px", + "euiLineHeight": 1.5, + "euiBodyLineHeight": 1.142857143, + "euiTitles": { + "xxxs": { + "font-size": "12px", + "line-height": "1.1429rem", + "font-weight": 600 + }, + "xxs": { + "font-size": "14px", + "line-height": "1.4286rem", + "font-weight": 600 + }, + "xs": { + "font-size": "16px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "s": { + "font-size": "20px", + "line-height": "1.7143rem", + "font-weight": 600 + }, + "m": { + "font-size": "24px", + "line-height": "2rem", + "font-weight": 600 + }, + "l": { + "font-size": "30px", + "line-height": "2.5714rem", + "font-weight": 600 + } + }, + "euiZLevel0": 0, + "euiZLevel1": 1000, + "euiZLevel2": 2000, + "euiZLevel3": 3000, + "euiZLevel4": 4000, + "euiZLevel5": 5000, + "euiZLevel6": 6000, + "euiZLevel7": 7000, + "euiZLevel8": 8000, + "euiZLevel9": 9000, + "euiZToastList": 9000, + "euiZModal": 8000, + "euiZMask": 6000, + "euiZNavigation": 6000, + "euiZContentMenu": 2000, + "euiZHeader": 1000, + "euiZFlyout": 1000, + "euiZMaskBelowHeader": 1000, + "euiZContent": 0, + "euiColorGhost": "#FFFFFF", + "euiColorInk": "#000000", + "euiColorPrimary": "#0B64DD", + "euiColorAccent": "#BC1E70", + "euiColorAccentSecondary": "#008B87", + "euiColorSuccess": "#008A5E", + "euiColorWarning": "#FACB3D", + "euiColorDanger": "#C61E25", + "euiColorEmptyShade": "#FFFFFF", + "euiColorLightestShade": "#ECF1F9", + "euiColorLightShade": "#CAD3E2", + "euiColorMediumShade": "#8E9FBC", + "euiColorDarkShade": "#5A6D8C", + "euiColorDarkestShade": "#2B394F", + "euiColorFullShade": "#07101F", + "euiPageBackgroundColor": "#F6F9FC", + "euiColorHighlight": "#E5F3FF", + "euiTextColor": "#172336", + "euiTitleColor": "#111C2C", + "euiTextSubduedColor": "#5A6D8C", + "euiColorDisabled": "#E3E8F2", + "euiColorPrimaryText": "#1750BA", + "euiColorSuccessText": "#09724D", + "euiColorAccentText": "#A11262", + "euiColorAccentSecondaryText": "#047471", + "euiColorWarningText": "#6A4906", + "euiColorDangerText": "#A71627", + "euiColorDisabledText": "#798EAF", + "euiLinkColor": "#0B64DD", + "euiColorChartLines": "#CAD3E2", + "euiColorChartBand": "#F6F9FC" +} diff --git a/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts new file mode 100644 index 00000000000..cb9df9a66ea --- /dev/null +++ b/packages/eui/src-docs/src/views/theme/_json/eui_theme_borealis_light.json.d.ts @@ -0,0 +1,317 @@ +declare module '@elastic/eui/dist/eui_theme_borealis_light.json' { + const sassVariables: { + euiZDataGrid: number; + euiZHeaderBelowDataGrid: number; + euiZDataGridCellPopover: number; + euiDataGridCellPaddingS: string; + euiDataGridCellPaddingM: string; + euiDataGridCellPaddingL: string; + euiTableHoverColor: string; + euiTableSelectedColor: string; + euiTableHoverSelectedColor: string; + euiTableActionsBorderColor: string; + euiTableHoverClickableColor: string; + euiTableFocusClickableColor: string; + euiContrastRatioText: number; + euiContrastRatioGraphic: number; + euiContrastRatioDisabled: number; + euiAnimSlightBounce: string; + euiAnimSlightResistance: string; + euiAnimSpeedExtraFast: string; + euiAnimSpeedFast: string; + euiAnimSpeedNormal: string; + euiAnimSpeedSlow: string; + euiAnimSpeedExtraSlow: string; + euiBorderWidthThin: string; + euiBorderWidthThick: string; + euiBorderColor: string; + euiBorderRadius: string; + euiBorderRadiusSmall: string; + euiBorderThick: string; + euiBorderThin: string; + euiBorderEditable: string; + euiButtonHeight: string; + euiButtonHeightSmall: string; + euiButtonHeightXSmall: string; + euiButtonColorDisabled: string; + euiButtonColorDisabledText: string; + euiButtonColorGhostDisabled: string; + euiButtonTypes: { + primary: string; + accent: string; + accentSecondary: string; + success: string; + warning: string; + danger: string; + ghost: string; + text: string; + }; + euiPaletteColorBlind: { + euiColorVis0: { + graphic: string; + behindText: string; + }; + euiColorVis1: { + graphic: string; + behindText: string; + }; + euiColorVis2: { + graphic: string; + behindText: string; + }; + euiColorVis3: { + graphic: string; + behindText: string; + }; + euiColorVis4: { + graphic: string; + behindText: string; + }; + euiColorVis5: { + graphic: string; + behindText: string; + }; + euiColorVis6: { + graphic: string; + behindText: string; + }; + euiColorVis7: { + graphic: string; + behindText: string; + }; + euiColorVis8: { + graphic: string; + behindText: string; + }; + euiColorVis9: { + graphic: string; + behindText: string; + }; + }; + euiPaletteColorBlindKeys: string; + euiColorVis0: string; + euiColorVis1: string; + euiColorVis2: string; + euiColorVis3: string; + euiColorVis4: string; + euiColorVis5: string; + euiColorVis6: string; + euiColorVis7: string; + euiColorVis8: string; + euiColorVis9: string; + euiColorVis0_behindText: string; + euiColorVis1_behindText: string; + euiColorVis2_behindText: string; + euiColorVis3_behindText: string; + euiColorVis4_behindText: string; + euiColorVis5_behindText: string; + euiColorVis6_behindText: string; + euiColorVis7_behindText: string; + euiColorVis8_behindText: string; + euiColorVis9_behindText: string; + euiFontWeightLight: number; + euiFontWeightRegular: number; + euiFontWeightMedium: number; + euiFontWeightSemiBold: number; + euiFontWeightBold: number; + euiCodeFontWeightRegular: number; + euiCodeFontWeightBold: number; + euiFormMaxWidth: string; + euiFormControlHeight: string; + euiFormControlCompressedHeight: string; + euiFormControlPadding: string; + euiFormControlCompressedPadding: string; + euiFormControlBorderRadius: string; + euiFormControlCompressedBorderRadius: string; + euiRadioSize: string; + euiCheckBoxSize: string; + euiCheckboxBorderRadius: string; + euiSwitchHeight: string; + euiSwitchWidth: string; + euiSwitchThumbSize: string; + euiSwitchIconHeight: string; + euiSwitchHeightCompressed: string; + euiSwitchWidthCompressed: string; + euiSwitchThumbSizeCompressed: string; + euiSwitchHeightMini: string; + euiSwitchWidthMini: string; + euiSwitchThumbSizeMini: string; + euiFormBackgroundColor: string; + euiFormBackgroundDisabledColor: string; + euiFormBackgroundReadOnlyColor: string; + euiFormBorderOpaqueColor: string; + euiFormBorderColor: string; + euiFormBorderDisabledColor: string; + euiFormCustomControlDisabledIconColor: string; + euiFormCustomControlBorderColor: string; + euiFormControlDisabledColor: string; + euiFormControlBoxShadow: string; + euiFormControlPlaceholderText: string; + euiFormInputGroupLabelBackground: string; + euiFormInputGroupBorder: string; + euiSwitchOffColor: string; + euiFormControlIconSizes: { + small: string; + medium: string; + large: string; + xLarge: string; + xxLarge: string; + }; + euiFormControlLayoutGroupInputHeight: string; + euiFormControlLayoutGroupInputCompressedHeight: string; + euiFormControlLayoutGroupInputCompressedBorderRadius: string; + euiHeaderBackgroundColor: string; + euiHeaderDarkBackgroundColor: string; + euiHeaderBorderColor: string; + euiHeaderBreadcrumbColor: string; + euiHeaderHeight: string; + euiHeaderChildSize: string; + euiHeaderHeightCompensation: string; + euiPageDefaultMaxWidth: string; + euiPageSidebarMinWidth: string; + euiPanelPaddingModifiers: { + paddingSmall: string; + paddingMedium: string; + paddingLarge: string; + }; + euiPanelBorderRadiusModifiers: { + borderRadiusNone: number; + borderRadiusMedium: string; + }; + euiPanelBackgroundColorModifiers: { + transparent: string; + plain: string; + subdued: string; + accent: string; + accentSecondary: string; + primary: string; + success: string; + warning: string; + danger: string; + }; + euiBreakpoints: { + xs: number; + s: string; + m: string; + l: string; + xl: string; + }; + euiBreakpointKeys: string; + euiShadowColor: string; + euiSize: string; + euiSizeXS: string; + euiSizeS: string; + euiSizeM: string; + euiSizeL: string; + euiSizeXL: string; + euiSizeXXL: string; + euiScrollBar: string; + euiScrollBarCorner: string; + euiScrollBarCornerThin: string; + euiFocusRingColor: string; + euiFocusRingAnimStartColor: string; + euiFocusRingAnimStartSize: string; + euiFocusRingAnimStartSizeLarge: string; + euiFocusRingSizeLarge: string; + euiFocusRingSize: string; + euiFocusTransparency: number; + euiFocusTransparencyPercent: string; + euiFocusBackgroundColor: string; + euiFontFamily: string; + euiCodeFontFamily: string; + euiFontFeatureSettings: string; + euiTextScale: string; + euiFontSize: string; + euiFontSizeXS: string; + euiFontSizeS: string; + euiFontSizeM: string; + euiFontSizeL: string; + euiFontSizeXL: string; + euiFontSizeXXL: string; + euiLineHeight: number; + euiBodyLineHeight: number; + euiTitles: { + xxxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xxs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + xs: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + s: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + m: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + l: { + 'font-size': string; + 'line-height': string; + 'font-weight': number; + }; + }; + euiZLevel0: number; + euiZLevel1: number; + euiZLevel2: number; + euiZLevel3: number; + euiZLevel4: number; + euiZLevel5: number; + euiZLevel6: number; + euiZLevel7: number; + euiZLevel8: number; + euiZLevel9: number; + euiZToastList: number; + euiZModal: number; + euiZMask: number; + euiZNavigation: number; + euiZContentMenu: number; + euiZHeader: number; + euiZFlyout: number; + euiZMaskBelowHeader: number; + euiZContent: number; + euiColorGhost: string; + euiColorInk: string; + euiColorPrimary: string; + euiColorAccent: string; + euiColorAccentSecondary: string; + euiColorSuccess: string; + euiColorWarning: string; + euiColorDanger: string; + euiColorEmptyShade: string; + euiColorLightestShade: string; + euiColorLightShade: string; + euiColorMediumShade: string; + euiColorDarkShade: string; + euiColorDarkestShade: string; + euiColorFullShade: string; + euiPageBackgroundColor: string; + euiColorHighlight: string; + euiTextColor: string; + euiTitleColor: string; + euiTextSubduedColor: string; + euiColorDisabled: string; + euiColorPrimaryText: string; + euiColorSuccessText: string; + euiColorAccentText: string; + euiColorAccentSecondaryText: string; + euiColorWarningText: string; + euiColorDangerText: string; + euiColorDisabledText: string; + euiLinkColor: string; + euiColorChartLines: string; + euiColorChartBand: string; + }; + export default sassVariables; +}